public/styles.css

:root { color-scheme: dark; }

body, .gradio-container {
  background: #0E1014 !important;
  color: #EAECEF !important;
  --ghost-surface: #0F1420;
  --ghost-border: #243049;
  --ghost-ink: #EAECEF;
  --ghost-accent: #10B981;    /* emerald */
  --ghost-accent-2: #8B5CF6;  /* violet */
  --ghost-accent-3: #F59E0B;  /* amber */
  --ghost-accent-4: #38BDF8;  /* sky */
}

* { color: var(--ghost-ink) !important; }

label, p, span, h1, h2, h3, h4, h5, h6 { color: var(--ghost-ink) !important; }

input, textarea, select {
  background: #151922 !important;
  color: var(--ghost-ink) !important;
  border: 1px solid #2A3142 !important;
  border-radius: 10px !important;
}

button.gr-button {
  background: linear-gradient(180deg, #1E3A8A, #1D4ED8) !important;
  color: #FFFFFF !important;
  border: 1px solid #2947A3 !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-weight: 700 !important;
  transition: transform 0.06s ease-out, background 0.2s ease;
}
button.gr-button:hover { transform: translateY(-1px); background: linear-gradient(180deg, #1F49A8, #2563EB) !important; }
button.gr-button:focus { outline: 3px solid var(--ghost-accent) !important; }

.slider > input { accent-color: var(--ghost-accent-3) !important; }

.header {
  text-align:center; padding: 12px 16px;
  border-bottom: 2px solid var(--ghost-accent);
}
.header h1 { font-size: 28px; margin: 6px 0 0 0; }
.header .logo { font-size: 44px; }

.input-container, .settings-container, .output-container, .logs-container {
  max-width: 1200px; margin: 16px auto; padding: 16px;
  background: var(--ghost-surface);
  border: 1px solid var(--ghost-border); border-radius: 12px;
}

/* Responsive grid for style buttons */
#genre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

/* style buttons – make them compact and colorful */
#genre-grid .style-btn.gr-button {
  min-height: 44px;
  background: linear-gradient(180deg, #0EA5E9, #0369A1) !important; /* blue-ish */
  border-color: #0C4A6E !important;
}
#genre-grid .style-btn.gr-button:hover {
  background: linear-gradient(180deg, #22D3EE, #0EA5E9) !important;
}

.group-container { border: 1px solid var(--ghost-border); border-radius: 12px; padding: 16px; }

.gradio-container .prose a { color: var(--ghost-accent-2) !important; text-decoration: underline; }