Update style.css

style.css

@@ -1,253 +1,301 @@
 /* =========================================================
-   MINIMAL PRO — CS1 Group 14
-   White + Charcoal + Indigo accent, animated gradient borders
+   CS1 GROUP 14 — JOB RISK ANALYZER
+   Dark AI-product aesthetic — Vercel × OpenAI Platform
    ========================================================= */
 
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');
+
 /* --- Color tokens --- */
 :root {
-  --bg: #fafafa;
-  --surface: #ffffff;
-  --ink: #0f172a;
-  --ink-soft: #475569;
-  --ink-mute: #94a3b8;
-  --border: #e2e8f0;
-  --accent: #4f46e5;
-  --accent-soft: #eef2ff;
-  --accent-2: #06b6d4;
-  --danger: #dc2626;
-  --warn: #ea580c;
-  --ok: #059669;
-  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
-  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
-  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
-  --radius: 14px;
-  --radius-lg: 20px;
-}
-
-/* --- Background: clean off-white with ESCP imagery faded out --- */
+  --bg:           #0a0a0a;
+  --bg-1:         #111111;
+  --bg-2:         #161616;
+  --bg-3:         #1c1c1c;
+  --surface:      #131313;
+  --surface-elev: #181818;
+  --border:       #262626;
+  --border-soft:  #1f1f1f;
+  --border-hi:    #333333;
+
+  --ink:        #ededed;
+  --ink-soft:   #a1a1a1;
+  --ink-mute:   #666666;
+  --ink-faint:  #444444;
+
+  --accent:        #34d399;
+  --accent-glow:   rgba(52, 211, 153, 0.15);
+  --accent-line:   rgba(52, 211, 153, 0.4);
+  --accent-soft:   rgba(52, 211, 153, 0.08);
+
+  --warn:       #f59e0b;
+  --warn-glow:  rgba(245, 158, 11, 0.12);
+  --danger:     #ef4444;
+  --danger-glow: rgba(239, 68, 68, 0.15);
+  --info:       #60a5fa;
+
+  --radius:    8px;
+  --radius-lg: 12px;
+
+  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'Geist Mono', 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+}
+
+/* =========================================================
+   GLOBAL RESET — kill the ESCP branding entirely
+   ========================================================= */
+
 gradio-app,
 .gradio-app,
 .main,
 #app,
 [data-testid="app"] {
-  background-color: var(--bg) !important;
+  background: var(--bg) !important;
   background-image:
-    linear-gradient(rgba(250,250,250,0.92), rgba(250,250,250,0.92)),
-    url('https://huggingface.co/spaces/atascioglu/SE21AppTemplate/resolve/main/background_top.png'),
-    url('https://huggingface.co/spaces/atascioglu/SE21AppTemplate/resolve/main/background_mid.png'),
-    url('https://huggingface.co/spaces/atascioglu/SE21AppTemplate/resolve/main/background_bottom.png') !important;
-  background-position:
-    center,
-    top center,
-    0 913px,
-    bottom center !important;
-  background-repeat:
-    no-repeat,
-    no-repeat,
-    repeat-y,
-    no-repeat !important;
-  background-size:
-    cover,
-    100% auto,
-    100% auto,
-    100% auto !important;
-  background-attachment: fixed, scroll, scroll, scroll !important;
+    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(52, 211, 153, 0.06), transparent 60%),
+    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(96, 165, 250, 0.04), transparent 60%) !important;
+  background-attachment: fixed !important;
+  background-repeat: no-repeat !important;
+  background-size: 100% 100%, 100% 100% !important;
+  background-position: center top, center bottom !important;
   min-height: 100vh !important;
 }
 
 html, body {
-  background-color: var(--bg) !important;
+  background: var(--bg) !important;
+  color: var(--ink) !important;
   margin: 0 !important;
   padding: 0 !important;
+  font-family: var(--font-display) !important;
+  font-feature-settings: 'cv11', 'ss01', 'ss03' !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  letter-spacing: -0.011em !important;
   min-height: 100vh !important;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
-  color: var(--ink) !important;
+}
+
+/* Subtle grid texture overlay */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image:
+    linear-gradient(to right, rgba(255,255,255,0.015) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255,255,255,0.015) 1px, transparent 1px);
+  background-size: 64px 64px;
+  pointer-events: none;
+  z-index: 0;
 }
 
 /* --- Main container --- */
 .gradio-container {
-  max-width: 1280px !important;
+  max-width: 1200px !important;
   width: 92vw !important;
   margin: 0 auto !important;
-  padding-top: 60px !important;
-  padding-bottom: 80px !important;
+  padding-top: 56px !important;
+  padding-bottom: 96px !important;
   background: transparent !important;
+  position: relative !important;
+  z-index: 1 !important;
 }
 
-/* --- Title block --- */
+/* =========================================================
+   HEADER
+   ========================================================= */
+
 #escp_title {
-  text-align: center !important;
-  margin-bottom: 48px !important;
+  text-align: left !important;
+  margin-bottom: 56px !important;
+  padding-bottom: 32px !important;
+  border-bottom: 1px solid var(--border-soft) !important;
+  position: relative !important;
+}
+
+#escp_title::before {
+  content: 'CS1.GROUP_14 / v1.2.0' !important;
+  display: block !important;
+  font-family: var(--font-mono) !important;
+  font-size: 11px !important;
+  color: var(--ink-mute) !important;
+  letter-spacing: 0.05em !important;
+  margin-bottom: 16px !important;
+  text-transform: uppercase !important;
 }
 
 #escp_title h1 {
   color: var(--ink) !important;
-  font-size: 3.5rem !important;
-  font-weight: 800 !important;
-  letter-spacing: -0.04em !important;
-  text-align: center !important;
+  font-family: var(--font-display) !important;
+  font-size: 2.5rem !important;
+  font-weight: 600 !important;
+  letter-spacing: -0.035em !important;
+  text-align: left !important;
   margin: 0 0 12px 0 !important;
-  background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%) !important;
-  -webkit-background-clip: text !important;
-  background-clip: text !important;
-  -webkit-text-fill-color: transparent !important;
+  background: none !important;
+  -webkit-text-fill-color: var(--ink) !important;
+  line-height: 1.1 !important;
 }
 
 #escp_title p, #escp_title em {
   color: var(--ink-soft) !important;
-  text-align: center !important;
+  text-align: left !important;
   font-style: normal !important;
-  font-size: 1.05rem !important;
-  font-weight: 500 !important;
+  font-size: 0.95rem !important;
+  font-weight: 400 !important;
+  margin: 0 !important;
+  letter-spacing: -0.005em !important;
 }
 
-/* =========================================================
-   ANIMATED GRADIENT BORDER — used on tab content + KPI grid
-   ========================================================= */
-@keyframes gradient-rotate {
-  0%   { background-position: 0% 50%; }
-  50%  { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
+/* Status indicator dot in header */
+#escp_title::after {
+  content: '' !important;
+  position: absolute !important;
+  top: 22px !important;
+  right: 0 !important;
+  width: 8px !important;
+  height: 8px !important;
+  border-radius: 50% !important;
+  background: var(--accent) !important;
+  box-shadow: 0 0 0 4px var(--accent-glow), 0 0 12px var(--accent) !important;
+  animation: pulse-dot 2s ease-in-out infinite !important;
 }
 
-@keyframes gradient-rotate-slow {
-  0%   { background-position: 0% 50%; }
-  100% { background-position: 200% 50%; }
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
 }
 
-/* --- Tab bar --- */
+/* =========================================================
+   TABS — segmented control
+   ========================================================= */
+
 .tabs > .tab-nav,
 .tab-nav,
 div[role="tablist"],
 .svelte-tabs > .tab-nav {
-  background: transparent !important;
-  border: none !important;
-  padding: 0 !important;
-  margin-bottom: 24px !important;
-  display: flex !important;
-  gap: 4px !important;
-  border-bottom: 1px solid var(--border) !important;
-  border-radius: 0 !important;
+  background: var(--bg-1) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 10px !important;
+  padding: 4px !important;
+  margin-bottom: 32px !important;
+  display: inline-flex !important;
+  gap: 2px !important;
+  width: auto !important;
+  max-width: fit-content !important;
 }
 
-/* --- Tab buttons (unselected) --- */
 .tabs > .tab-nav button,
 .tab-nav button,
 div[role="tablist"] button,
 button[role="tab"],
 .svelte-tabs button {
   color: var(--ink-soft) !important;
+  font-family: var(--font-display) !important;
   font-weight: 500 !important;
-  font-size: 0.95rem !important;
+  font-size: 0.875rem !important;
   border: none !important;
   background: transparent !important;
-  padding: 14px 20px !important;
-  border-radius: 0 !important;
-  border-bottom: 2px solid transparent !important;
-  transition: color 0.2s, border-color 0.2s !important;
+  padding: 8px 16px !important;
+  border-radius: 6px !important;
+  border-bottom: none !important;
+  transition: color 0.15s, background 0.15s !important;
   opacity: 1 !important;
-  margin-bottom: -1px !important;
+  letter-spacing: -0.005em !important;
 }
 
 .tabs > .tab-nav button:hover,
 .tab-nav button:hover,
 button[role="tab"]:hover {
   color: var(--ink) !important;
+  background: var(--bg-2) !important;
 }
 
-/* --- Selected tab --- */
 .tabs > .tab-nav button.selected,
 .tab-nav button.selected,
 button[role="tab"][aria-selected="true"],
 button[role="tab"].selected,
 .svelte-tabs button.selected {
-  color: var(--accent) !important;
-  background: transparent !important;
-  border-bottom: 2px solid var(--accent) !important;
-  font-weight: 600 !important;
+  color: var(--ink) !important;
+  background: var(--surface-elev) !important;
+  box-shadow: 0 0 0 1px var(--border-hi), 0 1px 2px rgba(0,0,0,0.4) !important;
+  font-weight: 500 !important;
+  border-bottom: none !important;
 }
 
-/* --- Tab content area with animated border --- */
+/* =========================================================
+   TAB CONTENT — the canvas
+   ========================================================= */
+
 .tabitem {
+  background: transparent !important;
+  border-radius: 0 !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+  border: none !important;
   position: relative !important;
-  background: var(--surface) !important;
-  border-radius: var(--radius-lg) !important;
-  padding: 32px !important;
-  box-shadow: var(--shadow-md) !important;
-  border: 1px solid var(--border) !important;
 }
 
 .tabitem::before {
-  content: '' !important;
-  position: absolute !important;
-  inset: -2px !important;
-  border-radius: var(--radius-lg) !important;
-  padding: 2px !important;
-  background: linear-gradient(
-    115deg,
-    transparent 0%,
-    transparent 35%,
-    var(--accent) 50%,
-    var(--accent-2) 60%,
-    transparent 75%,
-    transparent 100%
-  ) !important;
-  background-size: 300% 100% !important;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-  -webkit-mask-composite: xor !important;
-  mask-composite: exclude !important;
-  animation: gradient-rotate-slow 8s linear infinite !important;
-  pointer-events: none !important;
-  z-index: 0 !important;
-}
-
-/* --- All elements inside tabitem need to render above the ::before --- */
-.tabitem > * {
-  position: relative !important;
-  z-index: 1 !important;
+  display: none !important;
 }
 
-/* --- Inner cards / blocks --- */
+/* =========================================================
+   BLOCKS / CARDS
+   ========================================================= */
+
 .gradio-container .gr-block,
 .gradio-container .gr-box,
 .gradio-container .gr-panel,
 .gradio-container .gr-group {
   background: var(--surface) !important;
   border: 1px solid var(--border) !important;
-  border-radius: var(--radius) !important;
-  box-shadow: none !important;
+  border-radius: var(--radius-lg) !important;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 0 0 1px rgba(0,0,0,0.4) !important;
 }
 
-/* --- Form labels --- */
+/* =========================================================
+   FORM LABELS
+   ========================================================= */
+
 .gradio-container label,
 .gradio-container .gr-label,
 .gradio-container span[data-testid="block-info"] {
-  color: var(--ink) !important;
-  font-weight: 600 !important;
-  font-size: 0.85rem !important;
+  color: var(--ink-soft) !important;
+  font-family: var(--font-mono) !important;
+  font-weight: 500 !important;
+  font-size: 0.7rem !important;
   text-transform: uppercase !important;
-  letter-spacing: 0.04em !important;
+  letter-spacing: 0.08em !important;
 }
 
-/* --- Inputs --- */
+/* =========================================================
+   INPUTS
+   ========================================================= */
+
 .gradio-container input,
 .gradio-container textarea,
 .gradio-container select {
-  background: var(--surface) !important;
+  background: var(--bg-1) !important;
   border: 1px solid var(--border) !important;
-  border-radius: 10px !important;
+  border-radius: var(--radius) !important;
   color: var(--ink) !important;
-  font-size: 0.95rem !important;
-  padding: 12px 14px !important;
-  transition: border-color 0.15s, box-shadow 0.15s !important;
+  font-family: var(--font-display) !important;
+  font-size: 0.9rem !important;
+  padding: 10px 14px !important;
+  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
+  letter-spacing: -0.005em !important;
+}
+
+.gradio-container input:hover,
+.gradio-container textarea:hover {
+  background: var(--bg-2) !important;
+  border-color: var(--border-hi) !important;
 }
 
 .gradio-container input:focus,
 .gradio-container textarea:focus,
 .gradio-container select:focus {
   border-color: var(--accent) !important;
-  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
+  background: var(--bg-1) !important;
+  box-shadow: 0 0 0 3px var(--accent-glow) !important;
   outline: none !important;
 }
 
@@ -256,203 +304,304 @@ button[role="tab"].selected,
   color: var(--ink-mute) !important;
 }
 
-/* --- Buttons --- */
+textarea {
+  font-family: var(--font-display) !important;
+  font-size: 0.85rem !important;
+  line-height: 1.6 !important;
+}
+
+/* =========================================================
+   BUTTONS
+   ========================================================= */
+
 .gradio-container button:not([role="tab"]) {
-  font-weight: 600 !important;
-  padding: 12px 22px !important;
-  border-radius: 10px !important;
-  font-size: 0.95rem !important;
-  letter-spacing: -0.01em !important;
-  transition: transform 0.1s, box-shadow 0.15s, background 0.15s !important;
+  font-family: var(--font-display) !important;
+  font-weight: 500 !important;
+  padding: 10px 16px !important;
+  border-radius: var(--radius) !important;
+  font-size: 0.875rem !important;
+  letter-spacing: -0.005em !important;
+  transition: all 0.15s ease !important;
 }
 
 button.primary {
   background: var(--ink) !important;
-  color: #ffffff !important;
+  color: var(--bg) !important;
   border: 1px solid var(--ink) !important;
-  box-shadow: var(--shadow-sm) !important;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
 }
 
 button.primary:hover {
-  background: var(--accent) !important;
-  border-color: var(--accent) !important;
+  background: #ffffff !important;
+  border-color: #ffffff !important;
   transform: translateY(-1px) !important;
-  box-shadow: var(--shadow-md) !important;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
 }
 
 button.secondary {
-  background: var(--surface) !important;
+  background: var(--surface-elev) !important;
   color: var(--ink) !important;
   border: 1px solid var(--border) !important;
 }
 
 button.secondary:hover {
-  background: var(--accent-soft) !important;
-  border-color: var(--accent) !important;
-  color: var(--accent) !important;
+  background: var(--bg-3) !important;
+  border-color: var(--border-hi) !important;
 }
 
-/* --- Markdown headings --- */
+/* =========================================================
+   MARKDOWN TYPOGRAPHY
+   ========================================================= */
+
 .tabitem h1, .tabitem h2 {
   color: var(--ink) !important;
-  font-weight: 700 !important;
-  letter-spacing: -0.02em !important;
+  font-weight: 600 !important;
+  letter-spacing: -0.025em !important;
+}
+
+.tabitem h2 {
+  font-size: 1.5rem !important;
+  margin-top: 0 !important;
 }
 
 .tabitem h3 {
   color: var(--ink) !important;
-  font-weight: 700 !important;
-  font-size: 1.15rem !important;
-  letter-spacing: -0.01em !important;
-  margin-top: 24px !important;
+  font-weight: 500 !important;
+  font-size: 0.95rem !important;
+  letter-spacing: -0.005em !important;
+  margin-top: 28px !important;
+  margin-bottom: 12px !important;
+  padding-bottom: 8px !important;
+  border-bottom: 1px solid var(--border-soft) !important;
 }
 
 .tabitem h4 {
   color: var(--ink-soft) !important;
-  font-weight: 600 !important;
-  font-size: 0.95rem !important;
+  font-family: var(--font-mono) !important;
+  font-weight: 500 !important;
+  font-size: 0.7rem !important;
   text-transform: uppercase !important;
-  letter-spacing: 0.05em !important;
-  margin-top: 20px !important;
-  margin-bottom: 12px !important;
+  letter-spacing: 0.08em !important;
+  margin-top: 24px !important;
+  margin-bottom: 14px !important;
 }
 
 .tabitem p, .tabitem li {
   color: var(--ink-soft) !important;
-  line-height: 1.6 !important;
+  line-height: 1.65 !important;
+  font-size: 0.92rem !important;
 }
 
 .tabitem strong {
   color: var(--ink) !important;
-  font-weight: 700 !important;
+  font-weight: 600 !important;
 }
 
 .tabitem code {
-  background: var(--accent-soft) !important;
+  background: var(--bg-2) !important;
   color: var(--accent) !important;
   padding: 2px 6px !important;
   border-radius: 4px !important;
-  font-size: 0.9em !important;
-  font-weight: 600 !important;
+  font-size: 0.85em !important;
+  font-family: var(--font-mono) !important;
+  border: 1px solid var(--border-soft) !important;
 }
 
-/* --- Dataframes --- */
+/* =========================================================
+   DATAFRAMES
+   ========================================================= */
+
 [data-testid="dataframe"] {
   background: var(--surface) !important;
   border: 1px solid var(--border) !important;
-  border-radius: var(--radius) !important;
+  border-radius: var(--radius-lg) !important;
   overflow: hidden !important;
 }
 
 table {
-  font-size: 0.85rem !important;
+  font-size: 0.825rem !important;
   color: var(--ink) !important;
+  font-family: var(--font-display) !important;
 }
 
 table thead th {
-  background: var(--bg) !important;
-  color: var(--ink) !important;
-  font-weight: 600 !important;
+  background: var(--bg-1) !important;
+  color: var(--ink-soft) !important;
+  font-family: var(--font-mono) !important;
+  font-weight: 500 !important;
   text-transform: uppercase !important;
-  font-size: 0.75rem !important;
-  letter-spacing: 0.04em !important;
+  font-size: 0.7rem !important;
+  letter-spacing: 0.08em !important;
   border-bottom: 1px solid var(--border) !important;
+  padding: 12px 14px !important;
 }
 
 table tbody td {
-  border-bottom: 1px solid var(--border) !important;
+  border-bottom: 1px solid var(--border-soft) !important;
   color: var(--ink-soft) !important;
+  padding: 11px 14px !important;
 }
 
 table tbody tr:hover td {
-  background: var(--accent-soft) !important;
+  background: var(--bg-1) !important;
   color: var(--ink) !important;
 }
 
-/* --- Chatbot --- */
+/* =========================================================
+   CHATBOT
+   ========================================================= */
+
 .gr-chatbot {
   min-height: 380px !important;
-  background: var(--surface) !important;
+  background: var(--bg-1) !important;
   border: 1px solid var(--border) !important;
-  border-radius: var(--radius) !important;
+  border-radius: var(--radius-lg) !important;
+  padding: 8px !important;
+}
+
+.gr-chatbot .message {
+  border: 1px solid var(--border-soft) !important;
+  font-size: 0.9rem !important;
+  line-height: 1.6 !important;
 }
 
 .gr-chatbot .message.user {
-  background: var(--ink) !important;
-  color: #ffffff !important;
-  border-radius: 14px 14px 4px 14px !important;
+  background: var(--bg-2) !important;
+  color: var(--ink) !important;
+  border-radius: 12px 12px 4px 12px !important;
+  border-color: var(--border) !important;
 }
 
 .gr-chatbot .message.bot {
-  background: var(--accent-soft) !important;
+  background: var(--surface-elev) !important;
   color: var(--ink) !important;
-  border-radius: 14px 14px 14px 4px !important;
+  border-radius: 12px 12px 12px 4px !important;
+  border-left: 2px solid var(--accent) !important;
 }
 
-/* --- Examples row (chatbot suggestions) --- */
+/* =========================================================
+   EXAMPLES (chatbot pills)
+   ========================================================= */
+
 .examples-row button {
-  background: var(--surface) !important;
+  background: var(--bg-1) !important;
   color: var(--ink-soft) !important;
   border: 1px solid var(--border) !important;
   border-radius: 999px !important;
-  font-size: 0.85rem !important;
-  font-weight: 500 !important;
+  font-family: var(--font-display) !important;
+  font-size: 0.8rem !important;
+  font-weight: 400 !important;
   text-transform: none !important;
-  letter-spacing: 0 !important;
-  padding: 8px 14px !important;
+  letter-spacing: -0.005em !important;
+  padding: 6px 12px !important;
+  transition: all 0.15s !important;
 }
 
 .examples-row button:hover {
-  background: var(--accent-soft) !important;
-  color: var(--accent) !important;
-  border-color: var(--accent) !important;
+  background: var(--bg-2) !important;
+  color: var(--ink) !important;
+  border-color: var(--border-hi) !important;
 }
 
-/* --- Plotly charts --- */
+/* =========================================================
+   PLOTLY
+   ========================================================= */
+
 .js-plotly-plot {
-  border-radius: var(--radius) !important;
+  border-radius: var(--radius-lg) !important;
   overflow: hidden !important;
+  background: var(--surface) !important;
+  border: 1px solid var(--border) !important;
+}
+
+.gradio-container .gr-plot {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
 }
 
-/* --- Number / score displays --- */
+/* =========================================================
+   NUMBER INPUT (Score display)
+   ========================================================= */
+
 [data-testid="number-input"] input,
 .gradio-container [type="number"] {
-  font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace !important;
-  font-size: 1.5rem !important;
-  font-weight: 700 !important;
+  font-family: var(--font-mono) !important;
+  font-size: 1.75rem !important;
+  font-weight: 600 !important;
   color: var(--ink) !important;
+  background: var(--bg-1) !important;
+  letter-spacing: -0.02em !important;
 }
 
-/* --- Markdown response (analyze result) --- */
-.gradio-container .prose,
-.gradio-container .markdown,
-.gradio-container .gr-markdown {
-  color: var(--ink) !important;
-}
+/* =========================================================
+   FOOTER / GRADIO CHROME
+   ========================================================= */
 
-/* --- Gradio default footer styling cleanup --- */
-header, header *,
-footer, footer * {
+footer, footer *,
+header, header * {
   background: transparent !important;
   box-shadow: none !important;
   color: var(--ink-mute) !important;
+  font-family: var(--font-mono) !important;
+  font-size: 0.75rem !important;
 }
 
 footer a:hover {
   color: var(--accent) !important;
 }
 
-/* --- Force readable text everywhere (dark-mode override safety net) --- */
+/* =========================================================
+   FORCE LIGHT TEXT EVERYWHERE
+   ========================================================= */
+
 .gradio-container,
 .gradio-container * {
-  color-scheme: light !important;
+  color-scheme: dark !important;
 }
 
-.gradio-container input,
-.gradio-container textarea,
-.gradio-container select,
-.gradio-container [data-testid="textbox"] textarea {
+.gradio-container .prose,
+.gradio-container .markdown,
+.gradio-container .gr-markdown {
   color: var(--ink) !important;
-  background: var(--surface) !important;
-  caret-color: var(--ink) !important;
+}
+
+.gradio-container .prose * {
+  color: inherit !important;
+}
+
+/* =========================================================
+   SCROLLBARS
+   ========================================================= */
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-hi) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hi);
+}
+
+/* =========================================================
+   SELECTION
+   ========================================================= */
+
+::selection {
+  background: var(--accent-glow);
+  color: var(--ink);
 }