/* === БАЗОВАЯ РАСКЛАДКА СТРАНИЦЫ === */
/* Здесь общий фон, ширина приложения, главный заголовок и сетка карточек. */

/* --- Страница и контейнер --- */

/* Всегда резервируем место под вертикальную полосу прокрутки, чтобы сетка не смещалась */
html {
    scrollbar-gutter: stable;
    scrollbar-color: rgba(202, 26, 146, 0.4) transparent;
}

body {
    scrollbar-color: rgba(202, 26, 146, 0.4) transparent;
}

html::-webkit-scrollbar {
    width: 12px;
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 9999px;
    background: rgba(202, 26, 146, 0.4);
    background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
.book-page-genre-column::-webkit-scrollbar-thumb:hover {
    background-color: rgba(202, 26, 146, 0.7);
}

/* Экран входа занимает всё окно, поэтому скроллбар страницы за ним не нужен */
html:has(.auth-screen:not(.hidden)) {
    overflow: hidden;
    scrollbar-gutter: auto;
}

.book-page-genre-column::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 9999px;
    background-color: rgba(202, 26, 146, 0.4);
    background-clip: padding-box;
}

/* Перетаскиваемая карточка не должна создавать горизонтальную прокрутку страницы */
html:has(.dragging),
body:has(.dragging) {
    overflow-x: clip;
    contain: paint;
}

body:has(.book-card.dragging),
body:has(.series-card.dragging),
body:has(.collection-card.dragging),
body:has(.collection-section.dragging),
body:has(.book-card.dragging) *,
body:has(.series-card.dragging) *,
body:has(.collection-card.dragging) *,
body:has(.collection-section.dragging) * {
    cursor: grabbing !important;
}

/* Общий фон страницы и внешний отступ вокруг приложения */
body {
    font-family: system-ui, -apple-system, sans-serif;
    background-color: #e5b9f4;
    padding: clamp(1rem, 4vw, 2.5rem);
    margin: 0 auto;
}

/* До ответа API не показываем главную страницу за будущим экраном входа */
body.auth-pending > .container {
    visibility: hidden;
}

/* Основной контейнер: задает ширину и боковые отступы всего приложения */
.container {
    width: 100%;
    max-width: 100%;
    /* Убираем ограничение в 1200px */
    padding: 0 20px;
    /* Оставляем небольшие отступы по бокам для аккуратности */
}

/* --- Заголовок и сетка карточек --- */

/* Главный заголовок страницы и меню аккаунта */
.page-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    padding: 20px 30px;
    border-radius: 9999px;
    box-shadow: 0 10px 20px rgba(76, 29, 149, 0.15);
    margin-bottom: 30px;
}

.page-header h1 {
    color: #4c1d95;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    margin: 0;
}

.account-menu {
    position: relative;
    flex: 0 0 auto;
}

.account-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid #4c1d95;
    border-radius: 9999px;
    background: transparent;
    color: #4c1d95;
    box-shadow: 0 0 0 2px rgba(76, 29, 149, 0.25);
    cursor: pointer;
    transition: background-color .2s ease;
}

.account-menu-button:hover,
.account-menu-button[aria-expanded="true"] {
    background-color: #f5ebf8;
}

.account-menu-button:focus-visible,
.account-menu-item:focus-visible {
    outline: 3px solid rgba(109, 40, 217, .3);
    outline-offset: 3px;
}

.account-menu-button svg {
    width: 26px;
    height: 26px;
}

.account-menu-list {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 100;
    width: max-content;
    min-width: 0;
    padding: 4px;
    border: 1px solid rgba(76, 29, 149, .1);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(76, 29, 149, .2);
}

.account-menu-list.hidden {
    display: none;
}

.account-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: auto;
    padding: 7px 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #4c1d95;
    font: inherit;
    font-weight: 650;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.account-menu-item:hover {
    background: #f5edff;
}

.account-menu-item:disabled {
    opacity: .55;
    cursor: wait;
}

.account-menu-item svg {
    width: 18px;
    height: 18px;
}

/* Сетка, в которой раскладываются карточки книг и папок */
.books-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

#add-book-form.hidden,
.sort-panel.hidden {
    display: none;
}

/* === СЕРИИ: ЛИНИИ, КАРТОЧКА СЕРИИ И КНИГИ ВНУТРИ === */
/* Здесь стили для папки-серии, прогресса серии, раскрытых книг и соединительных линий. */

/* --- Соединительные линии серии --- */

/* Слой для белых линий, которые визуально связывают книги одной серии */
.series-thread-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Сама соединительная линия между книгами серии */
.series-thread {
    position: absolute;
    height: 10px;
    border-radius: 9999px;
    background: #ffffff;
    opacity: 1;
    clip-path: inset(0 100% 0 0);
}

.series-thread.search-dimmed {
    opacity: 1;
    background: #f2dcf7;
}

.series-thread.series-focus-dimmed {
    opacity: 1;
    background: #f2dcf7;
}

.series-thread.opening-thread {
    animation: showSeriesThread 0.7s ease-out var(--thread-delay, 0s) forwards;
}

.series-thread.search-dimmed.opening-thread {
    animation-name: showDimmedSeriesThread;
}

.series-thread.no-thread-animation {
    animation: none;
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

.series-thread.search-dimmed.no-thread-animation {
    opacity: 1;
}

.series-thread.hiding {
    animation: none !important;
    animation-delay: 0s !important;
    clip-path: inset(0 0 0 0);
    opacity: 0 !important;
}

/* --- Карточка серии --- */

/* Карточка папки/серии */
.series-card {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 0 0 6px #de91dc, 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 280px;
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1),
        opacity 0.8s ease,
        max-height 0.8s ease,
        padding 0.8s ease,
        margin 0.8s ease,
        background-color 0.8s ease,
        color 0.8s ease,
        box-shadow var(--series-outline-duration, 0.25s) ease;
}

body:not(:has(.dragging)) .series-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 6px #de91dc, 0 8px 16px rgba(0, 0, 0, 0.1);
}

body:not(:has(.dragging)) .series-card.open:not(.adding):not(.removing):hover {
    box-shadow: 0 0 0 6px #bf92dc, 0 8px 16px rgba(0, 0, 0, 0.1);
}

.series-card.series-closing {
    --series-outline-duration: 0s;
    box-shadow: 0 0 0 6px #de91dc, 0 4px 10px rgba(0, 0, 0, 0.05);
}

body:not(:has(.dragging)) .series-card.series-closing:hover {
    box-shadow: 0 0 0 6px #de91dc, 0 8px 16px rgba(0, 0, 0, 0.1);
}

.series-card h2 {
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    height: 70px;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.series-card .score {
    font-size: 14px;
    margin: 4px 0 12px 0;
}

.series-book-count {
    font-size: 14px;
    color: #4c1d95;
    font-weight: bold;
    font-style: italic;
    white-space: nowrap;
}

/* Метка "Серия" в карточке папки */
.series-folder-label {
    display: inline-flex;
    align-items: start;
    justify-content: center;
    padding: 6px 10px;
    border: none;
    border-radius: 9999px;
    background: #f5ebf8;
    color: #4c1d95;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.series-delete-menu {
    right: 0;
}

.series-arrow {
    display: inline-flex;
    justify-content: center;
    transition: transform 0.25s ease;
}

.series-card.open .series-arrow {
    transform: rotate(90deg);
}

.series-card.open {
    --series-outline-duration: 0s;
    box-shadow: 0 0 0 6px #bf92dc, 0 4px 10px rgba(0, 0, 0, 0.05);
}

.series-progress {
    height: 8px;
    margin: 4px 0 16px;
    overflow: hidden;
    border-radius: 9999px;
    background: #f5ebf8;
}

.series-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #ca1a92;
    transition: width 0.25s ease;
}

/* Нижняя строка карточки папки с кнопкой добавления */
.series-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.series-empty {
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
}

.series-ejected-card {
    animation: ejectSeriesBookCard 0.28s ease backwards;
    animation-delay: calc(var(--book-index) * 0.04s);
}

.series-ejected-card.no-eject-animation {
    animation: none;
    opacity: 1;
    transform: none;
}

.series-ejected-card.dragging {
    animation: none !important;
}

.series-ejected-card.series-hiding {
    animation: hideBookCard 0.24s ease both;
}

/* Номер книги внутри открытой серии */
.series-book-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    border-radius: 9999px;
    background: #f5ebf8;
    color: #4c1d95;
    font-size: 12px;
    font-weight: 800;
}

.series-book-card {
    z-index: 1;
}

/* === КОЛЛЕКЦИИ === */
/* Здесь карточка коллекции, раскрытая область коллекции, счетчики и зона для пустой коллекции. */

/* --- Обертка раскрытой коллекции --- */

/* Полноширинная зона коллекции */
.collection-section {
    box-sizing: border-box;
    grid-column: 1 / -1;
    position: relative;
    z-index: 1;
}

.collection-section.open {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
    border-radius: 14px;
}

.collection-section.open::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -6px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(-0.5px);
    pointer-events: none;
}

/* --- Карточка коллекции --- */

.collection-card {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 0 0 6px #de91dc, 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1),
        opacity 0.8s ease,
        background-color 0.8s ease,
        color 0.8s ease,
        box-shadow 0.25s ease;
}

.collection-card .card-actions {
    position: absolute;
    top: 12px;
    right: 20px;
    z-index: 2;
}

.collection-toggle {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 16px 20px;
    padding-right: 104px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #ffffff;
    color: #4c1d95;
    font-size: 18px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.8s ease, color 0.8s ease;
}

.collection-arrow {
    flex: 0 0 auto;
    width: 12px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234c1d95' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 8px;
}

.collection-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}

.collection-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    margin-left: 14px;
    line-height: 1.25;
    transform: translateY(2px);
}

.collection-count {
    display: inline-flex;
    align-items: center;
    color: #ca1a92;
    font-weight: bold;
    font-style: italic;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.25;
}

.collection-count-separator {
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: #ca1a92;
}

.collection-card.open .collection-arrow {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6.5L6 1.5L11 6.5' stroke='%234c1d95' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.collection-card.open {
    box-shadow: 0 0 0 6px #bf92dc, 0 4px 10px rgba(0, 0, 0, 0.05);
}

body:not(:has(.dragging)) .collection-card:not(.moving):not(.adding):not(.removing):hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 6px #de91dc, 0 8px 16px rgba(0, 0, 0, 0.1);
}

body:not(:has(.dragging)) .collection-card.open:not(.moving):not(.adding):not(.removing):hover {
    box-shadow: 0 0 0 6px #bf92dc, 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* --- Содержимое коллекции --- */

.collection-items-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    animation: showCollectionItems 0.42s ease both;
    transform-origin: top;
}

.collection-items-grid.no-collection-items-animation {
    animation: none;
}

.collection-section.closing .collection-items-grid {
    animation: hideCollectionItems 0.8s ease both;
}

/* --- Пустая коллекция как зона броска --- */

.collection-drop-area {
    box-sizing: border-box;
    grid-column: 1 / -1;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 86px;
    padding: 22px;
    border: 2px dashed rgba(76, 29, 149, 0.35);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    color: #6b7280;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* === АНИМАЦИИ === */
/* Здесь keyframes: появление, скрытие, выезд карточек и движение элементов. */

/* --- Анимации линий серии --- */

/* Анимации появления и скрытия линий и карточек серии */
@keyframes showSeriesThread {
    from {
        opacity: 1;
        clip-path: inset(0 100% 0 0);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes showDimmedSeriesThread {
    from {
        opacity: 1;
        clip-path: inset(0 100% 0 0);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes hideSeriesThread {
    from {
        opacity: 1;
        transform: translateX(0) scaleX(1);
    }

    to {
        opacity: 0;
        transform: translateX(-28px) scaleX(0.96);
    }
}

/* --- Анимации книг серии --- */

@keyframes ejectBookCard {
    from {
        opacity: 0;
        transform: translateX(-28px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes ejectSeriesBookCard {
    from {
        opacity: 1;
        transform: translateX(-28px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes hideBookCard {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(-28px) scale(0.96);
    }
}

/* --- Анимации коллекции --- */

@keyframes showCollectionItems {
    from {
        opacity: 0;
        transform: translateY(-12px) scaleY(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes slideBookPageValueIn {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes hideBookPageGenrePill {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-10px);
    }
}

@keyframes hideCollectionItems {
    from {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }

    65% {
        opacity: 0;
    }

    to {
        opacity: 0;
        transform: translateY(-12px) scaleY(0.96);
    }
}

/* === ФОРМЫ, ПОИСК И ПАНЕЛЬ УПРАВЛЕНИЯ === */
/* Здесь верхняя форма добавления, поиск, сортировка и кнопки создания серии/коллекции. */

/* --- Форма добавления книги --- */

/* Форма добавления и поиска книг */
#add-book-form {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Общие стили полей, списков и кнопок в форме */
#add-book-form input,
#add-book-form select,
#add-book-form button,
.score-select-button {
    padding: 9px 28px 9px 9px;
    border: 1px solid #ddd;
    border-radius: 7px;
    font-size: 14px;
    outline: none;
    transition: border 0.15s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="range"]),
textarea {
    cursor: text;
}

/* --- Кастомные выпадающие списки --- */

/* Обертки кастомных выпадающих списков оценки и статуса */
.score-select,
.status-select {
    position: relative;
    min-width: 150px;
}

.score-select-button,
.score-select-option {
    width: 100%;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
}

.score-select-option {
    padding: 9px 28px 9px 9px;
    font-size: 14px;
    outline: none;
}

.score-select-button {
    border: 1px solid #ddd;
}

/* Выпадающее меню вариантов оценки или статуса */
.score-select-options {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10;
    width: 100%;
    background: #ffffff;
    border-radius: 7px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.status-select .score-select-options {
    background: transparent;
}

.score-select.active .score-select-options,
.status-select.active .score-select-options {
    display: block;
}

.score-select-option {
    border: none;
    border-bottom: 1px solid #ddd;
}

.score-select-option:last-child {
    border-bottom: none;
}

.score-select-option:hover,
.score-select-option.keyboard-highlighted {
    background: #f0f0f0;
}

/* Подсветка активного поля ввода или выпадающего списка */
#add-book-form input:focus,
#add-book-form select:focus,
#add-book-form .score-select-button:focus,
#add-book-form .score-select.active .score-select-button,
#add-book-form .status-select.active .score-select-button {
    border-color: #4c1d95;
    box-shadow: 0 0 0 2px rgba(76, 29, 149, 0.25);
    outline: none;
}

.form-group input:focus,
.form-group .score-select-button:focus,
.form-group .score-select.active .score-select-button,
.form-group .status-select.active .score-select-button {
    border-color: #4c1d95;
    box-shadow: 0 0 0 2px rgba(76, 29, 149, 0.25);
    outline: none;
}

/* Кастомная стрелка у выпадающих списков */
#add-book-form select,
.form-group select,
.score-select-button {
    appearance: none;
    background-color: #ffffff;
    /* Стрелка вниз для закрытого выпадающего списка */
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23111111' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
}

.score-select.active .score-select-button,
.status-select.active .score-select-button {
    /* Стрелка вверх для открытого выпадающего списка */
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6.5L6 1.5L11 6.5' stroke='%23111111' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#add-book-form input {
    box-sizing: border-box;
    width: 100%;
    min-width: 150px;
}

/* --- Поиск --- */

/* Поле поиска с кнопкой очистки внутри */
.search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 150px;
}

/* Кнопка очистки текста в поиске */
#add-book-form .clear-input-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    color: #ca1a92;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.clear-input-btn svg {
    width: 18px;
    height: 18px;
}

#add-book-form .clear-input-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

#add-book-form .clear-input-btn:hover {
    color: #4c1d95;
}

/* --- Кнопки формы --- */

/* Главная кнопка формы добавления книги */
#add-book-form>button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    background-color: #4c1d95;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

#add-book-form>button:hover,
#add-book-form>button:focus-visible {
    background-color: #3b0764;
    box-shadow: 0 0 0 2px rgba(76, 29, 149, 0.25);
    outline: none;
    transition: background-color 0.2s ease;
}

/* Старое общее правило для кнопок создания */
.actions-block button {
    padding: 8px 12px;
    border: 1px solid #4c1d95;
    border-radius: 7px;
    background: #ffffff;
    color: #4c1d95;
    cursor: pointer;
}

/* --- ПЕРВАЯ ПЛАШКА: Сортировка --- */
.sort-block {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: white;
    padding: 8px 16px;
    /* Отступы внутри плашки */
    border-radius: 9999px;
    /* Скругление углов */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Текст "Сортировать по:" */
.sort-panel span {
    color: #4c1d95;
    font-size: 15px;
    line-height: 1;
    /* Схлопываем лишние отступы строки */
    font-weight: 700;
    /* Текст жирный */
}

/* Кнопки сортировки ("названию" и "автору") — сбрасываем вид кнопки в текст */
.sort-panel button[data-sort-by] {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #4c1d95;
    /* Фиолетовый цвет акцента */
    font-family: inherit;
    /* Наследуем шрифт страницы */
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    line-height: 1;
    cursor: pointer;
}

/* Подчеркивание только при наведении на кнопки сортировки */
.sort-panel button[data-sort-by]:hover {
    color: #ca1a92;
}

/* Разделитель между кнопками сортировки */
.sort-panel button[data-sort-by]+button[data-sort-by]::before {
    content: "|";
    margin-left: 0;
    margin-right: 8px;
    color: #4c1d95;
    font-weight: 400;
    display: inline-block;
    text-decoration: none;
    /* Палочка НЕ будет подчеркиваться при hover */
}

/* --- ВТОРАЯ ПЛАШКА: Сброс сортировки --- */
.reset-block {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: white;
    padding: 8px 16px;
    /* Отступы внутри плашки */
    border-radius: 9999px;
    /* Скругление углов */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Кнопка внутри плашки сброса (усиленный селектор) */
.sort-panel .reset-block button {
    padding: 0;
    border: none;
    /* Исправлен синтаксис !important */
    border-radius: 0;
    background: transparent;
    color: #4c1d95;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    line-height: 1;
    cursor: pointer;
}

/* Эффект при наведении */
.sort-panel .reset-block button:hover {
    color: #ca1a92;
}

/* --- ТРЕТЬЯ ПЛАШКА: Все книги --- */
.all-books-block {
    display: flex;
    align-items: center;
    margin-left: auto;
}

#show-all-books {
    padding: 8px 12px;
    border-radius: 9999px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* --- ЧЕТВЕРТАЯ ПЛАШКА: Кнопки создания --- */
.actions-block {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #f8fafc;
    /* Светлый серо-голубой фон плашки */
    padding: 6px 10px;
    /* Отступы внутри плашки */
    border-radius: 9999px;
    /* Скругление углов */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Обычные кнопки внутри четвертой плашки */
.actions-block button {
    padding: 8px 12px;
    border-radius: 9999px;
    background: #ffffff;
    color: #ca1a92;
    cursor: pointer;
    font-size: 14px;
}

/* Состояния кнопки "Показать все" */
#show-all-books.active {
    background: #ca1a92;
    color: #ffffff;
    border-color: #ca1a92;
    cursor: default;
    pointer-events: none;
}

#show-all-books.inactive {
    background: #fef3c7;
    color: #b45309;
    border-color: #facc15;
}

#show-all-books.inactive:hover {
    background-color: #fde68a;
}

/* Кнопки создания папок */
#create-series,
#create-collection {
    border: none;
    background: #ca1a92;
    color: #ffffff;
    border-radius: 9999px;
}

/* Кнопки создания папок */
#create-series:hover,
#create-collection:hover {
    border: none;
    background: #4c1d95;
    color: #ffffff;
    border-radius: 9999px;
}

/* При активном поиске создание папок недоступно, чтобы новые папки не терялись среди результатов */
.sort-panel.search-active .actions-block {
    opacity: 1;
}

.sort-panel.search-active .actions-block button {
    pointer-events: none;
    cursor: default;
}

.sort-panel.search-active #create-series,
.sort-panel.search-active #create-collection {
    background: rgba(202, 26, 146, 0.4);
}

/* --- Статусы внутри форм --- */

/* Состояния и цвета вариантов статуса в формах */
#add-book-form .status-select button,
.form-group .status-select button {
    font-weight: normal;
}

#add-book-form .score-select button,
#add-book-form .status-select button,
.form-group .score-select button,
.form-group .status-select button {
    background-color: #ffffff;
    color: #111111;
}

#add-book-form .score-select-button,
.form-group .score-select-button {
    border: 1px solid #ddd;
}

#add-book-form .score-select-option,
.form-group .score-select-option {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #ddd;
}

#add-book-form .score-select-option:last-child,
.form-group .score-select-option:last-child {
    border-bottom: none;
}

#add-book-form .score-select-option:first-child,
.form-group .score-select-option:first-child {
    border-radius: 7px 7px 0 0;
}

#add-book-form .score-select-option:last-child,
.form-group .score-select-option:last-child {
    border-radius: 0 0 7px 7px;
}

#add-book-form .score-select button:hover,
#add-book-form .status-select button:hover,
.form-group .score-select button:hover,
.form-group .status-select button:hover,
#add-book-form .score-select button.keyboard-highlighted,
#add-book-form .status-select button.keyboard-highlighted,
.form-group .score-select button.keyboard-highlighted,
.form-group .status-select button.keyboard-highlighted {
    background-color: #f0f0f0;
}

#add-book-form .score-select-option.selected {
    background-color: #f5ebf8;
    color: #4c1d95;
    font-weight: bold;
}

.hidden-score,
.form-group.hidden-score {
    display: none;
}

.modal .form-group.hidden-score {
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.modal .form-group {
    opacity: 1;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

#add-book-form .status-select .status-choice.completed:hover,
.form-group .status-select .status-choice.completed:hover,
#add-book-form .status-select .status-choice.completed.keyboard-highlighted,
.form-group .status-select .status-choice.completed.keyboard-highlighted {
    background-color: #bbf7d0;
}

#add-book-form .status-select .status-choice.in-progress:hover,
.form-group .status-select .status-choice.in-progress:hover,
#add-book-form .status-select .status-choice.in-progress.keyboard-highlighted,
.form-group .status-select .status-choice.in-progress.keyboard-highlighted {
    background-color: #fde68a;
}

#add-book-form .status-select .status-choice.planned:hover,
.form-group .status-select .status-choice.planned:hover,
#add-book-form .status-select .status-choice.planned.keyboard-highlighted,
.form-group .status-select .status-choice.planned.keyboard-highlighted {
    background-color: #e5e7eb;
}

.book-page-inline-select.status-select .status-choice.completed:hover,
.book-page-inline-select.status-select .status-choice.completed.keyboard-highlighted {
    background-color: #bbf7d0;
}

.book-page-inline-select.status-select .status-choice.in-progress:hover,
.book-page-inline-select.status-select .status-choice.in-progress.keyboard-highlighted {
    background-color: #fde68a;
}

.book-page-inline-select.status-select .status-choice.planned:hover,
.book-page-inline-select.status-select .status-choice.planned.keyboard-highlighted {
    background-color: #e5e7eb;
}

/* === КАРТОЧКИ КНИГ И СОСТОЯНИЯ КАРТОЧЕК === */
/* Здесь внешний вид книг, затемнение при поиске, выбор книг для серии и анимации удаления/добавления. */

/* --- Внешний вид карточки книги --- */

/*  Карточка книги (.book-card) */
.book-card {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 280px;
    opacity: 1;
    /* Transition для появления, растворения и сдвига (заменили ; на ,) */
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1),
        opacity 0.8s ease,
        max-height 0.8s ease,
        padding 0.8s ease,
        margin 0.8s ease,
        background-color 0.8s ease,
        color 0.8s ease;
}

/* --- Затемнение и недоступные карточки --- */

/* Поиск приглушает карточки цветом, не делая их прозрачными */
.book-card.search-dimmed {
    opacity: 1;
    background: #f2dcf7;
    color: rgba(0, 0, 0, 0.5);
}

/* Затемнение остальных карточек, пока одна из серий раскрыта */
.book-card.series-focus-dimmed,
.series-card.series-focus-dimmed,
.collection-card.series-focus-dimmed {
    opacity: 1;
    background: #f2dcf7;
    color: rgba(0, 0, 0, 0.5);
}

.collection-card.series-focus-dimmed .collection-toggle {
    background: #f2dcf7;
    color: rgba(0, 0, 0, 0.5);
}

.series-book-card.search-dimmed {
    opacity: 1;
    background: #f2dcf7;
    color: rgba(0, 0, 0, 0.5);
}

.book-card.series-muted,
.series-card.series-muted {
    opacity: 1;
    background: #f2dcf7;
    color: rgba(0, 0, 0, 0.5);
}

.series-ejected-card.series-focus-active:not(.search-dimmed):not(.series-hiding):not(.dragging) {
    opacity: 1 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* --- Выбор книг для серии --- */

/* Состояния выбора книг при добавлении их в серию */
.book-card.selectable-for-series {
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1),
        opacity 0.12s ease,
        max-height 0.8s ease,
        padding 0.8s ease,
        margin 0.8s ease,
        box-shadow 0.12s ease,
        background-color 0.12s ease;
}

.book-card.selected-for-series {
    opacity: 1;
    background: #fff7fd;
    box-shadow: 0 0 0 3px rgba(202, 26, 146, 0.45), 0 8px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1),
        opacity 0.8s ease,
        max-height 0.8s ease,
        padding 0.8s ease,
        margin 0.8s ease,
        box-shadow 0.12s ease,
        background-color 0.12s ease;
}

body:not(:has(.dragging)) .book-card.selected-for-series:hover {
    box-shadow: 0 0 0 3px rgba(202, 26, 146, 0.45), 0 8px 16px rgba(0, 0, 0, 0.1);
}

.series-card.search-dimmed,
.collection-card.search-dimmed {
    opacity: 1;
    background: #f2dcf7;
    color: rgba(0, 0, 0, 0.5);
}

.collection-card.search-dimmed .collection-toggle {
    background: #f2dcf7;
    color: rgba(0, 0, 0, 0.5);
}

/* Совпавшие карточки проходят над приглушенными во время перестановки */
.sort-panel.search-active~.books-container .book-card:not(.search-dimmed),
.sort-panel.search-active~.books-container .series-card:not(.search-dimmed),
.sort-panel.search-active~.books-container .collection-section:has(.collection-card:not(.search-dimmed)) {
    z-index: 2;
}

.book-card.search-disabled,
.series-card.search-disabled,
.collection-card.search-disabled {
    cursor: default;
    pointer-events: none;
}

/* При удалении: КАРТОЧКА ПРОСТО ПЛАВНО РАСТВОРЯЕТСЯ НА МЕСТЕ */
.book-card.removing,
/* --- Удаление, добавление и движение карточек --- */

.series-card.removing,
.collection-card.removing {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    /* Было 0.25s -> стало 0.45s для более плавного таяния */
    pointer-events: none;
}

/* Начальное состояние новой карточки (выезжает сверху) */
.book-card.adding,
.series-card.adding,
.collection-card.adding {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    transform: translateY(-20px);
    overflow: hidden;
    will-change: transform, opacity;
}

.series-card.adding,
.collection-card.adding {
    min-height: 0;
}

/* При сдвиге (FLIP) */
.book-card.moving {
    transition: transform 0.8s cubic-bezier(0.2, 0, 0, 1),
        background-color 0.8s ease,
        color 0.8s ease !important;
    /*0.8s для медленного сдвига */
}

.series-card.moving,
.collection-card.moving,
.collection-section.moving {
    transition: transform 0.8s cubic-bezier(0.2, 0, 0, 1),
        background-color 0.8s ease,
        color 0.8s ease !important;
}

.series-thread.moving {
    transition: transform 0.8s cubic-bezier(0.2, 0, 0, 1), width 0.8s cubic-bezier(0.2, 0, 0, 1) !important;
}

/* === ПЕРЕТАСКИВАНИЕ === */
/* Здесь курсор, подсветка места вставки, рамка исходного места и подсветка броска внутрь серии/коллекции. */

/* --- Курсор и перетаскиваемая карточка --- */

/* Поведение карточек при перетаскивании */
.book-card {
    cursor: grab;
    touch-action: none;
}

.series-card,
.collection-card {
    cursor: grab;
    touch-action: none;
}

.book-card.dragging,
.series-card.dragging,
.collection-card.dragging {
    opacity: 0.7 !important;
    background: #ffffff !important;
    cursor: grabbing;
    z-index: 500 !important;
    pointer-events: none;
    box-shadow: 0 14px 28px rgba(76, 29, 149, 0.18);
    transition: none !important;
}

.collection-section.dragging {
    z-index: 500 !important;
    opacity: 0.7;
    cursor: grabbing;
    pointer-events: none;
    transition: none !important;
    will-change: transform;
}

.collection-section.dragging > .collection-card {
    transform: translateY(-4px);
}

/* --- Линии вставки --- */

/* Разделительная палка: показывает место, куда встанет карточка при перетаскивании */
.book-card.drop-before::before,
.book-card.drop-after::after,
.series-card.drop-before::before,
.series-card.drop-after::after,
.collection-card.drop-before::before,
.collection-card.drop-after::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 9999px;
    background: #ca1a92;
    box-shadow: 0 0 0 4px rgba(76, 29, 149, 0.14);
    pointer-events: none;
}

.book-card.drop-before::before {
    left: -14px;
}

.book-card.drop-after::after,
.series-card.drop-after::after,
.collection-card.drop-after::after {
    right: -14px;
}

.series-card.drop-before::before,
.collection-card.drop-before::before {
    left: -14px;
}


.collection-card.drop-before::before,
.collection-card.drop-after::after {
    top: 4px;
    bottom: 4px;
}

/* --- Исходное место и бросок внутрь --- */

/* Рамка исходного места карточки во время перетаскивания */
.drag-home-marker {
    position: absolute;
    z-index: 150;
    border: 3px solid #ca1a92;
    border-radius: 20px;
    box-shadow: 0 0 0 4px rgba(76, 29, 149, 0.14);
    pointer-events: none;
}

.collection-drop-line {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 180;
    height: 4px;
    border-radius: 9999px;
    background: #ca1a92;
    box-shadow: 0 0 0 4px rgba(76, 29, 149, 0.14);
    pointer-events: none;
    transform: translateY(-2px);
}

/* Подсветка папки, если книгу можно бросить внутрь */
.series-card.drop-into,
.collection-card.drop-into {
    transform: translateY(-4px);
    box-shadow: 0 0 0 6px #ca1a92, 0 16px 30px rgba(202, 26, 146, 0.25);
}

.collection-drop-area.drop-into {
    border-color: #ca1a92;
    background: rgba(202, 26, 146, 0.08);
    box-shadow: inset 0 0 0 4px rgba(202, 26, 146, 0.18);
    color: #4c1d95;
}

.series-drop-icon {
    position: absolute;
    inset: 50% auto auto 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    border-radius: 20px;
    background: rgba(202, 26, 146, 0.25);
    color: #ca1a92;
    border: 2px solid #ca1a92;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.series-card.drop-into .series-drop-icon {
    opacity: 1;
}

.series-drop-icon svg {
    width: 34px;
    height: 34px;
    stroke-width: 3;
}

/* === ВНУТРЕННИЕ ЭЛЕМЕНТЫ КАРТОЧЕК === */
/* Здесь шапка карточки, кнопки редактирования/удаления, меню, автор, оценка и статус. */

/* --- Шапка карточки --- */

/* Шапка карточки: заголовок и меню на одном уровне */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.book-card-content {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
}

.book-card-main {
    min-width: 0;
}

.book-card-with-cover {
    padding-right: 145px;
}

.book-card-with-cover .book-card-main {
    flex: 1;
}

.book-card-cover {
    position: absolute;
    top: 4px;
    right: -4px;
    width: 123px;
    height: 184px;
    border: 4px solid #e5b9f4;
    border-radius: 14px;
    overflow: hidden;
    background: #f5ebf8;
}

.book-card-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-card h2 {
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    height: 70px;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.series-book-header {
    justify-content: flex-start;
}

.series-book-header h2 {
    flex: 1;
    min-width: 0;
}

.card-actions {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex-shrink: 0;
}

.book-card .card-actions {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.book-card-with-cover .card-actions::before {
    content: "";
    position: absolute;
    top: 0;
    right: -4px;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: #ffffff;
    border-bottom-left-radius: 6px;
}

.book-card-with-cover .card-actions .quick-edit-btn,
.book-card-with-cover .card-actions .menu-btn {
    position: relative;
    z-index: 1;
}

.book-card .card-header {
    padding-right: 64px;
}

.book-card-with-cover .card-header {
    padding-right: 0;
}

/* --- Кнопки и выпадающие меню карточки --- */

/* Кнопки быстрого редактирования и меню в шапке карточки */
.quick-edit-btn,
.menu-btn {
    background: transparent;
    border: none;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quick-edit-btn {
    font-size: 17px;
}

.quick-edit-btn i,
.menu-btn i,
.quick-edit-btn svg,
.menu-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke-width: 2.25;
}

/* Наведение на кнопки быстрого редактирования и меню */
.quick-edit-btn:hover,
.menu-btn:hover {
    background-color: #f5ebf8;
    color: #4c1d95;
}

/* Выпадающее меню действий у карточки */
.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    overflow: hidden;
    z-index: 100;
    min-width: 130px;
    padding: 4px 0;
}

.dropdown-menu.active {
    display: block;
}

body:not(:has(.dragging)) .book-card:not(.moving):not(.adding):not(.removing):hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

body:not(:has(.dragging)) .book-card.selected-for-series:not(.moving):not(.adding):not(.removing):hover {
    box-shadow: 0 0 0 3px rgba(202, 26, 146, 0.45), 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* --- Текстовые данные книги --- */

/* Автор книги в карточке */
.book-author {
    font-size: 14px;
    line-height: 1.35;
    margin: 4px 0;
    height: 38px;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-card .score {
    font-size: 14px;
    margin: 4px 0 16px 0;
}

.stars {
    color: #FFD700 !important;
}

.score-text {
    color: #111111;
    font-weight: normal;
}

/* --- Плашки статуса --- */

/* Бейдж статуса книги */
.status {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 9999px;
    font-size: 12px;
    line-height: 1;
    font-weight: bold;
    margin-top: auto;
    align-self: flex-end;
}

.status.completed {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

.status.in-progress {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #facc15;
}

.status.planned {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

.book-page .books-container {
    display: block;
}

.book-detail {
    width: 100%;
}

.books-container.page-appearing,
.book-detail.page-appearing {
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1),
        opacity 0.8s ease;
}

.books-container.adding,
.book-detail.adding {
    opacity: 0;
    transform: translateY(-20px);
    will-change: transform, opacity;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: #4c1d95;
    font-weight: 800;
    text-decoration: none;
}

.back-link svg {
    width: 18px;
    height: 18px;
}

.back-link:hover {
    color: #ca1a92;
    text-decoration: underline;
}

.book-detail-card,
.related-books {
    box-sizing: border-box;
    margin-bottom: 18px;
    padding: 20px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.book-detail-card h2 {
    margin-top: 0;
    color: #4c1d95;
}

.related-books h3 {
    margin-top: 0;
    color: #ca1a92;
}

.book-detail-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 18px;
}

.book-detail-layout.without-cover {
    grid-template-columns: 1fr;
}

.book-cover-panel {
    transition: height 0.5s ease-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin-bottom: 0;
}

.book-cover-upload {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px dashed #e6a0d1;
    border-radius: 10px;
    background: #fffbfe;
    color: #e6a0d1;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.book-cover-upload:hover,
.book-cover-upload:focus-visible {
    border-color: #ca1a92;
    color: #ca1a92;
    background: #fff7fd;
    box-shadow: 0 0 0 3px rgba(202, 26, 146, 0.16);
    outline: none;
}

.book-cover-upload.is-editing {
    border-color: #ca1a92;
    box-shadow: 0 0 0 1px #ca1a92, 0 0 0 7px rgba(202, 26, 146, 0.16);
}

.book-cover-upload.is-editing:hover,
.book-cover-upload.is-editing:focus-visible,
body:has(#coverModal.cover-active) .book-cover-upload.is-editing {
    border-color: #4c1d95;
    box-shadow: 0 0 0 1px #4c1d95, 0 0 0 7px rgba(76, 29, 149, 0.25);
}

.book-cover-upload svg {
    width: 42px;
    height: 42px;
    stroke-width: 2.25;
}

.book-cover-upload img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-cover-upload.has-cover {
    border-style: solid;
    background: #ffffff;
}

.book-cover-file {
    display: none;
}

.book-cover-url {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-size: 14px;
    outline: none;
}

.book-cover-url:focus {
    border-color: #ca1a92;
    box-shadow: 0 0 0 2px rgba(202, 26, 146, 0.18);
}

#coverModal .modal-content {
    max-width: 760px;
    max-height: 94vh;
    overflow-y: auto;
}
.cover-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#centerBookCover,
#autoBookCover {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #4c1d95;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    line-height: 1;
    cursor: pointer;
}
#centerBookCover:not(:disabled):hover,
#autoBookCover:not(:disabled):hover {
    border: none;
    background: transparent;
    color: #ca1a92;
    box-shadow: none;
}
#centerBookCover:not(:disabled):focus-visible,
#autoBookCover:not(:disabled):focus-visible {
    border: none;
    background: transparent;
    color: #ca1a92;
    box-shadow: none;
}
#centerBookCover:disabled,
#autoBookCover:disabled {
    opacity: 1;
    color: #d2c7e5;
    cursor: default;
    box-shadow: none;
}
.cover-modal-preview-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(clamp(300px, 48vh, 460px) + 8px);
    margin: 0 auto 12px;
}
.cover-modal-preview {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    border: 4px solid #bc80b5;
    border-radius: 12px;
    overflow: hidden;
    cursor: default;
}
.cover-modal-preview:not(.has-cover):not(:hover):not(:focus-visible) {
    border-color: #e6a0d1;
}
.cover-modal-preview.has-cover {
    box-sizing: content-box;
    width: min(calc(100% - 8px), calc(clamp(300px, 48vh, 460px) * var(--cover-photo-ratio, 1)));
    height: auto;
    aspect-ratio: var(--cover-photo-ratio, 1);
}
.cover-modal-preview.has-cover:hover {
    border-color: #bc80b5;
    color: #9ca3af;
    background: #f9fafb;
    box-shadow: none;
}
.cover-modal-preview img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
}
.cover-crop-frame {
    position: absolute;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow:
        0 0 0 2000px rgba(202, 26, 146, 0.4),
        inset 0 0 0 1px #ff8cda;
    cursor: move;
    touch-action: none;
}
.cover-crop-frame span {
    position: absolute;
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3 19V12A9 9 0 0 1 12 3H19' fill='none' stroke='%23ff8cda' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cover-crop-frame [data-corner="nw"] { left:0; top:0; cursor:nwse-resize; }
.cover-crop-frame [data-corner="ne"] { right:0; top:0; transform:scaleX(-1); cursor:nesw-resize; }
.cover-crop-frame [data-corner="sw"] { left:0; bottom:0; transform:scaleY(-1); cursor:nesw-resize; }
.cover-crop-frame [data-corner="se"] { right:0; bottom:0; transform:scale(-1); cursor:nwse-resize; }
.cover-position-controls input[type="range"] {
    --range-fill: 0%;
    appearance: none;
    -webkit-appearance: none;
    height: 18px;
    margin: 0;
    border: 0;
    background: #ffffff;
    opacity: 1;
    cursor: grab;
}
.cover-position-controls input[type="range"]:active {
    cursor: grabbing;
}
.cover-position-controls input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(to right, rgba(202, 26, 146, 0.4) 0 var(--range-fill), rgba(202, 26, 146, 0.25) var(--range-fill) 100%);
    cursor: grab;
}
.cover-position-controls input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -4px;
    border: none;
    border-radius: 50%;
    background: #eaa3d3;
    cursor: grab;
}
.cover-position-controls input[type="range"]:active::-webkit-slider-runnable-track,
.cover-position-controls input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
}
.cover-position-controls input[type="range"]::-moz-range-track {
    height: 8px;
    border: none;
    border-radius: 9999px;
    background: rgba(202, 26, 146, 0.25);
    cursor: grab;
}
.cover-position-controls input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 9999px 0 0 9999px;
    background: rgba(202, 26, 146, 0.4);
}
.cover-position-controls input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: #eaa3d3;
    cursor: grab;
}
.cover-position-controls input[type="range"]:active::-moz-range-track,
.cover-position-controls input[type="range"]:active::-moz-range-progress,
.cover-position-controls input[type="range"]:active::-moz-range-thumb {
    cursor: grabbing;
}
.cover-position-controls input[type="range"]:disabled {
    --range-fill: 0%;
    cursor: default;
}
.cover-position-controls input[type="range"]:disabled::-webkit-slider-runnable-track,
.cover-position-controls input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: default;
}
.cover-position-controls input[type="range"]:disabled::-webkit-slider-runnable-track {
    background: #d2c7e5;
}
.cover-position-controls input[type="range"]:disabled::-webkit-slider-thumb {
    background: #d2c7e5;
}
.cover-position-controls input[type="range"]:disabled::-moz-range-track,
.cover-position-controls input[type="range"]:disabled::-moz-range-progress,
.cover-position-controls input[type="range"]:disabled::-moz-range-thumb {
    cursor: default;
}
.cover-position-controls input[type="range"]:disabled::-moz-range-progress {
    background: #d2c7e5;
}
.cover-position-controls input[type="range"]:disabled::-moz-range-track {
    background: #d2c7e5;
}
.cover-position-controls input[type="range"]:disabled::-moz-range-thumb {
    background: #d2c7e5;
}
.book-cover-upload[data-cover-book-id] { position:relative; }

.cover-position-controls {
    display: grid;
    gap: 2px;
    margin-top: 10px;
}

.cover-position-controls label {
    font-size: 14px;
    font-weight: 600;
    color: #4c1d95;
}

.cover-position-controls input[type="range"] + label {
    margin-top: 6px;
}

.book-page-fields-list {
    display: grid;
    gap: 10px;
    color: #4c1d95;
}

.book-page-fields-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #374151;
}

.book-page-fields-list input {
    width: 18px;
    height: 18px;
    accent-color: #4c1d95;
}

.book-detail-info {
    position: relative;
    align-self: stretch;
    min-width: 596px;
    min-height: 68px;
    margin-bottom: 0;
    transition: height 0.5s ease-out;
}

.book-detail-actions {
    position: absolute;
    z-index: 30;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.book-detail-actions .quick-edit-btn {
    flex: 0 0 28px;
}

.book-detail-actions .quick-edit-btn.active {
    background: rgba(202, 26, 146, 0.14);
    color: #ca1a92;
}

.book-detail-actions .quick-edit-btn.active:hover {
    background: rgba(202, 26, 146, 0.2);
    color: #4c1d95;
}

.book-page-edit-label {
    color: #ca1a92;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
}

.book-page-edit-label:hover {
    color: #4c1d95;
}

.book-page-field-row {
    display: grid;
    grid-template-columns: 200px 260px;
    gap: 8px;
    align-items: center;
    margin: 0 0 12px;
}

.book-page-field-row.book-page-first-fill-row {
    grid-template-columns: 200px 260px;
}

.book-page-field-row.book-page-edit-row {
    grid-template-columns: max-content 260px;
}

.book-page-score-field-row.book-page-edit-row {
    display: flex;
}

.book-page-genre-field-row {
    grid-template-columns: 200px minmax(0, 1fr);
}

.book-page-genre-field-row.book-page-edit-row,
.book-page-genre-field-row.book-page-first-fill-row {
    grid-template-columns: 200px minmax(0, 1fr);
}

.book-page-genre-field-row>span:first-child {
    align-self: start;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: visible;
    white-space: nowrap;
    text-decoration: none;
}

.book-page-genre-label-text {
    line-height: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.book-page-field-row>span:first-child {
    color: #4c1d95;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.book-page-field-row.book-page-genre-field-row>span:first-child {
    text-decoration: none;
}

.book-page-field-value {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    display: flex;
    align-items: center;
    font-weight: 400;
}

.book-page-value-row {
    min-height: 36px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    font-weight: 400;
}

.book-page-value-row:not(.book-page-genre-value-row) {
    display: flex;
}

.book-page-value-row strong {
    color: #4c1d95;
    margin-right: 0;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.book-page-genre-value-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.book-page-genre-value-row strong {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    margin-right: 0;
}

.book-page-field-row>span:first-child,
.book-page-value-row>strong {
    line-height: 1;
}

.book-page-value-row>strong {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    width: max-content;
    flex: 0 0 auto;
}

.book-page-field-row>span:first-child {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    width: max-content;
    justify-self: start;
}

.book-page-field-row>.book-page-edit-label:first-child,
.book-page-value-row>.book-page-edit-label {
    color: #ca1a92;
}

.book-page-edit-row>.book-page-edit-label:first-child,
.book-page-field-row>.book-page-edit-label:first-child:hover,
.book-page-value-row>.book-page-edit-label:hover {
    color: #4c1d95;
}

.book-page-field-row > .book-page-edit-label.book-page-edit-label-active:first-child,
.book-page-value-row > .book-page-edit-label.book-page-edit-label-active {
    color: #4c1d95;
}

.book-page-value-text {
    display: block;
    flex: 1;
    min-width: 0;
    min-height: 36px;
    line-height: 36px;
    overflow-wrap: anywhere;
}

.book-page-language-group {
    margin-top: 0;
}

.book-detail-info > :is(.book-page-field-row, .book-page-value-row):has(+ .book-page-language-group) {
    margin-bottom: 8px;
}

.book-page-language-divider {
    height: 2px;
    margin-bottom: 8px;
    border-radius: 9999px;
    background: #f2c6e4;
    transition: width 0.5s ease-out;
}

.book-page-language-group > :is(.book-page-field-row, .book-page-value-row) {
    margin-bottom: 0;
}

.book-page-language-group > :is(.book-page-field-row, .book-page-value-row):last-child {
    margin-bottom: 0;
}

.book-page-language-group > .book-page-value-row,
.book-page-language-group > .book-page-value-row > strong,
.book-page-language-group > .book-page-value-row > .book-page-value-text,
.book-page-language-group > .book-page-field-row,
.book-page-language-group > .book-page-field-row > span:first-child {
    min-height: 28px;
}

.book-page-language-group > .book-page-value-row > .book-page-value-text {
    line-height: 28px;
}

.book-page-language-group > .book-page-field-row > .book-page-field-input {
    height: 28px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.book-detail-info > .book-page-value-row:nth-child(2):not(.book-page-genre-value-row) .book-page-value-text::before {
    content: '';
    float: right;
    width: var(--book-actions-space, 76px);
    height: 36px;
}

.book-detail-info > .book-page-field-row:nth-child(2):not(.book-page-genre-field-row) {
    padding-right: var(--book-actions-space, 76px);
    grid-template-columns: minmax(0, 200px) minmax(0, 260px);
}

.book-detail-info > .book-page-field-row.book-page-edit-row:nth-child(2):not(.book-page-genre-field-row) {
    grid-template-columns: max-content minmax(0, 260px);
}

.book-detail-info > .book-page-genre-field-row:nth-child(2) .book-page-genre-select {
    min-width: 0;
    max-width: max(0px, calc(100% - var(--book-actions-space, 76px)));
}

.book-page-value-text .book-page-pill {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
}

.book-page-value-row-updated {
    animation: slideBookPageValueIn 0.28s ease-out;
}

.book-page-field-input,
.book-page-inline-select {
    box-sizing: border-box;
    width: 100%;
    min-width: 150px;
}

.book-page-inline-select .score-select-button {
    box-sizing: border-box;
    height: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.book-page-edit-row .book-page-inline-select[data-book-field="score"] {
    width: 260px;
    min-width: 260px;
}

.book-page-edit-row .book-page-inline-select[data-book-field="score"] .score-select-button {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
}

.book-page-edit-row .book-page-inline-select[data-book-field="score"] .score-select-options {
    min-width: 260px;
}

.book-page-field-input {
    height: 36px;
    padding: 9px 28px 9px 9px;
    border: 1px solid #ddd;
    border-radius: 7px;
    font-size: 14px;
    outline: none;
    transition: border 0.15s ease;
}

.book-page-field-input:focus,
.book-page-inline-select .score-select-button:focus,
.book-page-inline-select.active .score-select-button {
    border-color: #4c1d95;
    box-shadow: 0 0 0 2px rgba(76, 29, 149, 0.25);
    outline: none;
}

.book-page-genre-select.book-page-select-measuring .score-select-button {
    border-color: #ddd;
    box-shadow: none;
    transition: none;
}

.book-page-inline-select .score-select-options {
    border-radius: 7px;
}

.book-page-inline-select[data-book-field="type"] .score-select-options {
    max-height: 220px;
    overflow-y: auto;
}

.book-page-inline-select .score-select-option {
    border-radius: 0;
}

.book-page-inline-select .score-select-option:first-child {
    border-radius: 7px 7px 0 0;
}

.book-page-inline-select .score-select-option:last-child {
    border-radius: 0 0 7px 7px;
}

.book-page-genre-select .book-page-genre-column:first-child:has(.book-page-genre-option-removing) .book-page-genre-main-option.selected {
    border-radius: 7px;
}

.book-page-genre-select .book-page-genre-options {
    grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr);
    width: min(520px, 80vw);
    align-items: start;
    background: transparent;
    box-shadow: none;
}

.book-page-genre-select.active .book-page-genre-options {
    display: grid;
}

.book-page-genre-column {
    max-height: 360px;
    scrollbar-color: rgba(202, 26, 146, 0.4) transparent;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid #ddd;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.book-page-genre-column:first-child {
    height: auto;
    max-height: none;
    overflow-y: hidden;
    transition: height 0.5s ease-out;
}

.book-page-genre-column:last-child {
    border-right: none;
}

.book-page-genre-select .score-select-option.selected {
    font-weight: 700;
}

.book-page-genre-select .book-page-genre-column .score-select-option {
    font-weight: 400;
}

.book-page-genre-select .book-page-genre-column .score-select-option.selected {
    font-weight: 700;
}

.book-page-genre-edit-wrap {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    grid-column: 2;
    min-width: 0;
    position: relative;
}

.book-page-genre-edit-wrap .book-page-genre-select {
    width: 260px;
    min-width: 260px;
}

.book-page-genre-edit-wrap .book-page-subgenre-pills {
    min-height: 36px;
    align-items: center;
    flex-wrap: nowrap;
    margin-left: 0;
    position: relative;
    z-index: 20;
}

.book-page-genre-value-row .book-page-value-text {
    display: flex;
    position: relative;
    flex: 1;
    min-width: 0;
    align-items: flex-start;
}

.book-page-genre-value-row .book-page-genre-live-pill {
    min-height: 36px;
}

.book-page-genre-edit-wrap .book-page-subgenre-pills,
.book-page-genre-value-row .book-page-subgenre-pills {
    display: contents;
}

.book-page-genre-edit-wrap .book-page-pill-subgenre,
.book-page-genre-value-row .book-page-pill-subgenre {
    position: absolute;
    overflow-wrap: anywhere;
}

.book-page-genre-live-pill {
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
    min-height: 30px;
    min-width: 0;
    text-decoration: none;
}

.book-page-subgenre-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 8px;
    vertical-align: middle;
}

.book-page-pill {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 9999px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    cursor: text;
}

.book-page-inline-select .score-select-button.book-page-pill {
    width: fit-content;
    padding-right: 10px;
    background-image: none;
    text-align: center;
}

.book-page-pill-type {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #7dd3fc;
}

.book-page-pill-genre {
    background: #fae8ff;
    color: #a21caf;
    border: 1px solid #f0abfc;
}

.book-page-pill-subgenre {
    background: #ecfeff;
    color: #0e7490;
    border: 1px solid #67e8f9;
}

.book-page-genre-select.active ~ .book-page-subgenre-pills .book-page-pill-subgenre {
    cursor: pointer;
}

.book-page-genre-main-option.book-page-genre-option-removing {
    animation: slideBookPageGenreOut 0.5s ease-in-out forwards;
}

.book-page-genre-main-option[hidden] {
    display: none;
}

@keyframes slideBookPageGenreOut {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.book-page-genre-select .score-select-option,
.book-page-pill-genre,
.book-page-pill-subgenre {
    text-transform: capitalize;
}

.book-page-genre-as-subgenre {
    background: #fef3c7;
    color: #92400e;
    font-weight: 700;
}

.book-page-genre-select .score-select-option[data-value="Фантастика"],
.book-page-pill[data-value="Фантастика"] {
    background: #e8c8f8;
    border: 1px solid #c084fc;
    color: #542c8b;
}

.book-page-genre-select .score-select-option[data-value="Фантастика"]:hover {
    background: #c7a8f2;
}

.book-page-genre-select .score-select-option:is([data-value="космос"], [data-value="киберпанк"], [data-value="постапокалипсис"], [data-value="научная"], [data-value="антиутопия"]),
.book-page-pill:is([data-value="космос"], [data-value="киберпанк"], [data-value="постапокалипсис"], [data-value="научная"], [data-value="антиутопия"]) {
    background: #fee6ff;
    border: 1px solid #f0abfc;
    color: #542c8b;
}

.book-page-genre-select .score-select-option:is([data-value="космос"], [data-value="киберпанк"], [data-value="постапокалипсис"], [data-value="научная"], [data-value="антиутопия"]):hover {
    background: #e8c8f8;
}

.book-page-genre-select .score-select-option[data-value="Фэнтези"],
.book-page-pill[data-value="Фэнтези"] {
    background: #c1f1b1;
    border: 1px solid #86d96b;
    color: #295909;
}

.book-page-genre-select .score-select-option[data-value="Фэнтези"]:hover {
    background: #a0d68e;
}

.book-page-genre-select .score-select-option:is([data-value="эпическое"], [data-value="городское"], [data-value="славянское"], [data-value="темное"], [data-value="мифологическое"]),
.book-page-pill:is([data-value="эпическое"], [data-value="городское"], [data-value="славянское"], [data-value="темное"], [data-value="мифологическое"]) {
    background: #e3feda;
    border: 1px solid #b7f1a3;
    color: #295909;
}

.book-page-genre-select .score-select-option:is([data-value="эпическое"], [data-value="городское"], [data-value="славянское"], [data-value="темное"], [data-value="мифологическое"]):hover {
    background: #c1f1b1;
}

.book-page-genre-select .score-select-option[data-value="Детектив"],
.book-page-pill[data-value="Детектив"] {
    background: #d6b176;
    border: 1px solid #b98a4a;
    color: #5c2c16;
}

.book-page-genre-select .score-select-option[data-value="Детектив"]:hover {
    background: #ad8545;
}

.book-page-genre-select .score-select-option:is([data-value="процедурал"], [data-value="нуар"], [data-value="исторический"], [data-value="психологический-детектив"]),
.book-page-pill:is([data-value="процедурал"], [data-value="нуар"], [data-value="исторический"], [data-value="психологический-детектив"]) {
    background: #eddabb;
    border: 1px solid #d6b176;
    color: #5c2c16;
}

.book-page-genre-select .score-select-option:is([data-value="процедурал"], [data-value="нуар"], [data-value="исторический"], [data-value="психологический-детектив"]):hover {
    background: #d6b176;
}

.book-page-genre-select .score-select-option[data-value="Триллер/Ужасы"],
.book-page-pill[data-value="Триллер/Ужасы"] {
    background: #da9790;
    border: 1px solid #c96f68;
    color: #661212;
}

.book-page-genre-select .score-select-option[data-value="Триллер/Ужасы"]:hover {
    background: #b75a55;
}

.book-page-genre-select .score-select-option:is([data-value="психологический"], [data-value="сверхъестественный"], [data-value="слэшер"], [data-value="бытовой"], [data-value="техно-хоррор"]),
.book-page-pill:is([data-value="психологический"], [data-value="сверхъестественный"], [data-value="слэшер"], [data-value="бытовой"], [data-value="техно-хоррор"]) {
    background: #f5c2c2;
    border: 1px solid #e59a9a;
    color: #661212;
}

.book-page-genre-select .score-select-option:is([data-value="психологический"], [data-value="сверхъестественный"], [data-value="слэшер"], [data-value="бытовой"], [data-value="техно-хоррор"]):hover {
    background: #da9790;
}

.book-page-genre-select .score-select-option[data-value="Роман"],
:is(.book-page-pill-genre, .book-page-pill-subgenre)[data-value="Роман"] {
    background: #f8a5bd;
    border: 1px solid #ef789b;
    color: #8c003a;
}

.book-page-genre-select .score-select-option[data-value="Роман"]:hover {
    background: #e17997;
}

.book-page-genre-select .score-select-option:is([data-value="сага"], [data-value="современная"], [data-value="драма"], [data-value="романтика"]),
.book-page-pill:is([data-value="сага"], [data-value="современная"], [data-value="драма"], [data-value="романтика"]) {
    background: #ffd2df;
    border: 1px solid #f8a5bd;
    color: #8c003a;
}

.book-page-genre-select .score-select-option:is([data-value="сага"], [data-value="современная"], [data-value="драма"], [data-value="романтика"]):hover {
    background: #f8a5bd;
}

.book-page-genre-select .score-select-option[data-value="Приключения"],
.book-page-pill[data-value="Приключения"] {
    background: #f5cd49;
    border: 1px solid #d9ae22;
    color: #795704;
}

.book-page-genre-select .score-select-option[data-value="Приключения"]:hover {
    background: #e8ae17;
}

.book-page-genre-select .score-select-option:is([data-value="морские"], [data-value="выживание"], [data-value="дорожное"], [data-value="экспедиции"], [data-value="сокровища"]),
.book-page-pill:is([data-value="морские"], [data-value="выживание"], [data-value="дорожное"], [data-value="экспедиции"], [data-value="сокровища"]) {
    background: #fde68a;
    border: 1px solid #f5cd49;
    color: #795704;
}

.book-page-genre-select .score-select-option:is([data-value="морские"], [data-value="выживание"], [data-value="дорожное"], [data-value="экспедиции"], [data-value="сокровища"]):hover {
    background: #f5cd49;
}

.book-page-genre-select .score-select-option[data-value="Классика"],
.book-page-pill[data-value="Классика"] {
    background: #9ed0ff;
    border: 1px solid #60aef5;
    color: #024367;
}

.book-page-genre-select .score-select-option[data-value="Классика"]:hover {
    background: #6fafea;
}

.book-page-genre-select .score-select-option:is([data-value="реализм"], [data-value="сентиментальная"], [data-value="философская"], [data-value="сатирическая"]),
.book-page-pill:is([data-value="реализм"], [data-value="сентиментальная"], [data-value="философская"], [data-value="сатирическая"]) {
    background: #bae6fd;
    border: 1px solid #7dd3fc;
    color: #024367;
}

.book-page-genre-select .score-select-option:is([data-value="реализм"], [data-value="сентиментальная"], [data-value="философская"], [data-value="сатирическая"]):hover {
    background: #9ed0ff;
}

.book-page-genre-select .score-select-option[data-value="Нон-фикшн"],
.book-page-pill[data-value="Нон-фикшн"] {
    background: #67f5c1;
    border: 1px solid #2ed69b;
    color: #02533c;
}

.book-page-genre-select .score-select-option[data-value="Нон-фикшн"]:hover {
    background: #34cf96;
}

.book-page-genre-select .score-select-option:is([data-value="биографии"], [data-value="мемуары"], [data-value="научпоп"], [data-value="бизнес"], [data-value="карьера"], [data-value="саморазвитие"], [data-value="психология"], [data-value="кулинария"], [data-value="путеводитель"]),
.book-page-pill:is([data-value="биографии"], [data-value="мемуары"], [data-value="научпоп"], [data-value="бизнес"], [data-value="карьера"], [data-value="саморазвитие"], [data-value="психология"], [data-value="кулинария"], [data-value="путеводитель"]) {
    background: #c8fee5;
    border: 1px solid #67f5c1;
    color: #02533c;
}

.book-page-genre-select .score-select-option:is([data-value="биографии"], [data-value="мемуары"], [data-value="научпоп"], [data-value="бизнес"], [data-value="карьера"], [data-value="саморазвитие"], [data-value="психология"], [data-value="кулинария"], [data-value="путеводитель"]):hover {
    background: #67f5c1;
}

.book-page-genre-select .score-select-option[data-value="Историческое"],
.book-page-pill[data-value="Историческое"] {
    background: #c2c9d2;
    border: 1px solid #94a3b8;
    color: #475569;
}

.book-page-genre-select .score-select-option[data-value="Историческое"]:hover {
    background: #a3acb9;
}

.book-page-genre-select .score-select-option:is([data-value="альтернативная"], [data-value="военная"], [data-value="интриги"], [data-value="хроники"]),
.book-page-pill:is([data-value="альтернативная"], [data-value="военная"], [data-value="интриги"], [data-value="хроники"]) {
    background: #e2e6ed;
    border: 1px solid #c2c9d2;
    color: #475569;
}

.book-page-genre-select .score-select-option:is([data-value="альтернативная"], [data-value="военная"], [data-value="интриги"], [data-value="хроники"]):hover {
    background: #c2c9d2;
}

.book-page-pill-genre.book-page-pill-updated {
    animation: slideBookPageValueIn 0.28s ease-out;
}

.book-page-pill-subgenre.book-page-pill-updated {
    animation: slideBookPageValueIn 0.5s ease-out;
}

.book-page-pill-subgenre.book-page-pill-entered {
    animation: slideBookPageSubgenreFromLeft 0.5s ease-out;
}

.book-page-pill-subgenre-removing {
    animation: dissolveBookPageSubgenre 0.18s ease-out forwards;
    pointer-events: none;
}

.book-page-pill-subgenre-added {
    animation: riseBookPageSubgenre 0.32s ease-out both;
}

.book-page-pill-subgenre.book-page-pill-subgenre-removing {
    animation: dissolveBookPageSubgenre 0.18s ease-out forwards;
}

@keyframes riseBookPageSubgenre {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes dissolveBookPageSubgenre {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.8); }
}

@keyframes slideBookPageSubgenreFromLeft {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.book-page-pill-genre.book-page-pill-removing {
    animation: hideBookPageGenrePill 0.18s ease-out forwards;
}

.book-page-pill-ageCategory {
    min-height: 28px;
    color: var(--age-category-color, #4b5563);
    border: 1px solid var(--age-category-border, #d1d5db);
    background: var(--age-category-background, #f3f4f6);
}

.book-page-pill-ageCategory[data-value="Для детей"],
.book-page-age-select[data-value^="Для детей"],
.book-page-age-select .score-select-option[data-value^="Для детей"] {
    --age-category-color: #0F766E;
    --age-category-border: #5EEAD4;
    --age-category-background: #99F6E4;
    --age-category-hover: #5EEAD4;
}

.book-page-pill-ageCategory[data-value="Молодёжная"],
.book-page-age-select[data-value^="Молод"],
.book-page-age-select .score-select-option[data-value^="Молод"] {
    --age-category-color: #0284C7;
    --age-category-border: #93C5FD;
    --age-category-background: #BFDBFE;
    --age-category-hover: #93C5FD;
}

.book-page-pill-ageCategory[data-value="Для взрослых"],
.book-page-age-select[data-value^="Для взрослых"],
.book-page-age-select .score-select-option[data-value^="Для взрослых"] {
    --age-category-color: #9F315E;
    --age-category-border: #F9A8D4;
    --age-category-background: #FBCFE8;
    --age-category-hover: #F9A8D4;
}

.book-detail-actions>.book-page-pill-ageCategory {
    flex: 0 0 auto;
}

.book-page-age-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

.book-page-age-select .score-select-button.book-page-pill {
    width: fit-content;
    min-width: 0;
    height: 28px;
    min-height: 28px;
    padding: 6px 10px;
    text-align: center;
}

.book-page-age-select .score-select-button:not(.book-page-pill) {
    height: 28px;
    min-height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 9999px;
}

.book-page-inline-select.book-page-age-select[data-book-field="ageCategory"] .score-select-button.book-page-pill {
    border-color: #ca1a92;
    background: var(--age-category-background);
    box-shadow: 0 0 0 2px rgba(202, 26, 146, 0.25);
}

.book-page-age-select .score-select-options {
    left: auto;
    right: 0;
    width: 230px;
    min-width: 100%;
}

.book-page-age-select .score-select-option {
    white-space: nowrap;
    border: 1px solid var(--age-category-border, transparent);
    background: var(--age-category-background, transparent);
    color: var(--age-category-color, #4b5563);
}

.book-page-age-select .score-select-option:hover {
    background: var(--age-category-hover, #f3f4f6);
}

@media (max-width: 640px) {
    .book-detail-layout {
        grid-template-columns: 1fr;
    }

    .book-detail-info {
        min-width: 0;
    }

    .book-page-field-row {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .book-detail-actions {
        width: auto;
    }

    .book-page-genre-select .book-page-genre-options {
        grid-template-columns: 1fr 1fr;
        width: min(100%, 92vw);
    }

    .book-page-genre-field-row {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .book-page-genre-edit-wrap .book-page-genre-select {
        width: 100%;
        min-width: 0;
    }

    .book-cover-panel {
        width: min(100%, 320px);
        margin-right: auto;
        margin-left: auto;
    }
}

.related-collection {
    margin-bottom: 18px;
}

.related-collection:last-child {
    margin-bottom: 0;
}

.related-series {
    position: relative;
    margin: 12px 0 0 16px;
    padding-left: 14px;
}

.related-series::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    bottom: 4px;
    width: 3px;
    background: #f2c6e4;
    border-radius: 9999px;
}

.related-series h4 {
    margin: 0 0 8px;
    color: #5b21b6;
}

.related-books ul {
    margin: 0;
    padding-left: 22px;
}

.related-books li {
    margin: 8px 0;
}

.related-books a {
    color: inherit;
    text-decoration: none;
}

.related-series a:hover {
    color: #4c1d95;
    text-decoration: underline;
}

.current-related-book {
    color: #ca1a92;
    text-decoration: underline;
}

.empty-book-page {
    padding: 20px;
    border-radius: 12px;
    background: #ffffff;
    color: #4b5563;
    font-weight: 700;
}

.collection-status {
    align-self: center;
    margin-top: 0;
}

#add-book-form .status-select>.status-choice,
.form-group .status-select>.status-choice {
    font-weight: bold;
}

.status-choice.completed {
    background-color: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

.status-choice.in-progress {
    background-color: #fef3c7;
    color: #b45309;
    border: 1px solid #facc15;
}

.status-choice.planned {
    background-color: #f3f4f6;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

#add-book-form .status-select .status-choice.completed,
.form-group .status-select .status-choice.completed {
    background-color: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

#add-book-form .status-select .status-choice.in-progress,
.form-group .status-select .status-choice.in-progress {
    background-color: #fef3c7;
    color: #b45309;
    border: 1px solid #facc15;
}

#add-book-form .status-select .status-choice.planned,
.form-group .status-select .status-choice.planned {
    background-color: #f3f4f6;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

#add-book-form .status-select.active>.status-choice.completed,
#add-book-form .status-select>.status-choice.completed:focus,
.form-group .status-select.active>.status-choice.completed,
.form-group .status-select>.status-choice.completed:focus {
    border-color: #15803d;
    box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.25);
}

#add-book-form .status-select.active>.status-choice.in-progress,
#add-book-form .status-select>.status-choice.in-progress:focus,
.form-group .status-select.active>.status-choice.in-progress,
.form-group .status-select>.status-choice.in-progress:focus {
    border-color: #b45309;
    box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.25);
}

#add-book-form .status-select.active>.status-choice.planned,
#add-book-form .status-select>.status-choice.planned:focus,
.form-group .status-select.active>.status-choice.planned,
.form-group .status-select>.status-choice.planned:focus {
    border-color: #4b5563;
    box-shadow: 0 0 0 2px rgba(75, 85, 99, 0.25);
}

#add-book-form .status-select .score-select-options .status-choice,
.form-group .status-select .score-select-options .status-choice {
    font-weight: normal;
}

/* Общий вид всех кнопок в выпадающих меню */
.dropdown-menu button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    text-align: right;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}

/* Наведение для всех кнопок меню */
.dropdown-menu button:hover {
    background-color: #f0f0f0;
}

/* Отдельный вид кнопки "Удалить" */
.dropdown-menu .delete-btn {
    display: inline-block;
    background-color: #ffffff;
    border: 1px solid #dc2626;
    color: #dc2626;
    font-weight: bold;
    text-align: center;
    border-radius: 9999px;
    width: auto;
    margin: 0 auto;
    padding: 8px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Отдельное наведение именно для "Удалить" */
.dropdown-menu .delete-btn:hover {
    background-color: #fee2e2;
    color: #b91c1c;
}

.dropdown-menu {
    padding: 4px;
    text-align: center;
}

.delete-menu {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    min-width: 0;
}

.collection-delete-menu {
    background: #ffffff;
    border-radius: 9999px;
    padding: 0;
}

/* === МОДАЛЬНЫЕ ОКНА === */
/* Здесь затемнение страницы, белое окно редактирования, поля и кнопки сохранения. */

/* --- Фон и окно модалки --- */

/* Затемнение страницы и центрирование модального окна */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Белая карточка модального окна */
.modal-content {
    box-sizing: border-box;
    position: relative;
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    width: 90%;
    max-width: 460px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.modal.hidden .modal-content {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
}

/* --- Шапка модалки --- */

/* Заголовок внутри модального окна */
.modal-header {
    box-sizing: border-box;
    width: calc(100% - 64px);
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 9999px;
    border: 1px solid #4c1d95;
    box-shadow: 0 0 0 2px rgba(76, 29, 149, 0.25);
    outline: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.modal-header h3,
.modal-header [role="heading"] {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    color: #4c1d95;
}

.cover-photo-title-button {
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cover-photo-title-button:hover,
.cover-photo-title-button:focus-visible {
    color: #4c1d95;
    background-color: #f5ebf8;
}

/* Кнопка закрытия модального окна */
.modal-close-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid #4c1d95;
    box-shadow: 0 0 0 2px rgba(76, 29, 149, 0.25);
    background: transparent;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    border-radius: 9999px;
    color: #4c1d95;
}

.modal-close-btn svg {
    width: 30px;
    height: 30px;
}

.modal-close-btn:hover {
    color: #4c1d95;
    background-color: #f5ebf8;
}

/* --- Поля и кнопки модалки --- */

/* Поля внутри модального окна */
.form-group {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.form-group input,
.form-group select {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 28px 8px 8px;
    border: 1px solid #ccc;
    border-radius: 7px;
}

.series-author-row {
    display: flex;
    gap: 8px;
}

.icon-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #c4b5fd;
    border-radius: 7px;
    background: #ffffff;
    color: #4c1d95;
    cursor: pointer;
}

.icon-toggle-btn svg {
    width: 18px;
    height: 18px;
}

.icon-toggle-btn:hover,
.icon-toggle-btn.active {
    border-color: #4c1d95;
    background: #f5ebf8;
}

.icon-toggle-btn.active {
    box-shadow: 0 0 0 2px rgba(76, 29, 149, 0.18);
}

/* Нижняя строка кнопок в модальном окне */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* Кнопка сохранения в модальном окне */
.btn-save {
    background-color: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
    padding: 9px 18px;
    border-radius: 9999px;
    cursor: pointer;
    font-weight: bold;
}

.btn-save:hover,
.btn-save:focus-visible {
    border: 1px solid #15803d;
    box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.25);
    outline: none;
}

/* Повтор панели сортировки в конце файла: сейчас дублирует стили выше */
.sort-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -18px 0 30px;
}

.sort-panel button {
    padding: 8px 12px;
    border: 1px solid #4c1d95;
    border-radius: 7px;
    background: #ffffff;
    color: #4c1d95;
    cursor: pointer;
}

.cover-photo-viewer {
    border: none;
    border-radius: 12px;
    padding: 16px 84px;
    background: white;
    max-width: calc(100vw - 200px);
    max-height: calc(90vh - 32px);
}

.cover-photo-viewer::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.cover-photo-viewer img {
    display: block;
    width: min(calc(100vw - 200px), calc((90vh - 32px) * var(--cover-ratio, 0.667)));
    height: auto;
}

.cover-photo-viewer .modal-close-btn {
    top: 16px;
    right: 16px;
}
.auth-screen.hidden { display: none; }

.auth-screen {
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #f2c6e4;
}

.auth-card {
    box-sizing: border-box;
    width: min(420px, 100%);
    padding: 36px;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.auth-screen:not(.hidden) .auth-card {
    animation: showAuthCard 800ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

@keyframes showAuthCard {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-card h2 {
    color: #4c1d95;
}

.auth-button {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #ca1a92;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-button:hover,
.auth-button:focus-visible {
    border-color: #4c1d95;
    background: #4c1d95;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(76, 29, 149, 0.25);
    outline: none;
}