diff --git a/static/css/core/layout.css b/static/css/core/layout.css
index f065fe2..9554892 100644
--- a/static/css/core/layout.css
+++ b/static/css/core/layout.css
@@ -741,16 +741,18 @@
 }
 
 .mode-nav-btn:hover {
-    background: var(--bg-elevated);
+    background: var(--accent-cyan-glow);
     color: var(--text-primary);
     border-color: var(--border-color);
 }
 
 .mode-nav-btn.active {
-    background: var(--bg-elevated);
+    background: var(--accent-cyan-glow);
     color: var(--text-primary);
-    border-color: var(--accent-cyan);
-    box-shadow: inset 0 -2px 0 var(--accent-cyan);
+    border-color: transparent;
+    border-left: 2px solid var(--accent-cyan);
+    box-shadow: -2px 0 8px rgba(74, 163, 255, 0.2);
+    padding-left: 12px; /* compensate for 2px border */
 }
 
 .mode-nav-btn.active .nav-icon {
@@ -838,7 +840,7 @@
 }
 
 .mode-nav-dropdown-btn:hover {
-    background: var(--bg-elevated);
+    background: var(--accent-cyan-glow);
     color: var(--text-primary);
     border-color: var(--border-color);
 }
@@ -854,10 +856,11 @@
 }
 
 .mode-nav-dropdown.has-active .mode-nav-dropdown-btn {
-    background: var(--bg-elevated);
+    background: var(--accent-cyan-glow);
     color: var(--text-primary);
-    border-color: var(--accent-cyan);
-    box-shadow: inset 0 -2px 0 var(--accent-cyan);
+    border-color: transparent;
+    border-left: 2px solid var(--accent-cyan);
+    box-shadow: -2px 0 8px rgba(74, 163, 255, 0.2);
 }
 
 .mode-nav-dropdown.has-active .mode-nav-dropdown-btn .nav-icon {
@@ -901,9 +904,11 @@
 }
 
 .mode-nav-dropdown-menu .mode-nav-btn.active {
-    background: var(--bg-elevated);
+    background: var(--accent-cyan-glow);
     color: var(--text-primary);
-    box-shadow: inset 0 -2px 0 var(--accent-cyan);
+    border-left: 2px solid var(--accent-cyan);
+    box-shadow: -2px 0 6px rgba(74, 163, 255, 0.15);
+    padding-left: 10px;
 }
 
 /* Focus-visible states for nav elements */
@@ -1103,15 +1108,18 @@ a.nav-dashboard-btn:hover {
 }
 
 [data-theme="light"] .mode-nav-btn.active {
-    background: rgba(220, 230, 244, 0.9);
-    color: var(--text-primary);
+    background: rgba(31, 95, 168, 0.08);
+    border-left: 2px solid var(--accent-cyan);
+    box-shadow: -2px 0 6px rgba(31, 95, 168, 0.15);
+    padding-left: 12px;
 }
 
 [data-theme="light"] .mode-nav-dropdown-btn:hover,
 [data-theme="light"] .mode-nav-dropdown.open .mode-nav-dropdown-btn,
 [data-theme="light"] .mode-nav-dropdown.has-active .mode-nav-dropdown-btn {
-    background: rgba(220, 230, 244, 0.9);
-    color: var(--text-primary);
+    background: rgba(31, 95, 168, 0.06);
+    border-left: 2px solid var(--accent-cyan);
+    box-shadow: -2px 0 6px rgba(31, 95, 168, 0.12);
 }
 
 [data-theme="light"] .mode-nav-dropdown-menu {
@@ -1124,8 +1132,9 @@ a.nav-dashboard-btn:hover {
 }
 
 [data-theme="light"] .mode-nav-dropdown-menu .mode-nav-btn.active {
-    background: rgba(220, 230, 244, 0.95);
-    color: var(--text-primary);
+    background: rgba(31, 95, 168, 0.08);
+    border-left: 2px solid var(--accent-cyan);
+    padding-left: 10px;
 }
 
 [data-theme="light"] .nav-tool-btn {