Enhance CSS styles for improved visual consistency and responsiveness in Gradio app

app.py

@@ -166,27 +166,29 @@ body, .gradio-container {
     max-width: 1100px !important;
     margin: 32px auto 32px auto !important;
     border-radius: 22px !important;
-    box-shadow: 0 8px 32px 0 #bdbdbd33;
+    box-shadow: 0 8px 32px 0 #bdbdbd55;
     border: 1.5px solid #e3e3e3;
     min-height: 96vh;
     padding-bottom: 32px;
 }
 .main-card {
-    background: #fff;
+    background: #fff !important;
     border-radius: 18px;
-    box-shadow: 0 2px 12px 0 #bdbdbd22;
+    box-shadow: 0 2px 12px 0 #bdbdbd55;
     padding: 28px 24px 20px 24px;
     margin: 18px 0;
-    border: 1px solid #e6e6e6;
+    border: 1.5px solid #d1d1d1;
+    color: #222 !important;
     transition: box-shadow 0.2s;
 }
 .main-card:hover {
-    box-shadow: 0 6px 24px 0 #bdbdbd44;
+    box-shadow: 0 6px 24px 0 #bdbdbd77;
 }
 .output-markdown {
     font-family: 'Segoe UI', 'Noto Sans Thai', sans-serif !important;
     line-height: 1.7;
     font-size: 1.08em;
+    color: #222 !important;
 }
 .gr-button {
     font-size: 1.13em;
@@ -194,38 +196,43 @@ body, .gradio-container {
     border-radius: 13px;
     font-weight: 600;
     transition: all 0.2s;
-    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-    color: #fff;
+    background: linear-gradient(90deg, #4a63e7 0%, #764ba2 100%);
+    color: #fff !important;
     border: none;
-    box-shadow: 0 2px 8px #bdbdbd22;
+    box-shadow: 0 2px 8px #bdbdbd33;
 }
 .gr-button.secondary, .gr-button[variant="secondary"] {
-    background: #f3f3f3;
-    color: #4a4a7d;
-    border: 1px solid #e0e0e0;
+    background: #eaeaea !important;
+    color: #333 !important;
+    border: 1px solid #cccccc;
 }
 .gr-button:hover {
     transform: translateY(-2px) scale(1.03);
-    box-shadow: 0 6px 18px #bdbdbd33;
+    box-shadow: 0 6px 18px #bdbdbd55;
     filter: brightness(1.04);
 }
 .gr-textbox textarea {
     font-size: 1.13em;
     min-height: 150px;
     font-family: 'Segoe UI', 'Noto Sans Thai', sans-serif;
-    background: #fafdff;
+    background: #fff;
     border-radius: 10px;
-    border: 1.2px solid #e0e0e0;
+    border: 1.5px solid #cccccc;
+    color: #222;
     padding: 14px;
 }
 .gr-dropdown input {
     font-size: 1.1em;
     border-radius: 8px;
-    background: #fafdff;
-    border: 1.2px solid #e0e0e0;
+    background: #fff;
+    border: 1.5px solid #cccccc;
+    color: #222;
 }
 .gr-markdown h1, .gr-markdown h3 {
-    color: #3b3b6d !important;
+    color: #2a2a4d !important;
+}
+.gr-markdown, .gr-markdown ul, .gr-markdown p, .gr-markdown li {
+    color: #222 !important;
 }
 .gr-markdown ul {
     margin-left: 1.2em;