Update app.py

app.py

@@ -173,100 +173,92 @@ def classify_display(text):
 
 # ---------------- CSS refinado - tema claro agradável ----------------
 custom_css = """
-body { background-color: #ffffff; color: #222; font-family: 'Inter', sans-serif; }
-.gradio-container { background-color: #ffffff; color: #222; }
+/* ======== Tema Claro – Council Topics Classifier ======== */
 
-h2 { text-align: center; color: #0056b3; font-weight: 700; }
-h3 { text-align: center; color: #0066cc; font-weight: 600; }
+/* Fundo principal */
+body, .gradio-container, .gr-interface, .gr-block, .wrap.svelte-1ipelgc {
+    background-color: #ffffff !important;
+    color: #222222 !important;
+}
+
+/* Cabeçalho e títulos */
+h1, h2, h3, h4, h5, h6, label, .gr-text-input label, .gr-textbox label {
+    color: #222222 !important;
+    font-weight: 600 !important;
+}
+
+/* Texto geral */
+p, span, div, .prose * {
+    color: #333333 !important;
+}
 
-textarea {
-    background-color: #f9fafc !important;
-    color: #222 !important;
+/* Inputs e caixas */
+textarea, input[type="text"], .gr-textbox, .gr-input, .gr-box, .gr-form, .gr-panel {
+    background-color: #ffffff !important;
+    color: #222222 !important;
+    border: 1px solid #d1d5db !important;
     border-radius: 10px !important;
-    border: 1px solid #d0d7de !important;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
 }
 
-button {
-    background-color: #007bff !important;
+/* Botões */
+button, .gr-button {
+    background-color: #3b82f6 !important; /* azul suave */
     color: white !important;
+    border-radius: 10px !important;
     font-weight: 600 !important;
-    border-radius: 8px !important;
     border: none !important;
-    transition: 0.2s ease-in-out;
+    transition: background-color 0.2s ease-in-out !important;
+}
+button:hover, .gr-button:hover {
+    background-color: #2563eb !important; /* azul mais escuro no hover */
 }
-button:hover {
-    background-color: #005fcc !important;
+
+/* Dropdowns */
+select {
+    background-color: #ffffff !important;
+    color: #222222 !important;
+    border: 1px solid #d1d5db !important;
+    border-radius: 10px !important;
 }
 
-.output-chip {
-    background-color: #eef4ff;
-    padding: 5px 12px;
-    border-radius: 8px;
-    font-weight: 500;
-    border: 1px solid #007aff33;
-    color: #003366;
+/* Caixas de saída */
+.output-class, .output-text, .gr-highlighted, .output-box, .gr-panel.output {
+    background-color: #f9fafb !important;
+    color: #111827 !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 10px !important;
 }
 
-.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);
+/* Sugestões ou resultados */
+.suggestions-box, .gradio-container .gr-column.output {
+    background-color: #ffffff !important;
+    border: 1px solid #e5e7eb !important;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
 }
 
-.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;
+/* Scrollbars subtis */
+::-webkit-scrollbar {
+    width: 8px;
 }
-.arrow-btn:hover {
-    color: #003366;
-    transform: scale(1.25);
+::-webkit-scrollbar-thumb {
+    background-color: #d1d5db;
+    border-radius: 4px;
 }
 
-.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;
+/* Links */
+a {
+    color: #2563eb !important;
 }
-.use-btn:hover {
-    background-color: #99ccff !important;
+a:hover {
+    text-decoration: underline !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: #222;
-    font-weight: 500;
-    padding-top: 8px;
-    overflow-y: scroll;
+/* Ocultar bordas de debug / espaços */
+div[style*="background: var(--neutral-950)"] {
+    background: none !important;
 }
 
-.gradio-button { color: white !important; }
 """