/* ==========================================================================
   Smart Teacher — الترويسة والحالات الموحّدة (المرحلة 2)
   يُحمَّل بعد buttons.css. لا يعدّل أي قالب — يوحّد ما هو قائم.
   ========================================================================== */

/* ---------- ترويسة واحدة بثلاث صور ---------- */
.stm-header {
  background: linear-gradient(180deg, rgba(5, 8, 23, .96) 0%, rgba(5, 8, 23, .78) 58%, transparent 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-block-end: 1px solid transparent;
  transition: border-color 240ms ease, background 240ms ease;
}
/* عند التمرير: حد رفيع يفصل الترويسة عن المحتوى */
.st-mobile-shell.is-scrolled .stm-header {
  border-block-end-color: rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(5, 8, 23, .99), rgba(5, 8, 23, .94));
}

.stm-header__title {
  font-size: clamp(17px, 4.8vw, 20px);
  letter-spacing: -.2px;
}

/* الصورة الثانية: ترويسة مركّزة (المباراة، القرعة) — بلا أفاتار */
.stm-header--focus .stm-header__avatar { display: none; }

/* ---------- حالة التحميل الموحّدة ---------- */
.stm-state {
  display: grid;
  place-items: center;
  gap: var(--stm-s3);
  text-align: center;
  padding: var(--stm-s7) var(--stm-s5);
  border-radius: var(--stm-r-card);
  border: 1px solid var(--stm-border);
  background: var(--stm-glass);
  backdrop-filter: blur(var(--stm-blur));
  -webkit-backdrop-filter: blur(var(--stm-blur));
}
.stm-state__title { margin: 0; font-weight: 900; font-size: var(--stm-fs-card); }
.stm-state__text { margin: 0; font-size: var(--stm-fs-caption); color: var(--stm-text-secondary); line-height: 1.7; max-width: 34ch; }

.stm-state--error { border-color: rgba(255, 92, 124, .38); background: rgba(255, 92, 124, .07); }
.stm-state--error .stm-state__title { color: var(--stm-error); }

.stm-state--empty .stm-state__title { color: var(--stm-text-secondary); }

/* دوّار موحّد */
.stm-spin {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .10);
  border-top-color: var(--stm-purple);
  border-inline-start-color: var(--stm-cyan);
  animation: stm-spin .9s linear infinite;
}

/* توحيد الحالات الفارغة القائمة على الشكل الجديد */
.stm-empty {
  display: grid;
  place-items: center;
  gap: var(--stm-s3);
  text-align: center;
  padding: var(--stm-s7) var(--stm-s5);
}
.stm-empty p { margin: 0; max-width: 34ch; line-height: 1.8; }

/* ---------- هيكل تحميل موحّد ---------- */
.stm-skeleton { display: grid; gap: var(--stm-s3); }
.stm-skeleton__card {
  height: 96px;
  border-radius: var(--stm-r-card);
  background: linear-gradient(100deg,
      rgba(255,255,255,.05) 24%,
      rgba(255,255,255,.12) 48%,
      rgba(255,255,255,.05) 72%);
  background-size: 220% 100%;
  animation: stm-shimmer 1.5s linear infinite;
}

/* ---------- عنوان قسم موحّد ---------- */
.stm-section {
  display: flex;
  align-items: center;
  gap: var(--stm-s3);
  margin: var(--stm-s6) 0 var(--stm-s3);
}
.stm-section:first-child { margin-block-start: 0; }
.stm-section__title { margin: 0; font-size: var(--stm-fs-card); font-weight: 900; }
.stm-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.12), transparent);
}

/* توحيد عناوين البطاقات القائمة على نفس الوزن */
.stm-card__title,
.stm-section-head h2 { font-size: var(--stm-fs-card); font-weight: 900; letter-spacing: -.1px; }

/* ---------- شريط رسائل موحّد (نجاح/خطأ) ---------- */
.stm-toast {
  border-radius: var(--stm-r-card);
  border: 1px solid var(--stm-border-highlight);
  background: rgba(20, 25, 65, .97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  animation: stm-toast-in 280ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes stm-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stm-skeleton__card, .stm-spin { animation: none; }
  .stm-toast { animation: none; }
}