Update app.py

app.py

@@ -285,9 +285,10 @@ document.addEventListener("DOMContentLoaded", () => {
 """
 
 with gr.Blocks(css="""
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Manrope:wght@300;400;500;600&family=Outfit:wght@300;400;500;600&display=swap');
+
 body { 
     background-color: #000; 
-    font-family: 'Arial', sans-serif; 
     margin: 0; 
     padding: 0; 
 }
@@ -300,6 +301,7 @@ body {
     box-shadow: 0 10px 30px rgba(0,0,0,0.4); 
     overflow: hidden;
     transition: transform 0.3s ease;
+    font-family: 'Manrope', 'Outfit', 'Inter', sans-serif;
 }
 .gradio-container:active {
     transform: scale(0.995);
@@ -314,6 +316,9 @@ body {
     transition: all 0.3s ease;
     box-shadow: 0 4px 10px rgba(0,0,0,0.15);
     cursor: pointer;
+    font-family: 'Outfit', 'Manrope', 'Inter', sans-serif;
+    font-weight: 400;
+    letter-spacing: -0.01em;
 }
 .chat-message.user { 
     background: linear-gradient(145deg, #252525, #1f1f1f); 
@@ -321,6 +326,8 @@ body {
     align-items: flex-end; 
     border-bottom-right-radius: 5px; 
     margin-left: 40px;
+    font-family: 'Inter', 'Manrope', 'Outfit', sans-serif;
+    font-weight: 500;
 }
 .chat-message.bot { 
     background: linear-gradient(145deg, #2e2e2e, #252525); 
@@ -328,6 +335,8 @@ body {
     align-items: flex-start; 
     border-bottom-left-radius: 5px; 
     margin-right: 40px;
+    font-family: 'Manrope', 'Outfit', 'Inter', sans-serif;
+    font-weight: 400;
 }
 /* Startup message */
 .startup-message {
@@ -338,6 +347,7 @@ body {
     display: flex;
     justify-content: center;
     cursor: pointer;
+    font-family: 'Outfit', 'Manrope', 'Inter', sans-serif;
 }
 .startup-content {
     display: flex;
@@ -357,20 +367,28 @@ body {
     text-align: left;
 }
 .startup-title {
-    font-weight: bold;
+    font-weight: 600;
     font-size: 18px;
     margin-bottom: 5px;
     color: #fff;
+    font-family: 'Inter', 'Manrope', 'Outfit', sans-serif;
+    letter-spacing: -0.02em;
 }
 .startup-subtitle {
     font-size: 16px;
     margin-bottom: 3px;
     color: #eee;
+    font-family: 'Manrope', 'Outfit', 'Inter', sans-serif;
+    font-weight: 500;
+    letter-spacing: -0.01em;
 }
 .startup-note {
     font-size: 12px;
     color: #aaa;
     font-style: italic;
+    font-family: 'Inter', 'Manrope', 'Outfit', sans-serif;
+    font-weight: 300;
+    letter-spacing: 0.01em;
 }
 textarea { 
     border: none; 
@@ -391,6 +409,8 @@ textarea {
     width: 100%;
     cursor: pointer;
     line-height: 1.5;
+    font-family: 'Inter', 'Manrope', 'Outfit', sans-serif;
+    font-weight: 400;
 }
 .send-btn { 
     border: none; 
@@ -410,6 +430,7 @@ textarea {
     right: 8px;
     top: 8px;
     overflow: hidden;
+    font-family: 'Inter', 'Manrope', 'Outfit', sans-serif;
 }
 .send-btn:hover { 
     background: linear-gradient(145deg, #666, #555); 
@@ -424,6 +445,8 @@ textarea {
     transition: all 0.3s ease !important;
     border: none !important;
     cursor: pointer !important;
+    font-family: 'Manrope', 'Outfit', 'Inter', sans-serif !important;
+    font-weight: 500 !important;
 }
 .gr-button.gr-login:hover { 
     background: linear-gradient(145deg, #444, #333) !important; 
@@ -443,6 +466,7 @@ textarea {
     min-height: 400px;
     cursor: pointer;
     transition: transform 0.3s ease;
+    font-family: 'Manrope', 'Outfit', 'Inter', sans-serif;
 }
 .gr-box { 
     border-radius: 15px;