custom.css

:root {
  --bg: #f3f6fb;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: #dbe3ef;
  --accent: #0ea5e9;
}

body,
.gradio-container {
  background: radial-gradient(circle at 10% 10%, #e7f2ff 0%, #f3f6fb 45%, #eef2ff 100%);
  color: var(--text);
}

.gradio-container {
  max-width: 1320px !important;
}

.block,
.gr-box,
.gr-form,
.gr-panel {
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--panel) !important;
}

textarea,
input,
select {
  border-radius: 10px !important;
}

button.primary,
.gr-button-primary {
  background: linear-gradient(90deg, #0284c7, #0ea5e9) !important;
  border: none !important;
}

button.primary:hover,
.gr-button-primary:hover {
  filter: brightness(1.05);
}

.gr-markdown p,
.gr-markdown li {
  color: var(--muted);
}