assets/style.css

:root {
  --bg: #080b11;
  --panel: #0d121b;
  --panel-2: #111925;
  --line: rgba(129, 159, 190, 0.24);
  --text: #e9f0f7;
  --muted: #91a2b5;
  --cyan: #5ad5d9;
  --blue: #5489ff;
  --green: #74d69c;
  --amber: #f2bd63;
}

body,
.gradio-container {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.gradio-container {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 22px !important;
  --body-background-fill: var(--bg);
  --body-text-color: var(--text);
  --body-text-color-subdued: var(--muted);
  --background-fill-primary: var(--panel);
  --background-fill-secondary: var(--panel-2);
  --block-background-fill: var(--panel);
  --block-border-color: var(--line);
  --input-background-fill: #0a1018;
  --input-border-color: rgba(129, 159, 190, 0.34);
  --button-primary-background-fill: var(--blue);
  --button-primary-background-fill-hover: #6c9bff;
}

.forge-hero {
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 78% 12%, rgba(84, 137, 255, 0.18), transparent 28%),
    linear-gradient(135deg, #0e1520, #090d14);
  padding: 30px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.32);
}

.hero-kicker,
.panel-title {
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.forge-hero h1 {
  color: var(--text);
  font-size: clamp(2.5rem, 6vw, 4.8rem);
  letter-spacing: -0.06em;
  line-height: 0.94;
  margin: 12px 0;
}

.forge-hero p {
  color: #c3d0dd;
  font-size: 1.08rem;
  line-height: 1.55;
  margin: 0;
  max-width: 760px;
}

.forge-hero .hero-tagline {
  color: var(--text);
  font-size: 1.24rem;
  font-weight: 750;
  margin-bottom: 5px;
}

.forge-hero .hero-description {
  color: #aab9c8;
  font-size: 0.98rem;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.hero-badges span {
  border: 1px solid rgba(90, 213, 217, 0.25);
  border-radius: 999px;
  background: rgba(90, 213, 217, 0.06);
  color: #bdeef0;
  padding: 6px 10px;
  font-size: 0.8rem;
}

.pipeline-strip {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(13, 18, 27, 0.92);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding: 10px 12px;
  scrollbar-width: thin;
}

.pipeline-strip span {
  border: 1px solid rgba(90, 213, 217, 0.2);
  border-radius: 999px;
  background: rgba(90, 213, 217, 0.055);
  color: #c8f1f2;
  flex: 0 0 auto;
  font-size: 0.74rem;
  font-weight: 750;
  padding: 6px 9px;
}

.pipeline-strip b {
  color: var(--blue);
  font-size: 0.78rem;
}

.forge-layout {
  display: grid !important;
  grid-template-columns: minmax(420px, 0.88fr) minmax(520px, 1.12fr);
  align-items: start;
  gap: 18px;
  margin-top: 18px;
}

.config-panel,
.output-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(17, 25, 37, 0.98), rgba(10, 15, 23, 0.98));
  min-width: 0;
  padding: 16px;
}

.output-panel {
  position: sticky;
  top: 14px;
}

.panel-title {
  margin: 2px 0 12px;
}

.project-helper {
  border-left: 2px solid var(--cyan);
  color: #aec0d1;
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 4px 0 10px;
  padding-left: 10px;
}

.mode-toggle {
  border: 1px solid rgba(90, 213, 217, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(8, 13, 21, 0.55) !important;
}

.mode-toggle label,
.mode-toggle .wrap,
.mode-toggle .form,
.mode-toggle [role="radiogroup"] {
  background: transparent !important;
}

.mode-toggle label:has(input[type="radio"]) {
  border: 1px solid rgba(129, 159, 190, 0.34) !important;
  border-radius: 8px !important;
  background: #101925 !important;
  color: #c6d4e2 !important;
  padding: 8px 12px !important;
}

.mode-toggle label:has(input[type="radio"]) span {
  color: #c6d4e2 !important;
}

.mode-toggle label:has(input[type="radio"]:checked) {
  border-color: rgba(90, 213, 217, 0.72) !important;
  background: linear-gradient(135deg, rgba(42, 111, 151, 0.78), rgba(53, 73, 142, 0.84)) !important;
  box-shadow: inset 0 0 0 1px rgba(90, 213, 217, 0.14) !important;
}

.mode-toggle label:has(input[type="radio"]:checked) span {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.mode-toggle input[type="radio"] {
  accent-color: var(--cyan) !important;
  background: #08111b !important;
  border-color: rgba(90, 213, 217, 0.52) !important;
}

.config-panel label:has(input[type="checkbox"]) {
  border: 1px solid rgba(129, 159, 190, 0.3) !important;
  border-radius: 8px !important;
  background: #101925 !important;
  color: #c6d4e2 !important;
}

.config-panel label:has(input[type="checkbox"]) span {
  color: #c6d4e2 !important;
}

.config-panel label:has(input[type="checkbox"]:checked) {
  border-color: rgba(90, 213, 217, 0.62) !important;
  background: rgba(42, 111, 151, 0.46) !important;
}

.config-panel label:has(input[type="checkbox"]:checked) span {
  color: #ffffff !important;
  font-weight: 750 !important;
}

.config-panel input[type="checkbox"] {
  accent-color: var(--cyan) !important;
  background: #08111b !important;
  border-color: rgba(90, 213, 217, 0.52) !important;
}

.gradio-container .block,
.gradio-container .form,
.gradio-container .wrap,
.gradio-container .container,
.gradio-container details,
.gradio-container button[aria-expanded] {
  border-color: var(--line) !important;
  background: rgba(13, 18, 27, 0.9) !important;
  color: var(--text) !important;
}

.gradio-container label,
.gradio-container span,
.gradio-container .prose,
.gradio-container .prose * {
  color: var(--text) !important;
}

.gradio-container input,
.gradio-container textarea,
.gradio-container select,
.gradio-container [role="listbox"],
.gradio-container [role="combobox"] {
  border-color: rgba(129, 159, 190, 0.34) !important;
  background: #091019 !important;
  color: var(--text) !important;
}

.gradio-container input:focus,
.gradio-container textarea:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 2px rgba(90, 213, 217, 0.13) !important;
}

.gradio-container button.primary {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--blue), #6764e8) !important;
  color: white !important;
  font-weight: 800 !important;
}

.metrics-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.metric-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 13, 21, 0.82);
  padding: 10px;
}

.metric-card span {
  color: var(--muted) !important;
  display: block;
  font-size: 0.72rem;
  line-height: 1.2;
  min-height: 28px;
}

.metric-card strong {
  color: var(--text);
  display: block;
  font-size: 1.45rem;
  margin: 4px 0 7px;
}

.metric-card small {
  color: var(--muted);
  display: block;
  font-size: 0.64rem;
  margin-top: 5px;
  text-transform: uppercase;
}

.metric-pending strong {
  color: var(--muted);
}

.metric-track {
  border-radius: 999px;
  background: #182231;
  height: 4px;
  overflow: hidden;
}

.metric-track i {
  background: linear-gradient(90deg, var(--cyan), var(--green));
  display: block;
  height: 100%;
}

.output-panel textarea {
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
}

.output-panel table code {
  border: 0 !important;
  background: transparent !important;
  color: #bdeef0 !important;
  padding: 0 !important;
}

.output-panel .prose code {
  border: 1px solid rgba(90, 213, 217, 0.2) !important;
  border-radius: 4px !important;
  background: #101925 !important;
  color: #bdeef0 !important;
  padding: 1px 4px !important;
}

.output-panel table th,
.output-panel table td {
  border-color: rgba(129, 159, 190, 0.34) !important;
  background: #0d141f !important;
  color: var(--text) !important;
}

.gradio-container footer {
  display: none !important;
}

@media (max-width: 980px) {
  .forge-layout {
    grid-template-columns: 1fr;
  }

  .output-panel {
    position: static;
  }
}

@media (max-width: 620px) {
  .gradio-container {
    padding: 12px !important;
  }

  .forge-hero {
    padding: 20px;
  }

  .metrics-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}