:root{
  --bg:#0a0f1a; --card:#0b1220; --line:#1f2937;
  --fg:#f8fafc; --muted:#94a3b8; --accent:#22c55e; --primary:#3b82f6;

  /* سُلّم مسافات و ظلال */
  --radius:14px; --r-sm:10px;
  --space:16px; --space-sm:12px; --space-xs:8px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.bg{
  background:var(--bg); color:var(--fg); margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial;
  line-height:1.6;
}

/* حاوية مرنة */
.container{
  width:min(100% - 2*var(--space), 1100px);
  margin-inline:auto; padding:var(--space);
}

/* شريط علوي آمن للحواف */
.topbar{
  position:sticky; top:0; z-index:10;
  background:color-mix(in oklab, var(--bg) 75%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.topbar .container{display:flex;align-items:center;min-height:56px;gap:12px}

/* بطاقات */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--space); margin:var(--space) 0;
}
.muted{color:var(--muted)} .strong{font-weight:700} .hidden{display:none}

/* intro */
.intro{
  display:grid; gap:var(--space);
  grid-template-columns: 1fr clamp(160px,22vw,220px);
  align-items:center;
}
.cover{
  width:100%; height:clamp(120px,22vw,160px);
  object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--line);
}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;color:var(--muted)}

/* progress */
.row{display:flex;gap:12px;align-items:center}
.grow{flex:1}
.label{color:var(--muted);margin-bottom:8px}
.bar{
  height:12px;background:#0f172a;border:1px solid var(--line);
  border-radius:999px;overflow:hidden
}
.bar-fill{height:100%;background:var(--accent);transition:width .4s}

/* قائمة الدروس (RTL مراعى) */
.list{display:flex;flex-direction:column;gap:10px}
.item{
  display:grid; gap:12px; padding:10px;
  grid-template-columns: clamp(110px,22vw,160px) 1fr;
  border-radius:12px;border:1px solid var(--line);background:#0a1220
}
.item:hover{border-color:#334155}
.thumb{
  width:100%; height:clamp(70px,11vw,90px);
  border-radius:10px; object-fit:cover; border:1px solid var(--line)
}
.info{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:8px; align-items:center
}
.num{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;background:#0a1524;font-weight:700
}
.title{font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.duration{color:var(--muted)}
.btn{
  border:1px solid var(--line); background:transparent; color:var(--fg);
  padding:8px 12px; border-radius:10px; cursor:pointer; text-decoration:none
}
.btn.watch{border-color:var(--primary)}
.btn.done{border-color:var(--accent); color:var(--accent)}
.badge{padding:2px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.85rem}

/* gate */
.gate{
  border:1px dashed var(--line); padding:16px; border-radius:12px; margin:16px 0; background:#0a1220
}
.gate-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.btn-inline{display:inline-flex;align-items:center;gap:6px}

/* تركيز واضح */
:where(a,button,.btn){outline:none}
:where(a:focus-visible,button:focus-visible,.btn:focus-visible){
  outline:2px solid var(--primary); outline-offset:2px
}

/* تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* شاشات متوسطة */
@media (max-width: 992px){
  .intro{grid-template-columns:1fr}
  .cover{height:clamp(120px,30vw,160px)}
}

/* تابلت */
@media (max-width: 840px){
  .item{grid-template-columns: 110px 1fr}
  .thumb{height:70px}
}

/* ترتيب خاص بالموبايل */
@media (max-width: 640px){
  /* خلي البطاقة Grid بمناطق واضحة */
  .item{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title num"
      "thumb thumb"
      "watch watch";
    gap:12px;
  }

  /* خلّي عناصر info تُعامل كأنها أبناء مباشرون للـ grid */
  .info{ display:contents; }

  /* الاسم + الرقم قبل الصورة */
  .title{ grid-area:title; white-space:normal; font-weight:700; }
  .num{ grid-area:num; justify-self:end; }

  /* الصورة في سطر مستقل */
  .thumb{
    grid-area:thumb;
    width:100%;
    height:auto;           /* علشان ما تبقاش مضغوطة */
    aspect-ratio:16/9;     /* نسبة أبعاد لطيفة على الموبايل */
    object-fit:cover;
  }

  /* زر مشاهدة تحت الصورة وبعرض كامل */
  .btn.watch{
    grid-area:watch;
    width:100%;
    text-align:center;
    display:inline-flex;
    justify-content:center;
    padding-block:10px;
  }

  /* تفاصيل ثانوية نخفيها لتقليل الزحمة */
  .duration{ display:none; }
}

/* شاشات عريضة */
@media (min-width: 1280px){
  .container{width:min(100% - 2*var(--space), 1200px)}
  .intro{grid-template-columns: 1.3fr 240px}
}
/* إزالة الهوامش وتوسيع المحتوى */
.container{
  width:100%;
  max-width:none;
  margin:4px;
  padding:4px;
}

/* للكروت والمحتوى الداخلي */
.card, .intro, .item{
  border-radius:0;
  margin:4px;
  border-left:none;
  border-right:none;
}

/* لو عايز تسيب بس مساحة بسيطة جوه النصوص */
.card > *{
  padding-inline:16px;
}