/* ═══════════════════════════════════════════════════════════════════
   BRIGHT QUIZZES — ورقة الأنماط المركزية الشاملة والمحسنة معمارياً
   متوافقة 100% مع كافة الشاشات • خالية من اختناقات معالج الرسوميات • خطوط عربية متناسقة
   الهيكل: الأساسيات والثيمات ← المكونات والأزرار ← القوائم والتنقل ← الاختبارات ← الملف الشخصي والمجتمع ← البريلودر المحسن ← التجاوب
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   PART 1: FOUNDATION & THEMES (الأساسيات والثيمات السبعة)
   ───────────────────────────────────────────────────────────────────── */

/* ===== 1. THEMES (7 Themes) ===== */

:root,
body.theme-dark {
  --bg-body: #0B0F1C;
  --bg-nav: rgba(15, 23, 42, 0.88);
  --bg-card: rgba(15, 23, 42, 0.88);
  --bg-side: #020617;
  --bg-surface: #111827;
  --bg-hover: #1F2937;
  --bg-sunken: #0F1525;
  --text-primary: #F9FAFB;
  --text-secondary: #E5E7EB;
  --text-muted: #9CA3AF;
  --accent-primary: #A855F7;
  --accent-deep: #7C3AED;
  --accent-tint: rgba(168, 85, 247, 0.15);
  --accent-pink: #EC4899;
  --accent-cyan: #22D3EE;
  --accent-lime: #A3E635;
  --accent-red: #EF4444;
  --border-light: rgba(249, 250, 251, 0.12);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 20px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 16px rgba(34, 211, 238, 0.45);
  --grad-primary: linear-gradient(135deg, #A855F7, #7C3AED, #4C1D95);
  --grad-olympiad: linear-gradient(135deg, #7C3AED, #4C1D95);
  --grad-grade9: linear-gradient(135deg, #A855F7, #EC4899);
  --grad-outstanding: linear-gradient(135deg, #7C3AED, #22D3EE);
  --btn-olympiad: linear-gradient(90deg, #7C3AED, #22D3EE);
  --btn-grade9: linear-gradient(90deg, #A855F7, #EC4899);
  --btn-outstanding: linear-gradient(90deg, #4C1D95, #A3E635);
  --btn-discover: linear-gradient(90deg, #22D3EE, #A855F7);
  --nav-h: 72px;
  --radius: 16px;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --font: 'IBM Plex Sans Arabic', 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pl-bg: #0B0F1C;
  --pl-c1: #A855F7;
  --pl-c2: #7C3AED;
  --pl-c3: #EC4899;
  --pl-c4: #22D3EE;
  --pl-ink: #FFFFFF;
}
body.theme-light {
  --bg-body: #F3F4F6;
  --bg-nav: rgba(255, 255, 255, 0.92);
  --bg-card: rgba(255, 255, 255, 0.96);
  --bg-side: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-hover: #F9FAFB;
  --bg-sunken: #F0F0F5;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6B7280;
  --accent-primary: #8B5CF6;
  --accent-deep: #6D28D9;
  --accent-tint: rgba(139, 92, 246, 0.12);
  --accent-pink: #DB2777;
  --accent-cyan: #06B6D4;
  --accent-lime: #65A30D;
  --border-light: rgba(0, 0, 0, 0.08);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-3: 0 20px 48px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 16px rgba(139, 92, 246, 0.25);
  --grad-primary: linear-gradient(135deg, #C084FC, #A855F7, #7C3AED);
  --grad-olympiad: linear-gradient(135deg, #8B5CF6, #6D28D9);
  --grad-grade9: linear-gradient(135deg, #F472B6, #DB2777);
  --grad-outstanding: linear-gradient(135deg, #38BDF8, #0EA5E9);
  --btn-olympiad: linear-gradient(90deg, #7C3AED, #06B6D4);
  --btn-grade9: linear-gradient(90deg, #EC4899, #BE185D);
  --btn-outstanding: linear-gradient(90deg, #6D28D9, #84CC16);
  --btn-discover: linear-gradient(90deg, #06B6D4, #C084FC);
  --pl-bg: #F3F4F6;
  --pl-c1: #8B5CF6;
  --pl-c2: #6D28D9;
  --pl-c3: #DB2777;
  --pl-c4: #06B6D4;
  --pl-ink: #1F2937;
  --zone-k: 0.55;
}
body.theme-neon {
  --bg-body: #0A0A0F;
  --bg-nav: rgba(0, 0, 0, 0.88);
  --bg-card: rgba(20, 20, 35, 0.92);
  --bg-side: #000000;
  --bg-surface: #111122;
  --bg-hover: #1E1E3A;
  --bg-sunken: #0A0A1A;
  --text-primary: #F0F0FF;
  --text-secondary: #D1D5FF;
  --text-muted: #94A3B8;
  --accent-primary: #B388FF;
  --accent-deep: #E0AAFF;
  --accent-tint: rgba(179, 136, 255, 0.2);
  --accent-pink: #FF44FF;
  --accent-cyan: #00FFFF;
  --accent-lime: #AAFF00;
  --border-light: rgba(34, 211, 238, 0.4);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 26px rgba(179, 136, 255, 0.16);
  --shadow-3: 0 20px 50px rgba(179, 136, 255, 0.24);
  --shadow-glow: 0 0 18px #FF00FF;
  --grad-primary: linear-gradient(135deg, #FF00FF, #00FFFF, #FF44AA);
  --grad-olympiad: linear-gradient(135deg, #FF00FF, #7000FF);
  --grad-grade9: linear-gradient(135deg, #FF44AA, #FF00FF);
  --grad-outstanding: linear-gradient(135deg, #00FFFF, #FF00FF);
  --btn-olympiad: linear-gradient(90deg, #FF00FF, #00FFFF);
  --btn-grade9: linear-gradient(90deg, #FF44AA, #FF00FF);
  --btn-outstanding: linear-gradient(90deg, #00FFAA, #00FFFF);
  --btn-discover: linear-gradient(90deg, #00FFFF, #FF00FF);
  --pl-bg: #0A0A0F;
  --pl-c1: #B388FF;
  --pl-c2: #E0AAFF;
  --pl-c3: #FF44FF;
  --pl-c4: #00FFFF;
  --pl-ink: #FFFFFF;
}
body.theme-green {
  --bg-body: #0A1A0F;
  --bg-nav: rgba(10, 26, 15, 0.92);
  --bg-card: rgba(20, 45, 28, 0.92);
  --bg-side: #050F08;
  --bg-surface: #1E3D2A;
  --bg-hover: #2A5238;
  --bg-sunken: #0F1F14;
  --text-primary: #D4EDD4;
  --text-secondary: #88B888;
  --text-muted: #5A8A5A;
  --accent-primary: #81C784;
  --accent-deep: #66BB6A;
  --accent-tint: rgba(129, 199, 132, 0.15);
  --accent-pink: #F48FB1;
  --accent-cyan: #4DD0E1;
  --accent-lime: #AED581;
  --border-light: rgba(129, 199, 132, 0.25);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 20px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 16px rgba(129, 199, 132, 0.4);
  --grad-primary: linear-gradient(135deg, #81C784, #66BB6A, #388E3C);
  --grad-olympiad: linear-gradient(135deg, #4CAF50, #2E7D32);
  --grad-grade9: linear-gradient(135deg, #81C784, #A5D6A7);
  --grad-outstanding: linear-gradient(135deg, #66BB6A, #4DD0E1);
  --btn-olympiad: linear-gradient(90deg, #4CAF50, #2E7D32);
  --btn-grade9: linear-gradient(90deg, #81C784, #A5D6A7);
  --btn-outstanding: linear-gradient(90deg, #388E3C, #4DD0E1);
  --btn-discover: linear-gradient(90deg, #66BB6A, #A5D6A7);
  --pl-bg: #0A1A0F;
  --pl-c1: #81C784;
  --pl-c2: #66BB6A;
  --pl-c3: #AED581;
  --pl-c4: #4DD0E1;
  --pl-ink: #FFFFFF;
}
body.theme-pink {
  --bg-body: #1A0A1A;
  --bg-nav: rgba(26, 10, 26, 0.92);
  --bg-card: rgba(46, 20, 46, 0.92);
  --bg-side: #0F0510;
  --bg-surface: #421E42;
  --bg-hover: #5A2A5A;
  --bg-sunken: #1A0A1A;
  --text-primary: #F5D4F5;
  --text-secondary: #D488D4;
  --text-muted: #A05AA0;
  --accent-primary: #F48FB1;
  --accent-deep: #F06292;
  --accent-tint: rgba(244, 143, 177, 0.2);
  --accent-pink: #F48FB1;
  --accent-cyan: #CE93D8;
  --accent-lime: #AED581;
  --border-light: rgba(244, 143, 177, 0.25);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 20px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 16px rgba(244, 143, 177, 0.4);
  --grad-primary: linear-gradient(135deg, #F48FB1, #F06292, #AD1457);
  --grad-olympiad: linear-gradient(135deg, #EC407A, #AD1457);
  --grad-grade9: linear-gradient(135deg, #F48FB1, #F06292);
  --grad-outstanding: linear-gradient(135deg, #F06292, #CE93D8);
  --btn-olympiad: linear-gradient(90deg, #EC407A, #AD1457);
  --btn-grade9: linear-gradient(90deg, #F48FB1, #F06292);
  --btn-outstanding: linear-gradient(90deg, #AD1457, #CE93D8);
  --btn-discover: linear-gradient(90deg, #F06292, #CE93D8);
  --pl-bg: #1A0A1A;
  --pl-c1: #F48FB1;
  --pl-c2: #F06292;
  --pl-c3: #CE93D8;
  --pl-c4: #AED581;
  --pl-ink: #FFFFFF;
}
body.theme-yellow {
  --bg-body: #1A1408;
  --bg-nav: rgba(26, 20, 8, 0.92);
  --bg-card: rgba(46, 36, 16, 0.92);
  --bg-side: #0F0B05;
  --bg-surface: #423418;
  --bg-hover: #5A4420;
  --bg-sunken: #1A1408;
  --text-primary: #F5EDD4;
  --text-secondary: #D4C888;
  --text-muted: #A09A5A;
  --accent-primary: #FFD54F;
  --accent-deep: #FFC107;
  --accent-tint: rgba(255, 213, 79, 0.2);
  --accent-pink: #FF8A65;
  --accent-cyan: #4DD0E1;
  --accent-lime: #AED581;
  --border-light: rgba(255, 213, 79, 0.25);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 20px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 16px rgba(255, 213, 79, 0.4);
  --grad-primary: linear-gradient(135deg, #FFD54F, #FFC107, #F57F17);
  --grad-olympiad: linear-gradient(135deg, #FFC107, #F57F17);
  --grad-grade9: linear-gradient(135deg, #FFD54F, #FFB300);
  --grad-outstanding: linear-gradient(135deg, #FFB300, #4DD0E1);
  --btn-olympiad: linear-gradient(90deg, #FFC107, #F57F17);
  --btn-grade9: linear-gradient(90deg, #FFD54F, #FFB300);
  --btn-outstanding: linear-gradient(90deg, #F57F17, #4DD0E1);
  --btn-discover: linear-gradient(90deg, #FFB300, #FFD54F);
  --pl-bg: #1A1408;
  --pl-c1: #FFD54F;
  --pl-c2: #FFC107;
  --pl-c3: #FF8A65;
  --pl-c4: #4DD0E1;
  --pl-ink: #FFFFFF;
}
body.theme-blue {
  --bg-body: #0A0A1A;
  --bg-nav: rgba(10, 10, 26, 0.92);
  --bg-card: rgba(15, 26, 46, 0.92);
  --bg-side: #05050F;
  --bg-surface: #1A2A42;
  --bg-hover: #2A3A5A;
  --bg-sunken: #0A0F1A;
  --text-primary: #D4E4F5;
  --text-secondary: #88AAD4;
  --text-muted: #5A7AA0;
  --accent-primary: #4FC3F7;
  --accent-deep: #42A5F5;
  --accent-tint: rgba(79, 195, 247, 0.2);
  --accent-pink: #F48FB1;
  --accent-cyan: #4DD0E1;
  --accent-lime: #AED581;
  --border-light: rgba(79, 195, 247, 0.25);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 20px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 16px rgba(79, 195, 247, 0.4);
  --grad-primary: linear-gradient(135deg, #4FC3F7, #42A5F5, #0D47A1);
  --grad-olympiad: linear-gradient(135deg, #42A5F5, #0D47A1);
  --grad-grade9: linear-gradient(135deg, #4FC3F7, #1E88E5);
  --grad-outstanding: linear-gradient(135deg, #1E88E5, #4DD0E1);
  --btn-olympiad: linear-gradient(90deg, #42A5F5, #0D47A1);
  --btn-grade9: linear-gradient(90deg, #4FC3F7, #1E88E5);
  --btn-outstanding: linear-gradient(90deg, #0D47A1, #4DD0E1);
  --btn-discover: linear-gradient(90deg, #1E88E5, #4FC3F7);
  --pl-bg: #0A0A1A;
  --pl-c1: #4FC3F7;
  --pl-c2: #42A5F5;
  --pl-c3: #F48FB1;
  --pl-c4: #4DD0E1;
  --pl-ink: #FFFFFF;
}

/* ===== 2. RESET & BASE (إعادة التعيين والتصحيح الشامل) ===== */

*, *::before, *::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html, body{min-height:100%}
html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font);
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.6;
  transition: background 0.3s ease, color 0.2s ease;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  --zone-k: 1;
}
body:not(.page-ready) #sideMenu,
body:not(.page-ready) .side-menu,
body:not(.page-ready) .overlay-bg{display:none;visibility:hidden;pointer-events:none}
body:not(.page-ready),
body.preloader-active{overflow:hidden}
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 1.5rem) max(4%, env(safe-area-inset-right)) 0 max(4%, env(safe-area-inset-left));
}
main .container,
main .quiz-container{padding-left:0;padding-right:0}
img, svg{display:block;max-width:100%}
a{text-decoration:none;color:var(--accent-primary);transition:color 0.2s ease}
button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  outline: none;
}

/* ===== 3-B. توحيد الأزرار غير المصمّمة (كانت تظهر كنص عادي) =====
   أي <button> أو input[type=button|submit] بلا class يأخذ نفس شكل .btn-secondary.
   كل زر له class أو id بتصميم خاص يبقى كما هو (تخصيصه أعلى). */

button:not([class]),
input[type="button"]:not([class]),
input[type="submit"]:not([class]),
input[type="reset"]:not([class]),
a[role="button"]:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.6rem 1.25rem;
  border: 1.5px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  user-select: none;
}
button:not([class]):hover,
input[type="button"]:not([class]):hover,
input[type="submit"]:not([class]):hover,
input[type="reset"]:not([class]):hover,
a[role="button"]:not([class]):hover{border-color:var(--accent-primary);color:var(--accent-primary);background:var(--accent-tint)}
button:not([class]):focus-visible,
input[type="button"]:not([class]):focus-visible,
input[type="submit"]:not([class]):focus-visible,
a[role="button"]:not([class]):focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px}
button:not([class]):disabled,
input[type="button"]:not([class]):disabled,
input[type="submit"]:not([class]):disabled{opacity:0.5;cursor:not-allowed}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg-body)}
::-webkit-scrollbar-thumb{background:var(--accent-primary);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-deep)}

/* ===== 3. TYPOGRAPHY (الطباعة والعناوين) ===== */

h1, h2, h3, h4, h5, h6{font-weight:700;line-height:1.35;color:var(--text-primary);transition:color .28s ease, text-shadow .28s ease}
h1{font-size:clamp(1.6rem, 3.8vw, 2.75rem)}
h2{font-size:clamp(1.3rem, 2.8vw, 2rem)}
h3{font-size:clamp(1.1rem, 2vw, 1.4rem)}
p{color:var(--text-secondary);margin-bottom:1rem}
a:hover{color:var(--accent-deep)}
::selection{background:var(--accent-tint);color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:3px;border-radius:6px}
.screen{display:none}
.screen.active-screen{display:block}

/* ─────────────────────────────────────────────────────────────────────
   PART 2: SHARED COMPONENTS & BUTTONS (المكونات المشتركة والأزرار)
   ───────────────────────────────────────────────────────────────────── */

/* ===== 4. BUTTONS (نظام أزرار قياسي خالٍ من تضارب !important) ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  background-clip: padding-box;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  min-height: 46px;
  text-decoration: none;
}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--accent-primary);color:#FFFFFF;box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:var(--shadow-2);color:#FFFFFF}
.btn-secondary{background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-light)}
.btn-secondary:hover{border-color:var(--accent-primary);color:var(--accent-primary);background:var(--accent-tint)}
.btn-gradient{background:var(--grad-primary);color:#FFFFFF;box-shadow:var(--shadow-2)}
.btn-gradient:hover{filter:brightness(1.08);transform:translateY(-2px);color:#FFFFFF}
.btn-outline {
  background: transparent;
  border-color: var(--border-light);
  color: var(--text-primary);
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
}
.btn-outline:hover{border-color:var(--accent-primary);color:var(--accent-primary)}
.btn-danger{background:linear-gradient(135deg, #EF4444, #DC2626);color:#FFFFFF;box-shadow:0 4px 14px rgba(239, 68, 68, 0.25)}
.btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(239, 68, 68, 0.35);color:#FFFFFF}
.btn-warning{background:linear-gradient(135deg, #F59E0B, #D97706);color:#000000}
.btn-warning:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(245, 158, 11, 0.35)}
.btn-large{width:100%;justify-content:center;font-size:1.05rem;padding:0.9rem}
.btn-sm{padding:0.4rem 0.9rem;font-size:0.82rem;min-height:38px}
.btn-block{width:100%}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.discover-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;
  background: var(--btn-discover);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  color: #FFFFFF;
  border: none;
  background-clip: padding-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 40px;
}
.discover-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow);color:#FFFFFF}
.back-button {
  background: transparent;
  border: 1.5px solid var(--accent-cyan);
  color: var(--accent-cyan);
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  min-height: 42px;
}
.back-button:hover{background:var(--accent-cyan);color:#000000}

/* ===== 5. CARDS (البطاقات) ===== */

.card,
.section-card,
.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius, 16px);
  padding: 1.5rem;
  box-shadow: var(--shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover,
.section-card:hover,
.info-card:hover{box-shadow:var(--shadow-2);border-color:var(--border-light);transform:translateY(-2px)}
.section-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: var(--grad-olympiad);
  color: #FFFFFF;
  margin-bottom: 1.5rem;
  border: none;
}
.section-card.grade9-card{background:var(--grad-grade9)}
.section-card.outstanding-card{background:var(--grad-outstanding)}
.section-text{flex:1 1 260px}
.section-text h2{font-size:1.5rem;margin-bottom:0.4rem;color:#FFFFFF}
.section-text p{opacity:0.94;margin-bottom:0.8rem;color:rgba(255,255,255,0.96)}
.subject-icons-grid{display:flex;gap:0.6rem;flex-wrap:wrap}
.subject-icons-grid i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-size: 0.95rem;
  transition: transform 0.15s ease;
}
.subject-icons-grid i:hover{transform:scale(1.1);background:rgba(255, 255, 255, 0.25)}
.info-card{border-right:5px solid var(--accent-primary);margin-bottom:1.25rem}
.info-card h3{margin-bottom:0.4rem;font-size:1.15rem}
.random-quiz-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.random-quiz-card:hover{transform:translateY(-3px);border-color:var(--accent-cyan);box-shadow:var(--shadow-glow)}
.random-quiz-card i{font-size:2.5rem;color:var(--accent-cyan);margin-bottom:0.6rem}

/* ===== 6. FORMS (النماذج وحقول الإدخال) ===== */

.form-group{margin-bottom:1.1rem}
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
  color: var(--text-primary);
}
.form-group .required{color:var(--accent-red)}
input,
textarea,
select {
  width: 100%;
  font-family: var(--font);
  font-size: 0.95rem;
  padding: 0.75rem 0.9rem;
  background: var(--bg-body);
  border: 1.5px solid var(--border-light);
  border-radius: 0.65rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus,
textarea:focus,
select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-tint)}
input::placeholder,
textarea::placeholder{color:var(--text-muted)}
.field-hint{display:block;font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem}
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.options-grid-5{grid-template-columns:1fr 1fr}
@media (max-width: 600px) {
  .options-grid,
  .options-grid-5{grid-template-columns:1fr}
}

/* ===== 7. GRIDS & HERO (الشبكات والواجهة الترحيبية) ===== */

.categories-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:1.5rem;margin:2rem 0}
.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
  padding: 0.5rem;
  border-radius: 1.25rem;
  background: rgba(0, 0, 0, 0.05);
}
.model-card {
  position: relative;
  background: linear-gradient(135deg, var(--bg-surface), var(--accent-tint));
  border-radius: 1.15rem;
  padding: 1.1rem 0.9rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-height: 110px;
  content-visibility: auto;
  contain-intrinsic-size: auto 190px;
}
.model-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow);border-color:var(--accent-cyan)}
.model-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.model-icon{font-size:2.2rem;color:var(--accent-cyan);margin-bottom:0.5rem}
.model-main .model-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0;
  font-size: 1.2rem;
  border-radius: 0.9rem;
  background: var(--accent-tint);
  border: 1px solid var(--border-light);
  flex-shrink: 0;
}
.model-name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.model-stats{display:flex;align-items:flex-start;justify-content:center;gap:1.1rem}
.model-stat{display:flex;flex-direction:column;align-items:center;gap:0.35rem}
.model-cap {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
}
.model-ring {
  --ring-w: 5px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ring-size, 56px);
  height: var(--ring-size, 56px);
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.model-ring::before,
.model-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w) + 1px));
}
.model-ring::before{background:var(--border-light)}
.model-ring::after{background:conic-gradient(var(--ring, var(--accent-cyan)) calc(var(--acc, 0) * 1%), transparent 0)}
.model-ring b{position:relative;z-index:1;font-weight:800}
.model-stat.is-high{--ring:var(--accent-lime)}
.model-stat.is-mid{--ring:var(--accent-cyan)}
.model-stat.is-low{--ring:var(--accent-red, #EF4444)}
.model-stat.is-empty .model-ring{color:var(--text-muted)}
.model-stat.is-count .model-ring::after{background:conic-gradient(var(--accent-primary), var(--accent-cyan), var(--accent-pink), var(--accent-primary))}
.model-card.is-skeleton{pointer-events:none;opacity:0.55}
.model-card.is-skeleton > *{visibility:hidden}
.loading-message{text-align:center;padding:2.5rem;grid-column:1 / -1;color:var(--text-muted)}
.loading-message i{font-size:2.5rem;margin-bottom:0.8rem;color:var(--accent-cyan);animation:spin 1s linear infinite}
.no-models-message{text-align:center;padding:2.5rem;grid-column:1 / -1}
.no-models-message i{font-size:2.5rem;margin-bottom:0.8rem;color:var(--accent-pink)}
@keyframes spin {
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.hero-section {
  background: var(--grad-primary);
  border-radius: 1.75rem;
  padding: 2.25rem 1.75rem;
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.hero-content h1{font-size:clamp(1.6rem, 4vw, 2.5rem);line-height:1.25;margin-bottom:0.6rem;color:#FFFFFF}
.hero-content p{opacity:0.92;font-size:1rem;color:rgba(255,255,255,0.96);max-width:540px}
.quick-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  max-width: 260px;
}
.quick-btn {
  padding: 0.75rem 1rem;
  border-radius: 0.85rem;
  font-weight: 700;
  background: var(--btn-olympiad);
  color: #FFFFFF;
  text-align: center;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.quick-btn:hover{transform:scale(1.02);box-shadow:var(--shadow-glow);color:#FFFFFF}
.quick-btn:nth-child(2){background:var(--btn-grade9)}
.quick-btn:nth-child(3){background:var(--btn-outstanding)}
.suggestions-strip {
  background: var(--bg-card);
  border-radius: 1.5rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
  border: 1px solid var(--border-light);
}
.suggestions-strip h3{margin-bottom:0.75rem;font-size:1.05rem;color:var(--text-primary)}
.strip-cards{display:flex;flex-direction:column;gap:0.6rem}
.strip-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 1rem;
  background: var(--bg-surface);
  border-radius: 0.85rem;
  border-right: 4px solid var(--accent-cyan);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 500;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.strip-card:hover{transform:translateY(-2px);background:var(--bg-hover);box-shadow:var(--shadow-glow)}

/* ─────────────────────────────────────────────────────────────────────
   PART 3: NAVIGATION, SIDEBAR & FOOTER (التنقل والقائمة والفوتر)
   ───────────────────────────────────────────────────────────────────── */

/* ===== 8. NAVBAR ===== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-h);
  background: var(--bg-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4%;
  z-index: 1000;
  gap: 0.5rem;
}
.navbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo-area {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 1;
  min-width: 0;
  text-decoration: none;
}
.logo-text {
  font-weight: 800;
  font-size: 1.4rem;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  order: 1;
}
.nav-right-image {
  height: 38px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  order: 2;
}
.hamburger-btn {
  width: 40px;
  height: 38px;
  background: var(--grad-primary);
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
}
.hamburger-btn span {
  width: 20px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.hamburger-btn.active span:nth-child(1){transform:rotate(45deg) translate(5px, 5px)}
.hamburger-btn.active span:nth-child(2){opacity:0}
.hamburger-btn.active span:nth-child(3){transform:rotate(-45deg) translate(5px, -5px)}
.search-trigger {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--text-secondary);
  font-size: 0.95rem;
  border: none;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.2s ease;
}
.search-trigger:hover{color:var(--accent-primary);transform:scale(1.05)}
.profile-avatar-link{display:flex;align-items:center;flex-shrink:0}
.nav-profile-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-primary);
  display: block;
}

/* ===== 9. SIDEBAR ===== */

.side-menu {
  position: fixed;
  top: var(--nav-h);
  right: 0;
  width: min(320px, 85vw);
  height: calc(100dvh - var(--nav-h));
  background: var(--bg-side);
  border-left: 1px solid var(--border-light);
  z-index: 1100;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  transform: translateX(100%);
  box-shadow: -4px 0 30px rgba(0, 0, 0, 0.3);
}
.side-menu.open{transform:translateX(0)}
.side-menu-inner{padding:1.25rem 1rem 2.5rem}
.menu-list{list-style:none}
.menu-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 2px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.menu-list li:hover{background:var(--accent-tint);color:var(--text-primary);transform:translateX(-4px)}
.menu-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: inherit;
}
.menu-list li i {
  width: 20px;
  text-align: center;
  font-size: 1rem;
  color: var(--accent-cyan);
  flex-shrink: 0;
}
.menu-list .divider{height:1px;background:var(--border-light);margin:0.5rem 0.75rem;opacity:0.5}
.menu-list li.active{background:var(--accent-tint);color:var(--text-primary);border-right:3px solid var(--accent-cyan)}
.menu-list li#dashboardMenuItem{background:rgba(168, 85, 247, 0.06);border:1px solid var(--accent-tint);border-radius:10px;margin-bottom:4px}
.menu-list li#dashboardMenuItem i{color:var(--accent-pink)}
.theme-panel {
  margin-top: 1.75rem;
  padding: 1rem;
  background: var(--bg-sunken);
  border-radius: 12px;
  border: 1px solid var(--border-light);
}
.theme-panel h4{font-size:0.8rem;font-weight:700;color:var(--text-secondary);margin-bottom:0.6rem}
.theme-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.theme-option:last-child{border-bottom:none}
.theme-option label{cursor:pointer;display:flex;align-items:center;gap:6px}
.theme-option input[type="radio"] {
  appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-light);
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  margin: 0;
}
.theme-option input[type="radio"]:checked{border-color:var(--accent-cyan);background:var(--accent-cyan)}
.overlay-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.overlay-bg.active{opacity:1;pointer-events:auto}

/* ===== 10. FOOTER ===== */

.main-footer {
  flex-shrink: 0;
  margin-top: auto;
  background: var(--bg-side);
  border-top: 1px solid var(--border-light);
  padding: 3rem 4% 1.5rem;
  color: var(--text-secondary);
  font-size: 0.82rem;
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.footer-brand-section{display:flex;flex-direction:column;gap:0.75rem}
.footer-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
}
.footer-brand-logo i{color:var(--accent-cyan)}
.footer-brand-tagline {
  max-width: 520px;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  border-top: 1px solid var(--border-light);
  padding-top: 2rem;
}
.footer-nav-col h4{font-size:0.95rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem}
.footer-nav-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0;
  margin: 0;
}
.footer-nav-col a{font-size:0.88rem;color:var(--text-muted);display:inline-block;transition:color 0.2s ease, transform 0.2s ease}
.footer-nav-col a:hover{color:var(--accent-cyan);transform:translateX(-4px)}
.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  border-top: 1px solid var(--border-light);
  padding-top: 1.5rem;
  font-size: 0.82rem;
}
.footer-social-links{display:flex;align-items:center;gap:10px}
.footer-social-links a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.footer-social-links a:hover{background:var(--accent-cyan);color:#000000;border-color:var(--accent-cyan);transform:translateY(-2px)}
.footer-copyright-text{color:var(--text-muted);font-size:0.82rem}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.4rem 1rem}
.footer-links-primary a{font-weight:700;color:var(--text-primary);padding:0.2rem 0.5rem}
.footer-links-primary a:hover{color:var(--accent-cyan)}
.footer-links-secondary a{font-size:0.78rem;color:var(--text-muted)}
.footer-links-secondary a:hover{color:var(--accent-primary)}
.social-links{display:flex;gap:6px}
.social-links a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.footer-copy{font-size:0.68rem;color:var(--text-muted);opacity:0.75}

/* ===== 10-B. بطاقات المجتمع والليدربورد والإحصاءات في الرئيسية ===== */

.home-interactive-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.5rem 0}
.interactive-feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.interactive-feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.community-home-card{border-right:4px solid var(--accent-primary)}
.community-home-card:hover{border-color:var(--accent-primary)}
.leaderboard-home-card{border-right:4px solid #F59E0B}
.leaderboard-home-card:hover{border-color:#F59E0B}
.interactive-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.community-home-card .interactive-icon{background:var(--accent-tint);color:var(--accent-primary)}
.leaderboard-home-card .interactive-icon{background:rgba(245, 158, 11, 0.12);color:#F59E0B}
.interactive-info h3{font-size:1.15rem;margin-bottom:0.35rem}
.interactive-info p{font-size:0.85rem;color:var(--text-muted);margin-bottom:0.85rem;line-height:1.5}
.platform-stats-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  margin: 1.5rem 0 2rem;
}
.platform-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.platform-stats-header h3 {
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.stats-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  background: rgba(14, 165, 233, 0.1);
  color: var(--accent-cyan);
  border-radius: 20px;
  border: 1px solid rgba(14, 165, 233, 0.25);
}
.platform-stats-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:1rem}
.stat-box {
  background: var(--bg-sunken);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 1.2rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.stat-box .stat-icon{font-size:1.35rem;color:var(--accent-cyan);margin-bottom:0.2rem}
.stat-box .stat-number{font-size:1.6rem;font-weight:800;color:var(--text-primary);line-height:1.1}
.stat-box .stat-label{font-size:0.78rem;color:var(--text-muted);font-weight:600}
.info-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:2rem}
@media (max-width: 768px) {
  .home-interactive-grid,
  .info-cards-grid{grid-template-columns:1fr}
  .platform-stats-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 480px) {
  .platform-stats-grid{grid-template-columns:1fr}
  .interactive-feature-card{flex-direction:column;text-align:center}
}

/* ─────────────────────────────────────────────────────────────────────
   PART 4: QUIZ EXECUTION, SCREENS & TOASTS (الاختبار والتنبيهات)
   ───────────────────────────────────────────────────────────────────── */

/* ===== 11. OLYMPIAD, GRADE9 & OUTSTANDING ===== */

.category-card {
  background: var(--bg-card);
  border-radius: 1.75rem;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid var(--border-light);
}
.category-card:hover{transform:translateY(-6px);border-color:var(--accent-cyan);box-shadow:var(--shadow-glow)}
.category-icon{font-size:3.5rem;margin-bottom:1rem;color:var(--accent-cyan)}
.category-card h2{font-size:1.6rem;margin-bottom:0.5rem}
.division-card {
  background: var(--bg-card);
  border-radius: 1.5rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border-right: 5px solid var(--accent-cyan);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.division-card:hover{transform:translateX(-6px);box-shadow:var(--shadow-glow)}
.division-card h3{font-size:1.3rem;margin-bottom:0.4rem}
.division-card p{color:var(--text-secondary);margin-bottom:1rem}
.quiz-buttons{display:flex;flex-wrap:wrap;gap:0.65rem;margin-top:1rem}
.quiz-btn {
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid var(--accent-cyan);
  padding: 0.4rem 1.1rem;
  border-radius: 40px;
  color: var(--accent-cyan);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  font-weight: 500;
}
.quiz-btn:hover{background:var(--accent-cyan);color:#000000;transform:translateY(-2px)}
.grade-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0 1rem;
  flex-wrap: wrap;
}
.grade-tab {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  padding: 0.6rem 1.75rem;
  border-radius: 60px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
  color: var(--text-primary);
}
.grade-tab.active{background:var(--accent-cyan);color:#000000;border-color:var(--accent-cyan);box-shadow:var(--shadow-glow)}
.subjects-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:1.5rem;margin:2rem 0}
.subject-card {
  background: var(--bg-card);
  border-radius: 1.5rem;
  padding: 1.25rem;
  text-align: center;
  border-right: 5px solid var(--accent-cyan);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.subject-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow)}

/* ===== 12. RANDOM QUIZ ===== */

.random-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  margin: 2rem 0 3rem;
}
.random-card {
  background: var(--bg-card);
  border-radius: 1.5rem;
  padding: 1.5rem;
  text-align: center;
  width: 240px;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid var(--border-light);
}
.random-card:hover{transform:translateY(-6px);border-color:var(--accent-cyan);box-shadow:var(--shadow-glow)}
.random-icon{font-size:3rem;margin-bottom:0.8rem;color:var(--accent-cyan)}

/* ===== 13. QUIZ EXECUTION PAGE ===== */

.quiz-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.25rem 6rem;
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  flex-direction: column;
}
.top-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.controls-group{display:flex;align-items:center;gap:0.65rem}
.eval-buttons {
  display: flex;
  background: var(--bg-hover);
  border-radius: 60px;
  padding: 2px;
  gap: 4px;
}
.eval-btn {
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 60px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.eval-btn.active{background:var(--accent-cyan);color:#000000}
.finish-exam {
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-cyan));
  border: none;
  padding: 0.4rem 1.1rem;
  border-radius: 60px;
  font-weight: bold;
  cursor: pointer;
  color: #000000;
}
.progress-bar-container {
  width: 100%;
  height: 6px;
  background: var(--bg-hover);
  border-radius: 20px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  contain: layout paint;
}
.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-pink));
  border-radius: 20px;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.question-card, .options-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 1.5rem;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  width: 100%;
}
.question-image{text-align:center;margin-bottom:1.25rem}
.question-image img{max-width:100%;max-height:280px;border-radius:1.25rem;object-fit:contain}
.question-text {
  font-weight: 700;
  line-height: 1.55;
  font-size: 1.1rem;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.options-card .options-grid{display:flex;flex-direction:column;gap:0.75rem}
.option {
  background: var(--bg-hover);
  padding: 0.8rem 1.2rem;
  border-radius: 1rem;
  cursor: pointer;
  font-weight: 500;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  user-select: none;
  border: 1px solid transparent;
  border-right: 4px solid transparent;
  padding-right: calc(1.2rem - 3px);
  -webkit-tap-highlight-color: transparent;
}
.option:hover:not(.locked){background:var(--bg-surface);border-right-color:var(--accent-cyan)}
.option.correct{background:#16A34A;color:#FFFFFF}
.option.wrong{background:#DC2626;color:#FFFFFF}
.option.locked{cursor:default}
.explanation-area {
  background: var(--bg-side);
  border-right: 4px solid var(--accent-cyan);
  border-radius: 1.25rem;
  padding: 1rem;
  margin-top: 1.25rem;
  font-size: 0.92rem;
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-light);
  padding: 0.6rem 1.5rem calc(0.6rem + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  z-index: 1000;
}
.bottom-nav .nav-btn {
  background: var(--btn-discover);
  border: none;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  font-weight: bold;
  color: #FFFFFF;
  flex: 1;
  max-width: 180px;
  min-height: 44px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease, filter 0.25s ease;
}
.bottom-nav .nav-btn:disabled,
.bottom-nav .nav-btn.disabled{opacity:0.45;filter:saturate(0.6);cursor:not-allowed}
.result-container {
  background: var(--bg-card);
  border-radius: 1.75rem;
  padding: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.big-score{font-size:2rem;font-weight:800;color:var(--accent-cyan);margin:1rem 0}
.toast-notification {
  --toast-accent: var(--accent-cyan);
  position: fixed;
  top: calc(var(--nav-h) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-18px);
  z-index: 99999;
  width: 420px;
  max-width: 92vw;
  background: var(--bg-surface) !important;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-inline-start: 4px solid var(--toast-accent);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-3);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.toast-notification.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-notification.correct{--toast-accent:#22C55E}
.toast-notification.wrong{--toast-accent:#EF4444}
.toast-notification.success{--toast-accent:#22C55E}
.toast-notification.error{--toast-accent:#EF4444}
.toast-notification.info{--toast-accent:var(--accent-cyan)}
.toast-text-wrapper{display:flex;flex-direction:column;gap:2px;min-width:0}
.toast-content{display:flex;align-items:center;gap:14px;padding:14px 18px}
.toast-icon-wrapper {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  background: var(--accent-tint);
  color: var(--toast-accent);
}
.toast-notification.correct .toast-icon-wrapper{background:rgba(34, 197, 94, 0.16)}
.toast-notification.wrong .toast-icon-wrapper{background:rgba(239, 68, 68, 0.16)}
.toast-notification.success .toast-icon-wrapper{background:rgba(34, 197, 94, 0.16)}
.toast-notification.error .toast-icon-wrapper{background:rgba(239, 68, 68, 0.16)}
.toast-title{font-size:1.05rem;font-weight:700;color:var(--text-primary)}
.toast-notification.correct .toast-title{color:#22C55E}
.toast-notification.wrong .toast-title{color:#EF4444}
.toast-subtitle{font-size:0.8rem;color:var(--text-secondary)}

/* ─────────────────────────────────────────────────────────────────────
   PART 5: SUB PAGES, AUTH, ADMIN & LEADERBOARD
   ───────────────────────────────────────────────────────────────────── */

/* ===== 14. TEAM PAGES ===== */

.team-intro {
  background: var(--bg-card);
  border-radius: 1.75rem;
  padding: 2.5rem 1.75rem;
  margin: 2rem 0;
  text-align: center;
  border: 1px solid var(--border-light);
}
.team-intro h1{font-size:2.2rem;margin-bottom:1rem}
.team-intro p{font-size:1.05rem;color:var(--text-secondary);max-width:760px;margin:0 auto 1.5rem}
.quick-nav-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0 1rem;
}
.nav-team-btn {
  background: var(--btn-discover);
  border: none;
  padding: 0.65rem 1.5rem;
  border-radius: 60px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 0.95rem;
}
.departments-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:1.5rem;margin:2.5rem 0}
.department-card {
  background: var(--bg-card);
  border-radius: 1.75rem;
  padding: 1.75rem;
  text-align: center;
  border: 1px solid var(--border-light);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.department-card:hover{transform:translateY(-6px);border-color:var(--accent-cyan);box-shadow:var(--shadow-glow)}
.department-icon{font-size:3.5rem;margin-bottom:1rem;color:var(--accent-cyan)}
.department-card h2{font-size:1.6rem;margin-bottom:0.6rem}
.team-container{width:100%;max-width:1100px;margin:0 auto;padding:0 1rem}
.team-section{margin-bottom:3rem}
.section-title-wrapper{text-align:center;margin-bottom:1.5rem}
.section-title-wrapper h2 {
  font-size: 1.8rem;
  color: var(--accent-cyan);
  border-bottom: 2px solid var(--accent-cyan);
  display: inline-block;
  padding-bottom: 0.4rem;
}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:1.5rem}
.team-card {
  background: var(--bg-card);
  border-radius: 1.5rem;
  padding: 1.25rem;
  text-align: center;
  border: 1px solid var(--border-light);
  transition: 0.2s ease;
}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow)}
.team-img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin: 0 auto 0.8rem;
  border: 3px solid var(--accent-cyan);
  background: var(--bg-hover);
  overflow: hidden;
}
.team-img img{width:100%;height:100%;object-fit:cover}
.team-name{font-size:1.25rem;font-weight:700;margin-bottom:0.3rem}
.team-role{color:var(--accent-pink);font-weight:500;font-size:0.85rem;margin-bottom:0.4rem}
.team-specialty{color:var(--text-muted);font-size:0.8rem}

/* ===== 15. INITIATIVE PAGE ===== */

.initiative-content {
  background: var(--bg-card);
  border-radius: 1.75rem;
  padding: 2.5rem 1.75rem;
  margin: 2rem 0;
  border: 1px solid var(--border-light);
}
.initiative-content h2{font-size:1.6rem;margin-top:1.25rem;margin-bottom:0.8rem;color:var(--accent-cyan)}
.initiative-content p{line-height:1.6;margin-bottom:0.8rem;color:var(--text-secondary)}

/* ===== 16. AUTH PAGES ===== */

.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - var(--nav-h) - 80px);
  padding: 2rem 1rem;
}
.auth-card {
  background: var(--bg-card);
  border-radius: 1.75rem;
  padding: 2.25rem 1.75rem;
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-2);
}
.auth-card h2{text-align:center;margin-bottom:1.25rem}
.auth-link{text-align:center;margin-top:1.1rem;color:var(--text-secondary);font-size:0.9rem}
.auth-link a{color:var(--accent-cyan);font-weight:600}

/* ================================================================
   DASHBOARD & ADMIN — النسخة النهائية المحسّنة
   ================================================================ */

/* ===== البطاقات ===== */

.admin-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius, 16px);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  margin-bottom: 1.5rem;
}
.admin-card:hover{box-shadow:var(--shadow-2);border-color:rgba(255, 255, 255, 0.08)}
.admin-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.admin-card .card-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}
.admin-card .card-header h2 i{color:var(--accent-cyan)}

/* ===== أقسام النموذج ===== */

#newQuestionForm .form-section {
  background: var(--bg-sunken);
  border-radius: 0.85rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-light);
}
#newQuestionForm .form-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
#newQuestionForm .form-section-title i{color:var(--accent-cyan)}

/* ===== الحقول ===== */

#newQuestionForm input,
#newQuestionForm textarea,
#newQuestionForm select,
#metadataForm input,
#metadataForm select {
  background: var(--bg-body);
  border: 1.5px solid var(--border-light);
  border-radius: 0.65rem;
  padding: 0.7rem 0.9rem;
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  font-family: var(--font);
}
#newQuestionForm input:focus,
#newQuestionForm textarea:focus,
#newQuestionForm select:focus,
#metadataForm input:focus,
#metadataForm select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-tint)}
#newQuestionForm input[readonly],
#metadataForm input[readonly]{background:var(--bg-hover);color:var(--text-muted);cursor:not-allowed;opacity:0.8}
#newQuestionForm .options-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
@media (max-width: 600px) {
  #newQuestionForm .options-grid{grid-template-columns:1fr}
}

/* ===== الأزرار ===== */

#newQuestionForm .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}
#newQuestionForm .form-actions .btn-primary {
  background: var(--grad-primary);
  color: #ffffff;
  padding: 0.7rem 1.8rem;
  border-radius: 40px;
  font-weight: 700;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
#newQuestionForm .form-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}
#newQuestionForm .form-actions .btn-danger {
  background: var(--accent-red);
  color: #ffffff;
  padding: 0.7rem 1.4rem;
  border-radius: 40px;
  font-weight: 700;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
#newQuestionForm .form-actions .btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(239, 68, 68, 0.35)}

/* ===== رسائل التغذية الراجعة ===== */

#formFeedback {
  display: none;
  margin-top: 1.25rem;
  padding: 0.85rem 1.25rem;
  border-radius: 0.75rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
}
#formFeedback.success{background:rgba(22, 163, 74, 0.12);color:#16a34a;border:1px solid #16a34a}
#formFeedback.error{background:rgba(239, 68, 68, 0.12);color:#dc2626;border:1px solid #dc2626}
#formFeedback.info{background:var(--accent-tint);color:var(--accent-primary);border:1px solid var(--accent-primary)}

/* ===== الجداول ===== */

.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:1rem}
#metadataList table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: var(--bg-body);
  border-radius: 0.85rem;
  overflow: hidden;
}
#metadataList th {
  background: var(--bg-hover);
  color: var(--text-primary);
  font-weight: 700;
  padding: 0.75rem 1rem;
  text-align: right;
  border-bottom: 2px solid var(--border-light);
}
#metadataList td{padding:0.65rem 1rem;border-bottom:1px solid var(--border-light);color:var(--text-secondary);vertical-align:middle}
#metadataList tr:last-child td{border-bottom:none}
#metadataList tr:hover td{background:var(--accent-tint)}
#metadataList td .btn-danger {
  background: var(--accent-red);
  color: #ffffff;
  padding: 0.2rem 0.8rem;
  border-radius: 30px;
  font-size: 0.75rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  min-height: 28px;
}
#metadataList td .btn-danger:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(239, 68, 68, 0.3)}

/* ===== النافذة المنبثقة ===== */

#metadataModalOverlay .admin-card {
  background: var(--bg-card);
  border-radius: 18px;
  box-shadow: var(--shadow-3);
  border: 1px solid var(--border-light);
  padding: 2rem 1.75rem;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
}
#metadataModalOverlay .admin-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#metadataModalOverlay .admin-card .card-header h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
#metadataModalOverlay .admin-card .card-header h2 i{color:var(--accent-cyan)}
#metadataModalOverlay .admin-card .card-header button {
  background: var(--accent-tint);
  color: var(--accent-primary);
  border: 1px solid var(--border-light);
  padding: 0.5rem 1.2rem;
  border-radius: 40px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}
#metadataModalOverlay .admin-card .card-header button:hover{background:var(--accent-primary);color:#ffffff}

/* ===== نموذج الإضافة داخل النافذة ===== */

#metadataForm {
  background: var(--bg-sunken);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-light);
}
#metadataForm .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width: 600px) {
  #metadataForm .form-row{grid-template-columns:1fr}
}
#metadataForm .form-group{margin-bottom:1rem}
#metadataForm label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  color: var(--text-primary);
}
#metadataForm .btn-primary {
  background: var(--grad-primary);
  color: #ffffff;
  padding: 0.6rem 1.8rem;
  border-radius: 40px;
  font-weight: 700;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  margin-top: 0.5rem;
}
#metadataForm .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}

/* ===== زر الإدارة السريع ===== */

#openManageModelsBtn {
  background: var(--accent-tint);
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
  padding: 0.3rem 0.8rem;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
#openManageModelsBtn:hover{background:var(--accent-cyan);color:#000000;transform:translateY(-1px)}

/* ===== زر الإغلاق ===== */

.ig-modal-close {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 1.8rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 30;
  line-height: 1;
  transition: color 0.2s ease, transform 0.15s ease;
}
.ig-modal-close:hover{color:var(--accent-red);transform:rotate(90deg)}

/* ===== توافق الثيم الفاتح ===== */

body.theme-light #newQuestionForm input[readonly],
body.theme-light #metadataForm input[readonly]{background:#f0f0f0;color:#6b7280}
body.theme-light #metadataList th{background:#f3f4f6}
body.theme-light #metadataList tr:hover td{background:rgba(139, 92, 246, 0.08)}
body.theme-light #newQuestionForm .form-section,
body.theme-light #metadataForm{background:#f9fafb}

/* ===== التجاوب ===== */

@media (max-width: 768px) {
  .admin-card{padding:1.25rem}
  #newQuestionForm .form-section{padding:1rem}
  #metadataModalOverlay .admin-card{padding:1.25rem;max-height:92vh}
  #metadataList table{font-size:0.8rem}
  #metadataList th,
  #metadataList td{padding:0.5rem 0.6rem}
  #metadataList td .btn-danger{font-size:0.65rem;padding:0.15rem 0.6rem;min-height:24px}
  #openManageModelsBtn{font-size:0.65rem;padding:0.2rem 0.6rem}
}
@media (max-width: 480px) {
  .admin-card{padding:0.9rem}
  #newQuestionForm .form-section{padding:0.8rem}
  #newQuestionForm .form-actions{flex-direction:column-reverse;align-items:stretch}
  #newQuestionForm .form-actions .btn-primary,
  #newQuestionForm .form-actions .btn-danger{width:100%;justify-content:center}
  #metadataModalOverlay .admin-card{padding:0.9rem;max-height:94vh;border-radius:12px}
  #metadataModalOverlay .admin-card .card-header{flex-direction:column;align-items:stretch;gap:0.5rem}
  #metadataModalOverlay .admin-card .card-header button{width:100%;justify-content:center}
  #metadataList table{min-width:420px;font-size:0.75rem}
  #metadataList th,
  #metadataList td{padding:0.4rem 0.4rem}
  #metadataList td .btn-danger{font-size:0.6rem;padding:0.1rem 0.5rem;min-height:22px}
}

/* ===== 18. LEADERBOARD ===== */

.leaderboard-tabs {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 1.75rem;
}
.leaderboard-tab {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  padding: 0.45rem 1.25rem;
  border-radius: 60px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
}
.leaderboard-tab.active{background:var(--accent-cyan);color:#000000;border-color:var(--accent-cyan)}
.leaderboard-list{max-width:780px;margin:0 auto}
.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.9rem;
  background: var(--bg-card);
  border-radius: 0.85rem;
  margin-bottom: 0.45rem;
  border: 1px solid var(--border-light);
}
.leaderboard-rank{font-weight:800;min-width:34px;color:var(--accent-cyan)}
.leaderboard-rank.gold{color:#FFD700}
.leaderboard-rank.silver{color:#C0C0C0}
.leaderboard-rank.bronze{color:#CD7F32}
.leaderboard-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-hover);
}
.leaderboard-user{flex:1;display:flex;align-items:center;gap:0.35rem}
.leaderboard-score{font-weight:700;color:var(--accent-cyan)}

/* ===== 19. SEARCH PAGE ===== */

.search-results-page{max-width:760px;margin:0 auto}
.search-box-container{margin:1.25rem 0 1.5rem}
.search-result-item {
  background: var(--bg-card);
  border-radius: 0.85rem;
  padding: 1rem;
  margin-bottom: 0.65rem;
  border: 1px solid var(--border-light);
}

/* ─────────────────────────────────────────────────────────────────────
   PART 6: PROFILE, COMMUNITY & PRELOADER
   ───────────────────────────────────────────────────────────────────── */

/* ===== 20. PROFILE PAGE & ACTIONS ===== */

.ig-profile-container{max-width:935px;margin:0 auto 4rem;padding:calc(var(--nav-h) + 1.75rem) 1.25rem 2rem}
.ig-profile-header{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}
.ig-header-top{display:flex;align-items:center;gap:2.25rem}
.ig-avatar-col{flex:0 0 auto}
.ig-avatar-wrapper {
  position: relative;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  padding: 3px;
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  box-shadow: var(--shadow-1);
}
.ig-avatar-wrapper img, 
.ig-avatar-wrapper .ig-avatar-initial {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.change-avatar-btn {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #FFFFFF;
  border: 2px solid var(--bg-body);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 10;
}
.change-avatar-btn:hover{transform:scale(1.12);background:var(--accent-deep)}
.ig-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ig-user-title-row{display:flex;align-items:center;gap:8px}
.ig-username-text {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  direction: ltr;
  line-height: 1.2;
}
.ig-verified-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ig-verified-badge svg{filter:drop-shadow(0 1px 3px rgba(0, 149, 246, 0.4))}
.ig-fullname-sub{font-size:0.95rem;font-weight:600;color:var(--text-secondary);margin-bottom:0.4rem}
.ig-stats-counter-row {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  padding: 0;
  margin: 0.2rem 0 0;
}
.ig-stat-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.ig-stat-pill strong{font-size:1.1rem;font-weight:700;color:var(--text-primary)}
.ig-stat-pill.clickable{cursor:pointer;transition:color 0.15s ease}
.ig-stat-pill.clickable:hover,
.ig-stat-pill.clickable:hover strong{color:var(--accent-cyan)}
.ig-bio-block{display:flex;flex-direction:column;gap:0.5rem}
.ig-bio-content {
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-line;
  max-width: 650px;
  margin: 0;
}
.ig-bio-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.ig-bio-meta-tags span{display:flex;align-items:center;gap:5px}
.ig-bio-meta-tags i{color:var(--accent-cyan)}
.ig-primary-action-wrap{width:100%;margin-top:0.25rem}
.ig-btn-edit,
.ig-btn-follow {
  width: 100%;
  min-height: 40px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 10px;
  justify-content: center;
}
.ig-icon-actions-bar{display:flex;align-items:center;gap:0.65rem;width:100%}
.ig-icon-btn {
  flex: 1;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ig-icon-btn:active{transform:scale(0.96)}
.ig-icon-btn-create{background:var(--accent-tint);color:var(--accent-primary);border-color:rgba(168, 85, 247, 0.3)}
.ig-icon-btn-create:hover{background:var(--accent-primary);color:#FFFFFF;border-color:var(--accent-primary);box-shadow:0 4px 14px rgba(168, 85, 247, 0.35)}
.ig-icon-btn-logout{background:var(--bg-card);color:var(--text-secondary)}
.ig-icon-btn-logout:hover{background:var(--bg-hover);color:var(--accent-cyan);border-color:var(--accent-cyan)}
.ig-icon-btn-delete{background:rgba(239, 68, 68, 0.08);color:#EF4444;border-color:rgba(239, 68, 68, 0.25)}
.ig-icon-btn-delete:hover{background:#EF4444;color:#FFFFFF;border-color:#EF4444;box-shadow:0 4px 14px rgba(239, 68, 68, 0.35)}
.ig-nav-tabs {
  display: flex;
  justify-content: center;
  gap: 3.5rem;
  border-top: 1px solid var(--border-light);
  margin: 1.5rem 0 1.25rem;
}
.ig-tab-btn {
  background: none;
  border: none;
  border-top: 1px solid transparent;
  margin-top: -1px;
  padding: 0.9rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ig-tab-btn.active{color:var(--text-primary);border-top-color:var(--text-primary)}
.ig-posts-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px}
.ig-post-square {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-card);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border-light);
}
.ig-post-thumb{width:100%;height:100%;object-fit:cover;display:block}
.ig-post-text-card {
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(135deg, var(--bg-surface), var(--accent-tint));
}
.ig-post-text-card h4{font-size:0.95rem;color:var(--text-primary);margin-bottom:0.35rem;line-height:1.3}
.ig-post-text-card p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ig-post-hover {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ig-post-square:hover .ig-post-hover{opacity:1}
.ig-post-hover span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.1rem;
  font-weight: 700;
}
.ig-empty-state{text-align:center;padding:3.5rem 1rem;color:var(--text-muted)}
.ig-empty-state i{font-size:3rem;margin-bottom:1rem;color:var(--accent-primary)}
.ig-modal-overlay,
.follow-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.ig-post-modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  width: 100%;
  max-width: 950px;
  height: 85vh;
  max-height: 640px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.ig-modal-close,
.follow-modal-close {
  position: absolute;
  top: 10px;
  left: 14px;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--text-muted);
  cursor: pointer;
  z-index: 60;
  line-height: 1;
}
.ig-modal-close:hover,
.follow-modal-close:hover{color:var(--accent-red)}
.ig-post-split{display:flex;width:100%;height:100%}
.ig-post-media-side {
  flex: 1.2;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.ig-post-media-side img{width:100%;height:100%;object-fit:contain}
.ig-post-content-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-left: 1px solid var(--border-light);
}
.ig-modal-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border-light);
}
.ig-modal-author-img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.ig-author-name{font-weight:700;font-size:0.92rem;color:var(--text-primary)}
.ig-post-cat-pill {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  background: var(--accent-tint);
  color: var(--accent-primary);
  border-radius: 4px;
  margin-right: auto;
}
.ig-comments-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ig-comment-item{display:flex;gap:10px;align-items:flex-start}
.ig-comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}
.ig-comment-body strong{font-size:0.88rem;margin-left:6px;color:var(--text-primary)}
.ig-comment-text{font-size:0.88rem;color:var(--text-secondary);line-height:1.4;margin:0}
.ig-comment-time{font-size:0.72rem;color:var(--text-muted)}
.ig-modal-actions-panel{padding:0.65rem 1rem;border-top:1px solid var(--border-light)}
.ig-action-icons{display:flex;gap:1rem;margin-bottom:0.35rem}
.ig-like-btn, .ig-comment-btn {
  background: none;
  border: none;
  font-size: 1.35rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.ig-like-btn:hover{transform:scale(1.15)}
.ig-like-btn.liked i{color:#ED4956;font-weight:900}
.ig-likes-counter{font-size:0.88rem;color:var(--text-primary)}
.ig-comment-input-box{display:flex;align-items:center;border-top:1px solid var(--border-light);padding:0.45rem 1rem}
.ig-comment-input-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.ig-comment-input-box button {
  background: none;
  border: none;
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
.follow-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 1rem;
  width: 100%;
  max-width: 420px;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-3);
  overflow: hidden;
  position: relative;
}
.follow-modal-header{display:flex;align-items:center;padding:0.9rem 1.25rem;border-bottom:1px solid var(--border-light)}
.follow-modal-body{padding:0.4rem 0;overflow-y:auto;max-height:60vh}
.follow-user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}
.follow-user-card:hover{background:var(--bg-hover)}
.ig-form-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-3);
  overflow: hidden;
  position: relative;
}
.ig-form-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border-light)}
.ig-form-body{padding:1.25rem}
.analytics-highlight-row{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:1.25rem;margin-bottom:2rem}
.highlight-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius, 16px);
  padding: 1.75rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.highlight-stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--accent-cyan)}
.highlight-stat-num{font-size:2.4rem;font-weight:800;color:var(--accent-cyan);line-height:1.1}
.highlight-stat-card.accuracy .highlight-stat-num{color:var(--accent-lime)}
.highlight-stat-title{font-size:0.92rem;font-weight:600;color:var(--text-secondary)}
.profile-categories-section {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius, 16px);
  padding: 1.5rem;
  box-shadow: var(--shadow-1);
}
.profile-categories-section h3 {
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-primary);
}

/* ===== 21. COMMUNITY & POSTS ===== */

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.25rem 0;
  padding: 0.65rem 0.9rem;
  background: var(--bg-card);
  border-radius: 3rem;
  border: 1px solid var(--border-light);
}
.filter-buttons{display:flex;flex-wrap:wrap;gap:0.4rem}
.filter-btn {
  padding: 0.35rem 0.85rem;
  border-radius: 2rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  border: none;
  background: transparent;
  cursor: pointer;
}
.filter-btn.active{background:var(--accent-primary);color:#FFFFFF}
.add-post-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #FFFFFF;
  border: none;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.post-card-instagram {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 1.25rem;
  padding: 1.1rem;
  margin-bottom: 1.25rem;
}
.post-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem}
.post-user-info{display:flex;align-items:center;gap:0.65rem;cursor:pointer}
.post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-hover);
  border: 1.5px solid var(--border-light);
}
.post-fullname{font-weight:700;font-size:0.92rem}
.post-username{font-size:0.75rem;color:var(--text-muted)}
.post-body{margin:0.4rem 0 0.6rem}
.post-text{font-size:0.92rem;line-height:1.5;color:var(--text-secondary);word-break:break-word}
.post-image-container{margin:0.5rem 0;border-radius:0.65rem;overflow:hidden}
.post-image{width:100%;max-height:380px;object-fit:cover}
.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light);
}
.post-category {
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--accent-tint);
  color: var(--accent-primary);
  padding: 0.2rem 0.75rem;
  border-radius: 30px;
}

/* ===== PRELOADER — الإطار العام الموحد ===== */

#bq-preloader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--pl-bg, #070A13);
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.65s cubic-bezier(0.25, 1, 0.5, 1),
              visibility 0s linear 0.65s;
  pointer-events: auto;
  overflow: hidden;
  user-select: none;
}
#bq-preloader.hidden{opacity:0;transform:scale(1.02);pointer-events:none;visibility:hidden}

/* ===== الوضع الأول — شاشة "hello" بنمط Apple iPhone ===== */

#bq-preloader.bq-mode-hello{background:radial-gradient(80% 60% at 50% 50%, color-mix(in srgb, var(--pl-c1) 22%, transparent), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--pl-c2) 18%, transparent), transparent 70%),
    var(--pl-bg, #070A13)}
.bq-hello-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(84vw, 440px);
  max-width: 440px;
}
.bq-hello-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--pl-c1) 60%, transparent))
          drop-shadow(0 0 50px color-mix(in srgb, var(--pl-c2) 35%, transparent));
}
.bq-hello-path {
  fill: none;
  stroke: url(#bq-apple-grad);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: bqAppleHelloDraw 2s cubic-bezier(0.45, 0, 0.25, 1) 0.15s forwards;
}
@keyframes bqAppleHelloDraw {
  0%{stroke-dashoffset:1}
  100%{stroke-dashoffset:0}
}

/* تقليل الحركة عند تفعيل prefers-reduced-motion */

@media (prefers-reduced-motion: reduce) {
  #bq-preloader,
  #bq-preloader .bq-hello-path,
  #bq-preloader .bq-cube{animation:none!important;transition:none!important}
  #bq-preloader.hidden{opacity:0;transform:none}
  #bq-preloader .bq-hello-path{stroke-dashoffset:0!important}
}

/* ===== الوضع الثاني — تشكّل مكعبات الشعار (عند التنقل بين الصفحات) ===== */

.bq-logo-stage{position:relative;width:clamp(88px, 22vw, 132px);height:clamp(88px, 22vw, 132px);transform:rotate(-12deg)}
.bq-cube{position:absolute;border-radius:22%;opacity:0;animation:bqCubeIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             bqCubePulse 2.2s ease-in-out 0.9s infinite}
.bq-cube-1 {
  width: 38%;
  height: 38%;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, var(--pl-c2), var(--pl-c1));
  --bq-x: -70px;
  --bq-y: -40px;
  animation-delay: 0s, 0.75s;
}
.bq-cube-2 {
  width: 58%;
  height: 58%;
  top: 4%;
  right: 0;
  background: linear-gradient(135deg, var(--pl-c1), var(--pl-c3) 70%);
  --bq-x: 80px;
  --bq-y: -30px;
  animation-delay: 0.12s, 0.87s;
}
.bq-cube-3 {
  width: 58%;
  height: 58%;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, var(--pl-c2), var(--pl-c4) 75%);
  --bq-x: -80px;
  --bq-y: 50px;
  animation-delay: 0.24s, 0.99s;
}
.bq-cube-4 {
  width: 34%;
  height: 34%;
  bottom: 2%;
  right: 4%;
  background: linear-gradient(135deg, var(--pl-c3), var(--pl-c1));
  --bq-x: 70px;
  --bq-y: 60px;
  animation-delay: 0.36s, 1.11s;
}
@keyframes bqCubeIn {
  0%{opacity:0;transform:translate(var(--bq-x), var(--bq-y)) rotate(160deg) scale(0.3)}
  100%{opacity:1;transform:translate(0, 0) rotate(0deg) scale(1)}
}
@keyframes bqCubePulse {
  0%, 100%{filter:brightness(1);transform:scale(1)}
  50%{filter:brightness(1.15);transform:scale(1.045)}
}
@media (prefers-reduced-motion: reduce) {
  #bq-preloader .bq-hello-svg, #bq-preloader .bq-cube{animation:none!important;transition:none!important}
  #bq-preloader .bq-hello-svg, #bq-preloader .bq-cube{opacity:1;transform:none}
}

/* ─────────────────────────────────────────────────────────────────────
   PART 7: RESPONSIVE, UTILITIES & ACCESSIBILITY
   ───────────────────────────────────────────────────────────────────── */

/* ===== 23. RESPONSIVE BREAKPOINTS (دسكتوب ← لابتوب ← تابلت ← هاتف ← هاتف صغير) ===== */

@media (min-width: 1440px) {
  .container{max-width:1280px}
  .categories-grid{grid-template-columns:repeat(auto-fill, minmax(280px, 1fr))}
}
@media (max-width: 1024px) {
  :root{--nav-h:66px}
  .categories-grid{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))}
}
@media (max-width: 768px) {
  :root{--nav-h:60px}
  .hero-section{flex-direction:column;text-align:center;padding:1.5rem 1.2rem}
  .hero-content p{margin:0 auto 1rem}
  .quick-buttons{max-width:100%}
  .section-card{flex-direction:column;text-align:center;padding:1.25rem;gap:1rem}
  .section-text{flex:0 0 auto;width:100%}
  .hero-section{gap:1rem}
  .section-text h2{font-size:1.3rem}
  .subject-icons-grid{justify-content:center}
  .categories-grid, .subjects-grid, .team-grid{grid-template-columns:1fr 1fr;gap:1rem}
  .categories-grid, .subjects-grid, .models-grid{margin:1.25rem 0}
  .category-card{padding:1.25rem;border-radius:1.5rem}
  .category-icon{font-size:2.8rem;margin-bottom:0.75rem}
  .category-card h2{font-size:1.35rem}
  .division-card{padding:1rem;border-radius:1.25rem;margin-bottom:1.1rem}
  .division-card h3{font-size:1.15rem}
  .grade-tabs{gap:0.6rem}
  .grade-tab{padding:0.55rem 1.25rem;font-size:0.95rem}
  .random-options{gap:1rem;margin:1.25rem 0 2rem}
  .quiz-container{padding:0.9rem 1rem 6rem}
  .question-card, .options-card{padding:1.25rem}
  .result-container{padding:1.5rem}
  .main-footer{padding:2rem 4% 1.25rem}
  .footer-container{gap:1.75rem}
  .footer-bottom-bar{flex-direction:column;text-align:center}
  .footer-row{justify-content:center}
  .ig-profile-container{padding:calc(var(--nav-h) + 1.25rem) 0.9rem 2.5rem}
  .ig-header-top{gap:1.25rem}
  .ig-avatar-wrapper{width:95px;height:95px}
  .change-avatar-btn{width:28px;height:28px;font-size:0.75rem}
  .ig-username-text{font-size:1.35rem}
  .ig-stats-counter-row{gap:1.1rem;font-size:0.88rem}
  .ig-posts-grid{gap:4px}
  .ig-post-square{border-radius:4px}
  .ig-post-split{flex-direction:column}
  .ig-post-modal-box{height:92vh;max-height:unset}
  .ig-post-media-side{max-height:40vh}
}
@media (max-width: 480px) {
  :root{--nav-h:56px}
  .logo-text{font-size:1.15rem}
  .nav-right-image{height:30px}
  .hamburger-btn{width:36px;height:34px}
  .search-trigger{width:34px;height:34px;font-size:0.85rem}
  .nav-profile-img{width:32px;height:32px}
  .hero-section{padding:1.25rem 1rem;border-radius:1.25rem;margin-bottom:1.25rem}
  .hero-content p{font-size:0.95rem}
  .section-text h2{font-size:1.2rem}
  .category-card{padding:1.1rem}
  .category-icon{font-size:2.4rem}
  .category-card h2{font-size:1.25rem}
  .grade-tab{padding:0.5rem 1rem;font-size:0.9rem}
  .random-card{width:100%;max-width:340px}
  .categories-grid, .subjects-grid, .team-grid{grid-template-columns:1fr}
  .quiz-container{padding:0.75rem 0.75rem 5.5rem}
  .top-bar{padding:0.45rem 0.7rem;gap:0.5rem;flex-wrap:wrap}
  .question-card, .options-card{padding:1rem;border-radius:1rem}
  .question-image img{max-height:200px}
  .question-text{font-size:1.05rem}
  .option{padding:0.7rem 0.9rem;font-size:0.95rem}
  .result-container{padding:1.25rem;border-radius:1.25rem}
  .big-score{font-size:1.7rem}
  .toast-content{padding:12px 14px;gap:10px}
  .toast-icon-wrapper{width:40px;height:40px;font-size:1.35rem}
  .toast-title{font-size:0.98rem}
  .bottom-nav{padding:0.5rem 0.8rem calc(0.5rem + env(safe-area-inset-bottom))}
  .bottom-nav .nav-btn{font-size:0.85rem;padding:0.5rem 0.8rem}
  .post-card-instagram{padding:0.8rem 0.7rem 0.5rem;border-radius:1rem}
  .post-avatar{width:34px;height:34px}
  .post-fullname{font-size:0.82rem}
  .post-text{font-size:0.85rem}
  .post-image{max-height:220px}
  .ig-profile-container{padding:calc(var(--nav-h) + 1rem) 0.75rem 2rem}
  .ig-avatar-wrapper{width:82px;height:82px}
  .ig-username-text{font-size:1.22rem}
  .ig-stats-counter-row{gap:0.75rem}
  .ig-stat-pill{font-size:0.8rem}
  .ig-stat-pill strong{font-size:0.95rem}
}
@media (max-width: 360px) {
  :root{--nav-h:52px}
  .logo-text{display:none}
  .navbar{padding:0 3.5%}
  .navbar-actions{gap:4px}
  .hero-section{padding:1rem 0.85rem}
  .option{padding:0.65rem 0.8rem}
  .bottom-nav .nav-btn{font-size:0.8rem;padding:0.45rem 0.6rem}
}
@media (max-width: 320px) {
  :root{--nav-h:50px}
  .categories-grid, .subjects-grid, .team-grid{gap:0.75rem}
}
@media (orientation: landscape) and (max-height: 500px) {
  :root{--nav-h:50px}
  .navbar{padding-left:max(4%, env(safe-area-inset-left));padding-right:max(4%, env(safe-area-inset-right))}
  .hero-section{padding:1.1rem 1.25rem;margin-bottom:1.25rem}
  .quiz-container{padding-bottom:4.5rem}
  .question-image img{max-height:160px}
  .toast-notification{top:calc(var(--nav-h) + 6px)}
  .bottom-nav{padding:0.35rem max(1rem, env(safe-area-inset-right)) calc(0.35rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left))}
  .bottom-nav .nav-btn{min-height:38px;padding:0.4rem 1rem}
}
@media (min-width: 1440px) {
  .models-grid{grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));gap:1.25rem}
}
@media (max-width: 1024px) {
  .models-grid{grid-template-columns:repeat(auto-fill, minmax(200px, 1fr))}
}
@media (max-width: 768px) {
  .models-grid{grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));gap:0.8rem}
}
@media (max-width: 600px) {
  .models-grid{grid-template-columns:1fr;gap:0.7rem;padding:0.4rem}
  .model-card {
    flex-direction: row;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 0;
    padding: 0.75rem 0.9rem;
    text-align: start;
    contain-intrinsic-size: auto 82px;
  }
  .model-card > .model-icon{margin:0;font-size:1.8rem}
  .model-main{flex:1 1 auto;flex-direction:row;gap:0.75rem;align-items:center}
  .model-name{font-size:1rem;text-align:start}
  .model-stats{flex:0 0 auto;gap:0.8rem}
  .model-ring{--ring-size:50px;--ring-w:4.5px;font-size:0.84rem}
  .model-cap{font-size:0.7rem}
}
@media (max-width: 360px) {
  .model-card{padding:0.65rem 0.7rem;gap:0.5rem}
  .model-main{gap:0.55rem}
  .model-main .model-icon{width:40px;height:40px;font-size:1.05rem}
  .model-name{font-size:0.92rem}
  .model-stats{gap:0.55rem}
  .model-ring{--ring-size:46px;--ring-w:4px;font-size:0.78rem}
  .model-cap{font-size:0.66rem}
}
@media (max-width: 320px) {
  .model-ring{--ring-size:42px;font-size:0.72rem}
  .model-name{font-size:0.86rem}
}

/* ===== 23-B. TOUCH (أجهزة اللمس): أهداف لمس مريحة دون تغيير الشكل ===== */

@media (pointer: coarse) {
  .option{min-height:48px}
  .grade-tab, .quiz-btn, .finish-exam{min-height:40px}
  .eval-btn{min-height:30px;padding:4px 10px}
  .hamburger-btn, .search-trigger{position:relative}
  .hamburger-btn::after, .search-trigger::after{content:"";position:absolute;inset:-6px}
}
@media (hover: none) {
  .card:hover, .section-card:hover, .info-card:hover, .random-quiz-card:hover,
  .category-card:hover, .division-card:hover, .subject-card:hover, .random-card:hover,
  .model-card:hover, .strip-card:hover, .quick-btn:hover{transform:none}
}

/* ===== 23-C. PERFORMANCE (الأجهزة الضعيفة) ===== */

@media (max-width: 768px) {
  .navbar, .bottom-nav{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .overlay-bg, .ig-modal-overlay, .follow-modal-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (update: slow) {
  .navbar, .bottom-nav, .toast-notification, .overlay-bg,
  .ig-modal-overlay, .follow-modal-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero-section::before, .hero-section::after, .hero-content::after{animation:none}
}
.post-card-instagram{content-visibility:auto;contain-intrinsic-size:auto 420px}

/* ===== 23-D. EDGES (حماية الحواف: لا قصّ ولا تمدد أفقي) ===== */

.models-grid > *, .categories-grid > *, .subjects-grid > *, .team-grid > *{min-width:0}
main > *{max-width:100%}
img, video, canvas{max-width:100%;height:auto}

/* ===== 23-D2. CUBES (مكعبات الهوية — في البطاقات الكبيرة فقط: الهيرو وبطاقات الأقسام) =====
   شكل المكعب مأخوذ من ملفك المرجعي: زوايا 24% + تدرّج أبيض شفاف + حدّ رفيع + ظل ناعم.
   كل مكعب عنصر مستقل (وليس طبقة واحدة)، وحركتها في 23-E للهيرو فقط. */

.hero-section{position:relative;overflow:hidden;isolation:isolate}
.hero-section > *{position:relative;z-index:1}
.hero-section::before,
.hero-section::after,
.hero-content::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 24%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.hero-section::before {
  z-index: 0;
  width: 140px;
  height: 140px;
  top: -30px;
  left: 20px;
  transform: rotate(20deg);
}
.hero-section::after {
  z-index: 0;
  width: 80px;
  height: 80px;
  bottom: -20px;
  left: 35%;
  transform: rotate(-15deg);
}
.hero-content::after {
  z-index: -1;
  width: 104px;
  height: 104px;
  bottom: -46px;
  right: -34px;
  transform: rotate(25deg);
}
.section-card{position:relative;overflow:hidden;isolation:isolate}
.section-card::before,
.section-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 24%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
.section-card::before {
  width: 120px;
  height: 120px;
  top: -34px;
  left: 6%;
  transform: rotate(20deg);
}
.section-card::after {
  width: 72px;
  height: 72px;
  bottom: -20px;
  left: 30%;
  transform: rotate(-16deg);
}
@media (max-width: 480px) {
  .hero-section::before{width:108px;height:108px;top:-26px}
  .hero-section::after{width:64px;height:64px}
  .hero-content::after{width:80px;height:80px;bottom:-34px;right:-26px}
  .section-card::before{width:92px;height:92px}
  .section-card::after{width:56px;height:56px}
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: radial-gradient(60% 45% at 12% 8%,  color-mix(in srgb, var(--accent-primary) calc(var(--zone-k) * 22%), transparent), transparent 72%),
    radial-gradient(55% 40% at 94% 30%, color-mix(in srgb, var(--accent-cyan)    calc(var(--zone-k) * 13%), transparent), transparent 72%),
    radial-gradient(60% 45% at 6% 68%,  color-mix(in srgb, var(--accent-pink)    calc(var(--zone-k) * 12%), transparent), transparent 72%),
    radial-gradient(70% 50% at 90% 96%, color-mix(in srgb, var(--accent-primary) calc(var(--zone-k) * 18%), transparent), transparent 72%);
}

/* ===== 23-E. MOTION — لغة حركة خاصة بالموقع =====
   الفكرة: الموقع "أوراق أسئلة" و"مكعبات" (هوية الشعار):
   • توزيع الأوراق: البطاقات تُوزَّع بميلان خفيف بالتناوب يميناً ويساراً
   • قرص الدائرة: قوس النسبة يدور ويستقر في مكانه
   • مكعبات الهيرو: طبقتان من المربعات تطفوان ببطء (transform فقط)
   كلها transform/opacity فقط (مسرّعة بالـ GPU)، وتُلغى تلقائياً لمن يفضّل تقليل الحركة. */

@keyframes bqDeal {
  from{opacity:0;transform:translate3d(var(--dx, 16px), 22px, 0) rotate(var(--rot, 1.4deg)) scale(.94)}
}
@keyframes bqDial {
  from{opacity:0;transform:rotate(-165deg) scale(.88)}
}
@keyframes bqDriftA {
  from{transform:rotate(20deg) translate3d(0, 0, 0)}
  to{transform:translate3d(22px, -14px, 0) rotate(34deg)}
}
@keyframes bqDriftB {
  from{transform:rotate(-15deg) translate3d(0, 0, 0)}
  to{transform:translate3d(-19px, 12px, 0) rotate(-29deg)}
}
@keyframes bqDriftC {
  from{transform:rotate(25deg) translate3d(0, 0, 0)}
  to{transform:translate3d(-16px, -14px, 0) rotate(10deg)}
}
@keyframes bqSlideIn {
  from{opacity:0;transform:translate3d(18px, 0, 0) scale(.985)}
}
@media (prefers-reduced-motion: no-preference) {
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > *{animation:bqDeal .68s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 50ms) backwards}
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(odd){--dx:18px;--rot:1.8deg}
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(even){--dx:-18px;--rot:-1.8deg}
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(1){--i:0}
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(2){--i:1}
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(3){--i:2}
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(4){--i:3}
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(5){--i:4}
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(6){--i:5}
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(7){--i:6}
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(8){--i:7}
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(9){--i:8}
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(10){--i:9}
  :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(n+11){animation:none}
  .model-ring::after{animation:bqDial .82s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 50ms + 150ms) backwards}
  .models-grid > :nth-child(n+11) .model-ring::after{animation:none}
  .hero-section::before{animation:bqDriftA 9s ease-in-out infinite alternate;will-change:transform}
  .hero-section::after{animation:bqDriftB 12s ease-in-out infinite alternate;will-change:transform}
  .hero-content::after{animation:bqDriftC 10.5s ease-in-out infinite alternate;will-change:transform}
  .leaderboard-item{animation:bqSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 40ms) backwards}
  .leaderboard-item:nth-child(1){--i:0}
  .leaderboard-item:nth-child(2){--i:1}
  .leaderboard-item:nth-child(3){--i:2}
  .leaderboard-item:nth-child(4){--i:3}
  .leaderboard-item:nth-child(5){--i:4}
  .leaderboard-item:nth-child(6){--i:5}
  .leaderboard-item:nth-child(7){--i:6}
  .leaderboard-item:nth-child(8){--i:7}
  .leaderboard-item:nth-child(9){--i:8}
  .leaderboard-item:nth-child(10){--i:9}
  .leaderboard-item:nth-child(n+11){animation:none}
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .category-icon, .random-icon{transition:transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1)}
  .category-card:hover .category-icon,
  .random-card:hover .random-icon{transform:translateY(-4px) rotate(-6deg)}
}

/* ===== 23-F. CLICK & CARD SMOOTHNESS (سلاسة النقر والبطاقات) =====
   • كل زر/بطاقة: ضغطة سريعة (0.1s) ثم عودة ناعمة (0.35s) — transform فقط
   • كشف البطاقات أثناء التمرير: بالـ GPU (animation-timeline) في المتصفحات التي تدعمه، وغيرها يتجاهله */

:is(button, [role="button"], a.btn, .btn, .quick-btn, .quiz-btn, .nav-btn, .nav-team-btn, .grade-tab, .eval-btn,
    .finish-exam, .option, .menu-list li, .category-card, .subject-card,
    .random-card, .division-card, .model-card, .strip-card, .random-quiz-card, .info-card,
    .department-card, .team-card){touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.25s ease, background-color 0.25s ease, border-color 0.25s ease,
    color 0.25s ease, box-shadow 0.3s ease, opacity 0.25s ease, filter 0.25s ease}
:is(button, [role="button"], a.btn, .btn, .quick-btn, .quiz-btn, .nav-btn, .nav-team-btn, .grade-tab, .eval-btn,
    .finish-exam, .option:not(.locked), .menu-list li):active{transform:scale(0.965);transition-duration:0.1s;transition-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}
.option:not(.locked):active{transform:scale(0.985)}
button:disabled:active, .option.locked:active{transform:none}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.models-grid, .categories-grid, .subjects-grid, .team-grid) > :nth-child(n+11),
    :is(.section-card, .division-card, .info-card, .random-quiz-card, .team-intro, .department-card, .highlight-stat-card){animation:bqDeal linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  }
}

/* ===== 23-G. ICON BUTTONS (أزرار الأيقونات الصغيرة: بحث، قائمة، صورة الملف الشخصي) =====
   الأزرار الصغيرة تحتاج تغيّراً أوضح من الأزرار الكبيرة كي يُلاحَظ: ضغط 0.86 + عودة بارتداد ناعم + هالة عند المرور */

:is(.search-trigger, .hamburger-btn, .profile-avatar-link, .ig-icon-btn, .change-avatar-btn){touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform 0.4s cubic-bezier(0.34, 1.45, 0.64, 1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease}
.nav-profile-img{transition:transform 0.4s cubic-bezier(0.34, 1.45, 0.64, 1), box-shadow 0.25s ease}
:is(.search-trigger, .hamburger-btn, .ig-icon-btn, .change-avatar-btn):not(#_):active, .profile-avatar-link:not(#_):active .nav-profile-img{transform:scale(0.86);transition-duration:0.1s;transition-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1)}
@media (hover: hover) {
  .search-trigger:hover,
  .hamburger-btn:hover, .profile-avatar-link:hover .nav-profile-img{transform:scale(1.1);box-shadow:0 0 0 4px var(--accent-tint)}
}

/* ===== 24. UTILITIES (الأدوات المساعدة) ===== */

.container{max-width:1120px;margin:0 auto;padding:0 1.5rem}
.hidden{display:none!important}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.text-left{text-align:left}
.text-right{text-align:right}
.text-center{text-align:center}
.text-justify{text-align:justify}
.text-accent{color:var(--accent-primary)}
.text-cyan{color:var(--accent-cyan)}
.text-pink{color:var(--accent-pink)}
.text-muted{color:var(--text-muted)}
.text-success{color:#16A34A}
.text-danger{color:#EF4444}
.bg-card{background:var(--bg-card)}
.bg-surface{background:var(--bg-surface)}
.bg-sunken{background:var(--bg-sunken)}
.bg-hover{background:var(--bg-hover)}
.bg-accent-tint{background:var(--accent-tint)}
.m-0{margin:0}
.m-1{margin:0.25rem}
.m-2{margin:0.5rem}
.m-3{margin:0.75rem}
.m-4{margin:1rem}
.m-5{margin:1.5rem}
.m-auto{margin:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.my-auto{margin-top:auto;margin-bottom:auto}
.p-0{padding:0}
.p-1{padding:0.25rem}
.p-2{padding:0.5rem}
.p-3{padding:0.75rem}
.p-4{padding:1rem}
.p-5{padding:1.5rem}
.w-100{width:100%}
.w-50{width:50%}
.w-auto{width:auto}
.h-100{height:100%}
.d-flex{display:flex;align-items:center}
.d-grid{display:grid}
.d-block{display:block}
.d-inline-block{display:inline-block}
.d-none{display:none}
.flex-row{flex-direction:row}
.flex-column{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.justify-start{justify-content:flex-start}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.justify-between{justify-content:space-between}
.align-start{align-items:flex-start}
.align-center{align-items:center}
.align-end{align-items:flex-end}
.gap-1{gap:0.25rem}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.5rem}
.rounded-sm{border-radius:0.5rem}
.rounded-md{border-radius:0.85rem}
.rounded-lg{border-radius:1.25rem}
.rounded-full{border-radius:999px}
.shadow-1{box-shadow:var(--shadow-1)}
.shadow-2{box-shadow:var(--shadow-2)}
.shadow-3{box-shadow:var(--shadow-3)}
.shadow-glow{box-shadow:var(--shadow-glow)}

/* ===== 25. REDUCED MOTION (تقليل الحركة لذوي الحساسية) ===== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .hero-section,
  .bq-hello-svg,
  .bq-hello-path,
  .bq-cube,
  .loading-message i{animation:none!important}
  .side-menu{transition:none!important}
}

/* Accessibility utility: visually hidden, still available to assistive technology. */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ================================================================
   BRIGHT AI — GUARANTEED DIAMOND LOGO, BUBBLE-LESS THINKING & 7-THEMES
   ================================================================ */

/* كل المتغيرات تُعرَّف على body (وليس :root) كي تقرأ ألوان الثيم النشط (body.theme-*) */
body {
  --bai-on-accent: #FFFFFF;
  --bai-card-bg:
    radial-gradient(70% 45% at 100% 0%, color-mix(in srgb, var(--accent-primary) 14%, transparent), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, color-mix(in srgb, var(--accent-cyan) 10%, transparent), transparent 70%),
    var(--bg-surface);
  --bai-card-border: var(--border-light);
  --bai-header-bg: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-sunken));
  --bai-input-bg: var(--bg-body);
  --bai-input-border: var(--border-light);
  --bai-input-text: var(--text-primary);
  --bai-bubble-bot-bg: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-hover));
  --bai-bubble-bot-border: var(--border-light);
  --bai-bubble-bot-text: var(--text-primary);
  --bai-chip-bg: var(--bg-sunken);
  --bai-chip-border: var(--border-light);
  --bai-chip-text: var(--text-secondary);
  --bai-welcome-title: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-cyan) 50%, var(--accent-primary) 100%);
  --bai-welcome-sub: var(--text-muted);
  --bai-shadow: var(--shadow-2), 0 0 40px -14px color-mix(in srgb, var(--accent-primary) 40%, transparent);
}
/* الثيم الأصفر: خلفية التدرّج فاتحة فيلزم نص داكن عليها */
body.theme-yellow{--bai-on-accent:#1A1408}
.bright-ai-inline-card {
  position: relative;
  background: var(--bai-card-bg);
  border: 1px solid var(--bai-card-border);
  border-radius: 1.75rem;
  box-shadow: var(--bai-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 2.5rem 0;
  height: 580px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.bright-ai-inline-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-primary);
  z-index: 3;
  pointer-events: none;
}
.bright-ai-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.6rem;
  background: var(--bai-header-bg);
  border-bottom: 1px solid var(--bai-card-border);
}
.bright-ai-header-right{display:flex;align-items:center;gap:0.85rem}
.bright-ai-card-avatar {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  animation: none !important;
}
.bai-diamond-logo{position:relative;width:24px;height:24px;display:block}
.bai-diamond-logo .d-large {
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
  transform: rotate(45deg) !important;
  border-radius: 2.5px;
  background: linear-gradient(135deg, var(--accent-cyan, #22D3EE), var(--accent-primary, #A855F7));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-cyan) 60%, transparent);
  display: block;
}
.bai-diamond-logo .d-small {
  position: absolute;
  width: 7px;
  height: 7px;
  top: -1px;
  right: 0px;
  transform: rotate(45deg) !important;
  border-radius: 1.5px;
  background: linear-gradient(135deg, var(--accent-pink, #EC4899), var(--accent-primary, #A855F7));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-pink) 70%, transparent);
  display: block;
}
.bright-ai-card-titles h3 {
  font-family: 'Inter', var(--font), sans-serif;
  font-size: 1.15rem;
  font-weight: 350;
  letter-spacing: 0.4px;
  margin: 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  line-height: 1.2;
}
.bright-ai-tag {
  font-size: 0.65rem;
  font-weight: 400;
  background: var(--accent-tint, rgba(34, 211, 238, 0.12));
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
}

/* ================================================================
   3. البريلودر الدوّار (المستوحى من كود البريلودر)
   ================================================================ */

.retro-cube-spinner{position:relative;width:26px;height:26px;flex-shrink:0}
.retro-cube{position:absolute;border-radius:4px;animation:retroCubeSpin 1.8s infinite ease-in-out}
.retro-cube.rc-1 {
  width: 14px;
  height: 14px;
  top: 6px;
  left: 6px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-cyan));
  animation-delay: 0s;
}
.retro-cube.rc-2 {
  width: 14px;
  height: 14px;
  top: 6px;
  left: 6px;
  opacity: 0.7;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-pink));
  animation-delay: 0.5s;
}
.retro-cube.rc-3 {
  width: 8px;
  height: 8px;
  top: 1px;
  left: 17px;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-primary));
  animation-delay: 0.2s;
}
.retro-cube.rc-4 {
  width: 8px;
  height: 8px;
  top: 17px;
  left: 1px;
  background: linear-gradient(135deg, var(--accent-lime, #A3E635), var(--accent-cyan));
  animation-delay: 0.4s;
}
@keyframes retroCubeSpin {
  0%{transform:rotate(0deg) scale(1);opacity:1;border-radius:4px}
  50%{transform:rotate(180deg) scale(1.22);opacity:0.6;border-radius:7px}
  100%{transform:rotate(360deg) scale(1);opacity:1;border-radius:4px}
}

/* ================================================================
   4. التفكير: بلا فقاعة نهائياً + نصوص تتوهج وتعتم
   ================================================================ */

.bright-ai-thinking-clean-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.5rem 0.2rem !important;
  margin: 0.3rem 0 !important;
  width: fit-content !important;
  align-self: flex-start !important;
}
.thinking-glow-text {
  font-family: 'Inter', var(--font), sans-serif;
  font-size: 0.86rem;
  font-weight: 350;
  letter-spacing: 0.3px;
  animation: periodicGlowDim 2s infinite ease-in-out;
}
@keyframes periodicGlowDim {
  0%, 100%{opacity:0.35;color:var(--text-muted);filter:drop-shadow(0 0 0 transparent)}
  50%{opacity:1;color:var(--accent-cyan);filter:drop-shadow(0 0 8px var(--accent-cyan))}
}
.bright-ai-card-messages {
  flex: 1;
  padding: 1.4rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  scroll-behavior: smooth;
}
.bright-ai-card-msg{display:flex;flex-direction:column;max-width:82%;animation:fadeInUpSoft .32s cubic-bezier(.16, 1, .3, 1) forwards}
@keyframes fadeInUpSoft {
  from{opacity:0;transform:translate3d(0, 9px, 0) scale(.99)}
  to{opacity:1;transform:translate3d(0, 0, 0) scale(1)}
}
.bright-ai-card-msg-user{align-self:flex-start}
.bright-ai-card-msg-bot{align-self:flex-end}
.msg-bubble {
  padding: 0.85rem 1.25rem;
  border-radius: 18px;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.65;
  word-wrap: break-word;
}
.bright-ai-card-msg-user .msg-bubble {
  background: var(--grad-primary);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, transparent);
  color: var(--bai-on-accent);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-primary) 28%, transparent);
}
.bright-ai-card-msg-bot .msg-bubble {
  background: var(--bai-bubble-bot-bg);
  border: 1px solid var(--bai-bubble-bot-border);
  color: var(--bai-bubble-bot-text);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-1);
}
.bright-ai-card-chips{padding:0 1.4rem 0.8rem;display:flex;flex-direction:column;gap:0.5rem}
.chips-title{font-size:0.75rem;font-weight:400;color:var(--bai-welcome-sub)}
.chips-wrapper{display:flex;gap:0.55rem;flex-wrap:wrap}
.bright-chip {
  background: var(--bai-chip-bg);
  border: 1px solid var(--bai-chip-border);
  color: var(--bai-chip-text);
  padding: 0.4rem 0.95rem;
  border-radius: 30px;
  font-size: 0.78rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.25s ease;
}
.bright-chip:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);transform:translateY(-2px)}
.bright-ai-card-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.4rem;
  background: var(--bai-header-bg);
  border-top: 1px solid var(--bai-card-border);
}
.bright-ai-card-form input {
  flex: 1;
  background: var(--bai-input-bg);
  border: 1px solid var(--bai-input-border);
  padding: 0.85rem 1.35rem;
  border-radius: 40px;
  color: var(--bai-input-text);
  font-size: 0.92rem;
  font-weight: 300;
  transition: all 0.25s ease;
}
.bright-ai-card-form input:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 3px var(--accent-tint)}
.bright-ai-card-form button {
  position: relative;
  background: var(--grad-primary);
  color: var(--bai-on-accent);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-primary) 35%, transparent);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bright-ai-card-form button i{transition:transform 0.25s ease}
.bright-ai-card-form button:hover{transform:scale(1.08) translateY(-1px);box-shadow:var(--shadow-glow)}
.bright-ai-card-form button:hover i{transform:rotate(-15deg)}

/* ─────────────────────────────────────────────────────────────────────
   PART 5-B: EMAIL VERIFICATION (صفحة تأكيد البريد الإلكتروني المنسجمة)
   ───────────────────────────────────────────────────────────────────── */

.verify-card{text-align:center;max-width:480px;margin:2rem auto}
.verify-icon-box {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.25rem auto;
  background: var(--accent-tint);
  border: 2px solid var(--accent-cyan);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-1);
}
.verify-icon-box i{font-size:2.2rem;color:var(--accent-cyan)}
.verify-email-text{font-size:0.95rem;color:var(--text-secondary);margin:0.5rem 0 1.5rem 0;line-height:1.6}
.verify-target-email {
  display: inline-block;
  color: var(--accent-cyan);
  font-weight: 700;
  direction: ltr;
  margin-top: 4px;
  background: var(--accent-tint);
  padding: 3px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
}
.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 1.5rem 0;
  direction: ltr;
}
.otp-field {
  width: 48px;
  height: 56px;
  font-size: 1.6rem;
  font-weight: 800;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
  border-radius: 12px;
  border: 1.5px solid var(--border-light);
  background: var(--bg-sunken);
  color: var(--text-primary);
  outline: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.otp-field:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 3px var(--accent-tint), var(--shadow-glow);transform:translateY(-2px)}
.verify-timer-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  background: var(--bg-sunken);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-light);
}
.verify-timer-box strong{color:#F59E0B;font-family:monospace;font-size:1.05rem}
.resend-section{margin-top:1.5rem;font-size:0.92rem;color:var(--text-secondary)}
.btn-resend-link {
  background: none;
  border: none;
  color: var(--accent-cyan);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  padding: 0 4px;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}
.btn-resend-link:hover:not(:disabled){opacity:0.85}
.btn-resend-link:disabled{color:var(--text-muted);text-decoration:none;cursor:not-allowed;opacity:0.6}
@media (max-width: 480px) {
  .otp-inputs{gap:6px}
  .otp-field{width:40px;height:50px;font-size:1.35rem;border-radius:8px}
}

/* ─────────────────────────────────────────────────────────────────────
   EXPLAIN WITH BRIGHT AI (زر وبطاقة شرح السؤال الذكي)
   ───────────────────────────────────────────────────────────────────── */

.btn-explain-ai {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-sunken);
  border: 1.5px solid var(--accent-cyan);
  border-radius: 999px;
  padding: 0.45rem 1.15rem;
  color: var(--text-primary);
  font-family: 'Inter', var(--font), sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-cyan) 14%, transparent);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  direction: ltr;
}
.btn-explain-ai:hover:not(:disabled) {
  background: var(--accent-tint);
  border-color: var(--accent-cyan);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
  color: var(--text-primary);
}
.btn-explain-ai:active:not(:disabled){transform:scale(0.96)}
.btn-explain-ai:disabled{opacity:0.65;cursor:wait;transform:none}
.btn-explain-ai .bai-diamond-logo{display:inline-block;vertical-align:middle}
.ai-explanation-card {
  margin-top: 1.25rem;
  background: var(--bg-sunken);
  border: 1px solid var(--border-light);
  border-right: 4px solid var(--accent-cyan);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-1);
  animation: fadeInDownSoft .38s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes fadeInDownSoft {
  from{opacity:0;transform:translate3d(0, -10px, 0) scale(.985)}
  to{opacity:1;transform:translate3d(0, 0, 0) scale(1)}
}
.ai-explanation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-light);
}
.ai-explanation-title{font-size:0.95rem;font-weight:700;color:var(--accent-cyan);letter-spacing:0.2px}
.ai-explanation-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}
.ai-explanation-close:hover{color:var(--accent-red, #EF4444);transform:scale(1.15)}
.ai-explanation-body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
  font-weight: 400;
  word-break: break-word;
}

/* Motion refinement: premium, restrained text reveals and smooth typography transitions. */

@keyframes bqTextReveal {
  from{opacity:0;transform:translate3d(0, .58em, 0)}
  to{opacity:1;transform:translate3d(0, 0, 0)}
}
:is(.hero-content h1, .section-text h2, .auth-card h2, .admin-card .card-header h2, .team-intro h1, .ig-username-text, .welcome-title, .verify-card h1, .verify-card h2){transition:color .28s ease, text-shadow .28s ease, letter-spacing .28s ease}
@media (prefers-reduced-motion: no-preference) {
  :is(.hero-content h1, .section-text h2, .auth-card h2, .admin-card .card-header h2, .team-intro h1, .ig-username-text, .welcome-title, .verify-card h1, .verify-card h2){animation:bqTextReveal .68s cubic-bezier(.16, 1, .3, 1) .04s backwards}
  :is(.hero-content p, .section-text p, .team-intro p, .welcome-subtitle, .verify-email-text, .auth-card .auth-link){animation:bqTextReveal .64s cubic-bezier(.16, 1, .3, 1) .12s backwards}
}
/* ================================================================
   BRIGHT AI — التصميم الحديث فائق البساطة والمتوافق مع الثيمات السبعة
   ================================================================ */

:root {
  --bai-card-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(11, 15, 28, 0.98));
  --bai-card-border: var(--border-light, rgba(255, 255, 255, 0.08));
  --bai-card-top-border: var(--accent-cyan, #22D3EE);
  --bai-header-bg: rgba(15, 23, 42, 0.65);
  --bai-input-bg: rgba(255, 255, 255, 0.04);
  --bai-input-border: rgba(255, 255, 255, 0.12);
  --bai-input-text: #FFFFFF;
  --bai-bubble-bot-bg: rgba(17, 24, 39, 0.85);
  --bai-bubble-bot-border: rgba(255, 255, 255, 0.08);
  --bai-bubble-bot-text: #F1F5F9;
  --bai-chip-bg: rgba(255, 255, 255, 0.04);
  --bai-chip-border: rgba(255, 255, 255, 0.09);
  --bai-chip-text: #E2E8F0;
  --bai-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.65);
}

body.theme-light {
  --bai-card-bg: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --bai-card-border: rgba(0, 0, 0, 0.09);
  --bai-card-top-border: var(--accent-primary, #8B5CF6);
  --bai-header-bg: rgba(241, 245, 249, 0.85);
  --bai-input-bg: #FFFFFF;
  --bai-input-border: rgba(0, 0, 0, 0.14);
  --bai-input-text: #0F172A;
  --bai-bubble-bot-bg: #F1F5F9;
  --bai-bubble-bot-border: rgba(0, 0, 0, 0.07);
  --bai-bubble-bot-text: #0F172A;
  --bai-chip-bg: #F1F5F9;
  --bai-chip-border: rgba(0, 0, 0, 0.1);
  --bai-chip-text: #334155;
  --bai-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.08);
}

/* أنيميشن دخول البطاقة الفوري بانسيابية */
@keyframes baiCardEntrance {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bright-ai-inline-card {
  position: relative;
  background: var(--bai-card-bg);
  border: 1px solid var(--bai-card-border);
  border-top: 2px solid var(--bai-card-top-border);
  border-radius: 26px;
  box-shadow: var(--bai-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 2.5rem 0;
  height: 590px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: baiCardEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bright-ai-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.6rem;
  background: var(--bai-header-bg);
  border-bottom: 1px solid var(--bai-card-border);
}

.bright-ai-header-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.bright-ai-card-avatar {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

/* شعار المعينين في الهيدر */
.bai-diamond-logo {
  position: relative;
  width: 24px;
  height: 24px;
  display: block;
}

.bai-diamond-logo .d-large {
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
  transform: rotate(45deg) !important;
  border-radius: 2.5px;
  background: linear-gradient(135deg, var(--accent-cyan, #22D3EE), var(--accent-primary, #A855F7));
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
  display: block;
}

.bai-diamond-logo .d-small {
  position: absolute;
  width: 7px;
  height: 7px;
  top: -1px;
  right: 0px;
  transform: rotate(45deg) !important;
  border-radius: 1.5px;
  background: linear-gradient(135deg, var(--accent-pink, #EC4899), var(--accent-primary, #A855F7));
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.7);
  display: block;
}

.bright-ai-card-titles h3 {
  font-family: 'Inter', var(--font), sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  line-height: 1.2;
}

.bright-ai-tag {
  font-size: 0.65rem;
  font-weight: 500;
  background: var(--accent-tint, rgba(34, 211, 238, 0.12));
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
}

/* ================================================================
   شاشة ترحيب Bright AI — انتقال الشعار ثم كتابة الاسم والتوهج
   ================================================================ */

.bright-ai-welcome-screen {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
}

.welcome-floating-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: none !important;
  transform: none !important;
}

.welcome-brand-row {
  --welcome-logo-shift: 0px;
  position: relative;
  display: grid;
  grid-template-columns: 27px max-content;
  align-items: center;
  column-gap: 0.55rem;
  direction: ltr;
  min-height: 2.2rem;
  width: max-content;
}

.bai-diamond-logo.is-welcome {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: block;
  transform: translateX(var(--welcome-logo-shift));
  filter: drop-shadow(0 2px 7px color-mix(in srgb, var(--accent-cyan, #22D3EE) 42%, transparent));
  will-change: transform;
}

.bai-diamond-logo.is-welcome .d-large {
  position: absolute;
  width: 17px;
  height: 17px;
  left: 3px;
  bottom: 3px;
  transform: rotate(45deg) !important;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--accent-cyan, #22D3EE), var(--accent-primary, #8B5CFF));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-cyan, #22D3EE) 42%, transparent);
  display: block;
}

.bai-diamond-logo.is-welcome .d-small {
  position: absolute;
  width: 9px;
  height: 9px;
  top: 1px;
  right: 1px;
  transform: rotate(45deg) !important;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--accent-pink, #A78BFA), var(--accent-primary, #8B5CFF));
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent-pink, #A78BFA) 38%, transparent);
  display: block;
}

.welcome-title {
  grid-column: 2;
  grid-row: 1;
  font-family: 'Inter', var(--font), sans-serif;
  font-size: clamp(0.98rem, 2.8vw, 1.12rem);
  font-weight: 450;
  letter-spacing: 0.12px;
  line-height: 1.35;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 1.5rem;
  color: var(--accent-cyan, #22D3EE);
}

.welcome-title-text {
  display: inline-block;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}

.bright-ai-welcome-screen.is-animating .bai-diamond-logo.is-welcome {
  transition: transform 780ms cubic-bezier(.2,.8,.2,1);
  transform: translateX(0);
}

.bright-ai-welcome-screen.is-animating .welcome-title-text {
  animation: baiWelcomeTypeReveal 1.15s steps(14, end) 560ms forwards;
}

.bright-ai-welcome-screen.is-settled .welcome-title {
  animation: periodicGlowDim 2s infinite ease-in-out;
}

@keyframes baiWelcomeTypeReveal {
  0% { clip-path: inset(0 100% 0 0); opacity: 0.25; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

.welcome-subtitle {
  margin-top: 0.65rem;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--bai-welcome-sub, var(--text-secondary));
  line-height: 1.7;
  max-width: 420px;
}

@media (prefers-reduced-motion: reduce) {
  .bright-ai-welcome-screen *,
  .bright-ai-welcome-screen .bai-diamond-logo.is-welcome {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .welcome-title-text {
    clip-path: none !important;
    opacity: 1 !important;
  }
}

.bright-ai-card-messages {
  flex: 1;
  padding: 1.4rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  scroll-behavior: smooth;
}

.bright-ai-card-msg {
  display: flex;
  flex-direction: column;
  max-width: 82%;
  animation: fadeInUpSoft 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUpSoft {
  from { opacity: 0; transform: translate3d(0, 9px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.bright-ai-card-msg-user { align-self: flex-start; }
.bright-ai-card-msg-bot { align-self: flex-end; }

.msg-bubble {
  padding: 0.85rem 1.25rem;
  border-radius: 18px;
  font-size: 0.92rem;
  line-height: 1.65;
  word-wrap: break-word;
}

.bright-ai-card-msg-user .msg-bubble {
  background: linear-gradient(135deg, var(--accent-deep, #7C3AED), var(--accent-cyan, #0EA5E9));
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2);
}

.bright-ai-card-msg-bot .msg-bubble {
  background: var(--bai-bubble-bot-bg);
  border: 1px solid var(--bai-bubble-bot-border);
  color: var(--bai-bubble-bot-text);
  border-bottom-left-radius: 4px;
}

/* ================================================================
   أنيميشن التفكير باللون الأبيض المتوهج (Pure White Glowing Pulse)
   ================================================================ */

.bright-ai-thinking-clean-row {
  direction: rtl !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.5rem 0.2rem !important;
  margin: 0.2rem 0 !important;
  width: fit-content !important;
}

@keyframes aiThinkingWhitePulse {
  0%, 100% {
    color: rgba(255, 255, 255, 0.35);
    text-shadow: none;
  }
  50% {
    color: #FFFFFF;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.85), 0 0 18px rgba(255, 255, 255, 0.45);
  }
}

.thinking-glow-text {
  order: 1;
  flex: 0 0 12rem;
  width: 12rem;
  min-width: 12rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Inter', var(--font), sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  animation: aiThinkingWhitePulse 1.9s infinite ease-in-out !important;
  transition: opacity 0.2s ease !important;
  direction: ltr !important;
  display: inline-block !important;
}

.bright-ai-thinking-clean-row > :not(.thinking-glow-text) {
  order: 2;
  flex-shrink: 0;
}

/* مكعبات السبينر الدوارة */
.retro-cube-spinner {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.retro-cube {
  position: absolute;
  border-radius: 3px;
  animation: retroCubeSpin 1.8s infinite ease-in-out;
}

.retro-cube.rc-1 {
  width: 12px; height: 12px; top: 6px; left: 6px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-cyan));
  animation-delay: 0s;
}
.retro-cube.rc-2 {
  width: 12px; height: 12px; top: 6px; left: 6px; opacity: 0.7;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-pink));
  animation-delay: 0.5s;
}
.retro-cube.rc-3 {
  width: 7px; height: 7px; top: 1px; left: 16px;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-primary));
  animation-delay: 0.2s;
}
.retro-cube.rc-4 {
  width: 7px; height: 7px; top: 16px; left: 1px;
  background: linear-gradient(135deg, var(--accent-lime, #A3E635), var(--accent-cyan));
  animation-delay: 0.4s;
}

@keyframes retroCubeSpin {
  0% { transform: rotate(0deg) scale(1); border-radius: 3px; }
  50% { transform: rotate(180deg) scale(1.22); border-radius: 6px; }
  100% { transform: rotate(360deg) scale(1); border-radius: 3px; }
}

/* رقائق الاقتراحات السريعة */
.bright-ai-card-chips {
  padding: 0 1.4rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.chips-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.chips-wrapper {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bright-chip {
  background: var(--bai-chip-bg);
  border: 1px solid var(--bai-chip-border);
  color: var(--bai-chip-text);
  padding: 0.35rem 0.85rem;
  border-radius: 30px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.bright-chip:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  transform: translateY(-2px);
}

/* شارة الملف المرفق */
.bright-ai-attachment-pill {
  padding: 0.35rem 1.4rem;
  background: var(--bai-header-bg);
}

.attachment-pill-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-cyan);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.8rem;
  color: var(--accent-cyan);
}

.attachment-filename {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
}

.attachment-remove-btn {
  background: none;
  border: none;
  color: var(--accent-red, #EF4444);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}

/* حقل الإدخال وزر الإرفاق وزر الإرسال */
.bright-ai-card-form {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.4rem;
  background: var(--bai-header-bg);
  border-top: 1px solid var(--bai-card-border);
}

.bright-ai-attach-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bai-input-bg);
  border: 1px solid var(--bai-input-border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  font-size: 1rem;
}

.bright-ai-attach-btn:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: var(--accent-tint);
  transform: scale(1.05);
}

.bright-ai-card-form input[type="text"] {
  flex: 1;
  background: var(--bai-input-bg);
  border: 1px solid var(--bai-input-border);
  padding: 0.8rem 1.25rem;
  border-radius: 40px;
  color: var(--bai-input-text);
  font-size: 0.92rem;
  transition: all 0.25s ease;
}

.bright-ai-card-form input[type="text"]:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

.bright-ai-card-form button[type="submit"] {
  background: linear-gradient(135deg, var(--accent-cyan, #06B6D4) 0%, var(--accent-primary, #8B5CF6) 100%);
  color: #FFFFFF;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bright-ai-card-form button[type="submit"]:hover {
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 6px 18px rgba(6, 182, 212, 0.45);
}

/* الحاشية السفلية لإخلاء المسؤولية */
.bright-ai-footnote,
.ai-explanation-footnote {
  text-align: center;
  font-family: 'Inter', var(--font), sans-serif;
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.65;
  padding: 0.35rem 0.5rem 0.55rem;
  user-select: none;
  letter-spacing: 0.3px;
}

.ai-explanation-footnote {
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-light);
  margin-top: 0.85rem;
  text-align: right;
  direction: ltr;
}

/* زر الشرح في الاختبار */
.btn-explain-ai {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-sunken);
  border: 1.5px solid var(--accent-cyan);
  border-radius: 999px;
  padding: 0.45rem 1.15rem;
  color: var(--text-primary);
  font-family: 'Inter', var(--font), sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(34, 211, 238, 0.12);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  direction: ltr;
}

.btn-explain-ai:hover:not(:disabled) {
  background: var(--accent-tint);
  border-color: var(--accent-cyan);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.ai-explanation-card {
  margin-top: 1.25rem;
  background: var(--bg-sunken);
  border: 1px solid var(--border-light);
  border-right: 4px solid var(--accent-cyan);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-1);
  animation: fadeInUpSoft 0.35s ease forwards;
}

.ai-explanation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-light);
}

.ai-explanation-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.ai-explanation-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
}

.ai-explanation-close:hover {
  color: var(--accent-red, #EF4444);
}

.ai-explanation-body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
  font-weight: 400;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE FIT — أبعاد الموبايل مطابقة لنسب الملف المرجعي (style (1).css)
   • يُضاف في آخر الملف عمداً ليتغلّب على قواعد التصغير الأقدم دون تعديلها
   • الدسكتوب لا يتأثر: كل القواعد داخل @media (max-width: 768px)
   • القيم المرجعية: شريط 72px • هوامش 5% • هيرو 40/32px وحواف 32px
     بطاقات 28px وحواف 28px • أزرار 14/20px وحواف 16px • نص بمحاذاة طبيعية
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── منع التمدد الأفقي ─── */
  html, body { max-width: 100%; overflow-x: hidden; }
  main > *, .container, .quiz-container, .team-container { min-width: 0; max-width: 100%; }

  /* ─── المساحة الرئيسية: هامش علوي أصلي (الشريط العلوي بلا أي تعديل) ─── */
  main {
    padding-top: calc(var(--nav-h) + 1.5rem);
    padding-right: max(5%, env(safe-area-inset-right));
    padding-left: max(5%, env(safe-area-inset-left));
    padding-bottom: 2.5rem;
  }

  /* ─── الهيرو: حشوة 40/32 وحواف 32 وعنوان كبير ومحاذاة طبيعية ─── */
  .hero-section {
    padding: 2.5rem 2rem;
    border-radius: 2rem;
    margin-bottom: 3rem;
    gap: 1.9rem;
    flex-direction: column;
    align-items: stretch;
    text-align: start;
  }
  .hero-content h1 { font-size: clamp(1.75rem, 7.5vw, 2.4rem); line-height: 1.25; margin-bottom: 1rem; max-width: none; }
  .hero-content p { font-size: 1rem; line-height: 1.75; margin: 0; max-width: none; }
  .quick-buttons { width: 100%; max-width: 100%; min-width: 0; gap: 1rem; }
  .quick-btn { min-height: 54px; padding: 0.875rem 1.25rem; border-radius: 1rem; font-size: 1rem; }

  /* ─── بطاقات الأقسام: حشوة 28 وحواف 28 وفراغ 24 ─── */
  .section-card {
    padding: 1.75rem;
    border-radius: 1.75rem;
    margin-bottom: 2rem;
    gap: 1.5rem;
    flex-direction: column;
    align-items: stretch;
    text-align: start;
  }
  .section-text { width: 100%; flex: 0 0 auto; }
  .section-text h2 { font-size: 1.6rem; margin-bottom: 0.6rem; }
  .section-text p { font-size: 1rem; line-height: 1.7; margin-bottom: 1.1rem; }
  .discover-btn { min-height: 46px; padding: 0.7rem 1.6rem; font-size: 0.95rem; }
  .subject-icons-grid { justify-content: flex-start; gap: 1.1rem; }
  .subject-icons-grid i { width: 46px; height: 46px; font-size: 1.2rem; border-radius: 0.85rem; }

  /* ─── شريط الاقتراحات + بطاقات المعلومات + الاختبار العشوائي ─── */
  .suggestions-strip { padding: 1.5rem; border-radius: 1.75rem; margin: 2rem 0; }
  .suggestions-strip h3 { font-size: 1.15rem; margin-bottom: 1rem; }
  .strip-cards { gap: 0.85rem; }
  .strip-card { min-height: 54px; padding: 0.8rem 1rem; border-radius: 1rem; font-size: 0.95rem; }
  .info-card { padding: 1.75rem; border-radius: 1.75rem; margin-bottom: 1.75rem; }
  .info-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
  .random-quiz-card { padding: 1.75rem; border-radius: 1.75rem; margin: 2rem 0; }
  .random-quiz-card i { font-size: 3rem; margin-bottom: 1rem; }
  .random-quiz-card h3 { font-size: 1.6rem; }

  /* ─── حماية Bright AI والتنبيهات من التمدد (بلا تصغير للخطوط) ─── */
  .welcome-title { white-space: normal; text-align: center; }
  .welcome-subtitle { max-width: 100%; }
  .bright-ai-card-form input[type="text"] { min-width: 0; }
  .attachment-filename { max-width: 150px; }
  .thinking-glow-text { flex-basis: 9rem; width: 9rem; min-width: 9rem; }
  .toast-notification { width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
}

/* ═══════════════════════════════════════════════════════════════════
   BRIGHT AI — تبسيط التصميم (يُضاف في آخر الملف عمداً)
   • إزالة الشريط اللوني العلوي (border-top + ::before) الذي يتقوّس مع الزوايا
   • حدّ واحد خفيف حول البطاقة فقط؛ الباقي فصل بالخلفيات بدل الحدود
   • زر الإرسال والإرفاق دائريان تماماً (تعطيل min-height/padding القادمة من
     قاعدة button:not([class]) العامة التي كانت تحوّل الزر إلى بيضاوي)
   • متوافق مع كل الثيمات: الخلفيات الشفافة مشتقة من --text-primary
   ═══════════════════════════════════════════════════════════════════ */

.bright-ai-inline-card {
  --bai-soft: color-mix(in srgb, var(--text-primary) 7%, transparent);
  --bai-soft-hover: color-mix(in srgb, var(--text-primary) 12%, transparent);
  border: 1px solid var(--bai-card-border);
  border-radius: 24px;
}
.bright-ai-inline-card::before { display: none; }

.bright-ai-card-header {
  background: transparent;
  border-bottom: none;
  padding: 1rem 1.4rem 0.4rem;
}
.bright-ai-tag { border: none; background: var(--accent-tint); }

.bright-ai-card-msg-user .msg-bubble {
  border: none;
  box-shadow: none;
}
.bright-ai-card-msg-bot .msg-bubble {
  background: var(--bai-soft);
  border: none;
  box-shadow: none;
}

.bright-ai-card-chips .chips-title { font-weight: 400; }
.bright-chip {
  background: var(--bai-soft);
  border: none;
}
.bright-chip:hover { background: var(--bai-soft-hover); color: var(--accent-cyan); transform: none; }

.bright-ai-attachment-pill { background: transparent; }
.attachment-pill-content { border: none; background: var(--accent-tint); }

.bright-ai-card-form {
  background: transparent;
  border-top: none;
  padding: 0.5rem 1.2rem 0.9rem;
  gap: 0.6rem;
}
.bright-ai-card-form input[type="text"] {
  background: var(--bai-soft);
  border: none;
  box-shadow: none;
}
.bright-ai-card-form input[type="text"]:focus {
  background: var(--bai-soft-hover);
  box-shadow: 0 0 0 2px var(--accent-tint);
}

/* زر الإرفاق وزر الإرسال: دائرة كاملة 44×44 */
.bright-ai-card-form .bright-ai-attach-btn,
.bright-ai-card-form button[type="submit"] {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  flex: 0 0 44px;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.bright-ai-card-form .bright-ai-attach-btn {
  background: var(--bai-soft);
  color: var(--text-muted);
}
.bright-ai-card-form .bright-ai-attach-btn:hover {
  background: var(--bai-soft-hover);
  color: var(--accent-cyan);
  transform: none;
}
.bright-ai-card-form button[type="submit"] {
  box-shadow: none;
}
.bright-ai-card-form button[type="submit"]:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-primary) 40%, transparent);
}

/* بطاقة الشرح داخل الاختبار: حدّ جانبي واحد فقط */
.ai-explanation-card { border: none; border-right: 4px solid var(--accent-cyan); }
.ai-explanation-header { border-bottom: none; padding-bottom: 0.2rem; }

@media (max-width: 768px) {
  .bright-ai-inline-card { border-radius: 22px; }
  .bright-ai-card-header { padding: 0.9rem 1.1rem 0.3rem; }
  .bright-ai-card-form { padding: 0.4rem 0.9rem 0.8rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   COLORED CARDS — البطاقات بتصميم البطاقات الأساسية: مربعات + لمعان + ألوان مميزة لكل بطاقة
   • مربعات الهوية (::before / ::after) كالهيرو، بحجم نسبي لتناسب البطاقات الصغيرة، وتنزاح بنعومة عند المرور
   • طبقات داخل الخلفية: مسحة ضوء + لمعة زجاجية + توهج لوني ناعم في الزاوية السفلى + تدرّج الثيم
   • لكل نوع بطاقة تدرّجها الخاص (6 تدرجات من ألوان الثيم الحالي)، والبطاقات الزوجية تبدّله بتدرّج آخر
   • مستثناة: الاختبار العشوائي، الاقتراحات، الإحصاءات، السؤال والخيارات، الإدارة، الدخول، المنشورات،
     الليدربورد، النوافذ، Bright AI، model-card
   • للتراجع: احذف هذه الكتلة (من هذا التعليق حتى تعليق SHINE)
   ═══════════════════════════════════════════════════════════════════ */

body {
  --bq-p0: var(--grad-olympiad);
  --bq-p1: var(--grad-grade9);
  --bq-p2: var(--grad-outstanding);
  --bq-p3: linear-gradient(135deg, var(--accent-deep), var(--accent-cyan));
  --bq-p4: linear-gradient(135deg, var(--accent-pink), var(--accent-deep));
  --bq-p5: linear-gradient(135deg, var(--accent-primary), var(--accent-pink) 55%, var(--accent-cyan));
}
.card { --bq-g: var(--bq-p0); }
.card:nth-child(even) { --bq-g: var(--bq-p3); }.info-card { --bq-g: var(--bq-p1); }
.info-card:nth-child(even) { --bq-g: var(--bq-p4); }.category-card { --bq-g: var(--bq-p2); }
.category-card:nth-child(even) { --bq-g: var(--bq-p5); }.division-card { --bq-g: var(--bq-p3); }
.division-card:nth-child(even) { --bq-g: var(--bq-p0); }.subject-card { --bq-g: var(--bq-p4); }
.subject-card:nth-child(even) { --bq-g: var(--bq-p1); }.team-card { --bq-g: var(--bq-p5); }
.team-card:nth-child(even) { --bq-g: var(--bq-p2); }.department-card { --bq-g: var(--bq-p0); }
.department-card:nth-child(even) { --bq-g: var(--bq-p3); }.team-intro { --bq-g: var(--bq-p1); }
.team-intro:nth-child(even) { --bq-g: var(--bq-p4); }.initiative-content { --bq-g: var(--bq-p2); }
.initiative-content:nth-child(even) { --bq-g: var(--bq-p5); }.interactive-feature-card { --bq-g: var(--bq-p3); }
.interactive-feature-card:nth-child(even) { --bq-g: var(--bq-p0); }.profile-categories-section { --bq-g: var(--bq-p4); }
.profile-categories-section:nth-child(even) { --bq-g: var(--bq-p1); }
:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%),
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(85% 65% at 100% 100%, color-mix(in srgb, var(--accent-pink) 38%, transparent), transparent 65%),
    var(--bq-g);
  background-size: 260% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 130% 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  background-color: transparent;
  color: #FFFFFF;
  border: none;
  box-shadow: var(--shadow-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease,
              background-position 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease, opacity 0.25s ease;
}
:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section):is(:hover, :active) {
  background-position: -30% 0, 0 0, 0 0, 0 0;
  box-shadow: var(--shadow-2), var(--shadow-glow);
}

/* مربعات الهوية */
:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section)::before,
:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  aspect-ratio: 1 / 1;
  border-radius: 24%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section)::before { width: clamp(56px, 36%, 120px); top: -22%; left: 6%; transform: rotate(20deg); }
:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section)::after  { width: clamp(36px, 20%, 72px);  bottom: -14%; left: 30%; transform: rotate(-16deg); }
:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section):nth-child(even)::before { left: auto; right: 6%; transform: rotate(-20deg); }
:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section):nth-child(even)::after  { left: auto; right: 30%; transform: rotate(16deg); }

/* النص والأيقونات داخل البطاقات: أبيض (مع استثناء حقول الإدخال والأزرار) */
:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section):is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section) *:not(input):not(textarea):not(select):not(button):not(.btn):not(.discover-btn):not(.quiz-btn) {
  color: inherit;
}
:is(.team-card, .info-card, .division-card, .subject-card) :is(.team-specialty, p) { opacity: 0.92; }

/* العناصر الداخلية */
.interactive-feature-card .interactive-icon { background: rgba(255, 255, 255, 0.18); }
.team-img { border-color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.16); }
.division-card .quiz-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
}
.division-card .quiz-btn:hover { background: #FFFFFF; color: var(--accent-deep); }
.profile-categories-section h3 { color: #FFFFFF; }

/* ═══════════════════════════════════════════════════════════════════
   SHINE — تأثيرات اللمعان للبطاقات الأساسية (الهيرو وبطاقات الأقسام)
   • طبقات داخل الخلفية نفسها، فلا تُمسّ المكعبات (::before/::after) ولا أي قاعدة أصلية
   • لمعة زجاجية ثابتة في الزاوية + مسحة ضوء تعبر البطاقة عند المرور أو اللمس
   • الهيرو: مسحة واحدة عند تحميل الصفحة أيضاً
   • حركة background-position فقط، وتُلغى مع تفضيل تقليل الحركة
   • للتراجع: احذف هذه الكتلة (من هذا التعليق حتى نهاية الملف)
   ═══════════════════════════════════════════════════════════════════ */

.hero-section,
.section-card,
.section-card.grade9-card,
.section-card.outstanding-card {
  --bq-shine: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.3) 50%, transparent 62%);
  --bq-gloss: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.22), transparent 55%);
  background-image: var(--bq-shine), var(--bq-gloss), var(--bq-base, var(--grad-primary));
  background-size: 260% 100%, 100% 100%, 100% 100%;
  background-position: 130% 0, 0 0, 0 0;
  background-repeat: no-repeat;
  transition: transform 0.2s ease, box-shadow 0.3s ease,
              background-position 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-section { --bq-base: var(--grad-primary); }
.section-card { --bq-base: var(--grad-olympiad); }
.section-card.grade9-card { --bq-base: var(--grad-grade9); }
.section-card.outstanding-card { --bq-base: var(--grad-outstanding); }

.hero-section:is(:hover, :active),
.section-card:is(:hover, :active) {
  background-position: -30% 0, 0 0, 0 0;
}

@keyframes bqShineOnce {
  from { background-position: 130% 0, 0 0, 0 0; }
  to   { background-position: -30% 0, 0 0, 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-section { animation: bqShineOnce 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   COMMUNITY FILTER BAR — شريط الفلتر في سطر أفقي واحد + زر الإضافة منفصل عنه
   • الشريط (.filter-buttons) كبسولة بسطر واحد لا يلتف، والنصوص كاملة دائماً
     (لا تُقصّ: الأزرار لا تنكمش، وعند الضيق يصبح الشريط قابلاً للسحب أفقياً بلا شريط تمرير)
   • زر + (.add-post-btn) دائرة مستقلة بجانب الشريط وليس داخله
   • للتراجع: احذف هذه الكتلة (من هذا التعليق حتى نهاية الملف)
   ═══════════════════════════════════════════════════════════════════ */

.filter-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  margin: 1.25rem 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.filter-buttons {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.filter-buttons::-webkit-scrollbar { display: none; }
.filter-btn {
  flex: 1 0 auto;
  white-space: nowrap;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  line-height: 1.2;
}
.filter-btn.active { background: var(--grad-primary); color: #FFFFFF; box-shadow: var(--shadow-1); }
.add-post-btn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.15rem;
  box-shadow: var(--shadow-2);
  transition: transform 0.3s cubic-bezier(0.34, 1.45, 0.64, 1), box-shadow 0.25s ease;
}
.add-post-btn:hover { transform: rotate(90deg) scale(1.08); box-shadow: var(--shadow-glow); }
.add-post-btn:active { transform: scale(0.92); }
@media (max-width: 480px) {
  .filter-bar { gap: 0.5rem; }
  .filter-buttons { padding: 0.3rem; gap: 0.15rem; }
  .filter-btn { padding: 0.45rem 0.7rem; font-size: 0.8rem; }
  .add-post-btn { width: 42px; height: 42px; }
}

/* ═══════════════════════════════════════════════════════════════════
   CARD PRESS — الحركة الموحدة على كل بطاقات الموقع (تحلّ محل انيميشن الضغط القديم)
   عند الضغط على أي بطاقة:
     • تكبر قليلاً (scale 1.03) ثم تعود بنعومة
     • يتحرك المكعبان في خلفيتها (translate/rotate/scale — لا تتعارض مع انجراف مكعبات الهيرو)
     • تعبرها مسحة اللمعان
   • التوهجات (box-shadow عند hover/الضغط) لم تُمسّ
   • البطاقات: 18 نوعاً = اللونية + الهيرو وبطاقات الأقسام + (random-card, random-quiz-card, strip-card, model-card, highlight-stat-card)
     وهذه الأخيرة تحتفظ بشكلها: مربعاتها شفافة وتظهر عند التفاعل فقط
   • حُذفت من قاعدة 23-F (scale 0.965) أصناف البطاقات؛ بقي ذلك للأزرار والخيارات
   • الحركة داخل prefers-reduced-motion: no-preference، وتحريك المربعات عند المرور داخل (hover: hover)
   • للتراجع: احذف هذه الكتلة (من هذا التعليق حتى التعليق التالي)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── بطاقات المجموعة الثالثة: تجهيز المربعات واللمعان بلا تغيير في شكلها الأصلي ─── */
:is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
:is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card)::before,
:is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  aspect-ratio: 1 / 1;
  border-radius: 24%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-cyan) 24%, transparent), color-mix(in srgb, var(--accent-primary) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 28%, transparent);
  opacity: 0;
}
:is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card)::before { width: clamp(44px, 34%, 96px); top: -20%; left: 6%; transform: rotate(20deg); }
:is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card)::after  { width: clamp(30px, 20%, 58px); bottom: -14%; left: 30%; transform: rotate(-16deg); }
:is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):nth-child(even)::before { left: auto; right: 6%; transform: rotate(-20deg); }
:is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):nth-child(even)::after  { left: auto; right: 30%; transform: rotate(16deg); }
:is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):is(:is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card)) {
  background-image: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--accent-cyan) 22%, transparent) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
}
.model-card.model-card {
  background-image: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--accent-cyan) 22%, transparent) 50%, transparent 62%), linear-gradient(135deg, var(--bg-surface), var(--accent-tint));
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
}

@media (prefers-reduced-motion: no-preference) {

  /* انتقالات موحّدة: ضغطة سريعة ثم عودة ناعمة */
  :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):is(:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card)) {
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                scale 0.5s cubic-bezier(0.34, 1.45, 0.64, 1),
                box-shadow 0.3s ease, border-color 0.25s ease, background-color 0.25s ease,
                background-position 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.25s ease, opacity 0.25s ease;
  }
  :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):is(:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card)):active {
    scale: 1.03;
    transition-duration: 0.35s, 0.16s, 0.3s, 0.25s, 0.25s, 0.9s, 0.25s, 0.25s;
  }
  .hero-section.hero-section:active, .section-card.section-card:active { scale: 1.02; }

  /* المربعات: انتقال ناعم على الخصائص المستقلة (تتراكب فوق transform والانجراف الموجود) */
  :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card)::before,
  :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card)::after,
  .hero-section .hero-content::after {
    transition: translate 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                rotate 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                scale 0.5s cubic-bezier(0.34, 1.45, 0.64, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease;
  }

  /* ضغط/لمس: مسحة اللمعان + المربعان يتحركان + (المجموعة الثالثة) تظهر المربعات */
  :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):is(:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card)):active { background-position: -30% 0; }
  .model-card.model-card:active { background-position: -30% 0, 0 0; }
  :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):active::before { translate: 16px 12px; rotate: 20deg; scale: 1.12; }
  :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):active::after  { translate: -14px -11px; rotate: -22deg; scale: 1.16; }
  :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):nth-child(even):active::before { translate: -16px 12px; rotate: -20deg; }
  :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):nth-child(even):active::after  { translate: 14px -11px; rotate: 22deg; }
  :is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):active::before,
  :is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):active::after { opacity: 1; }
  .hero-section:active .hero-content::after { translate: -12px -10px; rotate: 16deg; scale: 1.14; }

  /* مرور الماوس (للأجهزة التي تدعمه): نفس الحركة بقدر أخف */
  @media (hover: hover) {
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):is(:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card)):hover { background-position: -30% 0; }
    .model-card.model-card:hover { background-position: -30% 0, 0 0; }
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):hover::before { translate: 10px 8px; rotate: 14deg; }
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):hover::after  { translate: -9px -7px; rotate: -14deg; }
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):nth-child(even):hover::before { translate: -10px 8px; rotate: -14deg; }
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):nth-child(even):hover::after  { translate: 9px -7px; rotate: 14deg; }
    :is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):hover::before,
    :is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):hover::after { opacity: 1; }
    .hero-section:hover .hero-content::after { translate: -8px -6px; rotate: 10deg; }
    /* الضغط يغلب المرور في التحريك */
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):active::before { translate: 16px 12px; rotate: 20deg; scale: 1.12; }
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):active::after  { translate: -14px -11px; rotate: -22deg; scale: 1.16; }
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):nth-child(even):active::before { translate: -16px 12px; rotate: -20deg; }
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):nth-child(even):active::after  { translate: 14px -11px; rotate: 22deg; }
  }

  /* أجهزة اللمس: لمسة واحدة تُبقي البطاقة بحالة الضغط (عبر :hover الذي يثبّته المتصفح)
     حتى تلمس مكاناً آخر؛ ولمس بطاقة أخرى يعيد الأولى ويفعّل الثانية في اللحظة نفسها */
  @media (hover: none) {
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):is(:is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card)):hover { scale: 1.03; background-position: -30% 0; }
    .hero-section.hero-section:hover, .section-card.section-card:hover { scale: 1.02; }
    .model-card.model-card:hover { background-position: -30% 0, 0 0; }
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):hover::before { translate: 16px 12px; rotate: 20deg; scale: 1.12; }
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):hover::after  { translate: -14px -11px; rotate: -22deg; scale: 1.16; }
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):nth-child(even):hover::before { translate: -16px 12px; rotate: -20deg; }
    :is(.card, .info-card, .category-card, .division-card, .subject-card, .team-card, .department-card, .team-intro, .initiative-content, .interactive-feature-card, .profile-categories-section, .hero-section, .section-card, .random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):nth-child(even):hover::after  { translate: 14px -11px; rotate: 22deg; }
    :is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):hover::before,
    :is(.random-card, .random-quiz-card, .strip-card, .model-card, .highlight-stat-card):hover::after { opacity: 1; }
    .hero-section:hover .hero-content::after { translate: -12px -10px; rotate: 16deg; scale: 1.14; }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   POLISH — البريلودر (المربعات + hello) وأزرار صفحة الفريق
   • hello: إزالة drop-shadow الكبيرين (24px + 50px) عن الـSVG المتحرك لأنهما يُعاد حسابهما في كل إطار
     (السبب الرئيسي للتقطيع) واستبدالهما بهالة ثابتة خلف الكتابة تظهر بتلاشي opacity فقط (على الـGPU)
   • المربعات: تخطيط دوّار متناظر بلا تداخل ولا فراغات غير متساوية (كبيران 50% وصغيران 42% وفراغ 8%)
     مع مرحلة أكبر قليلاً على الموبايل، دون المساس بألوانها ولا بحركات الدخول والنبض
   • أزرار الفريق: بهوية أزرار الصفحة الرئيسية — مجموعة .quick-nav-buttons كأزرار الهيرو (.quick-btn)
     وباقي الأزرار كزر الاكتشاف (.discover-btn)
   • للتراجع: احذف هذه الكتلة (من هذا التعليق حتى نهاية الملف)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── hello: أداء ─── */
#bq-preloader {
  width: auto;
  height: auto;
  contain: layout paint;
  will-change: opacity;
}
#bq-preloader.hidden { will-change: auto; }
.bq-hello-svg {
  filter: none;
  transform: translateZ(0);
}
.bq-hello-wrap::before {
  content: "";
  position: absolute;
  inset: -40% -16%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 50%, color-mix(in srgb, var(--pl-c1) 34%, transparent), transparent),
    radial-gradient(closest-side at 72% 58%, color-mix(in srgb, var(--pl-c2) 22%, transparent), transparent);
  opacity: 0;
  animation: bqHelloHalo 2.2s cubic-bezier(0.45, 0, 0.25, 1) 0.15s forwards;
}
@keyframes bqHelloHalo { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .bq-hello-wrap::before { animation: none; opacity: 1; }
}

/* ─── المربعات: تخطيط دوّار متناظر بفراغ متساوٍ ─── */
.bq-logo-stage {
  width: clamp(96px, 26vw, 148px);
  height: clamp(96px, 26vw, 148px);
  contain: layout style;
}
.bq-cube {
  border-radius: 24%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.bq-cube-1 { width: 42%; height: 42%; top: 0;    left: 0;  }
.bq-cube-2 { width: 50%; height: 50%; top: 0;    right: 0; }
.bq-cube-3 { width: 50%; height: 50%; bottom: 0; left: 0;  }
.bq-cube-4 { width: 42%; height: 42%; bottom: 0; right: 0; }

/* ─── أزرار صفحة الفريق: بهوية أزرار الصفحة الرئيسية ───
   • .nav-team-btn وكل رابط/زر داخل بطاقات الفريق والأقسام = زر الاكتشاف (.discover-btn):
     كبسولة بتدرّج --btn-discover، نص أبيض عريض، رفع + توهج عند المرور
   • أزرار .quick-nav-buttons = أزرار الهيرو (.quick-btn): مستطيل بزوايا 0.85rem، تدرّجات
     olympiad ثم grade9 ثم outstanding بالتناوب، تكبير 1.02 + توهج عند المرور
   • المقاسات على الموبايل مطابقة لقيم الصفحة الرئيسية في كتلة MOBILE FIT */

.nav-team-btn,
:is(.team-intro, .team-card, .department-card) :is(a, button, .nav-team-btn):not(:has(img)):not(.team-img) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;
  min-height: 40px;
  border: none;
  border-radius: 999px;
  background: var(--btn-discover);
  background-clip: padding-box;
  color: #FFFFFF;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-team-btn:hover,
:is(.team-intro, .team-card, .department-card) :is(a, button, .nav-team-btn):not(:has(img)):not(.team-img):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
  color: #FFFFFF;
}

.quick-nav-buttons.quick-nav-buttons > :is(a, button, .nav-team-btn):is(a, button, .nav-team-btn) {
  display: flex;
  padding: 0.75rem 1rem;
  min-height: 46px;
  border-radius: 0.85rem;
  background: var(--btn-olympiad);
  font-size: 0.9rem;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.quick-nav-buttons.quick-nav-buttons > :nth-child(3n+2):is(a, button, .nav-team-btn) { background: var(--btn-grade9); }
.quick-nav-buttons.quick-nav-buttons > :nth-child(3n):is(a, button, .nav-team-btn) { background: var(--btn-outstanding); }
.quick-nav-buttons.quick-nav-buttons > :is(a, button, .nav-team-btn):is(a, button, .nav-team-btn):hover {
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .nav-team-btn,
  :is(.team-intro, .team-card, .department-card) :is(a, button, .nav-team-btn):not(:has(img)):not(.team-img) {
    min-height: 46px;
    padding: 0.7rem 1.6rem;
    font-size: 0.95rem;
  }
  .quick-nav-buttons.quick-nav-buttons > :is(a, button, .nav-team-btn):is(a, button, .nav-team-btn) {
    min-height: 54px;
    padding: 0.875rem 1.25rem;
    border-radius: 1rem;
    font-size: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BRIGHT AI — إصلاح حالة الأزرار على اللمس + تفعيل انيميشن الترحيب
   • على أجهزة اللمس لا تبقى حالة :hover (الرفع والتكبير والتوهج) عالقة بعد لمسة زر الإرفاق أو الإرسال
   • على أجهزة الماوس تبقى حالة المرور كما هي
   • للتراجع: احذف هذه الكتلة (من هذا التعليق حتى نهاية الملف)
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .bright-ai-card-form button:hover,
  .bright-ai-card-form button:hover i {
    transform: none;
    box-shadow: none;
  }
  .bright-ai-card-form .bright-ai-attach-btn:hover {
    background: var(--bai-soft, color-mix(in srgb, var(--text-primary) 7%, transparent));
    color: var(--text-muted);
  }
  .bright-ai-card-form button[type="submit"]:hover {
    transform: none;
    box-shadow: none;
  }
}
/* ============================================================
   تنسيقات بطاقة الشروط والخصوصية القابلة للطي وخانة الموافقة (Signup Page)
   متوافقة بالكامل مع متغيرات الثيمات السبعة
   ============================================================ */
.legal-accordion-box {
  background: var(--bg-sunken);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  margin: 1.25rem 0 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.legal-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  cursor: pointer;
  user-select: none;
  background: rgba(14, 165, 233, 0.05);
  transition: background 0.2s ease;
}

.legal-accordion-header:hover {
  background: rgba(14, 165, 233, 0.1);
}

.legal-accordion-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.legal-accordion-arrow {
  color: var(--accent-cyan);
  font-size: 0.9rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.legal-accordion-arrow.rotated {
  transform: rotate(180deg);
}

.legal-accordion-body {
  display: none;
  padding: 1rem;
  border-top: 1px solid var(--border-light);
  background: var(--bg-card);
}

.legal-tabs-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0.5rem;
}

.legal-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.legal-tab-btn.active {
  background: rgba(14, 165, 233, 0.15);
  color: var(--accent-cyan);
}

.legal-scroll-area {
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.65;
  padding-left: 6px;
}

.legal-scroll-area::-webkit-scrollbar {
  width: 5px;
}

.legal-scroll-area::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 10px;
}

.legal-external-links {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-light);
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  flex-wrap: wrap;
  gap: 6px;
}

.legal-external-links a {
  color: var(--accent-cyan);
  text-decoration: none;
  font-weight: 600;
}

.legal-external-links a:hover {
  text-decoration: underline;
}

.terms-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 1rem 0 1.25rem;
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.terms-checkbox-wrap input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent-cyan);
  cursor: pointer;
  flex-shrink: 0;
}
/* تنسيق العناوين والنصوص المحقونة تلقائياً داخل بطاقة الشروط في صفحة التسجيل */
.legal-scroll-area h2 {
  font-size: 0.95rem;
  color: var(--accent-cyan);
  margin: 0.85rem 0 0.35rem;
}
.legal-scroll-area p {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  line-height: 1.65;
}
.legal-scroll-area ul {
  padding-right: 1.25rem;
  margin: 0 0 0.6rem;
}
.legal-scroll-area li {
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  line-height: 1.6;
}