/* ═══════════════════════════════════════════════════════════
  
   ═══════════════════════════════════════════════════════════ */

/* ── 0. Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img { display: block; max-width: 100%; }
button, input, select { font-family: inherit; font-size: inherit; }

:focus-visible {
  outline: 2px solid var(--primary-color, #4361ee);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── 1. Token Bridge ─────────────────────────────────────────
   نُعرِّف رموز Material-3 المُستخدَمة في مكوّنات الصفحة
   بقيم مستمدة مباشرةً من نظام ألوان BlogArch.
   عند تغيير الوضع (light/dark)، تتغيّر تلقائياً.
────────────────────────────────────────────────────────── */
:root {
  /* Primary */
  --primary:                 var(--primary-color, #4361ee);
  --on-primary:              #fff;
  --primary-container:       var(--primary-light, rgba(67,97,238,.12));
  --on-primary-container:    var(--primary-dark, #2a43cc);

  /* Tertiary ← نستخدم اللون الخاص بقسم التعلم */
  --tertiary:                var(--d-learn, oklch(56% 0.18 215));
  --on-tertiary:             #fff;
  --tertiary-container:      color-mix(in oklch,var(--d-learn,oklch(56% 0.18 215)) 12%,var(--bg,#f8fafc));
  --on-tertiary-container:   var(--d-learn, oklch(56% 0.18 215));

  /* Surfaces */
  --surface:                 var(--bg, #f8fafc);
  --on-surface:              var(--text, #0d1b2a);
  --on-surface-variant:      var(--text-soft, #354f68);
  --surface-variant:         var(--muted-bg, #f1f5f9);
  --surface-container-lowest:var(--card, #fff);
  --surface-container-low:   var(--muted-bg, #f1f5f9);
  --surface-container:       var(--muted-bg, #f1f5f9);
  --surface-container-high:  var(--border, #e2e8f0);
  --surface-container-highest:var(--border, #e2e8f0);
  --background:              var(--bg, #f8fafc);
  --on-background:           var(--text, #0d1b2a);

  /* Outline */
  --outline:                 var(--text-muted, #64748b);
  --outline-variant:         var(--border, #e2e8f0);

  /* Feedback — حاويات لونية ثابتة (light) */
  --error:                   var(--error, #ef4444);
  --on-error:                #fff;
  --error-container:         rgba(239,68,68,.10);
  --on-error-container:      #b91c1c;

  --success:                 var(--success, #10b981);
  --on-success:              #fff;
  --success-container:       rgba(16,185,129,.10);
  --on-success-container:    #065f46;

  --warning:                 var(--warning, #f59e0b);
  --on-warning:              #1a1a1a;
  --warning-container:       rgba(245,158,11,.10);
  --on-warning-container:    #92400e;

  --danger:                  var(--error, #ef4444);
  --on-danger:               #fff;
  --danger-container:        rgba(239,68,68,.10);
  --on-danger-container:     #b91c1c;

  /* Shadows ← نظام BlogArch */
  --shadow-1: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
  --shadow-2: var(--shadow, 0 1px 3px rgba(15,23,42,.06));
  --shadow-3: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,.1));
  --shadow-4: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1));
  --shadow-5: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,.1));

  /* Radii ← BlogArch scale */
  --radius-xs:   4px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   var(--radius, 16px);
  --radius-xl:   var(--radius-lg, 20px);
  --radius-2xl:  var(--radius-xl, 24px);
  --radius-full: 9999px;

  /* Spacing ← 4px grid */
  --space-1:  .25rem;  --space-2:  .5rem;   --space-3:  .75rem;
  --space-4:  1rem;    --space-5:  1.25rem; --space-6:  1.5rem;
  --space-7:  1.75rem; --space-8:  2rem;    --space-9:  2.5rem;
  --space-10: 3rem;    --space-11: 4rem;

  /* Text scale */
  --text-xs:  .75rem; --text-sm:  .875rem; --text-base: 1rem;
  --text-md:  1.063rem; --text-lg: 1.125rem; --text-xl: 1.25rem;
  --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem;

  /* Motion ← BlogArch */
  --ease-standard:   var(--ease-default, cubic-bezier(.4,0,.2,1));
  --ease-decelerate: var(--ease-out, cubic-bezier(0,0,.2,1));
  --ease-accelerate: var(--ease-in, cubic-bezier(.4,0,1,1));
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   350ms;
}

/* ── 2. Dark Mode ─────────────────────────────────────────────
   يتابع body[data-dark] من JS القالب الرئيسي.
   نُحدِّث فقط الحاويات اللونية (success/warning/danger)
   لأن باقي الرموز تتحدث تلقائياً عبر BlogArch.
────────────────────────────────────────────────────────── */
body[data-dark] {
  --error-container:          rgba(239,68,68,.18);
  --on-error-container:       #fca5a5;
  --success-container:        rgba(52,211,153,.16);
  --on-success-container:     #6ee7b7;
  --warning-container:        rgba(252,211,77,.16);
  --on-warning-container:     #fcd34d;
  --danger-container:         rgba(239,68,68,.18);
  --on-danger-container:      #fca5a5;
  --tertiary-container:       color-mix(in oklch,var(--d-learn,oklch(74% 0.16 215)) 16%,var(--bg,#0f172a));
  --on-tertiary-container:    var(--d-learn, oklch(74% 0.16 215));
}

/* قبل تحميل JS: media query للـ system preference */
@media (prefers-color-scheme: dark) {
  body:not([data-dark]):not([data-light]) {
    --error-container:        rgba(239,68,68,.18);
    --on-error-container:     #fca5a5;
    --success-container:      rgba(52,211,153,.16);
    --on-success-container:   #6ee7b7;
    --warning-container:      rgba(252,211,77,.16);
    --on-warning-container:   #fcd34d;
    --danger-container:       rgba(239,68,68,.18);
    --on-danger-container:    #fca5a5;
  }
}

/* ── 3. Blogger Reset ────────────────────────────────────── */
.post-body,.post-outer,.post,.entry-content,.post-body.entry-content {
  max-width:100%!important; width:100%!important;
  padding:0!important; margin:0!important; overflow:visible!important;
}

/* ── 4. Root Scope ───────────────────────────────────────── */
#ba-learn-root {
  font-family: var(--font-body,'Alexandria','Tajawal',system-ui,sans-serif);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text, #0d1b2a);
  direction: rtl;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background: var(--bg, #f8fafc);
}

#ba-learn-root ::selection {
  background: color-mix(in oklch,var(--primary-color,#4361ee) 25%,transparent);
  color: var(--text, #0d1b2a);
}

.ba-wrap {
  width: min(100%, 1280px);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ── 5. Ambient Background ───────────────────────────────── */
.ba-ambient {
  position: relative;
  background: var(--bg, #f8fafc);
  min-height: 100vh;
  overflow: hidden;
}

.ba-ambient::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 100% 0%,
      color-mix(in oklch,var(--primary-color,#4361ee) 5%,transparent),transparent),
    radial-gradient(ellipse 60% 40% at 0% 100%,
      color-mix(in oklch,var(--d-learn,oklch(56% 0.18 215)) 4%,transparent),transparent);
  pointer-events: none;
  z-index: 0;
}

/* ── 6. Search Bar ───────────────────────────────────────── */
.ba-search-bar {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--muted-bg, #f1f5f9);
  border-bottom: 1px solid var(--border, #e2e8f0);
  box-shadow: var(--shadow-1);
  transition:
    height     var(--duration-normal) var(--ease-standard),
    opacity    var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-fast)   var(--ease-standard);
  will-change: height, opacity;
}

.ba-search-bar.ba-collapsed {
  height: 0; opacity: 0;
  border-bottom-color: transparent;
  box-shadow: none;
  pointer-events: none;
  overflow: hidden;
}

.ba-search-row {
  display: flex;
  align-items: center;
  height: 72px;
  gap: var(--space-4);
}

.ba-search-wrap {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
}

.ba-search-icon {
  position: absolute;
  inset-inline-end: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft, #354f68);
  pointer-events: none;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-standard);
}

.ba-search-wrap:focus-within .ba-search-icon {
  color: var(--primary-color, #4361ee);
}

.ba-search-input {
  width: 100%;
  height: 48px;
  padding: 0 48px 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--card, #fff);
  color: var(--text, #0d1b2a);
  font-size: var(--text-base);
  font-family: inherit;
  font-weight: 500;
  box-shadow: var(--shadow-1);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard),
    background   var(--duration-fast) var(--ease-standard);
}

.ba-search-input::placeholder { color: var(--text-soft, #354f68); font-weight: 400; }

.ba-search-input:hover {
  border-color: var(--text-muted, #64748b);
  background: var(--bg, #f8fafc);
}

.ba-search-input:focus {
  outline: none;
  border-color: var(--primary-color, #4361ee);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb,67,97,238),.18), var(--shadow-1);
  background: var(--card, #fff);
}

.ba-search-clear {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--border, #e2e8f0);
  color: var(--text-soft, #354f68);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--text-xs);
  opacity: 0;
  transition:
    opacity    var(--duration-fast) var(--ease-standard),
    color      var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.ba-search-input:not(:placeholder-shown) ~ .ba-search-clear { opacity: 1; }
.ba-search-clear:hover { color: var(--error,#ef4444); background: rgba(239,68,68,.12); }

/* ── 7. Filters Bar ──────────────────────────────────────── */
.ba-filters-bar {
  position: sticky;
  top: 0;
  z-index: 110;
  background: var(--muted-bg, #f1f5f9);
  border-bottom: 1px solid var(--border, #e2e8f0);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.ba-filters-bar.ba-at-top { box-shadow: var(--shadow-2); }

.ba-filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 60px;
  flex-wrap: nowrap;
}

/* Filter Pills */
.ba-filter-pills {
  display: flex;
  gap: 2px;
  background: var(--border, #e2e8f0);
  border: 1px solid var(--border, #e2e8f0);
  padding: 3px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.ba-filter-pill {
  min-height: 34px;
  padding: var(--space-1) var(--space-4);
  border: none;
  background: transparent;
  color: var(--text-soft, #354f68);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--ease-standard),
    color      var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.ba-filter-pill:hover {
  color: var(--primary-color, #4361ee);
  background: rgba(var(--primary-rgb,67,97,238),.08);
}

.ba-filter-pill.active {
  background: var(--card, #fff);
  color: var(--primary-color, #4361ee);
  box-shadow: var(--shadow-1);
  font-weight: 700;
}

.ba-pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ba-pill-dot.beginner     { background: var(--success, #10b981); }
.ba-pill-dot.intermediate { background: var(--warning, #f59e0b); }
.ba-pill-dot.advanced     { background: var(--error,   #ef4444); }

/* Quick Tags */
.ba-quick-tags {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

.ba-tags-label {
  color: var(--text-soft, #354f68);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.ba-tag {
  padding: 3px var(--space-3);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-soft, #354f68);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-standard);
}

.ba-tag:hover {
  color: var(--primary-color, #4361ee);
  border-color: var(--primary-color, #4361ee);
  background: rgba(var(--primary-rgb,67,97,238),.07);
}

.ba-tag.active {
  background: var(--primary-light, rgba(67,97,238,.12));
  color: var(--primary-color, #4361ee);
  border-color: var(--primary-color, #4361ee);
}

/* Controls Right */
.ba-controls-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.ba-sort-select {
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--card, #fff);
  color: var(--text, #0d1b2a);
  font-size: var(--text-sm);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.ba-sort-select:focus {
  outline: none;
  border-color: var(--primary-color, #4361ee);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb,67,97,238),.18);
}

.ba-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--border, #e2e8f0);
  border: 1px solid var(--border, #e2e8f0);
  padding: 2px;
  border-radius: var(--radius-sm);
}

.ba-view-btn {
  width: 34px; height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft, #354f68);
  cursor: pointer;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-standard);
}

.ba-view-btn.active {
  background: var(--card, #fff);
  color: var(--primary-color, #4361ee);
  box-shadow: var(--shadow-1);
}

.ba-view-btn:hover:not(.active) {
  color: var(--primary-color, #4361ee);
  background: rgba(var(--primary-rgb,67,97,238),.05);
}

/* ── 8. Section Header ───────────────────────────────────── */
.ba-section-header {
  text-align: center;
  padding: var(--space-9) 0 var(--space-7);
  position: relative;
  z-index: 1;
}

.ba-section-title {
  font-family: var(--font-body,'Alexandria','Tajawal',sans-serif);
  font-size: clamp(var(--text-2xl),4vw,var(--text-4xl));
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text, #0d1b2a);
  margin-bottom: var(--space-3);
}

.ba-title-accent {
  background: linear-gradient(135deg,
    var(--primary-color,#4361ee),
    var(--d-learn,oklch(56% 0.18 215)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ba-section-subtitle {
  max-width: 560px;
  margin-inline: auto;
  color: var(--text-soft, #354f68);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.75;
}

/* ── 9. Lessons Grid ─────────────────────────────────────── */
.ba-lessons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: var(--space-5);
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-10);
  align-items: start;
}

.ba-lessons-grid.list-view {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* ── 10. Lesson Card ─────────────────────────────────────── */
.lesson-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-5);
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  min-height: 200px;
  animation: card-enter var(--duration-slow) var(--ease-decelerate) both;
  transition:
    transform     var(--duration-slow)   var(--ease-standard),
    box-shadow    var(--duration-slow)   var(--ease-standard),
    border-color  var(--duration-normal) var(--ease-standard),
    background    var(--duration-normal) var(--ease-standard);
}

@keyframes card-enter {
  from { opacity:0; transform:translateY(14px) scale(.98); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}

/* شريط accent جانبي */
.lesson-card::after {
  content:"";
  position:absolute;
  inset-block: var(--space-4);
  inset-inline-start:0;
  width:3px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--primary-color,#4361ee),var(--d-learn,oklch(56% 0.18 215)));
  opacity:.65;
  transition:
    width   var(--duration-normal) var(--ease-standard),
    opacity var(--duration-fast)   var(--ease-standard);
}

/* Hover glow */
.lesson-card::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at top right,
    rgba(var(--primary-rgb,67,97,238),.05),transparent 60%);
  opacity:0;
  z-index:-1;
  transition:opacity var(--duration-slow) var(--ease-standard);
}

.lesson-card:hover {
  transform:translateY(-4px);
  border-color:rgba(var(--primary-rgb,67,97,238),.28);
  box-shadow:var(--shadow-3);
}

.lesson-card:hover::before { opacity:1; }
.lesson-card:hover::after  { width:4px; opacity:1; }

.lesson-card.completed { border-color:rgba(16,185,129,.3); }
.lesson-card.completed::after {
  background:linear-gradient(180deg,var(--success,#10b981),#065f46);
}

/* Card Header */
.card-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
}

.lesson-icon {
  width:46px; height:46px;
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(var(--primary-rgb,67,97,238),.10);
  color:var(--primary-color,#4361ee);
  font-size:1.1rem;
  border:1px solid rgba(var(--primary-rgb,67,97,238),.15);
  flex-shrink:0;
  transition:
    transform  var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.lesson-card:hover .lesson-icon {
  transform:scale(1.06) rotate(-2deg);
  box-shadow:0 4px 12px rgba(var(--primary-rgb,67,97,238),.22);
}

.favorite-btn {
  width:32px; height:32px;
  border-radius:50%;
  border:1.5px solid var(--border,#e2e8f0);
  background:var(--muted-bg,#f1f5f9);
  color:var(--text-soft,#354f68);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:var(--text-xs);
  flex-shrink:0;
  transition:all var(--duration-fast) var(--ease-standard);
}

.favorite-btn:hover,.favorite-btn.active {
  color:var(--error,#ef4444);
  border-color:var(--error,#ef4444);
  background:rgba(239,68,68,.10);
}

/* Card Body */
.lesson-content {
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  flex:1;
}

.lesson-title {
  font-family:var(--font-body,'Alexandria','Tajawal',sans-serif);
  font-size:var(--text-lg);
  font-weight:700;
  line-height:1.4;
  color:var(--text,#0d1b2a);
  letter-spacing:-.01em;
}

.lesson-title-en {
  font-size:var(--text-xs);
  color:var(--text-soft,#354f68);
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.5;
  text-transform:uppercase;
}

.lesson-description {
  color:var(--text-soft,#354f68);
  font-size:var(--text-sm);
  font-weight:400;
  line-height:1.75;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:var(--space-1);
}

/* Card Footer */
.lesson-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  border-top:1px solid var(--border,#e2e8f0);
  padding-top:var(--space-3);
  margin-top:var(--space-3);
}

/* Level Badges */
.level-badge {
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  min-height:24px;
  padding:3px var(--space-3);
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.01em;
}

.level-badge.beginner     { background:rgba(16,185,129,.12);  color:#065f46; }
.level-badge.intermediate { background:rgba(245,158,11,.12);  color:#92400e; }
.level-badge.advanced     { background:rgba(239,68,68,.12);   color:#b91c1c; }

body[data-dark] .level-badge.beginner,
body.dark-mode  .level-badge.beginner     { background:rgba(52,211,153,.16);  color:#6ee7b7; }
body[data-dark] .level-badge.intermediate,
body.dark-mode  .level-badge.intermediate { background:rgba(252,211,77,.16);  color:#fcd34d; }
body[data-dark] .level-badge.advanced,
body.dark-mode  .level-badge.advanced     { background:rgba(239,68,68,.18);   color:#fca5a5; }

@media (prefers-color-scheme:dark) {
  body:not([data-dark]):not([data-light]) .level-badge.beginner     { background:rgba(52,211,153,.16); color:#6ee7b7; }
  body:not([data-dark]):not([data-light]) .level-badge.intermediate { background:rgba(252,211,77,.16); color:#fcd34d; }
  body:not([data-dark]):not([data-light]) .level-badge.advanced     { background:rgba(239,68,68,.18);  color:#fca5a5; }
}

.lesson-action {
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  color:var(--primary-color,#4361ee);
  font-size:var(--text-sm);
  font-weight:700;
  transition:gap var(--duration-fast) var(--ease-standard);
}

.lesson-card:hover .lesson-action { gap:var(--space-3); }

/* List View Overrides */
.ba-lessons-grid.list-view .lesson-card {
  flex-direction:row;
  align-items:center;
  padding:var(--space-4) var(--space-5);
  gap:var(--space-4);
  min-height:unset;
}
.ba-lessons-grid.list-view .card-header { margin-bottom:0; flex-shrink:0; }
.ba-lessons-grid.list-view .lesson-content { gap:2px; flex:1; }
.ba-lessons-grid.list-view .lesson-description { -webkit-line-clamp:2; margin-top:0; }
.ba-lessons-grid.list-view .lesson-meta {
  border-top:none;
  padding-top:0;
  margin-top:0;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:var(--space-2);
  flex-shrink:0;
  min-width:100px;
}

/* ── 11. Empty State ─────────────────────────────────────── */
.ba-empty-state {
  text-align:center;
  padding:var(--space-10) var(--space-6);
  background:var(--muted-bg,#f1f5f9);
  border:2px dashed var(--border,#e2e8f0);
  border-radius:var(--radius-xl);
  color:var(--text-soft,#354f68);
  position:relative;
  z-index:1;
  margin-bottom:var(--space-10);
}

.ba-empty-icon {
  width:80px; height:80px;
  margin:0 auto var(--space-5);
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--border,#e2e8f0);
  color:var(--text-soft,#354f68);
  font-size:1.75rem;
}

.ba-empty-state h3 {
  font-family:var(--font-body,'Alexandria','Tajawal',sans-serif);
  font-size:var(--text-xl);
  font-weight:800;
  color:var(--text,#0d1b2a);
  margin-bottom:var(--space-2);
}

.ba-empty-state p {
  margin-bottom:var(--space-5);
  max-width:400px;
  margin-inline:auto;
}

/* ── 12. Buttons ─────────────────────────────────────────── */
.ba-btn-primary,.ba-btn-complete {
  min-height:44px;
  padding:var(--space-2) var(--space-5);
  border:none;
  border-radius:var(--radius-full);
  font-family:inherit;
  font-size:var(--text-base);
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  transition:
    transform    var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard),
    background   var(--duration-fast) var(--ease-standard);
}

.ba-btn-primary {
  color:#fff;
  background:var(--primary-color,#4361ee);
  box-shadow:var(--shadow-2);
}
.ba-btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-3);
  background:var(--primary-hover,#2a43cc);
}

.ba-btn-complete {
  color:#fff;
  background:var(--success,#10b981);
  box-shadow:var(--shadow-2);
}
.ba-btn-complete:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-3);
  background:#059669;
}
.ba-btn-complete.completed {
  background:var(--text-soft,#354f68);
  box-shadow:none;
  cursor:default;
}
.ba-btn-complete.completed:hover { transform:none; box-shadow:none; }

/* ── 13. Modal ───────────────────────────────────────────── */
.lesson-modal {
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-4);
  opacity:0;
  visibility:hidden;
  transition:
    opacity    var(--duration-normal) var(--ease-standard),
    visibility var(--duration-normal) var(--ease-standard);
}

.lesson-modal.active { opacity:1; visibility:visible; }

.modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
}

.modal-container {
  position:relative;
  width:min(1100px,100%);
  height:min(90vh,100%);
  display:flex;
  flex-direction:column;
  background:var(--card,#fff);
  border:1px solid var(--border,#e2e8f0);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-5);
  transform:translateY(20px) scale(.97);
  transition:transform var(--duration-slow) var(--ease-decelerate);
}

.lesson-modal.active .modal-container { transform:translateY(0) scale(1); }

.modal-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-4);
  padding:var(--space-5) var(--space-6);
  border-bottom:1px solid var(--border,#e2e8f0);
  background:var(--muted-bg,#f1f5f9);
  flex-shrink:0;
}

.modal-title {
  font-family:var(--font-body,'Alexandria','Tajawal',sans-serif);
  font-size:var(--text-xl);
  font-weight:800;
  line-height:1.3;
  color:var(--text,#0d1b2a);
}

.modal-subtitle {
  color:var(--text-soft,#354f68);
  font-size:var(--text-sm);
  font-weight:500;
  margin-top:var(--space-1);
}

.modal-actions { display:flex; gap:var(--space-2); flex-shrink:0; }

.icon-btn,.tool-btn {
  width:40px; height:40px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--border,#e2e8f0);
  background:var(--card,#fff);
  color:var(--text-soft,#354f68);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:var(--text-sm);
  transition:all var(--duration-fast) var(--ease-standard);
  flex-shrink:0;
}

.icon-btn:hover,.tool-btn:hover {
  color:var(--primary-color,#4361ee);
  border-color:var(--primary-color,#4361ee);
  background:rgba(var(--primary-rgb,67,97,238),.08);
}

.icon-btn.close-btn:hover {
  color:var(--error,#ef4444);
  border-color:var(--error,#ef4444);
  background:rgba(239,68,68,.10);
}

.modal-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-5);
  border-bottom:1px solid var(--border,#e2e8f0);
  background:var(--card,#fff);
  flex-shrink:0;
  flex-wrap:wrap;
}

.nav-arrow {
  min-height:36px;
  padding:var(--space-2) var(--space-4);
  border:1.5px solid var(--border,#e2e8f0);
  border-radius:var(--radius-sm);
  background:var(--muted-bg,#f1f5f9);
  color:var(--text,#0d1b2a);
  font-size:var(--text-sm);
  font-weight:700;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  cursor:pointer;
  transition:all var(--duration-fast) var(--ease-standard);
}

.nav-arrow:hover:not(:disabled) {
  color:var(--primary-color,#4361ee);
  border-color:var(--primary-color,#4361ee);
  background:rgba(var(--primary-rgb,67,97,238),.08);
}

.nav-arrow:disabled { opacity:.4; cursor:not-allowed; }

.lesson-indicator {
  color:var(--text-soft,#354f68);
  font-weight:700;
  font-family:var(--font-body,'Alexandria','Tajawal',sans-serif);
  font-size:var(--text-base);
  white-space:nowrap;
}

.reading-controls { display:flex; gap:var(--space-2); }

.modal-body {
  flex:1;
  background:var(--bg,#f8fafc);
  overflow:hidden;
  position:relative;
}

.iframe-container,#lessonIframe { width:100%; height:100%; }
#lessonIframe { border:none; background:#fff; }

.iframe-loader {
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-4);
  background:var(--bg,#f8fafc);
  color:var(--text-soft,#354f68);
  font-weight:600;
  transition:
    opacity    var(--duration-normal) var(--ease-standard),
    visibility var(--duration-normal) var(--ease-standard);
}

.iframe-loader.hidden { opacity:0; visibility:hidden; }

.spinner {
  width:40px; height:40px;
  border:3px solid var(--border,#e2e8f0);
  border-top-color:var(--primary-color,#4361ee);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin { to { transform:rotate(360deg); } }

.modal-footer {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:var(--space-4) var(--space-6);
  border-top:1px solid var(--border,#e2e8f0);
  background:var(--muted-bg,#f1f5f9);
  flex-shrink:0;
  gap:var(--space-3);
}

/* ── 14. Toast ───────────────────────────────────────────── */
.toast-container {
  position:fixed;
  inset-inline-start:var(--space-5);
  bottom:var(--space-5);
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  pointer-events:none;
}

.toast {
  min-width:280px;
  max-width:400px;
  padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-lg);
  background:var(--card,#fff);
  border:1px solid var(--border,#e2e8f0);
  border-inline-end:4px solid var(--primary-color,#4361ee);
  box-shadow:var(--shadow-4);
  color:var(--text,#0d1b2a);
  font-size:var(--text-sm);
  font-weight:600;
  animation:toast-enter var(--duration-normal) var(--ease-decelerate) both;
  pointer-events:all;
  display:flex;
  align-items:center;
  gap:var(--space-3);
}

.toast.success { border-inline-end-color:var(--success,#10b981); }
.toast.error   { border-inline-end-color:var(--error,#ef4444); }
.toast.info    { border-inline-end-color:var(--primary-color,#4361ee); }

@keyframes toast-enter {
  from { opacity:0; transform:translateX(-20px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ── 15. Card Loader Overlay ─────────────────────────────── */
.card-loader-overlay {
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  background:color-mix(in srgb,var(--card,#fff) 90%,transparent);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity    var(--duration-normal) var(--ease-standard),
    visibility var(--duration-normal) var(--ease-standard);
  border-radius:inherit;
}

.lesson-card.card-loading .card-loader-overlay { opacity:1; visibility:visible; }

.card-loader-spinner {
  width:32px; height:32px;
  border-radius:50%;
  border:3px solid var(--border,#e2e8f0);
  border-top-color:var(--primary-color,#4361ee);
  animation:spin .75s linear infinite;
}

.card-loader-text {
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--primary-color,#4361ee);
}

.lesson-card.card-loading .card-header,
.lesson-card.card-loading .lesson-content,
.lesson-card.card-loading .lesson-meta {
  opacity:.3;
  filter:blur(1px);
  transition:
    opacity var(--duration-normal) var(--ease-standard),
    filter  var(--duration-normal) var(--ease-standard);
}

.lesson-card.card-loading { pointer-events:none; }

/* ── 16. Reading Mode ────────────────────────────────────── */
.reading-mode .modal-container { max-width:800px; }

/* ── 17. Responsive ──────────────────────────────────────── */
@media (max-width:1024px) {
  .ba-lessons-grid { grid-template-columns:repeat(2,1fr); }
  .ba-quick-tags { display:none; }
}

@media (max-width:768px) {
  .ba-wrap { padding-inline:var(--space-4); }
  .ba-search-row { height:64px; }
  .ba-filters-row {
    flex-wrap:wrap;
    height:auto;
    padding:var(--space-2) 0;
    gap:var(--space-3);
  }
  .ba-filter-pills { gap:2px; }
  .ba-filter-pill { padding:var(--space-1) var(--space-3); font-size:var(--text-xs); }
  .ba-filter-pill i { display:none; }
  .ba-lessons-grid { grid-template-columns:1fr; gap:var(--space-4); }
  .modal-container { width:100%; height:100dvh; border-radius:0; border:none; }
  .lesson-modal { padding:0; }
  .modal-toolbar { flex-wrap:wrap; justify-content:center; gap:var(--space-2); }
  .reading-controls { width:100%; justify-content:center; order:3; }
  .nav-arrow { flex:1; justify-content:center; }
  .nav-arrow span { display:none; }
  .modal-header,.modal-footer { padding-inline:var(--space-4); }
  .modal-title { font-size:var(--text-lg); }
}

@media (max-width:540px) {
  .ba-wrap { padding-inline:var(--space-3); }
  .ba-section-header { padding:var(--space-7) 0 var(--space-5); }
  .lesson-card { padding:var(--space-4); }
  .ba-lessons-grid.list-view .lesson-card { flex-direction:column; align-items:stretch; min-height:unset; }
  .ba-lessons-grid.list-view .lesson-meta {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid var(--border,#e2e8f0);
    padding-top:var(--space-3);
    margin-top:var(--space-2);
    min-width:unset;
  }
  .ba-empty-state { padding:var(--space-8) var(--space-4); }
  .ba-filter-pills { flex-wrap:wrap; }
  .ba-sort-select { font-size:var(--text-xs); padding:0 var(--space-2); }
  .ba-view-btn { width:30px; height:30px; }
}

@media (max-width:380px) {
  .ba-search-row { height:56px; }
  .ba-section-title { font-size:var(--text-xl); }
  .ba-filter-pill { padding:var(--space-1) var(--space-2); }
}

/* ── 18. Reduced Motion ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html { scroll-behavior:auto; }
}

/* ── 19. Scrollbar ──────────────────────────────────────── */
#ba-learn-root ::-webkit-scrollbar { width:6px; }
#ba-learn-root ::-webkit-scrollbar-track { background:transparent; }
#ba-learn-root ::-webkit-scrollbar-thumb {
  background:var(--border,#e2e8f0);
  border-radius:var(--radius-full);
}
#ba-learn-root ::-webkit-scrollbar-thumb:hover {
  background:var(--text-muted,#64748b);
}