feat(design+desktop): 设置屏改版——卡片分组布局（12A 实测反馈，原型先行）

原布局「灰字组标题 + 通栏细线」平铺无体块感、行距不均、控件对齐参差。
改版（原型 SettingsTray 与实现 SettingsApp 同步）：

- 分组卡片化：组标题在卡外（12px text-3 加字距），每组一张 radius-lg
  卡片（复用 Card 组件），卡内行以内嵌分隔线相隔，页面 bg-app 底上
  卡片体块清晰
- 行规格统一：SettingRow 复用，右侧控件统一右缘对齐
- 时长余额改大数字排版（text-xl bold + 单位小字基线对齐）
- 载入动效：四组 40ms 级差上浮淡入（对齐浮层动效语言，快入慢出）
- 顶条标题绝对居中（mac 原生习惯），与红绿灯永不重叠；原型 MacWindow
  同步改居中
- 原型补齐「帮助」组与实现对位

双主题截图验收通过；三道闸全绿；vite 构建通过。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

design/ui_kits/desktop/DesktopShared.jsx

@@ -80,13 +80,18 @@ function MacWindow({ title, width = 460, children, style }) {
       overflow: 'hidden', fontFamily: 'var(--font-sans)', ...style,
     }}>
       <div style={{
-        display: 'flex', alignItems: 'center', gap: 7, padding: '10px 14px',
+        position: 'relative', display: 'flex', alignItems: 'center', gap: 7, padding: '10px 14px',
         background: 'var(--surface-2)', borderBottom: '1px solid var(--border-1)',
       }}>
         <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FF5F57' /* ds-ignore: mac 红绿灯窗饰，系统固定色 */ }}></span>
         <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FEBC2E' /* ds-ignore: mac 红绿灯窗饰，系统固定色 */ }}></span>
         <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#28C840' /* ds-ignore: mac 红绿灯窗饰，系统固定色 */ }}></span>
-        <span style={{ marginLeft: 10, fontSize: 'var(--text-xs)', color: 'var(--text-2)', whiteSpace: 'nowrap' }}>{title}</span>
+        {/* 标题绝对居中（mac 原生窗口习惯），永不与红绿灯重叠 */}
+        <span style={{
+          position: 'absolute', left: '50%', transform: 'translateX(-50%)',
+          fontSize: 'var(--text-xs)', color: 'var(--text-2)', whiteSpace: 'nowrap',
+          fontWeight: 'var(--weight-medium)',
+        }}>{title}</span>
       </div>
       {children}
     </div>