Update app.py

app.py

@@ -1234,24 +1234,124 @@ def deep_research(prompt):
     
 
 custom_css = """
+/* General Container Styles */
 .gradio-container {
-    background-color: #f7f9fc;
+    max-width: 90vw; /* Use viewport width for responsiveness */
+    margin: auto;
+    font-family: 'Roboto', sans-serif; /* Modern, readable font */
+    background-color: #1e1e1e; /* Dark background */
+    color: #ffffff; /* Light text */
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* Subtle shadow */
 }
-.output-box {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    line-height: 1.5;
-    font-size: 14px;
-    white-space: pre-wrap; /* Preserve newlines and spacing */
+
+/* Input and Output Areas */
+.input-area, .output-area {
+    margin-bottom: 1rem;
+    padding: 1rem;
+    border-radius: 4px;
 }
-h3 {
-    color: #2c3e50;
-    font-weight: 600;
+
+.input-area {
+    background-color: #2c2c2c; /* Slightly lighter background for input */
 }
-.footer {
-    text-align: center;
-    margin-top: 20px;
-    color: #7f8c8d;
+
+.input-area label {
+   color: #ddd;  /* Lighter label text */
+    font-size: 1.1em;
+    font-weight: bold;
+}
+
+.output-area {
+    background-color: #333; /* Slightly lighter than input for contrast */
+    min-height: 200px;
+    overflow-y: auto; /* Scrollable output */
+}
+.output-area pre { /* For the markdown */
+   white-space: pre-wrap;
+   word-break: break-word;
+   font-size: 0.9em;
+   line-height:1.5;
+}
+.output-area code {
+    background-color: #444; /* slightly lighter for code blocks */
+    color: #eee;
+    padding: 0.1em 0.3em;
+    border-radius: 3px;
+}
+
+/* Textbox Styles */
+.gr-textbox {
+    background-color: #222;
+    color: #fff;
+    border: 1px solid #555;
+    border-radius: 4px;
+    padding: 0.75rem;
+    font-size: 1em;
+}
+
+.gr-textbox:focus {
+    border-color: #4e89e2; /* Highlight on focus */
+    box-shadow: 0 0 5px rgba(78, 137, 226, 0.5);
+}
+
+/* Submit Button */
+.submit-button {
+    background-color: #4e89e2; /* Primary color */
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+    font-weight: bold;
+    transition: background-color 0.2s ease; /* Smooth transition */
+}
+.submit-button:hover {
+    background-color: #3867b4;
+}
+
+/* Progress/Loading Indicator (Simple Text-Based) */
+.progress-text {
+    color: #88c0d0;  /* Lighter text for updates/progress */
     font-size: 0.9em;
+    margin-bottom: 0.5rem;
+}
+
+
+/* Example Section */
+.examples {
+    padding: 0.5rem;
+    border-top: 1px solid #555;
+}
+
+.examples li {
+    margin-bottom: 0.4em;
+    color: #bbb;
+}
+.examples  button{
+  color: #bbb;
+  background-color: #444;
+  border-color:#777;
+}
+.examples  button:hover{
+  background-color: #555;
+}
+
+/* Title and Description */
+.title {
+    text-align: center;
+    font-size: 2em;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+    color: #ddd;
+}
+.description {
+    text-align: center;
+    font-size: 1.1em;
+     margin-bottom: 1rem;
+    color: #bbb;
+
 }
 """