Improved UI (#11)

- Improved UI (432a11f92a430945ec0bb641a49b9bbbddedbc2a)


Co-authored-by: Kai <kai-aizip@users.noreply.huggingface.co>

static/styles.css

@@ -501,20 +501,23 @@ body, .gradio-container {
 }
 
 .model-reveal {
-    font-size: 1em !important;
+    font-size: 1.1em !important;
     text-align: center !important;
     font-weight: 600 !important;
     background-color: transparent !important;
     padding: 0 !important;
-    margin: 0 !important;
     border: none !important;
 }
 
 .model-reveal span {
-    font-size: 1.2em !important; 
+    font-size: 1.3em !important; 
     display: block !important;
     width: 100% !important;
-    padding: 18px 15px !important; 
+    padding: 25px 15px !important; 
+    min-height: 50px !important; 
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
 }
 
 .model-a-reveal span {
@@ -618,15 +621,29 @@ hr {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
 }
 
+.results-reveal-area hr {
+    margin: 25px 0 20px 0 !important;
+    border: none !important;
+    height: 1px !important;
+    background-color: var(--border-light) !important;
+    width: 100% !important;
+}
+
+/* Make Try Another button match submit button width */
 #try-another-btn {
     background-color: var(--primary) !important;
     color: white !important;
-    padding: 10px 25px !important;
+    padding: 12px 30px !important;
     border-radius: 6px !important;
     font-weight: 600 !important;
+    font-size: 1.2em !important;
     transition: all 0.2s ease !important;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
     border: none !important;
+    width: 100% !important; /* Make it full width */
+    max-width: 100% !important;
+    margin: 10px auto !important; /* Center it and add spacing */
+    display: block !important;
 }
 
 #try-another-btn:hover {