/* ==========================================================================
   Smart Teacher — الحركة والحالات الحية (المرحلة 4)
   شريط تقدّم علوي · انتقال بين الشاشات · هياكل تحميل · حالة خطأ
   ========================================================================== */

/* ---------- شريط تقدّم علوي عند التنقل ---------- */
.stm-nav-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 999;
  background: transparent;
  pointer-events: none;
}
.stm-nav-progress > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #7C5CFF, #38D9FF, #45E0A8);
  box-shadow: 0 0 12px rgba(56, 217, 255, .75);
  transition: width 260ms ease-out, opacity 240ms ease;
}

/* ---------- انتقال دخول الشاشة ---------- */
.stm-js .st-mobile-shell .stm-main {
  animation: stm-page-in 300ms cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes stm-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* الخروج: تلاشٍ سريع قبل تحميل الشاشة التالية */
.st-mobile-shell.is-leaving .stm-main {
  opacity: .35;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

/* ---------- هياكل التحميل ---------- */
.stm-sk {
  border-radius: var(--stm-r-sm);
  background: linear-gradient(100deg,
      rgba(255,255,255,.05) 24%,
      rgba(255,255,255,.13) 48%,
      rgba(255,255,255,.05) 72%);
  background-size: 220% 100%;
  animation: stm-shimmer 1.4s linear infinite;
}
.stm-sk--line   { height: 13px; margin-block-end: 9px; }
.stm-sk--line.w70 { width: 70%; }
.stm-sk--line.w45 { width: 45%; }
.stm-sk--title  { height: 20px; width: 58%; margin-block-end: 14px; }
.stm-sk--thumb  { width: 74px; height: 74px; border-radius: 18px; flex: none; }
.stm-sk--btn    { height: 52px; border-radius: var(--stm-btn-r); margin-block-start: 14px; }

.stm-sk-card {
  padding: var(--stm-s5);
  border-radius: var(--stm-r-card);
  border: 1px solid var(--stm-border);
  background: var(--stm-glass);
  margin-block-end: var(--stm-s4);
}
.stm-sk-card__row { display: flex; gap: var(--stm-s3); align-items: center; }
.stm-sk-card__body { flex: 1; min-width: 0; }

/* يختفي فور وصول المحتوى */
.stm-sk-wrap[hidden] { display: none !important; }

/* ---------- حالة خطأ موحّدة مع إعادة محاولة ---------- */
.stm-err {
  display: grid;
  place-items: center;
  gap: var(--stm-s3);
  text-align: center;
  padding: var(--stm-s6) var(--stm-s5);
  border-radius: var(--stm-r-card);
  border: 1px solid rgba(255, 92, 124, .38);
  background: rgba(255, 92, 124, .07);
}
.stm-err__title { margin: 0; font-weight: 900; color: var(--stm-error); }
.stm-err__text  { margin: 0; font-size: var(--stm-fs-caption); color: var(--stm-text-secondary); max-width: 34ch; line-height: 1.7; }

/* ---------- تنبيه انقطاع الشبكة ---------- */
.stm-offline {
  position: fixed;
  inset-inline: var(--stm-s4);
  inset-block-start: calc(var(--stm-safe-top) + var(--stm-s3));
  z-index: 998;
  display: flex;
  align-items: center;
  gap: var(--stm-s2);
  padding: 10px var(--stm-s4);
  border-radius: var(--stm-r-pill);
  background: rgba(255, 201, 77, .95);
  color: #1B1405;
  font-size: var(--stm-fs-caption);
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .40);
  animation: stm-page-in 240ms ease both;
}
.stm-offline.is-back { background: rgba(69, 224, 168, .95); }

@media (prefers-reduced-motion: reduce) {
  .stm-js .st-mobile-shell .stm-main,
  .stm-offline { animation: none; }
  .st-mobile-shell.is-leaving .stm-main { transition: none; opacity: 1; transform: none; }
  .stm-sk { animation: none; background: rgba(255,255,255,.07); }
  .stm-nav-progress > i { transition: none; }
}