/* Макет страницы */
.cycles-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 30px;
    align-items: start;
}

/* Хлебные крошки */
.breadcrumbs-block {
    background: var(--card-bg);
    padding: 12px 20px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.breadcrumbs-block a { color: var(--accent-color); text-decoration: none; font-weight: 600; }
.breadcrumbs-block .sep { color: var(--text-muted); opacity: 0.5; }
.breadcrumbs-block .current { color: var(--text-muted); }

/* Шапка цикла */
.cycle-view-header { 
    display: flex; gap: 25px; background: var(--card-bg); 
    border-radius: 4px; border: 1px solid var(--border-color); 
    padding: 25px; margin-bottom: 30px; 
}
.cycle-view-cover { width: 160px; flex-shrink: 0; position: relative; }
.cycle-view-cover img { width: 100%; border-radius: 6px; z-index: 3; position: relative; box-shadow: 0 10px 20px rgba(0,0,0,0.3); }

/* Эффект стопки (слои сзади) */
.cycle-view-cover .stack-layer { position: absolute; background: #333; border: 1px solid var(--border-color); border-radius: 6px; width: 100%; height: 100%; top: 0; }
.cycle-view-cover .layer-1 { right: -6px; top: 5px; z-index: 2; }
.cycle-view-cover .layer-2 { right: -12px; top: 10px; z-index: 1; opacity: 0.5; }

.cycle-view-info h1 { margin: 5px 0 10px; font-size: 26px; font-weight: 800; color: var(--text-main); }
.cycle-label { color: var(--accent-color); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.cycle-view-meta { margin-bottom: 10px; font-size: 14px; }
.cycle-view-desc { font-size: 14px; line-height: 1.6; opacity: 0.9; }

/* БЕЙДЖ НОМЕРА — СТИЛИЗОВАН ПОД ЦЕНУ */
.order-badge { 
    position: absolute; 
    top: 5px; 
    left: 5px; 
    background: #BA55D3; /* Твой фиолетовый */
    color: #fff; 
    font-size: 10px; 
    padding: 2px 6px; 
    font-weight: bold; 
    border-radius: 2px;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* --- ОФОРМЛЕНИЕ САЙДБАРА (ЖАНРЫ) --- */
.sidebar-block { background: var(--card-bg); padding: 20px; border-radius: 4px; border: 1px solid var(--border-color); margin-bottom: 20px; }
.block-title { font-size: 14px; text-transform: uppercase; color: var(--accent-color); margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; font-weight: 700; }

.genre-tree-side { list-style: none; padding: 0; margin: 0; }
.genre-tree-side .parent-li { margin-bottom: 10px; }
.genre-tree-side .parent-link { font-weight: bold; font-size: 14px; text-decoration: none; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
.genre-tree-side .child-list { list-style: none; padding-left: 15px; margin-top: 5px; border-left: 1px solid var(--border-color); }
.genre-tree-side .child-link { font-size: 13px; text-decoration: none; color: var(--text-muted); display: flex; justify-content: space-between; padding: 3px 0; transition: 0.2s; align-items: center; }
.genre-tree-side .child-link:hover { color: var(--accent-color); padding-left: 5px; }
.genre-count { font-size: 10px; color: var(--text-muted); background: var(--bg-color); padding: 1px 6px; border-radius: 10px; font-weight: normal; border: 1px solid var(--border-color); }

/* --- СЕТКА (КАК НА ГЛАВНОЙ) --- */
.book-row {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 15px !important;
}

/* СЕТКА СЕРИЙ (если смотрим "Все серии") */
.cycle-grid-home { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.cycle-card-home { 
    display: flex; gap: 15px; background: var(--card-bg); padding: 12px; border-radius: 4px; 
    text-decoration: none; border: 1px solid var(--border-color); transition: 0.2s; align-items: center;
}
.cycle-card-home:hover { border-color: var(--accent-color); transform: translateY(-2px); }
.cycle-cover-stack { position: relative; width: 60px; height: 85px; flex-shrink: 0; }
.cycle-cover-stack img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; position: relative; z-index: 3; }

/* ==========================================
   АДАПТИВНОСТЬ
   ========================================== */

@media screen and (max-width: 1024px) {
    .cycles-layout { display: flex; flex-direction: column; }
    .sidebar { width: 100%; order: 2; margin-top: 30px; }
    .book-row { grid-template-columns: repeat(4, 1fr) !important; }
}

@media screen and (max-width: 768px) {
    .book-row { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
    .cycle-view-header { flex-direction: column; text-align: center; }
    .cycle-view-cover { margin: 0 auto; }
}

@media screen and (max-width: 580px) {
    .book-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ДЛЯ САМЫХ МАЛЕНЬКИХ (ОДНА В РЯД) */
@media screen and (max-width: 380px) {
    .book-row { 
        grid-template-columns: 1fr !important; 
    }
    .book-card-compact {
        max-width: 260px;
        margin: 0 auto;
    }
}


    /* Стили для индикации удаленных книг в профиле автора */
    .book-card-compact.is-deleted {
        opacity: 0.6;
        filter: grayscale(0.5);
    }
    .deleted-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #e74c3c;
        color: white;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        z-index: 10;
    }
    
    /* Переопределяем сетку для профиля, чтобы она соответствовала главной (6 в ряд) */
    .profile-book-grid {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 15px !important;
    }

    @media screen and (max-width: 1024px) { .profile-book-grid { grid-template-columns: repeat(4, 1fr) !important; } }
    @media screen and (max-width: 768px) { .profile-book-grid { grid-template-columns: repeat(3, 1fr) !important; } }
    @media screen and (max-width: 580px) { .profile-book-grid { grid-template-columns: repeat(2, 1fr) !important; } }
    @media screen and (max-width: 380px) { .profile-book-grid { grid-template-columns: 1fr !important; } }