@logictan/dsh-config-manager 0.1.60

package/src/client/config-manager.module.css

@@ -0,0 +1,2971 @@
+/**
+ * dsh-config-manager — Workbench Design System（2026-09 Full UI Rebuild）
+ *
+ * 定位：DSH settings.section 内嵌工作台（画布 ≈ 564 × 720，800px 设置弹窗内）。
+ * 设计语言：高密度开发者工具（参考 Linear/Raycast/VS Code settings 的信息密度），
+ * 零硬编码颜色 —— 全部走 DSH Design System 的 --dsw-* token（跟随亮/暗主题与皮肤）。
+ *
+ * 分层结构：
+ *   §1 Tokens & Base          —— 尺寸/字号/焦点基础
+ *   §2 Shell                  —— 导航条 / 页面工具栏 / 状态栏 / 内容区
+ *   §3 Primitives             —— Button / Input / Select / Checkbox / Badge / Banner / Spinner
+ *   §4 Surfaces               —— Card / 分组 / 字段 / 空态
+ *   §5 Data Display           —— 表格 / 统计块 / 键值行 / Stepper / 进度
+ *   §6 Overlays               —— Dialog / Drawer
+ *   §7 Page: Overview         —— 控制中心
+ *   §8 Page: Backups          —— 备份/快照/定时/恢复
+ *   §9 Page: Export / Import  —— 迁移工作流（含冲突/路径映射/密钥补录/日志）
+ *   §10 Page: Sync            —— 远程同步
+ *   §11 Page: Market          —— 配置市场 / 我的配置
+ *   §12 Page: Profiles        —— 配置档案
+ *   §13 Page: History / About —— 活动抽屉 / 关于
+ *   §14 Responsive            —— 窄弹窗降级
+ */
+
+/* ================================================================ §1 Tokens & Base */
+
+.section {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  font-family: var(--dsw-font-family);
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+  /* 弹窗内容区内的滚动包容：本组件自己管理滚动，不外溢 */
+  overflow: hidden;
+  /* Toast 视口的定位上下文（见 §6 Overlays 的 .toastViewport）：
+     通知层必须留在插件自己的层叠上下文内（宿主 overlay z-index 1000），
+     故用绝对定位贴合本根节点，而非 Portal 到 body。 */
+  position: relative;
+}
+
+/* 交互过渡统一参数（hover/focus 颜色过渡；仅颜色属性，克制） */
+.section :is(button, a, input, select, textarea, [role='tab']) {
+  transition-property: background-color, border-color, color;
+  transition-duration: 120ms;
+  transition-timing-function: ease;
+}
+
+/* 键盘焦点环：仅键盘导航（:focus-visible）触发 */
+.section :is(button, a, input, select, textarea, [role='tab']):focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 2px;
+}
+
+/* 等宽栈：路径 / 命令 / 值 / 日志（数字等宽对齐） */
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Lucide 图标统一行为：继承文字色（跟随 --dsw-* token / data-danger / hover），
+   在 flex 容器（按钮/行）内不收缩、垂直居中，描边与正文视觉重量匹配。 */
+.section svg {
+  flex: none;
+  color: inherit;
+}
+
+/* 键盘提示 */
+.kbd {
+  display: inline-block;
+  padding: 0 5px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  background: var(--dsw-alias-bg-layer-2);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10.5px;
+  line-height: 16px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* ================================================================ §2 Shell */
+
+/* —— 顶部导航条：左侧页签（圆角分段条），右侧图标动作 ——
+   刻意**不铺背景色**：宿主设置面板底色随主题变化（暗色面板 = #2c2c2e，
+   而 --dsw-alias-bg-base = #151517），铺底色会在导航条两侧形成一条比面板更暗的
+   通栏色块（亮色下两者同为 #fff 才看不出来）。页签分组感由 .navStrip 自身的
+   底色 + 描边承担，与底部 .statusBar 的「不铺底色」保持一致。 */
+.shellNav {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+  padding: 8px;
+}
+
+.navStrip {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 2px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.navStrip::-webkit-scrollbar {
+  display: none;
+}
+
+/* 页签：分段条内的圆角药丸，激活态 = 主色淡底 + 主色描边 */
+.navTab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: none;
+  height: 24px;
+  padding: 0 10px;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.navTab:hover {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.navTab:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+  border-radius: 6px;
+}
+
+.navTab[data-active] {
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 16%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dsw-alias-state-business-primary) 45%, transparent);
+  color: var(--dsw-alias-label-primary);
+  font-weight: 600;
+}
+
+/* 页签上的告警点（如恢复待处理） */
+.navDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--dsw-alias-state-error-primary);
+  flex: none;
+}
+
+/* 导航条右侧图标动作 */
+.navActions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+  margin-left: 4px;
+}
+
+/* 导航条动作按钮激活态（抽屉打开时对应按钮高亮） */
+.navActions .ghostButton[data-active] {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-business-primary) 55%, transparent);
+  color: var(--dsw-alias-state-business-primary);
+}
+
+/* —— 图标按钮（工具栏/导航通用） —— */
+.iconBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  align-self: center;
+}
+
+.iconBtn:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.iconBtn:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+}
+
+.iconBtn:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.iconBtn[data-active] {
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 14%, transparent);
+  color: var(--dsw-alias-state-business-primary);
+}
+
+/* 危险语义图标按钮（行内删除等破坏性动作的视觉隔离） */
+.iconBtn[data-danger] {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.iconBtn[data-danger]:hover {
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent);
+  border-color: var(--dsw-alias-state-error-primary);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* 行内动作分隔（安全操作与破坏性操作之间的 1px 竖线） */
+.rowDivider {
+  width: 1px;
+  height: 14px;
+  background: var(--dsw-alias-border-l2);
+  margin: 0 2px;
+  flex: none;
+  align-self: center;
+}
+
+/* —— 页面主体（滚动区）：flex 链让页面内容可伸展填满视口高度 —— */
+.shellMain {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 页面内容统一内边距（flex 链中层：撑满 shellMain，让 viewBody 能 flex 填充） */
+.pagePad {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 12px 16px 16px;
+}
+
+/* —— 底部状态栏：与顶部页签条同款（圆角分段条 + 四周留白，不再通栏贴边） —— */
+.statusBar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: none;
+  height: 28px;
+  margin: 0 8px 8px;
+  padding: 0 10px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.statusDot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--dsw-alias-label-tertiary);
+  flex: none;
+}
+
+.statusDot[data-kind='ok'] {
+  background: var(--dsw-alias-state-success-primary);
+}
+
+.statusDot[data-kind='info'] {
+  background: var(--dsw-alias-state-business-primary);
+}
+
+.statusDot[data-kind='warn'] {
+  background: var(--dsw-alias-state-warn-primary);
+}
+
+.statusDot[data-kind='error'] {
+  background: var(--dsw-alias-state-error-primary);
+}
+
+.statusDot[data-pulse] {
+  animation: statusPulse 1.2s ease-in-out infinite;
+}
+
+@keyframes statusPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+
+.statusText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.statusSpacer {
+  flex: 1 1 auto;
+}
+
+.statusMeta {
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* ================================================================ §3 Primitives */
+
+/* —— 按钮 —— */
+.primaryButton,
+.ghostButton,
+.dangerButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+}
+
+.primaryButton {
+  background: var(--dsw-alias-button-info-fill);
+  color: var(--dsw-alias-label-primary-foreground);
+}
+
+.primaryButton:hover:not(:disabled) {
+  background: var(--dsw-alias-button-info-hover);
+}
+
+.ghostButton {
+  background: transparent;
+  border-color: var(--dsw-alias-border-l2);
+  color: var(--dsw-alias-label-primary);
+}
+
+.ghostButton:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.dangerButton {
+  background: transparent;
+  border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 45%, transparent);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.dangerButton:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent);
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+.primaryButton:focus-visible,
+.ghostButton:focus-visible,
+.dangerButton:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+}
+
+.primaryButton:disabled,
+.ghostButton:disabled,
+.dangerButton:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+/* 小尺寸（表格行内 / 密集工具栏） */
+.primaryButton[data-size='sm'],
+.ghostButton[data-size='sm'],
+.dangerButton[data-size='sm'] {
+  height: 24px;
+  padding: 0 8px;
+  font-size: 11.5px;
+  border-radius: 5px;
+}
+
+/* —— 输入 / 选择 —— */
+.input,
+.select {
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 6px;
+  background: var(--dsw-specific-input-major);
+  font: inherit;
+  font-size: 12.5px;
+  color: var(--dsw-alias-label-primary);
+  box-sizing: border-box;
+}
+
+/* 满宽仅限**纵向**容器内的字段（.field 是 column flex，需要拉满）：
+   不可全局设 width:100% —— 那会让行内 flex 容器里的每个 select 各占一整行
+   （市场页筛选、同步页快照下拉都曾被撑成整行）。 */
+.field > .input,
+.field > .select {
+  width: 100%;
+}
+
+.input::placeholder {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.input:hover,
+.select:hover {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-business-primary) 40%, var(--dsw-alias-border-l2));
+}
+
+.input:focus,
+.select:focus {
+  outline: none;
+  border-color: var(--dsw-alias-state-business-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-business-primary) 18%, transparent);
+}
+
+.input:disabled,
+.select:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.select {
+  appearance: none;
+  padding-right: 22px;
+  background-image: linear-gradient(45deg, transparent 50%, var(--dsw-alias-label-secondary) 50%),
+    linear-gradient(135deg, var(--dsw-alias-label-secondary) 50%, transparent 50%);
+  background-position: calc(100% - 12px) 12px, calc(100% - 8px) 12px;
+  background-size: 4px 4px;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+/* 密码/路径输入（等宽利于核对） */
+.input[type='password'] {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+
+/* —— 复选 / 单选行 —— */
+.checkboxRow,
+.radioLabel {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+  cursor: pointer;
+  font-size: 12.5px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.checkboxRow input,
+.radioLabel input {
+  width: 14px;
+  height: 14px;
+  margin: 2px 0 0;
+  accent-color: var(--dsw-alias-state-business-primary);
+  cursor: pointer;
+  flex: none;
+}
+
+.checkboxRow input:focus-visible,
+.radioLabel input:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 2px;
+}
+
+/* —— 徽章 —— */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 18px;
+  padding: 0 7px;
+  border-radius: 9px;
+  font-size: 10.5px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  border: 1px solid var(--dsw-alias-border-l2);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.badgeOk {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 14%, transparent);
+  color: var(--dsw-alias-state-success-primary);
+}
+
+.badgeInfo {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-business-primary) 30%, transparent);
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.badgeWarn {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 14%, transparent);
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+.badgeError {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 14%, transparent);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* —— 横幅（四态；紧凑） —— */
+.banner {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-2);
+  font-size: 12.5px;
+  margin: 0 0 10px;
+  /* 通栏元素：flex 父容器（.viewBody 等）里不随内容收缩 */
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.banner[data-kind='ok'] {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-success-primary) 35%, transparent);
+  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 9%, transparent);
+}
+
+.banner[data-kind='info'] {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-business-primary) 30%, transparent);
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 8%, transparent);
+}
+
+.banner[data-kind='warn'] {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 40%, transparent);
+  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 9%, transparent);
+}
+
+.banner[data-kind='error'] {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 45%, transparent);
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 9%, transparent);
+}
+
+/* —— Spinner —— */
+.spinnerWrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  vertical-align: middle;
+}
+
+.spinner {
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  border: 2px solid color-mix(in srgb, var(--dsw-alias-state-business-primary) 25%, transparent);
+  border-top-color: var(--dsw-alias-state-business-primary);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex: none;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.spinnerLabel {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* ================================================================ §4 Surfaces */
+
+.card {
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  padding: 12px;
+  margin: 0 0 10px;
+}
+
+/* 分组标题（卡内小节头） */
+.groupLabel {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--dsw-alias-label-tertiary);
+  margin-bottom: 8px;
+}
+
+.groupHeader {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+/* 卡头内的分组标题：不收缩、不换行（防止长 hint 把标题挤成竖排） */
+.groupHeader .groupLabel {
+  flex: none;
+  white-space: nowrap;
+  margin-bottom: 0;
+}
+
+.groupNote {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.groupItems {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* 表单字段 */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0 0 10px;
+}
+
+.fieldLabel {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.hint {
+  font-size: 11.5px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.formError {
+  font-size: 11.5px;
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* 区块标题（页面内二级标题） */
+.sectionTitleBlock {
+  min-width: 0;
+}
+
+.sectionTitle {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.4;
+  color: var(--dsw-alias-label-primary);
+}
+
+.sectionSubtitle {
+  margin: 1px 0 0;
+  font-size: 11.5px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* 空态 */
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 28px 16px;
+  border: 1px dashed var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary);
+  /* 通栏占位：不被 flex 父容器压成内容宽 */
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* 居中空态页（大块空视图：垂直居中 + 图形 + CTA，替代贴顶小虚线框） */
+.emptyHero {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 320px;
+  text-align: center;
+}
+
+.emptyHeroSymbol {
+  font-size: 30px;
+  line-height: 1;
+  color: var(--dsw-alias-label-tertiary);
+  opacity: 0.75;
+}
+
+.emptyHeroTitle {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--dsw-alias-label-primary);
+}
+
+.emptyHeroBody {
+  max-width: 340px;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--dsw-alias-label-tertiary);
+  margin: 0 0 6px;
+}
+
+/* ================================================================ §5 Data Display */
+
+/* —— 数据表 —— */
+.tableWrap {
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+/* 表格用固定布局（.tableFixed）时列宽容易偏紧：给每列留一点水平呼吸，
+   避免内容差几个像素就触发单元格省略号（操作列的「…」即由此而来）。 */
+.tableFixed th,
+.tableFixed td {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.tableScroll {
+  overflow: auto;
+  max-height: 420px;
+}
+
+.dataTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.dataTable th,
+.dataTable td {
+  box-sizing: border-box;
+}
+
+/* 固定布局变体：配合 th 宽度使用，主列内容省略不撑破（行内长文件名/路径场景） */
+.tableFixed {
+  table-layout: fixed;
+}
+
+.tableFixed td,
+.tableFixed th {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 紧凑变体：单元格 padding 8px（列多画布窄的场景） */
+.tableCompact th,
+.tableCompact td {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.dataTable td.dim {
+  white-space: nowrap;
+}
+
+.dataTable th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 6px 10px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-tertiary);
+  background: var(--dsw-alias-bg-layer-2);
+  border-bottom: 1px solid var(--dsw-alias-border-l1);
+  white-space: nowrap;
+}
+
+.dataTable td {
+  padding: 6px 10px;
+  border-bottom: 1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 55%, transparent);
+  vertical-align: middle;
+  color: var(--dsw-alias-label-primary);
+}
+
+.dataTable tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.dataTable tbody tr {
+  transition: background-color 100ms ease-out;
+}
+
+.dataTable tbody tr:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.dataTable tbody tr[data-selected] {
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 9%, transparent);
+}
+
+.dataTable .num {
+  text-align: right;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11.5px;
+  white-space: nowrap;
+}
+
+.dataTable .dim {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.dataTable .cellActions {
+  text-align: right;
+  white-space: nowrap;
+}
+
+/* 操作列内容优先完整展示：.tableFixed 给所有单元格都加了
+   `overflow:hidden; text-overflow:ellipsis`，列宽略紧时行内操作按钮后会被
+   浏览器补一个「…」省略号（备份页两张表都出现过）。操作列是按钮组，
+   宁可略微溢出也不截断，故这里单独放开省略号。 */
+.dataTable td.cellActions {
+  overflow: visible;
+  text-overflow: clip;
+}
+
+.rowActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+
+/* 表格主列：名称 + 内联元数据（固定最小高度，避免「有徽章/备注」与「无」的行高跳动） */
+.cellMain {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1px;
+  min-width: 0;
+  min-height: 30px;
+}
+
+.cellTitle {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cellMeta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+  overflow: hidden;
+  min-width: 0;
+}
+
+/* 备注文本：作为 cellMeta 的可收缩子项，单行省略（避免硬截断无 … 的「未完成感」 */
+.cellMetaNote {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  min-width: 0;
+  flex: 0 1 auto;
+}
+
+/* 备注文字本体：块级省略（text-overflow 需作用于可收缩的块/inline-block 文本元素） */
+.cellMetaNoteText {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* —— 统计块（指标） —— */
+.statGrid,
+.metricGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.statCard,
+.metricCard {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  min-width: 0;
+}
+
+/* 可点击统计卡（button 元素需重置默认样式） */
+button.statCard {
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  width: 100%;
+  cursor: pointer;
+}
+
+button.statCard:hover {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-business-primary) 45%, var(--dsw-alias-border-l1));
+}
+
+button.statCard:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+}
+
+/* 页头行内的横幅：占满剩余宽度（刷新按钮靠右） */
+.actionRow .banner {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+}
+
+.statValue {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+  font-size: 19px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--dsw-alias-label-primary);
+}
+
+.metricValue {
+  font-size: 19px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.statValueSmall {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.statLabel,
+.metricLabel {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.statMeta,
+.metricMeta {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.warnText {
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+/* —— 键值行 —— */
+.kvRow {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 5px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 55%, transparent);
+  font-size: 12px;
+  min-width: 0;
+}
+
+.kvRow:last-child {
+  border-bottom: none;
+}
+
+.kvKey {
+  flex: none;
+  width: 88px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11.5px;
+}
+
+.kvValue {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.kvValue.mono {
+  font-size: 11.5px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* —— 分段控件（页内子视图切换） —— */
+.segGroup,
+.modeTabs {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 7px;
+  background: var(--dsw-alias-bg-base);
+  margin: 0 0 10px;
+}
+
+.segItem,
+.modeTab {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 22px;
+  padding: 0 9px;
+  border: none;
+  border-radius: 5px;
+  background: none;
+  font: inherit;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.segItem:hover,
+.modeTab:hover {
+  color: var(--dsw-alias-label-primary);
+}
+
+.segItem:focus-visible,
+.modeTab:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+}
+
+.segItem[data-active],
+.modeTab[data-active] {
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-primary);
+  font-weight: 600;
+  box-shadow: 0 0 0 1px var(--dsw-alias-border-l1);
+}
+
+.modeHint {
+  font-size: 11.5px;
+  color: var(--dsw-alias-label-tertiary);
+  margin: -4px 0 10px;
+}
+
+/* —— 步骤条（紧凑横向） —— */
+.stepper {
+  display: flex;
+  align-items: center;
+  padding: 2px 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.stepper::-webkit-scrollbar {
+  display: none;
+}
+
+.stepperStep {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: none;
+}
+
+.stepperDot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  border: 1.5px solid var(--dsw-alias-border-l2);
+  font-size: 9.5px;
+  font-weight: 700;
+  color: var(--dsw-alias-label-tertiary);
+  background: var(--dsw-alias-bg-layer-2);
+  flex: none;
+}
+
+.stepperDot[data-state='current'] {
+  border-color: var(--dsw-alias-state-business-primary);
+  background: var(--dsw-alias-state-business-primary);
+  color: var(--dsw-alias-label-primary-foreground);
+}
+
+.stepperDot[data-state='done'] {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 16%, transparent);
+  color: var(--dsw-alias-state-success-primary);
+}
+
+.stepperLabel {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+}
+
+.stepperStep[data-state='current'] .stepperLabel {
+  color: var(--dsw-alias-label-primary);
+  font-weight: 600;
+}
+
+.stepperStep[data-state='done'] .stepperLabel {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.stepperConnector {
+  width: 14px;
+  height: 1.5px;
+  margin: 0 5px;
+  background: var(--dsw-alias-border-l2);
+  flex: none;
+}
+
+.stepperStep[data-state='done'] .stepperConnector {
+  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 45%, transparent);
+}
+
+/* —— 进度条 —— */
+.progressBlock {
+  margin: 0 0 10px;
+}
+
+.progressTrack {
+  position: relative;
+  height: 5px;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--dsw-alias-border-l1) 80%, transparent);
+  overflow: hidden;
+}
+
+.progressBar {
+  position: absolute;
+  inset: 0 auto 0 0;
+  border-radius: 3px;
+  background: var(--dsw-alias-state-business-primary);
+  transition: width 300ms ease-out;
+}
+
+.progressBarDone {
+  background: var(--dsw-alias-state-success-primary);
+}
+
+.progressIndeterminate {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 34%;
+  border-radius: 3px;
+  background: var(--dsw-alias-state-business-primary);
+  animation: indet 1.15s ease-in-out infinite;
+}
+
+@keyframes indet {
+  0% { left: -34%; }
+  100% { left: 100%; }
+}
+
+.progressMeta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 5px;
+  font-size: 11.5px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.progressLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.progressPercent {
+  flex: none;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.progressBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.progressBadgeCount {
+  padding: 0 5px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--dsw-alias-state-info-primary) 14%, transparent);
+  color: var(--dsw-alias-label-secondary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.progressBadgeSection {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.progressDetail {
+  margin-top: 3px;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* —— 限高滚动容器（大报告/列表通用） —— */
+.planScroll,
+.reportScroll,
+.confirmScroll,
+.pullScroll,
+.diffScroll,
+.historyScroll,
+.consultScroll {
+  overflow: auto;
+  max-height: 380px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-base);
+}
+
+/* 咨询卡的评分维度：留出左右内边距 —— 维度行的徽章胶囊原本紧贴容器左边框
+   （实测仅 1px，即边框本身），右侧也贴着滚动条。 */
+.consultScroll {
+  padding: 0 6px;
+}
+
+.logScroll {
+  overflow: auto;
+  max-height: 220px;
+  background: var(--dsw-alias-bg-base);
+}
+
+/* ================================================================ §6 Overlays */
+
+/* —— 确认弹窗 —— */
+.dialogMask {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--dsw-alias-bg-base) 55%, transparent);
+}
+
+/* Radix Dialog.Content 自居中定位（Portal 下与 Overlay 平级，需自身 fixed 居中；
+   旧内联弹窗里 .dialogCard 是 .dialogMask(flex) 的子元素，无需此类——两者并存兼容）。 */
+.dialogContentCenter {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 101;
+}
+
+.dialogCard {
+  /* 弹窗尺寸（2026-09 放大）：旧值 380×480 在长内容（配置更改明细 / 分区构成）
+     下可读性差 —— 内容被压成很窄的一列、且正文很早就开始内滚。
+     现按宿主设置弹窗的可见范围（min(800px, 100vw-48px)）取整：宽 640、高 600
+     （接近插件画布 564×720 的观感），并给长行留足横向余量。
+     说明：Radix Portal 落在插件根节点内，而插件在宿主 800px 面板中，
+     因此 vw/vh 基准约等于面板尺寸；乘以 0.95/0.92 后再减去宿主导航余量兜底。 */
+  width: min(640px, calc(100vw - 48px), 95%);
+  max-width: calc(100vw - 48px);
+  max-height: min(600px, calc(100vh - 64px), 92%);
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-2);
+  box-shadow: 0 12px 32px color-mix(in srgb, var(--dsw-alias-bg-base) 40%, transparent);
+}
+
+.dialogHeader {
+  padding: 12px 16px 0;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--dsw-alias-label-primary);
+}
+
+.dialogHeaderRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px 0;
+}
+
+.dialogClose {
+  margin-left: auto;
+}
+
+/* 弹窗正文区：padding 拆分为上下与左右，便于给「迁移前咨询」这类内嵌卡片
+   单独收窄左右内边距（见 .dialogBodyConsult）。 */
+.dialogBody {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px 16px 12px;
+  font-size: 12.5px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.dialogBodyScroll {
+  overflow-y: auto;
+  max-height: 460px;
+}
+
+.dialogWide {
+  width: min(720px, calc(100vw - 48px), 96%);
+  max-height: min(620px, calc(100vh - 64px), 92%);
+}
+
+/* 弹窗底部按钮区：右对齐，顶部分隔线，与正文区分 */
+.dialogFooter {
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 16px 14px;
+  margin: 0;
+  border-top: 1px solid var(--dsw-alias-border-l1);
+}
+
+/* —— 全局通知（右下角堆叠） ——
+   定位：absolute 贴合 .section（非 fixed/Portal），确保落在宿主弹窗层叠上下文内；
+   容器不吃指针事件，避免遮挡右下角的页面点击（状态栏/列表），仅卡片自身可交互。 */
+.toastViewport {
+  position: absolute;
+  right: 10px;
+  bottom: 42px; /* 让开 28px 状态栏 + 8px 外边距 */
+  /* 高于页面内容、状态栏(无)、弹窗遮罩(100)与卡片(101)：弹窗打开期间触发的通知
+     不能落在遮罩之下（否则被 55% 不透明遮罩盖住而严重褪色）。
+     仍留在插件层叠上下文内，因此不会越过宿主 overlay(z-index: 1000)。 */
+  z-index: 120;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+  max-width: calc(100% - 20px);
+  pointer-events: none;
+}
+
+.toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  width: fit-content;
+  max-width: 340px;
+  padding: 8px 10px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--dsw-alias-bg-base) 45%, transparent);
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--dsw-alias-label-primary);
+  animation: toastIn 160ms ease-out;
+}
+
+@keyframes toastIn {
+  from { transform: translateY(6px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+/* 四态语义：左侧色条 + 图标着色（复用 Badge/Banner 的 --dsw-* 状态色） */
+.toast[data-kind='ok'] {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-success-primary) 40%, transparent);
+}
+
+.toast[data-kind='ok'] .toastGlyph {
+  color: var(--dsw-alias-state-success-primary);
+}
+
+.toast[data-kind='info'] .toastGlyph {
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.toast[data-kind='warn'] {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 40%, transparent);
+}
+
+.toast[data-kind='warn'] .toastGlyph {
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+.toast[data-kind='error'] {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 45%, transparent);
+}
+
+.toast[data-kind='error'] .toastGlyph {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.toastGlyph {
+  display: inline-flex;
+  flex: none;
+  /* 与首行文字对齐（图标 14px 对 12px 正文，上移 1px 视觉居中） */
+  margin-top: 1px;
+}
+
+.toastText {
+  min-width: 0;
+  word-break: break-word;
+}
+
+/* 关闭按钮：与 IconButton 尺寸一致但更贴合通知条（26px → 18px 视觉内缩） */
+.toast > button {
+  width: 18px;
+  height: 18px;
+  flex: none;
+  margin-left: 2px;
+}
+
+/* —— 右侧抽屉（活动/历史） —— */
+.drawerMask {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  background: color-mix(in srgb, var(--dsw-alias-bg-base) 35%, transparent);
+}
+
+.drawerPanel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 91;
+  width: 400px;
+  max-width: calc(100vw - 64px);
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--dsw-alias-border-l1);
+  background: var(--dsw-alias-bg-layer-2);
+  box-shadow: -12px 0 32px color-mix(in srgb, var(--dsw-alias-bg-base) 35%, transparent);
+  animation: drawerIn 180ms ease-out;
+}
+
+@keyframes drawerIn {
+  from { transform: translateX(24px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+.drawerHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--dsw-alias-border-l1);
+}
+
+.drawerTitle {
+  flex: 1 1 auto;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--dsw-alias-label-primary);
+}
+
+.drawerBody {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px 14px;
+}
+
+/* 通用操作行 */
+.actionRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 0 0 10px;
+}
+
+/* 上方有说明文案的操作行（如「通道配置」按钮紧跟在 hint 之后）：
+   补一点上边距，避免按钮与说明文字贴在一起。 */
+.actionRowTop {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 10px 0 10px;
+}
+
+/* 独占一行的分段/页签行（如同步页「默认 / 高级」模式切换）：
+   与上方说明文案分行，自身作为独立行块。
+   注意：本类必须**自带分段控件外壳**（border/radius/padding/bg-base），
+   否则 `.modeTab[data-active]` 的选中底色（layer-2）会与 Card 底色相同而「隐形」。 */
+.tabRow {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-wrap: wrap;
+  width: fit-content;
+  padding: 2px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 7px;
+  background: var(--dsw-alias-bg-base);
+  margin: 10px 0 10px;
+}
+
+/* 同步页「选择历史快照」空态提示行（原为行内 hint，独立成行以保持下拉与按钮同基线） */
+.snapshotPickerHint {
+  margin-top: 4px;
+  margin-bottom: 10px;
+}
+
+/* 卡头单行（标题 + 右侧动作/徽章）：标题左、其余右。
+   与 .groupHeader 的区别：本类不做 baseline 对齐（按钮组需要居中），
+   且内嵌 .groupLabel 不保留底部外边距（否则整行会被撑高）。 */
+.headRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 0 0 10px;
+}
+
+.headRow .groupLabel {
+  margin-bottom: 0;
+}
+
+/* 作者行（关于页）：标签与作者名基线对齐 */
+.authorRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+
+/* 定时备份卡：事实行与设置行沿用统一下边距节奏（替代组件内联 style） */
+.scheduleFacts {
+  margin-top: 8px;
+}
+
+.scheduleRow {
+  margin-top: 10px;
+}
+
+.scheduleNote {
+  margin-top: 6px;
+}
+
+.authorRow .groupLabel {
+  margin-bottom: 0;
+}
+
+/* 市场条目筛选区：搜索框跨整行，其下 4 个下拉两两一行（2×2）。
+   用 grid 而非 flex：列宽严格等分，窄画布下也不会出现「每行只放得下 1 个」
+   或「控件被内容宽度挤歪」。 */
+.marketFilterGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.marketFilterSearch {
+  grid-column: 1 / -1;
+}
+
+/* 筛选区下方的元信息行（分区未知提示 + 条目计数徽章） */
+.marketFilterMeta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.pushRight {
+  margin-left: auto;
+}
+
+/* ================================================================ §7 Page: Overview（控制中心） */
+
+/* —— 状态条：健康点 + 指标段（可点击导航），32px 单行 —— */
+.statStrip {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  min-height: 32px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  margin-bottom: 10px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.statStrip::-webkit-scrollbar {
+  display: none;
+}
+
+/* 末段不被容器右缘裁切：预留内边距，保证最后一个指标值完整可见 */
+.statStrip > :last-child {
+  padding-right: 12px;
+}
+
+.statStrip[data-tone='error'] {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 45%, transparent);
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 7%, transparent);
+}
+
+.statStrip[data-tone='warn'] {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 40%, transparent);
+  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 6%, transparent);
+}
+
+.statHealth {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+  white-space: nowrap;
+  flex: none;
+}
+
+/* 健康段兼作入口：仅在「存在未解决恢复事项」时渲染为按钮，直达备份页「事故恢复」。
+   其余状态仍是纯展示的 span，避免出现无落点的可点区域。 */
+.statHealthAction {
+  border: none;
+  background: none;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+}
+
+.statHealthAction:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.statHealthAction:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: -2px;
+  border-radius: 6px;
+}
+
+.statSeg {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  border: none;
+  border-left: 1px solid var(--dsw-alias-border-l1);
+  background: none;
+  font: inherit;
+  font-size: 11.5px;
+  color: var(--dsw-alias-label-secondary);
+  white-space: nowrap;
+  cursor: pointer;
+  flex: none;
+}
+
+/* 指标段标签：弱化、不换行，与加粗值形成清晰两级 */
+.statSeg > span:first-child {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.statSeg:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.statSeg:hover > span:first-child {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.statSeg:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: -2px;
+}
+
+.statSeg b {
+  font-weight: 700;
+  color: var(--dsw-alias-label-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.statSegDim {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* —— 动作工具栏：主操作 + ghost 按钮一行（描述入 tooltip） —— */
+.toolRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+/* —— 备份位置信息块（两列 kv） —— */
+.infoGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 4px 24px;
+}
+
+.infoRow {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  font-size: 12px;
+  padding: 2px 0;
+}
+
+.infoKey {
+  flex: none;
+  width: 76px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11.5px;
+}
+
+.infoValue {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.infoValue .mono {
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 行内 copy 图标按钮（行内 hover 显示，减少视觉噪音） */
+.copyBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  font: inherit;
+  font-size: 11px;
+  line-height: 1;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+  flex: none;
+}
+
+.copyBtn:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.copyBtn:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+}
+
+/* 活动行内的 copy 按钮：hover 行时显现 */
+.activityRow .copyBtn {
+  opacity: 0;
+}
+
+.activityRow:hover .copyBtn,
+.activityRow .copyBtn:focus-visible {
+  opacity: 1;
+}
+
+/* —— 活动卡（填充剩余高度；内部滚动） —— */
+.activityCard {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0;
+  min-height: 0;
+}
+
+.activityHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.activityTitle {
+  flex: 1 1 auto;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.activityRows {
+  /* 可收缩：卡片被页面挤压缩短时列表随之收缩（自身 overflow 内滚），
+     否则列表保持 272px 而卡片变矮 → 内容溢出卡片边框（曾实测 274px 内容 vs 205px 卡片）。 */
+  flex: 0 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-base);
+}
+
+/* 自适应上限变体：fit-content，超过 8 行内部滚动（不再强制撑出空黑块） */
+.activityFit {
+  max-height: 272px;
+}
+
+.activityRow {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  padding: 5px 10px;
+  border-bottom: 1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 55%, transparent);
+  font-size: 11.5px;
+  line-height: 1.5;
+  min-width: 0;
+}
+
+.activityRow:last-child {
+  border-bottom: none;
+}
+
+.activityTime {
+  justify-self: end;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10.5px;
+  white-space: nowrap;
+}
+
+.activityKind {
+  flex: none;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.activitySummary {
+  min-width: 0;
+  line-height: 1.5;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.activitySummaryText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.activityBadge {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  line-height: 1.5;
+}
+
+/* 活动行成功态降噪（绿点 + 灰字，替代全绿徽章） */
+.activityResultOk {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  line-height: 1.5;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+}
+
+/* —— 备份位置卡：四列事实网格（标签上、值下，tabular-nums 对齐） —— */
+.factGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px 12px;
+}
+
+.factCell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.factLabel {
+  font-size: 10.5px;
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+}
+
+.factValue {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* —— 分区构成卡：两列网格行（名称 | 条目数 | 体积） ——
+   用 auto-fit，窄容器（弹窗内的分区构成）自动退化为单列，
+   宽容器（总览 / 导出预览弹窗）仍是两列。 */
+.sectionGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 0 28px;
+}
+
+.sectionRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto 56px;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 55%, transparent);
+  font-size: 11.5px;
+  min-width: 0;
+}
+
+.sectionRow:nth-last-child(-n+2) {
+  border-bottom: none;
+}
+
+.sectionName {
+  min-width: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sectionCount {
+  justify-self: end;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.sectionSize {
+  justify-self: end;
+  font-size: 10.5px;
+  color: var(--dsw-alias-label-secondary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* CJK 断行纪律：插入语不劈词 */
+.quickActionHint,
+.todoText {
+  line-break: strict;
+}
+
+/* 活动空态（紧凑） */
+.activityEmpty {
+  padding: 16px;
+  font-size: 11.5px;
+  color: var(--dsw-alias-label-tertiary);
+  text-align: center;
+}
+
+.ovGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 200px;
+  gap: 10px;
+  align-items: start;
+}
+
+.ovMain {
+  min-width: 0;
+}
+
+.ovSide {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* 快速操作：紧凑网格 */
+.quickGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.quickAction {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 9px 10px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 7px;
+  background: var(--dsw-alias-bg-base);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.quickAction:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-business-primary) 45%, var(--dsw-alias-border-l2));
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 5%, transparent);
+}
+
+.quickAction:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+}
+
+.quickAction:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.quickActionSymbol {
+  font-size: 13px;
+  color: var(--dsw-alias-state-business-primary);
+  line-height: 1;
+}
+
+.quickActionTitle {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+}
+
+.quickActionHint {
+  font-size: 10.5px;
+  line-height: 1.45;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* 活动列表 */
+.ovActivity {
+  display: flex;
+  flex-direction: column;
+}
+
+.ovActivityItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+  padding: 6px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 55%, transparent);
+  font-size: 11.5px;
+  min-width: 0;
+}
+
+.ovActivityItem:last-child {
+  border-bottom: none;
+}
+
+.ovActivityTime {
+  flex: none;
+  width: 58px;
+  color: var(--dsw-alias-label-tertiary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10.5px;
+  padding-top: 1px;
+}
+
+.ovActivityText {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* 待办/建议行 */
+.todoRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-warn-primary) 35%, transparent);
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 7%, transparent);
+  font-size: 12px;
+  margin-bottom: 6px;
+}
+
+.todoRow:last-child {
+  margin-bottom: 0;
+}
+
+.todoText {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--dsw-alias-label-primary);
+}
+
+/* ================================================================ §8 Page: Backups */
+
+.snapshotList,
+.backupFileList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.snapshotRow,
+.backupFileRow {
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  padding: 9px 12px;
+}
+
+.snapshotRow[data-selected],
+.backupFileRow[data-selected] {
+  border-color: var(--dsw-alias-state-business-primary);
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 7%, transparent);
+}
+
+.snapshotRowHeader,
+.backupFileMeta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.snapshotRowMain,
+.backupFileName {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.backupFileNote {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* 咨询卡「建议依据」：去重后每条独占一行。
+   flex-basis:100% 是必需的 —— .banner 是 flex+wrap，「建议依据」标题与
+   本列表是同一行的兄弟项，列表必须独占整行才谈得上「换行」。 */
+.reasonList {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex-basis: 100%;
+  min-width: 0;
+}
+
+.reasonLine {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+
+.reasonLine > span:first-child {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* ================================================================ §9 Page: Export / Import */
+
+.viewBody {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  /* 页面根即纵向 flex：最后一个内容块可用 margin-top:auto / flex 填充贴底 */
+}
+
+/* 页面可伸展填充块（如总览的最近活动卡） */
+.fillCard {
+  flex: 1 1 auto;
+  margin-bottom: 0;
+}
+
+/* 填充视口（卡片内列表容器撑满剩余高度，读作文件管理器视口） */
+.fillViewport {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0;
+}
+
+.fillViewport .tableScroll {
+  flex: 1 1 auto;
+  max-height: none;
+}
+
+/* 稀疏步骤顶部对齐填充（导入「选择 ZIP」等内容极少的步骤）：
+   内容贴顶排布在剩余视口内，不再垂直居中（居中会让 CTA 悬在页面中段、与步骤条脱节）。 */
+.sparseFill {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 10px;
+  min-height: 280px;
+}
+
+/* 导出分组目录（两列致密勾选网格） */
+.exportGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px 12px;
+  margin-bottom: 10px;
+}
+
+.exportGroup {
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  padding: 10px 12px;
+  min-width: 0;
+}
+
+.exportItems {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.exportItem {
+  min-width: 0;
+  padding: 1px 0;
+}
+
+/* 选项行（加密/导出密钥复选内联） */
+.optionsRow {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  margin-bottom: 4px;
+}
+
+.groupList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.groupCard {
+  margin: 0;
+}
+
+.categoryItem {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.categoryName {
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary);
+  flex: none;
+}
+
+.categoryDesc {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+  min-width: 0;
+}
+
+.optionsCard {
+  margin: 0 0 10px;
+}
+
+.optionsHeader {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--dsw-alias-label-tertiary);
+  margin-bottom: 8px;
+}
+
+.secretFields {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 10px;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  /* 与页面同底：原先用 --dsw-alias-bg-base，暗色下比宿主面板底色更暗
+     （#151517 vs #2c2c2e），「自定义文件名 / 备注」会呈现成一块突兀的深色面板。 */
+  background: none;
+  margin: 6px 0 10px;
+}
+
+.warnList {
+  margin: 4px 0 0;
+  padding-left: 18px;
+  font-size: 11.5px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.wizardCard {
+  margin: 0 0 10px;
+}
+
+.wizardStepperRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+/* 配置更改明细（ConflictList 的 .conflictDetail）与路径映射块都已经自带
+   边框与内边距，这里补一点与上方描述之间的呼吸。 */
+.conflictDetail {
+  margin-top: 2px;
+}
+
+/* 冲突列表 */
+.conflictList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.conflictItem {
+  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-warn-primary) 35%, transparent);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  padding: 10px 12px;
+}
+
+.conflictHead {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+  font-size: 12px;
+}
+
+.conflictId {
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.conflictOptions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+  margin-top: 6px;
+}
+
+/* 选边卡片：保留当前 / 使用备份 两块并排，选中高亮 */
+.conflictChoices {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.choiceCard {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 10px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 7px;
+  background: var(--dsw-alias-bg-base);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  transition: border-color 120ms ease-out, background-color 120ms ease-out;
+}
+
+.choiceCard:hover {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-business-primary) 40%, var(--dsw-alias-border-l2));
+}
+
+.choiceCard:focus-within {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+}
+
+.choiceCard[data-selected] {
+  border-color: var(--dsw-alias-state-business-primary);
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 9%, transparent);
+  color: var(--dsw-alias-label-primary);
+}
+
+.choiceCard input {
+  width: 13px;
+  height: 13px;
+  margin: 0;
+  accent-color: var(--dsw-alias-state-business-primary);
+  flex: none;
+}
+
+.choiceTitle {
+  min-width: 0;
+}
+
+.conflictDetail {
+  padding: 8px 10px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-base);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary);
+  overflow-wrap: anywhere;
+  /* 原为 <pre>（white-space:pre 不换行）→ 长配置会横向溢出并产生左右滚动条；
+     现改普通块：换行（含长路径/JSON 的任意位置折行）。 */
+  white-space: normal;
+}
+
+/* 配置更改明细：prefix（如 namespace= / 行号）→ current 行 → 分割线 → imported 行 */
+.conflictPrefix {
+  margin-bottom: 4px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.conflictLine {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 5px 0;
+}
+
+/* 两行之间的分割线（第一行不加，避免与容器上边框重复） */
+.conflictLine + .conflictLine {
+  border-top: 1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 55%, transparent);
+}
+
+.conflictLineLabel {
+  flex: none;
+  min-width: 56px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.conflictLineValue {
+  flex: 1 1 auto;
+  min-width: 0;
+  /* 长 JSON 不撑破容器：任意位置折行 */
+  overflow-wrap: anywhere;
+}
+
+/* 路径映射 */
+.pathMappingList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+/* 路径映射：每条 issue = 「原路径」块在上、「新路径」块在下（各自整宽） */
+.pathRow {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 7px;
+  background: var(--dsw-alias-bg-layer-2);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+}
+
+.pathOld,
+.pathNew {
+  min-width: 0;
+  width: 100%;
+  /* 纵向列容器：让内部 input 拉满块宽（等价于旧版全局 .input{width:100%} 的效果，
+     但不影响行内 flex 里的 select） */
+  display: flex;
+  flex-direction: column;
+  padding: 5px 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-base);
+  overflow-wrap: anywhere;
+  flex: 1 1 auto;
+}
+
+.pathValue {
+  color: var(--dsw-alias-label-secondary);
+  /* 等宽长路径折行：<pre> 默认不换行会横向溢出卡片 */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  margin: 2px 0 0;
+}
+
+.pathIssueKind {
+  flex: none;
+}
+
+/* 密钥补录 */
+.secretsList {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 快照选择行（同步页）：下拉 + 「刷新快照列表」按钮强制同一行 ——
+   nowrap + 下拉列可收缩（minWidth:0）+ 按钮列 flex:none。
+   窄画布下宁可下拉变窄，也不让按钮换到下一行。 */
+.snapshotPickerRow {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: nowrap;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+/* 该行内的字段标签归零底部外边距：.field 自带 margin-bottom:10px，
+   会让标签的 margin-box 比 select 低 10px，flex-end 对齐时按钮
+   被一并推低 10px（实测 select 底 1042 vs 按钮底 1052）→ 视觉上「不在一条线上」。 */
+.snapshotPickerRow .field {
+  margin-bottom: 0;
+}
+
+.pickerAction {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* 导入日志面板 */
+.logPanel {
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-base);
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.logHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--dsw-alias-border-l1);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-tertiary);
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+.logLine {
+  padding: 1px 10px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  line-height: 1.6;
+  color: var(--dsw-alias-label-secondary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.logEmpty {
+  padding: 12px;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+  text-align: center;
+}
+
+.logJumpButton {
+  margin-left: auto;
+  border: none;
+  background: none;
+  font: inherit;
+  font-size: 11px;
+  color: var(--dsw-alias-state-business-primary);
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+/* 报告 / 错误 */
+.reportView {
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.reportList {
+  display: flex;
+  flex-direction: column;
+}
+
+.reportText {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.reportFooter {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--dsw-alias-border-l1);
+  background: var(--dsw-alias-bg-base);
+}
+
+.errorBanner {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 9px 12px;
+  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-error-primary) 45%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent);
+  margin: 0 0 10px;
+  font-size: 12px;
+}
+
+.errorTitle {
+  font-weight: 600;
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.errorLine {
+  overflow-wrap: anywhere;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.errorList {
+  margin: 4px 0 0;
+  padding-left: 18px;
+  font-size: 11.5px;
+}
+
+.errorItem {
+  overflow-wrap: anywhere;
+}
+
+.errorReason {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.errorFooter {
+  margin-top: 6px;
+}
+
+.errorAction {
+  margin-right: 8px;
+}
+
+.errorActionLabel {
+  color: var(--dsw-alias-state-business-primary);
+}
+
+/* 恢复计划 / 差异查看 */
+.inspectGroup {
+  margin-bottom: 10px;
+}
+
+.kindTag {
+  display: inline-flex;
+  align-items: center;
+  height: 16px;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--dsw-alias-interactive-bg-hover);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-secondary);
+  white-space: nowrap;
+}
+
+.kindTagOk {
+  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 13%, transparent);
+  color: var(--dsw-alias-state-success-primary);
+}
+
+.kindTagInfo {
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 13%, transparent);
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.kindTagWarn {
+  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 13%, transparent);
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+.kindTagError {
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 13%, transparent);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.nextStepsGroup {
+  margin-bottom: 10px;
+}
+
+.rollbackBox {
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 7px;
+  background: var(--dsw-alias-bg-base);
+  padding: 8px 10px;
+  margin-bottom: 10px;
+}
+
+.statRow {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+/* 徽章行下方留出间距，避免与紧随其后的面板（兼容性/导入预览的黄色警示条、
+   咨询卡的建议依据）挤在一起；作为容器末子元素时不补（否则卡片底部会多一段空白）。 */
+.statRow:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+/* 咨询卡内的徽章行：与上方小节标题拉开一点距离（原先与标题贴在一起） */
+.consultSection {
+  margin-top: 10px;
+}
+
+.consultSection:first-of-type {
+  margin-top: 8px;
+}
+
+.consultSection .statRow {
+  margin-top: 0;
+}
+
+.hiddenFile {
+  display: none;
+}
+
+.cliName,
+.cliCommand {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+}
+
+.cliCommand {
+  color: var(--dsw-alias-label-secondary);
+  overflow-wrap: anywhere;
+}
+
+/* ================================================================ §10-13 过渡页样式（逐页重建时替换/细化） */
+
+.syncChannelHead {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.historyGroup {
+  margin-bottom: 12px;
+}
+
+.historyRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 6px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 55%, transparent);
+  font-size: 12px;
+}
+
+.historyRow:last-child {
+  border-bottom: none;
+}
+
+.historyRowMain {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.historySummary {
+  overflow-wrap: anywhere;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.historyTime {
+  flex: none;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10.5px;
+  color: var(--dsw-alias-label-tertiary);
+  padding-top: 1px;
+}
+
+.historySections {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.profileRow {
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  padding: 9px 12px;
+  margin-bottom: 6px;
+}
+
+.profileRow[data-selected] {
+  border-color: var(--dsw-alias-state-business-primary);
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 7%, transparent);
+}
+
+.profileRowHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.profileRowMain {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 档案名按钮重置（透明、左对齐） */
+button.profileRowMain {
+  border: none;
+  background: none;
+  font: inherit;
+  color: var(--dsw-alias-label-primary);
+  text-align: left;
+  cursor: pointer;
+  padding: 0;
+}
+
+button.profileRowMain:hover {
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.aboutLinkRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* 作者名外链（AboutPanel）：该组件一直在引用本类，但此前从未定义 ——
+   作者名因此落回浏览器默认 <a> 样式（下划线 + 字号/行高与相邻标签不一致）。 */
+.aboutAuthor {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--dsw-alias-state-business-primary);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+.aboutAuthor:hover {
+  text-decoration: underline;
+}
+
+.aboutAuthor:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+  border-radius: 4px;
+}
+
+.consultDimension {
+  padding: 6px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 55%, transparent);
+  font-size: 12px;
+}
+
+.consultDimension:last-child {
+  border-bottom: none;
+}
+
+.severityError {
+  color: var(--dsw-alias-state-error-primary);
+  font-weight: 600;
+}
+
+/* ================================================================ §14 Responsive */
+
+/* 设置弹窗收缩（<900px 视口：弹窗变 100vw-48px，内容列变窄） */
+@media (max-width: 900px) {
+  .ovGrid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .statGrid,
+  .metricGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .quickGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .secretFields {
+    grid-template-columns: 1fr;
+  }
+
+  .pagePad {
+    padding: 10px 12px 12px;
+  }
+
+  .drawerPanel {
+    width: 100vw;
+    max-width: 100vw;
+  }
+}