Update style.css

style.css

@@ -1,11 +1,10 @@
 /* =========================================================
    CS1 GROUP 14 — JOB RISK ANALYZER
-   Dark AI-product aesthetic — Vercel × OpenAI Platform
+   Dark dashboard — works against HF's forced light page bg
    ========================================================= */
 
 @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:           #0a0a0a;
   --bg-1:         #111111;
@@ -13,25 +12,22 @@
   --bg-3:         #1c1c1c;
   --surface:      #131313;
   --surface-elev: #181818;
-  --border:       #262626;
+  --border:       #2a2a2a;
   --border-soft:  #1f1f1f;
-  --border-hi:    #333333;
+  --border-hi:    #383838;
 
   --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-glow:   rgba(52, 211, 153, 0.18);
   --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;
+  --purple:     #a78bfa;
 
   --radius:    8px;
   --radius-lg: 12px;
@@ -41,59 +37,65 @@
 }
 
 /* =========================================================
-   GLOBAL RESET — kill the ESCP branding entirely
+   FORCE DARK BACKGROUND ON THE WHOLE PAGE
+   This is the key fix — HF was leaving the body white
    ========================================================= */
 
+html, body,
 gradio-app,
 .gradio-app,
 .main,
 #app,
-[data-testid="app"] {
+[data-testid="app"],
+.gradio-container,
+.contain,
+main {
   background: var(--bg) !important;
+  background-color: var(--bg) !important;
+  color: var(--ink) !important;
+}
+
+/* Glow effects on top + bottom */
+gradio-app,
+.gradio-app,
+[data-testid="app"] {
   background-image:
-    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;
+    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(52, 211, 153, 0.10), transparent 60%),
+    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(96, 165, 250, 0.08), 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: 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;
 }
 
-/* Subtle grid texture overlay */
+/* Subtle grid texture */
 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);
+    linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);
   background-size: 64px 64px;
   pointer-events: none;
   z-index: 0;
 }
 
-/* --- Main container --- */
 .gradio-container {
   max-width: 1200px !important;
   width: 92vw !important;
   margin: 0 auto !important;
   padding-top: 56px !important;
   padding-bottom: 96px !important;
-  background: transparent !important;
   position: relative !important;
   z-index: 1 !important;
 }
@@ -106,7 +108,7 @@ body::before {
   text-align: left !important;
   margin-bottom: 56px !important;
   padding-bottom: 32px !important;
-  border-bottom: 1px solid var(--border-soft) !important;
+  border-bottom: 1px solid var(--border) !important;
   position: relative !important;
 }
 
@@ -115,7 +117,7 @@ body::before {
   display: block !important;
   font-family: var(--font-mono) !important;
   font-size: 11px !important;
-  color: var(--ink-mute) !important;
+  color: var(--accent) !important;
   letter-spacing: 0.05em !important;
   margin-bottom: 16px !important;
   text-transform: uppercase !important;
@@ -141,10 +143,9 @@ body::before {
   font-size: 0.95rem !important;
   font-weight: 400 !important;
   margin: 0 !important;
-  letter-spacing: -0.005em !important;
 }
 
-/* Status indicator dot in header */
+/* Pulsing status dot (top-right of header) */
 #escp_title::after {
   content: '' !important;
   position: absolute !important;
@@ -213,15 +214,15 @@ button[role="tab"]:hover {
 button[role="tab"][aria-selected="true"],
 button[role="tab"].selected,
 .svelte-tabs button.selected {
-  color: var(--ink) !important;
+  color: var(--accent) !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;
+  box-shadow: 0 0 0 1px var(--border-hi), 0 0 12px var(--accent-glow) !important;
   font-weight: 500 !important;
   border-bottom: none !important;
 }
 
 /* =========================================================
-   TAB CONTENT — the canvas
+   TAB CONTENT
    ========================================================= */
 
 .tabitem {
@@ -233,9 +234,7 @@ button[role="tab"].selected,
   position: relative !important;
 }
 
-.tabitem::before {
-  display: none !important;
-}
+.tabitem::before { display: none !important; }
 
 /* =========================================================
    BLOCKS / CARDS
@@ -244,15 +243,18 @@ button[role="tab"].selected,
 .gradio-container .gr-block,
 .gradio-container .gr-box,
 .gradio-container .gr-panel,
-.gradio-container .gr-group {
+.gradio-container .gr-group,
+.gradio-container .block,
+.gradio-container .form,
+.gradio-container .panel {
   background: var(--surface) !important;
   border: 1px solid var(--border) !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;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset !important;
 }
 
 /* =========================================================
-   FORM LABELS
+   LABELS
    ========================================================= */
 
 .gradio-container label,
@@ -267,7 +269,7 @@ button[role="tab"].selected,
 }
 
 /* =========================================================
-   INPUTS
+   INPUTS — make text VISIBLE
    ========================================================= */
 
 .gradio-container input,
@@ -280,8 +282,7 @@ button[role="tab"].selected,
   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;
+  caret-color: var(--accent) !important;
 }
 
 .gradio-container input:hover,
@@ -306,7 +307,7 @@ button[role="tab"].selected,
 
 textarea {
   font-family: var(--font-display) !important;
-  font-size: 0.85rem !important;
+  font-size: 0.9rem !important;
   line-height: 1.6 !important;
 }
 
@@ -317,25 +318,26 @@ textarea {
 .gradio-container button:not([role="tab"]) {
   font-family: var(--font-display) !important;
   font-weight: 500 !important;
-  padding: 10px 16px !important;
+  padding: 10px 18px !important;
   border-radius: var(--radius) !important;
-  font-size: 0.875rem !important;
+  font-size: 0.9rem !important;
   letter-spacing: -0.005em !important;
   transition: all 0.15s ease !important;
 }
 
 button.primary {
-  background: var(--ink) !important;
-  color: var(--bg) !important;
-  border: 1px solid var(--ink) !important;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
+  background: var(--accent) !important;
+  color: #062b1f !important;
+  border: 1px solid var(--accent) !important;
+  box-shadow: 0 0 0 1px var(--accent), 0 0 16px var(--accent-glow) !important;
+  font-weight: 600 !important;
 }
 
 button.primary:hover {
-  background: #ffffff !important;
-  border-color: #ffffff !important;
+  background: #5fe5b0 !important;
+  border-color: #5fe5b0 !important;
   transform: translateY(-1px) !important;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
+  box-shadow: 0 0 0 1px #5fe5b0, 0 0 24px var(--accent-glow) !important;
 }
 
 button.secondary {
@@ -350,7 +352,7 @@ button.secondary:hover {
 }
 
 /* =========================================================
-   MARKDOWN TYPOGRAPHY
+   MARKDOWN
    ========================================================= */
 
 .tabitem h1, .tabitem h2 {
@@ -372,11 +374,11 @@ button.secondary:hover {
   margin-top: 28px !important;
   margin-bottom: 12px !important;
   padding-bottom: 8px !important;
-  border-bottom: 1px solid var(--border-soft) !important;
+  border-bottom: 1px solid var(--border) !important;
 }
 
 .tabitem h4 {
-  color: var(--ink-soft) !important;
+  color: var(--accent) !important;
   font-family: var(--font-mono) !important;
   font-weight: 500 !important;
   font-size: 0.7rem !important;
@@ -386,18 +388,19 @@ button.secondary:hover {
   margin-bottom: 14px !important;
 }
 
-.tabitem p, .tabitem li {
+.tabitem p, .tabitem li,
+.gradio-container p, .gradio-container li {
   color: var(--ink-soft) !important;
   line-height: 1.65 !important;
   font-size: 0.92rem !important;
 }
 
-.tabitem strong {
+.tabitem strong, .gradio-container strong {
   color: var(--ink) !important;
   font-weight: 600 !important;
 }
 
-.tabitem code {
+.tabitem code, .gradio-container code {
   background: var(--bg-2) !important;
   color: var(--accent) !important;
   padding: 2px 6px !important;
@@ -422,11 +425,12 @@ table {
   font-size: 0.825rem !important;
   color: var(--ink) !important;
   font-family: var(--font-display) !important;
+  background: var(--surface) !important;
 }
 
 table thead th {
   background: var(--bg-1) !important;
-  color: var(--ink-soft) !important;
+  color: var(--accent) !important;
   font-family: var(--font-mono) !important;
   font-weight: 500 !important;
   text-transform: uppercase !important;
@@ -440,6 +444,7 @@ table tbody td {
   border-bottom: 1px solid var(--border-soft) !important;
   color: var(--ink-soft) !important;
   padding: 11px 14px !important;
+  background: var(--surface) !important;
 }
 
 table tbody tr:hover td {
@@ -451,7 +456,7 @@ table tbody tr:hover td {
    CHATBOT
    ========================================================= */
 
-.gr-chatbot {
+.gr-chatbot, .chatbot {
   min-height: 380px !important;
   background: var(--bg-1) !important;
   border: 1px solid var(--border) !important;
@@ -459,20 +464,24 @@ table tbody tr:hover td {
   padding: 8px !important;
 }
 
-.gr-chatbot .message {
+.gr-chatbot .message,
+.chatbot .message {
   border: 1px solid var(--border-soft) !important;
   font-size: 0.9rem !important;
   line-height: 1.6 !important;
+  color: var(--ink) !important;
 }
 
-.gr-chatbot .message.user {
+.gr-chatbot .message.user,
+.chatbot .message.user {
   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 {
+.gr-chatbot .message.bot,
+.chatbot .message.bot {
   background: var(--surface-elev) !important;
   color: var(--ink) !important;
   border-radius: 12px 12px 12px 4px !important;
@@ -480,7 +489,7 @@ table tbody tr:hover td {
 }
 
 /* =========================================================
-   EXAMPLES (chatbot pills)
+   EXAMPLE PILLS
    ========================================================= */
 
 .examples-row button {
@@ -493,18 +502,17 @@ table tbody tr:hover td {
   font-weight: 400 !important;
   text-transform: none !important;
   letter-spacing: -0.005em !important;
-  padding: 6px 12px !important;
-  transition: all 0.15s !important;
+  padding: 6px 14px !important;
 }
 
 .examples-row button:hover {
-  background: var(--bg-2) !important;
-  color: var(--ink) !important;
-  border-color: var(--border-hi) !important;
+  background: var(--accent-soft) !important;
+  color: var(--accent) !important;
+  border-color: var(--accent) !important;
 }
 
 /* =========================================================
-   PLOTLY
+   PLOTS
    ========================================================= */
 
 .js-plotly-plot {
@@ -521,7 +529,7 @@ table tbody tr:hover td {
 }
 
 /* =========================================================
-   NUMBER INPUT (Score display)
+   NUMBER INPUT (the big score)
    ========================================================= */
 
 [data-testid="number-input"] input,
@@ -529,9 +537,10 @@ table tbody tr:hover td {
   font-family: var(--font-mono) !important;
   font-size: 1.75rem !important;
   font-weight: 600 !important;
-  color: var(--ink) !important;
+  color: var(--accent) !important;
   background: var(--bg-1) !important;
   letter-spacing: -0.02em !important;
+  text-align: center !important;
 }
 
 /* =========================================================
@@ -547,12 +556,16 @@ header, header * {
   font-size: 0.75rem !important;
 }
 
+footer a {
+  color: var(--ink-mute) !important;
+}
+
 footer a:hover {
   color: var(--accent) !important;
 }
 
 /* =========================================================
-   FORCE LIGHT TEXT EVERYWHERE
+   CATCH-ALL: force readable text everywhere
    ========================================================= */
 
 .gradio-container,
@@ -579,27 +592,10 @@ footer a:hover {
   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
-   ========================================================= */
+*::-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 {
   background: var(--accent-glow);