:root{
  /* ===== Brand Scale ===== */
  --primary-50:#e8f5fb; --primary-100:#d2ebf7; --primary-200:#bfe2f2;
  --primary-300:#8ecae6; --primary-400:#5fb6e2; --primary-500:#219ebc;
  --primary-600:#1b81a0; --primary-700:#156683; --primary-800:#104b65; --primary-900:#0a3247;

  --accent-50:#fff3d6; --accent-100:#ffe6ad; --accent-200:#ffd985;
  --accent-300:#ffcb5c; --accent-400:#ffbe34; --accent-500:#fd9e02;
  --accent-600:#d38202; --accent-700:#a76602; --accent-800:#7b4a01; --accent-900:#503001;

  --primary: var(--primary-500);
  --primary-dark: var(--primary-700);

  --background:#0a1420;
  --surface-0:#ffffff;
  --surface-1:#f7f9fb;
  --border-color:#e6e6e6;

  --text:#0d2a3a;
  --text-inverse:#fff;

  --border-radius:18px;
  --shadow-sm:0 4px 18px rgba(0,0,0,.08);
  --shadow-md:0 12px 28px rgba(0,0,0,.14);
  --shadow-lg:0 22px 60px rgba(0,0,0,.28);

  --glass-bg:rgba(255,255,255,.08);
  --glass-brd:rgba(255,255,255,.18);

  --btn-primary-bg:var(--primary);
  --btn-primary-hover:var(--primary-dark);

  --ring-size:140px;
  --ring-thickness:12px;

  /* استخدم متغيراتك إن كانت معرفة مسبقًا */
  --lib-surface: rgba(255,255,255,.06);
  --lib-surface-2: rgba(255,255,255,.02);
  --lib-border: rgba(255,255,255,.18);
  --lib-text: #e9f1f7;
  --lib-muted: rgba(233,241,247,.55);
  --lib-bg-popup: #0a1420;              /* خلفية قائمة الخيارات */
  --lib-primary: var(--primary, #219ebc);
}

/* ========== الأساسيات / تخطيط عام ========== */
.library-hero { text-align:center; padding:5rem 0 2rem; }
.library-hero h1 { color:#fff; font-size:clamp(1.8rem,3.2vw,3rem); font-weight:900; }
.library-hero .lead { color:#d3edff; margin-top:.6rem; }

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

.container { width:min(1200px, 92%); margin-inline:auto; }
.content-area{ min-height: calc(100vh - 250px); }

/* ========== بطاقات الصفوف (صفحة الفهرس) ========== */
.grades-grid { margin-top:1rem; }
.grade-card {
  position:relative; overflow:hidden; min-height:140px;
  display:flex; flex-direction:column; gap:.5rem; justify-content:center; align-items:center;
  text-align:center; text-decoration:none;
}
.grade-card .grade-badge {
  background:linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color:#fff; padding:.8rem 1.2rem; border-radius:999px; font-weight:800;
  box-shadow:0 10px 24px rgba(33,158,188,.35);
}
.grade-card .grade-meta { color:#cfe8ff; opacity:.9; display:flex; gap:.5rem; align-items:center; margin-top:.35rem; }
.grade-card .sep { opacity:.5; }

 .filters-bar .select-wrap{
    position: relative;
    min-width: 220px;               /* عدّلها حسب التصميم */
  }

  /* إخفاء سهم النظام */
  .filters-bar .select-wrap select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 100%;
    border-radius: 999px;
    border: 1px solid var(--lib-border);
    background:
      linear-gradient(180deg, var(--lib-surface), var(--lib-surface-2));
    color: var(--lib-text);
    padding-inline: 1rem 2.6rem;    /* RTL: نص داخلي يمين، مساحة للسهم يسار */
    padding-block: .65rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s, transform .1s;
  }

  /* سهم مخصص (RTL) */
  .filters-bar .select-wrap::after{
    content: "";
    position: absolute;
    inset-inline-start: .9rem;      /* في RTL يظهر يسار */
    top: 50%;
    right: 85%;
    width: .9rem; height: .9rem;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .85;
    background: no-repeat center / 100%
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A5C9DA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  }

  .filters-bar .select-wrap:hover select{
    border-color: color-mix(in oklab, var(--lib-primary) 35%, var(--lib-border));
  }

  .filters-bar .select-wrap:focus-within select{
    border-color: var(--lib-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--lib-primary) 28%, transparent);
  }

  /* حالة الضغط الخفيفة */
  .filters-bar .select-wrap select:active{
    transform: translateY(1px);
  }

  /* الحالة المعطلة */
  .filters-bar .select-wrap select:disabled{
    opacity: .55;
    cursor: not-allowed;
  }

  /* نمط أصغر (اختياري) */
  .filters-bar .select-wrap.compact select{
    padding-block: .5rem;
    min-height: 38px;
  }

  /* تلوين قائمة الخيارات (الدروب داون) — مدعوم بمعظم المتصفحات الحديثة */
  .filters-bar .select-wrap select option{
    background-color: var(--lib-bg-popup);
    color: var(--lib-text);
  }
  .filters-bar .select-wrap select option:disabled{
    color: var(--lib-muted);
  }

  /* إخفاء سهم IE القديم */
  .filters-bar .select-wrap select::-ms-expand{ display:none; }

  /* لمسات نصية */
  .filters-bar label{
    font-weight:700; margin-inline-end:.5rem;
  }

  .library-hero { text-align:center; padding:5rem 0 2rem; }
  .library-hero h1 { color:#fff; font-size:clamp(1.8rem,3.2vw,3rem); font-weight:900; }
  .library-hero .lead { color:#d3edff; margin-top:.6rem; }

  /* بطاقات الصفوف */
  .grades-grid { margin-top:1rem; }
  .grade-card { position:relative; overflow:hidden; min-height:140px; display:flex; flex-direction:column; gap:.5rem; justify-content:center; align-items:center; text-align:center;text-decoration: none; }
  .grade-card .grade-badge { background:linear-gradient(135deg, var(--primary-500), var(--primary-700)); color:#fff; padding:.8rem 1.2rem; border-radius:999px; font-weight:800; box-shadow:0 10px 24px rgba(33,158,188,.35); }
  .grade-card .grade-meta { color:#cfe8ff; opacity:.9; display:flex; gap:.5rem; align-items:center; margin-top:.35rem; }
  .grade-card .sep { opacity:.5; }

  /* شريط الفلاتر */
  .filters-bar { margin-top:1rem; }
  .filters-row { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content:space-between; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:.8rem; backdrop-filter:blur(8px); }
  .search-wrap { display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:.6rem .9rem; min-width:260px; flex:1; }
  .search-wrap input { flex:1; background:transparent; border:0; outline:0; color:#e9f6ff; font-size:1rem; }
  .select-wrap { display:flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:.5rem .7rem; }
  .select-wrap label { font-weight:700; color:#cde9ff; }
  .select-wrap select { background:transparent; border:0; color:#e9f6ff; outline:0; }
  .view-toggle { display:flex; gap:.4rem; }

  /* التصنيفات (حبوب Pill) */
  .cats-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
  .pill { border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); color:#e9f6ff; border-radius:999px; padding:.5rem .9rem; cursor:pointer; transition:.2s; }
  .pill:hover { transform:translateY(-2px); }
  .pill.active { background:linear-gradient(135deg, var(--accent-500), var(--accent-700)); color:#fff; border-color:transparent; }

  /* الشبكة + البطاقة */
  .resources-grid { margin-top:1rem; }
  
  /* تصميم جديد للبطاقة */
  .resource-card { display:flex; flex-direction:column; gap:.8rem; }
  .res-card-content {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }
  .res-info {
    flex: 1;
    min-width: 0; /* لمنع التمدد الزائد */
  }
  .res-thumb {
    margin: 0;
    flex-shrink: 0;
    width: auto;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  .res-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .res-head { display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
  .chip { display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .6rem; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; font-weight:700; font-size:.9rem; }
  .chip.ghost { background:rgba(255,255,255,.06); color:#cfe8ff; border:1px solid rgba(255,255,255,.14); }
  .res-title { color:#fff; font-size:1.2rem; line-height:1.35; margin-top: 0.5rem; }
  .res-meta { list-style:none; display:flex; flex-wrap:wrap; gap:1rem; color:#d6eaff; opacity:.95; margin-top: 0.5rem;justify-content:space-between;min-width:310px; }
  .res-meta i { opacity:.8; }
  .res-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
  .tag { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#dff6ff; border-radius:10px; padding:.22rem .5rem; font-size:.85rem; }

  .no-results { text-align:center; color:#cfe8ff; opacity:.9; margin-top:1rem; }
  
  /* اجعل البطاقة قابلة للنقر كاملة */
  .resource-card {
    position: relative;
  }
  .resource-card .stretched-link{
    position:absolute; inset:0; z-index:1; text-indent:-9999px; overflow:hidden;
  }
  .resource-card .download-link{
    margin-inline-start:auto;
    z-index:2;
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    width:2.25rem; height:2.25rem; border:1px solid rgba(255,255,255,.25);
    border-radius:999px; text-decoration:none; color:inherit;
  }
  .resource-card .download-link:hover{
    border-color: var(--primary, #219ebc);
  }
  .content-area{
          min-height: calc(100vh - 250px);
  }
  
  /* تبديل العرض: قائمة */
  .resources-grid[data-view="list"] { display:block; }
  .resources-grid[data-view="list"] .resource-card { display:flex; flex-direction:row; align-items:center; gap:1rem; padding:18px; margin-top:15px; }
  .resources-grid[data-view="list"] .res-head { order:2; min-width:240px; }
  .resources-grid[data-view="list"] .res-title { order:1; flex:1; }
  .resources-grid[data-view="list"] .res-meta { order:3; }
  
  /* تعديلات للعرض القائمة لتتناسب مع التصميم الجديد */
  .resources-grid[data-view="list"] .res-card-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .resources-grid[data-view="list"] .res-thumb {
    width: 10%;
    height: 10%;
  }
  
  /* تجاوبية */
  @media (max-width:1024px){ 
    .grid-3 { grid-template-columns:repeat(2,1fr); } 
     .res-thumb {
      width: 100%;
      height: auto;
    }
  }
  
@media (max-width: 2420px) {
    .res-thumb {
        width: 25%;
        height: auto;
    }
}
  @media (max-width:720px){ 
    .grid-3 { grid-template-columns:1fr; } 
    .filters-row { gap:.6rem; } 
    .search-wrap { min-width:unset; flex:100%; } 
    
    /* تجاوبية للبطاقة */
    .res-card-content {
      flex-direction: column-reverse;
    }
    .res-thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
    }
    
    /* تعديلات للعرض القائمة على الشاشات الصغيرة */
    .resources-grid[data-view="list"] .resource-card {
      flex-direction: column;
      align-items: flex-start;
    }
    .resources-grid[data-view="list"] .res-card-content {
      width: 100%;
    }
  }

/* ========== Pagination (HowPlatform) ========== */
.pagination-wrap{ margin-top:1.25rem; display:flex; justify-content:center; }

.pagination-nav{
  direction:rtl; /* لضبط الأسهم أيسر/أيمن داخلياً */
  display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:.35rem .5rem;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}

.pagination-nav .page-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:pointer; text-decoration:none;
}
.pagination-nav .page-btn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in lab, var(--primary-400) 65%, #fff 35%);
  box-shadow: 0 8px 20px rgba(33,158,188,.28);
}
.pagination-nav .page-btn.is-disabled{
  opacity:.45; cursor:not-allowed; filter:grayscale(.2);
}

.pagination-nav .chev{
  width:22px; height:22px; stroke: var(--primary-100); stroke-width:2.4; fill:none; 
}

.pagination-nav .pages{
  list-style:none; display:flex; align-items:center; gap:.25rem;
  margin:0 .25rem; padding:0;
}
.pagination-nav .page-num,
.pagination-nav .pages a.page-num{
  min-width:40px; height:40px; display:grid; place-items:center;
  padding:0 .2rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  color:#e9f6ff; text-decoration:none; font-weight:800;
  letter-spacing:.2px;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.pagination-nav .pages a.page-num:hover{
  transform: translateY(-1px);
  color:#fff;
  border-color: color-mix(in lab, var(--primary-400) 65%, #fff 35%);
  box-shadow: 0 8px 20px rgba(33,158,188,.28);
}

/* الحالة الفعالة */
.pagination-nav .page-num.is-active{
  color:#fff;
  border-color: color-mix(in lab, var(--accent-400) 65%, #fff 35%);
  background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
  box-shadow: 0 10px 24px rgba(253,158,2,.35);
}

/* نقاط الحذف */
.pagination-nav .dots{
  width:40px; height:40px; display:grid; place-items:center;
  color:#cfe8ff; opacity:.9;
}

/* موبايل: تقليل الحجم قليلاً */
@media (max-width:720px){
  .pagination-nav{ gap:.35rem; padding:.3rem .4rem; }
  .pagination-nav .page-btn,
  .pagination-nav .page-num,
  .pagination-nav .pages a.page-num{ width:36px; min-width:36px; height:36px; border-radius:10px; }
  .pagination-nav .chev{ width:20px; height:20px; }
}


.pagination-nav{ direction:rtl; }        /* الأسهم تتصرف بشكل متوقع */
.pagination-nav .pages{ direction:rtl; } /* الأرقام ترتّب من اليمين لليسار */

/* ========== حالات أخرى ========== */
.no-results { text-align:center; color:#cfe8ff; opacity:.9; margin-top:1rem; }