.lib-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
.lib-btn{background:var(--white);border:1px solid var(--border);color:var(--text-mid);padding:7px 18px;border-radius:20px;font-family:inherit;font-size:13px;cursor:pointer;transition:all .2s;}
.lib-btn:hover,.lib-btn.active{background:var(--green-dark);color:white;border-color:var(--green-dark);}
.books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;}
.book-card{background:var(--white);border-radius:14px;border:1px solid var(--border);overflow:hidden;transition:transform .25s,box-shadow .25s;}
.book-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(92,61,46,0.12);}
.book-cover{height:130px;display:flex;align-items:center;justify-content:center;font-size:44px;}
.book-info{padding:14px;}
.book-title{font-family:Amiri,serif;font-size:15px;color:var(--green-dark);margin-bottom:4px;}
.book-author{font-size:12px;color:var(--text-mid);margin-bottom:8px;}
.book-cat{display:inline-block;background:var(--beige);border:1px solid var(--border);padding:2px 10px;border-radius:10px;font-size:11px;color:var(--text-mid);}
.book-card.hidden{display:none;}
@media(max-width:768px){
  .lib-filters{gap:6px;margin-bottom:16px;}
  .lib-btn{padding:6px 14px;font-size:12px;}
  .books-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .book-cover{height:100px;font-size:32px;}
  .book-info{padding:10px;}
  .book-title{font-size:13px;margin-bottom:3px;}
  .book-author{font-size:11px;margin-bottom:6px;}
  .book-cat{padding:1px 8px;font-size:10px;}
}
@media(max-width:480px){
  .lib-filters{gap:5px;margin-bottom:12px;}
  .lib-btn{padding:5px 10px;font-size:11px;}
  .books-grid{grid-template-columns:1fr;gap:12px;}
  .book-cover{height:90px;font-size:28px;}
  .book-info{padding:8px;}
  .book-title{font-size:12px;}
  .book-author{font-size:10px;}
}
/* ══ تابات الأقسام ══ */
.lib-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.lib-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all .2s;
  border-radius: 8px 8px 0 0;
}
.lib-tab:hover { color: var(--green-dark); background: var(--beige); }
.lib-tab.active { color: var(--green-dark); border-bottom-color: var(--green-dark); font-weight: 700; }
.tab-icon { font-size: 17px; }

/* ══ الأقسام ══ */
.lib-section { display: none; }
.lib-section.active { display: block; }

.section-header { margin-bottom: 20px; }
.section-title { font-family: Amiri, serif; font-size: 20px; color: var(--green-dark); font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.section-desc { font-size: 13px; color: var(--text-mid); }

/* ══ كروت ══ */
.lib-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.lib-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  padding: 16px;
}
.lib-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(92,61,46,0.1); }
.lib-card-icon { font-size: 32px; margin-bottom: 10px; }
.lib-card-title { font-family: Amiri, serif; font-size: 15px; color: var(--green-dark); font-weight: 700; margin-bottom: 4px; }
.lib-card-type { font-size: 12px; color: var(--text-mid); margin-bottom: 8px; }
.lib-card-notes { font-size: 12px; color: var(--text-mid); background: var(--beige); padding: 7px 10px; border-radius: 8px; }

.lib-empty { text-align: center; color: var(--text-mid); font-size: 14px; padding: 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; grid-column: 1/-1; }

.btn-add-lib { display: flex; align-items: center; gap: 6px; background: var(--green-dark); color: white; border: none; padding: 10px 20px; border-radius: 10px; font-family: inherit; font-size: 14px; cursor: pointer; }
.btn-add-lib:hover { opacity: 0.88; }

@media (max-width: 768px) {
  .lib-tabs { gap: 6px; }
  .lib-tab { padding: 8px 14px; font-size: 13px; }
  .lib-cards-grid { grid-template-columns: 1fr; gap: 12px; }
}