:root {
    --bg-color: #121212;
    --card-bg: #1c1c1e;
    --input-bg: #2c2c2e;
    --primary-blue: #007aff;
    --text-main: #ffffff;
    --text-muted: #8e8e93;
    --nav-bg: rgba(29, 29, 29, 0.85);
    --border-radius: 12px;
    --spacing: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    padding-bottom: 90px;
}

/* --- Header --- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px var(--spacing);
}

.header-title {
    font-size: 20px;
    font-weight: 600;
}

.header-icons i {
    font-size: 18px;
    color: var(--text-muted);
    margin-left: 20px;
    cursor: pointer;
}

/* --- Currency Bar --- */
.currency-bar {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--spacing);
    margin-bottom: 15px;
}

.currency-pill {
    background: #2c2c2e;
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    
    /* === INNER SHADOW: ВНУТРЕННЯЯ ТЕНЬ === */
    /* Синтаксис: inset X-offset Y-offset blur spread color */
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.048), /* Темная тень снизу-внутри */
                inset 0 -1px 1px rgba(34, 34, 34, 0.1); /* Легкий блик сверху-внутри */
    /* ===================================== */
}

.custom-star-icon {
    width: 16px; /* Задаем размер, чтобы иконка была компактной */
    height: 16px;
    object-fit: contain; /* Картинка будет полностью видна */
    margin-right: 2px;
    /* Убедитесь, что текст "0" и иконка выровнены по вертикали */
    vertical-align: middle; 
}

.currency-pill.blue {
    border: 1px solid #84a2c4;
    background: var(--primary-blue);
}

/* --- Banner (Общие стили. Стили слайдера - внизу файла) --- */
.banner-container {
    padding: 0;
    margin-bottom: 20px;
    width: 100%;
}

.banner-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
    background-color: #2a4d32;
    display: block;
}

/* --- Tabs --- */
.tabs {
    display: flex;
    align-items: baseline;
    gap: 15px;
    padding: 0 var(--spacing);
    margin-bottom: 15px;
}

.tab-item.active {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
}

.tab-item {
    font-size: 22px;
    font-weight: 700;
    color: #444;
    cursor: pointer;
    transition: color 0.3s;
}

/* --- Filters --- */
.filters {
    display: flex;
    gap: 8px;
    padding: 0 var(--spacing);
    margin-bottom: 12px;
    overflow-x: auto;
}

.filters::-webkit-scrollbar {
    display: none;
}

.filter-box {
    background: var(--input-bg);
    padding: 8px 12px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    min-width: 90px;
    flex: 1;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
}

.filter-box span {
    margin-bottom: 2px;
}

.filter-box strong {
    color: var(--text-main);
    font-size: 13px;
}

.filter-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.sort-btn {
     background: var(--input-bg);
     width: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     color: var(--text-main);
}

/* --- Search --- */
.search-container {
    padding: 0 var(--spacing);
    margin-bottom: 14px;
}

.search-box {
    border: 1px solid #2b2b2b57;
    border-radius: 10px;
    padding: 14px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
}

.search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    width: 100%;
    font-size: 14px;
}

.grid {
    display: grid;
    /* Уменьшили минимальную ширину до 110px */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
    gap: 10px;
    padding: 0 var(--spacing);
    justify-content: center;
    max-width: 100%;
}

.card {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.card-img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #252525;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.card-img {
    width: 100%;
    height: 100%;
    /* Важно: object-fit: cover обрезает изображение, чтобы оно заполнило контейнер.
       Мы оставляем cover, чтобы карточки не меняли размер,
       но если вы хотите, чтобы вся картинка была видна, используйте 'contain'.
       
       Если вы хотите, чтобы карточки выглядели как на скриншоте (заполненые), оставьте cover.
       Если вы хотите, чтобы вся картинка подарка была видна, даже если останутся пустые поля:
       object-fit: contain; 
    */
    object-fit: cover; 
}

.card-title {
    font-size: 15px;
    font-weight: 300;
    margin-bottom: 2px;
}

.card-id {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.price-btn {
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 20px;
    flex-grow: 1;
    padding: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 14px;
    cursor: pointer;
}

.cart-btn {
    background: rgba(255,255,255,0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
}

/* --- Bottom Nav --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-around;
    padding: 10px 0 32px 0;
    z-index: 100;
}

/* !!! НОВЫЕ СТИЛИ ДЛЯ ВСТРОЕННЫХ SVG (Inline SVG) !!! */
.nav-icon.svg-icon {
    /* Задает размер иконки (20x20px) */
    width: 26px; 
    height: 26px;
    /* Отступ */
    margin-bottom: 3px;
    
    /* === КЛЮЧЕВОЙ МОМЕНТ: ЗАСТАВЛЯЕТ SVG ПРИНИМАТЬ ЦВЕТ РОДИТЕЛЯ === */
    fill: currentColor; 
    
    display: block; 
    transition: fill 0.2s ease; /* Добавляем плавность для самого SVG */
}

/* ЭТОТ БЛОК У ВАС УЖЕ ЕСТЬ И ОН УСТАНАВЛИВАЕТ ЦВЕТ ТЕКСТА: */
.nav-item {
    display: flex;
    flex-direction: column; 
    
    /* ИЗМЕНЯЕМ: Выравниваем элементы (иконка/текст) по верхнему краю flex-контейнера */
    justify-content: flex-start; /* ВАЖНО: Прижимает элементы к верху */
    
    align-items: center; /* Центрирует элементы по горизонтали */
    
    text-decoration: none;
    color: var(--text-muted); 
    flex: 1;
    position: relative; 
    
    /* ИЗМЕНЯЕМ: Уменьшаем внутренние отступы, чтобы элементы не были растянуты */
    padding: 6px 0; /* Минимальный отступ внутри nav-item */
}
.nav-item span {
    font-size: 10px; /* Уменьшим шрифт для лучшего вида */
    font-weight: 500;
    margin-top: 2px; /* Увеличим отступ текста от иконки */
}
.nav-item.active {
    color: var(--primary-blue); /* <-- ЭТО ДЕЛАЕТ РОДИТЕЛЬСКИЙ ТЕКСТ СИНИМ */
}

.nav-icon.svg-icon {
    /* ... */
    fill: currentColor; /* <-- ЭТО ЗАСТАВЛЯЕТ SVG СТАТЬ СИНИМ */
}
.text-badge {
    /* Чтобы бейдж стоял рядом с текстом и не переносился */
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    
    background: var(--primary-blue); /* Синий фон */
    color: white; /* Белый текст */
    
    /* Размеры */
    font-size: 2px; 
    height: 12px; /* Чуть меньше, чем 16px, чтобы лучше смотрелось с текстом */
    min-width: 12px; 
    padding: 6 6px; /* Горизонтальные отступы, чтобы вместить число > 9 */
    
    border-radius: 80px; /* Закругленные края */
    
    font-weight: 200;
    
    /* Отступ от текста "My gifts" */
    margin-left:1px; 
    
    /* Выравнивание по вертикали относительно текста */
    vertical-align: top;
    line-height: 1; /* Для лучшего вертикального выравнивания */
}

/* --- Profile Page Styles --- */

/* Красная плашка (Toast) */
/* ================================================= */
/* --- АНИМАЦИЯ ДЛЯ УВЕДОМЛЕНИЯ --- */
/* ================================================= */

/* 1. Определение анимации */
@keyframes slide-in-out {
    /* 0% - Начало: за экраном сверху, невидимое */
    0% {
        opacity: 0;
        transform: translate(-50%, -100px); /* На 100px выше экрана */
    }
    
    /* 10% - 70% (Основная часть): Появляется и держится */
    10% {
        opacity: 1;
        transform: translate(-50%, 0); /* Выезжает в исходное положение (top: 20px) */
    }
    
    70% {
        opacity: 1;
        transform: translate(-50%, 0); 
    }
    
    /* 100% - Конец: Уходит наверх и исчезает */
    100% {
        opacity: 0;
        transform: translate(-50%, -100px); /* Снова уходит на 100px выше */
    }
}


/* 2. Стиль плашки с применением анимации */
.toast-notification {
    /* Позиционирование */
    position: fixed; 
    top: 20px; /* Фиксированная позиция сверху */
    left: 50%;
    transform: translate(-50%, -100px); /* Начальное состояние (за экраном) */

    /* Визуальные стили */
    background: rgba(65, 20, 20, 0.9);
    border: 0.3px solid #ff443a1a;
    color: #ff453a;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    white-space: nowrap;
    
    /* Применение анимации */
    animation: slide-in-out 3s ease-in-out 0.1s 1; 
    
    /* Дополнительно: делаем начальное состояние невидимым */
    opacity: 0;
}

/* --- СТИЛИ ДЛЯ ВЕРХНЕЙ ЧАСТИ ПРОФИЛЯ --- */

.profile-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px var(--spacing); /* Отступы, как в старом хедере */
}

/* Изменяем positioning для синей плашки с TON */
.currency-pill.fixed-pill {
    /* Удаляем background: var(--primary-blue); если он уже есть в .currency-pill.blue */
    /* Убедимся, что она правильно позиционируется относительно flex-контейнера */
    margin-right: 0; 
}


.settings-btn {
    width: 32px;
    height: 32px;
    background: #2c2c2e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    /* Убедимся, что он позиционируется корректно в flex-контейнере */
}

/* --- Корректировка анимации уведомления --- */

/* Убедитесь, что анимация имеет высокий Z-индекс, чтобы быть над всеми элементами */
.toast-notification {
    position: fixed; 
    top: 20px; 
    left: 50%;
    /* ... остальное как в последнем исправлении анимации ... */
    z-index: 1000; /* Важно, чтобы быть поверх синей плашки */
}

/* Информация о юзере */
.profile-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.avatar-box {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #6dd5ed, #2193b0); /* Голубой градиент как у иконки Apple */
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 600;
    color: white;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(33, 147, 176, 0.3);
}

.username {
    font-size: 20px;
    font-weight: 600;
}

/* Статистика (3 столбика) */
.stats-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-val {
    font-size: 16px;
    font-weight: 600;
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
}

.stat-divider {
    width: 1px;
    height: 20px;
    background: #333;
}

/* --- Стили для Широкого Баннера (Замена Telegram) - УДАЛЕН КОНФЛИКТУЮЩИЙ БЛОК. Оставлен только первый блок сверху. --- */

/* Контейнер-обертка для карточки */
.wallet-card-wrapper {
    position: relative; /* Чтобы контент можно было наложить абсолютно */
    margin: 0 var(--spacing) 25px var(--spacing);
    border-radius: 16px;
    overflow: hidden; /* Обрезает все, что выходит за рамки скругления */
}

/* Картинка фона - теперь резиновая */
.wallet-bg-image {
    width: 100%;
    height: auto; /* Масштабируется пропорционально */
    display: block; /* Убирает лишние отступы */
    object-fit: contain; /* Гарантирует, что картинка видна целиком */
}

/* Контент поверх картинки */
.wallet-content-overlay {
    position: absolute; /* Накладываем поверх */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Центрируем контент внутри */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    color: white;
}

/* Стили внутри контента (как было раньше) */
.wallet-title {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.wallet-balance {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
}

.wallet-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.wallet-btn {
    padding: 10px 0;
    width: 100px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.wallet-btn:hover { opacity: 0.9; }

.wallet-btn.white {
    background: white;
    color: #3B3B3B;
}

.wallet-btn.glass {
    background: rgba(255, 255, 255, 0.2); /* Чуть прозрачнее */
    color: white;
    backdrop-filter: blur(5px); /* Добавляет эффект стекла, если поддерживается */
}

/* Recent Actions */
.recent-actions-title {
    padding: 0 16px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 80px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.empty-img-placeholder {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 50% 50%, #2c2c2e, #1c1c1e);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    border-bottom: 4px solid #111; /* Эффект клавиши */
}

.empty-state h3 {
    font-size: 16px;
    margin-bottom: 4px;
}

.empty-state p {
    color: var(--text-muted);
    font-size: 13px;
}

/* Эффект увеличения и поднятия карточки при наведении */
.card:hover .card-img-wrapper {
    /* Легкое масштабирование изображения */
    transform: scale(1.02);
    transition: transform 0.3s ease-out;
}

/* Настраиваем плавность перехода */
.card-img-wrapper, .card {
    transition: all 0.3s ease-out;
}

/* --- Gifts Page Styles --- */

/* Контейнер для вкладок Unlisted/Listed */
.gifts-status-tabs {
    display: flex;
    justify-content: flex-start;
    padding: 0 var(--spacing);
    gap: 10px;
    margin-bottom: 20px;
}

.status-tab {
    background: #1c1c1e;
    color: var(--text-muted);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.status-tab.active {
    background: var(--primary-blue);
    color: white;
}

/* Стили для карточки на странице Gifts (с кнопкой Withdraw) */
.gift-card {
    position: relative;
    /* У карточки Gifts нет кнопки цены, поэтому оформляем ее иначе */
    align-items: flex-start; 
}

.gift-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 12px;
    z-index: 5;
}

/* --- New Main Header Row (для index.html и gifts.html) --- */
.main-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
}

.header-pills-group {
    display: flex;
    gap: 10px;
    padding-right: var(--spacing);
}

.header-title {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

/* 1. Контейнер действий (гарантирует горизонтальное размещение) */
.card-actions-row {
    display: flex;
    align-items: center; /* Выравнивание по центру по вертикали */
    gap: 8px; /* Небольшой отступ между кнопкой и круглой иконкой */
    width: 100%;
    margin-top: 10px;
}

.withdraw-btn {
    /* ГЛАВНОЕ: Заставляет кнопку заполнить ВСЕ оставшееся место */
    flex-grow: 1; 
    flex-shrink: 1; /* Разрешаем ей сжиматься при необходимости */
    
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 80px; /* Должен быть такой же или очень похожий радиус, как у иконки */
    
    /* Выравниваем высоту с иконкой (padding + border + font-size) */
    padding: 12px 15px; 
    
    font-weight: 600;
    cursor: pointer;
    text-align: center; /* Центрируем текст "Withdraw" */
    
    /* Добавляем box-sizing: border-box; на всякий случай, чтобы padding не влиял на ширину */
    box-sizing: border-box;
}

/* 4. Стили для ОТДЕЛЬНОЙ круглой иконки справа */
.bag-icon {
    /* Фиксированные размеры, чтобы она не растягивалась */
    width: 44px; /* Размер, который соответствует высоте кнопки */
    height: 44px; /* Размер, который соответствует высоте кнопки */
    
    flex-shrink: 0; /* Не сжимается */
    background: #1c1c1e; /* Темно-серый фон */
    border-radius: 12px; /* Установите, если хотите большее закругление */
    
    /* Центрирование иконки */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; 
    font-size: 18px; 
}

/* ============================================== */
/* === POP-UP СТИЛИ === */
/* ============================================== */

/* 1. ФОН (Backdrop) - ОСТАВЛЯЕМ СТАРЫЙ КЛАСС */
.popup-backdrop { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    display: none; 
    justify-content: center;
    align-items: center; /* Сохраняет вертикальное центрирование */
    z-index: 1000;
    backdrop-filter: blur(5px);
    
    /* === КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ: ДОБАВЛЯЕМ БЕЗОПАСНЫЙ ОТСТУП СНИЗУ === */
    /* max(30px, ...) гарантирует, что Pop-up будет поднят минимум на 30px или на необходимый системный отступ, если он больше. */
    padding-bottom: max(30px, env(safe-area-inset-bottom));
}
/* ... */

/* Класс, который делает фон активным/видимым */
.popup-backdrop.visible {
    display: flex;
}

/* 2. СОДЕРЖИМОЕ ОКНА */
.popup-content {
    background-color: #1c1c1e;
    border-radius: 16px;
    width: 90%;
    max-width: 400px; /* Ограничиваем на широких экранах */
    padding: 20px 0; /* Отступы по бокам будут внутри элементов */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    z-index: 1001;
}

/* 3. ХЕДЕР (Изображение/Текст) */
.popup-header-content {
    text-align: center;
    padding: 0 20px;
    margin-bottom: 20px;
}

.popup-img {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 10px;
}

.popup-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.popup-id {
    font-size: 14px;
    color: var(--text-muted);
}

/* 4. КНОПКИ ДЕЙСТВИЙ (Send/List/Withdraw) */
.popup-action-buttons {
    display: flex;
    justify-content: space-around;
    padding: 0 20px;
    gap: 10px;
    margin-bottom: 20px;
}

.action-btn {
    flex-grow: 1;
    background: #2c2c2e;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 10px 5px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.action-btn i {
    font-size: 18px;
}

.active-withdraw {
    background: var(--primary-blue) !important;
}

/* 5. ТАБЛИЦА ХАРАКТЕРИСТИК */
.popup-details-table {
    padding: 0 20px;
    margin-bottom: 20px;
}

.table-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #2c2c2e;
    font-size: 14px;
}

.detail-label {
    color: var(--text-muted);
}

.detail-value {
    font-weight: 600;
    color: var(--primary-blue); /* Выделяем проценты синим */
}

/* 6. ПРЕДУПРЕЖДЕНИЕ */
.popup-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #7a1d1d; /* Темно-красный фон */
    color: white;
    padding: 15px 20px;
    font-size: 14px;
}

.popup-alert i {
    color: #ff3b30; /* Ярко-красный значок */
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.popup-alert p {
    margin: 0;
}

/* 7. НАГРАДА */
.popup-reward-block {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 500;
    border-top: 1px solid #2c2c2e;
}

.reward-value {
    font-weight: 700;
    color: var(--text-main);
}

/* 8. КНОПКИ FOOTER */
.popup-footer-buttons {
    display: flex;
    padding: 0 20px;
    gap: 10px;
    margin-top: 15px;
}

.footer-btn {
    flex-grow: 1;
    border: none;
    border-radius: 12px;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.cancel-btn {
    background: #2c2c2e;
    color: var(--text-main);
}

.authorize-btn {
    background: var(--primary-blue);
    color: white;
}

/* --- Стили для широкоформатного баннера в Профиле --- */

.banner-container-wide {
    /* Растягиваем на всю ширину и добавляем отступы */
    padding: 0 var(--spacing); 
    margin-bottom: 12px;
    width: 100%;
}

.banner-img-wide {
    /* Убрали фиксированную высоту (height: 58px) и object-fit: cover */
    width: 100%;
    height: auto; /* Теперь высота подстраивается под ширину пропорционально */
    display: block; /* Убирает отступы под картинкой */
    border-radius: var(--border-radius);
    
    /* Если изображение не загрузится, блок схлопнется или покажет фон */
    background: var(--input-bg); 
    min-height: 50px; /* Минимальная высота на случай ошибки загрузки */
}

/* --- НОВЫЕ СТИЛИ ДЛЯ POP-UP (НА ОСНОВЕ МОДАЛЬНОГО ОКНА) --- */

/* Контейнер модального окна (Фон) */
.popup-backdrop { /* Используем старый класс для совместимости с JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Темный фон */
    display: none; /* Скрыто по умолчанию */
    justify-content: center;
    align-items: flex-end; /* Модалка прижимается к низу экрана */
    z-index: 9999;
}

.popup-backdrop.visible {
    display: flex; /* Показывается при добавлении класса */
}

/* Основное тело модалки */
.modal {
    background-color: var(--card-bg);
    
    /* Устанавливаем радиус для всех четырех углов */
    border-radius: 20px; 
    
    width: 90%;
    max-width: 420px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 1001;
    position: relative;
}

.popup-backdrop.visible .modal {
    transform: translateY(0);
}

/* Кнопка закрытия (крестик) - АДАПТИРОВАНА */
.close-btn {
    position: absolute;
    /* Расчет: 
    1. Изображение начинается на расстоянии 16px (padding модалки).
    2. Крестик имеет размер шрифта 24px, то есть его высота около 24px.
    3. Чтобы центрировать крестик по линии 16px, нужно поднять его на половину его высоты (24px / 2 = 12px).
    4. То есть, новая позиция: 16px - 12px = 4px.
    */
    top: 4px; /* Позиционируем крестик так, чтобы его центр был на линии 16px */
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 32px;
    cursor: pointer;
    z-index: 10;
}

/* Стили для главного изображения */
.main-image-container {
    width: 60%;
    margin: 0 auto 16px auto; 
    aspect-ratio: 1 / 1; 
    border-radius: 16px;
    overflow: hidden;
    background-color: #2c2c2e;
    
    /* КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: Для позиционирования дочерних элементов */
    position: relative; 
}

/* --- СТИЛИ ДЛЯ НАЗВАНИЯ ПОВЕРХ ИЗОБРАЖЕНИЯ (СНИЗУ ПО ЦЕНТРУ) --- */
.image-title-overlay {
    white-space: nowrap;
    /* --- ГЛАВНЫЕ ПРАВКИ: --- */
    
    /* УБЕРИТЕ ЛЮБЫЕ display: flex, align-items, gap, если они тут были */
    
    position: absolute;
    left: 50%; 
    bottom: 10px; 
    transform: translateX(-50%); 
    
    /* КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ: Центрирует текст (и блочные элементы) внутри по горизонтали */
    text-align: center; 
    
    color: var(--text-main);
    padding: 2px 12px;
    border-radius: 8px;
    z-index: 5; 
}

/* Настройки заголовка */
.overlay-title {
    font-size: 22px;
    font-weight: 540;
    line-height: 1.2;
    /* Spring Basket */
}
/* Настройки подзаголовка */
.overlay-subtitle {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
    /* #10773 */
    margin-top: 2px; /* Небольшой отступ между заголовком и подзаголовком */
}
.main-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Блок с кнопками действий (Watch, Status, Share) */
.actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.action-btn {
    background-color: var(--input-bg);
    border: none;
    border-radius: 12px;
    padding: 12px 0;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.action-btn:hover {
    background-color: #3a3a3a;
}

.action-btn svg {
    margin-bottom: 6px;
    width: 20px;
    height: 20px;
    fill: var(--text-main);
}

.action-label {
    font-size: 13px;
    font-weight: 500;
}

/* Таблица характеристик */
.info-table {
    background-color: var(--input-bg);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.info-row {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #3a3a3a;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    width: 30%;
    color: var(--text-muted);
    font-size: 14px;
}

.info-value {
    flex-grow: 1;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.link-text {
    color: var(--primary-blue);
    text-decoration: none;
    margin-right: 8px;
}

.percent-badge {
    background-color: rgba(0, 122, 255, 0.15); /* Цвет на основе primary-blue */
    color: var(--primary-blue);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
}

/* Блок ошибки (красный) */
.error-box {
    background-color: rgba(235, 77, 61, 0.15);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px; /* Используем gap вместо margin-right */
    margin-bottom: 20px;
}

.error-icon {
    min-width: 24px;
    height: 24px;
    background-color: #eb4d3d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.error-text {
    color: #eb4d3d;
    font-size: 14px;
    line-height: 1.4;
}

/* Нижняя часть (награда и кнопки) */
.footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.reward-val {
    color: var(--text-main);
    display: flex;
    align-items: center;
    font-weight: 600;
}

.diamond-icon {
    margin-left: 4px;
    width: 14px;
    height: 14px;
    fill: var(--text-main);
}

.footer-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn-large {
    padding: 14px;
    border-radius: 10px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.btn-cancel {
    background-color: var(--input-bg);
    color: var(--text-main);
}

.btn-auth {
    background-color: var(--primary-blue);
    color: #fff;
}

/* ------------------------------------------------------------------- */
/* АДАПТИВНЫЕ СТИЛИ ДЛЯ СЛАЙДЕРА (БЕЗ ABSOLUTE) */
/* ------------------------------------------------------------------- */

.slider-wrapper {
    position: relative;
    width: 100%;
    /* Убрали фиксированную height: 90px */
    
    /* Используем Grid, чтобы наложить слайды друг на друга без position: absolute */
    display: grid;
    grid-template-columns: 1fr; /* Одна колонка */
    /* Скрываем всё, что вылетает за пределы (для анимации) */
    overflow: hidden; 
    margin-bottom: 20px; /* Отступ снизу как у обычного баннера */
}

.banner-item {
    /* Магия Grid: помещаем все слайды в одну и ту же ячейку (1-я строка, 1-я колонка) */
    grid-column: 1;
    grid-row: 1;
    
    width: 100%;
    /* Убрали height: 100%, теперь высота зависит от контента (картинки) */
    padding: 0 var(--spacing); /* Отступы по бокам */
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Анимация движения */
    transition: transform 0.5s ease-in-out;
}

.banner-item .banner-img {
    width: 100%;
    /* КЛЮЧЕВОЕ: Высота авто, чтобы картинка не обрезалась */
    height: auto !important; 
    object-fit: contain; /* Показываем картинку целиком */
    display: block;
    border-radius: var(--border-radius);
}

/* Логика переключения слайдов (Transform работает внутри Grid так же хорошо) */

/* Слайд, который ждет слева */
.banner-item:not(.active) {
    transform: translateX(-100%);
    /* Важно: чтобы неактивные слайды не растягивали высоту, если они вдруг выше активного (хотя обычно они одинаковые) */
    /* Но в Grid они лежат стопкой, так что высота контейнера будет равна самому высокому слайду. Это ок. */
}

/* Активный слайд */
.banner-item.active {
    transform: translateX(0);
    z-index: 2; /* Поверх остальных */
}

/* Слайд, уходящий вправо */
.banner-item.exit-right {
    transform: translateX(100%); 
    z-index: 1;
}

/* Точки поверх слайдера */
.slider-dots {
    position: absolute;
    bottom: 10px; /* Чуть выше от низа */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 6px;
}

.dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.dot.active {
    background: white;
    transform: scale(1.2);
}

.no-transition {
    transition: none !important; 
}

/* =========================================
   HOVER EFFECTS (Эффекты наведения)
   ========================================= */

/* 1. Задаем плавность анимации для всех кнопок и ссылок */
button, 
a, 
.nav-item, 
.plus-icon, 
.header-icons i, 
.filter-btn, 
.withdraw-btn,
.drx-filter-button,   /* Классы из истории */
.drx-btn-withdraw,    /* Классы из истории */
.drx-btn-clean,       /* Кнопки поп-апа */
.drx-btn-show,        /* Кнопки поп-апа */
.drx-modal-close-btn {
    transition: opacity 0.2s ease, transform 0.1s ease;
    cursor: pointer; /* Курсор "рука" */
}

/* 2. Эффект наведения (HOVER) - Элемент становится темнее (прозрачнее) */
button:hover, 
a:hover, 
.nav-item:hover, 
.plus-icon:hover, 
.header-icons i:hover, 
.filter-btn:hover, 
.withdraw-btn:hover,
.drx-filter-button:hover,
.drx-btn-withdraw:hover,
.drx-btn-clean:hover, 
.drx-btn-show:hover,
.drx-modal-close-btn:hover {
    opacity: 0.7; /* Значение от 0 до 1. Чем меньше, тем темнее */
}

/* 3. Эффект нажатия (ACTIVE) - Элемент немного сжимается (как в Telegram/iOS) */
button:active, 
a:active, 
.nav-item:active, 
.plus-icon:active, 
.header-icons i:active, 
.filter-btn:active, 
.withdraw-btn:active,
.drx-filter-button:active,
.drx-btn-withdraw:active,
.drx-btn-clean:active, 
.drx-btn-show:active,
.drx-modal-close-btn:active {
    transform: scale(0.96); /* Легкое уменьшение размера при клике */
    opacity: 0.5;
}

/* Слой, перекрывающий экран */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #212121; /* Темный фон, как у всей страницы */
    z-index: 9999; /* Поверх всего */
    display: none; /* Скрыто по умолчанию */
    justify-content: center;
    align-items: center;
}

/* Сама крутилка */
.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(135, 116, 225, 0.2); /* Тусклый фиолетовый след */
    border-top: 4px solid #8774e1; /* Яркий фиолетовый акцент */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Анимация вращения */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}