/* Основные стили */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #000;
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden; /* Убираем горизонтальную прокрутку */
}

body.dark-theme {
    background-color: #121212;
    color: #ffffff;
}

header, footer {
    transition: background-color 0.3s, border-color 0.3s;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    height: 100px; /* Фиксированная высота для header */
}

header .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

header .logo img {
    height: 90px;
    transition: filter 0.3s;
}

body.dark-theme header .logo img {
    filter: invert(1);
}

header nav {
    margin-left: auto;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 20px;
}

header nav ul li a {
    text-decoration: none;
    color: #000;
    font-size: 1rem;
    transition: color 0.3s;
}

body.dark-theme header nav ul li a {
    color: #fff;
}

#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #000;
    display: flex;
    align-items: center;
    transition: color 0.3s;
}

body.dark-theme #theme-toggle {
    color: #fff;
}

/* Стили для бургер-меню */
.burger-menu {
    display: none; /* По умолчанию скрываем */
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    padding: 10px;
    z-index: 1000; /* Убедимся, что бургер-меню выше других элементов */
}

.burger-menu span {
    width: 25px;
    height: 3px;
    background-color: #000;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Темная тема для бургера */
body.dark-theme .burger-menu span {
    background-color: #fff;
}

/* Анимация бургера при открытии */
.burger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger-menu.active span:nth-child(2) {
    opacity: 0;
}

.burger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Стили для мобильной версии */
@media (max-width: 768px) {
    .burger-menu {
        display: flex; /* Показываем бургер на мобильных устройствах */
    }

    .nav-links {
        display: none; /* Скрываем пункты меню по умолчанию */
        flex-direction: column;
        position: absolute;
        top: 100px; /* Отступ от верхнего края */
        right: 20px;
        background-color: #fff;
        border: 1px solid #d2d2d7;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        gap: 5px; /* Уменьшаем расстояние между пунктами меню */
        z-index: 1001; /* Убедимся, что меню выше других элементов */
    }

    body.dark-theme .nav-links {
        background-color: #1c1c1e;
        border-color: #333;
    }

    .nav-links li {
        margin: 5px 0; /* Уменьшаем отступы между пунктами меню */
    }

    .nav-links.active {
        display: flex; /* Показываем меню */
        opacity: 1;
        transform: translateY(0);
    }

    /* Кнопка переключения темы */
    .theme-toggle-container {
        display: block; /* Показываем контейнер */
        margin-right: 10px; /* Отступ от бургер-меню */
    }

    /* Убираем кнопку переключения темы из меню */
    .nav-links li:has(#theme-toggle) {
        display: none;
    }

    /* Выравниваем бургер-меню и кнопку темы */
    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .burger-menu {
        order: 2; /* Бургер-меню справа */
    }

    .theme-toggle-container {
        order: 1; /* Кнопка темы слева */
    }

    .logo {
        order: 0; /* Логотип по центру */
    }
}

/* Стили для ПК */
@media (min-width: 769px) {
    .burger-menu {
        display: none; /* Скрываем бургер на ПК */
    }

    .nav-links {
        display: flex; /* Показываем пункты меню */
        gap: 20px;
        align-items: center;
    }
    
    /* Увеличиваем отступ между кнопкой "Блог" и кнопкой переключения темы */
    /*.nav-links li:last-child { */
    /*    margin-right: 30px; /* Добавляем отступ справа для кнопки "Блог" */
    /*} */

    /* Показываем контейнер с кнопкой темы на ПК */
    .theme-toggle-container {
        display: flex;
        align-items: center;
        margin-right: 20px; /* Отступ от правого края */
        margin-left: 10px; /* Добавляем отступ слева для кнопки темы */
    }

    /* Позиционируем кнопку темы в правой части шапки */
    header {
        justify-content: space-between; /* Распределяем элементы по ширине */
    }

    .theme-toggle-container {
        order: 3; /* Кнопка темы справа */
    }
}

/* Стили для футера */
footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #f5f5f7;
    border-top: 1px solid #d2d2d7;
    text-align: center;
}

body.dark-theme footer {
    background-color: #1c1c1e;
    border-top: 1px solid #333;
    color: #ffffff;
}

body.dark-theme footer .copyright {
    color: #ffffff;
}

/* Иконки социальных сетей */
body.dark-theme footer .social-icon img {
    filter: none;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Стили для главной страницы */
.book-featured {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
    position: relative; /* Добавляем относительное позиционирование */
    z-index: 1; /* Убедимся, что блок с обложкой ниже меню */
}

.book-featured .book-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 800px;
    width: 100%;
    padding: 20px;
    background-color: #fff;
    border: 5px solid #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

body.dark-theme .book-featured .book-wrapper {
    background-color: #1c1c1e;
    border-color: #333;
    color: #fff;
}

.book-cover-wrapper {
    position: relative;
    flex-shrink: 0;
}

.book-cover-wrapper img {
    max-width: 300px;
    height: auto;
    display: block;
    border-radius: 10px;
}

.new-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff4757;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: bold;
}

.book-content {
    flex-grow: 1;
}

.book-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
    transition: color 0.3s;
}

body.dark-theme .book-description {
    color: #fff;
}

.read-button {
    display: block;
    margin: 0 auto;
    padding: 12px 40px;
    background-color: #007aff;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    transition: background-color 0.3s, transform 0.3s;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}

.read-button:hover {
    background-color: #005bb5;
    transform: scale(1.05);
}

.book-covers {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.book-covers img {
    max-width: 200px;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.book-covers img:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.hardcover-books {
    text-align: center;
    margin-bottom: 40px;
}

.hardcover-books .section-header {
    margin-bottom: 20px;
}

.all-works-button {
    display: inline-block;
    padding: 12px 40px;
    background-color: #007aff;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
}

.all-works-button:hover {
    background-color: #005bb5;
    transform: scale(1.05);
}

.social-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.social-icon img {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
}

.social-icon:hover img {
    transform: scale(1.2);
}

.copyright {
    font-size: 14px;
    color: #000;
}

/* Стили для библиотеки */
.library {
    padding: 40px 20px;
    text-align: center;
}

.category {
    margin-bottom: 60px;
}

.category h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #000;
    transition: color 0.3s;
}

body.dark-theme .category h2 {
    color: #fff;
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.book-item {
    background-color: #fff;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, background-color 0.3s;
}

body.dark-theme .book-item {
    background-color: #1c1c1e;
    border-color: #333;
}

.book-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.book-item img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
}

.book-item h3 {
    font-size: 1.2rem;
    color: #000;
    margin: 0;
    transition: color 0.3s;
}

body.dark-theme .book-item h3 {
    color: #fff;
}

/* Новый блок: Аудиокниги */
.audiobooks {
    text-align: center;
    margin-bottom: 40px;
}

.audiobooks h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #000;
    transition: color 0.3s;
}

body.dark-theme .audiobooks h2 {
    color: #fff;
}

.audiobooks .book-covers img {
    max-width: 200px;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.audiobooks .book-covers img:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Стили для страницы книги */
.book-info {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

.book-info-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    max-width: 800px;
    width: 100%;
    padding: 20px;
    background-color: #fff;
    border: 5px solid #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, border-color 0.3s;
}

/* Для мобильных устройств */
@media (max-width: 768px) {
    .book-info-wrapper {
        flex-direction: column; /* Вертикальное расположение */
        align-items: center; /* Центрируем элементы */
        text-align: center; /* Выравниваем текст по центру */
        padding: 15px; /* Уменьшаем отступы */
    }

    .book-cover img {
        max-width: 200px; /* Уменьшаем размер обложки */
    }

    .book-details {
        text-align: center; /* Центрируем текст */
    }

    .book-actions {
        display: flex;
        flex-direction: column; /* Кнопки вертикально */
        align-items: center; /* Центрируем кнопки по горизонтали */
        gap: 10px; /* Расстояние между кнопками */
    }

    .action-button {
        width: 100%; /* Кнопки на всю ширину */
        max-width: 200px; /* Ограничиваем ширину кнопок */
        text-align: center; /* Центрируем текст внутри кнопок */
    }
}

body.dark-theme .book-info-wrapper {
    background-color: #1c1c1e;
    border-color: #333;
}

.book-cover img {
    max-width: 300px;
    height: auto;
    border-radius: 10px;
}

.book-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.book-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center; /* Центрируем кнопки по горизонтали */
}

.action-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 40px; /* Ширина как у кнопки "Все произведения" */
    background-color: #007aff;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
    white-space: nowrap;
}

.action-button:hover {
    background-color: #005bb5;
    transform: scale(1.05);
}

.delete-button {
    background-color: #ff4757;
}

.delete-button:hover {
    background-color: #cc3a4a;
}

.divider {
    width: 80%;
    height: 1px;
    background-color: #d2d2d7;
    margin: 40px auto;
}

.book-annotation {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    margin-bottom: 60px;
}

.book-annotation h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
    color: #000;
}

.book-annotation p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* Темная тема */
body.dark-theme .book-details h1,
body.dark-theme .book-details p,
body.dark-theme .book-annotation h2,
body.dark-theme .book-annotation p {
    color: #fff;
}

body.dark-theme .divider {
    background-color: #333;
}

/* Стили для страницы 404 */
.error-404 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
    text-align: center;
}

.error-content h1 {
    font-size: 6rem;
    margin: 0;
    color: #007aff;
}

.error-content p {
    font-size: 1.5rem;
    margin: 10px 0 20px;
    color: #000;
}

body.dark-theme .error-content p {
    color: #fff;
}

.home-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #007aff;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
    border: none;
    cursor: pointer;
}

.home-button:hover {
    background-color: #005bb5;
    transform: scale(1.05);
}

/* Стили для новостей */
.news-section {
    padding: 40px 20px;
    max-width: 800px;
    margin: 0 auto;
}

.news-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-item {
    padding: 20px;
    background-color: #fff;
    border: 5px solid #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden; /* Скрываем содержимое, выходящее за пределы */
    word-wrap: break-word; /* Перенос длинных слов */
}

body.dark-theme .news-item {
    background-color: #1c1c1e;
    border-color: #333;
}

.news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.news-content h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #000;
}

body.dark-theme .news-content h2 {
    color: #fff;
}

.news-date {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}

.news-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    overflow-wrap: break-word; /* Перенос длинных слов */
    word-break: break-word; /* Перенос слов, если они не помещаются */
}

body.dark-theme .news-text {
    color: #fff;
}

/* Убираем подчеркивание и изменяем цвет ссылок в новостях */
.news-text a {
    text-decoration: none; /* Убираем подчеркивание */
    color: inherit; /* Наследуем цвет текста */
}

body.dark-theme .news-text a {
    color: inherit; /* Наследуем цвет текста */
}

.news-content img {
    max-width: 100%; /* Ограничиваем ширину изображений */
    height: auto; /* Сохраняем пропорции */
    border-radius: 10px; /* Скругление углов */
    margin-bottom: 15px; /* Отступ снизу */
}

.news-text img {
    max-width: 100%; /* Ограничиваем ширину изображений */
    height: auto; /* Сохраняем пропорции */
    border-radius: 10px; /* Скругление углов */
    margin: 10px 0; /* Отступы сверху и снизу */
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.pagination a {
    padding: 10px 15px;
    background-color: #007aff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.pagination a.active {
    background-color: #005bb5;
}

.pagination a:hover {
    background-color: #005bb5;
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    .news-item {
        padding: 10px; /* Уменьшаем отступы для мобильных устройств */
        margin: 5px 0; /* Уменьшаем отступы между новостями */
    }

    .news-content h2 {
        font-size: 1.2rem; /* Уменьшаем размер заголовка */
    }

    .news-text {
        font-size: 0.9rem; /* Уменьшаем размер текста */
    }

    .news-content img {
        margin-bottom: 10px; /* Уменьшаем отступ снизу */
    }

    /* Убираем лишние отступы и уменьшаем размеры */
    .news-grid {
        gap: 10px; /* Уменьшаем расстояние между новостями */
    }

    .pagination {
        gap: 5px; /* Уменьшаем расстояние между кнопками пагинации */
    }

    .pagination a {
        padding: 8px 12px; /* Уменьшаем размер кнопок пагинации */
        font-size: 0.9rem; /* Уменьшаем размер текста */
    }
}

/* Улучшение отображения на очень маленьких экранах */
@media (max-width: 480px) {
    .news-item {
        padding: 8px; /* Еще меньше отступы */
    }

    .news-content h2 {
        font-size: 1rem; /* Еще меньше размер заголовка */
    }

    .news-text {
        font-size: 0.8rem; /* Еще меньше размер текста */
    }

    .pagination a {
        padding: 6px 10px; /* Еще меньше размер кнопок пагинации */
        font-size: 0.8rem; /* Еще меньше размер текста */
    }
}

/* Стили для админки */
.admin-login {
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, border-color 0.3s;
}

body.dark-theme .admin-login {
    background-color: #1c1c1e;
    border-color: #333;
}

.admin-login label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #000;
}

body.dark-theme .admin-login label {
    color: #fff;
}

.admin-login input {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #d2d2d7;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

body.dark-theme .admin-login input {
    background-color: #2c2c2e;
    border-color: #444;
    color: #fff;
}

.admin-login button {
    width: 100%;
    padding: 10px;
    background-color: #007aff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.admin-login button:hover {
    background-color: #005bb5;
}

/* Чекбокс "Сохранить пароль" */
.remember-me {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
}

.remember-me input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
}

.remember-me label {
    margin: 0;
    font-weight: normal;
    white-space: nowrap;
}

.error {
    color: #ff4757;
    text-align: center;
    margin-bottom: 20px;
}

.admin-dashboard {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
}

.admin-dashboard h1 {
    text-align: center;
    margin-bottom: 20px;
}

.actions {
    margin-bottom: 20px;
}

.search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.search-form input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #d2d2d7;
    border-radius: 5px;
    max-width: 400px;
}

.search-form .reset-button {
    background-color: #ff4757;
}

.search-form .reset-button:hover {
    background-color: #cc3a4a;
}

.news-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
    max-width: 800px;
}

body.dark-theme .news-item {
    background-color: #1c1c1e;
    border-color: #333;
}

.news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.news-content {
    flex-grow: 1;
}

.news-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-actions .read-button {
    width: 100px;
    text-align: center;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination a {
    padding: 10px 15px;
    background-color: #007aff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.pagination a.active {
    background-color: #005bb5;
}

.pagination a:hover {
    background-color: #005bb5;
}

/* Стили для TinyMCE */
.tox-tinymce {
    border-radius: 10px !important;
    margin-bottom: 20px;
}

body.dark-theme .tox-tinymce {
    border-color: #333 !important;
}

/* Стили для формы добавления новости */
.admin-form {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, border-color 0.3s;
}

body.dark-theme .admin-form {
    background-color: #1c1c1e;
    border-color: #333;
}

.admin-form h1 {
    text-align: center;
    margin-bottom: 20px;
}

.admin-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #000;
}

body.dark-theme .admin-form label {
    color: #fff;
}

.admin-form input {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #d2d2d7;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

body.dark-theme .admin-form input {
    background-color: #2c2c2e;
    border-color: #444;
    color: #fff;
}

.admin-form textarea {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #d2d2d7;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

body.dark-theme .admin-form textarea {
    background-color: #2c2c2e;
    border-color: #444;
    color: #fff;
}

.form-actions {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
}

.read-button {
    padding: 10px 20px;
    background-color: #007aff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    font-size: 0.9rem;
}

.read-button:hover {
    background-color: #005bb5;
    transform: scale(1.05);
}

.cancel-button {
    background-color: #ff4757;
}

.cancel-button:hover {
    background-color: #cc3a4a;
}

.error {
    color: #ff4757;
    text-align: center;
    margin-bottom: 20px;
}

/* Стили для страницы users.php */
.user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    margin-bottom: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

body.dark-theme .user-item {
    background-color: #1c1c1e;
    border-color: #333;
}

.user-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.user-content {
    flex-grow: 1;
}

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

.action-button {
    display: inline-block;
    padding: 12px 40px;
    background-color: #007aff;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
    white-space: nowrap;
}

.action-button:hover {
    background-color: #005bb5;
    transform: scale(1.05);
}

.delete-button {
    background-color: #ff4757;
}

.delete-button:hover {
    background-color: #cc3a4a;
}

/* Стили для кнопок на странице mama-ne-navsegda.php */
.unique-buttons {
    display: flex;
    gap: 10px; /* Расстояние между кнопками */
    justify-content: flex-start; /* Выравнивание кнопок по левому краю */
    flex-wrap: nowrap; /* Запрет переноса кнопок на новую строку */
    max-width: 100%; /* Ограничение ширины контейнера */
    overflow: hidden; /* Скрытие содержимого, выходящего за пределы */
    padding: 0 10px; /* Отступы слева и справа */
}

.unique-buttons .action-button {
    flex: 1; /* Равномерное распределение ширины кнопок */
    white-space: nowrap; /* Запрет переноса текста на кнопках */
    text-align: center; /* Выравнивание текста по центру */
    padding: 10px 15px; /* Уменьшение отступов */
    font-size: 0.9rem; /* Уменьшение размера текста */
    box-sizing: border-box; /* Учет отступов и границ в общей ширине */
    max-width: calc(33.33% - 10px); /* Ограничение ширины кнопок */
}

.unique-buttons .action-button:hover {
    transform: scale(1.05); /* Эффект увеличения при наведении */
    transition: transform 0.3s ease; /* Плавный переход */
}

/* Стили для блога */
.blog-section {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.tag-cloud {
    margin-bottom: 40px;
    text-align: center;
}

.tag-cloud .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.tag-cloud .tag {
    padding: 8px 16px;
    background-color: #007aff;
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: background-color 0.3s, transform 0.3s;
}

.tag-cloud .tag:hover {
    background-color: #005bb5;
    transform: scale(1.05);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr; /* Одна колонка на мобильных устройствах */
    }
}

.blog-post {
    background-color: #fff;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

body.dark-theme .blog-post {
    background-color: #1c1c1e;
    border-color: #333;
}

.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.blog-post img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-post a {
    text-decoration: none; /* Убираем подчеркивание у ссылок */
}

.blog-post h2 {
    font-size: 1.2rem;
    margin: 15px;
    color: #000;
    transition: color 0.3s;
}

body.dark-theme .blog-post h2 {
    color: #fff;
}

.blog-post .post-date {
    font-size: 0.9rem;
    color: #666;
    margin: 0 15px 15px;
    transition: color 0.3s;
}

body.dark-theme .blog-post .post-date {
    color: #aaa;
}

.post-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.post-content img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
}

.post-content .post-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* Стили для ссылок в посте */
.post-content a {
    text-decoration: underline; /* Подчеркивание ссылок */
    color: inherit; /* Наследование цвета текста */
}

/* Для темной темы */
body.dark-theme .post-content a {
    color: inherit; /* Наследование цвета текста */
}

body.dark-theme .post-content .post-text {
    color: #ddd;
}

/* Стили для админки */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.post-item {
    background-color: #fff;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    padding: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

body.dark-theme .post-item {
    background-color: #1c1c1e;
    border-color: #333;
}

.post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.post-content h2 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.post-date {
    font-size: 0.9rem;
    color: #666;
}

.post-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Стили для тегов в посте */
.post-tags {
    margin-top: 20px;
    padding-top: 0; /* Убираем отступ сверху */
    border-top: none; /* Убираем разделитель */
}

.post-tags h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #000;
}

body.dark-theme .post-tags h3 {
    color: #fff;
}

.post-tags .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.post-tags .tag {
    padding: 8px 16px;
    background-color: #007aff;
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: background-color 0.3s, transform 0.3s;
}

.post-tags .tag:hover {
    background-color: #005bb5;
    transform: scale(1.05);
}

/* Стили для тегов */
#tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    border: 1px solid #d2d2d7;
    border-radius: 5px;
    background-color: #fff;
    transition: background-color 0.3s, border-color 0.3s;
}

body.dark-theme #tags-container {
    background-color: #1c1c1e;
    border-color: #333;
}

.tag {
    background-color: #007aff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    transition: background-color 0.3s, transform 0.3s;
}

.tag .remove-tag {
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    transition: color 0.3s;
}

.tag .remove-tag:hover {
    color: #ff4757;
}

#tags-input {
    border: none;
    outline: none;
    flex-grow: 1;
    padding: 5px;
    background-color: transparent;
    color: #000;
    transition: color 0.3s;
}

body.dark-theme #tags-input {
    color: #fff;
}

/* Навигация между постами */
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Отступ между кнопками */
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #d2d2d7;
    max-width: 100%; /* Ограничиваем ширину контейнера */
    width: 100%; /* Занимает всю доступную ширину */
}

.post-navigation .nav-button {
    text-decoration: none;
    color: inherit; /* Наследуем цвет текста от темы */
    font-size: 1rem;
    transition: color 0.3s, border-color 0.3s;
    padding: 10px 20px; /* Внутренние отступы для кнопок */
    border: 1px solid currentColor; /* Граница наследует цвет текста */
    border-radius: 5px; /* Скругление углов */
    text-align: center; /* Выравнивание текста по центру */
    background-color: transparent; /* Прозрачный фон */
    flex: 1; /* Равномерное распределение ширины */
    max-width: calc(50% - 10px); /* Максимальная ширина кнопки */
}

.post-navigation .nav-button:hover {
    color: #007aff; /* Цвет при наведении (можно оставить синим или изменить) */
    border-color: #007aff; /* Цвет границы при наведении */
}

.post-navigation .prev-post {
    text-align: left;
}

.post-navigation .next-post {
    text-align: right;
}

/* Для темной темы */
body.dark-theme .post-navigation {
    border-top-color: #333;
}

body.dark-theme .post-navigation .nav-button {
    color: inherit; /* Наследуем цвет текста от темы */
    border-color: currentColor; /* Граница наследует цвет текста */
}

body.dark-theme .post-navigation .nav-button:hover {
    color: #007aff; /* Цвет при наведении (можно оставить синим или изменить) */
    border-color: #007aff; /* Цвет границы при наведении */
}

.nav-divider {
    width: 1px;
    background-color: #d2d2d7;
    margin: 0 10px;
}

body.dark-theme .nav-divider {
    background-color: #333;
}

.draft-label {
    background-color: #ff4757;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    margin-left: 10px;
}

/* Зазор между переключателем постов и Remark42 */
#remark42 {
    margin-top: 20px; /* Отступ сверху */
}

/* Оптимизация для мобильных устройств */
@media (max-width: 768px) {
    /* Первый блок (книга, текст и кнопка) */
    .book-featured .book-wrapper {
        flex-direction: column; /* Вертикальное расположение */
        align-items: center; /* Центрируем элементы */
        text-align: center; /* Выравниваем текст по центру */
    }

    .book-cover-wrapper img {
        max-width: 250px; /* Увеличиваем размер обложки */
    }

    .book-content {
        text-align: center; /* Центрируем текст */
    }

    .book-description {
        font-size: 0.9rem; /* Уменьшаем размер текста */
    }

    .read-button {
        width: 100%; /* Кнопка на всю ширину */
        max-width: 200px; /* Ограничиваем ширину кнопки */
    }

    /* Блоки с книгами (Аудиокниги, В твердом переплете, Все произведения) */
    .book-covers,
    .hardcover-books .book-covers,
    .audiobooks .book-covers {
        flex-direction: column; /* Вертикальное расположение */
        align-items: center; /* Центрируем обложки */
        gap: 10px; /* Расстояние между обложками */
    }

    .book-covers img,
    .hardcover-books .book-covers img,
    .audiobooks .book-covers img {
        max-width: 250px; /* Увеличиваем размер обложек */
    }

    /* Уменьшение отступов */
    .book-featured,
    .hardcover-books,
    .audiobooks {
        padding: 10px; /* Уменьшаем отступы */
    }

    .book-featured .book-wrapper {
        padding: 10px; /* Уменьшаем отступы внутри блока */
    }

    .hardcover-books h2,
    .audiobooks h2 {
        font-size: 1.5rem; /* Уменьшаем размер заголовков */
    }

    /* Уменьшение размера кнопок */
    .read-button,
    .all-works-button {
        padding: 10px 20px; /* Уменьшаем отступы */
        font-size: 0.9rem; /* Уменьшаем размер текста */
    }
}