Update ui/styles.py

ui/styles.py

@@ -62,4 +62,133 @@ h1 {
     font-weight: 600 !important;
 }
 
-/* JSON
+/* JSON displays */
+.gr-json {
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 8px !important;
+    padding: 15px !important;
+    background: #f8fafc !important;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
+    font-size: 13px !important;
+}
+
+/* Checkboxes and radios */
+.gr-checkbox, .gr-radio {
+    padding: 10px !important;
+    border-radius: 6px !important;
+    border: 1px solid #e2e8f0 !important;
+}
+
+.gr-checkbox:hover, .gr-radio:hover {
+    border-color: #667eea !important;
+    background: #f8fafc !important;
+}
+
+/* Sliders */
+.gr-slider {
+    padding: 20px 0 !important;
+}
+
+.gr-slider .range {
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
+}
+
+/* Dataframes */
+.gr-dataframe {
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 8px !important;
+    overflow: hidden !important;
+}
+
+.gr-dataframe th {
+    background: #f8fafc !important;
+    color: #1a365d !important;
+    font-weight: 600 !important;
+    padding: 12px !important;
+    border-bottom: 2px solid #e2e8f0 !important;
+}
+
+.gr-dataframe td {
+    padding: 10px !important;
+    border-bottom: 1px solid #e2e8f0 !important;
+}
+
+/* Plot containers */
+.gr-plot {
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 10px !important;
+    padding: 15px !important;
+    background: white !important;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
+}
+
+/* Custom classes */
+.critical-metric {
+    background: linear-gradient(135deg, rgba(255,107,107,0.1) 0%, rgba(255,107,107,0.2) 100%) !important;
+    border-left: 4px solid #FF6B6B !important;
+    padding: 15px !important;
+    border-radius: 8px !important;
+    margin: 10px 0 !important;
+    font-weight: bold !important;
+}
+
+.success-metric {
+    background: linear-gradient(135deg, rgba(78,205,196,0.1) 0%, rgba(78,205,196,0.2) 100%) !important;
+    border-left: 4px solid #4ECDC4 !important;
+    padding: 15px !important;
+    border-radius: 8px !important;
+    margin: 10px 0 !important;
+    font-weight: bold !important;
+}
+
+.roi-highlight {
+    font-size: 2.5em !important;
+    font-weight: 900 !important;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    text-align: center !important;
+    margin: 20px 0 !important;
+}
+
+.presenter-guidance {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    padding: 20px !important;
+    border-radius: 10px !important;
+    margin: 15px 0 !important;
+    border-left: 5px solid #4ECDC4 !important;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
+}
+
+/* Footer */
+.footer {
+    margin-top: 40px !important;
+    padding-top: 20px !important;
+    border-top: 1px solid #e2e8f0 !important;
+    color: #718096 !important;
+    font-size: 14px !important;
+}
+"""
+
+THEME = gr.themes.Soft(
+    primary_hue="purple",
+    secondary_hue="teal",
+    neutral_hue="gray",
+    font=["-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "sans-serif"]
+).set(
+    button_primary_background_fill="linear-gradient(90deg, #667eea 0%, #764ba2 100%)",
+    button_primary_background_fill_hover="linear-gradient(90deg, #764ba2 0%, #667eea 100%)",
+    button_primary_text_color="white",
+    button_primary_border_color="#667eea",
+    button_secondary_background_fill="linear-gradient(90deg, #4ECDC4 0%, #44A08D 100%)",
+    button_secondary_background_fill_hover="linear-gradient(90deg, #44A08D 0%, #4ECDC4 100%)",
+    button_secondary_text_color="white",
+    background_fill_primary="#f8fafc",
+    background_fill_secondary="#ffffff",
+    border_color_primary="#e2e8f0",
+    border_color_secondary="#cbd5e0",
+    shadow_spread="2px",
+    shadow_spread_dark="1px"
+)