diff --git a/client/src/styles/collections.css b/client/src/styles/collections.css
index 2c171e73b..017b5ae37 100644
--- a/client/src/styles/collections.css
+++ b/client/src/styles/collections.css
@@ -40,7 +40,7 @@
 }
 .trek-dash .col-rail-label .badge {
   margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
-  display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 10px; letter-spacing: 0;
+  display: grid; place-items: center; background: var(--accent); color: var(--accent-text); font-size: 10px; letter-spacing: 0;
 }
 .trek-dash .col-rail-sep { height: 1px; background: var(--line); margin: 8px 6px; }
 
@@ -85,7 +85,7 @@
 .trek-dash .col-invite .s { font-size: 11px; color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .trek-dash .col-invite-actions { display: flex; gap: 7px; margin-top: 9px; }
 .trek-dash .col-invite-actions button { flex: 1; padding: 6px 8px; border-radius: 8px; font-size: 11.5px; font-weight: 600; transition: background .12s, opacity .12s; }
-.trek-dash .col-invite-accept { background: var(--accent); color: #fff; }
+.trek-dash .col-invite-accept { background: var(--accent); color: var(--accent-text); }
 .trek-dash .col-invite-accept:hover { opacity: .9; }
 .trek-dash .col-invite-decline { border: 1px solid var(--line-2); color: var(--ink-2); }
 .trek-dash .col-invite-decline:hover { background: var(--surface); }
@@ -198,7 +198,7 @@
   border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); transition: background .12s, color .12s, border-color .12s;
 }
 .trek-dash .col-iconbtn:hover { background: var(--surface-2); color: var(--ink); }
-.trek-dash .col-iconbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
+.trek-dash .col-iconbtn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
 .trek-dash .col-viewseg { display: flex; padding: 3px; border-radius: var(--r-sm); background: oklch(0.94 0.008 70); }
 .dark .trek-dash .col-viewseg { background: var(--bg-2); }
 .trek-dash .col-viewseg button { width: 34px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-2); transition: background .12s, color .12s; }
@@ -232,7 +232,7 @@
   transition: transform .12s, background .15s, color .15s;
 }
 .trek-dash .col-map-btn:hover { transform: translateY(-1px); background: var(--surface); }
-.trek-dash .col-map-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
+.trek-dash .col-map-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
 .trek-dash .col-map-btn:disabled { opacity: .45; cursor: default; transform: none; }
 .trek-dash .col-map-search {
   display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; color: var(--ink-3);
@@ -274,8 +274,8 @@
 .trek-dash .col-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
 .trek-dash .col-filter { position: relative; }
 .trek-dash .col-filter-select { margin-left: auto; }
-.trek-dash .col-filter-select.open { background: var(--accent); border-color: var(--accent); color: #fff; }
-.trek-dash .col-filter-select.open:hover { background: var(--accent); color: #fff; }
+.trek-dash .col-filter-select.open { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
+.trek-dash .col-filter-select.open:hover { background: var(--accent); color: var(--accent-text); }
 .trek-dash .col-filter-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); transition: background .12s, border-color .12s, color .12s; }
 .trek-dash .col-filter-btn:hover { background: var(--surface-2); color: var(--ink); }
 .trek-dash .col-filter-btn.open { border-color: var(--accent); color: var(--ink); }
@@ -292,7 +292,7 @@
 .trek-dash .col-filter-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
 .trek-dash .col-filter-dot.ghost { background: var(--line-2); }
 .trek-dash .col-lcheck { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-2); color: transparent; flex-shrink: 0; }
-.trek-dash .col-lcheck.on { background: var(--accent); border-color: var(--accent); color: #fff; }
+.trek-dash .col-lcheck.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
 
 /* map view fills the body */
 .trek-dash .col-mapwrap {
@@ -399,7 +399,7 @@
 .trek-dash .col-detail-footer-spacer { flex: 1 1 auto; }
 .trek-dash .col-detail-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); transition: background .12s, color .12s; }
 .trek-dash .col-detail-btn:hover { background: var(--surface); color: var(--ink); }
-.trek-dash .col-detail-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+.trek-dash .col-detail-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
 .trek-dash .col-detail-btn.danger { color: oklch(0.6 0.2 25); border-color: transparent; background: transparent; }
 .trek-dash .col-detail-btn.danger:hover { background: oklch(0.6 0.2 25 / .12); }
 
diff --git a/client/src/styles/dashboard.css b/client/src/styles/dashboard.css
index 26fef4bfb..4a1d74323 100644
--- a/client/src/styles/dashboard.css
+++ b/client/src/styles/dashboard.css
@@ -18,9 +18,12 @@
   --ink-3: oklch(0.62 0.01 65);
   --line: oklch(0.92 0.008 70);
   --line-2: oklch(0.88 0.01 70);
-  --accent: oklch(0.66 0.17 38);
-  --accent-ink: oklch(0.32 0.13 38);
-  --accent-soft: oklch(0.95 0.04 50);
+  /* Accent follows the user's theme (index.css --accent*): monochrome black/white
+     by default, coloured per data-scheme / custom accent. --accent itself is
+     inherited from the theme; the ink/soft aliases map onto the theme tokens.
+     Category colours are set explicitly per element and are unaffected. */
+  --accent-ink: var(--accent-on, var(--accent));
+  --accent-soft: var(--accent-subtle, color-mix(in oklch, var(--accent) 12%, transparent));
   --success: oklch(0.58 0.12 155);
   --warn: oklch(0.74 0.14 75);
 
@@ -52,7 +55,7 @@
   --glass-blur: blur(22px) saturate(1.7);
 }
 
-/* dark variant — same geometry, dark surfaces, accent kept */
+/* dark variant — same geometry, dark surfaces, theme-driven accent */
 .dark .trek-dash {
   --bg: oklch(0.17 0 0);
   --bg-2: oklch(0.21 0 0);
@@ -63,9 +66,9 @@
   --ink-3: oklch(0.6 0 0);
   --line: oklch(0.32 0 0);
   --line-2: oklch(0.38 0 0);
-  --accent: oklch(0.7 0.16 40);
-  --accent-ink: oklch(0.82 0.13 50);
-  --accent-soft: oklch(0.32 0.07 45);
+  /* Dark: same theme-driven accent (inherited --accent + mapped aliases). */
+  --accent-ink: var(--accent-on, var(--accent));
+  --accent-soft: var(--accent-subtle, color-mix(in oklch, var(--accent) 22%, transparent));
   --success: oklch(0.7 0.13 155);
   --warn: oklch(0.78 0.14 75);