From 993b6b968c2c833f1cdd73c813ab39c25f492bca Mon Sep 17 00:00:00 2001
From: Jack <jack0210_@hotmail.com>
Date: Mon, 19 Oct 2026 15:23:01 +0800
Subject: [PATCH] give the pages the CYBER shell they were missing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The token swap made every control dark, but the pages themselves kept
their Arco defaults — bare `padding: 20px` with components laid straight
on the background. That is why the running app still read as "not the
prototype" no matter how many variables were replaced: the prototype's
page structure (panel / panel-h / panel-b / kv / tabs) was never built.

Rather than restate that shell in each of the 25 views, it now lives in
global.scss as .cy-view / .cy-panel / .cy-panel-h / .cy-panel-b /
.cy-kv / .cy-tabs / .cy-tab / .cy-stack / .cy-sec-t, and the settings
components share a global .settings-section + .section-title so all nine
panes pick up the mono section headers at once. The per-component
duplicates of those two rules were deleted.

Settings is converted as the reference case: Arco's a-tabs/a-tab-pane
became the underline tab strip, and the pane body sits in a panel. The
URL-query sync moved to a watcher on activeTab so pane order and deep
links still hold. Pane order is a contract, so it is asserted.

Two tests lock the shell in place — one for the global classes and the
cyan underline selected state, one for the settings structure and pane
order. Without them the next edit easily slides back to bare Arco.
---
 .../hermes/settings/AccountSettings.vue       |   5 +-
 .../hermes/settings/AgentSettings.vue         |   3 -
 .../hermes/settings/CompressionSettings.vue   |   4 -
 .../hermes/settings/DisplaySettings.vue       |   4 -
 .../settings/GatewayAutoStartSettings.vue     |  14 +-
 .../hermes/settings/MemorySettings.vue        |   4 -
 .../hermes/settings/ModelSettings.vue         |   4 -
 .../hermes/settings/PlatformSettings.vue      |   4 -
 .../hermes/settings/PrivacySettings.vue       |   3 -
 .../hermes/settings/ProxySettings.vue         |  15 +-
 .../hermes/settings/SessionSettings.vue       |   3 -
 .../components/hermes/settings/SettingRow.vue |  28 ++-
 .../settings/UserManagementSettings.vue       |   6 +-
 packages/client/src/i18n/locales/en.ts        |   1 +
 packages/client/src/i18n/locales/zh.ts        |   1 +
 packages/client/src/styles/global.scss        | 189 ++++++++++++++++++
 .../client/src/views/hermes/SettingsView.vue  | 121 +++++++----
 tests/client/style-system.test.ts             |  32 +++
 18 files changed, 346 insertions(+), 95 deletions(-)

diff --git a/packages/client/src/components/hermes/settings/AccountSettings.vue b/packages/client/src/components/hermes/settings/AccountSettings.vue
index c251dc6..2109331 100644
--- a/packages/client/src/components/hermes/settings/AccountSettings.vue
+++ b/packages/client/src/components/hermes/settings/AccountSettings.vue
@@ -392,10 +392,7 @@ onMounted(() => { loadLockedIps(); });
 }
 
 .section-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: $text-primary;
-  margin: 0 0 16px;
+  margin: 0 0 12px;
 }
 
 .locked-list {
diff --git a/packages/client/src/components/hermes/settings/AgentSettings.vue b/packages/client/src/components/hermes/settings/AgentSettings.vue
index e60d115..54017e2 100644
--- a/packages/client/src/components/hermes/settings/AgentSettings.vue
+++ b/packages/client/src/components/hermes/settings/AgentSettings.vue
@@ -81,7 +81,4 @@ function debouncedSave(key: string, value: any) {
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
 
-.settings-section {
-  margin-top: 16px;
-}
 </style>
diff --git a/packages/client/src/components/hermes/settings/CompressionSettings.vue b/packages/client/src/components/hermes/settings/CompressionSettings.vue
index af9991f..0cd80a7 100644
--- a/packages/client/src/components/hermes/settings/CompressionSettings.vue
+++ b/packages/client/src/components/hermes/settings/CompressionSettings.vue
@@ -99,8 +99,4 @@ function debouncedSave(key: string, value: any) {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
-
-.settings-section {
-  margin-top: 16px;
-}
 </style>
diff --git a/packages/client/src/components/hermes/settings/DisplaySettings.vue b/packages/client/src/components/hermes/settings/DisplaySettings.vue
index 0bcb479..d11613b 100644
--- a/packages/client/src/components/hermes/settings/DisplaySettings.vue
+++ b/packages/client/src/components/hermes/settings/DisplaySettings.vue
@@ -128,10 +128,6 @@ async function testCompletionNotification() {
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
 
-.settings-section {
-  margin-top: 16px;
-}
-
 .notify-controls {
   display: inline-flex;
   align-items: center;
diff --git a/packages/client/src/components/hermes/settings/GatewayAutoStartSettings.vue b/packages/client/src/components/hermes/settings/GatewayAutoStartSettings.vue
index 5684a94..89b8e94 100644
--- a/packages/client/src/components/hermes/settings/GatewayAutoStartSettings.vue
+++ b/packages/client/src/components/hermes/settings/GatewayAutoStartSettings.vue
@@ -137,20 +137,20 @@ function saveExclude(value: string[]) {
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
 
-.settings-section {
-  margin-top: 16px;
-}
-
 .gateway-auto-start-settings {
   padding-top: 16px;
   border-top: 1px solid var(--border-color);
 }
 
 .section-title {
-  margin: 0 0 6px;
-  font-size: 15px;
+  margin: 0 0 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid $border-light;
+  font-family: $font-code;
+  font-size: 12.5px;
   font-weight: 600;
-  color: var(--text-primary);
+  letter-spacing: 0.04em;
+  color: $text-primary;
 }
 
 .section-hint {
diff --git a/packages/client/src/components/hermes/settings/MemorySettings.vue b/packages/client/src/components/hermes/settings/MemorySettings.vue
index 7cfc81d..202bd39 100644
--- a/packages/client/src/components/hermes/settings/MemorySettings.vue
+++ b/packages/client/src/components/hermes/settings/MemorySettings.vue
@@ -66,8 +66,4 @@ function debouncedSave(key: string, value: any) {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
-
-.settings-section {
-  margin-top: 16px;
-}
 </style>
diff --git a/packages/client/src/components/hermes/settings/ModelSettings.vue b/packages/client/src/components/hermes/settings/ModelSettings.vue
index 693d1ce..7c61006 100644
--- a/packages/client/src/components/hermes/settings/ModelSettings.vue
+++ b/packages/client/src/components/hermes/settings/ModelSettings.vue
@@ -126,10 +126,6 @@ async function handleSaveCustom(providerKey: string) {
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
 
-.settings-section {
-  margin-top: 16px;
-}
-
 .empty-hint {
   padding: 40px 0;
 }
diff --git a/packages/client/src/components/hermes/settings/PlatformSettings.vue b/packages/client/src/components/hermes/settings/PlatformSettings.vue
index 39f9a22..e458e36 100644
--- a/packages/client/src/components/hermes/settings/PlatformSettings.vue
+++ b/packages/client/src/components/hermes/settings/PlatformSettings.vue
@@ -500,10 +500,6 @@ watch(
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
 
-.settings-section {
-  margin-top: 16px;
-}
-
 .weixin-qr-section {
   margin-top: 12px;
   margin-bottom: 12px;
diff --git a/packages/client/src/components/hermes/settings/PrivacySettings.vue b/packages/client/src/components/hermes/settings/PrivacySettings.vue
index 6e0b2df..b73436b 100644
--- a/packages/client/src/components/hermes/settings/PrivacySettings.vue
+++ b/packages/client/src/components/hermes/settings/PrivacySettings.vue
@@ -29,7 +29,4 @@ async function save(values: Record<string, any>) {
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
 
-.settings-section {
-  margin-top: 16px;
-}
 </style>
diff --git a/packages/client/src/components/hermes/settings/ProxySettings.vue b/packages/client/src/components/hermes/settings/ProxySettings.vue
index 05d65e4..ba2f0e0 100644
--- a/packages/client/src/components/hermes/settings/ProxySettings.vue
+++ b/packages/client/src/components/hermes/settings/ProxySettings.vue
@@ -75,14 +75,21 @@ async function save() {
 }
 
 .section-title {
-  margin: 0 0 6px;
-  font-size: 18px;
+  margin: 0 0 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid $border-light;
+  font-family: $font-code;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: $text-primary;
 }
 
 .section-hint {
-  margin: 0 0 16px;
+  margin: 0 0 14px;
   color: $text-muted;
-  font-size: 13px;
+  font-size: 12.5px;
+  line-height: 1.6;
 }
 
 .input-lg {
diff --git a/packages/client/src/components/hermes/settings/SessionSettings.vue b/packages/client/src/components/hermes/settings/SessionSettings.vue
index 75e6e32..cc29d1c 100644
--- a/packages/client/src/components/hermes/settings/SessionSettings.vue
+++ b/packages/client/src/components/hermes/settings/SessionSettings.vue
@@ -145,7 +145,4 @@ async function toggleWriteApproval(section: "memory" | "skills", value: boolean)
 <style scoped lang="scss">
 @use "@/styles/variables" as *;
 
-.settings-section {
-  margin-top: 16px;
-}
 </style>
diff --git a/packages/client/src/components/hermes/settings/SettingRow.vue b/packages/client/src/components/hermes/settings/SettingRow.vue
index c0dfe4d..970c9e1 100644
--- a/packages/client/src/components/hermes/settings/SettingRow.vue
+++ b/packages/client/src/components/hermes/settings/SettingRow.vue
@@ -20,37 +20,53 @@ defineProps<{
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
 
+// CYBER 的键值行：等宽键名 + 发丝线分隔，整行 hover 微微抬起。
+// 不是原型 .kv 的两列网格——设置项的 hint 文本较长，左列会被挤坏，
+// 所以保留「标签在上、控件在右」的结构，只换成 CYBER 的排版与线条。
 .setting-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 0;
+  gap: 16px;
+  padding: 11px 12px;
   border-bottom: 1px solid $border-light;
+  transition: background-color $transition-fast;
 
   &:last-child {
     border-bottom: none;
   }
+
+  &:hover {
+    background-color: rgba(var(--accent-primary-rgb), 0.035);
+  }
 }
 
 .setting-info {
   flex: 1;
-  margin-right: 16px;
+  min-width: 0;
 }
 
 .setting-label {
-  font-size: 13px;
+  font-family: $font-code;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
   color: $text-primary;
   display: block;
 }
 
 .setting-hint {
   font-size: 12px;
+  line-height: 1.5;
   color: $text-muted;
-  margin-top: 2px;
+  margin-top: 3px;
 }
 
 .setting-control {
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 @media (max-width: $breakpoint-mobile) {
@@ -60,10 +76,6 @@ defineProps<{
     gap: 8px;
   }
 
-  .setting-info {
-    margin-right: 0;
-  }
-
   .setting-control {
     width: 100%;
   }
diff --git a/packages/client/src/components/hermes/settings/UserManagementSettings.vue b/packages/client/src/components/hermes/settings/UserManagementSettings.vue
index 9c1bed8..8bc8479 100644
--- a/packages/client/src/components/hermes/settings/UserManagementSettings.vue
+++ b/packages/client/src/components/hermes/settings/UserManagementSettings.vue
@@ -309,9 +309,11 @@ onMounted(loadUsers)
 }
 
 .section-title {
-  margin: 0 0 6px;
-  font-size: 16px;
+  margin: 0 0 10px;
+  font-family: $font-code;
+  font-size: 12.5px;
   font-weight: 600;
+  letter-spacing: 0.04em;
   color: $text-primary;
 }
 
diff --git a/packages/client/src/i18n/locales/en.ts b/packages/client/src/i18n/locales/en.ts
index d637cd5..169645f 100644
--- a/packages/client/src/i18n/locales/en.ts
+++ b/packages/client/src/i18n/locales/en.ts
@@ -1530,6 +1530,7 @@ export default {
   // Settings
   settings: {
     title: 'Settings',
+    paneUnit: 'panes',
     saved: 'Saved',
     saveFailed: 'Save failed',
     tabs: {
diff --git a/packages/client/src/i18n/locales/zh.ts b/packages/client/src/i18n/locales/zh.ts
index 8bfe1c8..cc3c0b4 100644
--- a/packages/client/src/i18n/locales/zh.ts
+++ b/packages/client/src/i18n/locales/zh.ts
@@ -1522,6 +1522,7 @@ export default {
   // 设置
   settings: {
     title: '设置',
+    paneUnit: '个面板',
     saved: '已保存',
     saveFailed: '保存失败',
     tabs: {
diff --git a/packages/client/src/styles/global.scss b/packages/client/src/styles/global.scss
index 7dcfebd..1bb791f 100644
--- a/packages/client/src/styles/global.scss
+++ b/packages/client/src/styles/global.scss
@@ -613,6 +613,195 @@ a {
   gap: 8px;
 }
 
+// ─── Page shell ────────────────────────────────────────────────
+// 原型里每个页面都是 panel / panel-h / panel-b / kv / tabs 这套外壳。
+// 这里抽成全局类，页面直接用，避免 25 个页面各写一遍同样的框。
+
+// 内容区统一内边距
+.cy-view {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 22px 40px;
+}
+
+// 面板：卡片刻一个发丝线边框 + 小圆角
+.cy-panel {
+  position: relative;
+  background: $bg-card;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+
+  + .cy-panel {
+    margin-top: 16px;
+  }
+}
+
+// 面板头：标题用等宽字体带字距，右侧留操作位
+.cy-panel-h {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 11px 14px;
+  border-bottom: 1px solid $border-light;
+
+  h3 {
+    margin: 0;
+    font-family: $font-code;
+    font-size: 12.5px;
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: 0.04em;
+    color: $text-primary;
+  }
+
+  .cy-meta {
+    font-family: $font-code;
+    font-size: 11px;
+    color: $text-faint;
+  }
+
+  .cy-panel-actions {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
+
+// 面板体
+.cy-panel-b {
+  padding: 14px;
+
+  &.flush {
+    padding: 0;
+  }
+}
+
+// 键值表：左列键沉底、右列值，是设置类页面的主结构
+.cy-kv {
+  display: grid;
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  overflow: hidden;
+  background: $bg-card;
+
+  .cy-kr {
+    display: grid;
+    grid-template-columns: minmax(120px, 34%) 1fr;
+    border-bottom: 1px solid $border-light;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .cy-kk {
+    padding: 8px 11px;
+    background: $bg-secondary;
+    font-family: $font-code;
+    font-size: 11.5px;
+    color: $text-muted;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .cy-kv-v {
+    padding: 8px 11px;
+    font-size: 12.5px;
+    min-width: 0;
+    word-break: break-word;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &.two .cy-kr {
+    grid-template-columns: minmax(120px, 26%) 1fr minmax(120px, 26%) 1fr;
+  }
+}
+
+// 表格式 tab 条：下划线指示，不做胶囊
+.cy-tabs {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid $border-color;
+  overflow-x: auto;
+}
+
+.cy-tab {
+  padding: 8px 13px;
+  font-family: $font-code;
+  font-size: 12.5px;
+  color: $text-muted;
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+  cursor: pointer;
+  background: transparent;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  transition: color 0.14s ease, border-color 0.14s ease;
+
+  &:hover {
+    color: $text-primary;
+  }
+
+  &.on {
+    color: $accent-primary;
+    border-bottom-color: $accent-primary;
+    text-shadow: 0 0 10px rgba(var(--accent-primary-rgb), 0.45);
+  }
+
+  &.dis {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+// 竖排堆叠容器
+.cy-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+// 分节小标题
+.cy-sec-t {
+  font-family: $font-code;
+  font-size: 11.5px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: $text-faint;
+  margin: 4px 0 2px;
+}
+
+// 设置类页面的分区容器与标题。
+// 各 settings 组件都在用 .settings-section / .section-title 这两个类名，
+// 放全局是为了让 9 个 pane 的标题排版一次到位，不用逐个组件改样式。
+.settings-section {
+  margin-top: 16px;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.settings-section .section-title,
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid $border-light;
+  font-family: $font-code;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: $text-primary;
+}
+
 // Responsive utility classes for inline width replacement
 .input-sm { width: 90px; }
 .input-md { width: 200px; }
diff --git a/packages/client/src/views/hermes/SettingsView.vue b/packages/client/src/views/hermes/SettingsView.vue
index cf54d08..b1844be 100644
--- a/packages/client/src/views/hermes/SettingsView.vue
+++ b/packages/client/src/views/hermes/SettingsView.vue
@@ -40,20 +40,37 @@ const validTabs = computed(() => new Set([
   "voice",
 ]));
 
+// pane 顺序是契约（见 docs/cli-chat-sessions.md 与原型 renderSettings），不要重排。
+const tabs = computed(() => [
+  { key: "account", label: t("settings.tabs.account") },
+  ...(canManageUsers ? [{ key: "users", label: t("settings.tabs.users") }] : []),
+  { key: "display", label: t("settings.tabs.display") },
+  { key: "proxy", label: t("settings.tabs.proxy") },
+  { key: "agent", label: t("settings.tabs.agent") },
+  { key: "memory", label: t("settings.tabs.memory") },
+  { key: "compression", label: t("settings.tabs.compression") },
+  { key: "session", label: t("settings.tabs.session") },
+  { key: "privacy", label: t("settings.tabs.privacy") },
+  { key: "models", label: t("settings.tabs.models") },
+  { key: "voice", label: t("settings.tabs.voice") },
+]);
+
+const paneCount = computed(() => tabs.value.length);
+
 function normalizeTab(value: unknown): string {
   const tab = typeof value === "string" ? value : "";
   return validTabs.value.has(tab) ? tab : "account";
 }
 
-function handleTabUpdate(tab: string | number) {
-  activeTab.value = normalizeTab(tab);
+// tab 切到 URL query，刷新和分享链接都能停在同一个 pane 上。
+watch(activeTab, (tab) => {
   router.replace({
     query: {
       ...route.query,
-      tab: activeTab.value === "account" ? undefined : activeTab.value,
+      tab: tab === "account" ? undefined : tab,
     },
   });
-}
+});
 
 watch(() => route.query.tab, (tab) => {
   activeTab.value = normalizeTab(tab);
@@ -75,6 +92,9 @@ onMounted(() => {
   <div class="settings-view">
     <header class="page-header">
       <h2 class="header-title">{{ t("settings.title") }}</h2>
+      <div class="header-actions">
+        <span class="header-meta">{{ paneCount }} {{ t("settings.paneUnit") }}</span>
+      </div>
     </header>
 
     <div class="settings-content">
@@ -82,42 +102,37 @@ onMounted(() => {
         :loading="settingsStore.loading || settingsStore.saving"
         :tip="t('common.loading')"
       >
-        <a-tabs v-model:active-key="activeTab" type="line" @change="handleTabUpdate">
-          <a-tab-pane key="account" :title="t('settings.tabs.account')">
-            <AccountSettings />
-          </a-tab-pane>
-          <a-tab-pane v-if="canManageUsers" key="users" :title="t('settings.tabs.users')">
-            <UserManagementSettings />
-          </a-tab-pane>
-          <a-tab-pane key="display" :title="t('settings.tabs.display')">
-            <DisplaySettings />
-          </a-tab-pane>
-          <a-tab-pane key="proxy" :title="t('settings.tabs.proxy')">
-            <ProxySettings />
-          </a-tab-pane>
-          <a-tab-pane key="agent" :title="t('settings.tabs.agent')">
-            <AgentSettings />
-            <GatewayAutoStartSettings />
-          </a-tab-pane>
-          <a-tab-pane key="memory" :title="t('settings.tabs.memory')">
-            <MemorySettings />
-          </a-tab-pane>
-          <a-tab-pane key="compression" :title="t('settings.tabs.compression')">
-            <CompressionSettings />
-          </a-tab-pane>
-          <a-tab-pane key="session" :title="t('settings.tabs.session')">
-            <SessionSettings />
-          </a-tab-pane>
-          <a-tab-pane key="privacy" :title="t('settings.tabs.privacy')">
-            <PrivacySettings />
-          </a-tab-pane>
-          <a-tab-pane key="models" :title="t('settings.tabs.models')">
-            <ModelSettings />
-          </a-tab-pane>
-          <a-tab-pane key="voice" :title="t('settings.tabs.voice')">
-            <VoiceSettings />
-          </a-tab-pane>
-        </a-tabs>
+        <div class="cy-tabs">
+          <button
+            v-for="tab in tabs"
+            :key="tab.key"
+            type="button"
+            class="cy-tab"
+            :class="{ on: tab.key === activeTab }"
+            @click="activeTab = tab.key"
+          >
+            {{ tab.label }}
+          </button>
+        </div>
+
+        <div class="cy-panel">
+          <div class="cy-panel-b">
+            <AccountSettings v-if="activeTab === 'account'" />
+            <UserManagementSettings v-else-if="activeTab === 'users'" />
+            <DisplaySettings v-else-if="activeTab === 'display'" />
+            <ProxySettings v-else-if="activeTab === 'proxy'" />
+            <div v-else-if="activeTab === 'agent'" class="cy-stack">
+              <AgentSettings />
+              <GatewayAutoStartSettings />
+            </div>
+            <MemorySettings v-else-if="activeTab === 'memory'" />
+            <CompressionSettings v-else-if="activeTab === 'compression'" />
+            <SessionSettings v-else-if="activeTab === 'session'" />
+            <PrivacySettings v-else-if="activeTab === 'privacy'" />
+            <ModelSettings v-else-if="activeTab === 'models'" />
+            <VoiceSettings v-else-if="activeTab === 'voice'" />
+          </div>
+        </div>
       </a-spin>
     </div>
   </div>
@@ -135,6 +150,30 @@ onMounted(() => {
 .settings-content {
   flex: 1;
   overflow-y: auto;
-  padding: 20px;
+  padding: 20px 22px 40px;
+
+  :deep(.arco-spin) {
+    display: block;
+  }
+
+  :deep(.arco-tabs-content) {
+    padding-top: 0;
+  }
+}
+
+.header-meta {
+  font-family: $font-code;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  color: $text-faint;
+}
+
+.cy-panel {
+  margin-top: 16px;
+}
+
+// 各 settings 组件根节点自带 margin-top，在面板里会多出一截
+.settings-content :deep(.settings-section:first-child) {
+  margin-top: 0;
 }
 </style>
diff --git a/tests/client/style-system.test.ts b/tests/client/style-system.test.ts
index 89703ce..ba308ac 100644
--- a/tests/client/style-system.test.ts
+++ b/tests/client/style-system.test.ts
@@ -57,6 +57,38 @@ describe('client style system', () => {
     expect(source).not.toMatch(/localStorage\.getItem\(['"]hermes_(brightness|style)/)
   })
 
+  it('exposes the CYBER page shell so pages stop falling back to bare Arco layouts', () => {
+    // 原型里每个页面都是 panel / panel-h / panel-b / kv / tabs 这套外壳。
+    // 25 个页面各写一遍同样的框会漂移，所以抽成全局类并在这里锁住。
+    const globalStyles = readClientFile('styles/global.scss')
+
+    for (const cls of ['.cy-view', '.cy-panel', '.cy-panel-h', '.cy-panel-b', '.cy-kv', '.cy-tabs', '.cy-tab']) {
+      expect(globalStyles).toContain(cls)
+    }
+
+    // 选中态必须是霓虹青 + 发丝下划线，不是胶囊底色。
+    const onRule = globalStyles.slice(globalStyles.indexOf('&.on {'), globalStyles.indexOf('&.dis {'))
+    expect(onRule).toContain('color: $accent-primary;')
+    expect(onRule).toContain('border-bottom-color: $accent-primary;')
+  })
+
+  it('keeps the settings shell on the shared page header baseline', () => {
+    // 设置页是唯一有 11 个 pane 的页面，最容易退回 Arco 的 a-tabs 默认外观。
+    const settingsView = readClientFile('views/hermes/SettingsView.vue')
+
+    expect(settingsView).toContain('cy-tabs')
+    expect(settingsView).toContain('cy-panel')
+    // 不再依赖 a-tabs / a-tab-pane。
+    expect(settingsView).not.toContain('<a-tabs')
+    expect(settingsView).not.toContain('<a-tab-pane')
+    // pane 顺序是契约：account 必须在 users 之前，其余按固定顺序。
+    const order = ['account', 'users', 'display', 'proxy', 'agent', 'memory',
+      'compression', 'session', 'privacy', 'models', 'voice']
+    const positions = order.map(key => settingsView.indexOf(`key: "${key}"`))
+    expect(positions.every(p => p > 0)).toBe(true)
+    expect([...positions].sort((a, b) => a - b)).toEqual(positions)
+  })
+
   it('keeps mobile inputs at 16px so iOS does not zoom on focus', () => {
     const globalStyles = readClientFile('styles/global.scss')