diff --git a/application_detail.php b/application_detail.php
new file mode 100644
index 0000000..dab87de
--- /dev/null
+++ b/application_detail.php
@@ -0,0 +1,149 @@
+<?php
+declare(strict_types=1);
+require_once __DIR__ . '/includes/app.php';
+
+$flash = consume_flash();
+$applicationId = filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT) ?: 0;
+$application = $applicationId > 0 ? get_application($applicationId) : null;
+
+if (!$application) {
+    http_response_code(404);
+    render_page_start('طلب غير موجود', 'applications', 'لم يتم العثور على طلب فتح المركز المطلوب.');
+    render_flash($flash);
+    ?>
+    <section class="py-5">
+      <div class="container-xxl">
+        <div class="app-card text-center py-5">
+          <div class="empty-title mb-2">الطلب غير موجود</div>
+          <p class="text-muted mb-3">تحقق من رقم المرجع أو ارجع إلى لوحة الطلبات.</p>
+          <a class="btn btn-dark" href="applications.php">العودة إلى القائمة</a>
+        </div>
+      </div>
+    </section>
+    <?php
+    render_page_end();
+    exit;
+}
+
+$reviewErrors = [];
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $status = clean_text((string) ($_POST['status'] ?? 'submitted'), 30);
+    $adminNotes = clean_text((string) ($_POST['admin_notes'] ?? ''), 1000);
+    $evaluationScore = filter_var($_POST['evaluation_score'] ?? null, FILTER_VALIDATE_INT, [
+        'options' => ['min_range' => 0, 'max_range' => 100],
+    ]);
+
+    if (($_POST['evaluation_score'] ?? '') !== '' && $evaluationScore === false) {
+        $reviewErrors['evaluation_score'] = 'أدخل درجة بين 0 و100.';
+    }
+
+    if ($reviewErrors === []) {
+        try {
+            update_application_review($applicationId, $status, $adminNotes, $evaluationScore === false ? null : $evaluationScore);
+            set_flash('success', 'تم تحديث حالة الطلب وملاحظات التقييم بنجاح.');
+            header('Location: application_detail.php?id=' . urlencode((string) $applicationId));
+            exit;
+        } catch (Throwable $exception) {
+            $reviewErrors['form'] = 'تعذر حفظ التحديث الآن. حاول مرة أخرى.';
+        }
+    }
+}
+
+$application = get_application($applicationId);
+$statusMeta = status_meta((string) $application['status']);
+
+render_page_start('تفاصيل الطلب #' . $applicationId, 'applications', 'عرض تفصيلي لطلب فتح المركز مع نموذج المراجعة للمشرف العام.');
+render_flash($flash);
+?>
+<section class="py-4 py-lg-5">
+  <div class="container-xxl">
+    <div class="row g-4 align-items-start">
+      <div class="col-lg-8">
+        <div class="app-card detail-card mb-4">
+          <div class="section-head mb-4">
+            <div>
+              <div class="eyebrow mb-2">مرجع الطلب #<?= e((string) $application['id']) ?></div>
+              <div class="section-title"><?= e((string) $application['center_name']) ?></div>
+              <div class="section-copy">مقدم الطلب: <?= e((string) $application['director_name']) ?> — <?= e((string) $application['city']) ?></div>
+            </div>
+            <?= status_badge((string) $application['status']) ?>
+          </div>
+
+          <div class="row g-3 detail-grid">
+            <div class="col-md-6"><div class="detail-item"><span>نوع المركز</span><strong><?= e((string) $application['center_type']) ?></strong></div></div>
+            <div class="col-md-6"><div class="detail-item"><span>الفئة المستهدفة</span><strong><?= e((string) $application['gender_scope']) ?></strong></div></div>
+            <div class="col-md-6"><div class="detail-item"><span>رقم الهاتف</span><strong><?= e((string) $application['phone']) ?></strong></div></div>
+            <div class="col-md-6"><div class="detail-item"><span>البريد الإلكتروني</span><strong><?= e((string) $application['email']) ?></strong></div></div>
+            <div class="col-md-6"><div class="detail-item"><span>السعة المتوقعة</span><strong><?= e((string) $application['expected_students']) ?> طالب</strong></div></div>
+            <div class="col-md-6"><div class="detail-item"><span>فترة البرنامج</span><strong><?= e((string) $application['start_date']) ?> — <?= e((string) $application['end_date']) ?></strong></div></div>
+          </div>
+
+          <div class="notes-block mt-4">
+            <div class="section-title small-title mb-2">ملخص البرنامج والاحتياجات</div>
+            <p class="mb-0 text-muted"><?= nl2br(e((string) ($application['notes'] ?: 'لا توجد ملاحظات إضافية.'))) ?></p>
+          </div>
+        </div>
+
+        <div class="app-card detail-card">
+          <div class="section-title mb-3">سجل المراجعة</div>
+          <div class="timeline-list">
+            <div class="timeline-item">
+              <div class="timeline-title">تم استلام الطلب</div>
+              <div class="timeline-copy text-muted">أُرسل الطلب بتاريخ <?= e((string) $application['submitted_at']) ?>.</div>
+            </div>
+            <div class="timeline-item">
+              <div class="timeline-title">الحالة الحالية: <?= e($statusMeta['label']) ?></div>
+              <div class="timeline-copy text-muted">آخر تحديث بتاريخ <?= e((string) $application['updated_at']) ?>.</div>
+            </div>
+            <div class="timeline-item">
+              <div class="timeline-title">ملاحظات المشرف العام</div>
+              <div class="timeline-copy text-muted"><?= nl2br(e((string) ($application['admin_notes'] ?: 'لم تُسجل ملاحظات بعد.'))) ?></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-4">
+        <div class="app-card sidebar-card mb-4">
+          <div class="section-title mb-3">ملخص القرار</div>
+          <div class="summary-stack">
+            <div class="summary-row"><span>الحالة</span><strong><?= e($statusMeta['label']) ?></strong></div>
+            <div class="summary-row"><span>درجة الاستعداد</span><strong><?= $application['evaluation_score'] !== null ? e((string) $application['evaluation_score']) . '%' : 'غير محددة' ?></strong></div>
+            <div class="summary-row"><span>آخر تحديث</span><strong><?= e((string) $application['updated_at']) ?></strong></div>
+          </div>
+        </div>
+
+        <div class="app-card sidebar-card">
+          <div class="section-title mb-3">إجراء المشرف العام</div>
+          <?php if (!empty($reviewErrors['form'])): ?>
+            <div class="alert alert-danger"><?= e($reviewErrors['form']) ?></div>
+          <?php endif; ?>
+          <form method="post" novalidate>
+            <div class="mb-3">
+              <label class="form-label" for="status">حالة الطلب</label>
+              <select class="form-select" id="status" name="status">
+                <?php foreach (status_map() as $value => $meta): ?>
+                  <option value="<?= e($value) ?>" <?= (string) $application['status'] === $value ? 'selected' : '' ?>><?= e($meta['label']) ?></option>
+                <?php endforeach; ?>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label class="form-label" for="evaluation_score">درجة التقييم الأولي</label>
+              <input type="number" min="0" max="100" class="form-control <?= isset($reviewErrors['evaluation_score']) ? 'is-invalid' : '' ?>" id="evaluation_score" name="evaluation_score" value="<?= e((string) ($application['evaluation_score'] ?? '')) ?>" placeholder="مثال: 85">
+              <?php if (isset($reviewErrors['evaluation_score'])): ?><div class="invalid-feedback"><?= e($reviewErrors['evaluation_score']) ?></div><?php endif; ?>
+            </div>
+            <div class="mb-3">
+              <label class="form-label" for="admin_notes">ملاحظات التقييم</label>
+              <textarea class="form-control" id="admin_notes" name="admin_notes" rows="5" placeholder="سجّل نقاط القوة أو النواقص المطلوب استكمالها."><?= e((string) ($application['admin_notes'] ?? '')) ?></textarea>
+            </div>
+            <div class="d-grid gap-2">
+              <button class="btn btn-dark" type="submit">حفظ التحديث</button>
+              <a class="btn btn-outline-secondary" href="applications.php">العودة إلى القائمة</a>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<?php render_page_end(); ?>
diff --git a/applications.php b/applications.php
new file mode 100644
index 0000000..fbc7e35
--- /dev/null
+++ b/applications.php
@@ -0,0 +1,88 @@
+<?php
+declare(strict_types=1);
+require_once __DIR__ . '/includes/app.php';
+
+$flash = consume_flash();
+$statusFilter = clean_text((string) ($_GET['status'] ?? 'all'), 50);
+$applications = list_applications($statusFilter);
+$stats = dashboard_metrics();
+$statusTabs = ['all' => 'الكل'] + array_map(fn ($meta) => $meta['label'], status_map());
+
+render_page_start('لوحة الطلبات', 'applications', 'قائمة موحدة لطلبات فتح المراكز الصيفية مع فلترة حسب حالة المراجعة.');
+render_flash($flash);
+?>
+<section class="py-4 py-lg-5">
+  <div class="container-xxl">
+    <div class="app-card mb-4">
+      <div class="section-head flex-column flex-lg-row align-items-start align-items-lg-center gap-3 mb-3">
+        <div>
+          <div class="section-title">لوحة طلبات فتح المراكز</div>
+          <div class="section-copy">واجهة المشرف العام لمراجعة جميع الطلبات، فرزها بالحالة، ثم الانتقال إلى التفاصيل لاتخاذ القرار.</div>
+        </div>
+        <div class="d-flex flex-wrap gap-2">
+          <a class="btn btn-dark btn-sm px-3" href="center_application.php">طلب جديد</a>
+          <a class="btn btn-outline-secondary btn-sm px-3" href="applications.php">تحديث القائمة</a>
+        </div>
+      </div>
+      <div class="filter-pills">
+        <?php foreach ($statusTabs as $value => $label): ?>
+          <a class="filter-pill <?= $statusFilter === $value ? 'active' : '' ?>" href="applications.php?status=<?= e($value) ?>">
+            <?= e($label) ?>
+            <span class="pill-count">
+              <?= e((string) ($value === 'all' ? $stats['all'] : ($stats[$value] ?? 0))) ?>
+            </span>
+          </a>
+        <?php endforeach; ?>
+      </div>
+    </div>
+
+    <div class="app-card">
+      <?php if ($applications === []): ?>
+        <div class="empty-state text-center py-5">
+          <div class="empty-title mb-2">لا توجد طلبات ضمن هذا التصنيف.</div>
+          <p class="text-muted mb-3">ابدأ بإنشاء أول طلب فتح مركز ليظهر هنا فوراً.</p>
+          <a class="btn btn-dark" href="center_application.php">إنشاء طلب</a>
+        </div>
+      <?php else: ?>
+        <div class="table-responsive">
+          <table class="table app-table align-middle mb-0">
+            <thead>
+              <tr>
+                <th>المرجع</th>
+                <th>المركز</th>
+                <th>المدينة</th>
+                <th>المدير</th>
+                <th>الفترة</th>
+                <th>الحالة</th>
+                <th>التقييم</th>
+              </tr>
+            </thead>
+            <tbody>
+              <?php foreach ($applications as $application): ?>
+                <tr>
+                  <td><a class="table-link" href="application_detail.php?id=<?= e((string) $application['id']) ?>">#<?= e((string) $application['id']) ?></a></td>
+                  <td>
+                    <div class="fw-semibold"><?= e((string) $application['center_name']) ?></div>
+                    <div class="text-muted small">سعة متوقعة: <?= e((string) $application['expected_students']) ?> طالب</div>
+                  </td>
+                  <td><?= e((string) $application['city']) ?></td>
+                  <td>
+                    <div><?= e((string) $application['director_name']) ?></div>
+                    <div class="text-muted small"><?= e((string) $application['phone']) ?></div>
+                  </td>
+                  <td>
+                    <div><?= e((string) $application['start_date']) ?></div>
+                    <div class="text-muted small">حتى <?= e((string) $application['end_date']) ?></div>
+                  </td>
+                  <td><?= status_badge((string) $application['status']) ?></td>
+                  <td><?= $application['evaluation_score'] !== null ? e((string) $application['evaluation_score']) . '%' : '—' ?></td>
+                </tr>
+              <?php endforeach; ?>
+            </tbody>
+          </table>
+        </div>
+      <?php endif; ?>
+    </div>
+  </div>
+</section>
+<?php render_page_end(); ?>
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 789132e..8261a74 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,403 +1,571 @@
+ :root {
+    --bg: #f3f4f6;
+    --surface: #ffffff;
+    --surface-muted: #f8fafc;
+    --border: #d6dbe3;
+    --border-strong: #c1c8d2;
+    --text: #0f172a;
+    --muted: #475569;
+    --primary: #111827;
+    --accent: #0f766e;
+    --accent-soft: #ecfdf5;
+    --success: #166534;
+    --warning: #92400e;
+    --danger: #b91c1c;
+    --shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
+    --radius-sm: 10px;
+    --radius-md: 14px;
+    --radius-lg: 18px;
+    --font-ui: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
 body {
-    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
-    background-size: 400% 400%;
-    animation: gradient 15s ease infinite;
-    color: #212529;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    font-size: 14px;
     margin: 0;
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-ui);
+    font-weight: 400;
+    line-height: 1.7;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body,
+.form-control,
+.form-select,
+.btn,
+.table {
+    font-size: 0.96rem;
+}
+
+input,
+select,
+textarea,
+button {
+    font: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.brand-title,
+.hero-title,
+.stat-label,
+.section-title,
+.footer-title,
+.timeline-title,
+.empty-title {
+    font-family: var(--font-ui);
+    letter-spacing: 0;
+}
+
+::selection {
+    background: rgba(15, 118, 110, 0.18);
+}
+
+.app-shell {
     min-height: 100vh;
 }
 
-.main-wrapper {
-    display: flex;
+.site-header,
+.site-footer {
+    background: rgba(255, 255, 255, 0.92);
+    backdrop-filter: blur(8px);
+}
+
+.site-header {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+}
+
+.navbar-brand,
+.nav-link {
+    color: var(--text);
+}
+
+.navbar-brand:hover,
+.nav-link:hover {
+    color: var(--primary);
+}
+
+.nav-link {
+    border-radius: 999px;
+    padding: 0.55rem 0.9rem;
+    color: var(--muted);
+    font-weight: 500;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.nav-link.active,
+.nav-link:hover {
+    background: #eef2f7;
+    color: var(--primary);
+}
+
+.brand-mark {
+    text-decoration: none;
+}
+
+.brand-badge {
+    width: 2.4rem;
+    height: 2.4rem;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: 100vh;
-    width: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-    position: relative;
-    z-index: 1;
-}
-
-@keyframes gradient {
-    0% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
-    }
-    100% {
-        background-position: 0% 50%;
-    }
-}
-
-.chat-container {
-    width: 100%;
-    max-width: 600px;
-    background: rgba(255, 255, 255, 0.85);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 20px;
-    display: flex;
-    flex-direction: column;
-    height: 85vh;
-    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    overflow: hidden;
-}
-
-.chat-header {
-    padding: 1.5rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    background: rgba(255, 255, 255, 0.5);
+    border-radius: 12px;
+    background: var(--primary);
+    color: #fff;
     font-weight: 700;
-    font-size: 1.1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
 }
 
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1.5rem;
+.brand-title {
+    font-weight: 700;
+    font-size: 1.02rem;
+}
+
+.brand-subtitle,
+.footer-meta,
+.section-copy,
+.hero-copy,
+.text-muted {
+    color: var(--muted) !important;
+}
+
+.brand-subtitle {
+    font-size: 0.82rem;
+    font-weight: 500;
+}
+
+.header-chip,
+.eyebrow,
+.pill-count {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    background: #fff;
+    color: var(--muted);
+    padding: 0.38rem 0.7rem;
+    font-size: 0.78rem;
+    font-weight: 500;
+}
+
+.container-xxl {
+    max-width: 1240px;
+}
+
+.hero-section {
+    padding-top: 2rem;
+}
+
+.hero-title {
+    font-size: clamp(2.05rem, 2.9vw, 3.1rem);
+    line-height: 1.3;
+    font-weight: 700;
+    margin: 0;
+    max-width: 15ch;
+}
+
+.hero-copy {
+    max-width: 58ch;
+    font-size: 1rem;
+}
+
+.hero-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.7rem;
+    color: var(--muted);
+    font-size: 0.84rem;
+}
+
+.hero-meta span {
+    padding: 0.45rem 0.75rem;
+    background: var(--surface-muted);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+}
+
+.app-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow);
+    padding: 1.35rem;
+}
+
+.compact-card,
+.sidebar-card {
+    padding: 1.1rem;
+}
+
+.hero-card {
+    padding: 1.7rem;
+}
+
+.form-card,
+.detail-card {
+    padding: 1.4rem;
+}
+
+.stat-card {
     display: flex;
     flex-direction: column;
-    gap: 1.25rem;
+    gap: 0.4rem;
+    min-height: 160px;
 }
 
-/* Custom Scrollbar */
-::-webkit-scrollbar {
-    width: 6px;
+.stat-label,
+.section-title,
+.footer-title,
+.timeline-title,
+.empty-title {
+    font-weight: 700;
 }
 
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
-}
-
-.message {
-    max-width: 85%;
-    padding: 0.85rem 1.1rem;
-    border-radius: 16px;
-    line-height: 1.5;
-    font-size: 0.95rem;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
-    animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px) scale(0.95); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-.message.visitor {
-    align-self: flex-end;
-    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
-    color: #fff;
-    border-bottom-right-radius: 4px;
-}
-
-.message.bot {
-    align-self: flex-start;
-    background: #ffffff;
-    color: #212529;
-    border-bottom-left-radius: 4px;
-}
-
-.chat-input-area {
-    padding: 1.25rem;
-    background: rgba(255, 255, 255, 0.5);
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.chat-input-area form {
+.section-head {
     display: flex;
-    gap: 0.75rem;
-}
-
-.chat-input-area input {
-    flex: 1;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    padding: 0.75rem 1rem;
-    outline: none;
-    background: rgba(255, 255, 255, 0.9);
-    transition: all 0.3s ease;
-}
-
-.chat-input-area input:focus {
-    border-color: #23a6d5;
-    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
-}
-
-.chat-input-area button {
-    background: #212529;
-    color: #fff;
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 12px;
-    cursor: pointer;
-    font-weight: 600;
-    transition: all 0.3s ease;
-}
-
-.chat-input-area button:hover {
-    background: #000;
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-}
-
-/* Background Animations */
-.bg-animations {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    overflow: hidden;
-    pointer-events: none;
-}
-
-.blob {
-    position: absolute;
-    width: 500px;
-    height: 500px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    filter: blur(80px);
-    animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
-}
-
-.blob-1 { 
-    top: -10%; 
-    left: -10%; 
-    background: rgba(238, 119, 82, 0.4); 
-}
-
-.blob-2 { 
-    bottom: -10%; 
-    right: -10%; 
-    background: rgba(35, 166, 213, 0.4); 
-    animation-delay: -7s; 
-    width: 600px;
-    height: 600px;
-}
-
-.blob-3 { 
-    top: 40%; 
-    left: 30%; 
-    background: rgba(231, 60, 126, 0.3); 
-    animation-delay: -14s; 
-    width: 450px;
-    height: 450px;
-}
-
-@keyframes move {
-    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
-    33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
-    66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
-    100% { transform: translate(0, 0) rotate(360deg) scale(1); }
-}
-
-.header-link {
-    font-size: 14px;
-    color: #fff;
-    text-decoration: none;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-}
-
-.header-link:hover {
-    background: rgba(0, 0, 0, 0.4);
-    text-decoration: none;
-}
-
-/* Admin Styles */
-.admin-container {
-    max-width: 900px;
-    margin: 3rem auto;
-    padding: 2.5rem;
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-radius: 24px;
-    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    position: relative;
-    z-index: 1;
-}
-
-.admin-container h1 {
-    margin-top: 0;
-    color: #212529;
-    font-weight: 800;
-}
-
-.table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0 8px;
-    margin-top: 1.5rem;
-}
-
-.table th {
-    background: transparent;
-    border: none;
-    padding: 1rem;
-    color: #6c757d;
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    letter-spacing: 1px;
-}
-
-.table td {
-    background: #fff;
-    padding: 1rem;
-    border: none;
-}
-
-.table tr td:first-child { border-radius: 12px 0 0 12px; }
-.table tr td:last-child { border-radius: 0 12px 12px 0; }
-
-.form-group {
-    margin-bottom: 1.25rem;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 600;
-    font-size: 0.9rem;
-}
-
-.form-control {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    background: #fff;
-    transition: all 0.3s ease;
-    box-sizing: border-box;
-}
-
-.form-control:focus {
-    outline: none;
-    border-color: #23a6d5;
-    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
-}
-
-.header-container {
-    display: flex;
-    justify-content: space-between;
     align-items: center;
-}
-
-.header-links {
-    display: flex;
+    justify-content: space-between;
     gap: 1rem;
 }
 
-.admin-card {
-    background: rgba(255, 255, 255, 0.6);
-    padding: 2rem;
-    border-radius: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.5);
-    margin-bottom: 2.5rem;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+.section-title {
+    font-size: 1.08rem;
 }
 
-.admin-card h3 {
-    margin-top: 0;
-    margin-bottom: 1.5rem;
+.small-title {
+    font-size: 0.96rem;
+}
+
+.stat-value {
+    font-size: clamp(1.8rem, 3vw, 2.4rem);
+    font-weight: 700;
+    color: var(--primary);
+    letter-spacing: -0.02em;
+}
+
+.stat-note,
+.workflow-list,
+.check-list,
+.timeline-copy,
+.summary-row span {
+    color: var(--muted);
+}
+
+.module-list {
+    display: grid;
+    gap: 0.9rem;
+}
+
+.module-item {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--surface-muted);
+    padding: 1rem;
+}
+
+.module-item h2 {
+    font-size: 0.98rem;
+    margin: 0 0 0.35rem;
+}
+
+.module-item p,
+.summary-row,
+.detail-item span,
+.detail-item strong,
+.timeline-copy,
+.notes-block p {
+    margin: 0;
+}
+
+.workflow-list,
+.check-list {
+    padding-right: 1.2rem;
+    margin: 0;
+    display: grid;
+    gap: 0.65rem;
+}
+
+.filter-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.65rem;
+}
+
+.filter-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    padding: 0.55rem 0.8rem;
+    background: #fff;
+    color: var(--muted);
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.filter-pill.active,
+.filter-pill:hover {
+    color: var(--primary);
+    background: #eef2f7;
+    border-color: var(--border-strong);
+}
+
+.pill-count {
+    padding: 0.2rem 0.5rem;
+    background: transparent;
+}
+
+.app-table {
+    --bs-table-bg: transparent;
+    --bs-table-border-color: #e6e8ee;
+    margin: 0;
+}
+
+.app-table thead th {
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0;
+    color: #64748b;
+    white-space: nowrap;
+    border-bottom-width: 1px;
+}
+
+.app-table tbody td {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    vertical-align: middle;
+}
+
+.table-link {
+    color: var(--primary);
+    text-decoration: none;
     font-weight: 700;
 }
 
-.btn-delete {
-    background: #dc3545;
-    color: white;
-    border: none;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    cursor: pointer;
+.table-link:hover {
+    text-decoration: underline;
 }
 
-.btn-add {
-    background: #212529;
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-top: 1rem;
-}
-
-.btn-save {
-    background: #0088cc;
-    color: white;
-    border: none;
-    padding: 0.8rem 1.5rem;
-    border-radius: 12px;
-    cursor: pointer;
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 999px;
+    padding: 0.35rem 0.7rem;
+    font-size: 0.78rem;
     font-weight: 600;
-    width: 100%;
-    transition: all 0.3s ease;
+    border: 1px solid transparent;
 }
 
-.webhook-url {
-    font-size: 0.85em;
-    color: #555;
-    margin-top: 0.5rem;
+.status-submitted {
+    background: #eff6ff;
+    color: #1d4ed8;
+    border-color: #bfdbfe;
 }
 
-.history-table-container {
-    overflow-x: auto;
-    background: rgba(255, 255, 255, 0.4);
-    padding: 1rem;
+.status-review {
+    background: #fff7ed;
+    color: var(--warning);
+    border-color: #fed7aa;
+}
+
+.status-approved {
+    background: #ecfdf5;
+    color: var(--success);
+    border-color: #bbf7d0;
+}
+
+.status-rejected {
+    background: #fef2f2;
+    color: var(--danger);
+    border-color: #fecaca;
+}
+
+.status-muted {
+    background: #f8fafc;
+    color: var(--muted);
+    border-color: var(--border);
+}
+
+.form-label {
+    font-weight: 600;
+    margin-bottom: 0.45rem;
+}
+
+.form-control,
+.form-select {
+    min-height: 2.9rem;
+    border-color: var(--border-strong);
     border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 0.7rem 0.9rem;
+    background-color: #fff;
 }
 
-.history-table {
-    width: 100%;
+textarea.form-control {
+    min-height: 120px;
 }
 
-.history-table-time {
-    width: 15%;
-    white-space: nowrap;
-    font-size: 0.85em;
-    color: #555;
+.form-control:focus,
+.form-select:focus,
+.btn:focus,
+.nav-link:focus,
+.filter-pill:focus {
+    border-color: rgba(15, 118, 110, 0.45);
+    box-shadow: 0 0 0 0.18rem rgba(15, 118, 110, 0.13);
 }
 
-.history-table-user {
-    width: 35%;
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 8px;
-    padding: 8px;
+.btn {
+    border-radius: 12px;
+    padding: 0.68rem 1rem;
+    font-weight: 600;
 }
 
-.history-table-ai {
-    width: 50%;
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 8px;
-    padding: 8px;
+.btn-dark {
+    background: var(--primary);
+    border-color: var(--primary);
 }
 
-.no-messages {
-    text-align: center;
-    color: #777;
-}
\ No newline at end of file
+.btn-dark:hover,
+.btn-dark:focus {
+    background: #0b1220;
+    border-color: #0b1220;
+}
+
+.btn-outline-secondary {
+    color: var(--primary);
+    border-color: var(--border-strong);
+}
+
+.btn-outline-secondary:hover {
+    background: #eef2f7;
+    border-color: var(--border-strong);
+    color: var(--primary);
+}
+
+.detail-grid .detail-item,
+.summary-row,
+.notes-block,
+.timeline-item {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--surface-muted);
+    padding: 0.95rem 1rem;
+}
+
+.detail-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    height: 100%;
+}
+
+.detail-item span {
+    font-size: 0.84rem;
+    color: var(--muted);
+}
+
+.detail-item strong,
+.summary-row strong {
+    font-size: 0.94rem;
+    font-weight: 600;
+}
+
+.timeline-list,
+.summary-stack {
+    display: grid;
+    gap: 0.75rem;
+}
+
+.timeline-item {
+    position: relative;
+}
+
+.timeline-item::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    border-radius: 999px;
+    background: var(--accent);
+    opacity: 0.16;
+}
+
+.notes-block {
+    line-height: 1.85;
+}
+
+.summary-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.empty-state {
+    border: 1px dashed var(--border-strong);
+    border-radius: var(--radius-md);
+    background: var(--surface-muted);
+}
+
+.toast {
+    border-radius: 14px;
+    box-shadow: var(--shadow);
+}
+
+.alert {
+    border-radius: 14px;
+}
+
+.footer-title {
+    font-size: 0.98rem;
+}
+
+@media (max-width: 991.98px) {
+    .site-header {
+        position: static;
+    }
+
+    .hero-card,
+    .app-card,
+    .form-card,
+    .detail-card {
+        padding: 1rem;
+    }
+
+    .header-actions {
+        margin-top: 1rem;
+    }
+}
+
+
+.link-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 0.8rem;
+    min-height: 220px;
+}
+
+.link-card p {
+    margin: 0;
+}
diff --git a/assets/js/main.js b/assets/js/main.js
index d349598..cba6d93 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,39 +1,12 @@
 document.addEventListener('DOMContentLoaded', () => {
-    const chatForm = document.getElementById('chat-form');
-    const chatInput = document.getElementById('chat-input');
-    const chatMessages = document.getElementById('chat-messages');
+    const toastElement = document.getElementById('appToast');
+    if (toastElement && window.bootstrap) {
+        const toast = new bootstrap.Toast(toastElement);
+        toast.show();
+    }
 
-    const appendMessage = (text, sender) => {
-        const msgDiv = document.createElement('div');
-        msgDiv.classList.add('message', sender);
-        msgDiv.textContent = text;
-        chatMessages.appendChild(msgDiv);
-        chatMessages.scrollTop = chatMessages.scrollHeight;
-    };
-
-    chatForm.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const message = chatInput.value.trim();
-        if (!message) return;
-
-        appendMessage(message, 'visitor');
-        chatInput.value = '';
-
-        try {
-            const response = await fetch('api/chat.php', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ message })
-            });
-            const data = await response.json();
-            
-            // Artificial delay for realism
-            setTimeout(() => {
-                appendMessage(data.reply, 'bot');
-            }, 500);
-        } catch (error) {
-            console.error('Error:', error);
-            appendMessage("Sorry, something went wrong. Please try again.", 'bot');
-        }
-    });
+    const invalidField = document.querySelector('.is-invalid');
+    if (invalidField) {
+        invalidField.focus({ preventScroll: false });
+    }
 });
diff --git a/center_application.php b/center_application.php
new file mode 100644
index 0000000..8631a6d
--- /dev/null
+++ b/center_application.php
@@ -0,0 +1,147 @@
+<?php
+declare(strict_types=1);
+require_once __DIR__ . '/includes/app.php';
+
+$flash = consume_flash();
+$values = application_defaults();
+$errors = [];
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    [$values, $errors] = validate_application_input($_POST);
+
+    if ($errors === []) {
+        try {
+            $applicationId = create_application($values);
+            set_flash('success', 'تم إرسال طلب فتح المركز بنجاح وهو الآن ظاهر في لوحة المشرف العام.');
+            header('Location: application_detail.php?id=' . urlencode((string) $applicationId));
+            exit;
+        } catch (Throwable $exception) {
+            $errors['form'] = 'تعذر حفظ الطلب حالياً. يرجى المحاولة مرة أخرى.';
+        }
+    }
+}
+
+render_page_start('طلب فتح مركز', 'apply', 'بوابة تقديم طلبات فتح المراكز الصيفية مع التحقق من بيانات التشغيل الأساسية.');
+render_flash($flash);
+?>
+<section class="py-4 py-lg-5">
+  <div class="container-xxl">
+    <div class="row g-4 align-items-start">
+      <div class="col-lg-8">
+        <div class="app-card form-card">
+          <div class="section-head mb-4">
+            <div>
+              <div class="section-title">تقديم طلب فتح مركز صيفي</div>
+              <div class="section-copy">املأ الحقول التالية ليظهر الطلب مباشرة في لوحة المشرف العام ويبدأ مسار المراجعة.</div>
+            </div>
+            <span class="header-chip">نموذج أولي</span>
+          </div>
+
+          <?php if (!empty($errors['form'])): ?>
+            <div class="alert alert-danger mb-4"><?= e($errors['form']) ?></div>
+          <?php endif; ?>
+
+          <form method="post" novalidate>
+            <div class="row g-3">
+              <div class="col-md-8">
+                <label class="form-label" for="center_name">اسم المركز</label>
+                <input class="form-control <?= isset($errors['center_name']) ? 'is-invalid' : '' ?>" id="center_name" name="center_name" value="<?= e($values['center_name']) ?>" placeholder="مثال: مركز الريادة الصيفي">
+                <?php if (isset($errors['center_name'])): ?><div class="invalid-feedback"><?= e($errors['center_name']) ?></div><?php endif; ?>
+              </div>
+              <div class="col-md-4">
+                <label class="form-label" for="city">المدينة / المنطقة</label>
+                <input class="form-control <?= isset($errors['city']) ? 'is-invalid' : '' ?>" id="city" name="city" value="<?= e($values['city']) ?>" placeholder="العاصمة">
+                <?php if (isset($errors['city'])): ?><div class="invalid-feedback"><?= e($errors['city']) ?></div><?php endif; ?>
+              </div>
+
+              <div class="col-md-6">
+                <label class="form-label" for="center_type">نوع المركز</label>
+                <select class="form-select <?= isset($errors['center_type']) ? 'is-invalid' : '' ?>" id="center_type" name="center_type">
+                  <option value="">اختر</option>
+                  <?php foreach (['بنين', 'بنات', 'مختلط'] as $option): ?>
+                    <option value="<?= e($option) ?>" <?= $values['center_type'] === $option ? 'selected' : '' ?>><?= e($option) ?></option>
+                  <?php endforeach; ?>
+                </select>
+                <?php if (isset($errors['center_type'])): ?><div class="invalid-feedback"><?= e($errors['center_type']) ?></div><?php endif; ?>
+              </div>
+              <div class="col-md-6">
+                <label class="form-label" for="gender_scope">الفئة المستهدفة</label>
+                <select class="form-select <?= isset($errors['gender_scope']) ? 'is-invalid' : '' ?>" id="gender_scope" name="gender_scope">
+                  <option value="">اختر</option>
+                  <?php foreach (['طلاب', 'طالبات', 'طلاب وطالبات'] as $option): ?>
+                    <option value="<?= e($option) ?>" <?= $values['gender_scope'] === $option ? 'selected' : '' ?>><?= e($option) ?></option>
+                  <?php endforeach; ?>
+                </select>
+                <?php if (isset($errors['gender_scope'])): ?><div class="invalid-feedback"><?= e($errors['gender_scope']) ?></div><?php endif; ?>
+              </div>
+
+              <div class="col-md-6">
+                <label class="form-label" for="director_name">اسم مدير / مديرة المركز</label>
+                <input class="form-control <?= isset($errors['director_name']) ? 'is-invalid' : '' ?>" id="director_name" name="director_name" value="<?= e($values['director_name']) ?>" placeholder="الاسم الرباعي">
+                <?php if (isset($errors['director_name'])): ?><div class="invalid-feedback"><?= e($errors['director_name']) ?></div><?php endif; ?>
+              </div>
+              <div class="col-md-3">
+                <label class="form-label" for="phone">رقم الهاتف</label>
+                <input class="form-control <?= isset($errors['phone']) ? 'is-invalid' : '' ?>" id="phone" name="phone" value="<?= e($values['phone']) ?>" placeholder="0500000000">
+                <?php if (isset($errors['phone'])): ?><div class="invalid-feedback"><?= e($errors['phone']) ?></div><?php endif; ?>
+              </div>
+              <div class="col-md-3">
+                <label class="form-label" for="email">البريد الإلكتروني</label>
+                <input type="email" class="form-control <?= isset($errors['email']) ? 'is-invalid' : '' ?>" id="email" name="email" value="<?= e($values['email']) ?>" placeholder="name@example.com">
+                <?php if (isset($errors['email'])): ?><div class="invalid-feedback"><?= e($errors['email']) ?></div><?php endif; ?>
+              </div>
+
+              <div class="col-md-4">
+                <label class="form-label" for="expected_students">الطاقة الاستيعابية المتوقعة</label>
+                <input type="number" min="10" max="2000" class="form-control <?= isset($errors['expected_students']) ? 'is-invalid' : '' ?>" id="expected_students" name="expected_students" value="<?= e($values['expected_students']) ?>" placeholder="150">
+                <?php if (isset($errors['expected_students'])): ?><div class="invalid-feedback"><?= e($errors['expected_students']) ?></div><?php endif; ?>
+              </div>
+              <div class="col-md-4">
+                <label class="form-label" for="start_date">تاريخ البداية</label>
+                <input type="date" class="form-control <?= isset($errors['start_date']) ? 'is-invalid' : '' ?>" id="start_date" name="start_date" value="<?= e($values['start_date']) ?>">
+                <?php if (isset($errors['start_date'])): ?><div class="invalid-feedback"><?= e($errors['start_date']) ?></div><?php endif; ?>
+              </div>
+              <div class="col-md-4">
+                <label class="form-label" for="end_date">تاريخ النهاية</label>
+                <input type="date" class="form-control <?= isset($errors['end_date']) ? 'is-invalid' : '' ?>" id="end_date" name="end_date" value="<?= e($values['end_date']) ?>">
+                <?php if (isset($errors['end_date'])): ?><div class="invalid-feedback"><?= e($errors['end_date']) ?></div><?php endif; ?>
+              </div>
+
+              <div class="col-12">
+                <label class="form-label" for="notes">ملخص البرنامج والاحتياجات</label>
+                <textarea class="form-control" id="notes" name="notes" rows="5" placeholder="مثال: المسارات التعليمية، عدد القاعات، الشركاء، أو أي متطلبات تشغيلية."><?= e($values['notes']) ?></textarea>
+              </div>
+            </div>
+
+            <div class="form-actions mt-4 d-flex flex-wrap gap-2">
+              <button class="btn btn-dark px-4" type="submit">إرسال الطلب</button>
+              <a class="btn btn-outline-secondary px-4" href="applications.php">العودة إلى لوحة الطلبات</a>
+            </div>
+          </form>
+        </div>
+      </div>
+      <div class="col-lg-4">
+        <div class="app-card sidebar-card mb-4">
+          <div class="section-title mb-3">ماذا يحدث بعد الإرسال؟</div>
+          <ol class="workflow-list mb-0">
+            <li>يسجل النظام الطلب ويعطيه مرجعاً مباشراً.</li>
+            <li>يشاهد المشرف العام الطلب ضمن قائمة جميع المراكز.</li>
+            <li>يتم تعيين حالة الطلب وتدوين ملاحظات التقييم الأولي.</li>
+            <li>يمكن اعتماد المركز أو طلب الاستكمال.</li>
+          </ol>
+        </div>
+        <div class="app-card sidebar-card">
+          <div class="section-title mb-3">الحقول المطلوبة في هذه النسخة</div>
+          <ul class="check-list mb-0">
+            <li>هوية المركز والمنطقة</li>
+            <li>بيانات المسؤول المباشر</li>
+            <li>الفئة المستهدفة والطاقة التشغيلية</li>
+            <li>مواعيد تنفيذ البرنامج</li>
+            <li>ملخص احتياجات التشغيل</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<?php render_page_end(); ?>
diff --git a/dashboard.php b/dashboard.php
new file mode 100644
index 0000000..2fbdc42
--- /dev/null
+++ b/dashboard.php
@@ -0,0 +1,122 @@
+<?php
+declare(strict_types=1);
+require_once __DIR__ . '/includes/app.php';
+
+$flash = consume_flash();
+$stats = dashboard_metrics();
+$recentApplications = latest_applications(5);
+
+render_page_start('لوحة القيادة', 'dashboard', 'لوحة متابعة منفصلة تعرض مؤشرات طلبات فتح المراكز وآخر الطلبات الواردة.');
+render_flash($flash);
+?>
+<section class="py-4 py-lg-5">
+  <div class="container-xxl">
+    <div class="app-card mb-4">
+      <div class="section-head flex-column flex-lg-row align-items-start align-items-lg-center gap-3">
+        <div>
+          <div class="section-title">لوحة القيادة التشغيلية</div>
+          <div class="section-copy">هذه الصفحة مخصصة للمتابعة اليومية للمشرف العام: مؤشرات سريعة، آخر الطلبات، وروابط التحرك المباشر.</div>
+        </div>
+        <div class="d-flex flex-wrap gap-2">
+          <a class="btn btn-dark btn-sm px-3" href="applications.php?status=submitted">طلبات جديدة</a>
+          <a class="btn btn-outline-secondary btn-sm px-3" href="applications.php">كل الطلبات</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="row g-3 mb-4">
+      <div class="col-sm-6 col-xl-3">
+        <div class="app-card stat-card h-100">
+          <div class="stat-label">إجمالي الطلبات</div>
+          <div class="stat-value"><?= e($stats['all']) ?></div>
+          <div class="stat-note">جميع طلبات فتح المراكز</div>
+        </div>
+      </div>
+      <div class="col-sm-6 col-xl-3">
+        <div class="app-card stat-card h-100">
+          <div class="stat-label">قيد الاستلام</div>
+          <div class="stat-value"><?= e($stats['submitted']) ?></div>
+          <div class="stat-note">بحاجة إلى بدء المراجعة</div>
+        </div>
+      </div>
+      <div class="col-sm-6 col-xl-3">
+        <div class="app-card stat-card h-100">
+          <div class="stat-label">تحت المراجعة</div>
+          <div class="stat-value"><?= e($stats['under_review']) ?></div>
+          <div class="stat-note">نشطة داخل مسار التقييم</div>
+        </div>
+      </div>
+      <div class="col-sm-6 col-xl-3">
+        <div class="app-card stat-card h-100">
+          <div class="stat-label">معتمد</div>
+          <div class="stat-value"><?= e($stats['approved']) ?></div>
+          <div class="stat-note">جاهز لاستقبال الطلاب</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row g-4">
+      <div class="col-lg-8">
+        <div class="app-card h-100">
+          <div class="section-head mb-3">
+            <div>
+              <div class="section-title">آخر الطلبات الواردة</div>
+              <div class="section-copy">قائمة مختصرة للطلبات الأحدث حتى يتمكن المشرف العام من فتح التفاصيل بسرعة.</div>
+            </div>
+            <a class="btn btn-outline-secondary btn-sm" href="applications.php">الانتقال إلى القائمة الكاملة</a>
+          </div>
+          <div class="table-responsive">
+            <table class="table app-table align-middle mb-0">
+              <thead>
+                <tr>
+                  <th>المرجع</th>
+                  <th>المركز</th>
+                  <th>المدينة</th>
+                  <th>الحالة</th>
+                  <th>السعة</th>
+                </tr>
+              </thead>
+              <tbody>
+                <?php foreach ($recentApplications as $application): ?>
+                  <tr>
+                    <td><a class="table-link" href="application_detail.php?id=<?= e((string) $application['id']) ?>">#<?= e((string) $application['id']) ?></a></td>
+                    <td>
+                      <div class="fw-semibold"><?= e((string) $application['center_name']) ?></div>
+                      <div class="text-muted small"><?= e((string) $application['director_name']) ?></div>
+                    </td>
+                    <td><?= e((string) $application['city']) ?></td>
+                    <td><?= status_badge((string) $application['status']) ?></td>
+                    <td><?= e((string) $application['expected_students']) ?> طالب</td>
+                  </tr>
+                <?php endforeach; ?>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-4">
+        <div class="app-card h-100">
+          <div class="section-title mb-3">إجراءات سريعة</div>
+          <div class="module-list">
+            <article class="module-item">
+              <h2>بدء طلب جديد</h2>
+              <p class="mb-3">الانتقال مباشرة إلى شاشة التقديم دون المرور على تفاصيل أخرى.</p>
+              <a class="btn btn-outline-secondary btn-sm" href="center_application.php">فتح النموذج</a>
+            </article>
+            <article class="module-item">
+              <h2>مراجعة شاملة</h2>
+              <p class="mb-3">فتح لوحة الطلبات مع جميع السجلات وحالاتها الحالية.</p>
+              <a class="btn btn-outline-secondary btn-sm" href="applications.php">فتح القائمة</a>
+            </article>
+            <article class="module-item">
+              <h2>هيكل النظام</h2>
+              <p class="mb-3">مراجعة النطاق الحالي والصفحات المفصولة ضمن النسخة الأولية.</p>
+              <a class="btn btn-outline-secondary btn-sm" href="modules.php">فتح الصفحة</a>
+            </article>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<?php render_page_end(); ?>
diff --git a/db/migrations/20260416_center_applications.sql b/db/migrations/20260416_center_applications.sql
new file mode 100644
index 0000000..2dea565
--- /dev/null
+++ b/db/migrations/20260416_center_applications.sql
@@ -0,0 +1,21 @@
+CREATE TABLE IF NOT EXISTS center_applications (
+    id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+    center_name VARCHAR(190) NOT NULL,
+    city VARCHAR(120) NOT NULL,
+    center_type VARCHAR(60) NOT NULL,
+    gender_scope VARCHAR(30) NOT NULL,
+    director_name VARCHAR(150) NOT NULL,
+    phone VARCHAR(60) NOT NULL,
+    email VARCHAR(190) NOT NULL,
+    expected_students INT UNSIGNED NOT NULL,
+    start_date DATE NOT NULL,
+    end_date DATE NOT NULL,
+    notes TEXT NULL,
+    status VARCHAR(30) NOT NULL DEFAULT 'submitted',
+    admin_notes TEXT NULL,
+    evaluation_score TINYINT UNSIGNED NULL,
+    submitted_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    INDEX idx_center_applications_status (status),
+    INDEX idx_center_applications_submitted_at (submitted_at)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
diff --git a/healthz.php b/healthz.php
new file mode 100644
index 0000000..0897555
--- /dev/null
+++ b/healthz.php
@@ -0,0 +1,22 @@
+<?php
+declare(strict_types=1);
+require_once __DIR__ . '/includes/app.php';
+
+header('Content-Type: application/json; charset=utf-8');
+
+try {
+    $metrics = dashboard_metrics();
+    echo json_encode([
+        'status' => 'ok',
+        'app' => project_name(),
+        'applications' => $metrics['all'],
+        'timestamp' => gmdate('c'),
+    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+} catch (Throwable $exception) {
+    http_response_code(500);
+    echo json_encode([
+        'status' => 'error',
+        'message' => 'Database unavailable',
+        'timestamp' => gmdate('c'),
+    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+}
diff --git a/includes/app.php b/includes/app.php
new file mode 100644
index 0000000..a5700d3
--- /dev/null
+++ b/includes/app.php
@@ -0,0 +1,493 @@
+<?php
+declare(strict_types=1);
+
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
+
+require_once __DIR__ . '/../db/config.php';
+
+function env_value(string $key, string $default = ''): string
+{
+    $serverValue = $_SERVER[$key] ?? null;
+    if (is_string($serverValue) && $serverValue !== '') {
+        return $serverValue;
+    }
+
+    $envValue = getenv($key);
+    return is_string($envValue) && $envValue !== '' ? $envValue : $default;
+}
+
+function project_name(): string
+{
+    return env_value('PROJECT_NAME', 'إدارة المراكز الصيفية');
+}
+
+function project_description(): string
+{
+    return env_value(
+        'PROJECT_DESCRIPTION',
+        'منصة عربية لإدارة المراكز الصيفية على مستوى الولاية، لطلبات فتح المراكز، التسجيل، والمتابعة الإشرافية.'
+    );
+}
+
+function e(null|string|int|float $value): string
+{
+    return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
+}
+
+function asset_url(string $relativePath): string
+{
+    $fullPath = dirname(__DIR__) . '/' . ltrim($relativePath, '/');
+    $version = is_file($fullPath) ? (string) filemtime($fullPath) : '1';
+    return ltrim($relativePath, '/') . '?v=' . $version;
+}
+
+function set_flash(string $type, string $message): void
+{
+    $_SESSION['flash'] = [
+        'type' => $type,
+        'message' => $message,
+    ];
+}
+
+function consume_flash(): ?array
+{
+    if (empty($_SESSION['flash']) || !is_array($_SESSION['flash'])) {
+        return null;
+    }
+
+    $flash = $_SESSION['flash'];
+    unset($_SESSION['flash']);
+
+    return $flash;
+}
+
+function status_map(): array
+{
+    return [
+        'submitted' => ['label' => 'قيد الاستلام', 'class' => 'status-submitted'],
+        'under_review' => ['label' => 'تحت المراجعة', 'class' => 'status-review'],
+        'approved' => ['label' => 'معتمد', 'class' => 'status-approved'],
+        'rejected' => ['label' => 'بحاجة إلى استكمال', 'class' => 'status-rejected'],
+    ];
+}
+
+function status_meta(string $status): array
+{
+    $map = status_map();
+    return $map[$status] ?? ['label' => 'غير معروف', 'class' => 'status-muted'];
+}
+
+function status_badge(string $status): string
+{
+    $meta = status_meta($status);
+    return '<span class="status-badge ' . e($meta['class']) . '">' . e($meta['label']) . '</span>';
+}
+
+function db_connection(): PDO
+{
+    static $pdo = null;
+    static $bootstrapped = false;
+
+    if (!$pdo instanceof PDO) {
+        $pdo = db();
+    }
+
+    if (!$bootstrapped) {
+        ensure_center_application_schema($pdo);
+        seed_center_application_demo_data($pdo);
+        $bootstrapped = true;
+    }
+
+    return $pdo;
+}
+
+function ensure_center_application_schema(PDO $pdo): void
+{
+    static $done = false;
+    if ($done) {
+        return;
+    }
+
+    $migrationPath = __DIR__ . '/../db/migrations/20260416_center_applications.sql';
+    if (is_file($migrationPath)) {
+        $sql = file_get_contents($migrationPath);
+        if (is_string($sql) && trim($sql) !== '') {
+            $pdo->exec($sql);
+        }
+    }
+
+    $done = true;
+}
+
+function seed_center_application_demo_data(PDO $pdo): void
+{
+    $count = (int) $pdo->query('SELECT COUNT(*) FROM center_applications')->fetchColumn();
+    if ($count > 0) {
+        return;
+    }
+
+    $rows = [
+        [
+            'مركز النور الصيفي', 'العاصمة', 'بنين', 'طلاب', 'أ. خالد السالمي', '0501234567', 'alnoor@example.com',
+            180, '2026-06-15', '2026-08-15', 'يركز على القرآن والمهارات الرقمية والأنشطة الرياضية المسائية.',
+            'submitted', 'بانتظار زيارة ميدانية أولية.', null,
+        ],
+        [
+            'مركز الواحة للفتيات', 'الزور', 'بنات', 'طالبات', 'أ. نورة الشيبانية', '0507654321', 'alwaha@example.com',
+            140, '2026-06-20', '2026-08-10', 'طلب تجهيز معمل حاسب وقاعة أنشطة فنية.',
+            'under_review', 'تمت مراجعة الوثائق والمطلوب استكمال خطة الأمن والسلامة.', 82,
+        ],
+        [
+            'مركز الريادة المجتمعي', 'الساحل', 'مختلط', 'طلاب وطالبات', 'أ. سيف الحارثي', '0509988776', 'riyadah@example.com',
+            220, '2026-06-18', '2026-08-20', 'يشمل برنامجاً علمياً ومساراً للابتكار ومتابعة أسرية.',
+            'approved', 'المركز مستوفٍ للاشتراطات ويُنصح ببدء التسجيل.', 94,
+        ],
+    ];
+
+    $stmt = $pdo->prepare(
+        'INSERT INTO center_applications (
+            center_name, city, center_type, gender_scope, director_name, phone, email,
+            expected_students, start_date, end_date, notes, status, admin_notes, evaluation_score,
+            submitted_at, updated_at
+        ) VALUES (
+            :center_name, :city, :center_type, :gender_scope, :director_name, :phone, :email,
+            :expected_students, :start_date, :end_date, :notes, :status, :admin_notes, :evaluation_score,
+            NOW(), NOW()
+        )'
+    );
+
+    foreach ($rows as $row) {
+        $stmt->execute([
+            ':center_name' => $row[0],
+            ':city' => $row[1],
+            ':center_type' => $row[2],
+            ':gender_scope' => $row[3],
+            ':director_name' => $row[4],
+            ':phone' => $row[5],
+            ':email' => $row[6],
+            ':expected_students' => $row[7],
+            ':start_date' => $row[8],
+            ':end_date' => $row[9],
+            ':notes' => $row[10],
+            ':status' => $row[11],
+            ':admin_notes' => $row[12],
+            ':evaluation_score' => $row[13],
+        ]);
+    }
+}
+
+function clean_text(string $value, int $limit = 255): string
+{
+    $normalized = preg_replace('/\s+/u', ' ', trim($value));
+    if (!is_string($normalized)) {
+        $normalized = trim($value);
+    }
+
+    if (function_exists('mb_substr')) {
+        return mb_substr($normalized, 0, $limit);
+    }
+
+    return substr($normalized, 0, $limit);
+}
+
+function application_defaults(): array
+{
+    return [
+        'center_name' => '',
+        'city' => '',
+        'center_type' => '',
+        'gender_scope' => '',
+        'director_name' => '',
+        'phone' => '',
+        'email' => '',
+        'expected_students' => '',
+        'start_date' => '',
+        'end_date' => '',
+        'notes' => '',
+    ];
+}
+
+function validate_application_input(array $input): array
+{
+    $data = application_defaults();
+    foreach ($data as $key => $_value) {
+        $data[$key] = clean_text((string) ($input[$key] ?? ''), $key === 'notes' ? 1000 : 190);
+    }
+
+    $errors = [];
+
+    if ($data['center_name'] === '') {
+        $errors['center_name'] = 'يرجى إدخال اسم المركز.';
+    }
+    if ($data['city'] === '') {
+        $errors['city'] = 'يرجى اختيار المدينة أو الولاية الفرعية.';
+    }
+    if ($data['center_type'] === '') {
+        $errors['center_type'] = 'يرجى تحديد نوع المركز.';
+    }
+    if ($data['gender_scope'] === '') {
+        $errors['gender_scope'] = 'يرجى تحديد الفئة المستهدفة.';
+    }
+    if ($data['director_name'] === '') {
+        $errors['director_name'] = 'يرجى إدخال اسم مدير أو مديرة المركز.';
+    }
+    if ($data['phone'] === '') {
+        $errors['phone'] = 'يرجى إدخال رقم الهاتف.';
+    }
+    if ($data['email'] === '' || !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
+        $errors['email'] = 'يرجى إدخال بريد إلكتروني صحيح.';
+    }
+
+    $expectedStudents = filter_var($input['expected_students'] ?? null, FILTER_VALIDATE_INT, [
+        'options' => ['min_range' => 10, 'max_range' => 2000],
+    ]);
+    if ($expectedStudents === false) {
+        $errors['expected_students'] = 'أدخل عدداً صحيحاً بين 10 و2000.';
+    } else {
+        $data['expected_students'] = (string) $expectedStudents;
+    }
+
+    $startDate = clean_text((string) ($input['start_date'] ?? ''), 20);
+    $endDate = clean_text((string) ($input['end_date'] ?? ''), 20);
+    $data['start_date'] = $startDate;
+    $data['end_date'] = $endDate;
+
+    if ($startDate === '') {
+        $errors['start_date'] = 'حدد تاريخ بداية البرنامج.';
+    }
+    if ($endDate === '') {
+        $errors['end_date'] = 'حدد تاريخ نهاية البرنامج.';
+    }
+    if ($startDate !== '' && $endDate !== '' && strtotime($endDate) < strtotime($startDate)) {
+        $errors['end_date'] = 'يجب أن يكون تاريخ النهاية بعد البداية.';
+    }
+
+    return [$data, $errors];
+}
+
+function create_application(array $data): int
+{
+    $pdo = db_connection();
+    $stmt = $pdo->prepare(
+        'INSERT INTO center_applications (
+            center_name, city, center_type, gender_scope, director_name, phone, email,
+            expected_students, start_date, end_date, notes, status, submitted_at, updated_at
+        ) VALUES (
+            :center_name, :city, :center_type, :gender_scope, :director_name, :phone, :email,
+            :expected_students, :start_date, :end_date, :notes, :status, NOW(), NOW()
+        )'
+    );
+
+    $stmt->execute([
+        ':center_name' => $data['center_name'],
+        ':city' => $data['city'],
+        ':center_type' => $data['center_type'],
+        ':gender_scope' => $data['gender_scope'],
+        ':director_name' => $data['director_name'],
+        ':phone' => $data['phone'],
+        ':email' => $data['email'],
+        ':expected_students' => (int) $data['expected_students'],
+        ':start_date' => $data['start_date'],
+        ':end_date' => $data['end_date'],
+        ':notes' => $data['notes'],
+        ':status' => 'submitted',
+    ]);
+
+    return (int) $pdo->lastInsertId();
+}
+
+function list_applications(string $status = 'all'): array
+{
+    $pdo = db_connection();
+    if ($status === 'all' || !array_key_exists($status, status_map())) {
+        $stmt = $pdo->query('SELECT * FROM center_applications ORDER BY submitted_at DESC, id DESC');
+        return $stmt->fetchAll();
+    }
+
+    $stmt = $pdo->prepare('SELECT * FROM center_applications WHERE status = :status ORDER BY submitted_at DESC, id DESC');
+    $stmt->execute([':status' => $status]);
+    return $stmt->fetchAll();
+}
+
+function get_application(int $id): ?array
+{
+    $pdo = db_connection();
+    $stmt = $pdo->prepare('SELECT * FROM center_applications WHERE id = :id LIMIT 1');
+    $stmt->execute([':id' => $id]);
+    $row = $stmt->fetch();
+    return $row ?: null;
+}
+
+function update_application_review(int $id, string $status, string $adminNotes, ?int $evaluationScore): void
+{
+    $allowed = array_keys(status_map());
+    if (!in_array($status, $allowed, true)) {
+        throw new InvalidArgumentException('Invalid status value.');
+    }
+
+    $pdo = db_connection();
+    $stmt = $pdo->prepare(
+        'UPDATE center_applications
+         SET status = :status, admin_notes = :admin_notes, evaluation_score = :evaluation_score, updated_at = NOW()
+         WHERE id = :id'
+    );
+    $stmt->bindValue(':status', $status, PDO::PARAM_STR);
+    $stmt->bindValue(':admin_notes', $adminNotes !== '' ? $adminNotes : null, $adminNotes !== '' ? PDO::PARAM_STR : PDO::PARAM_NULL);
+    $stmt->bindValue(':evaluation_score', $evaluationScore, $evaluationScore !== null ? PDO::PARAM_INT : PDO::PARAM_NULL);
+    $stmt->bindValue(':id', $id, PDO::PARAM_INT);
+    $stmt->execute();
+}
+
+function dashboard_metrics(): array
+{
+    $pdo = db_connection();
+    $totals = [
+        'all' => 0,
+        'submitted' => 0,
+        'under_review' => 0,
+        'approved' => 0,
+        'rejected' => 0,
+        'expected_students' => 0,
+    ];
+
+    $summary = $pdo->query('SELECT status, COUNT(*) AS total FROM center_applications GROUP BY status')->fetchAll();
+    foreach ($summary as $row) {
+        $status = (string) ($row['status'] ?? '');
+        $count = (int) ($row['total'] ?? 0);
+        if (array_key_exists($status, $totals)) {
+            $totals[$status] = $count;
+            $totals['all'] += $count;
+        }
+    }
+
+    $totals['expected_students'] = (int) $pdo->query('SELECT COALESCE(SUM(expected_students), 0) FROM center_applications')->fetchColumn();
+
+    return $totals;
+}
+
+function latest_applications(int $limit = 5): array
+{
+    $pdo = db_connection();
+    $stmt = $pdo->prepare('SELECT * FROM center_applications ORDER BY submitted_at DESC, id DESC LIMIT :limit');
+    $stmt->bindValue(':limit', $limit, PDO::PARAM_INT);
+    $stmt->execute();
+    return $stmt->fetchAll();
+}
+
+function render_page_start(string $pageTitle, string $active = 'home', string $pageDescription = ''): void
+{
+    $projectName = project_name();
+    $description = $pageDescription !== '' ? $pageDescription : project_description();
+    $projectImageUrl = env_value('PROJECT_IMAGE_URL');
+    ?>
+<!doctype html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title><?= e($pageTitle) ?> | <?= e($projectName) ?></title>
+  <meta name="description" content="<?= e($description) ?>" />
+<?php if ($description !== ''): ?>
+  <meta property="og:description" content="<?= e($description) ?>" />
+  <meta property="twitter:description" content="<?= e($description) ?>" />
+<?php endif; ?>
+<?php if ($projectImageUrl): ?>
+  <meta property="og:image" content="<?= e($projectImageUrl) ?>" />
+  <meta property="twitter:image" content="<?= e($projectImageUrl) ?>" />
+<?php endif; ?>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="<?= e(asset_url('assets/css/custom.css')) ?>">
+</head>
+<body>
+  <div class="app-shell">
+    <header class="site-header border-bottom">
+      <div class="container-xxl py-3">
+        <nav class="navbar navbar-expand-lg p-0">
+          <div class="container-fluid p-0 align-items-center gap-3">
+            <a class="navbar-brand brand-mark d-flex align-items-center gap-3 m-0" href="index.php">
+              <span class="brand-badge">م</span>
+              <span>
+                <span class="d-block brand-title"><?= e($projectName) ?></span>
+                <span class="d-block brand-subtitle">منصة الولاية لإدارة المراكز الصيفية</span>
+              </span>
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="تبديل التنقل">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse justify-content-between" id="mainNav">
+              <ul class="navbar-nav ms-auto me-0 mb-2 mb-lg-0 gap-lg-2">
+                <li class="nav-item"><a class="nav-link <?= $active === 'home' ? 'active' : '' ?>" href="index.php">الرئيسية</a></li>
+                <li class="nav-item"><a class="nav-link <?= $active === 'dashboard' ? 'active' : '' ?>" href="dashboard.php">لوحة القيادة</a></li>
+                <li class="nav-item"><a class="nav-link <?= $active === 'apply' ? 'active' : '' ?>" href="center_application.php">طلب فتح مركز</a></li>
+                <li class="nav-item"><a class="nav-link <?= $active === 'applications' ? 'active' : '' ?>" href="applications.php">لوحة الطلبات</a></li>
+                <li class="nav-item"><a class="nav-link <?= $active === 'modules' ? 'active' : '' ?>" href="modules.php">هيكل النظام</a></li>
+              </ul>
+              <div class="d-flex align-items-center gap-2 header-actions">
+                <span class="header-chip">صلاحية: المشرف العام</span>
+                <a class="btn btn-dark btn-sm px-3" href="applications.php?status=submitted">مراجعة سريعة</a>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </header>
+    <main>
+<?php
+}
+
+function render_flash(?array $flash): void
+{
+    if (!$flash || empty($flash['message'])) {
+        return;
+    }
+
+    $toastClass = match ($flash['type'] ?? '') {
+        'success' => 'text-bg-success',
+        'error' => 'text-bg-danger',
+        default => 'text-bg-dark',
+    };
+    ?>
+    <div class="toast-container position-fixed top-0 start-0 p-3">
+      <div id="appToast" class="toast align-items-center border-0 <?= e($toastClass) ?>" role="status" aria-live="polite" aria-atomic="true" data-bs-delay="5000">
+        <div class="d-flex">
+          <div class="toast-body"><?= e((string) $flash['message']) ?></div>
+          <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="إغلاق"></button>
+        </div>
+      </div>
+    </div>
+    <?php
+}
+
+function render_page_end(): void
+{
+    $year = date('Y');
+    ?>
+    </main>
+    <footer class="site-footer border-top mt-5">
+      <div class="container-xxl py-4 d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-between gap-3">
+        <div>
+          <div class="footer-title">تشغيل تجريبي للمشرف العام على مستوى الولاية</div>
+          <div class="footer-meta">© <?= e($year) ?> <?= e(project_name()) ?> — واجهة عربية RTL، Bootstrap 5، وPHP.</div>
+        </div>
+        <div class="d-flex flex-wrap gap-2">
+          <a class="btn btn-outline-secondary btn-sm" href="dashboard.php">لوحة القيادة</a>
+          <a class="btn btn-outline-secondary btn-sm" href="center_application.php">إنشاء طلب جديد</a>
+          <a class="btn btn-outline-secondary btn-sm" href="applications.php">استعراض جميع الطلبات</a>
+          <a class="btn btn-outline-secondary btn-sm" href="modules.php">هيكل النظام</a>
+          <a class="btn btn-outline-secondary btn-sm" href="healthz.php">فحص الحالة</a>
+        </div>
+      </div>
+    </footer>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>
+  <script src="<?= e(asset_url('assets/js/main.js')) ?>" defer></script>
+</body>
+</html>
+<?php
+}
diff --git a/index.php b/index.php
index 7205f3d..37c4a51 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,107 @@
 <?php
 declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once __DIR__ . '/includes/app.php';
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+$flash = consume_flash();
+$stats = dashboard_metrics();
+
+render_page_start('الرئيسية', 'home', 'الصفحة الرئيسية المنظمة لمنصة إدارة المراكز الصيفية مع وصول سريع إلى كل شاشة بشكل منفصل.');
+render_flash($flash);
 ?>
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
-</head>
-<body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
+<section class="hero-section py-4 py-lg-5">
+  <div class="container-xxl">
+    <div class="row g-4 align-items-stretch">
+      <div class="col-lg-7">
+        <div class="app-card hero-card h-100">
+          <div class="eyebrow mb-3">واجهة رئيسية منظمة للمشرف العام</div>
+          <h1 class="hero-title mb-3">كل مهمة في صفحة مستقلة وواضحة.</h1>
+          <p class="hero-copy mb-4">تم تنظيم النسخة الحالية بحيث تكون الصفحة الرئيسية نقطة دخول فقط، بينما توجد صفحة منفصلة للمتابعة التشغيلية، وصفحة مستقلة للطلبات، وصفحة خاصة ببنية النظام والنطاق الحالي.</p>
+          <div class="d-flex flex-wrap gap-2">
+            <a class="btn btn-dark px-4" href="dashboard.php">فتح لوحة القيادة</a>
+            <a class="btn btn-outline-secondary px-4" href="center_application.php">طلب فتح مركز</a>
+            <a class="btn btn-outline-secondary px-4" href="applications.php">لوحة الطلبات</a>
+          </div>
+          <div class="hero-meta mt-4">
+            <span>تنظيم أفضل للشاشات</span>
+            <span>واجهة عربية RTL</span>
+            <span>جاهزة للتوسع إلى التسجيل والحضور</span>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-5">
+        <div class="row g-3 h-100">
+          <div class="col-6">
+            <div class="app-card stat-card h-100">
+              <div class="stat-label">إجمالي الطلبات</div>
+              <div class="stat-value"><?= e($stats['all']) ?></div>
+              <div class="stat-note">إجمالي الطلبات المسجلة</div>
+            </div>
+          </div>
+          <div class="col-6">
+            <div class="app-card stat-card h-100">
+              <div class="stat-label">المعتمد</div>
+              <div class="stat-value"><?= e($stats['approved']) ?></div>
+              <div class="stat-note">مراكز جاهزة للتشغيل</div>
+            </div>
+          </div>
+          <div class="col-6">
+            <div class="app-card stat-card h-100">
+              <div class="stat-label">تحت المراجعة</div>
+              <div class="stat-value"><?= e($stats['under_review']) ?></div>
+              <div class="stat-note">طلبات تحتاج متابعة</div>
+            </div>
+          </div>
+          <div class="col-6">
+            <div class="app-card stat-card h-100">
+              <div class="stat-label">الطاقة المقترحة</div>
+              <div class="stat-value"><?= e($stats['expected_students']) ?></div>
+              <div class="stat-note">عدد الطلاب المتوقع</div>
+            </div>
+          </div>
+        </div>
       </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
-</body>
-</html>
+  </div>
+</section>
+
+<section class="py-2 py-lg-4">
+  <div class="container-xxl">
+    <div class="section-head mb-3">
+      <div>
+        <div class="section-title">الوصول السريع حسب المهمة</div>
+        <div class="section-copy">بدلاً من خلط كل شيء في صفحة واحدة، كل جزء أصبح له شاشة مستقلة ليسهل على المستخدم الوصول والتنقل.</div>
+      </div>
+    </div>
+    <div class="row g-4">
+      <div class="col-md-6 col-xl-3">
+        <article class="app-card link-card h-100">
+          <div class="small-title mb-2">لوحة القيادة</div>
+          <p class="text-muted mb-3">مؤشرات سريعة وآخر الطلبات الواردة للمشرف العام.</p>
+          <a class="btn btn-outline-secondary btn-sm" href="dashboard.php">فتح الصفحة</a>
+        </article>
+      </div>
+      <div class="col-md-6 col-xl-3">
+        <article class="app-card link-card h-100">
+          <div class="small-title mb-2">طلب فتح مركز</div>
+          <p class="text-muted mb-3">نموذج التقديم الكامل في شاشة منفصلة بدون تشتيت.</p>
+          <a class="btn btn-outline-secondary btn-sm" href="center_application.php">فتح الصفحة</a>
+        </article>
+      </div>
+      <div class="col-md-6 col-xl-3">
+        <article class="app-card link-card h-100">
+          <div class="small-title mb-2">لوحة الطلبات</div>
+          <p class="text-muted mb-3">جدول موحد مع التصفية بالحالة والانتقال للتفاصيل.</p>
+          <a class="btn btn-outline-secondary btn-sm" href="applications.php">فتح الصفحة</a>
+        </article>
+      </div>
+      <div class="col-md-6 col-xl-3">
+        <article class="app-card link-card h-100">
+          <div class="small-title mb-2">هيكل النظام</div>
+          <p class="text-muted mb-3">صفحة مخصصة للنطاق الحالي ومسار التوسع القادم.</p>
+          <a class="btn btn-outline-secondary btn-sm" href="modules.php">فتح الصفحة</a>
+        </article>
+      </div>
+    </div>
+  </div>
+</section>
+<?php render_page_end(); ?>
diff --git a/modules.php b/modules.php
new file mode 100644
index 0000000..cfb2f78
--- /dev/null
+++ b/modules.php
@@ -0,0 +1,69 @@
+<?php
+declare(strict_types=1);
+require_once __DIR__ . '/includes/app.php';
+
+$flash = consume_flash();
+
+render_page_start('هيكل النظام', 'modules', 'صفحة منفصلة تعرض تنظيم وحدات تطبيق إدارة المراكز الصيفية والنطاق الحالي للنسخة الأولية.');
+render_flash($flash);
+?>
+<section class="py-4 py-lg-5">
+  <div class="container-xxl">
+    <div class="app-card mb-4">
+      <div class="section-title mb-2">هيكل الصفحات والوحدات</div>
+      <p class="text-muted mb-0">تم فصل المحتوى التعريفي والتنظيمي في هذه الصفحة حتى تبقى الصفحات التشغيلية مركزة: التقديم في شاشة، المتابعة في شاشة، والتفاصيل في شاشة مستقلة.</p>
+    </div>
+
+    <div class="row g-4">
+      <div class="col-lg-7">
+        <div class="app-card h-100">
+          <div class="section-title mb-3">النطاق الحالي في هذه النسخة</div>
+          <div class="module-list">
+            <article class="module-item">
+              <h2>1. الرئيسية</h2>
+              <p>صفحة دخول مرتبة مع بطاقات وصول سريع إلى كل جزء من النظام دون خلط التفاصيل التشغيلية.</p>
+            </article>
+            <article class="module-item">
+              <h2>2. لوحة القيادة</h2>
+              <p>شاشة متابعة يومية تعرض المؤشرات وآخر الطلبات الواردة للمشرف العام.</p>
+            </article>
+            <article class="module-item">
+              <h2>3. طلب فتح مركز</h2>
+              <p>نموذج عربي كامل مع تحقق للحقول الأساسية والطاقة التشغيلية ومواعيد البرنامج.</p>
+            </article>
+            <article class="module-item">
+              <h2>4. لوحة الطلبات</h2>
+              <p>قائمة موحدة مع فرز بالحالة لتسهيل العمل الإشرافي والانتقال السريع للتفاصيل.</p>
+            </article>
+            <article class="module-item">
+              <h2>5. صفحة المراجعة التفصيلية</h2>
+              <p>عرض بيانات المركز، تسجيل الملاحظات، تحديث الحالة، وإسناد التقييم الأولي.</p>
+            </article>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-5">
+        <div class="app-card h-100">
+          <div class="section-title mb-3">مسار الاستخدام الحالي</div>
+          <ol class="workflow-list mb-4">
+            <li>يرسل مدير المركز طلب الافتتاح من شاشة مستقلة.</li>
+            <li>تظهر الطلبات فوراً داخل لوحة الطلبات ولوحة القيادة.</li>
+            <li>يفتح المشرف العام صفحة التفاصيل لإضافة الملاحظات والتقييم.</li>
+            <li>تُحدث الحالة إلى قيد الاستلام أو تحت المراجعة أو معتمد أو بحاجة إلى استكمال.</li>
+          </ol>
+
+          <div class="section-title mb-2">ما الذي تم تحسينه؟</div>
+          <p class="text-muted mb-4">أصبح التنظيم أوضح لأن كل صفحة الآن تؤدي غرضاً واحداً محدداً، وهذا أسهل للتوسع لاحقاً إلى التسجيل الطلابي، الحضور، والتقييمات التشغيلية.</p>
+
+          <div class="section-title mb-2">المرحلة التالية المقترحة</div>
+          <p class="text-muted mb-3">بعد هذا التنظيم، الخطوة الطبيعية التالية هي بناء وحدات الطلاب والتسجيل في المراكز المعتمدة مع نفس المبدأ: صفحة مستقلة لكل وظيفة.</p>
+          <div class="d-flex flex-wrap gap-2">
+            <a class="btn btn-dark btn-sm" href="dashboard.php">لوحة القيادة</a>
+            <a class="btn btn-outline-secondary btn-sm" href="application_detail.php?id=1">طلب نموذجي</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<?php render_page_end(); ?>