Update style.css

style.css

@@ -1,75 +1,17 @@
 /* style.css - Professional Medical Aesthetic Theme */
-
-/* 1. Define the Color Palette */
 :root {
-    --color-primary-blue: #007BFF;       /* A calming, professional blue */
-    --color-accent-teal: #17A2B8;        /* A modern, clean teal for highlights */
-    --color-background-white: #FFFFFF;  /* Clean white background */
-    --color-background-light-gray: #F8F9FA; /* A very light gray for subtle contrast */
-    --color-text-dark: #212529;          /* High-contrast, readable dark text */
-    --color-text-light: #6C757D;         /* Lighter text for secondary info */
-    --color-border: #DEE2E6;            /* Subtle borders for components */
-    --font-primary: 'Inter', 'Helvetica Neue', sans-serif; /* Modern, clean sans-serif font */
-}
-
-/* 2. General Body and Layout Styling */
-body, #root {
-    background-color: var(--color-background-light-gray);
-    font-family: var(--font-primary);
-    color: var(--color-text-dark);
-}
-
-/* 3. Dashboard Component Styling */
-.gradio-container {
-    border-radius: 12px !important;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
-    background: var(--color-background-white) !important;
-}
-
-/* Make buttons match the theme */
-.gradio-button {
-    background-color: var(--color-primary-blue) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 8px !important;
-    font-weight: 600 !important;
-    transition: background-color 0.3s ease !important;
-}
-.gradio-button:hover {
-    background-color: #0056b3 !important; /* Darker blue on hover */
-}
-.gradio-button.secondary {
-    background-color: var(--color-accent-teal) !important;
-}
-.gradio-button.secondary:hover {
-    background-color: #117a8b !important; /* Darker teal on hover */
-}
-
-/* Style the text boxes and chat */
-textarea, .gradio-chatbot {
-    border: 1px solid var(--color-border) !important;
-    border-radius: 8px !important;
-}
-
-/* Style the headings and titles for a professional look */
-h1, h2 {
-    color: var(--color-primary-blue);
-    font-weight: 700;
-}
-
-/* Style the tabs for the results area */
-.tab-nav button {
-    background-color: var(--color-background-light-gray) !important;
-    border-radius: 8px 8px 0 0 !important;
-    border-bottom: 2px solid transparent !important;
-}
-.tab-nav button.selected {
-    background-color: var(--color-background-white) !important;
-    border-bottom: 2px solid var(--color-primary-blue) !important;
-}
-
-/* Generous spacing for a modern feel */
-.gradio-container .form {
-    padding: 20px !important;
-    gap: 20px !important;
-}
+    --color-primary-blue: #007BFF; --color-accent-teal: #17A2B8; --color-background-white: #FFFFFF;
+    --color-background-light-gray: #F8F9FA; --color-text-dark: #212529; --color-text-light: #6C757D;
+    --color-border: #DEE2E6; --font-primary: 'Inter', 'Helvetica Neue', sans-serif;
+}
+body, #root { background-color: var(--color-background-light-gray); font-family: var(--font-primary); color: var(--color-text-dark); }
+.gradio-container { border-radius: 12px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; background: var(--color-background-white) !important; }
+.gradio-button { background-color: var(--color-primary-blue) !important; color: white !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; transition: background-color 0.3s ease !important; }
+.gradio-button:hover { background-color: #0056b3 !important; }
+.gradio-button.secondary { background-color: var(--color-accent-teal) !important; }
+.gradio-button.secondary:hover { background-color: #117a8b !important; }
+textarea, .gradio-chatbot { border: 1px solid var(--color-border) !important; border-radius: 8px !important; }
+h1, h2 { color: var(--color-primary-blue); font-weight: 700; }
+.tab-nav button { background-color: var(--color-background-light-gray) !important; border-radius: 8px 8px 0 0 !important; border-bottom: 2px solid transparent !important; }
+.tab-nav button.selected { background-color: var(--color-background-white) !important; border-bottom: 2px solid var(--color-primary-blue) !important; }
+.gradio-container .form { padding: 20px !important; gap: 20px !important; }