assets/styles.css

/* Rupkotha — calm "storybook" theme. Professional, low-contrast, presentable.
   Soft parchment/lavender background, deep slate-indigo ink, muted terracotta +
   dusty-gold accents. Warm and gentle — not high-contrast. */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Noto+Sans+Bengali:wght@500;600;700&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  --bg-1: #eef0f7;          /* soft lavender mist */
  --bg-2: #f7f2ea;          /* warm cream */
  --ink: #333a5c;           /* deep slate-indigo (headings) */
  --ink-body: #4a5170;      /* body text */
  --ink-soft: #7b81a0;      /* secondary/placeholder */
  --panel: #ffffff;
  --panel-2: #fbfaf6;
  --panel-brd: rgba(51, 58, 92, 0.10);
  --accent: #c4865a;        /* muted terracotta */
  --accent-2: #d6a463;      /* dusty gold */
  --accent-ink: #5a3a1e;
  --story-bg: #fbf6ec;      /* parchment */
  --story-ink: #43392b;
  --radius: 20px;
  --radius-sm: 13px;
  --shadow: 0 12px 34px rgba(46, 52, 88, 0.10);
  --shadow-sm: 0 4px 14px rgba(46, 52, 88, 0.08);
}

/* ── Background: soft, calm gradient (no harsh dark) ──────────────────── */
.gradio-container,
.gradio-container .fillable,
body {
  background:
    radial-gradient(900px 480px at 85% -12%, rgba(214, 164, 99, 0.10), transparent 60%),
    radial-gradient(820px 460px at 5% -6%, rgba(150, 160, 210, 0.12), transparent 58%),
    linear-gradient(165deg, var(--bg-1) 0%, var(--bg-2) 70%) !important;
  color: var(--ink-body) !important;
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
}

.gradio-container { max-width: 100% !important; margin: 0 !important; padding: 0 28px !important; }

/* ── Hero ────────────────────────────────────────────────────────────── */
#hero { text-align: center; padding: 1.7rem 1rem 0.4rem; }
#hero .hero-moon {
  font-size: 2.6rem; line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(196, 134, 90, 0.30));
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }
#hero h1 {
  font-family: 'Baloo 2', 'Noto Sans Bengali', sans-serif;
  font-size: 2.5rem; font-weight: 700; margin: .3rem 0 .25rem;
  color: var(--ink);
  letter-spacing: .2px;
}
#hero p { color: var(--ink-soft); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

/* ── Panels (soft cards) ─────────────────────────────────────────────── */
#studio { gap: 22px !important; margin-top: .8rem; align-items: stretch; }
.panel {
  background: var(--panel) !important;
  border: 1px solid var(--panel-brd) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  padding: 18px 20px !important;
}
.panel .block, .panel .form, .panel .gr-group, .panel fieldset {
  background: transparent !important; border: none !important; box-shadow: none !important;
}

/* Section headers inside panels. */
.panel-head {
  display: flex; align-items: center; gap: .55rem;
  font-family: 'Baloo 2', sans-serif; font-weight: 600;
  font-size: 1.1rem; color: var(--ink);
  margin: .7rem 0 .4rem;
}
.panel-head .step {
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff; font-size: .82rem; font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* ── Labels & text ───────────────────────────────────────────────────── */
.gradio-container label,
.gradio-container .gr-text { color: var(--ink-body) !important; }
.gradio-container label > span,
.gradio-container .gr-form > span { font-weight: 600 !important; color: var(--ink) !important; }

/* ── Inputs ──────────────────────────────────────────────────────────── */
.gradio-container input[type="text"],
.gradio-container textarea,
.gradio-container .gr-dropdown,
.gradio-container select {
  background: var(--panel-2) !important;
  border: 1px solid rgba(51, 58, 92, 0.14) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
  font-size: 1.04rem !important;
}
.gradio-container input::placeholder,
.gradio-container textarea::placeholder { color: var(--ink-soft) !important; }
.gradio-container input:focus,
.gradio-container textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(196, 134, 90, 0.16) !important;
}

/* Upload drop zone. */
.upload-box, .upload-box .center, .upload-box .wrap {
  border-radius: var(--radius-sm) !important;
  border: 1.5px dashed rgba(196, 134, 90, 0.45) !important;
  background: rgba(214, 164, 99, 0.06) !important;
  color: var(--ink-body) !important;
}

/* ── Image preview gallery ───────────────────────────────────────────── */
.preview {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--panel-brd) !important;
  background: var(--panel-2) !important;
  padding: 6px !important; margin-top: .4rem;
}
.preview .thumbnail-item, .preview img, .preview button.thumbnail-item {
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
#generate-btn {
  font-family: 'Baloo 2', sans-serif !important;
  font-size: 1.3rem !important; font-weight: 700 !important;
  padding: .85rem 1.5rem !important; margin-top: .9rem !important; width: 100% !important;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)) !important;
  color: #fff !important; border: none !important; border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(196, 134, 90, 0.32) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
#generate-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(196,134,90,.40) !important; }
#generate-btn:active { transform: translateY(0); }
#save-btn {
  font-weight: 700 !important; border-radius: 999px !important;
  border: 1.5px solid var(--accent) !important; color: var(--accent) !important;
  background: transparent !important; margin-top: .5rem !important;
}
#save-btn:hover { background: rgba(196, 134, 90, 0.10) !important; }

/* ── Story panel ─────────────────────────────────────────────────────── */
.story-panel { display: flex; flex-direction: column; }
.story-text textarea {
  font-family: 'Baloo 2', 'Noto Sans Bengali', serif !important;
  font-size: 1.32rem !important; line-height: 1.85 !important;
  background: var(--story-bg) !important;
  color: var(--story-ink) !important;
  border: 1px solid rgba(196, 134, 90, 0.18) !important;
  border-radius: var(--radius-sm) !important;
  padding: 1.1rem 1.3rem !important;
  min-height: 180px;        /* small floor for the empty state; grows to fit content */
  height: auto !important;
  overflow-y: auto;
}

/* ── Model badge ─────────────────────────────────────────────────────── */
.model-badge p {
  display: inline-block; margin: .3rem 0 0 !important;
  background: rgba(214, 164, 99, 0.12);
  border: 1px solid rgba(196, 134, 90, 0.30);
  border-radius: 999px; padding: .35rem 1rem;
  font-size: .82rem; color: var(--accent-ink) !important;
}

/* ── Saved stories ───────────────────────────────────────────────────── */
.section-title {
  font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 1.28rem;
  color: var(--ink); text-align: center; margin: 1.8rem 0 .7rem;
}
#history-row { gap: 16px !important; }
.saved-card {
  background: var(--panel) !important;
  border: 1px solid var(--panel-brd) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm); padding: 14px 16px !important;
}
.saved-text, .saved-text p {
  font-family: 'Baloo 2', 'Noto Sans Bengali', sans-serif;
  font-size: 1rem !important; line-height: 1.62; color: var(--story-ink) !important;
}
.saved-badge { display: inline-block; margin-top: .5rem; font-size: .72rem; color: var(--accent); }

#stack-note {
  text-align: center; color: var(--ink-soft);
  font-size: .9rem; margin: 1.8rem 0 1rem;
}
#stack-note b { color: var(--accent); }

/* ── Accessibility ───────────────────────────────────────────────────── */
.gradio-container *:focus-visible {
  outline: 3px solid var(--accent) !important; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #hero .hero-moon { animation: none !important; }
  .gradio-container * { animation: none !important; transition: none !important; }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  #studio { flex-direction: column !important; }
  #hero h1 { font-size: 2rem; }
  .story-text textarea { font-size: 1.22rem !important; min-height: 240px; }
}