/**
 * ========================================
 * Al-Aref Design System v3.0 — منصة العارف / Gen-Z
 * ========================================
 * Bold, high-contrast Arabic EdTech for a Gen-Z audience
 * 
 * Philosophy:
 * - Warm, paper-like backgrounds (no harsh whites)
 * - Soft, diffused shadows for floating elements
 * - Generous whitespace for breathing room
 * - Rounded, friendly shapes
 * - Beautiful Arabic typography
 * ========================================
 */

/* ==================== CSS Variables - The "Soft & Creamy" Palette ==================== */
:root {
  /* ====== BACKGROUND COLORS - The "Warm Paper" Feel ====== */
  --bg-cream: var(--tc-bg, #F6F4FF);
  --bg-cream-soft: #FBFAFF;
  --bg-cream-warm: #EFEBFF;
  --bg-surface: var(--tc-surface, #FFFFFF);
  --bg-surface-hover: #FBFAFF;
  
  /* ====== PRIMARY BRAND - Maps to tenant primary ====== */
  --primary-50: color-mix(in srgb, var(--tc-primary, #7C5CFF) 8%, transparent);
  --primary-100: color-mix(in srgb, var(--tc-primary, #7C5CFF) 15%, transparent);
  --primary-200: color-mix(in srgb, var(--tc-primary, #7C5CFF) 30%, transparent);
  --primary-300: color-mix(in srgb, var(--tc-primary, #7C5CFF) 50%, transparent);
  --primary-400: color-mix(in srgb, var(--tc-primary, #7C5CFF) 75%, transparent);
  --primary-500: var(--tc-primary, #7C5CFF);
  --primary-600: color-mix(in srgb, var(--tc-primary, #7C5CFF) 85%, black);
  --primary-700: color-mix(in srgb, var(--tc-primary, #7C5CFF) 70%, black);
  --primary-800: color-mix(in srgb, var(--tc-primary, #7C5CFF) 55%, black);
  --primary-900: color-mix(in srgb, var(--tc-primary, #7C5CFF) 40%, black);

  /* ====== ACCENT - Maps to tenant accent ====== */
  --accent-50: color-mix(in srgb, var(--tc-accent, #FF5CA8) 8%, transparent);
  --accent-100: color-mix(in srgb, var(--tc-accent, #FF5CA8) 15%, transparent);
  --accent-200: color-mix(in srgb, var(--tc-accent, #FF5CA8) 30%, transparent);
  --accent-300: color-mix(in srgb, var(--tc-accent, #FF5CA8) 50%, transparent);
  --accent-400: color-mix(in srgb, var(--tc-accent, #FF5CA8) 75%, transparent);
  --accent-500: var(--tc-accent, #FF5CA8);
  --accent-600: color-mix(in srgb, var(--tc-accent, #FF5CA8) 85%, black);
  --accent-700: color-mix(in srgb, var(--tc-accent, #FF5CA8) 70%, black);

  /* ====== TEXT COLORS - Maps to tenant text colors ====== */
  --text-heading: var(--tc-text, #150F3D);
  --text-body: var(--tc-text-secondary, #5A5384);
  --text-muted: var(--tc-text-secondary, #5A5384);
  --text-placeholder: #9C95C4;
  --text-inverse: #FFFFFF;

  /* ====== STATUS COLORS - Soft Variants ====== */
  --success: #10B981;
  --success-soft: rgba(16, 185, 129, 0.1);
  --warning: #F59E0B;
  --warning-soft: rgba(245, 158, 11, 0.1);
  --error: #EF4444;
  --error-soft: rgba(239, 68, 68, 0.1);
  --info: #3B82F6;
  --info-soft: rgba(59, 130, 246, 0.1);

  /* ====== TYPOGRAPHY - Beautiful Arabic ====== */
  --font-family: var(--tc-font-body, 'Cairo'), 'Almarai', 'Tajawal', sans-serif;
  --font-family-heading: var(--tc-font-heading, 'Rubik'), 'Almarai', sans-serif;
  
  /* Font Sizes - Harmonious Scale */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */

  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights - Comfortable Reading */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-loose: 2;

  /* ====== SPACING - Generous Whitespace ====== */
  --space-1: 0.25rem;      /* 4px */
  --space-2: 0.5rem;       /* 8px */
  --space-3: 0.75rem;      /* 12px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-8: 2rem;         /* 32px */
  --space-10: 2.5rem;      /* 40px */
  --space-12: 3rem;        /* 48px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */

  /* ====== BORDER RADIUS - Friendly Roundness ====== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* ====== SHADOWS - Soft Elevation (Floating Effect) ====== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 
               0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 
               0 2px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08), 
               0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.10), 
               0 8px 16px rgba(0, 0, 0, 0.05);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.12),
                0 12px 24px rgba(0, 0, 0, 0.06);
  
  /* Colored Shadows */
  --shadow-primary: 0 8px 24px color-mix(in srgb, var(--tc-primary, #7C5CFF) 25%, transparent);
  --shadow-accent: 0 8px 24px color-mix(in srgb, var(--tc-accent, #FF5CA8) 25%, transparent);

  /* ====== BORDERS ====== */
  --border-light: var(--tc-border, #EFEBFF);
  --border-default: var(--tc-border, #E6E0FF);
  --border-dark: #CFC5FF;

  /* ====== TRANSITIONS - Smooth & Natural ====== */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-normal: 250ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  /* ====== Z-INDEX Scale ====== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* ==================== BASE STYLES ==================== */
html {
  direction: rtl;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background-color: var(--bg-cream);
}

/* Dark theme body background */
[data-theme='dark'] body,
body[data-theme='dark'] {
  background-color: var(--tc-bg) !important;
  color: var(--tc-text) !important;
}

/* Headings - Beautiful Arabic Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-bold);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* Paragraph styling */
p {
  color: var(--text-body);
  line-height: var(--leading-relaxed);
}

/* Links */
a {
  color: var(--primary-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-700);
}

/* Selection */
::selection {
  background: var(--primary-200);
  color: var(--primary-900);
}

/* ==================== COMPONENT STYLES ==================== */

/* ====== BUTTONS - Pill-shaped & Soft ====== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1;
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
  min-height: 48px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: var(--text-inverse);
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--tc-primary, #7C5CFF) 35%, transparent);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-heading);
  border: 2px solid var(--border-default);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: var(--bg-cream-warm);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

.btn-accent {
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  color: var(--text-inverse);
  box-shadow: var(--shadow-accent);
}

.btn-accent:hover {
  background: linear-gradient(135deg, var(--accent-600), var(--accent-700));
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--tc-accent, #FF5CA8) 35%, transparent);
}

.btn-ghost {
  background: transparent;
  color: var(--primary-600);
}

.btn-ghost:hover {
  background: var(--primary-50);
}

/* Button Sizes */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  min-height: 36px;
  border-radius: var(--radius-lg);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
  min-height: 56px;
  border-radius: var(--radius-2xl);
}

/* ====== CARDS - Floating on Cream Background ====== */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.card-interactive:hover {
  border-color: var(--primary-200);
}

.card-flat {
  box-shadow: none;
  border: 1px solid var(--border-default);
}

.card-flat:hover {
  box-shadow: var(--shadow-md);
  transform: none;
}

/* ====== INPUTS - Soft & Rounded ====== */
.input {
  width: 100%;
  padding: var(--space-4);
  font-family: var(--font-family);
  font-size: var(--text-base);
  color: var(--text-heading);
  background: var(--bg-surface);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}

.input::placeholder {
  color: var(--text-placeholder);
}

.input:hover {
  border-color: var(--border-dark);
}

.input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px var(--primary-50);
}

.input-error {
  border-color: var(--error);
}

.input-error:focus {
  box-shadow: 0 0 0 4px var(--error-soft);
}

/* ====== BADGES - Soft Pills ====== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
}

.badge-primary {
  background: var(--primary-100);
  color: var(--primary-700);
}

.badge-success {
  background: var(--success-soft);
  color: var(--success);
}

.badge-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-error {
  background: var(--error-soft);
  color: var(--error);
}

/* ====== SECTION BACKGROUNDS ====== */
.bg-cream { background-color: var(--bg-cream); }
.bg-cream-warm { background-color: var(--bg-cream-warm); }
.bg-surface { background-color: var(--bg-surface); }

.bg-gradient-soft {
  background: linear-gradient(180deg, var(--bg-cream) 0%, var(--bg-cream-warm) 100%);
}

.bg-gradient-hero {
  background: linear-gradient(135deg, var(--bg-cream) 0%, var(--primary-50) 50%, var(--bg-cream-warm) 100%);
}

/* ==================== UTILITY CLASSES ==================== */

/* Text Colors */
.text-heading { color: var(--text-heading); }
.text-body { color: var(--text-body); }
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--primary-600); }
.text-accent { color: var(--accent-500); }

/* Shadows */
.shadow-soft { box-shadow: var(--shadow-md); }
.shadow-float { box-shadow: var(--shadow-lg); }
.shadow-elevated { box-shadow: var(--shadow-xl); }

/* Spacing helpers */
.section-padding {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.container-padding {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* ==================== ANIMATIONS ==================== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-soft { animation: pulse-soft 3s ease-in-out infinite; }
.animate-fade-in { animation: fade-in 0.3s ease-out; }
.animate-slide-up { animation: slide-up 0.4s ease-out; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  :root {
    --text-4xl: 2rem;
    --text-3xl: 1.5rem;
    --text-2xl: 1.25rem;
    --space-16: 3rem;
    --space-20: 4rem;
  }
  
  .section-padding {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}

/* ==================== LINE CLAMP ==================== */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==================== SCROLLBAR ==================== */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Beautiful Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-cream-warm);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-300);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-400);
}

/* ============================================================================
   منصة العارف — Gen-Z layer
   ----------------------------------------------------------------------------
   Opt-in utilities layered on top of the token system above. Nothing here
   restyles existing markup by itself; add the class to use it. Every colour
   resolves through --tc-* so a tenant override recolours the whole language.
   ========================================================================== */

:root {
  --tc-lime: var(--tc-lime, #C8F135);
  --tc-cyan: var(--tc-cyan, #22D3EE);
  --grad-brand: linear-gradient(135deg, var(--tc-primary, #7C5CFF) 0%, var(--tc-accent, #FF5CA8) 100%);
  --grad-hype: linear-gradient(120deg, var(--tc-primary, #7C5CFF) 0%, var(--tc-cyan, #22D3EE) 45%, var(--tc-lime, #C8F135) 100%);
  --shadow-sticker: 4px 4px 0 var(--tc-text, #150F3D);
  --shadow-sticker-lg: 7px 7px 0 var(--tc-text, #150F3D);
}

/* ---------- Gradient text ---------- */
.text-gradient,
.gz-gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gz-gradient-text--hype {
  background: var(--grad-hype);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gz-gradient-pan 8s ease infinite;
}

@keyframes gz-gradient-pan {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- Sticker surfaces: hard offset shadow, solid border ---------- */
.gz-card {
  background: var(--bg-surface);
  border: 2px solid var(--tc-text, #150F3D);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sticker);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.gz-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-sticker-lg);
}

/* RTL: the offset should fall to the reading-start side. */
[dir="rtl"] .gz-card { box-shadow: -4px 4px 0 var(--tc-text, #150F3D); }
[dir="rtl"] .gz-card:hover {
  transform: translate(2px, -2px);
  box-shadow: -7px 7px 0 var(--tc-text, #150F3D);
}

/* ---------- Buttons ---------- */
.gz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.85rem 1.9rem;
  border-radius: var(--radius-full);
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: var(--text-base);
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.gz-btn:active { transform: translateY(1px) scale(0.98); }

.gz-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc-primary, #7C5CFF) 35%, transparent);
}

.gz-btn--primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-primary);
}

.gz-btn--primary:hover { filter: brightness(1.07); box-shadow: var(--shadow-xl); }

.gz-btn--lime {
  background: var(--tc-lime, #C8F135);
  color: var(--tc-text, #150F3D);
  border-color: var(--tc-text, #150F3D);
  box-shadow: var(--shadow-sticker);
}

.gz-btn--ghost {
  background: transparent;
  color: var(--tc-primary, #7C5CFF);
  border-color: currentColor;
}

.gz-btn--ghost:hover {
  background: color-mix(in srgb, var(--tc-primary, #7C5CFF) 10%, transparent);
}

/* ---------- Pills / badges ---------- */
.gz-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-sm);
  background: color-mix(in srgb, var(--tc-primary, #7C5CFF) 12%, transparent);
  color: var(--tc-primary, #7C5CFF);
}

.gz-pill--lime {
  background: color-mix(in srgb, var(--tc-lime, #C8F135) 30%, transparent);
  color: var(--tc-text, #150F3D);
}

.gz-pill--accent {
  background: color-mix(in srgb, var(--tc-accent, #FF5CA8) 14%, transparent);
  color: var(--tc-accent, #FF5CA8);
}

/* ---------- Highlighter underline (marker pen) ---------- */
.gz-marker {
  background-image: linear-gradient(
    transparent 58%,
    color-mix(in srgb, var(--tc-lime, #C8F135) 65%, transparent) 58%
  );
  background-repeat: no-repeat;
  padding-inline: 0.15em;
}

/* ---------- Ambient blobs for hero/section backgrounds ---------- */
.gz-blob {
  position: absolute;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  filter: blur(48px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  animation: gz-blob-drift 18s ease-in-out infinite;
}

.gz-blob--primary { background: var(--tc-primary, #7C5CFF); }
.gz-blob--accent  { background: var(--tc-accent, #FF5CA8); animation-delay: -6s; }
.gz-blob--lime    { background: var(--tc-lime, #C8F135); animation-delay: -12s; }

@keyframes gz-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(22px, -18px) scale(1.09); }
  66%      { transform: translate(-16px, 14px) scale(0.94); }
}

/* ---------- Scrolling marquee strip ---------- */
.gz-marquee {
  overflow: hidden;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 800;
}

.gz-marquee__track {
  display: inline-flex;
  gap: 2.5rem;
  white-space: nowrap;
  padding-block: 0.75rem;
  animation: gz-marquee 22s linear infinite;
}

@keyframes gz-marquee {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .gz-blob,
  .gz-marquee__track,
  .gz-gradient-text--hype {
    animation: none !important;
  }
  .gz-card,
  .gz-card:hover,
  .gz-btn:active {
    transform: none;
  }
}

/* Surface language derived from the tenant palette. These were declared inside
   base.html's <style> block next to the tenant colours, but unlike those they
   are identical for every tenant — so they belong in the stylesheet, where
   they are cached instead of re-sent with every page. */
:root {
  --tc-gradient: linear-gradient(135deg, var(--tc-primary) 0%, var(--tc-accent) 100%);
  --tc-gradient-hype: linear-gradient(120deg, var(--tc-primary) 0%, var(--tc-cyan) 45%, var(--tc-lime) 100%);
  --tc-radius: 22px;
  --tc-radius-lg: 28px;
}


/* ============================================================================
   فيسليفت واجهة الطالب — طبقة التوكنز
   ============================================================================

   كل حاجة هنا تحت ``.theme-student``، واللي base.html بيحطه على الـbody لصفحات
   الطالب بس. صفحات ``/instructor/`` و``/management/`` و``/admin`` بتفضل على
   :root بالحرف — ده مش تنظيم، ده الشرط: الأدمن لوحده بيستعمل .btn و.card ٤٨
   مرة، وقوالب المدرس بتستعمل توكنز اللون ٢٤ مرة للقالب.

   **ليه بتتعاد كتابة السلّم المشتق كله؟** الخصائص المخصّصة بتتوارث كـ*قيمة
   محسوبة*. ``--primary-500: var(--tc-primary)`` بتتحسب عند :root بقيمة :root،
   والـbody بيرث الناتج — فتغيير ``--tc-primary`` على الـbody لوحده مابيعيدش
   حساب أي حاجة مشتقة منه. فلازم كل توكن متغيّر يتعاد تعريفه هنا صراحة.

   **الألوان مكتوبة صراحة مش من صف الـtenant.** الـtenant الحالي مثبّت
   ``primary_color = #7C5CFF``، فالافتراضي في القالب عمره ما بيشتغل. تغييره في
   الداتابيز كان هيغيّر الأدمن كمان. لو اتضاف tenant تاني عايز باليتة طالب
   خاصة بيه، الكتلة دي هي مكان الوصل.

   التشخيص اللي الأرقام دي جاية منه:
     * أقوى ظل في النظام كان 0.06 ألفا — شفاف تقريباً.
     * حد الكارت #EFEBFF على أرضية #F6F4FF = فرق 3٪.
     * الوردي كان معرّف ومش مستعمل: صفحة بلون واحد.
     * أقصى وزن عنوان 700، و Almarai 800 محمّلة عندنا ومش بتتنده.
   ========================================================================== */

.theme-student {
  /* ── الأساسي: بيوصل من :root (لون المنصة) — الفيسليفت مابيكتبش فوقه ────
     كان مكتوب هنا #6B3FFF بالحرف، فأي منصة عميل اختارت لون تاني كانت
     بتفضل بنفسجية. الافتراضي نفسه (#6B3FFF) بقى في Tenant.BRAND_PRIMARY.
     كل المشتقات لازم تتعاد هنا لأن الخاصية المخصّصة بتتوارث كقيمة محسوبة. */
  --primary-50:  color-mix(in srgb, var(--tc-primary, #6B3FFF) 8%,  transparent);
  --primary-100: color-mix(in srgb, var(--tc-primary, #6B3FFF) 15%, transparent);
  --primary-200: color-mix(in srgb, var(--tc-primary, #6B3FFF) 30%, transparent);
  --primary-300: color-mix(in srgb, var(--tc-primary, #6B3FFF) 50%, transparent);
  --primary-400: color-mix(in srgb, var(--tc-primary, #6B3FFF) 75%, transparent);
  --primary-500: var(--tc-primary, #6B3FFF);
  --primary-600: color-mix(in srgb, var(--tc-primary, #6B3FFF) 88%, black);
  --primary-700: color-mix(in srgb, var(--tc-primary, #6B3FFF) 76%, black);
  --primary-800: color-mix(in srgb, var(--tc-primary, #6B3FFF) 62%, black);
  --primary-900: color-mix(in srgb, var(--tc-primary, #6B3FFF) 48%, black);

  /* ── الحبر الغامق والوهج: مشتقين من الأساسي عشان الهيرو والنافبار
     يبقوا بلون المنصة مش بنفسجي العارف ──────────────────────────── */
  --tc-ink:   color-mix(in srgb, var(--tc-primary, #6B3FFF) 34%, #07051A);
  --tc-ink-2: color-mix(in srgb, var(--tc-primary, #6B3FFF) 48%, #0B0820);
  --tc-glow:  color-mix(in srgb, var(--tc-primary, #6B3FFF) 62%, white);

  /* ── الثانوي: عسلي، لون الفعل والإنجاز ─────────────────────────────
     بييجي من :root كـ--tc-honey (اللون الثانوي بتاع المنصة، أو عسلي
     العارف). محجوز للأزرار والتقدّم والشارات — لو اتحط في كل حتة بيقرا كلعبة. */
  --honey-50:  color-mix(in srgb, var(--tc-honey, #FFB020) 10%, white);
  --honey-100: color-mix(in srgb, var(--tc-honey, #FFB020) 18%, white);
  --honey-200: color-mix(in srgb, var(--tc-honey, #FFB020) 40%, white);
  --honey-400: color-mix(in srgb, var(--tc-honey, #FFB020) 80%, white);
  --honey-500: var(--tc-honey, #FFB020);
  --honey-600: color-mix(in srgb, var(--tc-honey, #FFB020) 85%, black);
  --honey-700: color-mix(in srgb, var(--tc-honey, #FFB020) 65%, black);
  --honey-ink: var(--tc-honey-ink, #3A2500);

  /* ── التمييز: وردي، من :root برضه ──────────────────────────────── */
  --accent-50:  color-mix(in srgb, var(--tc-accent, #FF4F9A) 8%,  transparent);
  --accent-100: color-mix(in srgb, var(--tc-accent, #FF4F9A) 15%, transparent);
  --accent-200: color-mix(in srgb, var(--tc-accent, #FF4F9A) 30%, transparent);
  --accent-300: color-mix(in srgb, var(--tc-accent, #FF4F9A) 50%, transparent);
  --accent-400: color-mix(in srgb, var(--tc-accent, #FF4F9A) 75%, transparent);
  --accent-500: var(--tc-accent, #FF4F9A);
  --accent-600: color-mix(in srgb, var(--tc-accent, #FF4F9A) 88%, black);
  --accent-700: color-mix(in srgb, var(--tc-accent, #FF4F9A) 74%, black);

  /* ── الحالات ─────────────────────────────────────────────────── */
  --success:      #12B76A;
  --success-soft: rgba(18, 183, 106, 0.12);
  --warning:      #F59300;
  --warning-soft: rgba(245, 147, 0, 0.12);
  --error:        #E5484D;
  --error-soft:   rgba(229, 72, 77, 0.12);

  /* ── الحبر والأرضية: من :root (المنصة)، والمشتقات بتتعاد هنا ─────── */
  --text-heading:      var(--tc-text, #14103A);
  --text-body:         var(--tc-text-secondary, #56507E);
  --text-muted:        color-mix(in srgb, var(--tc-text-secondary, #56507E) 70%, var(--tc-bg, #F4F1FF));
  --text-placeholder:  color-mix(in srgb, var(--tc-text-secondary, #56507E) 55%, var(--tc-bg, #F4F1FF));

  --bg-cream:       var(--tc-bg, #F4F1FF);
  --bg-cream-soft:  color-mix(in srgb, var(--tc-bg, #F4F1FF) 60%, white);
  --bg-cream-warm:  color-mix(in srgb, var(--tc-bg, #F4F1FF) 85%, var(--tc-primary, var(--tc-primary)));
  --bg-surface-hover: color-mix(in srgb, var(--tc-bg, #F4F1FF) 60%, white);

  /* الحد كان بفرق ٣٪ عن الأرضية، فالكروت ماكانتش بتقرا كأجسام. */
  --tc-border:      #E0D8FB;
  --border-light:   #E8E1FC;
  --border-default: #E0D8FB;
  --border-dark:    #C9BCF5;

  /* ── الظلال: ملوّنة ببنفسجي، مش سوداء ──────────────────────────
     ظل أسود على أرضية بنفسجية بيقرا كوسخ مش كعمق. والألفا اترفعت من
     0.04–0.12 لمدى بيبان فعلاً. */
  --shadow-xs:  0 1px 2px rgba(74, 33, 214, .05);
  --shadow-sm:  0 1px 2px rgba(74, 33, 214, .04), 0 4px 10px rgba(74, 33, 214, .07);
  --shadow-md:  0 2px 4px rgba(74, 33, 214, .04), 0 12px 28px rgba(74, 33, 214, .10);
  --shadow-lg:  0 4px 8px rgba(74, 33, 214, .06), 0 20px 44px rgba(74, 33, 214, .16);
  --shadow-xl:  0 8px 16px rgba(74, 33, 214, .08), 0 32px 64px rgba(74, 33, 214, .20);
  --shadow-2xl: 0 12px 24px rgba(74, 33, 214, .10), 0 44px 88px rgba(74, 33, 214, .24);
  --shadow-primary: 0 6px 18px rgba(107, 63, 255, .38);
  --shadow-accent:  0 6px 18px rgba(255, 79, 154, .34);
  --shadow-honey:   0 6px 18px rgba(255, 176, 32, .42);

  /* ── الخط ──────────────────────────────────────────────────────
     Almarai الأول للاتنين. الأسماء اللي كانت متحطة قبله مالهاش لازمة هنا:
     Rubik مالهاش حروف عربية أصلاً، فكل عنوان عربي كان بيستنى رحلة لجوجل
     بتفشل وبيقع على Almarai المحمّلة عندنا من الأول. وAlmarai 800 موجودة
     في static/fonts ومكانتش بتتنده. */
  --font-family:         'Almarai', 'Cairo', 'Tajawal', system-ui, sans-serif;
  --font-family-heading: 'Almarai', 'Cairo', system-ui, sans-serif;
  --font-extrabold: 800;

  /* ودول كمان، لأن الـbody بيقرا منهم مباشرة في السطر الـinline بتاعه
     (``style="font-family: var(--tc-font-body)"``). تعريف --font-family
     لوحده مكانش بيوصل للصفحة خالص. */
  --tc-font-body:    'Almarai', 'Cairo', 'Tajawal', system-ui, sans-serif;
  --tc-font-heading: 'Almarai', 'Cairo', system-ui, sans-serif;

  /* ── التدرّجات ─────────────────────────────────────────────────── */
  --grad-brand: linear-gradient(135deg, var(--tc-primary), #4A21D6);
  --grad-honey: linear-gradient(135deg, var(--tc-honey), #F59300);
  --grad-progress: linear-gradient(90deg, var(--tc-primary), var(--tc-honey));
  --tc-gradient: linear-gradient(135deg, var(--tc-primary), #4A21D6);
}

/* الأرضية والحبر على الـbody نفسه: الوسم بيحط لونه inline من --tc-*،
   واللي فوق بيعيد تعريفها فالسطر الـinline بياخد الجديد من غير ما يتلمس. */
.theme-student {
  background-color: var(--tc-bg);
  color: var(--text-body);
}


/* ============================================================================
   فيسليفت واجهة الطالب — طبقة المكوّنات
   ============================================================================
   كله تحت ``.theme-student`` زي طبقة التوكنز، وللسبب نفسه: الأدمن بيستعمل
   .btn و.card ٤٨ مرة، فأي قاعدة من غير النطاق بتوصله.

   القواعد هنا بتغيّر **الشكل** بس: زوايا، ظلال، أوزان، ألوان، وحركة الهوفر.
   ولا قاعدة واحدة بتلمس المسافات اللي بتحرّك التخطيط (padding/margin/عرض)،
   لأن ده هيزحزح العناصر — والشرط إن الهيكل زي ما هو.
   ========================================================================== */

/* ── العناوين ─────────────────────────────────────────────────────
   ٨٢ عنوان في قوالب الطالب. الوزن ٨٠٠ موجود في static/fonts من زمان
   ومكانش بيتنده، والتقليل البسيط في تباعد الحروف بيخلي العربي التقيل
   يقرا مضغوط بدل ما يبان متفكك. */
.theme-student h1,
.theme-student h2,
.theme-student h3 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-extrabold);
  letter-spacing: -0.02em;
  color: var(--text-heading);
}
.theme-student h1 { letter-spacing: -0.03em; }

/* ── الأزرار ──────────────────────────────────────────────────────
   الزاوية كانت ٢٠px على ارتفاع ٤٨px: لا ناعمة ولا حادة. الـpill بيحسم
   الشكل، وهو كمان أكتر زاوية مستعملة في منصات السوق دي. */
.theme-student .btn {
  border-radius: var(--radius-full);
  font-family: var(--font-family-heading);
  font-weight: var(--font-extrabold);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              filter var(--transition-fast);
}
.theme-student .btn:hover { transform: translateY(-2px); }
.theme-student .btn:active { transform: translateY(0); }

.theme-student .btn-primary {
  background: var(--grad-brand);
  box-shadow: var(--shadow-primary);
}
.theme-student .btn-primary:hover {
  box-shadow: 0 10px 26px rgba(107, 63, 255, .5);
}

.theme-student .btn-secondary {
  background: var(--bg-surface);
  color: var(--primary-700);
  border: 2px solid var(--border-default);
  box-shadow: var(--shadow-sm);
}
.theme-student .btn-secondary:hover { border-color: var(--primary-300); }

/* زرار الإنجاز. مالوش استعمال في القوالب دلوقتي — موجود عشان يتنده عليه
   في لحظات المكافأة (خلّصت الكورس، استلم شهادتك) من غير CSS جديد. */
.theme-student .btn-honey {
  background: var(--grad-honey);
  color: var(--honey-ink);
  box-shadow: var(--shadow-honey);
}
.theme-student .btn-honey:hover {
  box-shadow: 0 10px 26px rgba(255, 176, 32, .55);
}

/* ── الكروت ───────────────────────────────────────────────────────
   الظل بقى بيبان، والحد بقى بيفرق عن الأرضية. الرفعة على الهوفر هي اللي
   بتخلي الكارت يقرا كحاجة تتضغط. */
.theme-student .card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  transition: transform var(--transition-normal),
              box-shadow var(--transition-normal),
              border-color var(--transition-normal);
}

/* الرفعة على الكروت اللي بتتضغط بس. الكارت اللي مش رايح لحتة لما يتحرك
   بيوعد بحاجة مش موجودة. */
.theme-student a > .card:hover,
.theme-student .card-interactive:hover,
.theme-student a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-200);
}

/* ── الشارات ──────────────────────────────────────────────────────── */
.theme-student .badge { font-weight: var(--font-extrabold); }
.theme-student .badge-primary { background: var(--primary-100); color: var(--primary-700); }
.theme-student .badge-success { background: var(--success-soft); color: var(--success); }
.theme-student .badge-warning { background: var(--honey-100);   color: var(--honey-700); }
.theme-student .badge-honey   { background: var(--honey-100);   color: var(--honey-700); }

/* ── أشرطة التقدّم ────────────────────────────────────────────────
   بنفسجي → عسلي: الشريط بيمشي ناحية لون الإنجاز وهو بيقرب من التمام،
   فاللون نفسه بيقول «قربت» من غير أي نص. */
.theme-student progress::-webkit-progress-value,
.theme-student .progress-bar > span,
.theme-student .progress-fill,
.theme-student [class*="progress"] > [style*="width"] {
  background-image: var(--grad-progress);
}

/* ── الروابط ──────────────────────────────────────────────────────── */
.theme-student a:not(.btn):not(.card):hover { color: var(--primary-600); }

/* ── التركيز ──────────────────────────────────────────────────────
   طالب بيمشي بالكيبورد لازم يشوف هو فين. اللون بقى أغمق فالحلقة بقت
   أوضح على الأبيض. */
.theme-student :focus-visible {
  outline: 3px solid var(--primary-300);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* اللي مبرمج جهازه على «قلّل الحركة» مايتهزّش له حاجة. */
@media (prefers-reduced-motion: reduce) {
  .theme-student .btn:hover,
  .theme-student a > .card:hover,
  .theme-student .card-interactive:hover,
  .theme-student a.card:hover { transform: none; }
}


/* ============================================================================
   الصفحة الرئيسية الجديدة
   ============================================================================
   الفكرة اللي الملف ده كله ماشي عليها: القارئ لازم يعرف إنه دخل قسم جديد من
   غير ما يقرا عنوان. اللي كان موجود كان كل أقسامه أرضية بيضا وشبكة تلات
   أعمدة، فبيقرا كجدول بيانات طويل. هنا الأرضية بتتغيّر تحته: غامق، فاتح،
   مبيّض، عسلي — والتباين ده هو الفاصل.
   ========================================================================== */

.theme-student .shell {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ── ١. الهيرو — تبسيط جذري بطلب مباشر من العميل ───────────────────
   الشكل القديم (بادچات عايمة + صورة + توهّج خلفية) اتشال بالكامل.
   الهيرو دلوقتي مبني بـTailwind utilities مباشرة في home.html، مفيش
   كلاسات ``hxc__*`` تانية — القسم مجرد خلفية فاتحة، عنوان، سطر فرعي،
   وزرار واحد. لو حد احتاج الشكل القديم هو محفوظ في تاريخ الجيت
   (commit 22afe36) مش هنا. */

/* ── الأقسام ─────────────────────────────────────────────────────── */
.theme-student .band { padding-block: clamp(3.5rem, 8vw, 6rem); }
/* كانت ``var(--bg-cream-warm)`` (لافندر فاتح) — عائلة لون مختلفة عن باقي
   الصفحة الغامقة، وده بالظبط التناقض اللي اتطلب توحيده. ``var(--tc-ink)`` نفس
   لون قسم الأسئلة الشائعة اللي قبلها بالظبط، فالحد بينهم غير محسوس.
   ``.band--tint`` مستخدمة في home.html بس (اتأكدنا)، فالتعديل مأمون. */
.theme-student .band--tint { background: var(--tc-ink); }

/* الأسئلة الشائعة (``.sec``) بقت مباشرة قبل الفوتر بعد نقل القسم. حد
   ``.sec`` السفلي (لحد ٥rem) + حد ``.band`` العلوي (لحد ٦rem) بيتجمعوا
   في نفس المنطقة، وبما إن خلفية الاتنين نفس اللون الفاتح تقريبا
   (``--bg-cream-warm`` مقابل خلفية ``.sec`` الافتراضية) الفراغ بيبان
   فراغ واحد فاضي بلا داعي، مش مسافة تنفّس طبيعية. الشرط مقصور على
   ``.sec`` اللي جاي فورا قبل ``.band--tint`` بس (زي هنا بالظبط)، عشان
   ``.band`` نفسها مستخدمة في صفحات تانية من غير ما تتأثر. */
.theme-student .sec + .band--tint { padding-top: 1.5rem; }

.theme-student .band__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.theme-student .band__head--center { flex-direction: column; align-items: center; text-align: center; }
.theme-student .band__eyebrow {
  display: block; font-size: .78rem; font-weight: 800;
  letter-spacing: .12em; color: var(--primary-500); margin-bottom: .4rem;
}
.theme-student .band__title {
  margin: 0; font-family: var(--font-family-heading); font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.025em;
  color: var(--text-heading); text-wrap: balance;
}
.theme-student .band__more {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.2rem; border-radius: 999px;
  background: var(--primary-50); color: var(--primary-700);
  font-weight: 800; font-size: .9rem; text-decoration: none;
  transition: gap .2s, background-color .2s;
}
.theme-student .band__more:hover { gap: .75rem; background: var(--primary-100); }
.theme-student .band__more svg { width: 1rem; height: 1rem; transform: rotate(180deg); }

/* ── ٤. الخطوات — بقت شبكة بينتو بـTailwind utilities مباشرة في
   home.html (زي الهيرو والمدرسين)، مفيش كلاسات BEM هنا تانية. */

/* ── ٥. المدرسون — بقى قسم بعرض الشاشة كامل بـTailwind utilities مباشرة
   في home.html (زي الهيرو)، مفيش كلاسات BEM هنا تانية. */

/* ── ٦. شريط الدعوة ─────────────────────────────────────────────── */
/* كانت خلفية عسلي/برتقالي (``linear-gradient(...var(--tc-honey)...#FF8A3D)``) —
   عائلة لون مختلفة تماما عن باقي الصفحة (بنفسجي غامق)، وده بالظبط
   التباين الحاد اللي اتطلب توحيده. بقت تدرّج رأسي من ``var(--tc-ink-2)`` (نفس
   آخر لون في "انضم كمدرس" اللي قبلها) لـ``var(--tc-ink)`` (أغمق درجة في
   الصفحة، تمهيد لختامها). النصوص اتقلبت لفاتح فوق الغامق الجديد —
   ``.cta`` مش مستخدم في أي قالب تاني (اتأكدنا)، فالتعديل هنا مأمون. */
.theme-student .cta {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: linear-gradient(180deg, var(--tc-ink-2) 0%, var(--tc-ink) 100%);
  color: #fff;
}
/* كان دايرة ٣٤rem بحافة صلبة واضحة، وموضعها بيخليها تقطع ورا الزراير
   مباشرة — بتتقرا كخطأ في الرسم مش كعنصر تصميم. بقت توهّج: نفس اللون بس
   مبلور، فبتدّي عمق للشريط من غير ما يكون ليها حد يتلاحظ. */
.theme-student .cta__shape {
  position: absolute; pointer-events: none;
  width: 40rem; height: 40rem; border-radius: 50%;
  top: -20rem; inset-inline-end: -14rem;
  background: rgba(255,255,255,.07);
  filter: blur(80px);
}
.theme-student .cta__inner {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.5rem;
}
.theme-student .cta__title {
  margin: 0; font-family: var(--font-family-heading); font-weight: 800;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem); letter-spacing: -.025em; color: #fff;
}
.theme-student .cta__sub { margin: .4rem 0 0; font-size: 1rem; font-weight: 700; color: rgba(255,255,255,.75); }
.theme-student .cta__acts { display: flex; flex-wrap: wrap; gap: .7rem; }
/* ``.btn-outline`` نفسها مشتركة مع صفحات تانية كتير (لوحة التحكم،
   الواجبات...) فحدّها وخط لونها مصممين لخلفية فاتحة — على الخلفية
   الغامقة الجديدة هنا كانوا هيبقوا شبه مختفيين. الشرط ده مقصور على
   ``.cta`` بس، الكلاس الأساسي فضل زي ما هو لكل الاستخدامات التانية. */
.theme-student .cta .btn-outline { border-color: rgba(255,255,255,.4); color: #fff; }
.theme-student .cta .btn-outline:hover { border-color: var(--tc-honey); color: var(--tc-honey); }

/* ``btn-ink`` هو ``#2A1173`` والشريط نفسه ``var(--tc-ink-2)`` — الزرار الأساسي كان
   شبه مختفي جوّه خلفيته. الأساسي في كل الصفحة عسلي، فالشريط بقى يقول نفس
   الكلام. النطاق على ``.cta`` بس: ``btn-ink`` على خلفية فاتحة في صفحات
   تانية شغّال زي ما هو. */
.theme-student .cta .btn-ink { background: var(--grad-honey); color: var(--honey-ink); box-shadow: var(--shadow-honey); }
.theme-student .cta .btn-ink:hover { box-shadow: 0 16px 40px color-mix(in srgb, var(--tc-honey) 55%, transparent); }

/* الشكل المشترك للأزرار الأربعة (gold/glass/ink/outline). كان معرّف مرة واحدة
   جوّه كتلة الهيرو القديمة، فمسحها مسح شكل الأزرار كلها معاها — بما فيها
   أزرار شريط الدعوة اللي معندهاش دعوة بالهيرو خالص. القاعدة المشتركة رجعت
   هنا، مركزية بدل ما تتكرر جوّه كل قسم. */
.theme-student .btn-gold,
.theme-student .btn-glass,
.theme-student .btn-ink,
.theme-student .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 50px; padding: .85rem 1.9rem; border-radius: 999px;
  font-family: var(--font-family-heading); font-weight: 800; font-size: 1rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease,
              background-color .2s ease, border-color .2s ease;
}

.theme-student .btn-gold {
  background: var(--grad-honey); color: var(--honey-ink);
  box-shadow: var(--shadow-honey);
}
.theme-student .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 16px 40px color-mix(in srgb, var(--tc-honey) 55%, transparent); }
.theme-student .btn-gold svg { width: 1.15rem; height: 1.15rem; transform: scaleX(-1); }

.theme-student .btn-glass {
  background: var(--bg-surface); border-color: var(--border-default); color: var(--text-heading);
  box-shadow: var(--shadow-sm);
}
.theme-student .btn-glass:hover { border-color: var(--primary-400); background: var(--primary-50); transform: translateY(-3px); }

.theme-student .btn-ink {
  background: #2A1173; color: #fff; box-shadow: 0 10px 28px rgba(42,17,115,.32);
}
.theme-student .btn-ink:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(42,17,115,.45); }
.theme-student .btn-outline { background: transparent; border-color: rgba(42,26,0,.32); color: #2A1A00; }
.theme-student .btn-outline:hover { border-color: #2A1173; transform: translateY(-3px); }

/* ── ٧. الذيل ───────────────────────────────────────────────────── */
/* ``.foot``/``.foot__*`` كلهم مستخدمين في home.html بس (اتأكدنا)، فكل
   ألوان النص هنا اتقلبت لفاتح فوق خلفية ``.band--tint`` الغامقة الجديدة
   من غير أي خطر تأثير على صفحة تانية. */
.theme-student .foot {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.theme-student .foot__col--wide { grid-column: span 1; }
@media (min-width: 60rem) { .theme-student .foot__col--wide { grid-column: span 2; } }
.theme-student .foot__h {
  margin: 0 0 .8rem; font-family: var(--font-family-heading);
  font-weight: 800; font-size: 1rem; color: #fff;
}
.theme-student .foot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.theme-student .foot__list a { color: rgba(255,255,255,.7); text-decoration: none; font-size: .9rem; font-weight: 600; }
.theme-student .foot__list a:hover { color: var(--tc-honey); }

/* ============================================================================
   أهداف اللمس على الموبايل
   ============================================================================
   روابط الفوتر والروابط النصية المستقلة كانت ارتفاعها ١٤ بكسل — ده ارتفاع
   سطر النص وبس، من غير أي مساحة حواليه. إصبع بيغطي ٤٠-٥٠ بكسل، والروابط دي
   مرصوصة فوق بعض بفاصل نص سنتيمتر، فالدوسة على "الكورسات" بتفتح "المدرسين"
   بسهولة. معيار WCAG 2.5.8 حدّه الأدنى ٢٤ بكسل، وإرشادات أبل وجوجل ٤٤.

   ``pointer: coarse`` معناها الجهاز مالوش مؤشر دقيق — يعني لمس. على الديسكتوب
   بالماوس مفيش أي تغيير، والفوتر بيفضل مضغوط زي ما هو مرسوم.

   ``min-height`` مش ``padding``: الـpadding بيكبّر الصندوق المرسوم كمان
   وممكن يكسر التخطيط، بينما ``inline-flex`` + ``align-items: center``
   بيوسّع منطقة اللمس والنص فاضل في نصها. */
@media (pointer: coarse) {
  .theme-student footer a,
  .theme-student .foot__list a,
  .theme-student .foot__apps a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
.theme-student .foot__apps, .theme-student .foot__social { display: flex; flex-wrap: wrap; gap: .5rem; }
.theme-student .foot__app {
  padding: .6rem 1.1rem; border-radius: 12px;
  background: var(--tc-honey); color: var(--tc-honey-ink);
  font-size: .85rem; font-weight: 700; text-decoration: none;
}
.theme-student .foot__social a {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: .85rem; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.theme-student .foot__social a:hover { background: var(--tc-honey); color: var(--tc-honey-ink); }

@media (prefers-reduced-motion: reduce) {
  .theme-student .hx__mock, .theme-student .hx__pulse { animation: none; }
  .theme-student .btn-gold:hover, .theme-student .btn-glass:hover,
  .theme-student .btn-ink:hover, .theme-student .btn-outline:hover { transform: none; }
}


/* ============================================================================
   النافبار والفوتر + غلاف صفحة الكورسات
   ============================================================================
   النافبار فيه منطق شرطي كتير (تينانت، صلاحيات، سناتر)، فاتصمّم من الـCSS
   بالكامل: كل ألوانه بتقرا من ``--tc-nav-bg`` و``--tc-nav-text``، والفوتر من
   ``--tc-footer-bg``. إعادة تعريفهم جوّه النطاق بتقلبهم من غير ما يتلمس سطر
   markup واحد — ومن غير ما يتكسر أي شرط.
   ========================================================================== */

.theme-student {
  --tc-nav-bg: rgba(255,255,255,.82);
  --tc-nav-text: #14103A;
  --tc-footer-bg: #180C46;
}

/* ── النافبار ───────────────────────────────────────────────────── */
.theme-student nav.sticky {
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow: 0 1px 0 rgba(74,33,214,.04), 0 8px 28px rgba(74,33,214,.06);
}
.theme-student nav.sticky .flex.justify-between { min-height: 4.5rem; }

.theme-student .nav-link {
  position: relative;
  padding: .5rem .9rem;
  border-radius: 999px;
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: .93rem;
  transition: background-color .2s, color .2s;
}
.theme-student .nav-link:hover { background: var(--primary-50); color: var(--primary-700) !important; }
.theme-student .nav-link-active {
  background: var(--primary-100);
  color: var(--primary-700) !important;
}
/* شرطة عسلية تحت الصفحة الحالية — العلامة اللي بتقول انت فين */
.theme-student .nav-link-active::after {
  content: ""; position: absolute;
  inset-inline: 35%; bottom: -.15rem; height: 3px;
  border-radius: 3px; background: var(--honey-500);
}

/* زرار «خروج» / «دخول» في النافبار */
.theme-student nav.sticky a[class*="rounded-lg"] {
  border-radius: 999px !important;
  font-weight: 800;
  padding: .55rem 1.1rem !important;
  border-color: var(--border-default) !important;
  transition: border-color .2s, background-color .2s;
}
.theme-student nav.sticky a[class*="rounded-lg"]:hover {
  border-color: var(--primary-400) !important;
  background: var(--primary-50);
}

/* ── الفوتر ─────────────────────────────────────────────────────── */
.theme-student footer {
  position: relative;
  background-image:
    radial-gradient(80% 120% at 90% 0%, color-mix(in srgb, var(--tc-primary) 34%, transparent) 0%, transparent 60%),
    radial-gradient(60% 100% at 0% 100%, color-mix(in srgb, var(--tc-honey) 14%, transparent) 0%, transparent 65%);
}
/* خط عسلي رفيع فوق الفوتر: الفاصل بين الصفحة والذيل */
.theme-student footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--primary-500), var(--honey-500), var(--accent-500));
}
.theme-student footer h3,
.theme-student footer h4 {
  font-family: var(--font-family-heading);
  font-weight: 800;
  color: #fff;
}
.theme-student footer a { transition: color .2s, transform .2s; }
.theme-student footer a:hover { color: var(--honey-400) !important; }
.theme-student footer .rounded-lg {
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  transition: background-color .2s, transform .2s;
}
.theme-student footer .rounded-lg:hover {
  background: var(--honey-500) !important;
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .theme-student footer .rounded-lg:hover { transform: none; }
}


/* شبكة أمان: أي <svg> جوّه واجهة الطالب مقاسه محدود حتى لو كلاسه اتنسي.
   ده اللي كان ناقص لما الأيقونة البديلة فجّرت الشبكة أول مرة. */
.theme-student svg { max-width: 100%; flex: none; }
.theme-student :is(a, button, span, p, li, h1, h2, h3, h4) > svg { width: 1.25rem; height: 1.25rem; }



/* ── الأسئلة الشائعة + أغلفة الأقسام المنقولة ────────────────────────
   الكتلتين دول كانوا في ``<style>`` جوّه home.html القديمة، واتمسحوا معاها.
   الأكورديون شحن بغير ستايل وبغير حركة. رجعوا هنا عشان يبقوا في مكان واحد
   مع باقي النظام بدل ما يفضلوا مدفونين في قالب. */

.theme-student .sec { padding-block: clamp(3rem, 7vw, 5rem); }
/* أول قسم في الصفحة (بروفايل المدرس مثلا) لازم مساحة علوية أكبر —
   الكابسولة العايمة ``fixed`` (base.html) من غير padding تعويضي على
   مستوى الصفحة كله، والحد الأدنى العادي (3rem=48px) قريب من ارتفاعها. */
.theme-student .sec--first { padding-top: clamp(5rem, 7vw, 6.5rem); }
.theme-student .sec__inner { max-width: 78rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.theme-student .sec__head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.theme-student .sec__headings { display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.theme-student .sec__label {
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; color: var(--primary-500);
}
.theme-student .sec__rail { display: flex; flex-direction: column; gap: .9rem; max-width: 52rem; margin-inline: auto; }

.theme-student .faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s, box-shadow .25s;
}
.theme-student .faq-item:hover { border-color: var(--primary-200); box-shadow: var(--shadow-md); }
.theme-student .faq-item.active { border-color: var(--primary-300); box-shadow: var(--shadow-lg); }

.theme-student .faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: none; border: none; cursor: pointer; text-align: start;
  font-family: var(--font-family-heading); font-weight: 800; font-size: 1rem;
  color: var(--text-heading);
  transition: background-color .2s;
}
.theme-student .faq-question:hover { background: var(--primary-50); }

.theme-student .faq-icon {
  flex: none;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-100); color: var(--primary-700);
  font-size: 1.2rem; line-height: 1;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), background-color .25s, color .25s;
}
.theme-student .faq-item.active .faq-icon {
  transform: rotate(45deg);
  background: var(--honey-500); color: var(--honey-ink);
}

.theme-student .faq-answer {
  max-height: 0; overflow: hidden;
  padding-inline: 1.4rem;
  font-size: .92rem; line-height: 1.9; color: var(--text-muted);
  transition: max-height .3s ease, padding-bottom .3s ease;
}
.theme-student .faq-item.active .faq-answer { max-height: 34rem; padding-bottom: 1.4rem; }

/* كلاسات كانت مستعملة من غير قاعدة */
.theme-student .foot__col { display: flex; flex-direction: column; }

.theme-student .sec__title {
  margin: 0;
  font-family: var(--font-family-heading); font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -.025em;
  color: var(--text-heading); text-wrap: balance;
}
/* ``sheet`` هو غلاف عنصر السؤال — كان معرّف في القالب القديم. */
.theme-student .sheet {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 20px;
}

/* ── سكرول-ريفيل "طريق واحد" — @keyframes مش transition (base.html) ──
   القاعدة الحاكمة: الإخفاء مايبدأش أبدا غير خلف ``.js-enabled`` (مضاف
   متزامن على الـ``<body>`` نفسه أول حاجة جوّه الوسم، شايفين base.html).
   مفيش ``.js-enabled`` = مفيش أي ``opacity:0`` خالص، في أي مكان — لو
   الجافاسكريبت اتمنع أو فشل يحمّل، كل حاجة ظاهرة. العنصر بمجرد ما ياخد
   ``.is-revealed`` (من الـobserver في base.html) بيفضل ظاهر للأبد —
   مفيش أي قاعدة هنا بترجّعه مختفي تاني.

   باج حقيقي اتصحّح هنا: السلكتور كان مكتوب ``body.js-enabled
   .theme-student ...`` (بمسافة) — يعني "عنصر بكلاس .theme-student
   *جوّه* عنصر body.js-enabled"، combinator حفيد. بس ``.theme-student``
   نفسها كلاس على الـ``<body>`` نفسه، مش عنصر متداخل جواه — والكلاسين
   (``.theme-student`` و``.js-enabled``) على نفس الوسم بالظبط. السلكتور
   ده عمره ما بيتطابق مع حاجة، فقاعدة الإخفاء عمرها ما اتفعّلت أصلا —
   العناصر كانت ظاهرة من الأول، ومفيش حاجة تتحرك منها. الجافاسكريبت
   والـobserver كانوا شغّالين تمام طول الوقت؛ المشكلة كانت في الـCSS بس.
   الصح compound selector من غير مسافة: ``.theme-student.js-enabled``. */

   ليه ``animation`` مش ``transition`` هالمرة: ``transition`` بتحتاج
   ``transition`` property نشط على العنصر وقت التغيير — على الكروت، ده
   كان معناه إما نضيف transition خاصة بينا (فتتعارض مع توقيت الـhover
   بتاعة الكارت نفسه) أو نعتمد على transition الكارت (فيبقى الظهور
   مربوط بتوقيت حاجة تانية). ``@keyframes`` + ``animation ... forwards``
   مستقلة تماما عن أي ``transition`` — الظهور بيشتغل بمحرك تاني خالص،
   وبمجرد ما يخلّص (``forwards`` بيثبّت الحالة النهائية) الكارت يرجع
   بيستخدم ``transition-all duration-300`` بتاعته هو للـhover من غير أي
   تعارض ممكن، لأن مفيش transition اتلمس أصلا في مرحلة الظهور.

   ``[data-reveal]``: نص — انزلاق ١٦px، ٧٠٠ms.
   ``[data-reveal-block]``: قسم/شبكة (``<section>``، ``<div class="grid">``)
   — بيتحرك هو نفسه، انزلاق ٤٠px. الأقسام الظاهرة أصلا وقت التحميل (زي
   الهيرو) بتاخد ``.is-revealed`` فورا من غير حركة — شايفين شرط "ظاهر
   أصلا" في الـobserver.
   ``[data-reveal-card]``: كارت جوّه ``[data-reveal-block]``، نفس أنيميشن
   الحاوية (٤٠px) مع ``animation-delay`` تلقائي بالـ``:nth-child``.

   قاعدة أمان محفورة بالدم — لسه سارية بالحرف، الانتقال لـ``animation``
   مايغيّرش فيها حاجة: ولا عنصر عليه ``backdrop-blur``/``backdrop-filter``
   ياخد ``data-reveal``/``data-reveal-block`` خالص — الباج المكتشف
   (كاروسيلات الرئيسية قبل كده) كان عن حالة ``opacity:0`` الساكنة قبل أي
   حركة أصلا، مش عن الـtransition بالذات، فمحتاج نفس الحذر هنا برضه.
   محروسة دلوقتي باختبار تلقائي — core.tests_student_ui.NoBackdropBlurRevealTests. */
@keyframes scrollFadeUpText {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scrollFadeUpBlock {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.theme-student.js-enabled [data-reveal] { opacity: 0; will-change: opacity, transform; }
.theme-student.js-enabled [data-reveal].is-revealed {
  animation: scrollFadeUpText 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.theme-student.js-enabled [data-reveal-block] { opacity: 0; will-change: opacity, transform; }
.theme-student.js-enabled [data-reveal-block].is-revealed {
  animation: scrollFadeUpBlock 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.theme-student.js-enabled [data-reveal-block] [data-reveal-card] {
  opacity: 0;
  will-change: opacity, transform;
}
.theme-student.js-enabled [data-reveal-block].is-revealed [data-reveal-card] {
  animation: scrollFadeUpBlock 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.theme-student [data-reveal-block] > [data-reveal-card]:nth-child(1) { animation-delay: 100ms; }
.theme-student [data-reveal-block] > [data-reveal-card]:nth-child(2) { animation-delay: 200ms; }
.theme-student [data-reveal-block] > [data-reveal-card]:nth-child(3) { animation-delay: 300ms; }
.theme-student [data-reveal-block] > [data-reveal-card]:nth-child(4) { animation-delay: 400ms; }
.theme-student [data-reveal-block] > [data-reveal-card]:nth-child(5) { animation-delay: 500ms; }
.theme-student [data-reveal-block] > [data-reveal-card]:nth-child(6) { animation-delay: 600ms; }
.theme-student [data-reveal-block] > [data-reveal-card]:nth-child(n+7) { animation-delay: 700ms; }

@media (prefers-reduced-motion: reduce) {
  .theme-student.js-enabled [data-reveal],
  .theme-student.js-enabled [data-reveal-block],
  .theme-student.js-enabled [data-reveal-block] [data-reveal-card] {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ── "سمارت سكرول": النافبار العايم بيختفي لتحت مع النزول، ويرجع مع
   الطلوع (``base.html``، ``#smartNav``) ──────────────────────────────
   كلاس عادي بدل Tailwind arbitrary value (``-translate-y-[150%]``) —
   لو JS استخدمت اسم كلاس Tailwind عشوائي، الـJIT مش هيولّد له قاعدة
   إلا لو نفس النص موجود حرفيا في ملف بيتفحصه وقت البناء؛ كلاس CSS عادي
   هنا بيتجنّب المشكلة دي تماما، زي ``.reveal-hidden`` بالظبط. ‎-150%‎ مش
   ‎-100%‎ عشان تختفي فوق حافة الشاشة تماما حتى مع أي ظل (`shadow-lg`)
   حوالين الكابسولة، مش تقف مماسة للحافة. */
.theme-student #smartNav.nav-hidden {
  transform: translateY(-150%);
}
@media (prefers-reduced-motion: reduce) {
  .theme-student #smartNav { transition: none; }
}

/* ── سكرول سلس لروابط الأنكور الداخلية ───────────────────────────────
   ``scroll-behavior`` لازم يتحط على عنصر الـscrolling box الفعلي
   (``<html>``) عشان يشتغل خالص — الصفحة هنا بتسكرول من الجذر، مش من
   الـ``<body>`` (``overflow-x`` بس محطوط على الاتنين في base.html، مفيش
   ``overflow-y`` بيخلّي الـbody يبقى هو الscroller). بس كلاس
   ``.theme-student`` نفسه محطوط على الـ``<body>`` بس (شايفين شرحه في
   أول الملف)، و``<html>`` معندهاش كلاس شرطي يميّز صفحة الطالب عن
   الأدمن. الحل: ``:has()`` — بيحدّد ``<html>`` بس لو جواه
   ``body.theme-student``، من غير ما نحتاج نضيف شرط Django تاني في
   base.html. مدعومة بشكل قياسي في كل المتصفحات الحديثة. */
html:has(body.theme-student) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(body.theme-student) { scroll-behavior: auto; }
}