/*
==========================================================================
    ЧАСТЬ 1: ГЛОБАЛЬНЫЕ НАСТРОЙКИ И НОВЫЙ АНИМИРОВАННЫЙ ФОН
==========================================================================
*/
:root {
    /* ... ваши переменные остаются без изменений ... */
    --primary-color: #00A98F;
    --primary-hover: #1DE9B6;
    --background-dark: #0c0c0f; /* Новый, более глубокий цвет фона */
    --background-panel: #161b22;
    --background-card-gradient: linear-gradient(-45deg, #0d1117, #003c3c, #0d1117, #004e3c);
    --border-color: rgba(255, 255, 255, 0.1);
    --text-color: #EAEAEA;
    --text-muted-color: #8D96A0;
    --glow-color: rgb(0, 225, 185);
}

/* --- Новый фон для BODY --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-dark) !important;
    color: var(--text-color) !important;
    position: relative; /* Необходимо для позиционирования псевдо-элемента */
}

/* --- Слой с анимированными "шарами" --- */
body::before {
    content: '';
    position: fixed; /* Fixed, чтобы фон не скроллился вместе с контентом */
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1; /* Размещаем фон под всем контентом */

    background-image:
        radial-gradient(circle, #005f73 0%, transparent 60%),
        radial-gradient(circle, #004b23 0%, transparent 70%);

    background-repeat: no-repeat;
    background-size: 0 0, 0 0;
    background-position: 20% 120%, 80% -20%;
    animation: float-final 35s linear infinite;
}

/* --- Анимация для фона --- */
@keyframes float-final {
    0%   { background-size: 0 0, 0 0; opacity: 0; }
    10%  { background-size: 220vmax 220vmax, 210vmax 210vmax; opacity: 0.25; } /* <-- ЗДЕСЬ ИЗМЕНЕНИЯ */
    80%  { background-position: 80% -20%, 20% 120%; opacity: 0.25; }
    100% { background-size: 0 0, 0 0; background-position: 80% -20%, 20% 120%; opacity: 0; }
}

/* --- Старая анимация (больше не нужна для фона, но нужна для карточек) --- */
@keyframes animateGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

a {
    color: var(--primary-hover);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: #fff;
}

/*
==========================================================================
    ЧАСТЬ 2: НАВИГАЦИЯ (HEADER & SIDEBAR) - ФИНАЛЬНАЯ ВЕРСИЯ
==========================================================================
*/

/* --- Верхняя панель (Header) --- */
header.navbar {
    /* Фон, как у карточек */
    background: var(--background-card-gradient) !important;
    background-size: 400% 400% !important;
    animation: animateGradient 15s ease infinite !important;
    
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.5rem 0 !important;
    
    /* Решение проблемы перекрытия */
    position: sticky !important; /* Убеждаемся, что он "липкий" */
    top: 0;
    z-index: 1030 !important; /* Ставим его поверх всего остального контента */
}

/* --- Решение проблемы перекрытия для контента --- */
main,
.sidebar {
    padding-top: 72px !important; /* Добавляем отступ сверху, равный высоте хедера */
}


.navbar-brand {
    font-weight: 700 !important;
    color: var(--text-color) !important;
    transition: color 0.2s ease;
}
.navbar-brand:hover {
    color: var(--primary-hover) !important;
}

.navbar-nav .nav-link {
    font-weight: 500;
    color: var(--text-muted-color) !important;
    transition: color 0.2s ease;
}
.navbar-nav .nav-link:hover {
    color: #fff !important;
}

/* Стилизуем переключатель языка в хедере */
.navbar .form-select {
    background-color: #2a2a30 !important;
    border: 1px solid #444 !important;
    border-radius: 8px !important;
    color: var(--text-color) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* --- Боковая панель (Sidebar) --- */
.sidebar {
    background-color: var(--background-panel) !important;
    border-right: 1px solid var(--border-color) !important;
}

.sidebar .nav-link {
    color: var(--text-muted-color);
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    padding: 12px 24px;
    border-radius: 0 50px 50px 0;
    margin-right: 20px;
}
.sidebar .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.05);
}
.sidebar .nav-link.active {
    color: var(--primary-hover) !important;
    font-weight: 700;
    border-left-color: var(--primary-color);
    background-color: rgba(0, 169, 143, 0.1);
}

/* --- Боковая панель (Sidebar) --- */
.sidebar {
    /* --- НОВЫЙ АНИМИРОВАННЫЙ ФОН --- */
    background: var(--background-card-gradient) !important;
    background-size: 400% 400% !important;
    animation: animateGradient 15s ease infinite !important;
    
    border-right: 1px solid var(--border-color) !important;
    padding-top: 72px !important; /* Этот отступ от хедера оставляем! */
}
/*
==========================================================================
    ЧАСТЬ 3: СТИЛИ ДЛЯ КАРТОЧЕК (без изменений)
==========================================================================
*/
.card {
    border-radius: 15px !important;
    border: 1px solid var(--border-color) !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    background: var(--background-card-gradient) !important;
    background-size: 400% 400% !important;
    animation: animateGradient 15s ease infinite !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 225, 185, 0.5) !important;
}

.card::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle 300px at var(--mouse-x) var(--mouse-y), var(--glow-color), transparent 80%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 0;
}
.card:hover::before { opacity: 0.15; }
.card > * { position: relative; z-index: 1; }
.card-header, .card-body, .card-footer { background: none !important; border: none !important; }
.card-title { color: #fff !important; }

/*
==========================================================================
    ЧАСТЬ 4: КНОПКИ И ЭЛЕМЕНТЫ ФОРМ - ПОЛНОСТЬЮ ОБНОВЛЕНО
==========================================================================
*/
.btn { 
    border-radius: 8px; 
    font-weight: 700; 
    padding: .6rem 1.2rem; 
    transition: all 0.2s ease; 
    border: none !important;
    transform: scale(1); /* Начальное состояние для transform */
}
.btn:hover {
    transform: translateY(-2px);
}

/* Основная кнопка */
.btn-primary { background-color: var(--primary-color) !important; color: #fff !important; }
.btn-primary:hover { 
    background-color: var(--primary-hover) !important; 
    box-shadow: 0 4px 15px rgba(0, 169, 143, 0.3);
}

/* Второстепенная кнопка */
.btn-secondary { 
    background-color: #30363d !important; 
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}
.btn-secondary:hover { 
    background-color: #484f58 !important;
    border-color: #8b949e !important;
}

/* Кнопка Успеха */
.btn-success { background-color: var(--success-color) !important; color: #fff !important; }
.btn-success:hover { 
    background-color: #4CAF50 !important;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

/* Кнопка Опасности */
.btn-danger { background-color: var(--danger-color) !important; color: #fff !important; }
.btn-danger:hover { 
    background-color: #D32F2F !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3);
}

/* Кнопка Предупреждения */
.btn-warning { background-color: var(--warning-color) !important; color: #fff !important; }
.btn-warning:hover { 
    background-color: #FBC02D !important;
    box-shadow: 0 4px 15px rgba(251, 192, 45, 0.3);
}

/* Кнопка Информации */
.btn-info { background-color: var(--info-color) !important; color: #fff !important; }
.btn-info:hover { 
    background-color: #2196F3 !important;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

/* Поля ввода */
.form-control, .form-select {
    background-color: var(--input-bg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    color: var(--text-color) !important;
    padding: .8rem 1rem !important;
    height: auto !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control::placeholder, .form-select::placeholder {
    color: var(--text-muted-color) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(0, 169, 143, 0.3) !important;
    background-color: var(--background-dark) !important;
}

/*
==========================================================================
    ЧАСТЬ 5: СТИЛИ ДЛЯ СТРАНИЦ ВХОДА И РЕГИСТРАЦИИ (без изменений)
==========================================================================
*/
.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 2rem;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem;
}
.auth-card .form-control { padding: 1rem !important; }
.auth-card .btn {
    padding: 1rem;
    font-size: 1rem;
    text-transform: uppercase;
}

/*
==========================================================================
    ИСПРАВЛЕНИЕ ДЛЯ ФОНА В СПИСКАХ ВНУТРИ КАРТОЧЕК
==========================================================================
*/
.card .list-group-item {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.05) !important; /* Едва заметный разделитель */
}

/*
==========================================================================
    СТИЛИ ДЛЯ НОВОЙ КНОПКИ-ПЕРЕКЛЮЧАТЕЛЯ ЯЗЫКА
==========================================================================
*/
.lang-switcher-form {
    margin: 0; /* Убираем лишние отступы у формы */
}

.btn-lang-switcher {
    background-color: var(--background-panel) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    font-weight: 500;
    padding: 0.4rem 1rem !important;
}

.btn-lang-switcher:hover {
    border-color: var(--primary-color) !important;
    background-color: rgba(0, 169, 143, 0.1) !important;
    transform: translateY(0) !important; /* Отключаем "подпрыгивание" для этой кнопки */
    box-shadow: none !important;
}

/*
==========================================================================
    СТИЛИ ДЛЯ МОДАЛЬНЫХ ОКОН (MODALS)
==========================================================================
*/
.modal-content {
    /* Применяем тот же "стеклянный" стиль, что и у карточек */
    background: var(--background-card-gradient) !important;
    background-size: 400% 400% !important;
    animation: animateGradient 15s ease infinite !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 15px !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-color) !important;
}

.modal-footer {
    border-top: 1px solid var(--border-color) !important;
}

/* Стили для полей ввода и Select2 внутри модального окна */
.modal-body .form-control,
.modal-body .select2-container--default .select2-selection--single {
    background-color: var(--input-bg-color) !important;
}

.modal-body .select2-dropdown {
    background: #2D3339 !important;
    border: 1px solid var(--border-color) !important;
}

/* Стили для поля с лицензионным ключом */
.key-container {
    background-color: var(--input-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.key-container:hover {
    border-color: var(--primary-color);
    background-color: rgba(0, 169, 143, 0.1);
}
.key-container code {
    font-family: monospace;
    font-size: 1.1rem;
    color: var(--text-color);
}
.key-container svg {
    color: var(--text-muted-color);
}