backend/style.css

:root {
  --primary-color: #9b59b6;
  --primary-light: #d6c6e1;
  --secondary-color: #2ecc71;
  --text-color: #333333;
  --background-color: #f9f9f9;
  --card-bg: #ffffff;
  --border-radius: 10px;
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  --input-border: #e0e0e0;
  --input-bg: #ffffff;
  --font-weight-normal: 500;
  --font-weight-bold: 700;
}

/* Base styles */
body, html {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: var(--font-weight-normal);
  background-color: var(--background-color);
  color: var(--text-color);
  width: 100vw;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

/* Force full width layout */
#main-interface, 
.gradio-app, 
.gradio-container {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  overflow-x: hidden !important;
}

/* Header styling */
#header-row {
  background: white;
  padding: 15px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.header-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.app-header .emoji {
  font-size: 36px;
}

/* Fix for Colorize Diffusion title visibility */
.gradio-markdown h1,
.gradio-markdown h2,
#header-row h1,
#header-row h2,
.title-text,
.app-header .title-text {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  color: var(--primary-color) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
}

/* Badge links under the header */
.paper-links-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 5px;
}

.paper-links-icons a {
  transition: transform 0.2s ease;
  opacity: 0.9;
}

.paper-links-icons a:hover {
  transform: translateY(-3px);
  opacity: 1;
}

/* Content layout */
#content-row {
  padding: 0 20px 20px 20px;
  max-width: 100%;
  margin: 0 auto;
}

/* Apply bold font to all text elements for better readability */
p, span, label, button, input, textarea, select, .gradio-button, .gradio-checkbox, .gradio-dropdown, .gradio-textbox {
  font-weight: var(--font-weight-normal);
}

/* Make headings bolder */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
}

/* Improved font styling for Gradio UI elements */
.gradio-container, 
.gradio-container *, 
.gradio-app, 
.gradio-app * {
  font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-weight: 500 !important;
}

/* Style for labels and slider labels */
.gradio-container label,
.gradio-slider label,
.gradio-checkbox label,
.gradio-radio label,
.gradio-dropdown label,
.gradio-textbox label,
.gradio-number label,
.gradio-button,
.gradio-checkbox span,
.gradio-radio span {
  font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* Style for buttons */
button, 
.gradio-button {
  font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
}

/* Style for input values */
input, 
textarea, 
select,
.gradio-textbox textarea,
.gradio-number input {
  font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-weight: 500 !important;
}

/* Better styling for drop areas */
.upload-box,
[data-testid="image"] {
  font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-weight: 500 !important;
}

/* Additional styling for values in sliders and numbers */
.wrap .wrap .wrap span {
  font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
}