give the pages the CYBER shell they were missing

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.

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')