Upload app.py

app.py

@@ -383,13 +383,20 @@ body, .gradio-container {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
 }
 
+.login-column {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    min-height: 100vh !important;
+    padding: 24px !important;
+}
+
 .login-wrapper {
+    width: 100%;
     display: flex;
-    align-items: center;
     justify-content: center;
-    min-height: 100vh;
-    padding: 24px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    margin-bottom: 24px;
 }
 
 .login-card {
@@ -399,8 +406,21 @@ body, .gradio-container {
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 20px;
-    padding: 48px 40px;
+    padding: 48px 40px 24px 40px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    text-align: center;
+}
+
+.login-form {
+    max-width: 400px !important;
+    width: 100% !important;
+    background: rgba(255, 255, 255, 0.95) !important;
+    backdrop-filter: blur(10px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+    border-radius: 20px !important;
+    padding: 32px 40px !important;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
+    margin: 0 auto !important;
 }
 
 .login-icon {
@@ -493,29 +513,31 @@ def create_interface():
                 gr.update(value="" if ok else "Invalid password", visible=not ok)
             )
 
-        # Login gate
-        with gr.Group(visible=True) as login_group:
+        # Login gate - DO NOT wrap in custom HTML divs for HF compatibility
+        with gr.Column(visible=True, elem_classes=["login-column"]) as login_group:
             gr.HTML("""
             <div class="login-wrapper">
                 <div class="login-card">
                     <div class="login-icon">🔐</div>
                     <div class="login-title">Private Access</div>
                     <div class="login-subtitle">Enter password to continue</div>
-            """)
-            pw = gr.Textbox(
-                label="Password", 
-                type="password", 
-                placeholder="Enter password", 
-                elem_classes=["login-input"],
-                container=True
-            )
-            login_btn = gr.Button("Continue", elem_classes=["modern-button"], size="lg")
-            login_error = gr.Markdown(visible=False, elem_classes=["login-error"])
-            gr.HTML("""
-                    <div class="freepik-credit">Background design inspired by <a href="https://www.freepik.com" target="_blank">Freepik</a></div>
                 </div>
             </div>
             """)
+            with gr.Column(elem_classes=["login-form"]):
+                pw = gr.Textbox(
+                    label="Password", 
+                    type="password", 
+                    placeholder="Enter password", 
+                    elem_classes=["login-input"],
+                    container=True,
+                    interactive=True
+                )
+                login_btn = gr.Button("Continue", elem_classes=["modern-button"], size="lg", variant="primary")
+                login_error = gr.Markdown(visible=False, elem_classes=["login-error"])
+            gr.HTML("""
+            <div class="freepik-credit">Background design inspired by <a href="https://www.freepik.com" target="_blank">Freepik</a></div>
+            """)
 
         # Main UI wrapped for toggling visibility
         with gr.Group(visible=False) as main_group: