* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    user-select: none;
}

body {
    background-color: #0a0a0a;
    color: #fff;
    line-height: 1.6;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(40, 40, 40, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(30, 30, 30, 0.2) 0%, transparent 50%);
}


/* Дополнительные стили для страницы настроек */
.settings-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #2a2a2a;
}

.settings-title {
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.settings-content {
    display: flex;
    flex-direction: row-reverse;
    gap: 40px;
}

.cards-container-t {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    width: 100%;
    /* Ограничиваем высоту двумя рядами */
    max-height: calc(2 * (var(--card-height, 280px) + 20px)); /* 2 карточки + gap */
    overflow-y: auto; /* Вертикальный скролл при переполнении */
}

.settings-section {
    background: rgba(26, 26, 26, 0.8);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #2a2a2a;
}

.settings-section h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: #fff;
    padding-bottom: 15px;
    border-bottom: 1px solid #2a2a2a;
}

/* Стили для выбора аватара */
.avatar-selection {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.current-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    min-width: 150px;
}

.profile-avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #222;
    border: 3px solid #444;
    background-size: cover;
    background-position: center;
}

.current-avatar span {
    color: #ccc;
    font-size: 0.9rem;
}

.avatar-options {
    flex: 1;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.avatar-option {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #222;
    border: 2px solid #2a2a2a;
    cursor: pointer;
    transition: all 0.3s ease;
    background-size: cover;
    background-position: center;
}

.avatar-option:hover {
    border-color: #555;
    transform: scale(1.05);
}

.avatar-option.selected {
    border-color: #f23a04;
    box-shadow: 0 0 0 3px rgba(242, 58, 4, 0.3);
}

/* Стили для поля ввода имени */
.username-input-container {
    max-width: 400px;
}

.username-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.username-input:focus {
    outline: none;
    border-color: #555;
    background: rgba(255, 255, 255, 0.08);
}

.username-input.error {
    border-color: #ff4444;
}

.input-hint {
    font-size: 0.8rem;
    color: #888;
    margin-top: 8px;
}

.error-message {
    color: #ff4444;
    font-size: 0.8rem;
    margin-top: 8px;
    display: none;
}

/* Стили для кнопок действий */
.settings-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

/* Адаптивность */
@media (max-width: 768px) {
    .avatar-selection {
        flex-direction: column;

        gap: 30px;
    }
    
    .current-avatar {
        align-self: center;
    }
    
    .avatar-grid {
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }
    
    .settings-actions {
        flex-direction: column;
    }

    .settings-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
}

@media (max-width: 480px) {
    .settings-section {
        padding: 20px;
    }
    
    .avatar-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .avatar-option {
        width: 70px;
        height: 70px;
    }
}

/* Дополнительные стили для страницы расписания */
.schedule-container {
    padding: 100px 20px 40px;
    max-width: 1360px;
    margin: 0 auto;
}

.schedule-search {
    margin-bottom: 0px;
}

.search-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(26, 26, 26, 0.6);
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: #555;
    background: rgba(255, 255, 255, 0.08);
}

.schedule-filters {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    margin-top: 25px;
    background: rgba(26, 26, 26, 0.6);
    gap: 10px;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    width: max-content;
    margin-bottom: 30px;
}

.filter-btn {
    padding: 10px 20px;
    border: 1px solid #2a2a2a;
    background: rgba(26, 26, 26, 0.6);
    color: #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.filter-btn.active {
    background: #f23a04;
    color: #fff;
    border-color: #f23a04;
}

.filter-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: #555;
}

/* Новая структура сетки */
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.schedule-day-section {
    grid-column: 1 / -1;
    margin-bottom: 30px;
}

.day-header {
    padding: 15px 0;
    border-bottom: 1px solid #2a2a2a;
    margin-bottom: 20px;
}

.day-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.day-info {
    display: flex;
    justify-content: space-between;
    color: #aaa;
    font-size: 0.9rem;
}

.day-content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.schedule-notice {
    background: rgba(26, 26, 26, 0.6);
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    padding: 20px;
    margin-top: 30px;
    color: #aaa;
    font-size: 0.9rem;
    line-height: 1.5;
}

.schedule-notice div {
    margin-bottom: 8px;
}

.schedule-notice div:last-child {
    margin-bottom: 0;
}


.ratelogo {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.rating-value {
    font-weight: bold;
    font-size: 0.9rem;
}



/* Адаптивность */
@media (max-width: 1200px) {
    .schedule-grid,
    .day-content {
        grid-template-columns: repeat(5, 1fr);
    }

    .avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    }
}

@media (max-width: 992px) {
    .schedule-grid,
    .day-content {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .schedule-container {
        padding: 80px 15px 30px;
    }

        .schedule-filters {
        width: auto;
    }
    
    .schedule-grid,
    .day-content {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .day-info {
        flex-direction: column;
        gap: 5px;
    }
    
    .filter-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .schedule-grid,
    .day-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .day-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 400px) {
    .schedule-grid,
    .day-content {
        grid-template-columns: 1fr;
    }

}

.releases-page .releases-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.releases-page .releases-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: rgba(26, 26, 26, 0.6);
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    top: 70px;
    z-index: 100;
    backdrop-filter: blur(10px);
    gap: 20px;
}

.releases-page .header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.releases-page .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.releases-page .search-container-r {
    position: relative;
    flex: 1;
    width: 100%;
}

.releases-page .search-input-r {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.releases-page .search-input-r:focus {
    outline: none;
    border-color: #555;
    background: rgba(255, 255, 255, 0.08);
}

/* короче первый блок занимеает 25 процентов если он есть, а второ 75, если первого нет, то второй занимает 100 */
.releases-page .releases-content {
    display: flex;
    gap: 20px;
}

.releases-page .linefilters {
    flex: 0 0 280px; 
    width: 280px;
}

.releases-page .filters-sidebar {
    display: block;
    flex-shrink: 0;
    background: rgba(26, 26, 26, 0.6);
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    padding: 20px;
    position: relative; /* Изначально relative */
    height: fit-content;
    max-height: 1280px;
    overflow-y: auto;
    z-index: 90;
    top: auto;
    width: 280px; 
}

.releases-page .linefilters:has(.filters-sidebar.hidden) {
    display: none;
    width: 0;
}

.releases-page .anime-list-view {
    flex: 1 0 400px; 
    min-width: 400px;
}

.releases-page .linefilters:has(.filters-sidebar.hidden) + .anime-list-view {
    flex: 1;
    width: 1280px;
}

/* Стили для подсказки поиска */
.releases-page .search-hint {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(35, 35, 35, 0.95);
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 5px;
    font-size: 0.8rem;
    color: #ff6b6b;
    display: none;
    z-index: 10;
}

.releases-page .search-hint.show {
    display: block;
}

.releases-page .search-hint.valid {
    color: #4ecdc4;
}

.releases-page .search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: #666;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    pointer-events: none;
}

.releases-page .sort-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.releases-page .sort-label {
    color: #ccc;
    font-size: 0.9rem;
    white-space: nowrap;
}

.releases-page .sort-select {
    padding: 8px 12px;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 160px;
}

.releases-page .sort-select:focus {
    outline: none;
    border-color: #555;
}

.releases-page .sort-order {
    display: flex;
    gap: 5px;
}

.releases-page .order-btn {
    padding: 6px 10px;
    border: 1px solid #2a2a2a;
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
}

.releases-page .order-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #555;
}

.releases-page .view-controls {
    display: flex;
    gap: 10px;
}

.releases-page .view-btn {
    padding: 8px 16px;
    border: 1px solid #2a2a2a;
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.releases-page .view-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #555;
}

.releases-page .filter-toggle {
    padding: 8px 16px;
    border: 1px solid #2a2a2a;
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.releases-page .filter-toggle.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #555;
}

/* Индикатор количества фильтров - исправленный */
.releases-page .filter-count {
    background: #f23a04;
    color: white;
    border-radius: 10px;
    min-width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    padding: 0 6px;
}

.releases-page .filter-count.show {
    display: flex;
}

.releases-page .reset-filters {
    padding: 8px 12px;
    border: 1px solid #2a2a2a;
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    margin-left: 10px;
}

.releases-page .reset-filters:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #555;
}

.releases-page .reset-filters-btn {
    padding: 10px 20px;
    border: 1px solid #2a2a2a;
    background: rgba(255, 77, 77, 0.1);
    color: #ff6b6b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.releases-page .reset-filters-btn:hover {
    background: rgba(255, 77, 77, 0.2);
    border-color: #ff6b6b;
}

.releases-page .releases-content {
    display: flex;
    gap: 20px;
}


.releases-page .filters-sidebar.hidden {
    display: none;
}

.releases-page .filter-group {
    margin-bottom: 25px;
}

.releases-page .filter-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #fff;
    padding-bottom: 10px;
    border-bottom: 1px solid #2a2a2a;
}

.releases-page .filter-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Стили для выпадающего списка жанров */
.releases-page .genre-dropdown {
    position: relative;
}

.releases-page .genre-select {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.releases-page .genre-select:hover {
    background: rgba(255, 255, 255, 0.08);
}

.releases-page .genre-select::after {
    content: '▼';
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.releases-page .genre-select.active::after {
    transform: rotate(180deg);
}

.releases-page .genre-dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(35, 35, 35, 0.95);
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 10px;
    margin-top: 5px;
    display: none;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
}

.releases-page .genre-dropdown-content.active {
    display: flex;
}

.releases-page .genre-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.releases-page .genre-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.releases-page .genre-checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid #555;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.releases-page .genre-checkbox.checked {
    background: #f23a04;
    border-color: #f23a04;
}

.releases-page .genre-checkbox.checked::after {
    content: '✓';
    color: white;
    font-size: 12px;
}

.releases-page .genre-label {
    font-size: 0.9rem;
    color: #ccc;
}

/* Стили для тег-кнопок других фильтров */
.releases-page .filter-tags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.releases-page .filter-tag {
    padding: 8px 12px;
    border: 1px solid #2a2a2a;
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    text-align: center;
    min-width: 0;
    word-wrap: break-word;
    white-space: normal;
}

.releases-page .filter-tag.active {
    background: rgb(242, 60, 4);
    color: rgb(255, 255, 255);
    border-color: rgb(242, 60, 4);
    animation: button_switch 0.2s ease;
}

@keyframes button_switch {
    0% {
        background-color: #ffffff2c;
    }
    30% {
        background-color: #ffffff31;
    }
    100% {
        background-color: #ffffff8f;
    }
}


/* Кнопка применения фильтров */
.releases-page .apply-filters-btn {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #2a2a2a;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    margin-top: 10px;
}

.releases-page .apply-filters-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #555;
}

/* Стили для двойного ползунка года */
.releases-page .year-slider-container {
    padding: 10px 0;
    position: relative;
}

.releases-page .year-range {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    color: #ccc;
    font-size: 0.9rem;
}

.releases-page .year-slider-wrapper {
    position: relative;
    height: 20px;
    margin: 20px 0;
}

.releases-page .year-slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: #2a2a2a;
    border-radius: 2px;
    transform: translateY(-50%);
}

.releases-page .year-slider-range {
    position: absolute;
    top: 50%;
    height: 4px;
    background: #fff;
    border-radius: 2px;
    transform: translateY(-50%);
}

.releases-page .year-slider {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 4px;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    pointer-events: none;
    transform: translateY(-50%);
    z-index: 2;
}

.releases-page .year-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    transition: 0.5s;
}

.releases-page .year-slider::-webkit-slider-thumb:hover {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
    pointer-events: all;
    outline: 8px solid rgba(255, 255, 255, 0.33);
}

.releases-page .year-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    border: none;
}

.releases-page .year-slider-min {
    z-index: 3;
}

.releases-page .year-slider-max {
    z-index: 4;
}

/* Стили для списка (вид по умолчанию) */
.releases-page .anime-list-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.releases-page .anime-item {
    display: flex;
    background: rgba(26, 26, 26, 0.6);
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: auto;
}

.releases-page .anime-item:hover {
    border-color: #555;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.releases-page .anime-poster {
    width: 200px;
    height: 276px;
    flex-shrink: 0;
    overflow: hidden;
}
.custom-select {
    position: relative;
    display: inline-block;
    min-width: 180px;
}

.select-selected {
    padding: 10px 35px 10px 12px;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23ccc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.select-selected:hover {
    border-color: #444;
    background-color: rgba(255, 255, 255, 0.08);
}

.select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 1000;
}

.select-items div {
    padding: 10px 12px;
    color: #ccc;
    cursor: pointer;
    transition: background 0.2s ease;
}

.select-items div:hover {
    background: rgba(255, 255, 255, 0.1);
}

.select-items div:first-child {
    border-radius: 5px 5px 0 0;
}

.select-items div:last-child {
    border-radius: 0 0 5px 5px;
}

/* Когда select активен */
.custom-select.active .select-selected {
    border-color: #555;
    background-color: rgba(255, 255, 255, 0.1);
}

.custom-select.active .select-items {
    display: block;
}

.releases-page .anime-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.animebox {
    display: flex;
    padding: 15px;
    flex-direction: column;
    justify-content: space-between;
}

.releases-page .anime-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.releases-page .anime-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.releases-page .anime-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 6px;
    color: #000;
    font-weight: 600;
    width: fit-content;
    flex-shrink: 0;
}

.releases-page .ratelogo {
    width: 14px;
    height: 14px;
}

.releases-page .anime-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    flex: 1;
}

.releases-page .original-title {
    font-size: 0.9rem;
    color: #888;
    font-style: italic;
    margin-left: 5px;
}

.releases-page .anime-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.releases-page .anime-meta-item {
    font-size: 0.85rem;
    color: #aaa;
}

.releases-page .anime-short-description {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.4;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
}

.anime-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: auto;
}

.anime-item-link:hover {
    text-decoration: none;
    color: inherit;
}

.loading-indicator {
    text-align: center;
    padding: 20px;
    color: #ccc;
    display: none;
}

/* Кнопка загрузки еще */
.releases-page .load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.releases-page .load-more-btn {
    padding: 12px 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #ccc;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.releases-page .load-more-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: #555;
}

/* Мобильный фильтр */
.releases-page .mobile-filters-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.releases-page .mobile-filters-overlay.active {
    opacity: 1;
    visibility: visible;
}

.releases-page .mobile-filters-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 90%;
    max-width: 400px;
    height: 100vh;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    padding: 20px;
    overflow-y: auto;
    transition: right 0.3s ease;
    z-index: 2001;
    border-left: 1px solid #2a2a2a;
}

.releases-page .mobile-filters-overlay.active .mobile-filters-sidebar {
    right: 0;
}

.releases-page .mobile-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2a2a2a;
}

.releases-page .mobile-filters-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
}

.releases-page .mobile-filters-close {
    width: 30px;
    height: 30px;
    background: #2a2a2a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.releases-page .mobile-filters-close:hover {
    background: #3a3a3a;
}

.releases-page .mobile-filters-close::before,
.releases-page .mobile-filters-close::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    background: #ccc;
}

.releases-page .mobile-filters-close::before {
    transform: rotate(45deg);
}

.releases-page .mobile-filters-close::after {
    transform: rotate(-45deg);
}

/* Адаптивность */
@media (max-width: 900px) {
    .releases-page .releases-content {
        flex-direction: column;
    }

    .news-image-container {
    width: 100%;
    height: 240px;
}

    
    .releases-page .linefilters {
        display: none; /* Скрываем .linefilters на мобильных */
    }
    
    .releases-page .anime-list-view {
        flex: 1;
        width: 100%; /* .anime-list-view занимает 100% ширины */
    }
    
    .releases-page .mobile-filters-overlay {
        display: block;
    }
    
    .releases-page .releases-header {
        top: 0px;
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .releases-page .header-left,
    .releases-page .header-right {
        width: 100%;
        justify-content: space-between;
    }
    
    .releases-page .search-container-r {
        max-width: none;
    }
    
    .releases-page .sort-filter {
        flex: 1;
        justify-content: flex-end;
    }
    
    .releases-page .view-controls {
        width: 100%;
        justify-content: center;
    }

    .releases-page .filter-tags {
        grid-template-columns: 1fr;
    }

    .releases-page .anime-item {
        flex-direction: column;
        min-height: auto;
    }
    
    .releases-page .anime-poster {
        width: 100%;
        height: 200px;
    }

    .custom-select {
        z-index: 2000;
    }

    
}

@media (max-width: 768px) {
    .releases-page .releases-container {
        padding: 10px;
    }
    
    .releases-page .sort-filter {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
        .releases-page .anime-list-view {
        flex: 1;
        width: 100%; /* .anime-list-view занимает 100% ширины */
    }

    .releases-page .sort-select {
        min-width: 140px;
    }
}

@media (max-width: 480px) {
    .releases-page .view-controls {
        flex-wrap: wrap;
    }

    .releases-page .anime-list-view {
        flex: 1;
        width: 100%; /* .anime-list-view занимает 100% ширины */
    }
    
    .releases-page .view-btn, .releases-page .filter-toggle {
        flex: 1;
        text-align: center;
        min-width: 120px;
    }

    .releases-page .mobile-filters-sidebar {
        width: 100%;
        max-width: none;
    }

    .releases-page .anime-header {
        flex-direction: column;
        gap: 8px;
    }
    
    .releases-page .anime-rating {
        align-self: flex-start;
    }
    
    .releases-page .header-right {
        flex-direction: column;
        gap: 10px;
    }
    
    .releases-page .sort-filter {
        width: 100%;
    }
}
/* Термин и условия */
.privacy-container {
    background: rgba(26, 26, 26, 0.6);
    border-radius: 20px;
    border: 1px solid #2a2a2a;
    padding: 40px;
    margin-top: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.privacy-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 20px;
}

.privacy-content {
    color: #ccc;
    line-height: 1.7;
}

.privacy-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #2a2a2a;
}

.privacy-content p {
    margin-bottom: 15px;
}

.privacy-content ul {
    margin-bottom: 15px;
    padding-left: 20px;
}

.privacy-content li {
    margin-bottom: 8px;
}

.privacy-content strong {
    color: #fff;
}

.privacy-content a {
    color: #f23a04;
    text-decoration: none;
    transition: color 0.3s ease;
}

.privacy-content a:hover {
    color: #ff4d1a;
    text-decoration: underline;
}

.privacy-date {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #2a2a2a;
    color: #888;
    font-style: italic;
    text-align: center;
}

@media (max-width: 768px) {
    .privacy-container {
        padding: 25px 20px;
    }
    
    .privacy-title {
        font-size: 2rem;
    }
    
    .privacy-content h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .privacy-container {
        padding: 20px 15px;
    }
    
    .privacy-title {
        font-size: 1.8rem;
    }
}

.terms-container {
    background: rgba(26, 26, 26, 0.6);
    border-radius: 20px;
    border: 1px solid #2a2a2a;
    padding: 40px;
    margin-top: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.terms-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 20px;
}

.terms-content {
    color: #ccc;
    line-height: 1.7;
}

.terms-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #2a2a2a;
}

.terms-content p {
    margin-bottom: 15px;
}

.terms-content ul {
    margin-bottom: 15px;
    padding-left: 20px;
}

.terms-content li {
    margin-bottom: 8px;
}

.terms-content strong {
    color: #fff;
}

.terms-content a {
    color: #f23a04;
    text-decoration: none;
    transition: color 0.3s ease;
}

.terms-content a:hover {
    color: #ff4d1a;
    text-decoration: underline;
}

.terms-date {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #2a2a2a;
    color: #888;
    font-style: italic;
    text-align: center;
}

@media (max-width: 768px) {
    .terms-container {
        padding: 25px 20px;
    }
    
    .terms-title {
        font-size: 2rem;
    }
    
    .terms-content h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .terms-container {
        padding: 20px 15px;
    }
    
    .terms-title {
        font-size: 1.8rem;
    }

    .releases-page .anime-list-view {
        flex: 1 0 auto; 
        min-width: auto;
    }
}
/* Навигация */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 1000;
    border-bottom: 1px solid #2a2a2a;
    justify-content: center;
}

.navbox {
    max-width: 1360px;
    width: 100%;
    display: flex;
    align-items: center;
}

.nav-logo {
    width: 40px;
    height: 40px;
    background: #444;
    border-radius: 8px;
    margin-right: 10px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nav-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.nav-buttons {
    display: flex;
    gap: 8px;
    flex: 1;
}


button {
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    background-color: transparent;
    color: #ccc;
    display: flex;
    cursor: pointer;
    gap: 5px;
    transition: all 0.3s ease;
    font-weight: 500;
    align-items: center;
}

/* Ripple эффект для ВСЕХ кнопок */
button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

/* Базовые стили для ripple элементов */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    animation: rippleFill 0.6s ease-out forwards;
}

@keyframes rippleFill {
    0% {
        width: 0;
        height: 0;
        opacity: 10;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* Специфичные настройки для разных типов кнопок */
.nav-buttons button .ripple-effect {
    background: rgba(255, 255, 255, 0.2);
}

.action-btn .ripple-effect {
    background: rgba(255, 255, 255, 0.4);
}

.login-btn .ripple-effect {
    background: rgba(255, 255, 255, 0.4);
}

.register-btn .ripple-effect {
    background: rgba(255, 255, 255, 0.2);
}

.avatar-modal button .ripple-effect {
    background: rgba(255, 255, 255, 0.15);
}

.rights-holder-btn .ripple-effect,
.contact-btn .ripple-effect,
.studio-btn .ripple-effect {
    background: rgba(255, 255, 255, 0.1);
}

/* После завершения клика - плавное исчезновение */
button:not(:active)::after {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Специфичные стили для разных типов кнопок */
.action-btn.primary:active::after {
    background: rgba(255, 255, 255, 0.4);
}

.login-btn:active::after {
    background: rgba(255, 255, 255, 0.4);
}

.register-btn:active::after {
    background: rgba(255, 255, 255, 0.2);
}

/* Для кнопок в навигации */
.nav-buttons button:active::after {
    background: rgba(255, 255, 255, 0.2);
}

/* Для кнопок в футере */
.rights-holder-btn:active::after,
.contact-btn:active::after,
.studio-btn:active::after {
    background: rgba(255, 255, 255, 0.1);
}

/* Для кнопок в модальном окне аватара */
.avatar-modal button:active::after {
    background: rgba(255, 255, 255, 0.15);
}

button:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* Бургер меню */
.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    margin-right: 15px;
}

.burger-line {
    width: 100%;
    height: 3px;
    background-color: #ccc;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.burger-menu.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

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

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

.mobile-menu {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background-color: rgba(18, 18, 18, 0.98);
    backdrop-filter: blur(15px);
    padding: 20px;
    border-top: 1px solid #2a2a2a;
    display: none;
    flex-direction: column;
    gap: 15px;
    z-index: 999;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.mobile-menu.active {
    transform: translateY(0);
}

.mobile-menu button {
    width: 100%;
    text-align: left;
    padding: 15px;
    font-size: 1.1rem;
    border-bottom: 1px solid #2a2a2a;
}

/* Поиск */
.search-container {
    position: relative;
    margin-left: 40px; /* Отодвигаем от логотипа */
    margin-right: 20px;
}

.search-input {
    width: 40px;
    height: 40px;
    padding: 0 40px 0 15px;
    border: 1px solid #333;
    border-radius: 1vh; /* Более скругленные углы */
    background: #1a1a1a;
    color: #fff;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateX(10px);
    cursor: pointer;
    font-size: 14px;
}

.filter-group button {
        display: flex;
    align-items: center;
    justify-content: center;
}

.search-input:focus,
.search-input.expanded {
    width: 250px;
    opacity: 1;
    transform: translateX(0);
    cursor: text;
    outline: none;
    border-color: #555;
}



.search-input:focus {
    outline: none;
    width: 250px;
    opacity: 1;
    transform: translateX(0);
    cursor: text;
}

.search-input.expanded {
    width: 250px;
    opacity: 1;
    transform: translateX(-5px);
    cursor: text;
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #666;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Аватар */
.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(45deg, #555, #333);
    cursor: pointer;
    transition: all 0.3s ease;
}

.avatar:hover {
    border-color: #666;
    transform: scale(1.05);
}

/* Контент */
.conta {
    padding: 100px 20px 40px;
    max-width: 1360px;
    margin: 0 auto;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;
    cursor: pointer;
    transition: color 0.3s ease;
    display: inline-block;
}

.section-title:hover {
    color: #ccc;
    text-decoration: none;
}

/* Карточки с текстом поверх изображения */
.epizod {
    position: relative;
    margin-bottom: 50px;
}

.cards-container-wrapper {
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cards-container-wrapper::-webkit-scrollbar {
    display: none;
}

.cards-container {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cards-container::-webkit-scrollbar {
    display: none;
}

.animecard:hover {
    border-color: #919191;
}

.animecard-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.animecard:hover .animecard-bg {
    transform: scale(1.08);
}


.animecard h3 {
    font-size: 0.85rem;
    font-weight: 500;
    color: #ccc;
    margin-bottom: 6px;
}

.animecard h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.animecard-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #aaa;
}

/* Рекомендации */
.rec-cards-container {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rec-cards-container::-webkit-scrollbar {
    display: none;
}

.animecard-rec {
    position: relative;
    width: calc((100% - 100px) / 6);
    min-width: 200px;
    height: 320px;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.4s ease;
    border: 1px solid #2a2a2a;
    flex-shrink: 0;
}

.animecard-rec:hover {
    border-color: #757575;
}

.animecard-rec-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.animecard-rec:hover .animecard-rec-bg {
    transform: scale(1.05);
}

.animecard-rec-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    padding: 20px 15px 15px;
    color: white;
}

.animecard-rec h3 {
    font-size: 0.95rem;
    font-weight: 500;
    color: #ccc;
    margin-bottom: 6px;
}

.animecard-rec h2 {
    font-size: 1.2rem;
    font-weight: 600;
}

/* Новости */
.news-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.news-card {
    background: #1a1a1a;
    border-radius: 14px;
    border: 1px solid #2a2a2a;
    transition: all 0.3s ease;
    cursor: pointer;
    height: auto;
}

.news-card:hover {
    border-color: #444;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.news-content-wrapper {
    height: 100%;
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.news-image {
    width: 360px;
    height: 200px; /* Фиксированная высота */
    border-radius: 8px;
    object-fit: cover; /* Обрезаем изображение без искажений */
    flex-shrink: 0; /* Запрещаем сжатие */
}

.news-text-content {
    flex: 1;
    padding: 25px;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.news-date {
    font-size: 0.9rem;
    color: #888;
}

.news-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
}

.news-content {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 15px;
}

.news-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.news-tag {
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #aaa;
}

/* Минимальные дополнительные стили для страницы логина */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
    padding: 40px 20px;
}

.login-form {
    background: rgba(26, 26, 26, 0.8);
    border-radius: 16px;
    border: 1px solid #2a2a2a;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.login-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
    color: #fff;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    color: #ccc;
    font-size: 0.9rem;
}

.input-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.input-group input:focus {
    outline: none;
    border-color: #555;
}

.login-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: #333;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    display: flex;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 10px;
    justify-content: center;
    align-items: center;
}

.login-btn:hover {
    background: #444;
}

.register-btn {
    width: 100%;
    padding: 14px;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    background: transparent;
    color: #ccc;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
    text-align: center;
    text-decoration: none;
    display: block;
}

.register-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: #555;
}

.error-message {
    color: #ff4444;
    margin-top: 20px;
    font-size: 0.9rem;
    text-align: center;
    display: none;
}

.login-divider {
    display: flex;
    align-items: center;
    margin: 25px 0;
    color: #666;
    font-size: 0.9rem;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #2a2a2a;
}

.login-divider span {
    padding: 0 15px;
}

.login-footer {
    margin-top: 30px;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

.login-footer a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}

.login-footer a:hover {
    color: #fff;
}

/* Модальное окно */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #1a1a1a;
    border-radius: 14px;
    padding: 30px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid #2a2a2a;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: #2a2a2a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: #3a3a3a;
    transform: rotate(90deg);
}

.modal-close::before,
.modal-close::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    background: #ccc;
}

.modal-close::before {
    transform: rotate(45deg);
}

.modal-close::after {
    transform: rotate(-45deg);
}

.modal-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #fff;
    padding-right: 40px;
}

.modal-date {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 20px;
    display: block;
}

.modal-text {
    color: #ccc;
    line-height: 1.7;
    margin-bottom: 20px;
}

.modal-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.modal-tag {
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #aaa;
}

/* Адаптивность */
@media (max-width: 1024px) {
    .animecard {
        width: 200px;
        height: 280px;
    }
    
    .animecard-rec {
        width: calc((100% - 80px) / 4);
        min-width: 180px;
        height: 300px;
    }

    .settings-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

    .avatar-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .nav-buttons {
        display: none;
    }
    
    .burger-menu {
        display: flex;
    }

        .search-container {
        margin-left: auto;
        margin-right: 15px;
    }
    
    .search-input:focus,
    .search-input.expanded {
        width: 180px;
    }

    
    .animecard {
        width: 200px;
        height: 280px;
    }
    
    .animecard-rec {
        width: calc((100% - 20px) / 2);
        min-width: 160px;
        height: 260px;
    }
    
    .mobile-menu {
        display: flex;
    }
    
    .modal-content {
        padding: 20px;
    }
    
    .modal-title {
        font-size: 1.5rem;
    }

    .news-content-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    
    .news-image {
        width: 100%;
        height: 200px;
    }
}

@media (max-width: 480px) {
    nav {
        padding: 12px 15px;
    }
    
    .conta {
        padding: 70px 15px 30px;
    }
    
    .section-title {
        font-size: 1.3rem;
    }
    
    .search-input:focus,
    .search-input.expanded {
        width: 150px;
        font-size: 14px;
    }
    
    .animecard {
        width: 200px;
        height: 280px;
    }
    
    .animecard-rec {
        width: calc(50% - 40px);
        min-width: auto;
        height: 240px;
    }
    
    .animecard-overlay,
    .animecard-rec-overlay {
        padding: 12px 10px 10px;
    }
    
    .animecard h2 {
        font-size: 1rem;
    }
    
    .animecard h3 {
        font-size: 0.8rem;
    }
    
    .animecard-info {
        font-size: 0.75rem;
    }
    
    .animecard-rec h2 {
        font-size: 1.1rem;
    }
    
    .animecard-rec h3 {
        font-size: 0.85rem;
    }
    
    .news-card {
        padding: 0px;
    }
    
    .news-title {
        font-size: 1.1rem;
    }

    .news-image {
        height: 150px;
    }
}

/* Контейнер для аватара */
.avatar-container {
    position: relative;
    display: none;
}

/* Модальное окно аватара */
.avatar-modal {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #1a1a1a;
    border-radius: 12px;
    padding: 10px 0;
    min-width: 150px;
    border: 1px solid #2a2a2a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
}

.avatar-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.avatar-modal button {
    width: 100%;
    text-align: left;
    padding: 12px 20px;
    border-radius: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.avatar-modal button:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.avatar-modal button::before {
    content: '';
    width: 18px;
    height: 18px;
    background: #666;
    display: inline-block;
}

.avatar-modal button.profile-btn::before {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.avatar-modal button.logout-btn::before {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.59L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z'/%3E%3C/svg%3E");
}


        /* Стили для страницы профиля */
        .profile-container {
            width: 100%;
            margin: 0 auto;
            padding: 40px;
            background: rgba(26, 26, 26, 0.6);
            border-radius: 20px;
            border: 1px solid #2a2a2a;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .profile-header {
            display: flex;
            align-items: flex-start;
            gap: 40px;
            margin-bottom: 50px;
            padding-bottom: 40px;
            border-bottom: 1px solid #2a2a2a;
        }

        .avatar-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 200px;
            flex-shrink: 0;
        }

        .profile-avatar {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: #222;
            position: relative;
            overflow: hidden;
            border: 3px solid #444;
            margin-bottom: 20px;
            background: url("https://naushkinskoe-r81.gosweb.gosuslugi.ru/netcat_files/154/1671/image_3_2.jpg") center/cover;
        }

        .profile-avatar-edit {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px;
            text-align: center;
            color: #ccc;
            font-size: 0.9rem;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .profile-avatar:hover .profile-avatar-edit {
            opacity: 1;
        }

        .profile-main-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .profile-info-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 30px;
        }

        .profile-info-text {
            flex: 1;
        }

        .profile-name {
            font-size: 2.5rem;
            font-weight: 600;
            margin-bottom: 12px;
            color: #fff;
            letter-spacing: 0.5px;
        }

        .profile-id {
            font-size: 1.2rem;
            color: #aaa;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .id-badge {
            background: rgba(80, 80, 80, 0.3);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.9rem;
            color: #ccc;
        }

        .profile-stats {
            display: flex;
            gap: 40px;
            margin-top: 15px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-size: 1.6rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 1rem;
            color: #888;
        }

        .profile-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-width: 180px;
        }

        .action-btn {
            padding: 12px 20px;
            border-radius: 8px;
            border: 1px solid #2a2a2a;
            background: rgba(26, 26, 26, 0.8);
            color: #ccc;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            text-align: center;
            width: 100%;
        }

        .action-btn:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            border-color: #444;
        }

        .action-btn.primary {
            background: #333;
            color: #fff;
        }

        .action-btn.primary:hover {
            background: #444;
        }

        .profile-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-bottom: 0px;
        }

        .detail-card {
            background: rgba(26, 26, 26, 0.8);
            padding: 30px;
            border-radius: 16px;
            border: 1px solid #2a2a2a;
        }

        .detail-card h3 {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 25px;
            color: #fff;
            padding-bottom: 15px;
            border-bottom: 1px solid #2a2a2a;
        }

        .detail-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #2a2a2a;
        }

        .detail-item:last-child {
            border-bottom: none;
        }

        .detail-label {
            font-size: 1.05rem;
            color: #ccc;
        }

        .detail-value {
            font-size: 1.05rem;
            color: #fff;
            font-weight: 500;
        }

        .anime-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 30px;
        }

        /* Адаптивность */
        @media (max-width: 1400px) {
            .conta {
                max-width: 1200px;
            }
        }

        @media (max-width: 1200px) {
            .conta {
                max-width: 1000px;
            }
            
            .profile-details {
                grid-template-columns: 1fr;
            }
            
            .anime-stats {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 1024px) {
            .conta {
                max-width: 900px;
                padding: 90px 20px 30px;
            }
            
            .profile-header {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 30px;
            }
            
            .avatar-section {
                width: 100%;
                max-width: 200px;
            }
            
            .profile-info-top {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            
            .profile-stats {
                justify-content: center;
            }
            
            .profile-name {
                font-size: 2.2rem;
            }
            
            .profile-avatar {
                width: 140px;
                height: 140px;
            }
            
            .profile-actions {
                flex-direction: row;
                min-width: auto;
                max-width: 400px;
            }
        }
        

        @media (max-width: 900px) {
            .conta {
                max-width: 700px;
            }

    .news-image-container {
        width: 100% !important;
    }

            .news-content-wrapper {
    height: 100%;
    display: flex;
    gap: 20px;
    align-items: stretch;
    flex-direction: column;
        height: 200px;
        border-radius: 8px 8px 0 0;
    }

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

        .social-both-links {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

        @media (max-width: 768px) {
            .conta {
                max-width: 600px;
            }

            .social-both-links {
                width: 100%;
                display: flex;
                justify-content: center;
            }
            
            .profile-container {
                padding: 30px;
            }
            
            .profile-name {
                font-size: 2rem;
            }
            
            .profile-avatar {
                width: 120px;
                height: 120px;
            }
            
            .profile-stats {
                gap: 30px;
            }
            
            .stat-value {
                font-size: 1.4rem;
            }
            
            .detail-card {
                padding: 25px;
            }
            
            .anime-stats {
                grid-template-columns: 1fr;
            }

        }

        @media (max-width: 600px) {
            .conta {
                padding: 80px 15px 20px;
            }
            
            .profile-container {
                padding: 25px 20px;
            }
            
            .profile-name {
                font-size: 1.8rem;
            }
            
            .profile-id {
                font-size: 1.1rem;
                flex-direction: column;
                gap: 5px;
            }
            
            .profile-stats {
                gap: 20px;
            }
            
            .stat-value {
                font-size: 1.3rem;
            }
            
            .stat-label {
                font-size: 0.9rem;
            }
            
            .detail-card {
                padding: 20px;
            }
            
            .detail-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }
            
            .profile-actions {
                flex-direction: column;
                max-width: 250px;
            }
        }

/* Обновленные стили для блока подписок в профиле */
.profile-wide-section {
    background: rgba(26, 26, 26, 0.8);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #2a2a2a;
    margin-bottom: 30px;
    overflow: hidden; /* Скрываем переполнение */
}

.profile-wide-section h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: #fff;
    padding-bottom: 15px;
    border-bottom: 1px solid #2a2a2a;
}

/* Контейнер для карточек с горизонтальным скроллом */
.subscriptions-cards-container {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 10px; /* Пространство для скролла */
}

.subscriptions-cards-container::-webkit-scrollbar {
    display: none;
}

.subscriptions-cards {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap; /* Запрещаем перенос на новую строку */
    width: max-content; /* Ширина по содержимому */
    padding-right: 20px; /* Отступ справа */
}

/* Фиксированные размеры карточек */
.subscription-card {
    background: rgba(35, 35, 35, 0.8);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #2a2a2a;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 200px;
    height: 280px;
    flex-shrink: 0;
    position: relative; /* Для позиционирования изображения */
}

.subscription-card:hover {
    border-color: #444;
    transform: translateY(-2px);
}

/* Картинка на весь фон карточки */
.subscription-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Под контентом */
}

.subscription-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.7) 100%);
    z-index: 2;
}

.subscription-info {
    padding: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Текст внизу */
    position: relative;
    z-index: 3; /* Поверх изображения */
}

.subscription-info h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.subscription-info p {
    font-size: 0.85rem;
    color: #aaa;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.status-inactive {
    color: #bd271c !important;
    font-size: 0.8rem;
    border-radius: 12px;
}

.status-watching {
    color: #d3a31e;
    font-size: 0.8rem;
    border-radius: 12px;
}

.status-completed {
    color: #26ca3c;
    font-size: 0.8rem;
    border-radius: 12px;
}

/* Адаптивность для подписок */
@media (max-width: 768px) {
    .subscription-card {
        width: 180px;
        height: 250px;
    }
    
    .subscription-img {
        height: 120px;
    }
    
    .subscription-info {
        height: 130px;
        padding: 12px;
    }
    
    .subscription-info h4 {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .subscription-card {
        width: 160px;
        height: 230px;
    }
    
    .subscription-img {
        height: 100%;
    }
    
    .subscription-info {
        height: 100%;
    }
    
    .profile-wide-section {
        padding: 20px;
    }
    
    .subscriptions-cards {
        gap: 15px;
    }
}

/* Обновленный футер */
footer {
    background: rgba(18, 18, 18, 0.98);
    border-top: 1px solid #2a2a2a;
    padding: 40px 20px;
    margin-top: 60px;
    backdrop-filter: blur(10px);
}

.footer-content {
    max-width: 1360px;
    margin: 0 auto;
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: start;
    gap: 40px;
    padding-bottom: 30px; /* Добавляем отступ снизу */
    border-bottom: 1px solid #2a2a2a; /* Добавляем разделительную линию */
    margin-bottom: 20px; /* Отступ перед footer-info */
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-logo {
    width: 40px;
    height: 40px;
    background: #F23A04;
    border-radius: 10px;
    margin-bottom: 10px;
}

.footer-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
}

.footer-description {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 15px;
    max-width: 280px;
}

.footer-copyright {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-copyright p {
    color: #666;
    font-size: 0.8rem;
}

.rights-holder-btn {
    padding: 8px 16px;
    border: 1px solid #333;
    border-radius: 6px;
    background: transparent;
    color: #888;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    text-align: left;
    width: fit-content;
}

.rights-holder-btn:hover {
    color: #fff;
    border-color: #555;
    background: rgba(255, 255, 255, 0.05);
}

.footer-links-section {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.footer-links-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-link {
    padding: 6px 0;
    border: none;
    background: transparent;
    color: #888;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    text-align: left;
    white-space: nowrap;
}

.footer-link:hover {
    color: #fff;
}

.footer-studio {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 212px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Специальные стили для ссылки на сайт */
.social-link.website-link {
    padding: 0 16px;
    width: 100%;
    gap: 8px;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
}

.made-by {
    font-size: 0.8rem;
    color: #888;
    white-space: nowrap;
}

.website-logo {
    height: 20px;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.social-link.website-link:hover .website-logo {
    opacity: 1;
}

.studio-btn {
    padding: 12px 20px;
    border: 1px solid #333;
    border-radius: 8px;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    color: #888;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.studio-btn:hover {
    border-color: #555;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    color: #fff;
}

.studio-label {
    font-size: 0.8rem;
    color: #888;
}

.logofooter {
    width: 80px;
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.studio-btn:hover .logofooter {
    opacity: 1;
}

/* Адаптивность футера */
@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    
    .footer-studio {
        grid-column: span 2;
        justify-content: center;
        margin-top: 20px;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .footer-links-section {
        justify-content: flex-start;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: 25px;
        text-align: center;
    }

    .footer-studio {
        grid-column: 1;
        justify-content: center;
    }
    
    .social-links {
        gap: 10px;
    }
    
    .social-link {
        width: 40px;
        height: 40px;
    }
    
    .social-link.website-link {
        min-width: 130px;
        padding: 0 12px;
    }
    
    .made-by {
        font-size: 0.75rem;
    }
    
    .website-logo {
        height: 18px;
    }
    
    .footer-brand {
        align-items: center;
    }
    
    .footer-description {
        max-width: none;
    }
    
    .footer-links-section {
        flex-direction: column;
        gap: 25px;
    }
    
    .footer-links-column {
        align-items: center;
    }
    
.footer-links-column {
    display: flex;
    align-items: flex-start;
}

    .footer-link {
        text-align: center;
    }
    
    .rights-holder-btn {
        align-self: center;
    }
}

@media (max-width: 480px) {

    .footer-links-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 50px;
}
    .footer-links-section {
        gap: 20px;
    }

    
    .footer-links-column {
        gap: 6px;
    }
    
    .footer-links-title {
        font-size: 0.85rem;
        margin-bottom: 8px;
    }
    
    .social-links {
        gap: 12px;
    }
    
    .social-link {
        width: 44px;
        height: 44px;
    }
    
    .social-link.website-link {
        min-width: 120px;
        padding: 0 10px;
    }
    
    .made-by {
        font-size: 0.7rem;
    }
    
    .website-logo {
        height: 16px;
    }

    .footer-link {
        font-size: 0.75rem;
    }
    
    .studio-btn {
        padding: 10px 16px;
    }
    
    .logofooter {
        width: 60px;
    }
    
    footer {
        padding: 30px 15px;
    }
}

.rating-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.rating-logo {
    width: 14px;
    height: 14px;
    background: gold;
    border-radius: 2px;
    position: relative;
}

.rating-logo::before {
    content: '★';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: #000;
}

.null_module {
    padding: 15px;
}

.inner_img_news {
    width: 100%;
}

/* width */
::-webkit-scrollbar {
  width: 16px;
}

@media (max-width:470px) {
    /* width */
::-webkit-scrollbar {
  width: 8px;
}
    
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f100; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #3b3b3b;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* new */
img.ratelogo {
    width: 20px;
    height: 100%;
}

.test {
    color: #f23a04;
}


/* Новые стили для карточек аниме */
.animecard {
    position: relative;
    width: calc((100% - 100px) / 6);
    min-width: 200px;
    height: 280px;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s ease;
    border: 1px solid #2a2a2a;
    flex-shrink: 0;
    cursor: pointer;
}

.animecard::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 10%;
    right: 10%;
    height: 15px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    filter: blur(8px);
    z-index: -1;
    transition: all 0.3s ease;
}

.animecard-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.animecard-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    padding: 15px 12px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: background 0.3s ease;
    box-shadow: inset 0px -50px 20px -15px rgb(0, 0, 0);
}

.animecard-info {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: row;
    width: 100%;
    gap: 0.2vh;
}

.animecard-content {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    height: 0;
    overflow: hidden;
}

.animecard-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.2;
}

.animecard-info span {
    font-size: 12px;
    color: #fff;
    word-spacing: -0.019em;
    letter-spacing: -0.04em;
    text-shadow: 1px 0px 13px #000;
}

/* Ховер эффекты для карточек */
.animecard:hover .animecard-overlay {
    background: rgba(0, 0, 0, 0.829);
}

.animecard:hover .animecard-content {
    opacity: 1;
    transform: translateY(0);
    height: auto;
}

.animecard:hover .animecard-bg {
    transform: scale(1.08);
}

.animecard:hover {
    border-color: #919191;
}


.news-image {
    width: 360px;
    height: 100%;
    border-radius: 8px 0 0 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.news-text-content {
    flex: 1;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

/* Адаптивность для новостей */
@media (max-width: 768px) {
    .news-content-wrapper {
        flex-direction: column;
    }
    
    .news-image {
        width: 100%;
        height: 200px;
        border-radius: 8px 8px 0 0;
    }
}

/* Сохраняем видимость рейтинга всегда */
.animecard-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgb(255, 255, 255);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #000000;
    cursor: pointer;
    z-index: 2;
    width: max-content;
    max-width: 80px;
    backdrop-filter: blur(4px);
    margin-bottom: 20px;
    align-self: flex-start;
}


/* Обновленные стили для футера - менее заметные */
.footer-info {
    background: none;
    border-radius: 8px;
    padding: 0;
    border: none;
}

.footer-info div {
    font-size: 0.7rem;
    color: #555;
    text-align: justify;
    line-height: 1.4;
    margin-bottom: 12px;
}

.footer-contact-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.contact-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 1vh;
    background: rgba(255, 255, 255, 0.03);
    color: #666;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.contact-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #888;
    transform: none;
}

/* Еще более тонкие разделители */
.footer-links-title {
    color: #777;
    font-weight: 500;
}

.footer-link {
    color: #555;
    text-decoration: none;
}

.footer-link:hover {
    color: #777;
}

.ratelogo {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.rating-value {
    font-weight: 700;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anime-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 0;
}

/* Хлебные крошки */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    font-size: 0.9rem;
    color: #888;
}

.breadcrumbs a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumbs a:hover {
    color: #fff;
}

.breadcrumb-separator {
    color: #666;
}

.breadcrumb-current {
    color: #f23a04;
}

/* Основная информация */
.anime-main-info {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.anime-poster-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: space-between;
}

.anime-poster {
    position: relative;
    width: 300px;
    height: 425px;
    border-radius: 12px;
    overflow: hidden;
    background: #1a1a1a;
}

.anime-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #2a2a2a;
}

.anime-poster-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

.anime-rating-main {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 8px;
    color: #000;
    font-weight: 600;
    cursor: pointer;
    z-index: 2;
}

.anime-rating-main .ratelogo {
    width: 20px;
    height: 20px;
}

.telegram-watch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: #0088cc;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    height: 44px;
    box-sizing: border-box;
}

.telegram-watch-btn:hover {
    background: #0077b3;
}

.telegram-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.anime-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.anime-title-main {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
    line-height: 1.2;
}

.anime-title-original {
    font-size: 1.2rem;
    color: #888;
    font-style: italic;
    margin-bottom: 20px;
}

.anime-meta-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}

.meta-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.meta-label {
    color: #ccc;
    font-weight: 500;
    min-width: 140px;
    font-size: 0.95rem;
}

.meta-value {
    color: #fff;
    flex: 1;
    font-size: 0.95rem;
}

.genres-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.genre-tag {
    background: rgba(255, 255, 255, 0.1);
    color: #aaa;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.age-rating {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.anime-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.subscribe-btn, .favorite-btn, .share-btn {
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
    background: rgba(26, 26, 26, 0.8);
    color: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 0.9rem;
    height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscribe-btn.primary {
    background: #f23a04;
    color: #fff;
    border-color: #f23a04;
}

.subscribe-btn:hover, .favorite-btn:hover, .share-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: #555;
}

.subscribe-btn.primary:hover {
    background: #ff4d1a;
    border-color: #ff4d1a;
}

/* Кнопка Telegram для ПК версии (под постером) */


.telegram-mobile {
    display: none;
}

/* Описание */
.anime-description-section {
    margin-bottom: 40px;
}

.anime-description {
    background: rgba(26, 26, 26, 0.6);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    line-height: 1.7;
    color: #ccc;
}

.anime-description p {
    margin-bottom: 15px;
}

.anime-description p:last-child {
    margin-bottom: 0;
}

/* Дополнительная информация */
.anime-additional-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.info-column {
    background: rgba(26, 26, 26, 0.6);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #2a2a2a;
}

.info-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;
    padding-bottom: 10px;
    border-bottom: 1px solid #2a2a2a;
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-label {
    color: #ccc;
    font-size: 0.9rem;
}

.info-value {
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.info-tag {
    background: rgba(255, 255, 255, 0.1);
    color: #aaa;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Скриншоты */
.screenshots-section {
    margin-bottom: 40px;
}

.screenshots-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* Похожие аниме */
.similar-anime-section {
    margin-bottom: 40px;
}

.similar-cards-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 10px;
}

.similar-cards-container::-webkit-scrollbar {
    display: none;
}

.similar-card {
    min-width: 200px;
    height: 280px;
    flex-shrink: 0;
}

/* Заглушки для изображений */
.image-placeholder {
    background: linear-gradient(45deg, #2a2a2a, #1a1a1a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.8rem;
}

.anime-poster .image-placeholder {
    font-size: 1rem;
}

.screenshot-item .image-placeholder {
    font-size: 0.7rem;
}

/* Адаптивность */
@media (max-width: 1024px) {
    .anime-main-info {
        grid-template-columns: 250px 1fr;
        gap: 30px;
    }
    
    .anime-poster {
        width: 250px;
        height: 350px;
    }
    
    .anime-additional-info {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .screenshots-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .screenshot-item {
        height: 160px;
    }
}

@media (max-width: 768px) {
    .anime-main-info {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .anime-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 20px;
}
    
    .anime-poster-section {
        align-items: center;
    }
    
    .anime-poster {
        width: 280px;
        height: 380px;
        margin: 0 auto;
    }
    
    .telegram-watch-btn {
        width: 280px;
        margin: 0 auto;
    }
    
    .anime-title-main {
        font-size: 2rem;
        text-align: center;
    }
    
    .anime-title-original {
        text-align: center;
    }
    
    .anime-meta-info {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        width: 100%;
    }
    
    .meta-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
    }
    
    .meta-label {
        min-width: 100px;
        font-size: 0.9rem;
        color: #aaa;
        text-align: left;
    }
    
    .meta-value {
        font-size: 0.95rem;
        text-align: right;
        flex: none;
        min-width: 0;
    }
    
    .genres-list {
        justify-content: flex-end;
        gap: 6px;
    }
    
    .genre-tag {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
    
    .anime-actions {
        justify-content: center;
    }
    
    .anime-additional-info {
        grid-template-columns: 1fr;
    }
    
    .screenshots-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .screenshot-item {
        height: 150px;
    }
}

@media (max-width: 480px) {
    /* Мобильная адаптация как на anilibria */
    .anime-detail-container {
        padding: 0;
    }
    
    .breadcrumbs {
        display: flex
;
        align-items: center;
        gap: 8px;
        margin: 0px 20px;
        margin-top: 65px;
        top: 100px;
        padding: 20px 0px;
        font-size: 0.9rem;
        color: #888;
    }
    
    .anime-main-info {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
        position: relative;
        min-height: 100vh;
    }
    
    .anime-poster-section {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        gap: 0;
    }
    
    .anime-poster {
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
    }
    
    .anime-poster-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.7);
    }
    
    .anime-poster-overlay {
        background: linear-gradient(to bottom, 
            transparent 0%, 
            rgba(0, 0, 0, 0.3) 30%, 
            rgba(0, 0, 0, 0.7) 60%, 
            rgba(0, 0, 0, 0.9) 100%);
        align-items: flex-end;
        padding: 20px;
        justify-content: flex-end;
    }
    
    .anime-rating-main {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 3;
    }
    
    /* Скрываем кнопку Telegram под постером на мобильных */
    .telegram-pc {
        display: none;
    }
    
    /* Показываем кнопку Telegram в блоке действий на мобильных */
    .telegram-mobile {
        display: flex;
        width: 100%;
        background: #0088cc;
        border: none;
        color: white;
    }
    
    .telegram-mobile:hover {
        background: #0077b3;
    }
    
    .anime-details {
        position: relative;
        z-index: 2;
        padding: 20px;
        background: linear-gradient(to bottom, transparent 0%, rgb(11 11 11) 30%, rgb(14 14 14) 100%);
        min-height: 100vh;
        justify-content: flex-end;
        gap: 15px;
    }
    
    .anime-title-main {
        font-size: 1.8rem;
        text-align: left;
        margin-bottom: 5px;
        color: #fff;
    }
    
    .anime-title-original {
        font-size: 1rem;
        text-align: left;
        color: #ccc;
        margin-bottom: 15px;
    }
    
    .anime-meta-info {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        background: rgba(255, 255, 255, 0.05);
        padding: 15px;
        border-radius: 10px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .meta-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 5px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .meta-item:last-child {
        border-bottom: none;
    }
    
    .meta-label {
        min-width: 100px;
        font-size: 0.85rem;
        color: #aaa;
        text-align: left;
        font-weight: 500;
    }
    
    .meta-value {
        font-size: 0.9rem;
        text-align: right;
        color: #fff;
        flex: none;
    }
    
    .genres-list {
        justify-content: flex-end;
        gap: 5px;
    }
    
    .genre-tag {
        font-size: 0.75rem;
        padding: 3px 8px;
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }
    
    .age-rating {
        font-size: 0.75rem;
        padding: 3px 8px;
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }
    
    .anime-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 20px;
    }
    
    /* Кнопка Telegram теперь первая в списке на мобильных */
    .anime-actions .telegram-mobile {
        order: -1;
    }
    
    .subscribe-btn, .favorite-btn, .share-btn {
        width: 100%;
        max-width: none;
        margin: 0;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        height: 45px;
        font-size: 0.95rem;
    }
    
    .subscribe-btn.primary {
        background: #f23a04;
        border-color: #f23a04;
    }
    
    /* Остальной контент под фоном */
    .anime-description-section,
    .anime-additional-info,
    .similar-anime-section {
        position: relative;
        z-index: 2;
        background: #0d0d0d;
        margin-bottom: 0;
        padding: 20px;
    }
    
    .anime-description {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
    }
    
    .info-column {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
    }
    
    .screenshots-container {
        grid-template-columns: 1fr;
    }
    
    .screenshot-item {
        height: 200px;
    }
    
    .similar-card {
        min-width: 150px;
        height: 220px;
    }
}


.genresbox {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gene-meta-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: #ccc;
    display: flex;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.gene-meta-item.more-genres {
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    font-style: italic;
}

.gene-meta-item.no-genres {
    background: transparent;
    color: #666;
    font-style: italic;
}

/* Возвращаем к исходному состоянию, но с исправлениями */
@media (max-width: 900px) {
    .releases-header {
        position: relative;
        z-index: 1000;
        overflow: visible !important;
    }
    
    .custom-select {
        position: relative;
        z-index: 1001;
    }
    
    .select-items {
        z-index: 10002;
        position: absolute;
        width: 100%;
        left: 0;
        top: 100%;
        margin-top: 5px;
    }
}

/* Стили для модального окна новостей */
.modal-overlay.active .modal-content {
    transform: scale(1);
    max-width: 800px;
    width: 95%;
    background: rgba(26, 26, 26, 0.95);
    border: 1px solid #2a2a2a;
}

.modal-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
    line-height: 1.3;
    padding-right: 40px;
}

.modal-date {
    font-size: 0.95rem;
    color: #f23a04;
    margin-bottom: 25px;
    display: block;
    font-weight: 500;
}

.modal-text {
    color: #e0e0e0;
    line-height: 1.7;
    margin-bottom: 30px;
    font-size: 1.05rem;
}

/* Стили для текста внутри новости */
.modal-text p {
    margin-bottom: 20px;
    text-align: justify;
}

.modal-text p:last-child {
    margin-bottom: 0;
}

.modal-text strong {
    color: #fff;
    font-weight: 600;
}

.modal-text em {
    color: #ccc;
    font-style: italic;
}

.modal-text a {
    color: #f23a04;
    text-decoration: none;
    font-weight: 500;
}

.modal-text a:hover {
    color: #ff4d1a;
}

/* Стили для списков в новостях */
.modal-text ul {
    margin: 20px 0;
    padding-left: 20px;
}

.modal-text li {
    margin-bottom: 10px;
    color: #e0e0e0;
}

.modal-text li::before {
    content: "—";
    color: #f23a04;
    margin-right: 8px;
}

/* Стили для тегов новости */
.modal-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-top: 20px;
    border-top: 1px solid #2a2a2a;
}

::marker {
    color: transparent;
}

.modal-tag {
    background: rgb(255 255 255 / 10%);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    color: #ffffff;
    border: 1px solid rgb(255 255 255 / 30%);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .modal-overlay.active .modal-content {
        margin: 20px;
        padding: 25px 20px;
        width: calc(100% - 40px);
    }
    
    .modal-title {
        font-size: 1.6rem;
        padding-right: 30px;
    }
    
    .modal-text {
        font-size: 1rem;
    }
    
    .modal-text p {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .modal-overlay.active .modal-content {
        margin: 15px;
        padding: 20px 15px;
        width: calc(100% - 30px);
    }
    
    .modal-title {
        font-size: 1.4rem;
    }
    
    .modal-text {
        font-size: 0.95rem;
    }
}

.modal-news-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #2a2a2a;
}

@media (max-width: 768px) {
    .modal-news-image {
        max-height: 250px;
    }
}

/* Стили для страницы FAQ */
.faq-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2a2a2a;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    padding: 15px 0;
    position: relative;
}

.faq-question:hover {
    color: #f23a04;
}

.faq-question::after {
    content: '▸';
    margin-left: auto;
    color: #f23a04;
    transition: transform 0.3s ease;
    font-size: 1.1rem;
}

.faq-item.active .faq-question::after {
    transform: rotate(90deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    color: #ccc;
    line-height: 1.6;
}

.faq-answer p {
    margin-bottom: 10px;
    padding: 0 0 15px 0;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-contact {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    margin-top: 40px;
}

.faq-contact h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}

.faq-contact ul {
    margin: 15px 0;
    padding-left: 20px;
}

.faq-contact li {
    margin-bottom: 8px;
    color: #ccc;
}

.faq-contact a {
    color: #f23a04;
    text-decoration: none;
    transition: color 0.3s ease;
}

.faq-contact a:hover {
    color: #ff4d1a;
    text-decoration: underline;
}

/* Адаптивность */
@media (max-width: 768px) {
    .faq-item {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    
    .faq-question {
        font-size: 1.1rem;
        padding: 12px 0;
    }
    
    .faq-contact {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .faq-question {
        font-size: 1rem;
        padding: 10px 0;
    }
    
    .faq-contact {
        padding: 15px;
    }
}

button.action-btn-settings {
    display: flex
;
    justify-content: center;
    background-color: #222;
    align-items: center;
}

button.action-btn-settings:hover {
    background-color: #333;
}

.sett-conv {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.settings-actions button {
    display: flex;
    justify-content: center;
}

/* Стили для страницы рекомендаций */
.recommendations-info {
    background: rgba(26, 26, 26, 0.6);
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    padding: 25px;
    margin-bottom: 30px;
}

.recommendations-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}

.recommendations-description {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.recommendations-update {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
}

/* Сетка рекомендаций */
.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

 /* Дополнительные стили для страницы новостей */
.news-page {
    max-width: 1200px;
    margin: 0 auto;
}

.news-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #2a2a2a;
}

.news-subtitle {
    color: #888;
    font-size: 1.1rem;
    margin-top: 10px;
}

.news-filters {
    background: rgba(26, 26, 26, 0.6);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.filter-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #fff;
}

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

.filter-tag {
    padding: 8px 16px;
    border: 1px solid #2a2a2a;
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    border-radius: 1vh;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.filter-tag.active,
.filter-tag:hover {
    background: #f23a04;
    color: #fff;
    border-color: #f23a04;
}

.no-news {
    text-align: center;
    padding: 60px 20px;
    color: #888;
    font-size: 1.1rem;
}

.load-more-container {
    text-align: center;
    margin-top: 40px;
}

.load-more-btn {
    padding: 12px 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.load-more-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: #555;
}

/* Исправляем структуру новостей согласно вашему примеру */
.news-card {
    background: #1a1a1a;
    border-radius: 14px;
    border: 1px solid #2a2a2a;
    transition: all 0.3s ease;
    cursor: pointer;
    height: auto;
    margin-bottom: 20px;
    overflow: hidden;
}

.news-card:hover {
    border-color: #444;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.news-content-wrapper {
    height: 100%;
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.news-image-container {
    width: 360px;
    height: 240px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

.news-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.news-text-content {
    flex: 1;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0;
    border-bottom: none;
    text-align: left;
}

.news-date {
    font-size: 0.9rem;
    color: #888;
}

.news-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
}

.news-content {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 15px;
    flex: 1;
}

.news-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.news-tag {
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #aaa;
}

/* Стили для модального окна новостей */
.modal-news-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #2a2a2a;
}

/* Адаптивность */
@media (max-width: 768px) {
    .news-filters {
        padding: 20px;
    }

    .filter-tags {
        gap: 8px;
    }

    .filter-tag {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .news-header {
        margin-bottom: 30px;
        padding-bottom: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .news-subtitle {
        font-size: 1rem;
    }

    .news-content-wrapper {
        flex-direction: column;
        gap: 0;
    }
    
    .news-image-container {
        width: 100%;
        height: 200px;
        border-radius: 8px 8px 0 0;
    }

    .news-text-content {
        padding: 20px;
    }

    .modal-news-image {
        max-height: 250px;
    }
}

@media (max-width: 480px) {
    .filter-tags {
        justify-content: center;
    }

    .news-filters {
        padding: 15px;
    }

    .news-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .news-tags {
        justify-content: flex-start;
    }
}

        /* Дополнительные стили для страницы подписок */
        .subscriptions-container {
            max-width: 1480px;
            margin: 0 auto;
            padding: 100px 20px 40px;
        }
        
        .subscriptions-header {
            margin-bottom: 40px;
        }
        
        .subscriptions-title {
            font-size: 2rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 10px;
        }
        
        .subscriptions-description {
            color: #aaa;
            font-size: 1rem;
            line-height: 1.5;
        }
        
        .section-wrapper {
            margin-bottom: 50px;
            padding: 25px;
        }
        
        .section-header {
            margin-bottom: 25px;
        }
        
        .section-title-t {
            font-size: 1.5rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 10px;
        }
        
        .section-subtitle {
            color: #aaa;
            font-size: 0.9rem;
        }
        

.cards-container-t {
    --card-height: 280px;
    background-color: #111;
    padding: 25px;
    border-radius: 1vh;
}

.cards-container-t::-webkit-scrollbar {
    width: 6px;
}

.cards-container-t::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.cards-container-t::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.cards-container-t::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

        .animecard-actions-t {
            position: absolute;
            top: 15px;
            right: 15px;
            z-index: 10;
            background-color: #ffffff00;
        }
        
        .dots-btn {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            background: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            color: #ffffff;
            font-size: 1.2rem;
            padding: 0;
            opacity: 0;
        }
        
        .animecard-t:hover .dots-btn {
            opacity: 1;
        }
        
        .dots-btn:hover {
            background: #222;
            color: #ffffff;
        }
        
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            color: #666;
            text-align: center;
            grid-column: 1 / -1;
        }
        
        .empty-state-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            opacity: 0.5;
        }
        
        .empty-state-text {
            font-size: 1.1rem;
            margin-bottom: 10px;
        }
        
        .empty-state-subtext {
            font-size: 0.9rem;
            color: #777;
        }
        
        /* Модальные окна */
        .action-modal {
            position: absolute;
            top: 40px;
            right: 0;
            background: rgba(35, 35, 35, 0.95);
            border: 1px solid #2a2a2a;
            border-radius: 8px;
            padding: 10px 10px;
            min-width: 180px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            z-index: 100;
            display: none;
        }
        
        .action-modal.active {
            display: block;
        }
        
        .action-modal button {
            width: 100%;
            text-align: left;
            padding: 10px 15px;
            border: none;
            background: transparent;
            color: #ccc;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }
        
        .action-modal button:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
        }
        
        .confirmation-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .confirmation-modal.active {
            opacity: 1;
            visibility: visible;
        }
        
        .confirmation-content {
            background: #1a1a1a;
            border-radius: 14px;
            padding: 30px;
            max-width: 400px;
            width: 90%;
            border: 1px solid #2a2a2a;
            text-align: center;
        }
        
        .confirmation-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: #fff;
        }
        
        .confirmation-text {
            color: #ccc;
            margin-bottom: 25px;
            line-height: 1.5;
        }
        
        .confirmation-actions {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-direction: column;
        }
        
        .confirmation-btn {
            padding: 10px 25px;
            border-radius: 8px;
            border: 1px solid #2a2a2a;
            background: rgba(26, 26, 26, 0.8);
            color: #ccc;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .confirmation-btn.confirm {
            background: #f23a04;
            color: #fff;
            border-color: #f23a04;
        }
        
        .confirmation-btn:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            border-color: #555;
        }
        
        .confirmation-btn.confirm:hover {
            background: #ff4d1a;
            border-color: #ff4d1a;
        }
@media (max-width: 1365px) {
.cards-container-t {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    width: 100%;
    max-height: calc(2 * (var(--card-height, 280px) + 20px));
    overflow-y: auto;
    justify-content: center;
    justify-items: center;
}
}

@media (max-width: 1105px) {
.cards-container-t {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    max-height: calc(2 * (var(--card-height, 280px) + 20px));
    overflow-y: auto;
    justify-content: center;
    justify-items: center;
}
}

@media (max-width: 900px) {
.cards-container-t {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-height: calc(2 * (var(--card-height, 280px) + 20px));
    overflow-y: auto;
    justify-content: center;
    justify-items: center;
}
}

@media (max-width: 642px) {
.cards-container-t {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    max-height: calc(2 * (var(--card-height, 280px) + 20px));
    overflow-y: auto;
    justify-content: center;
    justify-items: center;
}
}


@media (max-width: 328px) {
    .avatar-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 420px) {
.cards-container-t {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    width: 100%;
    max-height: calc(2 * (var(--card-height, 280px) + 20px));
    overflow-y: auto;
    justify-content: center;
    justify-items: center;
}
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .subscriptions-container {
        padding: 80px 10px 20px;
        max-width: 100%;
    }
    
    .section-wrapper {
        margin-bottom: 30px;
        padding: 0px;
    }
   
    .cards-container-t {
        --card-height-mobile: 280px;
    }
    
    /* Сохраняем оригинальное соотношение карточек */
    .animecard-t {
        width: 100%;
        height: var(--card-height-mobile, 280px);
        min-height: 0;
        /* Убираем aspect-ratio чтобы сохранить оригинальные пропорции */
    }
    
    /* Гарантируем что карточки не выходят за пределы контейнера */
    .animecard-t-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .animecard-t-overlay {
        width: 100%;
        height: 100%;
    }
    
    .animecard-t-title {
        font-size: 0.8rem;
        line-height: 1.2;
        margin-bottom: 5px;
    }
    
    .animecard-t-info {
        font-size: 0.7rem;
    }
    
    .animecard-t-rating {
        font-size: 0.8rem;
    }
    
    .ratelogo {
        width: 12px;
        height: 12px;
    }
    
    /* Фиксим проблему с уползанием вправо */
    .cards-container-t > * {
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 576px) {


    
    .subscriptions-title {
        font-size: 1.5rem;
    }
    
    .section-title-t {
        font-size: 1.2rem;
    }
    
    .empty-state {
        padding: 40px 15px;
    }
    
    .empty-state-icon {
        font-size: 2rem;
    }
    
    .empty-state-text {
        font-size: 1rem;
    }
    
    .empty-state-subtext {
        font-size: 0.8rem;
    }
}


/* Особые стили для очень маленьких экранов */
@media (max-width: 360px) {

    
    .animecard-t-title {
        font-size: 0.75rem;
    }
    
    .animecard-t-info {
        font-size: 0.65rem;
    }
}
    .animecard-t {
        width: 100%;
        height: auto;
        min-height: var(--card-height-mobile, 280px);
        /* Добавляем минимальную высоту вместо фиксированной */
    }
    
    /* Альтернативное решение если выше не работает */
    .animecard-t {
        position: relative;
        width: 100%;
        padding-bottom: 150%; /* Соотношение 2:3 для аниме постеров */
        height: 0;
        overflow: hidden;
    }
    
    .animecard-t-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .animecard-t-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


/* Исправляем проблему с кнопками действий на мобильных */
@media (max-width: 768px) {
    .dots-btn {
        width: 25px;
        height: 25px;
        font-size: 1rem;
        opacity: 0.8;
    }
    
    .animecard-t:hover .dots-btn {
        opacity: 0.8;
    }
    
    .animecard-t {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Исправляем модальные окна для мобильных */
@media (max-width: 768px) {
    .action-modal {
        min-width: 160px;
        padding: 8px;
    }
    
    .action-modal button {
        padding: 12px 15px;
        font-size: 0.85rem;
    }
    
    .confirmation-content {
        margin: 20px;
        padding: 20px;
    }
    
    .confirmation-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .confirmation-btn {
        padding: 12px 20px;
    }
}

/* Стили для уведомления поиска */
.search-notification {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1d1d1de6;
    color: #b1b1b1e6;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 5px;
    font-size: 0.9rem;
    z-index: 1000;
    border: 1px solid #525252e6;
    backdrop-filter: blur(10px);
    animation: slideDown 0.3s ease;
}

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

/* Для мобильных устройств */
@media (max-width: 768px) {
    .search-notification {
        font-size: 0.8rem;
        padding: 10px 12px;
    }
}


.vk:hover {
    background-color: #0077FF;
    color: #fff;
}

.tg:hover {
    background-color: #2AABEE;
    color: #fff;
}

.fab {
    font-size: 24px;
}

.fas {
    font-size: 24px;
}

.rocket:hover {
    color: #f15f2c;
    background-color: #fff;
}

a.social-link.website-link:hover {
    background: #000;
    transition: 0.3s;
}


/* DRAG SCROLL FIX - обязательно добавьте эти стили
.cards-container-wrapper,
.rec-cards-container,
.similar-cards-container {
    overflow-x: auto !important;
    cursor: grab !important;
    user-select: none !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.cards-container-wrapper::-webkit-scrollbar,
.rec-cards-container::-webkit-scrollbar,
.similar-cards-container::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.cards-container-wrapper.grabbing,
.rec-cards-container.grabbing,
.similar-cards-container.grabbing {
    cursor: grabbing !important;
}

.cards-container,
.rec-cards-container,
.similar-cards-container {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: 100% !important;
}

.animecard {
    cursor: pointer !important;
    flex-shrink: 0 !important;
}*/