Update styles.css

styles.css

@@ -439,3 +439,92 @@ button.secondary {
         max-width: 100%;
     }
 }
+
+/* ============================================================
+   OTIMIZAÇÃO PARA MODO ESCURO (DARK MODE)
+   ============================================================ */
+
+@media (prefers-color-scheme: dark) {
+
+    /* Fundo Geral */
+    .gradio-container {
+        background: #0b0f19 !important; /* Azul/Preto muito escuro */
+        color: #e5e7eb !important;
+    }
+
+    /* Containers Principais (Seções, Grupos, Cards) */
+    .section-container, 
+    .gradio-group, 
+    .diagnosticos-container, 
+    .gradio-accordion, 
+    .modelo-card, 
+    .transf-card {
+        background: #1f2937 !important; /* Cinza escuro */
+        border-color: #374151 !important;
+        color: #e5e7eb !important;
+    }
+
+    /* Títulos e Textos */
+    .section-title, 
+    .section-title-orange, 
+    .teste-nome, 
+    .stat-label,
+    .checkbox-selecionar-todos label {
+        color: #f3f4f6 !important;
+    }
+
+    /* Ajuste específico para o Título Laranja (gradiente invertido para escuro) */
+    .section-title-orange {
+        background: linear-gradient(90deg, #374151 0%, #1f2937 100%) !important;
+        color: #ffb04f !important; /* Laranja mais claro para contraste */
+    }
+
+    /* Inputs, Dropdowns e Áreas de Texto */
+    .gradio-dropdown, 
+    .gradio-textbox input, 
+    .gradio-textbox textarea,
+    .gradio-checkbox-group label {
+        background-color: #374151 !important;
+        color: #ffffff !important;
+        border-color: #4b5563 !important;
+    }
+
+    /* Itens de Estatística e Testes */
+    .stat-item, 
+    .teste-item, 
+    .checkbox-selecionar-todos,
+    .equation-box {
+        background: #111827 !important; /* Quase preto */
+        border-color: #374151 !important;
+    }
+
+    .stat-value, 
+    .teste-valor {
+        color: #f9fafb !important;
+    }
+
+    /* Tabelas (Dataframe) */
+    .gradio-dataframe th {
+        background: #111827 !important;
+        color: #d1d5db !important;
+    }
+    .gradio-dataframe td {
+        background: #1f2937 !important;
+        color: #e5e7eb !important;
+    }
+    .gradio-dataframe tr:hover td {
+        background: #374151 !important;
+    }
+
+    /* Accordions */
+    .gradio-accordion > .label-wrap {
+        background: #374151 !important;
+        color: white !important;
+    }
+
+    /* Plots/Gráficos */
+    .gradio-plot {
+        background: #1f2937 !important;
+        border-color: #374151 !important;
+    }
+}