diff --git a/web/static/app.css b/web/static/app.css
index fff1c3a..2d25e6c 100644
--- a/web/static/app.css
+++ b/web/static/app.css
@@ -456,14 +456,50 @@ body, .lead-text, .page, .card, .search-input, .input-hero, .textarea-hero,
   padding:12px 16px;   /* same gutter as other panels */
 }
 
+/* Dark mode: override your CSS variables and a few surfaces */
+body.dark-mode{
+  /* nav + inks */
+  --nav-bg:#0f172a;         /* slate-900 */
+  --nav-border:#334155;     /* slate-600 */
+  --nav-ink:#e5e7eb;        /* gray-200 */
+  --nav-ink-muted:#94a3b8;  /* slate-400 */
+  --nav-brand:#60a5fa;      /* blue-400 */
+  --nav-brand-hover:#3b82f6;/* blue-500 */
+
+  /* buttons */
+  --btn-bg:#111827;         /* gray-900 */
+  --btn-border:#374151;     /* gray-700 */
+  --btn-hover:#1f2937;      /* gray-800 */
+}
+
+/* Common surfaces/text when dark */
 body.dark-mode {
-  background-color: #0f172a; /* deep navy */
-  color: #e5e7eb; /* light gray text */
+  background:#0b1220;       /* page background */
+  color:#e5e7eb;
 }
-body.dark-mode .card {
-  background-color: #1e293b;
-  border-color: #334155;
+
+/* Cards and chips */
+body.dark-mode .card{
+  background:#111827;
+  border-color:#374151;
+  color:#e5e7eb;
 }
-body.dark-mode a {
-  color: #93c5fd; /* soft blue links */
+body.dark-mode .chip,
+body.dark-mode .chip-link{
+  background:#0b1220;
+  border-color:#374151;
+  color:#cbd5e1;
+}
+
+/* Links and buttons */
+body.dark-mode a{ color:#93c5fd; }
+body.dark-mode .nav-btn{ color:var(--nav-ink); }
+body.dark-mode .nav-btn:hover{ background:var(--btn-hover); }
+body.dark-mode .nav-btn.primary{ color:#0b1220; } /* primary stays readable */
+
+/* Dropdown/menu surfaces */
+body.dark-mode .user-menu,
+body.dark-mode .mobile-menu-inner{
+  background:#111827;
+  border-color:#374151;
 }
\ No newline at end of file