diff --git a/main.html b/main.html
index 14dcd7b02..6f6d9bbd4 100755
--- a/main.html
+++ b/main.html
@@ -483,9 +483,17 @@ <h3 id="currentChatAgentName">选择一个Agent开始聊天</h3>
                             </path>
                         </svg>
                     </button>
+                    <button id="voiceChatBtn" class="header-button" type="button" title="语音聊天"
+                        style="margin-right: 5px; display: none;">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"
+                            stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                            <rect x="5" y="1.5" width="6" height="9" rx="3"></rect>
+                            <path d="M2.35 8.675C3.075 11.3 5.2 13.125 8 13.125C10.8 13.125 12.925 11.3 13.65 8.675M8 13.125V15"></path>
+                        </svg>
+                    </button>
 
                     <button id="currentAgentSettingsBtn" class="header-button" type="button" title="当前Agent设置" style="display: none;">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 44" width="110" height="44"
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="2.6 0 97 44" width="97" height="44"
                             aria-hidden="true">
                             <g transform="translate(1 2) scale(1.62)" stroke="currentColor" stroke-width="2" fill="none"
                                 stroke-linejoin="round" stroke-linecap="round">
@@ -497,21 +505,12 @@ <h3 id="currentChatAgentName">选择一个Agent开始聊天</h3>
                             </g>
                             <g fill="currentColor" font-family="system-ui, -apple-system, sans-serif" font-size="15"
                                 font-weight="500">
-                                <text x="45" y="17">CREATE</text>
-                                <text x="45" y="33">TOPIC</text>
+                                <text x="45" y="19">CREATE</text>
+                                <text x="45" y="35">TOPIC</text>
                             </g>
                         </svg>
                         <span class="button-label">新建聊天话题</span>
                     </button>
-                    <button id="voiceChatBtn" class="header-button" type="button" title="语音聊天"
-                        style="margin-right: 5px; display: none;">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
-                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M12 19v3"></path>
-                            <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-                            <rect x="9" y="2" width="6" height="13" rx="3"></rect>
-                        </svg>
-                    </button>
                     <span id="nextUiChatNotificationHost" class="next-ui-notification-toggle-host"></span>
                 </div>
             </header>
@@ -605,7 +604,7 @@ <h3 id="currentChatAgentName">选择一个Agent开始聊天</h3>
                 </div>
             </footer>
           </main>
-          <div class="resizer" id="resizerRight"></div>
+          <div class="resizer vcp-ui-scope" id="resizerRight"></div>
           <aside class="notifications-sidebar vcp-ui-scope" id="notificationsSidebar">
             <header class="notifications-header">
                 <h4 id="notificationTitle" style="display: none;">VCP 通知</h4>
diff --git a/modules/chatManager.js b/modules/chatManager.js
index 383b9e06a..389a1489a 100755
--- a/modules/chatManager.js
+++ b/modules/chatManager.js
@@ -609,7 +609,7 @@ export const chatManager = (() => {
         currentItemActionBtn.style.display = 'inline-flex';
         
         if (voiceChatBtn) {
-            voiceChatBtn.style.display = itemType === 'agent' ? 'inline-block' : 'none';
+            voiceChatBtn.style.display = itemType === 'agent' ? 'inline-flex' : 'none';
         }
 
         itemListManager.highlightActiveItem(itemId, itemType);
diff --git a/scripts/next-delta-shared-baseline.json b/scripts/next-delta-shared-baseline.json
index f10eeca03..2e5ab4ed9 100644
--- a/scripts/next-delta-shared-baseline.json
+++ b/scripts/next-delta-shared-baseline.json
@@ -1,7 +1,7 @@
 {
   "modules/chatManager.js": {
-    "sha256": "b2525a25fb0996fa9ff74483dc117e1058a588fb2656ea075d38d6bbdcb9418e",
-    "reason": "upstream chat core plus exact Surface stream routing, independent conversation capability, initiating-Surface cleanup, injected send-state capability, durable history authority, and no direct IPC fallback; deletion and topic-summary completion replace immutable selection snapshots through their authority; outgoing attachment draft identity changes on append so a file added during durable persistence is preserved; selection intent persists before watcher/history work and restore waits for topic projection before reporting completion; named ChatManager lifecycle retracts canvas subscriptions, observer, forward timers and selection authority before draining persistence queues; file-history sync now captures selection/topic generations and revalidates the active conversation after its read, protects stream ids captured before the read from terminal/delete races, reconciles active StreamProjection snapshots after history/DOM replacement without taking over durable persistence, and routes last-open settings updates through operation-aware path patches to avoid complete-snapshot overwrite"
+    "sha256": "c419c32dd4f83389c6bfb8b5509f14478db518dd879ed8697fea6fe20d508bd0",
+    "reason": "upstream chat core plus exact Surface stream routing, independent conversation capability, initiating-Surface cleanup, injected send-state capability, durable history authority, and no direct IPC fallback; deletion and topic-summary completion replace immutable selection snapshots through their authority; outgoing attachment draft identity changes on append so a file added during durable persistence is preserved; selection intent persists before watcher/history work and restore waits for topic projection before reporting completion; named ChatManager lifecycle retracts canvas subscriptions, observer, forward timers and selection authority before draining persistence queues; file-history sync now captures selection/topic generations and revalidates the active conversation after its read, protects stream ids captured before the read from terminal/delete races, reconciles active StreamProjection snapshots after history/DOM replacement without taking over durable persistence, and routes last-open settings updates through operation-aware path patches to avoid complete-snapshot overwrite; voice chat button uses inline-flex to match the header button layout"
   },
   "modules/messageRenderer.js": {
     "sha256": "9172101e6ac05bd9c4dfec5186cfeb7ba2c65d724dbfc65ace79188d21e00700",
diff --git a/scripts/test-appearance-engine.mjs b/scripts/test-appearance-engine.mjs
index 198bae8cc..361a4a2b4 100644
--- a/scripts/test-appearance-engine.mjs
+++ b/scripts/test-appearance-engine.mjs
@@ -139,7 +139,7 @@ assert.match(appearanceCss, /\.vcp-material-optics\s*\{[^}]*position:\s*fixed/s)
 assert.match(appearanceCss, /html\[data-vcp-radius="square"\] \.vcp-ui-scope/);
 assert.doesNotMatch(appearanceCss, /data-ui-mode/);
 assert.match(appearanceCss, /--vcp-ui-font-family:\s*var\(--vcp-appearance-font-family\)/);
-assert.match(appearanceCss, /\.chat-input-card\s*\{\s*border-radius:\s*var\(--vcp-ui-composer-radius, 24px\)/s);
+assert.match(appearanceCss, /\.chat-input-card\s*\{\s*border-radius:\s*var\(--vcp-ui-composer-radius, 28px\)/s);
 assert.match(appearanceCss, /--vcp-ui-shell-radius:\s*0px/);
 assert.match(appearanceCss, /--vcp-ui-shell-radius:\s*18px/);
 assert.match(appearanceCss, /data-vcp-shell-radius="tuned"/);
diff --git a/styles/appearance.css b/styles/appearance.css
index 9b6ecf954..0a780f967 100644
--- a/styles/appearance.css
+++ b/styles/appearance.css
@@ -184,7 +184,7 @@
     }
 
     html[data-vcp-composer-radius="tuned"],
-    html[data-vcp-composer-radius="tuned"] .vcp-ui-scope { --vcp-ui-composer-radius: 24px; }
+    html[data-vcp-composer-radius="tuned"] .vcp-ui-scope { --vcp-ui-composer-radius: 28px; }
     html[data-vcp-composer-radius="follow"],
     html[data-vcp-composer-radius="follow"] .vcp-ui-scope { --vcp-ui-composer-radius: var(--vcp-ui-radius-xl); }
     html[data-vcp-composer-radius="square"],
@@ -330,18 +330,27 @@
 
     html .vcp-ui-scope {
         --vcp-ui-font-family: var(--vcp-appearance-font-family);
-        --vcp-ui-font-caption: calc(12px * var(--vcp-appearance-font-scale));
-        --vcp-ui-font-micro: calc(10px * var(--vcp-appearance-font-scale));
-        --vcp-ui-font-helper: calc(13px * var(--vcp-appearance-font-scale));
-        --vcp-ui-font-body: calc(14px * var(--vcp-appearance-font-scale));
-        --vcp-ui-font-emphasis: calc(15px * var(--vcp-appearance-font-scale));
-        --vcp-ui-font-title: calc(18px * var(--vcp-appearance-font-scale));
-        --vcp-ui-font-display: calc(22px * var(--vcp-appearance-font-scale));
+        --vcp-ui-font-size: calc(14px * var(--vcp-appearance-font-scale));
+        --vcp-ui-text-xl: calc(var(--vcp-ui-font-size) + 4px);
+        --vcp-ui-text-lg: calc(var(--vcp-ui-font-size) + 2px);
+        --vcp-ui-text-base: var(--vcp-ui-font-size);
+        --vcp-ui-text-caption: calc(var(--vcp-ui-font-size) - 1px);
+        --vcp-ui-text-sm: calc(var(--vcp-ui-font-size) - 2px);
+        --vcp-ui-text-xs: calc(var(--vcp-ui-font-size) - 4px);
+        /* Compatibility aliases for the existing VCPUI components. */
+        --vcp-ui-font-caption: var(--vcp-ui-text-sm);
+        --vcp-ui-font-micro: var(--vcp-ui-text-xs);
+        --vcp-ui-font-helper: var(--vcp-ui-text-caption);
+        --vcp-ui-font-body: var(--vcp-ui-text-base);
+        --vcp-ui-font-emphasis: var(--vcp-ui-text-base);
+        --vcp-ui-font-section: var(--vcp-ui-text-lg);
+        --vcp-ui-font-title: var(--vcp-ui-text-xl);
+        --vcp-ui-font-display: var(--vcp-ui-text-xl);
         font-family: var(--vcp-ui-font-family);
     }
 
     html .vcp-ui-scope .chat-input-card {
-        border-radius: var(--vcp-ui-composer-radius, 24px);
+        border-radius: var(--vcp-ui-composer-radius, 28px);
     }
 
     html[data-vcp-content-width="centered"] .chat-messages {
@@ -378,3 +387,38 @@
         .appearance-settings-grid { grid-template-columns: 1fr; }
     }
 }
+
+/* Advanced-reply popover (+ button / send right-click): same surface as the
+   composer card it opens from, with the soft composer-popover lift and a
+   superellipse corner; rows inset 4px take 12px to stay concentric. */
+html body .tavern-popover {
+    border: 1px solid var(--vcp-ui-composer-border);
+    border-radius: 16px;
+    background: var(--vcp-ui-composer-input);
+    box-shadow: var(--vcp-ui-composer-popover-shadow);
+}
+
+html body .tavern-popover .tavern-rule-row {
+    border-radius: 12px;
+}
+
+html body .tavern-popover .tavern-popover-search-input:not(:focus) {
+    border-color: var(--vcp-ui-composer-border);
+}
+
+/* The light theme gives the mini switch track a 1px border, but the knob kept
+   its borderless 2px offset, which is measured inside that border: it sat 3px
+   from the top and 1px from the bottom. 1px inside the border puts it 2px
+   from every edge, in both positions. */
+html body:is(.light-theme, [data-vcp-theme="light"]) .tavern-popover .tavern-switch .tavern-slider::before {
+    top: 1px;
+    left: 1px;
+}
+
+/* stylelint-disable property-no-unknown, function-no-unknown */
+@supports (corner-shape: superellipse(1.5)) {
+    html body .tavern-popover {
+        corner-shape: superellipse(1.5);
+    }
+}
+/* stylelint-enable property-no-unknown, function-no-unknown */
diff --git a/styles/components.css b/styles/components.css
index 1ad41587d..34fc23b50 100644
--- a/styles/components.css
+++ b/styles/components.css
@@ -447,10 +447,6 @@ body:not(.light-theme) .chat-actions .header-button {
     flex-shrink: 0;
 }
 
-.chat-actions .header-button#voiceChatBtn svg {
-    transform: translateY(1.4px);
-}
-
 .chat-actions .header-button#currentAgentSettingsBtn svg {
     transform: translate(3px, 0);
 }
diff --git a/styles/ui-next.css b/styles/ui-next.css
index 70f4ccad7..7d506cb73 100644
--- a/styles/ui-next.css
+++ b/styles/ui-next.css
@@ -205,26 +205,28 @@ html .next-ui-window-button {
 
 .next-ui-tab {
     position: relative;
-    height: 30px;
-    min-width: 96px;
+    height: 28px;
+    min-width: 80px;
     max-width: 160px;
-    padding: 0 10px;
+    padding: 0 8px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
+    gap: 6px;
     border-radius: 8px;
     color: var(--next-muted);
-    font-size: 15px;
+    font-size: 13px;
+    font-weight: 500;
     white-space: nowrap;
     transition: color var(--vcp-motion-duration-fast) var(--vcp-motion-ease-standard), background-color var(--vcp-motion-duration-fast) var(--vcp-motion-ease-standard), font-weight var(--vcp-motion-duration-fast) var(--vcp-motion-ease-standard);
 }
 
 html #nextUiHomeTab {
-    min-width: 80px;
+    min-width: 76px;
     max-width: 96px;
-    padding: 0 10px 0 3px;
+    height: 28px;
+    padding: 0 10px 0 4px;
     justify-content: flex-start;
     border-radius: 0 8px 8px 0;
     background: transparent;
@@ -235,7 +237,7 @@ html #nextUiHomeTab > span:last-child {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 15px;
+    font-size: 13px;
     font-weight: 600;
     line-height: 1;
     letter-spacing: 0;
@@ -297,13 +299,23 @@ html #nextUiHomeTab > span:last-child {
     opacity: 0;
 }
 
-.next-ui-tab > svg,
+.next-ui-tab > svg {
+    width: 14px;
+    height: 14px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.8;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    flex: 0 0 auto;
+}
+
 .next-ui-add-tab > svg,
 .next-ui-icon-button > svg,
 .next-ui-window-button > svg,
 .next-ui-app-icon svg {
-    width: 19px;
-    height: 19px;
+    width: 16px;
+    height: 16px;
     fill: none;
     stroke: currentColor;
     stroke-width: 1.8;
@@ -315,7 +327,7 @@ html #nextUiHomeTab > span:last-child {
 .next-ui-tab-label {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
     min-width: 0;
 }
 
@@ -328,18 +340,21 @@ html #nextUiHomeTab > span:last-child {
     color: inherit;
     background: transparent;
     font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.2;
     text-align: left;
     cursor: pointer;
 }
 
 .next-ui-tab-close {
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
     display: grid;
     place-items: center;
     padding: 0;
     border: 0;
-    border-radius: 5px;
+    border-radius: 4px;
     color: var(--next-muted);
     background: transparent;
     cursor: pointer;
@@ -357,8 +372,8 @@ html #nextUiHomeTab > span:last-child {
 }
 
 .next-ui-tab-close svg {
-    width: 13px;
-    height: 13px;
+    width: 12px;
+    height: 12px;
     fill: none;
     stroke: currentColor;
     stroke-width: 2;
@@ -366,10 +381,10 @@ html #nextUiHomeTab > span:last-child {
 
 html .next-ui-tab-svg,
 html .next-ui-tab-svg svg {
-    width: 19px;
-    height: 19px;
+    width: 14px;
+    height: 14px;
     display: block;
-    flex: 0 0 19px;
+    flex: 0 0 14px;
 }
 
 html .next-ui-tab.is-dragging {
@@ -430,8 +445,7 @@ html .next-ui-embedded-app-status.is-error .vcp-ui-icon {
     }
 }
 
-.next-ui-add-tab,
-.next-ui-icon-button {
+.next-ui-add-tab {
     width: 30px;
     height: 30px;
     padding: 0;
@@ -441,6 +455,16 @@ html .next-ui-embedded-app-status.is-error .vcp-ui-icon {
     flex: 0 0 auto;
 }
 
+.next-ui-icon-button {
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    display: grid;
+    place-items: center;
+    border-radius: 8px;
+    flex: 0 0 auto;
+}
+
 /* The compact 28px "+" sizing and its muted/hover colors live in
    vcp-ui.components (shell.css) so the base-layer button color reset cannot
    override them. Only the base flex sizing stays here. */
@@ -457,14 +481,14 @@ html .next-ui-window-button {
 
 html .next-ui-topbar-actions {
     margin-left: auto;
-    gap: 0;
+    gap: 2px;
     flex: 0 0 auto;
     align-self: stretch;
 }
 
 html .next-ui-topbar-actions > .next-ui-presentation-switcher,
 html .next-ui-topbar-actions > #nextUiThemeStoreBtn {
-    margin-right: 6px;
+    margin-right: 0;
 }
 
 html .next-ui-window-button:hover {
@@ -683,6 +707,8 @@ html[data-vcp-wallpaper-scope="global"] .container::before {
 
 html .sidebar:not(.avatar-only) {
     padding-left: 0;
+    padding-right: 0;
+    padding-bottom: 0;
 }
 
 html .sidebar.avatar-only {
@@ -715,7 +741,8 @@ html .main-content {
 
 html .chat-header {
     padding: 7px 20px;
-    border-bottom: 1px solid var(--next-border);
+    /* A faint 5% hairline under the title instead of the full panel border. */
+    border-bottom: 1px solid var(--zcode-header-divider, var(--next-border));
     background: var(--next-header-bg);
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
@@ -747,7 +774,7 @@ html body #toggleSidebarModeBtn.next-ui-sidebar-mode-button.active:focus-visible
 }
 
 html .next-ui-brand-tab-group {
-    height: 30px;
+    height: 28px;
     display: flex;
     align-items: stretch;
     overflow: hidden;
@@ -766,8 +793,8 @@ html .next-ui-brand-tab-group #nextUiHomeTab:hover {
 
 html #toggleSidebarModeBtn.next-ui-sidebar-mode-button {
     position: relative;
-    width: 30px;
-    height: 30px;
+    width: 28px;
+    height: 28px;
     display: grid;
     overflow: hidden;
     border-color: transparent;
@@ -787,8 +814,8 @@ html .next-ui-sidebar-control-icon {
 }
 
 html .next-ui-sidebar-brand {
-    width: 30px;
-    height: 30px;
+    width: 28px;
+    height: 28px;
     padding: 0;
     overflow: hidden;
     box-sizing: border-box;
@@ -798,18 +825,18 @@ html .next-ui-sidebar-brand {
 }
 
 html .next-ui-sidebar-brand img {
-    width: 22px;
-    height: 22px;
+    width: 20px;
+    height: 20px;
     margin: 4px;
     display: block;
     object-fit: contain;
 }
 
 html .next-ui-sidebar-mode-button > .next-ui-sidebar-control-icon {
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
     display: block;
-    flex: 0 0 18px;
+    flex: 0 0 16px;
     stroke: currentColor;
     opacity: 0;
     transform: translate(-50%, -50%) scale(0.76);
@@ -1017,17 +1044,35 @@ html .chat-actions #themeToggleBtn {
 }
 
 html .chat-actions .header-button {
-    min-width: 30px;
-    height: 30px;
+    height: 28px;
     margin-left: 0;
-    padding: 0 6px;
     border: 0;
-    border-radius: 6px;
+    border-radius: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     color: var(--next-muted);
     background: transparent;
     box-shadow: none;
 }
 
+html .chat-actions .header-button:not(#currentAgentSettingsBtn) {
+    min-width: 28px;
+    width: 28px;
+    padding: 0;
+}
+
+html .chat-actions .header-button#currentAgentSettingsBtn {
+    width: auto;
+    min-width: auto;
+    padding: 0 8px;
+    flex-shrink: 0;
+}
+
+html .chat-actions .header-button#voiceChatBtn {
+    margin-right: 0 !important;
+}
+
 html .chat-actions .header-button:hover {
     border: 0;
     color: var(--next-text);
diff --git a/styles/ui-system/chat-input.css b/styles/ui-system/chat-input.css
index 546ae2188..f7cefa616 100644
--- a/styles/ui-system/chat-input.css
+++ b/styles/ui-system/chat-input.css
@@ -1,12 +1,62 @@
 /*
  * 消息输入区。
  *
- * 输入卡片（圆角、边框、渐变背景、分层阴影与悬停/聚焦/拖拽态）以及文本域
- * 保持迁移前（最近提交）的微调效果，统一由 styles/chat.css（vcp-ui.legacy 层）
- * 对两种 UI 模式生效，本文件不再二次覆写。
- * 附件等工具按钮使用新版样式；发送按钮保留迁移前的圆形强调按钮。
+ * 输入壳和操作控件使用 VCPUI 语义色与紧凑尺寸。输入壳的圆角仍由外观设置控制。
  */
 @layer vcp-ui.components {
+    html .vcp-ui-scope .chat-input-card {
+        /* ZCode prompt-shell states; the existing VCPChat geometry stays intact. */
+        gap: var(--vcp-ui-space-1);
+        /* 8px sides and bottom keep the round end buttons concentric with the
+           card corner: send radius 18 + 8 inset + 1 border sits under the 28px
+           corner once the superellipse below pulls the curve in. The empty
+           card comes to 98px: 8 + 36 text + 10 + 34 row + 8, plus borders. */
+        padding: var(--vcp-ui-space-2);
+        border: 1px solid var(--vcp-ui-composer-border);
+        background: var(--vcp-ui-composer-input);
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+        transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    html .vcp-ui-scope .chat-input-card:hover:not(:focus-within):not(.drag-over) {
+        border-color: var(--vcp-ui-composer-border-active);
+        background: var(--vcp-ui-composer-input);
+        box-shadow: none;
+    }
+
+    html .vcp-ui-scope .chat-input-card:focus-within {
+        border-color: var(--vcp-ui-composer-border-active);
+        background: var(--vcp-ui-composer-input);
+        box-shadow: none;
+    }
+
+    html .vcp-ui-scope .chat-input-card.drag-over {
+        border-color: var(--vcp-ui-color-brand);
+        box-shadow: 0 0 0 2px var(--vcp-ui-focus-ring);
+    }
+
+    html .vcp-ui-scope :is(#messageInput, .chat-message-input) {
+        min-width: 0;
+        color: var(--vcp-ui-composer-foreground);
+        font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+        font-size: var(--vcp-ui-text-base);
+        font-weight: 400;
+        line-height: 24px;
+        /* One 24px line plus a 4px top pad and an 8px breath below it. The
+           left pad gives back the 4px the card's side padding lost, so the
+           text column still starts where it did. */
+        min-height: 36px;
+        padding-top: 4px;
+        padding-left: 10px;
+    }
+
+    html .vcp-ui-scope :is(#messageInput, .chat-message-input)::placeholder {
+        color: var(--vcp-ui-composer-placeholder);
+        opacity: 1;
+    }
+
     html .vcp-ui-scope :is(#messageInput, .chat-message-input):focus, html .vcp-ui-scope :is(#messageInput, .chat-message-input):focus-visible {
         outline: none;
         outline-offset: 0;
@@ -14,12 +64,21 @@
     }
 
     html .vcp-ui-scope .chat-input-actions {
-        gap: var(--vcp-ui-space-1);
+        gap: var(--vcp-ui-space-2);
+        /* Bottom-aligned, not centred: the 28px controls then sit as far from
+           the bottom border as from the side, like the taller send button, so
+           the round button in the lower-left corner shares the card's arc. */
+        align-items: flex-end;
+        /* With the card gap this leaves 10px between the text box and the
+           row, so the 28px controls start 61px below the top edge. */
+        margin-top: 6px;
     }
 
     html .vcp-ui-scope :is(#sendMessageBtn, .chat-send-button), html .vcp-ui-scope :is(#attachFileBtn, .chat-attach-button), html .vcp-ui-scope :is(#quickNewTopicBtn, .chat-quick-new-button), html .vcp-ui-scope :is(#emoticonTriggerBtn, .chat-emoticon-button), html .vcp-ui-scope :is(#workspacePickerBtn, .chat-workspace-button) {
-        width: var(--vcp-ui-control-md);
-        height: var(--vcp-ui-control-md);
+        /* Same 28px box, 8px radius and hover fill as the model picker and
+           mic button on the right of this row. */
+        width: var(--vcp-ui-control-sm);
+        height: var(--vcp-ui-control-sm);
         margin: 0;
         padding: 0;
         display: flex;
@@ -27,7 +86,7 @@
         justify-content: center;
         flex: 0 0 auto;
         border: 1px solid transparent;
-        border-radius: var(--vcp-ui-radius-sm);
+        border-radius: 8px;
         color: var(--vcp-ui-text-2);
         background: transparent;
         cursor: pointer;
@@ -67,6 +126,13 @@
 
     html .vcp-ui-scope :is(#attachFileBtn, .chat-attach-button):hover:not(:disabled), html .vcp-ui-scope :is(#quickNewTopicBtn, .chat-quick-new-button):hover:not(:disabled), html .vcp-ui-scope :is(#emoticonTriggerBtn, .chat-emoticon-button):hover:not(:disabled), html .vcp-ui-scope :is(#workspacePickerBtn, .chat-workspace-button):hover:not(:disabled) {
         color: var(--vcp-ui-text-0);
+        background: var(--vcp-ui-interactive-hover, var(--vcp-ui-composer-control-hover));
+    }
+
+    /* The leftmost control mirrors the send button: a filled circle at the
+       card's lower-left corner, so both ends of the row follow the corner. */
+    html .vcp-ui-scope :is(#quickNewTopicBtn, .chat-quick-new-button) {
+        border-radius: var(--vcp-ui-radius-full);
         background: var(--vcp-ui-fill-1);
     }
 
@@ -78,12 +144,12 @@
         border-radius: var(--vcp-ui-radius-full);
         color: var(--vcp-ui-on-accent);
         background: var(--vcp-ui-accent);
-        box-shadow: var(--vcp-ui-send-button-shadow);
+        box-shadow: none;
     }
 
     html .vcp-ui-scope :is(#sendMessageBtn, .chat-send-button):hover:not(:disabled) {
         background: var(--vcp-ui-accent-hover);
-        transform: translateY(-1px);
+        transform: none;
     }
 
     html .vcp-ui-scope :is(#sendMessageBtn, .chat-send-button).interrupt-mode {
@@ -138,3 +204,57 @@
         background: var(--vcp-ui-accent);
     }
 }
+
+/* Smooth the card corner along superellipse(1.5); full circles opt back out
+   so they stay round. Engines without corner-shape keep circular corners. */
+/* stylelint-disable property-no-unknown, function-no-unknown */
+@supports (corner-shape: superellipse(1.5)) {
+    html .vcp-ui-scope .chat-input-card,
+    html .vcp-ui-scope .vcp-model-select-menu {
+        corner-shape: superellipse(1.5);
+    }
+
+    html .vcp-ui-scope :is(#quickNewTopicBtn, .chat-quick-new-button, #sendMessageBtn, .chat-send-button) {
+        corner-shape: round;
+    }
+}
+/* stylelint-enable property-no-unknown, function-no-unknown */
+
+/* The model picker's menu shares the composer card's surface: same fill,
+   same hairline, a soft lift instead of a hard drop, and a 16px corner whose
+   4px-inset rows take 12px so they stay concentric. The advanced-reply
+   popover gets the same treatment in appearance.css (it mounts on body, outside
+   any .vcp-ui-scope). Unlayered on purpose: the picker's injected sheet is
+   unlayered, so a layered rule would lose to it. */
+html .vcp-ui-scope .vcp-model-select-menu {
+    border: 1px solid var(--vcp-ui-composer-border);
+    border-radius: 16px;
+    background: var(--vcp-ui-composer-input);
+    box-shadow: var(--vcp-ui-composer-popover-shadow);
+}
+
+html .vcp-ui-scope .vcp-model-select-menu :is(.vcp-model-select-item, .vcp-model-select-search) {
+    border-radius: 12px;
+}
+
+html .vcp-ui-scope .vcp-model-select-menu .vcp-model-select-search {
+    border-color: var(--vcp-ui-composer-border);
+}
+
+/* The model menu opens above the whole card, 4px clear and flush with its
+   right edge, like the advanced-reply popover, instead of covering the draft
+   from the trigger. */
+/* stylelint-disable property-no-unknown, function-no-unknown */
+html .vcp-ui-scope .chat-input-card {
+    anchor-name: --vcp-composer-card;
+}
+
+@supports (position-anchor: --vcp-composer-card) {
+    html .vcp-ui-scope .vcp-model-select-menu {
+        position: fixed;
+        position-anchor: --vcp-composer-card;
+        right: anchor(right);
+        bottom: calc(anchor(top) + 4px);
+    }
+}
+/* stylelint-enable property-no-unknown, function-no-unknown */
diff --git a/styles/ui-system/components.css b/styles/ui-system/components.css
index 18d35f6f7..221bad104 100644
--- a/styles/ui-system/components.css
+++ b/styles/ui-system/components.css
@@ -607,12 +607,12 @@
     :is(html, html.vcp-global-settings-host) .vcp-ui-scope .vcp-ui-integrated-main {
         min-width: 0;
         min-height: 0;
-        height: 100%;
+        height: calc(100% - 4px);
+        margin: 0 4px 4px 0;
+        box-sizing: border-box;
         overflow: hidden;
         border: 1px solid var(--vcp-ui-border);
-        border-right: 0;
-        border-bottom: 0;
-        border-radius: var(--vcp-ui-shell-radius) 0 0 0;
+        border-radius: var(--vcp-ui-shell-radius);
         background: var(--vcp-ui-bg-primary);
         box-shadow: var(--vcp-ui-shadow-md);
     }
diff --git a/styles/ui-system/shell.css b/styles/ui-system/shell.css
index 86d4b6ef4..72d4d5764 100644
--- a/styles/ui-system/shell.css
+++ b/styles/ui-system/shell.css
@@ -10,16 +10,24 @@
         display: none;
     }
 
-    /* Material 图标对齐迁移前 SVG 图标尺寸 */
+    /* The compact launchpad trigger matches ZCode icon-md (28px × 28px, 8px radius, 16px glyph) */
     html .vcp-ui-scope .next-ui-add-tab .vcp-ui-icon,
-    html .vcp-ui-scope .next-ui-icon-button .vcp-ui-icon {
-        --vcp-ui-icon-size: 19px;
+    html .vcp-ui-scope .next-ui-add-tab svg {
+        --vcp-ui-icon-size: 16px;
+        width: 16px;
+        height: 16px;
+        font-size: calc(var(--vcp-ui-font-size) + 2px);
+        line-height: 1;
     }
 
-    /* The compact launchpad trigger uses a smaller glyph than the full tab
-       height; the button shell matches the adjacent 30px tabs. */
-    html .vcp-ui-scope .next-ui-add-tab .vcp-ui-icon {
-        --vcp-ui-icon-size: 15px;
+    /* Topbar & header action icons match ZCode size-4 (16px) */
+    html .vcp-ui-scope .next-ui-icon-button .vcp-ui-icon,
+    html .vcp-ui-scope .next-ui-icon-button svg {
+        --vcp-ui-icon-size: 16px;
+        width: 16px;
+        height: 16px;
+        font-size: calc(var(--vcp-ui-font-size) + 2px);
+        line-height: 1;
     }
 
     /* Topbar tab & launchpad "+" button colors live here (vcp-ui.components)
@@ -29,11 +37,21 @@
        topbar text color. Resting text is muted/faded; hover brightens; the
        selected tab turns solid and slightly heavier (opencode's faint->base). */
     html .vcp-ui-scope .next-ui-add-tab {
-        width: 30px;
-        height: 30px;
+        width: 28px;
+        height: 28px;
+        min-width: 28px;
+        min-height: 28px;
+        padding: 0;
+        border: 1px solid transparent;
         border-radius: 8px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         color: var(--next-muted);
         opacity: 0.85;
+        background: transparent;
+        transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        cursor: pointer;
     }
 
     html .vcp-ui-scope .next-ui-add-tab:hover {
@@ -42,7 +60,16 @@
         background: color-mix(in srgb, var(--next-text) 8%, transparent);
     }
 
+    html .vcp-ui-scope .next-ui-add-tab:is(.active, [aria-expanded="true"]) {
+        color: var(--next-text);
+        opacity: 1;
+        background: color-mix(in srgb, var(--next-text) 14%, transparent);
+    }
+
     html .vcp-ui-scope .next-ui-tab {
+        height: 28px;
+        font-size: calc(var(--vcp-ui-font-size) - 1px);
+        font-weight: 500;
         color: var(--next-muted);
     }
 
@@ -52,20 +79,65 @@
 
     html .vcp-ui-scope .next-ui-tab:not(#nextUiHomeTab).active {
         color: var(--next-text);
-        font-weight: 600;
+        font-weight: 500;
     }
 
     html .vcp-ui-scope .next-ui-tab-close {
+        width: 18px;
+        height: 18px;
+        min-width: 18px;
+        min-height: 18px;
+        padding: 0;
+        border: 0;
+        border-radius: 4px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         color: var(--next-muted);
+        opacity: 0.65;
+        background: transparent;
+        cursor: pointer;
+        transition: opacity var(--vcp-motion-duration-fast) var(--vcp-motion-ease-standard),
+                    background-color var(--vcp-motion-duration-fast) var(--vcp-motion-ease-standard),
+                    color var(--vcp-motion-duration-fast) var(--vcp-motion-ease-standard);
     }
 
     html .vcp-ui-scope .next-ui-tab-close:hover {
         color: var(--next-text);
+        opacity: 1;
         background: color-mix(in srgb, var(--next-text) 10%, transparent);
     }
 
+    /* Topbar action group layout (ZCode items-center gap-0.5 parity) */
+    html .vcp-ui-scope .next-ui-topbar-actions {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+    }
+
+    html .vcp-ui-scope .next-ui-topbar-actions > .next-ui-presentation-switcher,
+    html .vcp-ui-scope .next-ui-topbar-actions > #nextUiThemeStoreBtn {
+        margin-right: 0;
+    }
+
+    /* Topbar Icon Button: ZCode variant="ghost" size="icon-md" (28px × 28px, 8px radius, 16px glyph) */
     html .vcp-ui-scope .next-ui-icon-button {
-        color: var(--next-muted);
+        width: 28px;
+        height: 28px;
+        min-width: 28px;
+        min-height: 28px;
+        padding: 0;
+        border: 1px solid transparent;
+        border-radius: 8px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--vcp-ui-port-color-d4d4d4);
+        background: transparent;
+        box-shadow: none;
+        outline: none;
+        transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        cursor: pointer;
     }
 
     html .vcp-ui-scope .vcp-settings-icon {
@@ -77,11 +149,110 @@
         overflow: visible;
     }
 
-    html .vcp-ui-scope .next-ui-icon-button:hover,
-    html .vcp-ui-scope .next-ui-icon-button.active,
-    html .vcp-ui-scope .next-ui-icon-button.is-active {
-        color: var(--next-text);
-        background: color-mix(in srgb, var(--next-text) 8%, transparent);
+    html .vcp-ui-scope .next-ui-icon-button:hover {
+        color: var(--vcp-ui-port-color-ffffff);
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-05);
+    }
+
+    html .vcp-ui-scope .next-ui-icon-button:is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]) {
+        color: var(--vcp-ui-port-color-ffffff);
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-10);
+    }
+
+    html:is([data-vcp-theme="light"], .light-theme) .vcp-ui-scope .next-ui-icon-button, html body.light-theme .vcp-ui-scope .next-ui-icon-button {
+        color: var(--vcp-ui-port-color-262626);
+    }
+
+    html:is([data-vcp-theme="light"], .light-theme) .vcp-ui-scope .next-ui-icon-button:hover, html body.light-theme .vcp-ui-scope .next-ui-icon-button:hover {
+        color: var(--vcp-ui-port-color-000000);
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-05);
+    }
+
+    html:is([data-vcp-theme="light"], .light-theme) .vcp-ui-scope .next-ui-icon-button:is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]), html body.light-theme .vcp-ui-scope .next-ui-icon-button:is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]) {
+        color: var(--vcp-ui-port-color-000000);
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-08);
+    }
+
+    /* Chat header action buttons (ZCode icon-md parity) */
+    html .vcp-ui-scope .chat-actions {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+    }
+
+    /* Common header-button shell (both square icon buttons and wide create-topic button) */
+    html .vcp-ui-scope .chat-actions .header-button {
+        height: 28px;
+        min-height: 28px;
+        margin: 0;
+        border: 1px solid transparent;
+        border-radius: 8px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--vcp-ui-port-color-d4d4d4);
+        background: transparent;
+        box-shadow: none;
+        outline: none;
+        transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        cursor: pointer;
+    }
+
+    /* Square icon buttons */
+    html .vcp-ui-scope .chat-actions .header-button:not(#currentAgentSettingsBtn) {
+        width: 28px;
+        min-width: 28px;
+        padding: 0;
+    }
+
+    html .vcp-ui-scope .chat-actions .header-button:not(#currentAgentSettingsBtn) svg {
+        width: 16px;
+        height: 16px;
+        flex: 0 0 16px;
+    }
+
+    /* Special wide capsule button for "CREATE TOPIC" */
+    html .vcp-ui-scope .chat-actions .header-button#currentAgentSettingsBtn {
+        width: auto;
+        min-width: auto;
+        padding: 0 8px;
+        flex-shrink: 0;
+    }
+
+    html .vcp-ui-scope .chat-actions .header-button#currentAgentSettingsBtn svg {
+        width: 40px;
+        height: 18px;
+        flex-shrink: 0;
+        display: block;
+        transform: none;
+    }
+
+    html .vcp-ui-scope .chat-actions .header-button#currentAgentSettingsBtn svg text {
+        transform: translateY(0.3px);
+    }
+
+    html .vcp-ui-scope .chat-actions .header-button:hover {
+        color: var(--vcp-ui-port-color-ffffff);
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-05);
+    }
+
+    html .vcp-ui-scope .chat-actions .header-button:is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]) {
+        color: var(--vcp-ui-port-color-ffffff);
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-10);
+    }
+
+    html:is([data-vcp-theme="light"], .light-theme) .vcp-ui-scope .chat-actions .header-button, html body.light-theme .vcp-ui-scope .chat-actions .header-button {
+        color: var(--vcp-ui-port-color-262626);
+    }
+
+    html:is([data-vcp-theme="light"], .light-theme) .vcp-ui-scope .chat-actions .header-button:hover, html body.light-theme .vcp-ui-scope .chat-actions .header-button:hover {
+        color: var(--vcp-ui-port-color-000000);
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-05);
+    }
+
+    html:is([data-vcp-theme="light"], .light-theme) .vcp-ui-scope .chat-actions .header-button:is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]), html body.light-theme .vcp-ui-scope .chat-actions .header-button:is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]) {
+        color: var(--vcp-ui-port-color-000000);
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-08);
     }
 
     /* Avatar-only mode is a persistent layout state, not a selected control
@@ -109,12 +280,35 @@
         --vcp-ui-icon-size: 18px;
     }
 
-    html .vcp-ui-scope .next-ui-tab-close .vcp-ui-icon {
-        --vcp-ui-icon-size: 13px;
+    html .vcp-ui-scope .next-ui-tab-close .vcp-ui-icon,
+    html .vcp-ui-scope .next-ui-tab-close svg {
+        --vcp-ui-icon-size: 12px;
+        width: 12px;
+        height: 12px;
+        font-size: calc(var(--vcp-ui-font-size) - 2px);
+        line-height: 1;
     }
 
+    /* Tab icon container & glyph: strictly ZCode size-4 container (16px) with size-3.5 glyph (14px) */
     html .vcp-ui-scope .next-ui-tab-symbol {
-        --vcp-ui-icon-size: var(--vcp-ui-icon-sm);
+        --vcp-ui-icon-size: 14px;
+        width: 16px;
+        height: 16px;
+        min-width: 16px;
+        min-height: 16px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 16px;
+        font-size: var(--vcp-ui-font-size);
+        line-height: 1;
+    }
+
+    html .vcp-ui-scope .next-ui-tab-symbol svg {
+        width: 14px;
+        height: 14px;
+        display: block;
+        flex: 0 0 14px;
     }
 
     /* The icon adapter replaces .vcp-ui-icon with a block-level SVG. Keep
@@ -122,9 +316,12 @@
     html .vcp-ui-scope .next-ui-tab-label > .vcp-ui-scope {
         display: inline-flex;
         align-items: center;
-        gap: var(--vcp-ui-space-2);
+        gap: 6px;
         min-width: 0;
         width: 100%;
+        font-size: calc(var(--vcp-ui-font-size) - 1px);
+        font-weight: 500;
+        line-height: 1.2;
     }
 
     html .vcp-ui-scope .next-ui-tab-label > .vcp-ui-scope > :last-child {
diff --git a/styles/ui-system/showcase.css b/styles/ui-system/showcase.css
index 9749c3731..c7c01af1f 100644
--- a/styles/ui-system/showcase.css
+++ b/styles/ui-system/showcase.css
@@ -325,7 +325,7 @@
     }
 
     html .next-ui-tab-label.vcp-ui-scope .next-ui-tab-symbol {
-        --vcp-ui-icon-size: 17px;
+        --vcp-ui-icon-size: 14px;
     }
 
     html .vcp-ui-scope .vcp-ui-wa-section {
diff --git a/styles/ui-system/sidebar.css b/styles/ui-system/sidebar.css
index 82cd12789..46086ef35 100644
--- a/styles/ui-system/sidebar.css
+++ b/styles/ui-system/sidebar.css
@@ -1,8 +1,9 @@
 /*
- * 新版侧栏（助手 / 话题 / 设置）。
+ * 侧栏系统样式（对齐 ZCode 列表与交互规格，保留经典顶部 Tab 切换器）。
  *
- * 列表密度与状态参考 Cherry Studio：37px 行高、24px 头像、13px 文字、
- * 10px 圆角和 8px 行间距。侧栏容器继续透出顶栏共用材质，经典 UI 不变。
+ * 核心指标：
+ * - 紧凑行高：36px 列表行高、26px 头像、13.5px 字体、8px 圆角和 2px 密集行间距
+ * - 纯平极简状态：无突兀投影，采用 ZCode 标志性的 bg-surface-hover 与 bg-selected 极淡半透明遮罩
  */
 @layer vcp-ui.components {
     html .vcp-ui-scope :is(.agents-header, .topics-header-container) {
@@ -12,14 +13,25 @@
 
     html .vcp-ui-scope .agents-header .sidebar-search-subtab,
     html .vcp-ui-scope .topics-header-container .sidebar-search-subtab {
-        border: 1px solid var(--vcp-ui-control-border);
-        border-radius: var(--vcp-ui-radius-md);
-        background: var(--vcp-ui-control-bg);
+        height: 32px;
+        min-height: 32px;
+        margin: 2px var(--vcp-ui-sidebar-list-gutter, 8px) 6px;
+        border: 1px solid transparent;
+        border-radius: var(--vcp-ui-radius-md, 8px);
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-05);
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
         box-shadow: none;
         filter: none;
-        transition: border-color var(--vcp-ui-transition-fast), background var(--vcp-ui-transition-fast), box-shadow var(--vcp-ui-transition-fast);
+        transition: border-color var(--vcp-ui-transition-fast), background var(--vcp-ui-transition-fast);
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope .agents-header .sidebar-search-subtab,
+    html body[data-vcp-theme="light"] .vcp-ui-scope .topics-header-container .sidebar-search-subtab,
+    html body.light-theme .vcp-ui-scope .agents-header .sidebar-search-subtab,
+    html body.light-theme .vcp-ui-scope .topics-header-container .sidebar-search-subtab {
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-04);
+        border-color: transparent;
     }
 
     html .vcp-ui-scope .agents-header .sidebar-search-subtab::before,
@@ -32,24 +44,41 @@
 
     html .vcp-ui-scope .agents-header .sidebar-search-subtab:hover,
     html .vcp-ui-scope .topics-header-container .sidebar-search-subtab:hover {
-        border-color: var(--vcp-ui-border-strong);
-        background: var(--vcp-ui-bg-3);
+        border-color: var(--vcp-ui-port-color-rgba-255-255-255-0-12);
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-08);
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
         box-shadow: none;
         filter: none;
     }
 
+    html body[data-vcp-theme="light"] .vcp-ui-scope .agents-header .sidebar-search-subtab:hover,
+    html body[data-vcp-theme="light"] .vcp-ui-scope .topics-header-container .sidebar-search-subtab:hover,
+    html body.light-theme .vcp-ui-scope .agents-header .sidebar-search-subtab:hover,
+    html body.light-theme .vcp-ui-scope .topics-header-container .sidebar-search-subtab:hover {
+        border-color: var(--vcp-ui-port-color-rgba-0-0-0-0-08);
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-06);
+    }
+
     html .vcp-ui-scope .agents-header .sidebar-search-subtab:focus-within,
     html .vcp-ui-scope .topics-header-container .sidebar-search-subtab:focus-within {
-        border-color: var(--vcp-ui-control-focus);
-        background: var(--vcp-ui-bg-3);
+        border-color: var(--vcp-ui-port-color-rgba-255-255-255-0-2);
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-08);
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
-        box-shadow: 0 0 0 2px var(--vcp-ui-focus-ring);
+        box-shadow: none;
         filter: none;
     }
 
+    html body[data-vcp-theme="light"] .vcp-ui-scope .agents-header .sidebar-search-subtab:focus-within,
+    html body[data-vcp-theme="light"] .vcp-ui-scope .topics-header-container .sidebar-search-subtab:focus-within,
+    html body.light-theme .vcp-ui-scope .agents-header .sidebar-search-subtab:focus-within,
+    html body.light-theme .vcp-ui-scope .topics-header-container .sidebar-search-subtab:focus-within {
+        border-color: var(--vcp-ui-port-color-rgba-0-0-0-0-16);
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-06);
+        box-shadow: none;
+    }
+
     html .vcp-ui-scope .agent-search-icon {
         border: 0;
         border-radius: 0;
@@ -65,47 +94,43 @@
         filter: none;
     }
 
-    html .vcp-ui-scope .next-ui-agent-tools {
-        width: calc(100% - var(--vcp-ui-sidebar-list-gutter) - var(--vcp-ui-sidebar-list-gutter));
-        height: var(--vcp-ui-sidebar-row-height);
-        min-height: var(--vcp-ui-sidebar-row-height);
-        margin: 2px var(--vcp-ui-sidebar-list-gutter) 0;
-        display: flex;
-        align-items: center;
-        gap: var(--vcp-ui-space-1);
-    }
-
+    html .vcp-ui-scope .next-ui-agent-tools,
     html .vcp-ui-scope .next-ui-topic-tools {
         width: calc(100% - var(--vcp-ui-sidebar-list-gutter) - var(--vcp-ui-sidebar-list-gutter));
-        height: var(--vcp-ui-sidebar-row-height);
-        min-height: var(--vcp-ui-sidebar-row-height);
-        margin: 2px var(--vcp-ui-sidebar-list-gutter) 0;
+        height: 32px;
+        min-height: 32px;
+        margin: 2px var(--vcp-ui-sidebar-list-gutter) 4px;
         display: flex;
         align-items: center;
-        gap: var(--vcp-ui-space-1);
+        gap: 4px;
     }
 
     html .vcp-ui-scope .next-ui-create-item-trigger,
     html .vcp-ui-scope .next-ui-agent-search-trigger,
     html .vcp-ui-scope .next-ui-create-topic-trigger,
     html .vcp-ui-scope .next-ui-topic-icon-trigger {
-        height: var(--vcp-ui-sidebar-row-height);
-        min-height: var(--vcp-ui-sidebar-row-height);
-        padding: 0 var(--vcp-ui-space-3);
+        height: 32px;
+        min-height: 32px;
+        padding: 0 10px;
         display: flex;
         align-items: center;
-        gap: var(--vcp-ui-space-2);
+        gap: 8px;
         border: 0;
-        border-radius: var(--vcp-ui-sidebar-item-radius);
-        color: var(--vcp-ui-text-2);
+        border-radius: var(--vcp-ui-sidebar-item-radius, 8px);
+        color: var(--vcp-ui-text-1);
         background: transparent;
         font: inherit;
-        font-size: var(--vcp-ui-sidebar-font-size);
+        font-size: calc(var(--vcp-ui-font-size) - 1px);
+        font-weight: 500;
         text-align: left;
         cursor: pointer;
         transition: color var(--vcp-ui-transition-fast), background var(--vcp-ui-transition-fast);
     }
 
+    html body[data-vcp-theme="light"] .vcp-ui-scope :is(.next-ui-create-item-trigger, .next-ui-agent-search-trigger, .next-ui-create-topic-trigger, .next-ui-topic-icon-trigger), html body.light-theme .vcp-ui-scope :is(.next-ui-create-item-trigger, .next-ui-agent-search-trigger, .next-ui-create-topic-trigger, .next-ui-topic-icon-trigger) {
+        color: var(--vcp-ui-port-color-475569);
+    }
+
     html .vcp-ui-scope .next-ui-create-item-trigger {
         min-width: 0;
         flex: 1;
@@ -124,19 +149,23 @@
     }
 
     html .vcp-ui-scope .next-ui-agent-search-trigger {
-        width: var(--vcp-ui-sidebar-row-height);
-        min-width: var(--vcp-ui-sidebar-row-height);
+        width: 32px;
+        height: 32px;
+        min-width: 32px;
+        min-height: 32px;
         padding: 0;
         justify-content: center;
-        flex: 0 0 var(--vcp-ui-sidebar-row-height);
+        flex: 0 0 32px;
     }
 
     html .vcp-ui-scope .next-ui-topic-icon-trigger {
-        width: var(--vcp-ui-sidebar-row-height);
-        min-width: var(--vcp-ui-sidebar-row-height);
+        width: 32px;
+        height: 32px;
+        min-width: 32px;
+        min-height: 32px;
         padding: 0;
         justify-content: center;
-        flex: 0 0 var(--vcp-ui-sidebar-row-height);
+        flex: 0 0 32px;
     }
 
     html .vcp-ui-scope .next-ui-create-item-trigger:hover,
@@ -144,8 +173,13 @@
     html .vcp-ui-scope .next-ui-create-topic-trigger:hover,
     html .vcp-ui-scope .next-ui-topic-icon-trigger:hover,
     html .vcp-ui-scope .next-ui-topic-icon-trigger.active {
-        color: var(--vcp-ui-text-1);
-        background: var(--vcp-ui-fill-0);
+        color: var(--vcp-ui-text-0);
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-08);
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope :is(.next-ui-create-item-trigger:hover, .next-ui-agent-search-trigger:hover, .next-ui-create-topic-trigger:hover, .next-ui-topic-icon-trigger:hover, .next-ui-topic-icon-trigger.active), html body.light-theme .vcp-ui-scope :is(.next-ui-create-item-trigger:hover, .next-ui-agent-search-trigger:hover, .next-ui-create-topic-trigger:hover, .next-ui-topic-icon-trigger:hover, .next-ui-topic-icon-trigger.active) {
+        color: var(--vcp-ui-port-color-0f172a);
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-05);
     }
 
     html .vcp-ui-scope .next-ui-create-item-trigger:focus-visible,
@@ -404,17 +438,18 @@
         align-items: center;
         width: 100%;
         min-width: 0;
-        height: var(--vcp-ui-sidebar-row-height);
-        min-height: var(--vcp-ui-sidebar-row-height);
-        margin-bottom: var(--vcp-ui-space-2);
-        padding: 0 var(--vcp-ui-space-2);
+        height: var(--vcp-ui-sidebar-row-height, 36px);
+        min-height: var(--vcp-ui-sidebar-row-height, 36px);
+        margin-bottom: 2px;
+        padding: 0 8px;
         border: 0;
-        border-radius: var(--vcp-ui-sidebar-item-radius);
+        border-radius: var(--vcp-ui-sidebar-item-radius, 8px);
         background: transparent;
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
         box-shadow: none;
-        transition: color var(--vcp-ui-transition-fast), background var(--vcp-ui-transition-fast), border-color var(--vcp-ui-transition-fast);
+        cursor: pointer;
+        transition: color var(--vcp-ui-transition-fast), background var(--vcp-ui-transition-fast);
     }
 
     html .vcp-ui-scope.sidebar .agent-list li::after,
@@ -424,36 +459,54 @@
 
     html .vcp-ui-scope.sidebar .agent-list li:hover,
     html .vcp-ui-scope.sidebar .topic-list .topic-item:hover {
-        background: var(--vcp-ui-fill-0);
-        backdrop-filter: none;
-        -webkit-backdrop-filter: none;
-        box-shadow: none;
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-06);
+        color: var(--vcp-ui-text-0, var(--vcp-ui-port-color-ffffff));
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .agent-list li:hover,
+    html body.light-theme .vcp-ui-scope.sidebar .agent-list li:hover,
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .topic-list .topic-item:hover,
+    html body.light-theme .vcp-ui-scope.sidebar .topic-list .topic-item:hover {
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-04);
+        color: var(--vcp-ui-port-color-0f172a);
     }
 
     html .vcp-ui-scope.sidebar .agent-list li.active,
     html .vcp-ui-scope.sidebar .topic-list .topic-item.active {
-        color: var(--vcp-ui-text-0);
-        background: var(--vcp-ui-selection-bg);
-        backdrop-filter: none;
-        -webkit-backdrop-filter: none;
-        box-shadow: var(--vcp-ui-sidebar-item-shadow);
+        color: var(--vcp-ui-text-0, var(--vcp-ui-port-color-ffffff));
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-12);
+        box-shadow: none;
     }
 
-    html .vcp-ui-scope.sidebar .agent-list li.active .agent-name {
-        color: var(--vcp-ui-text-0);
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .agent-list li.active,
+    html body.light-theme .vcp-ui-scope.sidebar .agent-list li.active,
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .topic-list .topic-item.active,
+    html body.light-theme .vcp-ui-scope.sidebar .topic-list .topic-item.active {
+        color: var(--vcp-ui-port-color-0f172a);
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-08);
+        box-shadow: none;
     }
 
     html .vcp-ui-scope.sidebar .agent-list img.avatar,
     html .vcp-ui-scope.sidebar .topic-list .topic-item img.avatar,
     html .vcp-ui-scope.sidebar .agent-list li.active img.avatar {
-        flex: 0 0 auto;
-        width: var(--vcp-ui-sidebar-avatar-size);
-        height: var(--vcp-ui-sidebar-avatar-size);
-        margin-right: var(--vcp-ui-space-2);
+        flex: 0 0 26px;
+        width: 26px;
+        height: 26px;
+        margin-right: 8px;
         border: 0;
+        border-radius: var(--vcp-ui-radius-full, 9999px);
+        box-shadow: inset 0 0 0 1px var(--vcp-ui-port-color-rgba-255-255-255-0-1);
         object-fit: cover;
     }
 
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .agent-list img.avatar,
+    html body.light-theme .vcp-ui-scope.sidebar .agent-list img.avatar,
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .topic-list .topic-item img.avatar,
+    html body.light-theme .vcp-ui-scope.sidebar .topic-list .topic-item img.avatar {
+        box-shadow: inset 0 0 0 1px var(--vcp-ui-port-color-rgba-0-0-0-0-08);
+    }
+
     html .vcp-ui-scope.sidebar .agent-list .agent-name,
     html .vcp-ui-scope.sidebar .topic-list .topic-item .agent-name,
     html .vcp-ui-scope.sidebar .topic-list .topic-title-display,
@@ -462,14 +515,43 @@
         flex: 1 1 auto;
         min-width: 0;
         padding-bottom: 0;
-        color: var(--vcp-ui-text-0);
-        font-size: var(--vcp-ui-sidebar-font-size);
-        line-height: var(--vcp-ui-line-compact);
+        color: var(--vcp-ui-text-1, var(--vcp-ui-port-color-rgba-255-255-255-0-75));
+        font-size: var(--vcp-ui-sidebar-font-size, 13.5px);
+        font-weight: 500;
+        line-height: 1.25;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
 
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .agent-list .agent-name,
+    html body.light-theme .vcp-ui-scope.sidebar .agent-list .agent-name,
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .topic-list .topic-item .agent-name,
+    html body.light-theme .vcp-ui-scope.sidebar .topic-list .topic-item .agent-name,
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .topic-list .topic-title-display,
+    html body.light-theme .vcp-ui-scope.sidebar .topic-list .topic-title-display,
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .topic-list .topic-name,
+    html body.light-theme .vcp-ui-scope.sidebar .topic-list .topic-name {
+        color: var(--vcp-ui-port-color-334155);
+    }
+
+    html .vcp-ui-scope.sidebar .agent-list li.active .agent-name,
+    html .vcp-ui-scope.sidebar .topic-list .topic-item.active .topic-title-display,
+    html .vcp-ui-scope.sidebar .topic-list .topic-item.active .topic-name {
+        color: var(--vcp-ui-text-0, var(--vcp-ui-port-color-ffffff));
+        font-weight: 600;
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .agent-list li.active .agent-name,
+    html body.light-theme .vcp-ui-scope.sidebar .agent-list li.active .agent-name,
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .topic-list .topic-item.active .topic-title-display,
+    html body.light-theme .vcp-ui-scope.sidebar .topic-list .topic-item.active .topic-title-display,
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .topic-list .topic-item.active .topic-name,
+    html body.light-theme .vcp-ui-scope.sidebar .topic-list .topic-item.active .topic-name {
+        color: var(--vcp-ui-port-color-0f172a);
+        font-weight: 600;
+    }
+
     html .vcp-ui-scope.sidebar .topic-list .topic-item::before,
     html .vcp-ui-scope.sidebar .topic-list .topic-item .message-count::after {
         display: none;
@@ -478,34 +560,42 @@
     html .vcp-ui-scope.sidebar .topic-list .topic-item .message-count {
         flex: 0 0 auto;
         min-width: 0;
-        margin-left: var(--vcp-ui-space-2);
-        padding: 2px 6px;
+        margin-left: 6px;
+        padding: 1px 6px;
         border: 0;
-        border-radius: var(--vcp-ui-radius-full);
-        color: var(--vcp-ui-text-2);
-        background: var(--vcp-ui-fill-1);
-        backdrop-filter: none;
-        -webkit-backdrop-filter: none;
-        box-shadow: none;
-        font-family: inherit;
-        font-size: var(--vcp-ui-font-caption);
+        border-radius: var(--vcp-ui-radius-full, 9999px);
+        color: var(--vcp-ui-text-2, var(--vcp-ui-port-color-rgba-255-255-255-0-5));
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-08);
+        font-size: calc(var(--vcp-ui-font-size) - 3px);
         font-weight: 500;
-        line-height: var(--vcp-ui-line-compact);
+        line-height: 1.2;
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope.sidebar .topic-list .topic-item .message-count,
+    html body.light-theme .vcp-ui-scope.sidebar .topic-list .topic-item .message-count {
+        color: var(--vcp-ui-port-color-64748b);
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-05);
     }
 
     html .vcp-ui-scope .sidebar-actions {
         display: none;
     }
 
+    html .vcp-ui-scope.sidebar:not(.avatar-only) {
+        padding-right: 0;
+        padding-bottom: 0;
+    }
+
     html .vcp-ui-scope .next-ui-account-dock {
         position: relative;
-        width: calc(100% - var(--vcp-ui-sidebar-list-gutter) - var(--vcp-ui-sidebar-list-gutter));
-        min-height: var(--vcp-ui-sidebar-row-height);
-        margin: var(--vcp-ui-space-2) var(--vcp-ui-sidebar-list-gutter) 0;
+        width: 100%;
+        margin-top: auto;
+        padding: 8px 12px 16px 16px;
         display: flex;
         align-items: center;
-        gap: var(--vcp-ui-space-1);
+        gap: 8px;
         flex: 0 0 auto;
+        box-sizing: border-box;
     }
 
     html .vcp-ui-scope .next-ui-account-trigger,
@@ -519,50 +609,75 @@
         cursor: pointer;
     }
 
+    /* ZCode Profile Ghost Button */
     html .vcp-ui-scope .next-ui-account-trigger {
-        height: var(--vcp-ui-sidebar-row-height);
+        height: 32px;
         min-width: 0;
-        padding: 0 var(--vcp-ui-space-2) 0 var(--vcp-ui-sidebar-account-left-padding);
+        padding: 0 8px 0 0;
         display: flex;
         align-items: center;
-        gap: var(--vcp-ui-space-2);
-        flex: 1;
-        border-radius: var(--vcp-ui-radius-md);
+        gap: 8px;
+        flex: 1 1 auto;
+        border-radius: 16px 8px 8px 16px;
+        border: 0;
+        background: transparent;
         text-align: left;
+        box-sizing: border-box;
+        transition: background var(--vcp-ui-transition-fast), color var(--vcp-ui-transition-fast);
     }
 
     html .vcp-ui-scope .next-ui-account-trigger:hover,
-    html .vcp-ui-scope .next-ui-account-trigger[aria-expanded="true"],
-    html .vcp-ui-scope .next-ui-account-settings:hover {
+    html .vcp-ui-scope .next-ui-account-trigger[aria-expanded="true"] {
         color: var(--vcp-ui-text-0);
-        background: var(--vcp-ui-fill-0);
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-08);
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-trigger:hover,
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-trigger[aria-expanded="true"],
+    html body.light-theme .vcp-ui-scope .next-ui-account-trigger:hover,
+    html body.light-theme .vcp-ui-scope .next-ui-account-trigger[aria-expanded="true"] {
+        color: var(--vcp-ui-port-color-0f172a);
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-05);
     }
 
+    /* ZCode 32px Circular Avatar */
     html .vcp-ui-scope #nextUiAccountAvatar {
         width: var(--vcp-ui-sidebar-avatar-size);
         height: var(--vcp-ui-sidebar-avatar-size);
         flex: 0 0 var(--vcp-ui-sidebar-avatar-size);
-        border: 1px solid var(--vcp-ui-border);
-        border-radius: var(--vcp-ui-radius-full);
-        background: var(--vcp-ui-bg-2);
+        border-radius: var(--vcp-ui-radius-full, 9999px);
+        box-shadow: inset 0 0 0 1px var(--vcp-ui-port-color-rgba-255-255-255-0-1);
+        background: var(--vcp-ui-bg-2, var(--vcp-ui-port-color-26262b));
         object-fit: cover;
+        display: block;
     }
 
+    html body[data-vcp-theme="light"] .vcp-ui-scope #nextUiAccountAvatar,
+    html body.light-theme .vcp-ui-scope #nextUiAccountAvatar {
+        box-shadow: inset 0 0 0 1px var(--vcp-ui-port-color-rgba-0-0-0-0-08);
+    }
+
+    /* ZCode Semi-Bold Username */
     html .vcp-ui-scope #nextUiAccountName {
         min-width: 0;
+        flex: 1 1 auto;
         overflow: hidden;
-        color: inherit;
-        font-size: var(--vcp-ui-font-helper);
+        color: var(--vcp-ui-text-0, var(--vcp-ui-port-color-f8fafc));
+        font-size: calc(var(--vcp-ui-font-size) - 0.5px);
         font-weight: 600;
         text-overflow: ellipsis;
         white-space: nowrap;
+        line-height: 1.25;
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope #nextUiAccountName,
+    html body.light-theme .vcp-ui-scope #nextUiAccountName {
+        color: var(--vcp-ui-port-color-0f172a);
     }
 
+    /* ZCode hides chevron arrow in bottom profile */
     html .vcp-ui-scope .next-ui-account-expand-icon {
-        margin-left: auto;
-        color: var(--vcp-ui-text-3);
-        font-size: var(--vcp-ui-icon-sm);
-        transition: transform var(--vcp-ui-transition-fast);
+        display: none;
     }
 
     html .vcp-ui-scope svg.next-ui-account-expand-icon,
@@ -572,103 +687,240 @@
         flex: 0 0 14px;
     }
 
-    html .vcp-ui-scope .next-ui-account-trigger[aria-expanded="true"] .next-ui-account-expand-icon {
-        transform: rotate(180deg);
-    }
-
+    /* Settings Action Button (32px × 32px matching ZCode size="icon-lg") */
     html .vcp-ui-scope .next-ui-account-settings {
-        width: var(--vcp-ui-sidebar-row-height);
-        height: var(--vcp-ui-sidebar-row-height);
+        width: 32px;
+        height: 32px;
+        flex: 0 0 32px;
         padding: 0;
-        display: grid;
-        place-items: center;
-        flex: 0 0 var(--vcp-ui-sidebar-row-height);
-        border-radius: var(--vcp-ui-radius-md);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--vcp-ui-radius-md, 8px);
+        border: 0;
+        background: transparent;
+        color: var(--vcp-ui-text-2, var(--vcp-ui-port-color-rgba-255-255-255-0-65));
+        transition: background var(--vcp-ui-transition-fast), color var(--vcp-ui-transition-fast);
     }
 
-    html .vcp-ui-scope .next-ui-account-settings .vcp-ui-icon {
-        font-size: var(--vcp-ui-icon-md);
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-settings,
+    html body.light-theme .vcp-ui-scope .next-ui-account-settings {
+        color: var(--vcp-ui-port-color-64748b);
+    }
+
+    html .vcp-ui-scope .next-ui-account-settings:hover {
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-08);
+        color: var(--vcp-ui-text-0, var(--vcp-ui-port-color-ffffff));
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-settings:hover,
+    html body.light-theme .vcp-ui-scope .next-ui-account-settings:hover {
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-05);
+        color: var(--vcp-ui-port-color-0f172a);
+    }
+
+    html .vcp-ui-scope .next-ui-account-settings svg {
+        width: 16px;
+        height: 16px;
+        flex: 0 0 16px;
+    }
+
+    /* --- ZCode Parity: Account & Settings Popover Menu --- */
+    @keyframes nextUiMenuFadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(3px) scale(0.985);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
     }
 
     html .vcp-ui-scope .next-ui-account-menu {
         position: absolute;
         z-index: 80;
-        right: 0;
-        bottom: calc(100% + var(--vcp-ui-space-2));
-        left: 0;
+        left: 12px;
+        right: 12px;
+        bottom: calc(100% + 6px);
         max-height: min(70vh, 560px);
-        padding: var(--vcp-ui-space-2);
+        padding: 4px;
+        display: none;
         overflow-y: auto;
         overscroll-behavior: contain;
-        border: 1px solid var(--vcp-ui-border);
-        border-radius: var(--vcp-ui-radius-card);
-        color: var(--vcp-ui-text-1);
-        background: var(--vcp-ui-bg-1);
-        box-shadow: var(--vcp-ui-shadow-lg);
+        border: 1px solid var(--vcp-ui-port-color-rgba-255-255-255-0-08);
+        border-radius: 8px;
+        color: var(--vcp-ui-text-0, var(--vcp-ui-port-color-f8fafc));
+        background: var(--vcp-ui-port-color-222225);
+        backdrop-filter: blur(20px) saturate(180%);
+        -webkit-backdrop-filter: blur(20px) saturate(180%);
+        box-shadow: 0 6px 20px -2px var(--vcp-ui-port-color-rgba-0-0-0-0-4), 0 2px 8px -1px var(--vcp-ui-port-color-rgba-0-0-0-0-25);
+        box-sizing: border-box;
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-menu,
+    html body.light-theme .vcp-ui-scope .next-ui-account-menu {
+        background: var(--vcp-ui-port-color-ffffff);
+        border-color: var(--vcp-ui-port-color-rgba-0-0-0-0-08);
+        color: var(--vcp-ui-port-color-0f172a);
+        box-shadow: 0 4px 16px -2px var(--vcp-ui-port-color-rgba-0-0-0-0-08), 0 2px 6px -1px var(--vcp-ui-port-color-rgba-0-0-0-0-04);
     }
 
     html .vcp-ui-scope .next-ui-account-menu:not([hidden]) {
         display: grid;
-        gap: var(--vcp-ui-space-1);
+        gap: 2px;
+        animation: nextUiMenuFadeIn 0.12s cubic-bezier(0.16, 1, 0.3, 1);
     }
 
     html .vcp-ui-scope .next-ui-account-menu-item,
     html .vcp-ui-scope .next-ui-account-submenu-item {
         width: 100%;
-        min-height: var(--vcp-ui-sidebar-row-height);
-        padding: 0 var(--vcp-ui-space-2);
+        height: 32px;
+        min-height: 32px;
+        padding: 0 8px;
         display: flex;
         align-items: center;
-        gap: var(--vcp-ui-space-2);
-        border-radius: var(--vcp-ui-radius-sm);
-        font-size: var(--vcp-ui-font-helper);
+        gap: 8px;
+        border-radius: 6px;
+        font-size: calc(var(--vcp-ui-font-size) - 1px);
+        font-weight: 500;
+        line-height: 1.3;
         text-align: left;
+        color: var(--vcp-ui-text-0, var(--vcp-ui-port-color-f8fafc));
+        background: transparent;
+        border: 0;
+        box-sizing: border-box;
+        cursor: pointer;
+        transition: background var(--vcp-ui-transition-fast), color var(--vcp-ui-transition-fast);
+        outline: none;
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-menu-item,
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-submenu-item,
+    html body.light-theme .vcp-ui-scope .next-ui-account-menu-item,
+    html body.light-theme .vcp-ui-scope .next-ui-account-submenu-item {
+        color: var(--vcp-ui-port-color-0f172a);
     }
 
     html .vcp-ui-scope .next-ui-account-menu-item:hover,
     html .vcp-ui-scope .next-ui-account-menu-item[aria-expanded="true"],
     html .vcp-ui-scope .next-ui-account-submenu-item:hover,
     html .vcp-ui-scope .next-ui-account-submenu-item.active {
-        color: var(--vcp-ui-text-0);
-        background: var(--vcp-ui-fill-1);
+        color: var(--vcp-ui-port-color-ffffff);
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-08);
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-menu-item:hover,
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-menu-item[aria-expanded="true"],
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-submenu-item:hover,
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-submenu-item.active,
+    html body.light-theme .vcp-ui-scope .next-ui-account-menu-item:hover,
+    html body.light-theme .vcp-ui-scope .next-ui-account-menu-item[aria-expanded="true"],
+    html body.light-theme .vcp-ui-scope .next-ui-account-submenu-item:hover,
+    html body.light-theme .vcp-ui-scope .next-ui-account-submenu-item.active {
+        color: var(--vcp-ui-port-color-0f172a);
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-05);
+    }
+
+    html .vcp-ui-scope .next-ui-account-menu-item:active,
+    html .vcp-ui-scope .next-ui-account-submenu-item:active {
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-12);
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-menu-item:active,
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-submenu-item:active,
+    html body.light-theme .vcp-ui-scope .next-ui-account-menu-item:active,
+    html body.light-theme .vcp-ui-scope .next-ui-account-submenu-item:active {
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-08);
     }
 
     html .vcp-ui-scope .next-ui-account-menu-item > .vcp-ui-icon:first-child,
     html .vcp-ui-scope .next-ui-account-submenu-item > .vcp-ui-icon:first-child {
-        width: var(--vcp-ui-icon-md);
-        flex: 0 0 var(--vcp-ui-icon-md);
-        font-size: var(--vcp-ui-icon-md);
+        width: 16px;
+        height: 16px;
+        flex: 0 0 16px;
+        font-size: calc(var(--vcp-ui-font-size) + 2px);
+        line-height: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--vcp-ui-port-color-rgba-255-255-255-0-7);
+        transition: color var(--vcp-ui-transition-fast);
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-menu-item > .vcp-ui-icon:first-child,
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-submenu-item > .vcp-ui-icon:first-child,
+    html body.light-theme .vcp-ui-scope .next-ui-account-menu-item > .vcp-ui-icon:first-child,
+    html body.light-theme .vcp-ui-scope .next-ui-account-submenu-item > .vcp-ui-icon:first-child {
+        color: var(--vcp-ui-port-color-475569);
+    }
+
+    html .vcp-ui-scope .next-ui-account-menu-item:hover > .vcp-ui-icon:first-child,
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-menu-item:hover > .vcp-ui-icon:first-child,
+    html body.light-theme .vcp-ui-scope .next-ui-account-menu-item:hover > .vcp-ui-icon:first-child {
+        color: inherit;
     }
 
     html .vcp-ui-scope .next-ui-account-menu-label {
         min-width: 0;
-        flex: 1;
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     html .vcp-ui-scope .next-ui-account-menu-value {
-        color: var(--vcp-ui-text-3);
-        font-size: var(--vcp-ui-font-caption);
+        flex: 0 0 auto;
+        margin-right: 2px;
+        color: var(--vcp-ui-port-color-rgba-255-255-255-0-5);
+        font-size: calc(var(--vcp-ui-font-size) - 2px);
+        font-weight: 400;
+        line-height: 1;
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-menu-value,
+    html body.light-theme .vcp-ui-scope .next-ui-account-menu-value {
+        color: var(--vcp-ui-port-color-64748b);
     }
 
     html .vcp-ui-scope .next-ui-account-menu-chevron {
-        color: var(--vcp-ui-text-3);
-        font-size: var(--vcp-ui-icon-sm);
+        flex: 0 0 14px;
+        width: 14px;
+        height: 14px;
+        color: var(--vcp-ui-port-color-rgba-255-255-255-0-35);
+        transition: color var(--vcp-ui-transition-fast);
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-menu-chevron,
+    html body.light-theme .vcp-ui-scope .next-ui-account-menu-chevron {
+        color: var(--vcp-ui-port-color-94a3b8);
+    }
+
+    html .vcp-ui-scope .next-ui-account-menu-item:hover .next-ui-account-menu-chevron,
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-menu-item:hover .next-ui-account-menu-chevron,
+    html body.light-theme .vcp-ui-scope .next-ui-account-menu-item:hover .next-ui-account-menu-chevron {
+        color: inherit;
     }
 
     html .vcp-ui-scope .next-ui-account-submenu {
-        padding: var(--vcp-ui-space-1) 0 var(--vcp-ui-space-1) var(--vcp-ui-space-4);
-        border-bottom: 1px solid var(--vcp-ui-border);
+        padding: 2px 0 2px 16px;
+        border-bottom: 1px solid var(--vcp-ui-port-color-rgba-255-255-255-0-08);
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope .next-ui-account-submenu,
+    html body.light-theme .vcp-ui-scope .next-ui-account-submenu {
+        border-bottom-color: var(--vcp-ui-port-color-rgba-0-0-0-0-08);
     }
 
     html .vcp-ui-scope .next-ui-account-submenu:not([hidden]) {
         display: grid;
-        gap: var(--vcp-ui-space-1);
+        gap: 2px;
     }
 
     html .vcp-ui-scope .next-ui-account-option-check {
         margin-left: auto;
         color: var(--vcp-ui-accent);
-        font-size: var(--vcp-ui-icon-sm);
+        font-size: var(--vcp-ui-font-size);
         opacity: 0;
     }
 
@@ -676,11 +928,22 @@
         opacity: 1;
     }
 
-    html .vcp-ui-scope :is(.next-ui-account-trigger, .next-ui-account-settings, .next-ui-account-menu-item, .next-ui-account-submenu-item):focus-visible {
+    html .vcp-ui-scope :is(.next-ui-account-trigger, .next-ui-account-settings):focus-visible {
         outline: 2px solid var(--vcp-ui-focus-ring);
         outline-offset: 2px;
     }
 
+    html .vcp-ui-scope :is(.next-ui-account-menu-item, .next-ui-account-submenu-item):focus-visible {
+        outline: none;
+        background: var(--vcp-ui-port-color-rgba-255-255-255-0-08);
+        color: var(--vcp-ui-port-color-ffffff);
+    }
+
+    html body[data-vcp-theme="light"] .vcp-ui-scope :is(.next-ui-account-menu-item, .next-ui-account-submenu-item):focus-visible, html body.light-theme .vcp-ui-scope :is(.next-ui-account-menu-item, .next-ui-account-submenu-item):focus-visible {
+        background: var(--vcp-ui-port-color-rgba-0-0-0-0-05);
+        color: var(--vcp-ui-port-color-0f172a);
+    }
+
     html .vcp-ui-scope.sidebar.avatar-only .next-ui-account-dock {
         display: none;
     }
diff --git a/styles/ui-system/tokens.css b/styles/ui-system/tokens.css
index 2689f5be3..96c97e8b6 100644
--- a/styles/ui-system/tokens.css
+++ b/styles/ui-system/tokens.css
@@ -55,6 +55,38 @@
         --vcp-ui-text-2: var(--vcp-ui-text-secondary);
         --vcp-ui-text-3: color-mix(in srgb, var(--vcp-ui-text-secondary) 72%, transparent);
 
+        /* ZCode-inspired roles keep the existing theme palette as authority. */
+        --vcp-ui-color-background: var(--vcp-ui-bg-0);
+        --vcp-ui-color-sidebar: var(--vcp-ui-bg-1);
+        --vcp-ui-color-panel: var(--vcp-ui-bg-1);
+        --vcp-ui-color-surface: var(--vcp-ui-bg-2);
+        --vcp-ui-color-card: var(--vcp-ui-bg-2);
+        --vcp-ui-color-popover: var(--vcp-ui-bg-3);
+        --vcp-ui-color-menu: var(--vcp-ui-bg-3);
+        --vcp-ui-color-input: var(--vcp-ui-bg-input);
+        --vcp-ui-color-input-focused: color-mix(in srgb, var(--vcp-ui-bg-input) 92%, var(--vcp-ui-text-primary));
+        /* ZCode Zai Dark composer palette; geometry remains owned by chat-input.css. */
+        --vcp-ui-composer-input: #2b2b2b;
+        --vcp-ui-composer-border: rgba(255, 255, 255, 0.1);
+        --vcp-ui-composer-border-active: rgba(255, 255, 255, 0.15);
+        --vcp-ui-composer-foreground: #d4d4d4;
+        --vcp-ui-composer-placeholder: color-mix(in oklab, #d4d4d4 30%, transparent);
+        --vcp-ui-color-foreground: var(--vcp-ui-text-0);
+        --vcp-ui-color-foreground-subtle: var(--vcp-ui-text-2);
+        --vcp-ui-color-foreground-subtlest: var(--vcp-ui-text-3);
+        --vcp-ui-color-border: var(--vcp-ui-border);
+        --vcp-ui-color-brand: var(--vcp-ui-accent);
+        --vcp-ui-color-hover: var(--vcp-ui-fill-0);
+        --vcp-ui-color-selected: var(--vcp-ui-selection-bg);
+
+        --vcp-ui-font-size: 14px;
+        --vcp-ui-text-xl: calc(var(--vcp-ui-font-size) + 4px);
+        --vcp-ui-text-lg: calc(var(--vcp-ui-font-size) + 2px);
+        --vcp-ui-text-base: var(--vcp-ui-font-size);
+        --vcp-ui-text-caption: calc(var(--vcp-ui-font-size) - 1px);
+        --vcp-ui-text-sm: calc(var(--vcp-ui-font-size) - 2px);
+        --vcp-ui-text-xs: calc(var(--vcp-ui-font-size) - 4px);
+
         --vcp-ui-success: var(--success-color, var(--vcp-ui-palette-green));
         --vcp-ui-warning: var(--warning-color, var(--vcp-ui-palette-amber));
         --vcp-ui-danger: var(--danger-color, var(--vcp-ui-palette-red));
@@ -70,6 +102,13 @@
         --vcp-ui-fill-0: color-mix(in srgb, var(--vcp-ui-text-primary) 5%, transparent);
         --vcp-ui-fill-1: color-mix(in srgb, var(--vcp-ui-text-primary) 8%, transparent);
         --vcp-ui-fill-2: color-mix(in srgb, var(--vcp-ui-text-primary) 12%, transparent);
+        /* Neutral hover fill shared with the composer's model picker and mic
+           button, which fall back to this grey when --vcp-ui-interactive-hover
+           is unset. */
+        --vcp-ui-composer-control-hover: rgba(127, 127, 127, 0.16);
+        /* Soft lift for menus that open from the composer: a short contact
+           shadow plus a wide faint halo, no hard drop. */
+        --vcp-ui-composer-popover-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.04), 0 0 20px 0 rgba(0, 0, 0, 0.05);
         --vcp-ui-disabled-bg: color-mix(in srgb, var(--vcp-ui-bg-input) 70%, transparent);
         --vcp-ui-disabled-border: color-mix(in srgb, var(--vcp-ui-border) 60%, transparent);
         --vcp-ui-backdrop: oklch(0 0 0 / 0.58);
@@ -165,7 +204,7 @@
         --vcp-ui-control-hover: var(--vcp-ui-surface-strong);
         --vcp-ui-control-focus: var(--vcp-ui-border-strong);
         --vcp-ui-row-height: 44px;
-        --vcp-ui-shell-header-height: 46px;
+        --vcp-ui-shell-header-height: 48px;
         --vcp-ui-panel-padding: var(--vcp-ui-space-4);
         --vcp-ui-density-gap: var(--vcp-ui-space-3);
         --vcp-ui-scrollbar-size: 6px;
@@ -179,15 +218,15 @@
         --vcp-ui-message-max-width-wide: 92%;
         --vcp-ui-message-max-width-notifications: 90%;
         --vcp-ui-message-max-width-wide-notifications: 96%;
-        --vcp-ui-sidebar-row-height: var(--vcp-appearance-sidebar-row-height, 46px);
-        --vcp-ui-sidebar-avatar-size: var(--vcp-appearance-sidebar-avatar-size, clamp(24px, calc(var(--vcp-ui-sidebar-row-height) - 14px), 44px));
-        --vcp-ui-sidebar-font-size: 14.5px;
-        --vcp-ui-sidebar-item-radius: 10px;
+        --vcp-ui-sidebar-row-height: var(--vcp-appearance-sidebar-row-height, 36px);
+        --vcp-ui-sidebar-avatar-size: var(--vcp-appearance-sidebar-avatar-size, 26px);
+        --vcp-ui-sidebar-font-size: 13.5px;
+        --vcp-ui-sidebar-item-radius: 8px;
         --vcp-ui-sidebar-list-gutter: 8px;
-        --vcp-ui-sidebar-account-left-padding: 6px;
-        --vcp-ui-sidebar-item-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
-        --vcp-ui-send-button-size: 36px;
-        --vcp-ui-send-icon-size: 24px;
+        --vcp-ui-sidebar-account-left-padding: 0;
+        --vcp-ui-sidebar-item-shadow: none;
+        --vcp-ui-send-button-size: 34px;
+        --vcp-ui-send-icon-size: 20px;
         --vcp-ui-send-button-shadow: 0 6px 18px oklch(0 0 0 / 0.18);
         --vcp-ui-message-user-bg: var(--user-bubble-bg, var(--vcp-ui-accent));
         --vcp-ui-message-user-text: var(--user-text, var(--vcp-ui-on-accent));
@@ -236,6 +275,30 @@
         --vcp-ui-text-2: var(--vcp-ui-text-secondary);
         --vcp-ui-text-3: color-mix(in srgb, var(--vcp-ui-text-secondary) 72%, transparent);
 
+        /* Repeat theme-derived roles after the light palette overrides. */
+        --vcp-ui-color-background: var(--vcp-ui-bg-0);
+        --vcp-ui-color-sidebar: var(--vcp-ui-bg-1);
+        --vcp-ui-color-panel: var(--vcp-ui-bg-1);
+        --vcp-ui-color-surface: var(--vcp-ui-bg-2);
+        --vcp-ui-color-card: var(--vcp-ui-bg-2);
+        --vcp-ui-color-popover: var(--vcp-ui-bg-3);
+        --vcp-ui-color-menu: var(--vcp-ui-bg-3);
+        --vcp-ui-color-input: var(--vcp-ui-bg-input);
+        --vcp-ui-color-input-focused: color-mix(in srgb, var(--vcp-ui-bg-input) 92%, var(--vcp-ui-text-primary));
+        /* ZCode Zai Light composer palette. */
+        --vcp-ui-composer-input: #ffffff;
+        --vcp-ui-composer-border: rgba(13, 13, 13, 0.1);
+        --vcp-ui-composer-border-active: rgba(13, 13, 13, 0.15);
+        --vcp-ui-composer-foreground: #262626;
+        --vcp-ui-composer-placeholder: color-mix(in oklab, #262626 40%, transparent);
+        --vcp-ui-color-foreground: var(--vcp-ui-text-0);
+        --vcp-ui-color-foreground-subtle: var(--vcp-ui-text-2);
+        --vcp-ui-color-foreground-subtlest: var(--vcp-ui-text-3);
+        --vcp-ui-color-border: var(--vcp-ui-border);
+        --vcp-ui-color-brand: var(--vcp-ui-accent);
+        --vcp-ui-color-hover: var(--vcp-ui-fill-0);
+        --vcp-ui-color-selected: var(--vcp-ui-selection-bg);
+
         --vcp-ui-success: var(--success-color, var(--vcp-ui-palette-green));
         --vcp-ui-warning: var(--warning-color, var(--vcp-ui-palette-amber));
         --vcp-ui-danger: var(--danger-color, var(--vcp-ui-palette-red));
@@ -336,7 +399,7 @@
         --vcp-ui-control-hover: var(--vcp-ui-surface-strong);
         --vcp-ui-control-focus: var(--vcp-ui-border-strong);
         --vcp-ui-row-height: 44px;
-        --vcp-ui-shell-header-height: 46px;
+        --vcp-ui-shell-header-height: 48px;
         --vcp-ui-panel-padding: var(--vcp-ui-space-4);
         --vcp-ui-density-gap: var(--vcp-ui-space-3);
         --vcp-ui-scrollbar-size: 6px;
@@ -350,15 +413,15 @@
         --vcp-ui-message-max-width-wide: 92%;
         --vcp-ui-message-max-width-notifications: 90%;
         --vcp-ui-message-max-width-wide-notifications: 96%;
-        --vcp-ui-sidebar-row-height: var(--vcp-appearance-sidebar-row-height, 46px);
-        --vcp-ui-sidebar-avatar-size: var(--vcp-appearance-sidebar-avatar-size, clamp(24px, calc(var(--vcp-ui-sidebar-row-height) - 14px), 44px));
-        --vcp-ui-sidebar-font-size: 14.5px;
-        --vcp-ui-sidebar-item-radius: 10px;
+        --vcp-ui-sidebar-row-height: var(--vcp-appearance-sidebar-row-height, 36px);
+        --vcp-ui-sidebar-avatar-size: var(--vcp-appearance-sidebar-avatar-size, 26px);
+        --vcp-ui-sidebar-font-size: 13.5px;
+        --vcp-ui-sidebar-item-radius: 8px;
         --vcp-ui-sidebar-list-gutter: 8px;
-        --vcp-ui-sidebar-account-left-padding: 6px;
-        --vcp-ui-sidebar-item-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
-        --vcp-ui-send-button-size: 36px;
-        --vcp-ui-send-icon-size: 24px;
+        --vcp-ui-sidebar-account-left-padding: 0;
+        --vcp-ui-sidebar-item-shadow: none;
+        --vcp-ui-send-button-size: 34px;
+        --vcp-ui-send-icon-size: 20px;
         --vcp-ui-send-button-shadow: 0 6px 18px oklch(0 0 0 / 0.18);
         --vcp-ui-message-user-bg: var(--user-bubble-bg, var(--vcp-ui-accent));
         --vcp-ui-message-user-text: var(--user-text, var(--vcp-ui-on-accent));
@@ -411,3 +474,157 @@
         }
     }
 }
+
+/* ZCode port primitives: central ownership preserves reviewed light/dark colors. */
+:root {
+    --vcp-ui-port-color-rgba-0-0-0-0-35: rgba(0, 0, 0, 0.35);
+    --vcp-ui-port-color-888: #888;
+    --vcp-ui-port-color-15191f: #15191f;
+    --vcp-ui-port-color-fde68a: #fde68a;
+    --vcp-ui-port-color-262626: #262626;
+    --vcp-ui-port-color-f59e0b: #f59e0b;
+    --vcp-ui-port-color-1a1a1a: #1a1a1a;
+    --vcp-ui-port-color-rgba-0-0-0-0-14: rgba(0, 0, 0, 0.14);
+    --vcp-ui-port-color-rgba-127-127-127-0-3: rgba(127, 127, 127, 0.3);
+    --vcp-ui-port-color-3b82f6: #3b82f6;
+    --vcp-ui-port-color-fff: #fff;
+    --vcp-ui-port-color-rgba-0-0-0-0-28: rgba(0, 0, 0, 0.28);
+    --vcp-ui-port-color-000: #000;
+    --vcp-ui-port-color-22a06b: #22a06b;
+    --vcp-ui-port-color-e5484d: #e5484d;
+    --vcp-ui-port-color-2b3441: #2b3441;
+    --vcp-ui-port-color-f0f4f8: #f0f4f8;
+    --vcp-ui-port-color-rgba-0-0-0-0-22: rgba(0, 0, 0, 0.22);
+    --vcp-ui-port-color-rgba-0-0-0-0-16: rgba(0, 0, 0, 0.16);
+    --vcp-ui-port-color-1f252e: #1f252e;
+    --vcp-ui-port-color-rgba-0-0-0-0-18: rgba(0, 0, 0, 0.18);
+    --vcp-ui-port-color-d4d4d4: #d4d4d4;
+    --vcp-ui-port-color-ffffff: #ffffff;
+    --vcp-ui-port-color-rgba-255-255-255-0-05: rgba(255, 255, 255, 0.05);
+    --vcp-ui-port-color-rgba-255-255-255-0-10: rgba(255, 255, 255, 0.10);
+    --vcp-ui-port-color-000000: #000000;
+    --vcp-ui-port-color-rgba-0-0-0-0-05: rgba(0, 0, 0, 0.05);
+    --vcp-ui-port-color-rgba-0-0-0-0-08: rgba(0, 0, 0, 0.08);
+    --vcp-ui-port-color-rgba-255-255-255-0-12: rgba(255, 255, 255, 0.12);
+    --vcp-ui-port-color-f1f5f9: #f1f5f9;
+    --vcp-ui-port-color-rgba-0-0-0-0-12: rgba(0, 0, 0, 0.12);
+    --vcp-ui-port-color-0f172a: #0f172a;
+    --vcp-ui-port-color-1e1e2e: #1e1e2e;
+    --vcp-ui-port-color-94a3b8: #94a3b8;
+    --vcp-ui-port-color-rgba-255-255-255-0-07: rgba(255, 255, 255, 0.07);
+    --vcp-ui-port-color-rgba-0-0-0-0-06: rgba(0, 0, 0, 0.06);
+    --vcp-ui-port-color-rgba-255-255-255-0-45: rgba(255, 255, 255, 0.45);
+    --vcp-ui-port-color-22c55e: #22c55e;
+    --vcp-ui-port-color-ef4444: #ef4444;
+    --vcp-ui-port-color-rgba-255-255-255-0-5: rgba(255, 255, 255, 0.5);
+    --vcp-ui-port-color-rgba-255-255-255-0-6: rgba(255, 255, 255, 0.6);
+    --vcp-ui-port-color-rgba-34-197-94-0-14: rgba(34, 197, 94, 0.14);
+    --vcp-ui-port-color-rgba-239-68-68-0-14: rgba(239, 68, 68, 0.14);
+    --vcp-ui-port-color-rgba-127-127-127-0-1: rgba(127, 127, 127, 0.1);
+    --vcp-ui-port-color-rgba-255-255-255-0-4: rgba(255, 255, 255, 0.4);
+    --vcp-ui-port-color-rgba-255-255-255-0-35: rgba(255, 255, 255, 0.35);
+    --vcp-ui-port-color-rgba-127-127-127-0-16: rgba(127, 127, 127, 0.16);
+    --vcp-ui-port-color-rgba-0-0-0-0-2: rgba(0, 0, 0, 0.2);
+    --vcp-ui-port-color-rgba-250-204-21-0-38: rgba(250, 204, 21, 0.38);
+    --vcp-ui-port-color-rgba-249-115-22-0-62: rgba(249, 115, 22, 0.62);
+    --vcp-ui-port-color-rgba-217-119-6-0-12: rgba(217, 119, 6, 0.12);
+    --vcp-ui-port-color-rgba-127-127-127-0-25: rgba(127, 127, 127, 0.25);
+    --vcp-ui-port-color-rgba-241-245-249-0-6: rgba(241, 245, 249, 0.6);
+    --vcp-ui-port-color-a7afb1: #a7afb1;
+    --vcp-ui-port-color-2b2f31: #2b2f31;
+    --vcp-ui-port-color-e6e9ea: #e6e9ea;
+    --vcp-ui-port-color-rgba-0-0-0-0-25: rgba(0, 0, 0, 0.25);
+    --vcp-ui-port-color-rgba-0-0-0-0-1: rgba(0, 0, 0, 0.1);
+    --vcp-ui-port-color-fafafa: #fafafa;
+    --vcp-ui-port-color-f0f0f0: #f0f0f0;
+    --vcp-ui-port-color-rgba-220-38-38-0-1: rgba(220, 38, 38, 0.1);
+    --vcp-ui-port-color-rgba-255-255-255-0-22: rgba(255, 255, 255, 0.22);
+    --vcp-ui-port-color-rgba-255-255-255-0-08: rgba(255, 255, 255, 0.08);
+    --vcp-ui-port-color-rgba-255-255-255-0-65: rgba(255, 255, 255, 0.65);
+    --vcp-ui-port-color-475569: #475569;
+    --vcp-ui-port-color-rgba-241-245-249-0-4: rgba(241, 245, 249, 0.4);
+    --vcp-ui-port-color-64748b: #64748b;
+    --vcp-ui-port-color-rgba-241-245-249-0-7: rgba(241, 245, 249, 0.7);
+    --vcp-ui-port-color-rgba-0-0-0-0-04: rgba(0, 0, 0, 0.04);
+    --vcp-ui-port-color-rgba-255-255-255-0-1: rgba(255, 255, 255, 0.1);
+    --vcp-ui-port-color-rgba-255-255-255-0-9: rgba(255, 255, 255, 0.9);
+    --vcp-ui-port-color-2563eb: #2563eb;
+    --vcp-ui-port-color-rgba-37-99-235-0-12: rgba(37, 99, 235, 0.12);
+    --vcp-ui-port-color-rgba-37-99-235-0-25: rgba(37, 99, 235, 0.25);
+    --vcp-ui-port-color-1d4ed8: #1d4ed8;
+    --vcp-ui-port-color-dc2626: #dc2626;
+    --vcp-ui-port-color-rgba-245-158-11-0-12: rgba(245, 158, 11, 0.12);
+    --vcp-ui-port-color-rgba-245-158-11-0-3: rgba(245, 158, 11, 0.3);
+    --vcp-ui-port-color-b45309: #b45309;
+    --vcp-ui-port-color-rgba-245-158-11-0-15: rgba(245, 158, 11, 0.15);
+    --vcp-ui-port-color-rgba-245-158-11-0-35: rgba(245, 158, 11, 0.35);
+    --vcp-ui-port-color-rgba-255-255-255-0-06: rgba(255, 255, 255, 0.06);
+    --vcp-ui-port-color-rgba-241-245-249-0-75: rgba(241, 245, 249, 0.75);
+    --vcp-ui-port-color-18181b: #18181b;
+    --vcp-ui-port-color-rgba-241-245-249-0-5: rgba(241, 245, 249, 0.5);
+    --vcp-ui-port-color-rgba-0-0-0-0-55: rgba(0, 0, 0, 0.55);
+    --vcp-ui-port-color-rgba-255-255-255-0-04: rgba(255, 255, 255, 0.04);
+    --vcp-ui-port-color-rgba-0-0-0-0-03: rgba(0, 0, 0, 0.03);
+    --vcp-ui-port-color-rgba-255-255-255-0-09: rgba(255, 255, 255, 0.09);
+    --vcp-ui-port-color-rgba-255-255-255-0-18: rgba(255, 255, 255, 0.18);
+    --vcp-ui-port-color-rgba-0-0-0-0-5: rgba(0, 0, 0, 0.5);
+    --vcp-ui-port-color-rgba-0-0-0-0-3: rgba(0, 0, 0, 0.3);
+    --vcp-ui-port-color-rgba-255-255-255-0-15: rgba(255, 255, 255, 0.15);
+    --vcp-ui-port-color-rgba-59-130-246-0-4: rgba(59, 130, 246, 0.4);
+    --vcp-ui-port-color-rgba-59-130-246-0-5: rgba(59, 130, 246, 0.5);
+    --vcp-ui-port-color-rgba-255-255-255-0-02: rgba(255, 255, 255, 0.02);
+    --vcp-ui-port-color-rgba-0-0-0-0-02: rgba(0, 0, 0, 0.02);
+    --vcp-ui-port-color-rgba-255-255-255-0-2: rgba(255, 255, 255, 0.2);
+    --vcp-ui-port-color-f87171: #f87171;
+    --vcp-ui-port-color-rgba-239-68-68-0-15: rgba(239, 68, 68, 0.15);
+    --vcp-ui-port-color-rgba-255-255-255-0-7: rgba(255, 255, 255, 0.7);
+    --vcp-ui-port-color-rgba-59-130-246-0-15: rgba(59, 130, 246, 0.15);
+    --vcp-ui-port-color-60a5fa: #60a5fa;
+    --vcp-ui-port-color-rgba-59-130-246-0-25: rgba(59, 130, 246, 0.25);
+    --vcp-ui-port-color-rgba-37-99-235-0-08: rgba(37, 99, 235, 0.08);
+    --vcp-ui-port-color-rgba-37-99-235-0-2: rgba(37, 99, 235, 0.2);
+    --vcp-ui-port-color-rgba-0-0-0-0-15: rgba(0, 0, 0, 0.15);
+    --vcp-ui-port-color-rgba-34-197-94-0-12: rgba(34, 197, 94, 0.12);
+    --vcp-ui-port-color-86efac: #86efac;
+    --vcp-ui-port-color-rgba-34-197-94-0-15: rgba(34, 197, 94, 0.15);
+    --vcp-ui-port-color-15803d: #15803d;
+    --vcp-ui-port-color-rgba-239-68-68-0-12: rgba(239, 68, 68, 0.12);
+    --vcp-ui-port-color-fca5a5: #fca5a5;
+    --vcp-ui-port-color-b91c1c: #b91c1c;
+    --vcp-ui-port-color-rgba-255-255-255-0-03: rgba(255, 255, 255, 0.03);
+    --vcp-ui-port-color-rgba-255-255-255-0-8: rgba(255, 255, 255, 0.8);
+    --vcp-ui-port-color-334155: #334155;
+    --vcp-ui-port-color-14161a: #14161a;
+    --vcp-ui-port-color-rgba-255-255-255-0-3: rgba(255, 255, 255, 0.3);
+    --vcp-ui-port-color-rgba-255-255-255-0-16: rgba(255, 255, 255, 0.16);
+    --vcp-ui-port-color-1b1d22: #1b1d22;
+    --vcp-ui-port-color-rgba-255-255-255-0-75: rgba(255, 255, 255, 0.75);
+    --vcp-ui-port-color-26262b: #26262b;
+    --vcp-ui-port-color-f8fafc: #f8fafc;
+    --vcp-ui-port-color-222225: #222225;
+    --vcp-ui-port-color-rgba-0-0-0-0-4: rgba(0, 0, 0, 0.4);
+    --vcp-ui-port-color-rgba-127-127-127-0-18: rgba(127, 127, 127, 0.18);
+    --vcp-ui-port-color-737373: #737373;
+    --vcp-ui-port-color-a3a3a3: #a3a3a3;
+    --vcp-ui-port-color-f7f7f7: #f7f7f7;
+    --vcp-ui-port-color-efefef: #efefef;
+    --vcp-ui-port-color-e4e4e4: #e4e4e4;
+    --vcp-ui-port-color-16a34a: #16a34a;
+    --vcp-ui-port-color-d97706: #d97706;
+    --vcp-ui-port-color-rgba-0-0-0-0-6: rgba(0, 0, 0, 0.6);
+    --vcp-ui-port-color-a855f7: #a855f7;
+    --vcp-ui-port-color-2b2b2b: #2b2b2b;
+    --vcp-ui-port-color-363636: #363636;
+    --vcp-ui-port-color-222222: #222222;
+    --vcp-ui-port-color-e5e5e5: #e5e5e5;
+    --vcp-ui-port-color-414141: #414141;
+    --vcp-ui-port-color-4ade80: #4ade80;
+    --vcp-ui-port-color-fbbf24: #fbbf24;
+    --zcode-panel-border: rgba(255, 255, 255, 0.08);
+    --zcode-header-divider: rgba(255, 255, 255, 0.05)
+;
+}
+body[data-vcp-theme="light"] {
+    --zcode-panel-border: rgba(0, 0, 0, 0.08);
+    --zcode-header-divider: rgba(0, 0, 0, 0.05)
+}
diff --git a/styles/ui-system/webawesome-adapter.css b/styles/ui-system/webawesome-adapter.css
index d364cae1e..37eaec0f2 100644
--- a/styles/ui-system/webawesome-adapter.css
+++ b/styles/ui-system/webawesome-adapter.css
@@ -3,22 +3,22 @@ html .vcp-ui-scope .vcp-ui-wa-comparison.wa-light,
 html .vcp-ui-scope .vcp-ui-wa-comparison.wa-dark {
     --wa-font-family-body: inherit;
     --wa-font-family-heading: inherit;
-    --wa-font-size-s: var(--vcp-ui-font-caption);
-    --wa-font-size-m: var(--vcp-ui-font-body);
-    --wa-font-size-l: var(--vcp-ui-font-emphasis);
+    --wa-font-size-s: var(--vcp-ui-text-sm);
+    --wa-font-size-m: var(--vcp-ui-text-base);
+    --wa-font-size-l: var(--vcp-ui-text-lg);
     --wa-line-height-condensed: var(--vcp-ui-line-compact);
     --wa-line-height-normal: var(--vcp-ui-line-body);
     --wa-line-height-expanded: var(--vcp-ui-line-relaxed);
-    --wa-color-surface-raised: var(--vcp-ui-bg-secondary);
-    --wa-color-surface-default: var(--vcp-ui-bg-primary);
-    --wa-color-surface-lowered: var(--vcp-ui-bg-tertiary);
-    --wa-color-surface-border: var(--vcp-ui-border);
-    --wa-color-text-normal: var(--vcp-ui-text-primary);
-    --wa-color-text-quiet: var(--vcp-ui-text-secondary);
+    --wa-color-surface-raised: var(--vcp-ui-color-popover);
+    --wa-color-surface-default: var(--vcp-ui-color-background);
+    --wa-color-surface-lowered: var(--vcp-ui-color-surface);
+    --wa-color-surface-border: var(--vcp-ui-color-border);
+    --wa-color-text-normal: var(--vcp-ui-color-foreground);
+    --wa-color-text-quiet: var(--vcp-ui-color-foreground-subtle);
     --wa-color-text-link: var(--vcp-ui-text-accent);
     --wa-color-focus: var(--vcp-ui-control-focus);
-    --wa-color-brand-fill-loud: var(--vcp-ui-accent);
-    --wa-color-brand-border-loud: var(--vcp-ui-accent);
+    --wa-color-brand-fill-loud: var(--vcp-ui-color-brand);
+    --wa-color-brand-border-loud: var(--vcp-ui-color-brand);
     --wa-color-brand-on-loud: var(--vcp-ui-on-accent);
     --wa-color-neutral-fill-quiet: var(--vcp-ui-surface-soft);
     --wa-color-neutral-fill-normal: var(--vcp-ui-surface);
@@ -48,7 +48,7 @@ html .vcp-ui-scope .vcp-ui-wa-comparison.wa-dark {
     --wa-transition-normal: var(--vcp-ui-duration-normal);
     --wa-transition-slow: var(--vcp-ui-duration-slow);
     --wa-transition-easing: var(--vcp-ui-easing-standard);
-    --wa-form-control-background-color: var(--vcp-ui-control-bg);
+    --wa-form-control-background-color: var(--vcp-ui-color-input);
     --wa-form-control-border-color: var(--vcp-ui-control-border);
     --wa-form-control-border-radius: var(--vcp-ui-radius-control);
     --wa-form-control-height: var(--vcp-ui-control-md);
@@ -83,7 +83,7 @@ html .vcp-ui-scope wa-button.vcp-ui-wa-button:active {
 }
 html .vcp-ui-scope wa-button.vcp-ui-wa-button::part(base) {
     border-radius: var(--vcp-ui-radius-control);
-    font-weight: 600;
+    font-weight: 500;
 }
 html .vcp-ui-scope wa-button.vcp-ui-wa-button.is-block {
     width: 100%;