Update app.py

app.py

@@ -43,43 +43,31 @@ section[data-testid="stSidebar"] {
   position:absolute!important;
 }
 
-/* Fix viewport and scrolling for auth pages */
+/* Natural document flow for auth pages */
 html, body {
   margin:0 !important;
   padding:0 !important;
   width:100% !important;
-  height:100% !important;
   background:#07070f !important;
   font-family:'DM Sans', sans-serif !important;
   overflow-x: hidden !important;
   overflow-y: auto !important;
-  position: relative !important;
 }
 
 .stApp {
   background:#07070f !important;
   min-height: 100vh !important;
-  height: auto !important;
-  overflow: visible !important;
 }
 
 [data-testid="stAppViewContainer"] {
   background:#07070f !important;
-  padding:0 !important;
-  margin:0 !important;
   width:100% !important;
   min-height: 100vh !important;
-  height: auto !important;
-  overflow: visible !important;
-  position: relative !important;
 }
 
 [data-testid="stAppViewContainer"] > section {
   padding:0 !important;
   width:100% !important;
-  min-height: 100vh !important;
-  height: auto !important;
-  overflow: visible !important;
 }
 
 [data-testid="stAppViewContainer"] > section > div.block-container {
@@ -87,28 +75,11 @@ html, body {
   margin:0 !important;
   max-width:100% !important;
   width:100% !important;
-  height: auto !important;
-  overflow: visible !important;
-}
-
-/* Allow normal scrolling */
-.main .block-container {
-  padding:0 !important;
-  margin:0 !important;
-  height: auto !important;
-  overflow: visible !important;
 }
 
-/* Streamlit element containers — remove gaps but allow flow */
-[data-testid="stVerticalBlock"] { 
-  gap:0 !important; 
-  height: auto !important;
-}
-[data-testid="element-container"] { 
-  margin:0 !important; 
-  padding:0 !important;
-  height: auto !important;
-}
+/* Remove all extra gaps */
+[data-testid="stVerticalBlock"] { gap:0 !important; }
+[data-testid="element-container"] { margin:0 !important; padding:0 !important; }
 
 /* Buttons */
 .stButton > button {
@@ -174,23 +145,6 @@ div[data-baseweb="input"] input {
   border-radius:10px !important; 
   font-size:0.88rem !important; 
 }
-
-/* Auth card container - ensure it's scrollable */
-.auth-card-container {
-  min-height: calc(100vh - 200px) !important;
-  height: auto !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  padding: 20px !important;
-  overflow: visible !important;
-}
-
-/* Fix for any absolute positioning that might cause issues */
-[data-testid="column"] {
-  position: relative !important;
-  height: auto !important;
-}
 </style>
 """, unsafe_allow_html=True)
 
@@ -282,7 +236,7 @@ if mode == "landing":
     </div>
     """, unsafe_allow_html=True)
 
-    # CTA buttons — real Streamlit buttons centered
+    # CTA buttons
     _, cta_l, cta_r, _ = st.columns([2, 1.2, 1.2, 2])
     with cta_l:
         if st.button("⚡ Start for Free", key="hero_start", use_container_width=True):
@@ -326,10 +280,10 @@ if mode == "landing":
     st.markdown("<div style='height:60px'></div>", unsafe_allow_html=True)
 
 # ══════════════════════════════════════════════════════════════════
-# AUTH PAGES
+# AUTH PAGES (Login / Signup / OTP) — simplified natural flow
 # ══════════════════════════════════════════════════════════════════
 else:
-    # Simple header without fixed positioning
+    # Simple header
     st.markdown("""
     <div style="padding:20px 40px 16px;border-bottom:1px solid rgba(99,102,241,0.10);
       background:#07070f">
@@ -340,8 +294,8 @@ else:
       </span>
     </div>
     """, unsafe_allow_html=True)
-    
-    # Background with proper overflow handling
+
+    # Background with subtle gradient (no flex, just padding)
     st.markdown("""
     <div style="
       background:
@@ -349,19 +303,12 @@ else:
         radial-gradient(ellipse 45% 40% at 85% 75%,rgba(139,92,246,0.08) 0%,transparent 55%),
         radial-gradient(circle,rgba(255,255,255,0.025) 1px,transparent 1px) 0 0/30px 30px,
         #07070f;
-      min-height: calc(100vh - 65px);
-      height: auto;
       width: 100%;
-      position: relative;
-      overflow: visible;
       padding: 40px 24px;
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
     ">
     """, unsafe_allow_html=True)
-    
-    # Centered card with proper scroll behavior
+
+    # Centered card using columns
     _, mid, _ = st.columns([1, 1.4, 1])
     with mid:
         # Back home button
@@ -369,11 +316,12 @@ else:
         with back_col:
             if st.button("← Home", key="back_home"):
                 st.session_state.mode = "landing"; st.rerun()
-        
+
+        # Auth card
         st.markdown("""
         <div style="background:rgba(10,10,20,0.97);
           border:1px solid rgba(99,102,241,0.30);border-radius:20px;
-          padding:36px 40px 32px;position:relative;overflow:visible;
+          padding:36px 40px 32px;position:relative;
           box-shadow:0 32px 80px rgba(0,0,0,0.60),0 0 0 1px rgba(99,102,241,0.06);
           margin: 20px 0;">
           <div style="position:absolute;top:0;left:0;right:0;height:2px;
@@ -512,7 +460,6 @@ else:
             if st.button("Sign in →", key="to_login", use_container_width=True):
                 st.session_state.mode = "login"; st.rerun()
 
-        st.markdown("</div>", unsafe_allow_html=True)
+        st.markdown("</div>", unsafe_allow_html=True)  # close auth card
     
-    # Close the background div
-    st.markdown("</div>", unsafe_allow_html=True)
+    st.markdown("</div>", unsafe_allow_html=True)  # close background div