```html
<!DOCTYPE html>
<html lang="ar" dir="rtl" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>منصة خطوة | Khotwa Platform</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        brand: {
                            50: '#f0fdf4',
                            100: '#dcfce7',
                            500: '#22c55e',
                            600: '#16a34a',
                            700: '#15803d',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts Cairo & Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Cairo', 'Inter', sans-serif;
        }
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.05);
        }
        ::-webkit-scrollbar-thumb {
            background: #22c55e;
            border-radius: 4px;
        }
        .animate-pop {
            animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
        }
        @keyframes pop {
            0% { transform: scale(0.95); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
    </style>
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-100 min-h-screen flex flex-col transition-colors duration-300">

    <!-- Top Navigation Bar -->
    <header class="sticky top-0 z-50 backdrop-blur-md bg-white/80 dark:bg-slate-900/80 border-b border-slate-200 dark:border-slate-800 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
            <!-- Brand Logo -->
            <div class="flex items-center space-x-3 space-x-reverse">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-brand-600 to-emerald-400 flex items-center justify-center text-white shadow-lg shadow-brand-500/30">
                    <i class="fa-solid fa-shoe-prints transform -rotate-45 text-xl"></i>
                </div>
                <div>
                    <h1 class="text-xl font-black bg-gradient-to-r from-brand-600 to-emerald-500 bg-clip-text text-transparent">منصة خطوة</h1>
                    <p class="text-xs text-slate-500 dark:text-slate-400 font-medium">طريقك نحو التميز والإنجاز</p>
                </div>
            </div>

            <!-- User Quick Stats & Actions -->
            <div class="flex items-center space-x-3 space-x-reverse">
                <!-- Total Points Badge -->
                <div class="flex items-center space-x-1.5 space-x-reverse bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800/60 px-3 py-1.5 rounded-full shadow-inner">
                    <i class="fa-solid fa-coins text-amber-500 animate-bounce"></i>
                    <span id="headerPoints" class="font-bold text-amber-700 dark:text-amber-400 text-sm">0</span>
                    <span class="text-xs text-amber-600/70 dark:text-amber-400/70">نقطة</span>
                </div>

                <!-- Theme Toggle Button -->
                <button id="themeToggle" onclick="toggleTheme()" class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-300 transition-all focus:outline-none" aria-label="تبديل الوضع">
                    <i id="themeIcon" class="fa-solid fa-moon text-lg"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- Main Container Layout -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex-1 w-full grid grid-cols-1 lg:grid-cols-4 gap-6">

        <!-- Sidebar Navigation -->
        <aside class="lg:col-span-1">
            <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-4 shadow-sm sticky top-24 space-y-2">
                <button onclick="switchTab('dashboard')" id="nav-dashboard" class="nav-btn w-full flex items-center space-x-3 space-x-reverse px-4 py-3 rounded-xl font-semibold transition-all bg-brand-500 text-white shadow-md shadow-brand-500/20">
                    <i class="fa-solid fa-house-chimney w-6 text-center"></i>
                    <span>الرئيسية وملخص اليوم</span>
                </button>
                <button onclick="switchTab('tasks')" id="nav-tasks" class="nav-btn w-full flex items-center space-x-3 space-x-reverse px-4 py-3 rounded-xl font-semibold transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800">
                    <i class="fa-solid fa-list-check w-6 text-center"></i>
                    <span>المهام اليومية والفروع</span>
                </button>
                <button onclick="switchTab('prayers')" id="nav-prayers" class="nav-btn w-full flex items-center space-x-3 space-x-reverse px-4 py-3 rounded-xl font-semibold transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800">
                    <i class="fa-solid fa-mosque w-6 text-center"></i>
                    <span>تتبع الصلوات الخمس</span>
                </button>
                <button onclick="switchTab('challenges')" id="nav-challenges" class="nav-btn w-full flex items-center space-x-3 space-x-reverse px-4 py-3 rounded-xl font-semibold transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800">
                    <i class="fa-solid fa-trophy w-6 text-center"></i>
                    <span>التحديات الأسبوعية</span>
                </button>
                <button onclick="switchTab('leaderboard')" id="nav-leaderboard" class="nav-btn w-full flex items-center space-x-3 space-x-reverse px-4 py-3 rounded-xl font-semibold transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800">
                    <i class="fa-solid fa-ranking-star w-6 text-center"></i>
                    <span>لوحة المتصدرين (التوب 20)</span>
                </button>

                <div class="pt-4 mt-4 border-t border-slate-100 dark:border-slate-800">
                    <div class="bg-gradient-to-br from-brand-600 to-emerald-700 rounded-xl p-4 text-white text-center">
                        <i class="fa-solid fa-quote-right text-2xl text-emerald-300 mb-1"></i>
                        <p class="text-xs font-medium leading-relaxed">"قليل دائم خير من كثير منقطع.. خطوة صغيرة اليوم تصنع إنجازاً عظيماً غداً."</p>
                    </div>
                </div>
            </div>
        </aside>

        <!-- Main Content Dynamic Panels -->
        <main class="lg:col-span-3 space-y-6">

            <!-- TAB 1: Dashboard / Summary -->
            <section id="tab-dashboard" class="tab-content space-y-6">
                <!-- Welcome Banner -->
                <div class="bg-gradient-to-r from-brand-600 via-emerald-600 to-teal-700 rounded-3xl p-6 sm:p-8 text-white shadow-xl relative overflow-hidden">
                    <div class="absolute -left-6 -bottom-6 w-48 h-48 bg-white/10 rounded-full blur-2xl pointer-events-none"></div>
                    <div class="relative z-10">
                        <span class="bg-white/20 text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wider backdrop-blur-sm">مرحباً بك يا مبدع</span>
                        <h2 class="text-2xl sm:text-3xl font-black mt-3">استمر في خطاك نحو القمة! 🚀</h2>
                        <p class="text-emerald-100 text-sm mt-2 max-w-xl">تابع مهامك اليومية، صلواتك، والتحديات الأسبوعية لتكسب النقاط وتصعد في قائمة التوب 20.</p>
                        
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 mt-6 pt-6 border-t border-white/15">
                            <div>
                                <p class="text-xs text-emerald-200">النقاط الإجمالية</p>
                                <p id="dashPoints" class="text-2xl font-black mt-1">0</p>
                            </div>
                            <div>
                                <p class="text-xs text-emerald-200">مهام اليوم المنجزة</p>
                                <p id="dashTasksCount" class="text-2xl font-black mt-1">0 / 0</p>
                            </div>
                            <div class="col-span-2 sm:col-span-1">
                                <p class="text-xs text-emerald-200">صلوات اليوم المسجلة</p>
                                <p id="dashPrayersCount" class="text-2xl font-black mt-1">0 / 5</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Overview Cards -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-6 shadow-sm flex flex-col justify-between">
                        <div>
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="font-bold text-lg flex items-center space-x-2 space-x-reverse">
                                    <i class="fa-solid fa-bolt text-brand-500"></i>
                                    <span>مهام اليوم السريعة</span>
                                </h3>
                                <button onclick="switchTab('tasks')" class="text-xs font-semibold text-brand-600 dark:text-brand-400 hover:underline">عرض الكل</button>
                            </div>
                            <div id="dashTasksPreview" class="space-y-3">
                                <!-- Populated via JS -->
                            </div>
                        </div>
                    </div>

                    <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-6 shadow-sm flex flex-col justify-between">
                        <div>
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="font-bold text-lg flex items-center space-x-2 space-x-reverse">
                                    <i class="fa-solid fa-mosque text-brand-500"></i>
                                    <span>حالة الصلوات الخمس اليوم</span>
                                </h3>
                                <button onclick="switchTab('prayers')" class="text-xs font-semibold text-brand-600 dark:text-brand-400 hover:underline">التسجيل</button>
                            </div>
                            <div id="dashPrayersPreview" class="grid grid-cols-5 gap-2 text-center">
                                <!-- Populated via JS -->
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- TAB 2: Tasks & Branches System -->
            <section id="tab-tasks" class="tab-content hidden space-y-6">
                <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-6 shadow-sm">
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-6 border-b border-slate-100 dark:border-slate-800">
                        <div>
                            <h2 class="text-xl font-black">نظام المهام اليومية وتقسيم الفروع</h2>
                            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">اختر الفرع ونفذ المهام لكسب النقاط اليومية</p>
                        </div>
                        <!-- Branch Tabs Filter -->
                        <div class="flex flex-wrap gap-2" id="branchFilters">
                            <button onclick="filterBranch('all')" class="branch-filter-btn px-4 py-2 rounded-xl text-xs font-bold transition-all bg-brand-500 text-white shadow-sm" data-branch="all">الكل</button>
                            <button onclick="filterBranch('academic')" class="branch-filter-btn px-4 py-2 rounded-xl text-xs font-bold transition-all bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200" data-branch="academic">أكاديمي وعلمي</button>
                            <button onclick="filterBranch('personal')" class="branch-filter-btn px-4 py-2 rounded-xl text-xs font-bold transition-all bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200" data-branch="personal">تطوير ذاتي</button>
                            <button onclick="filterBranch('health')" class="branch-filter-btn px-4 py-2 rounded-xl text-xs font-bold transition-all bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200" data-branch="health">صحة ورياضة</button>
                        </div>
                    </div>

                    <!-- Tasks List Container -->
                    <div id="tasksListContainer" class="mt-6 space-y-3">
                        <!-- Populated by JS -->
                    </div>
                </div>
            </section>

            <!-- TAB 3: Prayers Tracker -->
            <section id="tab-prayers" class="tab-content hidden space-y-6">
                <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-6 shadow-sm">
                    <div class="pb-6 border-b border-slate-100 dark:border-slate-800">
                        <h2 class="text-xl font-black">تتبع الصلوات الخمس مع النقاط</h2>
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">حافظ على صلاتك في وقتها وفي الجماعة لتضاعف نقاطك وتفوز برضا الله</p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mt-6" id="prayersGridContainer">
                        <!-- Populated by JS -->
                    </div>

                    <div class="mt-8 bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-200 dark:border-emerald-900/50 rounded-2xl p-4 flex items-center space-x-4 space-x-reverse">
                        <div class="w-12 h-12 rounded-xl bg-brand-500 text-white flex items-center justify-center text-xl font-bold flex-shrink-0">
                            <i class="fa-solid fa-star"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-sm text-emerald-900 dark:text-emerald-300">نظام احتساب نقاط الصلوات:</h4>
                            <p class="text-xs text-emerald-700 dark:text-emerald-400 mt-0.5">كل صلاة في وقتها تمنحك <span class="font-bold">10 نقاط</span> إضافية لرصيدك.</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- TAB 4: Weekly Challenges -->
            <section id="tab-challenges" class="tab-content hidden space-y-6">
                <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-6 shadow-sm">
                    <div class="pb-6 border-b border-slate-100 dark:border-slate-800">
                        <h2 class="text-xl font-black">التحديات الأسبوعية الكبرى</h2>
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">تحديات خاصة تمنحك نقاط مضاعفة وأوسمة استثنائية عند إتمامها خلال الأسبوع</p>
                    </div>

                    <div id="challengesContainer" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                        <!-- Populated by JS -->
                    </div>
                </div>
            </section>

            <!-- TAB 5: Leaderboard (Top 20) -->
            <section id="tab-leaderboard" class="tab-content hidden space-y-6">
                <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-6 shadow-sm">
                    <div class="pb-6 border-b border-slate-100 dark:border-slate-800 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <div>
                            <h2 class="text-xl font-black">لوحة المتصدرين (التوب 20)</h2>
                            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">أفضل الطلاب تفاعلاً وإنجازاً لهذا الأسبوع</p>
                        </div>
                        <span class="bg-brand-50 dark:bg-brand-950 text-brand-700 dark:text-brand-300 text-xs font-bold px-3 py-1.5 rounded-xl border border-brand-200 dark:border-brand-800 w-fit">
                            <i class="fa-solid fa-users ml-1"></i> يتم التحديث تلقائياً
                        </span>
                    </div>

                    <div class="mt-6 overflow-x-auto">
                        <table class="w-full text-right border-collapse">
                            <thead>
                                <tr class="border-b border-slate-100 dark:border-slate-800 text-xs font-bold text-slate-400">
                                    <th class="py-3 px-4">المركز</th>
                                    <th class="py-3 px-4">اسم الطالب</th>
                                    <th class="py-3 px-4">الفرع الأبرز</th>
                                    <th class="py-3 px-4 text-left">النقاط</th>
                                </tr>
                            </thead>
                            <tbody id="leaderboardTableBody" class="divide-y divide-slate-100 dark:divide-slate-800 text-sm">
                                <!-- Populated by JS -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

        </main>
    </div>

    <!-- Notification Custom Modal / Toast -->
    <div id="toast" class="fixed bottom-6 left-6 z-50 transform translate-y-24 opacity-0 transition-all duration-300 bg-slate-900 text-white dark:bg-white dark:text-slate-900 px-5 py-3 rounded-2xl shadow-2xl flex items-center space-x-3 space-x-reverse text-sm font-bold">
        <i id="toastIcon" class="fa-solid fa-circle-check text-brand-500 text-lg"></i>
        <span id="toastMsg">تم حفظ التغييرات بنجاح</span>
    </div>

    <!-- Application Script logic with LocalStorage persistence -->
    <script>
        // Initial App Data & State
        const defaultState = {
            points: 150,
            tasks: [
                { id: 1, title: 'دراسة ساعتين متواصلة لمادة الرياضيات', branch: 'academic', points: 30, completed: false },
                { id: 2, title: 'قراءة 20 صفحة من كتاب نافع', branch: 'personal', points: 20, completed: true },
                { id: 3, title: 'تمارين الإطالة والرياضة الصباحية', branch: 'health', points: 15, completed: false },
                { id: 4, title: 'حل الواجب المدرسي لمادة الفيزياء', branch: 'academic', points: 25, completed: false },
                { id: 5, title: 'الاستماع لبودكاست تعليمي', branch: 'personal', points: 15, completed: false }
            ],
            prayers: {
                fajr: { name: 'الفجر', completed: false, points: 10 },
                dhuhr: { name: 'الظهر', completed: false, points: 10 },
                asr: { name: 'العصر', completed: false, points: 10 },
                maghrib: { name: 'المغرب', completed: false, points: 10 },
                isha: { name: 'العشاء', completed: false, points: 10 }
            },
            challenges: [
                { id: 1, title: 'تحدي ختم سورة الملك حفظاً', desc: 'حفظ سورة الملك كاملة خلال الأسبوع الحالي.', points: 100, completed: false },
                { id: 2, title: 'تحدي إنجاز 5 مواد دراسية', desc: 'مراجعة وإنهاء مهام 5 مواد دراسية مختلفة.', points: 80, completed: true },
                { id: 3, title: 'تحدي الإكثار من الصلاة على النبي ﷺ', desc: 'الصلاة على النبي ﷺ 1000 مرة خلال الأسبوع.', points: 50, completed: false },
                { id: 4, title: 'تحدي الاستيقاظ المبكر', desc: 'الاستيقاظ قبل الفجر بساعة لمدة 3 أيام متتالية.', points: 75, completed: false }
            ],
            leaderboard: [
                { rank: 1, name: 'عبدالرحمن أحمد', branch: 'أكاديمي', points: 950 },
                { rank: 2, name: 'محمد إبراهيم', branch: 'تطوير ذاتي', points: 890 },
                { rank: 3, name: 'سارة خالد', branch: 'أكاديمي', points: 840 },
                { rank: 4, name: 'يوسف عمر', branch: 'صحة ورياضة', points: 790 },
                { rank: 5, name: 'فاطمة الزهراء', branch: 'تطوير ذاتي', points: 760 },
                { rank: 6, name: 'أحمد محمود', branch: 'أكاديمي', points: 710 },
                { rank: 7, name: 'عمر مصطفى', branch: 'تطوير ذاتي', points: 680 },
                { rank: 8, name: 'مريم حسن', branch: 'صحة ورياضة', points: 650 },
                { rank: 9, name: 'علي عبد الله', branch: 'أكاديمي', points: 620 },
                { rank: 10, name: 'خديجة علي', branch: 'تطوير ذاتي', points: 590 },
                { rank: 11, name: 'زياد طارق', branch: 'أكاديمي', points: 550 },
                { rank: 12, name: 'نور الهدى', branch: 'صحة ورياضة', points: 530 },
                { rank: 13, name: 'مهند خالد', branch: 'أكاديمي', points: 500 },
                { rank: 14, name: 'ريم سامح', branch: 'تطوير ذاتي', points: 480 },
                { rank: 15, name: 'باسم جمال', branch: 'صحة ورياضة', points: 460 },
                { rank: 16, name: 'ليلى سمير', branch: 'أكاديمي', points: 430 },
                { rank: 17, name: 'حمزة فهد', branch: 'تطوير ذاتي', points: 410 },
                { rank: 18, name: 'آية ناصر', branch: 'أكاديمي', points: 390 },
                { rank: 19, name: 'خالد وفيق', branch: 'صحة ورياضة', points: 370 },
                { rank: 20, name: 'ريما عادل', branch: 'تطوير ذاتي', points: 350 },
            ]
        };

        // Load or initialize state from LocalStorage
        let appState = JSON.parse(localStorage.getItem('khotwa_app_state')) || defaultState;

        function saveState() {
            localStorage.setItem('khotwa_app_state', JSON.stringify(appState));
            updateHeaderPoints();
        }

        // Theme Toggle Handler
        function toggleTheme() {
            const html = document.documentElement;
            const themeIcon = document.getElementById('themeIcon');
            if (html.classList.contains('dark')) {
                html.classList.remove('dark');
                localStorage.setItem('khotwa_theme', 'light');
                themeIcon.className = 'fa-solid fa-moon text-lg';
            } else {
                html.classList.add('dark');
                localStorage.setItem('khotwa_theme', 'dark');
                themeIcon.className = 'fa-solid fa-sun text-lg text-amber-400';
            }
        }

        // Initialize Theme from Storage
        window.addEventListener('DOMContentLoaded', () => {
            const savedTheme = localStorage.getItem('khotwa_theme');
            const themeIcon = document.getElementById('themeIcon');
            if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.documentElement.classList.add('dark');
                themeIcon.className = 'fa-solid fa-sun text-lg text-amber-400';
            } else {
                document.documentElement.classList.remove('dark');
                themeIcon.className = 'fa-solid fa-moon text-lg';
            }

            renderAll();
        });

        // Tab Switching Logic
        function switchTab(tabId) {
            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
            document.getElementById(`tab-${tabId}`).classList.remove('hidden');

            document.querySelectorAll('.nav-btn').forEach(btn => {
                btn.className = 'nav-btn w-full flex items-center space-x-3 space-x-reverse px-4 py-3 rounded-xl font-semibold transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800';
            });
            const activeBtn = document.getElementById(`nav-${tabId}`);
            if(activeBtn) {
                activeBtn.className = 'nav-btn w-full flex items-center space-x-3 space-x-reverse px-4 py-3 rounded-xl font-semibold transition-all bg-brand-500 text-white shadow-md shadow-brand-500/20';
            }
        }

        // Toast Notification System
        function showToast(msg, iconClass = 'fa-circle-check') {
            const toast = document.getElementById('toast');
            const toastMsg = document.getElementById('toastMsg');
            const toastIcon = document.getElementById('toastIcon');

            toastMsg.innerText = msg;
            toastIcon.className = `fa-solid ${iconClass} text-brand-500 text-lg`;

            toast.classList.remove('translate-y-24', 'opacity-0');
            setTimeout(() => {
                toast.classList.add('translate-y-24', 'opacity-0');
            }, 3000);
        }

        // Update Header and Summary Points
        function updateHeaderPoints() {
            document.getElementById('headerPoints').innerText = appState.points;
            document.getElementById('dashPoints').innerText = appState.points;
        }

        // Render All Sections
        function renderAll() {
            updateHeaderPoints();
            renderDashboard();
            renderTasks('all');
            renderPrayers();
            renderChallenges();
            renderLeaderboard();
        }

        // Render Dashboard Metrics & Preview
        function renderDashboard() {
            const completedTasks = appState.tasks.filter(t => t.completed).length;
            document.getElementById('dashTasksCount').innerText = `${completedTasks} / ${appState.tasks.length}`;

            const completedPrayers = Object.values(appState.prayers).filter(p => p.completed).length;
            document.getElementById('dashPrayersCount').innerText = `${completedPrayers} / 5`;

            // Tasks preview (top 3)
            const tasksPreviewContainer = document.getElementById('dashTasksPreview');
            tasksPreviewContainer.innerHTML = appState.tasks.slice(0, 3).map(task => `
                <div class="flex items-center justify-between p-3 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800">
                    <div class="flex items-center space-x-3 space-x-reverse">
                        <input type="checkbox" ${task.completed ? 'checked' : ''} onchange="toggleTask(${task.id})" class="w-5 h-5 text-brand-500 rounded focus:ring-brand-500 cursor-pointer">
                        <span class="text-sm font-medium ${task.completed ? 'line-through text-slate-400 dark:text-slate-500' : ''}">${task.title}</span>
                    </div>
                    <span class="text-xs font-bold text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/50 px-2 py-1 rounded-lg">+${task.points} ن</span>
                </div>
            `).join('');

            // Prayers preview
            const prayersPreviewContainer = document.getElementById('dashPrayersPreview');
            prayersPreviewContainer.innerHTML = Object.entries(appState.prayers).map(([key, prayer]) => `
                <div onclick="togglePrayer('${key}')" class="cursor-pointer p-3 rounded-xl border flex flex-col items-center justify-center transition-all ${prayer.completed ? 'bg-brand-50 dark:bg-brand-950/40 border-brand-300 dark:border-brand-800 text-brand-700 dark:text-brand-300' : 'bg-slate-50 dark:bg-slate-800/50 border-slate-200 dark:border-slate-800 text-slate-400'}">
                    <i class="fa-solid fa-mosque text-lg mb-1"></i>
                    <span class="text-xs font-bold">${prayer.name}</span>
                    <i class="fa-solid ${prayer.completed ? 'fa-check-circle text-brand-500' : 'fa-circle text-slate-300 dark:text-slate-600'} text-xs mt-1"></i>
                </div>
            `).join('');
        }

        // Render Tasks with Branch filter
        let currentBranchFilter = 'all';
        function filterBranch(branch) {
            currentBranchFilter = branch;
            document.querySelectorAll('.branch-filter-btn').forEach(btn => {
                if(btn.dataset.branch === branch) {
                    btn.className = 'branch-filter-btn px-4 py-2 rounded-xl text-xs font-bold transition-all bg-brand-500 text-white shadow-sm';
                } else {
                    btn.className = 'branch-filter-btn px-4 py-2 rounded-xl text-xs font-bold transition-all bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200';
                }
            });
            renderTasks(branch);
        }

        function renderTasks(branch) {
            const container = document.getElementById('tasksListContainer');
            const filtered = branch === 'all' ? appState.tasks : appState.tasks.filter(t => t.branch === branch);

            if(filtered.length === 0) {
                container.innerHTML = `<p class="text-center text-slate-400 py-8 text-sm">لا توجد مهام في هذا الفرع حالياً.</p>`;
                return;
            }

            const branchLabels = { academic: 'أكاديمي وعلمي', personal: 'تطوير ذاتي', health: 'صحة ورياضة' };
            const branchColors = { academic: 'bg-blue-50 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300', personal: 'bg-purple-50 text-purple-700 dark:bg-purple-950/50 dark:text-purple-300', health: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300' };

            container.innerHTML = filtered.map(task => `
                <div class="flex items-center justify-between p-4 rounded-2xl bg-slate-50 dark:bg-slate-800/40 border border-slate-200 dark:border-slate-800 transition-all hover:border-brand-300">
                    <div class="flex items-center space-x-4 space-x-reverse">
                        <input type="checkbox" ${task.completed ? 'checked' : ''} onchange="toggleTask(${task.id})" class="w-6 h-6 text-brand-500 rounded-md focus:ring-brand-500 cursor-pointer">
                        <div>
                            <p class="font-bold text-sm ${task.completed ? 'line-through text-slate-400 dark:text-slate-500' : ''}">${task.title}</p>
                            <span class="inline-block mt-1 text-[10px] font-semibold px-2.5 py-0.5 rounded-full ${branchColors[task.branch]}">${branchLabels[task.branch]}</span>
                        </div>
                    </div>
                    <div class="flex items-center space-x-3 space-x-reverse">
                        <span class="text-xs font-black text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/60 px-2.5 py-1 rounded-lg">+${task.points} نقطة</span>
                    </div>
                </div>
            `).join('');
        }

        function toggleTask(id) {
            const task = appState.tasks.find(t => t.id === id);
            if(task) {
                task.completed = !task.completed;
                if(task.completed) {
                    appState.points += task.points;
                    showToast(`أحسنت! كسبت ${task.points} نقطة بإتمام المهمة.`);
                } else {
                    appState.points = Math.max(0, appState.points - task.points);
                    showToast(`تم إلغاء إتمام المهمة وسحب النقاط.`, 'fa-circle-exclamation');
                }
                saveState();
                renderAll();
            }
        }

        // Render Prayers Tracker
        function renderPrayers() {
            const container = document.getElementById('prayersGridContainer');
            container.innerHTML = Object.entries(appState.prayers).map(([key, prayer]) => `
                <div onclick="togglePrayer('${key}')" class="cursor-pointer p-5 rounded-2xl border transition-all text-center flex flex-col items-center justify-between ${prayer.completed ? 'bg-brand-500 text-white border-brand-600 shadow-lg shadow-brand-500/20' : 'bg-slate-50 dark:bg-slate-800/50 border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-200 hover:border-brand-400'}">
                    <div class="w-12 h-12 rounded-xl ${prayer.completed ? 'bg-white/20 text-white' : 'bg-slate-200 dark:bg-slate-700 text-brand-600 dark:text-brand-400'} flex items-center justify-center text-xl mb-3">
                        <i class="fa-solid fa-mosque"></i>
                    </div>
                    <div>
                        <h4 class="font-black text-base">${prayer.name}</h4>
                        <p class="text-xs ${prayer.completed ? 'text-emerald-100' : 'text-slate-400'} mt-1">+${prayer.points} نقطة</p>
                    </div>
                    <span class="mt-4 text-xs font-bold px-3 py-1 rounded-full ${prayer.completed ? 'bg-white text-brand-700' : 'bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300'}">
                        ${prayer.completed ? 'تمت المحافظة عليها' : 'اضغط للتسجيل'}
                    </span>
                </div>
            `).join('');
        }

        function togglePrayer(key) {
            const prayer = appState.prayers[key];
            prayer.completed = !prayer.completed;
            if(prayer.completed) {
                appState.points += prayer.points;
                showToast(`تقبل الله صلاة ${prayer.name}! كسبت ${prayer.points} نقطة.`);
            } else {
                appState.points = Math.max(0, appState.points - prayer.points);
                showToast(`تم إلغاء تسجيل صلاة ${prayer.name}.`, 'fa-circle-exclamation');
            }
            saveState();
            renderAll();
        }

        // Render Challenges
        function renderChallenges() {
            const container = document.getElementById('challengesContainer');
            container.innerHTML = appState.challenges.map(ch => `
                <div class="p-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/30 flex flex-col justify-between">
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-xs font-bold px-2.5 py-1 rounded-lg bg-amber-50 dark:bg-amber-950/60 text-amber-600 dark:text-amber-400">
                                <i class="fa-solid fa-coins ml-1"></i> +${ch.points} نقطة
                            </span>
                            <span class="text-xs font-semibold ${ch.completed ? 'text-emerald-600 bg-emerald-50 dark:bg-emerald-950/50 px-2 py-0.5 rounded-md' : 'text-slate-400'}">
                                ${ch.completed ? 'مكتمل ✅' : 'قيد الإنجاز ⏳'}
                            </span>
                        </div>
                        <h4 class="font-bold text-base mt-2">${ch.title}</h4>
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-1 leading-relaxed">${ch.desc}</p>
                    </div>
                    <div class="mt-6 pt-4 border-t border-slate-200 dark:border-slate-800/80 flex items-center justify-between">
                        <span class="text-[11px] text-slate-400 font-medium">متبقي 3 أيام على نهاية التحدي</span>
                        <button onclick="toggleChallenge(${ch.id})" class="px-4 py-2 rounded-xl text-xs font-bold transition-all ${ch.completed ? 'bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300' : 'bg-brand-500 hover:bg-brand-600 text-white shadow-md shadow-brand-500/20'}">
                            ${ch.completed ? 'إلغاء الإتمام' : 'إنهاء التحدي'}
                        </button>
                    </div>
                </div>
            `).join('');
        }

        function toggleChallenge(id) {
            const ch = appState.challenges.find(c => c.id === id);
            if(ch) {
                ch.completed = !ch.completed;
                if(ch.completed) {
                    appState.points += ch.points;
                    showToast(`مبروك! أتممت التحدي وكسبت ${ch.points} نقطة استثنائية!`, 'fa-trophy');
                } else {
                    appState.points = Math.max(0, appState.points - ch.points);
                    showToast(`تم إلغاء إتمام التحدي.`, 'fa-circle-exclamation');
                }
                saveState();
                renderAll();
            }
        }

        // Render Leaderboard (Top 20)
        function renderLeaderboard() {
            const tbody = document.getElementById('leaderboardTableBody');
            tbody.innerHTML = appState.leaderboard.map(user => {
                let badgeColor = 'text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800';
                if(user.rank === 1) badgeColor = 'text-amber-700 bg-amber-100 dark:bg-amber-950 dark:text-amber-300 font-black';
                if(user.rank === 2) badgeColor = 'text-slate-700 bg-slate-200 dark:bg-slate-800 dark:text-slate-200 font-black';
                if(user.rank === 3) badgeColor = 'text-amber-900 bg-amber-200/60 dark:bg-amber-900/40 dark:text-amber-200 font-black';

                return `
                    <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-all">
                        <td class="py-3 px-4">
                            <span class="inline-flex items-center justify-center w-7 h-7 rounded-xl text-xs ${badgeColor}">
                                ${user.rank}
                            </span>
                        </td>
                        <td class="py-3 px-4 font-bold">${user.name}</td>
                        <td class="py-3 px-4 text-xs text-slate-500 dark:text-slate-400">${user.branch}</td>
                        <td class="py-3 px-4 text-left font-black text-brand-600 dark:text-brand-400">
                            ${user.points} <span class="text-xs text-slate-400 font-normal">نقطة</span>
                        </td>
                    </tr>
                `;
            }).join('');
        }
    </script>
</body>
</html>
```