fix: Embedded luxury self-contained CSS (zero CDN failure) + Redis password graceful auth

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
+                // Authenticate ONLY if a non-empty password is provided in environment
-                if ($password) {
+                if (!empty($password)) {
-                    if (!$redis->auth($password)) {
+                    try {
-                        throw new \RuntimeException("Redis authentication failed for host {$host}:{$port}.");
+                        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;
+                        }
                     }
                 }
 

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>
+    <!-- 1. Pure Self-Contained Luxury CSS (Zero External CDN Failure Risk) -->
-    <script>
+    <style>
-        tailwind.config = {
+        :root {
-            theme: {
+            --bg-dark: #0B132B;
-                extend: {
+            --bg-card: #16203D;
-                    colors: {
+            --bg-card-hover: #1E2C52;
-                        saqel: {
+            --bg-input: #090E20;
-                            dark: '#0B132B',
+            --border: #2A3B66;
-                            card: '#1C2541',
+            --border-focus: #FFD166;
-                            cardHover: '#222F55',
+            --text-primary: #FFFFFF;
-                            cyan: '#00F5D4',
+            --text-secondary: #CBD5E1;
-                            gold: '#FFD166',
+            --text-muted: #8E9FB8;
-                            border: '#2E3D66',
+            --accent-gold: #FFD166;
-                            textMuted: '#94A3B8'
+            --accent-gold-dark: #E5A91E;
-                        }
+            --accent-cyan: #00F5D4;
-                    },
+            --accent-red: #EF4444;
-                    fontFamily: {
+            --accent-green: #10B981;
-                        cairo: ['Cairo', 'sans-serif'],
-                    }
-                }
-            }
         }
-    </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]"
+<body x-data="teacherAuth()" x-init="initApp()">
-      x-data="teacherAuth()" x-init="initApp()">
 
-    <!-- Top Navigation Bar -->
+    <!-- Header -->
-    <header class="border-b border-saqel-border/80 bg-[#0B132B]/95 backdrop-blur-md sticky top-0 z-40">
+    <header>
-        <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
+        <div class="container">
-            <div class="flex items-center gap-3">
+            <div class="header-content">
-                <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">
+                <a href="/teacher" class="logo-area">
-                    <div class="w-full h-full bg-[#0B132B] rounded-[10px] flex items-center justify-center text-saqel-gold font-black text-xl">
+                    <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>
+                    <template x-if="isLoggedIn">
-                    <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>
+                        <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 Content -->
-    <main class="flex-1 max-w-6xl mx-auto px-4 sm:px-6 py-8 w-full flex items-center justify-center">
+    <main>
+        <div class="container">
 
-        <!-- ============================================================= -->
+            <!-- ========================================== -->
-        <!-- VIEW 1: TEACHER AUTHENTICATION FLOW                          -->
+            <!-- 1. AUTHENTICATION BOX (LOGIN / OTP)        -->
-        <!-- ============================================================= -->
+            <!-- ========================================== -->
-        <div x-show="!isLoggedIn" class="w-full max-w-md">
+            <div x-show="!isLoggedIn" class="auth-card-wrapper">
-
-            <!-- 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">
                 
-                <!-- Glow Accent -->
+                <div class="auth-header">
-                <div class="absolute top-0 left-0 w-32 h-32 bg-saqel-gold/10 rounded-full blur-2xl pointer-events-none"></div>
+                    <div class="icon-box">
-
+                        <svg width="28" height="28" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <!-- Alert Messages -->
+                            <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>
-                <template x-if="errorMessage">
+                        </svg>
-                    <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>
-                </template>
+                    <h1 class="auth-title">استوديو صَقِل للمعلمين</h1>
+                    <p class="auth-subtitle">حماية محتواك بـ DRM وأرباح متنامية بنظام الشراكة التفاعلية</p>
+                </div>
 
-                <template x-if="successMessage">
+                <div class="auth-box">
-                    <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>
 
-                <!-- STEP 1: PHONE NUMBER INPUT -->
+                    <!-- Alerts -->
-                <div x-show="authStep === 'phone'">
+                    <template x-if="errorMessage">
-                    <form @submit.prevent="sendOtp()">
+                        <div class="alert alert-error">
-                        <!-- Full Name -->
+                            <span>⚠️</span>
-                        <div class="mb-4">
+                            <span x-text="errorMessage"></span>
-                            <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">
                         </div>
+                    </template>
 
-                        <!-- Phone Number -->
+                    <template x-if="successMessage">
-                        <div class="mb-6">
+                        <div class="alert alert-success">
-                            <label class="block text-xs font-bold text-slate-300 mb-2">رقم الهاتف (الواتساب) <span class="text-red-400">*</span></label>
+                            <span>✓</span>
-                            <div class="relative flex items-center" dir="ltr">
+                            <span x-text="successMessage"></span>
-                                <span class="absolute left-3 text-xs font-bold text-saqel-gold bg-[#0B132B] px-2 py-1 rounded-md border border-saqel-border">
+                        </div>
-                                    🇯🇴 +962
+                    </template>
-                                </span>
+
-                                <input type="tel" x-model="phone" required placeholder="790000000"
+                    <!-- STEP 1: Phone Number -->
-                                       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">
+                    <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 -->
+                            <div class="form-group">
-                        <button type="submit" :disabled="loading"
+                                <label class="form-label">رقم الهاتف (الواتساب) <span style="color: #EF4444;">*</span></label>
-                                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">
+                                <div class="phone-input-group">
-                            <template x-if="loading">
+                                    <div class="country-badge">🇯🇴 +962</div>
-                                <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>
+                                    <input type="tel" x-model="phone" required placeholder="790000000" class="input-text input-phone">
-                            </template>
+                                </div>
-                            <span x-text="loading ? 'جارٍ التحقق...' : 'دخول استوديو المعلم (OTP) ←'"></span>
+                                <span class="form-hint">يصلك رمز التحقق مباشرة على الواتساب المعتمد.</span>
-                        </button>
+                            </div>
-                    </form>
-                </div>
 
-                <!-- STEP 2: OTP VERIFICATION -->
+                            <button type="submit" :disabled="loading" class="btn-primary">
-                <div x-show="authStep === 'otp'">
+                                <template x-if="loading">
-                    <div class="text-center mb-6">
+                                    <div class="spinner"></div>
-                        <span class="text-xs text-slate-400">تم إرسال الرمز للواتساب:</span>
+                                </template>
-                        <div class="font-mono font-bold text-saqel-gold text-sm mt-0.5" x-text="phoneDisplay"></div>
+                                <span x-text="loading ? 'جارٍ التحقق...' : 'دخول استوديو المعلم (OTP) ←'"></span>
+                            </button>
+                        </form>
                     </div>
 
-                    <form @submit.prevent="verifyOtp()">
+                    <!-- STEP 2: OTP Verification -->
-                        <!-- 6 Digits OTP Input -->
+                    <div x-show="authStep === 'otp'">
-                        <div class="mb-6">
+                        <div style="text-align: center; margin-bottom: 20px;">
-                            <label class="block text-xs font-bold text-slate-300 mb-2 text-center">أدخل رمز التحقق (6 أرقام)</label>
+                            <span style="font-size: 12px; color: var(--text-muted);">تم إرسال رمز التحقق إلى:</span>
-                            <input type="text" x-model="otpCode" maxlength="6" autofocus placeholder="• • • • • •"
+                            <div style="font-family: monospace; font-size: 15px; font-weight: 800; color: var(--accent-gold); margin-top: 4px;" x-text="phoneDisplay"></div>
-                                   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">
                         </div>
 
-                        <!-- Submit Verification -->
+                        <form @submit.prevent="verifyOtp()">
-                        <button type="submit" :disabled="loading || otpCode.length < 6"
+                            <div class="form-group">
-                                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">
+                                <label class="form-label" style="text-align: center;">أدخل رمز التحقق (6 أرقام)</label>
-                            <template x-if="loading">
+                                <input type="text" x-model="otpCode" maxlength="6" autofocus placeholder="• • • • • •" class="input-text otp-input">
-                                <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>
+                            </div>
-                            </template>
-                            <span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للاستوديو 🎓'"></span>
-                        </button>
 
-                        <!-- Actions -->
+                            <button type="submit" :disabled="loading || otpCode.length < 6" class="btn-primary">
-                        <div class="flex items-center justify-between text-xs mt-5 pt-4 border-t border-saqel-border/50 text-slate-400">
+                                <template x-if="loading">
-                            <button type="button" @click="authStep = 'phone'" class="hover:text-white transition">← تعديل الرقم</button>
+                                    <div class="spinner"></div>
-                            <template x-if="timer > 0">
+                                </template>
-                                <span class="text-slate-500" x-text="'إعادة الإرسال بعد (' + timer + 'ث)'"></span>
+                                <span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للاستوديو 🎓'"></span>
-                            </template>
+                            </button>
-                            <template x-if="timer === 0">
-                                <button type="button" @click="sendOtp()" class="text-saqel-gold hover:underline font-bold">إعادة إرسال الرمز ↺</button>
-                            </template>
-                        </div>
-                    </form>
-                </div>
 
-                <!-- Footer Partner Notice -->
+                            <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 18px;">
-                <div class="mt-6 pt-4 border-t border-saqel-border/40 text-center text-[11px] text-slate-500">
+                                <button type="button" @click="authStep = 'phone'" class="btn-secondary">← تعديل الرقم</button>
-                    <span>حماية محتوى DRM كاملة + تقاسم أرباح 45%–50% شفاف ومؤتمت</span>
+                                <template x-if="timer > 0">
-                </div>
+                                    <span style="font-size: 12px; color: var(--text-muted);" x-text="'إعادة الإرسال بعد (' + timer + 'ث)'"></span>
-            </div>
+                                </template>
-        </div>
+                                <template x-if="timer === 0">
-
+                                    <button type="button" @click="sendOtp()" class="btn-secondary btn-link-gold">إعادة إرسال الرمز ↺</button>
-        <!-- ============================================================= -->
+                                </template>
-        <!-- VIEW 2: TEACHER STUDIO WORKSPACE                             -->
+                            </div>
-        <!-- ============================================================= -->
+                        </form>
-        <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>
 
-                    <!-- Teacher Earnings Summary -->
+                    <div class="auth-footer">
-                    <div class="flex items-center gap-4">
+                        <span>حماية محتوى DRM كاملة + تقاسم أرباح 45%–50% شفاف ومؤتمت</span>
-                        <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>
+
                 </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">
+            <!-- 2. TEACHER DASHBOARD (AUTHENTICATED)       -->
-                <div class="flex items-center justify-between mb-6">
+            <!-- ========================================== -->
+            <div x-show="isLoggedIn" style="width: 100%;">
+                
+                <div class="dashboard-hero">
                     <div>
-                        <h3 class="text-lg font-black text-white">إضافة كويز تفاعلي داخل الفيديو 🎬</h3>
+                        <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>
-                        <p class="text-xs text-slate-400 mt-1">حدد الثانية الزمنية في الفيديو التي سيتوقف عندها الشرح لفحص فهم الطالب.</p>
+                        <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 class="studio-card">
-                    <div>
+                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
-                        <label class="block text-xs font-bold text-slate-300 mb-2">اختر الدورة والدرس</label>
+                        <div>
-                        <select class="w-full bg-[#1C2541] border border-saqel-border rounded-xl px-4 py-2.5 text-xs text-white outline-none">
+                            <h3 style="font-size: 18px; font-weight: 900;">إضافة كويز تفاعلي داخل الفيديو 🎬</h3>
-                            <option>الرياضيات العلمي — الدرس 4: قواعد الاشتقاق الأساسية</option>
+                            <p style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">حدد الثانية الزمنية في الفيديو التي سيتوقف عندها الشرح لفحص فهم الطالب.</p>
-                            <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>
+                        <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>
+                    <div class="grid-2">
-                        <label class="block text-xs font-bold text-slate-300 mb-2">نص السؤال التفاعلي</label>
+                        <div>
-                        <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="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">
+                            <div class="form-group">
-                            <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">
+                                <label class="form-label">توقيت ظهور الكويز (بالدقيقة والثانية)</label>
-                            <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">
+                                <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">
+                        <div>
-                            حفظ الكويز داخل الفيديو ✓
+                            <div class="form-group">
-                        </button>
+                                <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]">
+    <footer>
-        <div class="max-w-6xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-3">
+        <div class="container">
-            <span>منصة صَقِل التعليمية — نظام استوديو المعلمين © 2026</span>
+            <div class="footer-content">
-            <div class="flex items-center gap-4">
+                <span>منصة صَقِل التعليمية — نظام استوديو المعلمين © 2026</span>
-                <a href="/student" class="hover:text-saqel-gold transition">بوابة الطلاب</a>
+                <div style="display: flex; gap: 16px;">
-                <span class="text-slate-700">•</span>
+                    <a href="/student" class="nav-link">بوابة الطلاب</a>
-                <span class="text-emerald-400">حماية المحتوى مشفرة 🔒</span>
+                    <span style="color: var(--accent-cyan);">الخادم متصل ومشفر 🔒</span>
+                </div>
             </div>
         </div>
     </footer>
+
 </body>
 </html>
 HTML;