@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@1,100..900&family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100..900&family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gravitas+One&family=Jost:wght@200&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Scribble&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

.shop-container { display: flex; padding: 40px; gap: 40px; }

/* ПРАВЫЙ БЛОК */
.checkout-panel { width: 320px; background: #0d0d10; padding: 25px; border-radius: 16px; height: fit-content; }
.checkout-title { margin-bottom: 20px; font-size: 1.2rem; }

/* Карточка выбранного тарифа */
.selected-rank { background: #1a1a20; padding: 20px; border-radius: 12px; margin-bottom: 20px; }


#selected-rank-price { font-size: 1.2rem; font-weight: bold; margin-top: 5px; }

body { background: var(--bg); color: white; font-family: "Roboto Condensed", sans-serif; }

/* Инпуты и кнопки */
.promo-section input { width: 100%; padding: 12px; background: #121216; border: 1px solid #333; border-radius: 8px; color: white; margin-bottom: 10px; }
.apply-btn { background: transparent; border: 1px solid #444; color: white; padding: 8px 15px; border-radius: 6px; cursor: pointer; }
.total-section { display: flex; justify-content: space-between; margin: 20px 0; font-size: 1.1rem; }
.total-value { color: #00ff88; font-weight: bold; }
.apply-btn2 { background: transparent; border: 1px solid #444; color: white; padding: 8px 15px; border-radius: 6px; cursor: pointer; }
.total-section2 { display: flex; justify-content: space-between; margin: 20px 0; font-size: 1.1rem; }
.total-value2 { color: #9900ff; font-weight: bold; }
.inp {
    margin-top: 10px;
}
.logo-link {
 display: inline-block;
 transition: all 0.3s ease;
}
.qwerty {
  display: flex;
  align-items: center;
  text-align: center;
  background-color: #002c18;
  align-content: center;
  justify-content: center;
}
.shoptitles {
  align-items: center;
  text-align: center;
  align-content: center;
  font-size: 40px;
  margin-top: 40px;
  font-family: "Roboto Condensed", sans-serif;
  color: #e7e7e7;
}
.shoptitle {
  align-items: center;
  text-align: center;
  background-color: #006135;
  align-content: center;
}
    html {
      scroll-behavior: smooth;
    }

    /* ===== КАСТОМНЫЙ СКРОЛЛБАР (для Chrome/Edge/Safari) ===== */
    ::-webkit-scrollbar {
      width: 3px;          /* ширина вертикального */
      height: 3px;         /* высота горизонтального (если нужен) */
    }

    ::-webkit-scrollbar-track {
      background: var(--bg);       /* фон дорожки */
      border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--accent);   /* цвет ползунка */
      border-radius: 8px;
      transition: background 0.3s;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #2563eb;         /* цвет при наведении */
    }

    /* ===== ДЛЯ FIREFOX ===== */
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--accent) var(--bg);
    }
.logo-img {
 height: 40px; /* Подгони под высоту твоего хедера */
 width: auto;
 transition: all 0.3s ease;
 /* Базовая тень, чтобы логотип уже слегка выделялся */
 filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
}

.logo-link:hover .logo-img {
 /* Эффект свечения при наведении */
 filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.8)) 
     drop-shadow(0 0 30px rgba(59, 130, 246, 0.4));
 transform: scale(1.05); /* Легкое увеличение */
}

.pay-da {
    width: 40px;
    height: 40px;
    color: #ffffff !important;   /* Делаем белый цвет текста */
    text-decoration: none; /* Убираем подчеркивание */
}
.method-card { transition: 0.3s; background: #1a1a20; padding: 5px; border-radius: 8px; border: 1px solid #333; margin-top: 10px; display: flex; align-items: center; font-style: none; }
/* Основной контейнер магазина */
.shop-container { 
 display: flex; 
 padding: 40px 5%; 
 gap: 40px; 
}
/* Если иконка — это фон блока */
.method-card {
 background-image: none !important;
 padding-left: 15px !important; /* Убирает отступ, который был для иконки */
}
.method-card span {
 color: #ffffff !important;   /* Делаем белый цвет текста */
 text-decoration: none; /* Убираем подчеркивание */
 font-size: 1rem;        /* Можно задать обычный размер */
 cursor: default;        /* Убираем курсор-ссылку */
 text-decoration-line: none;
}
.method-card:hover {
    border-color: #008cff; 
    transform: translateY(-1px); 
}
/* На случай, если это все-таки ссылка <a> */
.method-card a {
 color: #ffffff !important;
 text-decoration: none !important;
}

/* Сетка товаров */
.donate-shop { 
 flex: 1; 
 display: flex; /* Используем flex вместо grid */
 flex-wrap: wrap; /* Чтобы переносились, если не влазят */
 gap: 20px; 
 align-content: flex-start; /* Прижимаем к верху */
}

/* Фиксированный размер карточки */
.donate-item {
 width: 250px;    /* ЖЕСТКАЯ ШИРИНА */
 background: #121216; 
 padding: 20px; 
 border-radius: 12px;
 border: 1px solid #222; 
 cursor: pointer; 
 transition: 0.3s;
 flex-shrink: 0;   /* Запрещает карточке сжиматься */
}

.donate-item:hover { 
 border-color: #008cff; 
 transform: translateY(-5px); 
}
/* Эффект выбора */
.method-card.active {
  border-color: #22c55e !important; /* Зеленая рамка */
  background: #0f172a !important;  /* Чуть светлее фон */
}

/* Стилизация текста */
.method-card span {
  color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer; /* Чтобы было понятно, что кликабельно */
  user-select: none;
}

.pay-btn { 
 width: 100%; padding: 16px; background: #f97316; /* Оранжевый как на фото */
 border: none; border-radius: 10px; color: white; font-weight: bold; cursor: pointer; margin-top: 20px;
}
.pay-btn:hover { background: #006eff; }
:root { --bg: #050507; --panel: #0d0d10; --accent: #f59e0b; }

.dashboard-wrapper {
 display: grid;
 grid-template-columns: 240px 1fr 320px;
 gap: 20px;
 padding: 20px;
 height: calc(100vh - 80px);
}

.sidebar { background: var(--panel); padding: 20px; border-radius: 12px; }
.nav-links a { display: block; padding: 10px; color: #94a3b8; text-decoration: none; }
.nav-links a.active { color: var(--accent); border-left: 2px solid var(--accent); }

.shop-content { padding: 20px; }
.donate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }

.donate-item {
 background: #121216; padding: 20px; border-radius: 12px;
 border: 1px solid #222; cursor: pointer; transition: 0.3s;
}
.donate-item:hover { transform: translateY(-5px); border-color: var(--accent); }

.checkout-panel { background: var(--panel); padding: 20px; border-radius: 12px; }
.promo-box input { width: 100%; padding: 10px; background: #1a1a20; border: none; color: white; border-radius: 6px; }
.pay-btn { width: 100%; padding: 15px; background: var(--accent); border: none; border-radius: 6px; cursor: pointer; font-weight: bold; margin-top: 20px; }
.header { padding: 25px 0; border-bottom: 1px solid #1e1e24; }
.nav-wrapper { display: flex; justify-content: space-between; align-items: center; }
.logo { font-weight: 800; font-size: 1.5rem; letter-spacing: -1px; }
.logo span { color: var(--accent); }

.nav-menu a {
  color: var(--text-dim);
  text-decoration: none;
  margin-right: 30px;
  font-size: 0.9rem;
  transition: color 0.3s;
}
.nav-menu a:hover { color: var(--text-main); }
.hero { padding: 120px 0; text-align: center; }
.hero h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 20px; }
.hero p { color: var(--text-dim); max-width: 600px; margin: 0 auto 40px; font-size: 1.1rem; }

.btn-primary:hover {
 background: var(--accent);
 color: white;
 box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}
.btn-primary2 {
 width: 100%;
 padding: 12px;
 background: transparent;
 border: 1px solid var(--accent);
 color: var(--accent);
 border-radius: 8px;
 cursor: pointer;
 transition: all 0.3s ease;
 font-weight: 600;
 margin-top: 15px;
}

.btn-primary2:hover {
 background: var(--accent);
 color: white;
 box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}
.apply-btn2 {
  background: transparent; border: 1px solid #444; color: white;
  padding: 8px 15px; border-radius: 6px; cursor: pointer;
  border-bottom: 2px solid transparent; /* Базовое состояние */
  transition: 0.3s;
}

/* Активный стиль с голубым подчеркиванием */
.apply-btn2.active {
  border-bottom: 2px solid #3b82f6; /* Голубое подчеркивание */
  color: #3b82f6;
}

/* Фикс чекбокса: всё в одну строку по центру */
.checkbox-row {
 display: flex;
 justify-content: center; /* Центрирует по горизонтали */
 align-items: center;   /* Центрирует по вертикали */
 gap: 10px;        /* Расстояние между чекбоксом и текстом */
 margin: 15px 0;
 cursor: pointer;
}

.checkbox-row input {
 margin: 0; /* Убираем лишние отступы браузера */
 width: 16px;
 height: 16px;
 cursor: pointer;
}
.link-style { 
 color: #3b82f6; 
 text-decoration: underline; 
 cursor: pointer; 
 display: block; 
 margin-top: 15px; /* Увеличили отступ от кнопки */
 text-align: center; /* Центрируем текст */
 font-size: 0.9rem;
}
/* Плавный скролл при клике на вкладки */
html { scroll-behavior: smooth; }

.shop-container { display: flex; padding: 40px 5%; gap: 30px; align-items: flex-start; }

/* Навигация слева */
.tabs-sidebar { 
  position: sticky; top: 100px; 
  display: flex; flex-direction: column; gap: 15px; 
  min-width: 180px; 
}
.tabs-sidebar a {
  background: #121216; padding: 15px; border-radius: 8px;
  color: #94a3b8; text-decoration: none; border-left: 3px solid transparent;
  transition: 0.3s;
}
.tabs-sidebar a:hover { color: #3b82f6; border-left-color: #3b82f6; }

/* Секции */
.shop-section { margin-bottom: 50px; }
.section-title { color: #fff; margin-bottom: 20px; font-size: 1.5rem; }
.donate-grid { display: flex; flex-wrap: wrap; gap: 20px; }

/* Карточка доната */
.donate-item {
  width: 250px; background: #121216; padding: 20px; border-radius: 12px;
  border: 1px solid #0f4fa8; /* Твой синий стиль */
  transition: 0.3s;
}

/* Список возможностей (синий цвет) */
.features-list { margin: 15px 0; display: flex; flex-direction: column; gap: 5px; }
.feature-tag { font-size: 0.8rem; background-color: #3b82f6; padding: 10px; border-radius: 50px;}

/* Правая панель приклеена */
.checkout-panel { position: sticky; top: 100px; width: 320px; background: #0d0d10; padding: 25px; border-radius: 16px; }

/* 1. Удали или исправь дубль shop-container */
.shop-container { 
 display: flex; 
 padding: 40px 5%; 
 gap: 40px; 
 align-items: flex-start; /* ВАЖНО: align-items, а не stretch */
}

/* 2. Исправь карточку валюты (donate-item-large) */
/* Принудительное растяжение для секции Валюты */
#vault {
    width: 100%;
}
.main-content {
  
}
.donate-item-large {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
    background: #121216;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #0f4fa8;
}

#val-slider {
    width: 100% !important;
    height: 8px; /* Задаем высоту здесь */
    border-radius: 5px;
    outline: none;
    -webkit-appearance: none;
    /* Убираем background здесь, чтобы JS мог управлять им сам */
}

.currency-btn { 
  background: transparent; border: 1px solid #444; color: white; 
  padding: 8px 15px; border-radius: 6px; cursor: pointer; 
}

/* 1. Сбрасываем стили браузера по умолчанию */
input[type=range] {
  -webkit-appearance: none; /* Убираем стандартный вид в Chrome/Safari */
  width: 100%;             /* Задаем ширину */
  background: transparent;  /* Делаем фон прозрачным */
}

/* Убираем рамку фокуса в Firefox */
input[type=range]:focus {
  outline: none;
}

/* --- СТИЛИЗАЦИЯ ПОЛЗУНКА (THUMB) --- */

/* Для WebKit (Chrome, Safari, Edge) */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%; /* Делаем ползунок круглым */
  background: #4CAF50; /* Цвет ползунка (зеленый) */
  cursor: pointer;
  margin-top: -8px; /* Выравниваем ползунок по центру шкалы */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Небольшая тень */
  transition: transform 0.1s ease;
}

/* Увеличиваем ползунок при наведении */
input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

/* Для Firefox */
input[type=range]::-moz-range-thumb {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* --- СТИЛИЗАЦИЯ ШКАЛЫ (TRACK) --- */

/* Для WebKit */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #ddd; /* Цвет неактивной части шкалы */
  border-radius: 5px;
}

/* Для Firefox */
/* Базовая настройка */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

/* Трек (фон шкалы) */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: #929292; /* Темный фон шкалы */
  border-radius: 5px;
}

/* Ползунок (сам круг) */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #3b82f6; /* Твой фирменный синий */
  cursor: pointer;
  margin-top: -6px; /* Центрируем */
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}
/* Сам ползунок */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px; /* Задаем высоту здесь */
  background: #ffffff; /* Серый фон (неактивная часть) */
  border-radius: 5px;
  outline: none;
}

/* Ползунок (круг) */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}
/* Для WebKit */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #ddd; /* Цвет неактивной части шкалы */
  border-radius: 5px;
}

/* Для Firefox */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #ddd;
  border-radius: 5px;
}

/* Активная часть шкалы (до ползунка) */
input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(#4CAF50, #4CAF50);
  background-size: var(--value, 0%) 100%; /* Для динамического заполнения через JS */
  background-repeat: no-repeat;
}

/* 4. Удаление лишнего */
/* В твоем файле есть еще один блок .donate-item, который ограничивает ширину в 250px. 
   Убедись, что он не применяется к .donate-item-large! 
   Классы должны быть разными. */

/* Тема по умолчанию (Синяя) */
.vault-theme-blue {
    --vault-accent: #3b82f6; /* Голубой */
    --vault-border: #0f4fa8;
}

/* Тема при выборе Монет (Зеленая) */
.vault-theme-green {
    --vault-accent: #22c55e; /* Зеленый */
    --vault-border: #166534;
}

/* Применяем переменные к элементам внутри */
.vault-theme-blue .apply-btn2.active, 
.vault-theme-green .apply-btn2.active {
    border-bottom: 2px solid var(--vault-accent);
    color: var(--vault-accent);
}

.donate-item-large { border: 1px solid var(--vault-border); }
.pay-btn { background-color: var(--vault-accent); }
/* Для ползунка используем переменную в JS */

    :root { 
        --bg: #050507; --card: #0d0d10; --accent: #3b82f6; 
        --text: #ffffff; --dim: #94a3b8; 
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; line-height: 1.6; }
    
/* Делаем header трехколоночным */
    .site-header { 
     display: grid; 
     grid-template-columns: 1fr auto 1fr; /* Лого | Центр | Вход */
     align-items: center; 
     padding: 20px 5%;
    }
   /* Линия под хедером */
    .site-header { border-bottom: 2px solid rgba(59, 130, 246, 0.2) !important; }
      
    /* Оверлей и модалки */
    .modal-overlay {
     display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
     background: rgba(0,0,0,0.8); z-index: 2000; justify-content: center; align-items: center;
    }
    .modal {
     background: var(--card); padding: 30px; border-radius: 16px; width: 350px;
     border: 1px solid rgba(255,255,255,0.1); color: white;
    }
    .modal input {
     width: 100%; padding: 10px; margin: 10px 0; background: #1a1a20; border: 1px solid #333; color: white; border-radius: 6px;
    }
    
    .nav-menu { 
     display: flex; 
     gap: 20px; 
     justify-content: center; /* Центрирует ссылки */
    }
    
    .login-btn {
     justify-self: end; /* Прижимает кнопку входа вправо */
     /* background: var(--accent); */
     background-color: #808080;
     color: white;
     padding: 8px 20px;
     border-radius: 6px;
     text-decoration: none;
     font-size: 0.9rem;
     font-weight: 600;
     transition: opacity 0.2s;
    }
    
    .login-btn:hover { opacity: 0.8; }
    
    .logo { font-weight: 800; font-size: 1.5rem; letter-spacing: -1px; }
    .nav-menu a { color: var(--dim); text-decoration: none; font-size: 0.9rem; transform: scale(1.0); transition: transform 0.2s ease, color 0.2s ease; }
    .one:hover  { color: var(--dim); color:#3b82f6; text-decoration: none; font-size: 0.9rem; transform: scale(1.05); transition: transform 0.2s ease, color 0.2s ease;}
    .two:hover  { color: var(--dim); color:#3b82f6; text-decoration: none; font-size: 0.9rem; transform: scale(1.05); transition: transform 0.2s ease, color 0.2s ease;}
    .three:hover { color: var(--dim); color:#3b82f6; text-decoration: none; font-size: 0.9rem; transform: scale(1.05); transition: transform 0.2s ease, color 0.2s ease;}
    .four:hover { color: var(--dim); color:#3b82f6; text-decoration: none; font-size: 0.9rem; transform: scale(1.05); transition: transform 0.2s ease, color 0.2s ease;}
    .five:hover { color: var(--dim); color:#3b82f6; text-decoration: none; font-size: 0.9rem; transform: scale(1.05); transition: transform 0.2s ease, color 0.2s ease;}
    .six:hover { color: var(--dim); color:#3b82f6; text-decoration: none; font-size: 0.9rem; transform: scale(1.05); transition: transform 0.2s ease, color 0.2s ease;}

    /* Hero */
    .hero { padding: 80px 20px; text-align: center; }
    .ip-box { background: rgba(59, 130, 246, 0.1); padding: 20px 40px; border-radius: 12px; border: 1px solid var(--accent); display: inline-block; cursor: pointer; font-family: monospace; font-size: 1.2rem; margin-top: 20px; }

    /* Features Grid */
    .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 40px 5%; }
    .card { background: var(--card); padding: 30px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); }
    #typing-text::after {
     content: '|';
     animation: blink 1s infinite;
     color: var(--accent);
    }

    @keyframes blink {
     0%, 100% { opacity: 1; }
     50% { opacity: 0; }
    }
    /* Базовый стиль карточки — она скрыта */
    .card {
     opacity: 0;
     transform: translateY(30px);
     animation: fadeUp 0.6s ease forwards;
    }
    .ip-box {
     opacity: 0;
     transform: translateY(30px);
     animation: fadeUp 0.6s ease forwards;
    }
    .ip-box:nth-child(2) { animation-delay: 0.4s; }
    /* Задержка для каждой карточки (через nth-child) */
    .card:nth-child(1) { animation-delay: 0.2s; }
    .card:nth-child(2) { animation-delay: 0.4s; }
    .card:nth-child(3) { animation-delay: 0.6s; }
    .card:nth-child(4) { animation-delay: 0.8s; }

    @keyframes fadeUp {
     to {
      opacity: 1;
      transform: translateY(0);
     }
    }
    /* Настройка самого EVENT */
    .event-link {
     display: flex;
     align-items: center;
     height: 24px; /* Подгони высоту под высоту твоего текста */
     transition: transform 0.2s ease;
    }




    .event-wrapper {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important; /* Центрируем контент */
      position: relative !important;
      cursor: pointer;
      text-decoration: none;
      min-width: 80px; /* Фиксируем ширину кнопки */
      transition: transform 0.2s ease;
    }


    
    #eventParticles {
     position: absolute !important;
     top: -30px !important; /* Вылет вверх */
     left: -30px !important; /* Вылет влево */
     width: calc(100% + 60px) !important; /* Увеличили зону действия */
     height: calc(100% + 60px) !important;
     pointer-events: none;
     z-index: 2;
     overflow: visible !important; /* Чтобы частицы не обрезались */
    }


    
    .event-logo {
     height: 20px !important;
     width: auto !important;
     z-index: 1; /* Картинка под частицами */
     transition: transform 0.2s ease;
    }
    .event-logo:hover {
     height: 24; /* Картинка заполнит высоту контейнера */
     width: auto;
     image-rendering: pixelated;
     transition: transform 0.2s ease;
    }
    /* Полный сброс для этой кнопки */
    .event-wrapper, 
    .event-wrapper:hover, 
    .event-wrapper:active, 
    .event-wrapper:focus {
      text-decoration: none !important; /* Убираем подчеркивание */
      border: none !important;     /* Убираем рамки */
      outline: none !important;     /* Убираем контур при клике */
      background: transparent !important; /* Убираем фоновый цвет */
      transition: transform 0.2s ease;
      transform: scale(1.0); /* Плавное увеличение */
    }

    /* При наведении только аккуратно увеличиваем картинку */
    .event-wrapper:hover .event-logo {
      transform: scale(1.1); /* Плавное увеличение */
      transition: transform 0.2s ease;
    }


    /* Responsive */
    @media (max-width: 768px) { .nav-menu { display: none; } }
    /* Контейнер уведомлений */
    #notification-container {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 9999;
    }
    
    /* Сама плашка */
    .toast {
     background: #1e293b; /* Цвет можно менять тут */
     color: white;
     padding: 12px 24px;
     border-radius: 8px;
     margin-top: 10px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.3);
     border: 1px solid rgba(255,255,255,0.1);
     animation: slideIn 0.3s ease-out;
    }
    
    @keyframes slideIn {
     from { transform: translateX(100%); opacity: 0; }
     to { transform: translateX(0); opacity: 1; }
    }
    @keyframes fadeOut {
     from { opacity: 1; transform: translateX(0); }
     to { opacity: 0; transform: translateX(100%); }
    }
    
    .toast.hiding {
     animation: fadeOut 0.4s ease-in forwards;
    }
    #notification-container {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 9999;
     display: flex;
     flex-direction: column-reverse; /* Новые тосты будут снизу, выталкивая старые вверх */
     gap: 10px;
    }

    .toast {
     background: #1e293b;
     color: white;
     padding: 12px 24px;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.3);
     border-left: 4px solid #3b82f6;
     animation: slideIn 0.3s ease-out forwards;
     transition: transform 0.3s ease; /* Плавное сдвигание */
     transition: all 0.4s ease; /* Добавь эту строку */
    }


    .toast.hiding {
     animation: fadeOut 0.4s ease-in forwards;
    }

    @keyframes slideIn {
     from { transform: translateX(100%); opacity: 0; }
     to { transform: translateX(0); opacity: 1; }
    }

    @keyframes fadeOut {
     from { transform: translateX(0); opacity: 1; }
     to { transform: translateX(100%); opacity: 0; }
    }

    .mobile-nav{
      display: none;
    }

@media (max-width: 768px) {
 .nav-menu { display: none; }

 .mobile-nav {
  display: flex !important; /* Используем Flex вместо Grid */
  flex-wrap: wrap;     /* Разрешаем перенос, если не влезает */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(10, 10, 12, 0.95);
  backdrop-filter: blur(10px);
  padding: 15px 10px;
  justify-content: center; /* Центрируем всё */
  gap: 15px;        /* Отступы между всеми кнопками */
  z-index: 1000;
 }

 .mobile-nav a {
  font-size: 0.8rem;
  color: white;
  text-decoration: none;
  white-space: nowrap;  /* Чтобы текст не рвался */
 }

 /* EVENT теперь равен всем остальным */
 .mobile-nav .event-wrapper {
  grid-column: auto;   /* Сбрасываем перенос */
  margin-top: 0;
 }
 .mobile-nav .event-wrapper {
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 position: relative !important;
 width: auto !important; /* Убираем фиксацию ширины */
 height: auto !important;
 padding: 0;
 margin: 0;
 }

 .mobile-nav .event-logo {
 height: 20px !important; /* Делаем картинку компактной для мобил */
 width: auto !important;
 }
 /* Базовый стиль для кнопки входа */
.login-btn {
 /* background: var(--accent); */
 background-color: #808080;
 color: white;
 padding: 8px 16px;
 border-radius: 6px;
 text-decoration: none;
 font-size: 0.85rem;
 font-weight: 600;
 transition: opacity 0.2s;
 white-space: nowrap; /* Чтобы текст не переносился */
}


 /* В хедере на мобильных оставляем только лого и кнопку Вход */
 .site-header { 
  display: flex; 
  justify-content: space-between; 
  padding: 15px 5%;
 }

 .nav-menu { display: none; } /* Скрываем основное меню */
 
 .login-btn {
  padding: 6px 12px; /* Чуть меньше на мобильных */
  font-size: 0.8rem;
 }
}

.password-container { position: relative; }

.toggle-password {
 position: absolute; right: 10px; top: 50%;
 transform: translateY(-50%); cursor: pointer;
 width: 20px; height: 20px; opacity: 0.6;
}
.toggle-password:hover { opacity: 1; }

/* Контейнер для поля с эффектом */
.input-group { position: relative; margin: 20px 0; }

/* Сам инпут */
.styled-input {
 width: 100%; padding: 15px; background: #1a1a20; border: 1px solid #333;
 color: white; border-radius: 8px; outline: none; transition: 0.3s;
}

/* Лейбл (текст, который "уезжает") */
.floating-label {
 position: absolute; left: 15px; top: 15px; color: #94a3b8;
 pointer-events: none; transition: 0.3s;
}

/* Эффект: при фокусе или наличии текста лейбл уезжает вверх */
.styled-input:focus + .floating-label,
.styled-input:not(:placeholder-shown) + .floating-label {
 top: -10px; left: 10px; font-size: 12px; color: #3b82f6;
 background: #0d0d10; padding: 0 5px;
}

/* Чекбокс в строку */
.checkbox-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }

/* Ссылка "Нет аккаунта" */
.link-style { color: #3b82f6; text-decoration: underline; cursor: pointer; display: block; margin-top: 10px; }

/* Кнопки (Войти / Регистрация) */
.btn-primary {
 width: 100%;
 padding: 12px;
 background: transparent;
 border: 1px solid var(--accent);
 color: var(--accent);
 border-radius: 8px;
 cursor: pointer;
 transition: all 0.3s ease;
 font-weight: 600;
 margin-top: 15px;
}
:root {
  --bg: #0a0a0c;
  --card: #121216;
  --accent: #3b82f6;
  --text-main: #ffffff;
  --text-dim: #94a3b8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }


.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Header */
.header { padding: 25px 0; border-bottom: 1px solid #1e1e24; }
.nav-wrapper { display: flex; justify-content: space-between; align-items: center; }
.logo { font-weight: 800; font-size: 1.5rem; letter-spacing: -1px; }
.logo span { color: var(--accent); }

.nav-menu a {
  color: var(--text-dim);
  text-decoration: none;
  margin-right: 30px;
  font-size: 0.9rem;
  transition: color 0.3s;
}
.nav-menu a:hover { color: var(--text-main); }

/* Hero */
.hero { padding: 120px 0; text-align: center; }
.hero h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 20px; }
.hero p { color: var(--text-dim); max-width: 600px; margin: 0 auto 40px; font-size: 1.1rem; }

.btn-primary:hover {
 background: var(--accent);
 color: white;
 box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}
.btn-primary2 {
 width: 100%;
 padding: 12px;
 background: transparent;
 border: 1px solid var(--accent);
 color: var(--accent);
 border-radius: 8px;
 cursor: pointer;
 transition: all 0.3s ease;
 font-weight: 600;
 margin-top: 15px;
}

.btn-primary2:hover {
 background: var(--accent);
 color: white;
 box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

/* Фикс чекбокса: всё в одну строку по центру */
.checkbox-row {
 display: flex;
 justify-content: center; /* Центрирует по горизонтали */
 align-items: center;   /* Центрирует по вертикали */
 gap: 10px;        /* Расстояние между чекбоксом и текстом */
 margin: 15px 0;
 cursor: pointer;
}

.checkbox-row input {
 margin: 0; /* Убираем лишние отступы браузера */
 width: 16px;
 height: 16px;
 cursor: pointer;
}
.link-style { 
 color: #3b82f6; 
 text-decoration: underline; 
 cursor: pointer; 
 display: block; 
 margin-top: 15px; /* Увеличили отступ от кнопки */
 text-align: center; /* Центрируем текст */
 font-size: 0.9rem;
}