Add CSS to make modal popup float over content with backdrop

app.py

@@ -702,7 +702,34 @@ def submit_viva_answer(answer, questions, current_q_idx, student_name=""):
 
 
 # Create Gradio interface
-with gr.Blocks(title="AnatomyBot - MBBS Anatomy Tutor") as demo:
+with gr.Blocks(
+    title="AnatomyBot - MBBS Anatomy Tutor",
+    css="""
+        #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;
+            max-width: 600px !important;
+            width: 90% !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;
+        }
+    """
+) as demo:
     # State variables
     student_name_state = gr.State("")
     viva_questions_state = gr.State([])