/* ==========================================================================
   UI 规范 v2.0 · 组件层预览（components.css）
   --------------------------------------------------------------------------
   状态：预览版，只在 docs/architecture/ui/preview/ 下使用；不替换 assets/common.css。
   依赖：./foundation.css（令牌、base、layout、utilities）必须先引入。
   依据：docs/plans/active/2026-10-16-ui-spec-v2-coverage.md §3 共识、§4 裁定 D1–D15。

   写法约定
   1. 只用 foundation.css 的语义令牌（--color-* --tm-* --viz-* --fs-* --space-* …），
      不写颜色字面值，不引用 --palette-*、不引用旧别名（--t3 --line …）。
   2. 组件局部变量写在组件选择器内：--{组件}-{属性}（如 --btn-h、--chip-fg）。
      本文件新增的局部变量清单见 COMPONENTS.md 末尾。
   3. 状态优先用 ARIA / 原生属性：:disabled [aria-disabled] [aria-pressed] [aria-checked]
      [aria-selected] [aria-current] [aria-invalid] [aria-busy] [readonly]；其次 .is-*。
   4. 语义后缀固定 7 个：primary / ai / ok / warn / err / info / neutral。
   5. 尺寸后缀：-xs(24) / -sm(28) / 默认(36) / -lg(44)。
   6. 旧类名别名集中在本文件末尾“兼容别名”段（v2.x 保留，v3.0 移除）。
   7. 浮层与容器自己设定表面：--surface / --surface-sunken。
   ========================================================================== */

@layer components {

/* --------------------------------------------------------------------------
   0. 公共动画（全站只在这里定义一次）
   -------------------------------------------------------------------------- */
@keyframes xt-spin{to{transform:rotate(360deg)}}
@keyframes xt-sk{to{background-position:-200% 0}}
@keyframes xt-fadein{from{opacity:0;transform:translateY(4px)}}
@keyframes xt-blink{50%{opacity:0}}
@keyframes xt-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@keyframes xt-flash{from{background:var(--color-primary-bg)}to{background:transparent}}

/* --------------------------------------------------------------------------
   1. 按钮 .btn
   -------------------------------------------------------------------------- */
.btn{
  --btn-h:var(--ctl-h-md); --btn-px:var(--space-16); --btn-fs:var(--fs-md);
  --btn-fg:var(--color-fg); --btn-bg:var(--color-bg-card); --btn-bd:var(--color-border);
  --btn-bg-hover:var(--color-bg-hover); --btn-bd-hover:var(--color-border); --btn-bg-active:var(--color-bg-active);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);
  height:var(--btn-h);padding:0 var(--btn-px);border:1px solid var(--btn-bd);border-radius:var(--radius-md);
  background:var(--btn-bg);color:var(--btn-fg);font-size:var(--btn-fs);font-weight:var(--fw-regular);
  line-height:var(--lh-tight);white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.btn svg{width:var(--icon-md);height:var(--icon-md);flex:none}
.btn:hover{color:var(--btn-fg)}
.btn:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]){background:var(--btn-bg-hover);border-color:var(--btn-bd-hover)}
.btn:active:not(:disabled):not([aria-disabled="true"]){background:var(--btn-bg-active)}
/* 变体 */
.btn-primary{--btn-fg:var(--color-fg-on-primary);--btn-bg:var(--color-primary);--btn-bd:var(--color-primary);
  --btn-bg-hover:var(--color-primary-hover);--btn-bd-hover:var(--color-primary-hover);--btn-bg-active:var(--color-primary-hover);font-weight:var(--fw-medium)}
.btn-primary:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(1px)}
.btn-ghost{--btn-fg:var(--color-fg-secondary);--btn-bg:transparent;--btn-bd:transparent;--btn-bd-hover:transparent}
.btn-ai{--btn-fg:var(--color-ai);--btn-bg:var(--color-ai-bg);--btn-bd:color-mix(in srgb,var(--color-ai) 35%,transparent);
  --btn-bg-hover:color-mix(in srgb,var(--color-ai) 12%,var(--color-ai-bg));--btn-bd-hover:var(--color-ai);
  --btn-bg-active:color-mix(in srgb,var(--color-ai) 20%,var(--color-ai-bg))}
.btn-danger{--btn-fg:var(--color-fg-on-primary);--btn-bg:var(--color-err);--btn-bd:var(--color-err);
  --btn-bg-hover:var(--color-err-hover);--btn-bd-hover:var(--color-err-hover);--btn-bg-active:var(--color-err-hover);font-weight:var(--fw-medium)}
.btn-link{--btn-fg:var(--color-link);--btn-bg:transparent;--btn-bd:transparent;--btn-bd-hover:transparent;
  --btn-bg-hover:transparent;--btn-bg-active:transparent;--btn-px:var(--space-2)}
.btn-link:hover:not(:disabled){text-decoration:underline;color:var(--color-primary-hover)}
/* 切换按钮：列表项里的“加入 / 移除”，按下后为正向绿（专家 3 P.2-5：列表项里不放主按钮） */
.btn-toggle[aria-pressed="true"]{--btn-fg:var(--color-ok);--btn-bg:var(--color-ok-bg);--btn-bd:var(--color-ok);
  --btn-bg-hover:var(--color-ok-bg);--btn-bd-hover:var(--color-ok)}
/* 普通按钮作开关时（工具栏切换） */
.btn:not(.btn-toggle):not(.btn-primary):not(.btn-danger)[aria-pressed="true"]{--btn-fg:var(--color-primary);
  --btn-bg:var(--color-primary-bg);--btn-bd:var(--color-primary);--btn-bg-hover:var(--color-primary-bg);--btn-bd-hover:var(--color-primary);font-weight:var(--fw-medium)}
/* 尺寸 */
.btn-xs{--btn-h:var(--ctl-h-xs);--btn-px:var(--space-8);--btn-fs:var(--fs-xs);gap:var(--space-4)}
.btn-sm{--btn-h:var(--ctl-h-sm);--btn-px:var(--space-10);--btn-fs:var(--fs-sm);gap:var(--space-4)}
.btn-lg{--btn-h:var(--ctl-h-lg);--btn-px:22px;--btn-fs:var(--fs-lg)}
.btn-block{display:flex;width:100%}
.btn-xs svg,.btn-sm svg{width:var(--icon-sm);height:var(--icon-sm)}
/* 状态：禁用保持原底色（v1 规则） */
.btn:disabled,.btn[aria-disabled="true"]{opacity:var(--op-disabled);cursor:not-allowed}
.btn[aria-busy="true"]{cursor:progress}
/* 按钮组：相邻按钮贴合 */
.btn-group{display:inline-flex}
.btn-group > .btn{border-radius:0}
.btn-group > .btn + .btn{margin-left:-1px}
.btn-group > .btn:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}
.btn-group > .btn:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0}

/* --------------------------------------------------------------------------
   2. 图标按钮 / 关闭按钮 .icon-btn
   -------------------------------------------------------------------------- */
.icon-btn{
  --icon-btn-size:34px; --icon-btn-fg:var(--color-fg-secondary); --icon-btn-bg:var(--color-bg-card); --icon-btn-bd:var(--color-border);
  position:relative;display:inline-grid;place-items:center;flex:none;width:var(--icon-btn-size);height:var(--icon-btn-size);padding:0;
  border:1px solid var(--icon-btn-bd);border-radius:var(--radius-md);background:var(--icon-btn-bg);color:var(--icon-btn-fg);
  font-size:var(--fs-md);line-height:var(--lh-none);cursor:pointer;transition:background-color var(--dur-fast),color var(--dur-fast)}
.icon-btn svg{width:var(--icon-md);height:var(--icon-md)}
.icon-btn:hover:not(:disabled):not([aria-disabled="true"]){background:var(--color-bg-hover);color:var(--color-fg)}
.icon-btn:active:not(:disabled){background:var(--color-bg-active)}
.icon-btn-sm{--icon-btn-size:26px;font-size:var(--fs-sm)}
.icon-btn-xs{--icon-btn-size:20px;font-size:var(--fs-xs);border-radius:var(--radius-sm)}
.icon-btn-sm svg,.icon-btn-xs svg{width:var(--icon-sm);height:var(--icon-sm)}
.icon-btn-ghost{--icon-btn-bg:transparent;--icon-btn-bd:transparent;--icon-btn-fg:var(--color-fg-muted)}
.icon-btn[aria-pressed="true"]{color:var(--color-primary);background:var(--color-primary-bg);border-color:var(--color-primary-border)}
.icon-btn:disabled,.icon-btn[aria-disabled="true"]{opacity:var(--op-disabled);cursor:not-allowed}
.icon-btn-ghost:disabled{opacity:.3}

/* 触控：粗指针下小目标的点击区扩到 --touch-coarse（视觉尺寸不变） */
@media (pointer:coarse){
  .btn-xs::after,.btn-sm::after,.icon-btn::after,.opt::after,.tab::after{content:"";position:absolute;
    inset:min(0px,calc((100% - var(--touch-coarse)) / 2))}
}

/* --------------------------------------------------------------------------
   3. 标签 .chip / 计数徽标 .badge
   -------------------------------------------------------------------------- */
.chip{
  --chip-fg:var(--color-neutral); --chip-bg:var(--color-neutral-bg); --chip-bd:transparent; --chip-fs:var(--fs-xs);
  display:inline-flex;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-8);
  border:1px solid var(--chip-bd);border-radius:var(--radius-sm);background:var(--chip-bg);color:var(--chip-fg);
  font-size:var(--chip-fs);font-weight:var(--fw-medium);line-height:var(--lh-tight);white-space:nowrap;vertical-align:baseline}
.chip-primary{--chip-fg:var(--color-primary);--chip-bg:var(--color-primary-bg)}
.chip-ai{--chip-fg:var(--color-ai);--chip-bg:var(--color-ai-bg)}
.chip-ok{--chip-fg:var(--color-ok);--chip-bg:var(--color-ok-bg)}
.chip-warn{--chip-fg:var(--color-warn);--chip-bg:var(--color-warn-bg)}
.chip-err{--chip-fg:var(--color-err);--chip-bg:var(--color-err-bg)}
.chip-info{--chip-fg:var(--color-info);--chip-bg:var(--color-info-bg)}
.chip-neutral{--chip-fg:var(--color-neutral);--chip-bg:var(--color-neutral-bg)}
/* 外观变体 */
.chip-outline{--chip-bd:var(--color-border-strong);--chip-bg:transparent;--chip-fg:var(--color-fg-muted);border-style:dashed;font-weight:var(--fw-regular)}
.chip-solid{--chip-fg:var(--color-fg-on-primary);--chip-bg:var(--color-primary)}
.chip-pre{display:inline-block;padding:0 var(--space-4);border-radius:var(--radius-xs);background:var(--color-neutral-bg);
  color:var(--color-fg-secondary);font-size:var(--fs-2xs);font-weight:var(--fw-medium)}
.chip-dot::before{content:"◐";font-weight:var(--fw-regular)}
/* 尺寸 */
.chip-xs{--chip-fs:var(--fs-2xs);padding:0 var(--space-4);border-radius:var(--radius-xs)}
.chip-lg{--chip-fs:var(--fs-sm);padding:var(--space-4) var(--space-10)}
.chip-xs.chip-pre,.chip-xs .chip-pre{font-size:inherit}

.badge{
  --badge-fg:var(--color-fg-secondary); --badge-bg:var(--color-neutral-bg);
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 var(--space-6);border-radius:var(--radius-pill);
  background:var(--badge-bg);color:var(--badge-fg);font-family:var(--font-mono);font-size:var(--fs-2xs);
  font-weight:var(--fw-medium);line-height:var(--lh-none);font-variant-numeric:tabular-nums}
.badge-primary{--badge-fg:var(--color-primary);--badge-bg:var(--color-primary-bg)}
.badge-warn{--badge-fg:var(--color-warn);--badge-bg:var(--color-warn-bg)}
.badge-err{--badge-fg:var(--color-err);--badge-bg:var(--color-err-bg)}
[aria-selected="true"] > .badge,[aria-current="true"] > .badge{--badge-fg:var(--color-primary);--badge-bg:var(--color-primary-bg)}

/* --------------------------------------------------------------------------
   4. 真实性标记 mark.tm-*（D1、D2；唯一定义处见 content-a11y.md）
      文字必须带【…】前缀；颜色、虚线只是辅助。v1 开关由令牌层处理。
   -------------------------------------------------------------------------- */
mark.tm-fill,mark.tm-cite,mark.tm-ai,mark.tm-num,mark.tm-verify{
  padding:0 var(--space-2);border-radius:var(--radius-xs);border:1px var(--mark-bs,solid) var(--mark-bd,transparent);
  background:var(--mark-bg);color:var(--mark-fg);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tm-fill{--mark-fg:var(--tm-fill-fg);--mark-bg:var(--tm-fill-bg);--mark-bd:var(--tm-fill-border);--mark-bs:var(--tm-fill-border-style)}
.tm-cite{--mark-fg:var(--tm-cite-fg);--mark-bg:var(--tm-cite-bg);--mark-bd:var(--tm-cite-border);--mark-bs:var(--tm-cite-border-style)}
.tm-ai{--mark-fg:var(--tm-ai-fg);--mark-bg:var(--tm-ai-bg);--mark-bd:var(--tm-ai-border);--mark-bs:var(--tm-ai-border-style)}
.tm-num{--mark-fg:var(--tm-num-fg);--mark-bg:var(--tm-num-bg);--mark-bd:var(--tm-num-border);--mark-bs:var(--tm-num-border-style)}
.tm-verify{--mark-fg:var(--tm-verify-fg);--mark-bg:var(--tm-verify-bg);--mark-bd:var(--tm-verify-border);--mark-bs:var(--tm-verify-border-style)}
mark.tm-ai{font-size:var(--fs-xs)}
/* 小号标记（目录、待办计数）：.chip.chip-xs.tm-*，必须带文字“待填 / 待核实”等 */
.chip.tm-fill,.chip.tm-cite,.chip.tm-ai,.chip.tm-num,.chip.tm-verify{
  --chip-fg:var(--mark-fg);--chip-bg:var(--mark-bg);--chip-bd:var(--mark-bd);border-style:var(--mark-bs)}
/* 图例：出现标记的页面放一次 */
.tm-legend{display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-16);padding:var(--space-10) var(--space-12);
  border-radius:var(--radius-md);background:var(--surface-sunken);font-size:var(--fs-xs);color:var(--color-fg-secondary);line-height:var(--lh-relaxed)}
/* 检索命中高亮（与真实性标记区分：无【】前缀） */
mark.hl{background:var(--color-primary-bg);color:inherit}

/* --------------------------------------------------------------------------
   5. 提示块 .alert / 弱注释 .callout（D3）
   -------------------------------------------------------------------------- */
.alert{
  --alert-fg:var(--color-warn); --alert-bg:var(--color-warn-bg); --alert-bd:transparent;
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-10);
  padding:var(--space-8) 14px;border:1px solid var(--alert-bd);border-radius:var(--radius-md);
  background:var(--alert-bg);color:var(--alert-fg);font-size:var(--fs-sm);line-height:var(--lh-base)}
.alert-ok{--alert-fg:var(--color-ok);--alert-bg:var(--color-ok-bg)}
.alert-warn{--alert-fg:var(--color-warn);--alert-bg:var(--color-warn-bg)}
.alert-err{--alert-fg:var(--color-err);--alert-bg:var(--color-err-bg)}
.alert-info{--alert-fg:var(--color-info);--alert-bg:var(--color-info-bg)}
.alert-ai{--alert-fg:var(--color-ai);--alert-bg:var(--color-ai-bg)}
.alert-neutral{--alert-fg:var(--color-fg);--alert-bg:var(--surface-sunken);--alert-bd:var(--color-border-subtle)}
.alert-body{flex:1;min-width:0}
.alert-title{display:block;font-size:var(--fs-md);font-weight:var(--fw-semibold)}
.alert-body > .alert-title + *{color:var(--color-fg-secondary)}
.alert-acts{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-left:auto}
.alert ul,.alert ol{margin:0;padding-left:18px}
.alert-sm{padding:var(--space-6) var(--space-10);font-size:var(--fs-sm)}
.alert-lg{padding:var(--space-12) var(--space-16);border-radius:var(--radius-lg)}
.alert + .alert{margin-top:var(--space-8)}
.alert > svg{width:var(--icon-md);height:var(--icon-md);flex:none}
/* 页面级提醒（XT.store 写入失败等），插在顶栏之后 */
.page-alert{margin:var(--space-8) var(--space-16) 0;flex:none}

.callout{
  --callout-bd:var(--color-border);
  padding:var(--space-2) var(--space-10);border-left:2px solid var(--callout-bd);
  color:var(--color-fg-muted);font-size:var(--fs-xs);line-height:var(--lh-relaxed)}
.callout-primary{--callout-bd:var(--color-primary);color:var(--color-fg);font-size:var(--fs-sm);border-left-width:3px}
.callout-ai{--callout-bd:var(--color-ai);color:var(--color-fg-secondary)}

/* 来源标注（真实性体系：事实必须带来源与获取日期） */
.source-note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);margin-top:var(--space-8);
  font-size:var(--fs-xs);color:var(--color-fg-muted);line-height:var(--lh-snug)}
.source-note a{color:inherit}
.source-note a:hover{color:var(--color-link)}

/* --------------------------------------------------------------------------
   6. 卡片 .card / 编号区块 .sec（D6 沿用 .sec-head）
   -------------------------------------------------------------------------- */
.card{--surface:var(--color-bg-card);--surface-sunken:var(--color-bg);
  background:var(--surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);min-width:0}
.card-pad{padding:var(--pad-card)}
.card-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);padding:var(--space-12) var(--space-16);border-bottom:1px solid var(--color-border)}
.card-head > h2,.card-head > h3{font-size:var(--fs-md)}
.card-body{padding:var(--pad-card)}
.card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);padding:var(--space-10) var(--space-16);border-top:1px solid var(--color-border)}
.card-dashed{border-style:dashed;border-color:var(--color-primary-border)}
.card + .card,.sec + .sec{margin-top:var(--gap-stack)}
/* 可交互卡：整卡可点（标题卡、章节卡）。必须是 button/a，或 tabindex="0" + 键盘处理 */
.card-action{display:block;width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background-color var(--dur-fast)}
.card-action:hover:not([aria-disabled="true"]){border-color:var(--color-primary-border)}
.card-action[aria-current="true"],.card-action.is-focus{border-color:var(--color-primary);box-shadow:var(--focus-ring)}
.card-action[aria-pressed="true"],.card-action[aria-checked="true"]{background:var(--color-selected-bg)}
.card-action[aria-disabled="true"]{opacity:var(--op-disabled);cursor:not-allowed}
.card-ok,.card.is-done{border-color:var(--color-ok);background:color-mix(in srgb,var(--color-ok-bg) 50%,var(--color-bg-card))}
.is-flash{animation:xt-flash 1.2s var(--ease-out)}

.sec{--surface:var(--color-bg-card);--surface-sunken:var(--color-bg);
  background:var(--surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--pad-sec)}
.sec-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6) var(--space-10);margin-bottom:var(--space-12)}
.sec-head > h2{font-size:var(--fs-lg);font-weight:var(--fw-semibold)}
.sec-head .hint{font-size:var(--fs-xs);color:var(--color-fg-muted)}
.sec-no{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:var(--radius-md);
  background:var(--color-primary-bg);color:var(--color-primary);font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.req{color:var(--color-err);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
[id].sec,[id].card{scroll-margin-top:var(--space-16)}

/* 描述列表 dl > .sum-row */
.sum-row{display:grid;grid-template-columns:var(--sum-label-w,72px) minmax(0,1fr);gap:var(--space-8);padding:9px 0;
  border-bottom:1px dashed var(--color-border-subtle);font-size:var(--fs-sm)}
.sum-row:last-child{border-bottom:0}
.sum-row dt{color:var(--color-fg-muted)}
.sum-row dd{margin:0;color:var(--color-fg);min-width:0}
.sum-row dd.empty,.sum-row dd.is-empty{padding:0;text-align:inherit;font-size:inherit;line-height:inherit;color:var(--color-fg-muted)}

/* --------------------------------------------------------------------------
   7. 折叠 details.fold（手风琴：同组 details 写相同 name）
   -------------------------------------------------------------------------- */
details.fold > summary{display:flex;align-items:center;gap:var(--space-6);list-style:none;cursor:pointer;
  font-size:var(--fs-sm);color:var(--color-fg-secondary)}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::before{content:"▸";flex:none;font-size:var(--fs-2xs);color:var(--color-fg-muted);transition:transform var(--dur-fast)}
details.fold[open] > summary::before{transform:rotate(90deg)}
details.fold > summary:hover{color:var(--color-fg)}
details.fold > summary > .chip,details.fold > summary > .badge{margin-left:auto}
.fold-body{margin-top:var(--space-8)}
.fold-card{--surface:var(--color-bg-card);--surface-sunken:var(--color-bg);
  padding:var(--space-12) var(--space-16);background:var(--surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.fold-card > summary{font-size:var(--fs-md);color:var(--color-fg);font-weight:var(--fw-medium)}
.fold-link{margin-top:var(--space-8)}
.fold-link > summary{display:inline-flex;font-size:var(--fs-sm);color:var(--color-link)}
.fold-link > summary:hover{color:var(--color-primary-hover)}
.fold-row{padding:var(--space-10) var(--space-2);border-bottom:1px solid var(--color-border-subtle)}
.fold-row:last-child{border-bottom:0}
.fold-row > summary{font-size:var(--fs-md);color:var(--color-fg);font-weight:var(--fw-medium)}
.fold-row > .fold-body{margin:var(--space-6) 0 0 var(--space-16);color:var(--color-fg-secondary);font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.fold-ai > summary{color:var(--color-ai);font-weight:var(--fw-medium)}
.fold-ai > summary:hover{color:var(--color-ai-hover)}

/* --------------------------------------------------------------------------
   8. 弹窗 dialog.dlg（XT.dialog / XT.confirm）
   -------------------------------------------------------------------------- */
dialog.dlg{--surface:var(--color-bg-raised);--surface-sunken:var(--color-bg);--dlg-w:960px;
  width:min(var(--dlg-w),calc(100vw - var(--space-32)));max-height:calc(100vh - var(--space-32));padding:0;
  display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--surface);color:var(--color-fg);box-shadow:var(--shadow-3)}
dialog.dlg:not([open]){display:none}
dialog.dlg::backdrop{background:var(--color-overlay)}
.dlg-sm{--dlg-w:480px}
.dlg-lg{--dlg-w:1120px}
.dlg-head{display:flex;align-items:center;gap:var(--space-10);padding:14px 18px;border-bottom:1px solid var(--color-border)}
.dlg-head > h2{flex:1;font-size:var(--fs-xl)}
.dlg-body{flex:1;min-height:0;padding:var(--pad-dialog);overflow:auto}
.dlg-body > p + p{margin-top:var(--space-8)}
.dlg-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-8);padding:var(--space-12) 18px;border-top:1px solid var(--color-border)}

/* --------------------------------------------------------------------------
   9. 提示条 .toast（XT.toast；可进入浏览器顶层 popover）
   -------------------------------------------------------------------------- */
.toast{--toast-tone:transparent;
  position:fixed;inset:auto auto 28px 50%;z-index:var(--z-toast);margin:0;max-width:calc(100vw - var(--space-32));
  padding:9px 18px;border:0;border-left:3px solid var(--toast-tone);border-radius:var(--radius-md);overflow:visible;
  background:var(--color-fg);color:var(--color-bg);font-size:var(--fs-md);line-height:var(--lh-snug);
  box-shadow:var(--shadow-2);opacity:0;pointer-events:none;transform:translate(-50%,20px);
  transition:opacity var(--dur-base),transform var(--dur-base)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.has-act.show{pointer-events:auto;display:flex;align-items:center;gap:14px}
.toast.show:hover,.toast.show:focus-within{pointer-events:auto}
.toast-ok{--toast-tone:var(--color-ok)}
.toast-err{--toast-tone:var(--color-err)}
.toast-act{border:0;background:transparent;color:var(--color-primary-border);font-weight:var(--fw-semibold);
  cursor:pointer;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-size:inherit}
.toast-act:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   10. 页签 .tabs（XT.tabs；只在区块互相独立、结论已在页首时使用 — D9）
   -------------------------------------------------------------------------- */
.tabs{display:flex;gap:var(--space-2);border-bottom:1px solid var(--color-border);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:none;display:inline-flex;align-items:center;gap:var(--space-6);margin-bottom:-1px;
  padding:var(--space-8) 14px;border:0;border-bottom:2px solid transparent;border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:transparent;color:var(--color-fg-secondary);font-size:var(--fs-md);white-space:nowrap;cursor:pointer;
  transition:color var(--dur-fast),background-color var(--dur-fast)}
.tab:hover:not([aria-disabled="true"]){background:var(--color-bg-hover);color:var(--color-fg)}
.tab[aria-selected="true"]{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:var(--fw-medium)}
.tab[aria-disabled="true"]{opacity:var(--op-disabled);cursor:not-allowed}
.tab-panel{padding-top:var(--space-16)}
.tab-panel:focus-visible{outline-offset:4px}
.tabs-sm .tab{padding:var(--space-6) var(--space-10);font-size:var(--fs-sm)}
/* 胶囊式：卡片内的小切换 */
.tabs-pill{gap:var(--space-6);border-bottom:0}
.tabs-pill .tab{margin:0;padding:var(--space-4) var(--space-12);border:1px solid var(--color-border);border-radius:var(--radius-pill);font-size:var(--fs-sm)}
.tabs-pill .tab[aria-selected="true"]{background:var(--color-primary-bg);border-color:var(--color-primary)}
.tabs-pill + .tab-panel{padding-top:var(--space-10)}

/* --------------------------------------------------------------------------
   11. 分段控件 .seg（role="radiogroup"；只用于“设置一个值”，切换内容用 .tabs）
   -------------------------------------------------------------------------- */
.seg{display:inline-flex;max-width:100%;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);
  overflow:hidden;background:var(--color-bg-card)}
.seg > button{flex:none;border:0;border-right:1px solid var(--color-border);background:transparent;
  padding:5px 14px;font-size:var(--fs-sm);color:var(--color-fg-secondary);cursor:pointer;transition:background-color var(--dur-fast)}
.seg > button:last-child{border-right:0}
.seg > button:hover:not(:disabled):not([aria-disabled="true"]):not([aria-checked="true"]){background:var(--color-bg-hover);color:var(--color-fg)}
.seg > button[aria-checked="true"]{background:var(--color-primary-bg);color:var(--color-primary);font-weight:var(--fw-medium)}
.seg > button:disabled,.seg > button[aria-disabled="true"]{opacity:var(--op-disabled);cursor:not-allowed}
.seg > button:focus-visible{outline-offset:-2px}
.field > .seg{align-self:flex-start}
.seg-block,.field > .seg-block{display:flex;width:100%;align-self:stretch}
.seg-block > button{flex:1;padding-left:0;padding-right:0}
.seg-sm > button{padding:3px var(--space-10);font-size:var(--fs-xs)}

/* --------------------------------------------------------------------------
   12. 选项标签 .opt（多选 aria-pressed / 单选组内 aria-checked）
   -------------------------------------------------------------------------- */
.opt-group{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.opt{position:relative;display:inline-flex;align-items:center;gap:var(--space-6);padding:var(--space-6) 14px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-card);
  color:var(--color-fg);font-size:var(--fs-md);cursor:pointer;transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.opt:hover:not(:disabled):not([aria-disabled="true"]){border-color:var(--color-primary-border);background:var(--color-bg-hover)}
.opt[aria-pressed="true"],.opt[aria-checked="true"]{border-color:var(--color-primary);background:var(--color-primary-bg);color:var(--color-primary);font-weight:var(--fw-medium)}
.opt:disabled,.opt[aria-disabled="true"]{opacity:var(--op-disabled);cursor:not-allowed}
.opt-sm{padding:3px var(--space-10);font-size:var(--fs-sm);border-radius:var(--radius-sm)}
/* AI 建议：虚线、前缀 +；已使用则 disabled */
.opt-dashed{border-style:dashed;background:transparent;color:var(--color-fg-secondary)}
.opt-dashed:hover:not(:disabled){border-style:solid;border-color:var(--color-primary);color:var(--color-primary)}
.opt-dashed:disabled{border-style:dashed;color:var(--color-fg-muted)}

/* --------------------------------------------------------------------------
   13. 选择卡 .choice-card 与勾选指示 .ckmark
   -------------------------------------------------------------------------- */
.choice-card{display:block;width:100%;text-align:left;padding:var(--space-10) var(--space-12);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-card);color:var(--color-fg);
  cursor:pointer;transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.choice-card:hover:not(:disabled):not([aria-disabled="true"]){border-color:var(--color-primary-border)}
.choice-card > b{display:block;font-size:var(--fs-md);font-weight:var(--fw-semibold)}
.choice-card > span{display:block;margin-top:var(--space-2);font-size:var(--fs-xs);color:var(--color-fg-muted)}
.choice-card[aria-checked="true"]{border-color:var(--color-primary);background:var(--color-primary-bg)}
.choice-card[aria-checked="true"] > b{color:var(--color-primary)}
.choice-card[aria-pressed="true"]{border-color:var(--color-primary);background:var(--color-selected-bg)}
.choice-card:disabled,.choice-card[aria-disabled="true"]{opacity:var(--op-disabled);cursor:not-allowed}
.choice-card-ai > b::before{content:"✦ ";color:var(--color-ai)}

.ckmark{--ckmark-size:18px;display:inline-grid;place-items:center;flex:none;width:var(--ckmark-size);height:var(--ckmark-size);
  border:1.5px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg-card);
  color:transparent;font-size:calc(var(--ckmark-size) - 6px);line-height:var(--lh-none);transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.ckmark::before{content:"✓"}
.ckmark-sm{--ckmark-size:16px}
.ckmark-lg{--ckmark-size:22px}
.ckmark-radio{border-radius:var(--radius-round)}
.ckmark-radio::before{content:"●";font-size:calc(var(--ckmark-size) / 2)}
[aria-checked="true"] > .ckmark,[aria-pressed="true"] > .ckmark,.ckmark[aria-checked="true"]{
  background:var(--color-primary);border-color:var(--color-primary);color:var(--color-fg-on-primary)}
[aria-checked="mixed"] > .ckmark,.ckmark[aria-checked="mixed"]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-fg-on-primary)}
[aria-checked="mixed"] > .ckmark::before,.ckmark[aria-checked="mixed"]::before{content:"–"}
button.ckmark{padding:0;cursor:pointer}

/* 勾选清单 .checklist（作者自我确认；文案用“我已……”） */
.checklist{list-style:none;margin:0;padding:0}
.ck-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-10);align-items:start;width:100%;
  padding:var(--space-8) var(--space-6);border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-fg);
  text-align:left;font-size:var(--fs-md);line-height:var(--lh-snug);cursor:pointer}
.ck-item > .ckmark{margin-top:var(--space-2)}
.ck-item:hover{background:var(--color-bg-hover)}
.ck-item[aria-checked="true"] .ck-text{color:var(--color-fg-muted);text-decoration:line-through}
.ck-text small{display:block;font-size:var(--fs-xs);color:var(--color-fg-muted);text-decoration:none}
.checklist-head{display:flex;align-items:center;gap:var(--space-10);margin-bottom:var(--space-12);font-size:var(--fs-xs);color:var(--color-fg-secondary)}
.checklist-head > .bar{flex:1}

/* --------------------------------------------------------------------------
   14. 表单：.field / .input / .textarea / .select / .check / .switch / .input-group
   -------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}
.field-label{display:block;font-size:var(--fs-sm);color:var(--color-fg-secondary);font-weight:var(--fw-regular)}
.field-hint{font-size:var(--fs-xs);color:var(--color-fg-muted);line-height:var(--lh-snug)}
.field-err{display:flex;align-items:flex-start;gap:var(--space-4);font-size:var(--fs-xs);color:var(--color-err);line-height:var(--lh-snug)}
.field-err > svg{width:var(--icon-xs);height:var(--icon-xs);flex:none;margin-top:var(--space-2)}
.field-count{align-self:flex-end;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-fg-muted)}
.field-count.is-over{color:var(--color-err)}
.field.is-invalid > .field-label{color:var(--color-err)}
.field-row{display:grid;grid-template-columns:var(--field-label-w,96px) minmax(0,1fr);gap:var(--space-6) var(--space-12);align-items:start}
.field-row > .field-label{padding-top:var(--space-8)}
fieldset.field-set{margin:0;padding:0;border:0;min-width:0}
fieldset.field-set > legend{padding:0;margin-bottom:var(--space-6);font-size:var(--fs-sm);color:var(--color-fg-secondary)}

.input,.textarea,.select{
  --input-h:var(--ctl-h-md); --input-fs:var(--fs-md); --input-bd:var(--color-border-strong);
  width:100%;min-width:0;border:1px solid var(--input-bd);border-radius:var(--radius-md);background:var(--color-bg-card);
  color:var(--color-fg);font-size:var(--input-fs);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.input,.select{height:var(--input-h);padding:0 var(--space-12)}
.textarea{display:block;min-height:72px;padding:var(--space-8) var(--space-12);line-height:var(--lh-base);resize:vertical}
.input:hover:not(:disabled):not([readonly]),.textarea:hover:not(:disabled):not([readonly]),.select:hover:not(:disabled){border-color:var(--color-fg-muted)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--color-primary)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--color-err)}
.input:disabled,.textarea:disabled,.select:disabled{opacity:var(--op-disabled);cursor:not-allowed;background:var(--surface-sunken)}
.input[readonly],.textarea[readonly]{background:var(--surface-sunken);border-color:var(--color-border);cursor:default}
.input-sm,.select-sm{--input-h:var(--ctl-h-sm);--input-fs:var(--fs-sm);padding:0 var(--space-10)}
.input-lg,.select-lg{--input-h:var(--ctl-h-lg);--input-fs:var(--fs-lg)}
.input-num{font-family:var(--font-mono);text-align:right;width:var(--input-num-w,80px)}
/* 下拉：去掉系统箭头，用伪元素画 ▾（深浅色自动） */
.select-wrap{position:relative;display:inline-block;min-width:0}
.select-wrap-block{display:block}
.select-wrap > .select{appearance:none;-webkit-appearance:none;padding-right:var(--space-32);cursor:pointer}
.select-wrap::after{content:"▾";position:absolute;right:var(--space-12);top:50%;transform:translateY(-50%);
  color:var(--color-fg-muted);font-size:var(--fs-xs);pointer-events:none}
/* 原生复选 / 单选：label.check > input + 文字 */
.check{display:inline-flex;align-items:flex-start;gap:var(--space-8);font-size:var(--fs-sm);color:var(--color-fg-secondary);cursor:pointer;line-height:var(--lh-snug)}
.check > input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--color-primary);cursor:pointer}
.check > input:disabled,.check > input:disabled + span{opacity:var(--op-disabled);cursor:not-allowed}
/* 开关：label.check.switch > input[type=checkbox][role=switch]（即时生效的设置） */
.switch > input{appearance:none;-webkit-appearance:none;position:relative;width:32px;height:18px;margin-top:1px;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:var(--color-neutral-bg);
  transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.switch > input::before{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:var(--radius-round);
  background:var(--color-fg-muted);transition:transform var(--dur-fast),background-color var(--dur-fast)}
.switch > input:checked{background:var(--color-primary);border-color:var(--color-primary)}
.switch > input:checked::before{transform:translateX(14px);background:var(--color-fg-on-primary)}
.switch > input:focus-visible{outline:var(--focus-outline);outline-offset:2px}
/* 输入组：前缀图标 / 后缀文字 / 相邻按钮 */
.input-group{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;min-width:0}
.input-group > .input,.input-group > .ig-field{flex:1;min-width:160px}
.ig-field{position:relative;display:flex;align-items:center}
.ig-field > .ig-ico{position:absolute;left:var(--space-10);color:var(--color-fg-muted);pointer-events:none;display:grid}
.ig-field > .ig-ico svg{width:var(--icon-sm);height:var(--icon-sm)}
.ig-field > .ig-ico + .input{padding-left:var(--space-32)}
.ig-field > .ig-text{position:absolute;right:var(--space-10);font-size:var(--fs-sm);color:var(--color-fg-muted);pointer-events:none}
.ig-field.has-suffix > .input{padding-right:var(--space-48)}
/* 错误汇总（长表单策略 b） */
.error-summary{display:block}
.error-summary ul{margin-top:var(--space-4)}
.error-summary a{color:inherit}

/* --------------------------------------------------------------------------
   15. 链接族 .link
   -------------------------------------------------------------------------- */
.link{color:var(--color-link);text-decoration:none}
.link:hover{text-decoration:underline;color:var(--color-primary-hover)}
.link-muted{color:var(--color-fg-muted);text-decoration:none}
.link-muted:hover{color:var(--color-link);text-decoration:underline}
.link-ext::after{content:" ↗";font-size:.9em}

/* --------------------------------------------------------------------------
   16. 导航：面包屑 .crumb / 导航列表 .nav-list / 目录 .nav-list-toc / 翻页 .pager
   -------------------------------------------------------------------------- */
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);list-style:none;margin:0;padding:0;
  font-size:var(--fs-sm);color:var(--color-fg-muted)}
.crumb li{display:inline-flex;align-items:center;gap:var(--space-6);min-width:0}
.crumb li + li::before{content:"›";color:var(--color-fg-muted)}
.crumb a{color:var(--color-fg-secondary);text-decoration:none}
.crumb a:hover{color:var(--color-link);text-decoration:underline}
.crumb [aria-current="page"]{color:var(--color-fg)}
/* 窄屏只显示上一级，写成“‹ 上一级”（当前页名由 h1 承担；patterns.md P-N3） */
@media (max-width:760px){
  .crumb li{display:none}
  .crumb li:nth-last-child(2){display:inline-flex}
  .crumb li:nth-last-child(2)::before{content:"‹";color:var(--color-fg-muted)}
}

.nav-list{display:flex;flex-direction:column;gap:var(--space-2);list-style:none;margin:0;padding:0}
.nav-item{display:flex;align-items:center;gap:var(--space-10);width:100%;padding:7px var(--space-10);border:1px solid transparent;
  border-radius:var(--radius-md);background:transparent;color:var(--color-fg);font-size:var(--fs-md);text-align:left;
  text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast)}
.nav-item:hover{background:var(--color-bg-hover);color:var(--color-fg)}
.nav-item[aria-current="true"],.nav-item[aria-current="page"],.nav-item[aria-current="location"]{
  background:var(--color-primary-bg);color:var(--color-primary);font-weight:var(--fw-semibold)}
.nav-item[aria-disabled="true"]{opacity:var(--op-disabled);cursor:not-allowed}
.nav-ico{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:var(--radius-md);
  background:var(--color-neutral-bg);color:var(--color-fg-secondary);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
[aria-current="true"] > .nav-ico{background:var(--color-primary);color:var(--color-fg-on-primary)}
.nav-no{width:18px;flex:none;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-fg-muted)}
[aria-current="true"] > .nav-no{color:var(--color-primary)}
.nav-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-meta{margin-left:auto;flex:none;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-fg-muted);font-weight:var(--fw-regular)}
.nav-meta.chip{font-family:var(--font-sans)}
.nav-list-bordered .nav-item{border-color:var(--color-border);background:var(--color-bg-card);padding:var(--space-10) var(--space-12)}
.nav-list-bordered .nav-item[aria-current="true"]{border-color:var(--color-primary)}
.nav-list-toc .nav-item{font-size:var(--fs-sm);padding:var(--space-6) var(--space-10)}
@media (max-width:760px){
  .nav-list-scroll{flex-direction:row;overflow-x:auto;padding-bottom:var(--space-4)}
  .nav-list-scroll .nav-item{white-space:nowrap;width:auto}
}

.pager{display:inline-flex;align-items:center;gap:var(--space-6);font-size:var(--fs-sm);color:var(--color-fg-secondary)}
.pager-text{min-width:6em;text-align:center;font-variant-numeric:tabular-nums}
.pagination ol{display:flex;flex-wrap:wrap;gap:var(--space-4);list-style:none;margin:0;padding:0}
.pagination a,.pagination button{display:inline-grid;place-items:center;min-width:var(--ctl-h-sm);height:var(--ctl-h-sm);padding:0 var(--space-8);
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-card);color:var(--color-fg);
  font-family:var(--font-mono);font-size:var(--fs-sm);text-decoration:none;cursor:pointer}
.pagination a:hover,.pagination button:hover{background:var(--color-bg-hover)}
.pagination [aria-current="page"]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-fg-on-primary)}

/* --------------------------------------------------------------------------
   17. 进度条 .bar / 加载圈 .spin / 骨架屏 .sk / 刷新中 .is-stale
   -------------------------------------------------------------------------- */
.bar{--bar-h:6px;--bar-fg:var(--color-primary);position:relative;height:var(--bar-h);border-radius:var(--radius-pill);
  background:var(--color-border-subtle);overflow:hidden}
.bar > i{display:block;width:var(--bar-fill,0%);height:100%;border-radius:inherit;background:var(--bar-fg);transition:width var(--dur-slow) var(--ease-std)}
.bar-sm{--bar-h:4px}
.bar-lg{--bar-h:10px}
.bar-ok{--bar-fg:var(--color-ok)}
.bar-warn{--bar-fg:var(--color-warn)}
.bar-err{--bar-fg:var(--color-err)}
.bar-ai{--bar-fg:var(--color-ai)}
.bar-indeterminate > i{width:40%;animation:xt-indeterminate 1.2s var(--ease-std) infinite}

.spin{--spin-size:14px;--spin-fg:var(--color-primary);--spin-bg:var(--color-primary-bg);
  display:inline-block;flex:none;width:var(--spin-size);height:var(--spin-size);vertical-align:-2px;
  border:2px solid var(--spin-bg);border-top-color:var(--spin-fg);border-radius:var(--radius-round);
  animation:xt-spin var(--dur-spin) linear infinite}
.spin-sm{--spin-size:12px}
.spin-lg{--spin-size:20px}
.spin-ai{--spin-fg:var(--color-ai);--spin-bg:var(--color-ai-bg)}
.spin-on{--spin-fg:var(--color-fg-on-primary);--spin-bg:color-mix(in srgb,var(--color-fg-on-primary) 35%,transparent)}
/* 减少动效：带 data-motion="essential" 的加载圈继续转，但放慢一半（base 层只放行该属性） */
@media (prefers-reduced-motion:reduce){
  .spin[data-motion="essential"]{animation-duration:calc(var(--dur-spin) * 2)}
}

.sk{--sk-h:38px;display:block;height:var(--sk-h);border-radius:var(--radius-md);
  background:linear-gradient(90deg,var(--color-border-subtle),var(--color-bg-hover),var(--color-border-subtle));
  background-size:200% 100%;animation:xt-sk 1.2s linear infinite}
.sk + .sk{margin-top:var(--space-6)}
.sk-line{--sk-h:14px;border-radius:var(--radius-sm)}
.sk-line:last-child{width:60%}
.sk-card{--sk-h:96px;border-radius:var(--radius-lg)}
[aria-busy="true"].is-stale{opacity:var(--op-stale);transition:opacity var(--dur-base)}

/* --------------------------------------------------------------------------
   18. 空状态 .empty-state（整页）/ .empty（区域）（D4）
   -------------------------------------------------------------------------- */
.empty-state{max-width:var(--w-narrow);margin:min(12vh,120px) auto;padding:0 var(--space-16);text-align:center}
.empty-state > h1,.empty-state > h2{font-size:var(--fs-2xl);margin-bottom:var(--space-8)}
.empty-state > p{margin:0 0 var(--space-16);color:var(--color-fg-secondary)}
.empty-state > .u-row{justify-content:center}
body.layout-center .empty-state{margin:0 auto}
.empty{padding:var(--space-32) var(--space-16);text-align:center;color:var(--color-fg-muted);font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.empty > b{display:block;margin-bottom:var(--space-4);color:var(--color-fg);font-size:var(--fs-md);font-weight:var(--fw-semibold)}
.empty > .btn,.empty > .u-row{margin-top:var(--space-12)}
.empty > .u-row{justify-content:center}
.empty-dashed{border:1px dashed var(--color-border);border-radius:var(--radius-md)}
.empty-sm{padding:var(--space-16) var(--space-12)}

/* --------------------------------------------------------------------------
   19. 生成中卡片 .gen-card / AI 流式输出块 .ai-stream（容器不挂 aria-live — 共识 11）
   -------------------------------------------------------------------------- */
.gen-card{--surface:var(--color-bg-card);--surface-sunken:var(--color-bg);
  padding:14px 18px;border:1px dashed var(--color-primary-border);border-radius:var(--radius-lg);background:var(--surface)}
.gen-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);font-size:var(--fs-md)}
.gen-head > b{font-weight:var(--fw-semibold)}
.gen-meta{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-fg-muted)}
.gen-done{margin:var(--space-8) 0 0;padding-left:20px;font-size:var(--fs-sm);color:var(--color-ok);columns:2;column-gap:var(--space-24)}
.gen-card.is-done{border-style:solid;border-color:var(--color-border)}
.ai-stream{margin-top:var(--space-8);padding:var(--space-12) 14px;border-radius:var(--radius-md);background:var(--surface-sunken);
  font-family:var(--font-mono);font-size:var(--fs-sm);line-height:var(--lh-relaxed);white-space:pre-wrap;color:var(--color-fg);
  max-height:var(--ai-stream-max-h,420px);overflow-y:auto}
.ai-stream-tail{display:flex;flex-direction:column-reverse;max-height:var(--ai-stream-max-h,84px);overflow:hidden;
  font-size:var(--fs-xs);color:var(--color-fg-muted)}
.ai-stream-serif{font-family:var(--font-serif);font-size:var(--fs-sm);white-space:pre-wrap}
.as-stage{display:block;margin-top:var(--space-10);color:var(--color-primary);font-weight:var(--fw-semibold)}
.as-stage:first-child{margin-top:0}
.as-reason{color:var(--color-fg-muted);font-size:var(--fs-xs)}
.ai-stream.hide-reason .as-reason{display:none}
.as-title{display:block;color:var(--color-ok)}
.as-title::before{content:"✓ "}
.as-note{display:block;color:var(--color-warn)}
.as-caret{display:inline-block;width:7px;height:14px;vertical-align:-2px;background:var(--color-primary);animation:xt-blink 1s steps(1) infinite}

/* --------------------------------------------------------------------------
   20. 指标卡 .kpi / .kpi-grid（读 --surface-sunken：白卡里变灰、灰底上变白）
   -------------------------------------------------------------------------- */
.kpi-grid{display:grid;gap:var(--space-8);grid-template-columns:repeat(auto-fill,minmax(min(var(--kpi-min,120px),100%),1fr))}
.kpi{--kpi-val-fs:var(--fs-3xl);display:flex;flex-direction:column;min-width:0;margin:0;padding:var(--space-10) var(--space-12);
  border-radius:var(--radius-md);background:var(--surface-sunken);text-align:left;color:inherit;font:inherit}
dl.kpi{display:flex}
.kpi-val{order:1;margin:0;font-family:var(--font-mono);font-size:var(--kpi-val-fs);font-weight:var(--fw-medium);
  line-height:var(--lh-tight);color:var(--color-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.kpi-val small{font-family:var(--font-sans);font-size:var(--fs-xs);color:var(--color-fg-secondary);font-weight:var(--fw-regular)}
.kpi-val > mark{font-family:var(--font-sans);font-size:var(--fs-sm);white-space:normal}
.kpi-txt{font-family:var(--font-sans);font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:1.87;white-space:normal}
.kpi-lab{order:2;margin:var(--space-2) 0 0;font-size:var(--fs-xs);color:var(--color-fg-muted)}
.kpi-note{order:3;margin:var(--space-2) 0 0;font-size:var(--fs-xs);color:var(--color-fg-secondary)}
.kpi-sm{--kpi-val-fs:var(--fs-xl)}
.kpi-action{border:1px solid transparent;cursor:pointer}
.kpi-action:hover{border-color:var(--color-primary-border)}

/* --------------------------------------------------------------------------
   21. 详情页结论区 .verdict（D9：面包屑 → 标题 → 结论区 → 区块）
   -------------------------------------------------------------------------- */
.verdict{--surface:var(--color-bg-card);--surface-sunken:var(--color-bg);
  padding:var(--pad-sec);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--surface)}
.verdict-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6) var(--space-10);margin-bottom:var(--space-8)}
.verdict-head > h2{flex:1;font-size:var(--fs-xs);color:var(--color-fg-muted);font-weight:var(--fw-medium)}
.verdict-line{margin:0 0 var(--space-8);font-size:var(--fs-xl);font-weight:var(--fw-bold);line-height:var(--lh-base)}
.verdict .kpi-grid{margin:var(--space-12) 0}
.verdict-risks{display:flex;flex-direction:column;gap:var(--space-6);list-style:none;margin:var(--space-12) 0 0;padding:0}
.verdict-acts{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-16)}

/* --------------------------------------------------------------------------
   22. 表格 .table（外包 .table-wrap 横向滚动，需 tabindex="0" role="region" aria-label）
   -------------------------------------------------------------------------- */
.table-wrap{overflow-x:auto;max-width:100%}
.table{--table-pad:9px 10px;width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th,.table td{padding:var(--table-pad);border-bottom:1px solid var(--color-border-subtle);text-align:left;vertical-align:top}
.table thead th{color:var(--color-fg-muted);font-weight:var(--fw-medium);white-space:nowrap}
.table tbody tr:last-child > *{border-bottom:0}
.table-sm{--table-pad:5px 8px}
.table-hover tbody tr:hover{background:var(--color-bg-hover)}
.table tbody tr[aria-selected="true"]{background:var(--color-selected-bg)}
/* 数字表：除首列外右对齐 + 等宽 */
.table-num th:not(:first-child),.table-num td:not(:first-child){text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.table-num tbody th{color:var(--color-fg-muted);font-weight:var(--fw-medium)}
/* 键值表：首列为灰底表头列 */
.table-kv tbody th{width:var(--table-kv-w,90px);background:var(--surface-sunken);color:var(--color-fg-muted);font-weight:var(--fw-medium)}
/* 首列固定（窄屏横向滚动时） */
.table-sticky-first th:first-child,.table-sticky-first td:first-child{position:sticky;left:0;z-index:1;background:var(--surface)}
.table-sticky-first tr[aria-selected="true"] > :first-child{background:var(--color-selected-bg)}
/* 学术三线表 */
.table-3line{width:auto;margin-inline:auto}
.table-3line th,.table-3line td{border-bottom:1px solid var(--color-border);text-align:center}
.table-3line thead th{border-top:1.5px solid var(--color-fg);color:var(--color-fg);font-weight:var(--fw-semibold)}
.table-3line tbody tr:last-child > *{border-bottom:1.5px solid var(--color-fg)}
/* 对比表：首列指标名；当前对象列 .is-cur；差异行 .is-diff；“只看不同”由页面切换 .is-diff-only */
.table-cmp{table-layout:fixed;border:1px solid var(--color-border);border-radius:var(--radius-lg);border-collapse:separate;border-spacing:0;overflow:hidden}
.table-cmp th,.table-cmp td{line-height:var(--lh-snug);overflow-wrap:anywhere}
.table-cmp thead th{background:var(--surface-sunken);color:var(--color-fg);font-weight:var(--fw-semibold);vertical-align:middle;white-space:normal}
.table-cmp tbody th{width:var(--table-kv-w,72px);background:var(--surface-sunken);color:var(--color-fg-muted);font-weight:var(--fw-medium)}
.table-cmp thead th:first-child{width:var(--table-kv-w,72px)}
.table-cmp .is-cur{background:var(--color-selected-bg)}
.table-cmp thead th.is-cur{background:var(--color-primary-bg);color:var(--color-primary)}
.table-cmp tr.is-diff > th{box-shadow:inset 2px 0 0 var(--color-primary)}
.table-cmp.is-diff-only tbody tr:not(.is-diff){display:none}
.cmp-colh{display:flex;align-items:flex-start;gap:var(--space-2)}
.cmp-colh > span{flex:1;min-width:0}

/* --------------------------------------------------------------------------
   23. 图表：figure.fig / svg.chart / .hbar / .legend（XT.chart 生成；共识 10 防误导）
   -------------------------------------------------------------------------- */
.fig{margin:0;min-width:0}
.fig > figcaption.fig-title,.fig-title{margin:0 0 var(--space-8);font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--color-fg)}
.fig-sub{display:block;margin-top:var(--space-2);font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--color-fg-muted)}
.chart-wrap{min-width:280px;overflow-x:auto}
.chart-wrap + .chart-wrap{margin-top:var(--space-12)}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart .ch-axis{stroke:var(--viz-axis);stroke-width:1}
.chart .ch-grid{stroke:var(--viz-grid);stroke-width:1;stroke-dasharray:3 3}
.chart .ch-bar{fill:var(--viz-1)}
.chart .ch-bar-2{fill:var(--viz-2)}
.chart .ch-empty{fill:none;stroke:var(--viz-empty);stroke-dasharray:3 2}
.chart text{fill:var(--color-fg-muted);font-family:var(--font-mono);font-size:var(--fs-2xs)}
.chart text.ch-val{fill:var(--color-fg)}
.chart text.ch-title{fill:var(--color-fg-secondary);font-family:var(--font-sans);font-size:var(--fs-xs)}
.legend{display:flex;flex-wrap:wrap;gap:var(--space-4) 14px;margin:0 0 var(--space-8);font-size:var(--fs-xs);color:var(--color-fg-secondary)}
.legend i{display:inline-block;width:10px;height:10px;margin-right:var(--space-4);border-radius:var(--radius-xs);vertical-align:-1px;background:var(--legend-color,var(--viz-1))}
.legend .lg-1{--legend-color:var(--viz-1)} .legend .lg-2{--legend-color:var(--viz-2)} .legend .lg-3{--legend-color:var(--viz-3)}
.legend .lg-4{--legend-color:var(--viz-4)} .legend .lg-5{--legend-color:var(--viz-5)} .legend .lg-6{--legend-color:var(--viz-6)}
.legend .lg-empty{background:none;border:1px dashed var(--viz-empty)}
.hbar{list-style:none;margin:0;padding:0}
.hbar > li{display:grid;grid-template-columns:var(--hbar-name-w,96px) minmax(0,1fr) var(--hbar-num-w,64px);gap:var(--space-10);
  align-items:center;padding:var(--space-4) 0;font-size:var(--fs-sm)}
.hb-name{color:var(--color-fg-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-track{height:10px;border-radius:var(--radius-sm);background:var(--color-border-subtle);overflow:hidden}
.hb-track > i{display:block;width:var(--hbar-fill,0%);height:100%;border-radius:inherit;background:var(--hbar-color,var(--viz-1));transition:width var(--dur-slow) var(--ease-std)}
.hb-track.is-empty{background:none;border:1px dashed var(--viz-empty)}
.hb-num{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-fg);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.hb-num.is-empty{font-family:var(--font-sans);color:var(--color-fg-muted)}
.hbar-2{--hbar-color:var(--viz-2)} .hbar-3{--hbar-color:var(--viz-3)}
@media (max-width:760px){.hbar > li{grid-template-columns:var(--hbar-name-w-sm,72px) minmax(0,1fr) var(--hbar-num-w,64px);gap:var(--space-8)}}

/* --------------------------------------------------------------------------
   24. 操作条 .action-bar（D5：-float 批量选择浮条 / -foot 栏内合计 / -mobile 窄屏主操作吸底；同一视口最多一个）
   -------------------------------------------------------------------------- */
.action-bar{--surface:var(--color-bg-card);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-10);font-size:var(--fs-sm)}
.ab-count{font-family:var(--font-mono);color:var(--color-primary);font-weight:var(--fw-semibold)}
.ab-hint{font-size:var(--fs-xs);color:var(--color-fg-muted)}
.ab-acts{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-left:auto}
/* 浮条：选中 ≥1 项后出现（.is-shown） */
.action-bar-float{position:sticky;bottom:var(--space-16);z-index:var(--z-float);margin:0 var(--pad-pane-x);
  padding:var(--space-10) var(--space-12) var(--space-10) 18px;border:1px solid var(--color-primary-border);border-radius:var(--radius-lg);
  background:var(--surface);box-shadow:var(--shadow-2);opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--dur-base),transform var(--dur-base)}
.action-bar-float.is-shown{opacity:1;transform:none;pointer-events:auto}
/* 栏内合计：放在 .pane-foot 里，或单独使用 */
.action-bar-foot{padding:var(--space-10) 0 var(--space-4)}
.pane-foot > .action-bar-foot{padding:0}
/* 窄屏主操作：宽屏隐藏（主操作在 .pr-foot 或结论区）；≤1180 作为 body 的直接子元素吸底。
   有 .pr-foot 的页面不要再用它（foundation 已让 .pr-foot 在 ≤1180 吸底）。 */
.action-bar-mobile{display:none}
@media (max-width:1180px){
  .action-bar-mobile{position:sticky;bottom:0;z-index:var(--z-float);display:flex;min-height:56px;
    padding:var(--space-10) var(--space-16) calc(var(--space-10) + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--color-border);box-shadow:var(--shadow-up)}
  .action-bar-mobile .btn-primary{flex:1}
  .action-bar-mobile > .ab-acts{flex:1;margin-left:0}
}
@media (max-width:760px){.action-bar-float{margin:0 var(--space-16)}}

/* --------------------------------------------------------------------------
   25. 手动复制框（XT.copy 失败回退）、全局播报区（XT.announce）
   -------------------------------------------------------------------------- */
.copy-box{width:100%;min-height:120px;font-family:var(--font-mono);font-size:var(--fs-sm)}

/* ==========================================================================
   兼容别名（v2.x 保留，v3.0 移除；新代码不得使用）
   旧名 → 新名对照见 COMPONENTS.md §别名表。只做“外观等同”，不承诺旧页面私有子元素。
   ========================================================================== */
/* 标签 .c-* → .chip-* */
.chip.c-primary{--chip-fg:var(--color-primary);--chip-bg:var(--color-primary-bg)}
.chip.c-ai{--chip-fg:var(--color-ai);--chip-bg:var(--color-ai-bg)}
.chip.c-ok{--chip-fg:var(--color-ok);--chip-bg:var(--color-ok-bg)}
.chip.c-mock,.chip.c-warn{--chip-fg:var(--color-warn);--chip-bg:var(--color-warn-bg)}
.chip.c-err{--chip-fg:var(--color-err);--chip-bg:var(--color-err-bg)}
.chip.c-gray{--chip-fg:var(--color-neutral);--chip-bg:var(--color-neutral-bg)}
.chip.c-mock.dot::before{content:"◐"}
.chip.past,.chip.c-was{--chip-bd:var(--color-border-strong);--chip-bg:transparent;--chip-fg:var(--color-fg-muted);border-style:dashed;font-weight:var(--fw-regular)}
.chip.c-was::before{content:"曾";padding:0 3px;border-radius:var(--radius-xs);background:var(--color-neutral-bg);color:var(--color-fg-secondary);font-size:var(--fs-2xs)}
.opt .main-tag,.main-tag{display:inline-block;margin-left:var(--space-6);padding:0 var(--space-4);border-radius:var(--radius-xs);
  background:var(--color-primary);color:var(--color-fg-on-primary);font-size:var(--fs-2xs);font-weight:var(--fw-medium)}
/* 真实性标记旧名：mark.pf/.pr/.pa、待办小标记 .k.*、原型 C 的 mark.tbd */
mark.pf,mark.pr,mark.pa,mark.tbd{padding:0 var(--space-2);border-radius:var(--radius-xs);border:1px var(--mark-bs,solid) var(--mark-bd,transparent);background:var(--mark-bg);color:var(--mark-fg)}
mark.pf,.k.pf{--mark-fg:var(--tm-fill-fg);--mark-bg:var(--tm-fill-bg);--mark-bd:var(--tm-fill-border);--mark-bs:var(--tm-fill-border-style)}
mark.pr,.k.pr{--mark-fg:var(--tm-cite-fg);--mark-bg:var(--tm-cite-bg);--mark-bd:var(--tm-cite-border);--mark-bs:var(--tm-cite-border-style)}
mark.pa,.k.pa{--mark-fg:var(--tm-ai-fg);--mark-bg:var(--tm-ai-bg);--mark-bd:var(--tm-ai-border);--mark-bs:var(--tm-ai-border-style)}
.k.num{--mark-fg:var(--tm-num-fg);--mark-bg:var(--tm-num-bg);--mark-bd:var(--tm-num-border);--mark-bs:var(--tm-num-border-style)}
mark.tbd{--mark-fg:var(--tm-verify-fg);--mark-bg:var(--tm-verify-bg);--mark-bd:var(--tm-verify-border);--mark-bs:var(--tm-verify-border-style)}
mark.pa{font-size:var(--fs-xs)}
.k{display:inline-block;padding:0 var(--space-4);border-radius:var(--radius-xs);border:1px var(--mark-bs,solid) var(--mark-bd,transparent);
  background:var(--mark-bg);color:var(--mark-fg);font-size:var(--fs-2xs)}
/* 提示块旧名 → .alert */
.banner,.missing,.ready,.ok-banner,.box,.chap-warn{
  --alert-fg:var(--color-warn);--alert-bg:var(--color-warn-bg);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-10);border-radius:var(--radius-md);
  background:var(--alert-bg);color:var(--alert-fg);font-size:var(--fs-sm);line-height:var(--lh-base)}
.banner{padding:var(--space-8) 14px;margin-bottom:14px}
.missing,.ready,.chap-warn{padding:7px var(--space-10);margin-bottom:var(--space-10)}
.box{display:block;padding:var(--space-8) var(--space-12)}
.ok-banner{padding:var(--space-12) var(--space-16);border-radius:var(--radius-lg);margin-bottom:var(--space-12)}
.banner.err,.box.err{--alert-fg:var(--color-err);--alert-bg:var(--color-err-bg)}
.ready,.ok-banner,.box.ok{--alert-fg:var(--color-ok);--alert-bg:var(--color-ok-bg)}
.box.info{--alert-fg:var(--color-fg);--alert-bg:var(--surface-sunken)}   /* 以 6 个正式页面的含义（中性）为准 */
.chap-note,.tip{padding:var(--space-2) var(--space-10);border-left:2px solid var(--color-border);color:var(--color-fg-muted);font-size:var(--fs-xs);line-height:var(--lh-relaxed)}
.tip{border-left:3px solid var(--color-primary);color:var(--color-fg);font-size:var(--fs-sm)}
/* 空状态旧名 → .empty / .empty-dashed */
.placeholder,.empty-box,.empty-card{padding:var(--space-32) var(--space-16);text-align:center;color:var(--color-fg-muted);font-size:var(--fs-sm)}
.placeholder{border:1px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--space-16)}
/* 选择控件旧名 */
.q{border:1px solid var(--color-border);background:var(--color-bg-card);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-8);
  font-size:var(--fs-sm);color:var(--color-fg);cursor:pointer}
.q:hover,.q.on,.q[aria-pressed="true"]{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-bg)}
.sug{border:1px dashed var(--color-border);background:transparent;border-radius:var(--radius-sm);padding:var(--space-2) 9px;cursor:pointer;
  font-size:var(--fs-sm);color:var(--color-fg-secondary)}
.sug:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary);border-style:solid}
.sug:disabled{opacity:.4;cursor:default}
/* 操作条 / 生成中卡片旧名 */
.pickbar{position:sticky;bottom:var(--space-16);z-index:var(--z-float);display:flex;align-items:center;gap:var(--space-10);
  padding:var(--space-10) var(--space-12) var(--space-10) 18px;background:var(--color-bg-card);border:1px solid var(--color-primary-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-2);opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--dur-base),transform var(--dur-base)}
.pickbar.show{opacity:1;transform:none;pointer-events:auto}
.loading-card{padding:18px 20px;border:1px dashed var(--color-primary-border);border-radius:var(--radius-lg);background:var(--color-bg-card)}

} /* end @layer components */