feat(settings): 开关改为可点击卡片 — 高亮即启用

- 清单项（侧边栏内容/文件预览）、嵌套相关设置与「新会话默认打开」
  全部从复选框行改为 <button aria-pressed> 卡片：整卡点击切换，
  视觉状态即状态（启用 = 品牌描边 + 交互选中填充 + 勾选徽标；
  禁用 = 中性 hairline + 文字降级），悬停仅在禁用卡上显示
- 嵌套相关设置渲染为更小的缩进卡片（仍仅父级启用时显示）；
  宽度输入保持原生设置行（数值非开关）
- 设置导航齿轮为宿主 shell navIcon 硬编码（无插件注入点），
  按用户选择不改宿主、保持现状
- 新增 settingsGeneralTitle 文案；规格测试改为断言 aria-pressed
- 文档（README/AGENTS.md/设计文档偏差记录）同步

src/client/SideCardSection.module.css

@@ -1,13 +1,17 @@
 /**
- * Side card settings section chrome: the native settings-row recipe (figma
- * row 16/0 padding, hairline separator, 14px/22px title, 12px/17px desc) with
- * the native checkbox (16px, brand accent) and the Input atom + "%" suffix.
- * The shell strips the last row's separator via the trailing-child rule.
+ * Side card settings section chrome: the toggle cards are the switch — a
+ * clickable block whose visual state IS the state (enabled = brand border +
+ * tinted fill + check badge; disabled = neutral hairline + dimmed text).
+ * Nested declarative toggles render as smaller indented cards; the width
+ * input stays a native settings row; the section heading groups the three
+ * inventories. The shell strips the last row's separator via the
+ * trailing-child rule.
  */
 
 .section {
   display: flex;
   flex-direction: column;
+  gap: 8px;
   width: 100%;
 }
 
@@ -15,30 +19,93 @@
   border-bottom: none;
 }
 
-.row {
+/* One toggle card: whole-card click, `aria-pressed` announces the state. */
+.card {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 16px 0;
-  border-bottom: 1px solid var(--dsw-alias-border-l2);
+  gap: 12px;
+  width: 100%;
+  padding: 12px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: left;
   cursor: pointer;
+  transition: background 0.12s ease, border-color 0.12s ease;
 }
 
-/* Nested declarative toggle (a tab's related setting): indented child row. */
-.subRow {
-  display: flex;
+/* Hover affordance on disabled cards only (enabled cards are already lit). */
+.card:not(.cardOn):hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.card:focus-visible {
+  outline: 2px solid var(--dsw-alias-border-l4);
+  outline-offset: 2px;
+}
+
+/* Enabled = highlighted: brand border + tinted fill. */
+.cardOn {
+  border-color: var(--dsw-alias-button-primary-fill);
+  background: var(--dsw-alias-interactive-bg-active);
+}
+
+/* Nested declarative toggle (a feature's related setting): smaller, indented. */
+.cardSub {
+  margin-left: 28px;
+  padding: 10px 12px;
+}
+
+.cardIcon {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 10px 0 10px 28px;
-  border-bottom: 1px solid var(--dsw-alias-border-l2);
-  cursor: pointer;
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
 }
 
-/* Inventory section heading (侧边栏内容 / 文件预览). */
+.cardOn .cardIcon {
+  color: var(--dsw-alias-button-primary-fill);
+}
+
+.cardText {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.cardTitle {
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.cardOn .cardTitle {
+  color: var(--dsw-alias-label-primary);
+}
+
+.cardDesc {
+  font-size: 12px;
+  line-height: 17px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.cardOn .cardDesc {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.cardCheck {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--dsw-alias-button-primary-fill);
+}
+
+/* Inventory section heading (常规 / 侧边栏内容 / 文件预览). */
 .sectionHeading {
-  padding: 18px 0 6px;
+  padding: 14px 0 0;
   font-size: 12px;
   line-height: 17px;
   font-weight: 600;
@@ -46,20 +113,14 @@
   color: var(--dsw-alias-label-secondary);
 }
 
-/* Icon of one inventory row, inline with the title. */
-.rowIcon {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-  color: var(--dsw-alias-label-secondary);
-}
-
-/* Title with the icon beside it. */
-.titleLine {
+/* The width input stays a native settings row (it is a value, not a switch). */
+.row {
   display: flex;
   align-items: center;
-  gap: 8px;
-  min-width: 0;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
 }
 
 .rowText {
@@ -81,21 +142,6 @@
   color: var(--dsw-alias-label-secondary);
 }
 
-/* Native checkbox: 16px, brand accent, no custom chrome (RiskConfirmation recipe). */
-.toggle {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--dsw-alias-button-primary-fill);
-  cursor: pointer;
-}
-
-.toggle:focus-visible {
-  outline: 2px solid var(--dsw-alias-border-l4);
-  outline-offset: 2px;
-}
-
 .control {
   flex: none;
   display: flex;
@@ -121,7 +167,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .row {
+  .card {
     transition: none;
   }
 }