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