Create verbatim.css

verbatim.css

@@ -0,0 +1,80 @@
+/* Verbatify — brand theme for Gradio (light) */
+/* Font: Manrope for a modern, clear SaaS look */
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
+
+:root{
+  --vb-bg: #F8FAFC;
+  --vb-card: #FFFFFF;
+  --vb-text: #0F172A;
+  --vb-muted: #475569;
+  --vb-primary: #7C3AED;
+  --vb-primary-2: #06B6D4;
+  --vb-accent: #2563EB;
+  --vb-positive: #10B981;
+  --vb-negative: #EF4444;
+  --vb-neutral: #94A3B8;
+  --vb-border: #E2E8F0;
+  --vb-radius: 14px;
+  --vb-shadow: 0 8px 20px rgba(2, 6, 23, .06);
+}
+
+html, body, .gradio-container{
+  background: var(--vb-bg) !important;
+  color: var(--vb-text);
+  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", sans-serif;
+}
+.gradio-container { max-width: 1120px !important; margin: 0 auto !important; }
+
+.vb-hero{
+  display:flex; align-items:center; gap:14px; padding:18px 20px; margin:8px 0 18px;
+  background: linear-gradient(90deg, rgba(124,58,237,.10), rgba(6,182,212,.10));
+  border:1px solid var(--vb-border); border-radius: var(--vb-radius);
+}
+.vb-hero img{ filter: drop-shadow(0 2px 10px rgba(124,58,237,.25)); }
+.vb-hero .vb-title{ font-size: 20px; font-weight:800; letter-spacing:.2px; }
+.vb-hero .vb-sub{ color: var(--vb-muted); font-size: 13px; margin-top: -4px; }
+
+.gr-markdown, .gr-box, .gr-panel, .gr-article{
+  background: var(--vb-card) !important;
+  border:1px solid var(--vb-border) !important;
+  border-radius: var(--vb-radius) !important;
+  box-shadow: var(--vb-shadow);
+}
+.gr-markdown h1, .gr-markdown h2, .gr-markdown h3 { color: var(--vb-text); }
+.gr-markdown h2 { font-size: 18px; margin-top: 10px; }
+
+button, .gr-button{
+  border-radius: var(--vb-radius) !important;
+  border: 0 !important;
+  box-shadow: var(--vb-shadow);
+  font-weight:700 !important;
+}
+button.primary, .gr-button-primary{
+  background: linear-gradient(90deg, var(--vb-primary), var(--vb-primary-2)) !important;
+  color: #fff !important;
+}
+button.primary:hover, .gr-button-primary:hover{ filter: brightness(1.06); transform: translateY(-1px); }
+button.secondary, .gr-button-secondary{
+  background: #fff !important; border:1px solid var(--vb-border) !important; color: var(--vb-text) !important;
+}
+
+input, textarea, select, .gr-textbox, .gr-textbox textarea{
+  border-radius: calc(var(--vb-radius) - 4px) !important;
+  border:1px solid var(--vb-border) !important;
+  background: #fff !important;
+}
+input[type="range"]::-webkit-slider-thumb { background: var(--vb-primary) !important; }
+input[type="checkbox"]:checked { accent-color: var(--vb-primary) !important; }
+
+[data-testid="file"] .file-preview, .gr-file{ border-radius: var(--vb-radius) !important; border:1px solid var(--vb-border) !important;}
+
+.js-plotly-plot .plotly .bg { fill: #fff !important; }
+.js-plotly-plot .plotly .xgrid, .js-plotly-plot .plotly .ygrid { stroke: #E2E8F0 !important; opacity: 1; }
+.js-plotly-plot .plotly .legend text{ font-weight:600; }
+
+.vb-chip{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; }
+.vb-chip.pos{ background: rgba(16,185,129,.12); color:#065F46; }
+.vb-chip.neu{ background: rgba(148,163,184,.16); color:#334155; }
+.vb-chip.neg{ background: rgba(239,68,68,.12); color:#7F1D1D; }
+
+.vb-footer{ color: var(--vb-muted); font-size: 12px; text-align:center; margin: 12px 0; }