Update app.py

app.py

@@ -58,57 +58,83 @@ html, body, .stApp {
 }
 
 @media (min-width: 768px) {
+    /* Reset default margins and padding */
+    html, body {
+        margin: 0 !important;
+        padding: 0 !important;
+        background: #f0f0f0 !important; /* رنگ پس‌زمینه خاکستری روشن */
+        height: 100vh !important;
+        overflow: hidden !important;
+    }
+    
+    /* Container for the mobile frame */
     body {
-        background: #f0f0f0 !important;
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
-        height: 100vh !important;
-        overflow: hidden !important;
+        background: #f0f0f0 !important; /* مطمئن شوید این رنگ با رنگ پس‌زمینه کادر موبایل متفاوت نیست */
     }
     
+    /* Mobile frame styling */
     [data-testid="stAppViewContainer"] {
         width: 475px !important;
         height: 667px !important;
         margin: 0 auto !important;  
         border: 12px solid #000 !important;
         border-radius: 40px !important;
-        box-shadow: 0 0 0 6px #666, 0 0 30px rgba(0,0,0,0.5) !important;
+        box-shadow: 
+            0 0 0 6px #666, 
+            0 0 30px rgba(0,0,0,0.5) !important;
         background-color: var(--background) !important;
         color: var(--text) !important;
         overflow-y: auto !important;
         overflow-x: hidden !important;
         scrollbar-width: thin !important;
         scrollbar-color: #6a0dad #f0f0f0 !important;
-        direction: rtl !important; /* این خط اضافه شده */
+        direction: rtl !important;
+        position: relative !important;
     }
-    
-    /* استایل اسکرولبار برای مرورگرهای وبکیت */
+
+    /* Remove any potential dark background from parent elements */
+    #root, .stApp {
+        background: transparent !important;
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+
+    /* Ensure Streamlit's main container doesn't add extra space */
+    [data-testid="stAppViewContainer"] > div {
+        max-width: 100% !important;
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+
+    /* Webkit scrollbar styles */
     [data-testid="stAppViewContainer"]::-webkit-scrollbar {
         width: 6px !important;
-        right: 0 !important; /* این خط اضافه شده */
-        left: auto !important; /* این خط اضافه شده */
+        right: 0 !important;
+        left: auto !important;
     }
     
     [data-testid="stAppViewContainer"]::-webkit-scrollbar-track {
         background: #f0f0f0 !important;
         border-radius: 3px !important;
-        margin: 10px 0 !important; /* این خط اضافه شده */
+        margin: 10px 0 !important;
     }
     
     [data-testid="stAppViewContainer"]::-webkit-scrollbar-thumb {
         background-color: #6a0dad !important;
         border-radius: 3px !important;
-        margin-left: 10px !important; /* این خط اضافه شده */
+        margin-left: 10px !important;
     }
     
-    /* تنظیم مجدد جهت برای محتوای داخلی */
+    /* Reset direction for content */
     [data-testid="stAppViewContainer"] > * {
         direction: ltr !important;
         text-align: right !important;
     }
     
-    /* دکمه هوم مجازی */
+    /* Virtual home button */
     [data-testid="stAppViewContainer"]::after {
         content: "";
         position: absolute;
@@ -120,17 +146,6 @@ html, body, .stApp {
         background: #333;
         border-radius: 2px;
     }
-    
-    .stApp {
-        width: 100% !important;
-        height: 100% !important;
-        overflow: auto !important;
-    }
-    
-    [class^="st-"], [class*=" st-"] {
-        padding-left: 5 !important;
-        padding-right: 5 !important;
-    }
 }
 
 /* هدر راهیار */