/* ===== Основные стили Bookly ===== */

/* ===== Duetly Studio footer ===== */
.duetly-studio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
}

.duetly-studio__link {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}
.duetly-studio__link:hover { color: rgba(255, 255, 255, 0.9); }

.duetly-studio__heart-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.duetly-studio__heart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #f87171;
  line-height: 0;
}
.duetly-studio__heart-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: center;
  transition: transform 0.2s ease, fill 0.2s ease;
}
.duetly-studio__heart-btn:hover svg { transform: scale(1.2); }
.duetly-studio__heart-btn.is-liked svg { fill: #f87171; stroke: #f87171; }

.duetly-studio__plus-one {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 11px;
  font-weight: 700;
  color: #f87171;
  pointer-events: none;
  white-space: nowrap;
  animation: duetly-plus-one 1.1s ease-out forwards;
}

@keyframes duetly-plus-one {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
  65%  { opacity: 1; transform: translate(-50%, -16px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -28px) scale(0.85); }
}

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

.book-card {
    animation: bookCardIn 0.28s ease backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
}

.book-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.book-card:not(.transform) {
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.book-card:not(.transform):hover {
    transform: translateY(-5px);
}

.pricing-card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.pricing-popular {
    border: 2px solid #6366f1;
    position: relative;
}

.pricing-popular::after {
    content: "Популярный";
    position: absolute;
    top: -12px;
    right: 20px;
    background: #6366f1;
    color: white;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.modal {
    transition: opacity 0.3s ease;
}


/* Кнопка "Показать еще" */
#show-more-btn {
    display: inline-flex;
    margin: 2rem auto;
}

#show-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#books-loader {
    transition: opacity 0.3s ease;
}

/* Стили для поиска */
#search-button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    /* Фиолетовый стиль Bookly */
    border: 1px solid #6366f1;
    background-color: #6366f1;
    color: white;
    transition: all 0.2s ease;
    position: absolute;
    right: 10px; /* Сдвинул на 2px вправо (было 8px) */
    top: 50%;
    transform: translateY(-50%);
}

#search-button:hover {
    background-color: #4f46e5;
    border-color: #4f46e5;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.dark #search-button {
    border-color: #818cf8;
    background-color: #818cf8;
}

.dark #search-button:hover {
    background-color: #6366f1;
    border-color: #6366f1;
    box-shadow: 0 2px 4px rgba(129, 140, 248, 0.3);
}

/* Стили для кнопки очистки */
#clear-search {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    position: absolute;
    right: 50px; /* Отступ от кнопки поиска */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
}

#clear-search:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

#clear-search:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dark #clear-search:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Поле ввода поиска */
#search-input {
    border: 2px solid #d1d5db;
    transition: all 0.1s ease;
    outline: none;
    border-radius: 0.5rem;
    padding-right: 80px; /* 32px кнопка + 10px отступ + 24px крестик + 8px промежуток + 6px запаса */
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
}

#search-input:hover {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3);
}

#search-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.dark #search-input {
    border-color: #4b5563;
    background-color: #374151;
    color: white;
}

.dark #search-input:hover {
    border-color: #818cf8;
}

.dark #search-input:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2);
}

/* Контейнер для поиска */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Адаптивность для поиска */
@media (max-width: 640px) {
    #search-button {
        width: 28px;
        height: 28px;
        right: 8px; /* 6px + 2px */
    }
    
    #clear-search {
        width: 20px;
        height: 20px;
        right: 42px; /* 28px кнопка + 8px отступ + 6px промежуток */
    }
    
    #search-input {
        padding-right: 62px;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
        height: 42px;
    }
}

/* Стили для кнопок жанров */
.genre-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid #e5e7eb;
    background-color: white;
    color: #6b7280;
}

.dark .genre-btn {
    border-color: #4b5563;
    background-color: #374151;
    color: #d1d5db;
}

/* Каталог: селекты сортировки и жанров */
#catalog-sort,
#catalog-filter-genre {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: #ffffff;
    color: #111827;
    padding: 0.5rem 2.5rem 0.5rem 0.9rem;
    min-height: 40px;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#catalog-sort:hover,
#catalog-filter-genre:hover {
    border-color: #4f46e5;
    box-shadow: 0 1px 6px rgba(99, 102, 241, 0.15);
}

#catalog-sort:focus,
#catalog-filter-genre:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.dark #catalog-sort,
.dark #catalog-filter-genre {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23818cf8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
}

.dark #catalog-sort:focus,
.dark #catalog-filter-genre:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

.dark #catalog-sort:hover,
.dark #catalog-filter-genre:hover {
    border-color: #818cf8;
    box-shadow: 0 1px 8px rgba(129, 140, 248, 0.18);
    background-color: #3f4463;
}

/* Каталог: строка поиска */
#catalog-search {
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #111827;
    padding: 0.5rem 2.8rem 0.5rem 1rem;
    min-height: 40px;
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#catalog-search:hover {
    border-color: #4f46e5;
    box-shadow: 0 1px 6px rgba(99, 102, 241, 0.15);
}

#catalog-search:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.dark #catalog-search {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
}

.dark #catalog-search:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

.dark #catalog-search:hover {
    border-color: #818cf8;
    box-shadow: 0 1px 8px rgba(129, 140, 248, 0.18);
    background-color: #3f4463;
}

/* Каталог: пагинация */
/* Каталог: карточка статистики */
.catalog-stats-card {
    border: 1px solid rgba(99, 102, 241, 0.15);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(243, 244, 246, 0.96));
}

.catalog-stats-card:hover {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 20px 40px -20px rgba(99, 102, 241, 0.35);
}

.dark .catalog-stats-card {
    border: 1px solid rgba(129, 140, 248, 0.25);
    background: radial-gradient(circle at top left, rgba(45, 55, 72, 0.95), rgba(30, 41, 59, 0.95));
}

.dark .catalog-stats-card:hover {
    border-color: rgba(129, 140, 248, 0.45);
    box-shadow: 0 25px 50px -25px rgba(129, 140, 248, 0.4);
}

/* Активное состояние - полностью фиолетовая заливка */
.genre-btn.active-genre {
    background-color: #6366f1 !important;
       color: white !important;
}

.dark .genre-btn.active-genre {
    background-color: #6366f1 !important;
       color: white !important;
}

/* Ховер эффект */
.genre-btn:not(.active-genre):hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

.dark .genre-btn:not(.active-genre):hover {
    background-color: #4b5563;
    border-color: #6b7280;
    color: #e5e7eb;
    box-shadow: 0 8px 18px -10px rgba(99, 102, 241, 0.35);
}

/* Стили для кнопки избранного */
.favorites-circle-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    background-color: white;
    color: #6b7280;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.dark .favorites-circle-btn {
    border-color: #4b5563;
    background-color: #374151;
    color: #d1d5db;
}

/* Активное состояние для кнопки избранного - полностью фиолетовая */
.favorites-circle-btn.active-genre {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
    color: white !important;
}

.dark .favorites-circle-btn.active-genre {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
    color: white !important;
}

/* Ховер для кнопки избранного */
.favorites-circle-btn:not(.active-genre):hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

.dark .favorites-circle-btn:not(.active-genre):hover {
    background-color: #4b5563;
    border-color: #6b7280;
    color: #e5e7eb;
    box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.45);
}

/* Стили для кнопок навигации */
.genre-nav-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background-color: white;
    color: #6b7280;
    transition: all 0.2s ease;
}

.dark .genre-nav-btn {
    border-color: #4b5563;
    background-color: #374151;
    color: #d1d5db;
}

.genre-nav-btn:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

.dark .genre-nav-btn:hover {
    background-color: #4b5563;
    border-color: #6b7280;
    color: #e5e7eb;
}

/* Анимация при наведении */
.genre-btn, .favorites-circle-btn, .genre-nav-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.genre-btn:active, .favorites-circle-btn:active, .genre-nav-btn:active {
    transform: scale(0.95);
}

/* Убираем любые другие стили которые могут переопределять фиолетовый цвет */
.genre-btn.active-genre,
.favorites-circle-btn.active-genre {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
    color: white !important;
}

/* Темная тема */
.dark {
    color-scheme: dark;
}

html.dark {
    background-color: #050b1a;
}

.dark body {
    background-color: #050b1a;
    color: #dde6f7;
}


.dark .bg-slate-950 {
    background-color: #0b1220 !important;
}
.dark .bg-white {
    background-color: #121826;
}

.dark .bg-gray-50 {
    background-color: #141b2a;
}

.dark .bg-gray-100 {
    background-color: #1d2535;
}

.dark .text-gray-900 {
    color: #f3f4f6;
}

.dark .text-gray-700 {
    color: #d1d5db;
}

.dark .text-gray-600 {
    color: #9ca3af;
}

.dark .text-gray-500 {
    color: #6b7280;
}

.dark .border-gray-300 {
    border-color: #4b5563;
}

.dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}


.dark footer {
    background-color: #111827;
}

.dark .summary-content h3,
.dark .summary-content h4 {
    color: #f9fafb !important;
}

.dark .summary-content p {
    color: #d1d5db !important;
}

.dark .meta-info .meta-row {
    border-color: #4b5563 !important;
    background-color: #374151 !important;
}

.dark .meta-info span {
    color: #d1d5db !important;
}

.dark .meta-info .font-semibold {
    color: #e5e7eb !important;
}

/* Специфические стили для контента пересказа */
.dark .summary-content .prose {
    color: #d1d5db !important;
}

.dark .summary-content .prose strong {
    color: #e5e7eb !important;
}

.dark .summary-content .prose em {
    color: #9ca3af !important;
}

/* Стили для списков в пересказе */
.dark .summary-content .prose ul,
.dark .summary-content .prose ol {
    color: #d1d5db !important;
}

.dark .summary-content .prose li {
    color: #d1d5db !important;
}

/* Стили для цитат в пересказе */
.dark .summary-content .prose blockquote {
    color: #9ca3af !important;
    border-left-color: #4b5563 !important;
    background-color: #374151 !important;
}

#chatModal .friend-item {
    border-radius: 0.75rem;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

#chatModal .friend-item:hover {
    background-color: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 12px 26px -18px rgba(79, 70, 229, 0.55);
}

.dark #chatModal .friend-item:hover {
    background-color: rgba(79, 70, 229, 0.18);
    border-color: rgba(129, 140, 248, 0.35);
    box-shadow: 0 14px 32px -20px rgba(79, 70, 229, 0.6);
}

#chatModal .friend-item:active {
    transform: translateY(1px);
    background-color: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.38);
}

.dark #chatModal .friend-item:active {
    background-color: rgba(79, 70, 229, 0.28);
    border-color: rgba(129, 140, 248, 0.45);
}

#chatModal .friend-item.active {
    background-color: rgba(79, 70, 229, 0.16);
    border-color: rgba(79, 70, 229, 0.42);
    box-shadow: 0 18px 36px -22px rgba(79, 70, 229, 0.6);
}

.dark #chatModal .friend-item.active {
    background-color: rgba(79, 70, 229, 0.26);
    border-color: rgba(129, 140, 248, 0.5);
    box-shadow: 0 20px 44px -24px rgba(79, 70, 229, 0.65);
}
    
.message {
    animation: fadeIn 0.3s ease;
}
    
.message.outgoing {
    margin-left: auto;
}
    
.message.incoming {
    margin-right: auto;
}

/* Выделяем входящие сообщения на стеклянном фоне */
#chatModal .message.justify-start > div {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(203, 213, 225, 0.9);
    box-shadow: 0 16px 24px -20px rgba(15, 23, 42, 0.35);
    color: #1f2937;
}

#chatModal .message.justify-start > div .text-gray-500 {
    color: rgba(71, 85, 105, 0.85);
}

.dark #chatModal .message.justify-start > div {
    background-color: rgba(55, 65, 81, 0.92);
    border-color: rgba(75, 85, 99, 0.7);
    box-shadow: 0 14px 20px -18px rgba(15, 23, 42, 0.55);
    color: #e5e7eb;
}

.dark #chatModal .message.justify-start > div .text-gray-500 {
    color: rgba(209, 213, 219, 0.7);
}

/* Добавляем «воздуха» исходящим пузырям */
#chatModal .message.justify-end > div {
    box-shadow: 0 16px 24px -18px rgba(79, 70, 229, 0.45);
}

.dark #chatModal .message.justify-end > div {
    box-shadow: 0 18px 26px -20px rgba(54, 41, 183, 0.55);
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}
    
.unread-count {
    transition: all 0.3s ease;
    font-size: 0.75rem;
}
    
.friend-request-item {
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem;
}
    
.dark .friend-request-item {
    border-bottom: 1px solid #4b5563;
}
    
.accept-request, .decline-request, .cancel-request {
    transition: color 0.2s ease;
}
    
.accept-request:hover {
    color: #059669 !important;
}
    
.decline-request:hover {
    color: #dc2626 !important;
}
    
.cancel-request:hover {
    color: #374151 !important;
}
    
.dark .cancel-request:hover {
    color: #d1d5db !important;
}


/* Мобильное меню */
.mobile-menu {
    transition: all 0.3s ease;
    max-height: 0;
    overflow: hidden;
}

.mobile-menu.open {
    max-height: 500px;
}

.mobile-user-avatar {
    display: none;
}

@media (max-width: 768px) {
    .mobile-user-avatar {
        display: flex;
        align-items: center;
    }

    .mobile-auth-button {
        display: block;
    }

    #mobile-user-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        background: white;
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        z-index: 50;
        min-width: 150px;
        display: none;
    }

    .dark #mobile-user-dropdown {
        background: #374151;
    }

    #mobile-user-dropdown.show {
        display: block;
    }

    .mobile-dropdown-item {
        padding: 0.75rem 1rem;
        display: block;
        color: #374151;
        font-size: 0.875rem;
    }

    .dark .mobile-dropdown-item {
        color: #e5e7eb;
    }

    .mobile-dropdown-item:hover {
        background: #f3f4f6;
    }

    .dark .mobile-dropdown-item:hover {
        background: #4b5563;
    }
}

/* Модальное окно авторизации */
.auth-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

.auth-tab {
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}

.auth-tab.active {
    border-bottom: 2px solid #6366f1 !important;
    color: #6366f1 !important;
}

.auth-tab:not(.active) {
    border-bottom: 2px solid transparent;
    color: #6b7280;
}

.dark .auth-tab:not(.active) {
    color: #9ca3af;
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

/* Стеклянные модалки */
.glass-panel {
    background-color: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 32px 60px -28px rgba(15, 23, 42, 0.45);
}

.dark .glass-panel {
    background-color: rgba(17, 24, 39, 0.62);
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 34px 70px -30px rgba(15, 23, 42, 0.7);
}

.glass-section {
    background-color: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border-color: rgba(148, 163, 184, 0.45) !important;
}

.dark .glass-section {
    background-color: rgba(30, 41, 59, 0.55);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border-color: rgba(75, 85, 99, 0.65) !important;
}

.glass-scroll {
    background-color: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.dark .glass-scroll {
    background-color: rgba(30, 41, 59, 0.48);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


.glass-content {
    background-color: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.dark .glass-content {
    background-color: rgba(17, 25, 40, 0.68);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
}

.glass-notification {
    background-color: rgba(248, 250, 252, 0.78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #1f2937;
}

.dark .glass-notification {
    background-color: rgba(12, 18, 32, 0.7);
    border-color: rgba(148, 163, 184, 0.35);
    color: #e5edf9;
}

.glass-notification--success {
    color: #047857;
    border-color: rgba(16, 185, 129, 0.35);
}

.dark .glass-notification--success {
    color: #bbf7d0;
    border-color: rgba(56, 189, 248, 0.35);
}

.glass-notification--neutral {
    color: #1f2937;
    border-color: rgba(148, 163, 184, 0.4);
}

.dark .glass-notification--neutral {
    color: #dbeafe;
    border-color: rgba(148, 163, 184, 0.4);
}

.glass-notification--error {
    color: #b91c1c;
    border-color: rgba(248, 113, 113, 0.45);
}

.dark .glass-notification--error {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.45);
}


.news-card__text ul.news-list {
    margin: 1rem 0;
    padding-left: 1.5rem;
    list-style: none;
}

.news-card__text ul.news-list li {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #4b5563;
    line-height: 1.6;
}

.news-card__text ul.news-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #6366f1;
    font-weight: bold;
}

.dark .news-card__text ul.news-list li {
    color: #d1d5db;
}

.dark .news-card__text ul.news-list li::before {
    color: #818cf8;
}

.news-card__text .news-content-image {
    margin: 1rem 0;
    text-align: center;
}

.news-card__text .news-content-image img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    border: none;
    box-shadow: none;
    outline: none;
    transition: transform 0.3s ease;
    margin-left: auto;
    margin-right: auto;
}

.news-card__text .news-content-image img:hover {
    transform: scale(1.02);
}

.dark .news-card__text .news-content-image img {
    border: none;
    box-shadow: none;
    outline: none;
}

.news-gallery {
    margin: 1.5rem 0;
}

.news-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.news-gallery-item {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.2);
}

.news-gallery-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-gallery-img.news-image-zoomed {
    transform: scale(1.5);
    cursor: zoom-out;
}

.news-gallery-caption {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: #6b7280;
    background: rgba(0, 0, 0, 0.02);
}

.dark .news-gallery-caption {
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.05);
}

.news-gallery-img,
.news-card__text .news-content-image img {
    opacity: 0;
}

.news-gallery-img.news-image-loaded,
.news-card__text .news-content-image img.news-image-loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.news-card__text .news-content-image img.news-image-error {
    filter: grayscale(0.7);
    opacity: 0.7;
}

.glass-divider {
    border-color: rgba(148, 163, 184, 0.5) !important;
}

.dark .glass-divider {
    border-color: rgba(75, 85, 99, 0.7) !important;
}

#authModal .glass-panel {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(26px) saturate(165%);
    -webkit-backdrop-filter: blur(26px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.dark #authModal .glass-panel {
    background-color: rgba(17, 24, 39, 0.52);
    border-color: rgba(148, 163, 184, 0.35);
    backdrop-filter: blur(28px) saturate(175%);
    -webkit-backdrop-filter: blur(28px) saturate(175%);
}

#authModal .glass-content {
    background-color: rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.dark #authModal .glass-content {
    background-color: rgba(17, 24, 39, 0.46);
    border-color: rgba(148, 163, 184, 0.3);
    backdrop-filter: blur(22px) saturate(175%);
    -webkit-backdrop-filter: blur(22px) saturate(175%);
}

/* Auth modal controls */
#authModal .auth-form input,
#authModal .auth-form select,
#authModal .auth-form textarea {
    background-color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.6);
    color: #111827;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.dark #authModal .auth-form input,
.dark #authModal .auth-form select,
.dark #authModal .auth-form textarea {
    background-color: rgba(17, 24, 39, 0.72);
    border-color: rgba(148, 163, 184, 0.45);
    color: #e5e7eb;
}

#authModal .auth-form input:hover,
#authModal .auth-form select:hover,
#authModal .auth-form textarea:hover {
    border-color: rgba(99, 102, 241, 0.65);
    box-shadow: 0 1px 6px rgba(99, 102, 241, 0.14);
}

.dark #authModal .auth-form input:hover,
.dark #authModal .auth-form select:hover,
.dark #authModal .auth-form textarea:hover {
    border-color: rgba(129, 140, 248, 0.6);
    box-shadow: 0 1px 10px rgba(129, 140, 248, 0.18);
}

#authModal .auth-form input:focus,
#authModal .auth-form select:focus,
#authModal .auth-form textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22), 0 6px 18px -14px rgba(79, 70, 229, 0.45);
    background-color: rgba(255, 255, 255, 0.82);
}

.dark #authModal .auth-form input:focus,
.dark #authModal .auth-form select:focus,
.dark #authModal .auth-form textarea:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.28), 0 10px 24px -20px rgba(99, 102, 241, 0.55);
    background-color: rgba(17, 24, 39, 0.78);
}

#authModal .auth-form button,
#authModal .auth-tabs .auth-tab {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

#authModal .auth-tabs .auth-tab:focus-visible,
#authModal .auth-form button:focus-visible {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.26);
}

#authModal .auth-form button:hover {
    box-shadow: 0 8px 18px -14px rgba(79, 70, 229, 0.45);
}

#authModal .auth-form button:active {
    box-shadow: 0 4px 12px -10px rgba(79, 70, 229, 0.4);
}

#authModal .auth-form input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.4rem;
    border-width: 1px;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

#authModal .auth-form input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.3);
    border-color: #6366f1;
}

/* Custom select styling */
#authModal .auth-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.75rem;
    background-position: right 0.85rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366f1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

.dark #authModal .auth-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23818cf8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

#authModal .auth-form select::-ms-expand {
    display: none;
}

/* Custom date input styling */
#authModal .auth-form input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    padding-right: 2.85rem;
    background-position: right 0.85rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366f1'%3E%3Crect width='16' height='16' x='4' y='5' rx='2' ry='2' stroke-width='1.8'/%3E%3Cpath stroke-linecap='round' stroke-width='1.8' d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E");
}

.dark #authModal .auth-form input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23818cf8'%3E%3Crect width='16' height='16' x='4' y='5' rx='2' ry='2' stroke-width='1.8'/%3E%3Cpath stroke-linecap='round' stroke-width='1.8' d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E");
}

#authModal .auth-form input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 2.4rem;
    height: 100%;
    cursor: pointer;
}

#authModal .auth-form input[type="date"]::-webkit-clear-button,
#authModal .auth-form input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

#authModal .auth-form input[type="date"]::-ms-clear,
#authModal .auth-form input[type="date"]::-ms-expand {
    display: none;
}



.book-modal-panel {
    background-color: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 1.25rem;
    box-shadow: 0 28px 60px -20px rgba(15, 23, 42, 0.55);
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}

.dark .book-modal-panel {
    background-color: rgba(17, 24, 39, 0.82);
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 32px 70px -20px rgba(15, 23, 42, 0.8);
}

#bookModal .book-modal-overlay {
    pointer-events: none;
}

#bookModal.open .book-modal-overlay {
    opacity: 1;
    pointer-events: auto;
}

#bookModal .book-modal-panel {
    pointer-events: auto;
}

#bookModal.open [data-book-modal-panel] {
    opacity: 1;
    transform: scale(1);
}

#modal-header.with-compact-cover {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

#modal-header.with-compact-cover #compact-cover {
    height: 2.5rem;
}

#modal-header.with-compact-cover #compact-book-info {
    font-size: 0.72rem;
}

#bookModal .modal-book-summary {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

#bookModal .modal-book-summary .summary-content {
    padding: 0;
}

#bookModal #modal-header,
#bookModal #modal-footer {
    border-color: rgba(203, 213, 225, 0.85);
}

.dark #bookModal #modal-header,
.dark #bookModal #modal-footer {
    border-color: rgba(75, 85, 99, 0.7);
}


.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background-color: white;
}

.dark .form-input {
    background-color: #374151;
    border-color: #4b5563;
    color: white;
}

.form-error {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.auth-success {
    background-color: #dcfce7;
    border: 1px solid #22c55e;
    color: #166534;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.dark .auth-success {
    background-color: #166534;
    color: #dcfce7;
}

/* Форма регистрации */
.grid.grid-cols-2.gap-4 {
    gap: 1rem;
}

.form-input[type="date"] {
    padding: 0.7rem;
}

.form-input[type="password"] {
    padding: 0.7rem;
}

select.form-input {
    padding: 0.7rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1.2rem;
    padding-right: 2.5rem;
}

.dark select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

/* Профиль пользователя */
#profile-avatar-preview {
    transition: all 0.3s ease;
    cursor: pointer;
}

#profile-avatar-preview:hover {
    transform: scale(1.05);
}

#profile-avatar-preview::after {
    content: '✎';
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#profile-avatar-preview:hover::after {
    opacity: 1;
}

/* Аватары */
#user-avatar,
#mobile-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6366f1;
    color: white;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 768px) {
    #user-avatar,
    #mobile-user-avatar {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

.hidden {
    display: none;
}

/* Бейджи подписок */
.subscription-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    transition: transform 0.2s ease;
}

.subscription-badge[data-subscription="free"] {
    background-color: #9CA3AF;
    color: white;
}

.subscription-badge[data-subscription="pro"] {
    background-color: #10B981;
    color: white;
}

.subscription-badge[data-subscription="unlimited"] {
    background-color: #8B5CF6;
    color: white;
}

.subscription-badge[data-subscription="admin"] {
    background-color: #144efb;
    color: white;
}

@media (hover: hover) and (pointer: fine) {
    .subscription-badge:hover {
        transform: scale(1.06);
    }
    
    #user-avatar:hover {
        transform: scale(1.06);
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
    }
}

/* Кнопка "Читать" */
.read-btn {
    background: #6366f1;
    border: none;
    color: white;
    transition: all 0.2s ease;
    font-weight: 500;
    min-width: 80px;
    border-radius: 0.375rem;
}

.read-btn:hover {
    background: #4f46e5;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
}

/* Анимации */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

/* Лоадер */
.loader {
    display: none;
    width: 48px;
    height: 48px;
    border: 5px solid #f3f4f6;
    border-bottom-color: #4f46e5;
    border-radius: 50%;
    animation: rotation 1s linear infinite;
    margin: 20px auto;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Кнопка избранного */
.favorite-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.favorite-btn i.fa-star {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

.favorite-btn i.fas.fa-star {
    color: #fbbf24 !important;
}

.favorite-btn i.far.fa-star {
    color: #9ca3af !important;
}

.favorite-btn:hover i {
    transform: scale(1.25);
    transition: transform 0.2s ease;
}

/* Круглая кнопка избранного */
.favorites-circle-btn {
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.favorites-circle-btn:hover {
    background-color: #f9fafb;
}

.favorites-circle-btn.active-genre {
    background-color: #6366f1;
    border-color: #6366f1;
}

.favorites-circle-btn.active-genre i {
    color: white !important; /* Это меняет цвет на белый */
}

.favorites-circle-btn:not(.active-genre) i {
    color: #f59e0b !important;
}

.dark .favorites-circle-btn {
    border-color: #4b5563;
}

.dark .favorites-circle-btn:hover {
    border-color: #818cf8;
    background-color: #374151;
}

.dark .favorites-circle-btn i {
    color: #fcd34d !important;
}

/* Cookie баннер */
#cookie-banner {
    transform: translateY(100%);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    background: rgba(17, 24, 39, 0.95);
}

#cookie-banner.translate-y-0 {
    transform: translateY(0);
}

#cookie-banner.translate-y-full {
    transform: translateY(100%);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#cookie-banner {
    animation: slideUp 0.5s ease-out forwards;
}

@media (max-width: 768px) {
    #cookie-banner {
        padding: 16px;
    }
}

/* Утилитарные классы */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Адаптивность */
@media (max-width: 640px) {
    .genre-btn {
        padding: 0.35rem 0.8rem;
        font-size: 0.75rem;
    }
    
    .read-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
        min-width: 70px;
    }
    
    .book-card {
        margin-bottom: 1rem;
    }
    
    #search-button {
        width: 28px;
        height: 28px;
    }
    
    #clear-search {
        width: 20px;
        height: 20px;
    }
}

/* Вкладки профиля */
.profile-tab-content {
    display: none;
}

.profile-tab-content.active {
    display: block;
}

.profile-tab.active {
    border-bottom: 2px solid #6366f1 !important;
    color: #111827 !important;
}

.dark .profile-tab.active {
    color: #ffffff !important;
}

/* Счетчик просмотров */
.fa-eye {
    font-size: 10px;
}

.book-card .flex.items-center.text-gray-500 {
    font-size: 0.8rem;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.book-card:hover .flex.items-center.text-gray-500 {
    opacity: 1;
}

.dark .book-card .flex.items-center.text-gray-500 {
    color: #9CA3AF;
}
.context-menu {
    min-width: 120px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.context-menu button {
    transition: background-color 0.2s;
}

.context-menu button:hover {
    background-color: #f3f4f6;
}

.dark .context-menu {
    border-color: #4b5563;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.dark .context-menu button:hover {
    background-color: #374151;
}

.status-online {
    background-color: #10B981; /* зеленый */
}

.status-recently {
    background-color: #F59E0B; /* оранжевый */
}

.status-offline {
    background-color: #9CA3AF; /* серый */
}
/* Анимации для плавного перехода */
.friends-list {
    transition: transform 0.3s ease;
}

/* Усиляем контраст стеклянной панели друзей в светлой теме */
#chatModal .friends-list {
    background-color: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.6);
    box-shadow: 0 18px 36px -24px rgba(15, 23, 42, 0.35);
    margin-left: -0.75rem;
    left: -0.5rem;
}

.dark #chatModal .friends-list {
    background-color: rgba(17, 24, 39, 0.78);
    border-color: rgba(148, 163, 184, 0.25);
}

#chatModal #chat-header {
    padding-bottom: 0.15rem;
    margin-bottom: 0;
    border-color: rgba(148, 163, 184, 0.55);
}

#chatModal #messages-container {
    padding: 0.18rem 0.5rem calc(0.35rem + 2px);
    margin-bottom: 0.1rem;
}

#chatModal .message-input {
    margin-top: 0;
    padding-top: 0.2rem;
    padding-bottom: 0;
    border-color: rgba(148, 163, 184, 0.45);
}

#chatModal #active-chat {
    position: relative;
}

#chatModal .message-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.75rem auto;
    color: #6b7280;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#chatModal .message-date-separator span {
    background: rgba(255, 255, 255, 0.8);
    padding: 0.2rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(203, 213, 225, 0.6);
    backdrop-filter: blur(6px);
}

.dark #chatModal .message-date-separator span {
    background: rgba(31, 41, 55, 0.75);
    border-color: rgba(75, 85, 99, 0.6);
    color: #d1d5db;
}

#messages-date-indicator {
    position: absolute;
    top: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    border-radius: 0;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    border: none;
    box-shadow: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}

#messages-date-indicator.visible {
    opacity: 1;
}

.dark #messages-date-indicator {
    background: transparent;
    border-color: transparent;
    color: #e5e7eb;
}

#chatModal .message-input > .relative,
#chatModal .message-input > #send-message-btn {
    margin-top: 0.25rem;
}

.dark #emoji-btn {
    background-color: rgba(148, 163, 184, 0.24);
    border-color: rgba(148, 163, 184, 0.35);
}

.dark #emoji-btn:hover {
    background-color: rgba(107, 114, 128, 0.32);
    border-color: rgba(148, 163, 184, 0.45);
}

.dark #emoji-btn {
    background-color: rgba(148, 163, 184, 0.24);
    border-color: rgba(148, 163, 184, 0.35);
}

.dark #emoji-btn:hover {
    background-color: rgba(107, 114, 128, 0.32);
    border-color: rgba(148, 163, 184, 0.45);
}

#chatModal #friends-panel {
    border-color: rgba(148, 163, 184, 0.45);
}

@media (min-width: 768px) {
    #chatModal .friends-list {
        margin-left: -0.5rem;
    }
}

.dark #chatModal #chat-header {
    border-color: rgba(75, 85, 99, 0.7);
}

.dark #chatModal .message-input {
    border-color: rgba(75, 85, 99, 0.7);
}

.dark #chatModal #friends-panel {
    border-color: rgba(75, 85, 99, 0.7);
}

/* Скрываем кнопки на десктопе */
@media (min-width: 768px) {
    #toggleFriendsList, #backToFriends {
        display: none !important;
    }
}

/* Адаптивные отступы для мобильных */
@media (max-width: 767px) {
    #chatModal .sm\:max-w-6xl {
        max-width: 100% !important;
        margin: 0.5rem !important;
    }
    
    .chat-container {
        height: 80vh !important;
        min-height: 400px !important;
    }
    
    .friends-list {
        width: 80% !important;
        max-width: 300px;
        box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    #chatModal .friends-list {
        margin-left: -0.75rem;
        left: -0.5rem;
    }
}

/* Скрываем кнопку с тремя точками по умолчанию */
.friend-more-btn {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Показываем кнопку при наведении на элемент друга */
.friend-item:hover .friend-more-btn {
    opacity: 1;
    visibility: visible;
}

.dark .friend-more-btn {
    color: #d1d5db;
}

.dark .friend-more-btn:hover {
    color: #f9fafb;
}

/* Для мобильных устройств всегда показываем кнопку */
@media (max-width: 768px) {
    .friend-more-btn {
        opacity: 1;
        visibility: visible;
    }
}

/* Добавьте эти стили в ваш CSS */
#friends-list-container {
    position: relative;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.context-menu {
    position: fixed; /* Изменяем на fixed */
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    min-width: 120px;
    z-index: 1000;
}

.dark .context-menu {
    background: #374151;
    border-color: #4b5563;
}

.context-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.context-menu button:hover {
    background-color: #f3f4f6;
}

.dark .context-menu button:hover {
    background-color: #4b5563;
}

/* Стили для уведомлений */
#messages-notifications > * { pointer-events: auto; }
#messages-notifications { z-index: 200; }

.notification-enter {
    animation: notificationSlideIn 0.3s ease-out;
}

.notification-exit {
    animation: notificationSlideOut 0.3s ease-in;
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes notificationSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Адаптивность для мобильных */
@media (max-width: 640px) {
    #messages-notifications {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* Добавим в ваш CSS файл */
.notification-container {
    position: fixed;
    right: 1rem;
    top: 5rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 320px;
}

.notification {
    background: white;
    border-left: 4px solid #6366f1;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transition: all 0.3s ease;
    transform: translateX(100%);
    opacity: 0;
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification .avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #4f46e5;
    flex-shrink: 0;
}

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

.notification .close-btn {
    color: #9ca3af;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    margin-left: 0.5rem;
}

.dark .notification {
    background: #374151;
    border-left-color: #818cf8;
}

.dark .notification .avatar {
    background: #1e1b4b;
    color: #a5b4fc;
}
/* Важные стили для панели эмодзи */
.message-input-container {
    position: relative;
}

/* Эмодзи крупнее внутри пузыря сообщения */
.msg-text .emoji {
  font-size: 1.6em;      /* ↑ масштаб только для эмодзи */
  line-height: 1;
  vertical-align: -0.1em; /* чутка опустить, чтобы не «выпрыгивали» */
}

/* Если сообщение состоит только из эмодзи — можно сделать их ещё крупнее */
.msg-text.only-emoji {    /* сам контейнер крупный... */
  font-size: 2.25rem;
  line-height: 1.1;
}
.msg-text.only-emoji .emoji { /* ...а сами эмодзи 1:1 внутри */
  font-size: 1em;
}

/* Утилиты для скрытия/показа */
.hidden {
    display: none;
}

/* Обрезка текста */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Анимации для плавного перехода */
main {
    transition: opacity 0.3s ease;
}

.catalog-book-card {
    animation: bookCardIn 0.28s ease backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
    will-change: transform, box-shadow, border-color;
}

.catalog-book-card.transition,
.catalog-book-card.transition-all {
    transition-property: transform, box-shadow, border-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.catalog-book-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Для темной темы */
.dark .catalog-book-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.book-card {
    will-change: transform, box-shadow, border-color;
}

.book-card.transition,
.book-card.transition-all {
    transition-property: transform, box-shadow, border-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.book-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(148, 163, 184, 0.4);
}

.dark .book-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(148, 163, 184, 0.6);
}


.modal-overlay {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.modal-container {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition-property: opacity, transform;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.modal-header {
    flex-shrink: 0;
}

.modal-content {
    flex: 1;
    overflow-y: auto;
}

.modal-footer {
    flex-shrink: 0;
}

/* Кастомный скроллбар для модального окна */
.modal-content::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark .modal-content::-webkit-scrollbar-track {
    background: #374151;
}

.dark .modal-content::-webkit-scrollbar-thumb {
    background: #4b5563;
}

.dark .modal-content::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* --- News classic redesign (overlay + cards) --- */
#news-list.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    width: 100%;
    align-items: stretch;
    justify-content: center;
}

.news-article { animation: slideUp 0.6s ease-out both; }
.news-expanded-host { transform: none !important; }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px);} to { opacity: 1; transform: translateY(0);} }

.news-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: none;
    z-index: 1200;
    opacity: 0; visibility: hidden;
    transition: all 0.3s ease;
}
.news-overlay.active { opacity: 1; visibility: visible; }

.news-grid--blurred .news-classic:not(.expanded) {
    opacity: 0.32;
    transform: scale(0.97);
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#news-expanded-layer {
    position: fixed;
    inset: 0;
    pointer-events: auto;
    z-index: 1200;
}

#news-expanded-layer .news-article {
    display: flex;
    justify-content: center;
}

#news-expanded-layer .news-classic.expanded {
    pointer-events: auto;
}

.news-expanded-host { pointer-events: auto; }

.news-placeholder {
    width: 100%;
    display: block;
}

.news-grid--blurred .news-classic.expanded {
    filter: none !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1.02) !important;
}

.news-classic {
    background: #ffffff;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        filter 0.3s ease,
        background 0.3s ease;
    border: 1px solid #e5e7eb;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    width: 100%;
}

.news-classic .close-btn {
    width: auto;
    height: auto;
    background: transparent;
    color: #111827;
    top: 0.45rem;
    right: 0.45rem;
    border: none;
    padding: 0.3rem;
}

.news-classic .close-btn i { font-size: 0.85rem; }

.news-classic:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition-timing-function: ease;
}

.news-classic.expanded {
    position: fixed;
    top: calc(50% + var(--header-h, 64px) / 4) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1.02) !important;
    width: min(90vw, 940px);
    max-width: min(940px, 92vw);
    max-height: 88vh;
    z-index: 1100;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    opacity: 1;
    filter: none;
    pointer-events: auto;
    animation: newsCardPop 0.32s ease-out;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.75);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    mix-blend-mode: normal;
}

.news-grid--blurred .news-classic.expanded,
.news-expanded-host .news-classic.expanded {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal;
}

.dark .news-classic.expanded {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.22);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65);
}
@keyframes newsCardPop {
    from {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.6;
    }
    to {
        transform: translate(-50%, -50%) scale(1.02);
        opacity: 1;
    }
}

.news-classic__header { margin-bottom: 1.2rem; }
.news-classic__title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; gap: 0.85rem; }
.news-classic__title { font-size: 1.15rem; font-weight: 700; color: #111827; line-height: 1.35; flex: 1; margin: 0; transition: font-size 0.3s ease; }
.news-classic.expanded .news-classic__title { font-size: 1.55rem; }
.dark .news-classic__title { color: #f9fafb; }

.news-classic__tag { background: #6366f1; color: white; padding: 0.3rem 0.8rem; border-radius: 1rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; flex-shrink: 0; line-height: 1; }

.news-classic__meta { display: flex; justify-content: space-between; align-items: center; color: #6b7280; font-size: 0.85rem; flex-wrap: wrap; }
.dark .news-classic__meta { color: #cbd5e1; }
.news-classic__author { display: flex; align-items: center; gap: 0.4rem; }
.news-classic__author i { color: #6366f1; font-size: 0.8rem; }
.news-classic__date { display: flex; align-items: center; gap: 0.4rem; color: #6b7280; }
.news-classic__date i { color: #6b7280; font-size: 0.8rem; }
.dark .news-classic__date i { color: #cbd5e1; }

.news-classic__content { color: #4b5563; line-height: 1.7; flex: 1; margin-bottom: 0; transition: all 0.3s ease; }
.dark .news-classic__content { color: #e5e7eb; }
.news-classic__content--preview {
    display: block;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.75rem;
}
.news-classic__full {
    display: none;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.75rem;
}
.dark .news-classic__content--preview,
.dark .news-classic__full {
    border-top-color: #111827;
}
.news-classic.expanded .news-classic__content--preview { display: none; }
.news-classic.expanded .news-classic__full { display: block; max-height: calc(88vh - 120px); overflow-y: auto; }

.news-classic__image,
.news-classic .news-content-image img {
    display: block;
    width: auto;
    max-width: 90%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
    border-radius: 1rem;
    margin: 1rem auto;
    box-shadow: none;
    transition: all 0.3s ease;
}
.news-classic.expanded .news-classic__image,
.news-classic.expanded .news-content-image img {
    max-width: 82%;
    max-height: 340px;
}

.news-classic__text ul.news-list {
    margin: 1rem 0;
    padding-left: 1.4rem;
    list-style: none;
}

.news-classic__text ul.news-list li {
    margin: 0.75rem 0;
    padding-left: 1rem;
    position: relative;
    color: #4b5563;
    line-height: 1.6;
}

.news-classic__text ul.news-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #6366f1;
    font-weight: 700;
    font-size: 0.95rem;
}

.dark .news-classic__text ul.news-list li { color: #e5e7eb; }
.dark .news-classic__text ul.news-list li::before { color: #a5b4fc; }

.news-classic__stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    padding-top: 0.2rem;
    border-top: 1px solid #e5e7eb;
    gap: 0.75rem;
}
.dark .news-classic__stats {
    border-top-color: #111827;
}
.news-classic__stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.85rem;
    line-height: 1.3;
    position: relative;
    top: 10px;
    transition: all 0.3s ease;
}
.dark .news-classic__stat { color: #e5e7eb; }
.news-classic__stat--views { color: #6366f1; }
.news-classic__stat--likes { cursor: pointer; user-select: none; }
.news-classic__stat--likes:hover .fa-heart { transform: scale(1.15); transition: transform 0.15s ease, color 0.2s ease; }
.news-classic__stat--likes.liked .fa-heart { color: #ef4444; }
.news-classic__stat--likes i { transition: transform 0.3s ease; }
.news-classic__stat--likes.liked { color: #ec4899; }
.news-classic__stat--likes.liked i { transform: scale(1.1); }

.news-classic__text { display: flex; flex-direction: column; gap: 1rem; }

.close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
}
.news-classic.expanded .close-btn { opacity: 1; visibility: visible; }
.close-btn:hover { background: rgba(0, 0, 0, 0.2); transform: scale(1.05); }

.dark .news-classic { background: #0c1625; border-color: #1f2937; }
.dark .close-btn { background: rgba(255, 255, 255, 0.08); color: #e5e7eb; }
.dark .close-btn:hover { background: rgba(255, 255, 255, 0.16); }

.tag-technology { background: #6366f1; }
.tag-update { background: #10b981; }
.tag-announcement { background: #f59e0b; }
.tag-feature { background: #ec4899; }
.tag-bookly { background: #6366f1; }
.tag-generic { background: #94a3b8; }

@media (min-width: 1280px) {
    #news-list.news-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ================================================================
   DARK THEME v2 — ЕДИНЫЙ СИНЕ-NAVY ПАЛИТРА
   Заменяет разнородные серые оттенки Tailwind (#374151, #4b5563…)
   на согласованные тёмно-синие тона, гармонирующие с фоном #070c1b.

   Цветовая шкала поверхностей (от глубокой к светлой):
     Page bg      #070c1b
     Surface      #0e1829   (карточки, панели)
     Elevated     #132038   (вложенные панели, ховер)
     Interactive  #172540   (ховер состояния)
     Border       #1c2d46   (границы)
     Border focus #2a4272   (активные границы)
   ================================================================ */

/* ---- Базовый фон страницы ---- */
html.dark                 { background-color: #070c1b !important; }
html.dark body,
.dark body                { background-color: #070c1b !important; color: #dde6f7 !important; }

/* ---- Utility-класс overrides ---- */
html.dark .bg-slate-950,
.dark .bg-slate-950       { background-color: #060a18 !important; }
html.dark .bg-white,
.dark .bg-white           { background-color: #0e1829 !important; }
html.dark .bg-gray-50,
.dark .bg-gray-50         { background-color: #0a1220 !important; }
html.dark .bg-gray-100,
.dark .bg-gray-100        { background-color: #101c32 !important; }

/* Tailwind dark: variants — переопределяем через html.dark для выигрыша в специфике */
html.dark .dark\:bg-slate-950  { background-color: #060a18 !important; }
html.dark .dark\:bg-gray-900   { background-color: #0a1121 !important; }
html.dark .dark\:bg-gray-800   { background-color: #0e1829 !important; }
html.dark .dark\:bg-gray-700   { background-color: #132038 !important; }
html.dark .dark\:bg-gray-600   { background-color: #172540 !important; }

/* Прозрачный фон nav dark:bg-gray-900/90 */
html.dark .dark\:bg-gray-900\/90 { background-color: rgba(6, 10, 26, 0.92) !important; }

/* Hover-состояния Tailwind dark: */
html.dark .dark\:hover\:bg-gray-700:hover { background-color: #172540 !important; }
html.dark .dark\:hover\:bg-gray-600:hover { background-color: #1a2c4a !important; }

/* Граничные цвета Tailwind dark: */
html.dark .dark\:border-gray-700 { border-color: #1c2d46 !important; }
html.dark .dark\:border-gray-600 { border-color: #1e3050 !important; }

/* ---- Навигация ---- */
html.dark nav {
    background-color: rgba(6, 10, 26, 0.92) !important;
    border-color: rgba(25, 45, 90, 0.30) !important;
}

/* ---- Выпадающие меню ---- */
.dark #user-dropdown,
.dark #mobile-user-dropdown,
.dark #books-sort-menu,
.dark #catalog-new-range-menu {
    background-color: #0f1d34 !important;
    border-color: #1c2d46 !important;
}

/* ---- Поля поиска ---- */
.dark #search-input,
.dark #catalog-search {
    background-color: #0e1829 !important;
    border-color: #1c2d46 !important;
    color: #e2eaf8 !important;
}
.dark #search-input:hover,
.dark #catalog-search:hover {
    background-color: #132038 !important;
    border-color: #818cf8 !important;
    box-shadow: 0 1px 8px rgba(129, 140, 248, 0.15) !important;
}
.dark #search-input:focus,
.dark #catalog-search:focus {
    background-color: #132038 !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2) !important;
}

/* ---- Селекты каталога ---- */
.dark #catalog-sort,
.dark #catalog-filter-genre {
    background-color: #0e1829 !important;
    border-color: #1c2d46 !important;
    color: #e2eaf8 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
.dark #catalog-sort:hover,
.dark #catalog-filter-genre:hover {
    background-color: #132038 !important;
    border-color: #818cf8 !important;
    box-shadow: 0 1px 8px rgba(129, 140, 248, 0.16) !important;
}
.dark #catalog-sort:focus,
.dark #catalog-filter-genre:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) !important;
}

/* ---- Кнопки жанров ---- */
.dark .genre-btn {
    border-color: #1c2d46 !important;
    background-color: #0e1829 !important;
    color: #b8c8e8 !important;
}
.dark .genre-btn:not(.active-genre):hover {
    background-color: #172540 !important;
    border-color: #2a4272 !important;
    color: #dde6f7 !important;
    box-shadow: 0 8px 18px -10px rgba(99, 102, 241, 0.32) !important;
}

/* ---- Кнопка «Избранное» ---- */
.dark .favorites-circle-btn {
    border-color: #1c2d46 !important;
    background-color: #0e1829 !important;
}
.dark .favorites-circle-btn:not(.active-genre):hover {
    background-color: #172540 !important;
    border-color: #2a4272 !important;
    box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.38) !important;
}

/* ---- Навигационные кнопки жанров ---- */
.dark .genre-nav-btn {
    border-color: #1c2d46 !important;
    background-color: #0e1829 !important;
    color: #b8c8e8 !important;
}
.dark .genre-nav-btn:hover {
    background-color: #172540 !important;
    border-color: #2a4272 !important;
    color: #dde6f7 !important;
}

/* ---- Общий border-gray-300 ---- */
.dark .border-gray-300 { border-color: #1c2d46 !important; }

/* ---- Карточки тарифов ---- */
.dark .pricing-card { background-color: #0f1d34 !important; }

/* ---- Статистика каталога ---- */
.dark .catalog-stats-card {
    background: radial-gradient(circle at top left,
        rgba(14, 26, 52, 0.96),
        rgba(5, 9, 24, 0.96)) !important;
    border-color: rgba(65, 105, 185, 0.22) !important;
}
.dark .catalog-stats-card:hover {
    border-color: rgba(129, 140, 248, 0.40) !important;
    box-shadow: 0 24px 50px -24px rgba(129, 140, 248, 0.36) !important;
}

/* ---- Футер ---- */
.dark footer { background-color: #060a18 !important; }

/* ---- Мета-данные книги ---- */
.dark .meta-info .meta-row {
    border-color: #1c2d46 !important;
    background-color: #0e1829 !important;
}

/* ---- Цитаты и блоки в пересказе ---- */
.dark .summary-content .prose blockquote {
    border-left-color: #1c2d46 !important;
    background-color: #0e1829 !important;
}

/* ---- Стеклянные панели ---- */
.dark .glass-panel {
    background-color: rgba(5, 11, 28, 0.74) !important;
    border-color: rgba(55, 90, 160, 0.22) !important;
    box-shadow: 0 34px 70px -30px rgba(5, 10, 28, 0.80) !important;
}
.dark .glass-section {
    background-color: rgba(7, 14, 36, 0.62) !important;
    border-color: rgba(30, 58, 115, 0.52) !important;
}
.dark .glass-scroll {
    background-color: rgba(7, 14, 36, 0.50) !important;
}
.dark .glass-content {
    background-color: rgba(5, 11, 30, 0.76) !important;
}
.dark .glass-divider {
    border-color: rgba(30, 55, 100, 0.65) !important;
}

/* ---- Модал авторизации ---- */
.dark #authModal .glass-panel {
    background-color: rgba(5, 10, 26, 0.66) !important;
    border-color: rgba(55, 90, 160, 0.30) !important;
}
.dark #authModal .glass-content {
    background-color: rgba(5, 10, 26, 0.56) !important;
    border-color: rgba(45, 80, 148, 0.28) !important;
}
.dark #authModal .auth-form input,
.dark #authModal .auth-form select,
.dark #authModal .auth-form textarea {
    background-color: rgba(7, 14, 38, 0.84) !important;
    border-color: rgba(42, 80, 148, 0.54) !important;
    color: #e2eaf8 !important;
}
.dark #authModal .auth-form input:hover,
.dark #authModal .auth-form select:hover,
.dark #authModal .auth-form textarea:hover {
    border-color: rgba(129, 140, 248, 0.62) !important;
    box-shadow: 0 1px 10px rgba(129, 140, 248, 0.15) !important;
}
.dark #authModal .auth-form input:focus,
.dark #authModal .auth-form select:focus,
.dark #authModal .auth-form textarea:focus {
    background-color: rgba(7, 14, 42, 0.90) !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.24),
                0 10px 24px -20px rgba(99, 102, 241, 0.50) !important;
}

/* ---- Модал книги ---- */
.dark .book-modal-panel {
    background-color: rgba(5, 11, 28, 0.93) !important;
    border-color: rgba(42, 78, 155, 0.28) !important;
    box-shadow: 0 32px 70px -20px rgba(5, 10, 28, 0.90) !important;
}
.dark #bookModal #modal-header,
.dark #bookModal #modal-footer {
    border-color: rgba(28, 52, 100, 0.72) !important;
}

/* ---- Чат — входящие сообщения ---- */
.dark #chatModal .message.justify-start > div {
    background-color: rgba(9, 18, 46, 0.93) !important;
    border-color: rgba(26, 50, 100, 0.72) !important;
    color: #dde6f7 !important;
}
.dark #chatModal .message.justify-start > div .text-gray-500 {
    color: rgba(180, 200, 230, 0.70) !important;
}

/* ---- Чат — список диалогов ---- */
.dark #chatModal .friends-list {
    background-color: rgba(6, 12, 30, 0.84) !important;
    border-color: rgba(26, 48, 96, 0.28) !important;
}

/* ---- Заявки в друзья ---- */
.dark .friend-request-item {
    border-bottom-color: #1c2d46 !important;
}

/* ---- Мобильное выпадающее меню ---- */
@media (max-width: 768px) {
    .dark #mobile-user-dropdown {
        background: #0f1d34 !important;
        border-color: #1c2d46 !important;
    }
    .dark .mobile-dropdown-item       { color: #dde6f7 !important; }
    .dark .mobile-dropdown-item:hover { background: #172540 !important; }
}

/* ---- Поля формы ---- */
.dark .form-input {
    background-color: #0e1829 !important;
    border-color: #1c2d46 !important;
    color: #e2eaf8 !important;
}

/* ---- Контекстные меню ---- */
.dark .context-menu {
    background-color: #0f1d34 !important;
    border-color: #1c2d46 !important;
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5) !important;
}
.dark .context-menu button:hover {
    background-color: #172540 !important;
}

/* ---- Уведомления (notification) ---- */
.dark .notification {
    background: #0f1d34 !important;
    border-left-color: #818cf8 !important;
}

/* ---- Скроллбар в модалках ---- */
.dark .modal-content::-webkit-scrollbar-track {
    background: #0e1829 !important;
}
.dark .modal-content::-webkit-scrollbar-thumb {
    background: #1c2d46 !important;
}
.dark .modal-content::-webkit-scrollbar-thumb:hover {
    background: #2a4272 !important;
}

/* ---- Новостные карточки ---- */
.dark .news-classic {
    background: #0c1828 !important;
    border-color: #1c2d46 !important;
}
.dark .news-classic__stats {
    border-top-color: #1c2d46 !important;
}