fix: align settings page shell

Settings Center used different header and content gutters, omitted the standard title divider, and mirrored scrollbar space on the left of its category navigation. The title and two-column content now share responsive page gutters, restore the standard PageHeader boundary, and balance selected rows against the visible scrollport.

Release note: 统一设置中心与其他一级页面的标题分隔线和响应式边距，并修复左侧分类选中高亮在滚动时的视觉偏移。

UI-DESIGN.md

@@ -526,8 +526,8 @@ GoodBuddy 是可调整窗口大小的桌面应用。响应式设计优先保证
 ### 13.7 设置中心
 
 - 全页设置使用固定标题区、左侧分类导航和独立滚动的内容区。右上角关闭按钮是离开设置中心的稳定入口。
-- 左侧分类导航在宽屏使用 `220px`，中等窗口使用 `196px`，窄窗口转为横向滚动；纵向滚动条预留必须在两侧保持对称，不能让选中高亮偏向一侧。分类标题使用正文级字号，分类说明使用辅助字号；右侧内容区在可用空间内流式伸缩，最大宽度使用 `standard` 壳层的 `960px`，不得以页面专属较窄宽度压缩表单。
-- 全页设置标题区依靠留白与内容区分层，不在标题下方绘制贯穿整个工作区的分隔线；模态设置可以保留标题边界。
+- 左侧分类导航在宽屏使用 `220px`，中等窗口使用 `196px`，窄窗口转为横向滚动；纵向滚动条仅在内容溢出时占用右侧空间，不在左侧创建镜像预留，选项与左侧可见边界保持默认内距。分类标题使用正文级字号，分类说明使用辅助字号；右侧内容区在可用空间内流式伸缩，最大宽度使用 `standard` 壳层的 `960px`，不得以页面专属较窄宽度压缩表单。
+- 全页设置标题区与双栏内容使用共享 `--page-gutter`，标题、分类导航和内容区在同一页面边距基线上；标题继续使用标准 `PageHeader` 的底部分隔线与下内距。固定标题和双独立滚动区域不改变这些一级页面壳层规则；模态设置保留自身外框与标题边界。
 - 设置中心不显示全局操作页脚，避免重复关闭入口和没有功能意义的整宽分隔线。
 - 所有分类使用共享的 `SettingsCategoryHeader` 呈现分类标题、说明、错误与操作，不得在内容卡片内复制分类标题或创建页面专属操作栏。左侧分类名称与说明来自同一份分类定义，新增分类时不得分别维护导航和内容标题。
 - 当前分类存在“保存”或“测试”等未提交配置操作时，统一放在分类页头右侧；主保存操作在最右侧，测试等次操作排列在其左侧。

src/renderer/src/WorkspacePrimitives.test.tsx

@@ -209,13 +209,19 @@ describe('WorkspacePrimitives', () => {
 
   it('keeps full-page settings navigation readable and content fluid', () => {
     expect(stylesheet).toMatch(
-      /\.settings-page \.settings-panel__body\s*\{[^}]*grid-template-columns:\s*220px minmax\(0,\s*1fr\);/u
+      /\.settings-page \.settings-panel__header\s*\{[^}]*padding:\s*var\(--page-gutter\) var\(--page-gutter\) 0;/u
+    )
+    expect(stylesheet).toMatch(
+      /\.settings-page \.settings-panel__header \.page-header\s*\{[^}]*padding-bottom:\s*var\(--space-4\);[^}]*border-bottom:\s*1px solid var\(--border-subtle\);/u
+    )
+    expect(stylesheet).toMatch(
+      /\.settings-page \.settings-panel__body\s*\{[^}]*padding:\s*var\(--space-6\) var\(--page-gutter\) var\(--page-gutter\);[^}]*grid-template-columns:\s*220px minmax\(0,\s*1fr\);/u
     )
     expect(stylesheet).toMatch(
       /@media \(max-width: 1020px\)\s*\{[\s\S]*?\.settings-page \.settings-panel__body\s*\{[^}]*grid-template-columns:\s*196px minmax\(0,\s*1fr\);/u
     )
     expect(stylesheet).toMatch(
-      /\.settings-page \.settings-tabs\s*\{[^}]*scrollbar-gutter:\s*stable both-edges;/u
+      /\.settings-page \.settings-tabs\s*\{[^}]*scrollbar-gutter:\s*auto;/u
     )
     expect(stylesheet).toMatch(
       /\.settings-page \.settings-panel__content\s*\{[^}]*width:\s*min\(100%,\s*var\(--content-standard\)\);/u

src/renderer/src/styles.css

@@ -4914,6 +4914,7 @@ button > svg {
 }
 
 .settings-page .settings-panel__header {
+  padding: var(--page-gutter) var(--page-gutter) 0;
   border-bottom: 0;
 }
 
@@ -4927,8 +4928,8 @@ button > svg {
 }
 
 .settings-page .settings-panel__header .page-header {
-  padding-bottom: 0;
-  border-bottom: 0;
+  padding-bottom: var(--space-4);
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .settings-panel__header .page-header__content {
@@ -5013,7 +5014,7 @@ button > svg {
 .settings-page .settings-panel__body {
   display: grid;
   min-height: 0;
-  padding: 24px 32px 32px;
+  padding: var(--space-6) var(--page-gutter) var(--page-gutter);
   overflow: hidden;
   align-items: stretch;
   grid-template-columns: 220px minmax(0, 1fr);
@@ -5049,7 +5050,7 @@ button > svg {
   align-self: stretch;
   flex-direction: column;
   grid-template-columns: none;
-  scrollbar-gutter: stable both-edges;
+  scrollbar-gutter: auto;
 }
 
 .settings-page .settings-panel__content {
@@ -11105,7 +11106,6 @@ details.settings-section > :not(summary) + :not(summary) {
 
   .settings-page .settings-panel__body {
     display: grid;
-    padding: 20px;
     overflow: hidden;
     align-items: stretch;
     grid-template-columns: 196px minmax(0, 1fr);