/* Плавное появление всего контента */
                body {
                    opacity: 0;
                    animation: fadeIn 0.8s ease-out forwards;
                }
        
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
        
                /* Отключаем анимации при уменьшении движения */
                @media (prefers-reduced-motion: reduce) {
                    body {
                        animation: none !important;
                        opacity: 1 !important;
                    }
                }
        
                /* CSS переменные для цветов и эффектов */
                :root {
                    --primary-color: #6e0bec;       /* Основной фиолетовый цвет */
                    --secondary-color: #9c42f5;     /* Вторичный фиолетовый */
                    --accent-color: #e100ff;        /* Акцентный розовый */
                    --dark-color: #1a052e;          /* Темный фон */
                    --light-color: #f8f0ff;         /* Светлый текст */
                    --glass-color: rgba(255, 255, 255, 0.1);        /* Стеклянный эффект */
                    --shadow: 0 8px 32px rgba(31, 38, 135, 0.2);    /* Тень */
                    --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);    /* Тень текста */
                    --gradient-end-color: #2e0854; /* Фиолетовый для тёмной темы */
                    --share-button-color: #f8f0ff; 
                    --card-date-color: #f8f0ff; /* цвет текста в дат в новостях */
                    --theme-circle: #e100ff;
                    --logo-variants-backround: rgb(56,31,80); /* внутренний круг темы */
                    --logo-main-after: #2e0854; /* внешний круг темы */
                }
                
                .glass-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: var(--glass-color); /* Полупрозрачный белый */
                    backdrop-filter: blur(10px); /* Эффект размытия */
                    -webkit-backdrop-filter: blur(5px); /* Для Safari */
                    z-index: 9999; /* Очень высокий z-index чтобы быть поверх всего */
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    pointer-events: auto; /* Разрешаем взаимодействие только с подложкой */
                }
                
                /* Блокируем взаимодействие с контентом под подложкой */
                .glass-overlay ~ * {
                    pointer-events: none; /* Запрещаем взаимодействие с элементами под подложкой */
                }
                
                /* Стили для изображений на подложке */
                .overlay-image {
                    max-width: 900px;
                    max-height: 600px;
                    margin: 20px;
                    border-radius: 10px;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                    pointer-events: auto; /* Разрешаем взаимодействие с изображениями */
                }
                
                /* Пример стилей для контента сайта (для демонстрации) */
                body {
                    font-family: Arial, sans-serif;
                    margin: 0;
                    padding: 20px;
                    background-color: #f0f0f0;
                }
                
                .content {
                    background-color: white;
                    padding: 20px;
                    border-radius: 8px;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                }

                .fas.fa-music{
                    color: rgb(255, 255, 255);
                }


                html, body {
                    height: 100%; 
                    margin: 0; 
                    padding: 0; 
                    display: flex; 
                    flex-direction: column; 
                }
                
                body > .page {
                    flex: 1; /* растягивает основной контент */
                }
        
                #home {
                    flex: 1;
                }
                
        
                #audio-container {
                    visibility: hidden;
                    position: absolute;
                    width: 0;
                    height: 0;
                    overflow: hidden;
                    display: none;  
                }
        
                #radio-stream {
                    position: absolute;
                    left: -9999px;
                    z-index: -9999;
                    clip-path: inset(50%);
                }
        
                /* Сброс стилей и базовые настройки */
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                }

                /* ВОТ ОНО БЛЯТЬ!!!!!!!!!!! */        
                /* Стили для body с градиентным фоном */
                body {
                    background: linear-gradient(135deg, var(--dark-color), #2e0854) no-repeat fixed;
                    background-size: 100% 100%;
                    color: var(--light-color);
                    min-height: 100vh;
                    overflow-x: hidden;
                    position: relative;
                }
        
                /* Яичница элементы */
                .egg-element {
                    position: absolute;
                    border-radius: 50%;
                    filter: blur(30px);     /* Размытие для эффекта свечения */
                    opacity: 0.2;
                    z-index: -1;            /* Помещаем под основной контент */
                }
        
                /* Желток - оранжевый элемент */
                .egg-yolk {
                    background: radial-gradient(circle, var(--accent-color), transparent 70%);
                    width: 300px;
                    height: 300px;
                    top: 10%;
                    left: 10%;
                    animation: float 15s infinite ease-in-out;      /* Анимация плавающего движения */
                }
        
                /* Белок - больший белый элемент */
                .egg-white-1 {
                    background: radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%);
                    width: 500px;
                    height: 500px;
                    bottom: -100px;
                    right: -100px;
                    animation: float 20s infinite ease-in-out reverse;      /* Обратная анимация */
                }
        
                /* Второй белок - поменьше */
                .egg-white-2 {
                    background: radial-gradient(circle, rgba(255,255,255,0.5), transparent 70%);
                    width: 400px;
                    height: 400px;
                    top: 30%;
                    right: 20%;
                    animation: float 18s infinite ease-in-out;
                }
        
                /* Анимация плавающего движения */
                @keyframes float {
                    0%, 100% { transform: translateY(0) translateX(0); }
                    50% { transform: translateY(-20px) translateX(20px); }
                }
        
                /* Стили для шапки сайта */
                header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 20px 5%;
                    background: linear-gradient(90deg, rgba(110, 11, 236, 0.1), rgba(156, 66, 245, 0.1));
                    backdrop-filter: blur(10px);        /* Эффект размытого стекла */
                    -webkit-backdrop-filter: blur(10px);
                    box-shadow: var(--shadow);
                    position: relative;
                    z-index: 10;        /* Чтобы шапка была над декоративными элементами */
                }
        
        /* ====================== ЛОГОТИП. МЕНЮШКА С ВЫБОРОМ ТЕМЫ ==================================== */
        
                /* Базовые стили */
                .logo {
                    display: flex;
                    align-items: center;
                    position: relative;
                    gap: 5px;
                }
        
                .logo-main {
                    display: flex;
                    align-items: center;
                    position: relative;
                    z-index: 2;
                    padding-right: 15px;
                    font-size: 2rem;
                    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
                    -webkit-background-clip: text;  /* Градиент для текста */
                    background-clip: text;
                    color: transparent;
                }
        
                .main-logo-img {
                    height: 30px;
                    transition: transform 0.4s;
                    display: block;
                }
        
                .logo-main:hover .main-logo-img {
                    transform: scale(1.1);
                }
        /*===================================================
                /* Стили меню вариантов - исправленная версия */
                .logo-variants {
                    position: absolute;
                    left: 100%;
                    top: 50%;
                    transform: translateY(-50%) translateX(-20px); /* Начальное положение сдвинуто влево */
                    background: var(--logo-variants-backround);
                    border-radius: 25px;
                    padding: 10px 15px;
                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
                    z-index: 100;
                    gap: 10px;
                    display: flex;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.3s ease;
                    pointer-events: none;
                    clip-path: inset(0 0 0 -20px); /* Обрезаем невидимую часть */
                }
        
                .logo-main:hover .logo-variants {
                    opacity: 1;
                    visibility: visible;
                    transform: translateY(-50%) translateX(2%);
                    pointer-events: auto;
                    clip-path: inset(0 0 0 0); /* Показываем полностью */
                    margin-left: -5px;
                }
        
                /* Стили для вариантов лого */
                .logo-variant {
                    width: 55px;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: transform 0.3s ease;
                    flex-shrink: 0;
                }
        
                .logo-variant img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    display: block;
                }
        
                .logo-variant:hover {
                    transform: scale(1.1);
                }
        
                /* Заголовок */
                .logo h1 {
                    position: relative;
                    z-index: 1;
                    margin-left: -25px;
                    padding-left: 20px;
                    font-size: 1.8rem;
                    font-weight: 800;
                    font-size: 1.8rem;
                    font-weight: 800;
                    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
                    -webkit-background-clip: text;
                    background-clip: text;
                    color: transparent;
                }
        
                /* Область для плавного перехода */
                .logo-variants::before {
                    content: "";
                    position: absolute;
                    right: 100%;
                    top: 0;
                    width: 15px;
                    height: 100%;
                }
        
        /* ================================= КОНЕЦ ================================================= */
        
                /* Стили для логотипа
                .logo {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    .scale {
                        transition: 0.4s;
                    }
                    .scale:hover {
                        transform: scale(1.1);
                    }
                }
        
                /* Стили для иконки логотипа */
                /* .logo i {
                    font-size: 2rem;
                    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
                    -webkit-background-clip: text;  /* Градиент для текста */
                    /* background-clip: text;
                    color: transparent;
                } */ 
        
                /* Стили для текста логотипа */
                /* .logo h1 {
                    font-size: 1.8rem;
                    font-weight: 800;
                    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
                    -webkit-background-clip: text;
                    background-clip: text;
                    color: transparent;
                } */ 
        
                /* Стили для навигационного меню */
                nav ul {
                    display: flex;
                    gap: 30px;
                    list-style: none;
                }
        
                /* Стили для ссылок в меню */
                nav a {
                    color: var(--light-color);
                    text-decoration: none;
                    font-weight: 600;
                    font-size: 1.1rem;
                    position: relative;
                    padding-bottom: 5px;
                    transition: all 0.3s ease;
                }
        
                /* Эффект при наведении на ссылку */
                nav a:hover {
                    color: var(--primary-color);
                }
        
                /* Подчеркивание ссылки при наведении */
                nav a::after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: 0;
                    left: 0;
                    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
                    transition: width 0.3s ease;
                }
        
                nav a:hover::after {
                    width: 100%;
                }
        
                /* Основной контейнер для контента */
                .container {
                    max-width: 1200px;
                    margin: 40px auto;
                    padding: 0 20px;
                    position: relative;
                }
        
                /* Стили для плеера */
                .player-container {
                    background: var(--glass-color);
                    backdrop-filter: blur(15px);
                    -webkit-backdrop-filter: blur(15px);
                    border-radius: 20px;
                    padding: 30px;
                    box-shadow: var(--shadow);
                    margin-bottom: 40px;
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    transition: all 0.5s ease;
                    position: relative;
                    overflow: hidden;
                }
        
                /* Декоративный элемент для плеера */
                .player-container::before {
                    content: '';
                    position: absolute;
                    top: -50px;
                    right: -50px;
                    width: 200px;
                    height: 200px;
                    background: radial-gradient(circle, var(--accent-color), transparent 70%);
                    opacity: 0.1;
                    z-index: -1;
                    border-radius: 50%;
                }
        
                /* Эффект при наведении на плеер */
                .player-container:hover {
                    box-shadow: 0 12px 40px rgba(156, 66, 245, 0.3);
                    transform: translateY(-5px);
                }
        
                /* Стили для заголовка плеера */
                .player-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20px;
                }
        
                /* Стили для блока "Сейчас играет" */
                .now-playing {
                    display: flex;
                    align-items: center;
                    gap: 15px;
                }
        
                /* Стили для обложки альбома */
                .album-art {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    position: relative;
                    box-shadow: 0 5px 15px rgba(156, 66, 245, 0.4);
                }
        
                /* Внутренний круг для обложки */
                .album-art::before {
                    content: '';
                    position: absolute;
                    inset: 5px;
                    border-radius: 50%;
                    background: var(--dark-color);
                    z-index: 1;
                }
        
                /* Стили для иконки в обложке */
                .album-art i {
                    position: relative;
                    z-index: 2;
                    font-size: 1.5rem;
                    color: white;
                }
        
                /* Стили для изображения в обложке */
                .album-art img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    position: relative;
                    z-index: 2;
                }
        
                /* Стили для информации о треке */
                .track-info h3 {
                    font-size: 1.3rem;
                    margin-bottom: 5px;
                    text-shadow: var(--text-shadow);
                }
        
                .track-info p {
                    font-size: 0.9rem;
                    opacity: 0.8;
                }
        
                /* Стили для блока управления */
                .controls {
                    display: flex;
                    align-items: center;
                    gap: 20px;
                }
        
                /* Стили для кнопок управления */
                .control-btn {
                    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
                    border: none;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    box-shadow: 0 4px 15px rgba(156, 66, 245, 0.4);
                }
        
                /* Эффект при наведении на кнопку */
                .control-btn:hover {
                    transform: scale(1.1);
                    box-shadow: 0 6px 20px rgba(156, 66, 245, 0.6);
                }
        
                /* Стили для регулятора громкости */
                .volume-control {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }
        
                /* Стили для ползунка громкости */
                .volume-slider {
                    width: 100px;
                    -webkit-appearance: none;
                    height: 5px;
                    background: rgba(255, 255, 255, 0.2);
                    border-radius: 5px;
                    outline: none;
                }
        
                /* Стили для бегунка ползунка */
                .volume-slider::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    appearance: none;
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background: white;
                    cursor: pointer;
                }
        
                /* Стили для нижней части плеера */
                .player-footer {
                    margin-top: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
        
                /* Стили для информации о потоке */
                .stream-info {
                    font-size: 0.9rem;
                    opacity: 0.7;
                }
        
                /* Стили для кнопок поделиться */
                .share-btns {
                    display: flex;
                    gap: 10px;
                }
        /*===========================================================================================
                /* Стили для кнопки поделиться */
                .share-btn {
                    padding: 8px 15px;
                    border-radius: 20px;
                    background: rgba(255, 255, 255, 0.1);
                    border: none;
                    color: var(--share-button-color);
                    font-size: 0.8rem;
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                }
        
                /* Эффект при наведении на кнопку поделиться */
                .share-btn:hover {
                    background: rgba(255, 255, 255, 0.2);
                    transform: translateY(-2px);
                }
        
                /* Стили для секций контента */
                .content-section {
                    margin-bottom: 50px;
                    position: relative;
                }
        
                /* Стили для заголовков секций */
                .section-title {
                    font-size: 1.8rem;
                    margin-bottom: 20px;
                    position: relative;
                    display: inline-block;
                    padding-left: 20px;
                }
        
                /* Декоративная точка перед заголовком */
                .section-title::before {
                    content: '';
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    background: var(--accent-color);
                    border-radius: 50%;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
        
                /* Подчеркивание заголовка НЕ ОТНОСИТСЯ К ПРОБЛЕМЕ */ 
                .section-title::after {
                    content: '';
                    position: absolute;
                    width: 50%;
                    height: 3px;
                    bottom: -5px;
                    left: 20px;
                    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
                    border-radius: 3px;
                }
        
                /* Сетка для карточек НЕ ОТНОСИТСЯ К ПРОБЛЕМЕ */
                .grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                    gap: 25px;
                }
        
                /* Стили для карточек НЕ ОТНОСИТСЯ К ПРОБЛЕМЕ */
                .card {
                    background: var(--glass-color);
                    backdrop-filter: blur(10px);
                    -webkit-backdrop-filter: blur(10px);
                    border-radius: 15px;
                    overflow: hidden;
                    box-shadow: var(--shadow);
                    transition: all 0.3s ease;
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    position: relative;
                }
        
                /* Декоративный элемент для карточки НЕ ОТНОСИТСЯ К ПРОБЛЕМЕ */
                .card::before {
                    content: '';
                    position: absolute;
                    top: -10px;
                    right: -10px;
                    width: 30px;
                    height: 30px;
                    background: radial-gradient(circle, rgba(255,255,255,0.4), transparent 70%);
                    border-radius: 50%;
                }
        
                /* Эффект при наведении на карточку НЕ ОТНОСИТСЯ К ПРОБЛЕМЕ */
                .card:hover {
                    transform: translateY(-10px);
                    box-shadow: 0 15px 30px rgba(156, 66, 245, 0.2);
                }
        
                /* Стили для изображения в карточке НЕ ОТНОСИТСЯ К ПРОБЛЕМЕ */
                .card-image {
                    width: 100%;
                    height: 150px;
                    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    overflow: hidden;
                }
        
                /* Декоративный элемент для изображения НЕ ОТНОСИТСЯ К ПРОБЛЕМЕ */
                .card-image::after {
                    content: '';
                    position: absolute;
                    top: -50%;
                    left: -50%;
                    width: 100%;
                    height: 100%;
                    background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%);
                    transform: rotate(30deg);
                }
        
                /* Специфичные стили для разных типов карточек НЕ ОТНОСИТСЯ К ПРОБЛЕМЕ */
                .news-card .card-image {
                    background: linear-gradient(45deg, #8e2de2, #4a00e0);
                }
        
                .artist-card .card-image {
                    background: linear-gradient(45deg, #f12711, #f5af19);
                }
        
                .merch-card .card-image {
                    background: linear-gradient(45deg, #11998e, #38ef7d);
                }
        
                /* Стили для иконки в изображении карточки НЕ ОТНОСИТСЯ К ПРОБЛЕМЕ*/
                .card-image i {
                    font-size: 3rem;
                    color: rgb(255, 255, 255);
                    opacity: 0.8;
                    z-index: 1;
                }
        
                /* Стили для контента карточки СВЯЗАНО С ПРОБЛЕМОЙ */
                .card-content {
                    padding: 20px;
                }
        
                .card-content h3 { /* СВЯЗАНО С ПРОБЛЕМОЙ  */
                    font-size: 1.2rem;
                    margin-bottom: 10px;
                }
        
                .card-content p { /* СВЯЗАНО С ПРОБЛЕМОЙ  */
                    font-size: 0.9rem;
                    opacity: 0.8;
                    margin-bottom: 15px;
                    line-height: 1.5;
                }
        /*==============================================================================================
                /* Стили для даты в карточке новостей */
                .card-date {
                    font-size: 0.8rem;
                    color: var(--card-date-color);
                    
                }
        
                /* Стили для цены в карточке товара */
                .price {
                    font-size: 1.3rem;
                    font-weight: bold;
                    margin: 10px 0;
                    color: var(--accent-color);
                }
        
                /* Стили для кнопок */
                .btn {
                    display: inline-block;
                    padding: 8px 20px;
                    border-radius: 20px;
                    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
                    color: white;
                    text-decoration: none;
                    font-weight: 600;
                    font-size: 0.9rem;
                    transition: all 0.3s ease;
                    border: none;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                }
        
                /* Декоративный элемент для кнопки */
                .btn::before {
                    content: '';
                    position: absolute;
                    top: -10px;
                    left: -10px;
                    width: 20px;
                    height: 20px;
                    background: radial-gradient(circle, rgba(255,255,255,0.5), transparent 70%);
                    border-radius: 50%;
                }
        
                /* Эффект при наведении на кнопку */
                .btn:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 5px 15px rgba(156, 66, 245, 0.4);
                }
        
                /* Стили для контурной кнопки */
                .btn-outline {
                    background: transparent;
                    border: 2px solid var(--primary-color);
                    color: var(--primary-color);
                }
        
                /* Эффект при наведении на контурную кнопку */
                .btn-outline:hover {
                    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
                    color: white;
                }

                /* Стили для подвала */
                footer {
                    background: linear-gradient(90deg, rgba(110, 11, 236, 0.1), rgba(156, 66, 245, 0.1));
                    backdrop-filter: blur(10px);
                    -webkit-backdrop-filter: blur(10px);
                    padding: 30px 5%;
                    text-align: center;
                    margin-top: 50px;
                    position: relative;
                }
        
                /* Стили для контента подвала */
                .footer-content {
                    display: flex; /* Создаем гибкую структуру */
                    flex-direction: column; /* Располагаем элементы вертикально */
                    align-items: center;
                    gap: 20px;
                }
        
                /* Стили для социальных ссылок */
                .social-links {
                    display: flex;
                    gap: 20px;
                }
        
                /* Стили для кнопки социальной сети */
                .social-link {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    transition: all 0.3s ease;
                    position: relative;
                    overflow: hidden;
                }
        
                /* Эффект при наведении на социальную ссылку */
                .social-link::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 30px;
                    height: 30px;
                    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
                    border-radius: 50%;
                    z-index: -1;
                    opacity: 0;
                    transition: all 0.3s ease;
                }
        
                .social-link:hover::after {
                    opacity: 0.2;
                    width: 100%;
                    height: 100%;
                }
        
                .social-link:hover {
                    transform: translateY(-3px);
                }
        
                /* Стили для копирайта */
                .copyright {
                    font-size: 0.9rem;
                    opacity: 0.7;
                }
        
                /* Стили для контейнера страницы */
                .page-container {
                    padding: 40px 5%;
                    max-width: 1000px;
                    margin: 0 auto;
                }
        
                /* Стили для контента страницы "О нас" */
                .about-content {
                    background: var(--glass-color);
                    backdrop-filter: blur(15px);
                    -webkit-backdrop-filter: blur(15px);
                    border-radius: 20px;
                    padding: 30px;
                    box-shadow: var(--shadow);
                    margin-bottom: 40px;
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    position: relative;
                }
        
                /* Декоративный элемент для блока "О нас" */
                .about-content::before {
                    content: '';
                    position: absolute;
                    bottom: -20px;
                    right: -20px;
                    width: 100px;
                    height: 100px;
                    background: radial-gradient(circle, var(--accent-color), transparent 70%);
                    opacity: 0.1;
                    z-index: -1;
                    border-radius: 50%;
                }
        
                /* Стили для заголовков в блоке "О нас" */
                .about-content h2 {
                    font-size: 1.8rem;
                    margin-bottom: 20px;
                    color: var(--primary-color);
                }
        
                .about-content p {
                    margin-bottom: 15px;
                    line-height: 1.6;
                }
        
                /* Сетка для команды */
                .team-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                    gap: 30px;
                    margin-top: 30px;
                }
        
                /* Стили для члена команды */
                .team-member {
                    text-align: center;
                }
        
                /* Стили для изображения члена команды */
                .team-member-image {
                    width: 150px;
                    height: 150px;
                    border-radius: 50%;
                    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
                    margin: 0 auto 15px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    box-shadow: 0 5px 15px rgba(156, 66, 245, 0.4);
                    position: relative;
                }
        
                /* Анимированная граница для изображения */
                .team-member-image::before {
                    content: '';
                    position: absolute;
                    inset: 5px;
                    border: 3px dashed rgba(255,255,255,0.3);
                    border-radius: 50%;
                    animation: rotate 20s linear infinite;
                }
        
                /* Стили для иконки в изображении члена команды */
                .team-member-image i {
                    font-size: 3rem;
                    color: white;
                    z-index: 1;
                }
        
                /* Стили для имени члена команды */
                .team-member h3 {
                    font-size: 1.2rem;
                    margin-bottom: 5px;
                }
        
                .team-member p {
                    font-size: 0.9rem;
                    opacity: 0.8;
                }
        
                /* Анимация вращения */
                @keyframes rotate {
                    from { transform: rotate(0deg); }
                    to { transform: rotate(360deg); }
                }
        
                /* Стили для визуализатора аудио */
                .visualizer {
                    display: flex;
                    justify-content: center;
                    align-items: flex-end;
                    height: 60px;
                    margin-top: 20px;
                    padding: 0 10px;
                    gap: 10px;
                }
        
                /* Стили для столбцов визуализатора */
                .bar {
                    background: linear-gradient(to top, var(--primary-color), var(--accent-color));
                    width: 5px;
                    border-radius: 5px;
                    animation: equalize 1.5s infinite ease-in-out;
                    margin: 0 2px;
                }
        
                /* Анимация для столбцов визуализатора */
                @keyframes equalize {
                    0%, 100% { height: 5px; }
                    50% { height: 50px; }
                }
        
                /* Индивидуальные настройки для каждого столбца */
                .bar:nth-child(1) { animation-delay: 0.1s; height: 30px; }
                .bar:nth-child(2) { animation-delay: 0.3s; height: 40px; }
                .bar:nth-child(3) { animation-delay: 0.5s; height: 25px; }
                .bar:nth-child(4) { animation-delay: 0.2s; height: 50px; }
                .bar:nth-child(5) { animation-delay: 0.4s; height: 35px; }
                .bar:nth-child(6) { animation-delay: 0.6s; height: 45px; }
                .bar:nth-child(7) { animation-delay: 0.3s; height: 30px; }
        
                /* Адаптивные стили для планшетов */
                @media (max-width: 768px) {
                    /* Изменение шапки на мобильных */
                    header {
                        flex-direction: column;
                        gap: 20px;
                    }

                    /* Уменьшение отступов в навигации */
                    nav ul {
                        gap: 15px;
                    }

                    /* Перенос элементов управления на мобильных */
                    .controls {
                        flex-wrap: wrap;
                        justify-content: center;
                        gap: 10px;
                    }

                    /* Изменение заголовка плеера на мобильных */
                    .player-header {
                        flex-direction: column;
                        gap: 20px;
                    }

                    /* Изменение подвала плеера на мобильных */
                    .player-footer {
                        flex-direction: column;
                        gap: 15px;
                    }

                    /* Одна колонка для карточек на мобильных */
                    .grid {
                        grid-template-columns: 1fr;
                    }

                    /* Скрытие декоративных элементов на мобильных */
                    .egg-yolk, .egg-white-1, .egg-white-2 {
                        display: none;
                    }
                }

                /* Адаптивные стили для мобильных */
                @media (max-width: 480px) {
                    /* Дополнительные изменения навигации */
                    nav ul {
                        gap: 10px;
                        font-size: 0.9rem;
                    }

                    /* Уменьшение логотипа */
                    .logo h1 {
                        font-size: 1.5rem;
                    }

                    /* Уменьшение отступов плеера */
                    .player-container {
                        padding: 20px;
                    }

                    /* Уменьшение заголовков секций */
                    .section-title {
                        font-size: 1.5rem;
                    }
                }

                /* Стили для перехода страниц (используются в JS для переключения) */
                .page {
                    display: block;
                    animation: fadeIn 0.5s ease;
                }

                /* Анимация появления страницы */
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }

                /* Класс для активной страницы */
                .active-page {
                    display: block;
                }

                /* Дополнительные декоративные круги */
                /* Новые круглые элементы для "яичницы" */
                .circle-decor {
                    position: absolute;
                    border-radius: 50%;
                    pointer-events: none;
                    z-index: -1;
                }

                /* Стили для отдельных декоративных кругов */
                .circle-1 {
                    width: 200px;
                    height: 200px;
                    background: radial-gradient(circle, var(--accent-color), transparent 70%);
                    top: 20%;
                    right: 5%;
                    opacity: 0.1;
                    animation: pulse 8s infinite ease-in-out;
                }

                .circle-2 {
                    width: 150px;
                    height: 150px;
                    background: radial-gradient(circle, white, transparent 70%);
                    bottom: 15%;
                    left: 10%;
                    opacity: 0.05;
                    animation: pulse 10s infinite ease-in-out reverse;
                }

                .circle-3 {
                    width: 300px;
                    height: 300px;
                    border: 1px dashed rgba(255,255,255,0.1);
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    animation: rotate 40s linear infinite;
                }

                /* Анимация пульсации */
                @keyframes pulse {
                    0%, 100% { transform: scale(1); }
                    50% { transform: scale(1.1); }
                }

/* ===========================================================================================*\

                /* Темы */
                .light-theme {
                    --primary-color: #8e2de2; /* главный цвет иконок */
                    --secondary-color: #4a00e0;
                    --accent-color: #e100ff; /* вторичный цвет иконок */
                    --dark-color: #f8f0ff; /* главный цвет иконок */
                    --light-color: #1a052e; /* текст */
                    --glass-color: rgba(26, 5, 46, 0.1); /* панельки стеклянные */
                    --shadow: 0 8px 32px rgba(144, 149, 219, 0.1); /* тень под ними */
                    --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);    /* Тень текста */
                    --gradient-end-color: #a581c7; /* градиент */
                    --share-button-color: #1a052e; 
                    --card-date-color: #1a052e; /* цвет текста в дат в новостях */
                    --logo-variants-backround: #a581c7;
                    --theme-circle: #8e2de2;
                    --logo-main-after: #e1cbf7; /* внешний круг темы */
                }


                .black-theme {
                    --primary-color: #ffffff;
                    --secondary-color: #cccccc;
                    --accent-color: #e100ff;
                    --dark-color: #000000;
                    --light-color: #ffffff;
                    --glass-color: rgba(0, 0, 0, 0.5);
                    --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
                    --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);    /* Тень текста */
                    --gradient-end-color: #1a052e; /* градиент */
                    --share-button-color: #f8f0ff; 
                    --card-date-color: #ffffff; /* цвет текста в дат в новостях */
                    --logo-variants-backround: #1a052e;
                    --theme-circle: #e100ff;
                    --logo-main-after: #1a052e; /* внешний круг темы */
                }
        
                /* Адаптация элементов для тем */
                .light-theme .egg-yolk {
                    background: radial-gradient(circle, #4a00e0, transparent 70%);
                }
        
                .light-theme .fas.fa-music {
                    color: rgb(0, 0, 0);    /* иконка музыки */
                }

                .black-theme .egg-yolk {
                    background: radial-gradient(circle, #e100ff, transparent 70%);
                }
        
                /* .black-theme .fas.fa-music {
                    color: rgb(142, 45, 226);    /* иконка музыки */
                /*} */

                .light-theme .egg-white-1,
                .light-theme .egg-white-2 {
                    background: radial-gradient(circle, rgba(110, 11, 236, 0.5), transparent 70%);
                }
        
                .black-theme .egg-white-1,
                .black-theme .egg-white-2 {
                    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
                }
        
                /* Индикатор темы в логотипе */
                .logo-main::after {
                    content: '';
                    position: absolute;
                    bottom: -5px;
                    right: 5px;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    border: 2px solid var(--logo-main-after);
                    transition: all 0.3s ease;
                }
        
                /* Цвет индикатора для каждой темы */
                body:not(.light-theme):not(.black-theme) .logo-main::after {
                    background: var(--theme-circle); /* Фиолетовый для тёмной */
                }
        
                .light-theme .logo-main::after {
                    background: var(--theme-circle); /* Сиреневый для светлой */
                }
        
                .black-theme .logo-main::after {
                    background: var(--theme-circle); /* Красный для чёрной */
                }
        
                /* Уведомление о смене темы */
                .theme-notification {
                    position: fixed;
                    bottom: 20px;
                    left: 50%;
                    transform: translateX(-50%) translateY(100%);
                    background: var(--glass-color);
                    backdrop-filter: blur(10px);
                    padding: 10px 20px;
                    border-radius: 20px;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    font-size: 0.9rem;
                    box-shadow: var(--shadow);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    z-index: 1000;
                    opacity: 0;
                    transition: all 0.3s ease;
                }
                
                .theme-notification.show {
                    transform: translateX(-50%) translateY(0);
                    opacity: 1;
                }
        
                /* Стили для иконок тем в выпадающем меню */
                .logo-variant.theme-option {
                    position: relative;
                    transition: transform 0.3s ease;
                }
        
                .logo-variant.theme-option.active::after {
                    content: '✓';
                    position: absolute;
                    top: -5px;
                    right: -5px;
                    width: 16px;
                    height: 16px;
                    background: var(--accent-color);
                    color: white;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 10px;
                    line-height: 1;
                }
        
                /* Анимация при переключении */
                @keyframes themeSwitch {
                    0% { transform: scale(1); }
                    50% { transform: scale(1.1); }
                    100% { transform: scale(1); }
                }
        
                .theme-switch-animation {
                    animation: themeSwitch 0.4s ease;
                }
                
                .logo-main {
                    cursor: pointer;
                }