static/style.css

:root{
  --accent-1: #8ec5ff;
  --accent-2: #d3b8ff;
  --accent-3: #ffb3d9;
  --bg-start: #f6f9ff;
  --bg-end: #fff6fb;
  --card-bg: rgba(255,255,255,0.78);
  --glass-blur: 10px;
  --radius-lg: 16px;
  --shadow-soft: 0 10px 30px rgba(12,18,35,0.08);
}

/* Page */
html,body{
  height:100%;
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Title */
.title {
  font-size: 28px;
  font-weight: 700;
  text-align:center;
  margin: 6px 0 8px 0;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* Accent decoration */
.app-accent {
  position: fixed;
  right: 30px;
  top: 20px;
  width: 220px;
  height: 220px;
  pointer-events: none;
  background: radial-gradient(circle at 20% 20%, rgba(142,197,255,0.18), transparent 15%),
              radial-gradient(circle at 80% 80%, rgba(211,184,255,0.14), transparent 15%);
  filter: blur(28px);
  border-radius: 50%;
  z-index: 0;
}

/* Container */
.gradio-container {
  max-width: 1200px !important;
  margin: 20px auto !important;
  padding: 22px !important;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(115%);
}

/* Inputs */
input[type="text"], textarea, .gr-input input, .gr-input textarea {
  border-radius: 12px !important;
  padding: 10px !important;
  border: 1px solid rgba(10,18,36,0.06) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Buttons */
button, .gr-button {
  border-radius: 12px !important;
  padding: 10px 14px !important;
  border: none !important;
  font-weight: 700;
  cursor: pointer;
  color: #06203a;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 8px 30px rgba(142,197,255,0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
button:hover, .gr-button:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(142,197,255,0.12); }

/* Output boxes */
.gr-textbox, .gr-file {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,255,0.96));
  border-radius: 12px;
  padding: 8px;
}

/* Labels */
.gr-label { color: rgba(7,18,34,0.8); font-weight: 600; }

/* Small text */
.muted { color: rgba(7,18,34,0.6); font-size: 0.95em; text-align:center; margin-top:12px; }

/* Responsive */
@media (max-width: 900px) {
  .gradio-container { padding: 14px; }
}