Beautify modal popup - add blur backdrop, gradient border, animation

app.py

@@ -705,28 +705,66 @@ def submit_viva_answer(answer, questions, current_q_idx, student_name=""):
 with gr.Blocks(
     title="AnatomyBot - MBBS Anatomy Tutor",
     css="""
+        /* Background blur effect */
+        body:has(#registration_modal[style*="display: block"]) #main_app {
+            filter: blur(5px);
+        }
+        
+        /* Modal backdrop */
+        #registration_modal::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(8px);
+            z-index: 999;
+        }
+        
+        /* Modal container */
         #registration_modal {
             position: fixed !important;
             top: 50% !important;
             left: 50% !important;
             transform: translate(-50%, -50%) !important;
             z-index: 1000 !important;
-            background: white !important;
-            padding: 2rem !important;
-            border-radius: 10px !important;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
+            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
+            padding: 2.5rem !important;
+            border-radius: 20px !important;
+            border: 3px solid transparent !important;
+            background-clip: padding-box !important;
+            box-shadow: 
+                0 10px 40px rgba(0,0,0,0.2),
+                0 0 0 3px rgba(255,107,53,0.3),
+                inset 0 1px 0 rgba(255,255,255,0.9) !important;
             max-width: 600px !important;
             width: 90% !important;
+            animation: modalSlideIn 0.3s ease-out !important;
         }
-        #registration_modal::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.5);
-            z-index: -1;
+        
+        /* Modal animation */
+        @keyframes modalSlideIn {
+            from {
+                opacity: 0;
+                transform: translate(-50%, -60%);
+            }
+            to {
+                opacity: 1;
+                transform: translate(-50%, -50%);
+            }
+        }
+        
+        /* Beautify modal content */
+        #registration_modal h1 {
+            color: #2c3e50 !important;
+            margin-bottom: 0.5rem !important;
+        }
+        
+        #registration_modal h3 {
+            color: #7f8c8d !important;
+            font-weight: 400 !important;
         }
     """
 ) as demo: