carry the neon language into the sidebar and page header

The nav still used the ink palette: flat fills, oversized rows, and a
tinted background with no marker for the active route. Adopt the CYBER
treatment from the prototype — a 2px glowing cyan bar on the left of the
active item, hairline borders instead of full-contrast ones, monospace
group labels with wide tracking, and a faint cyan wash at the top of the
rail so it does not read as a dead dark slab.

PageSidebarNav gets the same active treatment as AppSidebar so the
conversation routes do not feel like a different product.

Header height stays at 64px — style-system.test.ts asserts it as a
layout contract.

packages/client/src/components/hermes/chat/ChatPanel.vue

@@ -2011,7 +2011,7 @@ async function handleSessionModelCustomSubmit() {
 .page-sidebar-top {
   flex-shrink: 0;
   padding: 12px;
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid var(--border-light);
 }
 
 .page-sidebar-tabs {

packages/client/src/components/layout/AppSidebar.vue

@@ -427,6 +427,17 @@ function handleUpdateClick() {
   padding: 8px 12px 20px;
   flex-shrink: 0;
   transition: width $transition-normal;
+
+  // 顶部一层极淡的青色辉光，让侧栏不是一块死板的深色。
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: radial-gradient(120% 60% at 50% 0%,
+      rgba(var(--accent-primary-rgb), 0.05),
+      transparent 62%);
+  }
 }
 
 .sidebar-nav {
@@ -452,7 +463,7 @@ function handleUpdateClick() {
   &.nav-group-bottom {
     margin-top: auto;
     padding-top: 8px;
-    border-top: 1px solid $border-color;
+    border-top: 1px solid var(--border-light);
   }
 }
 
@@ -462,13 +473,15 @@ function handleUpdateClick() {
   gap: 2px;
 }
 
+// 分组标签用等宽小字 + 宽字距，是 CYBER 的坐标感来源。
 .nav-group-label {
+  font-family: $font-code;
   font-size: 10px;
   font-weight: 600;
-  color: $text-muted;
+  color: var(--text-faint);
   text-transform: uppercase;
-  letter-spacing: 0.8px;
+  letter-spacing: 0.14em;
-  padding: 8px 12px 4px;
+  padding: 10px 12px 4px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -478,7 +491,7 @@ function handleUpdateClick() {
   transition: color $transition-fast;
 
   &:hover {
-    color: $text-secondary;
+    color: $accent-primary;
   }
 
   .nav-group:first-child & {
@@ -496,35 +509,56 @@ function handleUpdateClick() {
 }
 
 .nav-item {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 9px;
-  padding: 12px;
+  padding: 7px 10px;
-  border: none;
+  border: 1px solid transparent;
   background: none;
   appearance: none;
   text-decoration: none;
-  color: $text-secondary;
+  color: $text-muted;
-  font-size: 14px;
+  font-size: 13px;
   border-radius: $radius-sm;
   cursor: pointer;
-  transition: all $transition-fast;
+  transition: background-color $transition-fast, color $transition-fast,
+              border-color $transition-fast;
   width: 100%;
   text-align: left;
 
+  svg {
+    flex: 0 0 auto;
+  }
+
   &:hover {
-    background-color: rgba(var(--accent-primary-rgb), 0.06);
+    background-color: $bg-card;
     color: $text-primary;
   }
 
+  // 选中态：淡青底 + 青色描边 + 左侧 2px 发光指示条。
   &.active {
-    background-color: rgba(var(--accent-primary-rgb), 0.12);
+    background-color: rgba(var(--accent-primary-rgb), 0.11);
+    border-color: rgba(var(--accent-primary-rgb), 0.28);
     color: $accent-primary;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: -10px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 2px;
+      height: 16px;
+      border-radius: 2px;
+      background: $accent-primary;
+      box-shadow: 0 0 8px $accent-primary;
+    }
   }
 
   .beta-tag {
     font-size: 10px;
-    color: $text-muted;
+    color: var(--text-faint);
     margin-left: 2px;
   }
 }
@@ -547,7 +581,7 @@ function handleUpdateClick() {
 
 .sidebar-footer {
   padding-top: 10px;
-  border-top: 1px solid $border-color;
+  border-top: 1px solid var(--border-light);
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -621,8 +655,9 @@ function handleUpdateClick() {
 
 .version-info {
   padding: 2px 0 8px 12px;
+  font-family: $font-code;
   font-size: 11px;
-  color: $text-muted;
+  color: var(--text-faint);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -766,6 +801,12 @@ function handleUpdateClick() {
     padding: 10px 4px;
     gap: 0;
 
+    // 图标态的指示条要贴到 8px 内边距的边缘，不能沿用展开态的 -10px。
+    &.active::before {
+      left: -6px;
+      height: 18px;
+    }
+
     span {
       display: none;
     }

packages/client/src/components/layout/PageSidebarNav.vue

@@ -193,13 +193,14 @@ function openWorkflow() {
 }
 
 .page-sidebar-tab {
+  position: relative;
   width: 100%;
   min-width: 0;
   height: 34px;
-  border: none;
+  border: 1px solid transparent;
   border-radius: $radius-sm;
   background: transparent;
-  color: $text-secondary;
+  color: $text-muted;
   display: inline-flex;
   flex-direction: row;
   align-items: center;
@@ -209,7 +210,8 @@ function openWorkflow() {
   cursor: pointer;
   transition:
     background-color $transition-fast,
-    color $transition-fast;
+    color $transition-fast,
+    border-color $transition-fast;
 
   svg {
     flex-shrink: 0;
@@ -224,11 +226,30 @@ function openWorkflow() {
     line-height: 18px;
   }
 
-  &:hover,
+  &:hover {
-  &.active {
+    background: $bg-card;
-    background: rgba(var(--accent-primary-rgb), 0.06);
     color: $text-primary;
   }
+
+  // 选中态与 AppSidebar 保持一致：淡青底 + 描边 + 左侧发光条。
+  &.active {
+    background: rgba(var(--accent-primary-rgb), 0.11);
+    border-color: rgba(var(--accent-primary-rgb), 0.28);
+    color: $accent-primary;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: -10px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 2px;
+      height: 16px;
+      border-radius: 2px;
+      background: $accent-primary;
+      box-shadow: 0 0 8px $accent-primary;
+    }
+  }
 }
 
 .conversation-switch {

packages/client/src/styles/global.scss

@@ -580,6 +580,8 @@ a {
 }
 
 // Shared page header
+// 页面顶栏：发丝线分隔 + 极淡的青色底，标题用等宽字体带字距。
+// 高度保持 64px（ui-baseline 契约，测试有断言）。
 .page-header {
   display: flex;
   align-items: center;
@@ -587,15 +589,20 @@ a {
   gap: 12px;
   min-height: 64px;
   padding: 14px 20px;
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid var(--border-light);
   flex-shrink: 0;
+  background: linear-gradient(180deg,
+    rgba(var(--accent-primary-rgb), 0.035),
+    transparent 70%);
 }
 
 .header-title {
   margin: 0;
-  font-size: 16px;
+  font-family: $font-code;
+  font-size: 15px;
   font-weight: 600;
   line-height: 1.4;
+  letter-spacing: 0.04em;
   color: $text-primary;
 }