/* БЛОГ */

/* Сбрасываем все отступы у элементов блога */
body,
h1.blog-title,
h2.blog-subtitle,
h3,
#auth-section,
.blog-container,
.topics-section-container,
.auth-notice,
.auth-form,
.topic-form-container,
.topic-card,
.comment-form,
.comment-item,
.replies-container,
.reply-form,
.auth-buttons,
.form-group,
.create-topic-section,
.topic-header,
.topic-author,
.topic-stats,
.topic-title,
.topic-content-preview,
.comments-container,
.comments-list,
.no-comments-message,
.comment-header,
.comment-content,
.comment-actions,
.no-topics-message,
.toggle-comments-btn,
.login-form-container,
.cancel-btn,
.char-counter,
.form-actions,
.checkbox-label,
.terms-link,
.user-info,
.user-avatar,
.user-details,
.logout-btn,
.topics-list,
#not-logged-in-message,
#register-form-container,
#user-panel,
#topic-form-container {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left;
    max-width: 100% !important;
    width: auto !important;
}

/* Основные контейнеры блога - выравниваем по левому краю h1 */
.blog-container,
.topics-section-container,
#auth-section {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    left: 0;
}

/* Особенно для заголовков блога */
h1.blog-title {
    text-align: left !important;
    margin: 20px 0 10px 6% !important;
    padding: 0 !important;
    font-size: 2.5rem !important;
    color: #333;
    width: 100% !important;
    max-width: 100% !important;
}

h2.blog-subtitle {
    text-align: left !important;
    margin: 0 0 30px 6% !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
    color: #666;
    width: 100% !important;
    max-width: 100% !important;
}

/* Заголовок "Созданные темы" */
h3:has(.fa-list) {
    text-align: left !important;
    margin: 30px 0 15px 0 !important;
    padding: 0 !important;
    font-size: 1.8rem !important;
    color: #333;
    width: 100% !important;
    max-width: 100% !important;
}

/* Формы и контейнеры */
form,
.form-group,
.form-actions,
.auth-notice {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

#register-name, #register-email, #register-password, #register-confirm-password, #register-city, #register-avatar, .form-buttons, №register-submit-btn, #not-logged-in-message {
    margin-left: 0 !important;
}

.btn-primary, .btn-secondary {
    margin-left: 0 !important;
}

.form-group label {
    margin-left: 0 !important;
}

#register-form-container h3 {
    margin-bottom: 30px;
}

/* Секция авторизации */
#auth-section {
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Карточки тем */
.topic-card {
    margin: 15px 0 !important;
    padding: 20px !important;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    width: 100% !important;
    max-width: 100% !important;
}

/* Заголовки внутри карточек */
.topic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
    padding: 0 !important;
    background-color: #ffffff;
}

.topic-title {
    margin: 10px 0 !important;
    padding: 0 !important;
    font-size: 1.4rem !important;
    color: #333;
    width: 100% !important;
}

.topic-content-preview {
    margin: 10px 0 15px 0 !important;
    padding: 0 !important;
    line-height: 1.5;
    color: #666;
    width: 100% !important;
}

/* Автор темы */
.topic-author {
    display: flex;
    align-items: center;
    margin: 15px 0 10px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Статистика и кнопки */
.topic-stats {
    margin: 10px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.toggle-comments-btn {
    width: 100% !important;
    margin: 15px 0 0 0 !important;
    padding: 12px !important;
}

/* Контейнер комментариев */
.comments-container {
    margin: 15px 0 0 0 !important;
    padding: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Отдельные комментарии */
.comment-item {
    margin: 0 0 15px 0 !important;
    padding: 15px !important;
    background-color: #ffffff;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    width: 100% !important;
    max-width: 100% !important;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

.auth-notice {
    margin: 0 0 10px 6% !important;
}

.comment-content {
    margin: 10px 0 !important;
    padding: 0 !important;
    line-height: 1.5;
    color: #333;
    width: 100% !important;
}

/* Формы комментариев */
.comment-form-container {
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Список тем */
.topics-list {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Сообщение "нет тем" */
.no-topics-message {
    margin: 30px 0 !important;
    padding: 40px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Форма создания темы */
.topic-form-container {
    margin: 20px 0 !important;
    padding: 25px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Формы авторизации */
#login-form-container,
#register-form-container {
    margin: 20px 0 20px 0 !important;
    padding: 0px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Сообщение о необходимости регистрации */
#not-logged-in-message {
    margin: 20px 0 !important;
    padding: 25px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Панель пользователя */
#user-panel {
    margin: 20px 60px !important;
    padding: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Кнопка создания темы */
.create-topic-section {
    margin: 20px 0 30px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Инпуты и текстовые поля */
input,
textarea,
select {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

/* Счетчики символов */
.char-counter {
    margin: 5px 0 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: right;
}

/* Исправление для стрелок комментариев */
.toggle-comments-btn .arrow-icon {
    margin-left: auto !important;
}

/* Убираем лишние отступы у всех внутренних элементов */
.topic-card > *,
.comment-item > *,
.comments-container > *,
.topic-form-container > *,
.auth-form > *,
.auth-notice > *,
.user-info > * {
    margin-left: 0 !important;
    padding-left: 0 !important;
}



/* Специальное правило для всего контента блога */
.blog-content, {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative;
    left: 0;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    h1.blog-title {
        font-size: 2rem !important;
        margin: 15px 0 8px 0 !important;
    }

    h2.blog-subtitle {
        font-size: 1rem !important;
        margin: 0 0 20px 0 !important;
    }

    h3:has(.fa-list) {
        font-size: 1.5rem !important;
        margin: 25px 0 12px 0 !important;
    }

    .topic-card {
        padding: 15px !important;
        margin: 12px 0 !important;
    }

    .topic-title {
        font-size: 1.2rem !important;
    }

    .comments-container,
    .topic-form-container,
    #login-form-container,
    #register-form-container,
    #not-logged-in-message,
    #user-panel {
        padding: 15px !important;
    }
}

@media (max-width: 480px) {
    h1.blog-title {
        font-size: 1.8rem !important;
        margin: 12px 0 6px 0 !important;
    }

    h2.blog-subtitle {
        font-size: 0.9rem !important;
        margin: 0 0 15px 0 !important;
    }

    h3:has(.fa-list) {
        font-size: 1.3rem !important;
        margin: 20px 0 10px 0 !important;
    }

    .topic-card {
        padding: 12px !important;
        margin: 10px 0 !important;
    }

    .topic-title {
        font-size: 1.1rem !important;
    }
}

/* Для очень широких экранов */
@media (min-width: 1600px) {
    .blog-container,
    .topics-section-container,
    #auth-section {
        max-width: 1400px !important;
    }
}



/* ===== ДОБАВЬТЕ ЭТО ПРАВИЛО ДЛЯ ЯРКОСТИ ТЕКСТА ===== */
.sidebar-header h3,
.nav-btn {
    /* Усиленная видимость текста */
    filter: brightness(1.2);
    opacity: 1 !important;
    visibility: visible !important;
}

/* Заголовок боковой панели - шрифт Bad Script */
.sidebar-header h3 {
    font-family: "Bad Script", cursive !important;
    font-size: 2rem !important; /* Увеличил размер шрифта */
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0 0 8px rgba(0, 0, 0, 1) !important;
    font-weight: 700 !important;
    text-align: center; /* Центрируем текст */
    margin-bottom: 30px !important; /* Отступ снизу */
    padding: 10px !important; /* Внутренние отступы */
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important; /* Декоративная линия */
}

.nav-btn {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 0 6px rgba(0, 0, 0, 0.9) !important;

    /* Яркий фон для кнопок */
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: 2px solid #ffffff !important;

    /* Скругленные углы */
    border-radius: 12px !important; /* Сильное скругление углов */

    /* Увеличенная высота кнопок */
    height: 60px !important; /* Высота кнопки */
    min-height: 60px !important;

    /* Расположение кнопок - посередине и друг над другом */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    width: 95% !important; /* Немного увеличил ширину */
    max-width: 95% !important;

    /* Шрифт для текста в кнопках */
    font-family: "Comic Relief", "Comic Sans MS", "Comic Sans", cursive !important;

    /* Дополнительные стили для лучшего вида */
    font-size: 1.1rem !important; /* Увеличил размер текста */
    letter-spacing: 0.5px !important; /* Небольшое расстояние между буквами */
    transition: all 0.3s ease !important; /* Плавные переходы */
    cursor: pointer !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Тень для объема */
    position: relative !important;
    overflow: hidden !important; /* Для эффектов при наведении */
}

/* Эффект при наведении на кнопку */
.nav-btn:hover {
    transform: translateY(-2px) !important; /* Легкий подъем */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important; /* Усиленная тень */
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important; /* Более светлый градиент */
}

/* Эффект при нажатии на кнопку */
.nav-btn:active {
    transform: translateY(1px) !important; /* Эффект нажатия */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Контейнер для кнопок - вертикальное расположение */
.sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important; /* Увеличил расстояние между кнопками */
    width: 100% !important;
    margin-top: 40px !important; /* Уменьшил отступ сверху, т.к. заголовок больше */
}

/* Ссылки-контейнеры для кнопок */
.sidebar-button {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Стили для кнопок блога */
button,
.auth-btn,
.submit-btn,
.cancel-btn,
.logout-btn,
.create-topic-btn,
.toggle-comments-btn,
.reply-btn,
.btn-primary,
.btn-secondary,
#show-login-btn,
#show-register-btn,
#cancel-login-btn,
#cancel-register-btn,
#register-submit-btn,
#logout-btn,
#show-topic-form-btn,
#cancel-topic-btn,
.submit-btnsmall,
.cancel-reply-btn {
    /* Основные цвета */
    background-color: #007bff !important; /* Синий цвет */
    color: white !important; /* Белый текст */
    border: 1px solid #0056b3 !important; /* Темно-синяя рамка */
    /* Дополнительные стили для красоты */
    border-radius: 5px !important; /* Скругленные углы */
    padding: 10px 20px !important; /* Внутренние отступы */
    font-weight: bold !important; /* Жирный текст */
    cursor: pointer !important; /* Курсор-указатель */
    transition: all 0.3s ease !important; /* Плавные переходы */
    text-align: center !important; /* Центрирование текста */
    display: inline-block !important; /* Чтобы кнопки были строчно-блочными */
    text-decoration: none !important; /* Убираем подчеркивание */
}

/* Эффект при наведении на кнопки */
button:hover,
.auth-btn:hover,
.submit-btn:hover,
.cancel-btn:hover,
.logout-btn:hover,
.create-topic-btn:hover,
.toggle-comments-btn:hover,
.reply-btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
#show-login-btn:hover,
#show-register-btn:hover,
#cancel-login-btn:hover,
#cancel-register-btn:hover,
#register-submit-btn:hover,
#logout-btn:hover,
#show-topic-form-btn:hover,
#cancel-topic-btn:hover,
.submit-btnsmall:hover,
.cancel-reply-btn:hover {
    background-color: #0056b3 !important; /* Темнее при наведении */
    border-color: #003d82 !important; /* Еще темнее рамка */
    transform: translateY(-2px) !important; /* Легкий подъем */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Тень */
}

/* Эффект при нажатии на кнопки */
button:active,
.auth-btn:active,
.submit-btn:active,
.cancel-btn:active,
.logout-btn:active,
.create-topic-btn:active,
.toggle-comments-btn:active,
.reply-btn:active,
.btn-primary:active,
.btn-secondary:active,
#show-login-btn:active,
#show-register-btn:active,
#cancel-login-btn:active,
#cancel-register-btn:active,
#register-submit-btn:active,
#logout-btn:active,
#show-topic-form-btn:active,
#cancel-topic-btn:active,
.submit-btnsmall:active,
.cancel-reply-btn:active {
    background-color: #004494 !important; /* Еще темнее при нажатии */
    transform: translateY(0) !important; /* Возвращаем на место */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; /* Меньшая тень */
}

/* Стили для аватарок */
.avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Круглая для тем и комментариев */
    border: 2px solid #4a6fa5;
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.avatar-square {
    width: 60px;
    height: 60px;
    border-radius: 8px; /* Квадратная для профиля */
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: left;
    overflow: hidden;
    margin-left: 0 !important;
}

img {
    margin-left: 0 !important;
}

.avatar-small img,
.avatar-square img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Обрезается и сжимается под размер */
    margin-left: 0 !important;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background-color: #d9fffe;
    border-radius: 8px;
}

.user-avatar {
    flex-shrink: 0;
}

#user-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background-color: #ffffff;
    border: 2px solid #4a6fa5;
}

#user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Улучшенные стили для кнопок комментариев */
.toggle-comments-btn {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background-color: #4a6fa5;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.toggle-comments-btn:hover {
    background-color: #3a5a8a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.toggle-comments-btn:active {
    transform: translateY(0);
}

.toggle-comments-btn .arrow-icon {
    transition: transform 0.3s ease;
}

.comments-container {
    margin-top: 15px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* Адаптивность для боковой панели */
@media (max-width: 1200px) {
    aside {
        width: 25vw;
        min-width: 25vw;
        max-width: 25vw;
    }

    .sidebar-header h3 {
        font-size: 1.7rem !important;
    }

    .nav-btn {
        height: 55px !important;
        min-height: 55px !important;
        font-size: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    aside {
        width: 30vw;
        min-width: 30vw;
        max-width: 30vw;
        padding: 15px 10px;
    }

    .sidebar-header h3 {
        font-size: 1.5rem !important;
        margin-bottom: 20px !important;
    }

    .nav-btn {
        height: 50px !important;
        min-height: 50px !important;
        font-size: 0.95rem !important;
        border-radius: 10px !important;
    }

    .sidebar-nav {
        gap: 15px !important;
        margin-top: 30px !important;
    }
}

@media (max-width: 480px) {
    aside {
        width: 35vw;
        min-width: 35vw;
        max-width: 35vw;
        padding: 10px 8px;
    }

    .sidebar-header h3 {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
        padding: 8px !important;
    }

    .nav-btn {
        height: 45px !important;
        min-height: 45px !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
        padding: 0 5px !important;
    }

    .sidebar-nav {
        gap: 12px !important;
        margin-top: 20px !important;
    }
}

/* Для очень широких экранов */
@media (min-width: 1600px) {
    aside {
        width: 18vw;
        min-width: 18vw;
        max-width: 18vw;
    }

    .sidebar-header h3 {
        font-size: 2.2rem !important;
    }

    .nav-btn {
        height: 65px !important;
        min-height: 65px !important;
        font-size: 1.2rem !important;
    }

    .sidebar-nav {
        gap: 25px !important;
    }
}

/* Гарантируем, что все элементы начинаются от левого края */
*:not(aside):not(aside *) {
    margin-left: 6% !important;
    padding-left: 0 !important;
    position: relative;
    left: 0;
}

#show-login-btn,
#show-register-btn {
    margin: 0 !important;
    margin-top: 20px;
}

.auth-buttons {
    margin-top: 20px;
}

.topic-header-left {
    margin: 0 !important;
    width: 300px;
    background-color: #ffffff;
}

.topic-header-right {
    width: 200px;
    background-color: #ffffff;
}

.topic-category, .topic-date, .topic-title, .topic-content-preview, .topic-author, .author-name, .topic-stats, .comments-count, .count, .comments-list, .comment-item,
.comment-header, .comment-header-left, .comment-header-right, .comment-date, .comment-author, .comment-actions, .comment-content, .comment-form-container, .comment-form,
.comment-content, .char-counter, textarea[name="comment-content"] {
background-color: #ffffff;
}

.comment-header-right {
    margin-left: 0 !important;
    width: 15%;
}

.topic-header-right {
    margin-left: 0 !important;
}

.topic-author .avatar-small, .author-name, .topic-stats .comments-count .count {
    margin-left: 0 !important;
}

.btn-text, .comments-count-text {
    background-color: #007bff;
}

span .topic-category, .comment-header-left, .reply-btn, .comment-form-container, .form-group, .submit-btn, .comment-content, .comment-header {
    margin-left: 0 !important;
}

.form-actions, .comment-content, .comment-form .form-group {
    margin-top: 30px !important;
    margin-left: 0% !important;
    background-color: #ffffff;
}

/* Сбрасываем все возможные отступы */
.reply-form,
.reply-form * {
    box-sizing: border-box;
    text-align: left !important;
}

/* Сам контейнер формы */
.reply-form {
    margin: 0 !important;
    padding: 0 !important;
    float: left;
    width: 100%;
}

/* Форма */
.comment-form {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    width: 100%;
}

/* Группа с текстовым полем */
.form-group {
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    text-align: left;
}

/* Текстовое поле */
.comment-form textarea {
    display: block;
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 10px !important;
    text-align: left;
    resize: vertical;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
}

/* Счетчик символов */
.char-counter {
    margin: 5px 0 0 0 !important;
    padding: 0 !important;
    font-size: 12px;
    color: #666;
    text-align: left;
}

/* Кнопки */
.form-actions {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap;
}

/* Все кнопки внутри формы */
.comment-form button {
    margin-left: 0 !important;
    margin-right: 10px;
    float: left;
}

/* Последняя кнопка не имеет правого отступа */
.comment-form button:last-child {
    margin-right: 0;
}

/* Убираем любые внешние отступы у родительских элементов */
.comment-form,
.comment-form > *,
.reply-form > * {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.topics-form .form-group, .forms-group{
    margin-left: 0 !important;
    background-color: #d9fffe;
}

.chars-counter, #topic-title, .form-group {
    background-color: #d9fffe;
}

#topics-form .form-actions {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    margin: 6% !important;
    padding: 0 !important;
    flex-wrap: wrap;
    background-color: #d9fffe;
}

.auth-form .form-actions {
    background-color: #d9fffe;
    margin-left: 6% !important;
}















/* ASIDE */

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

aside {
    width: 20vw;
    min-width: 20vw;
    max-width: 20vw;
    height: 100%;
    background-color: #90bffc;
    background: linear-gradient(180deg, #0954b8 0%, #90bffc 100%);
    color: white;
    padding: 20px 15px;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    margin: 0;
    border: none;
    float: none;
    display: block;
    /* Декоративные эффекты */
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

/* ===== ДОБАВЬТЕ ЭТО ПРАВИЛО ДЛЯ ЯРКОСТИ ТЕКСТА ===== */
.sidebar-header h3,
.nav-btn {
    /* Усиленная видимость текста */
    filter: brightness(1.2);
    opacity: 1 !important;
    visibility: visible !important;
}

/* Заголовок боковой панели - шрифт Bad Script */
.sidebar-header h3 {
    font-family: "Bad Script", cursive !important;
    font-size: 2rem !important;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0 0 8px rgba(0, 0, 0, 1) !important;
    font-weight: 700 !important;
    text-align: center;
    margin-bottom: 30px !important;
    padding: 10px !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease;
    display: block;
}

.nav-btn {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 0 6px rgba(0, 0, 0, 0.9) !important;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: 2px solid #ffffff !important;
    border-radius: 12px !important;
    height: 60px !important;
    min-height: 60px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    width: 95% !important;
    max-width: 95% !important;
    font-family: "Comic Relief", "Comic Sans MS", "Comic Sans", cursive !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Эффект при наведении на кнопку */
.nav-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
}

/* Эффект при нажатии на кнопку */
.nav-btn:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Контейнер для кнопок */
.sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
    margin-top: 40px !important;
    transition: all 0.3s ease;
}

/* Ссылки-контейнеры для кнопок */
.sidebar-button {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    transition: all 0.3s ease;
}

*:not(aside):not(aside *) {
    margin-left: 6% !important;
    box-sizing: border-box;
    background-color: #d9fffe;
    transition: margin-left 0.3s ease;
}

/* Основные изменения - sidebar превращается в синюю полосу со стрелкой */
@media (max-width: 1201px) {
    aside {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        padding: 0 !important;
        overflow: hidden;
        cursor: pointer;
    }

    /* Скрываем ВСЁ содержимое в свернутом состоянии */
    .sidebar-header,
    .sidebar-nav,
    .sidebar-button,
    .nav-btn {
        display: none !important;
    }

    /* Показываем только стрелочку на синей полосе */
    aside::before {
        content: '❯';
        font-size: 24px;
        color: white;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        transition: transform 0.3s ease;
        z-index: 1001;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }

    /* Меняем стрелку при открытии */
    aside.open::before,
    aside:hover::before {
        transform: translateX(-50%) rotate(180deg);
    }

    /* При открытии показываем всё содержимое */
    aside.open {
        width: 25vw !important;
        min-width: 25vw !important;
        max-width: 25vw !important;
        padding: 20px 15px !important;
        overflow-y: auto;
    }

    aside.open .sidebar-header,
    aside.open .sidebar-nav,
    aside.open .sidebar-button,
    aside.open .nav-btn {
        display: flex !important;
    }

    /* Адаптируем отступ для основного контента */
    *:not(aside):not(aside *) {
        margin-left: 50px !important;
    }

    aside.open ~ *:not(aside):not(aside *) {
        margin-left: 25vw !important;
    }

    /* Стили для открытого состояния */
    .sidebar-header h3 {
        font-size: 1.5rem !important;
        margin-bottom: 20px !important;
    }

    .nav-btn {
        font-size: 1rem !important;
        height: 50px !important;
        min-height: 50px !important;
    }
}

/* Hover эффект для раскрытия (опционально) */
@media (max-width: 1201px) {
    aside:hover {
        width: 25vw !important;
        min-width: 25vw !important;
        max-width: 25vw !important;
        padding: 20px 15px !important;
        overflow-y: auto;
    }

    aside:hover .sidebar-header,
    aside:hover .sidebar-nav,
    aside:hover .sidebar-button,
    aside:hover .nav-btn {
        display: flex !important;
    }

    aside:hover ~ *:not(aside):not(aside *) {
        margin-left: 25vw !important;
    }
}

/* Для мобильных устройств */
@media (max-width: 768px) {
    aside {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
    }

    aside::before {
        font-size: 20px;
        top: 15px;
    }

    *:not(aside):not(aside *) {
        margin-left: 40px !important;
    }

    aside.open,
    aside:hover {
        width: 35vw !important;
        min-width: 35vw !important;
        max-width: 35vw !important;
    }

    aside.open ~ *:not(aside):not(aside *),
    aside:hover ~ *:not(aside):not(aside *) {
        margin-left: 35vw !important;
    }

    .sidebar-header h3 {
        font-size: 1.2rem !important;
        margin-bottom: 15px !important;
    }

    .nav-btn {
        height: 45px !important;
        min-height: 45px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    aside {
        width: 35px !important;
        min-width: 35px !important;
        max-width: 35px !important;
    }

    aside::before {
        font-size: 18px;
        top: 12px;
    }

    *:not(aside):not(aside *) {
        margin-left: 35px !important;
    }

    aside.open,
    aside:hover {
        width: 45vw !important;
        min-width: 45vw !important;
        max-width: 45vw !important;
    }

    aside.open ~ *:not(aside):not(aside *),
    aside:hover ~ *:not(aside):not(aside *) {
        margin-left: 45vw !important;
    }

    .sidebar-header h3 {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
        padding: 5px !important;
    }

    .nav-btn {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
    }

    .sidebar-nav {
        gap: 12px !important;
        margin-top: 20px !important;
    }
}

/* Для очень широких экранов */
@media (min-width: 1600px) {
    aside {
        width: 18vw;
        min-width: 18vw;
        max-width: 18vw;
    }

    .sidebar-header h3 {
        font-size: 2.2rem !important;
    }

    .nav-btn {
        height: 65px !important;
        min-height: 65px !important;
        font-size: 1.2rem !important;
    }

    .sidebar-nav {
        gap: 25px !important;
    }
}

@media (max-width: 1201px) {
    *:not(aside):not(aside *) {
        margin-left: 2% !important;
    }
}