/* =============================================================
   app.css — طبقة إضافية فوق design-system.css و lms.css
   لا تُلغي أي شيء من النظام المرجعي، بل تضيف:
   خلفيات حيّة · بطاقات زجاجية · إمالة ثلاثية · شريط تقدّم القراءة ·
   أكورديون · خطّ زمني · معالج خطوات · حقول عائمة · شبكة بينتو.
   كل الألوان مأخوذة من رموز النظام (--sky-* / --slate-*).
   ============================================================= */

/* -------------------------------------------------------------
   1) خلفيات حيّة
   ------------------------------------------------------------- */
.aurora{position:relative;overflow:hidden;isolation:isolate;}
.aurora::before,.aurora::after{
  content:'';position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.55;
  will-change:transform;
}
.aurora::before{
  width:44vw;height:44vw;max-width:620px;max-height:620px;top:-16%;right:-8%;
  background:radial-gradient(circle at 30% 30%,#7DD3FC,#0EA5E9 55%,transparent 72%);
  animation:aur-a 18s ease-in-out infinite alternate;
}
.aurora::after{
  width:38vw;height:38vw;max-width:520px;max-height:520px;bottom:-18%;left:-6%;
  background:radial-gradient(circle at 60% 40%,#A5F3FC,#38BDF8 50%,transparent 70%);
  animation:aur-b 22s ease-in-out infinite alternate;
}
@keyframes aur-a{to{transform:translate3d(-60px,50px,0) scale(1.12);}}
@keyframes aur-b{to{transform:translate3d(70px,-40px,0) scale(1.08);}}

.mesh-bg{
  background:
    radial-gradient(1000px 520px at 88% -8%,rgba(56,189,248,.20),transparent 62%),
    radial-gradient(760px 460px at 6% 8%,rgba(14,165,233,.14),transparent 60%),
    radial-gradient(620px 420px at 50% 108%,rgba(168,85,247,.10),transparent 62%),
    linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 45%,#F1F5F9 100%);
}
.dot-grid{
  background-image:radial-gradient(rgba(15,23,42,.09) 1px,transparent 1px);
  background-size:22px 22px;
}
.line-grid{
  background-image:
    linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 40%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 78% 62% at 50% 40%,#000 40%,transparent 100%);
}
.noise{position:relative;}
.noise::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------
   2) زجاج وتوهّج
   ------------------------------------------------------------- */
.glass{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 10px 34px rgba(15,23,42,.08);
}
.glass-dark{
  background:rgba(15,23,42,.62);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.12);
  color:#E2E8F0;
}
.glow-ring{position:relative;}
.glow-ring::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(135deg,rgba(56,189,248,.85),rgba(168,85,247,.55),rgba(56,189,248,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s var(--ease-out);
}
.glow-ring:hover::before{opacity:1;}

/* بريق يمرّ على البطاقة عند المرور */
.shine{position:relative;overflow:hidden;}
.shine::after{
  content:'';position:absolute;top:0;bottom:0;width:52%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-160%) skewX(-16deg);pointer-events:none;
}
.shine:hover::after{animation:shine-run .9s var(--ease-out);}
@keyframes shine-run{to{transform:translateX(260%) skewX(-16deg);}}

/* بقعة ضوء تتبع المؤشّر — تُغذّى من ui.js عبر --mx/--my */
.spot{position:relative;}
.spot::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(14,165,233,.13),transparent 62%);
  opacity:0;transition:opacity .3s;
}
.spot:hover::before{opacity:1;}

/* -------------------------------------------------------------
   3) إمالة ثلاثية الأبعاد + مغناطيسية
   ------------------------------------------------------------- */
.tilt{transform-style:preserve-3d;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);will-change:transform;}
.tilt.is-tilting{transition:transform .08s linear;}
.tilt-in{transform:translateZ(28px);}
.magnetic{transition:transform .3s var(--ease-spring);will-change:transform;}

/* -------------------------------------------------------------
   4) نصوص وتأكيدات
   ------------------------------------------------------------- */
.grad-text{
  background:linear-gradient(120deg,#0EA5E9 0%,#0284C7 42%,#7C3AED 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ink-underline{
  background-image:linear-gradient(120deg,rgba(56,189,248,.42),rgba(56,189,248,.42));
  background-repeat:no-repeat;background-position:0 88%;background-size:0 .42em;
  transition:background-size .7s var(--ease-out);
}
.ink-underline.in,[data-reveal].in .ink-underline{background-size:100% .42em;}
.type-caret::after{
  content:'';display:inline-block;width:2px;height:1em;margin-inline-start:3px;
  background:var(--sky-500);vertical-align:-.13em;animation:caret 1s steps(2) infinite;
}
@keyframes caret{50%{opacity:0;}}

/* أرقام تتغيّر بنعومة */
.num-roll{display:inline-block;transition:transform .3s var(--ease-out);}
.num-roll.bump{animation:num-bump .42s var(--ease-spring);}
@keyframes num-bump{0%{transform:translateY(6px);opacity:.4;}100%{transform:none;opacity:1;}}

/* -------------------------------------------------------------
   5) شريط تقدّم القراءة + رابط سلس
   ------------------------------------------------------------- */
.read-bar{
  position:fixed;top:0;right:0;left:0;height:3px;z-index:60;pointer-events:none;
  background:transparent;
}
.read-bar i{
  display:block;height:100%;width:0;
  background:var(--grad-brand-deep);box-shadow:0 0 10px rgba(14,165,233,.6);
  transition:width .12s linear;
}

/* -------------------------------------------------------------
   6) شريط لوجوهات متحرّك
   ------------------------------------------------------------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
         mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marq 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marq{to{transform:translateX(50%);}}
[dir="rtl"] .marquee-track{animation-name:marq-rtl;}
@keyframes marq-rtl{to{transform:translateX(-50%);}}

/* -------------------------------------------------------------
   7) شبكة بينتو
   ------------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.bento > *{grid-column:span 6;}
@media(min-width:768px){
  .bento > *{grid-column:span 3;}
  .b-3{grid-column:span 3 !important;} .b-2{grid-column:span 2 !important;}
  .b-4{grid-column:span 4 !important;} .b-6{grid-column:span 6 !important;}
}
@media(min-width:1024px){
  .lg\:b-2{grid-column:span 2 !important;} .lg\:b-3{grid-column:span 3 !important;}
  .lg\:b-4{grid-column:span 4 !important;} .lg\:b-6{grid-column:span 6 !important;}
}

/* -------------------------------------------------------------
   8) أكورديون
   ------------------------------------------------------------- */
.acc{border:1px solid var(--slate-200);border-radius:var(--r-lg);background:#fff;overflow:hidden;
     transition:box-shadow var(--t-base),border-color var(--t-base);}
.acc + .acc{margin-top:10px;}
.acc.open{border-color:var(--sky-200);box-shadow:var(--sh-card-hover);}
.acc-q{
  width:100%;display:flex;align-items:center;gap:12px;padding:16px 18px;
  font-weight:700;color:var(--slate-800);text-align:start;cursor:pointer;
  transition:background var(--t-fast);
}
.acc-q:hover{background:var(--slate-50);}
.acc-q .chev{margin-inline-start:auto;color:var(--slate-400);transition:transform .34s var(--ease-out);}
.acc.open .acc-q{color:var(--sky-700);}
.acc.open .acc-q .chev{transform:rotate(180deg);color:var(--sky-500);}
.acc-a{max-height:0;overflow:hidden;transition:max-height .42s var(--ease-out);}
.acc-a > div{padding:0 18px 18px;color:var(--slate-600);font-size:14px;line-height:1.95;}

/* -------------------------------------------------------------
   9) خطّ زمني
   ------------------------------------------------------------- */
.tl{position:relative;padding-inline-start:34px;}
.tl::before{
  content:'';position:absolute;inset-inline-start:11px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--sky-300),var(--slate-200));border-radius:2px;
}
.tl-item{position:relative;padding-bottom:22px;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{
  position:absolute;inset-inline-start:-30px;top:2px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:10px;
  background:#fff;border:2px solid var(--slate-200);color:var(--slate-400);
}
.tl-item.done .tl-dot{border-color:var(--success);color:#fff;background:var(--success);}
.tl-item.now .tl-dot{border-color:var(--sky-500);color:var(--sky-600);box-shadow:0 0 0 5px rgba(14,165,233,.16);}

/* -------------------------------------------------------------
   10) معالج الخطوات (Wizard)
   ------------------------------------------------------------- */
.wz{display:flex;align-items:center;gap:0;overflow-x:auto;padding-bottom:2px;}
.wz-step{display:flex;align-items:center;gap:10px;flex:1;min-width:118px;}
.wz-num{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:13px;flex-shrink:0;
  background:#fff;border:2px solid var(--slate-200);color:var(--slate-400);
  transition:all .38s var(--ease-spring);
}
.wz-step.on .wz-num{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:var(--sh-brand);transform:scale(1.06);}
.wz-step.done .wz-num{background:var(--success);border-color:transparent;color:#fff;}
.wz-lbl{font-size:12px;font-weight:700;color:var(--slate-400);white-space:nowrap;transition:color .3s;}
.wz-step.on .wz-lbl{color:var(--sky-700);}
.wz-step.done .wz-lbl{color:var(--slate-700);}
.wz-line{flex:1;height:2px;background:var(--slate-200);margin:0 8px;border-radius:2px;position:relative;overflow:hidden;}
.wz-line i{position:absolute;inset:0;width:0;background:var(--success);transition:width .5s var(--ease-out);}
.wz-step.done + .wz-line i,.wz-line.done i{width:100%;}
.wz-pane{display:none;}
.wz-pane.on{display:block;animation:fade-up .45s var(--ease-out) both;}

/* -------------------------------------------------------------
   11) حقول عائمة
   ------------------------------------------------------------- */
.fld{position:relative;}
.fld > input,.fld > select,.fld > textarea{
  width:100%;padding:20px 14px 8px;border:1.5px solid var(--slate-200);border-radius:var(--r-lg);
  font-size:14px;color:var(--slate-800);background:#fff;outline:none;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.fld > textarea{padding-top:24px;min-height:110px;resize:vertical;}
.fld > label{
  position:absolute;inset-inline-start:14px;top:14px;font-size:14px;color:var(--slate-400);
  pointer-events:none;transform-origin:inline-start top;
  transition:transform .22s var(--ease-out),color .22s;
}
.fld > input:focus,.fld > select:focus,.fld > textarea:focus{
  border-color:var(--sky-400);box-shadow:0 0 0 4px rgba(14,165,233,.12);
}
.fld > input:focus + label,.fld > input:not(:placeholder-shown) + label,
.fld > textarea:focus + label,.fld > textarea:not(:placeholder-shown) + label,
.fld > select:focus + label,.fld > select[data-filled] + label{
  transform:translateY(-9px) scale(.78);color:var(--sky-600);
}
.fld-hint{font-size:11.5px;color:var(--slate-400);margin-top:5px;}
.fld-err{font-size:11.5px;color:var(--danger-strong);margin-top:5px;display:none;align-items:center;gap:5px;}
.fld.bad > input,.fld.bad > select,.fld.bad > textarea{border-color:var(--danger);box-shadow:0 0 0 4px rgba(239,68,68,.1);}
.fld.bad .fld-err{display:flex;}
.fld.ok > input{border-color:var(--success-strong);}

/* -------------------------------------------------------------
   12) خانة رمز التحقق OTP
   ------------------------------------------------------------- */
.otp{display:flex;gap:10px;justify-content:center;direction:ltr;}
.otp input{
  width:52px;height:60px;text-align:center;font-size:24px;font-weight:900;color:var(--slate-900);
  border:1.5px solid var(--slate-200);border-radius:var(--r-lg);background:#fff;outline:none;
  transition:all .2s var(--ease-out);
}
.otp input:focus{border-color:var(--sky-500);box-shadow:0 0 0 4px rgba(14,165,233,.14);transform:translateY(-2px);}
.otp input.filled{border-color:var(--sky-400);background:var(--sky-50);}

/* -------------------------------------------------------------
   13) بطاقات اختيار / تبديل
   ------------------------------------------------------------- */
.pick{
  display:block;cursor:pointer;border:1.5px solid var(--slate-200);border-radius:var(--r-xl);
  padding:14px;background:#fff;transition:all .28s var(--ease-out);position:relative;
}
.pick:hover{border-color:var(--sky-300);transform:translateY(-2px);box-shadow:var(--sh-card-hover);}
.pick.on{border-color:var(--sky-500);background:var(--sky-50);box-shadow:0 0 0 3px rgba(14,165,233,.12);}
.pick.on::after{
  content:'✓';position:absolute;top:10px;inset-inline-end:10px;width:20px;height:20px;border-radius:50%;
  background:var(--sky-500);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;
  animation:scale-in .3s var(--ease-spring) both;
}

/* -------------------------------------------------------------
   14) تصنيف نجوم تفاعلي
   ------------------------------------------------------------- */
.rate{display:inline-flex;gap:4px;direction:ltr;}
.rate button{color:var(--slate-300);transition:transform .18s var(--ease-spring),color .18s;}
.rate button:hover{transform:scale(1.22);}
.rate button.on{color:#F59E0B;}

/* -------------------------------------------------------------
   15) مسطرة إحصاء + دوائر
   ------------------------------------------------------------- */
.meter{height:8px;border-radius:99px;background:var(--slate-100);overflow:hidden;}
.meter i{display:block;height:100%;width:0;border-radius:99px;background:var(--grad-brand);
         transition:width 1.1s var(--ease-out);}
.meter.ok i{background:var(--grad-success);}
.meter.warn i{background:linear-gradient(90deg,#FBBF24,#F59E0B);}
.meter.bad i{background:linear-gradient(90deg,#F87171,#DC2626);}

/* -------------------------------------------------------------
   16) شارات ووسوم إضافية
   ------------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  font-size:11.5px;font-weight:800;background:var(--slate-100);color:var(--slate-600);
  border:1px solid var(--slate-200);transition:all .22s var(--ease-out);
}
.chip-sky{background:var(--sky-50);color:var(--sky-700);border-color:var(--sky-200);}
.chip-ok{background:var(--success-bg);color:var(--success-ink);border-color:#A7F3D0;}
.chip-warn{background:var(--warning-bg);color:var(--warning-ink);border-color:#FDE68A;}
.chip-bad{background:var(--danger-bg);color:var(--danger-ink);border-color:#FECACA;}
.chip-purple{background:var(--purple-bg);color:var(--purple-ink);border-color:#DDD6FE;}
a.chip:hover,button.chip:hover{transform:translateY(-1px);box-shadow:var(--sh-card-hover);}

/* -------------------------------------------------------------
   17) صفّ إحصاء كبير في الواجهة
   ------------------------------------------------------------- */
.stat-big{font-size:clamp(28px,4.4vw,44px);font-weight:900;line-height:1;letter-spacing:-.02em;}

/* -------------------------------------------------------------
   18) بطاقة برنامج في البوابة العامة
   ------------------------------------------------------------- */
.pcard{
  background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-2xl);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .38s var(--ease-out),box-shadow .38s var(--ease-out),border-color .38s;
}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lift);border-color:var(--sky-200);}
.pcard-top{position:relative;height:140px;overflow:hidden;}
.pcard-top .pc-art{position:absolute;inset:0;transition:transform .7s var(--ease-out);}
.pcard:hover .pcard-top .pc-art{transform:scale(1.07);}
.pcard-badges{position:absolute;top:10px;inset-inline-start:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:2;}

/* -------------------------------------------------------------
   19) جدول محسّن
   ------------------------------------------------------------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;}
.tbl thead th{
  position:sticky;top:0;z-index:2;background:var(--slate-50);
  font-size:11.5px;font-weight:900;color:var(--slate-500);text-align:start;
  padding:11px 14px;border-bottom:1px solid var(--slate-200);white-space:nowrap;
}
.tbl tbody td{padding:13px 14px;font-size:13.5px;color:var(--slate-700);border-bottom:1px solid var(--slate-100);}
.tbl tbody tr{transition:background .18s;}
.tbl tbody tr:hover{background:var(--sky-50);}
.tbl tbody tr:last-child td{border-bottom:0;}

/* -------------------------------------------------------------
   20) احترام تقليل الحركة
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .aurora::before,.aurora::after,.marquee-track,.float-y{animation:none !important;}
  .tilt,.magnetic{transform:none !important;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ============================================================
   أقسام قابلة للطيّ بعنصر <details> — تُستعمل لإخفاء التفاصيل
   الثانوية عن المتعلّم دون حذفها.
   ============================================================ */
.acc-native > summary { list-style: none; }
.acc-native > summary::-webkit-details-marker { display: none; }
.acc-native > summary:hover { background: var(--slate-50); }
.acc-native > summary .sm-chev { transition: transform .22s var(--ease-out); }
.acc-native[open] > summary .sm-chev { transform: rotate(180deg); }
.acc-native[open] > summary { border-bottom: 1px solid var(--slate-100); }