| :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)); |
| } |
| } |
|
|
