/* -----------------------------------------
       HOME PAGE STYLES (index.html)
       ----------------------------------------- */
    
        /* تصفير الهوامش وتأسيس التصميم */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            max-width: 100%;
            overflow-x: hidden;
        }

        body {
            font-family: 'IBM Plex Sans Arabic', 'Alexandria', sans-serif;
            /* خلفية بتدرج ضوئي شبكي ناعم للغاية من الملف المرجعي */
            background: 
                radial-gradient(at 0% 0%, hsla(253, 82%, 87%, 0.2) 0px, transparent 45%),
                radial-gradient(at 100% 0%, hsla(276, 100%, 92%, 0.2) 0px, transparent 45%);
            background-color: #fdf8ff;
            min-height: 100vh;
            position: relative;
        }

        /* -------------------------------------------------------------
           هيدر زجاجي عصري (Glassmorphism Navigation)
           ------------------------------------------------------------- */
        .st0 {
            background: rgba(253, 248, 255, 0.4); /* تخفيف الشفافية لتمرير عناصر الخلفية */
            backdrop-filter: blur(20px) saturate(180%); /* تقوية البلور المشبع لزيادة فخامة المظهر الزجاجي */
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.45);
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 64px;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 40px;
            box-shadow: 
                0 8px 32px 0 rgba(52, 0, 173, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.6); /* حافة داخلية مضيئة تبرز تأثير الزجاج */
            overflow: hidden;
            animation: slideDownHeader 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .header-bg-shape {
            position: absolute;
            right: 30px; /* تم إزاحة الشعار نحو اليسار ليدخل إلى مساحة الشاشة بالكامل */
            top: 0;
            width: 187px;
            height: 80px;
            z-index: 1;
            pointer-events: none;
            background-image: url('logo.png');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: right center;
            opacity: 1; /* تم زيادة الشفافية لتصبح 100% */
        }

        .st1 {
            background: rgba(52, 0, 173, 0.08); /* زجاج بنفسجي شفاف ناعم للغاية */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(52, 0, 173, 0.18);
            border-top: none;
            border-left: none; /* يتلاءم مع زاوية الهيدر */
            position: absolute;
            left: 0;
            top: 0;
            width: 180px;
            height: 64px;
            border-radius: 0px 0px 24px 0px;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD; /* نص بنفسجي للمقروئية والتناسق اللوني الفخم */
            font-weight: 700;
            font-size: 15px;
            letter-spacing: 0.5px;
            box-shadow: 
                0 4px 20px rgba(52, 0, 173, 0.02),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .st1:hover {
            background: rgba(52, 0, 173, 0.15);
            border-color: rgba(52, 0, 173, 0.3);
            color: #4400d9;
            box-shadow: 0 6px 25px rgba(52, 0, 173, 0.08);
            transform: translateY(0);
        }

        /* أزرار التنقل الفاخرة المضافة للهيدر */
        .nav-links {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); /* محاذاة في السنتر الفاخر للحاسوب */
            display: flex;
            align-items: center;
            gap: 40px;
            z-index: 10;
        }

        .nav-item {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-weight: 600;
            font-size: 14px;
            color: #484556;
            text-decoration: none;
            position: relative;
            padding: 8px 4px;
            transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
        }

        .nav-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: 16px;
            height: 3px;
            background: #3400AD; /* اللون المعتمد */
            border-radius: 2px;
            box-shadow: 0 0 8px rgba(52, 0, 173, 0.5);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .nav-item:hover {
            color: #3400AD;
            transform: translateY(-1px);
        }

        .nav-item:hover::after, .nav-item.active::after {
            transform: translateX(-50%) scaleX(1);
        }

        .nav-item.active {
            color: #3400AD;
        }

        /* -------------------------------------------------------------
           قسم الـ Hero المطلق التفاعلي لقسم الحاسوب
           ------------------------------------------------------------- */
        .hero-section {
            padding-top: 100px;
            padding-bottom: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 80vh; /* تم خفض الارتفاع قليلاً ليوحي للمستخدم بوجود بقية للصفحة في الأسفل */
            direction: ltr;
        }

        .hero-container {
            width: 1280px;
            height: 520px;
            position: relative;
            margin: 0 auto;
        }

        /* شارة "المنصة التعليمية الأولى" الفاخرة المعتمدة على الرموز */
        /* شارة رقم 1 في الجزائر الفاخرة والمطورة */
        .badge-st2 {
            background: transparent !important;
            border: none !important;
            position: absolute;
            left: 1007px;
            top: 10px;
            width: 220px;
            height: 38px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            box-shadow: none !important;
            direction: rtl;
            animation: badgeEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            cursor: default;
            overflow: hidden;
        }

        .badge-content-wrapper {
            display: flex;
            flex-direction: column;
            height: 76px;
            flex-shrink: 0;
            width: 100%;
            animation: badgeFlip 6s infinite cubic-bezier(0.77, 0, 0.175, 1);
        }

        .badge-state-1, .badge-state-2 {
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 0 16px;
            white-space: nowrap;
        }

        @keyframes badgeFlip {
            0%, 45% { transform: translateY(0); }
            50%, 95% { transform: translateY(-38px); }
            100% { transform: translateY(0); }
        }

        .badge-st2:hover {
            background: transparent !important;
            border: none !important;
            transform: translateY(-2px);
            box-shadow: none !important;
        }

        .badge-icon-premium {
            color: #1c1b20 !important;
            font-size: 18px;
            display: flex;
            align-items: center;
            filter: none !important;
            transition: color 0.3s ease;
        }

        .badge-text {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 13px !important;
            color: #1c1b20 !important;
            text-shadow: none !important;
            font-weight: 700 !important;
            letter-spacing: 0.3px;
            transition: color 0.3s ease;
        }

        body.dark-theme .badge-icon-premium {
            color: rgba(255, 255, 255, 0.9) !important;
        }

        body.dark-theme .badge-text {
            color: rgba(255, 255, 255, 0.9) !important;
        }

        /* -------------------------------------------------------------
           طريقة الكتابة الفاخرة للعنوان الرئيسي والثانوي (Premium Typography)
           ------------------------------------------------------------- */
        .st3-box {
            position: absolute;
            left: 450px; /* تم زحزحتها لليسار لتتسع للسطر الواحد بالكامل */
            top: 90px;
            width: 753px;
            height: 80px; /* ارتفاع أقل للسطر الواحد */
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0;
            direction: rtl;
            animation: boxEntranceRight 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        /* النمط الفاخر للعنوان: خط عريض داكن مع كلمة ملونة ومائلة في نفس السطر */
        .title-st3 {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-weight: 900;
            font-size: 64px; /* حجم خط أكبر وسميك كلاسيكي فخم */
            color: #1c1b20; /* لون داكن فاخر */
            line-height: 1.2;
            width: 100%;
            letter-spacing: -1px;
            white-space: nowrap; /* منع النزول لسطر جديد */
        }

        .title-st3 .highlight-text {
            color: #3400AD; /* اللون البنفسجي المعتمد */
            font-style: italic; /* تميز مائل فخم */
            font-weight: 900;
            margin-right: 12px;
            text-shadow: 0 4px 20px rgba(52, 0, 173, 0.15);
            display: inline-block;
            position: relative;
        }

        .st4-box {
            position: absolute;
            left: 450px;
            top: 185px; /* تم رفعه للأعلى لملاءمة العنوان ذو السطر الواحد */
            width: 753px;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0;
            direction: rtl;
            animation: boxEntranceRight 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        /* تصميم تحريري فاخر للاقتباس يبتعد عن الأشكال التقليدية المعتادة للذكاء الاصطناعي */
        .subtitle-st4 {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-weight: 500;
            font-size: 18.5px;
            color: #484556; /* لون جانبي هادئ */
            line-height: 1.6;
            width: 100%;
            padding: 14px 28px; /* هوامش داخلية تعطي مساحة للمحتوى */
            position: relative;
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 16px;
            border: 1px solid rgba(52, 0, 173, 0.05);
            box-shadow: 
                0 10px 30px rgba(52, 0, 173, 0.02),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            display: inline-flex;
            align-items: center;
        }

        /* خط عمودي تحريري رفيع يتلاشى تدريجياً للأسفل */
        .subtitle-st4::before {
            content: '';
            position: absolute;
            right: 0;
            top: 15%;
            height: 70%;
            width: 3px;
            background: linear-gradient(to bottom, #1ED6AB 0%, rgba(30, 214, 171, 0.1) 100%);
            border-radius: 2px;
        }

        /* نقطة متوهجة ناعمة تضفي لمسة بشرية مصممة بعناية */
        .subtitle-st4::after {
            content: '';
            position: absolute;
            right: -2px;
            top: 12%;
            width: 7px;
            height: 7px;
            background: #1ED6AB;
            border-radius: 50%;
            box-shadow: 0 0 8px #1ED6AB;
        }

        /* -------------------------------------------------------------
           بقية العناصر والأزرار والوسائط
           ------------------------------------------------------------- */
        .social-circle {
            width: 72px;
            height: 72px;
            background: rgba(255, 255, 255, 0.8);
            border: 1.5px solid rgba(52, 0, 173, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD; /* بنفسجي مالي ليتطابق فخامة مع ألوان المنصة */
            font-family: 'Outfit', 'Cairo', sans-serif;
            font-weight: 800;
            font-size: 15px;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(52, 0, 173, 0.02);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            animation: popInButtons 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            pointer-events: auto;
        }

        .social-circle.st6 { position: absolute; left: 682px; top: 291px; } /* تم الترحيل لليسار لمنع التداخل */
        .social-circle.st5 { position: absolute; left: 778px; top: 291px; } /* تم الترحيل لليسار لمنع التداخل */
        .social-circle.st7 { position: absolute; left: 586px; top: 291px; } /* زر فيسبوك */
        .social-circle.st8 { position: absolute; left: 490px; top: 291px; } /* زر تيك توك */

        .social-circle:hover {
            transform: translateY(-5px) scale(1.05);
            background: #3400AD;
            color: #ffffff;
            border-color: #3400AD;
            box-shadow: 0 8px 25px rgba(52, 0, 173, 0.2);
        }

        .btn-st0 {
            position: absolute;
            left: 874px; /* تحريك لليسار قليلاً لموازنة العرض الجديد للزر */
            top: 290px;
            width: 330px; /* زيادة العرض ليتناسق مع طول النص الجديد */
            height: 75px;
            background: #3400AD; /* تم استخدام البنفسجي الصريح المعتمد */
            color: #ffffff;
            font-family: 'Cairo', sans-serif;
            font-weight: 800;
            font-size: 19px;
            border-radius: 38px;
            border: none;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(52, 0, 173, 0.25);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            animation: popInButtons 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            pointer-events: auto;
        }

        .btn-st0::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.6s ease;
        }

        .btn-st0:hover::before { left: 100%; }
        .btn-st0:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 15px 40px rgba(52, 0, 173, 0.35);
        }

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

        .hero-visual-assets {
            position: absolute;
            left: 0;
            top: 0;
            width: 480px;
            height: 480px;
            z-index: 1;
            pointer-events: none;
        }

        .hero-actions {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .hero-socials {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .media-glow {
            position: absolute;
            left: 60px;
            top: 20px;
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, rgba(92, 49, 248, 0.12) 0%, rgba(52, 0, 173, 0) 70%);
            z-index: 1;
            pointer-events: none;
            animation: pulseGlow 8s infinite alternate;
        }

        .droplets-image1 {
            position: absolute;
            left: 71px;
            top: 12px;
            width: 408px;
            height: 408px;
            background-image: url('image1.png');
            background-repeat: no-repeat;
            background-size: contain;
            z-index: 4;
            pointer-events: none;
            opacity: 0.95;
            animation: floatDroplets 7s ease-in-out infinite;
        }

        .card-st7 {
            position: absolute;
            left: 76px;
            top: 36px;
            width: 280px;
            height: 340px;
            background: #3400AD; /* بنفسجي صريح معتمد */
            border-radius: 83px;
            z-index: 2;
            box-shadow: 0 25px 50px rgba(52, 0, 173, 0.22);
            animation: cardEntrance 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* حاوية الكروموسوم (تحمل أنيميشن الدخول والطفو) */
        .dna-wrapper {
            position: absolute;
            left: 56px; /* ضبط الإزاحة ليظهر متناسقاً تماماً بعد تصغير الحجم */
            top: 16px;
            width: 420px; /* تصغير حجم الكروموزوم ليطابق الصورة */
            height: 420px;
            z-index: 3;
            pointer-events: none; /* تمرير الأحداث للداخل */
            opacity: 0;
            animation: dnaEntrance 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards, floatDNA 5.5s ease-in-out infinite 2.2s;
        }

        /* الكروموسوم (DNA) في المقدمة مع أنيميشن التمرير السوفت */
        .dna-image {
            width: 100%;
            height: 100%;
            background-image: url('image.png');
            background-repeat: no-repeat;
            background-size: contain;
            pointer-events: auto; /* تمكين التفاعل مع مؤشر الفأرة */
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease; /* انتقال سلس فائق النعومة */
            filter: drop-shadow(0 20px 40px rgba(52, 0, 173, 0.22));
        }

        /* أنيميشن التفاعل عند تمرير الفأرة (Hover) على الكروموسوم لليمين والأعلى */
        .dna-image:hover {
            cursor: grab;
            animation-play-state: paused; /* إيقاف الطفو مؤقتاً لإظهار الإزاحة الصريحة */
            transform: translate(25px, -15px) scale(1.05); /* إزاحة ناعمة لليمين وللأعلى مع تكبير خفيف */
            filter: drop-shadow(0 30px 60px rgba(92, 49, 248, 0.45)) saturate(1.2);
        }

        /* -------------------------------------------------------------
           قسم الميزات والخصائص الإبداعي (Premium Features Grid)
           ------------------------------------------------------------- */
        .features-section {
            padding: 20px 24px 40px 24px; /* تقليص المسافات بين السكشنز */
            max-width: 1280px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
        }

        .features-header {
            text-align: center;
            margin-bottom: 40px; /* تقليص المسافة بين العنوان والبطاقات */
            animation: badgeEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .features-title {
            font-family: 'IBM Plex Sans Arabic', sans-serif; /* الخط الفخم المعتمد في الهوية */
            font-size: 34px;
            color: #1c1b20;
            font-weight: 700;
            margin-bottom: 14px;
            position: relative;
            display: inline-block;
            letter-spacing: -0.5px;
        }

        .features-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, transparent, #3400AD 50%, transparent);
            border-radius: 2px;
        }

        .features-subtitle {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 16px;
            color: #6252a1;
            font-weight: 500;
            margin-top: 18px;
            opacity: 0.85;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            perspective: 1500px; /* تمكين المنظور ثلاثي الأبعاد للشبكة */
        }

        /* حاوية البطاقة الداعمة للدوران ثلاثي الأبعاد */
        .feature-card-wrapper {
            height: 380px;
            perspective: 1500px;
            background: transparent;
        }

        .feature-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            transform-style: preserve-3d;
        }

        .feature-card-wrapper:hover .feature-card-inner {
            transform: rotateY(180deg);
        }

        /* الوجهين الأمامي والخلفي للبطاقة */
        .feature-card-front, .feature-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 28px;
            box-shadow: 
                0 10px 30px rgba(52, 0, 173, 0.01),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }

        /* الوجه الأمامي (يحتوي على النص الحالي والأيقونة) */
        .feature-card-front {
            background: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(52, 0, 173, 0.06);
            padding: 36px 28px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: right;
            left: 0; top: 0;
        }

        /* تأثير التوهج الملون بالخلفية عند التمرير للوجه الأمامي */
        .feature-card-front::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 100% 0%, rgba(30, 214, 171, 0.08) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 1;
        }

        .feature-card-wrapper:hover .feature-card-front {
            border-color: rgba(52, 0, 173, 0.22);
            box-shadow: 
                0 25px 50px rgba(52, 0, 173, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .feature-card-wrapper:hover .feature-card-front::before {
            opacity: 1;
        }

        /* الوجه الخلفي (سيملأ بالصور الفاخرة لاحقاً، حالياً تدرج زجاجي مبدئي فخم) */
        .feature-card-back {
            background: rgba(52, 0, 173, 0.06);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(52, 0, 173, 0.18);
            transform: rotateY(180deg);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 16px;
            left: 0; top: 0;
        }

        .feature-card-back-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
            opacity: 0.9;
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .feature-card-wrapper:hover .feature-card-back-img {
            transform: scale(1.05);
        }

        .feature-icon-wrapper {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            background: rgba(52, 0, 173, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            color: #3400AD;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            z-index: 2;
        }

        .feature-icon-wrapper svg {
            width: 24px;
            height: 24px;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .feature-card:hover .feature-icon-wrapper {
            background: #3400AD;
            color: #ffffff;
            box-shadow: 0 8px 25px rgba(52, 0, 173, 0.25);
        }

        .feature-card:hover .feature-icon-wrapper svg {
            transform: scale(1.1) rotate(3deg);
        }

        .feature-badge {
            font-family: 'Alexandria', sans-serif;
            font-size: 10px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 12px;
            margin-bottom: 12px;
            display: inline-block;
            letter-spacing: 0.3px;
            z-index: 2;
        }

        .badge-purple {
            background: rgba(52, 0, 173, 0.08);
            color: #3400AD;
        }

        .badge-red {
            background: rgba(255, 23, 23, 0.08);
            color: #FF1717;
        }

        .badge-green {
            background: rgba(30, 214, 171, 0.08);
            color: #1ED6AB;
            box-shadow: 0 0 10px rgba(30, 214, 171, 0.1);
        }

        .feature-card-title {
            font-family: 'Cairo', sans-serif;
            font-size: 19px;
            font-weight: 800;
            color: #1c1b20;
            margin-bottom: 12px;
            z-index: 2;
            letter-spacing: -0.3px;
        }

        .feature-card-desc {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 14px;
            color: #484556;
            line-height: 1.6;
            z-index: 2;
            opacity: 0.9;
        }

        /* -------------------------------------------------------------
           قسم الخط الزمني والإنجازات (Premium Achievements Timeline)
           ------------------------------------------------------------- */
        .timeline-section {
            background-color: #ffffff; /* عزل القسم بخلفية بيضاء كاملة من الحدود للحدود */
            width: 100%;
            padding: 40px 0; /* تقليص المسافات بين السكشنز */
            position: relative;
            z-index: 10;
            border-top: 1px solid rgba(52, 0, 173, 0.05); /* حد علوي خفيف جداً لتأكيد العزل البصري */
        }

        .timeline-container {
            display: flex;
            gap: 28px;
            direction: rtl;
            align-items: stretch; /* تجعل الراية تتمدد وتطابق كامل ارتفاع محتوى الكروت */
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px; /* الحشوة الجانبية داخل الحاوية المحددة */
        }

        /* الراية الرأسية اليمنى "السباقون دوماً" الملتزمة بتفاصيل الصورة بدقة */
        .timeline-banner {
            background: #1a0063; /* لون أزرق بنفسجي ملكي داكن مطابق للصورة */
            width: 170px; /* عرض واسع ومناسب لاحتضان النصوص والخطوط الزخرفية */
            border-radius: 28px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 20px 45px rgba(26, 0, 99, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            padding: 40px 10px;
            flex-shrink: 0;
            transition: all 0.4s ease;
        }

        .timeline-banner:hover {
            box-shadow: 0 25px 55px rgba(26, 0, 99, 0.25);
            transform: translateY(-2px);
        }

        /* رقم "7" كبير داكن في الخلفية كشكل زخرفي هندسي مطابق للصورة */
        .timeline-banner-bg {
            position: absolute;
            font-family: 'Outfit', sans-serif;
            font-size: 280px; /* رقم ضخم يملأ مساحة الراية بالكامل */
            font-weight: 800;
            color: rgba(25, 0, 115, 0.6); /* درجة داكنة توفر تباينًا هندسيًا صامتًا وفخمًا */
            left: 5%;
            top: -20px;
            pointer-events: none;
            z-index: 1;
            user-select: none;
            line-height: 1;
        }

        /* تنسيق نصوص الراية والخطوط الزخرفية مطابقة للصورة حرفياً */
        .timeline-banner-text {
            display: flex;
            flex-direction: column;
            align-items: center; /* توسيط عمودي */
            color: #ffffff;
            font-family: 'Cairo', sans-serif;
            z-index: 2;
            width: 100%;
            padding: 0 15px;
        }

        .banner-title {
            font-size: 24px;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.5px;
        }

        .banner-subtitle {
            font-size: 32px;
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: -0.5px;
            margin-top: 2px;
        }

        /* الحافة البيضاء الزخرفية في الأسفل المطابقة للصورة حرفياً */
        .banner-corner-indicator {
            width: 38px;
            height: 16px;
            border-right: 3px solid #ffffff;
            border-bottom: 3px solid #ffffff;
            margin-top: 15px;
            align-self: flex-start;
            margin-right: 18px; /* محاذاة لليمين متناسقة */
        }

        /* حاوية المحتوى الأيسر للخط الزمني */
        .timeline-content-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .timeline-title-box {
            display: flex;
            align-items: baseline; /* محاذاة النص على خط الأساس البصري */
            justify-content: space-between; /* دفع التوقيع لأقصى اليسار والعنوان لأقصى اليمين */
            text-align: right;
            margin-bottom: 35px;
            padding: 0 10px 0 15px; /* حشوة جانبية لحماية النصوص من الحواف */
        }

        .timeline-main-title {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 32px;
            font-weight: 700;
            color: #1c1b20;
            position: relative;
            display: inline-block;
        }

        .timeline-main-title::after {
            content: '';
            position: absolute;
            bottom: -6px;
            right: 0;
            width: 50px;
            height: 3px;
            background: #1ED6AB;
            border-radius: 2px;
            box-shadow: 0 0 6px #1ED6AB;
        }

        .timeline-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            position: relative;
        }

        /* كرت الإنجاز الفاخر */
        .timeline-card {
            background: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(52, 0, 173, 0.06);
            border-radius: 24px;
            padding: 32px 20px 24px 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            position: relative;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            min-height: 250px;
            box-shadow: 
                0 10px 30px rgba(52, 0, 173, 0.01),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            cursor: default;
        }

        /* رقم تسلسلي كبير وخافت جداً بالخلفية لزيادة عمق التصميم */
        .timeline-card::after {
            content: attr(data-index);
            position: absolute;
            top: 15px;
            left: 20px;
            font-family: 'Outfit', sans-serif;
            font-size: 72px;
            font-weight: 800;
            color: rgba(52, 0, 173, 0.018);
            pointer-events: none;
            z-index: 1;
        }

        .timeline-card:hover {
            transform: translateY(-6px);
            border-color: rgba(52, 0, 173, 0.18);
            box-shadow: 
                0 20px 40px rgba(52, 0, 173, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .timeline-card-text {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 14.5px;
            color: #484556;
            line-height: 1.7;
            font-weight: 500;
            margin-bottom: 24px;
            flex-grow: 1;
            z-index: 2;
            opacity: 0.95;
        }

        /* كبسولة التاريخ المضيئة والفاخرة بالأسفل */
        .timeline-card-date {
            font-family: 'Cairo', sans-serif;
            font-size: 12.5px;
            font-weight: 700;
            color: #3400AD;
            background: rgba(52, 0, 173, 0.05);
            padding: 6px 18px;
            border-radius: 20px;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            border: 1px solid rgba(52, 0, 173, 0.05);
            z-index: 2;
            letter-spacing: 0.3px;
        }

        .timeline-card:hover .timeline-card-date {
            background: #3400AD;
            color: #ffffff;
            border-color: #3400AD;
            box-shadow: 0 4px 15px rgba(52, 0, 173, 0.25);
        }

        /* توقيع الأستاذ بهاء الدين عبد الله بالخط العثماني الفاخر أمام العنوان */
        .timeline-signature {
            font-family: 'Amiri Quran', 'Amiri', 'Traditional Arabic', serif;
            font-size: 23px; /* الخط العثماني يظهر غاية في الفخامة بهذا الحجم */
            color: #b0aec2; /* لون رمادي فاتح فاخر وراقي */
            font-weight: normal;
            user-select: none;
            cursor: default;
            transition: color 0.3s ease;
            display: inline-block;
            margin-right: 18px; /* إزاحة مثالية متناسقة بجانب العنوان */
            line-height: 1;
        }

        .timeline-signature:hover {
            color: #9290a6;
        }

        /* -------------------------------------------------------------
           تأثيرات الحركة والأنيميشن الاحترافية
           ------------------------------------------------------------- */
        @keyframes slideDownHeader {
            from { transform: translateY(-100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes boxEntranceRight {
            from { transform: translateX(50px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

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

        @keyframes popInButtons {
            from { transform: scale(0.9) translateY(20px); opacity: 0; }
            to { transform: scale(1) translateY(0); opacity: 1; }
        }

        @keyframes cardEntrance {
            from { transform: scale(0.9) rotate(-3deg); opacity: 0; }
            to { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        @keyframes pulseGreen {
            0% { box-shadow: 0 0 5px #1ED6AB, 0 0 10px rgba(30, 214, 171, 0.4); }
            100% { box-shadow: 0 0 15px #1ED6AB, 0 0 30px rgba(30, 214, 171, 0.8); }
        }

        @keyframes pulseGlow {
            0% { transform: scale(0.95); opacity: 0.8; }
            100% { transform: scale(1.05); opacity: 1; }
        }

        @keyframes floatDNA {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-14px) rotate(1.5deg); }
        }

        @keyframes dnaEntrance {
            0% {
                transform: translateY(180px) rotate(-35deg) scale(0.3);
                opacity: 0;
                filter: blur(15px);
            }
            100% {
                transform: translateY(0px) rotate(0deg) scale(1);
                opacity: 1;
                filter: blur(0px);
            }
        }

        @keyframes floatDroplets {
            0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
            50% { transform: translateY(10px) translateX(-6px) rotate(-1deg); }
        }

        /* أنيميشن الإزاحة الناعمة للكروموزوم عند تمرير الفأرة (Soft Float Hover) */
        @keyframes softHoverDNA {
            0%, 100% {
                transform: translateY(0px) rotate(0deg) scale(1.05);
            }
            50% {
                transform: translateY(-8px) rotate(1.5deg) scale(1.05); /* إزاحة وحركة صعود ناعمة للغاية */
            }
        }

        /* أنيميشن الظهور الفاخر لعناصر الصفحة (Reveal Animations) */
        .reveal-element {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal-element.revealed {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        .reveal-left {
            opacity: 0;
            transform: translateX(40px);
            transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal-left.revealed {
            opacity: 1 !important;
            transform: translateX(0) !important;
        }

        .reveal-right {
            opacity: 0;
            transform: translateX(-40px);
            transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal-right.revealed {
            opacity: 1 !important;
            transform: translateX(0) !important;
        }

        .reveal-parent > * {
            opacity: 0; transform: translateY(40px);
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal-parent.revealed > * {
            opacity: 1;
            transform: translateY(0);
        }

        .reveal-parent.revealed > *:nth-child(1) { transition-delay: 0.1s; }
        .reveal-parent.revealed > *:nth-child(2) { transition-delay: 0.2s; }
        .reveal-parent.revealed > *:nth-child(3) { transition-delay: 0.3s; }
        .reveal-parent.revealed > *:nth-child(4) { transition-delay: 0.4s; }
        .reveal-parent.revealed > *:nth-child(5) { transition-delay: 0.5s; }
        .reveal-parent.revealed > *:nth-child(6) { transition-delay: 0.6s; }
        .reveal-parent.revealed > *:nth-child(7) { transition-delay: 0.7s; }
        .reveal-parent.revealed > *:nth-child(8) { transition-delay: 0.8s; }

        /* -------------------------------------------------------------
           التجاوب الكامل والتكيف مع شاشات الهواتف والتابلت (Legendary UI)
           ------------------------------------------------------------- */
        @media (max-width: 1024px) {
            .hero-section {
                direction: rtl;
                padding-top: 140px;
                padding-bottom: 80px;
                height: auto;
                min-height: auto;
            }

            .hero-container {
                width: 100%;
                min-height: 520px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 20px;
                position: relative;
            }

            /* Reset absolutes for text elements */
            .badge-st2, .st3-box, .st4-box {
                position: relative;
                left: auto;
                top: auto;
                margin: 0;
                z-index: 2;
            }

            .badge-st2 { margin-bottom: 8px; }
            
            .st3-box { 
                width: 100%; 
                height: auto; 
                min-height: auto; 
                padding: 0; 
                justify-content: center;
            }
            .title-st3 {
                font-size: 46px;
                text-align: center;
                line-height: 1.3;
            }
            
            .st4-box { 
                width: 100%; 
                max-width: 600px;
                height: auto; 
                min-height: auto; 
                padding: 0 16px; 
                justify-content: center;
            }
            .subtitle-st4 {
                font-size: 18px;
                text-align: center;
                border: none;
                padding: 12px;
                background: transparent;
            }
            .subtitle-st4::before { display: none; }

            /* Action Buttons Grouping on Tablet */
            .hero-actions {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                width: 100% !important;
                height: auto !important;
                display: flex !important;
                flex-direction: row-reverse !important; /* Main button right, socials left */
                align-items: center !important;
                justify-content: center !important;
                gap: 12px !important;
                margin-top: 16px !important;
                z-index: 10 !important;
                pointer-events: auto !important;
            }

            .btn-st0 {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                margin: 0 !important;
                max-width: 320px;
                z-index: 10;

            }

            .hero-socials {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                width: auto !important;
                height: auto !important;
                display: flex !important;
                gap: 12px !important;
                z-index: 10 !important;
                pointer-events: auto !important;
            }

            .social-circle {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                margin: 0 !important;

            }

            /* Text layer staggered animations */
            .badge-st2, .st3-box, .st4-box, .hero-actions {
                opacity: 0;
                animation: mobileTextAppear 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }

            .badge-st2 { animation-delay: 1.2s !important; }
            .st3-box { animation-delay: 1.35s !important; }
            .st4-box { animation-delay: 1.5s !important; }
            .hero-actions { animation-delay: 1.65s !important; }

            /* Visual Assets wrapper centered on Tablet */
            .hero-visual-assets {
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                width: 480px !important;
                height: 480px !important;
                transform: translate(-50%, -50%) !important;
                z-index: 0 !important;
                pointer-events: none;
                animation: newDnaIntro 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
            }

            /* Keep all inner elements absolute and centered within the wrapper */
            .media-glow, .droplets-image1, .card-st7, .dna-wrapper {
                position: absolute !important;
                display: block !important;
                margin: 0 !important;
            }
            
            .media-glow {
                left: 30px !important;
                top: 30px !important;
                width: 420px !important;
                height: 420px !important;
                z-index: 1;
            }
            
            .card-st7 {
                left: 100px !important;
                top: 70px !important;
                width: 280px !important;
                height: 340px !important;
                z-index: 2;
                animation: cardEntrance 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }
            
            .dna-wrapper {
                left: 30px !important;
                top: 30px !important;
                width: 420px !important;
                height: 420px !important;
                z-index: 3;
                animation: dnaEntrance 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards, floatDNA 5.5s ease-in-out infinite 2.2s;
            }
            
            .droplets-image1 {
                left: 36px !important;
                top: 36px !important;
                width: 408px !important;
                height: 408px !important;
                z-index: 4;
                animation: floatDroplets 7s ease-in-out infinite;
            }

            .features-section {
                padding: 80px 24px;
            }
            .features-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }
            .timeline-container {
                flex-direction: column;
                gap: 24px;
            }
            .timeline-banner {
                width: 100%;
                height: auto;
                flex-direction: row;
                padding: 24px;
                border-radius: 20px;
                justify-content: space-between;
            }
            .timeline-banner-text {
                align-items: flex-start;
            }
            .banner-title { font-size: 20px; }
            .banner-subtitle { font-size: 26px; }
            .timeline-banner-bg { display: none; }
            .banner-corner-indicator { margin-top: 0; align-self: center; }
            .timeline-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @keyframes newDnaIntro {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.6) rotate(-15deg);
                filter: blur(15px);
            }
            30% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.05) rotate(5deg);
                filter: blur(0px);
            }
            50% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.02) rotate(0deg);
                filter: blur(0px);
            }
            75% {
                opacity: 0.65;
                transform: translate(-50%, -50%) scale(0.9);
                filter: blur(4px);
            }
            100% {
                opacity: 0.35;
                transform: translate(-50%, -50%) scale(0.85);
                filter: blur(8px);
            }
        }

        @keyframes newDnaIntroMobile {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.2) rotate(-15deg);
                filter: blur(15px);
            }
            30% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(0.85) rotate(5deg);
                filter: blur(0px);
            }
            50% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
                filter: blur(0px);
            }
            75% {
                opacity: 0.6;
                transform: translate(-50%, -50%) scale(0.7);
                filter: blur(4px);
            }
            100% {
                opacity: 0.3;
                transform: translate(-50%, -50%) scale(0.65);
                filter: blur(8px);
            }
        }

        @keyframes mobileTextAppear {
            0% { opacity: 0; transform: translateY(40px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 768px) {
            .hero-section {
                padding-top: 140px;
                padding-bottom: 60px;
                position: relative;
                overflow: hidden;
            }
            
            .hero-container {
                min-height: 580px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 16px;
                position: relative;
                padding: 40px 16px;
            }

            /* Text layer staggered animations for mobile */
            .badge-st2, .st3-box, .st4-box, .hero-actions {
                position: relative;
                z-index: 2;
                opacity: 0;
                animation: mobileTextAppear 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }
            
            .badge-st2 { animation-delay: 1.2s !important; }
            .st3-box { animation-delay: 1.35s !important; }
            .st4-box { animation-delay: 1.5s !important; }
            .hero-actions { animation-delay: 1.65s !important; }

            .title-st3 {
                font-size: 38px;
            }
            .subtitle-st4 {
                font-size: 16px;
                line-height: 1.6;
            }
            
            /* Visual Assets wrapper centered on Mobile */
            .hero-visual-assets {
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                width: 480px !important;
                height: 480px !important;
                z-index: 0 !important;
                pointer-events: none;
                animation: newDnaIntroMobile 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
            }

            .media-glow, .droplets-image1, .card-st7, .dna-wrapper {
                position: absolute !important;
                display: block !important;
                margin: 0 !important;
            }

            .media-glow {
                left: 30px !important;
                top: 30px !important;
                width: 420px !important;
                height: 420px !important;
            }
            
            .card-st7 {
                left: 100px !important;
                top: 70px !important;
                width: 280px !important;
                height: 340px !important;
                animation: cardEntrance 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }
            
            .dna-wrapper {
                left: 30px !important;
                top: 30px !important;
                width: 420px !important;
                height: 420px !important;
                animation: dnaEntrance 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards, floatDNA 5.5s ease-in-out infinite 2.2s;
            }
            
            .droplets-image1 {
                left: 36px !important;
                top: 36px !important;
                width: 408px !important;
                height: 408px !important;
                animation: floatDroplets 7s ease-in-out infinite;
            }

            /* Responsive buttons column layout for very small screens */
            .hero-actions {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                width: 100% !important;
                height: auto !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 16px !important;
                margin-top: 16px !important;
                z-index: 10 !important;
                pointer-events: auto !important;
            }

            .btn-st0 {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                margin: 0 !important;
                max-width: 92%;
                font-size: 17px;
                height: 70px;
                z-index: 10;

            }

            .hero-socials {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                width: auto !important;
                height: auto !important;
                display: flex !important;
                flex-direction: row !important;
                gap: 12px !important;
                z-index: 10 !important;
                pointer-events: auto !important;
            }

            .social-circle {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                margin: 0 !important;
                width: 64px;
                height: 64px;

            }

            .features-section {
                padding: 60px 16px;
            }
            .features-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .features-title {
                font-size: 26px;
            }
            .feature-card-front, .feature-card-back {
                padding: 32px 24px;
            }
            .feature-card-wrapper {
                height: 320px;
            }
            .timeline-grid {
                grid-template-columns: 1fr;
            }
            .timeline-card {
                min-height: auto;
                padding: 32px 24px;
            }
            .timeline-title-box {
                flex-direction: column;
                align-items: center;
                gap: 16px;
            }
            .timeline-signature {
                margin-right: 0;
            }
        }
        /* -------------------------------------------------------------
           قسم آراء وتجارب التلاميذ (ماذا قال تلاميذنا عنا؟)
           ------------------------------------------------------------- */
        .testimonials-section {
            padding: 40px 0; /* تقليص المسافات بين السكشنز */
            background: linear-gradient(180deg, #fdf8ff 0%, #f6eeff 100%);
            position: relative;
            overflow: hidden;
            width: 100%;
        }

        .testimonials-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 40px;
            display: flex;
            flex-direction: column;
            gap: 48px;
            position: relative;
            z-index: 5;
        }

        .testimonials-header {
            text-align: center;
            margin-bottom: 40px;
            width: 100%;
        }

        .testimonials-title {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 34px;
            color: #1c1b20;
            font-weight: 700;
            margin-bottom: 14px;
            position: relative;
            display: inline-block;
            letter-spacing: -0.5px;
        }

        .testimonials-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, transparent, #3400AD 50%, transparent);
            border-radius: 2px;
        }

        .testimonials-subtitle {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 16px;
            color: #6252a1;
            font-weight: 500;
            margin-top: 18px;
            opacity: 0.85;
            text-align: center;
        }

        .reviews-badge {
            background: linear-gradient(135deg, rgba(52, 0, 173, 0.06) 0%, rgba(30, 214, 171, 0.06) 100%);
            border: 1px solid rgba(52, 0, 173, 0.18);
            border-radius: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 6px 18px;
            box-shadow: 0 4px 15px rgba(52, 0, 173, 0.03);
            direction: rtl;
            margin: 18px auto 0 auto;
        }

        .reviews-badge-icon {
            color: #1ED6AB;
            font-size: 18px;
        }

        .reviews-badge-text {
            font-family: 'Alexandria', sans-serif;
            font-size: 13px;
            color: #3400AD;
            font-weight: 700;
        }

        /* حاوية السلايدر */
        .slider-wrapper {
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            direction: ltr; /* لسهولة سحب الماوس بالاتجاه الطبيعي */
        }

        .slider-container {
            width: 100%;
            overflow: hidden;
            padding: 20px 0;
            cursor: grab;
        }

        .slider-container:active {
            cursor: grabbing;
        }

        .slider-track {
            display: flex;
            gap: 30px;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            width: max-content;
            direction: rtl; /* إرجاع الترتيب الداخلي للغة العربية */
        }

        /* كرت الرأي الزجاجي الفاخر */
        .testimonial-card {
            flex-shrink: 0 !important;
            width: 380px;
            min-height: 250px;
            background: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 24px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start !important;
            gap: 16px !important;
            box-shadow: 
                0 10px 30px rgba(52, 0, 173, 0.03),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            position: relative;
            overflow: hidden;
            user-select: none;
        }

        .testimonial-card:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: rgba(52, 0, 173, 0.25);
            box-shadow: 
                0 20px 40px rgba(52, 0, 173, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .card-glow {
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(30, 214, 171, 0.15) 0%, transparent 70%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .testimonial-card:hover .card-glow {
            opacity: 1;
        }

        .student-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            direction: rtl;
        }

        .student-name {
            font-family: 'Cairo', sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #1c1b20;
        }

        .student-grade {
            font-family: 'Alexandria', sans-serif;
            font-size: 12px;
            font-weight: 700;
            color: #3400AD;
            background: rgba(52, 0, 173, 0.06);
            padding: 4px 12px;
            border-radius: 12px;
            border: 1px solid rgba(52, 0, 173, 0.1);
        }

        .student-review {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 15px;
            font-weight: 500;
            color: #484556;
            line-height: 1.7;
            text-align: justify;
            direction: rtl;
        }

        /* أزرار التنقل للسلايدر */
        .slider-nav-btn {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(52, 0, 173, 0.15);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(52, 0, 173, 0.05);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }

        .slider-nav-btn:hover {
            background: #3400AD;
            color: #ffffff;
            border-color: #3400AD;
            box-shadow: 0 8px 25px rgba(52, 0, 173, 0.25);
        }

        .prev-btn { right: -25px; }
        .next-btn { left: -25px; }

        /* الحاوية السفلية للتعليقات بدون علامة بكالوريا */
        .non-graded-container {
            width: 100%;
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 20px;
            padding: 24px;
            display: flex;
            align-items: center;
            gap: 24px;
            box-shadow: 0 8px 32px rgba(52, 0, 173, 0.02);
            direction: rtl;
            overflow: hidden;
        }

        .non-graded-header {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
            border-left: 2px solid rgba(52, 0, 173, 0.2);
            padding-left: 24px;
        }

        .non-graded-icon {
            color: #1ED6AB;
            font-size: 24px;
        }

        .non-graded-title {
            font-family: 'Cairo', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: #3400AD;
            white-space: nowrap;
        }

        .non-graded-track-wrapper {
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        .non-graded-track {
            display: flex;
            gap: 40px;
            width: max-content;
            animation: marquee 25s linear infinite;
        }

        .non-graded-item {
            -webkit-text-size-adjust: 100% !important;
            text-size-adjust: 100% !important;
            font-size: 13px !important;
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 14px;
            color: #484556;
            white-space: nowrap;
        }

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

        /* زر استعراض كامل الآراء */
        .view-all-wrapper {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 10px;
        }

        .btn-view-all {
            background: transparent;
            border: none;
            padding: 0 0 4px 0;
            border-bottom: 1.5px dashed rgba(52, 0, 173, 0.4);
            border-radius: 0;
            font-family: 'El Messiri', 'Cairo', sans-serif;
            font-weight: 700;
            font-size: 14px;
            color: #3400AD;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            box-shadow: none;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            direction: rtl;
        }

        .btn-view-all:hover {
            color: #1ED6AB;
            border-bottom-color: #1ED6AB;
            transform: translateY(-2px);
        }

        /* تصميم المودال الزجاجي الفخم */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(28, 27, 32, 0.4);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }

        .modal-overlay.active {
            display: flex !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        .modal-box {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(30px) saturate(180%);
            -webkit-backdrop-filter: blur(30px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.5);
            width: 90%;
            max-width: 1000px;
            max-height: 80vh;
            border-radius: 32px;
            padding: 40px;
            box-shadow: 0 30px 70px rgba(52, 0, 173, 0.15);
            display: flex;
            flex-direction: column;
            gap: 30px;
            transform: scale(0.95);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .modal-overlay.active .modal-box {
            transform: scale(1);
        }

        .modal-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            width: 100%;
            direction: rtl;
            border-bottom: 1px solid rgba(52, 0, 173, 0.1);
            padding-bottom: 20px;
        }

        .modal-title-wrapper {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .modal-title {
            font-family: 'Cairo', sans-serif;
            font-size: 24px;
            font-weight: 800;
            color: #3400AD;
        }

        .modal-subtitle {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 14px;
            color: #484556;
            font-weight: 500;
        }

        .modal-close-btn {
            background: rgba(52, 0, 173, 0.05);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .modal-close-btn:hover {
            background: rgba(52, 0, 173, 0.15);
            transform: rotate(90deg);
        }

        .modal-content {
            overflow-y: auto;
            padding-right: 10px;
            direction: rtl;
        }

        /* تخصيص شريط التمرير */
        .modal-content::-webkit-scrollbar {
            width: 6px;
        }
        .modal-content::-webkit-scrollbar-track {
            background: rgba(52, 0, 173, 0.02);
            border-radius: 10px;
        }
        .modal-content::-webkit-scrollbar-thumb {
            background: rgba(52, 0, 173, 0.15);
            border-radius: 10px;
        }
        .modal-content::-webkit-scrollbar-thumb:hover {
            background: rgba(52, 0, 173, 0.3);
        }

        .modal-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .modal-card {
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 4px 15px rgba(52, 0, 173, 0.01);
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .modal-card-student {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-student-name {
            font-family: 'Cairo', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: #1c1b20;
        }

        .modal-student-grade {
            font-family: 'Alexandria', sans-serif;
            font-size: 11px;
            font-weight: 700;
            color: #3400AD;
            background: rgba(52, 0, 173, 0.05);
            padding: 3px 10px;
            border-radius: 10px;
        }

        .modal-review-text {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 14px;
            color: #484556;
            line-height: 1.6;
            text-align: justify;
        }

        /* التجاوب للموبايل لقسم الآراء */
        @media (max-width: 1024px) {
            .testimonials-container {
                padding: 0 20px;
            }
            .modal-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .testimonials-section {
                padding: 60px 0;
            }
            .testimonials-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }
            .testimonial-card {
                flex-shrink: 0 !important;
                width: 380px !important;
                min-height: 250px !important;
                padding: 30px !important;
            }
            .slider-nav-btn {
                display: none; /* إخفاء الأزرار في الهواتف والاعتماد على السحب باللمس */
            }
            .non-graded-container {
                flex-direction: column;
                align-items: flex-start;
                gap: 14px;
            }
            .non-graded-header {
                border-left: none;
                border-bottom: 2px solid rgba(52, 0, 173, 0.2);
                padding-left: 0;
                padding-bottom: 10px;
                width: 100%;
            }
            .modal-box {
                padding: 24px;
            }
        }
        /* -------------------------------------------------------------
           قسم الاشتراك السنوي الشامل (Premium Subscription Section)
           ------------------------------------------------------------- */
        .subscription-section {
            padding: 80px 0;
            background: linear-gradient(180deg, #fdf8ff 0%, #ffffff 100%);
            position: relative;
            overflow: hidden;
            width: 100%;
        }

        .subscription-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 40px;
            display: flex;
            flex-direction: column;
            gap: 40px;
            position: relative;
            z-index: 5;
        }

        /* حاوية العرض المنقسمة الفاخرة */
        .split-card-container {
            display: flex;
            background: #ffffff;
            border-radius: 36px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(52, 0, 173, 0.04), 0 0 1px rgba(52, 0, 173, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.8);
            width: 100%;
            min-height: 520px;
            direction: rtl;
        }

        /* الجانب الأيمن البنفسجي */
        .split-card-purple {
            width: 42%;
            background: linear-gradient(135deg, #3400AD 0%, #1a0063 100%);
            padding: 48px;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }

        .split-card-purple::before {
            content: '';
            position: absolute;
            top: -20%;
            right: -20%;
            width: 250px;
            height: 250px;
            background: radial-gradient(circle, rgba(140, 82, 255, 0.18) 0%, transparent 70%);
            pointer-events: none;
        }

        .purple-header {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .purple-label {
            font-family: 'Alexandria', sans-serif;
            font-size: 12px;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            padding: 5px 14px;
            border-radius: 20px;
            width: max-content;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .purple-title {
            font-family: 'Cairo', sans-serif;
            font-size: 32px;
            font-weight: 800;
            line-height: 1.3;
        }

        .purple-stats {
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin: 32px 0;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .stat-num-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 18px;
            min-width: 80px;
            height: 80px;
            flex-shrink: 0;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .stat-number {
            font-family: 'Outfit', 'Cairo', sans-serif;
            font-size: 32px;
            font-weight: 800;
            color: #ffffff;
            line-height: 1;
            text-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
        }

        .stat-percent {
            font-size: 14px;
            font-weight: 700;
        }

        .stat-text {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 14.5px;
            font-weight: 500;
            line-height: 1.5;
            color: rgba(255, 255, 255, 0.85);
        }

        .purple-footer-features {
            display: flex;
            flex-direction: column;
            gap: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 24px;
        }

        .purple-feature {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 13.5px;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
        }

        .purple-feature-icon {
            color: #ffffff;
            font-size: 18px;
            opacity: 0.9;
        }

        /* الجانب الأيسر الأبيض للبطاقات */
        .split-card-white {
            width: 58%;
            padding: 48px;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 28px;
        }

        /* كرت الشعبة الفاخر */
        .branch-card {
            flex: 1;
            background: rgba(253, 248, 255, 0.4);
            border: 1px solid rgba(52, 0, 173, 0.08);
            border-radius: 28px;
            padding: 32px 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            min-height: 380px;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            position: relative;
            text-align: center;
        }

        .branch-card:hover {
            transform: translateY(-8px);
            border-color: rgba(52, 0, 173, 0.25);
            box-shadow: 0 15px 40px rgba(52, 0, 173, 0.06);
            background: #ffffff;
        }

        /* تمييز شعبة علوم تجريبية كعرض أساسي */
        .branch-card.featured {
            border-color: rgba(52, 0, 173, 0.2);
            box-shadow: 0 10px 30px rgba(52, 0, 173, 0.03);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(253, 248, 255, 0.8) 100%);
        }

        .branch-card.featured::before {
            content: 'العرض الأكثر طلباً';
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            background: #3400AD;
            color: #ffffff;
            font-family: 'Cairo', sans-serif;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 14px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(52, 0, 173, 0.2);
        }

        .branch-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            width: 100%;
        }

        .branch-badge {
            background: rgba(52, 0, 173, 0.05);
            color: #3400AD;
            border: 1px solid rgba(52, 0, 173, 0.08);
            border-radius: 12px;
            padding: 4px 12px;
            font-family: 'Cairo', sans-serif;
            font-size: 12px;
            font-weight: 700;
        }

        .branch-title {
            font-family: 'Cairo', sans-serif;
            font-size: 20px;
            font-weight: 800;
            color: #1c1b20;
        }

        .branch-price-box {
            margin: 24px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .price-currency {
            font-family: 'Cairo', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: #484556;
        }

        .price-number {
            font-family: 'Outfit', 'Cairo', sans-serif;
            font-size: 40px;
            font-weight: 800;
            color: #3400AD;
            line-height: 1;
        }

        .price-period {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 12px;
            color: #6252a1;
            font-weight: 500;
            margin-top: 4px;
        }

        .btn-subscribe {
            width: 100%;
            background: #ffffff;
            border: 1.5px solid rgba(52, 0, 173, 0.2);
            color: #3400AD;
            padding: 12px 24px;
            border-radius: 20px;
            font-family: 'Cairo', sans-serif;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .branch-card:hover .btn-subscribe {
            background: #3400AD;
            color: #ffffff;
            border-color: #3400AD;
            box-shadow: 0 10px 25px rgba(52, 0, 173, 0.25);
        }

        .branch-card.featured .btn-subscribe {
            background: #3400AD;
            color: #ffffff;
            border-color: #3400AD;
            box-shadow: 0 4px 15px rgba(52, 0, 173, 0.1);
        }

        .branch-card.featured:hover .btn-subscribe {
            background: #1a0063;
            border-color: #1a0063;
            box-shadow: 0 12px 30px rgba(26, 0, 99, 0.3);
        }

        /* التجاوب للموبايل لقسم الاشتراك */
        @media (max-width: 1024px) {
            .split-card-container {
                flex-direction: column;
                min-height: auto;
            }
            .split-card-purple, .split-card-white {
                width: 100%;
            }
            .split-card-purple {
                padding: 40px 30px;
            }
            .split-card-white {
                padding: 40px 30px;
                flex-direction: column;
                gap: 24px;
            }
        }

        @media (max-width: 768px) {
            .subscription-section {
                padding: 60px 0;
            }
            .subscription-container {
                padding: 0 20px;
            }
        }
        /* -------------------------------------------------------------
           وضع التحرير المباشر (Direct Editing Mode)
           ------------------------------------------------------------- */
        body.edit-mode-active [contenteditable="true"] {
            outline: 2px dashed #3400AD;
            outline-offset: 4px;
            cursor: text;
            transition: outline-color 0.2s ease;
        }

        body.edit-mode-active [contenteditable="true"]:hover {
            outline-color: #1ED6AB;
            background: rgba(52, 0, 173, 0.03);
        }

        /* شريط أدوات التحرير العائم بالأسفل */
        .editor-toolbar {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: rgba(26, 0, 99, 0.9);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.15);
            padding: 12px 24px;
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(52, 0, 173, 0.3);
            display: flex;
            align-items: center;
            gap: 20px;
            z-index: 9999;
            direction: rtl;
            color: #ffffff;
            font-family: 'Cairo', sans-serif;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .editor-toolbar.active {
            transform: translateX(-50%) translateY(0);
        }

        .editor-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13.5px;
            font-weight: 700;
        }

        .editor-status-dot {
            width: 8px;
            height: 8px;
            background-color: #1ED6AB;
            border-radius: 50%;
            box-shadow: 0 0 8px #1ED6AB;
            animation: pulseGlow 1s infinite alternate;
        }

        .btn-editor-action {
            background: #ffffff;
            border: none;
            color: #3400AD;
            padding: 6px 16px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
        }

        .btn-editor-action:hover {
            background: #1ED6AB;
            color: #ffffff;
            box-shadow: 0 5px 15px rgba(30, 214, 171, 0.4);
        }

        .btn-editor-action.close-edit {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }

        .btn-editor-action.close-edit:hover {
            background: rgba(239, 68, 68, 0.2);
            border-color: rgb(239, 68, 68);
            color: rgb(239, 68, 68);
        }

        /* -------------------------------------------------------------
           قسم الأسئلة الشائعة الفاخر (Premium FAQ Section)
           ------------------------------------------------------------- */
        .faq-section {
            padding: 100px 0;
            background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
            position: relative;
            overflow: hidden;
            direction: rtl;
        }

        .faq-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 24px;
            position: relative;
            z-index: 2;
        }

        .faq-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .faq-title {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 34px;
            color: #1c1b20;
            font-weight: 700;
            margin-bottom: 14px;
            position: relative;
            display: inline-block;
            letter-spacing: -0.5px;
        }

        .faq-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, transparent, #3400AD 50%, transparent);
            border-radius: 2px;
        }

        .faq-subtitle {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 16px;
            color: #6252a1;
            font-weight: 500;
            margin-top: 18px;
            opacity: 0.85;
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .faq-item {
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(25px) saturate(190%);
            -webkit-backdrop-filter: blur(25px) saturate(190%);
            border: 1px solid rgba(52, 0, 173, 0.06);
            border-radius: 24px;
            overflow: hidden;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            box-shadow: 
                0 8px 32px rgba(52, 0, 173, 0.02),
                inset 0 2px 4px rgba(255, 255, 255, 0.9);
            position: relative;
        }

        /* شريط الجراديانت الفاخر المنزلق على يمين الكارت عند التفعيل */
        .faq-item::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 4px;
            height: 0;
            background: linear-gradient(180deg, #3400AD 0%, #1ED6AB 100%);
            transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 5;
        }

        .faq-item.active::before {
            height: 100%;
        }

        .faq-item:hover {
            border-color: rgba(52, 0, 173, 0.2);
            box-shadow: 
                0 20px 45px rgba(52, 0, 173, 0.05),
                inset 0 2px 4px rgba(255, 255, 255, 0.9);
            background: #ffffff;
            transform: translateY(-3px);
        }

        .faq-item.active {
            border-color: rgba(52, 0, 173, 0.22);
            background: #ffffff;
            box-shadow: 
                0 24px 50px rgba(52, 0, 173, 0.08),
                0 0 0 1px rgba(30, 214, 171, 0.05),
                inset 0 2px 4px rgba(255, 255, 255, 0.9);
        }

        .faq-trigger {
            width: 100%;
            padding: 26px 36px;
            background: transparent;
            border: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            text-align: right;
            gap: 20px;
            transition: all 0.3s ease;
        }

        .faq-question {
            font-family: 'Cairo', sans-serif;
            font-size: 19px;
            font-weight: 800;
            color: #1c1b20;
            transition: color 0.3s ease;
        }

        .faq-item:hover .faq-question,
        .faq-item.active .faq-question {
            color: #3400AD;
        }

        .faq-icon-box {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(52, 0, 173, 0.05);
            border: 1px solid rgba(52, 0, 173, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            flex-shrink: 0;
            box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8);
        }

        .faq-item:hover .faq-icon-box {
            background: #3400AD;
            color: #ffffff;
            border-color: #3400AD;
            transform: scale(1.08);
            box-shadow: 0 5px 15px rgba(52, 0, 173, 0.2);
        }

        .faq-item.active .faq-icon-box {
            background: #1ED6AB;
            color: #ffffff;
            border-color: #1ED6AB;
            transform: rotate(45deg) scale(1.08);
            box-shadow: 0 8px 20px rgba(30, 214, 171, 0.35);
        }

        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .faq-content-inner {
            padding: 0 36px 30px 36px;
            font-family: 'Cairo', sans-serif;
            font-size: 15.5px;
            color: #2d2a3a;
            line-height: 1.85;
            font-weight: 500;
            border-top: 1px solid rgba(52, 0, 173, 0.05);
            margin-top: -4px;
            padding-top: 22px;
        }

        /* زينة خلفية السكشن الفاخرة */
        .faq-bg-glow {
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(52, 0, 173, 0.04) 0%, transparent 70%);
            z-index: 1;
            pointer-events: none;
        }

        .faq-bg-glow-1 {
            top: -100px;
            right: -100px;
        }

        .faq-bg-glow-2 {
            bottom: -100px;
            left: -100px;
        }

        @media (max-width: 768px) {
            .faq-section {
                padding: 70px 0;
            }
            .faq-title {
                font-size: 30px;
            }
            .faq-trigger {
                padding: 20px 24px;
            }
            .faq-question {
                font-size: 16px;
            }
            .faq-content-inner {
                padding: 0 24px 20px 24px;
                font-size: 14.5px;
            }
        }

        /* -------------------------------------------------------------
           الوضع الداكن الفاخر (Premium Dark Mode)
           ------------------------------------------------------------- */
        body.dark-theme {
            /* خلفية ليلية بنفسجية ملوكية عميقة جداً متناسقة مع الهوية */
            background: 
                radial-gradient(at 0% 0%, rgba(52, 0, 173, 0.25) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(140, 82, 255, 0.15) 0px, transparent 50%);
            background-color: #05020c;
            color: #f3f0fa;
        }

        /* الهيدر الزجاجي الداكن */
        body.dark-theme .st0 {
            background: rgba(5, 2, 12, 0.7);
            border-bottom: 1px solid rgba(52, 0, 173, 0.15);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        }

        /* الحفاظ على هوية البنفسجي كعنصر أساسي والأخضر كوهج حركي/تحويم */
        body.dark-theme .nav-item {
            color: #e2def2; /* زيادة التباين لقراءة ممتازة */
        }

        body.dark-theme .nav-item:hover,
        body.dark-theme .nav-item.active {
            color: #8c52ff; /* بنفسجي مضيء للنشاط بالوضع الداكن */
        }

        body.dark-theme .nav-item::after {
            background: #8c52ff;
            box-shadow: 0 0 10px rgba(140, 82, 255, 0.8);
        }

        /* زر الدخول التفاعلي بالبنفسجي المضيء */
        body.dark-theme .st1 {
            background: rgba(140, 82, 255, 0.15) !important;
            border-color: rgba(140, 82, 255, 0.45) !important;
            color: #ffffff !important;
        }

        body.dark-theme .st1:hover {
            background: #8c52ff !important;
            border-color: #8c52ff !important;
            color: #ffffff !important;
            box-shadow: 0 0 20px rgba(140, 82, 255, 0.5) !important;
        }

        /* خلفية الكروموزوم بالوضع الداكن */
        body.dark-theme .card-st7 {
            background: #8c52ff !important;
            box-shadow: 0 25px 50px rgba(140, 82, 255, 0.3) !important;
        }

        /* شارة البطل الأول */
        body.dark-theme .badge-st2 {
            background: rgba(255, 255, 255, 0.03) !important;
            border: none !important;
        }

        body.dark-theme .badge-text {
            color: #ffffff !important;
        }

        /* العناوين والتحسينات البصرية للـ Hero */
        body.dark-theme .title-st3 {
            color: #ffffff;
        }

        body.dark-theme .title-st3 .highlight-text {
            color: #8c52ff;
            text-shadow: 0 4px 25px rgba(140, 82, 255, 0.3);
        }

        body.dark-theme .subtitle-st4 {
            background: rgba(15, 10, 30, 0.6);
            border-color: rgba(52, 0, 173, 0.15);
            color: #c5bfe0;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
        }

        body.dark-theme .social-circle {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.08);
            color: #c5bfe0; /* تحسين تباين الأيقونات الاجتماعية */
        }

        body.dark-theme .social-circle:hover {
            background: #8c52ff;
            border-color: #8c52ff;
            color: #ffffff;
            box-shadow: 0 8px 25px rgba(140, 82, 255, 0.4);
        }

        /* زر ابدأ الآن في الهيرو بالوضع الداكن */
        body.dark-theme .btn-st0 {
            background: #8c52ff;
            box-shadow: 0 10px 30px rgba(140, 82, 255, 0.4);
        }

        body.dark-theme .btn-st0:hover {
            background: #9d4edd;
            box-shadow: 0 15px 40px rgba(140, 82, 255, 0.55);
        }

        /* كارت الميزات ثلاثي الأبعاد بالوضع الداكن */
        body.dark-theme .feature-card-front {
            background: rgba(15, 10, 30, 0.55);
            border-color: rgba(52, 0, 173, 0.15);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
        }

        body.dark-theme .feature-card-title {
            color: #ffffff;
        }

        body.dark-theme .feature-card-desc {
            color: #b5adc9;
        }

        /* تحسين ألوان وتباين شارات الميزات في المود الداكن */
        body.dark-theme .badge-purple {
            background: rgba(140, 82, 255, 0.18);
            color: #b58dfc;
        }

        body.dark-theme .badge-red {
            background: rgba(255, 107, 107, 0.18);
            color: #ff8b8b;
        }

        body.dark-theme .badge-green {
            background: rgba(74, 222, 128, 0.18);
            color: #81e6a3;
            box-shadow: 0 0 10px rgba(74, 222, 128, 0.15);
        }

        body.dark-theme .feature-icon-wrapper {
            background: rgba(52, 0, 173, 0.15);
            color: #8c52ff;
        }

        body.dark-theme .feature-card-wrapper:hover .feature-icon-wrapper {
            background: #8c52ff;
            color: #ffffff;
            box-shadow: 0 8px 25px rgba(140, 82, 255, 0.45);
        }

        /* قسم الخط الزمني والسباقون */
        body.dark-theme .timeline-section {
            background-color: #05020c;
            border-top-color: rgba(52, 0, 173, 0.1);
        }

        body.dark-theme .timeline-banner {
            background: linear-gradient(135deg, #10062a 0%, #05020c 100%);
            border: 1px solid rgba(52, 0, 173, 0.2);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
        }

        body.dark-theme .timeline-banner-bg {
            color: rgba(140, 82, 255, 0.12);
        }

        body.dark-theme .timeline-main-title {
            color: #ffffff;
        }

        body.dark-theme .timeline-card {
            background: rgba(15, 10, 30, 0.55);
            border-color: rgba(52, 0, 173, 0.15);
        }

        body.dark-theme .timeline-card:hover {
            border-color: rgba(140, 82, 255, 0.4);
            box-shadow: 0 15px 35px rgba(140, 82, 255, 0.08);
        }

        body.dark-theme .timeline-card-text {
            color: #b5adc9;
        }

        body.dark-theme .timeline-card-date {
            color: #8c52ff;
        }

        /* قسم آراء التلاميذ */
        body.dark-theme .testimonials-section {
            background: linear-gradient(180deg, #05020c 0%, #0d061c 100%);
        }

        body.dark-theme .testimonials-title {
            color: #ffffff;
        }

        body.dark-theme .testimonials-title::after {
            background: linear-gradient(90deg, transparent, #8c52ff 50%, transparent);
        }

        body.dark-theme .testimonials-subtitle {
            color: #b5adc9;
        }

        body.dark-theme .reviews-badge {
            background: rgba(52, 0, 173, 0.12);
            border-color: rgba(52, 0, 173, 0.25);
        }

        body.dark-theme .reviews-badge-text {
            color: #8c52ff;
        }

        body.dark-theme .testimonial-card {
            background: rgba(15, 10, 30, 0.55);
            border-color: rgba(52, 0, 173, 0.15);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
        }

        body.dark-theme .testimonial-card:hover {
            border-color: rgba(140, 82, 255, 0.35);
            box-shadow: 0 20px 45px rgba(140, 82, 255, 0.1);
        }

        body.dark-theme .student-name {
            color: #ffffff;
        }

        body.dark-theme .student-grade {
            color: #8c52ff;
            background: rgba(52, 0, 173, 0.15);
        }

        body.dark-theme .student-review {
            color: #b5adc9;
        }

        body.dark-theme .slider-nav-btn {
            background: rgba(15, 10, 30, 0.85);
            border-color: rgba(52, 0, 173, 0.25);
            color: #8c52ff;
        }

        body.dark-theme .slider-nav-btn:hover {
            background: #8c52ff;
            color: #ffffff;
            box-shadow: 0 0 15px rgba(140, 82, 255, 0.5);
        }

        body.dark-theme .non-graded-container {
            background: rgba(15, 10, 30, 0.5);
            border-color: rgba(52, 0, 173, 0.15);
        }

        body.dark-theme .non-graded-item {
            -webkit-text-size-adjust: 100% !important;
            text-size-adjust: 100% !important;
            font-size: 13px !important;
            color: #b5adc9;
        }

        body.dark-theme .btn-view-all {
            color: #8c52ff;
        }

        body.dark-theme .btn-view-all:hover {
            color: #ffffff;
            text-shadow: 0 0 10px rgba(140, 82, 255, 0.6);
        }

        /* قسم الاشتراك السنوي بالكامل */
        body.dark-theme .subscription-section {
            background: linear-gradient(180deg, #0d061c 0%, #05020c 100%);
        }

        body.dark-theme .split-card-container {
            background: #0f0a1c;
            border-color: rgba(52, 0, 173, 0.2);
            box-shadow: 0 25px 65px rgba(0, 0, 0, 0.55);
        }

        body.dark-theme .split-card-purple {
            background: linear-gradient(135deg, #10062a 0%, #05020c 100%);
            border-left: 1px solid rgba(52, 0, 173, 0.2);
        }

        body.dark-theme .split-card-white {
            background: #0f0a1c;
        }

        body.dark-theme .branch-card {
            background: rgba(15, 10, 30, 0.55);
            border-color: rgba(52, 0, 173, 0.15);
        }

        body.dark-theme .branch-card:hover {
            background: #150f26;
            border-color: rgba(140, 82, 255, 0.35);
        }

        body.dark-theme .branch-title {
            color: #ffffff;
        }

        body.dark-theme .branch-badge {
            background: rgba(52, 0, 173, 0.15);
            color: #8c52ff;
            border-color: rgba(52, 0, 173, 0.25);
        }

        body.dark-theme .price-currency,
        body.dark-theme .price-period {
            color: #b5adc9;
        }

        body.dark-theme .price-number {
            color: #8c52ff;
        }

        body.dark-theme .btn-subscribe {
            background: transparent;
            border-color: rgba(140, 82, 255, 0.3);
            color: #8c52ff;
        }

        body.dark-theme .branch-card:hover .btn-subscribe,
        body.dark-theme .branch-card.featured .btn-subscribe {
            background: #8c52ff;
            color: #ffffff;
            border-color: #8c52ff;
            box-shadow: 0 10px 25px rgba(140, 82, 255, 0.35);
        }

        body.dark-theme .branch-card.featured {
            background: linear-gradient(180deg, rgba(20, 12, 38, 0.9) 0%, rgba(15, 10, 30, 0.9) 100%);
            border-color: rgba(140, 82, 255, 0.35);
        }

        body.dark-theme .branch-card.featured::before {
            background: #8c52ff;
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(140, 82, 255, 0.4);
        }

        /* قسم الأسئلة الشائعة */
        body.dark-theme .faq-section {
            background: linear-gradient(180deg, #05020c 0%, #0d061c 100%);
        }

        body.dark-theme .faq-title {
            color: #ffffff;
        }

        body.dark-theme .faq-title::after {
            background: linear-gradient(90deg, transparent, #8c52ff 50%, transparent);
        }

        body.dark-theme .faq-subtitle {
            color: #b5adc9;
        }

        body.dark-theme .faq-item {
            background: rgba(15, 10, 30, 0.55);
            border-color: rgba(52, 0, 173, 0.15);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        }

        body.dark-theme .faq-item:hover {
            border-color: rgba(140, 82, 255, 0.35);
            background: #150f26;
        }

        body.dark-theme .faq-item.active {
            border-color: rgba(140, 82, 255, 0.45);
            background: #150f26;
            box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
        }

        body.dark-theme .faq-question {
            color: #ffffff;
        }

        body.dark-theme .faq-item:hover .faq-question,
        body.dark-theme .faq-item.active .faq-question {
            color: #8c52ff;
        }

        body.dark-theme .faq-icon-box {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
            color: #ffffff;
        }

        body.dark-theme .faq-item:hover .faq-icon-box {
            background: #8c52ff;
            color: #ffffff;
            border-color: #8c52ff;
            box-shadow: 0 5px 15px rgba(140, 82, 255, 0.3);
        }

        body.dark-theme .faq-item.active .faq-icon-box {
            background: #1ED6AB;
            color: #ffffff;
            border-color: #1ED6AB;
            box-shadow: 0 8px 20px rgba(30, 214, 171, 0.35);
        }

        body.dark-theme .faq-content-inner {
            color: #b5adc9;
            border-top-color: rgba(255, 255, 255, 0.06);
        }

        /* نافذة المودال */
        body.dark-theme .modal-box {
            background: #0f0a1c;
            border-color: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
        }

        body.dark-theme .modal-title {
            color: #8c52ff;
        }

        body.dark-theme .modal-subtitle,
        body.dark-theme .modal-review-text {
            color: #b5adc9;
        }

        body.dark-theme .modal-card {
            background: rgba(15, 10, 30, 0.6);
            border-color: rgba(52, 0, 173, 0.15);
        }

        body.dark-theme .modal-student-name {
            color: #ffffff;
        }

        body.dark-theme .modal-student-grade {
            color: #8c52ff;
            background: rgba(52, 0, 173, 0.15);
        }

        body.dark-theme .modal-close-btn {
            background: rgba(255, 255, 255, 0.05);
            color: #8c52ff;
        }

        body.dark-theme .modal-close-btn:hover {
            background: rgba(140, 82, 255, 0.2);
            color: #ffffff;
        }

        /* تحسين التباين للعناصر التي فاتت بالوضع الداكن */
        body.dark-theme .features-title {
            color: #ffffff;
        }

        body.dark-theme .features-subtitle {
            color: #b5adc9;
        }

        body.dark-theme .features-title::after {
            background: linear-gradient(90deg, transparent, #8c52ff 50%, transparent);
        }

        body.dark-theme .editor-toolbar {
            background: rgba(15, 10, 30, 0.95);
            border-color: rgba(140, 82, 255, 0.25);
            color: #ffffff;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        }

        body.dark-theme .btn-editor-action {
            background: rgba(140, 82, 255, 0.15);
            color: #c5bfe0;
        }

        body.dark-theme .btn-editor-action:hover {
            background: #8c52ff;
            color: #ffffff;
        }

        body.dark-theme .editor-status-dot {
            background-color: #1ED6AB;
            box-shadow: 0 0 8px #1ED6AB;
        }

        body.dark-theme [contenteditable="true"] {
            outline: 2px dashed #8c52ff;
        }

        body.dark-theme [contenteditable="true"]:hover {
            outline-color: #1ED6AB;
            background: rgba(140, 82, 255, 0.05);
        }

        /* زر وضع الليل والنهار المطور */
        .dark-mode-toggle {
            position: fixed;
            bottom: 30px;
            left: 30px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(52, 0, 173, 0.15);
            box-shadow: 0 10px 30px rgba(52, 0, 173, 0.15);
            color: #3400AD;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 9998;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        body.dark-theme .dark-mode-toggle {
            background: rgba(15, 10, 30, 0.7);
            border-color: rgba(140, 82, 255, 0.25);
            color: #8c52ff;
            box-shadow: 0 10px 30px rgba(140, 82, 255, 0.15);
        }

        .dark-mode-toggle:hover {
            transform: scale(1.08) rotate(30deg);
        }

        body.dark-theme .dark-mode-toggle:hover {
            background: #8c52ff;
            color: #ffffff;
            box-shadow: 0 15px 35px rgba(140, 82, 255, 0.35);
        }

        body.edit-mode-active .dark-mode-toggle {
            transform: translateY(-80px);
        }
        body.edit-mode-active .dark-mode-toggle:hover {
            transform: translateY(-80px) scale(1.08) rotate(30deg);
        }

        /* -------------------------------------------------------------
           التجاوب الكامل والتكيف مع شاشات الهواتف والتابلت
           ------------------------------------------------------------- */
        /* -------------------------------------------------------------
           تنسيقات زر الهامبرغر والشريط الجانبي للموبايل والتابلت
           ------------------------------------------------------------- */
        .mobile-menu-toggle {
            display: none;
            background: transparent;
            border: none;
            color: #3400AD;
            cursor: pointer;
            z-index: 101;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: rgba(52, 0, 173, 0.05);
            border: 1px solid rgba(52, 0, 173, 0.1);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .mobile-menu-toggle:hover {
            background: rgba(52, 0, 173, 0.12);
            transform: scale(1.05);
        }

        .mobile-sidebar {
            position: fixed;
            top: 0;
            right: -320px; /* مخفي خارج الشاشة من اليمين */
            width: 300px;
            height: 100vh;
            background: rgba(253, 248, 255, 0.85);
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            border-left: 1px solid rgba(52, 0, 173, 0.1);
            box-shadow: -10px 0 40px rgba(52, 0, 173, 0.05);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            padding: 30px 24px;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            direction: rtl;
        }

        .mobile-sidebar.active {
            transform: translateX(-320px); /* ينزلق للداخل */
        }

        .sidebar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 40px;
            width: 100%;
        }

        .mobile-sidebar-close {
            background: rgba(52, 0, 173, 0.05);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .mobile-sidebar-close:hover {
            background: rgba(52, 0, 173, 0.15);
            transform: rotate(90deg);
        }

        .sidebar-logo {
            width: 80px;
            height: 40px;
            background-image: url('logo.png');
            background-repeat: no-repeat;
            background-size: contain;
            opacity: 1;
        }

        .sidebar-links {
            display: flex;
            flex-direction: column;
            gap: 20px;
            flex-grow: 1;
        }

        .sidebar-item {
            display: flex;
            align-items: center;
            gap: 16px;
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-weight: 600;
            font-size: 18px;
            color: #484556;
            text-decoration: none;
            padding: 14px 20px;
            border-radius: 12px;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            position: relative;
            background: transparent;
            border: none;
        }

        .sidebar-item::before {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 0%;
            background: #3400AD;
            transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            border-radius: 4px;
            opacity: 0;
        }

        .sidebar-item-number {
            display: none !important;
            font-family: 'Outfit', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: rgba(52, 0, 173, 0.4);
            transition: all 0.4s ease;
            letter-spacing: 1px;
        }

        .sidebar-item-text {
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .sidebar-item:hover {
            background: rgba(52, 0, 173, 0.03);
            color: #3400AD;
            transform: translateX(-5px);
        }

        .sidebar-item:hover::before, .sidebar-item.active::before {
            height: 60%;
            opacity: 1;
        }

        .sidebar-item:hover .sidebar-item-number, .sidebar-item.active .sidebar-item-number {
            color: #3400AD;
            transform: translateY(-2px);
        }

        .sidebar-item:hover .sidebar-item-text, .sidebar-item.active .sidebar-item-text {
            transform: translateX(-8px);
        }

        .sidebar-item.active {
            background: rgba(52, 0, 173, 0.06);
            color: #3400AD;
        }

        .sidebar-footer {
            width: 100%;
            margin-top: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 20px 0;
        }

        .sidebar-register-btn {
            width: 100% !important;
            height: 52px !important;
            border-radius: 16px !important;
            background: #3400AD !important;
            color: #ffffff !important;
            font-weight: 700 !important;
            box-shadow: 0 10px 25px rgba(52, 0, 173, 0.15) !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sidebar-register-btn:hover {
            background: #1a0063 !important;
            box-shadow: 0 12px 30px rgba(26, 0, 99, 0.25) !important;
        }

        .sidebar-login-btn {
            width: 100% !important;
            height: 52px !important;
            border-radius: 16px !important;
            background: rgba(52, 0, 173, 0.08) !important;
            border: 1px solid rgba(52, 0, 173, 0.2) !important;
            color: #3400AD !important;
            font-weight: 700 !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sidebar-login-btn:hover {
            background: rgba(52, 0, 173, 0.15) !important;
        }

        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 9997;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }

        .sidebar-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* -------------------------------------------------------------
           الوضع الداكن للقائمة الجانبية
           ------------------------------------------------------------- */
        body.dark-theme .mobile-menu-toggle {
            color: #8c52ff;
            background: rgba(140, 82, 255, 0.1);
            border-color: rgba(140, 82, 255, 0.2);
        }

        body.dark-theme .mobile-menu-toggle:hover {
            background: rgba(140, 82, 255, 0.18);
        }

        body.dark-theme .mobile-sidebar {
            background: rgba(15, 10, 30, 0.85);
            border-left-color: rgba(140, 82, 255, 0.2);
            box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
        }

        body.dark-theme .mobile-sidebar-close {
            background: rgba(255, 255, 255, 0.05);
            color: #8c52ff;
        }

        body.dark-theme .mobile-sidebar-close:hover {
            background: rgba(140, 82, 255, 0.2);
        }

        body.dark-theme .sidebar-item {
            color: #c5bfe0;
        }

        body.dark-theme .sidebar-item::before {
            background: #8c52ff;
        }

        body.dark-theme .sidebar-item-number {
            color: rgba(140, 82, 255, 0.4);
        }

        body.dark-theme .sidebar-item:hover {
            background: rgba(140, 82, 255, 0.06);
            color: #ffffff;
        }

        body.dark-theme .sidebar-item.active {
            background: rgba(140, 82, 255, 0.12);
            color: #ffffff;
        }

        body.dark-theme .sidebar-item:hover .sidebar-item-number, body.dark-theme .sidebar-item.active .sidebar-item-number {
            color: #8c52ff;
        }

        body.dark-theme .sidebar-login-btn {
            background: #8c52ff !important;
            box-shadow: 0 10px 25px rgba(140, 82, 255, 0.35) !important;
        }

        body.dark-theme .sidebar-login-btn:hover {
            background: #9d4edd !important;
            box-shadow: 0 12px 30px rgba(140, 82, 255, 0.45) !important;
        }

        /* -------------------------------------------------------------
           التجاوب الكامل والتكيف مع شاشات الهواتف والتابلت
           ------------------------------------------------------------- */
        @media (max-width: 992px) {
            .st0 {
                padding: 0 24px;
            }
            .st1 {
                width: 140px;
                font-size: 13px;
            }
            .nav-links {
                gap: 24px;
            }
        }

        @media (max-width: 768px) {
            /* 1. Mobile Header & Sidebar */
            .st0 {
                padding: 0 16px;
                height: 72px; /* مساحة تنفس مريحة */
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: fixed;
                overflow: hidden !important; /* منع الشعار من الخروج من حدود الهيدر */
            }
            .nav-links {
                display: none !important;
            }
            .header-login-btn {
                display: flex !important; /* إظهار زر تسجيل الدخول */
                order: 3 !important; /* زر تسجيل الدخول في أقصى اليسار في RTL */
                position: static !important;

                width: auto !important;
                height: 38px !important;
                padding: 0 14px !important;
                border-radius: 19px !important;
                background: rgba(52, 0, 173, 0.08) !important;
                border: 1px solid rgba(52, 0, 173, 0.18) !important;
                font-size: 13px !important;
                font-weight: 700 !important;
                color: #3400AD !important;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
            .mobile-menu-toggle {
                display: flex;
                position: relative !important;
                z-index: 10 !important; /* فوق الشعار ليبقى قابلاً للنقر */
                order: 1 !important; /* زر القائمة ذو الـ 3 شرائط في أقصى اليمين في RTL */
                width: 48px; /* حجم لمس قياسي Apple */
                height: 48px;
                align-items: center;
                justify-content: center;
                margin-left: 0;
                margin-right: 8px !important;
            }
            .header-bg-shape {
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                transform: translate(-50%, -50%) !important;
                margin-left: -8px !important; /* إزاحة بصرية طفيفة لليسار ليتزن مع الأزرار الجانبية */
                width: 175px !important;
                height: 90px !important;
                z-index: 1 !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
                background-size: contain !important;
                pointer-events: none; /* لكي لا يعيق النقرات */
            }

            /* 2. Hero Section (Radical Simplicity & Contrast) */
            .hero-section {
                padding-top: 75px; /* رفع السكشن لأعلى */
                padding-bottom: 40px;
                min-height: auto;
                display: block; 
            }
            .hero-container {
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 0 20px;
                position: relative;
                z-index: 2; /* فوق الكروموسوم */
            }
            /* فك الارتباط بالوضع المطلق للحاسوب */
            .badge-st2 {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                margin-bottom: 24px !important;
                width: 220px !important;
                height: 38px !important;
                overflow: hidden !important;
                display: inline-flex !important;
                align-items: flex-start !important; /* مهم جداً لمنع قص وإزاحة النصوص للأسفل */
                justify-content: center !important;
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
            }
            .st3-box {
                position: relative;
                left: auto; top: auto;
                width: 100%;
                height: auto;
                justify-content: center;
                margin-bottom: 16px;
                text-align: center;
            }
            .title-st3 {
                font-size: 42px !important; /* تكبير */
                font-weight: 900 !important; /* خشنه */
                white-space: normal; /* السماح بالتفاف النص */
                line-height: 1.2;
                text-align: center;
            }
            .st4-box {
                position: relative;
                left: auto; top: auto;
                width: 100%;
                height: auto;
                justify-content: center;
                margin-bottom: 32px;
            }
            .subtitle-st4 {
                font-size: 16px;
                text-align: center;
                padding: 12px 16px;
            }

            /* تفعيل وتخصيص حركة الظهور والتمرير (Scroll Reveal) في الموبايل بشكل ناعم يمنع المشاكل البصرية للفراغات الجانبية */
            .reveal-element, .reveal-left, .reveal-right {
                opacity: 0 !important; transform: translateY(40px) !important;
                transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
            }
            .reveal-element.revealed, .reveal-left.revealed, .reveal-right.revealed {
                opacity: 1 !important;
                transform: translateY(0) !important;
            }
            /* الكروت والعناصر الفردية داخل مجموعات العرض تبدأ مخفية وتظهر تدريجياً بشكل مستقل عند التمرير إليها */
            .reveal-parent > * {
                opacity: 0 !important; transform: translateY(40px) scale(0.95) !important;
                transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
            }
            .reveal-parent > *.revealed {
                opacity: 1 !important;
                transform: translateY(0) scale(1) !important;
            }
            /* السماح للحركة الفردية بالعمل بشكل صحيح */
            .reveal-parent.revealed > * {
                opacity: 1 !important;
                transform: translateY(0) scale(1) !important;
            }

            .subtitle-st4::before, .subtitle-st4::after {
                display: none; /* إزالة الخطوط الجانبية لتقليل الضجيج */
            }
            .hero-actions {
                position: relative;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .btn-st0 {
                position: relative;
                left: auto; top: auto;
                width: 100%;
                height: 56px; /* ارتفاع قياسي للتحويل */
                font-size: 17px;
                border-radius: 28px;
                box-shadow: 0 8px 20px rgba(52, 0, 173, 0.2);
            }
            .hero-socials {
                display: flex !important; /* إظهار شبكات التواصل في الجوال مع فيسبوك وتيك توك */
                flex-direction: row !important;
                gap: 12px !important;
                margin-top: 16px !important;
            }

            /* 3. Hero Visual Assets (Depth of Field Chromosome) */
            .hero-visual-assets {
                width: 100%;
                height: 100%;
                top: -190px; /* رفع الكروموسوم وما وراءه للأعلى بشكل أكبر لمنع تغطية النصوص */
                left: 0;
                z-index: 0; /* خلف النصوص بالكامل */
                opacity: 0.18; /* تراجع كبير جداً لعدم إزعاج القراءة */
                display: flex;
                justify-content: center;
                align-items: flex-start;
                padding-top: 10px; /* تقليص الحشوة لرفعه أكثر */
                filter: blur(8px) saturate(0.8); /* عمق سينمائي فائق */
            }
            .media-glow, .droplets-image1, .card-st7 {
                display: none; /* تنظيف المشهد */
            }
            .dna-wrapper {
                position: relative;
                left: auto; top: auto;
                width: 320px;
                height: 320px;
            }

            /* 4. Features Section (Cards Layout) */
            .features-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            /* تمت استعادة أنيميشن الدوران ثلاثي الأبعاد للبطاقات بالكامل بطلب المستخدم */

            /* 5. Timeline Section Mobile Fixes */
            .timeline-section {
                padding: 40px 0 !important;
            }
            .timeline-container {
                flex-direction: column;
                padding: 0 16px;
                position: relative;
            }
            .timeline-banner {
                width: max-content !important;
                max-width: 100% !important;
                height: auto !important;
                margin: 0 auto 20px auto !important; /* توسيط الشريط مع مسافة مريحة أسفله قبل العنوان */
                display: flex !important;
                flex-direction: row !important; /* تنسيق أفقي للشريط */
                align-items: center !important;
                justify-content: center !important;
                padding: 10px 24px !important; /* شريط رقيق */
                border-radius: 50px !important; /* شكل كبسولة دائري أنيق */
                background: #1a0063 !important;
                box-shadow: 0 8px 25px rgba(26, 0, 99, 0.15) !important;
                position: relative !important;
                left: auto !important;
                top: auto !important;

                z-index: 2 !important;
                opacity: 1 !important;
                filter: none !important;
                pointer-events: auto !important;
            }
            .timeline-banner-text {
                display: flex !important;
                flex-direction: row !important; /* وضع الكلمات بجانب بعضها */
                align-items: center !important;
                justify-content: center !important;
                gap: 8px !important; /* مسافة بين الكلمات */
                width: auto !important;
                padding: 0 !important;
                z-index: 2;
            }
            .banner-title {
                font-size: 16px !important;
                font-weight: 700 !important;
                line-height: 1.2 !important;
                color: #ffffff !important;
            }
            .banner-subtitle {
                font-size: 16px !important;
                font-weight: 700 !important;
                line-height: 1.2 !important;
                margin-top: 0 !important;
                color: #ffffff !important;
            }
            .banner-corner-indicator {
                display: none !important; /* إخفاء الزاوية الزخرفية ليظل الشريط رقيقاً وبسيطاً */
            }
            .timeline-banner-bg {
                display: none !important; /* إخفاء الرقم العملاق الزخرفي لتنظيف مظهر الشريط */
            }



            /* محاذاة وتوسيط نصوص السباقون دوماً (أول من) والخط أسفلها */
            .timeline-title-box {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                text-align: center !important;
                gap: 12px !important;
                width: 100% !important;
                padding: 0 !important;
            }
            .timeline-signature {
                margin: 0 auto !important;
                text-align: center !important;
                display: block !important;
                width: max-content !important;
            }
            .timeline-main-title {
                text-align: center !important;
                display: block !important;
                margin: 0 auto 12px auto !important;
                width: max-content !important;
            }
            .timeline-main-title::after {
                left: 50% !important;
                right: auto !important;
                transform: translateX(-50%) !important;
            }
        }

        @media (max-width: 480px) {
            .st0 {
                padding: 0 12px;
            }
            .title-st3 {
                font-size: 32px !important; /* تصغير إضافي للشاشات الصغيرة جداً مع الحفاظ على السمك البولد */
                font-weight: 900 !important;
            }
            .btn-st0 {
                font-size: 16px;
                height: 54px;
            }
        }
    
    
    /* -----------------------------------------
       COURSES PAGE STYLES (courses.html)
       ----------------------------------------- */
    
        /* تصفير الهوامش وتأسيس التصميم */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            max-width: 100%;
            overflow-x: hidden;
        }

        body {
            font-family: 'IBM Plex Sans Arabic', 'Alexandria', sans-serif;
            /* خلفية بتدرج ضوئي شبكي ناعم للغاية */
            background: 
                radial-gradient(at 0% 0%, hsla(253, 82%, 87%, 0.15) 0px, transparent 45%),
                radial-gradient(at 100% 0%, hsla(276, 100%, 92%, 0.15) 0px, transparent 45%);
            background-color: #fdf8ff;
            min-height: 100vh;
            position: relative;
        }

        /* -------------------------------------------------------------
           هيدر زجاجي عصري (Glassmorphism Navigation)
           ------------------------------------------------------------- */
        .st0 {
            background: rgba(253, 248, 255, 0.4);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.45);
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 64px;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 40px;
            box-shadow: 
                0 8px 32px 0 rgba(52, 0, 173, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }

        .header-bg-shape {
            position: absolute;
            right: 30px;
            top: 0;
            width: 187px;
            height: 80px;
            z-index: 1;
            pointer-events: none;
            background-image: url('logo.png');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: right center;
            opacity: 1;
        }

        .st1 {
            background: rgba(52, 0, 173, 0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(52, 0, 173, 0.18);
            border-top: none;
            border-left: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 180px;
            height: 64px;
            border-radius: 0px 0px 24px 0px;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD;
            font-weight: 700;
            font-size: 15px;
            letter-spacing: 0.5px;
            box-shadow: 
                0 4px 20px rgba(52, 0, 173, 0.02),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .st1:hover {
            background: rgba(52, 0, 173, 0.15);
            border-color: rgba(52, 0, 173, 0.3);
            color: #4400d9;
            box-shadow: 0 6px 25px rgba(52, 0, 173, 0.08);
        }

        .nav-links {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            gap: 40px;
            z-index: 10;
        }

        .nav-item {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-weight: 600;
            font-size: 14px;
            color: #484556;
            text-decoration: none;
            position: relative;
            padding: 8px 4px;
            transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
        }

        .nav-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: 16px;
            height: 3px;
            background: #3400AD;
            border-radius: 2px;
            box-shadow: 0 0 8px rgba(52, 0, 173, 0.5);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .nav-item:hover {
            color: #3400AD;
            transform: translateY(-1px);
        }

        .nav-item:hover::after, .nav-item.active::after {
            transform: translateX(-50%) scaleX(1);
        }

        .nav-item.active {
            color: #3400AD;
        }

        /* -------------------------------------------------------------
           تنسيق عنوان الصفحة والتقديم (Academy Intro)
           ------------------------------------------------------------- */
        .academy-intro {
            padding-top: 140px;
            padding-bottom: 40px;
            text-align: center;
            position: relative;
        }

        .academy-badge {
            background: linear-gradient(135deg, rgba(52, 0, 173, 0.06) 0%, rgba(30, 214, 171, 0.06) 100%);
            border: 1px solid rgba(52, 0, 173, 0.18);
            border-radius: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 6px 18px;
            box-shadow: 0 4px 15px rgba(52, 0, 173, 0.03);
            margin-bottom: 20px;
        }

        .academy-badge span {
            font-family: 'Alexandria', sans-serif;
            font-size: 12px;
            color: #3400AD;
            font-weight: 700;
        }

        .academy-badge i {
            color: #1ED6AB;
            font-size: 18px;
        }

        .academy-title {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 38px;
            color: #1c1b20;
            font-weight: 800;
            margin-bottom: 16px;
            letter-spacing: -0.5px;
        }

        .academy-subtitle {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 16px;
            color: #6252a1;
            font-weight: 500;
            opacity: 0.85;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* -------------------------------------------------------------
           شبكة الدورات البلورية الفاخرة (Premium Courses List)
           ------------------------------------------------------------- */
        .courses-section {
            padding: 40px 0 100px 0;
            position: relative;
            overflow: hidden;
            width: 100%;
            direction: rtl;
        }

        .courses-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 40px;
            position: relative;
            z-index: 5;
        }

        .courses-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
        }

        /* كارت الدورة البلوري الفاخر للغاية */
        .course-card {
            background: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(30px) saturate(200%);
            -webkit-backdrop-filter: blur(30px) saturate(200%);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 28px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 
                0 15px 35px rgba(52, 0, 173, 0.02),
                inset 0 2px 4px rgba(255, 255, 255, 0.9);
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
        }

        .course-card:hover {
            transform: translateY(-8px) scale(1.01);
            border-color: rgba(52, 0, 173, 0.2);
            box-shadow: 
                0 30px 60px rgba(52, 0, 173, 0.06),
                0 0 0 1px rgba(30, 214, 171, 0.1),
                inset 0 2px 4px rgba(255, 255, 255, 0.9);
        }

        /* الجزء العلوي الرسومي الفخم للدورة */
        .course-banner {
            height: 230px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.5s ease;
        }

        .course-banner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.15) 0%, transparent 65%);
            z-index: 1;
        }

        .course-banner-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(26, 0, 99, 0.65);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: #ffffff;
            padding: 5px 14px;
            border-radius: 12px;
            font-family: 'Cairo', sans-serif;
            font-size: 11px;
            font-weight: 700;
            z-index: 3;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* عنوان الوحدة العملاق المطبوع بأسلوب بلوري فخم للغاية خلفية للبطاقة */
        .course-banner-text {
            font-family: 'El Messiri', 'Cairo', sans-serif;
            font-size: 40px;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.22);
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.08);
            user-select: none;
            z-index: 2;
            text-align: center;
            padding: 0 20px;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            transform: scale(1);
        }

        .course-card:hover .course-banner-text {
            transform: scale(1.1) translateY(-6px);
            color: rgba(255, 255, 255, 0.32);
            text-shadow: 0 0 45px rgba(255, 255, 255, 0.15);
        }

        /* تفاصيل الدورة والتحكم */
        .course-body {
            padding: 28px 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1;
            gap: 20px;
            background: #ffffff;
            border-top: 1px solid rgba(52, 0, 173, 0.04);
        }

        .course-name {
            font-family: 'Cairo', sans-serif;
            font-size: 18px;
            font-weight: 800;
            color: #1c1b20;
            transition: color 0.3s ease;
            text-align: right;
            line-height: 1.4;
        }

        .course-card:hover .course-name {
            color: #3400AD;
        }

        .course-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid rgba(52, 0, 173, 0.05);
            padding-top: 18px;
        }

        .course-teacher {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .teacher-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(52, 0, 173, 0.06);
            border: 1.5px solid rgba(52, 0, 173, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD;
            font-family: 'Cairo', sans-serif;
            font-size: 14px;
            font-weight: 800;
            box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8);
        }

        .teacher-name {
            font-family: 'Cairo', sans-serif;
            font-size: 12.5px;
            font-weight: 700;
            color: #6252a1;
        }

        /* زر البدء الكبسولي المضيء والفاخر */
        .btn-course-start {
            background: transparent;
            border: 1.5px solid rgba(52, 0, 173, 0.18);
            color: #3400AD;
            padding: 8px 20px;
            border-radius: 16px;
            font-family: 'Cairo', sans-serif;
            font-weight: 800;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .course-card:hover .btn-course-start {
            background: #3400AD;
            color: #ffffff;
            border-color: #3400AD;
            box-shadow: 0 6px 18px rgba(52, 0, 173, 0.2);
        }

        .btn-course-start:hover {
            background: #1ED6AB !important;
            color: #ffffff !important;
            border-color: #1ED6AB !important;
            box-shadow: 0 8px 20px rgba(30, 214, 171, 0.45) !important;
            transform: scale(1.03);
        }

        /* -------------------------------------------------------------
           وضع التحرير المباشر (Direct Editing Mode)
           ------------------------------------------------------------- */
        body.edit-mode-active [contenteditable="true"] {
            outline: 2px dashed #3400AD;
            outline-offset: 4px;
            cursor: text;
            transition: outline-color 0.2s ease;
        }

        body.edit-mode-active [contenteditable="true"]:hover {
            outline-color: #1ED6AB;
            background: rgba(52, 0, 173, 0.03);
        }

        .editor-toolbar {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: rgba(26, 0, 99, 0.9);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.15);
            padding: 12px 24px;
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(52, 0, 173, 0.3);
            display: flex;
            align-items: center;
            gap: 20px;
            z-index: 9999;
            direction: rtl;
            color: #ffffff;
            font-family: 'Cairo', sans-serif;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .editor-toolbar.active {
            transform: translateX(-50%) translateY(0);
        }

        .editor-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13.5px;
            font-weight: 700;
        }

        .editor-status-dot {
            width: 8px;
            height: 8px;
            background-color: #1ED6AB;
            border-radius: 50%;
            box-shadow: 0 0 8px #1ED6AB;
            animation: pulseGlow 1s infinite alternate;
        }

        .btn-editor-action {
            background: #ffffff;
            border: none;
            color: #3400AD;
            padding: 6px 16px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
        }

        .btn-editor-action:hover {
            background: #1ED6AB;
            color: #ffffff;
            box-shadow: 0 5px 15px rgba(30, 214, 171, 0.45);
        }

        .btn-editor-action.close-edit {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }

        .btn-editor-action.close-edit:hover {
            background: rgba(239, 68, 68, 0.2);
            border-color: rgb(239, 68, 68);
            color: rgb(239, 68, 68);
        }

        @keyframes pulseGlow {
            0% { transform: scale(0.9); opacity: 0.6; }
            100% { transform: scale(1.15); opacity: 1; }
        }

        /* التجاوب لقسم الدورات */
        @media (max-width: 1024px) {
            .courses-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 28px;
            }
        }

        @media (max-width: 768px) {
            .courses-section {
                padding: 60px 0;
            }
            .courses-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }
            .courses-container {
                padding: 0 20px;
            }
            .course-banner {
                height: 200px;
            }
            .course-banner-text {
                font-size: 34px;
            }
            .academy-title {
                font-size: 30px;
            }
        }

        /* -------------------------------------------------------------
           الوضع الداكن الفاخر (Premium Dark Mode)
           ------------------------------------------------------------- */
        body.dark-theme {
            /* خلفية ليلية بنفسجية ملوكية عميقة جداً متناسقة مع الهوية */
            background: 
                radial-gradient(at 0% 0%, rgba(52, 0, 173, 0.25) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(140, 82, 255, 0.15) 0px, transparent 50%);
            background-color: #05020c;
            color: #f3f0fa;
        }

        /* الهيدر الزجاجي الداكن */
        body.dark-theme .st0 {
            background: rgba(5, 2, 12, 0.7);
            border-bottom: 1px solid rgba(52, 0, 173, 0.15);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        }

        /* الحفاظ على هوية البنفسجي كعنصر أساسي والأخضر كوهج حركي/تحويم */
        body.dark-theme .nav-item {
            color: #e2def2; /* زيادة التباين لقراءة ممتازة */
        }

        body.dark-theme .nav-item:hover,
        body.dark-theme .nav-item.active {
            color: #8c52ff; /* بنفسجي مضيء للنشاط بالوضع الداكن */
        }

        body.dark-theme .nav-item::after {
            background: #8c52ff;
            box-shadow: 0 0 10px rgba(140, 82, 255, 0.8);
        }

        /* زر الدخول التفاعلي بالبنفسجي المضيء */
        body.dark-theme .st1 {
            background: rgba(140, 82, 255, 0.15) !important;
            border-color: rgba(140, 82, 255, 0.45) !important;
            color: #ffffff !important;
        }

        body.dark-theme .st1:hover {
            background: #8c52ff !important;
            border-color: #8c52ff !important;
            color: #ffffff !important;
            box-shadow: 0 0 20px rgba(140, 82, 255, 0.5) !important;
        }

        /* شارة الأكاديمية */
        body.dark-theme .academy-badge {
            background: rgba(52, 0, 173, 0.12);
            border-color: rgba(52, 0, 173, 0.25);
        }

        body.dark-theme .academy-badge span {
            color: #8c52ff;
        }

        body.dark-theme .academy-title {
            color: #ffffff;
        }

        body.dark-theme .academy-subtitle {
            color: #b5adc9;
        }

        /* كروت الدورات بالوضع الداكن */
        body.dark-theme .course-card {
            background: rgba(15, 10, 30, 0.55);
            border-color: rgba(52, 0, 173, 0.15);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
        }

        body.dark-theme .course-card:hover {
            border-color: rgba(140, 82, 255, 0.35);
            box-shadow: 
                0 30px 60px rgba(0, 0, 0, 0.45), 
                0 0 0 1px rgba(140, 82, 255, 0.15),
                inset 0 2px 4px rgba(255, 255, 255, 0.05);
        }

        body.dark-theme .course-body {
            background: #120e1c;
            border-top-color: rgba(255, 255, 255, 0.04);
        }

        body.dark-theme .course-name {
            color: #ffffff;
        }

        body.dark-theme .course-card:hover .course-name {
            color: #8c52ff;
        }

        body.dark-theme .course-footer {
            border-top-color: rgba(255, 255, 255, 0.05);
        }

        body.dark-theme .teacher-avatar {
            background: rgba(52, 0, 173, 0.12);
            border-color: rgba(140, 82, 255, 0.25);
            color: #8c52ff;
        }

        body.dark-theme .teacher-name {
            color: #b5adc9;
        }

        body.dark-theme .btn-course-start {
            border-color: rgba(140, 82, 255, 0.5) !important;
            color: #ffffff !important;
            background: rgba(140, 82, 255, 0.1) !important;
        }

        body.dark-theme .course-card:hover .btn-course-start {
            background: #8c52ff;
            color: #ffffff;
            border-color: #8c52ff;
            box-shadow: 0 6px 18px rgba(140, 82, 255, 0.4);
        }

        /* تحسين التباين للعناصر التي فاتت بالوضع الداكن */
        body.dark-theme .editor-toolbar {
            background: rgba(15, 10, 30, 0.95);
            border-color: rgba(140, 82, 255, 0.25);
            color: #ffffff;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        }

        body.dark-theme .btn-editor-action {
            background: rgba(140, 82, 255, 0.15);
            color: #c5bfe0;
        }

        body.dark-theme .btn-editor-action:hover {
            background: #8c52ff;
            color: #ffffff;
        }

        body.dark-theme .editor-status-dot {
            background-color: #1ED6AB;
            box-shadow: 0 0 8px #1ED6AB;
        }

        body.dark-theme [contenteditable="true"] {
            outline: 2px dashed #8c52ff;
        }

        body.dark-theme [contenteditable="true"]:hover {
            outline-color: #1ED6AB;
            background: rgba(140, 82, 255, 0.05);
        }

        /* زر وضع الليل والنهار المطور */
        .dark-mode-toggle {
            position: fixed;
            bottom: 30px;
            left: 30px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(52, 0, 173, 0.15);
            box-shadow: 0 10px 30px rgba(52, 0, 173, 0.15);
            color: #3400AD;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 9998;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        body.dark-theme .dark-mode-toggle {
            background: rgba(15, 10, 30, 0.7);
            border-color: rgba(140, 82, 255, 0.25);
            color: #8c52ff;
            box-shadow: 0 10px 30px rgba(140, 82, 255, 0.15);
        }

        .dark-mode-toggle:hover {
            transform: scale(1.08) rotate(30deg);
        }

        body.dark-theme .dark-mode-toggle:hover {
            background: #8c52ff;
            color: #ffffff;
            box-shadow: 0 15px 35px rgba(140, 82, 255, 0.35);
        }

        body.edit-mode-active .dark-mode-toggle {
            transform: translateY(-80px);
        }
        body.edit-mode-active .dark-mode-toggle:hover {
            transform: translateY(-80px) scale(1.08) rotate(30deg);
        }

        /* -------------------------------------------------------------
           تنسيقات زر الهامبرغر والشريط الجانبي للموبايل والتابلت
           ------------------------------------------------------------- */
        .mobile-menu-toggle {
            display: none;
            background: transparent;
            border: none;
            color: #3400AD;
            cursor: pointer;
            z-index: 101;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: rgba(52, 0, 173, 0.05);
            border: 1px solid rgba(52, 0, 173, 0.1);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .mobile-menu-toggle:hover {
            background: rgba(52, 0, 173, 0.12);
            transform: scale(1.05);
        }

        .mobile-sidebar {
            position: fixed;
            top: 0;
            right: -320px; /* مخفي خارج الشاشة من اليمين */
            width: 300px;
            height: 100vh;
            background: rgba(253, 248, 255, 0.85);
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            border-left: 1px solid rgba(52, 0, 173, 0.1);
            box-shadow: -10px 0 40px rgba(52, 0, 173, 0.05);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            padding: 30px 24px;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            direction: rtl;
        }

        .mobile-sidebar.active {
            transform: translateX(-320px); /* ينزلق للداخل */
        }

        .sidebar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 40px;
            width: 100%;
        }

        .mobile-sidebar-close {
            background: rgba(52, 0, 173, 0.05);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .mobile-sidebar-close:hover {
            background: rgba(52, 0, 173, 0.15);
            transform: rotate(90deg);
        }

        .sidebar-logo {
            width: 80px;
            height: 40px;
            background-image: url('logo.png');
            background-repeat: no-repeat;
            background-size: contain;
            opacity: 1;
        }

        .sidebar-links {
            display: flex;
            flex-direction: column;
            gap: 20px;
            flex-grow: 1;
        }

        .sidebar-item {
            display: flex;
            align-items: center;
            gap: 16px;
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-weight: 600;
            font-size: 18px;
            color: #484556;
            text-decoration: none;
            padding: 14px 20px;
            border-radius: 12px;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            position: relative;
            background: transparent;
            border: none;
        }

        .sidebar-item::before {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 0%;
            background: #3400AD;
            transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            border-radius: 4px;
            opacity: 0;
        }

        .sidebar-item-number {
            display: none !important;
            font-family: 'Outfit', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: rgba(52, 0, 173, 0.4);
            transition: all 0.4s ease;
            letter-spacing: 1px;
        }

        .sidebar-item-text {
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .sidebar-item:hover {
            background: rgba(52, 0, 173, 0.03);
            color: #3400AD;
            transform: translateX(-5px);
        }

        .sidebar-item:hover::before, .sidebar-item.active::before {
            height: 60%;
            opacity: 1;
        }

        .sidebar-item:hover .sidebar-item-number, .sidebar-item.active .sidebar-item-number {
            color: #3400AD;
            transform: translateY(-2px);
        }

        .sidebar-item:hover .sidebar-item-text, .sidebar-item.active .sidebar-item-text {
            transform: translateX(-8px);
        }

        .sidebar-item.active {
            background: rgba(52, 0, 173, 0.06);
            color: #3400AD;
        }

        .sidebar-footer {
            width: 100%;
            margin-top: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 20px 0;
        }

        .sidebar-register-btn {
            width: 100% !important;
            height: 52px !important;
            border-radius: 16px !important;
            background: #3400AD !important;
            color: #ffffff !important;
            font-weight: 700 !important;
            box-shadow: 0 10px 25px rgba(52, 0, 173, 0.15) !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sidebar-register-btn:hover {
            background: #1a0063 !important;
            box-shadow: 0 12px 30px rgba(26, 0, 99, 0.25) !important;
        }

        .sidebar-login-btn {
            width: 100% !important;
            height: 52px !important;
            border-radius: 16px !important;
            background: rgba(52, 0, 173, 0.08) !important;
            border: 1px solid rgba(52, 0, 173, 0.2) !important;
            color: #3400AD !important;
            font-weight: 700 !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sidebar-login-btn:hover {
            background: rgba(52, 0, 173, 0.15) !important;
        }

        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 9997;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }

        .sidebar-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* -------------------------------------------------------------
           الوضع الداكن للقائمة الجانبية
           ------------------------------------------------------------- */
        body.dark-theme .mobile-menu-toggle {
            color: #8c52ff;
            background: rgba(140, 82, 255, 0.1);
            border-color: rgba(140, 82, 255, 0.2);
        }

        body.dark-theme .mobile-menu-toggle:hover {
            background: rgba(140, 82, 255, 0.18);
        }

        body.dark-theme .mobile-sidebar {
            background: rgba(15, 10, 30, 0.85);
            border-left-color: rgba(140, 82, 255, 0.2);
            box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
        }

        body.dark-theme .mobile-sidebar-close {
            background: rgba(255, 255, 255, 0.05);
            color: #8c52ff;
        }

        body.dark-theme .mobile-sidebar-close:hover {
            background: rgba(140, 82, 255, 0.2);
        }

        body.dark-theme .sidebar-item {
            color: #c5bfe0;
        }

        body.dark-theme .sidebar-item::before {
            background: #8c52ff;
        }

        body.dark-theme .sidebar-item-number {
            color: rgba(140, 82, 255, 0.4);
        }

        body.dark-theme .sidebar-item:hover {
            background: rgba(140, 82, 255, 0.06);
            color: #ffffff;
        }

        body.dark-theme .sidebar-item.active {
            background: rgba(140, 82, 255, 0.12);
            color: #ffffff;
        }

        body.dark-theme .sidebar-item:hover .sidebar-item-number, body.dark-theme .sidebar-item.active .sidebar-item-number {
            color: #8c52ff;
        }

        body.dark-theme .sidebar-login-btn {
            background: #8c52ff !important;
            box-shadow: 0 10px 25px rgba(140, 82, 255, 0.35) !important;
        }

        body.dark-theme .sidebar-login-btn:hover {
            background: #9d4edd !important;
            box-shadow: 0 12px 30px rgba(140, 82, 255, 0.45) !important;
        }

        /* -------------------------------------------------------------
           التجاوب الكامل والتكيف مع شاشات الهواتف والتابلت
           ------------------------------------------------------------- */
        @media (max-width: 992px) {
            .st0 {
                padding: 0 24px;
            }
            .st1 {
                width: 140px;
                font-size: 13px;
            }
            .nav-links {
                gap: 24px;
            }
        }

        @media (max-width: 768px) {
            .st0 {
                padding: 0 16px;
                height: 72px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: fixed;
                overflow: hidden !important; /* منع الشعار من الخروج من حدود الهيدر */
            }
            .nav-links {
                display: none !important;
            }
            .header-login-btn {
                display: flex !important; /* إظهار زر تسجيل الدخول */
                order: 3 !important; /* زر تسجيل الدخول في أقصى اليسار في RTL */
                position: static !important;

                width: auto !important;
                height: 38px !important;
                padding: 0 14px !important;
                border-radius: 19px !important;
                background: rgba(52, 0, 173, 0.08) !important;
                border: 1px solid rgba(52, 0, 173, 0.18) !important;
                font-size: 13px !important;
                font-weight: 700 !important;
                color: #3400AD !important;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
            .mobile-menu-toggle {
                display: flex;
                position: relative !important;
                z-index: 10 !important; /* فوق الشعار ليبقى قابلاً للنقر */
                order: 1 !important; /* زر القائمة ذو الـ 3 شرائط في أقصى اليمين في RTL */
                width: 48px; /* حجم لمس قياسي Apple */
                height: 48px;
                align-items: center;
                justify-content: center;
                margin-left: 0;
                margin-right: 8px !important;
            }
            .header-bg-shape {
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                transform: translate(-50%, -50%) !important;
                margin-left: -8px !important; /* إزاحة بصرية طفيفة ليسار السنتر */
                width: 175px !important;
                height: 90px !important;
                z-index: 1 !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
                background-size: contain !important;
                pointer-events: none; /* لكي لا يعيق النقرات */
            }
        }

        @media (max-width: 480px) {
            .st0 {
                padding: 0 8px;
            }
            .mobile-menu-toggle {
                width: 40px;
                height: 40px;
            }
            .header-bg-shape {
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                transform: translate(-50%, -50%) !important;
                margin-left: -8px !important;
                width: 175px !important;
                height: 90px !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
                background-size: contain !important;
            }
        }
    
    
    /* -----------------------------------------
       CORRECTOR PAGE STYLES (index_premium_v8.html)
       ----------------------------------------- */
    
        /* تصفير الهوامش وتأسيس التصميم */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            max-width: 100%;
            overflow-x: hidden;
        }

        body {
            font-family: 'IBM Plex Sans Arabic', 'Alexandria', sans-serif;
            /* خلفية بتدرج ضوئي شبكي ناعم للغاية من الملف المرجعي */
            background: 
                radial-gradient(at 0% 0%, hsla(253, 82%, 87%, 0.2) 0px, transparent 45%),
                radial-gradient(at 100% 0%, hsla(276, 100%, 92%, 0.2) 0px, transparent 45%);
            background-color: #fdf8ff;
            min-height: 100vh;
            position: relative;
        }

        /* -------------------------------------------------------------
           هيدر زجاجي عصري (Glassmorphism Navigation)
           ------------------------------------------------------------- */
        .st0 {
            background: rgba(253, 248, 255, 0.4); /* تخفيف الشفافية لتمرير عناصر الخلفية */
            backdrop-filter: blur(20px) saturate(180%); /* تقوية البلور المشبع لزيادة فخامة المظهر الزجاجي */
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.45);
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 64px;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 40px;
            box-shadow: 
                0 8px 32px 0 rgba(52, 0, 173, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.6); /* حافة داخلية مضيئة تبرز تأثير الزجاج */
            overflow: hidden;
            animation: slideDownHeader 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .header-bg-shape {
            position: absolute;
            right: 30px; /* تم إزاحة الشعار نحو اليسار ليدخل إلى مساحة الشاشة بالكامل */
            top: 0;
            width: 187px;
            height: 80px;
            z-index: 1;
            pointer-events: none;
            background-image: url('logo.png');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: right center;
            opacity: 1; /* تم زيادة الشفافية لتصبح 100% */
        }

        .st1 {
            background: rgba(52, 0, 173, 0.08); /* زجاج بنفسجي شفاف ناعم للغاية */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(52, 0, 173, 0.18);
            border-top: none;
            border-left: none; /* يتلاءم مع زاوية الهيدر */
            position: absolute;
            left: 0;
            top: 0;
            width: 180px;
            height: 64px;
            border-radius: 0px 0px 24px 0px;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD; /* نص بنفسجي للمقروئية والتناسق اللوني الفخم */
            font-weight: 700;
            font-size: 15px;
            letter-spacing: 0.5px;
            box-shadow: 
                0 4px 20px rgba(52, 0, 173, 0.02),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .st1:hover {
            background: rgba(52, 0, 173, 0.15);
            border-color: rgba(52, 0, 173, 0.3);
            color: #4400d9;
            box-shadow: 0 6px 25px rgba(52, 0, 173, 0.08);
            transform: translateY(0);
        }

        /* أزرار التنقل الفاخرة المضافة للهيدر */
        .nav-links {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); /* محاذاة في السنتر الفاخر للحاسوب */
            display: flex;
            align-items: center;
            gap: 40px;
            z-index: 10;
        }

        .nav-item {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-weight: 600;
            font-size: 14px;
            color: #484556;
            text-decoration: none;
            position: relative;
            padding: 8px 4px;
            transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
        }

        .nav-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: 16px;
            height: 3px;
            background: #3400AD; /* اللون المعتمد */
            border-radius: 2px;
            box-shadow: 0 0 8px rgba(52, 0, 173, 0.5);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .nav-item:hover {
            color: #3400AD;
            transform: translateY(-1px);
        }

        .nav-item:hover::after, .nav-item.active::after {
            transform: translateX(-50%) scaleX(1);
        }

        .nav-item.active {
            color: #3400AD;
        }

        /* -------------------------------------------------------------
           قسم الـ Hero المطلق التفاعلي لقسم الحاسوب
           ------------------------------------------------------------- */
        .hero-section {
            padding-top: 100px;
            padding-bottom: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 80vh; /* تم خفض الارتفاع قليلاً ليوحي للمستخدم بوجود بقية للصفحة في الأسفل */
            direction: ltr;
        }

        .hero-container {
            width: 1280px;
            height: 520px;
            position: relative;
            margin: 0 auto;
        }

        /* شارة "المنصة التعليمية الأولى" الفاخرة المعتمدة على الرموز */
        /* شارة رقم 1 في الجزائر الفاخرة والمطورة */
        .badge-st2 {
            background: transparent !important;
            border: none !important;
            position: absolute;
            left: 1007px;
            top: 10px;
            width: 220px;
            height: 38px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            box-shadow: none !important;
            direction: rtl;
            animation: badgeEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            cursor: default;
            overflow: hidden;
        }

        .badge-content-wrapper {
            display: flex;
            flex-direction: column;
            height: 76px;
            flex-shrink: 0;
            width: 100%;
            animation: badgeFlip 6s infinite cubic-bezier(0.77, 0, 0.175, 1);
        }

        .badge-state-1, .badge-state-2 {
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 0 16px;
            white-space: nowrap;
        }

        @keyframes badgeFlip {
            0%, 45% { transform: translateY(0); }
            50%, 95% { transform: translateY(-38px); }
            100% { transform: translateY(0); }
        }

        .badge-st2:hover {
            background: transparent !important;
            border: none !important;
            transform: translateY(-2px);
            box-shadow: none !important;
        }

        .badge-icon-premium {
            color: #1c1b20 !important;
            font-size: 18px;
            display: flex;
            align-items: center;
            filter: none !important;
            transition: color 0.3s ease;
        }

        .badge-text {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 13px !important;
            color: #1c1b20 !important;
            text-shadow: none !important;
            font-weight: 700 !important;
            letter-spacing: 0.3px;
            transition: color 0.3s ease;
        }

        body.dark-theme .badge-icon-premium {
            color: rgba(255, 255, 255, 0.9) !important;
        }

        body.dark-theme .badge-text {
            color: rgba(255, 255, 255, 0.9) !important;
        }

        /* -------------------------------------------------------------
           طريقة الكتابة الفاخرة للعنوان الرئيسي والثانوي (Premium Typography)
           ------------------------------------------------------------- */
        .st3-box {
            position: absolute;
            left: 450px; /* تم زحزحتها لليسار لتتسع للسطر الواحد بالكامل */
            top: 90px;
            width: 753px;
            height: 80px; /* ارتفاع أقل للسطر الواحد */
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0;
            direction: rtl;
            animation: boxEntranceRight 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        /* النمط الفاخر للعنوان: خط عريض داكن مع كلمة ملونة ومائلة في نفس السطر */
        .title-st3 {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-weight: 900;
            font-size: 64px; /* حجم خط أكبر وسميك كلاسيكي فخم */
            color: #1c1b20; /* لون داكن فاخر */
            line-height: 1.2;
            width: 100%;
            letter-spacing: -1px;
            white-space: nowrap; /* منع النزول لسطر جديد */
        }

        .title-st3 .highlight-text {
            color: #3400AD; /* اللون البنفسجي المعتمد */
            font-style: italic; /* تميز مائل فخم */
            font-weight: 900;
            margin-right: 12px;
            text-shadow: 0 4px 20px rgba(52, 0, 173, 0.15);
            display: inline-block;
            position: relative;
        }

        .st4-box {
            position: absolute;
            left: 450px;
            top: 185px; /* تم رفعه للأعلى لملاءمة العنوان ذو السطر الواحد */
            width: 753px;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0;
            direction: rtl;
            animation: boxEntranceRight 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        /* تصميم تحريري فاخر للاقتباس يبتعد عن الأشكال التقليدية المعتادة للذكاء الاصطناعي */
        .subtitle-st4 {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-weight: 500;
            font-size: 18.5px;
            color: #484556; /* لون جانبي هادئ */
            line-height: 1.6;
            width: 100%;
            padding: 14px 28px; /* هوامش داخلية تعطي مساحة للمحتوى */
            position: relative;
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 16px;
            border: 1px solid rgba(52, 0, 173, 0.05);
            box-shadow: 
                0 10px 30px rgba(52, 0, 173, 0.02),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            display: inline-flex;
            align-items: center;
        }

        /* خط عمودي تحريري رفيع يتلاشى تدريجياً للأسفل */
        .subtitle-st4::before {
            content: '';
            position: absolute;
            right: 0;
            top: 15%;
            height: 70%;
            width: 3px;
            background: linear-gradient(to bottom, #1ED6AB 0%, rgba(30, 214, 171, 0.1) 100%);
            border-radius: 2px;
        }

        /* نقطة متوهجة ناعمة تضفي لمسة بشرية مصممة بعناية */
        .subtitle-st4::after {
            content: '';
            position: absolute;
            right: -2px;
            top: 12%;
            width: 7px;
            height: 7px;
            background: #1ED6AB;
            border-radius: 50%;
            box-shadow: 0 0 8px #1ED6AB;
        }

        /* -------------------------------------------------------------
           بقية العناصر والأزرار والوسائط
           ------------------------------------------------------------- */
        .social-circle {
            width: 72px;
            height: 72px;
            background: rgba(255, 255, 255, 0.8);
            border: 1.5px solid rgba(52, 0, 173, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD; /* بنفسجي مالي ليتطابق فخامة مع ألوان المنصة */
            font-family: 'Outfit', 'Cairo', sans-serif;
            font-weight: 800;
            font-size: 15px;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(52, 0, 173, 0.02);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            animation: popInButtons 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            pointer-events: auto;
        }

        .social-circle.st6 { position: absolute; left: 682px; top: 291px; } /* تم الترحيل لليسار لمنع التداخل */
        .social-circle.st5 { position: absolute; left: 778px; top: 291px; } /* تم الترحيل لليسار لمنع التداخل */
        .social-circle.st7 { position: absolute; left: 586px; top: 291px; } /* زر فيسبوك */
        .social-circle.st8 { position: absolute; left: 490px; top: 291px; } /* زر تيك توك */

        .social-circle:hover {
            transform: translateY(-5px) scale(1.05);
            background: #3400AD;
            color: #ffffff;
            border-color: #3400AD;
            box-shadow: 0 8px 25px rgba(52, 0, 173, 0.2);
        }

        .btn-st0 {
            position: absolute;
            left: 874px; /* تحريك لليسار قليلاً لموازنة العرض الجديد للزر */
            top: 290px;
            width: 330px; /* زيادة العرض ليتناسق مع طول النص الجديد */
            height: 75px;
            background: #3400AD; /* تم استخدام البنفسجي الصريح المعتمد */
            color: #ffffff;
            font-family: 'Cairo', sans-serif;
            font-weight: 800;
            font-size: 19px;
            border-radius: 38px;
            border: none;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(52, 0, 173, 0.25);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            animation: popInButtons 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            pointer-events: auto;
        }

        .btn-st0::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.6s ease;
        }

        .btn-st0:hover::before { left: 100%; }
        .btn-st0:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 15px 40px rgba(52, 0, 173, 0.35);
        }

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

        .hero-visual-assets {
            position: absolute;
            left: 0;
            top: 0;
            width: 480px;
            height: 480px;
            z-index: 1;
            pointer-events: none;
        }

        .hero-actions {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .hero-socials {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .media-glow {
            position: absolute;
            left: 60px;
            top: 20px;
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, rgba(92, 49, 248, 0.12) 0%, rgba(52, 0, 173, 0) 70%);
            z-index: 1;
            pointer-events: none;
            animation: pulseGlow 8s infinite alternate;
        }

        .droplets-image1 {
            position: absolute;
            left: 71px;
            top: 12px;
            width: 408px;
            height: 408px;
            background-image: url('image1.png');
            background-repeat: no-repeat;
            background-size: contain;
            z-index: 4;
            pointer-events: none;
            opacity: 0.95;
            animation: floatDroplets 7s ease-in-out infinite;
        }

        .card-st7 {
            position: absolute;
            left: 76px;
            top: 36px;
            width: 280px;
            height: 340px;
            background: #3400AD; /* بنفسجي صريح معتمد */
            border-radius: 83px;
            z-index: 2;
            box-shadow: 0 25px 50px rgba(52, 0, 173, 0.22);
            animation: cardEntrance 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* حاوية الكروموسوم (تحمل أنيميشن الدخول والطفو) */
        .dna-wrapper {
            position: absolute;
            left: 56px; /* ضبط الإزاحة ليظهر متناسقاً تماماً بعد تصغير الحجم */
            top: 16px;
            width: 420px; /* تصغير حجم الكروموزوم ليطابق الصورة */
            height: 420px;
            z-index: 3;
            pointer-events: none; /* تمرير الأحداث للداخل */
            opacity: 0;
            animation: dnaEntrance 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards, floatDNA 5.5s ease-in-out infinite 2.2s;
        }

        /* الكروموسوم (DNA) في المقدمة مع أنيميشن التمرير السوفت */
        .dna-image {
            width: 100%;
            height: 100%;
            background-image: url('image.png');
            background-repeat: no-repeat;
            background-size: contain;
            pointer-events: auto; /* تمكين التفاعل مع مؤشر الفأرة */
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease; /* انتقال سلس فائق النعومة */
            filter: drop-shadow(0 20px 40px rgba(52, 0, 173, 0.22));
        }

        /* أنيميشن التفاعل عند تمرير الفأرة (Hover) على الكروموسوم لليمين والأعلى */
        .dna-image:hover {
            cursor: grab;
            animation-play-state: paused; /* إيقاف الطفو مؤقتاً لإظهار الإزاحة الصريحة */
            transform: translate(25px, -15px) scale(1.05); /* إزاحة ناعمة لليمين وللأعلى مع تكبير خفيف */
            filter: drop-shadow(0 30px 60px rgba(92, 49, 248, 0.45)) saturate(1.2);
        }

        /* -------------------------------------------------------------
           قسم الميزات والخصائص الإبداعي (Premium Features Grid)
           ------------------------------------------------------------- */
        .features-section {
            padding: 20px 24px 40px 24px; /* تقليص المسافات بين السكشنز */
            max-width: 1280px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
        }

        .features-header {
            text-align: center;
            margin-bottom: 40px; /* تقليص المسافة بين العنوان والبطاقات */
            animation: badgeEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .features-title {
            font-family: 'IBM Plex Sans Arabic', sans-serif; /* الخط الفخم المعتمد في الهوية */
            font-size: 34px;
            color: #1c1b20;
            font-weight: 700;
            margin-bottom: 14px;
            position: relative;
            display: inline-block;
            letter-spacing: -0.5px;
        }

        .features-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, transparent, #3400AD 50%, transparent);
            border-radius: 2px;
        }

        .features-subtitle {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 16px;
            color: #6252a1;
            font-weight: 500;
            margin-top: 18px;
            opacity: 0.85;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            perspective: 1500px; /* تمكين المنظور ثلاثي الأبعاد للشبكة */
        }

        /* حاوية البطاقة الداعمة للدوران ثلاثي الأبعاد */
        .feature-card-wrapper {
            height: 380px;
            perspective: 1500px;
            background: transparent;
        }

        .feature-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            transform-style: preserve-3d;
        }

        .feature-card-wrapper:hover .feature-card-inner {
            transform: rotateY(180deg);
        }

        /* الوجهين الأمامي والخلفي للبطاقة */
        .feature-card-front, .feature-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 28px;
            box-shadow: 
                0 10px 30px rgba(52, 0, 173, 0.01),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }

        /* الوجه الأمامي (يحتوي على النص الحالي والأيقونة) */
        .feature-card-front {
            background: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(52, 0, 173, 0.06);
            padding: 36px 28px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: right;
            left: 0; top: 0;
        }

        /* تأثير التوهج الملون بالخلفية عند التمرير للوجه الأمامي */
        .feature-card-front::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 100% 0%, rgba(30, 214, 171, 0.08) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 1;
        }

        .feature-card-wrapper:hover .feature-card-front {
            border-color: rgba(52, 0, 173, 0.22);
            box-shadow: 
                0 25px 50px rgba(52, 0, 173, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .feature-card-wrapper:hover .feature-card-front::before {
            opacity: 1;
        }

        /* الوجه الخلفي (سيملأ بالصور الفاخرة لاحقاً، حالياً تدرج زجاجي مبدئي فخم) */
        .feature-card-back {
            background: rgba(52, 0, 173, 0.06);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(52, 0, 173, 0.18);
            transform: rotateY(180deg);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 16px;
            left: 0; top: 0;
        }

        .feature-card-back-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
            opacity: 0.9;
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .feature-card-wrapper:hover .feature-card-back-img {
            transform: scale(1.05);
        }

        .feature-icon-wrapper {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            background: rgba(52, 0, 173, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            color: #3400AD;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            z-index: 2;
        }

        .feature-icon-wrapper svg {
            width: 24px;
            height: 24px;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .feature-card:hover .feature-icon-wrapper {
            background: #3400AD;
            color: #ffffff;
            box-shadow: 0 8px 25px rgba(52, 0, 173, 0.25);
        }

        .feature-card:hover .feature-icon-wrapper svg {
            transform: scale(1.1) rotate(3deg);
        }

        .feature-badge {
            font-family: 'Alexandria', sans-serif;
            font-size: 10px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 12px;
            margin-bottom: 12px;
            display: inline-block;
            letter-spacing: 0.3px;
            z-index: 2;
        }

        .badge-purple {
            background: rgba(52, 0, 173, 0.08);
            color: #3400AD;
        }

        .badge-red {
            background: rgba(255, 23, 23, 0.08);
            color: #FF1717;
        }

        .badge-green {
            background: rgba(30, 214, 171, 0.08);
            color: #1ED6AB;
            box-shadow: 0 0 10px rgba(30, 214, 171, 0.1);
        }

        .feature-card-title {
            font-family: 'Cairo', sans-serif;
            font-size: 19px;
            font-weight: 800;
            color: #1c1b20;
            margin-bottom: 12px;
            z-index: 2;
            letter-spacing: -0.3px;
        }

        .feature-card-desc {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 14px;
            color: #484556;
            line-height: 1.6;
            z-index: 2;
            opacity: 0.9;
        }

        /* -------------------------------------------------------------
           قسم الخط الزمني والإنجازات (Premium Achievements Timeline)
           ------------------------------------------------------------- */
        .timeline-section {
            background-color: #ffffff; /* عزل القسم بخلفية بيضاء كاملة من الحدود للحدود */
            width: 100%;
            padding: 40px 0; /* تقليص المسافات بين السكشنز */
            position: relative;
            z-index: 10;
            border-top: 1px solid rgba(52, 0, 173, 0.05); /* حد علوي خفيف جداً لتأكيد العزل البصري */
        }

        .timeline-container {
            display: flex;
            gap: 28px;
            direction: rtl;
            align-items: stretch; /* تجعل الراية تتمدد وتطابق كامل ارتفاع محتوى الكروت */
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px; /* الحشوة الجانبية داخل الحاوية المحددة */
        }

        /* الراية الرأسية اليمنى "السباقون دوماً" الملتزمة بتفاصيل الصورة بدقة */
        .timeline-banner {
            background: #1a0063; /* لون أزرق بنفسجي ملكي داكن مطابق للصورة */
            width: 170px; /* عرض واسع ومناسب لاحتضان النصوص والخطوط الزخرفية */
            border-radius: 28px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 20px 45px rgba(26, 0, 99, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            padding: 40px 10px;
            flex-shrink: 0;
            transition: all 0.4s ease;
        }

        .timeline-banner:hover {
            box-shadow: 0 25px 55px rgba(26, 0, 99, 0.25);
            transform: translateY(-2px);
        }

        /* رقم "7" كبير داكن في الخلفية كشكل زخرفي هندسي مطابق للصورة */
        .timeline-banner-bg {
            position: absolute;
            font-family: 'Outfit', sans-serif;
            font-size: 280px; /* رقم ضخم يملأ مساحة الراية بالكامل */
            font-weight: 800;
            color: rgba(25, 0, 115, 0.6); /* درجة داكنة توفر تباينًا هندسيًا صامتًا وفخمًا */
            left: 5%;
            top: -20px;
            pointer-events: none;
            z-index: 1;
            user-select: none;
            line-height: 1;
        }

        /* تنسيق نصوص الراية والخطوط الزخرفية مطابقة للصورة حرفياً */
        .timeline-banner-text {
            display: flex;
            flex-direction: column;
            align-items: center; /* توسيط عمودي */
            color: #ffffff;
            font-family: 'Cairo', sans-serif;
            z-index: 2;
            width: 100%;
            padding: 0 15px;
        }

        .banner-title {
            font-size: 24px;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.5px;
        }

        .banner-subtitle {
            font-size: 32px;
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: -0.5px;
            margin-top: 2px;
        }

        /* الحافة البيضاء الزخرفية في الأسفل المطابقة للصورة حرفياً */
        .banner-corner-indicator {
            width: 38px;
            height: 16px;
            border-right: 3px solid #ffffff;
            border-bottom: 3px solid #ffffff;
            margin-top: 15px;
            align-self: flex-start;
            margin-right: 18px; /* محاذاة لليمين متناسقة */
        }

        /* حاوية المحتوى الأيسر للخط الزمني */
        .timeline-content-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .timeline-title-box {
            display: flex;
            align-items: baseline; /* محاذاة النص على خط الأساس البصري */
            justify-content: space-between; /* دفع التوقيع لأقصى اليسار والعنوان لأقصى اليمين */
            text-align: right;
            margin-bottom: 35px;
            padding: 0 10px 0 15px; /* حشوة جانبية لحماية النصوص من الحواف */
        }

        .timeline-main-title {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 32px;
            font-weight: 700;
            color: #1c1b20;
            position: relative;
            display: inline-block;
        }

        .timeline-main-title::after {
            content: '';
            position: absolute;
            bottom: -6px;
            right: 0;
            width: 50px;
            height: 3px;
            background: #1ED6AB;
            border-radius: 2px;
            box-shadow: 0 0 6px #1ED6AB;
        }

        .timeline-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            position: relative;
        }

        /* كرت الإنجاز الفاخر */
        .timeline-card {
            background: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(52, 0, 173, 0.06);
            border-radius: 24px;
            padding: 32px 20px 24px 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            position: relative;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            min-height: 250px;
            box-shadow: 
                0 10px 30px rgba(52, 0, 173, 0.01),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            cursor: default;
        }

        /* رقم تسلسلي كبير وخافت جداً بالخلفية لزيادة عمق التصميم */
        .timeline-card::after {
            content: attr(data-index);
            position: absolute;
            top: 15px;
            left: 20px;
            font-family: 'Outfit', sans-serif;
            font-size: 72px;
            font-weight: 800;
            color: rgba(52, 0, 173, 0.018);
            pointer-events: none;
            z-index: 1;
        }

        .timeline-card:hover {
            transform: translateY(-6px);
            border-color: rgba(52, 0, 173, 0.18);
            box-shadow: 
                0 20px 40px rgba(52, 0, 173, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .timeline-card-text {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 14.5px;
            color: #484556;
            line-height: 1.7;
            font-weight: 500;
            margin-bottom: 24px;
            flex-grow: 1;
            z-index: 2;
            opacity: 0.95;
        }

        /* كبسولة التاريخ المضيئة والفاخرة بالأسفل */
        .timeline-card-date {
            font-family: 'Cairo', sans-serif;
            font-size: 12.5px;
            font-weight: 700;
            color: #3400AD;
            background: rgba(52, 0, 173, 0.05);
            padding: 6px 18px;
            border-radius: 20px;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            border: 1px solid rgba(52, 0, 173, 0.05);
            z-index: 2;
            letter-spacing: 0.3px;
        }

        .timeline-card:hover .timeline-card-date {
            background: #3400AD;
            color: #ffffff;
            border-color: #3400AD;
            box-shadow: 0 4px 15px rgba(52, 0, 173, 0.25);
        }

        /* توقيع الأستاذ بهاء الدين عبد الله بالخط العثماني الفاخر أمام العنوان */
        .timeline-signature {
            font-family: 'Amiri Quran', 'Amiri', 'Traditional Arabic', serif;
            font-size: 23px; /* الخط العثماني يظهر غاية في الفخامة بهذا الحجم */
            color: #b0aec2; /* لون رمادي فاتح فاخر وراقي */
            font-weight: normal;
            user-select: none;
            cursor: default;
            transition: color 0.3s ease;
            display: inline-block;
            margin-right: 18px; /* إزاحة مثالية متناسقة بجانب العنوان */
            line-height: 1;
        }

        .timeline-signature:hover {
            color: #9290a6;
        }

        /* -------------------------------------------------------------
           تأثيرات الحركة والأنيميشن الاحترافية
           ------------------------------------------------------------- */
        @keyframes slideDownHeader {
            from { transform: translateY(-100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes boxEntranceRight {
            from { transform: translateX(50px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

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

        @keyframes popInButtons {
            from { transform: scale(0.9) translateY(20px); opacity: 0; }
            to { transform: scale(1) translateY(0); opacity: 1; }
        }

        @keyframes cardEntrance {
            from { transform: scale(0.9) rotate(-3deg); opacity: 0; }
            to { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        @keyframes pulseGreen {
            0% { box-shadow: 0 0 5px #1ED6AB, 0 0 10px rgba(30, 214, 171, 0.4); }
            100% { box-shadow: 0 0 15px #1ED6AB, 0 0 30px rgba(30, 214, 171, 0.8); }
        }

        @keyframes pulseGlow {
            0% { transform: scale(0.95); opacity: 0.8; }
            100% { transform: scale(1.05); opacity: 1; }
        }

        @keyframes floatDNA {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-14px) rotate(1.5deg); }
        }

        @keyframes dnaEntrance {
            0% {
                transform: translateY(180px) rotate(-35deg) scale(0.3);
                opacity: 0;
                filter: blur(15px);
            }
            100% {
                transform: translateY(0px) rotate(0deg) scale(1);
                opacity: 1;
                filter: blur(0px);
            }
        }

        @keyframes floatDroplets {
            0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
            50% { transform: translateY(10px) translateX(-6px) rotate(-1deg); }
        }

        /* أنيميشن الإزاحة الناعمة للكروموزوم عند تمرير الفأرة (Soft Float Hover) */
        @keyframes softHoverDNA {
            0%, 100% {
                transform: translateY(0px) rotate(0deg) scale(1.05);
            }
            50% {
                transform: translateY(-8px) rotate(1.5deg) scale(1.05); /* إزاحة وحركة صعود ناعمة للغاية */
            }
        }

        /* أنيميشن الظهور الفاخر لعناصر الصفحة (Reveal Animations) */
        .reveal-element {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal-element.revealed {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        .reveal-left {
            opacity: 0;
            transform: translateX(40px);
            transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal-left.revealed {
            opacity: 1 !important;
            transform: translateX(0) !important;
        }

        .reveal-right {
            opacity: 0;
            transform: translateX(-40px);
            transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal-right.revealed {
            opacity: 1 !important;
            transform: translateX(0) !important;
        }

        .reveal-parent > * {
            opacity: 0; transform: translateY(40px);
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal-parent.revealed > * {
            opacity: 1;
            transform: translateY(0);
        }

        .reveal-parent.revealed > *:nth-child(1) { transition-delay: 0.1s; }
        .reveal-parent.revealed > *:nth-child(2) { transition-delay: 0.2s; }
        .reveal-parent.revealed > *:nth-child(3) { transition-delay: 0.3s; }
        .reveal-parent.revealed > *:nth-child(4) { transition-delay: 0.4s; }
        .reveal-parent.revealed > *:nth-child(5) { transition-delay: 0.5s; }
        .reveal-parent.revealed > *:nth-child(6) { transition-delay: 0.6s; }
        .reveal-parent.revealed > *:nth-child(7) { transition-delay: 0.7s; }
        .reveal-parent.revealed > *:nth-child(8) { transition-delay: 0.8s; }

        /* -------------------------------------------------------------
           التجاوب الكامل والتكيف مع شاشات الهواتف والتابلت (Legendary UI)
           ------------------------------------------------------------- */
        @media (max-width: 1024px) {
            .hero-section {
                direction: rtl;
                padding-top: 140px;
                padding-bottom: 80px;
                height: auto;
                min-height: auto;
            }

            .hero-container {
                width: 100%;
                min-height: 520px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 20px;
                position: relative;
            }

            /* Reset absolutes for text elements */
            .badge-st2, .st3-box, .st4-box {
                position: relative;
                left: auto;
                top: auto;
                margin: 0;
                z-index: 2;
            }

            .badge-st2 { margin-bottom: 8px; }
            
            .st3-box { 
                width: 100%; 
                height: auto; 
                min-height: auto; 
                padding: 0; 
                justify-content: center;
            }
            .title-st3 {
                font-size: 46px;
                text-align: center;
                line-height: 1.3;
            }
            
            .st4-box { 
                width: 100%; 
                max-width: 600px;
                height: auto; 
                min-height: auto; 
                padding: 0 16px; 
                justify-content: center;
            }
            .subtitle-st4 {
                font-size: 18px;
                text-align: center;
                border: none;
                padding: 12px;
                background: transparent;
            }
            .subtitle-st4::before { display: none; }

            /* Action Buttons Grouping on Tablet */
            .hero-actions {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                width: 100% !important;
                height: auto !important;
                display: flex !important;
                flex-direction: row-reverse !important; /* Main button right, socials left */
                align-items: center !important;
                justify-content: center !important;
                gap: 12px !important;
                margin-top: 16px !important;
                z-index: 10 !important;
                pointer-events: auto !important;
            }

            .btn-st0 {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                margin: 0 !important;
                max-width: 320px;
                z-index: 10;

            }

            .hero-socials {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                width: auto !important;
                height: auto !important;
                display: flex !important;
                gap: 12px !important;
                z-index: 10 !important;
                pointer-events: auto !important;
            }

            .social-circle {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                margin: 0 !important;

            }

            /* Text layer staggered animations */
            .badge-st2, .st3-box, .st4-box, .hero-actions {
                opacity: 0;
                animation: mobileTextAppear 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }

            .badge-st2 { animation-delay: 1.2s !important; }
            .st3-box { animation-delay: 1.35s !important; }
            .st4-box { animation-delay: 1.5s !important; }
            .hero-actions { animation-delay: 1.65s !important; }

            /* Visual Assets wrapper centered on Tablet */
            .hero-visual-assets {
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                width: 480px !important;
                height: 480px !important;
                transform: translate(-50%, -50%) !important;
                z-index: 0 !important;
                pointer-events: none;
                animation: newDnaIntro 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
            }

            /* Keep all inner elements absolute and centered within the wrapper */
            .media-glow, .droplets-image1, .card-st7, .dna-wrapper {
                position: absolute !important;
                display: block !important;
                margin: 0 !important;
            }
            
            .media-glow {
                left: 30px !important;
                top: 30px !important;
                width: 420px !important;
                height: 420px !important;
                z-index: 1;
            }
            
            .card-st7 {
                left: 100px !important;
                top: 70px !important;
                width: 280px !important;
                height: 340px !important;
                z-index: 2;
                animation: cardEntrance 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }
            
            .dna-wrapper {
                left: 30px !important;
                top: 30px !important;
                width: 420px !important;
                height: 420px !important;
                z-index: 3;
                animation: dnaEntrance 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards, floatDNA 5.5s ease-in-out infinite 2.2s;
            }
            
            .droplets-image1 {
                left: 36px !important;
                top: 36px !important;
                width: 408px !important;
                height: 408px !important;
                z-index: 4;
                animation: floatDroplets 7s ease-in-out infinite;
            }

            .features-section {
                padding: 80px 24px;
            }
            .features-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }
            .timeline-container {
                flex-direction: column;
                gap: 24px;
            }
            .timeline-banner {
                width: 100%;
                height: auto;
                flex-direction: row;
                padding: 24px;
                border-radius: 20px;
                justify-content: space-between;
            }
            .timeline-banner-text {
                align-items: flex-start;
            }
            .banner-title { font-size: 20px; }
            .banner-subtitle { font-size: 26px; }
            .timeline-banner-bg { display: none; }
            .banner-corner-indicator { margin-top: 0; align-self: center; }
            .timeline-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @keyframes newDnaIntro {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.6) rotate(-15deg);
                filter: blur(15px);
            }
            30% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.05) rotate(5deg);
                filter: blur(0px);
            }
            50% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.02) rotate(0deg);
                filter: blur(0px);
            }
            75% {
                opacity: 0.65;
                transform: translate(-50%, -50%) scale(0.9);
                filter: blur(4px);
            }
            100% {
                opacity: 0.35;
                transform: translate(-50%, -50%) scale(0.85);
                filter: blur(8px);
            }
        }

        @keyframes newDnaIntroMobile {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.2) rotate(-15deg);
                filter: blur(15px);
            }
            30% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(0.85) rotate(5deg);
                filter: blur(0px);
            }
            50% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
                filter: blur(0px);
            }
            75% {
                opacity: 0.6;
                transform: translate(-50%, -50%) scale(0.7);
                filter: blur(4px);
            }
            100% {
                opacity: 0.3;
                transform: translate(-50%, -50%) scale(0.65);
                filter: blur(8px);
            }
        }

        @keyframes mobileTextAppear {
            0% { opacity: 0; transform: translateY(40px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 768px) {
            .hero-section {
                padding-top: 140px;
                padding-bottom: 60px;
                position: relative;
                overflow: hidden;
            }
            
            .hero-container {
                min-height: 580px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 16px;
                position: relative;
                padding: 40px 16px;
            }

            /* Text layer staggered animations for mobile */
            .badge-st2, .st3-box, .st4-box, .hero-actions {
                position: relative;
                z-index: 2;
                opacity: 0;
                animation: mobileTextAppear 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }
            
            .badge-st2 { animation-delay: 1.2s !important; }
            .st3-box { animation-delay: 1.35s !important; }
            .st4-box { animation-delay: 1.5s !important; }
            .hero-actions { animation-delay: 1.65s !important; }

            .title-st3 {
                font-size: 38px;
            }
            .subtitle-st4 {
                font-size: 16px;
                line-height: 1.6;
            }
            
            /* Visual Assets wrapper centered on Mobile */
            .hero-visual-assets {
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                width: 480px !important;
                height: 480px !important;
                z-index: 0 !important;
                pointer-events: none;
                animation: newDnaIntroMobile 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
            }

            .media-glow, .droplets-image1, .card-st7, .dna-wrapper {
                position: absolute !important;
                display: block !important;
                margin: 0 !important;
            }

            .media-glow {
                left: 30px !important;
                top: 30px !important;
                width: 420px !important;
                height: 420px !important;
            }
            
            .card-st7 {
                left: 100px !important;
                top: 70px !important;
                width: 280px !important;
                height: 340px !important;
                animation: cardEntrance 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }
            
            .dna-wrapper {
                left: 30px !important;
                top: 30px !important;
                width: 420px !important;
                height: 420px !important;
                animation: dnaEntrance 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards, floatDNA 5.5s ease-in-out infinite 2.2s;
            }
            
            .droplets-image1 {
                left: 36px !important;
                top: 36px !important;
                width: 408px !important;
                height: 408px !important;
                animation: floatDroplets 7s ease-in-out infinite;
            }

            /* Responsive buttons column layout for very small screens */
            .hero-actions {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                width: 100% !important;
                height: auto !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 16px !important;
                margin-top: 16px !important;
                z-index: 10 !important;
                pointer-events: auto !important;
            }

            .btn-st0 {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                margin: 0 !important;
                max-width: 92%;
                font-size: 17px;
                height: 70px;
                z-index: 10;

            }

            .hero-socials {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                width: auto !important;
                height: auto !important;
                display: flex !important;
                flex-direction: row !important;
                gap: 12px !important;
                z-index: 10 !important;
                pointer-events: auto !important;
            }

            .social-circle {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                margin: 0 !important;
                width: 64px;
                height: 64px;

            }

            .features-section {
                padding: 60px 16px;
            }
            .features-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .features-title {
                font-size: 26px;
            }
            .feature-card-front, .feature-card-back {
                padding: 32px 24px;
            }
            .feature-card-wrapper {
                height: 320px;
            }
            .timeline-grid {
                grid-template-columns: 1fr;
            }
            .timeline-card {
                min-height: auto;
                padding: 32px 24px;
            }
            .timeline-title-box {
                flex-direction: column;
                align-items: center;
                gap: 16px;
            }
            .timeline-signature {
                margin-right: 0;
            }
        }
        /* -------------------------------------------------------------
           قسم آراء وتجارب التلاميذ (ماذا قال تلاميذنا عنا؟)
           ------------------------------------------------------------- */
        .testimonials-section {
            padding: 40px 0; /* تقليص المسافات بين السكشنز */
            background: linear-gradient(180deg, #fdf8ff 0%, #f6eeff 100%);
            position: relative;
            overflow: hidden;
            width: 100%;
        }

        .testimonials-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 40px;
            display: flex;
            flex-direction: column;
            gap: 48px;
            position: relative;
            z-index: 5;
        }

        .testimonials-header {
            text-align: center;
            margin-bottom: 40px;
            width: 100%;
        }

        .testimonials-title {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 34px;
            color: #1c1b20;
            font-weight: 700;
            margin-bottom: 14px;
            position: relative;
            display: inline-block;
            letter-spacing: -0.5px;
        }

        .testimonials-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, transparent, #3400AD 50%, transparent);
            border-radius: 2px;
        }

        .testimonials-subtitle {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 16px;
            color: #6252a1;
            font-weight: 500;
            margin-top: 18px;
            opacity: 0.85;
            text-align: center;
        }

        .reviews-badge {
            background: linear-gradient(135deg, rgba(52, 0, 173, 0.06) 0%, rgba(30, 214, 171, 0.06) 100%);
            border: 1px solid rgba(52, 0, 173, 0.18);
            border-radius: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 6px 18px;
            box-shadow: 0 4px 15px rgba(52, 0, 173, 0.03);
            direction: rtl;
            margin: 18px auto 0 auto;
        }

        .reviews-badge-icon {
            color: #1ED6AB;
            font-size: 18px;
        }

        .reviews-badge-text {
            font-family: 'Alexandria', sans-serif;
            font-size: 13px;
            color: #3400AD;
            font-weight: 700;
        }

        /* حاوية السلايدر */
        .slider-wrapper {
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            direction: ltr; /* لسهولة سحب الماوس بالاتجاه الطبيعي */
        }

        .slider-container {
            width: 100%;
            overflow: hidden;
            padding: 20px 0;
            cursor: grab;
        }

        .slider-container:active {
            cursor: grabbing;
        }

        .slider-track {
            display: flex;
            gap: 30px;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            width: max-content;
            direction: rtl; /* إرجاع الترتيب الداخلي للغة العربية */
        }

        /* كرت الرأي الزجاجي الفاخر */
        .testimonial-card {
            flex-shrink: 0 !important;
            width: 380px;
            min-height: 250px;
            background: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 24px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start !important;
            gap: 16px !important;
            box-shadow: 
                0 10px 30px rgba(52, 0, 173, 0.03),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            position: relative;
            overflow: hidden;
            user-select: none;
        }

        .testimonial-card:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: rgba(52, 0, 173, 0.25);
            box-shadow: 
                0 20px 40px rgba(52, 0, 173, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .card-glow {
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(30, 214, 171, 0.15) 0%, transparent 70%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .testimonial-card:hover .card-glow {
            opacity: 1;
        }

        .student-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            direction: rtl;
        }

        .student-name {
            font-family: 'Cairo', sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #1c1b20;
        }

        .student-grade {
            font-family: 'Alexandria', sans-serif;
            font-size: 12px;
            font-weight: 700;
            color: #3400AD;
            background: rgba(52, 0, 173, 0.06);
            padding: 4px 12px;
            border-radius: 12px;
            border: 1px solid rgba(52, 0, 173, 0.1);
        }

        .student-review {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 15px;
            font-weight: 500;
            color: #484556;
            line-height: 1.7;
            text-align: justify;
            direction: rtl;
        }

        /* أزرار التنقل للسلايدر */
        .slider-nav-btn {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(52, 0, 173, 0.15);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(52, 0, 173, 0.05);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }

        .slider-nav-btn:hover {
            background: #3400AD;
            color: #ffffff;
            border-color: #3400AD;
            box-shadow: 0 8px 25px rgba(52, 0, 173, 0.25);
        }

        .prev-btn { right: -25px; }
        .next-btn { left: -25px; }

        /* الحاوية السفلية للتعليقات بدون علامة بكالوريا */
        .non-graded-container {
            width: 100%;
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 20px;
            padding: 24px;
            display: flex;
            align-items: center;
            gap: 24px;
            box-shadow: 0 8px 32px rgba(52, 0, 173, 0.02);
            direction: rtl;
            overflow: hidden;
        }

        .non-graded-header {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
            border-left: 2px solid rgba(52, 0, 173, 0.2);
            padding-left: 24px;
        }

        .non-graded-icon {
            color: #1ED6AB;
            font-size: 24px;
        }

        .non-graded-title {
            font-family: 'Cairo', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: #3400AD;
            white-space: nowrap;
        }

        .non-graded-track-wrapper {
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        .non-graded-track {
            display: flex;
            gap: 40px;
            width: max-content;
            animation: marquee 25s linear infinite;
        }

        .non-graded-item {
            -webkit-text-size-adjust: 100% !important;
            text-size-adjust: 100% !important;
            font-size: 13px !important;
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 14px;
            color: #484556;
            white-space: nowrap;
        }

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

        /* زر استعراض كامل الآراء */
        .view-all-wrapper {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 10px;
        }

        .btn-view-all {
            background: transparent;
            border: none;
            padding: 0 0 4px 0;
            border-bottom: 1.5px dashed rgba(52, 0, 173, 0.4);
            border-radius: 0;
            font-family: 'El Messiri', 'Cairo', sans-serif;
            font-weight: 700;
            font-size: 14px;
            color: #3400AD;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            box-shadow: none;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            direction: rtl;
        }

        .btn-view-all:hover {
            color: #1ED6AB;
            border-bottom-color: #1ED6AB;
            transform: translateY(-2px);
        }

        /* تصميم المودال الزجاجي الفخم */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(28, 27, 32, 0.4);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }

        .modal-overlay.active {
            display: flex !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        .modal-box {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(30px) saturate(180%);
            -webkit-backdrop-filter: blur(30px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.5);
            width: 90%;
            max-width: 1000px;
            max-height: 80vh;
            border-radius: 32px;
            padding: 40px;
            box-shadow: 0 30px 70px rgba(52, 0, 173, 0.15);
            display: flex;
            flex-direction: column;
            gap: 30px;
            transform: scale(0.95);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .modal-overlay.active .modal-box {
            transform: scale(1);
        }

        .modal-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            width: 100%;
            direction: rtl;
            border-bottom: 1px solid rgba(52, 0, 173, 0.1);
            padding-bottom: 20px;
        }

        .modal-title-wrapper {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .modal-title {
            font-family: 'Cairo', sans-serif;
            font-size: 24px;
            font-weight: 800;
            color: #3400AD;
        }

        .modal-subtitle {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 14px;
            color: #484556;
            font-weight: 500;
        }

        .modal-close-btn {
            background: rgba(52, 0, 173, 0.05);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .modal-close-btn:hover {
            background: rgba(52, 0, 173, 0.15);
            transform: rotate(90deg);
        }

        .modal-content {
            overflow-y: auto;
            padding-right: 10px;
            direction: rtl;
        }

        /* تخصيص شريط التمرير */
        .modal-content::-webkit-scrollbar {
            width: 6px;
        }
        .modal-content::-webkit-scrollbar-track {
            background: rgba(52, 0, 173, 0.02);
            border-radius: 10px;
        }
        .modal-content::-webkit-scrollbar-thumb {
            background: rgba(52, 0, 173, 0.15);
            border-radius: 10px;
        }
        .modal-content::-webkit-scrollbar-thumb:hover {
            background: rgba(52, 0, 173, 0.3);
        }

        .modal-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .modal-card {
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 4px 15px rgba(52, 0, 173, 0.01);
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .modal-card-student {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-student-name {
            font-family: 'Cairo', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: #1c1b20;
        }

        .modal-student-grade {
            font-family: 'Alexandria', sans-serif;
            font-size: 11px;
            font-weight: 700;
            color: #3400AD;
            background: rgba(52, 0, 173, 0.05);
            padding: 3px 10px;
            border-radius: 10px;
        }

        .modal-review-text {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 14px;
            color: #484556;
            line-height: 1.6;
            text-align: justify;
        }

        /* التجاوب للموبايل لقسم الآراء */
        @media (max-width: 1024px) {
            .testimonials-container {
                padding: 0 20px;
            }
            .modal-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .testimonials-section {
                padding: 60px 0;
            }
            .testimonials-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }
            .testimonial-card {
                flex-shrink: 0 !important;
                width: 380px !important;
                min-height: 250px !important;
                padding: 30px !important;
            }
            .slider-nav-btn {
                display: none; /* إخفاء الأزرار في الهواتف والاعتماد على السحب باللمس */
            }
            .non-graded-container {
                flex-direction: column;
                align-items: flex-start;
                gap: 14px;
            }
            .non-graded-header {
                border-left: none;
                border-bottom: 2px solid rgba(52, 0, 173, 0.2);
                padding-left: 0;
                padding-bottom: 10px;
                width: 100%;
            }
            .modal-box {
                padding: 24px;
            }
        }
        /* -------------------------------------------------------------
           قسم الاشتراك السنوي الشامل (Premium Subscription Section)
           ------------------------------------------------------------- */
        .subscription-section {
            padding: 80px 0;
            background: linear-gradient(180deg, #fdf8ff 0%, #ffffff 100%);
            position: relative;
            overflow: hidden;
            width: 100%;
        }

        .subscription-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 40px;
            display: flex;
            flex-direction: column;
            gap: 40px;
            position: relative;
            z-index: 5;
        }

        /* حاوية العرض المنقسمة الفاخرة */
        .split-card-container {
            display: flex;
            background: #ffffff;
            border-radius: 36px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(52, 0, 173, 0.04), 0 0 1px rgba(52, 0, 173, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.8);
            width: 100%;
            min-height: 520px;
            direction: rtl;
        }

        /* الجانب الأيمن البنفسجي */
        .split-card-purple {
            width: 42%;
            background: linear-gradient(135deg, #3400AD 0%, #1a0063 100%);
            padding: 48px;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }

        .split-card-purple::before {
            content: '';
            position: absolute;
            top: -20%;
            right: -20%;
            width: 250px;
            height: 250px;
            background: radial-gradient(circle, rgba(140, 82, 255, 0.18) 0%, transparent 70%);
            pointer-events: none;
        }

        .purple-header {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .purple-label {
            font-family: 'Alexandria', sans-serif;
            font-size: 12px;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            padding: 5px 14px;
            border-radius: 20px;
            width: max-content;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .purple-title {
            font-family: 'Cairo', sans-serif;
            font-size: 32px;
            font-weight: 800;
            line-height: 1.3;
        }

        .purple-stats {
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin: 32px 0;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .stat-num-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 18px;
            min-width: 80px;
            height: 80px;
            flex-shrink: 0;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .stat-number {
            font-family: 'Outfit', 'Cairo', sans-serif;
            font-size: 32px;
            font-weight: 800;
            color: #ffffff;
            line-height: 1;
            text-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
        }

        .stat-percent {
            font-size: 14px;
            font-weight: 700;
        }

        .stat-text {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 14.5px;
            font-weight: 500;
            line-height: 1.5;
            color: rgba(255, 255, 255, 0.85);
        }

        .purple-footer-features {
            display: flex;
            flex-direction: column;
            gap: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 24px;
        }

        .purple-feature {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 13.5px;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
        }

        .purple-feature-icon {
            color: #ffffff;
            font-size: 18px;
            opacity: 0.9;
        }

        /* الجانب الأيسر الأبيض للبطاقات */
        .split-card-white {
            width: 58%;
            padding: 48px;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 28px;
        }

        /* كرت الشعبة الفاخر */
        .branch-card {
            flex: 1;
            background: rgba(253, 248, 255, 0.4);
            border: 1px solid rgba(52, 0, 173, 0.08);
            border-radius: 28px;
            padding: 32px 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            min-height: 380px;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            position: relative;
            text-align: center;
        }

        .branch-card:hover {
            transform: translateY(-8px);
            border-color: rgba(52, 0, 173, 0.25);
            box-shadow: 0 15px 40px rgba(52, 0, 173, 0.06);
            background: #ffffff;
        }

        /* تمييز شعبة علوم تجريبية كعرض أساسي */
        .branch-card.featured {
            border-color: rgba(52, 0, 173, 0.2);
            box-shadow: 0 10px 30px rgba(52, 0, 173, 0.03);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(253, 248, 255, 0.8) 100%);
        }

        .branch-card.featured::before {
            content: 'العرض الأكثر طلباً';
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            background: #3400AD;
            color: #ffffff;
            font-family: 'Cairo', sans-serif;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 14px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(52, 0, 173, 0.2);
        }

        .branch-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            width: 100%;
        }

        .branch-badge {
            background: rgba(52, 0, 173, 0.05);
            color: #3400AD;
            border: 1px solid rgba(52, 0, 173, 0.08);
            border-radius: 12px;
            padding: 4px 12px;
            font-family: 'Cairo', sans-serif;
            font-size: 12px;
            font-weight: 700;
        }

        .branch-title {
            font-family: 'Cairo', sans-serif;
            font-size: 20px;
            font-weight: 800;
            color: #1c1b20;
        }

        .branch-price-box {
            margin: 24px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .price-currency {
            font-family: 'Cairo', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: #484556;
        }

        .price-number {
            font-family: 'Outfit', 'Cairo', sans-serif;
            font-size: 40px;
            font-weight: 800;
            color: #3400AD;
            line-height: 1;
        }

        .price-period {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 12px;
            color: #6252a1;
            font-weight: 500;
            margin-top: 4px;
        }

        .btn-subscribe {
            width: 100%;
            background: #ffffff;
            border: 1.5px solid rgba(52, 0, 173, 0.2);
            color: #3400AD;
            padding: 12px 24px;
            border-radius: 20px;
            font-family: 'Cairo', sans-serif;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .branch-card:hover .btn-subscribe {
            background: #3400AD;
            color: #ffffff;
            border-color: #3400AD;
            box-shadow: 0 10px 25px rgba(52, 0, 173, 0.25);
        }

        .branch-card.featured .btn-subscribe {
            background: #3400AD;
            color: #ffffff;
            border-color: #3400AD;
            box-shadow: 0 4px 15px rgba(52, 0, 173, 0.1);
        }

        .branch-card.featured:hover .btn-subscribe {
            background: #1a0063;
            border-color: #1a0063;
            box-shadow: 0 12px 30px rgba(26, 0, 99, 0.3);
        }

        /* التجاوب للموبايل لقسم الاشتراك */
        @media (max-width: 1024px) {
            .split-card-container {
                flex-direction: column;
                min-height: auto;
            }
            .split-card-purple, .split-card-white {
                width: 100%;
            }
            .split-card-purple {
                padding: 40px 30px;
            }
            .split-card-white {
                padding: 40px 30px;
                flex-direction: column;
                gap: 24px;
            }
        }

        @media (max-width: 768px) {
            .subscription-section {
                padding: 60px 0;
            }
            .subscription-container {
                padding: 0 20px;
            }
        }
        /* -------------------------------------------------------------
           وضع التحرير المباشر (Direct Editing Mode)
           ------------------------------------------------------------- */
        body.edit-mode-active [contenteditable="true"] {
            outline: 2px dashed #3400AD;
            outline-offset: 4px;
            cursor: text;
            transition: outline-color 0.2s ease;
        }

        body.edit-mode-active [contenteditable="true"]:hover {
            outline-color: #1ED6AB;
            background: rgba(52, 0, 173, 0.03);
        }

        /* شريط أدوات التحرير العائم بالأسفل */
        .editor-toolbar {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: rgba(26, 0, 99, 0.9);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.15);
            padding: 12px 24px;
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(52, 0, 173, 0.3);
            display: flex;
            align-items: center;
            gap: 20px;
            z-index: 9999;
            direction: rtl;
            color: #ffffff;
            font-family: 'Cairo', sans-serif;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .editor-toolbar.active {
            transform: translateX(-50%) translateY(0);
        }

        .editor-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13.5px;
            font-weight: 700;
        }

        .editor-status-dot {
            width: 8px;
            height: 8px;
            background-color: #1ED6AB;
            border-radius: 50%;
            box-shadow: 0 0 8px #1ED6AB;
            animation: pulseGlow 1s infinite alternate;
        }

        .btn-editor-action {
            background: #ffffff;
            border: none;
            color: #3400AD;
            padding: 6px 16px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
        }

        .btn-editor-action:hover {
            background: #1ED6AB;
            color: #ffffff;
            box-shadow: 0 5px 15px rgba(30, 214, 171, 0.4);
        }

        .btn-editor-action.close-edit {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }

        .btn-editor-action.close-edit:hover {
            background: rgba(239, 68, 68, 0.2);
            border-color: rgb(239, 68, 68);
            color: rgb(239, 68, 68);
        }

        /* -------------------------------------------------------------
           قسم الأسئلة الشائعة الفاخر (Premium FAQ Section)
           ------------------------------------------------------------- */
        .faq-section {
            padding: 100px 0;
            background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
            position: relative;
            overflow: hidden;
            direction: rtl;
        }

        .faq-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 24px;
            position: relative;
            z-index: 2;
        }

        .faq-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .faq-title {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 34px;
            color: #1c1b20;
            font-weight: 700;
            margin-bottom: 14px;
            position: relative;
            display: inline-block;
            letter-spacing: -0.5px;
        }

        .faq-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, transparent, #3400AD 50%, transparent);
            border-radius: 2px;
        }

        .faq-subtitle {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-size: 16px;
            color: #6252a1;
            font-weight: 500;
            margin-top: 18px;
            opacity: 0.85;
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .faq-item {
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(25px) saturate(190%);
            -webkit-backdrop-filter: blur(25px) saturate(190%);
            border: 1px solid rgba(52, 0, 173, 0.06);
            border-radius: 24px;
            overflow: hidden;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            box-shadow: 
                0 8px 32px rgba(52, 0, 173, 0.02),
                inset 0 2px 4px rgba(255, 255, 255, 0.9);
            position: relative;
        }

        /* شريط الجراديانت الفاخر المنزلق على يمين الكارت عند التفعيل */
        .faq-item::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 4px;
            height: 0;
            background: linear-gradient(180deg, #3400AD 0%, #1ED6AB 100%);
            transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 5;
        }

        .faq-item.active::before {
            height: 100%;
        }

        .faq-item:hover {
            border-color: rgba(52, 0, 173, 0.2);
            box-shadow: 
                0 20px 45px rgba(52, 0, 173, 0.05),
                inset 0 2px 4px rgba(255, 255, 255, 0.9);
            background: #ffffff;
            transform: translateY(-3px);
        }

        .faq-item.active {
            border-color: rgba(52, 0, 173, 0.22);
            background: #ffffff;
            box-shadow: 
                0 24px 50px rgba(52, 0, 173, 0.08),
                0 0 0 1px rgba(30, 214, 171, 0.05),
                inset 0 2px 4px rgba(255, 255, 255, 0.9);
        }

        .faq-trigger {
            width: 100%;
            padding: 26px 36px;
            background: transparent;
            border: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            text-align: right;
            gap: 20px;
            transition: all 0.3s ease;
        }

        .faq-question {
            font-family: 'Cairo', sans-serif;
            font-size: 19px;
            font-weight: 800;
            color: #1c1b20;
            transition: color 0.3s ease;
        }

        .faq-item:hover .faq-question,
        .faq-item.active .faq-question {
            color: #3400AD;
        }

        .faq-icon-box {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(52, 0, 173, 0.05);
            border: 1px solid rgba(52, 0, 173, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            flex-shrink: 0;
            box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8);
        }

        .faq-item:hover .faq-icon-box {
            background: #3400AD;
            color: #ffffff;
            border-color: #3400AD;
            transform: scale(1.08);
            box-shadow: 0 5px 15px rgba(52, 0, 173, 0.2);
        }

        .faq-item.active .faq-icon-box {
            background: #1ED6AB;
            color: #ffffff;
            border-color: #1ED6AB;
            transform: rotate(45deg) scale(1.08);
            box-shadow: 0 8px 20px rgba(30, 214, 171, 0.35);
        }

        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .faq-content-inner {
            padding: 0 36px 30px 36px;
            font-family: 'Cairo', sans-serif;
            font-size: 15.5px;
            color: #2d2a3a;
            line-height: 1.85;
            font-weight: 500;
            border-top: 1px solid rgba(52, 0, 173, 0.05);
            margin-top: -4px;
            padding-top: 22px;
        }

        /* زينة خلفية السكشن الفاخرة */
        .faq-bg-glow {
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(52, 0, 173, 0.04) 0%, transparent 70%);
            z-index: 1;
            pointer-events: none;
        }

        .faq-bg-glow-1 {
            top: -100px;
            right: -100px;
        }

        .faq-bg-glow-2 {
            bottom: -100px;
            left: -100px;
        }

        @media (max-width: 768px) {
            .faq-section {
                padding: 70px 0;
            }
            .faq-title {
                font-size: 30px;
            }
            .faq-trigger {
                padding: 20px 24px;
            }
            .faq-question {
                font-size: 16px;
            }
            .faq-content-inner {
                padding: 0 24px 20px 24px;
                font-size: 14.5px;
            }
        }

        /* -------------------------------------------------------------
           الوضع الداكن الفاخر (Premium Dark Mode)
           ------------------------------------------------------------- */
        body.dark-theme {
            /* خلفية ليلية بنفسجية ملوكية عميقة جداً متناسقة مع الهوية */
            background: 
                radial-gradient(at 0% 0%, rgba(52, 0, 173, 0.25) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(140, 82, 255, 0.15) 0px, transparent 50%);
            background-color: #05020c;
            color: #f3f0fa;
        }

        /* الهيدر الزجاجي الداكن */
        body.dark-theme .st0 {
            background: rgba(5, 2, 12, 0.7);
            border-bottom: 1px solid rgba(52, 0, 173, 0.15);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        }

        /* الحفاظ على هوية البنفسجي كعنصر أساسي والأخضر كوهج حركي/تحويم */
        body.dark-theme .nav-item {
            color: #e2def2; /* زيادة التباين لقراءة ممتازة */
        }

        body.dark-theme .nav-item:hover,
        body.dark-theme .nav-item.active {
            color: #8c52ff; /* بنفسجي مضيء للنشاط بالوضع الداكن */
        }

        body.dark-theme .nav-item::after {
            background: #8c52ff;
            box-shadow: 0 0 10px rgba(140, 82, 255, 0.8);
        }

        /* زر الدخول التفاعلي بالبنفسجي المضيء */
        body.dark-theme .st1 {
            background: rgba(140, 82, 255, 0.15) !important;
            border-color: rgba(140, 82, 255, 0.45) !important;
            color: #ffffff !important;
        }

        body.dark-theme .st1:hover {
            background: #8c52ff !important;
            border-color: #8c52ff !important;
            color: #ffffff !important;
            box-shadow: 0 0 20px rgba(140, 82, 255, 0.5) !important;
        }

        /* خلفية الكروموزوم بالوضع الداكن */
        body.dark-theme .card-st7 {
            background: #8c52ff !important;
            box-shadow: 0 25px 50px rgba(140, 82, 255, 0.3) !important;
        }

        /* شارة البطل الأول */
        body.dark-theme .badge-st2 {
            background: rgba(255, 255, 255, 0.03) !important;
            border: none !important;
        }

        body.dark-theme .badge-text {
            color: #ffffff !important;
        }

        /* العناوين والتحسينات البصرية للـ Hero */
        body.dark-theme .title-st3 {
            color: #ffffff;
        }

        body.dark-theme .title-st3 .highlight-text {
            color: #8c52ff;
            text-shadow: 0 4px 25px rgba(140, 82, 255, 0.3);
        }

        body.dark-theme .subtitle-st4 {
            background: rgba(15, 10, 30, 0.6);
            border-color: rgba(52, 0, 173, 0.15);
            color: #c5bfe0;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
        }

        body.dark-theme .social-circle {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.08);
            color: #c5bfe0; /* تحسين تباين الأيقونات الاجتماعية */
        }

        body.dark-theme .social-circle:hover {
            background: #8c52ff;
            border-color: #8c52ff;
            color: #ffffff;
            box-shadow: 0 8px 25px rgba(140, 82, 255, 0.4);
        }

        /* زر ابدأ الآن في الهيرو بالوضع الداكن */
        body.dark-theme .btn-st0 {
            background: #8c52ff;
            box-shadow: 0 10px 30px rgba(140, 82, 255, 0.4);
        }

        body.dark-theme .btn-st0:hover {
            background: #9d4edd;
            box-shadow: 0 15px 40px rgba(140, 82, 255, 0.55);
        }

        /* كارت الميزات ثلاثي الأبعاد بالوضع الداكن */
        body.dark-theme .feature-card-front {
            background: rgba(15, 10, 30, 0.55);
            border-color: rgba(52, 0, 173, 0.15);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
        }

        body.dark-theme .feature-card-title {
            color: #ffffff;
        }

        body.dark-theme .feature-card-desc {
            color: #b5adc9;
        }

        /* تحسين ألوان وتباين شارات الميزات في المود الداكن */
        body.dark-theme .badge-purple {
            background: rgba(140, 82, 255, 0.18);
            color: #b58dfc;
        }

        body.dark-theme .badge-red {
            background: rgba(255, 107, 107, 0.18);
            color: #ff8b8b;
        }

        body.dark-theme .badge-green {
            background: rgba(74, 222, 128, 0.18);
            color: #81e6a3;
            box-shadow: 0 0 10px rgba(74, 222, 128, 0.15);
        }

        body.dark-theme .feature-icon-wrapper {
            background: rgba(52, 0, 173, 0.15);
            color: #8c52ff;
        }

        body.dark-theme .feature-card-wrapper:hover .feature-icon-wrapper {
            background: #8c52ff;
            color: #ffffff;
            box-shadow: 0 8px 25px rgba(140, 82, 255, 0.45);
        }

        /* قسم الخط الزمني والسباقون */
        body.dark-theme .timeline-section {
            background-color: #05020c;
            border-top-color: rgba(52, 0, 173, 0.1);
        }

        body.dark-theme .timeline-banner {
            background: linear-gradient(135deg, #10062a 0%, #05020c 100%);
            border: 1px solid rgba(52, 0, 173, 0.2);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
        }

        body.dark-theme .timeline-banner-bg {
            color: rgba(140, 82, 255, 0.12);
        }

        body.dark-theme .timeline-main-title {
            color: #ffffff;
        }

        body.dark-theme .timeline-card {
            background: rgba(15, 10, 30, 0.55);
            border-color: rgba(52, 0, 173, 0.15);
        }

        body.dark-theme .timeline-card:hover {
            border-color: rgba(140, 82, 255, 0.4);
            box-shadow: 0 15px 35px rgba(140, 82, 255, 0.08);
        }

        body.dark-theme .timeline-card-text {
            color: #b5adc9;
        }

        body.dark-theme .timeline-card-date {
            color: #8c52ff;
        }

        /* قسم آراء التلاميذ */
        body.dark-theme .testimonials-section {
            background: linear-gradient(180deg, #05020c 0%, #0d061c 100%);
        }

        body.dark-theme .testimonials-title {
            color: #ffffff;
        }

        body.dark-theme .testimonials-title::after {
            background: linear-gradient(90deg, transparent, #8c52ff 50%, transparent);
        }

        body.dark-theme .testimonials-subtitle {
            color: #b5adc9;
        }

        body.dark-theme .reviews-badge {
            background: rgba(52, 0, 173, 0.12);
            border-color: rgba(52, 0, 173, 0.25);
        }

        body.dark-theme .reviews-badge-text {
            color: #8c52ff;
        }

        body.dark-theme .testimonial-card {
            background: rgba(15, 10, 30, 0.55);
            border-color: rgba(52, 0, 173, 0.15);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
        }

        body.dark-theme .testimonial-card:hover {
            border-color: rgba(140, 82, 255, 0.35);
            box-shadow: 0 20px 45px rgba(140, 82, 255, 0.1);
        }

        body.dark-theme .student-name {
            color: #ffffff;
        }

        body.dark-theme .student-grade {
            color: #8c52ff;
            background: rgba(52, 0, 173, 0.15);
        }

        body.dark-theme .student-review {
            color: #b5adc9;
        }

        body.dark-theme .slider-nav-btn {
            background: rgba(15, 10, 30, 0.85);
            border-color: rgba(52, 0, 173, 0.25);
            color: #8c52ff;
        }

        body.dark-theme .slider-nav-btn:hover {
            background: #8c52ff;
            color: #ffffff;
            box-shadow: 0 0 15px rgba(140, 82, 255, 0.5);
        }

        body.dark-theme .non-graded-container {
            background: rgba(15, 10, 30, 0.5);
            border-color: rgba(52, 0, 173, 0.15);
        }

        body.dark-theme .non-graded-item {
            -webkit-text-size-adjust: 100% !important;
            text-size-adjust: 100% !important;
            font-size: 13px !important;
            color: #b5adc9;
        }

        body.dark-theme .btn-view-all {
            color: #8c52ff;
        }

        body.dark-theme .btn-view-all:hover {
            color: #ffffff;
            text-shadow: 0 0 10px rgba(140, 82, 255, 0.6);
        }

        /* قسم الاشتراك السنوي بالكامل */
        body.dark-theme .subscription-section {
            background: linear-gradient(180deg, #0d061c 0%, #05020c 100%);
        }

        body.dark-theme .split-card-container {
            background: #0f0a1c;
            border-color: rgba(52, 0, 173, 0.2);
            box-shadow: 0 25px 65px rgba(0, 0, 0, 0.55);
        }

        body.dark-theme .split-card-purple {
            background: linear-gradient(135deg, #10062a 0%, #05020c 100%);
            border-left: 1px solid rgba(52, 0, 173, 0.2);
        }

        body.dark-theme .split-card-white {
            background: #0f0a1c;
        }

        body.dark-theme .branch-card {
            background: rgba(15, 10, 30, 0.55);
            border-color: rgba(52, 0, 173, 0.15);
        }

        body.dark-theme .branch-card:hover {
            background: #150f26;
            border-color: rgba(140, 82, 255, 0.35);
        }

        body.dark-theme .branch-title {
            color: #ffffff;
        }

        body.dark-theme .branch-badge {
            background: rgba(52, 0, 173, 0.15);
            color: #8c52ff;
            border-color: rgba(52, 0, 173, 0.25);
        }

        body.dark-theme .price-currency,
        body.dark-theme .price-period {
            color: #b5adc9;
        }

        body.dark-theme .price-number {
            color: #8c52ff;
        }

        body.dark-theme .btn-subscribe {
            background: transparent;
            border-color: rgba(140, 82, 255, 0.3);
            color: #8c52ff;
        }

        body.dark-theme .branch-card:hover .btn-subscribe,
        body.dark-theme .branch-card.featured .btn-subscribe {
            background: #8c52ff;
            color: #ffffff;
            border-color: #8c52ff;
            box-shadow: 0 10px 25px rgba(140, 82, 255, 0.35);
        }

        body.dark-theme .branch-card.featured {
            background: linear-gradient(180deg, rgba(20, 12, 38, 0.9) 0%, rgba(15, 10, 30, 0.9) 100%);
            border-color: rgba(140, 82, 255, 0.35);
        }

        body.dark-theme .branch-card.featured::before {
            background: #8c52ff;
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(140, 82, 255, 0.4);
        }

        /* قسم الأسئلة الشائعة */
        body.dark-theme .faq-section {
            background: linear-gradient(180deg, #05020c 0%, #0d061c 100%);
        }

        body.dark-theme .faq-title {
            color: #ffffff;
        }

        body.dark-theme .faq-title::after {
            background: linear-gradient(90deg, transparent, #8c52ff 50%, transparent);
        }

        body.dark-theme .faq-subtitle {
            color: #b5adc9;
        }

        body.dark-theme .faq-item {
            background: rgba(15, 10, 30, 0.55);
            border-color: rgba(52, 0, 173, 0.15);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        }

        body.dark-theme .faq-item:hover {
            border-color: rgba(140, 82, 255, 0.35);
            background: #150f26;
        }

        body.dark-theme .faq-item.active {
            border-color: rgba(140, 82, 255, 0.45);
            background: #150f26;
            box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
        }

        body.dark-theme .faq-question {
            color: #ffffff;
        }

        body.dark-theme .faq-item:hover .faq-question,
        body.dark-theme .faq-item.active .faq-question {
            color: #8c52ff;
        }

        body.dark-theme .faq-icon-box {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
            color: #ffffff;
        }

        body.dark-theme .faq-item:hover .faq-icon-box {
            background: #8c52ff;
            color: #ffffff;
            border-color: #8c52ff;
            box-shadow: 0 5px 15px rgba(140, 82, 255, 0.3);
        }

        body.dark-theme .faq-item.active .faq-icon-box {
            background: #1ED6AB;
            color: #ffffff;
            border-color: #1ED6AB;
            box-shadow: 0 8px 20px rgba(30, 214, 171, 0.35);
        }

        body.dark-theme .faq-content-inner {
            color: #b5adc9;
            border-top-color: rgba(255, 255, 255, 0.06);
        }

        /* نافذة المودال */
        body.dark-theme .modal-box {
            background: #0f0a1c;
            border-color: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
        }

        body.dark-theme .modal-title {
            color: #8c52ff;
        }

        body.dark-theme .modal-subtitle,
        body.dark-theme .modal-review-text {
            color: #b5adc9;
        }

        body.dark-theme .modal-card {
            background: rgba(15, 10, 30, 0.6);
            border-color: rgba(52, 0, 173, 0.15);
        }

        body.dark-theme .modal-student-name {
            color: #ffffff;
        }

        body.dark-theme .modal-student-grade {
            color: #8c52ff;
            background: rgba(52, 0, 173, 0.15);
        }

        body.dark-theme .modal-close-btn {
            background: rgba(255, 255, 255, 0.05);
            color: #8c52ff;
        }

        body.dark-theme .modal-close-btn:hover {
            background: rgba(140, 82, 255, 0.2);
            color: #ffffff;
        }

        /* تحسين التباين للعناصر التي فاتت بالوضع الداكن */
        body.dark-theme .features-title {
            color: #ffffff;
        }

        body.dark-theme .features-subtitle {
            color: #b5adc9;
        }

        body.dark-theme .features-title::after {
            background: linear-gradient(90deg, transparent, #8c52ff 50%, transparent);
        }

        body.dark-theme .editor-toolbar {
            background: rgba(15, 10, 30, 0.95);
            border-color: rgba(140, 82, 255, 0.25);
            color: #ffffff;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        }

        body.dark-theme .btn-editor-action {
            background: rgba(140, 82, 255, 0.15);
            color: #c5bfe0;
        }

        body.dark-theme .btn-editor-action:hover {
            background: #8c52ff;
            color: #ffffff;
        }

        body.dark-theme .editor-status-dot {
            background-color: #1ED6AB;
            box-shadow: 0 0 8px #1ED6AB;
        }

        body.dark-theme [contenteditable="true"] {
            outline: 2px dashed #8c52ff;
        }

        body.dark-theme [contenteditable="true"]:hover {
            outline-color: #1ED6AB;
            background: rgba(140, 82, 255, 0.05);
        }

        /* زر وضع الليل والنهار المطور */
        .dark-mode-toggle {
            position: fixed;
            bottom: 30px;
            left: 30px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(52, 0, 173, 0.15);
            box-shadow: 0 10px 30px rgba(52, 0, 173, 0.15);
            color: #3400AD;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 9998;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        body.dark-theme .dark-mode-toggle {
            background: rgba(15, 10, 30, 0.7);
            border-color: rgba(140, 82, 255, 0.25);
            color: #8c52ff;
            box-shadow: 0 10px 30px rgba(140, 82, 255, 0.15);
        }

        .dark-mode-toggle:hover {
            transform: scale(1.08) rotate(30deg);
        }

        body.dark-theme .dark-mode-toggle:hover {
            background: #8c52ff;
            color: #ffffff;
            box-shadow: 0 15px 35px rgba(140, 82, 255, 0.35);
        }

        body.edit-mode-active .dark-mode-toggle {
            transform: translateY(-80px);
        }
        body.edit-mode-active .dark-mode-toggle:hover {
            transform: translateY(-80px) scale(1.08) rotate(30deg);
        }

        /* -------------------------------------------------------------
           التجاوب الكامل والتكيف مع شاشات الهواتف والتابلت
           ------------------------------------------------------------- */
        /* -------------------------------------------------------------
           تنسيقات زر الهامبرغر والشريط الجانبي للموبايل والتابلت
           ------------------------------------------------------------- */
        .mobile-menu-toggle {
            display: none;
            background: transparent;
            border: none;
            color: #3400AD;
            cursor: pointer;
            z-index: 101;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: rgba(52, 0, 173, 0.05);
            border: 1px solid rgba(52, 0, 173, 0.1);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .mobile-menu-toggle:hover {
            background: rgba(52, 0, 173, 0.12);
            transform: scale(1.05);
        }

        .mobile-sidebar {
            position: fixed;
            top: 0;
            right: -320px; /* مخفي خارج الشاشة من اليمين */
            width: 300px;
            height: 100vh;
            background: rgba(253, 248, 255, 0.85);
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            border-left: 1px solid rgba(52, 0, 173, 0.1);
            box-shadow: -10px 0 40px rgba(52, 0, 173, 0.05);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            padding: 30px 24px;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            direction: rtl;
        }

        .mobile-sidebar.active {
            transform: translateX(-320px); /* ينزلق للداخل */
        }

        .sidebar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 40px;
            width: 100%;
        }

        .mobile-sidebar-close {
            background: rgba(52, 0, 173, 0.05);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3400AD;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .mobile-sidebar-close:hover {
            background: rgba(52, 0, 173, 0.15);
            transform: rotate(90deg);
        }

        .sidebar-logo {
            width: 80px;
            height: 40px;
            background-image: url('logo.png');
            background-repeat: no-repeat;
            background-size: contain;
            opacity: 1;
        }

        .sidebar-links {
            display: flex;
            flex-direction: column;
            gap: 20px;
            flex-grow: 1;
        }

        .sidebar-item {
            display: flex;
            align-items: center;
            gap: 16px;
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            font-weight: 600;
            font-size: 18px;
            color: #484556;
            text-decoration: none;
            padding: 14px 20px;
            border-radius: 12px;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            position: relative;
            background: transparent;
            border: none;
        }

        .sidebar-item::before {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 0%;
            background: #3400AD;
            transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            border-radius: 4px;
            opacity: 0;
        }

        .sidebar-item-number {
            display: none !important;
            font-family: 'Outfit', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: rgba(52, 0, 173, 0.4);
            transition: all 0.4s ease;
            letter-spacing: 1px;
        }

        .sidebar-item-text {
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .sidebar-item:hover {
            background: rgba(52, 0, 173, 0.03);
            color: #3400AD;
            transform: translateX(-5px);
        }

        .sidebar-item:hover::before, .sidebar-item.active::before {
            height: 60%;
            opacity: 1;
        }

        .sidebar-item:hover .sidebar-item-number, .sidebar-item.active .sidebar-item-number {
            color: #3400AD;
            transform: translateY(-2px);
        }

        .sidebar-item:hover .sidebar-item-text, .sidebar-item.active .sidebar-item-text {
            transform: translateX(-8px);
        }

        .sidebar-item.active {
            background: rgba(52, 0, 173, 0.06);
            color: #3400AD;
        }

        .sidebar-footer {
            width: 100%;
            margin-top: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 20px 0;
        }

        .sidebar-register-btn {
            width: 100% !important;
            height: 52px !important;
            border-radius: 16px !important;
            background: #3400AD !important;
            color: #ffffff !important;
            font-weight: 700 !important;
            box-shadow: 0 10px 25px rgba(52, 0, 173, 0.15) !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sidebar-register-btn:hover {
            background: #1a0063 !important;
            box-shadow: 0 12px 30px rgba(26, 0, 99, 0.25) !important;
        }

        .sidebar-login-btn {
            width: 100% !important;
            height: 52px !important;
            border-radius: 16px !important;
            background: rgba(52, 0, 173, 0.08) !important;
            border: 1px solid rgba(52, 0, 173, 0.2) !important;
            color: #3400AD !important;
            font-weight: 700 !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sidebar-login-btn:hover {
            background: rgba(52, 0, 173, 0.15) !important;
        }

        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 9997;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }

        .sidebar-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* -------------------------------------------------------------
           الوضع الداكن للقائمة الجانبية
           ------------------------------------------------------------- */
        body.dark-theme .mobile-menu-toggle {
            color: #8c52ff;
            background: rgba(140, 82, 255, 0.1);
            border-color: rgba(140, 82, 255, 0.2);
        }

        body.dark-theme .mobile-menu-toggle:hover {
            background: rgba(140, 82, 255, 0.18);
        }

        body.dark-theme .mobile-sidebar {
            background: rgba(15, 10, 30, 0.85);
            border-left-color: rgba(140, 82, 255, 0.2);
            box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
        }

        body.dark-theme .mobile-sidebar-close {
            background: rgba(255, 255, 255, 0.05);
            color: #8c52ff;
        }

        body.dark-theme .mobile-sidebar-close:hover {
            background: rgba(140, 82, 255, 0.2);
        }

        body.dark-theme .sidebar-item {
            color: #c5bfe0;
        }

        body.dark-theme .sidebar-item::before {
            background: #8c52ff;
        }

        body.dark-theme .sidebar-item-number {
            color: rgba(140, 82, 255, 0.4);
        }

        body.dark-theme .sidebar-item:hover {
            background: rgba(140, 82, 255, 0.06);
            color: #ffffff;
        }

        body.dark-theme .sidebar-item.active {
            background: rgba(140, 82, 255, 0.12);
            color: #ffffff;
        }

        body.dark-theme .sidebar-item:hover .sidebar-item-number, body.dark-theme .sidebar-item.active .sidebar-item-number {
            color: #8c52ff;
        }

        body.dark-theme .sidebar-login-btn {
            background: #8c52ff !important;
            box-shadow: 0 10px 25px rgba(140, 82, 255, 0.35) !important;
        }

        body.dark-theme .sidebar-login-btn:hover {
            background: #9d4edd !important;
            box-shadow: 0 12px 30px rgba(140, 82, 255, 0.45) !important;
        }

        /* -------------------------------------------------------------
           التجاوب الكامل والتكيف مع شاشات الهواتف والتابلت
           ------------------------------------------------------------- */
        @media (max-width: 992px) {
            .st0 {
                padding: 0 24px;
            }
            .st1 {
                width: 140px;
                font-size: 13px;
            }
            .nav-links {
                gap: 24px;
            }
        }

        @media (max-width: 768px) {
            /* 1. Mobile Header & Sidebar */
            .st0 {
                padding: 0 16px;
                height: 72px; /* مساحة تنفس مريحة */
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: fixed;
                overflow: hidden !important; /* منع الشعار من الخروج من حدود الهيدر */
            }
            .nav-links {
                display: none !important;
            }
            .header-login-btn {
                display: flex !important; /* إظهار زر تسجيل الدخول */
                order: 3 !important; /* زر تسجيل الدخول في أقصى اليسار في RTL */
                position: static !important;

                width: auto !important;
                height: 38px !important;
                padding: 0 14px !important;
                border-radius: 19px !important;
                background: rgba(52, 0, 173, 0.08) !important;
                border: 1px solid rgba(52, 0, 173, 0.18) !important;
                font-size: 13px !important;
                font-weight: 700 !important;
                color: #3400AD !important;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
            .mobile-menu-toggle {
                display: flex;
                position: relative !important;
                z-index: 10 !important; /* فوق الشعار ليبقى قابلاً للنقر */
                order: 1 !important; /* زر القائمة ذو الـ 3 شرائط في أقصى اليمين في RTL */
                width: 48px; /* حجم لمس قياسي Apple */
                height: 48px;
                align-items: center;
                justify-content: center;
                margin-left: 0;
                margin-right: 8px !important;
            }
            .header-bg-shape {
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                transform: translate(-50%, -50%) !important;
                margin-left: -8px !important; /* إزاحة بصرية طفيفة لليسار ليتزن مع الأزرار الجانبية */
                width: 175px !important;
                height: 90px !important;
                z-index: 1 !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
                background-size: contain !important;
                pointer-events: none; /* لكي لا يعيق النقرات */
            }

            /* 2. Hero Section (Radical Simplicity & Contrast) */
            .hero-section {
                padding-top: 75px; /* رفع السكشن لأعلى */
                padding-bottom: 40px;
                min-height: auto;
                display: block; 
            }
            .hero-container {
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 0 20px;
                position: relative;
                z-index: 2; /* فوق الكروموسوم */
            }
            /* فك الارتباط بالوضع المطلق للحاسوب */
            .badge-st2 {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                margin-bottom: 24px !important;
                width: 220px !important;
                height: 38px !important;
                overflow: hidden !important;
                display: inline-flex !important;
                align-items: flex-start !important; /* مهم جداً لمنع قص وإزاحة النصوص للأسفل */
                justify-content: center !important;
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
            }
            .st3-box {
                position: relative;
                left: auto; top: auto;
                width: 100%;
                height: auto;
                justify-content: center;
                margin-bottom: 16px;
                text-align: center;
            }
            .title-st3 {
                font-size: 42px !important; /* تكبير */
                font-weight: 900 !important; /* خشنه */
                white-space: normal; /* السماح بالتفاف النص */
                line-height: 1.2;
                text-align: center;
            }
            .st4-box {
                position: relative;
                left: auto; top: auto;
                width: 100%;
                height: auto;
                justify-content: center;
                margin-bottom: 32px;
            }
            .subtitle-st4 {
                font-size: 16px;
                text-align: center;
                padding: 12px 16px;
            }

            /* تفعيل وتخصيص حركة الظهور والتمرير (Scroll Reveal) في الموبايل بشكل ناعم يمنع المشاكل البصرية للفراغات الجانبية */
            .reveal-element, .reveal-left, .reveal-right {
                opacity: 0 !important; transform: translateY(40px) !important;
                transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
            }
            .reveal-element.revealed, .reveal-left.revealed, .reveal-right.revealed {
                opacity: 1 !important;
                transform: translateY(0) !important;
            }
            /* الكروت والعناصر الفردية داخل مجموعات العرض تبدأ مخفية وتظهر تدريجياً بشكل مستقل عند التمرير إليها */
            .reveal-parent > * {
                opacity: 0 !important; transform: translateY(40px) scale(0.95) !important;
                transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
            }
            .reveal-parent > *.revealed {
                opacity: 1 !important;
                transform: translateY(0) scale(1) !important;
            }
            /* السماح للحركة الفردية بالعمل بشكل صحيح */
            .reveal-parent.revealed > * {
                opacity: 1 !important;
                transform: translateY(0) scale(1) !important;
            }

            .subtitle-st4::before, .subtitle-st4::after {
                display: none; /* إزالة الخطوط الجانبية لتقليل الضجيج */
            }
            .hero-actions {
                position: relative;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .btn-st0 {
                position: relative;
                left: auto; top: auto;
                width: 100%;
                height: 56px; /* ارتفاع قياسي للتحويل */
                font-size: 17px;
                border-radius: 28px;
                box-shadow: 0 8px 20px rgba(52, 0, 173, 0.2);
            }
            .hero-socials {
                display: flex !important; /* إظهار شبكات التواصل في الجوال مع فيسبوك وتيك توك */
                flex-direction: row !important;
                gap: 12px !important;
                margin-top: 16px !important;
            }

            /* 3. Hero Visual Assets (Depth of Field Chromosome) */
            .hero-visual-assets {
                width: 100%;
                height: 100%;
                top: -190px; /* رفع الكروموسوم وما وراءه للأعلى بشكل أكبر لمنع تغطية النصوص */
                left: 0;
                z-index: 0; /* خلف النصوص بالكامل */
                opacity: 0.18; /* تراجع كبير جداً لعدم إزعاج القراءة */
                display: flex;
                justify-content: center;
                align-items: flex-start;
                padding-top: 10px; /* تقليص الحشوة لرفعه أكثر */
                filter: blur(8px) saturate(0.8); /* عمق سينمائي فائق */
            }
            .media-glow, .droplets-image1, .card-st7 {
                display: none; /* تنظيف المشهد */
            }
            .dna-wrapper {
                position: relative;
                left: auto; top: auto;
                width: 320px;
                height: 320px;
            }

            /* 4. Features Section (Cards Layout) */
            .features-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            /* تمت استعادة أنيميشن الدوران ثلاثي الأبعاد للبطاقات بالكامل بطلب المستخدم */

            /* 5. Timeline Section Mobile Fixes */
            .timeline-section {
                padding: 40px 0 !important;
            }
            .timeline-container {
                flex-direction: column;
                padding: 0 16px;
                position: relative;
            }
            .timeline-banner {
                width: max-content !important;
                max-width: 100% !important;
                height: auto !important;
                margin: 0 auto 20px auto !important; /* توسيط الشريط مع مسافة مريحة أسفله قبل العنوان */
                display: flex !important;
                flex-direction: row !important; /* تنسيق أفقي للشريط */
                align-items: center !important;
                justify-content: center !important;
                padding: 10px 24px !important; /* شريط رقيق */
                border-radius: 50px !important; /* شكل كبسولة دائري أنيق */
                background: #1a0063 !important;
                box-shadow: 0 8px 25px rgba(26, 0, 99, 0.15) !important;
                position: relative !important;
                left: auto !important;
                top: auto !important;

                z-index: 2 !important;
                opacity: 1 !important;
                filter: none !important;
                pointer-events: auto !important;
            }
            .timeline-banner-text {
                display: flex !important;
                flex-direction: row !important; /* وضع الكلمات بجانب بعضها */
                align-items: center !important;
                justify-content: center !important;
                gap: 8px !important; /* مسافة بين الكلمات */
                width: auto !important;
                padding: 0 !important;
                z-index: 2;
            }
            .banner-title {
                font-size: 16px !important;
                font-weight: 700 !important;
                line-height: 1.2 !important;
                color: #ffffff !important;
            }
            .banner-subtitle {
                font-size: 16px !important;
                font-weight: 700 !important;
                line-height: 1.2 !important;
                margin-top: 0 !important;
                color: #ffffff !important;
            }
            .banner-corner-indicator {
                display: none !important; /* إخفاء الزاوية الزخرفية ليظل الشريط رقيقاً وبسيطاً */
            }
            .timeline-banner-bg {
                display: none !important; /* إخفاء الرقم العملاق الزخرفي لتنظيف مظهر الشريط */
            }



            /* محاذاة وتوسيط نصوص السباقون دوماً (أول من) والخط أسفلها */
            .timeline-title-box {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                text-align: center !important;
                gap: 12px !important;
                width: 100% !important;
                padding: 0 !important;
            }
            .timeline-signature {
                margin: 0 auto !important;
                text-align: center !important;
                display: block !important;
                width: max-content !important;
            }
            .timeline-main-title {
                text-align: center !important;
                display: block !important;
                margin: 0 auto 12px auto !important;
                width: max-content !important;
            }
            .timeline-main-title::after {
                left: 50% !important;
                right: auto !important;
                transform: translateX(-50%) !important;
            }
        }

        @media (max-width: 480px) {
            .st0 {
                padding: 0 12px;
            }
            .title-st3 {
                font-size: 32px !important; /* تصغير إضافي للشاشات الصغيرة جداً مع الحفاظ على السمك البولد */
                font-weight: 900 !important;
            }
            .btn-st0 {
                font-size: 16px;
                height: 54px;
            }
        }
    

/* Safe Font Overrides */
body, h1, h2, h3, h4, p, span, div, button, input, select, textarea {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
}

:root {
    /* LIGHT MODE VARS (Default) */
    --brand-purple: #3400AD;
    --brand-purple-dark: #1a005c;
    --brand-purple-light: rgba(52, 0, 173, 0.05);
    --brand-purple-hover: rgba(52, 0, 173, 0.1);
    --text-main: #1c1b20;
    --text-muted: #484556;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(52, 0, 173, 0.1);
    --input-bg: rgba(255, 255, 255, 0.9);
    --card-gradient: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.4));
    --modal-bg: white;
}

/* DARK MODE VARS - MATCHING MAIN PAGE */
[data-theme="dark"] {
    --brand-purple: #8c52ff; /* Exact theme purple from main page */
    --brand-purple-dark: #7a3ee6;
    --brand-purple-light: rgba(140, 82, 255, 0.15);
    --brand-purple-hover: rgba(140, 82, 255, 0.25);
    --text-main: #f3f0fa;
    --text-muted: #c5bfe0;
    --glass-bg: rgba(5, 2, 12, 0.7);
    --glass-border: rgba(140, 82, 255, 0.25);
    --input-bg: rgba(5, 2, 12, 0.5);
    --card-gradient: linear-gradient(135deg, rgba(16, 6, 42, 0.9), rgba(5, 2, 12, 0.6));
    --modal-bg: #05020c;
}

/* Animations */
@keyframes fadeUpIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes floatShape {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-40px) rotate(180deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

/* Grader Specific Styles */
.grader-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
    z-index: 10;
    position: relative;
    direction: rtl;
}

.grader-header {
    display: flex;
    justify-content: flex-end; 
    align-items: flex-end;
    margin-bottom: 25px; 
    animation: fadeInRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.grader-actions {
    display: flex;
    gap: 15px;
}

.btn-solid-header {
    background: var(--brand-purple);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Dark mode specific text override to ensure readability on bright buttons */
[data-theme="dark"] .btn-solid-header {
    color: #120e1f;
}

.btn-solid-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--brand-purple-light);
}

.btn-outline-header {
    background: transparent;
    color: var(--brand-purple);
    border: 1px solid var(--brand-purple);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline-header:hover {
    background: var(--brand-purple);
    color: #fff;
    box-shadow: 0 10px 20px var(--brand-purple-light);
}
[data-theme="dark"] .btn-outline-header:hover {
    color: #120e1f;
}

.grader-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 35px;
}

/* Responsive Fixes - Removing Overlaps */
.desktop-pull-up {
    margin-top: -69px;
}

@media (max-width: 1024px) {
    .grader-layout {
        grid-template-columns: 1fr;
    }
    .desktop-pull-up {
        margin-top: 0; /* Remove negative margin on mobile/tablet to fix overlap */
    }
}

@media (max-width: 768px) {
    .grader-header {
        justify-content: center;
        margin-bottom: 20px;
    }
    .grader-actions {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }
    .btn-solid-header, .btn-outline-header {
        width: 100%;
        text-align: center;
    }
}

/* Glass Panels */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    animation: fadeUpIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

[data-theme="dark"] .glass-panel {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.glass-panel:nth-child(1) { animation-delay: 0.1s; }
.glass-panel:nth-child(2) { animation-delay: 0.2s; }

/* Luxury Title Card */
.luxury-title-card {
    background: var(--card-gradient);
    border: 1px solid var(--glass-border);
    border-right: 4px solid var(--brand-purple);
    border-radius: 16px;
    padding: 22px 25px;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 24px;
    font-weight: 800;
    color: var(--brand-purple);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .luxury-title-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Forms */
.form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-purple);
    display: block;
    margin-bottom: 12px;
}

.form-select {
    width: 100%;
    padding: 18px 24px;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background-color: var(--input-bg);
    /* Inline SVG colored via JS or mask if needed, keeping simple for dark mode compatibility */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 20px center;
    font-size: 15px;
    color: var(--text-main);
    outline: none;
    cursor: pointer;
    appearance: none;
    transition: all 0.3s ease;
}

.form-select:focus {
    border-color: var(--brand-purple);
    box-shadow: 0 0 0 4px var(--brand-purple-light);
}

.form-select option {
    background: var(--modal-bg);
    color: var(--text-main);
}

.upload-dropzone {
    border: 2px dashed var(--glass-border);
    border-radius: 20px;
    background: var(--brand-purple-light);
    padding: 60px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s ease;
}

.upload-dropzone:hover {
    background: var(--brand-purple-hover);
    border-color: var(--brand-purple);
    transform: translateY(-2px);
}

.btn-primary-lux {
    background: var(--brand-purple);
    color: #fff;
    border: none;
    width: 100%;
    height: 70px;
    margin-top: 30px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 15px 30px var(--brand-purple-light);
    transition: all 0.3s ease;
}

[data-theme="dark"] .btn-primary-lux {
    color: #120e1f;
}

.btn-primary-lux:hover {
    transform: translateY(-3px);
}

/* Instruction Cards */
.instruction-card {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    animation: fadeUpIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    animation-delay: 0.2s;
    transition: transform 0.3s ease;
}

[data-theme="dark"] .instruction-card {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.instruction-card:hover {
    transform: translateY(-5px);
}

.instruction-card.highlighted {
    border-right: 4px solid var(--brand-purple);
}

.instruction-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.instruction-list li {
    margin-bottom: 12px;
    line-height: 1.6;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    direction: rtl;
}

.modal-overlay.active {
    display: flex !important;
    opacity: 1 !important;
}

.modal-content {
    background: var(--modal-bg);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    border-radius: 24px;
    overflow-y: auto;
    padding: 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
    position: relative;
    transform: translateY(20px);
    transition: transform 0.4s ease;
    border: 1px solid var(--glass-border);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 25px;
    left: 25px;
    background: var(--brand-purple-light);
    color: var(--brand-purple);
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
}

.modal-close:hover { background: var(--brand-purple-hover); }

/* Premium Sliding Switch */
.scienca-switch input:checked + .scienca-slider {
    background: linear-gradient(135deg, #3400AD 0%, #6830E3 100%);
}
.scienca-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: 0.4s;
    border-radius: 34px;
    border: 1px solid rgba(104, 48, 227, 0.3);
}
.scienca-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.scienca-switch input:checked + .scienca-slider:before {
    transform: translateX(22px);
}

/* History Table */
.history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.history-table th {
    text-align: right;
    padding: 15px;
    border-bottom: 2px solid var(--glass-border);
    color: var(--brand-purple);
    font-weight: 700;
    font-size: 14px;
}

.history-table td {
    padding: 15px;
    border-bottom: 1px solid var(--glass-border);
    font-size: 14px;
    color: var(--text-main);
}

/* ORIGINAL V8 REPORT PROTOTYPE */
.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--glass-border);
}

.report-tag {
    background: var(--brand-purple-light);
    color: var(--brand-purple);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}

.ai-alert {
    background: var(--brand-purple-light);
    border-right: 4px solid var(--brand-purple);
    padding: 20px;
    border-radius: 12px;
    margin: 20px 0;
}

.report-section {
    margin-bottom: 30px;
}

.report-section h3 {
    font-size: 18px;
    color: var(--brand-purple);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

.report-table th, .report-table td {
    padding: 15px;
    border-bottom: 1px solid var(--glass-border);
    text-align: right;
}

.report-table th {
    background: var(--brand-purple-light);
    color: var(--brand-purple);
    font-weight: 700;
}

.report-table tr:last-child td {
    border-bottom: none;
}

/* Immersive Timer (Luxury Glassmorphic Dashboard) */
.timer-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at 50% 50%, rgba(240, 238, 247, 0.98) 0%, rgba(220, 215, 235, 1) 100%);
    z-index: 100000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    overflow: hidden;
    direction: rtl;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.timer-overlay::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 80% 20%, rgba(118, 34, 255, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 10% 80%, rgba(52, 0, 173, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.timer-overlay.active { display: flex; opacity: 1; }
.timer-overlay.pomo-focus { 
    background: radial-gradient(circle at 50% 50%, rgba(255, 238, 238, 0.98) 0%, rgba(245, 215, 215, 1) 100%); 
} 
.timer-overlay.pomo-focus::before {
    background: radial-gradient(circle at 80% 20%, rgba(255, 59, 59, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 10% 80%, rgba(150, 0, 30, 0.05) 0%, transparent 50%);
}
.timer-overlay.pomo-break { 
    background: radial-gradient(circle at 50% 50%, rgba(230, 252, 242, 0.98) 0%, rgba(205, 240, 225, 1) 100%); 
} 
.timer-overlay.pomo-break::before {
    background: radial-gradient(circle at 80% 20%, rgba(30, 214, 171, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 10% 80%, rgba(0, 100, 50, 0.05) 0%, transparent 50%);
}

.pomo-switch-container {
    position: absolute;
    top: 40px; left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 40px;
    padding: 6px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.pomo-switch-btn {
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.5);
    padding: 12px 35px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
}
.pomo-switch-btn:hover {
    color: black;
}
.pomo-switch-btn.active {
    background: linear-gradient(135deg, #3400AD 0%, #7622ff 100%);
    color: white;
    box-shadow: 0 10px 25px rgba(118, 34, 255, 0.3);
}

/* Accent Adaptations for the Active Switch Button in Light/Dark overlay */
.timer-overlay.pomo-focus .pomo-switch-btn.active {
    background: linear-gradient(135deg, #b00020 0%, #ff3b5f 100%);
    box-shadow: 0 10px 25px rgba(255, 59, 59, 0.3);
}
.timer-overlay.pomo-break .pomo-switch-btn.active {
    background: linear-gradient(135deg, #008f5d 0%, #1ed6ab 100%);
    box-shadow: 0 10px 25px rgba(30, 214, 171, 0.3);
}

.timer-bg-effects {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

@keyframes fallRainParticle {
    0% {
        transform: translateY(-100px) rotate(0deg);
    }
    100% {
        transform: translateY(115vh) rotate(360deg);
    }
}

@keyframes fallRainLine {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(115vh);
    }
}

.timer-bg-particle {
    position: absolute;
    top: -100px;
    color: #7622ff;
    /* Removed will-change: transform to prevent iOS crash */
}

.timer-bg-particle.particle-symbol {
    animation: fallRainParticle linear infinite;
    text-shadow: 0 0 10px currentColor;
    font-weight: 800;
    transition: color 0.8s ease;
}

.timer-bg-particle.particle-rain {
    width: 2px;
    height: 50px;
    background: linear-gradient(to bottom, transparent, currentColor);
    animation: fallRainLine linear infinite;
    border-radius: 2px;
    transition: color 0.8s ease, background 0.8s ease;
}

/* Light mode defaults */
.timer-bg-particle {
    color: rgba(52, 0, 173, 0.25);
}
.timer-overlay.pomo-focus .timer-bg-particle {
    color: rgba(214, 30, 64, 0.25);
}
.timer-overlay.pomo-break .timer-bg-particle {
    color: rgba(0, 143, 93, 0.25);
}

/* Mode overrides in dark mode */
body.dark-theme .timer-bg-particle,
[data-theme="dark"] .timer-bg-particle {
    color: rgba(118, 34, 255, 0.55);
}
body.dark-theme .timer-overlay.pomo-focus .timer-bg-particle,
[data-theme="dark"] .timer-overlay.pomo-focus .timer-bg-particle {
    color: rgba(255, 94, 94, 0.65);
}
body.dark-theme .timer-overlay.pomo-break .timer-bg-particle,
[data-theme="dark"] .timer-overlay.pomo-break .timer-bg-particle {
    color: rgba(30, 214, 171, 0.65);
}

.timer-panel {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(35px) saturate(200%);
    -webkit-backdrop-filter: blur(35px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 40px;
    padding: 60px 80px;
    z-index: 10;
    text-align: center;
    color: #1a004a;
    width: 850px;
    box-shadow: 0 50px 100px rgba(30, 10, 80, 0.08), 
                inset 0 1px 0 rgba(255, 255, 255, 0.8), 
                inset 0 0 40px rgba(255, 255, 255, 0.1);
    transition: all 0.5s ease;
}

@media (max-width: 768px) {
    .timer-panel {
        width: 92%;
        padding: 40px 24px;
        border-radius: 30px;
    }
    .timer-display {
        font-size: 70px !important;
        margin: 15px 0 !important;
    }
    .pomo-modes {
        flex-direction: column;
        width: 100%;
    }
    .pomo-task-input {
        width: 100% !important;
    }
    .timer-controls {
        flex-direction: column;
        gap: 12px !important;
    }
    .t-btn {
        width: 100% !important;
        padding: 15px 25px !important;
    }
}

.timer-display {
    font-size: 140px;
    font-weight: 700;
    font-family: 'Alexandria', sans-serif;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(118, 34, 255, 0.15);
    font-variant-numeric: tabular-nums;
    margin: 25px 0;
    color: #3400AD;
    transition: text-shadow 0.8s ease, color 0.5s ease;
}

.timer-overlay.pomo-focus .timer-display {
    color: #d61e40;
    text-shadow: 0 0 20px rgba(255, 59, 59, 0.15);
}

.timer-overlay.pomo-break .timer-display {
    color: #008f5d;
    text-shadow: 0 0 20px rgba(30, 214, 171, 0.15);
}

.timer-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
}

.t-btn {
    background: rgba(255, 255, 255, 0.6);
    color: #1a004a;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 16px 32px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.t-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.t-btn:active {
    transform: translateY(-1px);
}

.t-btn-primary {
    background: linear-gradient(135deg, #3400AD 0%, #7622ff 100%);
    border: none;
    color: white;
    box-shadow: 0 10px 30px rgba(118, 34, 255, 0.25);
}

.t-btn-primary:hover {
    background: linear-gradient(135deg, #250080 0%, #6011e0 100%);
    box-shadow: 0 15px 35px rgba(118, 34, 255, 0.45);
}

.timer-overlay.pomo-focus .t-btn-primary {
    background: linear-gradient(135deg, #b00020 0%, #ff3b5f 100%);
    box-shadow: 0 10px 30px rgba(255, 59, 59, 0.25);
}
.timer-overlay.pomo-focus .t-btn-primary:hover {
    background: linear-gradient(135deg, #800010 0%, #e02245 100%);
    box-shadow: 0 15px 35px rgba(255, 59, 59, 0.4);
}

.timer-overlay.pomo-break .t-btn-primary {
    background: linear-gradient(135deg, #008f5d 0%, #1ed6ab 100%);
    box-shadow: 0 10px 30px rgba(30, 214, 171, 0.25);
}
.timer-overlay.pomo-break .t-btn-primary:hover {
    background: linear-gradient(135deg, #006b40 0%, #17b38e 100%);
    box-shadow: 0 15px 35px rgba(30, 214, 171, 0.4);
}

.t-btn-exit {
    background: rgba(255, 59, 59, 0.06) !important;
    border: 1px solid rgba(255, 59, 59, 0.12) !important;
    color: #d61e40 !important;
}

.t-btn-exit:hover {
    background: rgba(255, 59, 59, 0.12) !important;
    border-color: rgba(255, 59, 59, 0.25) !important;
    box-shadow: 0 10px 25px rgba(255, 59, 59, 0.08) !important;
}

.timer-settings {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.t-select {
    background: rgba(255, 255, 255, 0.6);
    color: #1a004a;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 14px 28px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
    outline: none;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.t-select:hover, .t-select:focus {
    border-color: rgba(118, 34, 255, 0.3);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 20px rgba(118, 34, 255, 0.1);
}

.t-select option {
    background: #ffffff;
    color: #1a004a;
}

.lap-board {
    margin-top: 35px;
    text-align: right;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 24px 32px;
    border-radius: 20px;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

.lap-item {
    font-size: 15px;
    color: #1a004a;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lap-item:last-child {
    border-bottom: none;
}

.pomo-explicit-ui {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
    width: 100%;
}

.pomo-modes {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
}
.pomo-mode-btn {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 12px 24px;
    border-radius: 14px;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
}
.pomo-mode-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: black;
    border-color: rgba(0, 0, 0, 0.1);
}
.pomo-mode-btn.active {
    background: #3400AD;
    color: white;
    border-color: #3400AD;
    box-shadow: 0 10px 25px rgba(52, 0, 173, 0.2);
}

/* Mode-specific modifications to active pomo mode buttons in light theme */
.timer-overlay.pomo-focus .pomo-mode-btn.active {
    background: #d61e40;
    border-color: #d61e40;
    box-shadow: 0 10px 25px rgba(214, 30, 64, 0.25);
}
.timer-overlay.pomo-break .pomo-mode-btn.active {
    background: #008f5d;
    border-color: #008f5d;
    box-shadow: 0 10px 25px rgba(0, 143, 93, 0.25);
}

.pomo-task-input {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 15px 30px;
    color: #1a004a;
    font-size: 15px;
    width: 60%;
    outline: none;
    text-align: center;
    margin-bottom: 20px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
.pomo-task-input::placeholder { color: rgba(0, 0, 0, 0.4); }
.pomo-task-input:hover, .pomo-task-input:focus {
    border-color: rgba(118, 34, 255, 0.3);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 20px rgba(118, 34, 255, 0.10);
}

.timer-overlay.pomo-focus .pomo-task-input:hover, .timer-overlay.pomo-focus .pomo-task-input:focus {
    border-color: rgba(255, 59, 59, 0.3);
    box-shadow: 0 0 20px rgba(255, 59, 59, 0.1);
}

.pomo-dots {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}
.pomo-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(0, 0, 0, 0.02);
}
.pomo-dot.completed {
    background: linear-gradient(135deg, #ffeb3b 0%, #f57f17 100%);
    box-shadow: 0 0 15px rgba(245, 127, 23, 0.4);
    transform: scale(1.15);
}

/* Animations for Courses Section Entrance */
@keyframes coursesFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(35px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#courses-view.active-view .courses-container {
    animation: coursesFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#courses-view.active-view 

#courses-view.active-view .course-card:nth-child(1) { animation-delay: 0.08s; }
#courses-view.active-view .course-card:nth-child(2) { animation-delay: 0.16s; }
#courses-view.active-view .course-card:nth-child(3) { animation-delay: 0.24s; }
#courses-view.active-view .course-card:nth-child(4) { animation-delay: 0.32s; }
#courses-view.active-view .course-card:nth-child(5) { animation-delay: 0.4s; }
#courses-view.active-view .course-card:nth-child(6) { animation-delay: 0.48s; }


/* ==========================================
   Dark Mode Overrides for Timer Overlay 
========================================== */
body.dark-theme .timer-overlay,
[data-theme="dark"] .timer-overlay {
    background: radial-gradient(circle at 50% 50%, rgba(13, 3, 30, 0.98) 0%, rgba(5, 1, 15, 1) 100%);
}

body.dark-theme .timer-overlay::before,
[data-theme="dark"] .timer-overlay::before {
    background: radial-gradient(circle at 80% 20%, rgba(118, 34, 255, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 10% 80%, rgba(52, 0, 173, 0.08) 0%, transparent 50%);
}

body.dark-theme .timer-overlay.pomo-focus,
[data-theme="dark"] .timer-overlay.pomo-focus {
    background: radial-gradient(circle at 50% 50%, rgba(45, 5, 15, 0.98) 0%, rgba(15, 1, 5, 1) 100%);
}
body.dark-theme .timer-overlay.pomo-focus::before,
[data-theme="dark"] .timer-overlay.pomo-focus::before {
    background: radial-gradient(circle at 80% 20%, rgba(255, 59, 59, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 10% 80%, rgba(150, 0, 30, 0.08) 0%, transparent 50%);
}

body.dark-theme .timer-overlay.pomo-break,
[data-theme="dark"] .timer-overlay.pomo-break {
    background: radial-gradient(circle at 50% 50%, rgba(2, 35, 20, 0.98) 0%, rgba(1, 12, 5, 1) 100%);
}
body.dark-theme .timer-overlay.pomo-break::before,
[data-theme="dark"] .timer-overlay.pomo-break::before {
    background: radial-gradient(circle at 80% 20%, rgba(30, 214, 171, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 10% 80%, rgba(0, 100, 50, 0.08) 0%, transparent 50%);
}

body.dark-theme .pomo-switch-container,
[data-theme="dark"] .pomo-switch-container {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}

body.dark-theme .pomo-switch-btn,
[data-theme="dark"] .pomo-switch-btn {
    color: rgba(255, 255, 255, 0.5);
}
body.dark-theme .pomo-switch-btn:hover,
[data-theme="dark"] .pomo-switch-btn:hover {
    color: white;
}



body.dark-theme .timer-panel,
[data-theme="dark"] .timer-panel {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
    color: white;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5), 
                inset 0 1px 0 rgba(255, 255, 255, 0.15), 
                inset 0 0 40px rgba(255, 255, 255, 0.02);
}

body.dark-theme .timer-display,
[data-theme="dark"] .timer-display {
    color: white;
    text-shadow: 0 0 30px rgba(118, 34, 255, 0.5), 
                 0 0 60px rgba(118, 34, 255, 0.2);
}

body.dark-theme .timer-overlay.pomo-focus .timer-display,
[data-theme="dark"] .timer-overlay.pomo-focus .timer-display {
    color: white;
    text-shadow: 0 0 30px rgba(255, 59, 59, 0.5), 
                 0 0 60px rgba(255, 59, 59, 0.2);
}

body.dark-theme .timer-overlay.pomo-break .timer-display,
[data-theme="dark"] .timer-overlay.pomo-break .timer-display {
    color: white;
    text-shadow: 0 0 30px rgba(30, 214, 171, 0.5), 
                 0 0 60px rgba(30, 214, 171, 0.2);
}

body.dark-theme .t-btn,
[data-theme="dark"] .t-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

body.dark-theme .t-btn:hover,
[data-theme="dark"] .t-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

body.dark-theme .t-btn-exit,
[data-theme="dark"] .t-btn-exit {
    background: rgba(255, 59, 59, 0.08) !important;
    border-color: rgba(255, 59, 59, 0.15) !important;
    color: #ff8080 !important;
}

body.dark-theme .t-btn-exit:hover,
[data-theme="dark"] .t-btn-exit:hover {
    background: rgba(255, 59, 59, 0.18) !important;
    border-color: rgba(255, 59, 59, 0.3) !important;
    box-shadow: 0 10px 25px rgba(255, 59, 59, 0.15) !important;
}

body.dark-theme .t-select,
[data-theme="dark"] .t-select {
    background: rgba(0, 0, 0, 0.25);
    color: white;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .t-select:hover,
body.dark-theme .t-select:focus,
[data-theme="dark"] .t-select:hover,
[data-theme="dark"] .t-select:focus {
    border-color: rgba(118, 34, 255, 0.4);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 20px rgba(118, 34, 255, 0.15);
}

body.dark-theme .t-select option,
[data-theme="dark"] .t-select option {
    background: #0f0724;
    color: white;
}

body.dark-theme .lap-board,
[data-theme="dark"] .lap-board {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-theme .lap-item,
[data-theme="dark"] .lap-item {
    color: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

body.dark-theme .pomo-mode-btn,
[data-theme="dark"] .pomo-mode-btn {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}
body.dark-theme .pomo-mode-btn:hover,
[data-theme="dark"] .pomo-mode-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border-color: rgba(255, 255, 255, 0.15);
}
body.dark-theme .pomo-mode-btn.active,
[data-theme="dark"] .pomo-mode-btn.active {
    background: white;
    color: black;
    border-color: white;
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
}

body.dark-theme .pomo-task-input,
[data-theme="dark"] .pomo-task-input {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.08);
    color: white;
}
body.dark-theme .pomo-task-input::placeholder,
[data-theme="dark"] .pomo-task-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
body.dark-theme .pomo-task-input:hover,
body.dark-theme .pomo-task-input:focus,
[data-theme="dark"] .pomo-task-input:hover,
[data-theme="dark"] .pomo-task-input:focus {
    border-color: rgba(118, 34, 255, 0.4);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 20px rgba(118, 34, 255, 0.15);
}

body.dark-theme .pomo-dot,
[data-theme="dark"] .pomo-dot {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.05);
}





    
    /* SPA custom display rules */
    .view-section {
        display: none;
    }
    .view-section.active-view {
        display: block !important;
    }
    
        /* Extra styles for Material Symbols inside Feature Cards */
        .feature-icon-wrapper .material-symbols-outlined {
            font-size: 26px !important;
            color: inherit;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .feature-card-wrapper:hover .feature-icon-wrapper .material-symbols-outlined {
            transform: scale(1.1) rotate(5deg);
        }
        
        /* Custom badge colors requested by the user */
        .badge-lightblue {
            background: rgba(0, 180, 216, 0.08) !important;
            color: #00b4d8 !important;
            box-shadow: 0 0 10px rgba(0, 180, 216, 0.05) !important;
        }
        .badge-blue {
            background: rgba(0, 119, 182, 0.08) !important;
            color: #0077b6 !important;
            box-shadow: 0 0 10px rgba(0, 119, 182, 0.05) !important;
        }
        
        /* Attempts Glass Badge styling */
        .grader-header {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            margin-bottom: 25px; 
        }
        
        .attempts-glass-badge {
            background: rgba(52, 0, 173, 0.05) !important;
            backdrop-filter: blur(20px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            border: 1px solid rgba(52, 0, 173, 0.12) !important;
            border-radius: 16px !important;
            padding: 10px 20px !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 10px !important;
            color: #3400AD !important;
            font-family: 'IBM Plex Sans Arabic', sans-serif !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            box-shadow: 0 8px 32px 0 rgba(52, 0, 173, 0.03) !important;
            direction: rtl !important;
        }
        
        .attempts-glass-badge .material-symbols-outlined {
            font-size: 20px !important;
            color: #3400AD !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .attempts-glass-badge .attempts-count {
            background: #3400AD !important;
            color: #ffffff !important;
            padding: 2px 10px !important;
            border-radius: 8px !important;
            margin-right: 5px !important;
            font-size: 13px !important;
            font-weight: 800 !important;
            display: inline-block;
        }

        @media (max-width: 768px) {
            .grader-header {
                flex-direction: column !important;
                align-items: center !important;
                gap: 15px !important;
                justify-content: center !important;
            }
            .attempts-glass-badge {
                width: 100% !important;
                justify-content: center !important;
            }
        }
        
        /* Fix overlapping issues for the attempts badge and grader-header */
        .desktop-pull-up {
            margin-top: 15px !important; /* Remove negative margin to prevent overlapping the header elements */
        }
        
        .grader-header {
            z-index: 50 !important;
            position: relative !important;
            margin-bottom: 35px !important;
            padding-top: 10px !important;
        }

        .attempts-glass-badge {
            z-index: 60 !important;
        }
        
        /* Fix modal overflow, alignment, and scrolling behavior */
        .modal-box {
            max-height: 85vh !important;
            display: flex !important;
            flex-direction: column !important;
            box-sizing: border-box !important;
            overflow: hidden !important; /* Ensure children don't overflow the rounded corners */
        }
        
        .modal-box .modal-content {
            flex: 1 !important;
            min-height: 0 !important; /* Critical flexbox rule to allow shrinking */
            overflow-y: auto !important;
            padding-left: 15px !important; /* Space for the scrollbar on the left in RTL */
            padding-right: 15px !important;
            margin-top: 10px !important;
        }

        /* Adjust scrollbar visibility in modal for premium look */
        .modal-box .modal-content::-webkit-scrollbar {
            width: 8px !important;
        }
        .modal-box .modal-content::-webkit-scrollbar-thumb {
            background: rgba(52, 0, 173, 0.2) !important;
            border-radius: 10px !important;
        }
        .modal-box .modal-content::-webkit-scrollbar-thumb:hover {
            background: rgba(52, 0, 173, 0.4) !important;
        }
        
        /* Aggressive fix for reviews modal box overflow */
        #modalOverlay .modal-box {
            height: 75vh !important; /* Force a fixed height relative to viewport */
            max-height: 650px !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
        }

        #modalOverlay .modal-header {
            flex-shrink: 0 !important; /* Prevent header from shrinking */
        }

        #modalOverlay .modal-content {
            flex-grow: 1 !important;
            flex-shrink: 1 !important;
            min-height: 0 !important; /* Essential for flexbox overflow */
            overflow-y: auto !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
            margin-top: 15px !important;
        }
        
        #modalOverlay .modal-grid {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 20px !important;
        }

        @media (max-width: 768px) {
            #modalOverlay .modal-grid {
                grid-template-columns: 1fr !important;
            }
            #modalOverlay .modal-box {
                height: 85vh !important;
                padding: 20px !important;
            }
        }
        
        /* Premium Structural Fix for Reviews Modal to prevent naming collisions */
        #modalOverlay .modal-box {
            max-height: 80vh !important;
            height: 600px !important;
            display: flex !important;
            flex-direction: column !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
            background: rgba(255, 255, 255, 0.85) !important;
            backdrop-filter: blur(30px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
            border-radius: 32px !important;
            padding: 40px !important;
            box-shadow: 0 30px 70px rgba(52, 0, 173, 0.15) !important;
        }

        #modalOverlay .modal-header {
            flex-shrink: 0 !important;
            margin-bottom: 10px !important;
        }

        #modalOverlay .modal-reviews-body {
            flex: 1 !important;
            min-height: 0 !important;
            overflow-y: auto !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            width: 100% !important;
            max-width: 100% !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
            box-sizing: border-box !important;
        }

        #modalOverlay .modal-reviews-body::-webkit-scrollbar {
            width: 6px !important;
        }
        #modalOverlay .modal-reviews-body::-webkit-scrollbar-track {
            background: rgba(52, 0, 173, 0.02) !important;
            border-radius: 10px !important;
        }
        #modalOverlay .modal-reviews-body::-webkit-scrollbar-thumb {
            background: rgba(52, 0, 173, 0.15) !important;
            border-radius: 10px !important;
        }
        #modalOverlay .modal-reviews-body::-webkit-scrollbar-thumb:hover {
            background: rgba(52, 0, 173, 0.3) !important;
        }
        
    /* =================================================================
       SCIENCO PREMIUM FLOATING CHATBOT STYLES
       ================================================================= */
    
    /* 1. Trigger Floating Button */
    #scienco-chatbot-trigger {
        position: fixed;
        bottom: 30px;
        left: 30px;
        background: linear-gradient(135deg, #3400AD 0%, #6830E3 100%);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 12px 24px;
        border-radius: 50px;
        color: #ffffff;
        font-family: 'Alexandria', sans-serif;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        z-index: 9999;
        box-shadow: 
            0 10px 30px rgba(52, 0, 173, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        overflow: hidden;
    }

    #scienco-chatbot-trigger:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 
            0 15px 40px rgba(52, 0, 173, 0.4),
            0 0 0 6px rgba(52, 0, 173, 0.15);
    }

    #scienco-chatbot-trigger .glowing-icon {
        font-size: 20px;
        color: #ffffff;
        transition: transform 0.3s ease;
    }
    #scienco-chatbot-trigger:hover .glowing-icon {
        transform: scale(1.15);
    }

    /* Pulse animation around the trigger */
    #scienco-chatbot-trigger .pulse-ring {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50px;
        border: 2px solid rgba(52, 0, 173, 0.5);
        left: 0;
        top: 0;
        opacity: 0;
        animation: triggerPulse 2.5s infinite;
        pointer-events: none;
    }

    /* Ultra-Premium Glassmorphic Chatbot Table Styling */
    .chat-table-wrapper {
        overflow: hidden; /* Removed native scroll */
        margin: 20px 0;
        border-radius: 16px;
        border: 1px solid rgba(104, 48, 227, 0.15);
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 
            0 8px 32px rgba(52, 0, 173, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
        transition: all 0.3s ease;
    }
    body.dark-theme .chat-table-wrapper,
    [data-theme="dark"] .chat-table-wrapper {
        background: rgba(20, 21, 33, 0.6);
        border-color: rgba(104, 48, 227, 0.3);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }
    .chat-custom-table {
        width: 100%;
        border-collapse: collapse;
        text-align: right;
        font-size: 13px;
    }
    .chat-custom-table th {
        background: linear-gradient(135deg, #3400AD 0%, #6830E3 100%);
        color: #ffffff !important;
        padding: 12px 16px;
        font-weight: 700;
        font-size: 13px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        border: none;
    }
    .chat-custom-table td {
        padding: 10px 16px;
        border-bottom: 1px solid rgba(104, 48, 227, 0.08);
        color: #2c2a38;
        font-weight: 500;
        transition: background 0.2s ease;
    }
    body.dark-theme .chat-custom-table td,
    [data-theme="dark"] .chat-custom-table td {
        color: #ffffff !important;
        border-bottom-color: rgba(255, 255, 255, 0.05);
    }
    .chat-custom-table tr:hover td {
        background: rgba(104, 48, 227, 0.04);
    }
    body.dark-theme .chat-custom-table tr:hover td,
    [data-theme="dark"] .chat-custom-table tr:hover td {
        background: rgba(104, 48, 227, 0.1);
    }
    .chat-custom-table tr:last-child td {
        border-bottom: none;
    }
    .chat-custom-table tr:nth-child(even) {
        background: rgba(104, 48, 227, 0.02);
    }
    body.dark-theme .chat-custom-table tr:nth-child(even),
    [data-theme="dark"] .chat-custom-table tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.02);
    }

    /* 2. Main Chatbot Container */
    #scienco-chatbot-container {
        position: fixed;
        bottom: 100px;
        left: 30px;
        width: 440px;
        height: 620px;
        background: rgba(253, 248, 255, 0.75);
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
        border: 1px solid rgba(52, 0, 173, 0.12);
        border-radius: 28px;
        z-index: 9998;
        box-shadow: 
            0 25px 60px rgba(52, 0, 173, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
        display: flex;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px) scale(0.95);
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        font-family: 'IBM Plex Sans Arabic', sans-serif;
    }

    #scienco-chatbot-container.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    /* Fullscreen Mode override */
    #scienco-chatbot-container.fullscreen-mode {
        width: 100vw !important;
        height: 100vh !important;
        bottom: 0 !important;
        left: 0 !important;
        border-radius: 0px !important;
        border: none !important;
    }

    /* 3. Collapsible Sidebar (Previous Chats) */
    #chatbot-sidebar {
        width: 250px;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        border-right: 1px solid rgba(52, 0, 173, 0.08);
        display: flex;
        flex-direction: column;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        flex-shrink: 0;
        direction: rtl;
    }

    #chatbot-sidebar.sidebar-closed {
        width: 0px;
        overflow: hidden;
        border-right: none;
    }

    .sidebar-header {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(52, 0, 173, 0.06);
    }

    .sidebar-header h4 {
        font-family: 'Cairo', sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: #3400AD;
        margin: 0;
    }

    .btn-close-sidebar {
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        color: #3400AD;
    }

    .sidebar-history-list {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .history-item {
        padding: 12px 14px;
        border-radius: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all 0.3s ease;
        background: transparent;
    }

    .history-item:hover {
        background: rgba(52, 0, 173, 0.04);
    }

    .history-item.active {
        background: rgba(52, 0, 173, 0.08);
    }

    .history-item .material-symbols-outlined {
        color: #3400AD;
        font-size: 18px;
    }

    .history-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .history-title {
        font-size: 12px;
        font-weight: 600;
        color: #1c1b20;
    }

    .history-date {
        font-size: 10px;
        color: #8c889a;
    }

    .btn-new-chat {
        margin: 15px;
        background: #3400AD;
        color: #ffffff;
        border: none;
        padding: 12px;
        border-radius: 14px;
        font-family: 'Alexandria', sans-serif;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(52, 0, 173, 0.15);
    }

    .btn-new-chat:hover {
        background: #4400d9;
        transform: translateY(-2px);
    }

    /* 4. Main Chat Panel */
    .chat-main-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        direction: rtl;
    }

    /* Header */
    .chat-header {
        padding: 18px 24px;
        background: rgba(255, 255, 255, 0.3);
        border-bottom: 1px solid rgba(52, 0, 173, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .chat-brand-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .btn-history-toggle {
        background: rgba(52, 0, 173, 0.05);
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #3400AD;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-history-toggle:hover {
        background: rgba(52, 0, 173, 0.12);
    }

    .brand-logo-wrapper {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, #3400AD 0%, #6830E3 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
    }

    .brand-logo-wrapper .material-symbols-outlined {
        font-size: 18px;
    }

    .brand-meta h3 {
        font-family: 'Cairo', sans-serif;
        font-size: 14px;
        font-weight: 800;
        color: #3400AD;
        margin: 0;
    }

    .brand-meta .status-dot {
        font-size: 10px;
        color: #1ED6AB;
        display: flex;
        align-items: center;
        gap: 5px;
        font-weight: 600;
    }

    .brand-meta .status-dot::before {
        content: '';
        width: 6px;
        height: 6px;
        background: #1ED6AB;
        border-radius: 50%;
        display: inline-block;
        box-shadow: 0 0 8px #1ED6AB;
    }

    .chat-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-header-action {
        background: rgba(52, 0, 173, 0.04);
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #484556;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-header-action:hover {
        background: rgba(52, 0, 173, 0.1);
        color: #3400AD;
    }

    .btn-header-action.close-btn:hover {
        background: rgba(255, 23, 23, 0.1);
        color: #FF1717;
    }

    /* Unit Selector Widget */
    .unit-selector-wrapper {
        padding: 12px 24px;
        background: rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(52, 0, 173, 0.05);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .unit-selector-wrapper label {
        font-size: 11px;
        font-weight: 700;
        color: #484556;
        white-space: nowrap;
    }

    .unit-dropdown-container {
        flex: 1;
    }

    #chatbot-unit-select {
        width: 100%;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(52, 0, 173, 0.15);
        border-radius: 10px;
        padding: 6px 12px;
        font-family: 'IBM Plex Sans Arabic', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: #1c1b20;
        outline: none;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    #chatbot-unit-select:focus {
        border-color: #3400AD;
        box-shadow: 0 0 10px rgba(52, 0, 173, 0.1);
    }

    /* Messages Window */
    .chat-messages-container {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        background: rgba(255, 255, 255, 0.15);
    }

    .message {
        display: flex;
        flex-direction: column;
        max-width: 80%;
    }

    .message-ai {
        align-self: flex-start;
        align-items: flex-start;
    }

    .message-user {
        align-self: flex-end;
        align-items: flex-end;
    }

    .message-bubble {
        padding: 14px 18px;
        border-radius: 20px;
        font-size: 13px;
        line-height: 1.6;
    }

    .message-ai .message-bubble {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(52, 0, 173, 0.08);
        color: #1c1b20;
        border-top-right-radius: 4px;
        box-shadow: 0 4px 15px rgba(52, 0, 173, 0.02);
    }

    .message-user .message-bubble {
        background: linear-gradient(135deg, #3400AD 0%, #5200c6 100%);
        color: #ffffff;
        border-top-left-radius: 4px;
        box-shadow: 0 6px 20px rgba(52, 0, 173, 0.12);
    }

    .message-time {
        font-size: 10px;
        color: #8c889a;
        margin-top: 5px;
        padding: 0 5px;
    }

    /* Typing Indicator Bubble */
    .typing-indicator-wrapper {
        align-self: flex-start;
        padding: 0 24px 12px;
    }

    .typing-bubble {
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(52, 0, 173, 0.08);
        padding: 12px 18px;
        border-radius: 20px;
        border-top-right-radius: 4px;
        display: flex;
        align-items: center;
        gap: 5px;
        width: fit-content;
    }

    .typing-bubble span {
        width: 6px;
        height: 6px;
        background: #3400AD;
        border-radius: 50%;
        display: inline-block;
        animation: typingDot 1.4s infinite ease-in-out both;
    }

    .typing-bubble span:nth-child(1) { animation-delay: -0.32s; }
    .typing-bubble span:nth-child(2) { animation-delay: -0.16s; }

    /* Input Bar */
    .chat-input-bar {
        padding: 16px 24px;
        background: rgba(255, 255, 255, 0.4);
        border-top: 1px solid rgba(52, 0, 173, 0.08);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    #chat-user-input {
        flex: 1;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(52, 0, 173, 0.12);
        border-radius: 14px;
        padding: 12px 18px;
        font-family: 'IBM Plex Sans Arabic', sans-serif;
        font-size: 12px;
        color: #1c1b20;
        outline: none;
        transition: all 0.3s ease;
    }

    #chat-user-input:focus {
        border-color: #3400AD;
        background: #ffffff;
        box-shadow: 0 4px 15px rgba(52, 0, 173, 0.05);
    }

    #btn-chat-send {
        background: #3400AD;
        color: #ffffff;
        border: none;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 4px 12px rgba(52, 0, 173, 0.15);
    }

    #btn-chat-send:hover {
        background: #4400d9;
        transform: scale(1.05);
    }

    #btn-chat-send .material-symbols-outlined {
        font-size: 18px;
        transform: rotate(180deg); /* align arrow left for RTL */
    }

    /* Custom Webkit scrollbar for Chat messages */
    .chat-messages-container::-webkit-scrollbar,
    .sidebar-history-list::-webkit-scrollbar {
        width: 5px;
    }
    .chat-messages-container::-webkit-scrollbar-track,
    .sidebar-history-list::-webkit-scrollbar-track {
        background: transparent;
    }
    .chat-messages-container::-webkit-scrollbar-thumb,
    .sidebar-history-list::-webkit-scrollbar-thumb {
        background: rgba(52, 0, 173, 0.12);
        border-radius: 10px;
    }

    /* Keyframes animations */
    @keyframes rotateGlow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @keyframes triggerPulse {
        0% { transform: scale(0.95); opacity: 0.5; }
        50% { transform: scale(1.15); opacity: 0; }
        100% { transform: scale(0.95); opacity: 0; }
    }

    @keyframes typingDot {
        0%, 80%, 100% { transform: scale(0); }
        40% { transform: scale(1); }
    }

    @media (max-width: 480px) {
        #scienco-chatbot-container {
            width: 100% !important;
            height: 100% !important;
            bottom: 0 !important;
            left: 0 !important;
            border-radius: 0px !important;
        }
        #scienco-chatbot-trigger {
            bottom: 20px;
            left: 20px;
            padding: 10px 18px;
        }
    }
    
        /* Reposition trigger and chatbot to the right side and shrink overall sizes */
        #scienco-chatbot-trigger {
            left: auto !important;
            right: 30px !important;
        }
        
        #scienco-chatbot-container {
            left: auto !important;
            right: 30px !important;
            width: 380px !important; /* Shrunk from 440px */
            height: 540px !important; /* Shrunk from 620px */
            bottom: 100px !important;
        }

        /* Adjust chat messages box size inside the smaller container */
        .chat-messages-container {
            padding: 16px !important;
            gap: 15px !important;
        }

        .message-bubble {
            padding: 10px 14px !important;
            font-size: 12.5px !important;
        }

        #chatbot-sidebar {
            width: 220px !important; /* Shrunk sidebar width */
        }
        
        /* =================================================================
           DARK MODE SUPPORT FOR CHATBOT AND NEW FEATURE ICONS
           ================================================================= */
        
        /* Chatbot Container - Dark Mode */
        body.dark-theme #scienco-chatbot-container,
        [data-theme="dark"] #scienco-chatbot-container {
            background: rgba(20, 18, 26, 0.85) !important;
            border-color: rgba(104, 48, 227, 0.25) !important;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
        }

        /* Sidebar - Dark Mode */
        body.dark-theme #chatbot-sidebar,
        [data-theme="dark"] #chatbot-sidebar {
            background: rgba(15, 12, 20, 0.7) !important;
            border-color: rgba(104, 48, 227, 0.18) !important;
        }
        
        body.dark-theme .history-title,
        [data-theme="dark"] .history-title {
            color: #ffffff !important;
        }

        body.dark-theme .history-item:hover,
        [data-theme="dark"] .history-item:hover {
            background: rgba(104, 48, 227, 0.1) !important;
        }

        body.dark-theme .history-item.active,
        [data-theme="dark"] .history-item.active {
            background: rgba(104, 48, 227, 0.2) !important;
        }

        /* Message Bubbles - Dark Mode */
        body.dark-theme .message-ai .message-bubble,
        [data-theme="dark"] .message-ai .message-bubble {
            background: rgba(30, 28, 36, 0.95) !important;
            border-color: rgba(104, 48, 227, 0.18) !important;
            color: #e2dfeb !important;
        }

        body.dark-theme .message-user .message-bubble,
        [data-theme="dark"] .message-user .message-bubble {
            background: linear-gradient(135deg, #6830E3 0%, #8c52ff 100%) !important;
            box-shadow: 0 6px 20px rgba(104, 48, 227, 0.2) !important;
        }

        /* Selectors and Inputs - Dark Mode */
        body.dark-theme #chatbot-unit-select,
        [data-theme="dark"] #chatbot-unit-select {
            background: rgba(30, 28, 36, 0.9) !important;
            border-color: rgba(104, 48, 227, 0.25) !important;
            color: #ffffff !important;
        }

        body.dark-theme #chat-user-input,
        [data-theme="dark"] #chat-user-input {
            background: rgba(20, 18, 26, 0.9) !important;
            border-color: rgba(104, 48, 227, 0.25) !important;
            color: #ffffff !important;
        }

        body.dark-theme .chat-header-actions .btn-header-action,
        [data-theme="dark"] .chat-header-actions .btn-header-action {
            color: #b0adbc !important;
        }

        body.dark-theme .unit-selector-wrapper label,
        [data-theme="dark"] .unit-selector-wrapper label {
            color: #b0adbc !important;
        }

        body.dark-theme .typing-bubble,
        [data-theme="dark"] .typing-bubble {
            background: rgba(30, 28, 36, 0.95) !important;
            border-color: rgba(104, 48, 227, 0.18) !important;
        }
        
        body.dark-theme .typing-bubble span,
        [data-theme="dark"] .typing-bubble span {
            background: #9d7dfa !important;
        }

        /* Feature Card Icons - Dark Mode */
        body.dark-theme .feature-icon-wrapper,
        [data-theme="dark"] .feature-icon-wrapper {
            color: #9d7dfa !important; /* Glow purple in dark mode */
            background: rgba(157, 125, 250, 0.1) !important;
            box-shadow: 0 0 15px rgba(157, 125, 250, 0.05) !important;
        }

        body.dark-theme .feature-card-wrapper:hover .feature-icon-wrapper,
        [data-theme="dark"] .feature-card-wrapper:hover .feature-icon-wrapper {
            background: #9d7dfa !important;
            color: #120e1f !important;
            box-shadow: 0 8px 25px rgba(157, 125, 250, 0.3) !important;
        }
        
        /* Force chatbot sidebar to collapse to absolute zero width and hide overflow */
        #chatbot-sidebar.sidebar-closed {
            width: 0px !important;
            min-width: 0px !important;
            flex-basis: 0px !important;
            overflow: hidden !important;
            border-left: none !important;
            border-right: none !important;
            padding: 0px !important;
            margin: 0px !important;
        }

        /* Quota text and Recharge button inside chatbot header */
        .chat-quota-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 4px;
        }

        .quota-text {
            font-size: 11px !important;
            color: #8c889a !important; /* Light grey */
            font-weight: 600;
        }

        .btn-recharge {
            background: rgba(52, 0, 173, 0.05) !important;
            color: #8c889a !important; /* Light grey button text */
            border: 1px solid rgba(140, 136, 154, 0.2) !important;
            border-radius: 6px !important;
            padding: 2px 8px !important;
            font-size: 10px !important;
            font-weight: 700 !important;
            cursor: pointer !important;
            transition: all 0.3s ease !important;
        }

        .btn-recharge:hover {
            background: rgba(52, 0, 173, 0.1) !important;
            color: #3400AD !important;
            border-color: rgba(52, 0, 173, 0.2) !important;
        }

        body.dark-theme .quota-text,
        [data-theme="dark"] .quota-text {
            color: #b0adbc !important; /* Light grey in dark mode */
        }

        body.dark-theme .btn-recharge,
        [data-theme="dark"] .btn-recharge {
            background: rgba(255, 255, 255, 0.05) !important;
            color: #b0adbc !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        body.dark-theme .btn-recharge:hover,
        [data-theme="dark"] .btn-recharge:hover {
            background: rgba(157, 125, 250, 0.15) !important;
            color: #9d7dfa !important;
            border-color: rgba(157, 125, 250, 0.3) !important;
        }

        /* Attempts Badge and Recharge Button - Dark Mode Contrast Improvements */
        body.dark-theme .attempts-glass-badge,
        [data-theme="dark"] .attempts-glass-badge {
            background: rgba(157, 125, 250, 0.1) !important;
            border-color: rgba(157, 125, 250, 0.25) !important;
            color: #9d7dfa !important; /* Light purple in dark mode */
        }

        body.dark-theme .attempts-glass-badge .material-symbols-outlined,
        [data-theme="dark"] .attempts-glass-badge .material-symbols-outlined {
            color: #9d7dfa !important;
        }

        body.dark-theme .attempts-glass-badge .attempts-count,
        [data-theme="dark"] .attempts-glass-badge .attempts-count {
            background: #9d7dfa !important;
            color: #120e1f !important;
        }

        /* Recharge button inside attempts badge */
        .btn-recharge-attempts {
            background: rgba(52, 0, 173, 0.06) !important;
            color: #3400AD !important;
            border: 1px solid rgba(52, 0, 173, 0.15) !important;
            border-radius: 8px !important;
            padding: 3px 12px !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            cursor: pointer !important;
            margin-right: 12px !important;
            transition: all 0.3s ease !important;
            font-family: 'IBM Plex Sans Arabic', sans-serif !important;
        }

        .btn-recharge-attempts:hover {
            background: #3400AD !important;
            color: #ffffff !important;
        }

        body.dark-theme .btn-recharge-attempts,
        [data-theme="dark"] .btn-recharge-attempts {
            background: rgba(157, 125, 250, 0.15) !important;
            color: #9d7dfa !important;
            border-color: rgba(157, 125, 250, 0.3) !important;
        }

        body.dark-theme .btn-recharge-attempts:hover,
        [data-theme="dark"] .btn-recharge-attempts:hover {
            background: #9d7dfa !important;
            color: #120e1f !important;
        }
        
        /* Spacing correction for Courses View after deleting academy intro */
        #courses-view .courses-section {
            padding-top: 120px !important; /* Give it space to sit beautifully below the fixed header */
        }
        
        @media (max-width: 768px) {
            #courses-view .courses-section {
                padding-top: 100px !important;
            }
        }
        
        /* Dark Mode adjustments for SCIENCO floating trigger and brand logo icon wrapper */
        body.dark-theme #scienco-chatbot-trigger,
        [data-theme="dark"] #scienco-chatbot-trigger {
            background: linear-gradient(135deg, #6830E3 0%, #8c52ff 100%) !important;
            border-color: rgba(255, 255, 255, 0.18) !important;
            box-shadow: 
                0 10px 30px rgba(104, 48, 227, 0.45) !important,
                inset 0 1px 0 rgba(255, 255, 255, 0.3) !important,
                0 0 0 6px rgba(104, 48, 227, 0.15) !important;
        }

        body.dark-theme #scienco-chatbot-trigger .pulse-ring,
        [data-theme="dark"] #scienco-chatbot-trigger .pulse-ring {
            border-color: rgba(157, 125, 250, 0.6) !important;
        }

        body.dark-theme .brand-logo-wrapper,
        [data-theme="dark"] .brand-logo-wrapper {
            background: linear-gradient(135deg, #6830E3 0%, #8c52ff 100%) !important;
            box-shadow: 0 4px 15px rgba(104, 48, 227, 0.3) !important;
        }
        
        /* =================================================================
           MY ACCOUNT VIEW PREMIUM STYLES
           ================================================================= */
        .account-container {
            width: 100%;
            max-width: 1250px;
            margin: 0 auto;
            padding: 0 20px;
            z-index: 10;
            position: relative;
            direction: rtl;
        }

        /* 1. Profile Main Card */
        .profile-main-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 24px;
            padding: 40px !important;
        }

        .profile-avatar-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .profile-avatar-gradient {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3400AD 0%, #6830E3 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 32px;
            font-weight: 800;
            box-shadow: 0 10px 30px rgba(52, 0, 173, 0.25);
            border: 3px solid rgba(255, 255, 255, 0.8);
        }

        .premium-badge-gold {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #ffffff;
            font-size: 10px;
            font-weight: 800;
            padding: 4px 12px;
            border-radius: 20px;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
            white-space: nowrap;
        }

        .profile-user-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .profile-name {
            font-family: 'Cairo', sans-serif;
            font-size: 26px;
            font-weight: 800;
            color: var(--text-main, #1c1b20);
            margin: 0;
        }

        .profile-meta-desc {
            font-size: 14px;
            color: var(--text-muted, #484556);
            margin: 0;
            font-weight: 500;
        }

        .profile-subscription-pill {
            background: rgba(52, 0, 173, 0.05);
            border: 1px solid rgba(52, 0, 173, 0.15);
            border-radius: 12px;
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 700;
            color: #3400AD;
            display: flex;
            align-items: center;
            gap: 8px;
            width: fit-content;
            margin-top: 6px;
        }

        .profile-actions-wrapper {
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 220px;
        }

        /* 2. Metrics Grid */
        .account-grid-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .metric-card {
            padding: 30px !important;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .metric-header {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .metric-header h4 {
            font-family: 'Cairo', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-main, #1c1b20);
            margin: 0;
        }

        .metric-icon-purple { color: #3400AD; font-size: 22px; }
        .metric-icon-green { color: #1ED6AB; font-size: 22px; }
        .metric-icon-blue { color: #00b4d8; font-size: 22px; }

        .metric-value-wrapper {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .metric-number {
            font-family: 'Alexandria', sans-serif;
            font-size: 28px;
            font-weight: 800;
            color: #3400AD;
        }

        .metric-subtext {
            font-size: 14px;
            color: var(--text-muted, #484556);
            font-weight: 600;
        }

        .metric-trend-up {
            font-size: 11px;
            color: #1ED6AB;
            font-weight: 700;
        }

        .progress-bar-container {
            width: 100%;
            height: 8px;
            background: rgba(52, 0, 173, 0.05);
            border-radius: 10px;
            overflow: hidden;
        }

        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #3400AD 0%, #6830E3 100%);
            border-radius: 10px;
        }

        .progress-bar-fill-green {
            height: 100%;
            background: linear-gradient(90deg, #1ED6AB 0%, #157347 100%);
            border-radius: 10px;
        }

        .progress-bar-fill-blue {
            height: 100%;
            background: linear-gradient(90deg, #00b4d8 0%, #0077b6 100%);
            border-radius: 10px;
        }

        /* 3. Section Grid Panels */
        .account-sections-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
        }

        .panel-section-title {
            font-family: 'Cairo', sans-serif;
            font-size: 16px;
            font-weight: 800;
            color: var(--text-main, #1c1b20);
            margin-bottom: 20px;
            border-bottom: 1px solid rgba(52, 0, 173, 0.06);
            padding-bottom: 12px;
        }

        .enrolled-courses-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .course-prog-item {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .course-prog-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .course-prog-name {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-main, #1c1b20);
        }

        .course-prog-percent {
            font-family: 'Alexandria', sans-serif;
            font-size: 12px;
            font-weight: 800;
            color: #3400AD;
        }

        .progress-bar-container-mini {
            width: 100%;
            height: 6px;
            background: rgba(52, 0, 173, 0.05);
            border-radius: 10px;
            overflow: hidden;
        }

        /* Billing panel history */
        .billing-history {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .billing-item {
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(52, 0, 173, 0.04);
            border-radius: 16px;
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.3s ease;
        }

        .billing-item:hover {
            border-color: rgba(52, 0, 173, 0.15);
            transform: translateY(-1px);
        }

        .billing-meta {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .billing-id {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-main, #1c1b20);
        }

        .billing-date {
            font-size: 11px;
            color: var(--text-muted, #484556);
        }

        .billing-status-badge {
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 8px;
        }

        .billing-status-badge.success {
            background: rgba(30, 214, 171, 0.08);
            color: #1ED6AB;
        }

        .billing-amount {
            font-size: 12px;
            font-weight: 700;
            color: #3400AD;
        }

        /* 4. Form grid */
        .settings-inputs-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        /* Dark Mode Specific Overrides */
        body.dark-theme .profile-subscription-pill,
        [data-theme="dark"] .profile-subscription-pill {
            background: rgba(157, 125, 250, 0.1) !important;
            border-color: rgba(157, 125, 250, 0.2) !important;
            color: #9d7dfa !important;
        }

        body.dark-theme .metric-number,
        [data-theme="dark"] .metric-number {
            color: #9d7dfa !important;
        }

        body.dark-theme .course-prog-percent,
        [data-theme="dark"] .course-prog-percent {
            color: #9d7dfa !important;
        }

        body.dark-theme .billing-amount,
        [data-theme="dark"] .billing-amount {
            color: #9d7dfa !important;
        }

        body.dark-theme .billing-item,
        [data-theme="dark"] .billing-item {
            background: rgba(255, 255, 255, 0.02) !important;
            border-color: rgba(157, 125, 250, 0.1) !important;
        }

        body.dark-theme .billing-item:hover,
        [data-theme="dark"] .billing-item:hover {
            border-color: rgba(157, 125, 250, 0.3) !important;
        }

        /* Media Queries for Responsiveness */
        @media (max-width: 1024px) {
            .account-grid-row {
                grid-template-columns: 1fr 1fr;
            }
            .account-sections-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .profile-main-card {
                flex-direction: column;
                text-align: center;
                align-items: center;
            }
            .profile-user-info {
                align-items: center;
            }
            .profile-actions-wrapper {
                width: 100%;
            }
            .account-grid-row {
                grid-template-columns: 1fr;
            }
            .settings-inputs-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Profile avatar container styling */
        .profile-image-container {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(52, 0, 173, 0.05) 0%, rgba(104, 48, 227, 0.15) 100%);
            border: 1px solid rgba(52, 0, 173, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(52, 0, 173, 0.05);
        }
        
        .profile-avatar-icon {
            font-size: 70px !important;
            color: #3400AD !important;
        }

        body.dark-theme .profile-image-container,
        [data-theme="dark"] .profile-image-container {
            background: rgba(157, 125, 250, 0.1) !important;
            border-color: rgba(157, 125, 250, 0.25) !important;
        }

        body.dark-theme .profile-avatar-icon,
        [data-theme="dark"] .profile-avatar-icon {
            color: #9d7dfa !important;
        }

        /* Inputs adjustments in dark mode */
        body.dark-theme .form-select,
        [data-theme="dark"] .form-select {
            background: rgba(20, 18, 26, 0.8) !important;
            border-color: rgba(104, 48, 227, 0.25) !important;
            color: #ffffff !important;
        }

        body.dark-theme .form-select[disabled],
        [data-theme="dark"] .form-select[disabled] {
            background: rgba(255, 255, 255, 0.02) !important;
            color: #8c889a !important;
        }
        
        /* Star rating colors */
        .star-icon {
            font-size: 28px !important;
            transition: transform 0.2s ease;
        }
        .star-icon:hover {
            transform: scale(1.15);
        }
        
        /* Premium luxury glass panels and badges */
        .premium-glass {
            background: rgba(255, 255, 255, 0.45) !important;
            backdrop-filter: blur(25px) saturate(190%) !important;
            -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
            border: 1px solid rgba(255, 255, 255, 0.6) !important;
            border-radius: 32px !important;
            box-shadow: 
                0 20px 50px rgba(52, 0, 173, 0.05) !important,
                inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
            transition: all 0.3s ease !important;
        }

        body.dark-theme .premium-glass,
        [data-theme="dark"] .premium-glass {
            background: rgba(20, 18, 26, 0.55) !important;
            backdrop-filter: blur(25px) saturate(190%) !important;
            -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
            border: 1px solid rgba(104, 48, 227, 0.15) !important;
            box-shadow: 
                0 25px 60px rgba(0, 0, 0, 0.35) !important,
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        }

        /* Diamond Membership badge styling (الاشتراك السنوي) */
        .premium-badge-diamond {
            background: linear-gradient(135deg, #00b4d8 0%, #0077b6 50%, #6830E3 100%) !important;
            color: #ffffff !important;
            font-size: 11px;
            font-weight: 800;
            padding: 5px 14px;
            border-radius: 20px;
            letter-spacing: 0.5px;
            box-shadow: 
                0 6px 15px rgba(0, 180, 216, 0.25) !important,
                inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            white-space: nowrap;
        }

        /* Gold Membership badge (العروض الأخرى) */
        .premium-badge-gold-only {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
            color: #ffffff !important;
            font-size: 11px;
            font-weight: 800;
            padding: 5px 14px;
            border-radius: 20px;
            white-space: nowrap;
            box-shadow: 0 6px 15px rgba(217, 119, 6, 0.25) !important;
        }

        /* Silver Membership badge (حالة عدم الاشتراك) */
        .premium-badge-silver {
            background: linear-gradient(135deg, #adb5bd 0%, #6c757d 100%) !important;
            color: #ffffff !important;
            font-size: 11px;
            font-weight: 800;
            padding: 5px 14px;
            border-radius: 20px;
            white-space: nowrap;
            box-shadow: 0 6px 15px rgba(108, 117, 125, 0.2) !important;
        }
        
        /* Account card fade-in entrance animations */
        .account-container > div {
            opacity: 0;
            transform: translateY(20px) scale(0.98);
            animation: accountCardEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        .account-container > div:nth-child(1) { animation-delay: 0.1s; }
        .account-container > div:nth-child(2) { animation-delay: 0.25s; }
        
        @keyframes accountCardEntrance {
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Glassy Watery Star Bead buttons */
        .glass-star-bead {
            width: 44px;
            height: 44px;
            border-radius: 50% !important;
            background: rgba(255, 255, 255, 0.3) !important;
            backdrop-filter: blur(12px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.6) !important;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 
                0 6px 20px rgba(0, 180, 216, 0.08) !important,
                inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
            cursor: pointer;
            color: rgba(52, 0, 173, 0.2) !important;
        }

        .glass-star-bead:hover {
            transform: scale(1.1) translateY(-2px);
            background: rgba(255, 255, 255, 0.5) !important;
            box-shadow: 0 10px 25px rgba(0, 180, 216, 0.15) !important;
        }

        .glass-star-bead.active {
            background: rgba(0, 180, 216, 0.12) !important;
            border-color: rgba(0, 180, 216, 0.4) !important;
            color: #00b4d8 !important; /* Watery cyan blue */
            box-shadow: 
                0 8px 24px rgba(0, 180, 216, 0.2) !important,
                inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        }

        body.dark-theme .glass-star-bead,
        [data-theme="dark"] .glass-star-bead {
            background: rgba(255, 255, 255, 0.03) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
            color: rgba(255, 255, 255, 0.15) !important;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
        }

        body.dark-theme .glass-star-bead.active,
        [data-theme="dark"] .glass-star-bead.active {
            background: rgba(0, 180, 216, 0.15) !important;
            border-color: rgba(0, 180, 216, 0.5) !important;
            color: #00b4d8 !important;
            box-shadow: 0 8px 25px rgba(0, 180, 216, 0.3) !important;
        }

        .glass-star-bead .star-icon {
            font-size: 22px !important;
        }

        /* Editing active style for toggle edit button */
        .editing-active {
            background: #FF1717 !important;
            color: #ffffff !important;
            border-color: #FF1717 !important;
        }
        
        /* World-Class Security Wizard Styles */
        .wizard-steps-indicator {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30px;
            background: rgba(52, 0, 173, 0.03);
            padding: 15px 25px;
            border-radius: 20px;
            border: 1px solid rgba(52, 0, 173, 0.05);
            direction: rtl;
        }

        .step-indicator-item {
            display: flex;
            align-items: center;
            gap: 8px;
            opacity: 0.5;
            transition: all 0.3s ease;
        }

        .step-indicator-item.active {
            opacity: 1;
        }

        .step-indicator-item.active .step-num {
            background: #3400AD;
            color: #ffffff;
            box-shadow: 0 0 12px rgba(52, 0, 173, 0.4);
        }

        .step-indicator-item.completed .step-num {
            background: #1ED6AB;
            color: #ffffff;
        }

        .step-num {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: rgba(140, 136, 154, 0.2);
            color: #484556;
            font-family: 'Alexandria', sans-serif;
            font-size: 11px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .step-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-main);
        }

        .step-line {
            flex: 1;
            height: 2px;
            background: rgba(140, 136, 154, 0.15);
            margin: 0 15px;
            transition: all 0.3s ease;
        }

        .step-line.active {
            background: #3400AD;
        }

        .step-line.completed {
            background: #1ED6AB;
        }

        /* Wizard Views wrapper */
        .wizard-views-wrapper {
            position: relative;
            min-height: 200px;
        }

        .wizard-step-view {
            display: none;
            width: 100%;
        }

        .wizard-step-view.active {
            display: block;
            animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .wizard-instruction {
            font-size: 13px;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 18px;
            font-weight: 600;
        }

        .security-summary-card {
            background: rgba(255, 255, 255, 0.4) !important;
            border: 1px solid rgba(52, 0, 173, 0.06) !important;
            border-radius: 20px !important;
            padding: 20px !important;
        }

        body.dark-theme .security-summary-card,
        [data-theme="dark"] .security-summary-card {
            background: rgba(255, 255, 255, 0.02) !important;
            border-color: rgba(104, 48, 227, 0.1) !important;
        }

        .summary-item {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .summary-item .material-symbols-outlined {
            color: #3400AD;
            font-size: 20px;
        }
        
        body.dark-theme .summary-item .material-symbols-outlined,
        [data-theme="dark"] .summary-item .material-symbols-outlined {
            color: #9d7dfa;
        }

        /* --- Slider nav arrows: show on mobile --- */
        .slider-wrapper {
            position: relative !important;
            display: block !important;
        }
        .slider-container {
            width: 100% !important;
        }
        .slider-nav-btn {
            display: flex !important;
            position: absolute !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            z-index: 10 !important;
            flex-shrink: 0 !important;
            width: 38px !important;
            height: 38px !important;
            justify-content: center !important;
            align-items: center !important;
            background: rgba(255, 255, 255, 0.95) !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
            border: 1px solid rgba(52, 0, 173, 0.15) !important;
            color: #3400AD !important;
            border-radius: 50% !important;
            cursor: pointer !important;
        }
        .prev-btn {
            right: 5px !important;
            left: auto !important;
        }
        .next-btn {
            left: 5px !important;
            right: auto !important;
        }
        .slider-nav-btn span {
            font-size: 20px !important;
        }

        .summary-label {
            font-size: 11px;
            color: var(--text-muted);
            font-weight: 600;
        }

        .summary-val {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--text-main);
            margin-top: 2px;
        }

        .wizard-actions-row {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 25px;
        }

        /* Responsive Mobile Fullscreen chatbot Fixes */
        #scienco-chatbot-container.fullscreen-mode {
            width: 100vw !important;
            height: 100vh !important;
            bottom: 0px !important;
            left: 0px !important;
            right: 0px !important;
            top: 0px !important;
            border-radius: 0px !important;
            position: fixed !important;
            z-index: 100000 !important;
        }

        @media (max-width: 480px) {
            #scienco-chatbot-container.fullscreen-mode {
                padding: 0px !important;
            }
            .chat-main-panel {
                height: 100% !important;
            }
        }
        
        /* Premium Glassmorphic Buttons for Account Page */
        .glass-btn-lux {
            background: rgba(255, 255, 255, 0.18) !important;
            backdrop-filter: blur(12px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
            border: 1px solid rgba(52, 0, 173, 0.15) !important;
            border-radius: 14px !important;
            padding: 12px 24px !important;
            font-family: 'Alexandria', sans-serif !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            color: #3400AD !important;
            cursor: pointer !important;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
            box-shadow: 
                0 4px 15px rgba(52, 0, 173, 0.03) !important,
                inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-decoration: none;
        }

        /* Hover animations and transitions for glass buttons */
        .glass-btn-lux:hover {
            transform: translateY(-3px) scale(1.02) !important;
            background: rgba(52, 0, 173, 0.08) !important;
            border-color: rgba(52, 0, 173, 0.35) !important;
            box-shadow: 
                0 12px 28px rgba(52, 0, 173, 0.12) !important,
                0 0 0 4px rgba(52, 0, 173, 0.08) !important;
            color: #4400d9 !important;
        }

        .glass-btn-lux:active {
            transform: translateY(-1px) scale(0.99) !important;
        }

        /* Cancel/editing-active glass button style overrides */
        .glass-btn-lux.editing-active {
            background: rgba(255, 23, 23, 0.06) !important;
            border-color: rgba(255, 23, 23, 0.3) !important;
            color: #FF1717 !important;
        }
        
        .glass-btn-lux.editing-active:hover {
            background: rgba(255, 23, 23, 0.12) !important;
            border-color: rgba(255, 23, 23, 0.45) !important;
            box-shadow: 
                0 12px 28px rgba(255, 23, 23, 0.12) !important,
                0 0 0 4px rgba(255, 23, 23, 0.08) !important;
        }

        /* Dark Mode support for glass buttons */
        body.dark-theme .glass-btn-lux,
        [data-theme="dark"] .glass-btn-lux {
            background: rgba(255, 255, 255, 0.03) !important;
            border-color: rgba(104, 48, 227, 0.25) !important;
            color: #9d7dfa !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        }

        body.dark-theme .glass-btn-lux:hover,
        [data-theme="dark"] .glass-btn-lux:hover {
            background: rgba(104, 48, 227, 0.12) !important;
            border-color: rgba(104, 48, 227, 0.4) !important;
            box-shadow: 
                0 12px 28px rgba(104, 48, 227, 0.2) !important,
                0 0 0 4px rgba(104, 48, 227, 0.1) !important;
        }

        /* Watery Purple Gradient Star styling */
        .glass-star-bead {
            border: 1px solid rgba(104, 48, 227, 0.2) !important;
            background: rgba(255, 255, 255, 0.2) !important;
        }
        
        .glass-star-bead.active {
            background: rgba(104, 48, 227, 0.08) !important;
            border-color: rgba(157, 125, 250, 0.5) !important;
            box-shadow: 
                0 8px 24px rgba(104, 48, 227, 0.15) !important,
                inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        }

        .glass-star-bead.active .star-icon {
            background: linear-gradient(135deg, #00b4d8 0%, #3400AD 50%, #6830E3 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            display: inline-block;
            filter: drop-shadow(0 2px 8px rgba(104, 48, 227, 0.3)) !important;
        }

        body.dark-theme .glass-star-bead.active .star-icon,
        [data-theme="dark"] .glass-star-bead.active .star-icon {
            background: linear-gradient(135deg, #00b4d8 0%, #9d7dfa 50%, #8c52ff 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            filter: drop-shadow(0 2px 8px rgba(157, 125, 250, 0.4)) !important;
        }
        
        /* =================================================================
           VISUAL POLISH FOR SCIENCO ANSWERS & MESSAGES
           ================================================================= */
        
        /* Message entry animations */
        .message {
            animation: messageAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            opacity: 0;
            transform: translateY(12px);
        }
        
        @keyframes messageAppear {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* AI Message Bubble - Premium Glass Panel */
        .message-ai .message-bubble {
            background: rgba(255, 255, 255, 0.85) !important;
            border: 1px solid rgba(52, 0, 173, 0.08) !important;
            border-right: 4px solid #3400AD !important; /* Premium brand side border */
            border-radius: 20px !important;
            border-top-right-radius: 4px !important;
            padding: 16px 20px !important;
            font-size: 13px !important;
            line-height: 1.8 !important;
            color: #1c1b20 !important;
            box-shadow: 0 8px 24px rgba(52, 0, 173, 0.03) !important;
            text-align: justify;
        }

        body.dark-theme .message-ai .message-bubble,
        [data-theme="dark"] .message-ai .message-bubble {
            background: rgba(28, 26, 36, 0.95) !important;
            border-color: rgba(104, 48, 227, 0.15) !important;
            border-right-color: #9d7dfa !important;
            color: #e2dfeb !important;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
        }

        /* User Message Bubble - Smooth Deep Gradient */
        .message-user .message-bubble {
            background: linear-gradient(135deg, #3400AD 0%, #5200c6 100%) !important;
            border-radius: 20px !important;
            border-top-left-radius: 4px !important;
            padding: 14px 18px !important;
            font-size: 13px !important;
            line-height: 1.7 !important;
            box-shadow: 0 8px 25px rgba(52, 0, 173, 0.15) !important;
        }

        body.dark-theme .message-user .message-bubble,
        [data-theme="dark"] .message-user .message-bubble {
            background: linear-gradient(135deg, #6830E3 0%, #8c52ff 100%) !important;
            box-shadow: 0 8px 25px rgba(104, 48, 227, 0.25) !important;
        }

        /* Bold terms inside SCIENCO answers */
        .message-ai .message-bubble strong {
            color: #3400AD !important;
            font-weight: 700 !important;
            background: rgba(52, 0, 173, 0.05) !important;
            padding: 2px 6px !important;
            border-radius: 6px !important;
            display: inline-block;
        }

        body.dark-theme .message-ai .message-bubble strong,
        [data-theme="dark"] .message-ai .message-bubble strong {
            color: #9d7dfa !important;
            background: rgba(157, 125, 250, 0.1) !important;
        }

        /* Formatting lists inside answers (if any) */
        .message-ai .message-bubble ul, 
        .message-ai .message-bubble ol {
            margin-top: 10px;
            margin-bottom: 10px;
            padding-right: 20px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .message-ai .message-bubble li {
            list-style-type: decimal;
            font-size: 12.5px;
            color: var(--text-muted, #484556);
        }
        
        body.dark-theme .message-ai .message-bubble li,
        [data-theme="dark"] .message-ai .message-bubble li {
            color: #b0adbc !important;
        }

/* Native Mobile Slider Optimization */
@media (max-width: 768px) {
  .slider-container { overflow: hidden; /* Removed native scroll */ /* Removed scroll-snap */ scroll-behavior: smooth; padding-bottom: 20px; }
  .slider-container::-webkit-scrollbar { display: none; }
  .slider-track { cursor: default; }
  .testimonial-card { /* Removed scroll-snap-align */ }
  .slider-nav-btn { display: none !important; }
  .non-graded-track { /* Removed will-change: transform to prevent iOS crash */ }
  .reveal-parent > * { will-change: opacity, transform; }
}

/* Feature Cards Mobile Horizontal Rebuild */
@media (max-width: 768px) {
    .features-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        padding-bottom: 20px !important;
        align-items: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 20px !important;
    }
    .features-grid::-webkit-scrollbar { 
        display: none !important; 
    }
    .feature-card-wrapper {
        width: 270px !important;
        min-width: 270px !important;
        height: 380px !important;
        min-height: 380px !important;
        max-height: 380px !important;
        scroll-snap-align: center !important;
        flex-shrink: 0 !important;
        margin: 0 auto !important;
    }
    .feature-card-inner.is-flipped {
        transform: rotateY(180deg) !important;
    }
}


/* Progressive section loader removed - was causing blank page */

/* =====================================================================
   CHATBOT TABLE - Horizontal scroll support
   ===================================================================== */
.chat-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin: 8px 0;
}

/* =====================================================================
   MOBILE OVERRIDES
   ===================================================================== */
@media (max-width: 768px) {

    /* --- Chatbot input bar: shrink visually without triggering iOS zoom --- */
    .chat-input-bar {
        padding: 8px 12px !important;
        gap: 6px !important;
    }

    /* Force small font on mobile chat input - no transform (causes layout issues) */
    #chat-user-input {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }

    .chat-input-bar button {
        padding: 6px 10px !important;
    }

    /* --- Slider nav arrows: show on mobile --- */
    .slider-wrapper {
        position: relative !important;
        display: block !important;
    }
    .slider-container {
        width: 100% !important;
    }
    .slider-nav-btn {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        flex-shrink: 0 !important;
        width: 38px !important;
        height: 38px !important;
        justify-content: center !important;
        align-items: center !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        border: 1px solid rgba(52, 0, 173, 0.15) !important;
        color: #3400AD !important;
        border-radius: 50% !important;
        cursor: pointer !important;
    }
    .prev-btn {
        right: 5px !important;
        left: auto !important;
    }
    .next-btn {
        left: 5px !important;
        right: auto !important;
    }
    .slider-nav-btn span {
        font-size: 20px !important;
    }
}

/* =====================================================================
   SLIDER FLASH FIX - Prevent repaint flash during card loading
   ===================================================================== */
#sliderContainer {
    overflow: hidden !important;
}
#sliderTrack {
    /* Removed will-change: transform to prevent iOS crash */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@media (max-width: 768px) {
    .slider-nav-btn {
        display: flex !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border: 1px solid rgba(52, 0, 173, 0.1);
    }
    .prev-btn { right: 10px; }
    .next-btn { left: 10px; }
}

/* Isolate and optimize mobile testimonial swapper layout */
@media (max-width: 768px) {
    .slider-wrapper {
        overflow: hidden !important;
        position: relative !important;
        width: 100% !important;
        padding: 10px 0 !important;
    }

    .slider-container {
        overflow: visible !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    #sliderTrack {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0px !important; /* Remove gap to control spacing strictly by translates */
        transform: none !important;
        transition: none !important;
        width: 100% !important;
        overflow: visible !important;
        position: relative !important;
        height: 460px !important;
    }
    
    .testimonial-card {
        position: absolute !important;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease !important;
        will-change: transform, opacity;
        margin: 0 !important;
        width: 280px !important;
        height: 450px !important;
    }

    /* Position the 3 cards in absolute coordinates so they overlap beautifully */
    /* Center Card */
    .testimonial-card.mobile-center {
        position: relative !important;
        z-index: 5 !important;
        opacity: 1 !important;
        transform: scale(1.0) translateX(0) !important;
        filter: blur(0px) !important;
        background: #ffffff !important; /* Remove transparency */
        box-shadow: 0 20px 40px rgba(52, 0, 173, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
        pointer-events: auto !important;
    }

    /* Left Card */
    .testimonial-card.mobile-left {
        z-index: 2 !important;
        opacity: 0.32 !important;
        transform: scale(0.82) translateX(140px) !important; /* Move inward to overlap the center card edges */
        filter: blur(1.5px) !important;
        pointer-events: none !important;
    }

    /* Right Card */
    .testimonial-card.mobile-right {
        z-index: 2 !important;
        opacity: 0.32 !important;
        transform: scale(0.82) translateX(-140px) !important; /* Move inward to overlap the center card edges */
        filter: blur(1.5px) !important;
        pointer-events: none !important;
    }
    
    /* Make sure text elements fade-in smoothly when updated by JS */
    .testimonial-card .student-review,
    .testimonial-card .student-name,
    .testimonial-card .student-grade {
        transition: opacity 0.18s ease-in-out !important;
    }

    /* Swap arrow icons textually (ligature change) on mobile */
    .prev-btn span {
        content: "chevron_right" !important;
        transform: none !important;
    }
    .next-btn span {
        content: "chevron_left" !important;
        transform: none !important;
    }

    /* Dark Mode override for mobile active card */
    body.dark-theme .testimonial-card.mobile-center {
        background: #120e25 !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(140, 82, 255, 0.25) !important;
    }
}