body, .gradio-container { font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important; } #header, h1, .gradio-container h1 { color: #d72660 !important; /* Deep Pink */ text-shadow: 0 2px 10px #f9a8d4cc; letter-spacing: 2px; font-size: 2.2rem !important; font-weight: 900 !important; } .markdown, .gr-markdown-content { background: none !important; font-size: 1.05em; border-radius: 1.2em !important; } .gr-block, .gr-box, .gradio-container .gr-panel, .gradio-container .gr-form { background: #fdf2f8 !important; /* Pink 50 */ border-radius: 1.5em !important; box-shadow: 0 2px 12px #fbcfe888; border: 1.5px solid #fbcfe8 !important; /* Pink 200 */ padding: 1em 1.3em !important; transition: box-shadow 0.16s, transform 0.16s; } .gr-block:hover, .gr-box:hover, .gradio-container .gr-panel:hover, .gradio-container .gr-form:hover { box-shadow: 0 8px 28px #f9a8d4bb; transform: translateY(-2px) scale(1.01); } .gr-file, .gr-textbox, .gradio-container .gr-input, .gradio-container input[type="text"], .gradio-container input[type="number"] { background: #fce7f3 !important; /* Pink 100 */ border: 1.5px solid #f472b6 !important; /* Pink 400 */ border-radius: 1em !important; color: #831843 !important; /* Pink 900 */ 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, .gradio-container input[type="number"]:focus { border: 1.5px solid #db2777 !important; /* Pink 600 */ box-shadow: 0 0 0 3px #f9a8d4aa; background: #fff !important; color: #db2777 !important; } .gradio-container label, .gradio-container .label, .gradio-container .gr-label { color: #ec4899 !important; /* Pink 500 */ font-weight: 700 !important; font-size: 1.08em !important; } /* Scoped to not break Gradio 6 tiny icons */ .button-row button, .button-row .gr-button { background: linear-gradient(90deg, #f472b6, #db2777 90%) !important; color: #ffffff !important; border: none !important; border-radius: 2em !important; font-size: 1.1em !important; padding: 0.7em 2.1em !important; font-weight: 800; letter-spacing: 1px; box-shadow: 0 2px 12px #fbcfe833; transition: transform 0.14s, box-shadow 0.14s, background 0.14s; } .button-row button:hover, .button-row .gr-button:hover { background: linear-gradient(93deg, #db2777, #f472b6 90%) !important; color: #ffffff !important; transform: scale(1.04); box-shadow: 0 5px 24px #f9a8d466; } input[type="file"]::file-selector-button { background: #fbcfe8 !important; /* Pink 200 */ color: #831843 !important; /* Pink 900 */ border: none; border-radius: 1em; padding: 0.5em 1.1em; font-weight: 700; font-size: 1em; box-shadow: 0 1px 8px #fbcfe833; margin-right: 0.8em; transition: background 0.18s, transform 0.18s; } input[type="file"]::file-selector-button:hover { background: #f9a8d4 !important; /* Pink 300 */ color: #db2777 !important; /* Pink 600 */ transform: scale(1.07); } .gr-output label, .gradio-container .gr-label { color: #ec4899 !important; /* Pink 500 */ font-weight: 700 !important; } .gradio-container .gr-textbox[aria-disabled="true"], .gradio-container .gr-textbox[readonly] { background: #fdf2f8 !important; /* Pink 50 */ color: #db2777 !important; /* Pink 600 */ border: 1.5px solid #fbcfe8 !important; /* Pink 200 */ }