diff --git a/frontend/style.css b/frontend/style.css
index 38b055d..1af5bd9 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -7766,6 +7766,26 @@ body.popup-mode .content-area {
   max-width: 100%; max-height: 100%;
 }
 
+/* ── Dark mode overrides for beta diagrams that ignore themeVariables ── */
+[data-theme="dark"] .mermaid-rendered svg .row rect,
+[data-theme="dark"] .mermaid-rendered svg g[id*="packet"] rect {
+  fill: #1e3a5f !important;
+  stroke: #4a7ab5 !important;
+}
+[data-theme="dark"] .mermaid-rendered svg .row text,
+[data-theme="dark"] .mermaid-rendered svg g[id*="packet"] text {
+  fill: #c8daf0 !important;
+}
+[data-theme="dark"] .mermaid-fullscreen-content svg .row rect,
+[data-theme="dark"] .mermaid-fullscreen-content svg g[id*="packet"] rect {
+  fill: #1e3a5f !important;
+  stroke: #4a7ab5 !important;
+}
+[data-theme="dark"] .mermaid-fullscreen-content svg .row text,
+[data-theme="dark"] .mermaid-fullscreen-content svg g[id*="packet"] text {
+  fill: #c8daf0 !important;
+}
+
 .mermaid-focus-panel {
   position: fixed; top: 0; right: 0; bottom: 0; width: 480px;
   z-index: 9998; background: var(--bg-secondary);