/* ============================================================
   Madarek Library — أنماط صفحة التصفّح
   - متناغمة مع هويّة مدارك (#2C3138 + #F4F1EC + Tajawal)
   - تستفيد من خطّ القالب (Astra) عبر font-family: inherit
   ============================================================ */
.mlib {
  --m-dark:   #2C3138;
  --m-dark-2: #3D434C;
  --m-bg:     #F4F1EC;
  --m-paper:  #FFFFFF;
  --m-paper-2:#FAF8F4;
  --m-paper-3:#EFEBE3;
  --m-text:   #1F2328;
  --m-soft:   #5C636C;
  --m-mute:   #8A8F97;
  --m-line:   rgba(44,49,56,.10);
  --m-line-2: rgba(44,49,56,.16);
  --m-line-3: rgba(44,49,56,.24);
  --m-accent: #8C6A2F;     /* ذهبيّ مكسور للإبراز */
  --m-accent-50: #F6EFE0;
  --m-accent-100:#EDE0BC;
  --m-accent-700:#6F511E;
  --m-r-sm: 8px;
  --m-r:    12px;
  --m-r-md: 14px;
  --m-r-lg: 18px;
  --m-r-pill: 999px;
  --m-s-1: 4px;
  --m-s-2: 8px;
  --m-s-3: 12px;
  --m-s-4: 16px;
  --m-s-5: 20px;
  --m-s-6: 24px;
  --m-s-7: 32px;
  --m-t-fast: 150ms;
  --m-t:      240ms;
  --m-ease:   cubic-bezier(.16,1,.3,1);
  --m-sh-1:   0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.04);
  --m-sh-2:   0 4px 12px -2px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --m-sh-3:   0 12px 24px -8px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
  --m-content-max: 1240px;

  max-width: var(--m-content-max);
  margin: 0 auto;
  padding: var(--m-s-5);
  color: var(--m-text);
  font-family: inherit;     /* خطّ القالب (Astra) — Tajawal */
  line-height: 1.6;
}
.mlib *, .mlib *::before, .mlib *::after { box-sizing: border-box; }
.mlib a { color: inherit; text-decoration: none; }
.mlib button { font-family: inherit; cursor: pointer; }
.mlib svg { width: 1em; height: 1em; vertical-align: -.125em; flex-shrink: 0; }

/* ── العنوان العلويّ ────────────────────────────────── */
.mlib-hero {
  background: linear-gradient(135deg, var(--m-dark) 0%, var(--m-dark-2) 100%);
  color: #fff;
  padding: var(--m-s-7) var(--m-s-5);
  border-radius: var(--m-r-lg);
  margin-bottom: var(--m-s-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mlib-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.06), transparent 60%);
  pointer-events: none;
}
.mlib-hero h1 {
  margin: 0;
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 800;
  line-height: 1.3;
  position: relative;
}

/* ── الشبكة العامّة ─────────────────────────────────── */
.mlib-app {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--m-s-5);
}
@media (min-width: 1024px) {
  .mlib-app { grid-template-columns: 300px 1fr; }
}

/* ── الشريط الجانبيّ ────────────────────────────────── */
.mlib-side {
  background: var(--m-paper);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-md);
  overflow: hidden;
  height: fit-content;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--m-sh-1);
}
.mlib-side::-webkit-scrollbar, .mlib-side *::-webkit-scrollbar { display: none; }
.mlib-side, .mlib-side * { scrollbar-width: none; -ms-overflow-style: none; }

.mlib-field {
  position: relative;
  padding: var(--m-s-4) var(--m-s-4) var(--m-s-2);
}
.mlib-field input {
  width: 100%;
  padding: 10px 14px;
  padding-inline-start: 38px;        /* RTL-aware: مساحة للأيقونة على جهة البداية */
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  background: var(--m-paper-2);
  font-family: inherit;
  font-size: 14px;
  color: var(--m-text);
  transition: border-color var(--m-t-fast), box-shadow var(--m-t-fast), background var(--m-t-fast);
}
.mlib-field input:focus {
  outline: none;
  border-color: var(--m-dark);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(44,49,56,.08);
}
.mlib-field-icon {
  position: absolute;
  inset-inline-start: calc(var(--m-s-4) + 12px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--m-mute);
  pointer-events: none;
  display: inline-flex;
  font-size: 15px;
}

/* ── زرّ التحويل إلى صفحة البحث المتقدّم (في sidebar المكتبة) ── */
.mlib-adv-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 var(--m-s-4) var(--m-s-3);
  padding: 10px 12px;
  background: var(--m-paper-2);
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  color: var(--m-text) !important;
  text-decoration: none !important;
  transition: background var(--m-t-fast), border-color var(--m-t-fast);
}
.mlib-adv-link:hover,
.mlib-adv-link:focus {
  background: #fff;
  border-color: var(--m-dark);
  color: var(--m-text) !important;
  text-decoration: none !important;
  outline: none;
}
.mlib-adv-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--m-dark);
  color: #FFFFFF;
  font-size: 14px;
  flex-shrink: 0;
}
.mlib-adv-link-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mlib-adv-link-text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--m-text);
}
.mlib-adv-link-text small {
  font-size: 11.5px;
  color: var(--m-mute);
  font-weight: 400;
}
.mlib-adv-link-arrow {
  color: var(--m-mute);
  font-size: 12px;
  transform: scaleX(-1);             /* السهم نحو الخارج في RTL */
}

/* ── صفحة البحث المتقدّم (sidebar form + main results) ─ */
.mlib-search-page .mlib-search-head {
  text-align: start;
  margin: 0 0 24px;
  padding: 8px 0 22px;
  border-bottom: 1px solid var(--m-line);
}
.mlib-search-title {
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 800;
  color: var(--m-text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.mlib-search-sub {
  font-size: 14px;
  color: var(--m-soft);
  margin: 0;
  line-height: 1.7;
}

/* الـ sidebar الجانبيّة لأدوات البحث */
.mlib-search-side {
  padding: 0;
  overflow: visible;
  max-height: none;
}
.mlib-search-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}
.mlib-side-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--m-mute);
  letter-spacing: 0.02em;
  margin: 0 0 -6px;
}
.mlib-side-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  background: var(--m-paper-2);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--m-text);
  transition: border-color var(--m-t-fast), background var(--m-t-fast), box-shadow var(--m-t-fast);
}
.mlib-side-input:focus {
  outline: none;
  border-color: var(--m-dark);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(44,49,56,.08);
}
.mlib-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  background: var(--m-dark);
  color: #FFFFFF !important;
  border: 0;
  border-radius: var(--m-r-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--m-t-fast), transform var(--m-t-fast);
}
.mlib-search-submit:hover,
.mlib-search-submit:focus {
  background: var(--m-dark-2);
  color: #FFFFFF !important;
  transform: translateY(-1px);
  outline: none;
}
.mlib-search-submit svg { font-size: 14px; }

.mlib-side-divider {
  height: 1px;
  background: var(--m-line);
  margin: 4px -4px;
}

/* fieldsets داخل sidebar */
.mlib-search-form .mlib-adv-set {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mlib-search-form .mlib-adv-set legend {
  font-size: 12px;
  font-weight: 700;
  color: var(--m-mute);
  margin-bottom: 4px;
  padding: 0;
  letter-spacing: 0.02em;
}
.mlib-search-form .mlib-adv-set label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--m-text);
  cursor: pointer;
  padding: 3px 0;
}
.mlib-search-form .mlib-adv-set label small { color: var(--m-mute); font-size: 11px; }
.mlib-search-form .mlib-adv-set input[type="checkbox"],
.mlib-search-form .mlib-adv-set input[type="radio"] {
  margin: 0;
  accent-color: var(--m-dark);
  flex-shrink: 0;
}

.mlib-search-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mlib-search-row label {
  font-size: 12px;
  font-weight: 700;
  color: var(--m-mute);
  letter-spacing: 0.02em;
}
.mlib-search-row label strong {
  color: var(--m-dark);
  font-weight: 800;
}
.mlib-search-row input[type="range"] {
  width: 100%;
  accent-color: var(--m-dark);
}
.mlib-search-row input[type="text"] {
  padding: 8px 12px;
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  background: var(--m-paper-2);
  font-family: inherit;
  font-size: 13px;
  color: var(--m-text);
}
.mlib-search-row input[type="text"]:focus {
  outline: none;
  border-color: var(--m-dark);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(44,49,56,.08);
}

/* الـ grid للنتائج في صفحة البحث */
.mlib-search-main .mlib-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .mlib-search-main .mlib-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1300px) {
  .mlib-search-main .mlib-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── لوحة البحث المتقدّم ─────────────────────────── */
.mlib-adv {
  margin: 0 var(--m-s-4) var(--m-s-3);
  background: var(--m-paper-2);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-sm);
  font-size: 13px;
}
.mlib-adv-toggle {
  list-style: none;
  cursor: pointer;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  color: var(--m-soft);
  user-select: none;
  border-radius: var(--m-r-sm);
}
.mlib-adv-toggle::-webkit-details-marker { display: none; }
.mlib-adv-toggle:hover { background: rgba(44,49,56,.04); }
.mlib-adv-toggle-chev {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--m-mute);
  transition: transform 200ms var(--m-ease);
  font-size: 11px;
}
.mlib-adv[open] .mlib-adv-toggle-chev { transform: rotate(-90deg); }
.mlib-adv-body {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mlib-adv-set {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mlib-adv-set legend {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--m-mute);
  margin-bottom: 4px;
  padding: 0;
  letter-spacing: 0.02em;
}
.mlib-adv-set label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--m-text);
  cursor: pointer;
  padding: 4px 0;
}
.mlib-adv-set label small { color: var(--m-mute); font-size: 11px; }
.mlib-adv-set input[type="checkbox"],
.mlib-adv-set input[type="radio"] {
  margin: 0;
  accent-color: var(--m-dark);
  flex-shrink: 0;
}
.mlib-adv-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mlib-adv-row label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--m-mute);
  letter-spacing: 0.02em;
}
.mlib-adv-row label strong {
  color: var(--m-dark);
  font-weight: 700;
}
.mlib-adv-row input[type="range"] {
  width: 100%;
  accent-color: var(--m-dark);
}
.mlib-adv-row input[type="text"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  background: #FFFFFF;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--m-text);
}
.mlib-adv-row input[type="text"]:focus {
  outline: none;
  border-color: var(--m-dark);
  box-shadow: 0 0 0 2px rgba(44,49,56,.08);
}

.mlib-side-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--m-s-2) 0 var(--m-s-3);
}

/* ── مجموعات الفلاتر ────────────────────────────────── */
.mlib-fgroup { border-bottom: 1px solid var(--m-line); }
.mlib-fgroup:last-child { border-bottom: 0; }

.mlib-fgroup-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--m-s-2);
  padding: var(--m-s-3) var(--m-s-4);
  background: transparent;
  border: 0;
  color: var(--m-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: start;
  transition: background var(--m-t-fast);
}
.mlib-fgroup-head:hover,
.mlib-fgroup-head:focus,
.mlib-fgroup-head:focus-visible {
  background: var(--m-paper-2);
  color: var(--m-text);              /* نتغلّب على Astra الذي يبيّض النصّ */
  box-shadow: none;
  outline: none;
}
.mlib-chev {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: var(--m-mute);
  transition: transform var(--m-t-fast) var(--m-ease);
  font-size: 13px;
}
.mlib-fgroup.mlib-open .mlib-fgroup-head .mlib-chev {
  transform: rotate(-90deg);
  color: var(--m-text);
}
.mlib-title { flex: 1; }
.mlib-badge {
  font-size: 11.5px;
  padding: 2px 10px;
  border-radius: var(--m-r-pill);
  background: var(--m-paper-3);
  color: var(--m-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mlib-fgroup.mlib-has-active .mlib-badge {
  background: var(--m-accent-50);
  color: var(--m-accent-700);
}

.mlib-fgroup-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--m-t) var(--m-ease);
}
.mlib-fgroup.mlib-open .mlib-fgroup-body {
  max-height: 360px;
  overflow-y: auto;
}

/* البحث المحلّيّ داخل group ─────────────────────── */
.mlib-fgroup-filter {
  position: relative;
  padding: 0 var(--m-s-3) var(--m-s-2);
}
.mlib-fgroup-filter-input {
  width: 100%;
  padding: 7px 12px;
  padding-inline-start: 32px;
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  background: var(--m-paper-2);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--m-text);
  transition: border-color var(--m-t-fast), background var(--m-t-fast);
}
.mlib-fgroup-filter-input:focus {
  outline: none;
  border-color: var(--m-dark);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(44,49,56,.08);
}
.mlib-fgroup-filter-icon {
  position: absolute;
  inset-inline-start: calc(var(--m-s-3) + 10px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--m-mute);
  pointer-events: none;
  display: inline-flex;
  font-size: 12px;
}

.mlib-facets {
  display: flex;
  flex-direction: column;
  padding: var(--m-s-1) var(--m-s-2) var(--m-s-3);
}
.mlib-facets.mlib-facets-no-match::before {
  content: 'لا تطابق';
  display: block;
  padding: 10px;
  color: var(--m-mute);
  font-size: 12.5px;
  text-align: center;
  font-style: italic;
}
.mlib-facet {
  display: flex;
  align-items: center;
  gap: var(--m-s-2);
  padding: 8px var(--m-s-3);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--m-text);
  background: transparent;
  border: 0;
  border-radius: var(--m-r-sm);
  text-align: start;
  width: 100%;
  transition: background var(--m-t-fast), color var(--m-t-fast);
}
.mlib-facet:hover,
.mlib-facet:focus,
.mlib-facet:focus-visible {
  background: var(--m-paper-3);
  color: var(--m-text);              /* تغلّب على Astra */
  box-shadow: none;
  outline: none;
}
.mlib-facet.mlib-active,
.mlib-facet.mlib-active:hover,
.mlib-facet.mlib-active:focus {
  background: var(--m-accent-50);
  color: var(--m-accent-700);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--m-accent-100);
}
.mlib-facet .mlib-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mlib-facet .mlib-count {
  font-size: 11.5px;
  color: var(--m-mute);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.mlib-facet.mlib-active .mlib-count { color: var(--m-accent-700); }
.mlib-facet .mlib-check {
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--m-line-3);
  border-radius: 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #fff;
  transition: all var(--m-t-fast);
  font-size: 11px;
}
.mlib-facet .mlib-check svg { opacity: 0; transition: opacity var(--m-t-fast); }
.mlib-facet.mlib-active .mlib-check {
  background: var(--m-accent);
  border-color: var(--m-accent);
}
.mlib-facet.mlib-active .mlib-check svg { opacity: 1; }
.mlib-facets-empty {
  padding: 10px 18px;
  color: var(--m-mute);
  font-size: 12.5px;
  text-align: center;
}

/* ── المحتوى الرئيسيّ ───────────────────────────────── */
.mlib-main { min-width: 0; }

.mlib-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--m-s-3);
  margin-bottom: var(--m-s-4);
  font-size: 13.5px;
  color: var(--m-soft);
  padding: var(--m-s-3) var(--m-s-4);
  background: var(--m-paper);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-md);
}
.mlib-info { font-variant-numeric: tabular-nums; }
.mlib-sort {
  position: relative;
  min-width: 180px;
}
.mlib-sort select {
  width: 100%;
  padding: 8px 14px;
  padding-inline-start: 36px;        /* RTL-aware */
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  background: #fff;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--m-text);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.mlib-sort select:focus {
  outline: none;
  border-color: var(--m-dark);
  box-shadow: 0 0 0 3px rgba(44,49,56,.08);
}
.mlib-sort-icon {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--m-mute);
  pointer-events: none;
  display: inline-flex;
}

/* ── شرائح الفلاتر النشطة ───────────────────────────── */
.mlib-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--m-s-4);
}
.mlib-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  border-radius: var(--m-r-pill);
  background: var(--m-accent-50);
  color: var(--m-accent-700);
  border: 1px solid var(--m-accent-100);
  font-size: 12.5px;
}
.mlib-chip strong { font-weight: 700; }
.mlib-chip .mlib-x {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: rgba(140,106,47,.12);
  color: var(--m-accent-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  transition: background var(--m-t-fast);
}
.mlib-chip .mlib-x:hover,
.mlib-chip .mlib-x:focus {
  background: rgba(140,106,47,.22);
  color: var(--m-accent-700);        /* تغلّب على Astra */
  outline: none;
}

/* ── الشبكة والبطاقات ───────────────────────────────── */
.mlib-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 بطاقات/صف ثابتة */
  gap: var(--m-s-4);
}
@media (max-width: 900px) {
  .mlib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mlib-grid { grid-template-columns: 1fr; }
}

/* ── نمط القائمة (list view) ───────────────────────── */
.mlib-grid.mlib-grid-list {
  grid-template-columns: 1fr;
  gap: 10px;
}
.mlib-grid.mlib-grid-list .mlib-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: 6px 18px;
  align-items: center;
  padding: 16px 20px;
}
.mlib-grid.mlib-grid-list .mlib-card-title {
  grid-column: 1;
  grid-row: 1;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* العنوان: سطر إلى سطرين */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mlib-grid.mlib-grid-list .mlib-card-meta {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12.5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 14px;
  max-width: none;
  line-height: 1.7;
}
.mlib-grid.mlib-grid-list .mlib-card-cats {
  grid-column: 1;
  grid-row: 3;
  margin: 0;
}
.mlib-grid.mlib-grid-list .mlib-card-actions {
  grid-column: 2;
  grid-row: 1 / 4;            /* الزرّ يمتدّ على كلّ الصفوف */
  align-self: center;
  margin: 0;
  padding: 0;
}
.mlib-grid.mlib-grid-list .mlib-btn {
  padding: 9px 16px;
  font-size: 13px;
  white-space: nowrap;
}

/* الجوال: عمود واحد، الزرّ في الأسفل */
@media (max-width: 700px) {
  .mlib-grid.mlib-grid-list .mlib-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    padding: 14px 16px;
  }
  .mlib-grid.mlib-grid-list .mlib-card-actions {
    grid-column: 1;
    grid-row: 4;
    align-self: stretch;
    padding-top: 6px;
  }
  .mlib-grid.mlib-grid-list .mlib-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── أزرار toggle العرض ─────────────────────────── */
.mlib-view-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--m-paper-2);
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  padding: 3px;
}
.mlib-vbtn {
  width: 32px;
  height: 30px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--m-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--m-t-fast), color var(--m-t-fast);
}
.mlib-vbtn:hover {
  background: var(--m-paper-3);
  color: var(--m-text);
}
.mlib-vbtn.mlib-vbtn-active {
  background: var(--m-dark);
  color: #FFFFFF;
}
.mlib-vbtn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}
.mlib-skel {
  background: var(--m-paper);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-md);
  height: 220px;
  background-image: linear-gradient(110deg, var(--m-paper) 0%, var(--m-paper-2) 30%, var(--m-paper) 60%);
  background-size: 200% 100%;
  animation: mlib-shim 1.6s ease-in-out infinite;
}
@keyframes mlib-shim {
  0%   { background-position:  100% 0; }
  100% { background-position: -100% 0; }
}

.mlib-card {
  background: var(--m-paper);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-md);
  padding: var(--m-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--m-s-3);
  transition: transform var(--m-t-fast) var(--m-ease), box-shadow var(--m-t-fast) var(--m-ease), border-color var(--m-t-fast);
}
.mlib-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--m-sh-2);
  border-color: var(--m-line-2);
}
.mlib-card-title {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--m-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── تلوين المطابقات (highlights) + شارة المطابقة ─── */
.mlib-card mark.mlib-hl,
.mlib mark.mlib-hl {
  background: #FFEB66;            /* أصفر واضح */
  color: #1F2328;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 700;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mlib-card {
  position: relative;
}
.mlib-score {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px 4px;
  background: var(--m-dark);
  color: #FFFFFF;
  border-radius: var(--m-r-pill);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  z-index: 1;
  pointer-events: none;
}
.mlib-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--m-t-fast);
}
.mlib-card-title a:hover,
.mlib-card-title a:focus { color: var(--m-accent-700); outline: none; }

.mlib-card-excerpt {
  font-size: 13.5px;
  color: var(--m-soft);
  line-height: 1.7;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mlib-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-s-2) var(--m-s-3);
  font-size: 12.5px;
  color: var(--m-mute);
  line-height: 1.8;                 /* ذيل الحروف العربيّة لا يقصّ */
}
.mlib-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.6;
}
.mlib-meta-item svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: .7;
}
.mlib-meta-link {
  color: var(--m-soft) !important;
  text-decoration: none !important;
  border-bottom: 1px dashed transparent;
  transition: color var(--m-t-fast), border-color var(--m-t-fast);
}
.mlib-meta-link:hover,
.mlib-meta-link:focus {
  color: var(--m-accent-700) !important;
  border-bottom-color: var(--m-accent-100);
  outline: none;
}

.mlib-card-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mlib-card-cat {
  font-size: 12px;
  padding: 5px 12px 6px;            /* مساحة إضافيّة من الأسفل لذيل الحروف العربيّة */
  border-radius: var(--m-r-pill);
  background: var(--m-paper-3);
  color: var(--m-soft);
  font-weight: 500;
  line-height: 1.6;
  display: inline-block;
}

.mlib-card-actions {
  margin-top: auto;
  padding-top: var(--m-s-2);
}
/* الزرّ كرابط (anchor) — تغلّب صارم على Astra/Elementor */
a.mlib-btn,
.mlib-btn,
a.mlib-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--m-dark) !important;
  color: #fff !important;
  border: 0;
  border-radius: var(--m-r-sm);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none !important;
  box-shadow: none;
  transition: background var(--m-t-fast), transform var(--m-t-fast);
}
a.mlib-btn:hover,
a.mlib-btn:focus,
a.mlib-btn:focus-visible,
.mlib-btn:hover,
.mlib-btn:focus {
  background: var(--m-dark-2) !important;
  color: #fff !important;
  transform: translateY(-1px);
  outline: none;
  text-decoration: none !important;
}
.mlib-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: #fff;
}

/* ── حالة فارغة ─────────────────────────────────────── */
.mlib-empty {
  background: var(--m-paper);
  border: 1px dashed var(--m-line-2);
  border-radius: var(--m-r-md);
  padding: var(--m-s-7) var(--m-s-5);
  text-align: center;
  color: var(--m-soft);
}
.mlib-empty span {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--m-paper-3);
  color: var(--m-mute);
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: var(--m-s-3);
}
.mlib-empty h3 {
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--m-text);
  font-weight: 700;
}
.mlib-empty p { margin: 0; font-size: 13.5px; }

/* ── الترقيم ───────────────────────────────────────── */
.mlib-pager {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--m-s-6) 0 var(--m-s-4);
}
.mlib-pgbtn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--m-r-sm);
  border: 1px solid var(--m-line-2);
  background: var(--m-paper);
  color: var(--m-text);
  font-family: inherit;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all var(--m-t-fast);
  font-variant-numeric: tabular-nums;
}
.mlib-pgbtn:hover:not([disabled]):not(.mlib-active),
.mlib-pgbtn:focus:not([disabled]):not(.mlib-active) {
  background: var(--m-paper-2);
  border-color: var(--m-line-3);
  color: var(--m-text);              /* تغلّب على Astra */
  outline: none;
}
.mlib-pgbtn[disabled] { opacity: .4; cursor: not-allowed; }
.mlib-pgbtn.mlib-active,
.mlib-pgbtn.mlib-active:hover,
.mlib-pgbtn.mlib-active:focus {
  background: var(--m-dark);
  border-color: var(--m-dark);
  color: #fff;
}
.mlib-pgbtn svg { font-size: 13px; }
.mlib-pg-dots {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  color: var(--m-mute);
}

/* ── الـ Backdrop وزرّ إغلاق الـ drawer ────────────── */
.mlib-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 9998;
  opacity: 0;
  transition: opacity 250ms ease;
}
.mlib-drawer-close {
  display: none;
  position: absolute;
  inset-inline-start: 12px;
  top: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--m-paper-3);
  color: var(--m-text);
  font-size: 16px;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.mlib-drawer-close:hover { background: var(--m-line-2); color: var(--m-text); }

/* ── زرّ فتح الفلاتر (الجوال فقط) ───────────────── */
/* ============================================================
   Profile Pages: /writer/ , /magazine/
   فلسفة بسيطة: typography + whitespace، لا gradients ولا badges
   ============================================================ */
.mdt-profile {
  --p-dark:    #1F2328;
  --p-soft:    #5C636C;
  --p-mute:    #8A8F97;
  --p-line:    rgba(44,49,56,.10);
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  direction: rtl;
  font-family: inherit;
  color: var(--p-dark);
}
.mdt-profile-head {
  margin: 0 0 36px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--p-line);
}
.mdt-profile-kicker {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--p-mute);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.mdt-profile-name {
  font-family: inherit;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  color: var(--p-dark);
  margin: 0 0 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.mdt-profile-stats {
  display: flex;
  gap: 8px 22px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--p-soft);
}
.mdt-profile-stats strong {
  color: var(--p-dark);
  font-weight: 700;
  margin-inline-end: 2px;
  font-variant-numeric: tabular-nums;
}
.mdt-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.mdt-profile-card {
  background: var(--p-bg);
  border: 1px solid var(--p-line);
  border-radius: 12px;
  transition: transform 200ms cubic-bezier(.16,1,.3,1), border-color 200ms, box-shadow 200ms;
}
.mdt-profile-card:hover {
  transform: translateY(-2px);
  border-color: var(--p-accent);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.mdt-profile-card-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  color: inherit !important;
  text-decoration: none !important;
  height: 100%;
}
.mdt-profile-card-link:hover { color: inherit !important; text-decoration: none !important; }
.mdt-profile-cat {
  align-self: flex-start;
  font-size: 11.5px;
  padding: 4px 10px 5px;
  background: rgba(140,106,47,.10);
  color: var(--p-accent);
  border-radius: 999px;
  font-weight: 600;
}
.mdt-profile-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  color: #1F2328;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mdt-profile-card-excerpt {
  font-size: 13px;
  color: var(--p-soft);
  line-height: 1.7;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mdt-profile-card-meta {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--p-line);
  font-size: 12px;
  color: var(--p-mute);
  line-height: 1.6;
}
.mdt-profile-empty {
  max-width: 720px;
  margin: 48px auto;
  padding: 32px;
  text-align: center;
  background: var(--p-bg-2);
  border: 1px dashed var(--p-line);
  border-radius: 12px;
  color: var(--p-soft);
}
.mdt-profile-empty h2 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--p-dark);
}

@media (max-width: 600px) {
  .mdt-profile { padding: 20px 16px 32px; }
  .mdt-profile-head { padding: 20px 22px; }
  .mdt-profile-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Search Results Page — تجميع حسب التصنيف
   ============================================================ */
.mdt-search {
  --s-dark:    #1F2328;
  --s-soft:    #5C636C;
  --s-mute:    #8A8F97;
  --s-line:    rgba(44,49,56,.10);
  --s-bg:      #FFFFFF;
  --s-bg-2:    #FAFAFA;
  --s-accent:  #8C6A2F;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 64px;
  font-family: inherit;
  color: var(--s-dark);
  direction: rtl;
}
.mdt-search a { color: inherit; text-decoration: none; }

.mdt-search-head {
  margin: 0 0 36px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--s-line);
}
.mdt-search-kicker {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--s-mute);
  margin: 0 0 8px;
}
.mdt-search-query {
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 800;
  color: var(--s-dark);
  margin: 0 0 14px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  word-break: break-word;
}
.mdt-search-stats {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--s-soft);
}
.mdt-search-stats strong {
  color: var(--s-dark);
  font-weight: 700;
  margin: 0 4px;
  font-variant-numeric: tabular-nums;
}

.mdt-search-form {
  display: flex;
  gap: 0;
  max-width: 600px;
  border: 1px solid var(--s-line);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.mdt-search-form input {
  flex: 1;
  padding: 12px 20px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--s-dark);
}
.mdt-search-form input:focus { outline: none; }
.mdt-search-form button {
  padding: 0 24px;
  border: 0;
  background: #2C3138;
  color: #fff !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms;
}
.mdt-search-form button:hover { background: #3D434C; }

/* قسم لكلّ تصنيف */
.mdt-search-group {
  margin: 32px 0 0;
}
.mdt-search-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--s-dark);
}
.mdt-search-group-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--s-dark);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.mdt-search-group-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--s-mute);
  background: var(--s-bg-2);
  padding: 3px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.mdt-search-group-all {
  font-size: 13px;
  color: var(--s-soft) !important;
  font-weight: 500;
  transition: color 150ms;
}
.mdt-search-group-all:hover { color: var(--s-dark) !important; }

/* عناصر النتائج داخل القسم */
.mdt-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
}
@media (max-width: 720px) {
  .mdt-search-list { grid-template-columns: 1fr; }
}
.mdt-search-item { margin: 0; }
.mdt-search-item-link {
  display: block;
  padding: 14px 16px;
  border-radius: 8px;
  transition: background 150ms;
  height: 100%;
}
.mdt-search-item-link:hover,
.mdt-search-item-link:focus {
  background: var(--s-bg-2);
  outline: none;
  color: inherit !important;
}
.mdt-search-item-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--s-dark);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mdt-search-item-excerpt {
  font-size: 13px;
  color: var(--s-soft);
  line-height: 1.7;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mdt-search-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--s-mute);
  line-height: 1.6;
}
.mdt-search-item-meta span::before {
  content: '·';
  margin-inline-end: 4px;
  color: var(--s-accent);
}
.mdt-search-item-meta span:first-child::before { content: none; }

/* حالة لا نتائج */
.mdt-search-empty {
  margin: 48px 0;
  padding: 40px 28px;
  text-align: center;
  background: var(--s-bg-2);
  border: 1px dashed var(--s-line);
  border-radius: 12px;
}
.mdt-search-empty h2 {
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--s-dark);
}
.mdt-search-empty p {
  margin: 0;
  color: var(--s-soft);
}
.mdt-search-empty a {
  color: var(--s-accent) !important;
  font-weight: 600;
  border-bottom: 1px dashed currentColor;
}

@media (max-width: 600px) {
  .mdt-search { padding: 24px 16px 40px; }
  .mdt-search-form { flex-wrap: nowrap; }
  .mdt-search-form input { font-size: 14px; padding: 10px 16px; }
  .mdt-search-form button { padding: 0 18px; font-size: 13px; }
  .mdt-search-group-head { gap: 8px; }
  .mdt-search-group-title { font-size: 16px; }
  .mdt-search-group-all { width: 100%; }
}

.mlib-open-filters {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--m-line-2);
  border-radius: var(--m-r-sm);
  background: #fff;
  color: var(--m-text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--m-t-fast);
}
.mlib-open-filters:hover {
  background: var(--m-paper-2);
  color: var(--m-text);
  border-color: var(--m-line-3);
}
.mlib-open-filters svg { font-size: 14px; }

/* ── الجوال والتابلت: تحويل الشريط الجانبيّ إلى Modal منبثق ── */
@media (max-width: 1023px) {
  .mlib { padding: var(--m-s-3); }
  .mlib-hero { padding: var(--m-s-5) var(--m-s-4); margin-bottom: var(--m-s-4); }
  .mlib-hero h1 { font-size: clamp(20px, 5vw, 26px); }

  .mlib-app { grid-template-columns: 1fr; gap: 0; }

  .mlib-open-filters { display: inline-flex; }
  .mlib-drawer-close { display: inline-flex; }

  /* الـ bar تتكيّف */
  .mlib-bar {
    padding: var(--m-s-3);
    gap: var(--m-s-2);
    flex-wrap: nowrap;
  }
  .mlib-info {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mlib-sort { min-width: 0; width: auto; }
  .mlib-sort select { padding: 7px 12px; padding-inline-start: 32px; font-size: 12.5px; }

  /* ── Modal منبثق مركزيّ بدل drawer جانبيّ ───────── */
  /* ملاحظة: نستخدم خصائص فيزيائيّة فقط (top/left/right/bottom) لتفادي
     انعكاس logical-properties في RTL الذي يلغي توسيط left:50% */
  .mlib-side {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(.92);
    width: min(92vw, 420px);
    max-width: 420px;
    max-height: 85vh;
    border-radius: var(--m-r-md);
    border: 0;
    box-shadow: 0 24px 80px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.18);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms var(--m-ease), transform 280ms var(--m-ease), visibility 0s linear 280ms;
    padding-top: 56px;
    overflow: hidden;
    margin: 0 !important;
  }

  .mlib.mlib-drawer-open .mlib-side {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 220ms var(--m-ease), transform 280ms var(--m-ease), visibility 0s linear 0s;
  }
  .mlib.mlib-drawer-open .mlib-backdrop {
    display: block;
    opacity: 1;
  }

  body.mlib-body-locked { overflow: hidden; }

  /* الشبكة على الجوال: عمود واحد */
  .mlib-grid {
    grid-template-columns: 1fr;
    gap: var(--m-s-3);
  }
  .mlib-card { padding: var(--m-s-3); }
  .mlib-card-title { font-size: 15px; }
  .mlib-card-excerpt { font-size: 13px; -webkit-line-clamp: 2; }

  .mlib-pgbtn { min-width: 34px; height: 34px; font-size: 12.5px; padding: 0 8px; }
}

/* الشاشات الصغيرة جدًّا */
@media (max-width: 480px) {
  .mlib { padding: var(--m-s-2); }
  .mlib-bar { padding: var(--m-s-2); }
  .mlib-info { font-size: 11.5px; }
  .mlib-chips { gap: 4px; }
  .mlib-chip { font-size: 11.5px; padding: 4px 8px 4px 6px; }
}