/* --- 1. НОВАЯ ЦВЕТОВАЯ ГАММА И БАЗОВЫЕ СТИЛИ --- */
        :root {
            /* Палитра в стиле Character.ai */
            --bg-main: #181818; /* Очень темный серый фон */
            --bg-element: #252525; /* Серый для элементов */
            --bg-element-hover: #333333;
            --bg-glass: rgba(24, 24, 24, 0.7);
            --border-color: #383838; /* Более заметная граница */
            --text-primary: #E2E2E2;
            --text-secondary: #AAAAAA;
            --text-title: #FFFFFF;
            --color-primary-accent: #FFFFFF; /* Белый как основной акцент */
            
            --border-radius: 12px;
            --border-radius-large: 16px;
        }
     
        body {
            /* ... базовые стили body остаются, как и раньше ... */
            display: flex; flex-direction: column; min-height: 100vh; margin: 0;
            font-family: 'Manrope', sans-serif; background-color: var(--bg-main); color: var(--text-primary);
        }
        main { flex-grow: 1; }
        
        /* --- 2. РЕДИЗАЙН ХЕДЕРА И ПАНЕЛИ УПРАВЛЕНИЯ --- */
        header, .universe-controls-panel-v2 {
            background-color: transparent;
            border: none;
            backdrop-filter: none;
            position: static; /* Убираем "липкость" для чистоты */
        }
        
        .universe-controls-panel-v2 {
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-large);
            padding: 8px;
            margin-bottom: 2rem;
        }

        /* --- 3. НОВЫЙ СТИЛЬ КНОПОК И ПОИСКА --- */
        .category-filter-btn {
            background-color: transparent;
            border: none;
            color: var(--text-secondary);
            border-radius: var(--border-radius);
            font-weight: 600;
        }
        .category-filter-btn:hover {
            background-color: var(--bg-element-hover);
            color: var(--text-primary);
        }
        .category-filter-btn.active {
            background-color: var(--bg-element);
            color: var(--text-primary);
        }

        .universe-search-container input {
            background-color: transparent;
            border: none;
            height: 44px;
        }
        .universe-search-container input:focus {
            outline: none;
        }

        .btn-create-universe-v2 {
            background-color: var(--text-primary);
            color: var(--bg-main);
            border-radius: var(--border-radius);
            font-weight: 700;
        }

        /* --- 4. ГЛАВНОЕ: ГОРИЗОНТАЛЬНЫЕ КАРТОЧКИ --- */
        .community-worlds-grid {
            display: grid;
            grid-template-columns: 1fr; /* Одна колонка, карточки идут друг под другом */
            gap: 12px;
        }

        /* index.html (<style>) */

/* --- НАЧАЛО: ФИНАЛЬНЫЙ РЕДИЗАЙН КАРТОЧЕК V3 (ТОЧНАЯ КОПИЯ) --- */

/* 1. Основной контейнер карточки */
.world-card-cai {
    display: flex;
    flex-direction: column;
    height: auto;
    background-color: var(--bg-element); /* Темно-серый фон для нижней части */
    border-radius: var(--border-radius-large); /* Сильное скругление, как на референсе */
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.world-card-cai:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* 2. Блок с изображением/заглушкой и текстом поверх него */
/* index.html (<style>) */

/* 2. Блок с изображением/заглушкой и текстом поверх него */
.world-card-header {
    position: relative; /* Это "холст" для наложения текста */
    height: 160px; /* Фиксированная высота верхней части */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Прижимаем текст к низу этого блока */
    overflow: hidden; /* <-- ВОТ ИСПРАВЛЕНИЕ. Обрезаем все, что выходит за рамки. */
}

/* 3. Изображение/заглушка - теперь это фон для хедера */
.world-card-image,
.world-card-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.4s ease;
}
.world-card-cai:hover .world-card-image,
.world-card-cai:hover .world-card-image-placeholder {
    transform: scale(1.05);
}

/* 4. Блок с заголовком и автором, который НАКЛАДЫВАЕТСЯ на картинку */
.world-card-header-content {
    position: relative;
    z-index: 2; /* Поверх картинки */
    padding: 12px 15px;
    
    /* ГЛАВНОЕ: создаем градиентное затемнение для читаемости текста */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}

/* 5. Стили для заголовка и автора (текст на картинке) */
.world-card-title {
    font-size: 1.2rem; /* Делаем заголовок крупнее */
    font-weight: 700;
    color: #FFFFFF; /* Яркий белый цвет */
    margin: 0;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}

.world-card-author {
    font-size: 0.9rem;
    font-weight: 500;
    color: #E0E0E0; /* Слегка приглушенный белый */
    margin: 4px 0 0 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* 6. Контейнер для нижней части (описание и теги) */
.world-card-content {
    padding: 15px;
}

/* 7. Описание */
.world-card-description {
    font-size: 0.9rem;
    color: var(--text-secondary); /* Возвращаем приглушенный цвет */
    margin: 0 0 15px 0;
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 8. Контейнер с тегами (meta) */
.world-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* 9. Стиль для каждого отдельного тега */
.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    
    background-color: #333640; /* Темный фон "таблетки" */
    color: var(--text-secondary);
    
    padding: 5px 12px;
    border-radius: 50px; /* Форма "пилюли" */
    
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
}

.meta-item i {
    font-size: 0.9em;
}

/* --- КОНЕЦ: ФИНАЛЬНОГО РЕДИЗАЙНА КАРТОЧЕК --- */
        /* --- 5. СТИЛИ ДЛЯ ЗАГОЛОВКОВ СЕКЦИЙ --- */
        .section-title {
            font-family: var(--font-main); /* Используем основной шрифт, не Orbitron */
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-title);
            margin-bottom: 1.5rem;
        }

        /* Скрываем ненужные элементы */
        .discover-header, .info-slideshow-banner, .gemini-ultra-banner-cai {
            display: none !important;
        }
        /* --- Глобальные переменные и сброс --- */
        :root {
            --bg-main: #0d0d1b;
            --bg-element: rgba(28, 28, 46, 0.5);
            --bg-element-hover: rgba(45, 45, 70, 0.6);
            --bg-glass: rgba(18, 18, 30, 0.6);
            --border-color: rgba(138, 74, 243, 0.2);
            --border-color-light: rgba(138, 74, 243, 0.1);
            --text-primary: #e0e0e5;
            --text-secondary: #a0a0b5;
            --text-title: #ffffff;
            --color-primary: #8a4af3;
            --color-primary-rgb: 138, 74, 243;
            --color-secondary: #4a7cf3;
            --color-accent: #2dedf3;
            --color-success: #4af38a;
            --color-danger: #f34a4a;
            --color-warning: #f3a04a;
            --font-main: 'Manrope', sans-serif;
            --font-headings: 'Orbitron', sans-serif;
            --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.1);
            --shadow-card: 0 6px 25px rgba(0, 0, 0, 0.2);
            --border-radius-small: 6px;
            --border-radius: 12px;
            --border-radius-large: 16px;
            --header-height-desktop: 70px;
            --header-height-mobile: 60px;
            --sidenav-width: 260px;
        }
  /* --- 1. ГЛОБАЛЬНОЕ ОБНОВЛЕНИЕ: Новая палитра и базовые стили --- */
        :root {
            /* Новая цветовая гамма (монохромная, как в примерах) */
            --bg-main: #141414; /* Очень темный, почти черный фон */
            --bg-element: rgba(42, 42, 42, 0.5); /* Темно-серый полупрозрачный для элементов */
            --bg-element-hover: rgba(55, 55, 55, 0.7);
            --bg-glass: rgba(28, 28, 28, 0.6); /* Фон для "стеклянных" панелей */
            --border-color: rgba(255, 255, 255, 0.1); /* Едва заметная светлая граница */
            --border-color-light: rgba(255, 255, 255, 0.05);

            /* Цвета текста для высокого контраста */
            --text-primary: #EAEAEA; /* Слегка приглушенный белый */
            --text-secondary: #A0A0A0; /* Серый для второстепенного текста */
            --text-title: #FFFFFF;

            /* Цвета акцентов (теперь почти не используются, но оставим для системы) */
            --color-primary: #FFFFFF; /* Основной акцентный цвет - белый */
            --color-secondary: #A0A0A0;
            --color-success: #34D399; /* Приглушенный зеленый */
            --color-danger: #F87171; /* Приглушенный красный */
            --color-warning: #FBBF24; /* Приглушенный желтый */

            /* Шрифты (остаются прежними, они хорошо подходят) */
            --font-main: 'Manrope', sans-serif;
            --font-headings: 'Orbitron', sans-serif;

            /* Скругления и тени */
            --border-radius-small: 8px;
            --border-radius: 16px; /* <-- Увеличили скругление */
            --border-radius-large: 20px;
            --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        /* Базовые стили для body */
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            font-family: var(--font-main);
            background-color: var(--bg-main);
            color: var(--text-primary);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }
        main { flex-grow: 1; }
        body.modal-open, body.sidenav-open { overflow: hidden; }

        /* --- 2. НОВЫЙ ПРЕМИАЛЬНЫЙ ДИЗАЙН КНОПОК --- */
        
        /* Основные кнопки (как "Войти", "Создать") */
        .btn-primary,
        .btn-create-universe-v2 {
            background-color: #F0F0F0; /* Светло-серый фон */
            color: #141414; /* Темный текст */
            border: none;
            border-radius: var(--border-radius); /* <-- Сильное скругление */
            font-weight: 600;
            font-size: 1rem;
            padding: 12px 24px;
            transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), background-color 0.2s;
        }
        .btn-primary:hover:not(:disabled),
        .btn-create-universe-v2:hover:not(:disabled) {
            background-color: #FFFFFF;
            transform: scale(1.03); /* Эффект "приближения" */
        }

        /* Второстепенные кнопки (как фильтры) */
        .category-filter-btn {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            border-radius: var(--border-radius);
            font-weight: 500;
            padding: 8px 16px;
            transition: all 0.2s;
        }
        .category-filter-btn:hover {
            border-color: var(--text-primary);
            color: var(--text-primary);
        }
        .category-filter-btn.active {
            background-color: var(--text-primary);
            border-color: var(--text-primary);
            color: #141414;
        }
        
        /* --- 3. РЕДИЗАЙН ХЕДЕРА И ПАНЕЛИ УПРАВЛЕНИЯ --- */
        header {
            position: sticky; /* Возвращаем sticky для удобства */
            top: 0;
            z-index: 1000;
            background-color: var(--bg-glass);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-color);
        }
        header .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        /* Группируем правую часть хедера */
        .header-right-group {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .logo { margin-right: auto; } /* Логотип отталкивает все вправо */
        
        /* Панель управления */
        .universe-controls-panel-v2 {
            position: sticky;
            top: calc(var(--header-height-desktop) + 10px); /* Отступ от хедера */
            z-index: 990;
            background: rgba(28, 28, 28, 0.6); /* Легкий glass без blur */
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-large);
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .universe-search-container { flex-grow: 1; } /* Поиск занимает все свободное место */
        .universe-search-container input {
            background-color: var(--bg-element);
            border: 1px solid transparent;
            border-radius: var(--border-radius);
            height: 44px;
        }
        .universe-search-container input:focus {
            border-color: var(--border-color);
        }

        /* --- 4. УЛУЧШЕННАЯ АДАПТИВНОСТЬ --- */
        @media (max-width: 800px) {
            .universe-controls-panel-v2 {
                top: calc(var(--header-height-mobile) + 10px);
            }
            /* Скрываем кнопки фильтров, оставляем только поиск */
            .universe-category-filters {
                display: none;
            }
            .universe-actions-and-requirements {
                gap: 8px;
            }
        }

        /* --- 5. ЭФФЕКТ БЛИКА ДЛЯ "PLUS" --- */
        @keyframes shine-effect {
            0% { transform: translateX(-150%) skewX(-25deg); }
            100% { transform: translateX(150%) skewX(-25deg); }
        }
        .token-info .token-label,
        #plus-indicator-header,
        #plus-indicator-header .plus-indicator-icon {
            position: relative;
            overflow: hidden;
        }
        .token-info .token-label::before,
        #plus-indicator-header .plus-indicator-icon::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
            animation: shine-effect 4s infinite linear;
            animation-delay: 2.5s;
        }
        
        /* Прочие мелкие улучшения для соответствия стилю */
        .world-card-cai, .modal-content {
            border-radius: var(--border-radius-large);
        }
        .main-footer {
            /* ... стили для футера остаются без изменений ... */
        }
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            font-family: var(--font-main);
            background-color: var(--bg-main);
            color: var(--text-primary);
            font-size: 16px;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            -webkit-tap-highlight-color: transparent;
            overflow-x: hidden;
        }
        body.modal-open, body.sidenav-open { overflow: hidden; }

        h1, h2, h3, h4 {
            font-family: var(--font-headings);
            color: var(--text-title);
            margin: 0 0 1rem 0;
            line-height: 1.3;
            letter-spacing: 0.5px;
        }
        a { color: var(--color-secondary); text-decoration: none; transition: color 0.2s; }
        a:hover { color: var(--color-primary); }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        /* --- Фон с частицами --- */
        #particles-js { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; }

        /* --- Шапка --- */
        header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background-color: var(--bg-glass);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-color);
            height: var(--header-height-desktop);
        }
        header .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;
        }
        .logo { font-family: var(--font-headings); font-size: 1.5rem; font-weight: 700; color: var(--text-title); letter-spacing: 1px; }
        .hamburger-menu { display: none; }
        #desktop-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }
        #desktop-nav a { font-weight: 500; color: var(--text-secondary); padding: 8px 0; border-bottom: 2px solid transparent; transition: all 0.2s; }
        #desktop-nav a:hover, #desktop-nav a.active-link { color: var(--text-title); border-bottom-color: var(--color-primary); }
        
        .auth-section { display: flex; align-items: center; gap: 15px; }
        #login-google-btn { font-weight: 500; padding: 8px 16px; }
        .user-info-logged-in { display: flex; align-items: center; gap: 15px; }
        .nickname-display { font-weight: 500; }
        #plus-indicator-header { color: gold; filter: drop-shadow(0 0 3px gold); }
        .token-info { display: flex; align-items: center; gap: 8px; font-weight: 500; }
        .token-balance { font-family: var(--font-headings); }
        .token-label { font-size: 0.9em; color: var(--text-secondary); }
        
        /* --- Боковое меню (Sidenav) --- */
        .sidenav {
            position: fixed; top: 0; left: 0; width: var(--sidenav-width); height: 100%;
            background-color: rgba(11, 11, 19, 0.9); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
            border-right: 1px solid var(--border-color);
            transform: translateX(calc(-1 * var(--sidenav-width))); visibility: hidden;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s;
            z-index: 1003; display: flex; flex-direction: column;
        }
        body.sidenav-open .sidenav { transform: translateX(0); visibility: visible; transition-delay: 0s; }
        .sidenav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1002; display: none; }
        body.sidenav-open .sidenav-overlay { display: block; }
        /* 2. Заголовок меню */
.sidenav-header {
    font-family: var(--font-main); /* Изменен шрифт на стандартный */
    text-align: left; /* Добавлено выравнивание по левому краю */
    color: var(--text-title);
    padding: 25px 20px;
    font-size: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
        .sidenav-close-btn { position: absolute; top: 10px; right: 10px; font-size: 2rem; color: var(--text-secondary); cursor: pointer; background: none; border: none; }
        .sidenav ul { list-style: none; padding: 15px 10px; margin: 0; flex-grow: 1; overflow-y: auto; }
        .sidenav ul li a { display: flex; align-items: center; gap: 12px; padding: 12px 15px; font-size: 1rem; font-weight: 500; color: var(--text-secondary); border-radius: var(--border-radius-small); margin-bottom: 5px; transition: all 0.2s; border-left: 3px solid transparent; }
        .sidenav ul li a:hover, .sidenav ul li a.active-link { background-color: var(--bg-element-hover); color: var(--text-title); border-left-color: var(--color-primary); }
        .sidenav ul li a i.fa-fw { font-size: 1.1em; width: 25px; text-align: center; color: var(--color-secondary); transition: color 0.2s; }
        .sidenav ul li a:hover i.fa-fw, .sidenav ul li a.active-link i.fa-fw { color: var(--color-primary); }
        .sidenav-footer { padding: 15px; font-size: 0.8rem; text-align: center; color: var(--text-secondary); border-top: 1px solid var(--border-color); }

        /* --- Основной контент --- */
        main { padding-top: 40px; padding-bottom: 60px; }
        .content-section:not(.active-section) { display: none; }

        /* --- Главная секция (#user-universes) --- */
        #user-universes.content-section {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }
        .discover-header {
            text-align: center;
            margin-bottom: 40px;
        }
        .discover-header h2 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .discover-header p {
            font-size: 1.1rem;
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto;
        }

        /* --- Панель управления (фильтры, поиск, создание) --- */
        .universe-controls-panel-v2 {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 15px;
            margin-bottom: 30px;
            background: var(--bg-glass);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-large);
            position: sticky;
            top: calc(var(--header-height-desktop) + 15px);
            z-index: 990;
        }

        .universe-filters-and-search {
            display: flex;
            align-items: center;
            gap: 20px;
            flex-grow: 1;
        }

        .universe-category-filters {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .category-filter-btn {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            padding: 8px 16px;
            border-radius: var(--border-radius);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        .category-filter-btn:hover {
            border-color: var(--color-secondary);
            color: var(--text-primary);
        }
        .category-filter-btn.active {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
            color: var(--text-title);
            box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.3);
        }
        
        .universe-search-container .input-group {
            position: relative;
        }
        .universe-search-container input[type="search"] {
            background-color: var(--bg-element);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 8px 16px 8px 40px;
            color: var(--text-primary);
            width: 250px;
            transition: all 0.2s;
        }
        .universe-search-container input[type="search"]:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.2);
            width: 300px;
        }
        .universe-search-container .input-group-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
        }

        .universe-actions-and-requirements {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .btn-create-universe-v2 {
            padding: 8px 20px;
            font-weight: 700;
            background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
            border: none;
            color: white;
            transition: all 0.3s;
        }
        .btn-create-universe-v2:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(var(--color-primary-rgb), 0.3);
        }
        .api-status-and-vpn-notice {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        .api-key-status-indicator {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .api-key-status-indicator .status-icon.ok { color: var(--color-success); }
        .api-key-status-indicator .status-icon.missing { color: var(--color-warning); }

        /* --- Сетка карточек --- */
        .community-worlds-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .world-card-cai {
            position: relative;
            overflow: hidden;
            background: var(--bg-glass);
            border: 1px solid var(--border-color-light);
            border-radius: var(--border-radius-large);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            display: flex;
            flex-direction: column;
            color: var(--text-primary);
        }
        .world-card-cai:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-card);
            border-color: var(--border-color);
        }
        .world-card-image {
            width: 100%;
            height: 160px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        .world-card-cai:hover .world-card-image {
            transform: scale(1.05);
        }
        .world-card-content {
            padding: 15px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .world-card-title {
            font-size: 1.1rem;
            margin-bottom: 5px;
            font-weight: 700;
        }
        .world-card-author {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 10px;
        }
        .world-card-description {
            font-size: 0.9rem;
            flex-grow: 1;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .world-card-meta {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 0.8rem;
            color: var(--text-secondary);
            border-top: 1px solid var(--border-color-light);
            padding-top: 10px;
            margin-top: auto;
        }
        .meta-item { display: flex; align-items: center; gap: 5px; }

        /* --- Секция Аккаунта --- */
        #account { padding-top: 25px; padding-bottom: 50px; }
        .account-main-grid { max-width: 990px; margin: 0 auto; display: grid; grid-template-columns: 300px 1fr; grid-template-areas: "sidebar content"; gap: 20px; }
        .profile-sidebar-left { grid-area: sidebar; display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--header-height-desktop) + 20px); align-self: flex-start; }
        .account-profile-header, .account-info-block, .profile-content-right { background: var(--bg-glass); border: 1px solid var(--border-color); border-radius: var(--border-radius-large); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-card); }
        .account-profile-header { padding-bottom: 15px; overflow: hidden; }
        .account-cover-photo { height: 100px; background-color: #333640; background-size: cover; background-position: center; }
        .avatar-and-actions { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 15px; transform: translateY(-50%); margin-bottom: -40px; position: relative; }
        .account-avatar-wrapper { width: 90px; height: 90px; border-radius: 50%; background-color: var(--bg-element); padding: 4px; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
        .account-avatar-wrapper .account-avatar-label { width: 100%; height: 100%; cursor: pointer; display: block; position: relative; border-radius: 50%; overflow: hidden; }
        .account-avatar-wrapper #account-avatar-img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; background-color: var(--bg-main); transition: filter 0.2s ease, transform 0.2s ease; }
        .account-avatar-wrapper .account-avatar-label:hover #account-avatar-img { filter: brightness(0.8); transform: scale(1.05); }
        .account-avatar-wrapper .avatar-change-hint { position: absolute; inset: 0; background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
        .account-avatar-wrapper .account-avatar-label:hover .avatar-change-hint { opacity: 1; }
        .profile-main-info { padding: 0 15px; }
        #nickname-display-area { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
        #account-nickname-display { font-size: 1.3rem; color: var(--text-title); font-weight: bold; margin: 0; padding: 0; border: none; line-height: 1.2; }
        #edit-nickname-btn { padding: 6px; width: 28px; height: 28px; border-radius: 50%; font-size: 0.8rem; line-height: 1; min-width: auto; border-color: var(--border-color); color: var(--text-secondary); background: none; }
        .profile-handle { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 10px; }
        .profile-bio-placeholder { font-size: 0.85rem; line-height: 1.4; margin-bottom: 10px; color: var(--text-primary); }
        .profile-stats { display: flex; gap: 15px; font-size: 0.8rem; color: var(--text-secondary); padding-top: 10px; border-top: 1px solid var(--border-color-light); margin-top: 10px; }
        .profile-stats .stat-item strong { color: var(--text-primary); font-weight: bold; margin-right: 4px; }
        .api-key-management { padding: 20px; }
        .profile-content-right { grid-area: content; overflow: hidden; display: flex; flex-direction: column; }
        .account-tab-nav-wrapper { border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
        .account-tab-nav { display: flex; }
        .account-tab-button { flex: 1; padding: 14px 10px; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; transition: all 0.2s ease; text-align: center; }
        .account-tab-button:hover { background-color: var(--bg-element-hover); color: var(--text-primary); }
        .account-tab-button.active-tab { color: var(--color-primary); border-bottom-color: var(--color-primary); }
        .account-tab-content-container { padding: 20px; flex-grow: 1; overflow-y: auto; }
        .account-tab-panel.hidden-tab { display: none; }
        
        /* --- Общие стили --- */
        .btn { border-radius: var(--border-radius-small); cursor: pointer; font-family: inherit; font-weight: 500; padding: 10px 20px; text-align: center; transition: all 0.2s; border: 1px solid transparent; }
        .btn-primary { background-color: var(--color-primary); color: white; border-color: var(--color-primary); }
        .btn-primary:hover:not(:disabled) { background-color: #7938e0; border-color: #7938e0; transform: translateY(-1px); }
        .btn-secondary { background-color: var(--bg-element-hover); color: var(--text-primary); border: 1px solid var(--border-color); }
        .btn-secondary:hover:not(:disabled) { background-color: var(--bg-element); border-color: var(--color-secondary); }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
        .modal-overlay.active-modal { opacity: 1; visibility: visible; transition-delay: 0s; }
        .modal-content { background: var(--bg-glass); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid var(--border-color); border-radius: var(--border-radius-large); padding: 30px; max-width: 500px; width: 90%; position: relative; box-shadow: var(--shadow-card); }
        .modal-close-btn { position: absolute; top: 10px; right: 10px; font-size: 1.8rem; color: var(--text-secondary); background: none; border: none; cursor: pointer; }
        .form-group { margin-bottom: 1.5rem; }
        label { display: block; font-weight: 500; margin-bottom: 8px; color: var(--text-secondary); }
        input[type="text"], input[type="search"], input[type="url"], input[type="password"], input[type="number"], textarea, select { width: 100%; padding: 12px 15px; background: var(--bg-element); border: 1px solid var(--border-color); border-radius: var(--border-radius-small); color: var(--text-primary); font-family: inherit; }
        input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); }
        
        .api-key-missing-banner {
            background-color: rgba(243, 160, 74, 0.1);
            border: 1px solid rgba(243, 160, 74, 0.3);
            border-left: 4px solid var(--color-warning);
            color: var(--text-primary);
            padding: 15px 20px;
            margin: 0 auto 30px auto;
            border-radius: var(--border-radius-small);
            display: none;
            max-width: 1000px;
        }

        /* --- Адаптивность --- */
        @media (max-width: 900px) {
            .account-main-grid { grid-template-columns: 1fr; grid-template-areas: "sidebar" "content"; }
            .profile-sidebar-left { position: static; }
        }
        @media (max-width: 768px) {
            header { height: var(--header-height-mobile); }
            #desktop-nav { display: none; }
            .hamburger-menu { display: block; background: none; border: none; color: var(--text-title); font-size: 1.5rem; z-index: 1004; }
            .universe-controls-panel-v2 { flex-direction: column; gap: 15px; align-items: stretch; position: static; }
            .universe-filters-and-search { flex-direction: column; align-items: stretch; }
            .universe-search-container input[type="search"], .universe-search-container input[type="search"]:focus { width: 100%; }
            .community-worlds-grid { grid-template-columns: 1fr; }
        }
 .category-filter-btn {
                height: auto; /* Позволяем высоте определяться контентом и padding */
                padding: 6px 12px; /* Возвращаем маленький padding */
            }
            .creation-mode-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1.5rem;
        background-color: var(--bg-element);
        border-radius: var(--border-radius);
        padding: 5px;
        border: 1px solid var(--border-color);
    }
    .creation-mode-toggle input[type="radio"] {
        display: none;
    }
    .creation-mode-toggle label {
        flex: 1;
        text-align: center;
        padding: 8px 12px;
        border-radius: var(--border-radius-small);
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease-in-out;
        color: var(--text-secondary);
        user-select: none;
    }
    .creation-mode-toggle input[type="radio"]:checked + label {
        background-color: var(--color-primary);
        color: var(--text-title);
        box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.3);
    }
    .form-subgroup {
        display: flex;
        gap: 15px;
        align-items: flex-end;
    }
    .form-subgroup .form-group {
        flex: 1;
        margin-bottom: 0;
    }

    /* НАЧАЛО: КОД ДЛЯ ИСПРАВЛЕНИЯ БАННЕРА (вставить в <style> в <head>) */

.info-slideshow-banner {
    /* 1. ГЛАВНОЕ ИСПРАВЛЕНИЕ: Заставляем баннер занимать всю ширину сетки */
    grid-column: 1 / -1;
    
    /* 2. Улучшения для внутреннего дизайна баннера */
    position: relative; /* Необходимо для позиционирования дочерних элементов */
    height: 280px;      /* Задаем фиксированную высоту для баннера */
    padding: 0;
    overflow: hidden;   /* Скрываем все, что выходит за пределы */
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-slides-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.banner-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.banner-slide.active-slide {
    opacity: 1;
}

/* Оверлей для затемнения фона и читаемости текста */
.slide-content-overlay {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 25px;
    text-align: center;
    color: #fff;
    background: rgba(13, 13, 27, 0.75); /* Полупрозрачный фон из основной палитры */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: var(--border-radius);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.slide-content-overlay h4 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--text-title);
}

.slide-content-overlay p {
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.5;
}

/* Стили для точек навигации слайдера */
.banner-dots-container {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 10px;
}

.banner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    padding: 0;
}

.banner-dot:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

.banner-dot.active-dot {
    background-color: #fff;
}

/* НАЧАЛО: CSS ДЛЯ ДИЗАЙНА СОХРАНЕНИЙ И ДРУГИХ ИСПРАВЛЕНИЙ */

#saved-games-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Расстояние между карточками сохранений */
}

.saved-game-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--bg-element);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}

.saved-game-item:hover {
    background: var(--bg-element-hover);
    border-color: var(--border-color);
}

.saved-game-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden; /* Важно для обрезки текста */
}

.saved-game-world {
    font-weight: bold;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saved-game-snippet {
    font-size: 0.9em;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}

.saved-game-time {
    font-size: 0.8em;
    color: var(--text-secondary);
    opacity: 0.7;
}

.saved-game-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0; /* Чтобы кнопки не сжимались */
}

/* Стили для админ-панели */
#admin-tools-section {
    border-top: 1px solid var(--border-color);
    margin-top: 2rem;
    padding-top: 1.5rem;
}

/* --- Стили для скролла в больших модальных окнах --- */
        /* 1. Стили для ПК (экраны > 768px) - скролла НЕТ */
#create-universe-modal .modal-content,
#edit-universe-modal .modal-content,
#edit-character-modal .modal-content { /* <-- ДОБАВЛЕН СЕЛЕКТОР */
    max-height: none;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
}

/* 2. Стили для МОБИЛЬНЫХ (экраны <= 768px) - скролл ЕСТЬ */
@media (max-width: 768px) {
    #create-universe-modal .modal-content,
    #edit-universe-modal .modal-content,
    #edit-character-modal .modal-content { /* <-- ДОБАВЛЕН СЕЛЕКТОР */
        max-height: 85vh;
        overflow-y: auto;
    }

    #create-universe-modal .modal-content form,
    #edit-universe-modal .modal-content form,
    #edit-character-modal .modal-content form { /* <-- ДОБАВЛЕН СЕЛЕКТОР */
        flex-grow: 1;
    }
}

        #create-universe-modal .modal-content form,
        #edit-universe-modal .modal-content form {
            flex-grow: 1; /* Позволяет форме растягиваться и корректно скроллиться */
        }
        
        /* Новая сетка для более компактного вида */
        .form-grid-2col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        /* Адаптация сетки для мобильных устройств */
        @media (max-width: 600px) {
            .form-grid-2col {
                grid-template-columns: 1fr;
            }
        }

         /* --- 1. Кастомный дизайн для скроллбара --- */
        /* Для Chrome, Edge, Safari и других WebKit-браузеров */
        ::-webkit-scrollbar {
            width: 8px; /* Делаем скроллбар тоньше */
        }

        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.2); /* Полупрозрачный темный фон дорожки */
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #4a4e5c; /* Основной цвет ползунка - матовый серый */
            border-radius: 10px;
            border: 2px solid transparent; /* Отступ для эффекта "парения" */
            background-clip: content-box;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #6a6e7c; /* Цвет ползунка при наведении */
        }
        
        /* Для Firefox */
        * {
            scrollbar-width: thin;
            scrollbar-color: #4a4e5c rgba(0, 0, 0, 0.2);
        }
        
        /* --- 2. Изменение цвета основных кнопок на матовый черный/серый --- */
        .btn-primary,
        #save-universe-btn,
        #confirm-edit-universe-btn,
        #confirm-purchase-btn,
        #confirm-sub-purchase-btn {
            background: linear-gradient(145deg, #3a3f4b, #2f3136); /* Градиент для объема */
            background-color: #333640; /* Базовый матовый темно-серый */
            border: 1px solid #4a4e5c; /* Слегка заметная граница */
            color: var(--text-title);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .btn-primary:hover:not(:disabled),
        #save-universe-btn:hover:not(:disabled),
        #confirm-edit-universe-btn:hover:not(:disabled),
        #confirm-purchase-btn:hover:not(:disabled),
        #confirm-sub-purchase-btn:hover:not(:disabled) {
            background: linear-gradient(145deg, #4a4e5c, #3a3f4b);
            background-color: #444857; /* Чуть светлее при наведении */
            border-color: #6a6e7c;
            transform: translateY(-2px); /* Сохраняем эффект "поднятия" */
            box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Усиливаем тень */
        }
        
        /* Убираем фиолетовый цвет у активных вкладок и ссылок в меню, делая их белыми */
        #desktop-nav a.active-link,
        .sidenav ul li a.active-link {
            border-bottom-color: var(--text-title);
            border-left-color: var(--text-title);
        }
        .account-tab-button.active-tab {
            color: var(--text-title);
            border-bottom-color: var(--text-title);
        }
        .category-filter-btn.active {
            background-color: #4a4e5c;
            border-color: #6a6e7c;
            box-shadow: none;
        }

        
        /* --- 1. Новый дизайн значка "18+" на карточках --- */
        .world-card-nsfw-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            background-color: rgba(220, 38, 38, 0.85); /* Насыщенный красный с прозрачностью */
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            color: #ffffff;
            padding: 4px 10px;
            border-radius: var(--border-radius-small);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            z-index: 2; /* Чтобы был поверх картинки */
            border: 1px solid rgba(255, 255, 255, 0.2);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }

        /* --- 2. Логика "липкого" поиска и скрытия хедера --- */
        
        /* Заставляем хедер (шапку сайта) прокручиваться вместе со страницей, а не "липнуть" */
        header {
            position: static; /* <-- КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: убираем sticky */
        }
        
        /* Заставляем панель с поиском "липнуть" к самому верху экрана при скролле */
        .universe-controls-panel-v2 {
            top: 15px; /* <-- КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: отступ от верха экрана, а не от хедера */
            /* Свойство position: sticky; у этой панели уже есть в вашем коде, мы просто меняем 'top' */
        }

        /* Заставляем сам слайд (а не только текстовый блок) иметь полупрозрачный фон */
        .banner-slide {
            background: rgba(13, 13, 27, 0.75); /* Полупрозрачный фон из основной палитры */
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border-radius: var(--border-radius-large); /* Применяем скругление к самому слайду */
            align-items: center;
            justify-content: center;
            display: flex;
        }

        /* Убираем фон и лишние стили у текстового блока, он теперь просто контейнер */
        .slide-content-overlay {
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            padding: 10px; /* Небольшой внутренний отступ для текста */
        }
        
        /* КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ ДЛЯ СЕТКИ: 
           Заставляем баннер занимать всю ширину, не ломая поток.
           Flexbox подходит для этого лучше, чем Grid. */
        .community-worlds-grid {
            display: flex; /* <-- Меняем Grid на Flex */
            flex-wrap: wrap; /* <-- Разрешаем перенос на новые строки */
            gap: 20px;
        }

        .community-worlds-grid > .world-card-cai {
            flex-basis: calc(25% - 15px); /* <-- Задаем базовую ширину для 4 колонок с учетом отступа */
            flex-grow: 1; /* <-- Позволяем карточкам растягиваться, чтобы заполнить место */
            min-width: 300px; /* <-- Минимальная ширина, как и раньше */
        }

        /* Баннер теперь тоже flex-элемент, который занимает всю ширину */
        .info-slideshow-banner {
            flex-basis: 100%; /* <-- Заставляем баннер занимать всю доступную ширину строки */
            order: 5; /* <-- Гарантируем, что баннер будет после первых нескольких карточек */
        }


        /* --- 2. Компактный вид карточек в разделе "Мои творения" --- */
        #my-universes-list .world-card-cai {
            flex-direction: row; /* <-- Делаем карточку горизонтальной */
            height: auto;
            max-width: 100%; /* Убедимся, что она не вылезает за пределы контейнера */
        }

        #my-universes-list .world-card-image {
            width: 80px;  /* <-- Фиксированная ширина для картинки */
            height: 110px; /* <-- Фиксированная высота */
            flex-shrink: 0; /* <-- Запрещаем картинке сжиматься */
            border-top-left-radius: var(--border-radius-large);
            border-bottom-left-radius: var(--border-radius-large);
            border-top-right-radius: 0; /* Убираем скругление справа */
        }
        
        #my-universes-list .world-card-content {
            padding: 10px 15px; /* <-- Уменьшаем отступы */
        }

        #my-universes-list .world-card-title {
            font-size: 1rem; /* <-- Уменьшаем шрифт заголовка */
            -webkit-line-clamp: 1; /* Ограничиваем одной строкой */
        }
        
        #my-universes-list .world-card-description {
            font-size: 0.85rem; /* <-- Уменьшаем шрифт описания */
            -webkit-line-clamp: 2; /* Ограничиваем двумя строками */
            margin-bottom: 8px;
        }

        #my-universes-list .world-card-meta {
            padding-top: 8px;
            font-size: 0.75rem; /* <-- Уменьшаем мета-информацию */
        }
        
        /* Адаптивность для мобильных устройств (чтобы карточки не ломались) */
        @media (max-width: 500px) {
             .community-worlds-grid > .world-card-cai {
                flex-basis: 100%; /* Одна карточка на всю ширину */
             }
        }

          /* --- 1. Возвращаем правильную сеточную структуру (Grid) --- */
        .community-worlds-grid {
            display: grid; /* <-- ВОЗВРАЩАЕМ Grid, это правильно */
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* <-- Стандартная отзывчивая сетка */
            gap: 20px;
        }

        /* Убираем лишние flex-свойства с карточек, Grid сам их расставит */
        .community-worlds-grid > .world-card-cai {
           /* Никаких flex-basis или flex-grow здесь не нужно */
        }
        
        /* --- 2. Улучшенный вид баннера и ГЛАВНОЕ ИСПРАВЛЕНИЕ для его расположения --- */
        .info-slideshow-banner {
            grid-column: 1 / -1; /* <-- ВОТ РЕШЕНИЕ: Заставляем баннер занять ВСЕ колонки в ряду */
            
            height: 200px; 
            margin: 20px 0; 
            border: none;
            box-shadow: 0 5px 25px rgba(0,0,0,0.3);
            /* order: 5;  <-- order не нужен в Grid для этой задачи */
        }

        /* Стили для внутреннего содержимого баннера (остаются как есть) */
        .banner-slide {
            background: rgba(13, 13, 27, 0.75); 
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border-radius: var(--border-radius-large);
            align-items: center;
            justify-content: center;
            display: flex;
        }
        .slide-content-overlay {
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            padding: 10px;
        }
        .slide-content-overlay h4 {
            font-size: 1.3rem;
            margin-bottom: 8px;
        }
        .slide-content-overlay p {
            font-size: 0.9rem;
            line-height: 1.4;
        }
        .banner-dots-container {
            bottom: 12px;
        }
        
        /* --- 1. Стили для новой иконки-кнопки "Профиль" --- */
        .btn-icon-only {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            background-color: var(--bg-element-hover);
            border: 1px solid var(--border-color);
            border-radius: 50%; /* Делаем ее круглой */
            color: var(--text-secondary);
            font-size: 1.4rem;
            position: relative; /* для позиционирования индикатора Plus */
            transition: all 0.2s ease;
        }

        .btn-icon-only:hover {
            color: var(--text-title);
            border-color: var(--color-primary);
            background-color: var(--bg-element);
            transform: translateY(-2px);
        }

        .plus-indicator-icon {
            position: absolute;
            bottom: -2px;
            right: -2px;
            font-size: 0.8rem;
            line-height: 1;
            filter: drop-shadow(0 0 3px gold);
        }

        /* --- 2. Адаптивность для панели поиска и фильтров на мобильных --- */
        @media (max-width: 800px) {
            /* Панель теперь вертикальная */
            .universe-controls-panel-v2 {
                flex-direction: column;
                align-items: stretch; /* Растягиваем дочерние элементы по ширине */
                gap: 15px;
            }

            .universe-filters-and-search,
            .universe-actions-and-requirements {
                width: 100%; /* Заставляем обе секции занимать всю ширину */
            }

            /* Делаем фильтры прокручиваемыми по горизонтали - это красиво и компактно */
            .universe-category-filters {
                overflow-x: auto;
                padding-bottom: 10px; /* Отступ для скроллбара */
                white-space: nowrap; /* Запрещаем перенос кнопок на новую строку */
                -ms-overflow-style: none;  /* Скрываем скроллбар в IE/Edge */
                scrollbar-width: none;  /* Скрываем скроллбар в Firefox */
            }
            /* Скрываем скроллбар в Webkit-браузерах (Chrome, Safari) */
            .universe-category-filters::-webkit-scrollbar {
                display: none;
            }

            /* Растягиваем поиск на всю ширину */
            .universe-search-container {
                width: 100%;
            }
            .universe-search-container input[type="search"] {
                width: 100%;
            }

            /* Расставляем статус API и кнопку "Создать" по краям */
            .universe-actions-and-requirements {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }

        /* --- 1. Приводим кнопку "Создать" к общему стилю (матовый черный) --- */
        .btn-create-universe-v2 {
            padding: 8px 16px; /* Уменьшаем внутренние отступы */
            font-weight: 600;
            background: linear-gradient(145deg, #3a3f4b, #2f3136);
            background-color: #333640;
            border: 1px solid #4a4e5c;
            color: var(--text-title);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: all 0.2s ease;
        }

        .btn-create-universe-v2:hover:not(:disabled) {
            background: linear-gradient(145deg, #4a4e5c, #3a3f4b);
            background-color: #444857;
            border-color: #6a6e7c;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        /* --- 2. Новая адаптивность для панели управления (все в одну линию) --- */
        @media (max-width: 800px) {
            /* Контейнер панели управления */
            .universe-controls-panel-v2 {
                padding: 10px; /* Уменьшаем отступы самой панели */
                gap: 10px; /* Уменьшаем расстояние между группами элементов */
            }

            /* Левая часть: фильтры и поиск */
            .universe-filters-and-search {
                flex-grow: 1; /* Позволяем этому блоку занять все доступное место */
                gap: 10px;
            }

            /* Сами кнопки фильтров */
            .universe-category-filters {
                gap: 5px; /* Сжимаем расстояние между кнопками */
            }
            .category-filter-btn {
                padding: 6px 10px; /* Делаем кнопки меньше */
                font-size: 0.85rem;
            }

            /* Поисковая строка */
            .universe-search-container {
                flex-grow: 1; /* Поиск занимает оставшееся место слева */
            }
            .universe-search-container input[type="search"] {
                width: 100%; /* Растягиваем на всю ширину своего контейнера */
                padding-left: 35px;
                height: 36px;
            }
             .universe-search-container .input-group-icon {
                left: 12px;
            }


            /* Правая часть: Статус API и кнопка "Создать" */
            .universe-actions-and-requirements {
                flex-shrink: 0; /* Запрещаем этому блоку сжиматься */
                gap: 10px;
            }
            .api-key-status-indicator .status-text {
                display: none; /* Скрываем текст "API: OK", оставляем только иконку */
            }
            .btn-create-universe-v2 {
                padding: 6px 12px; /* Делаем кнопку "Создать" еще компактнее */
            }
        }
          /* --- 1. Новый премиальный дизайн для основных кнопок --- */
        .btn-primary,
        .btn-create-universe-v2 {
            background: linear-gradient(145deg, #2a2355, #1e1a3b); /* Глубокий фиолетово-синий */
            border: 1px solid rgba(138, 74, 243, 0.25); /* Стеклянная граница */
            color: #f0f0f5; /* Слегка теплый белый для текста */
            font-weight: 600;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), /* Внутренний блик сверху */
                        0 2px 3px rgba(0,0,0,0.3), /* Внешняя тень */
                        0 0 15px rgba(var(--color-primary-rgb), 0.1); /* Легкое свечение */
            transition: all 0.15s ease-out;
        }

        .btn-primary:hover:not(:disabled),
        .btn-create-universe-v2:hover:not(:disabled) {
            background: linear-gradient(145deg, #352d6a, #2a2355); /* Чуть светлее при наведении */
            border-color: rgba(138, 74, 243, 0.4);
            transform: translateY(-2px);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1),
                        0 4px 8px rgba(0,0,0,0.3),
                        0 0 20px rgba(var(--color-primary-rgb), 0.2);
        }
        
        /* "Сочный" эффект нажатия */
        .btn-primary:active:not(:disabled),
        .btn-create-universe-v2:active:not(:disabled) {
            transform: translateY(0px) scale(0.98);
            box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
        }

        /* --- 2. Эффект переливающегося блика для текста "Plus" --- */
        @keyframes shine-effect {
            0% { transform: translateX(-150%); }
            100% { transform: translateX(150%); }
        }

        .token-label, #plus-indicator-header {
            position: relative; /* Необходимо для позиционирования блика */
            overflow: hidden;   /* Скрываем блик за пределами текста */
        }

        .token-label::before, #plus-indicator-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 50%; /* Ширина самого блика */
            height: 100%;
            background: linear-gradient(to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.5) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: translateX(-150%);
            animation: shine-effect 4s infinite linear;
            animation-delay: 2.5s; /* Задержка перед началом анимации */
        }
        
        /* --- 3. Расположение иконки профиля в хедере --- */
        header .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        #desktop-nav {
            margin-left: auto; /* Прижимает навигацию (иконку профиля) вправо */
            margin-right: 20px; /* Отступ от основной секции авторизации */
        }
        .auth-section {
            flex-shrink: 0; /* Запрещаем секции сжиматься */
        }

        /* --- 4. Финальная адаптивность для панели управления --- */
        @media (max-width: 800px) {
            .universe-controls-panel-v2 {
                flex-wrap: nowrap; /* Запрещаем перенос на новую строку */
                padding: 8px;
                gap: 8px;
            }

            .universe-filters-and-search {
                min-width: 0; /* Позволяет блоку сжиматься */
            }

            .category-filter-btn {
                padding: 6px 8px;
                font-size: 0.8rem;
            }
            /* Скрываем кнопку "Все", так как она занимает много места */
            .category-filter-btn[data-category="all"] {
                display: none;
            }

            .universe-search-container input[type="search"] {
                height: 38px;
            }

            /* Группируем статус API и кнопку "Создать" вместе */
            .universe-actions-and-requirements {
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .api-key-status-indicator {
                font-size: 0.8rem; /* Уменьшаем шрифт, чтобы текст поместился */
                white-space: nowrap; /* Запрещаем перенос текста */
            }
        }

         /* --- 1. ГЛАВНОЕ ИСПРАВЛЕНИЕ: Прижимаем подвал к низу страницы --- */
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Тело сайта всегда занимает минимум 100% высоты экрана */
        }

        main {
            flex-grow: 1; /* Основной контент (<main>) растягивается, чтобы занять все свободное место, 
                             тем самым отталкивая подвал (<footer class="main-footer">) вниз */
        }

        /* --- 2. Улучшенный дизайн самого подвала --- */
        .main-footer {
            flex-shrink: 0; /* Запрещаем подвалу сжиматься */
            background-color: rgba(13, 13, 27, 0.6); /* Слегка заметный фон, чтобы он не сливался с частицами */
            border-top: 1px solid var(--border-color); /* Верхняя граница для четкого отделения */
            padding: 2rem 0;
            color: var(--text-secondary);
            font-size: 0.9rem;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }

        .main-footer .container {
            display: flex;
            justify-content: space-between; /* Разносим элементы по краям на ПК */
            align-items: center;
            flex-wrap: wrap; /* Разрешаем перенос на мобильных */
            gap: 1rem;
        }

        .main-footer p {
            margin: 0; /* Убираем стандартные отступы у параграфов */
        }

        .main-footer a {
            color: var(--text-secondary); /* Делаем ссылки менее яркими */
        }

        .main-footer a:hover {
            color: var(--text-primary); /* При наведении делаем ярче */
        }

        /* --- 3. Адаптивность подвала для мобильных устройств --- */
        @media (max-width: 768px) {
            .main-footer .container {
                flex-direction: column; /* Ставим элементы друг под другом */
                justify-content: center;
                text-align: center;
                gap: 0.5rem;
            }
        }
        .category-filter-btn {
                height: auto; /* Позволяем высоте определяться контентом и padding */
                padding: 6px 12px; /* Возвращаем маленький padding */
            }
            /* --- Новый анимированный плейсхолдер для карточек --- */
        @keyframes placeholder-gradient-animation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .world-card-image-placeholder {
            /* Размеры, как у картинки */
            width: 100%;
            height: 160px; 
            
            /* Создаем и анимируем градиент */
            background: linear-gradient(-45deg, #1e1a3b, #2a2355, #141414, #2f3136);
            background-size: 400% 400%;
            animation: placeholder-gradient-animation 15s ease-in-out infinite;
            
            /* Центрируем иконку внутри */
            display: flex;
            align-items: center;
            justify-content: center;
            
            /* Стили для иконки */
            font-size: 3.5rem; /* Размер иконки */
            color: rgba(234, 234, 234, 0.2); /* Полупрозрачный белый цвет */
            text-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Тень для объема */
        }
        

        /* --- 1. Стили для текстовой заглушки --- */
        .text-placeholder {
            /* Используем существующую анимацию градиента */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            
            /* Стили для текста названия */
            font-family: var(--font-headings);
            font-size: 1.5rem;
            font-weight: 700;
            color: rgba(234, 234, 234, 0.7); /* Полупрозрачный белый */
            text-align: center;
            line-height: 1.2;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }

        /* --- 2. Стили для нового тега "18+" в мета-данных --- */
        .nsfw-meta-tag {
            background-color: #8B0000; /* Темно-красный фон */
            color: #FFFFFF;
            padding: 2px 8px;
            border-radius: var(--border-radius-small);
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.2;
        }

        /* Убираем старый значок, если он где-то остался */
        .world-card-nsfw-badge {
            display: none !important;
        }

          /* --- 1. Новый премиальный дизайн для кнопки "Создать" (и других основных) --- */
         /* --- Финальный "сочный" черный дизайн для кнопок --- */
        .btn-primary,
        .btn-create-universe-v2 {
            background: linear-gradient(145deg, #2e2e32, #1b1b1e); /* Градиент от темно-серого к почти черному */
            border: 1px solid rgba(255, 255, 255, 0.1); /* Тонкая "стеклянная" граница */
            color: #EAEAEA; /* Светлый текст */
            border-radius: var(--border-radius);
            font-weight: 600;
            padding: 10px 24px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            /* Внутренняя тень для эффекта объема */
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05),
                        0 4px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.2s ease-out;
        }

        .btn-primary:hover:not(:disabled),
        .btn-create-universe-v2:hover:not(:disabled) {
            transform: translateY(-2px); /* "Приподнимаем" кнопку */
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1),
                        0 6px 20px rgba(0, 0, 0, 0.3); /* Усиливаем тень */
        }

        /* Эффект "нажатия" */
        .btn-primary:active:not(:disabled),
        .btn-create-universe-v2:active:not(:disabled) {
            transform: translateY(0px) scale(0.98); /* Вдавливаем кнопку */
            background: #1b1b1e; /* Делаем фон темнее при нажатии */
            box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
        }

        /* --- 2. Обновленный "стеклянный" дизайн для подвала --- */
        .main-footer {
            background-color: var(--bg-glass); /* Тот же фон, что и у хедера/панели */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid var(--border-color);
            padding: 1.5rem 0;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .main-footer .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

           /* --- 1. ВЫРАВНИВАНИЕ ХЕДЕРА И ПАНЕЛИ УПРАВЛЕНИЯ --- */
        /* Применяем одинаковые отступы и ширину к обоим контейнерам */
        header .container,
        .universe-controls-panel-v2 {
            max-width: 1400px; /* Максимальная ширина контента */
            margin-left: auto;
            margin-right: auto;
            padding-left: 20px;
            padding-right: 20px;
        }

        /* --- 2. УЛУЧШЕННЫЙ ЭФФЕКТ СВЕЧЕНИЯ ДЛЯ "PLUS" --- */
        @keyframes subtle-shine-effect {
            0% { transform: translateX(-150%) skewX(-20deg); }
            100% { transform: translateX(150%) skewX(-20deg); }
        }

        .token-info .token-label,
        .plus-indicator-icon {
            position: relative;
            overflow: hidden;
        }

        .token-info .token-label::before,
        .plus-indicator-icon::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 40%;
            height: 100%;
            /* Мягкий, слегка голубоватый блик */
            background: linear-gradient(to right,
                rgba(200, 200, 255, 0) 0%,
                rgba(200, 200, 255, 0.3) 50%,
                rgba(200, 200, 255, 0) 100%
            );
            animation: subtle-shine-effect 5s infinite linear;
            animation-delay: 2s;
        }

        /* --- 3. ФИНАЛЬНАЯ АДАПТИВНОСТЬ ХЕДЕРА И ПАНЕЛИ --- */
        @media (max-width: 800px) {
            /* Уменьшаем отступы на мобильных */
            header .container,
            .universe-controls-panel-v2 {
                padding-left: 15px;
                padding-right: 15px;
            }

            /* --- Мобильный хедер --- */
             .logo {
                font-size: 1.2rem; /* Уменьшаем логотип */
            }

            /* Скрываем текстовый никнейм, он не нужен на мобильных */
            #user-info .nickname-display {
                display: none;
            }

            /* Делаем блок с токенами и кнопками компактнее */
            #user-info {
                gap: 8px; /* Уменьшаем расстояние между элементами */
            }

            /* Стиль для кнопок "Купить" и "Выйти" */
            #user-info .btn-secondary {
                padding: 6px 10px;
                font-size: 0.8rem;
                border-radius: 8px;
            }
            
            /* Скрываем кнопку "Купить", оставляем только баланс */
            #buy-tokens-btn-header {
                display: none;
            }

            /* Правая группа: иконка профиля и блок авторизации */
            .header-right-group {
                display: flex;
                align-items: center;
                gap: 12px; /* Расстояние между иконкой профиля и остальными элементами */
            }
            
            /* Возвращаем иконку профиля на мобильных */
            #desktop-nav {
                display: block; /* Показываем навигацию, где лежит иконка */
            }
            #desktop-nav ul {
                padding: 0;
                margin: 0;
            }
            /* Скрываем всё лишнее в информации о пользователе */
            #user-info .nickname-display,
            #user-info #buy-tokens-btn-header,
            #user-info #logout-btn {
                display: none;
            }
            /* Оставляем только иконку токенов и баланс */
            #user-info .token-info {
                gap: 5px;
                font-size: 0.9rem;
            }
            .header-right-group {
                gap: 15px; /* Уменьшаем расстояние между иконкой профиля и кнопками */
            }
            #desktop-nav {
                margin-right: 0;
            }
            .btn-primary { /* Уменьшаем кнопку "Войти" */
                padding: 8px 16px;
                font-size: 0.9rem;
            }

            /* --- Мобильная панель управления --- */
            .universe-controls-panel-v2 {
                flex-wrap: nowrap;
                gap: 8px;
            }
            /* Скрываем текстовые фильтры */
            .universe-category-filters {
                display: none;
            }
            /* Поиск занимает всё место */
            .universe-search-container {
                flex-grow: 1;
            }
            .universe-actions-and-requirements {
                gap: 8px;
            }
            /* Оставляем текст у API статуса */
            .api-key-status-indicator {
                font-size: 0.8rem;
                white-space: nowrap;
            }
        }

        
        /* --- 1. Премиальный стиль для выделения текста --- */
        ::selection {
            background-color: rgba(234, 234, 234, 0.25); /* Полупрозрачный светлый фон */
            color: #FFFFFF; /* Белый цвет текста при выделении */
        }
        ::-moz-selection { /* Для Firefox */
            background-color: rgba(234, 234, 234, 0.25);
            color: #FFFFFF;
        }

        /* --- 2. Новый дизайн для переключателя "Мир / Персонаж" --- */
        .creation-mode-toggle {
            background-color: var(--bg-element); /* Темно-серая основа */
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius); /* Большое скругление */
            padding: 5px;
            display: flex;
            gap: 5px; /* Небольшой отступ между кнопками */
        }

        .creation-mode-toggle label {
            flex: 1; /* Кнопки занимают равное пространство */
            text-align: center;
            padding: 10px 15px;
            border-radius: 12px; /* Внутреннее скругление, чуть меньше основного */
            cursor: pointer;
            font-weight: 600; /* Делаем шрифт жирнее */
            color: var(--text-secondary); /* Неактивный цвет */
            transition: all 0.2s ease-in-out;
            user-select: none;
            border: 1px solid transparent; /* Добавляем прозрачную рамку для стабильности размера */
        }

        /* Стиль для ВЫБРАННОЙ кнопки */
        .creation-mode-toggle input[type="radio"]:checked + label {
            background-color: #333640; /* Сплошной, чуть более светлый серый */
            color: var(--text-title);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* Тень для эффекта "кнопки" */
            border-color: rgba(255, 255, 255, 0.1);
        }

         /* --- 1. Улучшаем саму иконку астронавта --- */
        #nav-account-link i.fa-user-astronaut {
            font-size: 1.5rem; /* Делаем иконку чуть крупнее и выразительнее */
            color: var(--text-secondary);
            transition: color 0.2s;
        }

        #nav-account-link:hover i.fa-user-astronaut {
            color: var(--text-primary); /* Становится ярче при наведении */
        }

        /* --- 2. Скрываем старую, ненадежную эмодзи-звездочку --- */
        #plus-indicator-header {
            /* Этот трюк скрывает текстовый контент (эмодзи), но оставляет сам блок видимым для псевдо-элемента */
            font-size: 0;
            color: transparent;
        }

        /* --- 3. Создаем новый, стильный индикатор "+" с помощью CSS --- */
        #plus-indicator-header::before {
            content: '+'; /* <-- Создаем контент в виде знака "плюс" */
            position: absolute;
            bottom: 1px;
            right: 1px;
            
            /* Стилизация кружка */
            display: flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: #FFBF00; /* Насыщенный золотой цвет */
            
            /* Стилизация самого знака "+" */
            color: #141414; /* Темный цвет для контраста */
            font-size: 10px;
            font-weight: 900;
            line-height: 14px; /* Для идеального центрирования */
            
            /* Эффект свечения */
            box-shadow: 0 0 10px rgba(255, 191, 0, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.3); /* Легкий блик по краю */
        }

          #desktop-nav {
            margin-left: 0; /* <-- Убираем автоматический отступ, который расталкивал элементы */
            margin-right: 0; /* <-- Убираем лишний правый отступ */
        }

        /* Убедимся, что у родительского контейнера есть отступ, чтобы иконка не "прилипла" */
        .header-right-group {
            gap: 20px; /* Задаем фиксированный и красивый отступ между иконкой и блоком с ником */
        }

        
        /* --- Финальный, идеально ровный дизайн для переключателя "Мир / Персонаж" --- */
        .creation-mode-toggle {
            background-color: var(--bg-element);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 0; /* <-- УБИРАЕМ ВНУТРЕННИЙ ОТСТУП, который создавал зазор */
            display: flex;
            /* gap остается не нужен, так как кнопки будут вплотную */
        }

        .creation-mode-toggle label {
            flex: 1;
            text-align: center;
            padding: 10px 15px; /* Отступы теперь только у самих кнопок */
            border-radius: 12px;
            cursor: pointer;
            font-weight: 600;
            color: var(--text-secondary);
            transition: all 0.2s ease-in-out;
            user-select: none;
            /* Добавляем небольшой отступ, чтобы кнопки не сливались в неактивном состоянии */
            margin: 4px; 
        }

        .creation-mode-toggle input[type="radio"]:checked + label {
            background-color: #333640;
            color: var(--text-title);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            /* Убираем отступ у активной кнопки, чтобы она "прилипла" к краям */
            margin: 0; 
            padding: 14px 15px; /* Компенсируем убранный margin увеличением padding */
        }

         /* --- 1. Баннер подписки размером в две карточки --- */
        .gemini-ultra-banner-cai {
            grid-column: span 2; /* Заставляем элемент занять 2 колонки в сетке */
        }

        /* --- 2. Корректировка для официального баннера (на всякий случай) --- */
        /* Если он должен занимать всю ширину, этот стиль это гарантирует */
        .info-slideshow-banner {
            grid-column: 1 / -1;
        }
        
        /* Адаптивность для мобильных устройств, где всего 1-2 колонки */
        @media (max-width: 768px) {
            .gemini-ultra-banner-cai {
                grid-column: 1 / -1; /* На мобильных баннер занимает всю ширину */
            }
        }
.category-filter-btn {
                height: auto; /* Позволяем высоте определяться контентом и padding */
                padding: 6px 12px; /* Возвращаем маленький padding */
            }
          /* --- 1. Компактный стиль для карточек в профиле ("Мои творения") --- */
        #my-universes-list .world-card-cai {
            /* Переопределяем стили, чтобы сделать карточку меньше */
            padding: 10px;
            gap: 12px;
        }

        #my-universes-list .world-card-image,
        #my-universes-list .world-card-image-placeholder {
            /* Уменьшаем картинку */
            width: 60px;
            height: 60px;
            border-radius: 8px; /* Делаем скругление менее выраженным */
        }

        #my-universes-list .world-card-content {
            /* Уменьшаем отступы и шрифты для текстового блока */
            padding: 0;
        }

        #my-universes-list .world-card-title {
            font-size: 1rem;
            margin-bottom: 2px;
        }

        #my-universes-list .world-card-author {
            font-size: 0.85rem;
            margin-bottom: 6px;
        }
        
        #my-universes-list .world-card-description {
            /* Скрываем длинное описание, оно здесь не нужно */
            display: none;
        }

        #my-universes-list .world-card-meta {
            /* Уменьшаем мета-данные */
            margin-top: 4px;
            font-size: 0.8rem;
        }

          /* --- Исправление высоты заглушек на мобильных устройствах --- */
        .world-card-image,
        .world-card-image-placeholder {
            width: 100%;
            height: 160px; /* Задаем одинаковую фиксированную высоту для всех */
            object-fit: cover;
            border-radius: var(--border-radius); /* Скругление углов */
            flex-shrink: 0;
        }

        /* Убираем лишний padding у текстовой заглушки, который и ломал высоту */
        .world-card-image-placeholder.text-placeholder {
            padding: 0;
        }

        /* Адаптивность для горизонтальных карточек */
        @media (max-width: 768px) {
            .world-card-cai {
                /* Переходим на вертикальную компоновку на мобильных */
                flex-direction: column;
                align-items: stretch; /* Растягиваем элементы по ширине */
            }

            .world-card-image,
            .world-card-image-placeholder {
                /* Высота остается фиксированной, ширина 100% */
                width: 100%; 
                height: 160px;
            }

            /* Возвращаем отступы для текстового блока на мобильных */
            .world-card-content {
                padding: 12px;
            }
        }

        
        @media (max-width: 768px) {
            /* --- 1. Адаптивность панели управления (точная копия ПК) --- */
            .universe-controls-panel-v2 {
                flex-wrap: nowrap; /* Запрещаем перенос */
                padding: 8px;
                gap: 8px;
            }

            /* Кнопки фильтров */
            .category-filter-btn {
                padding: 6px 10px;
                font-size: 0.85rem;
                white-space: nowrap; /* Текст кнопок не переносится */
            }

            /* Поле поиска */
            .universe-search-container {
                min-width: 100px; /* Минимальная ширина, чтобы не схлопывался */
                flex-grow: 1;
            }

            /* Правая часть (API и Создать) */
            .universe-actions-and-requirements {
                flex-shrink: 0; /* Не сжимаем */
            }
            .api-key-status-indicator {
                padding: 6px 8px; /* Делаем фон для статуса */
                background-color: var(--bg-element);
                border-radius: var(--border-radius);
            }
            .api-key-status-indicator .status-text {
                display: none; /* Скрываем текст, оставляем иконку */
            }
            .btn-create-universe-v2 {
                padding: 8px 14px;
            }

            /* --- 2. Исправление размера карточек (главное!) --- */
            .world-card-cai {
                /* Карточка остается горизонтальной */
                display: flex;
                align-items: center;
                gap: 16px;
            }

            .world-card-image,
            .world-card-image-placeholder {
                /* ЗАДАЕМ ОДИНАКОВЫЕ ФИКСИРОВАННЫЕ РАЗМЕРЫ ДЛЯ ВСЕХ */
                width: 90px;
                height: 90px;
                flex-shrink: 0; /* Запрещаем сжиматься */
                object-fit: cover;
                border-radius: var(--border-radius);
            }
            
            /* Убедимся, что у текстовой заглушки нет лишних отступов */
            .world-card-image-placeholder.text-placeholder {
                padding: 0;
            }
        }

          /* --- Финальная адаптивность для мобильных устройств (< 768px) --- */
        @media (max-width: 768px) {
            
            /* --- 1. Компактная панель управления --- */
            .universe-controls-panel-v2 {
                flex-wrap: nowrap; /* Запрещаем перенос элементов */
                padding: 8px;
                gap: 8px;
            }
            .universe-category-filters {
                display: none; /* Скрываем текстовые фильтры для экономии места */
            }
            .universe-search-container {
                flex-grow: 1; /* Поиск занимает всё доступное место */
            }
            .universe-search-container input {
                height: 40px;
            }
            .universe-actions-and-requirements {
                gap: 8px;
            }
            
            /* --- 2. Горизонтальные карточки (картинка слева, текст справа) --- */
            .world-card-cai {
                flex-direction: row; /* <-- Главное правило: делаем карточку горизонтальной */
                align-items: center; /* Выравниваем по центру по вертикали */
                gap: 16px;
                padding: 12px;
            }

            .world-card-image,
            .world-card-image-placeholder {
                width: 90px;  /* <-- Фиксированная ширина для картинки */
                height: 90px; /* <-- Фиксированная высота (делаем квадратной) */
                flex-shrink: 0; /* <-- Запрещаем картинке сжиматься */
                object-fit: cover;
                border-radius: var(--border-radius);
            }

            /* Убираем лишние отступы у текстового блока */
            .world-card-content {
                padding: 0;
            }

            /* Адаптируем шрифты, чтобы текст помещался */
            .world-card-title {
                font-size: 1rem;
            }
            .world-card-author, .world-card-description {
                font-size: 0.85rem;
            }

            /* --- 3. Обеспечиваем одинаковую высоту заглушек и картинок --- */
            /* Это правило гарантирует, что и картинка, и текстовая заглушка 
               будут иметь одинаковые размеры в горизонтальном виде */
            .world-card-image-placeholder.text-placeholder {
                padding: 0; /* Убираем padding, который мог влиять на размер */
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

      

        /* --- Финальный адаптив для мобильных устройств (< 768px) --- */
        @media (max-width: 768px) {
            
            /* --- 1. Компактная панель управления (с кнопками и текстом) --- */
            .universe-controls-panel-v2 {
                flex-wrap: wrap; /* Разрешаем перенос, если не помещается */
                padding: 10px;
                gap: 10px;
            }

            .universe-filters-and-search {
                display: flex;
                width: 100%; /* Занимает всю первую строку */
                gap: 10px;
            }

            .universe-category-filters {
                display: flex; /* <-- ВОЗВРАЩАЕМ КНОПКИ */
                flex-shrink: 0; /* Запрещаем им сжиматься */
            }
            .category-filter-btn {
                padding: 6px 10px;
                font-size: 0.8rem;
            }

            .universe-search-container {
                flex-grow: 1; /* Поиск занимает оставшееся место */
            }

            .universe-actions-and-requirements {
                width: 100%; /* Занимает всю вторую строку */
                display: flex;
                justify-content: space-between; /* Разносим элементы по краям */
                align-items: center;
            }

            .api-key-status-indicator .status-text {
                display: inline; /* <-- ВОЗВРАЩАЕМ ТЕКСТ "API: OK" */
            }

            /* --- 2. Горизонтальные карточки с правильными отступами у картинок --- */
            .world-card-cai {
                flex-direction: row;
                align-items: center;
                gap: 12px;
                padding: 10px;
            }

            .world-card-image,
            .world-card-image-placeholder {
                width: 90px;      /* Возвращаем чуть большую ширину для баланса */
                height: 100%;     /* <-- ГЛАВНОЕ ИЗМЕНЕНИЕ: Растягиваем на всю высоту родителя */
                align-self: stretch; /* <-- Дополнительная гарантия растягивания */
                flex-shrink: 0;
                object-fit: cover;
                /* Скругление теперь только слева, чтобы идеально прилегать к краям */
                border-radius: 12px 0 0 12px;
                margin: -10px 0 -10px -10px; /* <-- Хитрый трюк для "приклеивания" к краям */
            }
        }

         #account .account-main-grid {
                padding-left: 15px;
                padding-right: 15px;
            }

            /* --- 1. Убираем лишний верхний отступ у вкладок в профиле --- */
        .account-tab-content-container {
            padding-top: 20px; /* Устанавливаем стандартный отступ */
        }
        
        /* Убираем отступ у самого блока с контентом, чтобы вкладки "прилипли" к верху */
        .profile-content-right {
            padding-top: 0; 
        }

        /* --- 2. Выравниваем высоту кнопок фильтров и поиска --- */
        .category-filter-btn {
            height: 44px; /* Задаем ту же высоту, что и у поиска */
            display: inline-flex; /* Используем flex для идеального центрирования текста */
            align-items: center;
            justify-content: center;
        }

        /* Убедимся, что у родительского блока правильное выравнивание */
        .universe-filters-and-search {
            align-items: center; /* Выравниваем все дочерние элементы по центру */
        }

           /* --- 1. Финальное исправление зазора под картинкой в мобильных карточках --- */
        @media (max-width: 768px) {
            .world-card-cai {
                align-items: stretch; /* Заставляем дочерние элементы растягиваться на всю высоту */
            }
            .world-card-image,
            .world-card-image-placeholder {
                height: auto; /* Убираем фиксированную высоту, позволяя align-self работать */
            }
        }

        /* --- 2. Новый стиль для кнопки "Удалить" в Сохранениях --- */
        .delete-game-btn {
            background-color: #333333; /* Темно-серый фон */
            color: #AAAAAA; /* Цвет иконки */
            border: 1px solid #383838;
            border-radius: 8px;
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            transition: all 0.2s;
        }

        .delete-game-btn:hover:not(:disabled) {
            background-color: #F87171; /* Красный при наведении */
            color: #FFFFFF; /* Белая иконка */
            border-color: #F87171;
        }

        /* --- 3. Адаптивность кнопок фильтров на мобильных (уменьшение) --- */
        .category-filter-btn {
            height: 44px; /* Задаем ту же высоту, что и у поиска */
            /* Убираем flex-центровку, текст выровняется по левому краю по умолчанию */
            }

              /* --- 1. Финальное исправление зазора под картинкой в мобильных карточках --- */
        @media (max-width: 768px) {
            .world-card-cai {
                align-items: stretch; /* Заставляем дочерние элементы растягиваться на всю высоту */
            }
            .world-card-image,
            .world-card-image-placeholder {
                height: auto; /* Убираем фиксированную высоту, позволяя align-self работать */
            }
        }

        /* --- 2. Новый стиль для кнопки "Удалить" в Сохранениях --- */
        .delete-game-btn {
            background-color: #333333; /* Темно-серый фон */
            color: #AAAAAA; /* Цвет иконки */
            border: 1px solid #383838;
            border-radius: 8px;
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            transition: all 0.2s;
        }

        .delete-game-btn:hover:not(:disabled) {
            background-color: #F87171; /* Красный при наведении */
            color: #FFFFFF; /* Белая иконка */
            border-color: #F87171;
        }

        /* --- 3. Адаптивность кнопок фильтров на мобильных (уменьшение) --- */
        @media (max-width: 768px) {
            .category-filter-btn {
                height: auto; /* Отменяем "толстый" стиль с ПК */
                padding: 6px 12px;
                font-size: 0.85rem;
                justify-content: flex-start;
                display: inline-flex;
            align-items: center;
            }
        }

        /* --- НАЧАЛО: Стили для адаптации хедера и карточек под мобильные устройства --- */

/* 1. Полностью скрываем гамбургер-меню, так как оно не нужно */
.hamburger-menu {
    display: none !important;
}

/* 2. Стили для новой кнопки "Профиль" */
#nav-account-link.btn-secondary {
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
}

/* 3. Медиа-запрос для маленьких экранов (до 480px) */
@media (max-width: 480px) {
    
    /* -- Адаптация хедера -- */

    header .container {
        gap: 10px; /* Уменьшаем расстояние между лого и правой группой */
    }

    .logo {
        font-size: 1.3rem; /* Уменьшаем размер логотипа */
        flex-shrink: 0; /* Запрещаем логотипу сжиматься */
    }

    .header-right-group {
        gap: 8px; /* Уменьшаем расстояние между элементами справа */
    }
    
    /* Скрываем лишние элементы в информации о пользователе для экономии места */
    #user-info .nickname-display,
    #user-info #buy-tokens-btn-header {
        display: none;
    }

    /* Уменьшаем оставшиеся кнопки, чтобы они помещались в ряд */
    #user-info .btn-small, 
    #nav-account-link.btn-secondary,
    .auth-section #login-google-btn {
        padding: 5px 10px;
        font-size: 0.85rem;
    }
    
    /* Уменьшаем блок с токенами */
    .token-info {
        font-size: 0.9rem;
    }

    /* -- Адаптация карточек (возвращаем вертикальный вид, как на скриншоте) -- */
    .world-card-cai {
        flex-direction: column !important; /* !important чтобы перебить другие стили */
        align-items: stretch !important;
    }

    .world-card-image,
    .world-card-image-placeholder {
        width: 100% !important;
        height: 160px !important; /* Возвращаем фиксированную высоту */
        margin: 0 !important; /* Сбрасываем некорректный отрицательный margin */
        border-radius: var(--border-radius-large) var(--border-radius-large) 0 0 !important; /* Скругление только сверху */
    }

    .world-card-content {
        padding: 15px; /* Возвращаем нормальные отступы для текста */
    }
}
/* --- КОНЕЦ: Стили для адаптации --- */
/* --- НАЧАЛО: ИСПРАВЛЕННЫЕ Стили для мобильного гамбургер-меню --- */

/* 1. По умолчанию скрываем гамбургер на ПК */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    color: var(--text-title);
    font-size: 1.6rem;
    cursor: pointer;
    z-index: 1005; 
}

/* 2. Адаптивность хедера на мобильных устройствах */
@media (max-width: 768px) {
    /* Показываем кнопку-гамбургер (с !important для надежности) */
    .hamburger-menu {
        display: block !important;
    }

    /* Скрываем всю правую часть хедера на мобильных */
    .header-right-group {
        display: none !important;
    }
}

/* 3. Стили для секции входа в боковом меню */
.sidenav-login-section {
    padding: 15px;
    border-bottom: 1px solid var(--border-color-light);
}
/* --- НАЧАЛО: Стили для премиального вида бокового меню --- */

/* 1. Основа меню: темное стекло */
.sidenav {
    background-color: var(--bg-glass); /* Используем "стеклянный" фон */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-right: 1px solid var(--border-color); /* Используем общую границу */
}

/* 2. Заголовок меню */
.sidenav-header {
    font-family: var(--font-headings);
    color: var(--text-title);
    padding: 25px 20px;
    font-size: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* 3. Ссылки в меню */
.sidenav ul {
    padding: 15px 10px; /* Уменьшаем боковые отступы */
}

.sidenav ul li a {
    display: flex;
    align-items: center;
    gap: 15px; /* Увеличиваем расстояние до иконки */
    padding: 14px 20px; /* Делаем пункты "толще" */
    font-size: 1.05rem; /* Немного увеличиваем шрифт */
    font-weight: 500;
    color: var(--text-secondary); /* Неактивный пункт */
    border-radius: var(--border-radius); /* Большое скругление */
    margin-bottom: 5px;
    transition: all 0.2s ease-in-out;
    border-left: 3px solid transparent; /* Подготовка для активного состояния */
}

/* 4. Иконки в меню */
.sidenav ul li a i.fa-fw {
    font-size: 1.2rem; /* Увеличиваем иконки */
    color: var(--text-secondary);
    transition: color 0.2s;
}

/* 5. Эффекты при наведении и активная ссылка */
.sidenav ul li a:hover,
.sidenav ul li a.active-link {
    background-color: var(--bg-element-hover); /* Тот же фон, что и у карточек */
    color: var(--text-title);
    border-left-color: var(--text-primary); /* Белая полоска слева */
}

.sidenav ul li a:hover i.fa-fw,
.sidenav ul li a.active-link i.fa-fw {
    color: var(--text-primary); /* Белая иконка */
}

/* 6. Кнопка закрытия */
.sidenav-close-btn {
    top: 15px;
    right: 15px;
    font-size: 2rem;
    color: var(--text-secondary);
}
.sidenav-close-btn:hover {
    color: var(--text-title);
}

/* 7. Подвал меню */
.sidenav-footer {
    border-top: 1px solid var(--border-color);
}
/* --- НАЧАЛО: Премиальный дизайн для кнопки "Профиль" на ПК --- */

#nav-account-link.btn-secondary {
    /* 1. Базовый вид кнопки */
    display: flex; /* <-- Важно для выравнивания иконки и текста */
    align-items: center;
    gap: 8px; /* Расстояние между иконкой и текстом */
    
    background-color: var(--bg-element); /* Темный фон, как у других элементов */
    border: 1px solid var(--border-color); /* "Стеклянная" граница */
    color: var(--text-secondary); /* Приглушенный цвет текста и иконки */
    
    padding: 8px 16px; /* Комфортные внутренние отступы */
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: all 0.2s ease-out;
}

#nav-account-link.btn-secondary:hover {
    /* 2. Эффект при наведении */
    background-color: var(--bg-element-hover); /* Фон становится чуть светлее */
    border-color: var(--text-primary); /* Граница становится ярко-белой */
    color: var(--text-title); /* Текст и иконка становятся белыми */
    
    transform: translateY(-2px); /* Эффект "приподнимания" */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Тень для объема */
}

/* 3. Стиль для самой иконки внутри кнопки */
#nav-account-link .fas {
    font-size: 1.1rem; /* Делаем иконку чуть крупнее текста */
}
/* --- НАЧАЛО: Код для адаптации аккаунта и сохранений --- */

/* 1. Новый премиальный дизайн для блока с балансом (в стиле кошелька) */
/* Этот стиль применяется и для ПК, и для мобильных */
.token-balance-large {
    background: linear-gradient(135deg, rgba(42, 35, 85, 0.5), rgba(30, 26, 59, 0.5));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: 25px;
    margin: 1.5rem 0;
    text-align: left; /* Меняем выравнивание для лучшей композиции */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

/* Декоративная иконка кошелька на фоне */
.token-balance-large::before {
    content: '\f555'; /* Unicode иконки кошелька из Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    color: rgba(138, 74, 243, 0.1);
    opacity: 0.8;
}

/* Стили для суммы токенов */
.token-balance-large #account-tokens-display {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--font-headings);
    line-height: 1.2;
    display: block;
}

/* Стили для подписи "Токенов" */
.token-balance-large .tokens-unit-label {
    font-size: 1rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 5px;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {

    /* 2. Исправление отступов в контейнере вкладок профиля (решает проблему неровного расположения карточек) */
    .account-tab-content-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* 3. Уменьшение кнопок-вкладок в профиле */
    .account-tab-button {
        padding: 12px 8px; /* Уменьшаем внутренние отступы */
        font-size: 0.8rem;  /* Уменьшаем шрифт */
        font-weight: 500;
    }

    /* 4. Адаптация кнопок в списке сохранений */
    .saved-game-actions {
        gap: 8px; /* Уменьшаем расстояние между кнопками */
    }
    
    /* Общий стиль для всех кнопок действий (включая "Продолжить") */
    .saved-game-actions .btn {
        padding: 8px 12px;
        min-width: auto;
        font-size: 0.85rem;
    }

    /* Отдельный стиль для кнопки "Удалить", чтобы сделать ее компактнее */
    .saved-game-actions .delete-game-btn {
        width: 38px;
        height: 38px;
        padding: 0;
        font-size: 1rem; /* Оставляем размер для иконки */
    }

    /* 5. Адаптация блока с балансом (кошельком) для мобильных */
    .token-balance-large {
        padding: 20px;
    }
    .token-balance-large #account-tokens-display {
        font-size: 2rem;
    }
    .token-balance-large::before {
        font-size: 3.5rem;
        right: 15px;
    }
}
/* --- НАЧАЛО: Стили для статистики и улучшенного профиля --- */

/* 1. Улучшенный вид статистики в сайдбаре профиля */
.profile-stats {
    display: flex;
    justify-content: space-around; /* Равномерно распределяем элементы */
    gap: 20px;
    font-size: 0.9rem;
    padding-top: 15px;
    border-top: 1px solid var(--border-color-light);
    margin-top: 15px;
}
.profile-stats .stat-item {
    display: flex;
    flex-direction: column; /* Ставим число и текст друг под другом */
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    text-align: center;
}
.profile-stats .stat-item strong {
    font-size: 1.3rem; /* Делаем цифру большой */
    font-family: var(--font-headings);
    color: var(--text-title);
    line-height: 1.1;
}

/* 2. Стили для вкладки "Статистика" */
.stats-block {
    margin-bottom: 2rem;
}
.stats-block h4, #partner-stats-section h4, #partner-stats-section h5 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.5rem;
}
.stats-block .description {
    font-size: 0.9em;
    color: var(--text-secondary);
    max-width: 600px;
    margin-bottom: 1rem;
}

/* Компонент "Инпут с кнопкой" для ссылки */
.input-with-button {
    display: flex;
    gap: 10px;
}
.input-with-button input {
    flex-grow: 1;
    background-color: var(--bg-element-hover);
    cursor: text;
}
.input-with-button button {
    flex-shrink: 0;
}

/* Сетка для партнерской статистики */
.partner-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 1.5rem;
}
.summary-card {
    background-color: var(--bg-element);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.summary-card .summary-label {
    font-size: 0.85em;
    color: var(--text-secondary);
}
.summary-card .summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-headings);
    color: var(--text-title);
}
.summary-card .summary-value.accent {
    color: var(--color-success); /* Акцентный цвет для комиссии */
}

/* Контейнер списка рефералов */
.referrals-list-container {
    margin-top: 1rem;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
}

/* --- НАЧАЛО: Стили для нового раздела "Мои Персонажи" --- */

#my-characters-list {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Расстояние между элементами списка */
}

.my-character-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background-color: var(--bg-element);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    cursor: pointer;
}

.my-character-item:hover {
    background-color: var(--bg-element-hover);
    border-color: var(--border-color);
    transform: translateY(-2px);
}

.my-character-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Круглый аватар */
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

.my-character-info {
    flex-grow: 1;
    overflow: hidden; /* Для обрезки длинного текста */
}

.my-character-info h4 {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-character-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-character-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.my-character-actions .btn {
    padding: 6px 12px;
    font-size: 0.85rem;
}
/* --- НАЧАЛО: Премиальный дизайн для кнопок навигации в шапке (ПК) --- */

/* 1. Выравниваем сами кнопки ("Мои Персонажи", "Профиль") друг с другом */
header #desktop-nav ul {
    display: flex;
    align-items: center; /* Это вертикально выровняет кнопки по центру */
    gap: 12px;         /* Расстояние МЕЖДУ кнопками */
}

/* 2. Задаем единый стиль для ВСЕХ кнопок в этой навигации */
header #desktop-nav a.btn-secondary {
    display: flex;       /* Включаем Flexbox для выравнивания иконки и текста ВНУТРИ кнопки */
    align-items: center;
    gap: 8px;            /* Расстояние между иконкой и текстом */
    
    padding: 8px 16px;   /* Комфортные внутренние отступы, делающие кнопки одинаковыми */
    font-size: 0.9rem;   /* Слегка уменьшим шрифт для элегантности */
    font-weight: 600;
    
    background-color: var(--bg-element); /* Темный фон, как у других элементов */
    border: 1px solid var(--border-color); /* "Стеклянная" граница */
    color: var(--text-secondary);          /* Приглушенный цвет текста и иконки */
    
    border-radius: var(--border-radius);
    transition: all 0.2s ease-out; /* Плавная анимация */
}

/* 3. Делаем красивый эффект при наведении */
header #desktop-nav a.btn-secondary:hover {
    background-color: var(--bg-element-hover); /* Фон становится чуть светлее */
    border-color: var(--text-primary);         /* Граница становится ярко-белой */
    color: var(--text-title);                  /* Текст и иконка становятся белыми */
    
    transform: translateY(-2px); /* Эффект "приподнимания" */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Тень для объема */
}

/* 4. Слегка увеличиваем иконки внутри кнопок для лучшего баланса */
header #desktop-nav a.btn-secondary .fas {
    font-size: 1.1rem;
}
/* --- НАЧАЛО: Код для исправления карточек персонажей и их адаптивности --- */

/* 1. Исправляем перенос длинных описаний и ограничиваем их высоту */
.world-card-description {
    /* Эта строка - главное исправление. Она заставляет браузер 
       принудительно разрывать длинные слова, чтобы они не вылезали за рамки. */
    word-break: break-all;

    /* Этот блок ограничивает описание тремя строчками, добавляя "..." в конце.
       Это делает все карточки одинаковой высоты и выглядит аккуратно. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2. Идеально выравниваем метаданные (модель, цена и т.д.) */
.world-card-meta {
    display: flex;          /* Включаем Flexbox для управления элементами */
    align-items: center;    /* Это выравнивает все иконки и текст по вертикальному центру */
    flex-wrap: wrap;        /* ГЛАВНОЕ ДЛЯ МОБИЛЫ: разрешает перенос на новую строку, если не хватает места */
    gap: 12px;              /* Создает красивый и одинаковый отступ МЕЖДУ элементами */
    margin-top: auto;       /* Прижимает этот блок к низу карточки */
}

/* 3. Небольшая стилизация для каждого элемента в метаданных для единообразия */
.world-card-meta .meta-item {
    font-size: 0.8rem;      /* Делаем шрифт чуть меньше для компактности */
    color: var(--text-secondary);
    white-space: nowrap;    /* Запрещаем перенос текста внутри одного элемента (например, "2.5-Pro") */
}
/* --- START: API Key Nag Screen Styles --- */
.nag-screen-overlay {
    position: fixed;
    inset: 0; /* Растягиваем на весь экран */
    z-index: 1500;
    
    display: flex; /* <-- Включаем flex для центрирования */
    align-items: center;
    justify-content: center;
    
    background-color: rgba(0, 0, 0, 0.6); /* Полупрозрачный фон */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
}

.nag-screen-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.nag-screen-content {
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: 30px 35px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    text-align: center;
    position: relative;
    max-width: 450px; /* Ограничиваем ширину */
    width: calc(100% - 40px);

    /* Анимация появления */
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.nag-screen-overlay.visible .nag-screen-content {
    transform: scale(1);
}

.nag-screen-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}
.nag-screen-close-btn:hover {
    color: var(--text-title);
}

.nag-screen-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px auto;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(var(--color-primary-rgb, 138, 74, 243), 0.15), rgba(74, 78, 92, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.nag-screen-icon .fas {
    font-size: 2rem;
    color: var(--color-primary);
}

.nag-screen-content h4 {
    font-family: var(--font-headings);
    margin-bottom: 8px;
    font-size: 1.3rem;
    color: var(--text-title);
}

.nag-screen-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 25px 0;
}

.nag-screen-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.nag-screen-actions .btn {
    font-weight: 600;
    padding: 10px 20px;
}
/* --- НАЧАЛО: Код для премиального фона профиля в стиле Telegram --- */

/* 1. Основной фон с эффектом свечения */
.account-profile-header {
    position: relative; /* Необходимо для правильного наложения */
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Добавляем тень для объема */
    
    /* Самое главное - многослойный фон */
    background: 
        /* Слой 2: Бирюзовое свечение снизу справа (акцентное) */
        radial-gradient(circle at 100% 100%, rgba(45, 237, 243, 0.1), transparent 40%),
        
        /* Слой 1: Фиолетовое свечение сверху слева (основное) */
        radial-gradient(circle at 0% 0%, rgba(138, 74, 243, 0.15), transparent 50%),
        
        /* Слой 0: Базовый темный цвет */
        var(--bg-element);
}

/* 2. Скрываем старую, простую обложку */
.account-cover-photo {
    display: none;
}

/* 3. Корректируем отступы, чтобы аватар и текст красиво располагались на новом фоне */
.avatar-and-actions {
    /* Убираем отрицательный отступ, так как обложки больше нет */
    transform: translateY(0); 
    margin-bottom: 0;
    padding-top: 15px; /* Добавляем отступ сверху */
}

.profile-main-info {
    /* Добавляем отступ, чтобы текст не "прилипал" к аватару */
    padding-top: 10px;
}
/* --- КОНЕЦ: Кода для фона профиля --- */
/* --- НАЧАЛО: Код для уменьшения отступа под блоком купона --- */

/* 
 * Находим группу с полем для ввода купона и принудительно 
 * убираем у неё стандартный нижний отступ, так как она 
 * является последним элементом в этом блоке.
*/
#coupon-redemption-section .form-group {
    margin-bottom: 0;
}

/* --- НАЧАЛО: Стили для модального окна выбора аватара --- */

/* 1. Сетка для аватарок */
#avatar-grid {
    display: grid;
    /* Создает адаптивные колонки: минимум 80px, максимум 1fr (равная часть) */
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 15px; /* Расстояние между аватарками */
    max-height: 50vh; /* Ограничиваем высоту, чтобы появилась прокрутка */
    overflow-y: auto;
    padding: 5px; /* Небольшой отступ для красоты скроллбара */
}

/* 2. Стиль для каждой отдельной аватарки в сетке */
.avatar-option {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* Гарантирует, что аватарки всегда будут квадратными */
    object-fit: cover; /* Предотвращает искажение изображения */
    
    border-radius: 50%; /* Делаем их круглыми */
    border: 3px solid transparent; /* Прозрачная рамка для стабильности при наведении */
    cursor: pointer;
    
    transition: all 0.2s ease-in-out;
}

/* 3. Эффект при наведении курсора */
.avatar-option:hover:not(.selected) {
    transform: scale(1.05); /* Слегка увеличиваем */
    border-color: rgba(255, 255, 255, 0.3); /* Показываем рамку */
}

/* 4. Стиль для ВЫБРАННОГО аватара */
.avatar-option.selected {
    transform: scale(1.05);
    border-color: var(--text-primary); /* Яркая белая рамка */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    cursor: default;
}
/* --- КОНЕЦ: Стилей для модального окна --- */
/* --- НАЧАЛО: Адаптивные стили для редактирования никнейма --- */

/* 1. Превращаем контейнер формы в гибкий (flex) блок */
#nickname-edit-form {
    display: flex;
    flex-wrap: wrap; /* Разрешаем перенос элементов на новую строку */
    align-items: center; /* Вертикальное выравнивание по центру */
    gap: 10px; /* Расстояние между полем ввода и кнопками */
    width: 100%;
}

/* 2. Поле для ввода никнейма */
#nickname-input {
    flex-grow: 1; /* Заставляем поле занимать всё свободное место */
    min-width: 150px; /* Минимальная ширина, чтобы не схлопывалось */
    /* Добавляем стили, чтобы поле выглядело как остальные на сайте */
    padding: 10px 15px;
    height: 44px; /* Фиксированная высота для ровности */
}

/* 3. Контейнер для кнопок "Сохранить" и "Отмена" */
#nickname-edit-form > div {
    display: flex;
    flex-shrink: 0; /* Запрещаем блоку с кнопками сжиматься */
    gap: 8px;
    margin-top: 0; /* Убираем старый отступ сверху */
}

/* 4. Стили для самих кнопок */
#save-nickname-btn,
#cancel-nickname-btn {
    padding: 0 16px; /* Внутренние отступы */
    height: 44px; /* Та же высота, что и у поля ввода, для идеального выравнивания */
    font-size: 0.9rem;
    white-space: nowrap; /* Запрещаем тексту кнопок переноситься */
}

/* 5. Адаптивность для мобильных устройств (экраны <= 600px) */
@media (max-width: 600px) {
    /* Ставим элементы друг под другом */
    #nickname-edit-form {
        flex-direction: column;
        align-items: stretch; /* Растягиваем все элементы на 100% ширины */
    }
    
    /* Убираем отступ между полем и кнопками, так как они теперь друг под другом */
    #nickname-input {
        min-width: 100%;
        margin-bottom: 8px;
    }
    
    /* Заставляем кнопки занять равное пространство */
    #nickname-edit-form > div {
        width: 100%;
    }
    #save-nickname-btn,
    #cancel-nickname-btn {
        flex-grow: 1;
        justify-content: center;
    }
}
/* --- КОНЕЦ: Адаптивных стилей для никнейма --- */
/* --- НАЧАЛО: Код для стилизации тега "Популярный" --- */

/* 1. Превращаем сам тег в красивую "таблетку" */
.world-card-meta .meta-item {
    /* Добавляем полупрозрачный фон, создавая "стеклянный" эффект */
    background-color: rgba(255, 255, 255, 0.05);
    
    /* Добавляем внутренние отступы, чтобы текст не прилипал к краям */
    padding: 4px 10px;
    
    /* Сильно скругляем углы для формы "таблетки" */
    border-radius: 50px;
    
    /* Тонкая граница для лучшего визуального отделения */
    border: 1px solid var(--border-color-light);
    
    /* Добавляем плавный переход для эффекта при наведении */
    transition: background-color 0.2s ease;
}

/* Эффект при наведении курсора */
.world-card-meta .meta-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 2. Делаем иконку огня огненно-оранжевой и добавляем свечение */
.world-card-meta .meta-item .fa-fire {
    color: orangered;
    /* Добавляем легкую тень для эффекта "свечения" */
    text-shadow: 0 0 6px rgba(255, 69, 0, 0.6);
}

/* --- КОНЕЦ: Кода для стилизации тега --- */
/* --- НАЧАЛО: Исправление фона для тега "18+" --- */

/* 
 * Этот селектор специально нацелен на тег "18+",
 * чтобы вернуть ему уникальный красный фон и перебить общий стиль.
*/
.world-card-meta .nsfw-meta-tag {
    /* Возвращаем насыщенный темно-красный фон */
    background-color: #8B0000;
    
    /* Текст делаем белым для контраста */
    color: #FFFFFF; 
    
    /* Границу делаем едва заметной, в тон фону */
    border-color: rgba(255, 0, 0, 0.2);
}

/* Добавляем отдельный эффект при наведении для красного тега */
.world-card-meta .nsfw-meta-tag:hover {
    background-color: #A52A2A; /* Делаем фон чуть светлее при наведении */
    border-color: rgba(255, 0, 0, 0.4);
}
/* --- КОНЕЦ: Исправления фона --- */
/* --- НАЧАЛО: Адаптивность модального окна создания миров --- */
@media (max-width: 768px) {
    #create-universe-modal .modal-content,
    #edit-universe-modal .modal-content {
        max-height: 85vh; /* Ограничиваем высоту */
        overflow-y: auto;   /* Включаем скроллбар, если контент не помещается */
    }

    #create-universe-modal .modal-content form,
    #edit-universe-modal .modal-content form {
        flex-grow: 1; /* Помогает скроллу работать корректно */
    }
}
@media (max-width: 600px) {

    /* 1. Адаптируем само модальное окно */
    #create-universe-modal .modal-content,
    #edit-universe-modal .modal-content {
        width: calc(100% - 20px); /* Занимает всю ширину с небольшими отступами */
        padding: 20px 15px;      /* Уменьшаем внутренние отступы */
        max-height: 90vh;        /* Убедимся, что окно не выходит за пределы экрана по высоте */
    }

    /* 2. Переключатель "Игра / Персонаж" делаем компактнее */
    .creation-mode-toggle label {
        padding: 8px 10px;
        font-size: 0.9rem;
    }

    /* 3. ГЛАВНОЕ: Сетку из двух колонок превращаем в одну */
    .form-grid-2col {
        grid-template-columns: 1fr; /* Теперь элементы будут друг под другом */
    }

    /* 4. Блок "Видимость / Модель AI" также ставим друг под другом */
    .form-subgroup {
        flex-direction: column; /* Меняем направление с горизонтального на вертикальное */
        align-items: stretch;   /* Растягиваем дочерние элементы на всю ширину */
        gap: 0;
    }
    
    .form-subgroup .form-group {
         margin-bottom: 1.5rem; /* Возвращаем стандартный отступ, который был у других полей */
    }
    .form-subgroup .form-group:last-child {
        margin-bottom: 0; /* Убираем отступ у последнего элемента */
    }
}
/* --- КОНЕЦ: Адаптивности модального окна --- */
/* --- НАЧАЛО: Исправление панели управления для мобильных устройств --- */
@media (max-width: 768px) {

    /* 1. Настраиваем родительский контейнер */
    .universe-filters-and-search {
        display: flex;
        align-items: center; /* Выравниваем все элементы по центру по вертикали */
        gap: 10px;
        width: 100%;
        overflow: hidden; /* Важно, чтобы контент не вылезал за пределы панели */
    }

    /* 2. КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ: Делаем блок с фильтрами прокручиваемым */
    .universe-category-filters {
        overflow-x: auto;   /* Включаем горизонтальный скролл */
        white-space: nowrap; /* Запрещаем кнопкам переноситься на новую строку */
        
        /* Скрываем сам скроллбар, чтобы он не мешал визуально */
        -ms-overflow-style: none;  /* IE/Edge */
        scrollbar-width: none;     /* Firefox */
    }
    .universe-category-filters::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    /* 3. Гарантируем, что поисковик занимает оставшееся место и не сжимается */
    .universe-search-container {
        flex-grow: 1;     /* Занимает всё доступное свободное место */
        flex-shrink: 0;   /* Запрещаем поисковику сжиматься */
        min-width: 120px; /* Устанавливаем минимальную ширину для него */
    }
}

/* --- НАЧАЛО: Стили для онбординг-баннера --- */
/* --- НАЧАЛО: ФИНАЛЬНЫЕ ПРЕМИУМ-СТИЛИ для онбординг-баннера (Apple/GPT-5 Style) --- */

/* 1. Оверлей с глубоким размытием */
.onboarding-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background-color: rgba(10, 10, 15, 0.3); /* Фон стал менее плотным */
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    
    display: none; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.4s ease;
}
.onboarding-overlay.visible { display: flex; opacity: 1; }

/* 2. Модальное окно в стиле "Glassmorphism" */
.onboarding-modal {
    position: relative; width: 90%; max-width: 480px; /* Сделано чуть уже для лучшей формы */
    padding: 3rem; /* Увеличены внутренние отступы */
    border-radius: 24px; /* Более сильное скругление в стиле Apple */
    
    background: rgba(28, 28, 33, 0.4); /* Полупрозрачный стеклянный фон */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);

    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.onboarding-overlay.visible .onboarding-modal { transform: scale(1); }

/* 3. Элегантная кнопка "Закрыть" */
.onboarding-close-btn {
    position: absolute; top: 18px; right: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: none; border-radius: 50%;
    width: 32px; height: 32px;
    font-size: 1rem; color: var(--text-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.onboarding-close-btn:hover { background: rgba(255, 255, 255, 0.2); color: var(--text-primary); transform: rotate(90deg); }

/* 4. Слайды и НОВАЯ ПЛАВНАЯ АНИМАЦИЯ */
.slides-container {
    position: relative;
    height: 180px; /* Увеличена высота для контента */
    margin-bottom: 2.5rem; /* УВЕЛИЧЕН ОТСТУП СНИЗУ */
}
.slide {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    /* Улучшенная анимация */
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
}
.slide .slide-content { text-align: center; }
.slide:not(.active-slide) {
    opacity: 0;
    transform: scale(0.98);
    filter: blur(4px);
    pointer-events: none;
}
.slide.active-slide { opacity: 1; transform: scale(1); filter: blur(0); }

/* 5. Обновленная Типографика и Иконки */
.slide-icon {
    font-size: 3rem; /* ИКОНКА СТАЛА БОЛЬШЕ */
    margin-bottom: 1.5rem; /* УВЕЛИЧЕН ОТСТУП ПОД НЕЙ */
    color: var(--text-primary);
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
}
.slide h3 {
    font-family: var(--font-headings);
    font-size: 1.9rem; /* ЗАГОЛОВОК СТАЛ КРУПНЕЕ */
    margin-bottom: 1rem;
    color: var(--text-title);
}
.slide p {
    color: var(--text-secondary);
    font-size: 1.05rem; /* Текст стал чуть крупнее и читабельнее */
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto;
}
.slide p strong { color: var(--text-primary); }

/* 6. Стильная Навигация */
.onboarding-nav { display: flex; justify-content: space-between; align-items: center; }
.progress-dots { display: flex; gap: 10px; }
.dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background-color: var(--border-color);
    transition: all 0.3s; cursor: pointer;
}
.dot:hover { background-color: var(--color-primary); }
.dot.active-dot { background-color: #fff; transform: scale(1.25); box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }

/* 7. Адаптация для мобильных */
@media (max-width: 600px) {
    .onboarding-modal { padding: 2.5rem 1.5rem 2rem 1.5rem; }
    .slides-container { height: 230px; }
    .slide h3 { font-size: 1.6rem; }
    .onboarding-nav { flex-direction: column-reverse; gap: 2rem; }
    #onboarding-next-btn { width: 100%; padding: 12px 24px; font-size: 1rem; }
}

/* --- НАЧАЛО: Стили для тега "Только ПК" --- */

/* 
 * Этот стиль применяется только к новому тегу, 
 * чтобы придать иконке фирменный бирюзовый цвет и эффект свечения.
*/
.pc-only-tag .fa-desktop {
    color: var(--color-accent); /* Устанавливаем бирюзовый цвет иконки */
    
    /* Добавляем легкое свечение в тон иконке */
    text-shadow: 0 0 8px rgba(45, 237, 243, 0.5); 
}

/* Добавляем легкую рамку самому тегу для акцента */
.pc-only-tag {
    border-color: rgba(45, 237, 243, 0.2) !important;
}
/* --- КОНЕЦ: Стилей для тега --- */
/* --- НАЧАЛО: Код для адаптации карточки профиля ТОЛЬКО для мобильных --- */

/* 
 * Этот код сработает ТОЛЬКО на экранах шириной 600 пикселей и меньше,
 * НЕ затрагивая внешний вид на ПК.
*/
@media (max-width: 600px) {
    /* 1. Выравниваем аватар и текстовый блок по центру */
    .avatar-and-actions {
        /* Центрирует аватар горизонтально */
        justify-content: center; 
    }

    .profile-main-info {
        /* Центрирует весь текстовый блок */
        text-align: center;
    }

    /* 2. Центрируем никнейм и кнопку редактирования внутри их контейнера */
    #nickname-display-area {
        justify-content: center;
    }
    
    /* 3. Центрируем блок статистики */
    .profile-stats {
        justify-content: center;
    }

    /* 4. Центрируем и растягиваем кнопки в режиме редактирования никнейма */
    #nickname-edit-form > div {
        justify-content: center;
        width: 100%;
    }
    #save-nickname-btn,
    #cancel-nickname-btn {
        flex-grow: 1; /* Растягиваем на доступную ширину */
    }
}
/* --- НАЧАЛО: Стили для новой 3-колоночной структуры профиля --- */

/* 1. Перестраиваем основную сетку для ПК */
.account-main-grid {
    max-width: 1280px; /* Делаем контейнер шире */
    /* Определяем 3 колонки: левая (фиксир.), центральная (гибкая), правая (фиксир.) */
    grid-template-columns: 300px minmax(0, 1fr) 340px;
    grid-template-areas: "left-sidebar right-sidebar main-content";
    gap: 25px; /* Увеличиваем расстояние между колонками */
}

/* 2. Назначаем элементам их места в сетке */
.profile-sidebar-left { grid-area: left-sidebar; }
.profile-main-content { grid-area: main-content; } /* Новый центральный блок */
.profile-content-right { grid-area: right-sidebar; } /* Правый блок теперь здесь */

/* 3. Делаем боковые колонки "липкими", как в Twitter */
.profile-sidebar-left,
.profile-content-right {
    position: sticky;
    top: calc(var(--header-height-desktop) + 20px);
    align-self: flex-start; /* Важно для корректной работы sticky */
}

/* 4. Стили для новой центральной колонки (Посты) */
.profile-main-content {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    min-height: 400px; /* Чтобы пустая колонка не схлопывалась */
}
.posts-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}
.posts-header h3 { margin: 0; font-size: 1.2rem; }
.posts-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}
.posts-placeholder .fas { font-size: 2.5rem; opacity: 0.5; margin-bottom: 1rem; }
.posts-placeholder p { font-size: 1.1rem; color: var(--text-primary); margin: 0 0 0.5rem 0; }
.posts-placeholder span { font-size: 0.9rem; }


/* 5. Стили для нового виджета "Друзья" */
.friends-widget { padding: 20px; }
.friends-widget h3 { margin: 0 0 15px 0; display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.friends-list { display: flex; flex-direction: column; gap: 15px; }

.friend-item { display: flex; align-items: center; gap: 12px; }
.friend-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.friend-info { flex-grow: 1; line-height: 1.3; }
.friend-name { font-weight: 600; color: var(--text-primary); display: block; }
.friend-handle { font-size: 0.9em; color: var(--text-secondary); }

.btn-follow {
    background-color: var(--text-primary);
    color: var(--bg-main);
    border-radius: 50px; /* Делаем кнопку круглой */
    padding: 6px 16px;
    font-weight: 700;
    font-size: 0.9em;
    border: none;
    flex-shrink: 0;
}
.btn-follow:hover { background-color: #fff; transform: scale(1.05); }
.show-more-friends { color: var(--color-secondary); font-size: 0.9em; margin-top: 10px; }


/* 6. АДАПТИВНОСТЬ: на планшетах и мобильных возвращаемся к одноколоночной структуре */
@media (max-width: 1024px) {
    .account-main-grid {
        grid-template-columns: 1fr; /* Одна колонка */
        grid-template-areas:
            "left-sidebar"
            "main-content"
            "right-sidebar";
    }
    
    /* Отключаем "липкость" на мобильных, так как все идет потоком */
    .profile-sidebar-left,
    .profile-content-right {
        position: static;
    }
}

/* --- НАЧАЛО: Стили для мобильных скроллящихся вкладок в профиле --- */

@media (max-width: 1024px) {
    /* 1. Скрываем "дубликаты" блоков на мобильных, так как их контент теперь внутри вкладок */
    .profile-sidebar-left .friends-widget, /* Скрываем виджет друзей в левой колонке */
    .profile-main-content { /* Полностью скрываем центральную колонку с постами */
        display: none;
    }
    
    /* 2. Превращаем навигацию по вкладкам в скроллящуюся ленту */
    .account-tab-nav-wrapper {
        overflow-x: auto; /* Включаем горизонтальный скролл */
        /* Скрываем сам скроллбар для чистого вида */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .account-tab-nav-wrapper::-webkit-scrollbar {
        display: none;
    }
    
    .account-tab-nav {
        /* Запрещаем кнопкам переноситься на новую строку */
        white-space: nowrap;
    }
    
    /* 3. Делаем кнопки вкладок более компактными */
    .account-tab-button {
        flex: 0 0 auto; /* Запрещаем кнопкам растягиваться или сжиматься */
        padding: 14px 16px;
        font-size: 0.9rem;
    }
}
/* --- НАЧАЛО: Финальные исправления для колонок профиля (ПК + Мобильные) --- */

/* 1. Прячем мобильные вкладки и панели на больших экранах (ПК) */
@media (min-width: 1025px) {
    .mobile-only-tab,
    .mobile-only-panel {
        display: none !important; /* !important для надежности */
    }
}

/* 2. Убираем зазор между блоками на мобильных экранах */
@media (max-width: 1024px) {
    .account-main-grid {
        gap: 0; /* Убираем вертикальное расстояние между рядами сетки */
    }

    /* Добавляем отступ вручную, чтобы блоки не слипались */
    .account-main-grid > aside,
    .account-main-grid > main {
        margin-bottom: 20px;
    }
}
/* --- НАЧАЛО: Компактный дизайн кнопок в Сохранениях для ПК --- */

/* 1. Нацеливаемся на кнопки ТОЛЬКО внутри списка сохранений */
#saved-games-list .saved-game-actions .btn {
    padding: 6px 14px; /* Уменьшаем внутренние отступы, делая кнопку тоньше */
    font-size: 0.85rem;  /* Уменьшаем шрифт текста на кнопке */
    min-width: auto;     /* Сбрасываем минимальную ширину, если она была */
    height: auto;        /* Высота будет определяться контентом */
}

/* 2. Отдельно стилизуем кнопку "Удалить", превращая ее в иконку */
#saved-games-list .delete-game-btn {
    background-color: transparent; /* Убираем фон */
    border: 1px solid var(--border-color); /* Добавляем тонкую границу */
    color: var(--text-secondary); /* Иконка становится менее яркой */
    
    width: 36px;        /* Делаем кнопку квадратной и компактной */
    height: 36px;
    padding: 0;         /* Убираем внутренние отступы, так как текста нет */
    font-size: 1rem;    /* Оставляем размер иконки адекватным */
    border-radius: 8px; /* Немного скругляем углы */
}

/* 3. Добавляем красивый эффект при наведении для кнопки "Удалить" */
#saved-games-list .delete-game-btn:hover {
    background-color: var(--color-danger); /* Фон становится красным */
    border-color: var(--color-danger);
    color: #fff; /* Иконка становится белой */
}

/* --- НАЧАЛО: Код для редизайна хедера и карточек в "Моих Мирах" на ПК --- */

/* 1. Стили для новой центральной навигации в хедере (только для ПК) */
@media (min-width: 769px) {
    header .container {
        display: grid;
        grid-template-columns: auto 1fr auto; /* Лого | Центр | Правая часть */
        align-items: center;
    }

    #desktop-nav-center {
        display: flex;
        justify-content: center; /* Центрируем ссылки */
    }

    #desktop-nav-center ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 30px;
    }

    #desktop-nav-center a {
        font-weight: 500;
        color: var(--text-secondary);
        padding: 8px 0;
        border-bottom: 2px solid transparent;
        transition: all 0.2s;
        background: none; /* Убираем фон */
    }

    #desktop-nav-center a:hover,
    #desktop-nav-center a.active-link {
        color: var(--text-title);
        border-bottom-color: var(--text-primary);
    }
    
    /* Скрываем старые дублирующиеся кнопки в правой части */
    #nav-my-worlds-link-li, #nav-my-characters-link-li {
        display: none !important;
    }
    
    /* Показываем кнопку "Профиль" */
     #nav-account-link-li {
        display: list-item !important;
    }
}


/* 2. Возвращаем карточкам в "Моих Мирах" вид как на главной (только для ПК) */
@media (min-width: 769px) {
    #my-universes-list .world-card-cai {
        flex-direction: column; /* Возвращаем вертикальную компоновку */
        height: auto;
    }

    #my-universes-list .world-card-image,
    #my-universes-list .world-card-image-placeholder {
        width: 100%;       /* Картинка снова на всю ширину */
        height: 160px;     /* Фиксированная высота */
        object-fit: cover;
        border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; /* Скругление только сверху */
        margin: 0; /* Сбрасываем отрицательные отступы */
    }
    
    #my-universes-list .world-card-content {
        padding: 15px; /* Возвращаем нормальные отступы */
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    #my-universes-list .world-card-title {
        font-size: 1.1rem;
        -webkit-line-clamp: 2; /* Две строки для заголовка */
    }
    
    #my-universes-list .world-card-description {
        display: -webkit-box; /* Возвращаем описание */
        font-size: 0.9rem;
        -webkit-line-clamp: 2;
        margin-bottom: 15px;
        flex-grow: 1; /* Растягиваем, чтобы прижать мета-данные вниз */
    }

    #my-universes-list .world-card-meta {
        padding-top: 10px;
        font-size: 0.8rem;
        margin-top: auto; /* Прижимаем к низу */
    }
}
 /* 1. Делаем контейнер в "Моих Мирах" шире на ПК для 4-х колонок */
    @media (min-width: 769px) {
        #my-worlds .container {
            max-width: 1400px; /* Та же ширина, что и на главной */
        }
        
        /* По умолчанию скрываем центральные кнопки */
        #nav-my-worlds-link-li-center,
        #nav-my-characters-link-li-center {
            display: none;
        }
    }

    /* --- НАЧАЛО: Финальные исправления для мобильного хедера и сетки карточек --- */

/* 1. Прячем центральную навигацию на мобильных устройствах */
@media (max-width: 768px) {
    #desktop-nav-center {
        display: none;
    }
}

/* 2. Уменьшаем минимальную ширину карточек, чтобы они помещались по 4 в ряд */
@media (min-width: 769px) {
    #my-universes-list.community-worlds-grid {
        /* Уменьшаем с 300px до 280px, это даст больше гибкости сетке */
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}
/* --- НАЧАЛО: Финальный редизайн кнопок хедера и исправление поиска --- */

/* 1. ИСПРАВЛЕНИЕ ПОИСКА: Увеличиваем отступ, чтобы иконка не наезжала на текст */



/* 2. НОВЫЙ ДИЗАЙН КНОПОК В ХЕДЕРЕ (только для ПК) */
@media (min-width: 769px) {
    #desktop-nav-center a {
        font-weight: 600; /* Делаем шрифт чуть жирнее */
        color: var(--text-secondary);
        
        /* Создаем "тонкую" кнопку */
        padding: 6px 18px; 
        
        /* Добавляем фон и скругленную рамку */
        background-color: var(--bg-element);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        
        transition: all 0.2s;
    }

    #desktop-nav-center a:hover,
    #desktop-nav-center a.active-link {
        color: var(--text-title);
        background-color: var(--bg-element-hover);
        border-color: var(--text-primary); /* Рамка становится белой при наведении */
        transform: translateY(-2px); /* Легкий эффект "приподнимания" */
    }
}
/* --- КОНЕЦ: Финального редизайна --- */
/* --- НАЧАЛО: ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ ПОИСКА В РАЗДЕЛАХ --- */

.section-search-container {
    /* На ПК поисковик будет слева, шириной 600px */
    max-width: 600px; 
    margin: 0 0 2.5rem 0; /* Убрали центрирование, добавили отступ снизу */
    position: relative;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-card);
}

.section-search-icon {
    position: absolute;
    left: 20px; /* Сдвинули иконку чуть правее */
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1rem;
}

.section-search-input {
    width: 100%;
    height: 50px;
    padding: 10px 20px 10px 55px; /* Увеличили отступ слева для иконки */
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: var(--font-main);
}

.section-search-input:focus {
    outline: none;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .section-search-container {
        /* На мобильных поисковик растягивается на всю ширину контейнера */
        max-width: 100%;
        margin-bottom: 1.5rem;
    }
}

/* Стили для сообщения "Ничего не найдено" (остаются без изменений) */
.no-results-message {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
    display: none;
}
@media (min-width: 769px) {
    #desktop-nav-center ul {
        gap: 20px; /* Уменьшаем расстояние с 30px до 22px */
    }
}
/* --- КОНЕЦ: ИСПРАВЛЕННЫХ СТИЛЕЙ --- */
/* --- НАЧАЛО: Стили для нового бокового меню в стиле GPT (только ПК) --- */

/* По умолчанию скрываем все новые элементы */
#sidebar-toggle-btn, #left-sidebar, #sidebar-overlay {
    display: none;
}

/* Применяем стили только для экранов ПК */
@media (min-width: 769px) {

    /* 1. Кнопка-иконка для открытия меню */
    #sidebar-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 15px;
        left: 20px;
        z-index: 1010; /* Выше всего, кроме модалок */
        width: 42px;
        height: 42px;
        background-color: var(--bg-element);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        color: var(--text-secondary);
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    #sidebar-toggle-btn:hover {
        color: var(--text-title);
        border-color: var(--text-primary);
    }

    /* 2. Сама боковая панель */
    #left-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px; /* Ширина панели */
        height: 100%;
        background-color: #141414; /* Чуть темнее основного фона */
        border-right: 1px solid var(--border-color);
        z-index: 1005;
        transform: translateX(-100%); /* Изначально скрыта за экраном */
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 1rem;
    }
    .sidebar-header h4, .sidebar-section h4 {
        color: var(--text-secondary);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 0 0.75rem;
        margin: 1.5rem 0 0.5rem 0;
    }

    /* 3. Ссылки навигации в панели */
    .sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
    .sidebar-nav a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 8px;
        color: var(--text-secondary);
        font-weight: 500;
        transition: background-color 0.2s, color 0.2s;
    }
    .sidebar-nav a:hover, .sidebar-nav a.active-link {
        background-color: var(--bg-element);
        color: var(--text-title);
    }
    
    /* 4. Заглушка для "Последних" чатов */
    .recent-items-placeholder p {
        font-size: 0.9rem;
        color: var(--text-secondary);
        text-align: center;
        padding: 1rem;
    }

    /* 5. Обертка для страницы и оверлей */
    #page-wrapper {
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #sidebar-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(0,0,0,0.3);
        z-index: 1004;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none; /* Не мешает кликать, пока скрыт */
    }

    /* 6. Стили для ОТКРЫТОГО состояния */
    body.sidebar-open #left-sidebar {
        transform: translateX(0); /* Показываем панель */
    }
    body.sidebar-open #page-wrapper {
        transform: translateX(280px); /* Сдвигаем контент */
    }
    body.sidebar-open #sidebar-overlay {
        display: block;
        opacity: 1;
        pointer-events: auto; /* Включаем кликабельность */
    }
}
/* --- НАЧАЛО: Код для исправления поиска и редизайна кнопок хедера --- */

/* 1. ИСПРАВЛЕНИЕ ПОИСКА В РАЗДЕЛАХ */
/* Увеличиваем отступ слева, чтобы текст гарантированно не заезжал на иконку */
.section-search-container .section-search-input {
    padding-left: 55px;
}

/* 2. НОВЫЙ ГАРМОНИЧНЫЙ ДИЗАЙН КНОПОК В ХЕДЕРЕ (только для ПК) */
@media (min-width: 769px) {
    #desktop-nav-center a {
        font-weight: 600;
        color: var(--text-secondary);
        
        /* Убираем фон и рамку в обычном состоянии для более чистого вида */
        background-color: transparent;
        border: 1px solid transparent;
        
        padding: 8px 18px; /* Делаем кнопки чуть выше */
        border-radius: var(--border-radius);
        
        transition: all 0.2s ease-in-out;
    }

    /* Эффект при наведении курсора: появляется фон */
    #desktop-nav-center a:hover {
        color: var(--text-title);
        background-color: var(--bg-element);
    }

    /* Стиль для активной (выбранной) кнопки: фон и рамка для выделения */
    #desktop-nav-center a.active-link {
        color: var(--text-title);
        background-color: var(--bg-element-hover);
        border-color: var(--border-color);
    }
}
/* --- НАЧАЛО: Код для сворачиваемого блока API и мобильного меню --- */

/* 1. Стили для сворачивающегося блока API-ключа */

/* Делаем заголовок кликабельным */
.api-key-management h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none; /* Запрещаем выделение текста заголовка */
}

/* Иконка-стрелочка для сворачивания */
.collapsible-toggle-icon {
    transition: transform 0.3s ease-in-out;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9em;
    color: var(--text-secondary);
}
.collapsible-toggle-icon::before {
    content: '\f078'; /* Иконка fa-chevron-down */
}

/* Контейнер для сворачиваемого контента */
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out, padding-top 0.35s ease-in-out;
}

/* Стили для ОТКРЫТОГО состояния */
.collapsible-active .collapsible-content {
    max-height: 500px; /* Большое значение, чтобы контент точно поместился */
    padding-top: 1rem; /* Отступ сверху, когда блок открыт */
}

.collapsible-active .collapsible-toggle-icon {
    transform: rotate(180deg); /* Поворачиваем стрелочку вверх */
}


/* 2. Уменьшаем текст и отступы в мобильном меню (бургере) */
@media (max-width: 768px) {
    .sidenav-header {
        padding: 20px 15px;
        font-size: 1.3rem;
    }
    .sidenav ul li a {
        padding: 12px 18px; /* Делаем пункты чуть тоньше */
        font-size: 0.95rem; /* Уменьшаем текст */
        gap: 12px; /* Уменьшаем расстояние до иконки */
    }
    .sidenav ul li a i.fa-fw {
        font-size: 1.1rem; /* Иконки тоже чуть меньше */
    }
}
/* --- НАЧАЛО: Премиальный дизайн для списка сохранений (ПК) --- */

/* 1. Контейнер для всех карточек: добавляем отступы между ними */
#saved-games-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 2. Стиль для самой карточки сохранения */
.saved-game-item {
    display: flex;
    justify-content: space-between; /* Разносим текст и кнопки по краям */
    align-items: center;            /* Выравниваем по центру по вертикали */
    gap: 20px;
    padding: 20px 25px;
    
    background-color: var(--bg-element); /* Темный фон карточки */
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-large); /* Сильное скругление */
    
    transition: all 0.2s ease;
}

.saved-game-item:hover {
    background-color: var(--bg-element-hover);
    border-color: var(--border-color);
    transform: translateY(-2px); /* Легкий эффект "приподнимания" */
}

/* 3. Блок с текстовой информацией (название, цитата, дата) */
.saved-game-info {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Расстояние между строками текста */
    overflow: hidden; /* Важно для обрезки длинного текста */
}

/* 4. Стили для текста внутри карточки */
.saved-game-world {
    font-weight: 700; /* Жирный шрифт для названия */
    font-size: 1.1rem;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Добавляет "..." если текст не помещается */
}

.saved-game-snippet {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic; /* Делаем цитату курсивом, как на скриншоте */
}

.saved-game-time {
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* 5. Блок с кнопками "Продолжить" и "Удалить" */
.saved-game-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0; /* Запрещаем кнопкам сжиматься, если текст длинный */
}

/* 6. Компактный стиль для кнопок внутри карточек */
.saved-game-actions .btn {
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* 7. Стиль для кнопки "Удалить" (иконка) */
.saved-game-actions .delete-game-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1rem;
    background-color: #333640; /* Темно-серый фон, как на скриншоте */
    border-color: #4a4e5c;
}

.saved-game-actions .delete-game-btn:hover {
    background-color: var(--color-danger); /* Красный при наведении */
    border-color: var(--color-danger);
    color: #fff;
}
/* --- НАЧАЛО: Код для исправления поисковика и добавления фона --- */

/* 1. Исправление поисковика на мобильных устройствах */
@media (max-width: 768px) {
    /*
     * Это исправление гарантирует, что контейнер с поиском
     * всегда будет пытаться занять всё доступное ему пространство.
     * Свойство flex-basis: 0; заставляет flex-элемент начинать свой
     * расчёт ширины с нуля, а flex-grow: 1; затем растягивает
     * его на всю оставшуюся свободную область, независимо от ширины
     * кнопок-фильтров.
    */
    .universe-search-container {
        flex-basis: 0;
        flex-grow: 1;
    }

    /*
     * Также убедимся, что само поле ввода растягивается
     * на 100% ширины своего родительского контейнера.
    */
    .universe-search-container input[type="search"] {
        width: 100%;
    }
}

/* 2. Добавление водяных знаков "AI WORLDS" на фон */
body::before {
    content: 'AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS AI WORLDS';
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1; /* Помещает псевдоэлемент за основным контентом, но над частицами */

    /* Стилизация текста */
    font-size: 15vw; /* Размер зависит от ширины экрана для адаптивности */
    font-weight: 700;
    font-family: var(--font-headings); /* Используем ваш фирменный шрифт для заголовков */
    color: rgba(255, 255, 255, 0.02); /* Очень низкая прозрачность для эффекта водяного знака */
    line-height: 1.5;
    
    /* Гарантирует, что текст будет переноситься и заполнять всё пространство */
    overflow: hidden;
    word-break: break-all;
    pointer-events: none; /* Текст не будет мешать кликам и взаимодействию с сайтом */
}
.world-card-image-placeholder {
    /* 1. Заменяем анимированный градиент на простой, сплошной фон.
       Цвет взят из вашей палитры, чтобы соответствовать общему стилю. */
    background: #252525; /* Темно-серый фон */
    
    /* 2. Полностью отключаем анимацию и связанные с ней свойства.
       !important используется для надежности, чтобы перебить любые другие стили. */
    animation: none !important;
    background-size: auto !important; /* Сбрасываем размер фона */
}

/* --- НАЧАЛО: Стили для нового информационного баннера --- */

#official-worlds-info-banner {
    /* 1. Заставляем баннер занимать всю ширину сетки */
    grid-column: 1 / -1;
    border-color: rgba(243, 160, 74, 0.3);
    /* 2. Премиальный внешний вид */
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 25px 30px;
    margin-bottom: 20px;
    border-radius: var(--border-radius-large);
    border: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(42, 35, 85, 0.5), rgba(30, 26, 59, 0.5));
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    
    /* 3. Анимация появления */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

#official-worlds-info-banner.visible {
    opacity: 1;
    transform: translateY(0);
}

.banner-icon {
    flex-shrink: 0;
    font-size: 2.5rem;
    color: gold;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.banner-content h4 {
    margin: 0 0 8px 0;
    font-size: 1.3rem;
    color: var(--text-title);
}

.banner-content p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.banner-content p strong {
    color: var(--text-primary);
    font-weight: 600;
}

.banner-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
}

.banner-close-btn:hover {
    color: var(--text-title);
    transform: rotate(90deg);
}


/* --- НАЧАЛО: Новые премиальные стили для подвала (с компактной мобильной версией) --- */

/* 1. Основной контейнер подвала (стили для ПК) */
.main-footer {
    flex-shrink: 0;
    background-color: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.main-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* 2. Левая часть (копирайт и ссылки) */
.footer-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-legal-links a {
    color: var(--text-secondary);
    transition: color 0.2s ease;
    margin-right: 1rem;
}

.footer-legal-links a:hover {
    color: var(--text-primary);
}

.footer-legal-links a:last-child {
    margin-right: 0;
}

/* 3. Правая часть (соцсети) */
.footer-right {
    text-align: right;
}

.footer-right p {
    margin: 0 0 0.75rem 0;
    font-weight: 500;
}

.footer-social-icons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.footer-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--bg-element);
    border: 1px solid var(--border-color-light);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1.1rem;
    transition: all 0.2s ease-out;
}

.footer-social-icons a:hover {
    color: var(--text-title);
    background-color: var(--bg-element-hover);
    border-color: var(--text-primary);
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 4. АДАПТИВНОСТЬ: Компактный вид для мобильных устройств (экраны до 768px) */
@media (max-width: 768px) {
    /* Уменьшаем отступы самого подвала */
    .main-footer {
        padding: 1.5rem 0;
        font-size: 0.85rem; /* Уменьшаем основной шрифт */
    }

    /* Ставим блоки друг под другом и центрируем */
    .main-footer .container {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem; /* Уменьшаем расстояние между блоками */
    }
    
    .footer-left, .footer-right {
        align-items: center;
        text-align: center;
    }
    
    /* Уменьшаем текст "Следите за новостями" и отступ под ним */
    .footer-right p {
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    /* Уменьшаем сами иконки и расстояние между ними */
    .footer-social-icons {
        justify-content: center;
        gap: 0.75rem; /* Уменьшаем отступ */
    }

    .footer-social-icons a {
        width: 36px;  /* Делаем иконки меньше */
        height: 36px;
        font-size: 1rem; /* Уменьшаем размер значка внутри */
    }
}


/* --- Стили для улучшенного блока оплаты через Telegram --- */
.manual-payment-option {
    background-color: var(--bg-element);
    padding: 20px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    text-align: center; /* Центрируем весь контент внутри блока */
}

.manual-payment-option h4 {
    justify-content: center; /* Центрируем заголовок */
}

/* Стили для самой кнопки Telegram */
.btn-telegram-manual {
    display: inline-flex;  /* Позволяет кнопке быть по центру и правильно выравнивать иконку/текст */
    align-items: center;
    gap: 10px;
    margin-top: 1.5rem;     /* Увеличенный отступ от текста */
    padding: 10px 22px;     /* Уменьшенные отступы для более компактного вида */
    font-weight: 600;
    background: #2AABEE;
    color: white;
    border-color: #2AABEE !important;
}
/* --- КОНЕЦ: Новых стилей для подвала --- */
/* --- КОНЕЦ: Стилей для баннера --- */
/* --- КОНЕЦ: Кода для исправления и добавления фона --- */
/* --- КОНЕЦ: Дизайна для списка сохранений --- */
/* --- СТИЛИ ДЛЯ ИНВЕНТАРЯ В ПРОФИЛЕ --- */
/* --- НАЧАЛО: ЗАМЕНА СТИЛЕЙ ДЛЯ ИНВЕНТАРЯ В ПРОФИЛЕ --- */
#inventory-list {
    display: grid;
    /* Адаптивная сетка: колонки мин. 280px, растягиваются на доступное место */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px; /* Расстояние между карточками */
}

.inventory-item-card {
    background: var(--bg-element);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius); /* Используем скругление из вашей палитры */
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Расстояние между блоками внутри карточки */
    transition: all 0.2s ease-out;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.inventory-item-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--border-color);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.inventory-item-header {
    display: flex;
    gap: 15px;
    align-items: center; /* Выравниваем картинку и текст по центру */
}

.inventory-item-image {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: var(--border-radius-small);
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

.inventory-item-title-block {
    flex-grow: 1;
    min-width: 0; /* Для правильного переноса текста в flex-контейнере */
}

.inventory-item-name {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-headings);
    color: var(--text-title);
    margin: 0 0 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inventory-item-rarity {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px; /* "Таблетка" */
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Цветовое кодирование редкости --- */
.inventory-item-rarity.Обычный { background-color: #555; color: #ddd; }
.inventory-item-rarity.Редкий { background-color: #0d6efd; color: white; }
.inventory-item-rarity.Эпический { background-color: #8a4af3; color: white; }
.inventory-item-rarity.Легендарный { background-color: #ff8c00; color: white; }

.inventory-item-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    border-top: 1px solid var(--border-color-light);
    padding-top: 15px;
    margin-top: auto; /* Прижимает этот блок к низу карточки */
    font-style: italic;
}
/* --- КОНЕЦ: ЗАМЕНЫ СТИЛЕЙ ДЛЯ ИНВЕНТАРЯ --- */

/* --- НАЧАЛО: СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА ПРЕДМЕТА --- */

#item-details-content {
    text-align: center;
}

#item-details-content .item-modal-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: var(--border-radius-large);
    margin-bottom: 1.5rem;
    border: 3px solid var(--border-color);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

#item-details-content .item-modal-name {
    font-family: var(--font-headings);
    font-size: 1.8rem;
    color: var(--text-title);
    margin: 0 0 10px 0;
}

#item-details-content .item-modal-rarity {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 50px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Используем те же цвета, что и в инвентаре */
#item-details-content .item-modal-rarity.Обычный { background-color: #555; color: #ddd; }
#item-details-content .item-modal-rarity.Редкий { background-color: #0d6efd; color: white; }
#item-details-content .item-modal-rarity.Эпический { background-color: #8a4af3; color: white; }
#item-details-content .item-modal-rarity.Легендарный { background-color: #ff8c00; color: white; }

#item-details-content .item-modal-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

#item-details-content .item-modal-source {
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.7;
    border-top: 1px solid var(--border-color-light);
    padding-top: 1rem;
}
/* --- КОНЕЦ: СТИЛЕЙ ДЛЯ МОДАЛЬНОГО ОКНА --- */


/* --- ДОБАВЬТЕ ЭТОТ КОД В СЕКЦИЮ СТИЛЕЙ ДЛЯ МОДАЛЬНОГО ОКНА --- */

#item-details-content .item-modal-delete-btn {
    margin-top: 1.5rem;
    width: 100%;
    
    /* Используем стили для кнопок-опасностей */
    background-color: var(--color-danger);
    color: white;
    border: 1px solid var(--color-danger);
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    
    /* Наследуем основные стили кнопок с вашего сайта */
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

#item-details-content .item-modal-delete-btn:hover:not(:disabled) {
    background-color: #d63333; /* Чуть темнее при наведении */
    border-color: #d63333;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(243, 74, 74, 0.3);
}

#item-details-content .item-modal-delete-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- НАЧАЛО: Адаптация модального окна покупки для мобильных --- */

@media (max-width: 600px) {

    /* 1. Уменьшаем отступы самого модального окна, чтобы было больше места */
    #purchase-modal .modal-content {
        padding: 25px 15px;
        width: calc(100% - 20px); /* Занимает почти всю ширину экрана */
    }

    /* 2. Делаем заголовок компактнее */
    #purchase-modal h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    
    /* 3. Уменьшаем блок с итоговой суммой */
    #purchase-modal .payment-summary {
        padding: 12px;
        margin: 15px 0;
    }
    #purchase-modal .payment-summary p {
        font-size: 0.9rem;
    }
    #purchase-modal .payment-summary #calculated-price {
        font-size: 1.3em;
    }
    
    /* 4. Уменьшаем разделитель "ИЛИ" */
    #purchase-modal div[style*="margin: 2rem 0;"] {
        margin: 1.5rem 0 !important; /* !important, чтобы перебить инлайновый стиль */
    }
    
    /* 5. Делаем блок ручной оплаты компактнее */
    .manual-payment-option {
        padding: 15px;
    }
    .manual-payment-option h4 {
        font-size: 1rem;
    }
    .manual-payment-option p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    /* 6. ГЛАВНОЕ: Уменьшаем кнопку Telegram и ее отступ */
    .btn-telegram-manual {
        margin-top: 1rem;       /* Уменьшаем отступ сверху */
        padding: 8px 18px;      /* Делаем кнопку тоньше */
        font-size: 0.9rem;      /* Уменьшаем шрифт на кнопке */
        gap: 8px;               /* Уменьшаем расстояние до иконки */
    }
}
/* --- КОНЕЦ: Адаптации модального окна --- */

/* --- НАЧАЛО: Стили для баннера ивента "Шепот Жатвы" --- */
.feature-announcement-banner {
    grid-column: 1 / -1;
    display: none;
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    margin: 1rem 0;
    border-radius: var(--border-radius-large);
    border: 1px solid var(--border-color);
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

.feature-announcement-banner.visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* Тематический фон для ивента */
.event-harvest {
    background: linear-gradient(110deg, rgba(138, 74, 243, 0.08) 0%, rgba(245, 166, 35, 0.08) 100%), var(--bg-element);
    border-color: rgba(245, 166, 35, 0.2);
}

.feature-banner-image-container {
    width: 280px;
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.feature-banner-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.feature-announcement-banner:hover .feature-banner-image-container img {
    transform: scale(1.05);
}

.feature-banner-content h4 {
    font-size: 1.6rem;
    font-family: var(--font-headings);
    color: var(--text-title);
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.event-harvest h4 .fa-ghost {
    color: var(--color-warning);
}

.feature-banner-content p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 600px;
}

.feature-banner-actions {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.banner-dismiss-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.banner-dismiss-btn:hover {
    color: var(--text-primary);
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .feature-announcement-banner {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
        gap: 1.5rem;
    }
    .feature-banner-image-container {
        width: 100%;
        max-width: 350px;
    }
    .feature-banner-content h4 {
        justify-content: center;
        font-size: 1.4rem;
    }
    .feature-banner-actions {
        justify-content: center;
    }
}

/* --- НАЧАЛО: Код для адаптации баннера ивента под мобильные устройства --- */
@media (max-width: 768px) {
    
    /* Уменьшаем отступы самого баннера */
    .feature-announcement-banner {
        padding: 1.25rem;
        gap: 1.25rem;
    }

    /* Делаем заголовок компактнее */
    .feature-banner-content h4 {
        font-size: 1.2rem;
        gap: 10px; /* Уменьшаем отступ до иконки */
    }

    /* Уменьшаем основной текст */
    .feature-banner-content p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* Уменьшаем отступ над кнопками */
    .feature-banner-actions {
        margin-top: 1.25rem;
        gap: 0.75rem; /* Сближаем кнопки */
    }

    /* Уменьшаем основную кнопку "Проверить инвентарь" */
    .feature-banner-actions .btn-primary {
        padding: 8px 18px;
        font-size: 0.9rem;
    }

    /* Уменьшаем текстовую кнопку "Понятно" */
    .feature-banner-actions .banner-dismiss-btn {
        font-size: 0.9rem;
    }
}
/* --- КОНЕЦ: Кода для адаптации баннера --- */
/* --- КОНЕЦ: Стилей для баннера ивента --- */
/* --- СТИЛИ ДЛЯ НОВОГО ВИДА СОХРАНЕНИЙ --- */

.saved-games-controls {
    margin-bottom: 1.5rem;
}

.saved-games-controls h4 {
    margin-bottom: 0.75rem;
}

.search-and-delete-wrapper {
    display: flex;
    gap: 15px;
    align-items: center;
}

.search-and-delete-wrapper .section-search-container {
    flex-grow: 1; /* Поиск занимает все доступное место */
}

#delete-all-saves-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* Кнопка не сжимается */
}

/* Адаптивность для мобильных */
@media (max-width: 600px) {
    .search-and-delete-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    #delete-all-saves-btn {
        justify-content: center;
    }
    /* Скрываем текст на очень маленьких экранах */
    @media (max-width: 400px) {
        .delete-all-text {
            display: none;
        }
    }
}

/* --- НАЧАЛО: Код для редизайна кнопок в Сохранениях --- */

/* 1. Делаем все кнопки действий (Продолжить, Облако, Удалить) одинаковыми квадратами */
.saved-game-actions .btn {
    width: 40px;  /* Фиксированная ширина */
    height: 40px; /* Фиксированная высота */
    padding: 0;   /* Убираем внутренние отступы, чтобы иконка была по центру */
    font-size: 1rem; /* Стандартный размер иконки */
    
    /* Идеально центрируем иконку внутри кнопки */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 2. Меняем цвет кнопки "Удалить все" на более гармоничный */
#delete-all-saves-btn {
    background-color: #333333; /* Темно-серый, как другие элементы */
    border-color: #383838;
    color: var(--text-secondary);
}

/* Красный цвет теперь появляется только при наведении, как предупреждение */
#delete-all-saves-btn:hover:not(:disabled) {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: #FFFFFF;
}

/* 3. Выравниваем кнопку "Удалить все" по высоте с полем поиска (ТОЛЬКО для ПК) */
@media (min-width: 769px) {
    .search-and-delete-wrapper {
        align-items: center; /* Убедимся, что элементы выровнены по вертикали */
    }
    #delete-all-saves-btn {
        height: 50px; /* Та же высота, что и у .section-search-input */
    }
}

/* --- КОНЕЦ: Кода для редизайна кнопок --- */
/* --- НАЧАЛО: Код для адаптации кнопок-вкладок в профиле --- */

/* 
 * Эти стили применяются на экранах среднего размера (планшеты, небольшие окна ПК),
 * где текст вкладок может начать вылезать за пределы контейнера.
*/
@media (max-width: 1024px) {
    .account-tab-button {
        /* Слегка уменьшаем размер шрифта, чтобы текст занимал меньше места */
        font-size: 0.85rem;

        /* Уменьшаем боковые отступы, чтобы кнопки стали компактнее */
        padding-left: 8px;
        padding-right: 8px;

        /* Делаем шрифт чуть менее жирным, что также экономит пространство */
        font-weight: 500;

        /* Гарантируем, что текст никогда не будет переноситься на вторую строку */
        white-space: nowrap;
    }
}
/* --- КОНЕЦ: Кода для адаптации --- */

/* --- Стили для добавления своих персонажей в мир --- */
.character-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background-color: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    min-height: 44px; 
    margin-top: 8px;
}
.character-tag {
    background-color: var(--bg-element-hover);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.character-tag:hover:not(.selected) {
    border-color: var(--text-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* 1. Определяем анимацию для "переливающегося" света */
@keyframes glass-shimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* 2. Стиль для самого выбранного тега */
.character-tag.selected {
    /* --- Основа "Стеклянного" вида --- */
    background-color: rgba(255, 255, 255, 0.15); /* Полупрозрачная светлая подложка */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3); /* Светлая грань для "ловли света" */
    color: #FFFFFF; /* Яркий белый текст для контраста */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Мягкая тень для объема */

    /* --- Подготовка для анимации --- */
    position: relative; /* Необходимо для позиционирования псевдо-элемента */
    overflow: hidden;   /* Скрываем градиент, выходящий за пределы тега */
}

/* 3. Создаем сам "переливающийся свет" с помощью псевдо-элемента */
.character-tag.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* --- Анимированный градиент для перелива --- */
    /* Он будет двигаться слева направо, создавая эффект блика */
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.3) 45%,
        rgba(255, 255, 255, 0.3) 55%,
        transparent 80%
    );
    background-size: 250% 100%; /* Делаем градиент шире самого элемента */
    
    /* Применяем анимацию */
    animation: glass-shimmer 3s infinite linear;

    /* Помещаем псевдо-элемент за текстом, но над фоном */
    z-index: 1; 
}
/* --- КОНЕЦ: Премиального стиля --- */
.character-tag-container .placeholder-text {
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    padding: 5px 0;
}
.character-tag-container .error-text {
    color: var(--color-danger);
}
/* --- КОНЕЦ НОВОГО КОДА --- */
/* --- НАЧАЛО: Стили для выделения рекомендуемого мира --- */

/* 1. Добавляем эффект "свечения" для рекомендуемой карточки */
.world-card-cai.recommended-world {
    /* Фиолетовая тень для эффекта свечения */
    box-shadow: 0 0 20px rgba(138, 74, 243, 0.4);
    /* Рамка в тон свечению */
    border-color: rgba(138, 74, 243, 0.5);
}

/* 2. Стиль для нового значка "Обновлено" */
.new-version-tag {
    /* Фон в цвет золота */
    background-color: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.3) !important; /* !important чтобы перебить общий стиль */
}

.new-version-tag .fa-wand-sparkles {
    color: gold; /* Делаем иконку золотой */
    /* Добавляем легкое свечение */
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}

/* 3. Улучшаем читаемость нового описания */
.world-card-description strong {
    color: var(--text-primary);
    font-weight: 700;
}
/* --- КОНЕЦ: Стилей для выделения --- */
/* --- НАЧАЛО: ИСПРАВЛЕННЫЕ Стили для панели администратора --- */

/* 1. Контейнер для всей панели */
.admin-panel-block {
    background-color: var(--bg-element);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 2rem 0;
}

/* 2. Заголовок и описание (без изменений) */
.admin-panel-block h4 {
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-panel-description {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
}

/* 3. Контейнер для кнопок (без изменений) */
.admin-panel-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* 4. ГЛАВНОЕ ИСПРАВЛЕНИЕ: Стиль для самих кнопок */
.admin-panel-actions .btn {
    /* Включаем Flexbox для управления иконкой и текстом */
    display: flex;
    /* Ставим элементы друг под другом (иконка над текстом) */
    flex-direction: column;
    
    /* Идеально центрируем их по горизонтали и вертикали */
    align-items: center;
    justify-content: center;
    
    /* Задаем комфортные отступы и минимальную высоту для ровности */
    padding: 15px 10px;
    min-height: 85px; /* Гарантирует одинаковую высоту кнопок */
    
    /* Центрируем текст, если он переносится на 2 строки */
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

/* 5. Слегка увеличиваем иконку и добавляем ей отступ */
.admin-panel-actions .btn i {
    font-size: 1.3rem; /* Делаем иконку более заметной */
    margin-bottom: 8px; /* Отступ между иконкой и текстом */
}

/* --- КОНЕЦ: ИСПРАВЛЕННЫХ Стилей --- */
/* --- СТИЛИ ДЛЯ НОВОГО БЛОКА ВЫБОРА ЯЗЫКА --- */
/* --- НАЧАЛО: Код для редизайна выбора языка (V2) --- */
.language-section-wrapper {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color-light);
}
.language-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Выравниваем по центру по вертикали */
    padding: 10px;
    background-color: var(--bg-element); /* Темный фон для всей строки */
    border-radius: var(--border-radius); /* Скругляем углы */
    border: 1px solid var(--border-color);
}
.language-setting-row label {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin: 0; /* Убираем лишние отступы */
}
#language-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    /* --- ГЛАВНЫЕ ИЗМЕНЕНИЯ ЗДЕСЬ --- */
    background-color: var(--bg-element-hover); /* Задаем темный фон самому элементу */
    border: 1px solid var(--border-color);
    padding: 8px 30px 8px 12px; /* Увеличиваем отступы для красоты */
    border-radius: 8px; /* Добавляем скругление */
    /* --- КОНЕЦ ИЗМЕНЕНИЙ --- */
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23AAAAAA' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 1em;
}

#language-select:focus {
    outline: none;
    border-color: var(--color-primary); /* Подсветка при фокусе */
}

/* Этот блок стилизует сами выпадающие опции */
#language-select option {
    background: var(--bg-element); /* Темный фон для каждой опции */
    color: var(--text-primary);     /* Светлый текст */
    border: none;
}
/* Стили для информационного текста под блоком (остаются без изменений) */
.language-info-text {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5;
    margin-top: 1rem; padding: 10px;
    background-color: rgba(0,0,0,0.15); border-radius: 8px;
}
.language-info-text i { margin-top: 4px; opacity: 0.7; }
/* --- КОНЕЦ: Кода для редизайна --- */

/* --- НАЧАЛО: Код для адаптации блока выбора языка --- */

/* Применяем стили только для мобильных экранов */
@media (max-width: 600px) {

    /* 1. Делаем сам блок вертикальным */
    .language-setting-row {
        flex-direction: column;      /* Ставим элементы друг под другом */
        align-items: flex-start;     /* Выравниваем по левому краю */
        gap: 8px;                    /* Добавляем небольшой отступ между надписью и списком */
    }

    /* 2. Стилизуем надпись */
    .language-setting-row label {
        font-size: 0.9rem;          /* Делаем шрифт чуть меньше */
        padding-left: 5px;          /* Небольшой отступ для красоты */
    }

    /* 3. Растягиваем выпадающий список на всю ширину и стилизуем его */
    #language-select {
        width: 100%;                 /* Растягиваем на всю ширину родителя */
        text-align: left;            /* Выравниваем текст внутри списка по левому краю */
        padding-left: 15px;          /* Увеличиваем внутренний отступ слева */
        padding-right: 35px;         /* Оставляем место для стрелочки */
    }
}
/* --- КОНЕЦ: Кода для адаптации --- */

/* --- НАЧАЛО: СТИЛИ ДЛЯ НОВЫХ КНОПОК НАСТРОЕК --- */

/* Общий стиль для обеих кнопок */
.sidebar-toggle-btn-desktop,
.mobile-only-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: 1.4rem; /* Увеличим иконку */
    cursor: pointer;
    transition: all 0.2s;
}

.sidebar-toggle-btn-desktop:hover,
.mobile-only-btn:hover {
    color: var(--text-title);
    border-color: var(--text-primary);
}
/* --- НАЧАЛО: [ЗАМЕНА] СТИЛИ ДЛЯ АНИМИРОВАННОЙ КНОПКИ НАСТРОЕК --- */
.sidebar-toggle-btn-desktop {
    position: fixed;
    z-index: 1010;
    
    /* Убираем 'top' и 'left', так как JS будет управлять ими через 'transform' */
    
    /* Добавляем плавный переход для свойства transform */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Остальные стили (размер, цвет и т.д.) остаются без изменений */
    display: flex; 
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: 1.4rem;
    cursor: pointer;
}

.sidebar-toggle-btn-desktop:hover {
    color: var(--text-title);
    border-color: var(--text-primary);
}
/* --- КОНЕЦ: [ЗАМЕНЫ] СТИЛЕЙ --- */
/* Показываем кнопку для ПК и скрываем для мобильных по умолчанию */
.sidebar-toggle-btn-desktop { display: flex; }
.mobile-only-btn { display: none; }

/* Адаптивность: меняем видимость кнопок на мобильных */
/* --- НАЧАЛО: [ЗАМЕНА] РЕДИЗАЙН МОБИЛЬНЫХ КНОПОК ХЕДЕРА --- */
@media (max-width: 768px) {
    .sidebar-toggle-btn-desktop { display: none; }
    
    /* Общий стиль для обеих кнопок в мобильном хедере */
    .mobile-only-btn,
    .hamburger-menu {
        display: flex !important; /* !important, чтобы перебить другие стили */
        align-items: center;
        justify-content: center;
        width: 40px;  /* Уменьшаем размер для компактности */
        height: 40px;
        
        /* --- ГЛАВНЫЙ РЕДИЗАЙН --- */
        background-color: transparent; /* 1. Убираем фон */
        border: 1px solid var(--border-color); /* 2. Добавляем тонкую рамку */
        border-radius: var(--border-radius); /* 3. Скругляем углы */
        
        color: var(--text-secondary);
        font-size: 1.2rem; /* Уменьшаем иконку */
        cursor: pointer;
        transition: all 0.2s;
    }
    
    /* Эффект при наведении/нажатии */
    .mobile-only-btn:hover,
    .hamburger-menu:hover {
        color: var(--text-title);
        border-color: var(--text-primary);
    }

    /* Сдвигаем логотип, чтобы кнопки не мешали */
    header .container .logo {
        margin-right: auto;
    }
}
/* --- КОНЕЦ: [ЗАМЕНЫ] РЕДИЗАЙНА --- */

/* --- НАЧАЛО: НОВЫЕ СТИЛИ ДЛЯ СПИСКА КАРТОЧЕК --- */
/* --- НАЧАЛО: [ЗАМЕНА V2] ПРЕМИУМ-ДИЗАЙН ДЛЯ КАРТОЧЕК С ПАГИНАЦИЕЙ --- */
/* --- НАЧАЛО: [ЗАМЕНА V4] ФИНАЛЬНЫЙ ДИЗАЙН КАРТОЧЕК (КАК НА СКРИНШОТЕ) --- */
.flashcard-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background-color: #252525;
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color-light);
    margin-bottom: 12px;
}

.flashcard-content {
    flex-grow: 1;
    /* --- ГЛАВНОЕ ИСПРАВЛЕНИЕ --- */
    /* Это правило заставляет flex-элемент сжиматься, 
       даже если его содержимое (длинный текст) пытается его растянуть. */
    min-width: 0; 
}

.flashcard-original,
.flashcard-translation {
    /* Это правило разрешает браузеру разрывать длинные слова или строки
       без пробелов, чтобы они помещались в сжатый контейнер. */
    word-break: break-word;

    /* Остальные стили для текста остаются такими же */
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-title);
    margin-bottom: 4px;
}

.flashcard-translation {
    font-size: 0.95rem;
    font-weight: normal; /* Убираем жирность у перевода */
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0;
}
.flashcard-delete-btn {
    background: none; border: none; color: var(--text-secondary);
    font-size: 1.3rem; cursor: pointer; padding: 0;
    transition: all 0.2s;
}
.flashcard-delete-btn:hover { color: var(--color-danger); }

/* --- Стили для навигации и футера --- */
.flashcards-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color);
}
#flashcard-nav-container { display: flex; align-items: center; gap: 15px; }
.flashcard-nav-btn {
    background: none; border: 1px solid var(--border-color); color: var(--text-secondary);
    width: 38px; height: 38px; border-radius: 50%; font-size: 1rem;
    cursor: pointer; transition: all 0.2s;
}
.flashcard-nav-btn:hover:not(:disabled) { border-color: var(--text-primary); color: var(--text-primary); }
.flashcard-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.flashcard-page-indicator { font-size: 0.9rem; color: var(--text-secondary); }

/* --- Стиль для кнопки "Очистить все", как на скриншоте --- */
#clear-flashcards-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background-color: #FFFFFF; color: #141414; border: none;
    font-weight: 600; padding: 8px 16px;
    border-radius: 50px; /* Форма "пилюли" */
}
#clear-flashcards-btn:hover { background-color: #f0f0f0; }
/* --- НАЧАЛО: [ЗАМЕНА] ПРЕМИУМ-ДИЗАЙН ДЛЯ КНОПОК "ЧТО НОВОГО" --- */

/* Анимация свечения (остается без изменений, она идеальна) */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.3); }
    50% { box-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.6); }
    100% { box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.3); }
}

/* --- Кнопка для ПК (в шапке) --- */


/* Эффект при наведении для ПК-кнопки */
#whats-new-btn-desktop:hover {
    color: var(--text-title); /* Иконка становится белой */
    background-color: var(--bg-element-hover); /* Появляется фон */
}

/* --- Плавающая кнопка для мобильных --- */
/* --- НАЧАЛО: [ИСПРАВЛЕНИЕ V2] Улучшенный дизайн для кнопок "Что нового" --- */

/* Общий стиль для обеих кнопок */
#whats-new-btn-desktop,
#whats-new-btn-mobile {
    /* <-- ГЛАВНОЕ ИСПРАВЛЕНИЕ: Идеально центрирует иконку */
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: var(--color-primary);
    border: 1px solid var(--color-primary); /* Делаем границу тоньше для элегантности */
    animation: pulse-glow 2.5s infinite;
    cursor: pointer;

    /* Плавное появление */
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.3s ease;
}

/* Улучшаем эффект при наведении */
#whats-new-btn-desktop:hover,
#whats-new-btn-mobile:hover {
    transform: scale(1.1); /* Увеличиваем при наведении */
    background-color: rgba(var(--color-primary-rgb), 0.1);
}

/* Индивидуальные стили для кнопки на ПК */
#whats-new-btn-desktop {
    padding: 0;
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
}

/* Индивидуальные стили для плавающей кнопки на мобильных */
#whats-new-btn-mobile {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--bg-element);
    font-size: 1.4rem; /* Немного уменьшили иконку для баланса */
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.5);
}

/* Класс для плавного появления (остается без изменений) */
#whats-new-btn-desktop.visible,
#whats-new-btn-mobile.visible {
    opacity: 1;
    transform: scale(1);
}

/* Анимация свечения (остается без изменений) */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.3); }
    50% { box-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.6); }
    100% { box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.3); }
}
/* --- КОНЕЦ: [ИСПРАВЛЕНИЯ V2] --- */

/* Общий класс для плавного появления (остается без изменений) */
#whats-new-btn-desktop.visible,
#whats-new-btn-mobile.visible {
    opacity: 1;
    transform: scale(1);
}

/* Стили для модального окна (остаются без изменений) */
.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.features-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.features-list i {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-top: 5px;
    width: 30px;
    text-align: center;
}
.features-list h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: var(--text-title);
}
.features-list p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
/* --- КОНЕЦ: [ЗАМЕНЫ] СТИЛЕЙ --- */
/* --- КОНЕЦ: [ЗАМЕНЫ V4] СТИЛЕЙ --- */
/* --- КОНЕЦ: [ЗАМЕНЫ V2] СТИЛЕЙ --- */

/* --- НАЧАЛО: Стили для новой кнопки языка в хедере (ПК) --- */

/* 1. Делаем контейнер гибким для идеального выравнивания */
header #desktop-nav ul {
    display: flex;
    align-items: center;
    gap: 12px; /* Расстояние между кнопками */
}

/* 2. Стиль для самой кнопки-иконки */
header #desktop-nav .btn-icon-only {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: transparent; /* Прозрачный фон по умолчанию */
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: 1.4rem;
    transition: all 0.2s ease;
}

/* 3. Эффект при наведении */
header #desktop-nav .btn-icon-only:hover {
    background-color: var(--bg-element);
    color: var(--text-title);
}

/* --- КОНЕЦ: Стилей для новой кнопки --- */
/* --- КОНЕЦ: НОВЫХ СТИЛЕЙ --- */

/* --- НАЧАЛО: Стили для кнопки "Наверх" --- */

/* --- НАЧАЛО: Стили для кнопки "Наверх" --- */

#scrollToTopBtn {
    /* 1. Позиционирование и внешний вид */
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 999; /* Выше контента, но ниже модальных окон */
    
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Делаем кнопку круглой */
    
    background-color: var(--bg-element);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 1.2rem;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    
    /* 2. Начальное состояние (полностью скрыта) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Слегка сдвинута вниз для анимации "появления" */
    transition: all 0.3s ease-in-out;
}

/* 3. Стиль для видимого состояния (добавляется через JS) */
#scrollToTopBtn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 4. Красивый эффект при наведении */
#scrollToTopBtn:hover {
    background-color: var(--bg-element-hover);
    color: var(--text-title);
    transform: translateY(-3px); /* Эффект "приподнимания" */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* --- НОВОЕ ИСПРАВЛЕНИЕ: Поднимаем кнопку выше на мобильных --- */
@media (max-width: 768px) {
    #scrollToTopBtn {
        /* 65px (высота меню) + 15px (отступ) = 80px */
        bottom: 80px; 
    }
}
/* --- КОНЕЦ: Стилей для кнопки "Наверх" --- */

/* --- КОНЕЦ: Стилей для кнопки "Наверх" --- */

/* --- НАЧАЛО: Код для добавления скролла в превью персонажа --- */
#char-preview-summary,
#char-preview-bio-text {
    /* Это главное правило, которое решает проблему.
       Оно заставляет браузер принудительно разрывать слишком длинные слова. */
    word-break: break-word;
    
    /* Улучшаем читаемость для потенциально длинного текста */
    line-height: 1.6;
    white-space: pre-wrap; /* Это сохранит переносы строк, если вы их ввели в описании */
}

/* Добавляем скроллбар, если текст все равно не помещается по высоте */
#char-preview-summary-container,
#char-preview-bio-container {
    max-height: 250px; /* Максимальная высота блока с текстом */
    overflow-y: auto;  /* Скроллбар появится автоматически, если нужно */
    padding-right: 10px; /* Отступ, чтобы текст не "прилипал" к скроллбару */
}
#char-preview-summary-container {
    /* 1. Устанавливаем максимальную высоту для блока с описанием.
       Подберите значение, которое вам нравится. 200px - хороший старт. */
    max-height: 250px;
    
    /* 2. ГЛАВНОЕ ПРАВИЛО: Добавляем автоматический скроллбар.
       Он появится ТОЛЬКО тогда, когда контент (текст) не будет помещаться
       в заданную максимальную высоту (max-height). */
    overflow-y: auto;
    
    /* 3. Небольшие улучшения для красоты */
    padding-right: 10px; /* Добавляем отступ справа, чтобы текст не "прилипал" к скроллбару */
}

/* --- КОНЕЦ: Кода для добавления скролла --- */

/* --- НАЧАЛО: Стили для AI-тегов в превью мира --- */


.ai-tag i {
    color: var(--text-secondary);
    font-size: 0.9em;
}

.ai-tag span {
    color: var(--text-primary);
}
/* --- КОНЕЦ: Стилей для AI-тегов --- */

/* 1. Применяем стили для переноса длинных слов к тексту в превью мира */
#world-preview-summary {
    word-break: break-word;   /* Разрываем длинные слова */
    white-space: pre-wrap;    /* Сохраняем переносы строк из описания */
}

/* 2. ГЛАВНОЕ: Ограничиваем высоту контейнера и добавляем скролл */
#world-preview-summary-container {
    max-height: 250px;  /* Устанавливаем максимальную высоту, как и у персонажей */
    overflow-y: auto;   /* Добавляем автоматический скроллбар, если текст не помещается */
    padding-right: 10px;/* Добавляем отступ, чтобы текст не "прилипал" к скроллбару */
}
/* --- КОНЕЦ: Кода для добавления скролла --- */

/* --- НАЧАЛО: Код для исправления кликабельности карточек на мобильных --- */
@media (max-width: 768px) {
    .world-card-cai {
        flex-direction: row;
        /* Выравниваем дочерние элементы по высоте, чтобы они занимали всё пространство */
        align-items: stretch; 
        /* Убираем внутренний отступ у всей карточки, чтобы картинка прилегала к краю */
        padding: 0; 
        /* Убираем gap, так как отступ теперь будет у текстового блока */
        gap: 0;
        /* Важно, чтобы скругление углов работало корректно */
        overflow: hidden;
    }

    .world-card-image,
    .world-card-image-placeholder {
        width: 100px; /* Сделаем картинку чуть шире для лучшего вида */
        height: auto;  /* Высота будет растягиваться автоматически */
        flex-shrink: 0;
        object-fit: cover;
        /* Сбрасываем margin и border-radius, так как родительский блок теперь управляет этим */
        margin: 0;
        border-radius: 0;
    }

    .world-card-content {
        /* Возвращаем комфортный отступ только для текстовой части */
        padding: 15px;
        flex-grow: 1; /* Позволяем блоку занять оставшееся место */
    }
}
/* --- КОНЕЦ: СТИЛЕЙ ДЛЯ НОВЫХ КНОПОК --- */
/* --- НАЧАЛО: Код для адаптации модального окна подписки --- */

@media (max-width: 768px) {
    
    /* 1. Нацеливаемся на контент именно этого модального окна */
    #subscription-info-modal .modal-content {
        
        /* 2. Ограничиваем максимальную высоту окна. 
              85vh означает, что оно займет не более 85% от высоты экрана,
              оставляя небольшие отступы сверху и снизу. */
        max-height: 85vh;
        
        /* 3. ГЛАВНОЕ: Включаем вертикальный скроллбар.
              'auto' означает, что он появится ТОЛЬКО тогда, 
              когда контент действительно не помещается в заданную высоту. */
        overflow-y: auto;
        
        /* 4. (Опционально) Слегка уменьшаем отступы для большего простора */
        padding: 25px 20px;
    }
}

/* --- КОНЕЦ: Кода для адаптации модального окна --- */

@media (min-width: 769px) { 
    
    #edit-universe-modal .modal-content { 
        /* 1. Ограничиваем максимальную высоту окна. 
           80vh означает, что оно займет не более 80% от высоты экрана. */ 
        max-height: 80vh; 
        
        /* 2. Включаем вертикальный скроллбар. 
           'auto' означает, что он появится, ТОЛЬКО если контент не помещается. */ 
        overflow-y: auto; 
        
        /* 3. Гарантируем, что внутренний контейнер сможет правильно скроллиться. */ 
        display: flex; 
        flex-direction: column; 
    } 

    #edit-universe-modal .modal-content form { 
        /* Позволяет форме растягиваться и корректно скроллиться */ 
        flex-grow: 1; 
    } 
} 

/* --- НАЧАЛО: Код для редизайна кнопки "Действия" на карточках --- */ 

/* 1. Добавляем позиционирование к родительской карточке */ 
#my-universes-list .world-card-cai { 
    position: relative; 
} 

/* 2. Стиль для новой кнопки "Действия" */ 
.world-card-actions-btn { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    z-index: 3; /* Поверх остальных элементов */ 

    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 40px; 
    height: 40px; 
    
    background-color: rgba(13, 13, 27, 0.7); /* Полупрозрачный фон */ 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px); 
    
    border: 1px solid var(--border-color); 
    border-radius: 50%; /* Делаем кнопку круглой */ 
    color: var(--text-secondary); 
    font-size: 1.1rem; 
    cursor: pointer; 
    transition: all 0.2s ease-out; 
} 

/* 3. Эффект при наведении */ 
.world-card-actions-btn:hover { 
    background-color: var(--bg-element-hover); 
    color: var(--text-title); 
    border-color: var(--text-primary); 
    transform: scale(1.1); /* Слегка увеличиваем */ 
} 

/* --- КОНЕЦ: Кода для редизайна кнопки --- */

/* --- НАЧАЛО: Стили для списка обновлений в превью мира --- */

.update-item {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color-light);
}
.update-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.update-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.update-version {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-title);
    font-family: var(--font-headings);
}

.update-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.update-notes {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap; /* Сохраняет переносы строк из текста обновления */
    word-break: break-word; /* Переносит длинные слова */
    margin: 0;
}

.update-notes p {
    margin: 0 0 0.5rem 0; /* Добавляем отступы между параграфами в описании */
}
.update-notes p:last-child {
    margin-bottom: 0;
}
/* --- НАЧАЛО: Стили для списка обновлений в превью мира --- */
.update-item {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color-light);
}
.update-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.update-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.update-version {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-title);
    font-family: var(--font-headings);
}
.update-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.update-notes {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap; /* Сохраняет переносы строк из текста обновления */
    word-break: break-word; /* Переносит длинные слова */
    margin: 0;
}
/* --- КОНЕЦ: Стилей для списка обновлений --- */
/* --- НАЧАЛО: Премиальный дизайн для блока управления обновлениями --- */

/* 1. Общий контейнер для секции обновлений */
.updates-management-section {
    margin-top: 1.5rem;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.2); /* Легкий фон для выделения */
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color-light);
}

/* 2. Заголовки секций */
.updates-management-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color-light);
    padding-bottom: 0.75rem;
}

/* 3. Контейнер для списка существующих обновлений */
#existing-updates-list {
    background-color: transparent; /* Убираем лишний фон, так как он есть у родителя */
    padding: 0;
    margin-bottom: 1.5rem; /* Отступ после списка */
    max-height: 180px; /* Немного увеличим высоту */
    overflow-y: auto;
}
/* Стили для самих .update-item остаются без изменений, они уже красивые */

/* 4. Сетка для полей ввода "Версия" и "Описание" */
.new-update-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две колонки */
    gap: 15px;
    margin-bottom: 1rem;
}

/* 5. Стиль для кнопки "Опубликовать" */
#publish-update-btn {
    width: 100%;
    font-weight: 600;
    /* Применяем стиль вторичной кнопки из вашей палитры */
    background-color: var(--bg-element-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
#publish-update-btn:hover:not(:disabled) {
    background-color: var(--bg-element);
    border-color: var(--color-secondary);
}

/* 6. Адаптивность для мобильных устройств */
@media (max-width: 600px) {
    .new-update-form-grid {
        grid-template-columns: 1fr; /* Одна колонка на мобильных */
    }
    .updates-management-section {
        padding: 15px; /* Уменьшаем отступы */
    }
}
/* --- КОНЕЦ: Дизайна для блока обновлений --- */
/* --- НАЧАЛО: Код для редизайна кнопки "Действия" на карточках --- */

/* 1. Добавляем позиционирование к родительской карточке */
#my-universes-list .world-card-cai {
    position: relative;
}

/* 2. Стиль для новой кнопки "Действия" */
.world-card-actions-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3; /* Поверх остальных элементов */

    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    
    background-color: rgba(13, 13, 27, 0.7); /* Полупрозрачный фон */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    border: 1px solid var(--border-color);
    border-radius: 50%; /* Делаем кнопку круглой */
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease-out;
}

/* 3. Эффект при наведении */
.world-card-actions-btn:hover {
    background-color: var(--bg-element-hover);
    color: var(--text-title);
    border-color: var(--text-primary);
    transform: scale(1.1); /* Слегка увеличиваем */
}
/* --- КОНЕЦ: Кода для редизайна кнопки --- */
#create-universe-modal .modal-content,
#edit-universe-modal .modal-content,
#edit-character-modal .modal-content {
    
    /* Ограничиваем максимальную высоту окна. 85vh означает, что оно займет 
       не более 85% от высоты экрана, оставляя красивые отступы сверху и снизу. */
    max-height: 85vh;
    
    /* ГЛАВНОЕ: Включаем вертикальный скроллбар. 
       'auto' означает, что он появится ТОЛЬКО тогда, когда контент 
       (форма, поля ввода) действительно не помещается в заданную высоту. */
    overflow-y: auto;
    
    /* Эти стили помогают скроллу работать корректно внутри flex-контейнера */
    display: flex;
    flex-direction: column;
}

/* 2. Гарантируем, что сама форма внутри модального окна сможет растягиваться */
#create-universe-modal .modal-content form,
#edit-universe-modal .modal-content form,
#edit-character-modal .modal-content form {
    flex-grow: 1; /* Позволяет форме занимать все доступное пространство и правильно скроллиться */
}

/* --- КОНЕЦ: Стилей для списка обновлений --- */

/* --- НАЧАЛО: Адаптивность модального окна создания миров --- */
@media (max-width: 768px) {
    #create-universe-modal .modal-content,
    #edit-universe-modal .modal-content {
        max-height: 85vh; /* Ограничиваем высоту */
        overflow-y: auto;   /* Включаем скроллбар, если контент не помещается */
    }

    #create-universe-modal .modal-content form,
    #edit-universe-modal .modal-content form {
        flex-grow: 1; /* Помогает скроллу работать корректно */
    }
}
@media (max-width: 600px) {

    /* 1. Адаптируем само модальное окно */
    #create-universe-modal .modal-content,
    #edit-universe-modal .modal-content {
        width: calc(100% - 20px); /* Занимает всю ширину с небольшими отступами */
        padding: 20px 15px;      /* Уменьшаем внутренние отступы */
        max-height: 90vh;        /* Убедимся, что окно не выходит за пределы экрана по высоте */
    }

    /* 2. Переключатель "Игра / Персонаж" делаем компактнее */
    .creation-mode-toggle label {
        padding: 8px 10px;
        font-size: 0.9rem;
    }

    /* 3. ГЛАВНОЕ: Сетку из двух колонок превращаем в одну */
    .form-grid-2col {
        grid-template-columns: 1fr; /* Теперь элементы будут друг под другом */
    }

    /* 4. Блок "Видимость / Модель AI" также ставим друг под другом */
    .form-subgroup {
        flex-direction: column; /* Меняем направление с горизонтального на вертикальное */
        align-items: stretch;   /* Растягиваем дочерние элементы на всю ширину */
        gap: 0;
    }
    
    .form-subgroup .form-group {
         margin-bottom: 1.5rem; /* Возвращаем стандартный отступ, который был у других полей */
    }
    .form-subgroup .form-group:last-child {
        margin-bottom: 0; /* Убираем отступ у последнего элемента */
    }
}
/* --- КОНЕЦ: Адаптивности модального окна --- */

/* --- НАЧАЛО: Код для добавления скролла в превью мира (ИСПРАВЛЕНО) --- */

/* 1. Применяем стили для переноса длинных слов к обоим текстовым блокам */
#world-preview-summary,
#world-preview-bio-text {
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.6; /* Улучшаем читаемость */
}

/* 2. ГЛАВНОЕ: Ограничиваем высоту и добавляем скролл к обоим контейнерам */
#world-preview-summary-container,
#world-preview-bio-container {
    max-height: 250px;  /* Максимальная высота блока с текстом */
    overflow-y: auto;   /* Скроллбар появится автоматически, если нужно */
    padding-right: 10px;/* Отступ, чтобы текст не "прилипал" к скроллбару */
}
/* --- КОНЕЦ: Кода для добавления скролла --- */

/* 1. Внешняя обертка, которая скрывает скроллбар */
/* index.html (<style>) */

/* --- НАЧАЛО: СТИЛИ ДЛЯ ГОРИЗОНТАЛЬНОГО СКРОЛЛА С КНОПКАМИ (V3) --- */

/* 1. Обертка: она нужна для позиционирования кнопок */
.horizontal-scroll-wrapper {
    position: relative;
}

/* 2. Контейнер с карточками, который будет скроллиться */
.horizontal-scroll-grid {
    display: flex; /* Используем flex, чтобы элементы выстроились в ряд */
    overflow-x: auto; /* Включаем горизонтальный скролл */
    gap: 20px;
    
    /* Добавляем отступы, чтобы крайние карточки не прилипали к краям */
    padding: 10px 0 20px 0;
    
    /* Плавная прокрутка */
    scroll-behavior: smooth;
    
    /* Скрываем стандартный скроллбар */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}
.horizontal-scroll-grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* 3. Стиль для самих карточек внутри скролла */
.horizontal-scroll-grid .world-card-cai {
    /* 
     * ИЗМЕНЕНИЕ: Вместо фиксированной ширины, используем относительную.
     * calc(25% - 15px) - это та же логика, что и у основной сетки.
     * 25% = 4 карточки в ряд. 15px - это 3/4 отступа (gap) между ними.
     * Это гарантирует, что карточки будут одинаковой ширины.
    */
    flex: 0 0 calc(25% - 15px);
    width: calc(25% - 15px);
    min-width: 300px; /* Сохраняем минимальную ширину для адаптивности */
}

/* 4. Стиль для кнопок-стрелок */
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(20, 20, 20, 0.7); /* Полупрозрачный фон */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    
    /* По умолчанию скрыты и появляются при наведении */
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

/* 5. Показываем стрелки при наведении на всю обертку */
.horizontal-scroll-wrapper:hover .scroll-arrow {
    opacity: 1;
    visibility: visible;
}

/* 6. Позиционирование стрелок */
.scroll-arrow.prev-arrow { left: 15px; }
.scroll-arrow.next-arrow { right: 15px; }

/* 7. Эффект при наведении на саму стрелку */
.scroll-arrow:hover {
    background-color: rgba(40, 40, 40, 0.9);
    transform: translateY(-50%) scale(1.05);
}

/* 8. Стиль для неактивной (заблокированной) стрелки */
.scroll-arrow[disabled] {
    opacity: 0 !important; /* Полностью скрываем, если она не нужна */
    cursor: not-allowed;
    pointer-events: none;
}
/* --- КОНЕЦ: СТИЛЕЙ --- */

.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    
    font-family: var(--font-headings); /* Используем ваш фирменный шрифт Orbitron */
    font-size: 1.6rem; /* Делаем шрифт чуть крупнее */
    font-weight: 700;
    color: var(--text-title);
    
    margin: 0 0 1.5rem 0; /* Отступ снизу */
    padding-bottom: 0.75rem; /* Отступ для нижней линии */
    border-bottom: 1px solid var(--border-color); /* Добавляем линию-разделитель */
    
    /* Легкая тень для текста, чтобы он выделялся */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.section-title i {
    font-size: 1.4rem; /* Размер иконки */
    
    /* Создаем градиентный цвет для иконки */
    background: linear-gradient(45deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Добавляем эффект свечения */
    filter: drop-shadow(0 0 8px rgba(var(--color-primary-rgb), 0.5));
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.4rem; /* Уменьшаем размер на мобильных */
    }
}

/* --- НАЧАЛО: [ИСПРАВЛЕННАЯ ВЕРСИЯ] Код для редизайна и перемещения сортировки --- */
/* --- НАЧАЛО: [ФИНАЛЬНАЯ ВЕРСИЯ] Код для сортировки на одной линии (ПК + Мобильные) --- */

/* 1. Общая обертка для сортировки и поиска */
.search-and-sort-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
}

/* 2. Поле поиска растягивается */
.universe-search-container {
    flex-grow: 1;
    position: relative;
}

/* 3. Контейнер для сортировки (ПК) */
.universe-sort-container {
    display: flex; /* Выравниваем элементы внутри */
    align-items: center;
}

/* 4. Скрываем мобильную кнопку-иконку на ПК */
#mobile-sort-trigger {
    display: none;
}

/* 5. Премиальный дизайн для выпадающего списка (select) */
#universe-sort-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-color: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0 35px 0 15px;
    height: 44px;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23AAAAAA' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
#universe-sort-select:hover { color: var(--text-primary); border-color: var(--text-primary); }
#universe-sort-select:focus { outline: none; border-color: var(--color-primary); }

/* 6. Адаптивность для мобильных устройств (экраны до 768px) - ГЛАВНОЕ ИСПРАВЛЕНИЕ */
@media (max-width: 768px) {
    /* 1. Родительский контейнер для позиционирования */
    .universe-sort-container {
        position: relative; /* Обязательно для наложения элементов */
        width: 40px;
        height: 40px;
        flex-shrink: 0; /* Запрещаем контейнеру сжиматься */
    }

    /* 2. Иконка-фильтр (теперь это просто картинка на фоне) */
    .mobile-sort-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--text-secondary);
        font-size: 1rem;
        z-index: 1; /* Находится под элементом select */
        pointer-events: none; /* Не мешает кликать сквозь себя */
    }

    /* 3. Сам выпадающий список <select> (самое главное) */
    .universe-sort-container #universe-sort-select {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        opacity: 0; /* Делаем его ПОЛНОСТЬЮ прозрачным */
        z-index: 2; /* Накладываем его поверх иконки */
        cursor: pointer;
        
        /* Сбрасываем лишние стили, чтобы он не был виден */
        border: none;
        background: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
}
/* --- КОНЕЦ: [ФИНАЛЬНОЙ ВЕРСИИ] --- */
/* --- КОНЕЦ: [ИСПРАВЛЕННОЙ ВЕРСИИ] --- */
/* --- НАЧАЛО: Код для центрирования профиля на ПК --- */

/* Применяем стили только для экранов шире 1024px */
@media (min-width: 1025px) {

    /* 1. Центрируем блок с аватаром */
    .avatar-and-actions {
        justify-content: center; /* Выравнивает аватар по горизонтали */
    }

    /* 2. Центрируем весь текстовый блок под аватаром */
    .profile-main-info {
        text-align: center; /* Выравнивает весь текст по центру */
    }

    /* 3. Центрируем никнейм и кнопку редактирования внутри их контейнера */
    #nickname-display-area {
        justify-content: center; /* Выравнивает ник и карандаш */
    }
    
    /* 4. Центрируем блок статистики */
    .profile-stats {
        justify-content: center; /* Выравнивает "Творений" и "Приглашено" */
    }
}
/* --- КОНЕЦ: Кода для центрирования --- */
/* --- НАЧАЛО: СТИЛИ ДЛЯ НИЖНЕЙ ПАНЕЛИ НАВИГАЦИИ (МОБИЛЬНАЯ ВЕРСИЯ) --- */

/* --- НАЧАЛО: СТИЛИ ДЛЯ НИЖНЕЙ ПАНЕЛИ НАВИГАЦИИ (МОБИЛЬНАЯ ВЕРСИЯ) --- */

/* --- НАЧАЛО: ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ НИЖНЕЙ ПАНЕЛИ НАВИГАЦИИ --- */

#mobile-bottom-nav {
    display: none; /* По умолчанию скрыта */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px; /* Основная высота для иконок */
    
    /* === ГЛАВНОЕ ИСПРАВЛЕНИЕ === */
    /* Добавляем внутренний отступ снизу, равный высоте "безопасной зоны".
       Фон панели автоматически растянется на эту область. */
    padding-bottom: env(safe-area-inset-bottom);
    
    background-color: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: none; /* <<-- ВОТ ИСПРАВЛЕНИЕ: Убираем верхнюю границу */
    
    z-index: 950;
}

/* Применяем стили только на мобильных устройствах */
@media (max-width: 768px) {
    #mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    /* Отступ для контента теперь учитывает и высоту панели, и безопасную зону */
    body {
        padding-bottom: calc(65px + env(safe-area-inset-bottom));
    }
    main { padding-bottom: 0; }
}

/* Стили для самих кнопок (остаются без изменений) */
#mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-grow: 1;
    color: var(--text-secondary);
    font-size: 0.7rem; 
    text-decoration: none;
    transition: color 0.2s ease;
}

#mobile-bottom-nav .nav-item i {
    font-size: 1.4rem;
}

#mobile-bottom-nav .nav-item.active-link {
    color: var(--text-primary);
}

#mobile-bottom-nav .nav-item:hover {
    color: var(--text-primary);
}


/* --- КОНЕЦ: ФИНАЛЬНОГО ИСПРАВЛЕНИЯ --- */

#mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-grow: 1;
    color: var(--text-secondary);
    font-size: 0.7rem; /* Маленький шрифт для подписи */
    text-decoration: none;
    transition: color 0.2s ease;
}

#mobile-bottom-nav .nav-item i {
    font-size: 1.4rem; /* Размер иконки */
}

/* Стиль для активной кнопки */
#mobile-bottom-nav .nav-item.active-link {
    color: var(--text-primary); /* Яркий цвет для активной иконки */
}

#mobile-bottom-nav .nav-item:hover {
    color: var(--text-primary);
}
/* --- НАЧАЛО: Отступ для кнопки "Загрузить ещё" на мобильных --- */

@media (max-width: 768px) {
    #load-more-public-universes-container {
        /* Добавляем отступ снизу, чтобы кнопка не прилипала к футеру */
        margin-bottom: 30px;
    }
}

/* --- КОНЕЦ: Отступа --- */
/* --- КОНЕЦ: СТИЛЕЙ ДЛЯ НИЖНЕЙ ПАНЕЛИ НАВИГАЦИИ --- */
@media (max-width: 768px) {
    /* 1. Ставим блоки (фильтры и поиск) друг под другом */
    .universe-filters-and-search {
        flex-direction: column;
        align-items: stretch; /* Растягиваем их на всю ширину */
        gap: 15px; /* Добавляем отступ между ними */
    }

    /* 2. Гарантируем, что блок с кнопками-фильтрами займет всю ширину */
    .universe-category-filters {
        width: 100%;
        display: flex;
        justify-content: center; /* Центрируем сами кнопки */
    }

    /* 3. Гарантируем, что обертка для поиска и сортировки тоже будет на всю ширину */
    .search-and-sort-wrapper {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .universe-sort-container,
    #mobile-sort-trigger {
        display: flex !important; /* !important гарантирует, что этот стиль перебьет любой другой, который скрывает иконку */
    }
      #mobile-sort-trigger {
        display: flex; /* или 'block' */
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: var(--bg-element);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        color: var(--text-secondary);
        font-size: 1rem;
        cursor: pointer;
    }
}

.universe-sort-container.sort-hidden {
    visibility: hidden;
    pointer-events: none; /* Делает невидимый элемент некликабельным */
}
/* --- НАЧАЛО: Стили для компактной панели и скрытия рекомендаций --- */

/* Новый класс для компактного вида панели на мобильных */

/* --- КОНЕЦ: Новых стилей --- */
@media (max-width: 768px) {
    #my-universes-list-container {
        /* Добавляем отступ снизу, чтобы карточки не прилипали к нижней панели навигации или подвалу */
        margin-bottom: 30px;
    }
}

@keyframes nudge-animation {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-20px); /* Сдвигаем влево на 20px */
    }
}

/* Применяем стили только для мобильных устройств */
@media (max-width: 768px) {
    
    /* 2. Задаем правильную, адаптивную ширину для карточек в скроллере.
       Теперь они будут занимать почти всю ширину экрана, оставляя "зацепку" для скролла. */
    .horizontal-scroll-grid .world-card-cai {
        flex: 0 0 85%; /* Ширина карточки - 85% от ширины контейнера */
        width: 85%;
        min-width: 0; /* Сбрасываем минимальную ширину с ПК */
    }
    
    /* 3. Полностью скрываем кнопки-стрелки на мобильных */
    .horizontal-scroll-wrapper .scroll-arrow {
        display: none !important;
    }
    
    /* 4. Применяем анимацию к первой карточке в списке.
       Она сработает один раз через 2 секунды после загрузки страницы. */
    .horizontal-scroll-grid .world-card-cai:first-child {
        animation: nudge-animation 1.5s ease-in-out 2s 1;
    }
}


/* style.css */

/*
/* style.css (Внутри секции HALLOWEEN EVENT STYLES) */

/* ЗАМЕНИТЬ СТАРЫЕ СТИЛИ НА ЭТИ */

/* 2.1 Новые стили для навигации в футере, чтобы тыква встала в ряд */
.footer-legal-links {
    display: flex;       /* Включаем Flexbox, чтобы выровнять элементы в строку */
    align-items: center; /* Выравниваем тыкву и ссылки по центру по вертикали */
    flex-wrap: wrap;     /* Позволяем переноситься на новую строку на маленьких экранах */
}

/* 2.2 Исправленные стили для самой тыквы */
#halloween-pumpkin {
    position: relative;
    font-size: 2rem; /* Слегка уменьшил для лучшего выравнивания */
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    margin-right: 1rem; /* Отступ справа, чтобы не прилипать к ссылкам */
    line-height: 1; /* Помогает идеально выровнять эмодзи */
}
#halloween-pumpkin:hover {
    transform: scale(1.1) rotate(10deg);
}
#halloween-pumpkin::after {
    content: "Бу!";
    position: absolute;
    bottom: 100%;
    left: 50%;
    background: #ff6600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    transform-origin: bottom center;
}
#halloween-pumpkin:active::after {
    opacity: 1;
    visibility: visible;
    /* Добавляем наклон и небольшой "подскок" */
    transform: translateX(-50%) translateY(-5px) rotate(-10deg); 
}



/* --- (Остальные стили Хэллоуина остаются без изменений) --- */
/* style.css */

/*
==============================================
--- HALLOWEEN EVENT STYLES ---
==============================================
*/

/* 1. По умолчанию все элементы темы скрыты */
#halloween-ghost-container,
#halloween-pumpkin,
main::before, 
main::after {
    display: none;
    opacity: 0;
}

/* 2. Анимация для призраков */
@keyframes floatGhost {
    0% {
        transform: translateY(5vh) translateX(0) rotate(-10deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-110vh) translateX(20px) rotate(15deg);
        opacity: 0;
    }
}

/* 3. Стили призраков (контейнер и сами призраки) */
#halloween-ghost-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* За фоном, но над частицами */
    pointer-events: none;
    overflow: hidden;
}

.ghost {
    position: absolute;
    bottom: -150px; /* Начинают движение из-за пределов экрана */
    width: 80px;
    height: 120px;
    background: radial-gradient(circle, rgba(255,255,255,0.2), rgba(220,220,255,0.1));
    border-radius: 50% 50% 0 0;
    animation: floatGhost 15s infinite linear;
    filter: blur(2px);
}
.ghost::before, .ghost::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    background: #1a1a2e;
    border-radius: 50%;
}
.ghost::before { left: 25px; }
.ghost::after { right: 25px; }

/* Позиционирование и задержки для разных призраков */
.ghost:nth-child(1) { left: 10%; animation-duration: 18s; transform: scale(0.7); }
.ghost:nth-child(2) { left: 45%; animation-duration: 15s; animation-delay: 5s; }
.ghost:nth-child(3) { left: 80%; animation-duration: 22s; animation-delay: 10s; transform: scale(0.8); }

/* 4. Кликабельная тыква в футере */
#halloween-pumpkin {
    position: relative;
    font-size: 2.5rem;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    margin-top: 10px;
}
#halloween-pumpkin:hover {
    transform: scale(1.1) rotate(10deg);
}
#halloween-pumpkin::after {
    content: "Бу!";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #ff6600;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}
#halloween-pumpkin:active::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* 5. ГЛАВНЫЙ ПЕРЕКЛЮЧАТЕЛЬ: Активируем все, когда на body есть класс */
body.halloween-theme-active {
    /* 5.1 Новая цветовая схема */
    --color-primary: #ff6600;
    --color-primary-rgb: 255, 102, 0;
    --color-accent: #ff8c00;
    --border-color: rgba(255, 102, 0, 0.2);
    --border-color-light: rgba(255, 102, 0, 0.1);
}

body.halloween-theme-active #halloween-ghost-container,
body.halloween-theme-active #halloween-pumpkin {
    display: block; /* Показываем призраков и тыкву */
    opacity: 1;
}

/* 5.2 Паутина в углах */
body.halloween-theme-active main::before,
body.halloween-theme-active main::after {
    content: '';
    display: block;
    position: fixed; /* фиксируем относительно экрана */
    z-index: 900; /* над фоном, но под контентом */
    width: 200px;
    height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 V100 M0 50 H100 M10 10 L90 90 M10 90 L90 10' stroke='rgba(255,102,0,0.15)' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='10' fill='none' stroke='rgba(255,102,0,0.15)' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='20' fill='none' stroke='rgba(255,102,0,0.15)' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='rgba(255,102,0,0.15)' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(255,102,0,0.15)' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='50' fill='none' stroke='rgba(255,102,0,0.15)' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 1;
}
body.halloween-theme-active main::before {
    top: -50px;
    left: -50px;
}
body.halloween-theme-active main::after {
    top: -50px;
    right: -50px;
    transform: scaleX(-1); /* отзеркаливаем для правого угла */
}
body.screamer-active {
    overflow: hidden;
}
/* --- HALLOWEEN PUMPKIN HUNT STYLES --- */

/* Стили для тыкв, которые нужно собрать */
.collectible-pumpkin {
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    display: none; /* По умолчанию скрыты, JS покажет если ивент активен */
}
.collectible-pumpkin:hover {
    transform: scale(1.2);
}

/* Стили для уже собранной тыквы */
.collectible-pumpkin.collected {
    opacity: 0.3;
    transform: scale(0.8);
    cursor: default;
    filter: grayscale(80%);
}

/* Расположение тыквы в хедере */
header .container .collectible-pumpkin {
    margin-left: 15px;
}
/* Расположение тыквы в профиле */
#nickname-display-area .collectible-pumpkin {
    font-size: 1.5rem;
}


/* --- AVATAR FRAME STYLES --- */

/* Контейнер, который будет держать рамку */
.avatar-frame-container {
    position: relative;
    width: 98px; /* Чуть больше, чем сам аватар */
    height: 98px;
    padding: 4px; /* Отступ равен толщине рамки аватара */
}

/* Псевдо-элемент, который и будет рамкой */
.avatar-frame-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none; /* Чтобы не мешал кликать на аватар */
    transition: background-image 0.3s ease;
}

/* Класс для хэллоуинской рамки */
.avatar-frame-container.frame-halloween::before {
    background-image: url('https://i.ibb.co/bX0v5R5/halloween-frame.png'); /* URL вашей рамки */
}

/* Стили для модального окна выбора рамок */
#frame-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 20px;
    max-height: 40vh;
    overflow-y: auto;
    padding: 5px;
}

.frame-option {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 3px;
    border: 2px solid transparent;
    overflow: hidden; /* <-- ВАЖНО: Обрезаем все, что выходит за границы */
}

/* Псевдо-элемент для ФОНА (самой рамки) - ТЕПЕРЬ ОН ВРАЩАЕТСЯ */
.frame-option::before {
    content: '';
    position: absolute;
    /* Делаем элемент больше родителя, чтобы градиент был виден по краям */
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    
    z-index: 1;
}

/* Псевдо-элемент для МИНИ-АВАТАРА поверх рамки (без изменений) */
.frame-option::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    height: 65%;
    border-radius: 50%;
    background-image: url('https://cdn.getmerlin.in/cms/Default_Create_a_playful_and_animated_avatar_of_a_cute_cat_wit_0_8a46c40439.jpg');
    background-size: cover;
    z-index: 2;
    border: 1px solid rgba(0,0,0,0.2);
}

/* --- Стили для конкретных рамок --- */

/* 1. Опция "Без рамки" */
.frame-option[data-frame-id="none"]::before {
    background-color: var(--bg-element);
}

/* 2. Анимированная рамка Хэллоуин */
.frame-option[data-frame-id="animated-halloween"]::before {
    background: conic-gradient(from 0deg, #ff6600, #8a4af3, #ff8c00, #ff6600);
}

/* Применяем анимацию вращения ТОЛЬКО если у рамки НЕТ класса .locked */
.frame-option:not(.locked)[data-frame-id="animated-halloween"]::before {
    animation: spin-gradient 4s linear infinite;
}

/* --- Состояния (hover, selected, locked) --- остаются без изменений */
.frame-option:hover {
    border-color: var(--text-secondary);
}
.frame-option.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.5);
}
.frame-option.locked {
    filter: grayscale(80%) brightness(0.7);
    cursor: not-allowed;
}
.frame-option.locked::after {
    content: '\f023';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: 8px; right: 8px;
    color: white;
    background: rgba(0,0,0,0.7);
    padding: 5px 7px;
    font-size: 0.9rem;
    border-radius: 50%;
    z-index: 3;
}

/* Псевдо-элемент для МИНИ-АВАТАРА поверх рамки */
.frame-option::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%; /* Размер мини-аватара */
    height: 65%;
    border-radius: 50%;
    background-image: url('https://cdn.getmerlin.in/cms/Default_Create_a_playful_and_animated_avatar_of_a_cute_cat_wit_0_8a46c40439.jpg'); /* Дефолтный аватар для превью */
    background-size: cover;
    z-index: 2;
    border: 1px solid rgba(0,0,0,0.2); /* Тонкая тень на аватаре */
}

/* --- Стили для конкретных рамок --- */

/* 1. Опция "Без рамки" */
.frame-option[data-frame-id="none"]::before {
    background-color: var(--bg-element); /* Просто темный фон */
}

/* 2. Статичная рамка Хэллоуин */
.frame-option[data-frame-id="animated-halloween"]::before {
    /* Градиент будет виден, даже если рамка заблокирована (в сером цвете) */
    background: conic-gradient(from 0deg, #ff6600, #8a4af3, #ff8c00, #ff6600);
}

/* Применяем анимацию вращения ТОЛЬКО если у рамки НЕТ класса .locked */
.frame-option:not(.locked)[data-frame-id="animated-halloween"]::before {
    animation: spin-gradient 4s linear infinite;
}

/* --- Состояния --- */

.frame-option:hover {
    border-color: var(--text-secondary);
}

.frame-option.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.5);
}

.frame-option.locked {
    filter: grayscale(80%) brightness(0.7);
    cursor: not-allowed;
}

.frame-option.locked::after {
    content: '\f023'; /* Иконка замка Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: 8px; right: 8px; /* Позиция замка */
    color: white;
    background: rgba(0,0,0,0.7);
    padding: 5px 7px;
    font-size: 0.9rem;
    border-radius: 50%;
    z-index: 3; /* Поверх всего */
}
.frame-option:hover {
    border-color: var(--text-primary);
    transform: scale(1.05);
}
.frame-option.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.5);
}
/* Иконка "замочка" для заблокированных рамок */
.frame-option.locked::after {
    content: '\f023'; /* Иконка замка Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: white;
    background: rgba(0,0,0,0.6);
    padding: 4px 6px;
    font-size: 0.8rem;
    border-radius: 5px;
}

/* --- СТИЛИ ДЛЯ КНОПКИ СМЕНЫ РАМКИ АВАТАРА --- */

/* 1. Позиционируем родительский контейнер, чтобы кнопка была внутри него */
.avatar-frame-container {
    position: relative;
    /* Убедимся, что размеры не ломаются */
    display: inline-block;
    width: 98px;
    height: 98px;
}

/* 2. Стиль для самой кнопки */
#open-frame-selection-modal-btn {
    position: absolute;
    bottom: 4px; /* Отступ от нижнего края */
    right: 4px;  /* Отступ от правого края */
    z-index: 10; /* Поверх аватара и рамки */
    
    /* Делаем кнопку маленькой и круглой */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0; /* Убираем лишние отступы */
    
    /* Центрируем иконку */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem; /* Размер иконки */
    
    /* Визуальный стиль */
    background-color: var(--bg-element);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: all 0.2s ease-out;
}

/* 3. Эффект при наведении */
#open-frame-selection-modal-btn:hover {
    transform: scale(1.1);
    background-color: var(--bg-element-hover);
    border-color: var(--text-primary);
}

/* --- HALLOWEEN ANIMATED FRAME STYLES --- */

/* 1. Создаем саму анимацию вращения градиента */
@keyframes spin-gradient {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.avatar-frame-container.frame-animated-halloween::before {
    /* Убираем статичную картинку */
    background-image: none;
    
    /* Создаем красивый конический градиент в цветах Хэллоуина */
    background: conic-gradient(
        from 0deg,
        #ff6600, /* Яркий оранжевый */
        #8a4af3, /* Фиолетовый из вашей палитры */
        #ff8c00, /* Темный оранжевый */
        #ff6600  /* Возвращаемся к начальному цвету для плавного цикла */
    );
    
    /* Запускаем бесконечную анимацию вращения */
    animation: spin-gradient 4s linear infinite;
    will-change: transform; /* Оптимизация для анимации */
}

/* 3. Гарантируем, что основной контейнер рамки будет "обрезать" анимацию по кругу */
.avatar-frame-container {
    border-radius: 50%;
    overflow: hidden;
}

/* 4. Убедимся, что псевдо-элемент рамки находится ЗА аватаром */
.avatar-frame-container::before {
    z-index: -1; /* Помещает рамку за основной контент контейнера */
}
.account-avatar-wrapper {
    position: relative; /* Делает z-index рабочим для аватара */
    z-index: 1;
}

/* --- HALLOWEEN SCREAMER STYLES --- */
/* --- HALLOWEEN SCREAMER STYLES (ИСПРАВЛЕНО) --- */
#screamer-overlay {
    position: fixed;
    inset: 0;
    overflow: hidden; /* Это важно: обрезает всё, что пытается "вылезти" */
    z-index: 99999;
    background-color: #000;
    
    /* Свойства display: flex убраны */
    
    opacity: 0;
    transition: opacity 0.2s ease;
    display: none;
    pointer-events: none; /* Дополнительная защита, чтобы оверлей не мешал */
}

#screamer-overlay.visible {
    display: block; /* Вместо flex теперь block */
    opacity: 1;
    pointer-events: auto;
}

#screamer-gif {
    /* --- ГЛАВНОЕ ИСПРАВЛЕНИЕ --- */
    /* Мы позиционируем гифку абсолютно внутри оверлея,
       заставляя ее растянуться на 100% его размера,
       игнорируя свои собственные исходные габариты. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
}
/* =============== NEW HALLOWEEN THEME ENHANCEMENTS =============== */

/* Эти стили применяются, только когда на body есть класс .halloween-theme-active */
body.halloween-theme-active {

    /* --- 1. Тематические модальные окна (Покупки, Создания и др.) --- */
    .modal-content {
        border-color: rgba(255, 102, 0, 0.4);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(255, 102, 0, 0.2);
    }

    .modal-content h3 {
        text-shadow: 0 0 8px rgba(255, 102, 0, 0.5);
    }
    
    .modal-content h3 i.fa-coins { /* Иконка в окне покупки */
        color: #ff8c00;
    }

    /* --- 2. Тематические основные кнопки --- */
    .btn-primary {
        background: linear-gradient(145deg, #e65c00, #ff6600);
        border-color: #ff8c00;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        box-shadow: 0 4px 15px rgba(255, 102, 0, 0.25);
    }
    
    .btn-primary:hover:not(:disabled) {
        background: linear-gradient(145deg, #ff6600, #e65c00);
        border-color: #ffaf4d;
        box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4);
    }
    
    /* --- 3. Жуткое свечение для карточек при наведении --- */
    .world-card-cai:hover {
        border-color: rgba(255, 102, 0, 0.5);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 102, 0, 0.2);
    }
    
    /* --- 4. Жуткая тень для заголовков секций --- */
    .section-title span {
        text-shadow: 0 0 10px rgba(255, 102, 0, 0.4);
    }
    
    /* --- 5. Оранжевое свечение для активных полей ввода --- */
    input:focus, textarea:focus, select:focus {
        border-color: var(--color-primary); /* Становится оранжевым из-за темы */
        box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.4);
    }
    
    /* --- 6. Скроллбар в стиле Хэллоуина --- */
    ::-webkit-scrollbar-thumb {
        background-color: #D2691E; /* Тыквенно-оранжевый цвет */
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background-color: #ff6600; /* Ярко-оранжевый при наведении */
    }
}

/* --- НОВЫЙ КОД ДЛЯ АДАПТАЦИИ ПАУТИНЫ --- */
/* Адаптируем паутину для мобильных устройств, делая ее меньше и прозрачнее */
@media (max-width: 768px) {
    body.halloween-theme-active main::before,
    body.halloween-theme-active main::after {
        width: 150px;  /* Уменьшаем размер паутины */
        height: 150px;
        opacity: 0.7;  /* Делаем ее более прозрачной */
    }
    body.halloween-theme-active main::before {
        top: -40px;    /* Корректируем положение */
        left: -40px;
    }
    body.halloween-theme-active main::after {
        top: -40px;
        right: -40px;
    }
}

/* --- НОВЫЙ КОД ДЛЯ АДАПТАЦИИ ПРИЗРАКОВ --- */
@media (max-width: 768px) {
    /* Уменьшаем базовый размер всех призраков до 60% от оригинала */
    .ghost {
        transform: scale(0.6);
    }
    /* Дополнительно уменьшаем первого и третьего призрака, чтобы сохранить пропорции */
    .ghost:nth-child(1) {
        transform: scale(0.4);
    }
    .ghost:nth-child(3) {
        transform: scale(0.5);
    }
}

/* =============== NEW HALLOWEEN THEME ENHANCEMENTS =============== */

/* 0. Импортируем жуткий шрифт с Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

/* Эти стили применяются, только когда на body есть класс .halloween-theme-active */
body.halloween-theme-active {

    /* --- 1. Тематические модальные окна (Покупки, Создания и др.) --- */
    .modal-content {
        border-color: rgba(255, 102, 0, 0.4);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(255, 102, 0, 0.2);
    }
    .modal-content h3 {
        text-shadow: 0 0 8px rgba(255, 102, 0, 0.5);
    }
    .modal-content h3 i.fa-coins { /* Иконка в окне покупки */
        color: #ff8c00;
    }

    /* --- 2. Тематические основные кнопки --- */
    .btn-primary {
        background: linear-gradient(145deg, #e65c00, #ff6600);
        border-color: #ff8c00;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        box-shadow: 0 4px 15px rgba(255, 102, 0, 0.25);
    }
    .btn-primary:hover:not(:disabled) {
        background: linear-gradient(145deg, #ff6600, #e65c00);
        border-color: #ffaf4d;
        box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4);
    }
    
    /* --- 3. Жуткое свечение для карточек при наведении --- */
    .world-card-cai:hover {
        border-color: rgba(255, 102, 0, 0.5);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 102, 0, 0.2);
    }
    
    /* --- 4. Жуткая тень для заголовков секций --- */
    .section-title span {
        text-shadow: 0 0 10px rgba(255, 102, 0, 0.4);
    }
    
    /* --- 5. Оранжевое свечение для активных полей ввода --- */
    input:focus, textarea:focus, select:focus {
        border-color: var(--color-primary); /* Становится оранжевым из-за темы */
        box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.4);
    }
    
    /* --- 6. Скроллбар в стиле Хэллоуина --- */
    ::-webkit-scrollbar-thumb {
        background-color: #D2691E; /* Тыквенно-оранжевый цвет */
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color: #ff6600; /* Ярко-оранжевый при наведении */
    }

    /* --- 7. НОВЫЙ ЭФФЕКТ: Затемнение по краям (виньетка) --- */
    &::after {
        content: '';
        position: fixed;
        inset: 0;
        background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.7) 100%);
        pointer-events: none; /* Чтобы не мешало кликать */
        z-index: 999;
    }
    
    /* --- 8. НОВЫЙ ЭФФЕКТ: Жуткий шрифт для лого и заголовков --- */
    .logo, .section-title span, .discover-header h2 {
        font-family: 'Creepster', cursive !important;
        letter-spacing: 2px;
        text-shadow: 0 0 10px rgba(255, 102, 0, 0.6);
    }

    /* --- 9. НОВЫЙ ЭФФЕКТ: Пульсация фонового текста "AI WORLDS" --- */
    &::before {
        animation: halloween-text-glow 5s ease-in-out infinite;
    }
}

/* --- 10. НОВЫЙ ЭФФЕКТ: Анимация тумана --- */
@keyframes fog-scroll {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
#halloween-fog-container {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%; height: 50vh;
    background: linear-gradient(90deg, 
        rgba(138, 74, 243, 0.05) 20%, 
        rgba(255, 102, 0, 0.08) 50%, 
        rgba(138, 74, 243, 0.05) 80%);
    background-size: 200% 100%;
    z-index: -1;
    pointer-events: none;
    animation: fog-scroll 60s linear infinite; /* Увеличил до 60s для снижения частоты обновлений */
    display: none; /* По умолчанию скрыт */
    opacity: 0;
    will-change: background-position; /* Оптимизация */
}
body.halloween-theme-active #halloween-fog-container {
    display: block;
    opacity: 1;
}

/* --- 11. НОВЫЙ ЭФФЕКТ: Летучие мыши --- */
@keyframes fly-across {
    0% { left: -10%; transform: translateY(0) scale(0.8); }
    25% { transform: translateY(-30px) scale(0.9); }
    50% { transform: translateY(0) scale(1); }
    75% { transform: translateY(-20px) scale(0.9); }
    100% { left: 110%; transform: translateY(0) scale(0.8); }
}
#halloween-bats-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 901;
    display: none; /* По умолчанию скрыт */
}
body.halloween-theme-active #halloween-bats-container {
    display: block;
}
.bat {
    position: absolute;
    width: 40px; height: 40px;
    background-image: url('https://pin.it/7kHdwrNpM');
    background-size: contain;
    animation: fly-across 10s linear infinite;
    opacity: 0.7;
}

/* Анимация для пульсации фонового текста */
@keyframes halloween-text-glow {
    0%, 100% { color: rgba(255, 102, 0, 0.02); }
    50% { color: rgba(255, 102, 0, 0.05); }
}

/* --- [НОВЫЙ ДИЗАЙН] Стили для индикатора облачного хранилища --- */

/* 1. Стиль для надписей ("Облачное хранилище" и "0.00 / 20.00 MB") */
#cloud-storage-indicator .stat-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px; /* Увеличиваем отступ до полоски */
    color: var(--text-secondary);
}

/* 2. Контейнер для полосы загрузки (трек) */
#cloud-storage-indicator .stat-bar-container {
    height: 14px; /* Делаем полоску более заметной */
    background-color: rgba(0, 0, 0, 0.4); /* Более темный фон для контраста */
    border-radius: 50px; /* Сильное скругление для формы "капсулы" */
    
    /* Добавляем внутреннюю тень для эффекта глубины */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    
    border: 1px solid rgba(0, 0, 0, 0.2); /* Тонкая темная рамка */
    padding: 2px; /* Небольшой внутренний отступ, чтобы полоса не прилипала к краям */
}

/* 3. Сама полоса загрузки (заполнение) */
#cloud-storage-bar-fill {
    height: 100%;
    border-radius: 50px; /* Такое же скругление, как у контейнера */
    
    /* Красивый градиент вместо сплошного цвета */
    background: linear-gradient(to right, var(--color-secondary), var(--color-accent));
    
    /* Эффект свечения для большей заметности */
    box-shadow: 0 0 8px rgba(45, 237, 243, 0.5);
    
    transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Более плавная анимация */
}

@media (max-width: 768px) {
    #whats-new-modal .modal-content {
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* --- Стили для блока управления ивентами --- */
.event-management-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.event-management-section h4 {
    margin: 0 0 0.5rem 0;
}
.event-management-section input[type="date"] {
    position: relative;
}
/* Для Chrome/Edge/Opera добавляем иконку календаря */
.event-management-section input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    filter: invert(0.5);
}

/* --- НАЧАЛО: Премиальный дизайн для полей ввода даты --- */

/* 1. Основной стиль, как у других полей ввода */
input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--bg-element); /* Темный фон */
    border: 1px solid var(--border-color); /* Стандартная рамка */
    border-radius: var(--border-radius-small);
    color: var(--text-primary); /* Светлый цвет текста */
    padding: 12px 15px;
    font-family: inherit;
    font-size: 1rem;
    cursor: text;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative; /* Необходимо для трюка с плейсхолдером */
}

/* 2. Стиль при фокусе */
input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary); /* Подсветка акцентным цветом */
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
}

/* 3. Улучшение читаемости текста даты */
input[type="date"] {
    color-scheme: dark;
}

/* 4. Стилизация иконки календаря (для Chrome, Edge, Safari) */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    filter: invert(1); /* Делает стандартную черную иконку белой */
    transition: opacity 0.2s, transform 0.2s;
}

/* Эффект при наведении на иконку */
input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
    transform: scale(1.1);
}

/* 5. Трюк для красивого плейсхолдера (необязательно, но рекомендуется) */
/* Позволяет скрыть формат по умолчанию (гггг-мм-дд), пока дата не выбрана */
input[type="date"]::before {
    content: attr(placeholder);
    position: absolute;
    color: var(--text-secondary); /* Цвет плейсхолдера */
    width: calc(100% - 40px); /* Чтобы не налезать на иконку */
}
/* Скрываем плейсхолдер, когда дата выбрана или поле в фокусе */
input[type="date"]:focus::before,
input[type="date"]:valid::before {
    display: none;
}
/* --- КОНЕЦ: Дизайна для полей ввода даты --- */