Update fancy.css

fancy.css

@@ -1,11 +1,8 @@
-/* Main background & font */
 body, .gradio-container {
     background: #f9f7fa !important;
     color: #313146 !important;
     font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
 }
-
-/* Header */
 #header, h1, .gradio-container h1 {
     color: #d72660 !important;
     text-shadow: 0 2px 10px #f6abb6cc;
@@ -13,16 +10,12 @@ body, .gradio-container {
     font-size: 2.2rem !important;
     font-weight: 900 !important;
 }
-
-/* Markdown and info */
 .markdown, .gr-markdown-content {
     color: #7c6f9c !important;
     background: none !important;
     font-size: 1.05em;
     border-radius: 1.2em !important;
 }
-
-/* "Card" style */
 .gr-block, .gr-box, .gradio-container .gr-panel, .gradio-container .gr-form {
     background: #fff7fd !important;
     border-radius: 1.5em !important;
@@ -35,8 +28,6 @@ body, .gradio-container {
     box-shadow: 0 8px 28px #e0c8efbb;
     transform: translateY(-2px) scale(1.01);
 }
-
-/* Inputs */
 .gr-file, .gr-textbox, .gradio-container .gr-input, .gradio-container input[type="text"] {
     background: #f4eaf7 !important;
     border: 1.5px solid #b4aee8 !important;
@@ -44,22 +35,17 @@ body, .gradio-container {
     color: #422046 !important;
     transition: border 0.14s, box-shadow 0.14s;
 }
-.gr-file:focus-within, .gr-textbox:focus-within, .gradio-container .gr-input:focus-within,
-.gradio-container input[type="text"]:focus {
+.gr-file:focus-within, .gr-textbox:focus-within, .gradio-container .gr-input:focus-within, .gradio-container input[type="text"]:focus {
     border: 1.5px solid #d72660 !important;
     box-shadow: 0 0 0 3px #fad0c4aa;
     background: #fff !important;
     color: #d72660 !important;
 }
-
-/* Labels */
 .gradio-container label, .gradio-container .label, .gradio-container .gr-label {
     color: #a365d6 !important;
     font-weight: 700 !important;
     font-size: 1.08em !important;
 }
-
-/* Buttons */
 .gr-button, button, [data-testid="button"] {
     background: linear-gradient(90deg,#fbb1f3,#b3cfff 90%) !important;
     color: #36374b !important;
@@ -78,8 +64,6 @@ body, .gradio-container {
     transform: scale(1.04);
     box-shadow: 0 5px 24px #d6c1ec66;
 }
-
-/* File input button */
 input[type="file"]::file-selector-button {
     background: #b3cfff !important;
     color: #5d3865 !important;
@@ -97,34 +81,27 @@ input[type="file"]::file-selector-button:hover {
     color: #d72660 !important;
     transform: scale(1.07);
 }
-
-/* Download output */
 .gr-output label, .gradio-container .gr-label {
     color: #b589d6 !important;
     font-weight: 700 !important;
 }
-
-/* Error */
 .gradio-container .gr-textbox[aria-disabled="true"], .gradio-container .gr-textbox[readonly] {
     background: #fde4e9 !important;
     color: #d72660 !important;
     border: 1.5px solid #fbb1f3 !important;
-
-}
-/* Darkstyle override */
-html[data-theme="dark"] body,
-html[data-theme="dark"] .gradio-container {
-  background: #2e2e2e !important;
-}
-
-html[data-theme="dark"] body,
-html[data-theme="dark"] .gradio-container,
-html[data-theme="dark"] .markdown,
-html[data-theme="dark"] .gr-markdown-content,
-html[data-theme="dark"] #header,
-html[data-theme="dark"] h1,
-html[data-theme="dark"] p,
-html[data-theme="dark"] .gr-label,
-html[data-theme="dark"] label {
-  color: #ffffff !important;
-}
+}
+html[data-theme="dark"] body, html[data-theme="dark"] .gradio-container {
+    background: #2e2e2e !important;
+}
+html[data-theme="dark"] body, html[data-theme="dark"] .gradio-container, html[data-theme="dark"] .markdown, html[data-theme="dark"] .gr-markdown-content, html[data-theme="dark"] #header, html[data-theme="dark"] h1, html[data-theme="dark"] p, html[data-theme="dark"] .gr-label, html[data-theme="dark"] label {
+    color: #ffffff !important;
+}
+@media (max-width: 768px) {
+    html[data-theme="dark"] body, html[data-theme="dark"] .gradio-container {
+        background: #f9f7fa !important;
+        color: #313146 !important;
+    }
+    html[data-theme="dark"] .markdown, html[data-theme="dark"] .gr-markdown-content, html[data-theme="dark"] #header, html[data-theme="dark"] h1, html[data-theme="dark"] p, html[data-theme="dark"] label, html[data-theme="dark"] .gr-label {
+        color: #313146 !important;
+    }
+}