/* === ОСНОВНЫЕ ПЕРЕМЕННЫЕ И СБРОС === */
:root {
    --bg-deep: #050505;
    --bg-card: #111111;
    --bg-hover: #1a1a1a;
    --text-main: #ffffff;
    --text-dim: #888888;
    --border: #333333;
    --accent: #ffffff; 
    --danger: #ff5555;
}

body {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--text-main);
    min-height: 100vh;
    
    /* 🔥 НОВЫЙ ФОН #0E0E0E */
    background-color: #0B0B0D; 
    
    /* Обновил градиент, чтобы он плавно переходил в #0E0E0E */
    background-image: none;
    background-attachment: fixed;
}

/* Скроллбар */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Выделение текста */
::selection { background: rgba(255, 255, 255, 0.2); color: #fff; }

a { text-decoration: none; color: inherit; transition: 0.2s; }

/* --- НАВИГАЦИЯ (ОБЩАЯ) --- */
.navbar {
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.main-nav {
    position: fixed; /* Фиксируем меню сверху */
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: rgba(0, 0, 0, 0.85); /* Полупрозрачный черный */
    backdrop-filter: blur(12px); /* Эффект матового стекла (как в macOS) */
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-container {
    max-width: 1140px; /* Ширина контента как у основного блока */
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Ссылка внутри лого (если добавил <a>) */
.logo a {
    position: relative; /* Важно для позиционирования картинок внутри */
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.logo-video {
    height: 45px; /* Высота видео (чуть меньше высоты меню 70px) */
    width: auto;  /* Ширина подстроится автоматически */
    object-fit: contain; /* Сохраняем пропорции, не обрезая */
    
    /* Если видео имеет черный фон, а меню полупрозрачное,
       можно добавить скругление, чтобы углы не торчали */
    border-radius: 6px; 
}

/* Настройки самой картинки */
.logo img {
    height: 32px; /* Высота логотипа (подбери под свой хедер) */
    width: auto;
    transition: all 0.3s ease-in-out; /* Плавная анимация */
}

/* 1. НАЧАЛЬНОЕ ЛОГО (logo.png) */
.logo-initial {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 2. ЛОГО ПРИ СКРОЛЛЕ (logo2.png) */
.logo-scrolled {
    position: absolute; /* Накладываем поверх первого */
    left: 0;            /* Прижимаем к левому краю */
    opacity: 0;         /* Скрыто по умолчанию */
    visibility: hidden;
    transform: translateY(10px); /* Слегка опущено вниз для анимации выезда */
}

/* === ЭФФЕКТ КОГДА ДОБАВЛЕН КЛАСС .scrolled === */

/* Скрываем начальное лого (улетает вверх) */
.main-nav.scrolled .logo-initial {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
}

/* Показываем второе лого (выезжает на место) */
.main-nav.scrolled .logo-scrolled {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.logo .dot {
    width: 8px;
    height: 8px;
    background: #007aff; /* Синяя точка (акцент) */
    border-radius: 50%;
}

/* Ссылки (Продукты, Цены...) */
.nav-links {
    display: flex;
    gap: 32px;
}

.nav-links a {
    color: #999; /* Серый цвет по умолчанию */
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: #fff; /* Белый при наведении */
}

/* Правая часть (Войти + Кнопка) */
.nav-auth {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Ссылка "Войти" */
.login-link {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.2s;
}
.login-link:hover {
    opacity: 0.8;
}

/* Кнопка "Попробовать" (Маленькая синяя) */
.btn-primary-sm {
    background-color: #BB86FC;
    color: black;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.1s;
}

.btn-primary-sm:hover {
    background-color: #A65FFC;
    transform: translateY(-1px);
}

.logout-btn { color: #666; font-size: 13px; font-weight: 500; }
.logout-btn:hover { color: #fff; }

/* --- ДАШБОРД (КАБИНЕТ) --- */
.dashboard {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

.welcome-box { margin-bottom: 40px; }
.welcome-box h1 { margin: 0; font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.welcome-box p { color: var(--text-dim); margin-top: 5px; font-size: 14px; }

/* Кнопка активации */
/* =========================================
   КНОПКА АКТИВАЦИИ КЛЮЧА
   ========================================= */
.activate-btn {
    background: #101012; 
    color: #555555; /* Серый текст */
    border: 1px solid #333; 
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Эффект при наведении (Загорается фиолетовым) */
.activate-btn:hover {
    border-color: #BB86FC; 
    color: #BB86FC; /* Текст тоже становится фиолетовым */
    background: rgba(255, 255, 255, 0.02); 
}

/* Иконка ключа (Используем mask-image для перекраски PNG) */
.activate-btn::before {
    content: ""; 
    display: inline-block; 
    width: 16px; 
    height: 16px;
    margin-right: 8px;
    background-color: #555555; /* Базовый серый цвет иконки */
    
    /* Магия маски: берем форму из PNG */
    -webkit-mask-image: url('visual/key.png');
    mask-image: url('visual/key.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    transition: all 0.2s ease;
}

/* Красим иконку в фиолетовый при наведении на кнопку */
.activate-btn:hover::before {
    background-color: #BB86FC;
}

/* --- КАРТОЧКИ СТАТИСТИКИ --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--bg-card);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: relative;
    /* overflow: hidden; <--- УБРАЛИ, ЧТОБЫ ТУЛТИП МОГ ТОРЧАТЬ */
}

/* Специфично для карточки ПК, чтобы тултип не обрезался */
.workstation-card {
    overflow: visible !important; 
    z-index: 10;
}

.stat-card h3 { 
    margin: 0 0 15px 0; font-size: 11px; color: #555; 
    text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700;
}

/* Статусы */
.badge {
    align-self: flex-start;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 1px;
}
.badge.pro { 
    background: #bb86fc;          /* Твой фиолетовый цвет */
    color: #000;                  /* Черный текст для контраста */
    box-shadow: 0 0 25px rgba(187, 134, 252, 0.4); /* Фиолетовое свечение */
    border: 1px solid #bb86fc;    /* Обводка (на всякий случай) */
}
.badge.free { background: #222; color: #888; border: 1px solid #333; }
.badge.expired { background: rgba(255, 85, 85, 0.1); color: var(--danger); border: 1px solid var(--danger); }

.big-number { font-size: 42px; font-weight: 800; color: #fff; }
.subtext { font-size: 12px; color: #555; margin-top: 5px; }

.stat-card.full-width { grid-column: 1 / -1; }

/* --- ХАРАКТЕРИСТИКИ ПК --- */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}
.spec-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid #222;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.2s;
}
.spec-item:hover { background: rgba(255,255,255,0.05); border-color: #444; }

.spec-icon {
    width: 36px; height: 36px;
    background: rgba(187, 134, 252, 0.05);
    border: 1px solid #333;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: #bb86fc;
    border-color: rgba(187, 134, 252, 0.3);
    
}
.spec-icon svg { width: 18px; height: 18px; }

.spec-info { display: flex; flex-direction: column; overflow: hidden; }
.spec-info .label { font-size: 9px; color: #555; text-transform: uppercase; font-weight: 700; margin-bottom: 2px; }
.spec-info .value { font-size: 13px; color: #ddd; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: monospace; }

/* --- HWID И КНОПКА UNLINK --- */
.hwid-container {
    margin-top: 20px; padding-top: 20px; border-top: 1px solid #222;
    display: flex; justify-content: space-between; align-items: center;
}
.hwid-info { display: flex; flex-direction: column; gap: 4px; }
.hwid-label { font-size: 9px; color: #555; text-transform: uppercase; font-weight: 700; }
.hwid-code-box { display: inline-block; }

.hwid-code {
    font-family: monospace; color: #666; background: #000;
    padding: 6px 10px; border-radius: 4px; font-size: 12px; border: 1px solid #222;
}

/* === 🔥 ВОССТАНОВЛЕННЫЕ СТИЛИ ПОДСКАЗКИ (TOOLTIP) === */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

/* Кнопка сброса (Unlink) */
.reset-link-btn {
    display: flex; align-items: center; gap: 8px;
    color: #888; font-size: 11px; font-weight: 600; text-transform: uppercase;
    transition: 0.2s;
    background: transparent;
    border: 1px solid transparent;
    padding: 6px 12px;
    border-radius: 6px;
}
.reset-link-btn:hover { 
    color: #fff; 
    background: rgba(255,255,255,0.05); 
    border-color: #333;
}

/* Сама всплывающая подсказка */
.tooltip-text {
    visibility: hidden;
    opacity: 0;
    
    position: absolute; 
    width: 220px;
    background: #0e0e0e; /* Черный фон */
    color: #ccc;
    text-align: center;
    border: 1px solid #333; /* Серый бортик */
    border-radius: 8px;
    padding: 10px;
    font-size: 11px;
    
    /* Позиция над кнопкой */
    bottom: 45px; 
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    
    z-index: 1000;
    pointer-events: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

/* Стрелочка снизу подсказки */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent; /* Цвет стрелки совпадает с рамкой */
}

/* Показываем при наведении */
.tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Кнопка ожидания (Cooldown) */
.reset-cooldown-btn {
    display: flex; align-items: center; gap: 8px;
    background: #111; border: 1px solid #222; color: #444;
    padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 700;
    cursor: help;
}

/* === AI ДВОЙНАЯ СЕТКА === */
.ai-two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две равные колонки */
    gap: 20px;
    margin-top: 30px;
}

/* Карточка AI (общий класс для обоих блоков) */
.ai-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    height: 100%; /* Чтобы они были одинаковой высоты */
}

/* Заголовки и иконки */
.ai-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #222;
}

.ai-title-group { display: flex; gap: 12px; align-items: center; }

.ai-icon-bg {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, #2a2a2a, #111);
    border: 1px solid #333; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff;
    flex-shrink: 0;
}

.ai-title-group h3 { margin: 0; font-size: 15px; color: #fff; font-weight: 600; }
.ai-title-group p { margin: 3px 0 0; font-size: 11px; color: #666; }

/* Кнопка сброса */
.reset-ai-btn {
    display: flex; align-items: center; gap: 6px; padding: 5px 10px;
    background: rgba(255, 85, 85, 0.05); color: var(--danger);
    border: 1px solid rgba(255, 85, 85, 0.2); border-radius: 6px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; transition: 0.2s;
    white-space: nowrap;
}
.reset-ai-btn:hover { background: rgba(255, 85, 85, 0.15); border-color: var(--danger); }

/* СПИСКИ */
.top-sounds-list { display: flex; flex-direction: column; gap: 4px; }

.sound-row {
    display: flex; align-items: center; gap: 12px; padding: 10px;
    border-radius: 6px; transition: background 0.2s; border: 1px solid transparent;
}
.sound-row:hover { background: #181818; border-color: #222; }

/* Ранги */
/* === РЕЙТИНГИ (Фиолетовый градиент) === */

/* Общий стиль для кружочка с номером */
/* === РЕЙТИНГИ (Фиолетовый градиент, Квадратные) === */

/* Общий стиль для плашки с номером */
/* === РЕЙТИНГИ (Компактные, Без свечения) === */

/* === РЕЙТИНГИ (Компактные, Фон #111111, Без свечения) === */

.sound-rank {
    /* Уменьшили размер с 32px до 24px (~25%) */
    width: 24px;
    height: 24px;
    
    /* Скорректировали радиус под новый размер */
    border-radius: 6px; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-weight: 700;
    /* Уменьшили шрифт, чтобы влез в новый размер */
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    
    margin-right: 10px; /* Чуть уменьшили отступ */
    flex-shrink: 0;
    transition: all 0.3s ease;
    
    /* 🔥 Новый фон и фиолетовая обводка/текст */
    background: #111111;       
    border: 1.5px solid #bb86fc;
    color: #bb86fc;
}

/* --- ТОП 1: Акцент без свечения --- */
.rank-1 {
    /* Свечение (box-shadow) убрано полностью */
    border-color: #bb86fc;
    color: #bb86fc;
    /* Оставляем небольшое увеличение для выделения */
    transform: scale(1.05);
}

/* --- ТОП 2 и 3: Чуть прозрачнее --- */
.rank-2, .rank-3 {
    /* Свечение убрано */
    border-color: rgba(187, 134, 252, 0.8);
    color: rgba(187, 134, 252, 0.9);
}

/* --- Остальные места (4, 5...) --- */
.rank-default {
    border-color: rgba(187, 134, 252, 0.3); /* Тусклая рамка */
    color: rgba(187, 134, 252, 0.5);        /* Тусклая цифра */
}

/* Инфо */
.sound-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.sound-name { font-weight: 500; color: #ddd; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sound-date { font-size: 9px; color: #444; margin-top: 2px; }

.sound-score { text-align: right; }
.score-val { font-weight: 700; color: #fff; font-size: 13px; font-family: monospace; }
.score-label { font-size: 8px; color: #444; margin-left: 2px; }

/* БЕЙДЖ "СКОРО" для эффектов */
.soon-badge {
    background: #222; color: #666; font-size: 9px; padding: 2px 6px; 
    border-radius: 4px; border: 1px solid #333; text-transform: uppercase; font-weight: 700;
}

/* Пустое состояние */
.empty-ai-state {
    text-align: center; padding: 30px; background: #151515; border-radius: 8px;
    border: 1px dashed #333; color: #555; font-size: 12px;
}

/* Адаптив для мобилок */
@media (max-width: 900px) {
    .ai-two-col-grid { grid-template-columns: 1fr; } /* В одну колонку на телефоне */
}
/* --- ИСТОРИЯ АКТИВАЦИЙ --- */
.history-section { margin-top: 40px; border-top: 1px solid #222; padding-top: 20px; }
.section-title { color: #555; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; font-weight: 700;}
.history-table-wrapper { background: #111; border-radius: 8px; border: 1px solid #222; overflow: hidden; }
.history-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.history-table th { background: #151515; color: #666; padding: 12px 20px; font-weight: 600; font-size: 11px; text-transform: uppercase; }
.history-table td { padding: 12px 20px; border-bottom: 1px solid #222; color: #ccc; }
.history-table tr:last-child td { border-bottom: none; }
.history-table tr:hover { background: #161616; }
.status-ok { color: #fff; font-size: 11px; background: #222; padding: 2px 8px; border-radius: 4px; border: 1px solid #333; }
.days-badge { color: #ccc; font-family: monospace; }

/* --- МОДАЛЬНОЕ ОКНО --- */
/* === МОДАЛЬНОЕ ОКНО (Обновленный дизайн) === */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); /* Больше блюра */
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: 0.3s ease; z-index: 1000;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }

.modal-card {
    background: #111; 
    padding: 40px; 
    border-radius: 20px; 
    border: 1px solid #333;
    width: 380px; 
    text-align: center; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    transform: translateY(30px); 
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Пружинистая анимация */
    position: relative;
    overflow: hidden;
}

/* Фиолетовая подсветка сверху модалки (для стиля) */
.modal-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #bb86fc, #7c4dff);
}

.modal-overlay.active .modal-card { transform: translateY(0); }

.modal-title {
    margin: 0 0 10px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.modal-desc {
    color: #888;
    font-size: 14px;
    margin-bottom: 25px;
}

/* ПОЛЕ ВВОДА */
.key-input {
    width: 100%; 
    padding: 14px; 
    margin-bottom: 25px;
    
    /* 🔥 ИСПРАВЛЕНИЕ ЦЕНТРИРОВАНИЯ: */
    box-sizing: border-box; 
    
    background: #050505; 
    border: 1px solid #333; 
    color: #bb86fc; /* Текст внутри фиолетовый */
    border-radius: 10px; 
    outline: none; 
    text-align: center; 
    font-family: 'Courier New', monospace; /* Моноширинный шрифт для ключа */
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 700;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

/* Эффект при клике на поле */
.key-input:focus { 
    border-color: #bb86fc; 
    box-shadow: 0 0 20px rgba(187, 134, 252, 0.15); /* Фиолетовое свечение */
    background: #0a0a0a;
}
.key-input::placeholder { color: #444; letter-spacing: 1px; }

/* КНОПКИ */
.modal-btns { display: flex; gap: 12px; margin-top: 5px; }

.modal-btn { 
    flex: 1; 
    padding: 12px; 
    border-radius: 8px; 
    border: none; 
    cursor: pointer; 
    font-weight: 600; 
    font-size: 14px; 
    transition: 0.2s;
}

/* Кнопка Активировать (Фиолетовая) */
.confirm-btn { 
    background: #bb86fc; 
    color: #000; 
}
.confirm-btn:hover { 
    background: #a65ffc; 
    box-shadow: 0 0 15px rgba(187, 134, 252, 0.4); 
    transform: translateY(-2px);
}

/* Кнопка Отмена */
.cancel-btn { 
    background: transparent; 
    color: #888; 
    border: 1px solid #333; 
}
.cancel-btn:hover { 
    background: #1a1a1a; 
    color: #fff; 
    border-color: #555;
}

/* --- 🔥 ВОССТАНОВЛЕННЫЕ СТИЛИ ГЛАВНОЙ (HERO/PRICING) - МОНОХРОМ --- */

.hero {
    padding: 80px 20px 40px;
    text-align: center;
    
    /* 🔥 ФОН В ЦВЕТ САЙТА */
    background: #0E0E0E;
    
    position: relative;
    overflow: hidden;
}


.hero h1 {
    font-size: 64px;
    margin-bottom: 15px;
    letter-spacing: -1.5px;
    color: #fff;
    font-weight: 800;
}

.hero h2 {
    font-size: 24px;
    color: #ccc;
    font-weight: 400;
    line-height: 1.4;
    max-width: 700px;
    margin: 0 auto;
}

.hero p {
    color: #666;
    margin-top: 15px;
    font-size: 16px;
}

.hero-btns {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 35px;
    margin-bottom: 15px;
}

/* КНОПКИ В HERO (ФИОЛЕТОВЫЕ) */
.hero .btn-primary, 
.hero .btn-secondary {
    background-color: #f2f2f2 !important; /* Твой цвет */
    color: #000 !important;               /* Черный текст (для контраста) */
    
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
    line-height: 1;
}

/* Размер иконки внутри кнопки */
.btn-icon {
    width: 20px;  /* Оптимальный размер под текст */
    height: 20px;
    object-fit: contain; /* Сохраняем пропорции */
    display: block;
    
    /* Если картинка черная, а кнопка темная — можно инвертировать цвет: */
    /* filter: invert(1); */
}


/* Эффект при наведении */
/* Эффект при наведении */
.hero .btn-primary:hover, 
.hero .btn-secondary:hover {
    background-color: #9965f4 !important; /* Чуть темнее при наведении */
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(187, 134, 252, 0.4); /* Фиолетовое свечение */
    color: #000 !important;
}

/* ССЫЛКА НА MAC (ПОД КНОПКАМИ) */
.os-support {
    color: #555;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 60px; /* Отступ до картинки */
    font-weight: 500;
    cursor: default;
    transition: 0.2s;
}
.os-support:hover { color: #888; }
.os-support svg { fill: currentColor; }

/* ПРЕВЬЮ ПРИЛОЖЕНИЯ (С ТЕНЬЮ) */
.app-preview-container {
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

.app-window {
    width: 100%;
    
    /* 🔥 ИЗМЕНЕНО: Было 1100px, стало 850px */
    max-width: 850px; 
    
    border-radius: 12px;
    overflow: hidden;
    
    /* Рамка и тень остаются */
    border: 1px solid #333; 
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05),
                0 20px 60px rgba(0, 0, 0, 0.8);
    
    background: #0f0f0f;
    position: relative;
    margin: 0 auto; /* Центрируем, если вдруг сбилось */
}

/* Заголовок окна (точечки) */
.window-header {
    background: #1a1a1a;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #252525;
}
.window-dots { display: flex; gap: 6px; }
.window-dots span { width: 10px; height: 10px; border-radius: 50%; background: #333; }
.window-title { margin-left: 15px; color: #666; font-size: 12px; font-family: monospace; }

.app-img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.95;
}

/* ФУТЕР */
.main-footer {
    background: #050505; 
    padding: 60px 20px; 
    border-top: 1px solid #222; 
    
    /* 🔥 ВАЖНО: Убираем отступ, который создавал полосу */
    margin-top: 0; 
}
.footer-container {
    max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px;
}
.footer-links a { display: block; color: #666; margin-bottom: 10px; font-size: 14px; }
.footer-links a:hover { color: #fff; }

/* АДАПТИВ */
@media (max-width: 1024px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .pricing-card.featured { transform: scale(1); }
}
@media (max-width: 768px) {
    .navbar { padding: 15px 20px; }
    .stats-grid { grid-template-columns: 1fr; }
    .ai-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .reset-ai-btn { width: 100%; justify-content: center; }
}




/* === СЕКЦИЯ ЦЕН (DARK & BLUE STYLE) === */
.pricing-section {
    /* 🔥 БЫЛО: 100px 20px 160px */
    /* 🔥 СТАЛО: 40px (сверху) 20px (по бокам) 160px (снизу) */
    padding: 40px 20px 160px;
    
    background: #0E0E0E; 
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border-top: none; 
}

/* Заголовок секции */
.pricing-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 600px;
}

.pricing-header h2 {
    font-size: 36px;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 800;
    letter-spacing: -1px;
}

.pricing-header p {
    color: #888;
    font-size: 18px;
}

/* === НОВЫЙ СТИЛЬ ТАРИФОВ (MISTER HORSE DARK) === */
/* Уменьшаем размер слова "БЕСПЛАТНО" */
.pricing-card.free-bg .price {
    font-size: 32px;      /* 🔥 Было 48px. Ставим 32px, чтобы выглядело аккуратно */
    margin-bottom: 20px;
margin-top: 10px;	/* Чуть увеличим отступ снизу для баланса */
    letter-spacing: 1px;  /* Добавим воздуха между буквами */
    font-weight: 700;
}

/* Сетка */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    width: 100%;
    max-width: 1140px;
    align-items: flex-start; /* Выравниваем по верху */
}

/* === БАЗОВЫЙ СТИЛЬ КАРТОЧКИ === */
.pricing-card {
    background: #0E0E0E;
    border: 1px solid #333;
    border-radius: 24px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    
    /* 🔥 ИСПРАВЛЕНО: */
    overflow: visible; /* Было hidden. Ставим visible, чтобы всё работало */
    
    transition: transform 0.2s ease, border-color 0.2s;
    color: #fff;
    height: 100%;
    z-index: 1;
}

/* Сбрасываем старые фоны-картинки */
/* Кнопка в центре (Теперь Фиолетовая) */
.pricing-card.year-bg a.btn-primary-big {
    background: #bb86fc;          /* Фиолетовый фон */
    border: 1px solid #bb86fc;
    color: #000 !important;       /* Черный текст (важно для читаемости!) */
    font-weight: 700;             /* Жирный шрифт */
    box-shadow: 0 0 10px rgba(187, 134, 252, 0.2); /* Легкое свечение */
}

.pricing-card.free-bg,
.pricing-card.month-bg {
    border: 1px solid transparent; 
    background: #0E0E0E; 
    position: relative;
    box-shadow: none; 
}

/* 2. Создаем градиентную рамку через псевдо-элемент */
.pricing-card.free-bg::before,
.pricing-card.month-bg::before {
    content: "";
    display: block !important;
    position: absolute;
    inset: 0;
    border-radius: 24px; 
    padding: 1px; 
    
    /* 👇 БЫЛО: #555 -> transparent */
    /* 👇 СТАЛО: #333 (очень темный серый) -> transparent */
    background: linear-gradient(to bottom, #333 0%, transparent 70%);
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    pointer-events: none;
    z-index: 10;
    transition: background 0.3s ease; /* Добавил плавность смены цвета */
}

/* 3. Эффект при наведении (делаем рамку ярче) */
.pricing-card.free-bg:hover::before,
.pricing-card.month-bg:hover::before {
    background: linear-gradient(to bottom, #777 0%, transparent 90%);
}

/* Убираем старую подсветку border-color при наведении, так как теперь работает ::before */
.pricing-card.free-bg:hover,
.pricing-card.month-bg:hover {
    border-color: transparent; 
}


/* Эффект при наведении на любую карточку */
.pricing-card:hover {
    border-color: #666;
    transform: translateY(-5px);
}

/* === ТИПОГРАФИКА === */
.pricing-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 15px 0;
    text-transform: none; /* Убираем капс, если был */
    text-shadow: none !important;
}

.price {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
    line-height: 1.1;
    text-shadow: none !important;
}

.price span {
    font-size: 16px;
    color: #888;
    font-weight: 500;
}

.price-sub {
    font-size: 13px;
    color: #666;
    margin-bottom: 25px;
    font-weight: 500;
}

/* === СПИСОК ФУНКЦИЙ === */
.features {
    margin-top: 0;
    padding: 0;
    list-style: none;
    text-align: left; /* Список выровнен по левому краю */
    width: 100%;
}

.features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: #ccc;
    font-size: 15px;
    font-weight: 500;
    text-shadow: none !important;
}

/* Галочки (маленькие, аккуратные) */
.check {
    color: #fff; /* Белые галочки, как на референсе (в темной теме) */
    font-size: 12px;
    flex-shrink: 0;
}

/* === КНОПКИ === */
.pricing-card a {
    display: block;
    width: 100%;
    padding: 14px 0;
    border-radius: 8px; /* Чуть меньше скругление у кнопок */
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    margin-bottom: 35px; /* Отступ от кнопки до списка */
    cursor: pointer;
    text-shadow: none !important;
    transition: 0.2s;
}

/* 1. БОКОВЫЕ КАРТОЧКИ (Outline кнопки) */
.pricing-card.free-bg a,
.pricing-card.month-bg a {
    background: transparent;
    border: 1px solid #444; /* Темно-серая рамка */
    color: #fff;
}
.pricing-card.free-bg a:hover,
.pricing-card.month-bg a:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* 2. ЦЕНТРАЛЬНАЯ КАРТОЧКА (Акцент) */
.pricing-card.year-bg {
    background: #111; /* Чуть-чуть светлее черного, чтобы выделить */
    border: 1px solid #333; /* Такая же рамка (или #007aff если хочешь цветную) */
    transform: scale(1.03); /* Немного увеличена */
    z-index: 10;
}

.pricing-card.year-bg a.btn-primary-big:hover {
    background: #a65ffc;          /* Чуть более насыщенный при наведении */
    border-color: #a65ffc;
    box-shadow: 0 0 20px rgba(187, 134, 252, 0.5); /* Яркое свечение */
    transform: translateY(-2px);  /* Легкий подъем */
}
.pricing-card.year-bg a:hover {
    background: #0062cc;
    border-color: #0062cc;
}

/* Бейдж "Экономия" для центральной карточки */
.save-badge {
    position: absolute;
    top: 15px;
    right: 15px; /* Смещаем в угол или оставляем по центру как было */
    background: rgba(0, 122, 255, 0.15);
    color: #007aff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    /* Убираем старое позиционирование по центру, если хочешь как в оригинале */
    left: auto; 
    transform: none;
}

/* АДАПТИВНОСТЬ */
@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    .pricing-card.featured {
        transform: scale(1); /* На мобильном убираем увеличение */
        border-width: 2px;
    }
    .pricing-card.featured:hover {
        transform: translateY(-5px);
    }
}

/* ЛОГОТИП ПО ЦЕНТРУ (ВМЕСТО ЗАГОЛОВКА H1) */
.hero-logo-img {
    display: block;
    width: 300px;           /* 🔥 Размер ровно 300px */
    max-width: 100%;        /* Чтобы не вылезал на совсем маленьких экранах */
    height: auto;           /* Сохраняем пропорции */
    
    /* 🔥 ОТСТУПЫ: 50px сверху, авто по бокам (центр), 25px снизу */
    margin: 80px auto 25px; 
    
    /* Опционально: тень, если логотип сливается с фоном */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}

/* На мобильных можно сделать чуть меньше */
@media (max-width: 768px) {
    .hero-logo-img {
        max-width: 200px; 
        margin-bottom: 15px;
    }
}




/* === СЕКЦИЯ ВОЗМОЖНОСТЕЙ (FEATURES) === */
/* 1. Сама секция - тянется на 100% ширины экрана */
.features-section {
    width: 100%; 
    background: #0E0E0E;
    
    /* 🔥 БЫЛО: 100px 0 */
    /* 🔥 СТАЛО: 40px сверху, 100px снизу */
    padding: 40px 0 100px;    
    
    margin: 0;
    max-width: none;
}

/* 2. Внутренний контейнер - держит контент в центре */
.features-container {
    max-width: 1140px;   /* Ограничиваем ширину контента */
    margin: 0 auto;      /* Центрируем контент */
    padding: 0 20px;     /* Отступы по бокам, чтобы текст не прилипал на мобильных */
}

/* Заголовок (можно оставить как был) */
.features-header {
    text-align: center;
    margin-bottom: 60px;
}

.features-header h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #fff;
}

.features-header p {
    font-size: 18px;
    color: #888;
}

/* СЕТКА (GRID) */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 колонки */
    gap: 30px; /* Отступы между карточками */
}

/* КАРТОЧКА */
.feature-card {
    background: transparent; 
    border: none; 
    
    /* 🔥 УМЕНЬШИЛИ ЗАКРУГЛЕНИЕ БЛОКА ДО 12px */
    border-radius: 12px; 
    
    overflow: hidden; /* Чтобы содержимое не вылезало за углы */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

/* Убрали смену рамки при наведении (так как рамки нет) */
.feature-card:hover {
    transform: translateY(-5px); 
}

/* Текст внутри карточки */
.feature-text {
    /* Можно немного уменьшить отступы, так как нет границ */
    padding: 10px 10px 20px; 
}

.feature-text h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #fff;
}

.feature-text p {
    font-size: 15px;
    color: #999;
    margin: 0;
    line-height: 1.5;
}

/* Контейнер видео */
/* КОНТЕЙНЕР ВИДЕО */
.video-container {
    width: 100%;
    height: 300px;
    background: #000; /* Черная подложка */
    position: relative;
    margin-top: 10px; /* Небольшой отступ от текста */
    
    /* 🔥 НОВОЕ: Одинаковые и аккуратные закругления (12px) */
    border-radius: 12px; 
    
    /* Обрезаем всё, что вылезает за радиус */
    overflow: hidden; 
    
    /* Опционально: тонкая обводка, если видео сливается с фоном сайта */

}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.feature-card:hover video {
    opacity: 1; /* При наведении видео становится ярким */
}

/* АДАПТИВ (На телефонах 1 колонка) */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
    .video-container {
        height: 250px;
    }
}


/* === СЕКЦИЯ ТЕХНИЧЕСКОЙ ИНФОРМАЦИИ === */
/* === СЕКЦИЯ ТЕХНИЧЕСКОЙ ИНФОРМАЦИИ === */
.tech-info-section {
    width: 100%;
    
    /* 🔥 НОВЫЙ ФОН: Чуть светлее основного (#0E0E0E) */
    background: #161616; 
    
    /* 🔥 НОВЫЕ ОТСТУПЫ: Добавили 80px сверху, чтобы контент не прилипал к началу цветного блока */
    padding: 80px 0 100px;  
    
    /* Опционально: тонкая верхняя граница, чтобы подчеркнуть начало блока */
    border-top: 1px solid #222;
}

.tech-container {
    max-width: 800px; /* Делаем уже, чем основной контент, чтобы легче читалось */
    margin: 0 auto;
    padding: 0 20px;
}

.tech-container h2 {
    font-size: 24px;
    color: #fff;
    margin-bottom: 40px;
    text-align: center; /* Заголовок по центру */
    font-weight: 700;
}

/* Список пунктов */
.tech-list {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Расстояние между пунктами */
}

/* Отдельный пункт */
.tech-item {
    display: flex;
    align-items: flex-start; /* Иконка и текст выровнены по верху */
    gap: 20px;
}

/* Иконки */
.tech-icon {
    width: 40px;
    height: 40px;
    min-width: 40px; /* Чтобы иконка не сжималась */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #1a1a1a; /* Темно-серый фон кружочка */
    border-radius: 10px; /* Слегка скругленный квадрат */
    border: 1px solid #333;
}

/* Если хочешь акцент на иконке, раскомментируй строку ниже: */
/* .tech-icon { color: #bb86fc; border-color: #bb86fc; } */

.tech-icon.warning {
    color: #ffbd2e; /* Желтый цвет для иконки "Альфа" */
    border-color: rgba(255, 189, 46, 0.3);
    background: rgba(255, 189, 46, 0.05);
}

.tech-icon svg {
    width: 20px;
    height: 20px;
}

/* Текстовая часть */
.tech-content h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.tech-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #888;
}

.tech-content strong {
    color: #ccc; /* Важные слова чуть светлее серого */
}

/* Адаптив */
@media (max-width: 600px) {
    .tech-item {
        flex-direction: column; /* На телефоне иконка сверху, текст снизу */
        align-items: flex-start;
        gap: 10px;
    }
    .tech-container h2 {
        text-align: left;
    }
}


/* === ТАБЛИЦА СРАВНЕНИЯ === */
.comparison-section {
    padding: 0 20px 100px; /* Отступ только снизу */
    background: #0E0E0E;   /* Основной фон */
    display: flex;
    justify-content: center;
}

.comparison-container {
    width: 100%;
    max-width: 800px; /* Таблица не должна быть слишком широкой */
}

.comparison-container h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
    font-size: 24px;
}

/* Обертка для скролла на мобильных */
.table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #222; /* Рамка вокруг таблицы */
    background: #111;       /* Фон таблицы чуть светлее */
}

.compare-table {
    width: 100%;
    border-collapse: collapse; /* Убираем двойные рамки */
    min-width: 500px; /* Чтобы на телефоне таблица не сжималась в кашу */
}

/* Заголовки (Free / PRO) */
.compare-table th {
    padding: 20px;
    text-align: center;
    background: #161616;
    border-bottom: 1px solid #333;
    font-size: 16px;
    font-weight: 700;
}

.feature-col { text-align: left !important; color: #ccc; width: 40%; }
.free-col { color: #888; width: 30%; }
.pro-col { color: #bb86fc; width: 30%; } /* Фиолетовый заголовок PRO */

/* Ячейки */
.compare-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #222;
    color: #ccc;
    text-align: center;
    font-size: 14px;
}

/* Первая колонка (названия) выровнена влево */
.compare-table td:first-child {
    text-align: left;
    color: #fff;
    font-weight: 500;
}

/* Последняя строка без рамки снизу */
.compare-table tr:last-child td {
    border-bottom: none;
}

/* Эффект при наведении на строку */
.compare-table tr:hover td {
    background: #1a1a1a;
}

/* Статусы */
.dim { color: #555; font-size: 13px; }
.highlight { color: #fff; font-weight: 700; }

.check { color: #555; font-size: 16px; }      /* Галочка Free (серая) */
.check.pro { color: #bb86fc; font-weight: bold; } /* Галочка PRO (фиолетовая) */
.cross { color: #333; font-size: 14px; }      /* Крестик (темный) */


/* === СТРАНИЦА АВТОРИЗАЦИИ (LOGIN.PHP) === */

/* Центрируем всё на экране */
.auth-body {
    background: #0E0E0E;
    color: #fff;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

/* Карточка входа */
.auth-card {
    width: 100%;
    max-width: 400px;
    background: #161616;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid #222;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    text-align: center;
}

/* Логотип в карточке */
.auth-logo {
    margin-bottom: 30px;
    display: inline-block;
}
.auth-logo img {
    height: 40px;
    width: auto;
}

/* Переключатели Вход / Регистрация */
.auth-tabs {
    display: flex;
    margin-bottom: 30px;
    border-bottom: 1px solid #333;
}

.auth-tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 15px;
    color: #888;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 2px solid transparent;
}

.auth-tab-btn:hover {
    color: #ccc;
}

.auth-tab-btn.active {
    color: #fff;
    border-bottom-color: #bb86fc; /* Фиолетовое подчеркивание */
}

/* Поля ввода */
.auth-input {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 15px;
    background: #050505; /* Очень темный фон для полей */
    border: 1px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    outline: none;
    box-sizing: border-box; /* Чтобы padding не увеличивал ширину */
    transition: border-color 0.3s;
}

.auth-input:focus {
    border-color: #bb86fc; /* Фиолетовая обводка при фокусе */
}

/* Кнопка действия */
.auth-btn {
    width: 100%;
    padding: 14px;
    background: #bb86fc;
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    margin-top: 10px;
}

.auth-btn:hover {
    background: #9965f4;
    transform: translateY(-2px);
}

/* Сообщение об ошибке */
.error-msg {
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid rgba(255, 77, 77, 0.2);
}

.auth-desc {
    color: #888;
    font-size: 14px;
    margin-bottom: 20px;
    margin-top: -10px;
}

/* Ссылка логотипа на странице входа */
.auth-home-link {
    text-decoration: none;  /* Убираем подчеркивание */
    color: #fff;            /* Цвет текста белый */
    display: flex;          /* Выстраиваем картинку и текст в столбик */
    flex-direction: column;
    align-items: center;
    transition: opacity 0.3s;
}

.auth-home-link:hover {
    opacity: 0.7; /* При наведении логотип станет чуть прозрачнее */
}

.auth-home-link img {
    height: 50px; 
    margin-bottom: 10px;
}

.auth-home-link .logo-text {
    font-weight: 800; 
    font-size: 20px; 
    letter-spacing: -0.5px;
}

/* Ссылка "Забыли пароль?" */
.forgot-link {
    display: block;
    text-align: right;
    margin-bottom: 15px;
    font-size: 13px;
    color: #888;
    text-decoration: none;
    transition: color 0.3s;
}

.forgot-link:hover {
    color: #bb86fc;
}

/* Ссылка "Назад к входу" */
.back-to-login {
    display: block;
    text-align: center;
    margin-top: 15px;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    cursor: pointer;
}

.back-to-login:hover {
    color: #fff;
}


/* === УВЕДОМЛЕНИЯ (ALERTS / TOASTS) === */

/* Анимация появления сверху */
@keyframes slideDownFade {
    0% {
        transform: translate(-50%, -100%); /* Спрятано наверху */
        opacity: 0;
    }
    100% {
        transform: translate(-50%, 0); /* По центру */
        opacity: 1;
    }
}

.alert {
    position: fixed;
    top: 30px;             /* Отступ сверху */
    left: 50%;             /* Центрируем по горизонтали */
    /* transform задается в анимации, но для стабильности укажем исходную точку: */
    transform: translate(-50%, 0); 
    
    z-index: 2000;         /* Поверх всего, даже поверх модального окна */
    padding: 16px 24px;
    border-radius: 12px;
    
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 12px;             /* Расстояние между иконкой и текстом */
    
    box-shadow: 0 10px 40px rgba(0,0,0,0.8); /* Глубокая тень */
    backdrop-filter: blur(12px); /* Эффект матового стекла */
    
    /* Запускаем анимацию при появлении */
    animation: slideDownFade 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* --- СТИЛЬ ОШИБКИ (КРАСНЫЙ НЕОН) --- */
.alert.error {
    background: rgba(20, 0, 0, 0.9);   /* Почти черный фон */
    border: 1px solid #ff5555;          /* Красная рамка */
    color: #ff5555;                     /* Красный текст */
    box-shadow: 0 0 20px rgba(255, 85, 85, 0.2); /* Красное свечение */
}

/* Добавляем иконку ошибки через CSS */
.alert.error::before {
    content: "⛔"; /* Или можно использовать SVG */
    font-size: 18px;
}

/* --- СТИЛЬ УСПЕХА (ЗЕЛЕНЫЙ НЕОН) --- */
.alert.success {
    background: rgba(0, 20, 0, 0.9);
    border: 1px solid #27c93f;
    color: #27c93f;
    box-shadow: 0 0 20px rgba(39, 201, 63, 0.2);
}

/* Добавляем иконку успеха */
.alert.success::before {
    content: "✅"; 
    font-size: 18px;
}


/* === КАРТОЧКА-КНОПКА (Магазин) === */

.stat-card.promo-card {
    text-decoration: none;
    cursor: pointer;
    
    background: #111111;
    border: 1px solid #333;
    box-shadow: none;
    
    /* 🔥 ВАЖНО для блика: */
    position: relative; 
    overflow: hidden;   /* Обрезаем всё, что вылезает за границы */
    
    transition: all 0.3s ease;
}

/* 🔥 Сам эффект блика */
.stat-card.promo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%; /* Чуть шире, чтобы был мягче */
    height: 100%;
    
    /* 🔥 ТУСКЛЫЙ ГРАДИЕНТ: 0.1 вместо 0.5 */
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(187, 134, 252, 0.1) 50%, 
        transparent 100%
    );
    
    transform: skewX(-25deg);
    pointer-events: none;
    
    /* 🔥 МЕДЛЕННАЯ АНИМАЦИЯ: Цикл 14 секунд */
    animation: buttonGlint 14s infinite ease-in-out;
}

.promo-content {
    position: relative; /* Поднимаем текст над бликом */
    z-index: 2;
    
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    
    color: #666; 
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* === ЭФФЕКТ ПРИ НАВЕДЕНИИ === */
.stat-card.promo-card:hover {
    background: #151515;
    transform: translateY(-3px);
    border-color: #bb86fc; 
}

/* 🔥 Текст внутри тоже становится фиолетовым */
.stat-card.promo-card:hover .promo-content {
    color: #bb86fc;
}

/* При нажатии */
.stat-card.promo-card:active {
    transform: translateY(-1px);
}

/* === АНИМАЦИЯ БЛИКА === */
@keyframes buttonGlint {
    0% {
        left: -150%;
        opacity: 0;
    }
    5% {
        opacity: 1; /* Плавно проявляется */
    }
    /* Блик движется медленно: с 0% до 35% времени (примерно 4-5 секунд на пролет) */
    35% {
        left: 150%;
        opacity: 0; /* Плавно исчезает */
    }
    100% {
        left: 150%;
        opacity: 0; /* Остальное время ждет */
    }
}

/* === ТАБЛИЦА СОВМЕСТИМОСТИ === */
.compat-box {
    margin-top: 50px;
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
}

/* Заголовок таблицы */
.compat-header-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 25px;
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: #666;
    letter-spacing: 1px;
}

/* Строка таблицы */
.compat-row {
    display: flex;
    border-bottom: 1px solid #222;
    transition: background 0.2s;
}
.compat-row:last-child { border-bottom: none; }
.compat-row:hover { background: #141414; }

/* Левая колонка (Название) */
.compat-label {
    width: 35%; /* Ширина левой колонки */
    padding: 20px 25px;
    border-right: 1px solid #222;
    display: flex;
    align-items: center;
    gap: 15px;
}

.c-icon { font-size: 20px; }
.c-text { display: flex; flex-direction: column; }
.c-text strong { color: #fff; font-size: 14px; margin-bottom: 3px; }
.c-text span { color: #555; font-size: 11px; }

/* Правая колонка (Список программ) */
.compat-apps {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* === БЕЙДЖИ ПРОГРАММ === */
.soft-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px 6px 8px; /* Чуть меньше отступ слева, т.к. иконка */
    border-radius: 6px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #ccc;
    cursor: default;
    display: inline-flex; /* Чтобы не растягивались */
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

/* Сама иконка программы */
.app-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* --- СТИЛИ ДЛЯ АКТИВНОГО DAVINCI (С ПОДСВЕТКОЙ) --- */
.soft-badge.davinci-glow {
    background: rgba(187, 134, 252, 0.1);
    border-color: #bb86fc;
    color: #fff;
    box-shadow: 0 0 10px rgba(187, 134, 252, 0.15);
}

/* 1. DaVinci Special (Фиолетовый) */
.soft-badge.davinci {
    background: rgba(187, 134, 252, 0.1);
    border-color: #bb86fc;
    color: #fff;
    box-shadow: 0 0 10px rgba(187, 134, 252, 0.1);
}
.soft-badge.davinci .dot {
    width: 6px; height: 6px; background: #bb86fc; border-radius: 50%;
    box-shadow: 0 0 5px #bb86fc;
}

/* 2. Supported (Зеленый/Универсальный) */
.soft-badge.active {
    background: #1a1a1a;
    border-color: #333;
    color: #ccc;
}
.soft-badge.active::before {
    content: "✔"; color: #4fffa3; font-size: 10px;
}

/* --- СТИЛИ ДЛЯ НЕПОДДЕРЖИВАЕМЫХ (DISABLED) --- */
.soft-badge.disabled {
    background: transparent;
    border-color: #222;
    color: #444;       /* Тусклый текст */
    opacity: 0.6;      /* Полупрозрачность */
    text-decoration: line-through; /* Зачеркиваем название */
}

/* Делаем иконку черно-белой для неподдерживаемых */
.app-icon.grayscale {
    filter: grayscale(100%);
    opacity: 0.5;
}

/* АДАПТИВНОСТЬ */
@media (max-width: 768px) {
    .compat-header-row { display: none; } /* Скрываем шапку на моб */
    
    .compat-row { flex-direction: column; }
    
    .compat-label { 
        width: 100%; 
        border-right: none; 
        border-bottom: 1px dashed #222;
        padding: 15px 20px;
    }
    
    .compat-apps { padding: 15px 20px; }
}

/* Иконки в таблице совместимости */
.c-icon-img {
    width: 32px;  /* Оптимальный размер */
    height: 32px;
    object-fit: contain; /* Сохраняет пропорции */
    flex-shrink: 0;      /* Запрещает сжимать картинку */
}


/* === СТРАНИЦА ПОКУПКИ (CHECKOUT) === */

.checkout-container {
    max-width: 600px;
    margin: 40px auto 100px;
    padding: 0 20px;
}

.checkout-header {
    text-align: center;
    margin-bottom: 40px;
}

.checkout-header h1 {
    font-size: 32px;
    color: #fff;
    margin-bottom: 10px;
}

.checkout-header p {
    color: #888;
}

/* СЕТКА ТАРИФОВ (Кликабельные блоки) */
.plans-selection {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.plan-option {
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

/* Эффект при наведении */
.plan-option:hover {
    border-color: #555;
    background: #161616;
}

/* АКТИВНЫЙ ТАРИФ */
.plan-option.selected {
    border-color: #bb86fc;
    background: rgba(187, 134, 252, 0.05);
    box-shadow: 0 0 15px rgba(187, 134, 252, 0.1);
}

/* Кружочек (Radio button simulation) */
.radio-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #444;
    position: relative;
    flex-shrink: 0;
}

.plan-option.selected .radio-circle {
    border-color: #bb86fc;
    background: #bb86fc;
    box-shadow: inset 0 0 0 4px #111; /* Делаем "дырку" внутри */
}

/* Контент внутри плашки */
.plan-header {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

.plan-header h3 {
    margin: 0;
    font-size: 14px;
    color: #888;
    text-transform: uppercase;
    font-weight: 700;
}

.plan-price {
    font-size: 24px;
    color: #fff;
    font-weight: 700;
}

/* Список фич внутри плашки */
.plan-features-mini {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    padding-left: 20px;
    border-left: 1px solid #333;
    margin-left: 20px;
}

.plan-features-mini li {
    font-size: 12px;
    color: #666;
    margin-bottom: 2px;
}

/* БЕЙДЖ "ВЫГОДНО" */
.plan-option.featured {
    border-color: #bb86fc; /* По умолчанию подсвечен, если он главный */
}

.badge-best {
    position: absolute;
    top: -10px;
    right: 15px;
    background: #bb86fc;
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* БЛОК ДАННЫХ И КНОПКА */
.user-data-box {
    background: #161616;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #222;
}

.input-label {
    display: block;
    color: #ccc;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
}

.checkout-input {
    width: 100%;
    background: #0a0a0a;
    border: 1px solid #333;
    color: #fff;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box; /* Важно чтобы не вылезало */
}

.checkout-input:focus {
    border-color: #bb86fc;
}

.input-hint {
    font-size: 12px;
    color: #555;
    margin-top: 6px;
    margin-bottom: 20px;
}

/* Кнопка оплаты */
.checkout-btn {
    width: 100%;
    background: #bb86fc;
    color: #000;
    border: none;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.checkout-btn:hover {
    background: #a65ffc;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(187, 134, 252, 0.3);
}

.secure-note {
    text-align: center;
    color: #444;
    font-size: 12px;
    margin-top: 15px;
}

/* Адаптив для мобилок */
@media (max-width: 500px) {
    .plan-option {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .plan-features-mini {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        margin-bottom: 10px;
        border-top: 1px solid #222;
        padding-top: 10px;
        width: 100%;
    }
    .radio-circle {
        position: absolute;
        top: 20px;
        right: 20px;
    }
}


/* === ИНФО ОБ АККАУНТЕ (ВНУТРИ ЧЕКАУТА) === */

.logged-user-info {
    /* 🔥 Главное: отступ снизу от кнопки */
    margin-bottom: 25px;
    
    /* Делаем блок похожим на input (как будто поле "только для чтения") */
    background: #0a0a0a; 
    border: 1px solid #333;
    border-radius: 8px;
    padding: 14px 16px;
    
    display: flex;
    align-items: center;
    justify-content: space-between; /* Разносим текст по краям */
    gap: 10px;
}

/* Слово "Аккаунт:" */
.info-label {
    color: #666;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Сама почта */
.info-value {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    font-family: 'Inter', sans-serif; /* Или твой шрифт */
    
    /* Если почта очень длинная — обрезаем троеточием */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
    text-align: right;
}

/* === ДОРАБОТКА ДЛЯ СЛАЙДЕРА === */

/* Делим карточку на верх (цена/радио) и низ */
.plan-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 5px;
}

/* Обновляем сам блок карточки, чтобы он мог менять высоту */
.plan-option {
    display: flex;
    flex-direction: column; /* Теперь элементы вертикально */
    align-items: flex-start;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Плавная анимация размера */
}

/* Скрытый блок слайдера */
/* Скрытый блок слайдера */
.slider-wrapper {
    width: 100%;
    max-height: 0;      /* Скрыт */
    opacity: 0;         /* Прозрачен */
    
    /* 🔥 Добавили отступы по бокам, чтобы пузырек влезал */
    padding: 0 15px;    
    box-sizing: border-box; /* Важно, чтобы padding не увеличивал общую ширину */
    
    overflow: hidden;   /* Обрезает все, что не влезает */
    transition: all 0.4s ease;
    margin-top: 0;
    
    border-top: 1px solid #222;
    /* padding-top: 0;  <- Эту строку можно убрать, она теперь перекрывается верхней */
}

/* Когда слайдер открывается, добавляем padding через JS (или тут margin-top) */

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #666;
    margin-bottom: 5px;
    margin-top: 15px; /* Отступ от линии */
}

.slider-hint {
    font-size: 11px;
    color: #555;
    text-align: center;
    margin-top: 8px;
}

/* === СТИЛИЗАЦИЯ ПОЛЗУНКА (INPUT RANGE) === */
.months-range {
    -webkit-appearance: none; /* Убираем стандартный вид */
    width: 100%;
    height: 6px;
    background: #333;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

/* Кругляшок (Thumb) - Chrome/Safari */
.months-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #bb86fc;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(187, 134, 252, 0.5);
    transition: transform 0.1s;
    margin-top: -6px; /* Выравнивание по центру трека */
}

.months-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Трек (полоска) - Chrome/Safari - уже задана в .months-range, но можно уточнить */
.months-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #222;
    border-radius: 3px;
}

/* === НОВЫЕ СТИЛИ ДЛЯ СКИДОК (СБОКУ) === */

/* Контейнер для основной цены и блока скидок */
.price-flex-row {
    display: flex;
    align-items: center; /* Выравнивание по центру по вертикали */
    gap: 10px; /* Отступ между ценой и скидками */
}

/* Боковой блок, содержащий старую цену и бейдж */
.discount-info-side {
    display: flex;
    flex-direction: column; /* Ставим их в столбик */
    align-items: flex-start;
    justify-content: center;
}

/* Старая цена (зачеркнутая) */
.old-price {
    font-size: 12px; /* Чуть меньше */
    color: #666;
    text-decoration: line-through;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 2px; /* Отступ до бейджа */
}

/* Бейджик скидки */
.discount-badge {
    background: #4fffa3;
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    /* Убрали margin-left, так как теперь он в столбике */
}

/* === ПУЗЫРЕК НАД СЛАЙДЕРОМ === */

/* Обертка для позиционирования */
.range-track-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 5px;
}

/* Сам пузырек */
.slider-bubble {
    position: absolute;
    bottom: 25px;
    left: 0;
    
    transform: translateX(-50%);
    
    background: #bb86fc;
    color: #000;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    
    opacity: 0;
    pointer-events: none;
    
    /* 🔥 ИЗМЕНЕНИЕ: Оставили только opacity. Убрали 'left 0.1s linear' */
    transition: opacity 0.2s ease; 
}

/* Стрелочка вниз у пузырька */
.slider-bubble::after {
    content: '';
    position: absolute;
    top: 100%; /* Снизу блока */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #bb86fc transparent transparent transparent;
}

/* === ГАЛОЧКА ОФЕРТЫ === */
.oferta-check {
    margin-top: 15px;
    margin-bottom: 20px;
}

.custom-checkbox {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    user-select: none;
}

/* Скрываем стандартный чекбокс */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Наш кастомный квадратик */
.checkmark {
    height: 18px;
    width: 18px;
    background-color: #0a0a0a;
    border: 1px solid #333;
    border-radius: 4px;
    margin-right: 10px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
}

/* При наведении */
.custom-checkbox:hover input ~ .checkmark {
    border-color: #666;
}

/* Когда нажато (Checked) */
.custom-checkbox input:checked ~ .checkmark {
    background-color: #bb86fc;
    border-color: #bb86fc;
}

/* Галочка внутри квадратика (рисуем CSS) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 3px;
    height: 8px;
    border: solid black; /* Черная галочка на фиолетовом фоне */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Ссылка на оферту */
.label-text a {
    color: #bb86fc;
    text-decoration: none;
    border-bottom: 1px solid rgba(187, 134, 252, 0.3);
}
.label-text a:hover {
    border-color: #bb86fc;
}

/* --- МОИ ПЛАГИНЫ (ОБНОВЛЕННЫЙ ДИЗАЙН) --- */
.plugins-section {
    margin: 30px 0 50px; /* Отступы сверху и снизу */
    animation: fadeIn 0.5s ease;
}

.section-title {
    font-size: 14px;
    color: #666; /* Серый цвет заголовка как на скриншоте */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-weight: 600;
}

.plugins-grid {
    display: grid;
    /* Карточки будут от 220px шириной */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.my-plugin-card {
    background: #121212; /* Очень темный фон */
    border: 1px solid #222;
    border-radius: 16px; /* Закругленные углы */
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.my-plugin-card:hover {
    transform: translateY(-4px);
    border-color: #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- КВАДРАТНОЕ ПРЕВЬЮ --- */
/* --- КВАДРАТНОЕ ПРЕВЬЮ (НА ВЕСЬ БЛОК) --- */
.plugin-preview {
    width: 100%;
    aspect-ratio: 1 / 1; /* КВАДРАТ 1:1 */
    background: #000;    /* Фон черный, если картинка вдруг не загрузится */
    overflow: hidden;
    padding: 0;          /* УБРАЛИ ОТСТУПЫ */
    position: relative;
}

.plugin-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* РАСТЯГИВАЕМ на весь блок (лишнее обрежется по краям) */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}

/* Эффект при наведении */
.my-plugin-card:hover .plugin-preview img {
    transform: scale(1.1); /* Увеличение картинки при наведении */
}

.plugin-details {
    padding: 20px;
    background: #161616; /* Чуть светлее низа */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid #222;
}

.plugin-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
    white-space: nowrap; /* Чтобы текст не переносился */
    overflow: hidden;
    text-overflow: ellipsis; /* Троеточие, если название длинное */
}

/* --- КНОПКА СКАЧАТЬ (ФИКС ВЫЛЕТА) --- */
.btn-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 0; /* Вертикальный паддинг */
    background: #222;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    
    /* ГЛАВНОЕ ИСПРАВЛЕНИЕ: */
    box-sizing: border-box; /* Чтобы паддинги не увеличивали ширину */
    border: 1px solid transparent;
}

.btn-download:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.btn-download svg {
    width: 18px;
    height: 18px;
}

/* --- КАРТОЧКА "КУПИТЬ ЕЩЕ" (FIX) --- */
.add-new-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.02); /* Еле заметный фон */
    
    /* 1. Делаем рамку тоньше (1px вместо 2px) и темнее */
    border: 1px dashed #333; 
    border-radius: 16px;
    
    text-decoration: none;
    color: #555; 
    transition: all 0.2s ease;
    
    /* Растягиваем на всю высоту ячейки сетки */
    height: 100%;
    min-height: 280px; /* Минимальная высота, чтобы не сплющило, если товаров мало */
}

.add-new-card:hover {
    /* 2. При наведении цвет фиолетовый, но полупрозрачный (0.5), чтобы было мягко */
    border-color: rgba(187, 134, 252, 0.5); 
    
    color: #BB86FC;
    background: rgba(187, 134, 252, 0.03); /* Фон тоже делаем совсем легким */
    transform: translateY(-2px); /* Чуть меньше подпрыгивает */
}

.add-icon {
    width: 50px; /* Чуть уменьшил иконку */
    height: 50px;
    border-radius: 50%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}

.add-new-card:hover .add-icon {
    background: #BB86FC;
    color: #000;
    transform: scale(1.1);
}

.add-new-card span {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}


/* Стили для переключателя (которые уже были) */
            .anon-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
            .anon-switch input { opacity: 0; width: 0; height: 0; }
            .anon-slider {
                position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
                background-color: #333; transition: .4s; border-radius: 20px;
            }
            .anon-slider:before {
                position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px;
                background-color: white; transition: .4s; border-radius: 50%;
            }
            .anon-switch input:checked + .anon-slider { background-color: #BB86FC; }
            .anon-switch input:checked + .anon-slider:before { transform: translateX(16px); }

            /* 🔥 НОВЫЕ СТИЛИ ДЛЯ ПРОГРЕСС-БАРА И НАГРАД 🔥 */
            .user-stats-row {
                display: flex;
                gap: 15px;
                flex-wrap: wrap;
                width: 100%;
            }
            .level-progress-container {
                background: rgba(25, 25, 30, 0.4);
                border: 1px solid rgba(255, 255, 255, 0.05);
                border-radius: 12px;
                padding: 15px;
                flex: 1; /* Чтобы блоки тянулись одинаково */
                min-width: 250px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .level-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;
            }
            .level-badge {
                color: #BB86FC;
                font-weight: bold;
                font-size: 14px;
                display: flex;
                align-items: center;
                gap: 5px;
            }
            .level-badge::before {
                content: "";
                display: inline-block;
                width: 19px;
                height: 19px;
                background-image: url('image/star.png');
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                margin-right: 2px;
            }
            .xp-counter {
                color: #A0A0A0;
                font-size: 13px;
                font-weight: 500;
                font-variant-numeric: tabular-nums;
            }
            .progress-track {
                background: rgba(255, 255, 255, 0.08);
                height: 8px;
                border-radius: 10px;
                overflow: hidden;
                position: relative;
            }
            .progress-fill {
                height: 100%;
                background: linear-gradient(90deg, #7c4dff, #BB86FC);
                border-radius: 10px;
                transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 0 10px rgba(187, 134, 252, 0.4);
            }
            .level-footer {
                text-align: right;
                margin-top: 8px;
                font-size: 12px;
                color: #666;
            }

            /* --- СТИЛИ БЛОКА НАГРАД --- */
            .badges-grid {
                display: flex;
                gap: 15px;
                flex-wrap: wrap;
                align-items: center;
                height: 100%;
            }
            .no-badges {
                font-size: 12px;
                color: #666;
                width: 100%;
            }
            .badge-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                cursor: help;
            }
            .badge-icon {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                background: #111;
                border: 1px solid #333;
                object-fit: cover;
                padding: 4px;
                transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
            }
            .badge-item:hover .badge-icon {
                transform: translateY(-3px) scale(1.05);
                border-color: #BB86FC;
                box-shadow: 0 0 15px rgba(187, 134, 252, 0.3);
                background: #1a1a1a;
            }
            .badge-name {
                font-size: 9px;
                font-weight: 700;
                color: #888;
                text-transform: uppercase;
                max-width: 60px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            
            /* === ВЫПАДАЮЩИЙ СПИСОК ВЕРСИЙ === */
.plugin-details {
    position: relative; /* Важно для позиционирования списка внутри карточки */
}

/* Обертка списка, которая всплывает над кнопкой */
.versions-list-wrapper {
    position: absolute;
    bottom: 60px; /* Появляется прямо над кнопкой Скачать */
    left: 15px;
    right: 15px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.8);
    
    /* Скрыто по умолчанию */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 20;
    
    /* Скролл, если версий будет очень много */
    max-height: 180px;
    overflow-y: auto;
}

/* Стилизация скроллбара внутри списка */
.versions-list-wrapper::-webkit-scrollbar { width: 4px; }
.versions-list-wrapper::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }

/* Активное состояние (когда нажали кнопку) */
.versions-list-wrapper.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Элемент списка (одна версия) */
.version-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    text-decoration: none;
    color: #ccc;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.version-item:last-child {
    border-bottom: none;
}

.version-item:hover {
    background: #2a2a2a;
    color: #fff;
}

/* Левая часть (Текст версии) */
.v-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.v-badge {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

/* Бейджик "Новая" */
.v-latest {
    font-size: 10px;
    background: rgba(187, 134, 252, 0.15);
    color: #BB86FC;
    padding: 3px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1;
}

/* Иконка скачивания справа */
.v-icon svg {
    width: 16px;
    height: 16px;
    stroke: #666;
    transition: stroke 0.2s;
}

.version-item:hover .v-icon svg {
    stroke: #BB86FC;
}

/* Иконка шеврона на кнопке */
.chevron-icon {
    transition: transform 0.3s;
}
.btn-download.active .chevron-icon {
    transform: rotate(180deg);
}


/* === БЛОК ПАТЧНОУТОВ (CHANGELOG) === */
.changelog-wrapper {
    margin-top: 12px;
    text-align: center;
}

.changelog-toggle {
    background: none;
    border: none;
    color: #888;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.changelog-toggle:hover {
    color: #bb86fc;
}

.changelog-content {
    display: none;
    margin-top: 10px;
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 15px;
    font-size: 12px;
    color: #ccc;
    text-align: left;
    max-height: 180px;
    overflow-y: auto;
    line-height: 1.5;
    
    /* Сохраняем переносы строк из txt файла */
    white-space: pre-wrap; 
    font-family: 'Inter', sans-serif;
}

/* Стилизация скроллбара внутри патчноута */
.changelog-content::-webkit-scrollbar { width: 4px; }
.changelog-content::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }

/* Класс для открытия блока */
.changelog-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* === БЛОК ПАТЧНОУТОВ (МОДАЛЬНОЕ ОКНО) === */
.changelog-wrapper {
    margin-top: 15px;
    text-align: center;
}

.changelog-toggle {
    background: none;
    border: none;
    color: #888;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.changelog-toggle:hover {
    color: #bb86fc;
}

/* Стили самой модалки патчноута */
#changelogModal .modal-card {
    width: 500px; /* Чуть шире, чтобы текст удобно читался */
    max-width: 90%;
    text-align: left; /* Текст читается слева направо */
}

.changelog-modal-text {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 20px;
    font-size: 13px;
    color: #ccc;
    max-height: 400px; /* Ограничиваем высоту, дальше появится скролл */
    overflow-y: auto;
    line-height: 1.6;
    white-space: pre-wrap; /* Сохраняем переносы строк из TXT */
    font-family: 'Inter', sans-serif;
    margin-bottom: 20px;
}

/* Кастомный скроллбар для текста */
.changelog-modal-text::-webkit-scrollbar { width: 6px; }
.changelog-modal-text::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }

/* === ИКОНКА И МОДАЛКА ТУТОРИАЛА === */
/* === ИКОНКА И МОДАЛКА ТУТОРИАЛА === */
.tutorial-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;  /* Уменьшили размер (было 22px) */
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #888;
    font-size: 11px; /* Чуть меньше шрифт (было 13px) */
    font-weight: 700;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.tutorial-btn:hover {
    background: #121212;    /* Твой темный фон вместо фиолетового */
    color: #fff;            /* Белый текст, чтобы не сливался с фоном */
    box-shadow: inset 0 0 0 1px #333; /* Едва заметная внутренняя рамка для объема */
    transform: scale(1.04); /* Гораздо более слабое увеличение (было 1.1) */
}

#tutorialModal .modal-card {
    width: 600px; /* Делаем модалку чуть шире для удобного чтения инструкций */
    max-width: 95%;
    text-align: left;
}

.tutorial-modal-text {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 25px;
    font-size: 14px;
    color: #ccc;
    max-height: 500px;
    overflow-y: auto;
    line-height: 1.6;
    white-space: pre-wrap; /* Сохраняет абзацы из txt файла */
    font-family: 'Inter', sans-serif;
    margin-bottom: 20px;
}

/* Скроллбар для текста туториала */
.tutorial-modal-text::-webkit-scrollbar { width: 6px; }
.tutorial-modal-text::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }

/* Кнопка восстановления покупок */
/* =========================================
   КНОПКА ВОССТАНОВЛЕНИЯ ПОКУПКИ
   ========================================= */
.restore-btn {
    background: #101012; 
    color: #555555; 
    border: 1px solid #333; 
    padding: 12px 24px; /* Выровняли размер точь-в-точь как у первой кнопки */
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.restore-btn:hover {
    border-color: #BB86FC; 
    color: #BB86FC; 
    background: rgba(255, 255, 255, 0.02); 
}

/* Иконка обновления (Вшитый SVG-код) */
.restore-btn::before {
    content: ""; 
    display: inline-block; 
    width: 16px; 
    height: 16px;
    margin-right: 8px;
    background-color: #555555; 
    
    /* Магия маски со встроенной иконкой */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><polyline points="23 20 23 14 17 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><polyline points="23 20 23 14 17 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    transition: all 0.2s ease;
}

.restore-btn:hover::before {
    background-color: #BB86FC;
}

/* =========================================
   УВЕДОМЛЕНИЯ (ОШИБКИ И УСПЕХ)
   ========================================= */
.auth-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
    
    /* Эффект матового стекла */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Иконка внутри алерта */
.auth-alert svg {
    flex-shrink: 0;
}

/* Приглушенный красный для ошибок */
.alert-error {
    background: rgba(255, 61, 0, 0.05); 
    border: 1px solid rgba(255, 61, 0, 0.2);
    color: #ff6b4a; 
}

/* Фирменный фиолетовый для успеха */
.alert-success {
    background: rgba(187, 134, 252, 0.05); 
    border: 1px solid rgba(187, 134, 252, 0.2);
    color: #BB86FC; 
}

/* Круглая аватарка для кабинета */
.cab-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c4dff, #BB86FC);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(187, 134, 252, 0.2);
}

/* Маленький значок статуса (как в ТГ) */
.status-badge-mini {
    width: 22px;
    height: 22px;
    object-fit: contain;
    margin-left: 8px;
    vertical-align: middle;
    filter: drop-shadow(0 0 6px rgba(187, 134, 252, 0.4));
    cursor: help;
}

/* Подсветка выбранного статуса */
.badge-item.active-status .badge-icon {
    border-color: #BB86FC;
    box-shadow: 0 0 15px rgba(187, 134, 252, 0.6);
    background: #1a1a1a;
    transform: translateY(-2px);
}
.badge-item.active-status .badge-name {
    color: #BB86FC;
}