ui/styles.css

.gradio-container,
.gradio-container .app,
.gradio-container .wrap,
.gradio-container .contain,
.block,
.gr-group,
.html-container,
.prose, 
#main_panel {
  background-color: white !important;
  background-fill-secondary: white !important;
}

#control_panel {  
    background-color: white !important; */
    padding: 1em !important;
    margin: 1em !important;
}


#footer {
    text-align: center;
    color: gray;
    font-size: 1em;
}


/* Instructional Guidance Blocks */
#component-8, #component-10, #component-11  {
    padding: 2em !important;
    margin: 16px 0 !important;
   background-color: white !important;
}


/* Body text in guidance */
#component-8 .prose p,
#component-10 .prose p {
    color: #475569 !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
}

/* Lists in guidance */
#component-8 .prose ul,
#component-10 .prose ul {
    color: #475569 !important;
    padding-left: 20px !important;
    margin: 12px 0 !important;
}

#component-8 .prose li,
#component-10 .prose li {
    margin-bottom: 6px !important;
    line-height: 1.5 !important;
}

/* Code blocks in guidance */
#component-8 .prose code,
#component-10 .prose code {
    background: #e0e7ff !important;
    color: #4338ca !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: 'Monaco', 'Consolas', monospace !important;
    font-size: 13px !important;
    border: 1px solid #c7d2fe !important;
}