Update app.py

app.py

@@ -171,22 +171,102 @@ def classify_display(text):
 
 # ---------------- CSS ----------------
 
+# ---------------- CSS refinado - tema claro agradável ----------------
 custom_css = """
-body { background-color: #ffffff; color: #111; font-family: 'Inter', sans-serif; }
-.gradio-container { background-color: #ffffff; color: #111; }
-h2, h3 { text-align: center; color: #004b8d; font-weight: 600; }
-textarea { background-color: #fafafa !important; color: #111 !important; border-radius: 10px !important; border: 1px solid #ccc !important; }
-button { background-color: #007aff !important; color: white !important; font-weight: 600 !important; border-radius: 8px !important; border: none !important; }
-button:hover { background-color: #005fcc !important; }
-.output-chip { background-color: #f4f4f4; padding: 5px 12px; border-radius: 8px; font-weight: 500; border: 1px solid #007aff33; color: #004b8d; }
-.suggestion-box { background-color: #f7f9fc; border-radius: 10px; border: 1px solid #ccd8e0; padding: 10px; display: flex; align-items: center; justify-content: center; color: #111; margin-top: 25px; position: relative; overflow: scroll; }
-.arrow-btn { width: 25px; height: 25px; font-size: 12px; padding: 0; background: none; border: none; color: #004b8d; cursor: pointer; font-weight: bold; }
-.arrow-btn:hover { color: #002b5b; transform: scale(1.3); }
-.use-btn { background-color:#66b3ff !important; color:#000 !important; font-weight:600 !important; border-radius:6px !important; padding:3px 8px !important; margin-left:5px;}
-.use-btn:hover { background-color:#99ccff !important; }
+body { background-color: #ffffff; color: #222; font-family: 'Inter', sans-serif; }
+.gradio-container { background-color: #ffffff; color: #222; }
+
+h2 { text-align: center; color: #0056b3; font-weight: 700; }
+h3 { text-align: center; color: #0066cc; font-weight: 600; }
+
+textarea {
+    background-color: #f9fafc !important;
+    color: #222 !important;
+    border-radius: 10px !important;
+    border: 1px solid #d0d7de !important;
+}
+
+button {
+    background-color: #007bff !important;
+    color: white !important;
+    font-weight: 600 !important;
+    border-radius: 8px !important;
+    border: none !important;
+    transition: 0.2s ease-in-out;
+}
+button:hover {
+    background-color: #005fcc !important;
+}
+
+.output-chip {
+    background-color: #eef4ff;
+    padding: 5px 12px;
+    border-radius: 8px;
+    font-weight: 500;
+    border: 1px solid #007aff33;
+    color: #003366;
+}
+
+.suggestion-box {
+    background-color: #f6f9fc;
+    border-radius: 10px;
+    border: 1px solid #ccd8e0;
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #222;
+    margin-top: 25px;
+    position: relative;
+    overflow: scroll;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+
+.arrow-btn {
+    width: 26px;
+    height: 26px;
+    font-size: 14px;
+    padding: 0;
+    background: none;
+    border: none;
+    color: #007bff;
+    cursor: pointer;
+    font-weight: bold;
+    transition: 0.15s ease-in-out;
+}
+.arrow-btn:hover {
+    color: #003366;
+    transform: scale(1.25);
+}
+
+.use-btn {
+    background-color: #66b3ff !important;
+    color: #000 !important;
+    font-weight: 600 !important;
+    border-radius: 6px !important;
+    padding: 4px 10px !important;
+    margin-left: 6px;
+    border: 1px solid #007aff22 !important;
+}
+.use-btn:hover {
+    background-color: #99ccff !important;
+}
+
 .suggestion-box .prev-btn { position: absolute; top: 5px; left: 5px; }
 .suggestion-box .next-btn { position: absolute; top: 5px; right: 5px; }
-.suggestion-box .suggestion-text { width: 100%; text-align: center; border:none; background:none; color:#111; font-weight:500; padding-top:8px; overflow-y: scroll;}
+
+.suggestion-box .suggestion-text {
+    width: 100%;
+    text-align: center;
+    border: none;
+    background: none;
+    color: #222;
+    font-weight: 500;
+    padding-top: 8px;
+    overflow-y: scroll;
+}
+
+.gradio-button { color: white !important; }
 """