off-brand: custom tab bar, themed inputs/labels/tables, custom scrollbar, strip Gradio tells

app.py

@@ -699,6 +699,94 @@ table { border-color: rgba(244,163,0,0.25) !important; }
     border-top: 1px solid rgba(244,163,0,0.20);
     color: #b8a079; font-size: 0.8rem; text-align: center;
 }
+
+/* ============================================================
+   OFF-BRAND PASS: strip the remaining 'default Gradio' tells
+   ============================================================ */
+
+/* Custom tab bar -> bespoke segmented nav */
+.tabs > .tab-nav, .tab-nav {
+    border-bottom: 1px solid rgba(244,163,0,0.20) !important;
+    gap: 6px !important;
+    padding-bottom: 0 !important;
+}
+.tab-nav button {
+    background: transparent !important;
+    border: none !important;
+    color: #b9a079 !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-size: 0.82rem !important;
+    padding: 10px 16px !important;
+    border-radius: 10px 10px 0 0 !important;
+    transition: color 120ms ease, background 120ms ease;
+}
+.tab-nav button:hover { color: #ffd066 !important; background: rgba(244,163,0,0.06) !important; }
+.tab-nav button.selected {
+    color: #1a1410 !important;
+    background: linear-gradient(180deg,#ffc23d,#f4a300) !important;
+    border: none !important;
+}
+
+/* Component labels -> small amber field-tags instead of grey Gradio labels */
+.block label > span,
+span[data-testid="block-info"],
+.gr-box label span {
+    color: #d8b66a !important;
+    font-size: 0.72rem !important;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    font-weight: 600 !important;
+}
+
+/* Soften component chrome so it reads as one bespoke surface, not stacked Gradio boxes */
+.block, .gr-box, .form, .gr-form {
+    box-shadow: none !important;
+}
+.gradio-container .block {
+    backdrop-filter: blur(2px);
+}
+
+/* Inputs / dropdowns -> dark themed, not white Gradio defaults */
+input, textarea, select,
+.gr-input, .gr-text-input, .gr-dropdown,
+[data-testid="textbox"] textarea,
+[data-testid="textbox"] input {
+    background: rgba(20,15,10,0.6) !important;
+    color: #f4e4bc !important;
+    border: 1px solid rgba(244,163,0,0.22) !important;
+    border-radius: 10px !important;
+}
+
+/* Accordions -> themed headers */
+.label-wrap, .gr-accordion > .label-wrap {
+    color: #ffd066 !important;
+}
+
+/* Dataframe / table -> dark themed */
+.gr-dataframe table, table.dataframe {
+    background: rgba(20,15,10,0.4) !important;
+    color: #f4e4bc !important;
+}
+.gr-dataframe thead th, table.dataframe thead th {
+    background: rgba(244,163,0,0.12) !important;
+    color: #ffd066 !important;
+}
+
+/* Custom scrollbar (a small but distinct off-brand touch) */
+*::-webkit-scrollbar { width: 10px; height: 10px; }
+*::-webkit-scrollbar-track { background: rgba(20,15,10,0.4); }
+*::-webkit-scrollbar-thumb {
+    background: rgba(244,163,0,0.35); border-radius: 8px;
+    border: 2px solid rgba(20,15,10,0.4);
+}
+*::-webkit-scrollbar-thumb:hover { background: rgba(244,163,0,0.55); }
+
+/* Tone down the stock 'Built with Gradio' footer chrome so it doesn't clash */
+footer { opacity: 0.45 !important; }
+footer:hover { opacity: 0.8 !important; }
 """