header,
.navbar,
.main-header {
    background: linear-gradient(90deg, #ff0066, #6600ff, #00ccff) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}

/* Логотип */
.logo img {
    filter: drop-shadow(0 0 10px #ffffff);
}

/* Меню */
.navbar a,
.main-header a {
    color: #ffffff !important;
    font-weight: bold;
    transition: 0.3s;
}

.navbar a:hover,
.main-header a:hover {
    color: #ffff00 !important;
    transform: scale(1.05);
}

/* Поиск */
.search-bar input,
.search input {
    border-radius: 25px !important;
    border: 2px solid #ffcc00 !important;
    background: rgba(255,255,255,0.15) !important;
    color: white !important;
}
 /* Красивые карточки видео */

.video-thumb,
.video-list,
.video-item,
.wow_content {
    border-radius: 18px !important;
    overflow: hidden;
    transition: 0.3s ease;
}

/* Эффект при наведении */
.video-thumb:hover,
.video-item:hover,
.wow_content:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(255,0,150,0.35);
}

/* Превью видео */
.video-thumb img,
.video-item img {
    transition: 0.4s;
}

.video-thumb:hover img,
.video-item:hover img {
    transform: scale(1.05);
}

/* Названия видео */
.video-title,
.video-info h3,
.video-info h4 {
    color: #ffffff !important;
    font-weight: 700;
}

/* Информация под видео */
.video-info,
.video-description {
    background: rgba(255,255,255,0.05);
    border-radius: 0 0 18px 18px;
    padding: 12px;
}

/* Красивые теги */
.badge,
.label {
    background: linear-gradient(45deg,#ff0066,#ffcc00) !important;
    color:white !important;
    border-radius:20px !important;
}
/* Подсветка окон видео */

.video-wrapper,
.video-item,
.video-thumb,
.wow_content,
.video-card {
    position: relative;
    border-radius: 20px !important;
    overflow: hidden;
    background: #111 !important;
    border: 2px solid transparent;
    transition: all 0.4s ease;
}

/* Цветная рамка */
.video-wrapper::before,
.video-item::before,
.video-thumb::before,
.wow_content::before,
.video-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(
        45deg,
        #ff0066,
        #ffcc00,
        #00ffff,
        #6600ff,
        #ff0066
    );
    background-size: 400%;
    z-index: -1;
    border-radius: 22px;
    animation: glowVideo 8s linear infinite;
}

/* Свечение при наведении */
.video-wrapper:hover,
.video-item:hover,
.video-thumb:hover,
.wow_content:hover,
.video-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 0 20px #ff0066,
        0 0 40px #6600ff,
        0 0 60px #00ffff;
}

/* Анимация переливания */
@keyframes glowVideo {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
body {
    background: #111 !important;
}

img {
    border-radius: 20px !important;
}
/* Подсветка превью видео */

img {
    transition: 0.4s ease !important;
}

img:hover {
    transform: scale(1.03);
    box-shadow:
        0 0 15px #ff0066,
        0 0 30px #6600ff,
        0 0 45px #00ffff !important;
}

/* Рамка вокруг изображений видео */
img[src*="upload"],
img[src*="thumbnail"],
img[src*="videos"] {
    border: 3px solid transparent !important;
    background:
        linear-gradient(#111,#111) padding-box,
        linear-gradient(45deg,#ff0066,#ffcc00,#00ffff) border-box !important;
}
/* Выдвижное боковое меню */

.sidebar,
.left-sidebar,
.menu-sidebar,
.side-nav {
    background: linear-gradient(180deg, #1a1a2e, #16213e, #0f3460) !important;
    border-radius: 0 25px 25px 0 !important;
    box-shadow:
        5px 0 25px rgba(255,0,120,0.4);
}

/* Пункты меню */

.sidebar a,
.left-sidebar a,
.menu-sidebar a,
.side-nav a {
    color: #ffffff !important;
    border-radius: 15px;
    margin: 5px 10px;
    transition: 0.3s ease;
}

/* Наведение */

.sidebar a:hover,
.left-sidebar a:hover,
.menu-sidebar a:hover,
.side-nav a:hover {
    background: linear-gradient(45deg,#ff0066,#6600ff) !important;
    color: white !important;
    transform: translateX(8px);
    box-shadow: 0 0 15px #ff0066;
}

/* Иконки меню */

.sidebar i,
.left-sidebar i,
.menu-sidebar i,
.side-nav i {
    color: #00ffff !important;
}
body {
    --menu-test-color: red;
}

nav {
    background: red !important;
}
div {
    background: transparent;
}
/* Тест боковой панели */
.offcanvas,
.drawer,
.sidebar-menu,
.mobile-menu,
.left_menu,
.pt_sidebar {
    background: red !important;
}
/* Красочный видеоплеер */

video,
.mejs-container,
.video-player,
.player,
.plyr,
#video-player {
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 3px solid transparent !important;
    box-shadow:
        0 0 20px rgba(255,0,102,0.6),
        0 0 40px rgba(0,204,255,0.4) !important;
    background: #111 !important;
    transition: 0.4s ease;
}

/* Эффект при наведении */
video:hover,
.mejs-container:hover,
.video-player:hover,
.player:hover,
.plyr:hover {
    box-shadow:
        0 0 25px #ff0066,
        0 0 50px #6600ff,
        0 0 75px #00ffff !important;
    transform: scale(1.01);
}

/* Полоса прогресса */
.mejs-controls .mejs-time-total,
.plyr__progress {
    background: linear-gradient(
        90deg,
        #ff0066,
        #ffcc00,
        #00ffff
    ) !important;
}

/* Кнопки плеера */
.mejs-button button,
.plyr button {
    filter: drop-shadow(0 0 8px #00ffff);
}
/* Блок под видеоплеером */

.video-info,
.video-details,
.video-description,
.video-page-info,
.single-video-info,
.watch-video-info {
    background: linear-gradient(
        135deg,
        rgba(255,0,102,0.25),
        rgba(102,0,255,0.25),
        rgba(0,204,255,0.25)
    ) !important;

    border-radius: 20px !important;
    padding: 20px !important;

    border: 1px solid rgba(255,255,255,0.2);

    box-shadow:
        0 0 25px rgba(255,0,150,0.4);
    
    backdrop-filter: blur(10px);
}


/* Название видео */

.video-info h1,
.video-info h2,
.video-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow:
        0 0 10px #ff0066;
}


/* Кнопки лайк, поделиться и т.д. */

.video-actions button,
.video-actions a,
.like-btn,
.share-btn {
    background: linear-gradient(
        45deg,
        #ff0066,
        #6600ff
    ) !important;

    color: white !important;

    border-radius: 25px !important;
    border: none !important;

    box-shadow:
        0 0 15px rgba(255,0,150,0.5);
    
    transition: 0.3s;
}


.video-actions button:hover,
.video-actions a:hover {
    transform: scale(1.08);
}


/* Текст описания */

.video-description {
    color: #ffffff !important;
}
/* Красочный фон сайта */

body {
    background:
        linear-gradient(
            135deg,
            #12002b,
            #1a0050,
            #001f3f,
            #003333
        ) !important;

    background-attachment: fixed !important;
}


/* Светящиеся цветные пятна на фоне */

body::before {
    content: "";
    position: fixed;
    top: -100px;
    left: -100px;
    width: 350px;
    height: 350px;

    background: radial-gradient(
        circle,
        rgba(255,0,102,0.5),
        transparent 70%
    );

    filter: blur(50px);
    z-index: -1;
}


body::after {
    content: "";
    position: fixed;
    right: -100px;
    bottom: -100px;
    width: 400px;
    height: 400px;

    background: radial-gradient(
        circle,
        rgba(0,204,255,0.5),
        transparent 70%
    );

    filter: blur(60px);
    z-index: -1;
}


/* Основные блоки поверх фона */

.container,
.page-container,
.main-content {
    background: rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(8px);
}
/* Анимация колокольчика уведомлений */

.notification,
.notifications,
.bell,
.fa-bell,
.icon-bell {
    animation: bellPulse 1.5s infinite;
}


/* Свечение */

@keyframes bellPulse {

    0% {
        filter: drop-shadow(0 0 0px #ff0066);
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 15px #ff0066);
        transform: scale(1.15);
    }

    100% {
        filter: drop-shadow(0 0 0px #ffcc00);
        transform: scale(1);
    }

}


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

.notification-count,
.badge-notification,
.unread-count {
    background: linear-gradient(
        45deg,
        #ff0000,
        #ff6600
    ) !important;

    color:white !important;

    animation: countBlink 1s infinite;
}


@keyframes countBlink {

    50% {
        opacity:0.3;
    }

}
/* Анимация колокольчика */

.fa-bell,
.far.fa-bell,
.fas.fa-bell,
svg[data-icon="bell"] {
    animation: bellShake 1.2s infinite;
    color: #ffffff !important;
}

@keyframes bellShake {
    0%   { transform: rotate(0deg) scale(1); }
    15%  { transform: rotate(-15deg) scale(1.15); }
    30%  { transform: rotate(15deg) scale(1.15); }
    45%  { transform: rotate(-10deg) scale(1.1); }
    60%  { transform: rotate(10deg) scale(1.1); }
    75%  { transform: rotate(0deg) scale(1.15); }
    100% { transform: rotate(0deg) scale(1); }
}