Fix modal blur layering using body:has() selector

app.py

@@ -714,8 +714,12 @@ with gr.Blocks(title="AnatomyBot - MBBS Anatomy Tutor") as demo:
     # Add custom CSS styling via HTML
     gr.HTML("""
         <style>
-            /* Modal backdrop */
-            #registration_modal::before {
+            /* Modal backdrop using body::after when modal exists */
+            body:has(#registration_modal) #registration_modal {
+                display: block !important;
+            }
+
+            body:has(#registration_modal)::after {
                 content: '';
                 position: fixed;
                 top: 0;
@@ -723,8 +727,10 @@ with gr.Blocks(title="AnatomyBot - MBBS Anatomy Tutor") as demo:
                 right: 0;
                 bottom: 0;
                 background: rgba(0, 0, 0, 0.6);
-                z-index: -1;
-                pointer-events: none;
+                backdrop-filter: blur(8px);
+                -webkit-backdrop-filter: blur(8px);
+                z-index: 999;
+                pointer-events: all;
             }
             
             /* Modal container */