Update app.py

app.py

@@ -78,54 +78,58 @@ def course_correction(correction, state):
 # CSS فضائي (نجوم + كواكب متحركة)
 # ==============================
 css = """
-body {
+/* ===== الحاوية الرئيسية ===== */
+.gradio-container {
+    position: relative;
     background: radial-gradient(circle at bottom, #0b0f0c 0%, #050705 70%);
-    overflow-x: hidden;
+    overflow: hidden;
 }
 
-/* ===== النجوم ===== */
-body::before {
+/* ===== طبقة النجوم ===== */
+.gradio-container::before {
     content: "";
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 200%;
-    height: 200%;
+    inset: 0;
     background-image:
-        radial-gradient(1px 1px at 20% 30%, #9fa97a, transparent),
-        radial-gradient(1px 1px at 40% 70%, #b7c28b, transparent),
-        radial-gradient(1px 1px at 60% 20%, #8e955f, transparent),
-        radial-gradient(1px 1px at 80% 80%, #aab37a, transparent);
-    animation: starsMove 120s linear infinite;
-    opacity: 0.4;
-    z-index: -3;
-}
-
-@keyframes starsMove {
-    from { transform: translate(0, 0); }
-    to { transform: translate(-25%, -25%); }
+        radial-gradient(1px 1px at 10% 20%, #9fa97a, transparent),
+        radial-gradient(1px 1px at 30% 80%, #b7c28b, transparent),
+        radial-gradient(1px 1px at 50% 40%, #8e955f, transparent),
+        radial-gradient(1px 1px at 70% 70%, #aab37a, transparent),
+        radial-gradient(1px 1px at 90% 10%, #cfd6b5, transparent);
+    background-size: 200% 200%;
+    animation: starsFloat 90s linear infinite;
+    opacity: 0.6;
+    z-index: -2;
 }
 
-/* ===== الكواكب ===== */
-body::after {
+/* ===== كوكب ===== */
+.gradio-container::after {
     content: "";
     position: fixed;
-    top: 10%;
-    right: -150px;
-    width: 400px;
-    height: 400px;
-    background: radial-gradient(circle, #6b8e2355, #2f3b1a00 70%);
+    top: 15%;
+    right: -180px;
+    width: 420px;
+    height: 420px;
+    background: radial-gradient(circle at 30% 30%, #7a8450, #1b1f14 70%);
     border-radius: 50%;
-    animation: planetOrbit 90s linear infinite;
-    z-index: -2;
+    animation: planetDrift 120s linear infinite;
+    opacity: 0.4;
+    z-index: -1;
 }
 
-@keyframes planetOrbit {
-    from { transform: rotate(0deg) translateX(0); }
-    to { transform: rotate(360deg) translateX(0); }
+/* ===== حركة النجوم ===== */
+@keyframes starsFloat {
+    from { transform: translate(0, 0); }
+    to { transform: translate(-15%, -25%); }
 }
 
-/* ===== النصوص والعناصر ===== */
+/* ===== حركة الكوكب ===== */
+@keyframes planetDrift {
+    from { transform: translateY(0px); }
+    to { transform: translateY(60px); }
+}
+
+/* ===== عناصر الواجهة ===== */
 h1, h2, h3, label {
     color: #7a8450;
 }
@@ -154,6 +158,7 @@ button:hover {
 }
 """
 
+
 # ==============================
 # واجهة Gradio
 # ==============================