diff --git a/backend/app/Core/RedisClient.php b/backend/app/Core/RedisClient.php
index 1adf7a9..2dbb926 100644
--- a/backend/app/Core/RedisClient.php
+++ b/backend/app/Core/RedisClient.php
@@ -4,7 +4,7 @@ namespace App\Core;
 
 /**
  * Core Redis Client for managing connections.
- * Strict environment variable enforcement (No default fallbacks).
+ * Handles Sessions, Rate Limiting, OTP, and Caching.
  */
 class RedisClient
 {
@@ -18,7 +18,7 @@ class RedisClient
         if (self::$instance === null) {
             $host     = getenv('REDIS_HOST');
             $port     = getenv('REDIS_PORT');
-            $password = getenv('REDIS_PASSWORD') ?: null;
+            $password = getenv('REDIS_PASSWORD');
 
             $missing = [];
             if ($host === false || $host === '') $missing[] = 'REDIS_HOST';
@@ -36,10 +36,19 @@ class RedisClient
                     throw new \RuntimeException("Could not connect to Redis server at {$host}:{$port}");
                 }
 
-                // Authenticate if password is provided
-                if ($password) {
-                    if (!$redis->auth($password)) {
-                        throw new \RuntimeException("Redis authentication failed for host {$host}:{$port}.");
+                // Authenticate ONLY if a non-empty password is provided in environment
+                if (!empty($password)) {
+                    try {
+                        if (!$redis->auth($password)) {
+                            throw new \RuntimeException("Redis authentication failed with provided REDIS_PASSWORD.");
+                        }
+                    } catch (\RedisException $authEx) {
+                        // If server does not have a password configured, catch and report clearly
+                        if (str_contains($authEx->getMessage(), 'no password is set') || str_contains($authEx->getMessage(), 'without any password')) {
+                            error_log("⚠️ [Redis Notice] REDIS_PASSWORD was provided in .env, but Redis server on {$host}:{$port} is configured without password.");
+                        } else {
+                            throw $authEx;
+                        }
                     }
                 }
 
diff --git a/backend/app/Views/StudentPortal.php b/backend/app/Views/StudentPortal.php
index 3ac7f3a..627ee22 100644
--- a/backend/app/Views/StudentPortal.php
+++ b/backend/app/Views/StudentPortal.php
@@ -17,31 +17,521 @@ class StudentPortal
     <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=Cairo:wght@400;600;700;800;900&display=swap" rel="stylesheet">
-    <!-- Tailwind CSS CDN -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        saqel: {
-                            dark: '#0B132B',
-                            card: '#1C2541',
-                            cardHover: '#222F55',
-                            cyan: '#00F5D4',
-                            gold: '#FFD166',
-                            border: '#2E3D66',
-                            textMuted: '#94A3B8'
-                        }
-                    },
-                    fontFamily: {
-                        cairo: ['Cairo', 'sans-serif'],
-                    }
-                }
-            }
+
+    <!-- Pure Self-Contained Luxury CSS (Zero External CDN Failure Risk) -->
+    <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;
+            --accent-cyan: #00F5D4;
+            --accent-cyan-dark: #00BAA1;
+            --accent-gold: #FFD166;
+            --accent-red: #EF4444;
+            --accent-green: #10B981;
         }
-    </script>
-    <!-- 1. Define Alpine Data Component BEFORE Alpine Loads -->
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Cairo', system-ui, -apple-system, sans-serif;
+        }
+
+        body {
+            background-color: var(--bg-dark);
+            color: var(--text-primary);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            background-image: 
+                radial-gradient(circle at 15% 15%, rgba(0, 245, 212, 0.05) 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;
+        }
+
+        .container {
+            max-width: 1140px;
+            margin: 0 auto;
+            padding: 0 20px;
+            width: 100%;
+        }
+
+        /* Header */
+        header {
+            border-bottom: 1px solid var(--border);
+            background-color: rgba(11, 19, 43, 0.95);
+            backdrop-filter: blur(12px);
+            position: sticky;
+            top: 0;
+            z-index: 50;
+        }
+
+        .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: var(--bg-dark);
+            font-size: 20px;
+            font-weight: 900;
+            box-shadow: 0 0 20px rgba(0, 245, 212, 0.3);
+        }
+
+        .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;
+        }
+
+        .nav-link {
+            font-size: 13px;
+            color: var(--text-secondary);
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: 0.2s;
+        }
+
+        .nav-link:hover {
+            color: var(--accent-gold);
+        }
+
+        .nav-link-highlight {
+            color: var(--accent-gold);
+            font-weight: 800;
+            text-decoration: underline;
+        }
+
+        /* Main Content */
+        main {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 40px 0;
+        }
+
+        /* Auth Card */
+        .auth-card-wrapper {
+            width: 100%;
+            max-width: 460px;
+            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-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-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;
+        }
+
+        /* Forms & Inputs */
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-label {
+            display: block;
+            font-size: 12px;
+            font-weight: 700;
+            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;
+        }
+
+        .input-text:focus {
+            border-color: var(--accent-cyan);
+            box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.15);
+        }
+
+        .input-text::placeholder {
+            color: #52607D;
+        }
+
+        .phone-input-group {
+            display: flex;
+            align-items: center;
+            direction: ltr;
+            position: relative;
+        }
+
+        .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);
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            user-select: none;
+        }
+
+        .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;
+        }
+
+        /* Buttons */
+        .btn-primary {
+            width: 100%;
+            padding: 14px;
+            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark));
+            color: var(--bg-dark);
+            border: none;
+            border-radius: 12px;
+            font-size: 15px;
+            font-weight: 800;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            box-shadow: 0 8px 20px rgba(0, 245, 212, 0.25);
+            transition: transform 0.15s, opacity 0.15s;
+        }
+
+        .btn-primary:hover {
+            opacity: 0.95;
+            transform: translateY(-1px);
+        }
+
+        .btn-primary:active {
+            transform: translateY(0);
+        }
+
+        .btn-primary:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .btn-secondary {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            font-size: 12px;
+            cursor: pointer;
+            padding: 6px 0;
+            transition: color 0.2s;
+        }
+
+        .btn-secondary:hover {
+            color: #FFFFFF;
+        }
+
+        .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;
+        }
+
+        /* Alerts */
+        .alert {
+            padding: 12px 16px;
+            border-radius: 12px;
+            font-size: 12.5px;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            line-height: 1.5;
+        }
+
+        .alert-error {
+            background: rgba(239, 68, 68, 0.12);
+            border: 1px solid rgba(239, 68, 68, 0.35);
+            color: #FCA5A5;
+        }
+
+        .alert-success {
+            background: rgba(0, 245, 212, 0.12);
+            border: 1px solid rgba(0, 245, 212, 0.35);
+            color: var(--accent-cyan);
+        }
+
+        .auth-footer {
+            margin-top: 24px;
+            padding-top: 16px;
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            text-align: center;
+            font-size: 11.5px;
+            color: var(--text-muted);
+        }
+
+        /* Student Dashboard */
+        .dashboard-hero {
+            background: linear-gradient(135deg, var(--bg-card), var(--bg-card-hover));
+            border: 1px solid var(--border);
+            border-radius: 24px;
+            padding: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 24px;
+            flex-wrap: wrap;
+            margin-bottom: 28px;
+        }
+
+        .readiness-box {
+            background: rgba(11, 19, 43, 0.85);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 16px 20px;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            min-width: 240px;
+        }
+
+        .gauge-circle {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            border: 4px solid var(--accent-cyan);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            font-weight: 900;
+            color: var(--accent-cyan);
+            box-shadow: 0 0 20px rgba(0, 245, 212, 0.3);
+        }
+
+        .cards-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 20px;
+            margin-bottom: 28px;
+        }
+
+        .feature-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            padding: 24px;
+            transition: border-color 0.2s, transform 0.2s;
+            cursor: pointer;
+        }
+
+        .feature-card:hover {
+            border-color: var(--accent-cyan);
+            transform: translateY(-2px);
+        }
+
+        .quiz-demo-box {
+            background: var(--bg-card);
+            border: 1px solid rgba(0, 245, 212, 0.4);
+            border-radius: 24px;
+            padding: 32px;
+            margin-bottom: 28px;
+        }
+
+        .interactive-quiz-container {
+            background: rgba(11, 19, 43, 0.9);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 24px;
+            margin-top: 16px;
+        }
+
+        .quiz-option {
+            width: 100%;
+            text-align: right;
+            padding: 12px 16px;
+            border-radius: 12px;
+            border: 1px solid var(--border);
+            background: var(--bg-card);
+            color: var(--text-secondary);
+            font-size: 13px;
+            font-weight: 700;
+            margin-bottom: 10px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            transition: border-color 0.2s;
+        }
+
+        .quiz-option:hover {
+            border-color: var(--accent-cyan);
+        }
+
+        .quiz-option.correct {
+            background: rgba(16, 185, 129, 0.15);
+            border-color: #10B981;
+            color: #6EE7B7;
+        }
+
+        .quiz-option.incorrect {
+            background: rgba(239, 68, 68, 0.15);
+            border-color: #EF4444;
+            color: #FCA5A5;
+        }
+
+        /* Watermark */
+        @keyframes bounce-watermark {
+            0%, 100% { transform: translate(10px, 10px); }
+            50% { transform: translate(120px, 60px); }
+        }
+        .watermark-anim { 
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            z-index: 99;
+            pointer-events: none;
+            opacity: 0.35;
+            animation: bounce-watermark 12s infinite ease-in-out;
+            background: rgba(0, 0, 0, 0.7);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 4px 10px;
+            border-radius: 6px;
+            font-family: monospace;
+            font-size: 11px;
+            color: var(--accent-cyan);
+        }
+
+        /* Footer */
+        footer {
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            padding: 24px 0;
+            background: var(--bg-dark);
+            color: var(--text-muted);
+            font-size: 12px;
+        }
+
+        .footer-content {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .spinner {
+            width: 18px;
+            height: 18px;
+            border: 3px solid rgba(11, 19, 43, 0.3);
+            border-top-color: var(--bg-dark);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+    </style>
+
+    <!-- Alpine Component in Head -->
     <script>
         function studentAuth() {
             return {
@@ -67,7 +557,7 @@ class StudentPortal
                             await this.fetchProfile(token);
                         }
                     } catch (e) {
-                        console.error('Init error:', e);
+                        console.error('Student App init error:', e);
                     }
                 },
 
@@ -84,7 +574,7 @@ class StudentPortal
                         const hashArray = Array.from(new Uint8Array(hashBuffer));
                         return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
                     } catch (e) {
-                        return 'web_fallback_' + Math.random().toString(36).substring(2);
+                        return 'student_web_' + Math.random().toString(36).substring(2);
                     }
                 },
 
@@ -118,10 +608,10 @@ class StudentPortal
                             }
                             this.startTimer(60);
                         } else {
-                            this.errorMessage = data.message || 'فشل إرسال رمز التحقق';
+                            this.errorMessage = data.message || 'فشل إرسال رمز التحقق. يرجى مراجعة إعدادات NABEH في السيرفر.';
                         }
                     } catch (e) {
-                        this.errorMessage = 'حدث خطأ في الاتصال بالخادم. تأكد من تفعيل السيرفر.';
+                        this.errorMessage = 'حدث خطأ في الاتصال بالخادم. يرجى فحص /api/test/nabeh';
                     } finally {
                         this.loading = false;
                     }
@@ -158,7 +648,7 @@ class StudentPortal
                             this.errorMessage = data.message || 'رمز التحقق غير صحيح';
                         }
                     } catch (e) {
-                        this.errorMessage = 'حدث خطأ في التحقق من الرمز';
+                        this.errorMessage = 'حدث خطأ أثناء التحقق من الرمز';
                     } finally {
                         this.loading = false;
                     }
@@ -216,308 +706,242 @@ class StudentPortal
             };
         }
     </script>
-    <!-- Alpine.js Core Script (Deferred) -->
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <style>
-        body { font-family: 'Cairo', sans-serif; background-color: #0B132B; }
-        .glow-cyan { box-shadow: 0 0 25px -5px rgba(0, 245, 212, 0.35); }
-        .bg-grid {
-            background-size: 30px 30px;
-            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
-                              linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
-        }
-        @keyframes bounce-watermark {
-            0%, 100% { transform: translate(10px, 10px); }
-            50% { transform: translate(120px, 60px); }
-        }
-        .watermark-anim { animation: bounce-watermark 12s infinite ease-in-out; }
-    </style>
 </head>
-<body class="bg-saqel-dark text-slate-100 min-h-screen bg-grid antialiased flex flex-col justify-between selection:bg-saqel-cyan selection:text-saqel-dark"
-      x-data="studentAuth()" x-init="initApp()">
+<body x-data="studentAuth()" x-init="initApp()">
 
-    <!-- Top Navigation Bar -->
-    <header class="border-b border-saqel-border/80 bg-[#0B132B]/95 backdrop-blur-md sticky top-0 z-40">
-        <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
-            <div class="flex items-center gap-3">
-                <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-saqel-cyan to-teal-400 p-[2px] flex items-center justify-center glow-cyan">
-                    <div class="w-full h-full bg-[#0B132B] rounded-[10px] flex items-center justify-center text-saqel-cyan font-black text-xl">
-                        صـ
+    <!-- Header -->
+    <header>
+        <div class="container">
+            <div class="header-content">
+                <a href="/student" class="logo-area">
+                    <div class="logo-badge">صـ</div>
+                    <div>
+                        <span class="brand-title">صَقِل</span>
+                        <span class="portal-pill">بوابة الطالب</span>
                     </div>
-                </div>
+                </a>
+
                 <div>
-                    <span class="font-extrabold text-lg text-white tracking-wide">صَقِل</span>
-                    <span class="text-xs px-2.5 py-0.5 rounded-full bg-saqel-cyan/10 text-saqel-cyan border border-saqel-cyan/30 mr-2 font-semibold">بوابة الطالب</span>
+                    <template x-if="isLoggedIn">
+                        <div style="display: flex; align-items: center; gap: 12px;">
+                            <span style="font-size: 13px; color: var(--text-secondary);" x-text="'مرحباً، ' + (studentData.name || 'طالب صَقِل')"></span>
+                            <button @click="logout()" 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>
+                        </div>
+                    </template>
+                    <template x-if="!isLoggedIn">
+                        <a href="/teacher" class="nav-link">
+                            <span>أنت معلم؟</span>
+                            <span class="nav-link-highlight">بوابة المعلمين ←</span>
+                        </a>
+                    </template>
                 </div>
             </div>
-
-            <!-- Header Right Controls -->
-            <div class="flex items-center gap-3">
-                <template x-if="isLoggedIn">
-                    <div class="flex items-center gap-3">
-                        <span class="text-sm text-slate-300 hidden sm:inline" x-text="'مرحباً، ' + (studentData.name || 'طالب صَقِل')"></span>
-                        <button @click="logout()" class="text-xs px-3 py-1.5 rounded-lg border border-red-500/40 text-red-400 hover:bg-red-500/10 transition">
-                            تسجيل الخروج
-                        </button>
-                    </div>
-                </template>
-                <template x-if="!isLoggedIn">
-                    <a href="/teacher" class="text-xs sm:text-sm text-slate-400 hover:text-saqel-gold transition flex items-center gap-1.5">
-                        <span>أنت معلم؟</span>
-                        <span class="text-saqel-gold font-bold underline">بوابة المعلمين ←</span>
-                    </a>
-                </template>
-            </div>
         </div>
     </header>
 
-    <!-- Main Content Container -->
-    <main class="flex-1 max-w-6xl mx-auto px-4 sm:px-6 py-8 w-full flex items-center justify-center">
+    <!-- Main Content -->
+    <main>
+        <div class="container">
 
-        <!-- ============================================================= -->
-        <!-- VIEW 1: AUTHENTICATION FLOW (Phone Number & WhatsApp OTP)     -->
-        <!-- ============================================================= -->
-        <div x-show="!isLoggedIn" class="w-full max-w-md">
-
-            <!-- Card Header -->
-            <div class="text-center mb-6">
-                <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-[#1C2541] border border-saqel-cyan/40 text-saqel-cyan mb-3 glow-cyan shadow-xl">
-                    <svg class="w-8 h-8" 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="text-2xl sm:text-3xl font-black text-white">ادخل لعالم التمكين والفهم</h1>
-                <p class="text-xs sm:text-sm text-slate-400 mt-1">تسجيل دخول آمن وسريع عبر رمز الواتساب المعتمد</p>
-            </div>
-
-            <!-- Auth Box -->
-            <div class="bg-[#1C2541] border border-saqel-border rounded-2xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
+            <!-- ========================================== -->
+            <!-- 1. AUTHENTICATION BOX (LOGIN / OTP)        -->
+            <!-- ========================================== -->
+            <div x-show="!isLoggedIn" class="auth-card-wrapper">
                 
-                <!-- Glow Accent -->
-                <div class="absolute top-0 right-0 w-32 h-32 bg-saqel-cyan/10 rounded-full blur-2xl pointer-events-none"></div>
-
-                <!-- Alert Messages -->
-                <template x-if="errorMessage">
-                    <div class="mb-5 p-3.5 rounded-xl bg-red-500/10 border border-red-500/30 text-red-300 text-xs sm:text-sm flex items-start gap-2">
-                        <svg class="w-5 h-5 text-red-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                        <span x-text="errorMessage"></span>
+                <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>
-                </template>
+                    <h1 class="auth-title">ادخل لعالم التمكين والفهم</h1>
+                    <p class="auth-subtitle">تسجيل دخول آمن وسريع عبر رمز الواتساب المعتمد</p>
+                </div>
 
-                <template x-if="successMessage">
-                    <div class="mb-5 p-3.5 rounded-xl bg-saqel-cyan/10 border border-saqel-cyan/30 text-saqel-cyan text-xs sm:text-sm flex items-start gap-2">
-                        <svg class="w-5 h-5 text-saqel-cyan shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
-                        <span x-text="successMessage"></span>
-                    </div>
-                </template>
+                <div class="auth-box">
 
-                <!-- STEP 1: PHONE NUMBER INPUT -->
-                <div x-show="authStep === 'phone'">
-                    <form @submit.prevent="sendOtp()">
-                        <!-- Full Name for New Registration -->
-                        <div class="mb-4">
-                            <label class="block text-xs font-bold text-slate-300 mb-2">الاسم الكامل للطالب (اختياري للشهادات)</label>
-                            <input type="text" x-model="fullName" placeholder="مثال: أحمد محمد خالد"
-                                   class="w-full bg-[#0B132B] border border-saqel-border focus:border-saqel-cyan focus:ring-1 focus:ring-saqel-cyan rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 outline-none transition">
+                    <!-- Alerts -->
+                    <template x-if="errorMessage">
+                        <div class="alert alert-error">
+                            <span>⚠️</span>
+                            <span x-text="errorMessage"></span>
                         </div>
+                    </template>
 
-                        <!-- Phone Number with Jordan Prefix -->
-                        <div class="mb-6">
-                            <label class="block text-xs font-bold text-slate-300 mb-2">رقم الهاتف (الواتساب) <span class="text-red-400">*</span></label>
-                            <div class="relative flex items-center" dir="ltr">
-                                <span class="absolute left-3 text-xs font-bold text-saqel-cyan bg-[#0B132B] px-2 py-1 rounded-md border border-saqel-border">
-                                    🇯🇴 +962
-                                </span>
-                                <input type="tel" x-model="phone" required placeholder="790000000"
-                                       class="w-full bg-[#0B132B] border border-saqel-border focus:border-saqel-cyan focus:ring-1 focus:ring-saqel-cyan rounded-xl pl-24 pr-4 py-3 text-sm text-white placeholder:text-slate-600 outline-none transition font-mono tracking-wider">
+                    <template x-if="successMessage">
+                        <div class="alert alert-success">
+                            <span>✓</span>
+                            <span x-text="successMessage"></span>
+                        </div>
+                    </template>
+
+                    <!-- STEP 1: Phone Number -->
+                    <div x-show="authStep === 'phone'">
+                        <form @submit.prevent="sendOtp()">
+                            <div class="form-group">
+                                <label class="form-label">الاسم الكامل للطالب (اختياري للشهادات)</label>
+                                <input type="text" x-model="fullName" placeholder="مثال: أحمد محمد خالد" class="input-text">
                             </div>
-                            <span class="text-[11px] text-slate-400 block mt-1.5">سيصلك رمز التحقق عبر الواتساب من منصة نبيه.</span>
-                        </div>
 
-                        <!-- Submit Button -->
-                        <button type="submit" :disabled="loading"
-                                class="w-full py-3.5 px-4 bg-gradient-to-r from-saqel-cyan to-teal-400 text-[#0B132B] font-extrabold rounded-xl hover:opacity-95 transition shadow-lg glow-cyan flex items-center justify-center gap-2 disabled:opacity-50 text-sm">
-                            <template x-if="loading">
-                                <svg class="animate-spin h-5 w-5 text-[#0B132B]" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
-                            </template>
-                            <span x-text="loading ? 'جارٍ الإرسال...' : 'إرسال رمز التحقق (OTP) ←'"></span>
-                        </button>
-                    </form>
-                </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" x-model="phone" required placeholder="790000000" class="input-text input-phone">
+                                </div>
+                                <span class="form-hint">يصلك رمز التحقق مباشرة على الواتساب المعتمد.</span>
+                            </div>
 
-                <!-- STEP 2: OTP VERIFICATION -->
-                <div x-show="authStep === 'otp'">
-                    <div class="text-center mb-6">
-                        <span class="text-xs text-slate-400">تم إرسال الرمز للرقم:</span>
-                        <div class="font-mono font-bold text-saqel-cyan text-sm mt-0.5" x-text="phoneDisplay"></div>
+                            <button type="submit" :disabled="loading" class="btn-primary">
+                                <template x-if="loading">
+                                    <div class="spinner"></div>
+                                </template>
+                                <span x-text="loading ? 'جارٍ الإرسال...' : 'إرسال رمز التحقق (OTP) ←'"></span>
+                            </button>
+                        </form>
                     </div>
 
-                    <form @submit.prevent="verifyOtp()">
-                        <!-- 6 Digits OTP Input -->
-                        <div class="mb-6">
-                            <label class="block text-xs font-bold text-slate-300 mb-2 text-center">أدخل رمز التحقق (6 أرقام)</label>
-                            <input type="text" x-model="otpCode" maxlength="6" autofocus placeholder="• • • • • •"
-                                   class="w-full bg-[#0B132B] border border-saqel-cyan/50 focus:border-saqel-cyan focus:ring-2 focus:ring-saqel-cyan/30 rounded-xl px-4 py-3.5 text-center text-2xl font-mono tracking-[0.4em] text-saqel-cyan placeholder:text-slate-700 outline-none transition">
+                    <!-- STEP 2: OTP Verification -->
+                    <div x-show="authStep === 'otp'">
+                        <div style="text-align: center; margin-bottom: 20px;">
+                            <span style="font-size: 12px; color: var(--text-muted);">تم إرسال رمز التحقق إلى:</span>
+                            <div style="font-family: monospace; font-size: 15px; font-weight: 800; color: var(--accent-cyan); margin-top: 4px;" x-text="phoneDisplay"></div>
                         </div>
 
-                        <!-- Submit Verification -->
-                        <button type="submit" :disabled="loading || otpCode.length < 6"
-                                class="w-full py-3.5 px-4 bg-gradient-to-r from-saqel-cyan to-teal-400 text-[#0B132B] font-extrabold rounded-xl hover:opacity-95 transition shadow-lg glow-cyan flex items-center justify-center gap-2 disabled:opacity-50 text-sm">
-                            <template x-if="loading">
-                                <svg class="animate-spin h-5 w-5 text-[#0B132B]" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
-                            </template>
-                            <span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للمنصة ✨'"></span>
-                        </button>
+                        <form @submit.prevent="verifyOtp()">
+                            <div class="form-group">
+                                <label class="form-label" style="text-align: center;">أدخل رمز التحقق (6 أرقام)</label>
+                                <input type="text" x-model="otpCode" maxlength="6" autofocus placeholder="• • • • • •" class="input-text otp-input">
+                            </div>
+
+                            <button type="submit" :disabled="loading || otpCode.length < 6" class="btn-primary">
+                                <template x-if="loading">
+                                    <div class="spinner"></div>
+                                </template>
+                                <span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للمنصة ✨'"></span>
+                            </button>
+
+                            <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 18px;">
+                                <button type="button" @click="authStep = 'phone'" class="btn-secondary">← تعديل الرقم</button>
+                                <template x-if="timer > 0">
+                                    <span style="font-size: 12px; color: var(--text-muted);" x-text="'إعادة الإرسال بعد (' + timer + 'ث)'"></span>
+                                </template>
+                                <template x-if="timer === 0">
+                                    <button type="button" @click="sendOtp()" class="btn-secondary btn-link-cyan">إعادة إرسال الرمز ↺</button>
+                                </template>
+                            </div>
+                        </form>
+                    </div>
+
+                    <div class="auth-footer">
+                        <span>اتصال مشفر بتكنولوجيا Zero-Trust وبصمة الجهاز الموحدة</span>
+                    </div>
 
-                        <!-- Actions: Resend / Change Phone -->
-                        <div class="flex items-center justify-between text-xs mt-5 pt-4 border-t border-saqel-border/50 text-slate-400">
-                            <button type="button" @click="authStep = 'phone'" class="hover:text-white transition">← تعديل الرقم</button>
-                            <template x-if="timer > 0">
-                                <span class="text-slate-500" x-text="'إعادة الإرسال بعد (' + timer + 'ث)'"></span>
-                            </template>
-                            <template x-if="timer === 0">
-                                <button type="button" @click="sendOtp()" class="text-saqel-cyan hover:underline font-bold">إعادة إرسال الرمز ↺</button>
-                            </template>
-                        </div>
-                    </form>
                 </div>
 
-                <!-- Footer Security Notice -->
-                <div class="mt-6 pt-4 border-t border-saqel-border/40 text-center flex items-center justify-center gap-2 text-[11px] text-slate-500">
-                    <svg class="w-3.5 h-3.5 text-saqel-cyan" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
-                    <span>اتصال مشفر بتكنولوجيا Zero-Trust وبصمة الجهاز الموحدة</span>
-                </div>
             </div>
-        </div>
 
-        <!-- ============================================================= -->
-        <!-- VIEW 2: STUDENT DASHBOARD WORKSPACE (Once Authenticated)      -->
-        <!-- ============================================================= -->
-        <div x-show="isLoggedIn" class="w-full space-y-8">
-
-            <!-- Dashboard Welcome Banner with Exam Readiness -->
-            <div class="bg-gradient-to-r from-[#1C2541] to-[#222F55] border border-saqel-border rounded-3xl p-6 sm:p-8 shadow-xl relative overflow-hidden">
-                <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 relative z-10">
+            <!-- ========================================== -->
+            <!-- 2. STUDENT DASHBOARD (AUTHENTICATED)       -->
+            <!-- ========================================== -->
+            <div x-show="isLoggedIn" style="width: 100%;">
+                
+                <div class="dashboard-hero">
                     <div>
-                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-saqel-cyan/10 border border-saqel-cyan/30 text-saqel-cyan text-xs font-bold mb-3">
-                            <span class="w-2 h-2 rounded-full bg-saqel-cyan animate-ping"></span>
-                            <span>دفعة التوجيهي 2007/2008</span>
-                        </div>
-                        <h2 class="text-2xl sm:text-3xl font-black text-white" x-text="'أهلاً بك، ' + (studentData.name || 'طالبنا المتميز') + ' 🚀'"></h2>
-                        <p class="text-sm text-slate-300 mt-1">رحلتك لصقل الفهم وتحقيق أعلى معدل وزاري تبدأ هنا.</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: 999px; margin-bottom: 12px;">دفعة التوجيهي 2007/2008</span>
+                        <h2 style="font-size: 26px; font-weight: 900; color: #FFFFFF;" x-text="'أهلاً بك، ' + (studentData.name || 'طالبنا المتميز') + ' 🚀'"></h2>
+                        <p style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">رحلتك لصقل الفهم وتحقيق أعلى معدل وزاري تبدأ هنا.</p>
                     </div>
 
-                    <!-- Exam Readiness Gauge -->
-                    <div class="bg-[#0B132B]/80 border border-saqel-border p-4 rounded-2xl flex items-center gap-4 min-w-[240px]">
-                        <div class="w-14 h-14 rounded-full border-4 border-saqel-cyan flex items-center justify-center font-black text-lg text-saqel-cyan glow-cyan">
-                            84%
-                        </div>
+                    <div class="readiness-box">
+                        <div class="gauge-circle">84%</div>
                         <div>
-                            <span class="text-xs font-bold text-slate-400 block">مؤشر الجاهزية للوزاري</span>
-                            <span class="text-xs text-emerald-400 font-semibold">ممتاز — مسارك مستقر</span>
+                            <span style="font-size: 11px; font-weight: 700; color: var(--text-muted); display: block;">مؤشر الجاهزية للوزاري</span>
+                            <span style="font-size: 12px; font-weight: 700; color: #34D399;">ممتاز — مسارك مستقر</span>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <!-- Features Grid (Courses & In-Video Quiz Demo) -->
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <!-- Card 1: Tawjihi Math -->
-                <div class="bg-[#1C2541] border border-saqel-border rounded-2xl p-5 hover:border-saqel-cyan/50 transition group cursor-pointer">
-                    <div class="flex items-center justify-between mb-3">
-                        <span class="text-xs font-bold px-2.5 py-1 rounded-lg bg-blue-500/10 text-blue-400 border border-blue-500/20">علمي</span>
-                        <span class="text-xs text-slate-400">18 درس • كويزات تفاعلية</span>
+                <div class="cards-grid">
+                    <div class="feature-card">
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
+                            <span style="font-size: 11px; font-weight: 800; background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3); color: #60A5FA; padding: 2px 8px; border-radius: 6px;">علمي</span>
+                            <span style="font-size: 11px; color: var(--text-muted);">18 درس • كويزات</span>
+                        </div>
+                        <h3 style="font-size: 17px; font-weight: 900; margin-bottom: 6px;">الرياضيات العلمي — المستوى الثالث</h3>
+                        <p style="font-size: 12px; color: var(--text-muted); line-height: 1.5;">شرح تفاعلي لمفاهيم الاشتقاق والنهايات مع أسئلة وزارية محاكية.</p>
                     </div>
-                    <h3 class="font-extrabold text-white text-lg group-hover:text-saqel-cyan transition">الرياضيات العلمي — المستوى الثالث</h3>
-                    <p class="text-xs text-slate-400 mt-2 line-clamp-2">شرح تفاعلي لمفاهيم الاشتقاق والنهايات مع أسئلة وزارية محاكية.</p>
-                    <div class="mt-4 pt-3 border-t border-saqel-border/50 flex items-center justify-between text-xs">
-                        <span class="text-saqel-cyan font-bold">متابعة الدرس 4 ←</span>
-                        <span class="text-slate-400">مكتمل 45%</span>
+
+                    <div class="feature-card">
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
+                            <span style="font-size: 11px; font-weight: 800; background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.3); color: #FBBF24; padding: 2px 8px; border-radius: 6px;">علمي</span>
+                            <span style="font-size: 11px; color: var(--text-muted);">14 درس • تجارب</span>
+                        </div>
+                        <h3 style="font-size: 17px; font-weight: 900; margin-bottom: 6px;">الفيزياء — الميكانيكا والطاقة</h3>
+                        <p style="font-size: 12px; color: var(--text-muted); line-height: 1.5;">صقل مفاهيم الزخم الخطي والتصادمات وتطبيقاتها في الامتحانات.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
+                            <span style="font-size: 11px; font-weight: 800; background: rgba(168,85,247,0.15); border: 1px solid rgba(168,85,247,0.3); color: #C084FC; padding: 2px 8px; border-radius: 6px;">ميزة ذكية</span>
+                            <span style="font-size: 11px; color: var(--accent-cyan); font-weight: 800;">Whisper AI</span>
+                        </div>
+                        <h3 style="font-size: 17px; font-weight: 900; margin-bottom: 6px;">الملاحظات الصوتية والتفريغ</h3>
+                        <p style="font-size: 12px; color: var(--text-muted); line-height: 1.5;">سجل أي ملاحظة بصوتك أثناء الحصة، والذكاء الاصطناعي يفرغها لنص فوري.</p>
                     </div>
                 </div>
 
-                <!-- Card 2: Physics -->
-                <div class="bg-[#1C2541] border border-saqel-border rounded-2xl p-5 hover:border-saqel-gold/50 transition group cursor-pointer">
-                    <div class="flex items-center justify-between mb-3">
-                        <span class="text-xs font-bold px-2.5 py-1 rounded-lg bg-amber-500/10 text-amber-400 border border-amber-500/20">علمي</span>
-                        <span class="text-xs text-slate-400">14 درس • تجارب تفاعلية</span>
+                <div class="quiz-demo-box">
+                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                        <span style="font-size: 11px; font-weight: 800; background: rgba(0,245,212,0.1); border: 1px solid rgba(0,245,212,0.3); color: var(--accent-cyan); padding: 2px 8px; border-radius: 6px;">تجربة تفاعلية (Coursera Model)</span>
                     </div>
-                    <h3 class="font-extrabold text-white text-lg group-hover:text-saqel-gold transition">الفيزياء — الميكانيكا والطاقة</h3>
-                    <p class="text-xs text-slate-400 mt-2 line-clamp-2">صقل مفاهيم الزخم الخطي والتصادمات وتطبيقاتها في الامتحانات.</p>
-                    <div class="mt-4 pt-3 border-t border-saqel-border/50 flex items-center justify-between text-xs">
-                        <span class="text-saqel-gold font-bold">بدء التعلم ←</span>
-                        <span class="text-slate-400">جديد</span>
-                    </div>
-                </div>
+                    <h3 style="font-size: 20px; font-weight: 900;">كيف يعمل الكويز الصدمي داخل الفيديو؟</h3>
+                    <p style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">يتوقف الفيديو تلقائياً عند لحظة قياس الفهم. إذا أخطأت، يعيدك المشغل 45 ثانية لمشاهدة شرح المفهوم مجدداً.</p>
 
-                <!-- Card 3: Interactive Voice Notes Demo -->
-                <div class="bg-[#1C2541] border border-saqel-border rounded-2xl p-5 hover:border-saqel-cyan/50 transition group">
-                    <div class="flex items-center justify-between mb-3">
-                        <span class="text-xs font-bold px-2.5 py-1 rounded-lg bg-purple-500/10 text-purple-400 border border-purple-500/20">ميزة ذكية</span>
-                        <span class="text-xs text-saqel-cyan font-bold">Whisper AI</span>
-                    </div>
-                    <h3 class="font-extrabold text-white text-lg">الملاحظات الصوتية والتفريغ</h3>
-                    <p class="text-xs text-slate-400 mt-2">سجل أي ملاحظة بصوتك أثناء الحصة، والذكاء الاصطناعي يفرغها لنص فوري.</p>
-                    <div class="mt-4 pt-3 border-t border-saqel-border/50 flex items-center justify-between text-xs">
-                        <span class="text-saqel-cyan font-bold">دفتر الملاحظات (3) ←</span>
-                    </div>
-                </div>
-            </div>
+                    <div class="interactive-quiz-container" x-data="{ selectedOpt: null, answered: false, isCorrect: false }">
+                        <div style="font-size: 11px; font-weight: 800; color: var(--accent-gold); margin-bottom: 8px;">سؤال اللحظة (الدقيقة 08:30 من درس الاشتقاق):</div>
+                        <p style="font-size: 14px; font-weight: 800; margin-bottom: 14px;">ما هو مشتق اقتران الجيب f(x) = sin(x) بالنسبة لـ x؟</p>
 
-            <!-- Interactive In-Video Quiz Demo Section -->
-            <div class="bg-[#1C2541] border border-saqel-cyan/40 rounded-3xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
-                <div class="max-w-2xl">
-                    <div class="flex items-center gap-2 text-saqel-cyan text-xs font-bold mb-2">
-                        <span class="px-2 py-0.5 rounded bg-saqel-cyan/10 border border-saqel-cyan/30">تجربة تفاعلية (Coursera Model)</span>
-                    </div>
-                    <h3 class="text-xl font-extrabold text-white">كيف يعمل الكويز الصدمي داخل الفيديو؟</h3>
-                    <p class="text-xs text-slate-400 mt-1 mb-6">يتوقف الفيديو تلقائياً عند لحظة قياس الفهم. إذا أخطأت، يعيدك المشغل 45 ثانية لمشاهدة شرح المفهوم مجدداً.</p>
-
-                    <!-- Interactive Demo Box -->
-                    <div class="bg-[#0B132B] p-5 rounded-2xl border border-saqel-border" x-data="{ selectedOpt: null, answered: false, isCorrect: false }">
-                        <div class="text-xs text-saqel-gold font-bold mb-2">سؤال اللحظة (الدقيقة 08:30 من درس الاشتقاق):</div>
-                        <p class="text-sm font-bold text-white mb-4">ما هو مشتق اقتران الجيب f(x) = sin(x) بالنسبة لـ x؟</p>
-
-                        <div class="space-y-2.5">
-                            <button @click="selectedOpt = 1; answered = true; isCorrect = true"
-                                    :class="answered && selectedOpt === 1 ? 'bg-emerald-500/20 border-emerald-400 text-emerald-300' : 'bg-[#1C2541] border-saqel-border text-slate-200 hover:border-saqel-cyan'"
-                                    class="w-full text-right p-3 rounded-xl border text-xs font-bold transition flex items-center justify-between">
+                        <div>
+                            <div @click="selectedOpt = 1; answered = true; isCorrect = true"
+                                 :class="answered && selectedOpt === 1 ? 'quiz-option correct' : 'quiz-option'">
                                 <span>أ) cos(x)</span>
-                                <span x-show="answered && selectedOpt === 1" class="text-emerald-400">✓ إجابة صحيحة! استئناف الفيديو</span>
-                            </button>
-                            <button @click="selectedOpt = 2; answered = true; isCorrect = false"
-                                    :class="answered && selectedOpt === 2 ? 'bg-red-500/20 border-red-400 text-red-300' : 'bg-[#1C2541] border-saqel-border text-slate-200 hover:border-saqel-cyan'"
-                                    class="w-full text-right p-3 rounded-xl border text-xs font-bold transition flex items-center justify-between">
+                                <span x-show="answered && selectedOpt === 1" style="color: #34D399;">✓ إجابة صحيحة! استئناف الفيديو</span>
+                            </div>
+                            <div @click="selectedOpt = 2; answered = true; isCorrect = false"
+                                 :class="answered && selectedOpt === 2 ? 'quiz-option incorrect' : 'quiz-option'">
                                 <span>ب) -cos(x)</span>
-                                <span x-show="answered && selectedOpt === 2" class="text-red-400">✗ خطأ — سيتم إرجاعك 45 ثانية للشرح</span>
-                            </button>
+                                <span x-show="answered && selectedOpt === 2" style="color: #F87171;">✗ خطأ — سيتم إرجاعك 45 ثانية للشرح</span>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <!-- Dynamic Watermark Overlay Simulator -->
-            <div class="fixed bottom-4 left-4 z-50 pointer-events-none opacity-40 watermark-anim select-none">
-                <div class="bg-black/60 backdrop-blur-sm px-3 py-1 rounded border border-white/20 text-[10px] font-mono text-saqel-cyan">
+                <div class="watermark-anim">
                     <span x-text="'SAQEL-DRM • ' + (studentData.phone || '079XXXXXXX')"></span>
                 </div>
+
             </div>
 
         </div>
-
     </main>
 
     <!-- Footer -->
-    <footer class="border-t border-saqel-border/40 py-6 text-center text-xs text-slate-400 bg-[#0B132B]">
-        <div class="max-w-6xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-3">
-            <span>منصة صَقِل التعليمية — الجيل الثاني للتعليم التفاعلي © 2026</span>
-            <div class="flex items-center gap-4">
-                <a href="/teacher" class="hover:text-saqel-cyan transition">بوابة المعلم</a>
-                <span class="text-slate-700">•</span>
-                <span class="text-emerald-400">الخادم متصل ومشفر 🔒</span>
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <span>منصة صَقِل التعليمية — الجيل الثاني للتعليم التفاعلي © 2026</span>
+                <div style="display: flex; gap: 16px;">
+                    <a href="/teacher" class="nav-link">بوابة المعلم</a>
+                    <span style="color: var(--accent-cyan);">الخادم متصل ومشفر 🔒</span>
+                </div>
             </div>
         </div>
     </footer>
+
 </body>
 </html>
 HTML;
diff --git a/backend/app/Views/TeacherPortal.php b/backend/app/Views/TeacherPortal.php
index 22e55bf..880aac7 100644
--- a/backend/app/Views/TeacherPortal.php
+++ b/backend/app/Views/TeacherPortal.php
@@ -17,31 +17,467 @@ class TeacherPortal
     <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=Cairo:wght@400;600;700;800;900&display=swap" rel="stylesheet">
-    <!-- Tailwind CSS -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        saqel: {
-                            dark: '#0B132B',
-                            card: '#1C2541',
-                            cardHover: '#222F55',
-                            cyan: '#00F5D4',
-                            gold: '#FFD166',
-                            border: '#2E3D66',
-                            textMuted: '#94A3B8'
-                        }
-                    },
-                    fontFamily: {
-                        cairo: ['Cairo', 'sans-serif'],
-                    }
-                }
-            }
+
+    <!-- 1. Pure Self-Contained Luxury CSS (Zero External CDN Failure Risk) -->
+    <style>
+        :root {
+            --bg-dark: #0B132B;
+            --bg-card: #16203D;
+            --bg-card-hover: #1E2C52;
+            --bg-input: #090E20;
+            --border: #2A3B66;
+            --border-focus: #FFD166;
+            --text-primary: #FFFFFF;
+            --text-secondary: #CBD5E1;
+            --text-muted: #8E9FB8;
+            --accent-gold: #FFD166;
+            --accent-gold-dark: #E5A91E;
+            --accent-cyan: #00F5D4;
+            --accent-red: #EF4444;
+            --accent-green: #10B981;
         }
-    </script>
-    <!-- 1. Define Alpine Data Component BEFORE Alpine Loads -->
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Cairo', system-ui, -apple-system, sans-serif;
+        }
+
+        body {
+            background-color: var(--bg-dark);
+            color: var(--text-primary);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            background-image: 
+                radial-gradient(circle at 15% 15%, rgba(255, 209, 102, 0.06) 0%, transparent 40%),
+                radial-gradient(circle at 85% 85%, rgba(0, 245, 212, 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;
+        }
+
+        /* Layout & Container */
+        .container {
+            max-width: 1140px;
+            margin: 0 auto;
+            padding: 0 20px;
+            width: 100%;
+        }
+
+        /* Header */
+        header {
+            border-bottom: 1px solid var(--border);
+            background-color: rgba(11, 19, 43, 0.95);
+            backdrop-filter: blur(12px);
+            position: sticky;
+            top: 0;
+            z-index: 50;
+        }
+
+        .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-gold), var(--accent-gold-dark));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--bg-dark);
+            font-size: 20px;
+            font-weight: 900;
+            box-shadow: 0 0 20px rgba(255, 209, 102, 0.3);
+        }
+
+        .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(255, 209, 102, 0.12);
+            color: var(--accent-gold);
+            border: 1px solid rgba(255, 209, 102, 0.35);
+            margin-right: 8px;
+        }
+
+        .nav-link {
+            font-size: 13px;
+            color: var(--text-secondary);
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: 0.2s;
+        }
+
+        .nav-link:hover {
+            color: var(--accent-cyan);
+        }
+
+        .nav-link-highlight {
+            color: var(--accent-cyan);
+            font-weight: 800;
+            text-decoration: underline;
+        }
+
+        /* Main Content */
+        main {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 40px 0;
+        }
+
+        /* Auth Card */
+        .auth-card-wrapper {
+            width: 100%;
+            max-width: 460px;
+            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(255, 209, 102, 0.4);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--accent-gold);
+            margin-bottom: 16px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+        }
+
+        .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-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;
+        }
+
+        /* Forms & Inputs */
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-label {
+            display: block;
+            font-size: 12px;
+            font-weight: 700;
+            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;
+        }
+
+        .input-text:focus {
+            border-color: var(--accent-gold);
+            box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.15);
+        }
+
+        .input-text::placeholder {
+            color: #52607D;
+        }
+
+        /* Phone Input Group */
+        .phone-input-group {
+            display: flex;
+            align-items: center;
+            direction: ltr;
+            position: relative;
+        }
+
+        .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-gold);
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            user-select: none;
+        }
+
+        .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;
+        }
+
+        /* Buttons */
+        .btn-primary {
+            width: 100%;
+            padding: 14px;
+            background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
+            color: var(--bg-dark);
+            border: none;
+            border-radius: 12px;
+            font-size: 15px;
+            font-weight: 800;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            box-shadow: 0 8px 20px rgba(255, 209, 102, 0.25);
+            transition: transform 0.15s, opacity 0.15s;
+        }
+
+        .btn-primary:hover {
+            opacity: 0.95;
+            transform: translateY(-1px);
+        }
+
+        .btn-primary:active {
+            transform: translateY(0);
+        }
+
+        .btn-primary:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .btn-secondary {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            font-size: 12px;
+            cursor: pointer;
+            padding: 6px 0;
+            transition: color 0.2s;
+        }
+
+        .btn-secondary:hover {
+            color: #FFFFFF;
+        }
+
+        .btn-link-gold {
+            color: var(--accent-gold);
+            font-weight: 700;
+            text-decoration: underline;
+        }
+
+        /* OTP Input */
+        .otp-input {
+            text-align: center;
+            font-size: 26px;
+            font-family: monospace;
+            letter-spacing: 10px;
+            font-weight: 900;
+            color: var(--accent-gold);
+            border-color: rgba(255, 209, 102, 0.5);
+            padding: 14px;
+        }
+
+        /* Alerts */
+        .alert {
+            padding: 12px 16px;
+            border-radius: 12px;
+            font-size: 12.5px;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            line-height: 1.5;
+        }
+
+        .alert-error {
+            background: rgba(239, 68, 68, 0.12);
+            border: 1px solid rgba(239, 68, 68, 0.35);
+            color: #FCA5A5;
+        }
+
+        .alert-success {
+            background: rgba(255, 209, 102, 0.12);
+            border: 1px solid rgba(255, 209, 102, 0.35);
+            color: var(--accent-gold);
+        }
+
+        /* Card Footer */
+        .auth-footer {
+            margin-top: 24px;
+            padding-top: 16px;
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            text-align: center;
+            font-size: 11.5px;
+            color: var(--text-muted);
+        }
+
+        /* Dashboard Styles */
+        .dashboard-hero {
+            background: linear-gradient(135deg, var(--bg-card), var(--bg-card-hover));
+            border: 1px solid var(--border);
+            border-radius: 24px;
+            padding: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 24px;
+            flex-wrap: wrap;
+            margin-bottom: 28px;
+        }
+
+        .stats-grid {
+            display: flex;
+            gap: 16px;
+            flex-wrap: wrap;
+        }
+
+        .stat-card {
+            background: rgba(11, 19, 43, 0.85);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 16px 24px;
+            text-align: center;
+            min-width: 140px;
+        }
+
+        .stat-card.gold-glow {
+            border-color: rgba(255, 209, 102, 0.5);
+            box-shadow: 0 0 20px rgba(255, 209, 102, 0.15);
+        }
+
+        .stat-label {
+            font-size: 11px;
+            font-weight: 700;
+            color: var(--text-muted);
+            display: block;
+            margin-bottom: 4px;
+        }
+
+        .stat-val {
+            font-size: 24px;
+            font-weight: 900;
+        }
+
+        .val-cyan { color: var(--accent-cyan); }
+        .val-gold { color: var(--accent-gold); }
+
+        .studio-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 24px;
+            padding: 32px;
+        }
+
+        .grid-2 {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            background: rgba(11, 19, 43, 0.8);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 24px;
+            margin-top: 20px;
+        }
+
+        @media (max-width: 768px) {
+            .grid-2 { grid-template-columns: 1fr; }
+            .dashboard-hero { padding: 24px; }
+        }
+
+        /* Footer */
+        footer {
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            padding: 24px 0;
+            background: var(--bg-dark);
+            color: var(--text-muted);
+            font-size: 12px;
+        }
+
+        .footer-content {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        /* Spinner */
+        .spinner {
+            width: 18px;
+            height: 18px;
+            border: 3px solid rgba(11, 19, 43, 0.3);
+            border-top-color: var(--bg-dark);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+    </style>
+
+    <!-- 2. Alpine Component Initialization in Head -->
     <script>
         function teacherAuth() {
             return {
@@ -67,7 +503,7 @@ class TeacherPortal
                             await this.fetchProfile(token);
                         }
                     } catch (e) {
-                        console.error('Teacher Init error:', e);
+                        console.error('Teacher App init error:', e);
                     }
                 },
 
@@ -75,7 +511,6 @@ class TeacherPortal
                     try {
                         const raw = [
                             navigator.userAgent,
-                            navigator.language,
                             screen.width + 'x' + screen.height,
                             Intl.DateTimeFormat().resolvedOptions().timeZone
                         ].join('###');
@@ -118,10 +553,10 @@ class TeacherPortal
                             }
                             this.startTimer(60);
                         } else {
-                            this.errorMessage = data.message || 'فشل إرسال رمز التحقق';
+                            this.errorMessage = data.message || 'فشل إرسال رمز التحقق. يرجى مراجعة إعدادات NABEH في السيرفر.';
                         }
                     } catch (e) {
-                        this.errorMessage = 'حدث خطأ في الاتصال بالخادم. تأكد من تفعيل السيرفر.';
+                        this.errorMessage = 'حدث خطأ في الاتصال بالخادم. يرجى فحص /api/test/nabeh';
                     } finally {
                         this.loading = false;
                     }
@@ -155,10 +590,10 @@ class TeacherPortal
                             this.isLoggedIn = true;
                             this.successMessage = 'تم تسجيل الدخول بنجاح!';
                         } else {
-                            this.errorMessage = data.message || 'رمز التحقق غير صحيح أو غير مصرح للدخول كمعلم';
+                            this.errorMessage = data.message || 'رمز التحقق غير صحيح أو غير مصرح للمعلم';
                         }
                     } catch (e) {
-                        this.errorMessage = 'حدث خطأ في التحقق من الرمز';
+                        this.errorMessage = 'حدث خطأ أثناء التحقق من الرمز';
                     } finally {
                         this.loading = false;
                     }
@@ -216,268 +651,237 @@ class TeacherPortal
             };
         }
     </script>
-    <!-- Alpine.js Core Script (Deferred) -->
+    <!-- 3. Deferred Alpine Loader -->
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <style>
-        body { font-family: 'Cairo', sans-serif; background-color: #0B132B; }
-        .glow-gold { box-shadow: 0 0 25px -5px rgba(255, 209, 102, 0.35); }
-        .bg-grid {
-            background-size: 30px 30px;
-            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
-                              linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
-        }
-    </style>
 </head>
-<body class="bg-[#0B132B] text-slate-100 min-h-screen bg-grid antialiased flex flex-col justify-between selection:bg-saqel-gold selection:text-[#0B132B]"
-      x-data="teacherAuth()" x-init="initApp()">
+<body x-data="teacherAuth()" x-init="initApp()">
 
-    <!-- Top Navigation Bar -->
-    <header class="border-b border-saqel-border/80 bg-[#0B132B]/95 backdrop-blur-md sticky top-0 z-40">
-        <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
-            <div class="flex items-center gap-3">
-                <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-saqel-gold to-amber-500 p-[2px] flex items-center justify-center glow-gold">
-                    <div class="w-full h-full bg-[#0B132B] rounded-[10px] flex items-center justify-center text-saqel-gold font-black text-xl">
-                        صـ
+    <!-- Header -->
+    <header>
+        <div class="container">
+            <div class="header-content">
+                <a href="/teacher" class="logo-area">
+                    <div class="logo-badge">صـ</div>
+                    <div>
+                        <span class="brand-title">صَقِل</span>
+                        <span class="portal-pill">استوديو المعلمين</span>
                     </div>
-                </div>
+                </a>
+
                 <div>
-                    <span class="font-extrabold text-lg text-white tracking-wide">صَقِل</span>
-                    <span class="text-xs px-2.5 py-0.5 rounded-full bg-saqel-gold/10 text-saqel-gold border border-saqel-gold/30 mr-2 font-semibold">استوديو المعلمين</span>
+                    <template x-if="isLoggedIn">
+                        <div style="display: flex; align-items: center; gap: 12px;">
+                            <span style="font-size: 13px; color: var(--text-secondary);" x-text="'أهلاً، ' + (teacherData.name || 'أستاذنا')"></span>
+                            <button @click="logout()" 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>
+                        </div>
+                    </template>
+                    <template x-if="!isLoggedIn">
+                        <a href="/student" class="nav-link">
+                            <span>أنت طالب؟</span>
+                            <span class="nav-link-highlight">بوابة الطلاب ←</span>
+                        </a>
+                    </template>
                 </div>
             </div>
-
-            <!-- Header Right Controls -->
-            <div class="flex items-center gap-3">
-                <template x-if="isLoggedIn">
-                    <div class="flex items-center gap-3">
-                        <span class="text-sm text-slate-300 hidden sm:inline" x-text="'أهلاً، ' + (teacherData.name || 'أستاذنا')"></span>
-                        <button @click="logout()" class="text-xs px-3 py-1.5 rounded-lg border border-red-500/40 text-red-400 hover:bg-red-500/10 transition">
-                            تسجيل الخروج
-                        </button>
-                    </div>
-                </template>
-                <template x-if="!isLoggedIn">
-                    <a href="/student" class="text-xs sm:text-sm text-slate-400 hover:text-saqel-cyan transition flex items-center gap-1.5">
-                        <span>أنت طالب؟</span>
-                        <span class="text-saqel-cyan font-bold underline">بوابة الطلاب ←</span>
-                    </a>
-                </template>
-            </div>
         </div>
     </header>
 
-    <!-- Main Content Container -->
-    <main class="flex-1 max-w-6xl mx-auto px-4 sm:px-6 py-8 w-full flex items-center justify-center">
+    <!-- Main Content -->
+    <main>
+        <div class="container">
 
-        <!-- ============================================================= -->
-        <!-- VIEW 1: TEACHER AUTHENTICATION FLOW                          -->
-        <!-- ============================================================= -->
-        <div x-show="!isLoggedIn" class="w-full max-w-md">
-
-            <!-- Card Header -->
-            <div class="text-center mb-6">
-                <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-[#1C2541] border border-saqel-gold/40 text-saqel-gold mb-3 glow-gold shadow-xl">
-                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
-                    </svg>
-                </div>
-                <h1 class="text-2xl sm:text-3xl font-black text-white">استوديو صَقِل للمعلمين</h1>
-                <p class="text-xs sm:text-sm text-slate-400 mt-1">حماية متطورة لمحتواك وأرباح متنامية بنظام الشراكة</p>
-            </div>
-
-            <!-- Auth Box -->
-            <div class="bg-[#1C2541] border border-saqel-border rounded-2xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
+            <!-- ========================================== -->
+            <!-- 1. AUTHENTICATION BOX (LOGIN / OTP)        -->
+            <!-- ========================================== -->
+            <div x-show="!isLoggedIn" class="auth-card-wrapper">
                 
-                <!-- Glow Accent -->
-                <div class="absolute top-0 left-0 w-32 h-32 bg-saqel-gold/10 rounded-full blur-2xl pointer-events-none"></div>
-
-                <!-- Alert Messages -->
-                <template x-if="errorMessage">
-                    <div class="mb-5 p-3.5 rounded-xl bg-red-500/10 border border-red-500/30 text-red-300 text-xs sm:text-sm flex items-start gap-2">
-                        <svg class="w-5 h-5 text-red-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                        <span x-text="errorMessage"></span>
+                <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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
+                        </svg>
                     </div>
-                </template>
+                    <h1 class="auth-title">استوديو صَقِل للمعلمين</h1>
+                    <p class="auth-subtitle">حماية محتواك بـ DRM وأرباح متنامية بنظام الشراكة التفاعلية</p>
+                </div>
 
-                <template x-if="successMessage">
-                    <div class="mb-5 p-3.5 rounded-xl bg-saqel-gold/10 border border-saqel-gold/30 text-saqel-gold text-xs sm:text-sm flex items-start gap-2">
-                        <svg class="w-5 h-5 text-saqel-gold shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
-                        <span x-text="successMessage"></span>
-                    </div>
-                </template>
+                <div class="auth-box">
 
-                <!-- STEP 1: PHONE NUMBER INPUT -->
-                <div x-show="authStep === 'phone'">
-                    <form @submit.prevent="sendOtp()">
-                        <!-- Full Name -->
-                        <div class="mb-4">
-                            <label class="block text-xs font-bold text-slate-300 mb-2">اسم المعلم / الأستاذ</label>
-                            <input type="text" x-model="fullName" placeholder="مثال: الأستاذ حمزة النجار"
-                                   class="w-full bg-[#0B132B] border border-saqel-border focus:border-saqel-gold focus:ring-1 focus:ring-saqel-gold rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 outline-none transition">
+                    <!-- Alerts -->
+                    <template x-if="errorMessage">
+                        <div class="alert alert-error">
+                            <span>⚠️</span>
+                            <span x-text="errorMessage"></span>
                         </div>
+                    </template>
 
-                        <!-- Phone Number -->
-                        <div class="mb-6">
-                            <label class="block text-xs font-bold text-slate-300 mb-2">رقم الهاتف (الواتساب) <span class="text-red-400">*</span></label>
-                            <div class="relative flex items-center" dir="ltr">
-                                <span class="absolute left-3 text-xs font-bold text-saqel-gold bg-[#0B132B] px-2 py-1 rounded-md border border-saqel-border">
-                                    🇯🇴 +962
-                                </span>
-                                <input type="tel" x-model="phone" required placeholder="790000000"
-                                       class="w-full bg-[#0B132B] border border-saqel-border focus:border-saqel-gold focus:ring-1 focus:ring-saqel-gold rounded-xl pl-24 pr-4 py-3 text-sm text-white placeholder:text-slate-600 outline-none transition font-mono tracking-wider">
+                    <template x-if="successMessage">
+                        <div class="alert alert-success">
+                            <span>✓</span>
+                            <span x-text="successMessage"></span>
+                        </div>
+                    </template>
+
+                    <!-- STEP 1: Phone Number -->
+                    <div x-show="authStep === 'phone'">
+                        <form @submit.prevent="sendOtp()">
+                            <div class="form-group">
+                                <label class="form-label">اسم الأستاذ / المعلم</label>
+                                <input type="text" x-model="fullName" placeholder="مثال: الأستاذ حمزة النجار" class="input-text">
                             </div>
-                            <span class="text-[11px] text-slate-400 block mt-1.5">يُشترط رقم مسجل ومعتمد لدى إدارة المنصة.</span>
-                        </div>
 
-                        <!-- Submit Button -->
-                        <button type="submit" :disabled="loading"
-                                class="w-full py-3.5 px-4 bg-gradient-to-r from-saqel-gold to-amber-500 text-[#0B132B] font-extrabold rounded-xl hover:opacity-95 transition shadow-lg glow-gold flex items-center justify-center gap-2 disabled:opacity-50 text-sm">
-                            <template x-if="loading">
-                                <svg class="animate-spin h-5 w-5 text-[#0B132B]" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
-                            </template>
-                            <span x-text="loading ? 'جارٍ التحقق...' : 'دخول استوديو المعلم (OTP) ←'"></span>
-                        </button>
-                    </form>
-                </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" x-model="phone" required placeholder="790000000" class="input-text input-phone">
+                                </div>
+                                <span class="form-hint">يصلك رمز التحقق مباشرة على الواتساب المعتمد.</span>
+                            </div>
 
-                <!-- STEP 2: OTP VERIFICATION -->
-                <div x-show="authStep === 'otp'">
-                    <div class="text-center mb-6">
-                        <span class="text-xs text-slate-400">تم إرسال الرمز للواتساب:</span>
-                        <div class="font-mono font-bold text-saqel-gold text-sm mt-0.5" x-text="phoneDisplay"></div>
+                            <button type="submit" :disabled="loading" class="btn-primary">
+                                <template x-if="loading">
+                                    <div class="spinner"></div>
+                                </template>
+                                <span x-text="loading ? 'جارٍ التحقق...' : 'دخول استوديو المعلم (OTP) ←'"></span>
+                            </button>
+                        </form>
                     </div>
 
-                    <form @submit.prevent="verifyOtp()">
-                        <!-- 6 Digits OTP Input -->
-                        <div class="mb-6">
-                            <label class="block text-xs font-bold text-slate-300 mb-2 text-center">أدخل رمز التحقق (6 أرقام)</label>
-                            <input type="text" x-model="otpCode" maxlength="6" autofocus placeholder="• • • • • •"
-                                   class="w-full bg-[#0B132B] border border-saqel-gold/50 focus:border-saqel-gold focus:ring-2 focus:ring-saqel-gold/30 rounded-xl px-4 py-3.5 text-center text-2xl font-mono tracking-[0.4em] text-saqel-gold placeholder:text-slate-700 outline-none transition">
+                    <!-- STEP 2: OTP Verification -->
+                    <div x-show="authStep === 'otp'">
+                        <div style="text-align: center; margin-bottom: 20px;">
+                            <span style="font-size: 12px; color: var(--text-muted);">تم إرسال رمز التحقق إلى:</span>
+                            <div style="font-family: monospace; font-size: 15px; font-weight: 800; color: var(--accent-gold); margin-top: 4px;" x-text="phoneDisplay"></div>
                         </div>
 
-                        <!-- Submit Verification -->
-                        <button type="submit" :disabled="loading || otpCode.length < 6"
-                                class="w-full py-3.5 px-4 bg-gradient-to-r from-saqel-gold to-amber-500 text-[#0B132B] font-extrabold rounded-xl hover:opacity-95 transition shadow-lg glow-gold flex items-center justify-center gap-2 disabled:opacity-50 text-sm">
-                            <template x-if="loading">
-                                <svg class="animate-spin h-5 w-5 text-[#0B132B]" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
-                            </template>
-                            <span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للاستوديو 🎓'"></span>
-                        </button>
+                        <form @submit.prevent="verifyOtp()">
+                            <div class="form-group">
+                                <label class="form-label" style="text-align: center;">أدخل رمز التحقق (6 أرقام)</label>
+                                <input type="text" x-model="otpCode" maxlength="6" autofocus placeholder="• • • • • •" class="input-text otp-input">
+                            </div>
 
-                        <!-- Actions -->
-                        <div class="flex items-center justify-between text-xs mt-5 pt-4 border-t border-saqel-border/50 text-slate-400">
-                            <button type="button" @click="authStep = 'phone'" class="hover:text-white transition">← تعديل الرقم</button>
-                            <template x-if="timer > 0">
-                                <span class="text-slate-500" x-text="'إعادة الإرسال بعد (' + timer + 'ث)'"></span>
-                            </template>
-                            <template x-if="timer === 0">
-                                <button type="button" @click="sendOtp()" class="text-saqel-gold hover:underline font-bold">إعادة إرسال الرمز ↺</button>
-                            </template>
-                        </div>
-                    </form>
-                </div>
+                            <button type="submit" :disabled="loading || otpCode.length < 6" class="btn-primary">
+                                <template x-if="loading">
+                                    <div class="spinner"></div>
+                                </template>
+                                <span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للاستوديو 🎓'"></span>
+                            </button>
 
-                <!-- Footer Partner Notice -->
-                <div class="mt-6 pt-4 border-t border-saqel-border/40 text-center text-[11px] text-slate-500">
-                    <span>حماية محتوى DRM كاملة + تقاسم أرباح 45%–50% شفاف ومؤتمت</span>
-                </div>
-            </div>
-        </div>
-
-        <!-- ============================================================= -->
-        <!-- VIEW 2: TEACHER STUDIO WORKSPACE                             -->
-        <!-- ============================================================= -->
-        <div x-show="isLoggedIn" class="w-full space-y-8">
-
-            <!-- Teacher Summary Header -->
-            <div class="bg-gradient-to-r from-[#1C2541] to-[#222F55] border border-saqel-border rounded-3xl p-6 sm:p-8 shadow-xl">
-                <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
-                    <div>
-                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-saqel-gold/10 border border-saqel-gold/30 text-saqel-gold text-xs font-bold mb-3">
-                            <span>استوديو المعلم المعتمد</span>
-                        </div>
-                        <h2 class="text-2xl sm:text-3xl font-black text-white" x-text="'أهلاً بك، ' + (teacherData.name || 'أستاذنا الفاضل') + ' 👨‍🏫'"></h2>
-                        <p class="text-sm text-slate-300 mt-1">إدارة دوراتك، إدراج كويزات الفيديو التفاعلية، ومتابعة نمو طلابك.</p>
+                            <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 18px;">
+                                <button type="button" @click="authStep = 'phone'" class="btn-secondary">← تعديل الرقم</button>
+                                <template x-if="timer > 0">
+                                    <span style="font-size: 12px; color: var(--text-muted);" x-text="'إعادة الإرسال بعد (' + timer + 'ث)'"></span>
+                                </template>
+                                <template x-if="timer === 0">
+                                    <button type="button" @click="sendOtp()" class="btn-secondary btn-link-gold">إعادة إرسال الرمز ↺</button>
+                                </template>
+                            </div>
+                        </form>
                     </div>
 
-                    <!-- Teacher Earnings Summary -->
-                    <div class="flex items-center gap-4">
-                        <div class="bg-[#0B132B]/80 border border-saqel-border p-4 rounded-2xl text-center min-w-[130px]">
-                            <span class="text-xs text-slate-400 block font-bold">إجمالي الطلاب</span>
-                            <span class="text-2xl font-black text-saqel-cyan">1,240</span>
-                        </div>
-                        <div class="bg-[#0B132B]/80 border border-saqel-gold/40 p-4 rounded-2xl text-center min-w-[150px] glow-gold">
-                            <span class="text-xs text-slate-400 block font-bold">أرباحك المتراكمة</span>
-                            <span class="text-2xl font-black text-saqel-gold">19,530 د.أ</span>
-                        </div>
+                    <div class="auth-footer">
+                        <span>حماية محتوى DRM كاملة + تقاسم أرباح 45%–50% شفاف ومؤتمت</span>
                     </div>
+
                 </div>
+
             </div>
 
-            <!-- In-Video Quiz Creator Tool (Coursera Engine) -->
-            <div class="bg-[#1C2541] border border-saqel-border rounded-3xl p-6 sm:p-8 shadow-xl">
-                <div class="flex items-center justify-between mb-6">
+            <!-- ========================================== -->
+            <!-- 2. TEACHER DASHBOARD (AUTHENTICATED)       -->
+            <!-- ========================================== -->
+            <div x-show="isLoggedIn" style="width: 100%;">
+                
+                <div class="dashboard-hero">
                     <div>
-                        <h3 class="text-lg font-black text-white">إضافة كويز تفاعلي داخل الفيديو 🎬</h3>
-                        <p class="text-xs text-slate-400 mt-1">حدد الثانية الزمنية في الفيديو التي سيتوقف عندها الشرح لفحص فهم الطالب.</p>
+                        <span style="display: inline-block; font-size: 11px; font-weight: 800; color: var(--accent-gold); background: rgba(255,209,102,0.12); border: 1px solid rgba(255,209,102,0.3); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;">استوديو المعلم المعتمد</span>
+                        <h2 style="font-size: 26px; font-weight: 900; color: #FFFFFF;" x-text="'أهلاً بك، ' + (teacherData.name || 'أستاذنا الفاضل') + ' 👨‍🏫'"></h2>
+                        <p style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">إدارة دوراتك، إدراج كويزات الفيديو التفاعلية، ومتابعة نمو طلابك.</p>
+                    </div>
+
+                    <div class="stats-grid">
+                        <div class="stat-card">
+                            <span class="stat-label">إجمالي الطلاب</span>
+                            <span class="stat-val val-cyan">1,240</span>
+                        </div>
+                        <div class="stat-card gold-glow">
+                            <span class="stat-label">أرباحك المتراكمة</span>
+                            <span class="stat-val val-gold">19,530 د.أ</span>
+                        </div>
                     </div>
-                    <span class="text-xs px-3 py-1 rounded-lg bg-saqel-cyan/10 text-saqel-cyan border border-saqel-cyan/30 font-bold">Bunny Stream Synced</span>
                 </div>
 
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 bg-[#0B132B] p-5 rounded-2xl border border-saqel-border">
-                    <div>
-                        <label class="block text-xs font-bold text-slate-300 mb-2">اختر الدورة والدرس</label>
-                        <select class="w-full bg-[#1C2541] border border-saqel-border rounded-xl px-4 py-2.5 text-xs text-white outline-none">
-                            <option>الرياضيات العلمي — الدرس 4: قواعد الاشتقاق الأساسية</option>
-                            <option>الرياضيات العلمي — الدرس 5: الاشتقاق الضمني</option>
-                        </select>
-
-                        <div class="mt-4">
-                            <label class="block text-xs font-bold text-slate-300 mb-2">توقيت ظهور الكويز (بالدقيقة والثانية)</label>
-                            <input type="text" value="08:30" class="w-full bg-[#1C2541] border border-saqel-border rounded-xl px-4 py-2.5 text-xs text-saqel-cyan font-mono outline-none">
-                        </div>
-
-                        <div class="mt-4">
-                            <label class="block text-xs font-bold text-slate-300 mb-2">عقوبة الخطأ (الإرجاع العلاجي)</label>
-                            <select class="w-full bg-[#1C2541] border border-saqel-border rounded-xl px-4 py-2.5 text-xs text-white outline-none">
-                                <option>إرجاع الطالب 45 ثانية للخلف (مستحسن)</option>
-                                <option>إرجاع الطالب 60 ثانية للخلف</option>
-                                <option>إعادة مشاهدة المقطع بالكامل</option>
-                            </select>
+                <div class="studio-card">
+                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
+                        <div>
+                            <h3 style="font-size: 18px; font-weight: 900;">إضافة كويز تفاعلي داخل الفيديو 🎬</h3>
+                            <p style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">حدد الثانية الزمنية في الفيديو التي سيتوقف عندها الشرح لفحص فهم الطالب.</p>
                         </div>
+                        <span style="font-size: 11px; font-weight: 700; background: rgba(0,245,212,0.1); border: 1px solid rgba(0,245,212,0.3); color: var(--accent-cyan); padding: 4px 12px; border-radius: 8px;">Bunny Stream Synced</span>
                     </div>
 
-                    <div>
-                        <label class="block text-xs font-bold text-slate-300 mb-2">نص السؤال التفاعلي</label>
-                        <textarea rows="3" placeholder="اكتب السؤال الذي سيظهر أمام الطالب..." class="w-full bg-[#1C2541] border border-saqel-border rounded-xl p-3 text-xs text-white outline-none resize-none"></textarea>
+                    <div class="grid-2">
+                        <div>
+                            <div class="form-group">
+                                <label class="form-label">اختر الدورة والدرس</label>
+                                <select class="input-text">
+                                    <option>الرياضيات العلمي — الدرس 4: قواعد الاشتقاق الأساسية</option>
+                                    <option>الرياضيات العلمي — الدرس 5: الاشتقاق الضمني</option>
+                                </select>
+                            </div>
 
-                        <div class="mt-3 space-y-2">
-                            <input type="text" placeholder="الخيار الأول (الصحيح)" class="w-full bg-[#1C2541] border border-emerald-500/40 rounded-xl px-3 py-2 text-xs text-emerald-300 outline-none">
-                            <input type="text" placeholder="الخيار الثاني (الخاطئ)" class="w-full bg-[#1C2541] border border-saqel-border rounded-xl px-3 py-2 text-xs text-slate-300 outline-none">
+                            <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;">
+                            </div>
+
+                            <div class="form-group">
+                                <label class="form-label">عقوبة الخطأ (الإرجاع العلاجي)</label>
+                                <select class="input-text">
+                                    <option>إرجاع الطالب 45 ثانية للخلف (مستحسن)</option>
+                                    <option>إرجاع الطالب 60 ثانية للخلف</option>
+                                    <option>إعادة مشاهدة المقطع بالكامل</option>
+                                </select>
+                            </div>
                         </div>
 
-                        <button class="mt-4 w-full py-2.5 bg-saqel-gold text-[#0B132B] font-extrabold text-xs rounded-xl hover:opacity-90 transition shadow-lg glow-gold">
-                            حفظ الكويز داخل الفيديو ✓
-                        </button>
+                        <div>
+                            <div class="form-group">
+                                <label class="form-label">نص السؤال التفاعلي</label>
+                                <textarea rows="3" placeholder="اكتب السؤال الذي سيظهر أمام الطالب..." class="input-text" style="resize: none; height: 80px;"></textarea>
+                            </div>
+
+                            <div class="form-group">
+                                <input type="text" placeholder="الخيار الأول (الصحيح)" class="input-text" style="margin-bottom: 8px; border-color: rgba(16,185,129,0.4); color: #6EE7B7;">
+                                <input type="text" placeholder="الخيار الثاني (الخاطئ)" class="input-text">
+                            </div>
+
+                            <button class="btn-primary" style="padding: 10px;">حفظ الكويز داخل الفيديو ✓</button>
+                        </div>
                     </div>
                 </div>
+
             </div>
 
         </div>
-
     </main>
 
     <!-- Footer -->
-    <footer class="border-t border-saqel-border/40 py-6 text-center text-xs text-slate-400 bg-[#0B132B]">
-        <div class="max-w-6xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-3">
-            <span>منصة صَقِل التعليمية — نظام استوديو المعلمين © 2026</span>
-            <div class="flex items-center gap-4">
-                <a href="/student" class="hover:text-saqel-gold transition">بوابة الطلاب</a>
-                <span class="text-slate-700">•</span>
-                <span class="text-emerald-400">حماية المحتوى مشفرة 🔒</span>
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <span>منصة صَقِل التعليمية — نظام استوديو المعلمين © 2026</span>
+                <div style="display: flex; gap: 16px;">
+                    <a href="/student" class="nav-link">بوابة الطلاب</a>
+                    <span style="color: var(--accent-cyan);">الخادم متصل ومشفر 🔒</span>
+                </div>
             </div>
         </div>
     </footer>
+
 </body>
 </html>
 HTML;