style.css

/* style.css - Professional Medical Aesthetic Theme */
:root {
    --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; }