Force explicit dark palette and text contrast across all cards

public_space_app.py

@@ -247,49 +247,49 @@ def _space_css() -> str:
       padding-bottom: 48px !important;
     }
     .hero-panel {
-      background: linear-gradient(135deg, #fff8ed 0%, #f5eee2 100%);
-      border: 1px solid #e6d8bf;
+      background: linear-gradient(135deg, #161c24 0%, #202733 100%);
+      border: 1px solid rgba(212, 162, 74, 0.34);
       border-radius: 24px;
       padding: 28px;
       margin: 6px 0 20px 0;
-      box-shadow: 0 10px 30px rgba(62, 46, 14, 0.08);
+      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
     }
     .hero-eyebrow {
       font-size: 0.82rem;
       font-weight: 700;
       letter-spacing: 0.08em;
       text-transform: uppercase;
-      color: #8a6220;
+      color: #d4a24a;
       margin-bottom: 8px;
     }
     .hero-title {
       font-size: 2.2rem;
       line-height: 1.1;
       font-weight: 800;
-      color: #1f2b2d;
+      color: #fff4e1;
       margin: 0 0 12px 0;
     }
     .hero-lede {
       font-size: 1.05rem;
       line-height: 1.6;
-      color: #334244;
+      color: #e2dacd;
       margin: 0 0 10px 0;
       max-width: 900px;
     }
     .hero-note {
       font-size: 0.98rem;
       line-height: 1.5;
-      color: #5f4e2a;
-      background: rgba(255,255,255,0.72);
-      border: 1px solid #eadcbf;
+      color: #eee4d5;
+      background: rgba(11, 14, 18, 0.45);
+      border: 1px solid rgba(212, 162, 74, 0.28);
       border-radius: 14px;
       padding: 12px 14px;
       margin-top: 14px;
     }
     .gradio-container .prose .hero-note strong {
-      color: #6b2d00 !important;
-      background: #fff1d7 !important;
-      border: 1px solid #e7c78d !important;
+      color: #ffd47a !important;
+      background: rgba(212, 162, 74, 0.16) !important;
+      border: 1px solid rgba(212, 162, 74, 0.42) !important;
       border-radius: 999px;
       padding: 3px 8px;
       margin-right: 6px;
@@ -307,42 +307,42 @@ def _space_css() -> str:
       margin: 10px 0 22px 0;
     }
     .stat-card, .story-card, .source-card, .glossary-card, .result-card {
-      background: #fffdf8;
-      border: 1px solid #e7dcc8;
+      background: #151b22;
+      border: 1px solid rgba(212, 162, 74, 0.22);
       border-radius: 18px;
       padding: 16px 18px;
-      box-shadow: 0 6px 18px rgba(40, 31, 9, 0.05);
+      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
     }
     .stat-label {
       font-size: 0.82rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.06em;
-      color: #8b6b2e;
+      color: #d4a24a;
       margin-bottom: 8px;
     }
     .stat-value {
       font-size: 1.9rem;
       font-weight: 800;
-      color: #1f2b2d;
+      color: #fff4e1;
       line-height: 1;
       margin-bottom: 6px;
     }
     .stat-help {
       font-size: 0.92rem;
-      color: #5b5b5b;
+      color: #d8cfbf;
       line-height: 1.45;
     }
     .story-title, .source-title, .glossary-title {
       font-size: 1rem;
       font-weight: 800;
-      color: #1f2b2d;
+      color: #fff4e1;
       margin-bottom: 6px;
     }
     .story-body, .source-body, .glossary-body {
       font-size: 0.95rem;
       line-height: 1.55;
-      color: #435153;
+      color: #ddd5c8;
     }
     .source-table {
       width: 100%;
@@ -351,18 +351,21 @@ def _space_css() -> str:
       font-size: 0.95rem;
     }
     .source-table th, .source-table td {
-      border-top: 1px solid #eadfcf;
+      border-top: 1px solid rgba(212, 162, 74, 0.16);
       padding: 12px 10px;
       text-align: left;
       vertical-align: top;
     }
     .source-table th {
-      color: #7a5b20;
+      color: #d4a24a;
       font-size: 0.82rem;
       text-transform: uppercase;
       letter-spacing: 0.06em;
       width: 32%;
     }
+    .source-table td {
+      color: #ddd5c8;
+    }
     .glossary-list {
       display: grid;
       gap: 10px;
@@ -370,11 +373,11 @@ def _space_css() -> str:
     }
     .glossary-item strong {
       display: block;
-      color: #1f2b2d;
+      color: #fff4e1;
       margin-bottom: 2px;
     }
     .section-kicker {
-      color: #8a6220;
+      color: #d4a24a;
       font-size: 0.84rem;
       font-weight: 700;
       letter-spacing: 0.06em;
@@ -396,7 +399,7 @@ def _space_css() -> str:
     .result-rank {
       font-size: 0.78rem;
       font-weight: 700;
-      color: #8b6b2e;
+      color: #d4a24a;
       text-transform: uppercase;
       letter-spacing: 0.06em;
       margin-bottom: 4px;
@@ -404,12 +407,12 @@ def _space_css() -> str:
     .result-title {
       font-size: 1.12rem;
       font-weight: 800;
-      color: #1f2b2d;
+      color: #fff4e1;
       line-height: 1.2;
       margin-bottom: 4px;
     }
     .result-subtitle {
-      color: #546365;
+      color: #d5cbbb;
       font-size: 0.93rem;
     }
     .metric-stack {
@@ -431,8 +434,9 @@ def _space_css() -> str:
       color: white;
     }
     .strength-pill {
-      background: #f3e4b9;
-      color: #5a470d;
+      background: rgba(212, 162, 74, 0.18);
+      color: #ffd47a;
+      border: 1px solid rgba(212, 162, 74, 0.32);
     }
     .chip-row {
       display: flex;
@@ -441,8 +445,8 @@ def _space_css() -> str:
       margin: 12px 0 10px 0;
     }
     .chip {
-      background: #f2ede2;
-      color: #4a4a4a;
+      background: rgba(255,255,255,0.08);
+      color: #ece3d5;
     }
     .meta-grid {
       display: grid;
@@ -450,11 +454,11 @@ def _space_css() -> str:
       gap: 10px;
       margin-top: 10px;
       font-size: 0.9rem;
-      color: #465558;
+      color: #d6cec2;
     }
     .meta-grid strong {
       display: block;
-      color: #1f2b2d;
+      color: #fff4e1;
       margin-bottom: 2px;
       font-size: 0.82rem;
       text-transform: uppercase;
@@ -463,14 +467,14 @@ def _space_css() -> str:
     .result-hint {
       margin-top: 12px;
       font-size: 0.88rem;
-      color: #7a5b20;
+      color: #d4a24a;
     }
     .panel-note {
-      background: #fffdf8;
-      border: 1px solid #e7dcc8;
+      background: #151b22;
+      border: 1px solid rgba(212, 162, 74, 0.22);
       border-radius: 18px;
       padding: 14px 16px;
-      color: #4b4b4b;
+      color: #ddd5c8;
       margin-bottom: 12px;
     }
     .gradio-container .prose,