.source-cover img{
    width:80px;
    height:110px;
    object-fit:cover;

    border-radius:4px;
    border:1px solid #ddd;
}
.source-card{
    display:flex;
    gap:15px;
align-items: center;
    padding:12px 0;

    border-bottom:1px solid #eee;
}

.source-icon{
    font-size:28px;
    width:40px;
    text-align:center;
}

.source-body{
    flex:1;
}

.source-body h3{
    margin:0 0 5px;
    font-size:18px;
}

.source-body h3 a{
    color:#2c3e50;
    text-decoration:none;
}

.source-body h3 a:hover{
    text-decoration:underline;
}

.source-author{
    color: black;
    font-size: 14px;
    margin-bottom: 5px;
}

.source-publisher{
   color: #a49999;
    font-size:13px;
}

.source-genre{
    display:inline-block;

    margin-top:5px;
    padding:2px 8px;

    background:#f2f2f2;

    border-radius:12px;

    font-size:12px;
}

.source-body p{
    margin:10px 0;
    line-height:1.4;
}

.source-links{
    color:#666;
    font-size:13px;
}

.sources-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    padding: 15px;
    margin: 15px 0 25px;

    background: #faf7f2

     border: 1px solid #d8cfc0;
    border-radius: 8px;
}

/* Поиск */

#search-source {
    flex: 1;
    min-width: 260px;

    padding: 10px 12px;

    border: 1px solid #ccc;
    border-radius: 6px;

    font-size: 14px;
}

/* Select */
.filter-dropdown{
}
#sort,
#source-type {

    min-width: 180px;

    padding: 10px 12px;

   background: #fffdf8;

   border: 1px solid #cbbfae;
    border-radius: 6px;

    font-size: 14px;

    cursor: pointer;

    transition: all .2s ease;
}

/* Hover */

#sort:hover,
#source-type:hover {
    border-color: #888;
}

/* Focus */

#sort:focus,
#source-type:focus,
#search-source:focus {

    outline: none;

    border-color: #3b82f6;

    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
@media (max-width: 768px) {

    .sources-toolbar {
        flex-direction: column;
    }

    #search-source,
    #sort,
    #source-type {
        width: 100%;
    }
}
/* ===== Шапка страницы ===== */

.page-header{
    margin: 20px 0 30px;
    padding: 20px;

    background: #faf7f2;

    border: 1px solid #ddd6c8;
    border-radius: 8px;
}

/* ===== H1 ===== */

.page-header h1{
    margin: 0 0 12px;

    font-size: 2rem;
    line-height: 1.2;

    color: #2c3e50;
    font-weight: 700;
}

/* ===== Вводный текст ===== */

.page-intro{
    margin: 0;

    font-size: 1rem;
    line-height: 1.6;

    color: #555;
}

/* ===== H2 ===== */

h2{
    margin: 35px 0 20px;

    padding-bottom: 8px;

    font-size: 1.5rem;
    font-weight: 600;

    color: #2c3e50;

    border-bottom: 2px solid #d8d8d8;
}

/* ===== Буква автора ===== */

h3{
    margin: 30px 0 15px;

    padding-bottom: 4px;

    font-size: 1.3rem;
    font-weight: 700;

    color: #8b4513;

    border-bottom: 1px solid #e3e3e3;
}
h3{
    display: inline-block;

    min-width: 50px;

    margin: 35px 0 15px;

    padding: 6px 12px;

    background: #f3efe7;

    border: 1px solid #ddd6c8;
    border-radius: 4px;

    color: #6b4423;

    font-size: 1.4rem;
    font-weight: bold;
}

.alphabet-nav{
 position:sticky;

    top:10px;

    z-index:100;

    background:#faf7f2;
    display:flex;
    flex-wrap:wrap;
    gap:6px;

    margin:20px 0;
    padding:12px;

    background:#faf7f2;

    border:1px solid #ddd6c8;
    border-radius:8px;
}
.alphabet-nav a{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    text-decoration:none;

    font-weight:600;

    color:#2c3e50;

    background:white;

    border:1px solid #d8d8d8;
    border-radius:4px;

    transition:.2s;
}
label {
width: 100px;
  font-size: 18px;
  color: #a5a597;

}

/* Наведение */

.alphabet-nav a:hover{

    background:#ece6da;

    border-color:#b8aa95;
}

/* Текущая буква */

.alphabet-nav a.active{

    background:#8b4513;

    color:white;

    border-color:#8b4513;
}
.filter-input {

    min-width: 100px;

    padding: 10px 12px;

    font-size: 14px;

    border: 1px solid #cfcfcf;
    border-radius: 6px;

    background: #fff;
}

.filter-input:focus {

    outline: none;

    border-color: #3b82f6;

    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.descr{
width: 350px;
  font-size: 14px;
  color: #978579;

}
.page-title{

    display:flex;
    align-items:center;
    gap:22px;

    margin-bottom:18px;
}

.page-logo{

    width:95px;
    height:auto;

    flex-shrink:0;
}

.page-title h1{

    margin:0 0 8px;

    font-size:2rem;
}

.page-subtitle{

    margin:0;

    color:#666;

    font-size:1rem;

    letter-spacing:.4px;
}
.search-panel{

margin:30px 0;

padding:24px;

background:#faf8f3;

border:1px solid #d9cfbd;

border-radius:10px;

}

.search-box{

margin:18px 0;

}

#search-input{

width:100%;

padding:12px 16px;

font-size:16px;

border:1px solid #c9bea9;

border-radius:8px;

background:#fff;

}

#search-input:focus{

outline:none;

border-color:#8b6b3f;

box-shadow:0 0 6px rgba(139,107,63,.25);

}

.active-filters{

margin-top:20px;

}

.filter-title {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
  gap: 15px;
}
#filter-list{

display:flex;

flex-wrap:wrap; 

gap:10px;

}

.filter-chip{

display:flex;

align-items:center;

gap:8px;

padding:6px 12px;

border-radius:18px;

font-size:.92rem;

background:#efe8dc;

border:1px solid #d8cab2;

}

.filter-chip.person{

border-left:4px solid #4f7d5c;

}

.filter-chip.event{

border-left:4px solid #8b4d4d;

}

.filter-chip.author{

border-left:4px solid #8b6b3f;

}

.filter-chip.topic{

border-left:4px solid #566b9c;

}

.filter-chip button{

border:none;

background:none;

cursor:pointer;

font-size:16px;

color:#666;

padding:0;

margin-left:4px;

}

.filter-chip button:hover{

color:#b00020;

}

#clear-filters{

font-size:.9rem;

text-decoration:none;

color:#8b6b3f;

}

#clear-filters:hover{

text-decoration:underline;

}

.chip {
cursor: pointer; 
border-radius: 9999px; 
border-width: 1px; 
border-color: rgb(209,213,219); 
background-color: rgb(243,244,246); 
padding-left: 1rem; 
padding-right: 1rem; 
padding-top: 0.375rem; 
padding-bottom: 0.375rem; 
font-size: 0.875rem; 
line-height: 1.25rem; 
font-weight: 500; 
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; 
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
transition-duration: 150ms;
}
.chip-active {
      background-color: #2563eb !important;
      color: white !important;
      border-color: #2563eb !important;
    }
    .flex {
    display: flex;
   flex-wrap: wrap;
 gap: 0.5rem;
    }
  
  .box_clip  {
 display: flex; 
align-items: center; 
justify-content: space-between; 
border-radius: 0.5rem; 
border-width: 1px; 
border-color: rgb(243,244,246); 
background-color: rgb(255,255,255); 
padding: 1rem; 
box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0,0,0,0.05);
}

.cont_clip{
border-radius: 0.25rem; 
background-color: rgb(243,244,246); 
padding-left: 0.5rem; 
padding-right: 0.5rem; 
padding-top: 0.25rem; 
padding-bottom: 0.25rem; 
font-size: 0.75rem; 
line-height: 1rem; 
font-weight: 600; 
text-transform: uppercase; 
color: rgb(75,85,99);
display: none;
}
/* === 1. ГЛАВНЫЙ КАТАЛОГ (РОДИТЕЛЬ) === */

/* Стили в закрытом состоянии */
details.catalog-root {
  display: block;
  margin-bottom: 20px;
}

/* Стили в открытом состоянии (ПЕРЕБИВАЕМ USER AGENT) */
details[open].catalog-root {
  border: 1px solid #ccc;
  padding: 15px;
  content: " 🔽";
}

/* Стили только для главной кнопки открытия */
details.catalog-root > summary
  cursor: pointer;
  padding: 10px;
  background-color: #f5f5f5;
  
}
details.catalog-root > summary::-webkit-details-marker {
  display: none; /* Фикс для Safari/Chrome */
}


/* === 2. ВНУТРЕННИЕ КАРТОЧКИ=== */


details.child-accordion {
  margin: 10px 0;
}

details.child-accordion summary {
  cursor: pointer;
  color: #0066cc;
  list-style: none;
 
}

details.child-accordion summary::before {
  content: "▶";
  left: 0;
  top: 50%;
  transform: translateY(0%); /* Perfectly center vertically */
  transition: transform 0.2s ease; /* Smooth rotation animation */
  color: #0066cc;
display: inline-block; 
margin-right: 10px;
}

details[open].child-accordion summary::before
{
 
  transform: translateY(0%) rotate(90deg); 
  transform-origin: center; 

}
.source-card {
width: 35%;

}
.descr {
margin-bottom: 10px;
}

.source-card {
width: 35%;
margin: 3px;
}
.descr {
margin-bottom: 10px;
}



.meta-table{
border: 1mm ridge rgb(247, 243, 234);
width: 20%;
  border-collapse: collapse;
  margin: 20px;
 
}

.meta-table th{

background:#f7f3ea;

padding:10px;

text-align:left;
}
#src_list{
display: flex;
  flex-wrap: wrap;

}
.meta-table td{

padding:10px;

border-bottom:1px solid #eee;
}
.source-biblio{
display: flex;
gap: 10px;

}
section {
  margin: 28px 0;
  background: #fff;
  border: 1px solid #e2ddd1;
  border-radius: 10px;
  padding: 22px;
}
.section-header{

    margin-bottom:20px;

    padding-bottom:12px;

    border-bottom:1px solid #ddd8ca;

}

.section-header h2{

    margin:0 0 8px;

    font-family:"Merriweather",serif;

    font-size:1.45rem;

    color:#5d4632;

}

.section-header p{

    margin:0;

    color:#666;

    font-size:.95rem;

    line-height:1.5;

}


/* Flexbox Row System */
.book-row {
  display: flex;
padding: 16px 24px;
  border-bottom: 1px solid #e2e8f0;
  gap: 20px;
  flex-direction: column;
  width: 20%;;
}

/* Zebra Striping on Rows */
.book-row:not(.header):nth-child(even) {
  background-color: #f8fafc;
}

.book-row:not(.header):hover {
  background-color: #f1f5f9;
}

/* Header Row Specifics */
.book-row.header {
  background-color: #0f172a;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: none;
}
.book-row.header {
  background-color: #0f172a;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: none;
}

/* Column Width Allocations */
.col-cover  { width: 80px;
 flex-shrink: 0; 
 text-align: center; }

.col-info   {display: flex;
  flex-direction: column
 }


.col-action {
 width: 120px; 
flex-shrink: 0; 
text-align: right; }

/* Typography Inside Rows */
.book-title {
  margin: 4px 0 2px 0;
  font-size: 0.8rem;
  color: #1e293b;
}

.book-author {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
}

.book-badge {
  display: inline-block;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.meta-item {
  font-size: 0.85rem;
  color: #475569;
  margin-bottom: 4px;
}

.col-desc p {
  margin: 0;
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.4;
}

/* Action Button */
.book-btn {
  display: inline-block;
  background: #2563eb;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  transition: background 0.2s;
}

.book-btn:hover {
  background: #1d4ed8;
}
#page-title{
width: 15%;
  font-size: 0.68em;
  margin: 10px;
}
.logo_h{
display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}


.page_name {
display: flex;
align-items: flex-end;
gap: 15px

}

.page-header{
display: flex;
gap: 15px;
}