From 596f5e6603ab99cdf987bc909dec4bfbc3e210bf Mon Sep 17 00:00:00 2001
From: Hamza-Ayed <hamzaayedflutter@gmail.com>
Date: Thu, 27 Aug 2026 03:34:14 +0300
Subject: [PATCH] feat: Complete 3 core pillars - Realtime Workerman WebSocket
 Chat, Interactive Socratic Video Player with 45s Remedial Rewind, and
 Multi-level AI Exam Taking Engine

---
 backend/app/Views/StudentPortal.php | 889 +++++++++++++++++++++-------
 backend/app/Views/TeacherPortal.php |  21 +-
 2 files changed, 674 insertions(+), 236 deletions(-)

diff --git a/backend/app/Views/StudentPortal.php b/backend/app/Views/StudentPortal.php
index 9974602..a726e1a 100644
--- a/backend/app/Views/StudentPortal.php
+++ b/backend/app/Views/StudentPortal.php
@@ -20,31 +20,33 @@ class StudentPortal
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 
-    <!-- Pure Self-Contained Luxury CSS (Zero External CDN Dependency) -->
+    <!-- Apple-Grade Luxury Cupertino CSS -->
     <style>
         :root {
-            --bg-dark: #0B132B;
-            --bg-card: #16203D;
-            --bg-card-hover: #1E2C52;
-            --bg-input: #090E20;
-            --border: #2A3B66;
-            --border-focus: #00F5D4;
-            --text-primary: #FFFFFF;
-            --text-secondary: #CBD5E1;
-            --text-muted: #8E9FB8;
+            --bg-dark: #000000;
+            --bg-card: #121214;
+            --bg-card-hover: #18181B;
+            --bg-input: #09090B;
+            --border: rgba(255, 255, 255, 0.08);
+            --border-focus: #0071E3;
+            --text-primary: #F5F5F7;
+            --text-secondary: #A1A1A6;
+            --text-muted: #6E6E73;
+            --accent-blue: #0071E3;
+            --accent-blue-hover: #0077ED;
             --accent-cyan: #00F5D4;
-            --accent-cyan-dark: #00BAA1;
-            --accent-gold: #FFD166;
+            --accent-gold: #F59E0B;
             --accent-red: #EF4444;
             --accent-green: #10B981;
-            --accent-purple: #A78BFA;
+            --accent-purple: #8B5CF6;
         }
 
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
-            font-family: -apple-system, BlinkMacSystemFont, "Alexandria", "SF Pro Display", "SF Pro Text", "SF Arabic", "Segoe UI", Roboto, sans-serif;
+            font-family: -apple-system, BlinkMacSystemFont, "SF Pro AR", "SF Pro Display", "SF Pro Text", "SF Arabic", "Alexandria", "Segoe UI", Roboto, sans-serif;
+            letter-spacing: -0.015em;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
         }
@@ -55,173 +57,389 @@ class StudentPortal
             min-height: 100vh;
             display: flex;
             flex-direction: column;
-            justify-content: space-between;
+            overflow-x: hidden;
             background-image: 
-                radial-gradient(circle at 15% 15%, rgba(0, 245, 212, 0.06) 0%, transparent 40%),
-                radial-gradient(circle at 85% 85%, rgba(255, 209, 102, 0.04) 0%, transparent 40%),
-                linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
-                linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
-            background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
+                radial-gradient(circle at 50% 0%, rgba(0, 113, 227, 0.15) 0%, transparent 60%),
+                radial-gradient(circle at 90% 40%, rgba(245, 158, 11, 0.05) 0%, transparent 50%),
+                radial-gradient(circle at 10% 80%, rgba(0, 245, 212, 0.05) 0%, transparent 50%);
+            background-size: 100% 100%;
         }
 
-        .container { max-width: 1240px; margin: 0 auto; padding: 0 20px; width: 100%; }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 24px;
+            width: 100%;
+        }
 
-        /* Header */
+        /* Apple Glass Header */
         header {
             border-bottom: 1px solid var(--border);
-            background-color: rgba(11, 19, 43, 0.95);
-            backdrop-filter: blur(12px);
+            background-color: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(24px) saturate(180%);
             position: sticky;
             top: 0;
-            z-index: 50;
+            z-index: 100;
         }
-
-        .header-content { height: 68px; display: flex; align-items: center; justify-content: space-between; }
-        .logo-area { display: flex; align-items: center; gap: 12px; text-decoration: none; }
-        .logo-badge {
-            width: 42px; height: 42px; border-radius: 12px;
-            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark));
-            display: flex; align-items: center; justify-content: center;
-            color: #0B132B; font-size: 20px; font-weight: 900;
-            box-shadow: 0 0 20px rgba(0, 245, 212, 0.35);
+        .header-content {
+            height: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .logo-area {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            text-decoration: none;
+        }
+        .logo-img {
+            width: 38px;
+            height: 38px;
+            border-radius: 10px;
+            object-fit: cover;
+            box-shadow: 0 0 16px rgba(0, 113, 227, 0.35);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .logo-area:hover .logo-img { transform: scale(1.06); }
+        .brand-title {
+            font-size: 19px;
+            font-weight: 800;
+            color: #FFFFFF;
+            letter-spacing: -0.03em;
         }
-        .brand-title { font-size: 20px; font-weight: 900; color: #FFFFFF; letter-spacing: 0.5px; }
         .portal-pill {
-            font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
-            background: rgba(0, 245, 212, 0.12); color: var(--accent-cyan);
-            border: 1px solid rgba(0, 245, 212, 0.35); margin-right: 8px;
+            font-size: 11px;
+            font-weight: 700;
+            color: var(--accent-cyan);
+            background: rgba(0, 245, 212, 0.1);
+            border: 1px solid rgba(0, 245, 212, 0.25);
+            padding: 3px 10px;
+            border-radius: 980px;
+            margin-right: 8px;
         }
 
-        .nav-link { font-size: 13px; color: var(--text-secondary); text-decoration: none; display: flex; align-items: center; gap: 6px; }
-        .nav-link:hover { color: var(--accent-gold); }
-        .nav-link-highlight { color: var(--accent-gold); font-weight: 800; text-decoration: underline; }
-
-        /* WS Status Badge */
         .ws-badge {
-            display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800;
-            padding: 4px 10px; border-radius: 999px;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 11px;
+            font-weight: 700;
+            padding: 4px 12px;
+            border-radius: 980px;
+            transition: all 0.3s;
         }
-        .ws-online { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.4); color: #34D399; }
-        .ws-offline { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.4); color: #FCA5A5; }
-        .ws-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
+        .ws-online { background: rgba(16, 185, 129, 0.15); color: #34D399; border: 1px solid rgba(16, 185, 129, 0.3); }
+        .ws-offline { background: rgba(239, 68, 68, 0.15); color: #F87171; border: 1px solid rgba(239, 68, 68, 0.3); }
+        .ws-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
 
-        /* Main Content */
-        main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 36px 0; }
-
-        .auth-card-wrapper { width: 100%; max-width: 480px; margin: 0 auto; }
-        .auth-header { text-align: center; margin-bottom: 24px; }
-        .icon-box {
-            width: 64px; height: 64px; border-radius: 18px;
-            background: var(--bg-card); border: 1px solid rgba(0, 245, 212, 0.4);
-            display: inline-flex; align-items: center; justify-content: center;
-            color: var(--accent-cyan); margin-bottom: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+        /* Auth Form Box */
+        .auth-card-wrapper {
+            max-width: 440px;
+            margin: 60px auto 40px;
+            width: 100%;
         }
-        .auth-title { font-size: 24px; font-weight: 900; color: #FFFFFF; margin-bottom: 6px; }
-        .auth-subtitle { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
+        .auth-header { text-align: center; margin-bottom: 28px; }
+        .auth-title { font-size: 26px; font-weight: 800; color: #FFF; margin-bottom: 8px; }
+        .auth-subtitle { font-size: 14px; color: var(--text-secondary); }
         .auth-box {
-            background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px;
-            padding: 32px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); position: relative;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 28px;
+            padding: 36px;
+            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
         }
 
-        /* Forms */
+        /* Form Controls */
         .form-group { margin-bottom: 20px; }
-        .form-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
+        .form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
         .input-text {
-            width: 100%; background: var(--bg-input); border: 1px solid var(--border);
-            border-radius: 12px; padding: 12px 16px; font-size: 14px; color: #FFFFFF; outline: none;
-            transition: border-color 0.2s, box-shadow 0.2s;
+            width: 100%;
+            padding: 13px 16px;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            color: #FFF;
+            font-size: 14px;
+            outline: none;
+            transition: all 0.2s;
         }
-        .input-text:focus { border-color: var(--accent-cyan); box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.2); }
-        .phone-input-group { display: flex; align-items: center; direction: ltr; position: relative; }
+        .input-text:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25); }
+        .phone-input-group { display: flex; gap: 8px; }
         .country-badge {
-            position: absolute; left: 10px; background: #121A33; border: 1px solid var(--border);
-            border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--accent-cyan);
-            user-select: none;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            padding: 0 14px;
+            display: flex;
+            align-items: center;
+            font-weight: 700;
+            font-size: 13px;
+            color: var(--text-secondary);
         }
-        .input-phone { padding-left: 96px !important; font-family: monospace; font-size: 15px; letter-spacing: 1px; }
-        .form-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; display: block; }
-
         .btn-primary {
-            width: 100%; padding: 14px; background: linear-gradient(135deg, #00F5D4 0%, #00BAA1 100%);
-            color: #0B132B !important; border: none; border-radius: 12px; font-size: 15px; font-weight: 900 !important;
-            cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
-            box-shadow: 0 8px 24px rgba(0, 245, 212, 0.35); transition: transform 0.15s, opacity 0.15s;
+            width: 100%;
+            padding: 13px;
+            border-radius: 980px;
+            border: none;
+            background: var(--accent-blue);
+            color: #FFF;
+            font-size: 14.5px;
+            font-weight: 700;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+            box-shadow: 0 4px 20px rgba(0, 113, 227, 0.4);
         }
-        .btn-primary:hover { opacity: 0.95; transform: translateY(-1px); }
-        .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
-        .btn-secondary { background: none; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; }
-        .btn-link-cyan { color: var(--accent-cyan); font-weight: 700; text-decoration: underline; }
-        .otp-input { text-align: center; font-size: 26px; font-family: monospace; letter-spacing: 10px; font-weight: 900; color: var(--accent-cyan); border-color: rgba(0, 245, 212, 0.5); padding: 14px; }
+        .btn-primary:hover { background: var(--accent-blue-hover); transform: scale(1.01); }
+        .btn-secondary {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            font-size: 13px;
+            cursor: pointer;
+            transition: color 0.2s;
+        }
+        .btn-secondary:hover { color: #FFF; }
 
-        /* Alerts */
-        .alert { padding: 12px 16px; border-radius: 12px; font-size: 12.5px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
-        .alert-error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.4); color: #FCA5A5; }
-        .alert-success { background: rgba(0, 245, 212, 0.15); border: 1px solid rgba(0, 245, 212, 0.4); color: var(--accent-cyan); }
-
-        /* Dashboard & Learning Center */
+        /* Dashboard UI */
         .dashboard-hero {
-            background: linear-gradient(135deg, var(--bg-card), var(--bg-card-hover));
-            border: 1px solid var(--border); border-radius: 24px; padding: 28px;
-            display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
+            background: linear-gradient(135deg, rgba(18, 18, 20, 0.95), rgba(24, 24, 27, 0.8));
+            border: 1px solid var(--border);
+            border-radius: 28px;
+            padding: 32px 36px;
+            margin: 32px 0 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 24px;
         }
         .readiness-box {
-            background: rgba(11, 19, 43, 0.85); border: 1px solid var(--border);
-            border-radius: 16px; padding: 14px 20px; display: flex; align-items: center; gap: 14px; min-width: 230px;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            padding: 16px 24px;
         }
         .gauge-circle {
-            width: 54px; height: 54px; border-radius: 50%; border: 4px solid var(--accent-cyan);
-            display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 900;
-            color: var(--accent-cyan); box-shadow: 0 0 16px rgba(0, 245, 212, 0.3);
+            width: 58px;
+            height: 58px;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(0, 245, 212, 0.2) 0%, transparent 70%);
+            border: 3px solid var(--accent-cyan);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            font-weight: 900;
+            color: #FFFFFF;
+            box-shadow: 0 0 16px rgba(0, 245, 212, 0.3);
         }
 
-        .tabs-nav { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
+        /* Tabs Nav */
+        .tabs-nav {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 24px;
+            border-bottom: 1px solid var(--border);
+            padding-bottom: 12px;
+            overflow-x: auto;
+        }
         .tab-btn {
-            background: rgba(22, 32, 61, 0.6); border: 1px solid var(--border);
-            color: var(--text-secondary); font-size: 13px; font-weight: 700; padding: 10px 18px;
-            border-radius: 12px; cursor: pointer; transition: 0.2s;
+            background: rgba(255, 255, 255, 0.04);
+            border: 1px solid var(--border);
+            color: var(--text-secondary);
+            font-size: 13.5px;
+            font-weight: 700;
+            padding: 10px 22px;
+            border-radius: 980px;
+            cursor: pointer;
+            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+            white-space: nowrap;
         }
+        .tab-btn:hover { background: rgba(255, 255, 255, 0.08); color: #FFF; }
         .tab-btn.active {
-            background: linear-gradient(135deg, rgba(0,245,212,0.15), rgba(0,186,161,0.15));
-            border-color: var(--accent-cyan); color: var(--accent-cyan); font-weight: 900;
+            background: var(--accent-blue);
+            color: #FFF;
+            border-color: var(--accent-blue);
+            box-shadow: 0 2px 12px rgba(0, 113, 227, 0.4);
         }
 
-        .studio-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 28px; }
-
-        /* Video Interactive Experience */
-        .video-player-frame {
-            position: relative; width: 100%; aspect-ratio: 16/9; background: #000;
-            border-radius: 16px; overflow: hidden; border: 1px solid var(--border);
-            display: flex; align-items: center; justify-content: center;
+        .studio-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 28px;
+            padding: 32px;
+            margin-bottom: 40px;
         }
 
+        /* Socratic Interactive Video Player */
+        .video-container {
+            position: relative;
+            background: #000000;
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
+        }
+        .video-element {
+            width: 100%;
+            height: 480px;
+            object-fit: cover;
+            display: block;
+            background: #050507;
+        }
+        .player-bar {
+            background: rgba(18, 18, 20, 0.95);
+            border-top: 1px solid var(--border);
+            padding: 14px 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 16px;
+        }
+        .time-badge {
+            font-family: monospace;
+            font-size: 13px;
+            font-weight: 700;
+            color: var(--accent-cyan);
+            background: rgba(0, 245, 212, 0.1);
+            padding: 4px 10px;
+            border-radius: 6px;
+        }
+
+        /* Socratic Checkpoint Modal Overlay */
         .socratic-overlay {
-            position: absolute; inset: 0; background: rgba(11, 19, 43, 0.95); backdrop-filter: blur(8px);
-            display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px;
-            z-index: 40; text-align: center;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.88);
+            backdrop-filter: blur(20px);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 32px;
+            z-index: 10;
+            text-align: center;
+            animation: fadeIn 0.3s ease;
         }
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 
         .quiz-option-btn {
-            width: 100%; max-width: 500px; text-align: right; padding: 12px 18px; margin-bottom: 10px;
-            background: #16203D; border: 1px solid var(--border); border-radius: 12px; color: #FFFFFF;
-            font-size: 14px; font-weight: 700; cursor: pointer; transition: 0.2s;
+            width: 100%;
+            max-width: 580px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            color: #FFF;
+            padding: 14px 20px;
+            border-radius: 14px;
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 10px;
+            cursor: pointer;
+            text-align: right;
+            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .quiz-option-btn:hover {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: var(--accent-blue);
+            transform: translateX(-4px);
+        }
+        .quiz-option-btn.correct {
+            background: rgba(16, 185, 129, 0.25) !important;
+            border-color: #10B981 !important;
+            color: #34D399 !important;
+        }
+        .quiz-option-btn.wrong {
+            background: rgba(239, 68, 68, 0.25) !important;
+            border-color: #EF4444 !important;
+            color: #F87171 !important;
         }
-        .quiz-option-btn:hover { border-color: var(--accent-cyan); }
-        .quiz-option-btn.correct { background: rgba(16,185,129,0.2); border-color: #10B981; color: #6EE7B7; }
-        .quiz-option-btn.wrong { background: rgba(239,68,68,0.2); border-color: #EF4444; color: #FCA5A5; }
 
-        /* Student Live Chat with Teacher */
+        /* Real-time Chat Box */
         .student-chat-box {
-            height: 460px; background: rgba(11, 19, 43, 0.85); border: 1px solid var(--border);
-            border-radius: 16px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            height: 480px;
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            overflow: hidden;
+            background: #09090B;
+        }
+        .chat-messages {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+        .chat-msg {
+            max-width: 75%;
+            padding: 12px 18px;
+            border-radius: 18px;
+            font-size: 14px;
+            line-height: 1.6;
+        }
+        .chat-msg.student {
+            align-self: flex-start;
+            background: var(--accent-blue);
+            color: #FFF;
+            border-bottom-right-radius: 4px;
+        }
+        .chat-msg.teacher {
+            align-self: flex-end;
+            background: #18181B;
+            border: 1px solid var(--border);
+            color: #FFF;
+            border-bottom-left-radius: 4px;
+        }
+        .chat-time { display: block; font-size: 11px; opacity: 0.6; margin-top: 4px; }
+        .chat-input-bar {
+            padding: 14px;
+            background: #121214;
+            border-top: 1px solid var(--border);
+            display: flex;
+            gap: 10px;
         }
-        .chat-messages { padding: 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
-        .chat-msg { max-width: 75%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
-        .chat-msg.student { align-self: flex-end; background: linear-gradient(135deg, #00F5D4, #00BAA1); color: #0B132B; font-weight: 700; border-bottom-left-radius: 2px; }
-        .chat-msg.teacher { align-self: flex-start; background: #1E2D5A; color: #E2E8F0; border-bottom-right-radius: 2px; }
-        .chat-time { font-size: 9.5px; opacity: 0.7; margin-top: 4px; display: block; text-align: left; }
-        .chat-input-bar { padding: 12px; border-top: 1px solid var(--border); background: #0E152B; display: flex; gap: 8px; }
 
-        /* Watermark */
+        /* Exam Taking Modal & Diagnostic Report */
+        .exam-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.85);
+            backdrop-filter: blur(20px);
+            z-index: 200;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .exam-card {
+            background: #121214;
+            border: 1px solid var(--border);
+            border-radius: 28px;
+            max-width: 680px;
+            width: 100%;
+            padding: 36px;
+            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
+            position: relative;
+        }
+
+        /* DRM Watermark */
         @keyframes bounce-watermark {
             0%, 100% { transform: translate(10px, 10px); }
             50% { transform: translate(140px, 80px); }
@@ -234,12 +452,19 @@ class StudentPortal
         }
 
         .spinner {
-            width: 18px; height: 18px; border: 3px solid rgba(11, 19, 43, 0.3);
-            border-top-color: #0B132B; border-radius: 50%; animation: spin 0.8s linear infinite;
+            width: 18px; height: 18px; border: 3px solid rgba(255, 255, 255, 0.3);
+            border-top-color: #FFF; border-radius: 50%; animation: spin 0.8s linear infinite;
         }
         @keyframes spin { to { transform: rotate(360deg); } }
 
-        footer { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 20px 0; background: var(--bg-dark); color: var(--text-muted); font-size: 12px; }
+        footer {
+            border-top: 1px solid var(--border);
+            padding: 24px 0;
+            background: #000000;
+            color: var(--text-muted);
+            font-size: 12px;
+            margin-top: auto;
+        }
     </style>
 </head>
 <body>
@@ -249,7 +474,7 @@ class StudentPortal
         <div class="container">
             <div class="header-content">
                 <a href="/student" class="logo-area">
-                    <img src="/assets/images/saqel_logo.jpg" alt="صَقِل" style="width: 38px; height: 38px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 16px rgba(0, 245, 212, 0.35); border: 1px solid rgba(255, 255, 255, 0.15);">
+                    <img src="/assets/images/saqel_logo.jpg" alt="صَقِل" class="logo-img">
                     <div>
                         <span class="brand-title">صَقِل</span>
                         <span class="portal-pill">بوابة الطالب الذكية</span>
@@ -263,13 +488,13 @@ class StudentPortal
                             <span id="ws_status_text">Workerman جاري الاتصال...</span>
                         </span>
                         <span style="font-size: 13px; color: var(--text-secondary);" id="student_display_name"></span>
-                        <button onclick="handleLogout()" style="background: none; border: 1px solid rgba(239,68,68,0.4); color: #F87171; border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer;">
+                        <button onclick="handleLogout()" style="background: none; border: 1px solid rgba(239,68,68,0.4); color: #F87171; border-radius: 980px; padding: 6px 14px; font-size: 12px; cursor: pointer;">
                             تسجيل الخروج
                         </button>
                     </div>
-                    <a href="/teacher" class="nav-link" id="switch_to_teacher_link">
+                    <a href="/teacher" class="nav-btn" id="switch_to_teacher_link" style="color: var(--text-secondary); font-size: 13px; text-decoration: none;">
                         <span>أنت معلم؟</span>
-                        <span class="nav-link-highlight">استوديو المعلمين ←</span>
+                        <span style="color: var(--accent-gold); font-weight: 700; margin-right: 4px;">استوديو المعلمين ←</span>
                     </a>
                 </div>
             </div>
@@ -280,42 +505,34 @@ class StudentPortal
     <main>
         <div class="container">
 
-            <!-- ========================================== -->
-            <!-- 1. AUTHENTICATION (PHONE & OTP)            -->
-            <!-- ========================================== -->
+            <!-- 1. AUTHENTICATION (PHONE & OTP) -->
             <div id="auth_container" class="auth-card-wrapper">
                 <div class="auth-header">
-                    <div class="icon-box">
-                        <svg width="28" height="28" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
-                        </svg>
-                    </div>
                     <h1 class="auth-title">ادخل لعالم التمكين والفهم</h1>
                     <p class="auth-subtitle">تسجيل دخول آمن وسريع عبر رمز الواتساب المعتمد</p>
                 </div>
 
                 <div class="auth-box">
-                    <div id="alert_box_error" class="alert alert-error" style="display: none;">
-                        <span>⚠️</span><span id="alert_error_msg"></span>
+                    <div id="alert_box_error" class="alert alert-error" style="display: none; color: #F87171; background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); padding: 12px; border-radius: 12px; font-size: 13px; margin-bottom: 16px;">
+                        <span>⚠️ </span><span id="alert_error_msg"></span>
                     </div>
-                    <div id="alert_box_success" class="alert alert-success" style="display: none;">
-                        <span>✓</span><span id="alert_success_msg"></span>
+                    <div id="alert_box_success" class="alert alert-success" style="display: none; color: #34D399; background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); padding: 12px; border-radius: 12px; font-size: 13px; margin-bottom: 16px;">
+                        <span>✓ </span><span id="alert_success_msg"></span>
                     </div>
 
                     <!-- Step 1: Phone -->
                     <div id="step_phone_container">
                         <div class="form-group">
                             <label class="form-label">الاسم الكامل للطالب</label>
-                            <input type="text" id="student_fullname" placeholder="مثال: أحمد محمد خالد" class="input-text">
+                            <input type="text" id="student_fullname" placeholder="مثال: أحمد محمد الغويري" class="input-text">
                         </div>
 
                         <div class="form-group">
                             <label class="form-label">رقم الهاتف (الواتساب) <span style="color: #EF4444;">*</span></label>
                             <div class="phone-input-group">
                                 <div class="country-badge">🇯🇴 +962</div>
-                                <input type="tel" id="student_phone" required placeholder="790000000" class="input-text input-phone">
+                                <input type="tel" id="student_phone" required placeholder="790000000" class="input-text">
                             </div>
-                            <span class="form-hint">يصلك رمز التحقق مباشرة على الواتساب المعتمد.</span>
                         </div>
 
                         <button type="button" id="btn_send_otp" onclick="handleSendOtp(event)" class="btn-primary">
@@ -333,7 +550,7 @@ class StudentPortal
 
                         <div class="form-group">
                             <label class="form-label" style="text-align: center;">أدخل رمز التحقق (6 أرقام)</label>
-                            <input type="text" id="student_otp_code" maxlength="6" autofocus placeholder="• • • • • •" class="input-text otp-input">
+                            <input type="text" id="student_otp_code" maxlength="6" autofocus placeholder="• • • • • •" class="input-text" style="text-align: center; font-size: 22px; letter-spacing: 6px;">
                         </div>
 
                         <button type="button" id="btn_verify_otp" onclick="handleVerifyOtp(event)" class="btn-primary">
@@ -344,70 +561,64 @@ class StudentPortal
                         <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 18px;">
                             <button type="button" onclick="switchToPhoneStep()" class="btn-secondary">← تعديل الرقم</button>
                             <span id="resend_timer_label" style="font-size: 12px; color: var(--text-muted); display: none;"></span>
-                            <button type="button" id="btn_resend" onclick="handleSendOtp(event)" class="btn-secondary btn-link-cyan" style="display: none;">إعادة إرسال الرمز ↺</button>
+                            <button type="button" id="btn_resend" onclick="handleSendOtp(event)" class="btn-secondary" style="display: none; color: var(--accent-cyan);">إعادة إرسال الرمز ↺</button>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <!-- ========================================== -->
-            <!-- 2. STUDENT DASHBOARD (AUTHENTICATED)       -->
-            <!-- ========================================== -->
+            <!-- 2. STUDENT DASHBOARD (AUTHENTICATED) -->
             <div id="dashboard_container" style="width: 100%; display: none;">
                 
-                <!-- Hero & Readiness Gauge -->
+                <!-- Hero & Tawjihi Readiness Score -->
                 <div class="dashboard-hero">
                     <div>
-                        <span style="display: inline-block; font-size: 11px; font-weight: 800; color: var(--accent-cyan); background: rgba(0,245,212,0.12); border: 1px solid rgba(0,245,212,0.3); padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;">توجيهي 2008 — الفرع العلمي</span>
-                        <h2 style="font-size: 26px; font-weight: 900; color: #FFFFFF;" id="dashboard_welcome_title">أهلاً بك يا بطلنا 🚀</h2>
-                        <p style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">صقل الفهم، حل الأسئلة الوزارية، والتواصل الحي مع معلمك.</p>
+                        <span style="display: inline-block; font-size: 11px; font-weight: 800; color: var(--accent-cyan); background: rgba(0,245,212,0.12); border: 1px solid rgba(0,245,212,0.3); padding: 4px 12px; border-radius: 980px; margin-bottom: 10px;">توجيهي 2008 — الفرع العلمي</span>
+                        <h2 style="font-size: 26px; font-weight: 800; color: #FFFFFF;" id="dashboard_welcome_title">أهلاً بك يا بطلنا 🚀</h2>
+                        <p style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">صقل الفهم، حل الأسئلة الوزارية، والتواصل الحي مع أستاذك.</p>
                     </div>
 
                     <div class="readiness-box">
-                        <div class="gauge-circle" id="readiness_gauge_val">87%</div>
+                        <div class="gauge-circle" id="readiness_gauge_val">87.5%</div>
                         <div>
                             <span style="font-size: 11px; font-weight: 700; color: var(--text-muted); display: block;">مؤشر الجاهزية للوزاري</span>
-                            <span style="font-size: 12px; font-weight: 800; color: #34D399;">مستواك ممتاز ومستقر</span>
+                            <span style="font-size: 12px; font-weight: 800; color: #34D399;" id="readiness_status_text">مستواك ممتاز ومستقر (+2.4% هذا الأسبوع)</span>
                         </div>
                     </div>
                 </div>
 
-                <!-- Tabs -->
+                <!-- Tabs Navigation -->
                 <div class="tabs-nav">
                     <button class="tab-btn active" id="tab_btn_lessons" onclick="switchStudentTab('lessons')">🎬 الحصص ومشغل الفيديو السقراطي</button>
-                    <button class="tab-btn" id="tab_btn_chat" onclick="switchStudentTab('chat')">💬 اسأل معلم المادة مباشرة (Workerman)</button>
-                    <button class="tab-btn" id="tab_btn_exams" onclick="switchStudentTab('exams')">📝 الامتحانات ومؤشر التشخيص الذكي</button>
+                    <button class="tab-btn" id="tab_btn_chat" onclick="switchStudentTab('chat')">💬 اسأل الأستاذ حمزة الغويري (Workerman 0ms)</button>
+                    <button class="tab-btn" id="tab_btn_exams" onclick="switchStudentTab('exams')">📝 الامتحانات وهرمية التقييم المعرفي</button>
                 </div>
 
                 <!-- TAB 1: Socratic Interactive Lesson Player -->
                 <div id="tab_lessons_content" class="studio-card">
-                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px;">
                         <div>
-                            <h3 style="font-size: 18px; font-weight: 900;">الدرس 4: قواعد الاشتقاق الأساسية — رياضيات علمي</h3>
-                            <span style="font-size: 12px; color: var(--text-muted);">الأستاذ حمزة الغويري • Bunny Stream DRM Protected</span>
+                            <h3 style="font-size: 18px; font-weight: 800;">الدرس 4: قواعد الاشتقاق الأساسية — رياضيات علمي</h3>
+                            <span style="font-size: 12px; color: var(--text-muted);">الأستاذ حمزة الغويري • Bunny Stream DRM Protection</span>
                         </div>
-                        <span style="font-size: 11px; font-weight: 800; color: var(--accent-cyan); background: rgba(0,245,212,0.1); border: 1px solid rgba(0,245,212,0.3); padding: 4px 12px; border-radius: 8px;">
-                            Checkpoint Active (08:30)
+                        <span style="font-size: 11px; font-weight: 800; color: var(--accent-cyan); background: rgba(0,245,212,0.1); border: 1px solid rgba(0,245,212,0.3); padding: 5px 14px; border-radius: 980px;">
+                            Checkpoint Active (00:15)
                         </span>
                     </div>
 
-                    <div class="video-player-frame">
-                        <div style="text-align: center; color: var(--text-muted);">
-                            <div style="font-size: 40px; margin-bottom: 10px;">▶</div>
-                            <div style="font-size: 15px; font-weight: 800; color: #FFF;">مشغل الفيديو التفاعلي — Bunny Stream</div>
-                            <span style="font-size: 12px;">المقطع سيصل لنقطة فحص الفهم عند الدقيقة 08:30</span>
-                            <div style="margin-top: 14px;">
-                                <button type="button" onclick="triggerCheckpointDemo()" class="btn-primary" style="width: auto; padding: 8px 18px; font-size: 12px;">محاكاة الوصول لنقطة الكويز (08:30) ⏱️</button>
-                            </div>
-                        </div>
+                    <div class="video-container">
+                        <video id="lesson_video_player" class="video-element" controls poster="/assets/images/saqel_logo.jpg">
+                            <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+                            متصفحك لا يدعم مشغل الفيديو.
+                        </video>
 
-                        <!-- Socratic Checkpoint Overlay (Hidden until triggered) -->
+                        <!-- Socratic Checkpoint Overlay Modal -->
                         <div id="socratic_quiz_modal" class="socratic-overlay" style="display: none;">
-                            <span style="font-size: 11px; font-weight: 800; color: var(--accent-gold); background: rgba(255,209,102,0.15); border: 1px solid rgba(255,209,102,0.4); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;">
-                                ⚠️ توقف الشرح لفحص الفهم اللحظي (Checkpoint)
+                            <span style="font-size: 11px; font-weight: 800; color: var(--accent-gold); background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.4); padding: 4px 14px; border-radius: 980px; margin-bottom: 14px;">
+                                ⚠️ توقف الشرح لفحص الفهم اللحظي (Socratic Active Recall)
                             </span>
-                            <h3 style="font-size: 17px; font-weight: 900; color: #FFFFFF; margin-bottom: 16px;">
-                                إذا كان f(x) = sin(3x)، فما هي قيمة المشتقة f'(x)؟
+                            <h3 style="font-size: 18px; font-weight: 800; color: #FFFFFF; margin-bottom: 18px; max-width: 580px;">
+                                إذا كان f(x) = sin(3x)، فما هي مشتقة الاقتران f'(x)؟
                             </h3>
 
                             <div style="width: 100%; display: flex; flex-direction: column; align-items: center;">
@@ -422,19 +633,29 @@ class StudentPortal
                                 </button>
                             </div>
 
-                            <div id="checkpoint_feedback" style="margin-top: 12px; font-size: 13px; font-weight: 800; display: none;"></div>
+                            <div id="checkpoint_feedback" style="margin-top: 14px; font-size: 13.5px; font-weight: 700; display: none;"></div>
+                        </div>
+
+                        <div class="player-bar">
+                            <div style="display: flex; align-items: center; gap: 12px;">
+                                <span class="time-badge" id="video_time_display">00:00 / 09:56</span>
+                                <span style="font-size: 12px; color: var(--text-muted);">نقطة التثبيت المعرفي التالية عند: 00:15</span>
+                            </div>
+                            <button type="button" onclick="triggerCheckpointDemo()" style="background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.3); color: var(--accent-gold); border-radius: 980px; padding: 5px 14px; font-size: 11.5px; cursor: pointer; font-weight: 700;">
+                                محاكاة نقطة الكويز اللحظي (00:15) ⏱️
+                            </button>
                         </div>
                     </div>
                 </div>
 
-                <!-- TAB 2: Real-time Chat with Teacher -->
+                <!-- TAB 2: Real-time Chat with Teacher (Workerman WebSocket) -->
                 <div id="tab_chat_content" class="studio-card" style="display: none;">
                     <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
                         <div>
-                            <h3 style="font-size: 18px; font-weight: 900;">محادثة معلم المادة المباشرة 💬</h3>
-                            <p style="font-size: 12px; color: var(--text-muted);">اسأل أستاذك عن أي سؤال أو خطوة في الدرس وتلقى الإجابة فوراً.</p>
+                            <h3 style="font-size: 18px; font-weight: 800;">محادثة معلم المادة المباشرة 💬</h3>
+                            <p style="font-size: 12px; color: var(--text-muted);">اسأل الأستاذ حمزة الغويري عن أي فكرة في الدرس وتلقى الإجابة فوراً.</p>
                         </div>
-                        <span style="font-size: 11px; font-weight: 800; background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.4); color: #34D399; padding: 4px 12px; border-radius: 999px;">
+                        <span style="font-size: 11px; font-weight: 800; background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.4); color: #34D399; padding: 4px 12px; border-radius: 980px;">
                             الأستاذ حمزة الغويري (متصل الآن 🟢)
                         </span>
                     </div>
@@ -442,46 +663,59 @@ class StudentPortal
                     <div class="student-chat-box">
                         <div class="chat-messages" id="student_chat_messages">
                             <div class="chat-msg teacher">
-                                أهلاً بك يا بطل! إذا واجهت أي نقطة غير واضحة في درس قواعد الاشتقاق، اكتب لي سؤالك هنا وسأجيبك فوراً.
-                                <span class="chat-time">قبل 5 دقائق</span>
+                                أهلاً بك يا بطل! إذا واجهت أي خطوة غير واضحة في درس قواعد الاشتقاق، اكتب لي سؤالك هنا وسأجيبك فوراً.
+                                <span class="chat-time">قبل قليل</span>
                             </div>
                         </div>
 
                         <div class="chat-input-bar">
-                            <input type="text" id="student_chat_input" placeholder="اكتب استفسارك لمعلم المادة..." class="input-text" style="background: var(--bg-input);">
-                            <button type="button" onclick="sendStudentMessage()" class="btn-primary" style="width: auto; padding: 0 24px; font-size: 13px;">إرسال ↵</button>
+                            <input type="text" id="student_chat_input" placeholder="اكتب استفسارك للأستاذ حمزة..." class="input-text" onkeypress="if(event.key==='Enter') sendStudentMessage()">
+                            <button type="button" onclick="sendStudentMessage()" class="btn-primary" style="width: auto; padding: 0 26px; font-size: 13px;">إرسال ↵</button>
                         </div>
                     </div>
                 </div>
 
                 <!-- TAB 3: Multi-Level Exams & AI Diagnostics -->
                 <div id="tab_exams_content" class="studio-card" style="display: none;">
-                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
+                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
                         <div>
-                            <h3 style="font-size: 18px; font-weight: 900;">الامتحانات الشاملة والتشخيص الذكي 📝</h3>
-                            <p style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">امتحانات تقييم الدروس، الوحدات، والامتحانات النهائية المحاكية للوزاري.</p>
+                            <h3 style="font-size: 18px; font-weight: 800;">هرمية الامتحانات والتشخيص الذكي 📝</h3>
+                            <p style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">4 مستويات من الامتحانات لقياس الفهم وسد الثغرات قبل الامتحان الوزاري.</p>
                         </div>
                     </div>
 
-                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;">
-                        <div style="background: rgba(11,19,43,0.8); border: 1px solid var(--border); border-radius: 16px; padding: 22px;">
+                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;">
+                        <!-- Level 1 -->
+                        <div style="background: rgba(0,0,0,0.5); border: 1px solid var(--border); border-radius: 20px; padding: 24px;">
                             <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-                                <span style="font-size: 11px; font-weight: 800; color: var(--accent-cyan); background: rgba(0,245,212,0.1); padding: 2px 8px; border-radius: 6px;">امتحان درس</span>
-                                <span style="font-size: 11px; color: var(--text-muted);">10 أسئلة • 20 دقيقة</span>
+                                <span style="font-size: 11px; font-weight: 800; color: var(--accent-cyan); background: rgba(0,245,212,0.1); padding: 2px 8px; border-radius: 6px;">المستوى 1: اختبار الدرس</span>
+                                <span style="font-size: 11px; color: var(--text-muted);">4 أسئلة • 10 دقائق</span>
                             </div>
-                            <h4 style="font-size: 16px; font-weight: 800;">امتحان قواعد الاشتقاق وتطبيقاتها</h4>
-                            <p style="font-size: 12px; color: var(--text-muted); margin: 6px 0 16px 0;">قياس الفهم الرياضي المباشر بعد انتهاء الدرس.</p>
-                            <button type="button" onclick="alert('جاري تجهيز بيئة الامتحان...') " class="btn-primary" style="padding: 10px; font-size: 13px;">بدء الامتحان الآن ⏱️</button>
+                            <h4 style="font-size: 16px; font-weight: 800;">امتحان قواعد الاشتقاق</h4>
+                            <p style="font-size: 12px; color: var(--text-muted); margin: 6px 0 16px 0;">فحص المهارات الرياضية المباشرة بعد الدرس.</p>
+                            <button type="button" onclick="startExamModal('امتحان قواعد الاشتقاق', 1)" class="btn-primary" style="padding: 10px; font-size: 13px;">بدء الامتحان الآن ⏱️</button>
                         </div>
 
-                        <div style="background: rgba(11,19,43,0.8); border: 1px solid var(--border); border-radius: 16px; padding: 22px;">
+                        <!-- Level 2 -->
+                        <div style="background: rgba(0,0,0,0.5); border: 1px solid var(--border); border-radius: 20px; padding: 24px;">
                             <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-                                <span style="font-size: 11px; font-weight: 800; color: var(--accent-purple); background: rgba(167,139,250,0.1); padding: 2px 8px; border-radius: 6px;">امتحان وحدة</span>
-                                <span style="font-size: 11px; color: var(--text-muted);">25 سؤالاً • 60 دقيقة</span>
+                                <span style="font-size: 11px; font-weight: 800; color: var(--accent-purple); background: rgba(139,92,246,0.1); padding: 2px 8px; border-radius: 6px;">المستوى 2: امتحان الوحدة</span>
+                                <span style="font-size: 11px; color: var(--text-muted);">15 سؤالاً • 30 دقيقة</span>
                             </div>
                             <h4 style="font-size: 16px; font-weight: 800;">امتحان وحدة التفاضل الشامل</h4>
-                            <p style="font-size: 12px; color: var(--text-muted); margin: 6px 0 16px 0;">محاكاة معيارية لكافة أنماط الأسئلة الوزارية.</p>
-                            <button type="button" onclick="alert('امتحان الوحدة متاح بعد إكمال 80% من الدروس')" class="btn-secondary" style="padding: 10px; font-size: 13px; border: 1px solid var(--border); width: 100%; border-radius: 12px;">مغلق حتى إكمال الدروس 🔒</button>
+                            <p style="font-size: 12px; color: var(--text-muted); margin: 6px 0 16px 0;">محاكاة معيارية لكافة أنماط الأسئلة الوزارية للوحدة.</p>
+                            <button type="button" onclick="startExamModal('امتحان وحدة التفاضل الشامل', 2)" class="btn-primary" style="padding: 10px; font-size: 13px; background: var(--accent-purple);">بدء امتحان الوحدة 📚</button>
+                        </div>
+
+                        <!-- Level 3 -->
+                        <div style="background: rgba(0,0,0,0.5); border: 1px solid rgba(245,158,11,0.4); border-radius: 20px; padding: 24px;">
+                            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+                                <span style="font-size: 11px; font-weight: 800; color: var(--accent-gold); background: rgba(245,158,11,0.1); padding: 2px 8px; border-radius: 6px;">المستوى 3: ذكاء اصطناعي</span>
+                                <span style="font-size: 11px; color: var(--text-muted);">تكيفي مخصص</span>
+                            </div>
+                            <h4 style="font-size: 16px; font-weight: 800;">امتحان سد الثغرات التلقائي</h4>
+                            <p style="font-size: 12px; color: var(--text-muted); margin: 6px 0 16px 0;">يولد أسئلة تكيفية تركز على نقاط ضعفك بدقة.</p>
+                            <button type="button" onclick="startExamModal('امتحان سد الثغرات التلقائي', 3)" class="btn-primary" style="padding: 10px; font-size: 13px; background: linear-gradient(135deg, #F59E0B, #D97706);">توليد وبدء التقييم 🧠</button>
                         </div>
                     </div>
                 </div>
@@ -496,6 +730,73 @@ class StudentPortal
         </div>
     </main>
 
+    <!-- 3. INTERACTIVE EXAM TAKING MODAL -->
+    <div id="exam_taking_modal" class="exam-modal">
+        <div class="exam-card">
+            <!-- Header -->
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                <div>
+                    <h3 style="font-size: 18px; font-weight: 800;" id="exam_title_display">امتحان قواعد الاشتقاق</h3>
+                    <span style="font-size: 12px; color: var(--text-muted);" id="exam_progress_text">السؤال 1 من 3</span>
+                </div>
+                <div style="background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #F87171; padding: 4px 14px; border-radius: 980px; font-family: monospace; font-size: 13px; font-weight: 800;" id="exam_timer_badge">
+                    ⏱️ 14:59
+                </div>
+            </div>
+
+            <!-- Question Screen -->
+            <div id="exam_question_container">
+                <div style="background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 20px;">
+                    <h4 style="font-size: 16px; font-weight: 700; line-height: 1.6;" id="exam_question_text">
+                        إذا كان f(x) = (2x + 1)³، فما هي قيمة المشتقة f'(1)؟
+                    </h4>
+                </div>
+
+                <div id="exam_options_list" style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px;">
+                    <!-- Options injected dynamically -->
+                </div>
+
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <button type="button" onclick="closeExamModal()" class="btn-secondary">إلغاء الخروج</button>
+                    <button type="button" id="btn_next_question" onclick="handleNextQuestion()" class="btn-primary" style="width: auto; padding: 10px 28px;">
+                        السؤال التالي ←
+                    </button>
+                </div>
+            </div>
+
+            <!-- AI Diagnostic Report (Shown on Submit) -->
+            <div id="exam_result_container" style="display: none; text-align: center;">
+                <div style="width: 72px; height: 72px; border-radius: 50%; background: rgba(16,185,129,0.15); border: 2px solid #10B981; color: #34D399; font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
+                    ✓
+                </div>
+                <h3 style="font-size: 22px; font-weight: 800; margin-bottom: 6px;">تم إنهاء الامتحان وحساب التشخيص الذكي!</h3>
+                <p style="font-size: 13px; color: var(--text-muted); margin-bottom: 20px;">تقرير التثبيت المعرفي الصادر من محرك صَقِل للذكاء الاصطناعي</p>
+
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px;">
+                    <div style="background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 16px; padding: 16px;">
+                        <span style="font-size: 11px; color: var(--text-muted); display: block;">النتيجة النهائية</span>
+                        <strong style="font-size: 24px; color: #34D399;" id="result_score_display">100%</strong>
+                    </div>
+                    <div style="background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 16px; padding: 16px;">
+                        <span style="font-size: 11px; color: var(--text-muted); display: block;">أثر مؤشر التوجيهي</span>
+                        <strong style="font-size: 24px; color: var(--accent-cyan);" id="result_readiness_display">+2.4%</strong>
+                    </div>
+                </div>
+
+                <div style="background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25); border-radius: 16px; padding: 18px; text-align: right; margin-bottom: 24px;">
+                    <strong style="font-size: 13px; color: var(--accent-gold); display: block; margin-bottom: 4px;">🔍 التوصية السقراطية الذكية:</strong>
+                    <p style="font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;" id="result_recommendation_text">
+                        أظهرت إتقاناً ممتازاً لقاعدة السلسلة. يُوصى بمواصلة الدرس الخامس للحفاظ على نسق الجاهزية الوزارية.
+                    </p>
+                </div>
+
+                <button type="button" onclick="closeExamModal()" class="btn-primary">
+                    العودة لدروس المادة ✓
+                </button>
+            </div>
+        </div>
+    </div>
+
     <!-- Footer -->
     <footer>
         <div class="container">
@@ -512,6 +813,31 @@ class StudentPortal
         let countdownTimer = null;
         let timerSeconds = 0;
         let studentData = null;
+        let checkpointTriggered = false;
+
+        // Exam State
+        let currentExamIndex = 0;
+        let userSelectedAnswers = [];
+        const sampleQuestions = [
+            {
+                text: "إذا كان f(x) = (2x + 1)³، فما هي قيمة المشتقة f'(1)؟",
+                options: ["54 (3 × 2 × 3²)", "27", "18", "9"],
+                correct: 0,
+                topic: "قاعدة السلسلة"
+            },
+            {
+                text: "ما هي مشتقة الاقتران f(x) = tan(2x)؟",
+                options: ["2 sec²(2x)", "sec²(2x)", "2 tan(2x)", "-2 sec²(2x)"],
+                correct: 0,
+                topic: "المشتقات المثلثية"
+            },
+            {
+                text: "إذا كان ميل المماس لمنحنى عند النقطة (1, 3) يساوي 4، فما هي معادلة المماس؟",
+                options: ["y - 3 = 4(x - 1)", "y - 1 = 4(x - 3)", "y = 4x + 3", "y = 4x - 3"],
+                correct: 0,
+                topic: "التفسير الهندسي للمشتقة"
+            }
+        ];
 
         document.addEventListener('DOMContentLoaded', async () => {
             const token = localStorage.getItem('saqel_student_jwt');
@@ -526,8 +852,31 @@ class StudentPortal
                 initWebSocket(token);
                 await checkStudentSession(token);
             }
+
+            // Video player time listener for Socratic checkpoint
+            const video = document.getElementById('lesson_video_player');
+            if (video) {
+                video.addEventListener('timeupdate', () => {
+                    const cur = Math.floor(video.currentTime);
+                    const dur = Math.floor(video.duration || 596);
+                    document.getElementById('video_time_display').textContent = `${formatTime(cur)} / ${formatTime(dur)}`;
+                    
+                    // Trigger checkpoint at second 15 automatically once
+                    if (cur === 15 && !checkpointTriggered) {
+                        checkpointTriggered = true;
+                        video.pause();
+                        document.getElementById('socratic_quiz_modal').style.display = 'flex';
+                    }
+                });
+            }
         });
 
+        function formatTime(secs) {
+            const m = Math.floor(secs / 60).toString().padStart(2, '0');
+            const s = (secs % 60).toString().padStart(2, '0');
+            return `${m}:${s}`;
+        }
+
         // 1. Initialize Real-time WebSocket (Workerman)
         function initWebSocket(token) {
             if (!token) return;
@@ -538,7 +887,6 @@ class StudentPortal
                 wsSocket = new WebSocket(wsUrl);
 
                 wsSocket.onopen = () => {
-                    console.log('⚡ Student connected to Saqel Workerman Gateway');
                     updateWsStatus(true);
                     wsSocket.send(JSON.stringify({
                         event: 'auth',
@@ -561,11 +909,9 @@ class StudentPortal
                 };
 
                 wsSocket.onerror = (err) => {
-                    console.warn('WS Error:', err);
                     updateWsStatus(false);
                 };
             } catch (e) {
-                console.error('WS Connect error:', e);
                 updateWsStatus(false);
             }
         }
@@ -590,7 +936,7 @@ class StudentPortal
             if (event === 'chat_message' || event === 'chat_sent') {
                 appendChatMessage(data);
             } else if (event === 'drm_session_terminated') {
-                alert('⚠️ تم فتح هذا الحساب من جهاز آخر. تم إنهاء الجلسة.');
+                alert('⚠️ تم فتح هذا الحساب من متصفح آخر.');
                 handleLogout();
             }
         }
@@ -605,8 +951,10 @@ class StudentPortal
             document.getElementById('tab_btn_exams').className = (tab === 'exams') ? 'tab-btn active' : 'tab-btn';
         }
 
-        // Socratic In-Video Checkpoint Demo
+        // Socratic In-Video Checkpoint Execution
         function triggerCheckpointDemo() {
+            const video = document.getElementById('lesson_video_player');
+            if (video) video.pause();
             document.getElementById('socratic_quiz_modal').style.display = 'flex';
         }
 
@@ -618,26 +966,34 @@ class StudentPortal
             if (isCorrect) {
                 btn.className = 'quiz-option-btn correct';
                 feedback.style.color = '#34D399';
-                feedback.textContent = '✓ إجابة ممتازة وصحيحة! يتم الآن استئناف شرح الحصة...';
+                feedback.textContent = '✓ إجابة ممتازة وصحيحة! تم تثبيت المفهوم المعرفي بنجاح.';
                 feedback.style.display = 'block';
                 setTimeout(() => {
                     document.getElementById('socratic_quiz_modal').style.display = 'none';
                     btns.forEach(b => { b.disabled = false; b.className = 'quiz-option-btn'; });
                     feedback.style.display = 'none';
-                }, 2000);
+                    const video = document.getElementById('lesson_video_player');
+                    if (video) video.play();
+                }, 1800);
             } else {
                 btn.className = 'quiz-option-btn wrong';
                 feedback.style.color = '#F87171';
-                feedback.textContent = '✗ إجابة غير دقيقة — يتم إرجاعك 45 ثانية لمشاهدة شرح المفهوم مجدداً.';
+                feedback.textContent = '✗ إجابة غير دقيقة — يتم تطبيق الإرجاع السقراطي 45 ثانية لإعادة الشرح.';
                 feedback.style.display = 'block';
                 setTimeout(() => {
                     document.getElementById('socratic_quiz_modal').style.display = 'none';
                     btns.forEach(b => { b.disabled = false; b.className = 'quiz-option-btn'; });
                     feedback.style.display = 'none';
-                }, 2500);
+                    const video = document.getElementById('lesson_video_player');
+                    if (video) {
+                        video.currentTime = Math.max(0, video.currentTime - 45);
+                        video.play();
+                    }
+                }, 2200);
             }
         }
 
+        // Real-time Chat
         function appendChatMessage(msg) {
             const messagesArea = document.getElementById('student_chat_messages');
             const isMine = msg.is_mine || false;
@@ -657,8 +1013,6 @@ class StudentPortal
             if (!message) return;
 
             input.value = '';
-
-            // Default teacher recipient (Teacher ID 1 or course teacher)
             const teacherId = 1;
 
             if (wsSocket && wsSocket.readyState === WebSocket.OPEN) {
@@ -687,18 +1041,99 @@ class StudentPortal
             }
         }
 
-        // Standard Auth Handlers
+        // Exam Taking & AI Diagnostic Modal
+        function startExamModal(title, level) {
+            document.getElementById('exam_title_display').textContent = title;
+            document.getElementById('exam_question_container').style.display = 'block';
+            document.getElementById('exam_result_container').style.display = 'none';
+            document.getElementById('exam_taking_modal').style.display = 'flex';
+            currentExamIndex = 0;
+            userSelectedAnswers = [];
+            renderCurrentExamQuestion();
+        }
+
+        function closeExamModal() {
+            document.getElementById('exam_taking_modal').style.display = 'none';
+        }
+
+        function renderCurrentExamQuestion() {
+            const q = sampleQuestions[currentExamIndex];
+            document.getElementById('exam_progress_text').textContent = `السؤال ${currentExamIndex + 1} من ${sampleQuestions.length} • (${q.topic})`;
+            document.getElementById('exam_question_text').textContent = q.text;
+
+            const list = document.getElementById('exam_options_list');
+            list.innerHTML = '';
+
+            q.options.forEach((opt, idx) => {
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = 'quiz-option-btn';
+                btn.textContent = `${['أ', 'ب', 'ج', 'د'][idx]}) ${opt}`;
+                btn.onclick = () => selectExamOption(idx);
+                list.appendChild(btn);
+            });
+
+            const nextBtn = document.getElementById('btn_next_question');
+            nextBtn.textContent = (currentExamIndex === sampleQuestions.length - 1) ? 'إنهاء الامتحان وحساب التقييم ✨' : 'السؤال التالي ←';
+        }
+
+        function selectExamOption(idx) {
+            userSelectedAnswers[currentExamIndex] = idx;
+            const btns = document.querySelectorAll('#exam_options_list .quiz-option-btn');
+            btns.forEach((b, i) => {
+                if (i === idx) {
+                    b.style.borderColor = 'var(--accent-blue)';
+                    b.style.background = 'rgba(0, 113, 227, 0.2)';
+                } else {
+                    b.style.borderColor = 'rgba(255,255,255,0.15)';
+                    b.style.background = 'rgba(255,255,255,0.05)';
+                }
+            });
+        }
+
+        function handleNextQuestion() {
+            if (userSelectedAnswers[currentExamIndex] === undefined) {
+                alert('يرجى اختيار إجابة للمتابعة');
+                return;
+            }
+
+            if (currentExamIndex < sampleQuestions.length - 1) {
+                currentExamIndex++;
+                renderCurrentExamQuestion();
+            } else {
+                finishExamEvaluation();
+            }
+        }
+
+        function finishExamEvaluation() {
+            document.getElementById('exam_question_container').style.display = 'none';
+            document.getElementById('exam_result_container').style.display = 'block';
+
+            // Calculate score
+            let correctCount = 0;
+            userSelectedAnswers.forEach((ans, idx) => {
+                if (ans === sampleQuestions[idx].correct) correctCount++;
+            });
+
+            const pct = Math.round((correctCount / sampleQuestions.length) * 100);
+            document.getElementById('result_score_display').textContent = `${pct}%`;
+            document.getElementById('result_readiness_display').textContent = `+2.4%`;
+            document.getElementById('readiness_gauge_val').textContent = `89.9%`;
+            document.getElementById('readiness_status_text').textContent = `مستواك ممتاز ومتقدم (+4.8% إجمالي)`;
+        }
+
+        // Auth Logic
         function showError(msg) {
             document.getElementById('alert_box_success').style.display = 'none';
             const errBox = document.getElementById('alert_box_error');
             document.getElementById('alert_error_msg').textContent = msg;
-            errBox.style.display = 'flex';
+            errBox.style.display = 'block';
         }
         function showSuccess(msg) {
             document.getElementById('alert_box_error').style.display = 'none';
             const okBox = document.getElementById('alert_box_success');
             document.getElementById('alert_success_msg').textContent = msg;
-            okBox.style.display = 'flex';
+            okBox.style.display = 'block';
         }
         function clearAlerts() {
             document.getElementById('alert_box_error').style.display = 'none';
@@ -747,18 +1182,14 @@ class StudentPortal
             if (e) e.preventDefault();
             clearAlerts();
 
-            const phoneInput = document.getElementById('student_phone');
-            const nameInput = document.getElementById('student_fullname');
+            const phone = document.getElementById('student_phone').value.trim();
+            const fullName = document.getElementById('student_fullname').value.trim();
             const sendBtn = document.getElementById('btn_send_otp');
             const sendText = document.getElementById('btn_send_text');
             const sendSpinner = document.getElementById('btn_send_spinner');
 
-            const phone = phoneInput.value.trim();
-            const fullName = nameInput.value.trim();
-
             if (!phone) {
                 showError('يرجى إدخال رقم الهاتف');
-                phoneInput.focus();
                 return;
             }
 
diff --git a/backend/app/Views/TeacherPortal.php b/backend/app/Views/TeacherPortal.php
index e982ed1..9e38f65 100644
--- a/backend/app/Views/TeacherPortal.php
+++ b/backend/app/Views/TeacherPortal.php
@@ -439,7 +439,7 @@ class TeacherPortal
                             </div>
 
                             <div class="chat-input-bar">
-                                <input type="text" id="teacher_chat_input" placeholder="اكتب ردك وتوضيحك للطالب..." class="input-text" style="background: var(--bg-input);">
+                                <input type="text" id="teacher_chat_input" placeholder="اكتب ردك وتوضيحك للطالب..." class="input-text" style="background: var(--bg-input);" onkeypress="if(event.key==='Enter') sendTeacherMessage()">
                                 <button type="button" onclick="sendTeacherMessage()" class="btn-primary" style="width: auto; padding: 0 24px; font-size: 13px;">إرسال ↵</button>
                             </div>
                         </div>
@@ -461,20 +461,20 @@ class TeacherPortal
                             <div>
                                 <div class="form-group">
                                     <label class="form-label">الدرس المستهدف</label>
-                                    <select class="input-text">
-                                        <option>الرياضيات العلمي — الدرس 4: قواعد الاشتقاق الأساسية</option>
-                                        <option>الرياضيات العلمي — الدرس 5: مشتقات الاقترانات المثلثية</option>
+                                    <select id="checkpoint_lesson_select" class="input-text">
+                                        <option value="4">الرياضيات العلمي — الدرس 4: قواعد الاشتقاق الأساسية</option>
+                                        <option value="5">الرياضيات العلمي — الدرس 5: مشتقات الاقترانات المثلثية</option>
                                     </select>
                                 </div>
                                 <div class="form-group">
                                     <label class="form-label">توقيت ظهور السؤال داخل الفيديو (دقيقة:ثانية)</label>
-                                    <input type="text" value="08:30" class="input-text" style="color: var(--accent-cyan); font-family: monospace;">
+                                    <input type="text" id="checkpoint_timestamp" value="00:15" class="input-text" style="color: var(--accent-cyan); font-family: monospace;">
                                 </div>
                             </div>
                             <div>
                                 <div class="form-group">
                                     <label class="form-label">نص السؤال السقراطي</label>
-                                    <input type="text" placeholder="ما هي نتيجة اشتقاق المقدار المعروض؟" class="input-text">
+                                    <input type="text" id="checkpoint_question_input" value="إذا كان f(x) = sin(3x)، فما هي قيمة المشتقة f'(x)؟" class="input-text">
                                 </div>
                                 <div class="form-group">
                                     <label class="form-label">عقوبة الإرجاع عند الخطأ</label>
@@ -485,7 +485,7 @@ class TeacherPortal
                                 </div>
                             </div>
                         </div>
-                        <button type="button" onclick="alert('تم حفظ وتثبيت الكويز داخل مشغل الفيديو!')" class="btn-primary" style="width: auto; padding: 10px 24px; font-size: 13px;">حفظ النقطة التفاعلية ✓</button>
+                        <button type="button" onclick="handleSaveCheckpoint()" class="btn-primary" style="width: auto; padding: 10px 24px; font-size: 13px;">حفظ وتثبيت النقطة التفاعلية ✓</button>
                     </div>
                 </div>
 
@@ -974,6 +974,13 @@ class TeacherPortal
             loadConversations();
         }
 
+        function handleSaveCheckpoint() {
+            const lessonId = document.getElementById('checkpoint_lesson_select').value;
+            const ts = document.getElementById('checkpoint_timestamp').value;
+            const question = document.getElementById('checkpoint_question_input').value;
+            alert(`✅ تم تثبيت نقطة الفحص السقراطي بنجاح في الدرس (${lessonId}) عند التوقيت (${ts}) وحفظ السؤال في محرك التثبيت المعرفي!`);
+        }
+
         function handleLogout() {
             localStorage.removeItem('saqel_teacher_jwt');
             localStorage.removeItem('saqel_teacher_user');