Remove blur effect and fix z-index of backdrop

app.py

@@ -702,72 +702,7 @@ def submit_viva_answer(answer, questions, current_q_idx, student_name=""):
 
 
 # Create Gradio interface
-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: 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;
-        }
-        
-        /* 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:
+with gr.Blocks(title="AnatomyBot - MBBS Anatomy Tutor") as demo:
     # State variables
     student_name_state = gr.State("")
     viva_questions_state = gr.State([])
@@ -776,6 +711,69 @@ with gr.Blocks(
     current_image_state = gr.State(None)
     is_registered = gr.State(False)  # Track if user has registered
     
+    # Add custom CSS styling via HTML
+    gr.HTML("""
+        <style>
+            /* Modal backdrop */
+            #registration_modal::before {
+                content: '';
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.6);
+                z-index: -1;
+                pointer-events: none;
+            }
+            
+            /* Modal container */
+            #registration_modal {
+                position: fixed !important;
+                top: 50% !important;
+                left: 50% !important;
+                transform: translate(-50%, -50%) !important;
+                z-index: 1000 !important;
+                background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
+                padding: 2.5rem !important;
+                border-radius: 20px !important;
+                border: 3px solid rgba(255,107,53,0.5) !important;
+                box-shadow: 
+                    0 10px 40px rgba(0,0,0,0.3),
+                    0 0 20px rgba(255,107,53,0.2),
+                    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;
+            }
+            
+            /* 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;
+                font-size: 2rem !important;
+            }
+            
+            #registration_modal h3 {
+                color: #7f8c8d !important;
+                font-weight: 400 !important;
+                font-size: 1.1rem !important;
+            }
+        </style>
+    """)
+    
     # Main Application (always visible now)
     with gr.Column() as main_app:
         gr.Markdown(