static/gradio.css

/* ---------- Gradio transport overrides (V-Kali, 2026-09-03) ----------
   Everything above is the product stylesheet, untouched. Below: the few
   rules that make Gradio's own wrappers disappear behind it. */
.gradio-container, .gradio-container .main, body, .dark {
  background: var(--bg) !important; color: var(--ink) !important;
  font-family: var(--mono) !important; max-width: none !important;
}
.gradio-container .block, .gradio-container .form, .gradio-container .gap {
  background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
}
.gradio-container .prose, .gradio-container .prose * { color: inherit; }
footer.svelte-1rjryqp, .gradio-container > .main > .wrap > footer { display: none !important; }   /* Gradio's own footer */

/* workbench = the two-column grid from the product page */
.workbench { max-width: 1080px; margin: 0 auto; padding: 24px 20px; gap: 24px; }
.workbench > .column { gap: 8px; }

/* sample cards: the product's card look on a Gradio button */
button.sample-card {
  justify-content: flex-start; text-align: left;
  border: 1px solid var(--line) !important; background: var(--panel) !important; color: var(--ink) !important;
  border-radius: 8px !important; padding: 14px !important; margin: 0 !important;
  font-family: var(--mono) !important; font-weight: 500 !important; letter-spacing: .06em; min-height: 44px;
  cursor: pointer;
}
button.sample-card:hover, button.sample-card:focus-visible { border-color: var(--cyan) !important; }
.samples .blurb { margin: 0 0 8px; color: var(--dim); font-size: 13px; }

/* the grid: Gradio's file drop zone wearing the product's grid */
#grid, #grid .wrap, #grid .file-preview, #grid label { min-height: 220px; }
#grid {
  border: 1px dashed var(--line) !important; border-radius: 10px !important;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--panel) !important;
}
#grid .wrap { color: var(--dim); font-family: var(--mono); }
#grid .wrap .icon-wrap, #grid .wrap svg { color: var(--cyan); }
#grid.dragging, #grid .wrap.dragging, #grid:has(.dragging) {
  border-color: var(--mint) !important;
  box-shadow: 0 0 0 1px var(--mint), inset 0 0 24px rgba(124, 247, 196, 0.25);
}
#grid label > span, #grid .label-wrap { color: var(--dim); font-family: var(--mono); font-size: 13px; }

/* alt inputs: repo form + cancel */
.alt-inputs { margin-top: 14px; gap: 8px; align-items: stretch; }
.alt-inputs .repoinput textarea, .alt-inputs .repoinput input {
  background: var(--panel) !important; border: 1px solid var(--line) !important; color: var(--ink) !important;
  font-family: var(--mono) !important; font-size: 14px !important; border-radius: 6px !important; min-height: 44px;
}
.alt-inputs .repoinput textarea:focus { border-color: var(--cyan) !important; box-shadow: none !important; }
button.repobtn {
  background: var(--cyan) !important; color: #04222B !important; border: none !important;
  font-family: var(--mono) !important; font-weight: 500 !important; letter-spacing: .08em; border-radius: 6px !important; min-height: 44px;
}
button.repobtn:hover { filter: brightness(1.1); }
button.cancel {
  background: none !important; border: 1px solid var(--line) !important; color: var(--dim) !important;
  font-family: var(--mono) !important; border-radius: 6px !important; min-height: 44px;
}
button.cancel:hover { border-color: var(--red) !important; color: var(--red) !important; }

/* verdict stack */
.verdicts { max-width: 1080px; margin: 0 auto; padding: 0 20px 24px; }
.verdicts .vfail { color: var(--red); }

/* progress text ("recomputing digests…" / "fetching from the Hub…") in product colours */
.gradio-container .progress-text, .gradio-container .meta-text, .gradio-container .eta-bar { color: var(--dim) !important; font-family: var(--mono) !important; }

@media (max-width: 720px) {
  .workbench { padding: 16px 12px; }
  #grid, #grid .wrap { min-height: 160px; }
}