weifuwu 0.87.0 → 0.89.0

package/dist/client/components/style.css

@@ -1,8 +1,7 @@
-/* weifuwu/layout — 基于 CSS 标准的布局原语 */
+/* weifuwu/layout — 基于 CSS 标准的布局原语
 
 @layer tokens, base, layout, utilities, components;
 
-@layer tokens {
 /* weifuwu/theme — 设计 Token（Primitive + Semantic 双层）
  *
  * 原始层（Primitive）：色值/暗色值只定义一次。品牌换色/暗色调校只改这一层。
@@ -253,6 +252,7 @@
 
   /* ── 色彩 — 实心填充上的文字/图标（primary/success 等实心底色） ── */
   --wf-color-on-brand: #fff;
+  --wf-color-on-warning: #451a03;  /* 警告实心底上的深色文字（暗色经 _dark.css 映射） */
 
   /* ── 浮层遮罩（Modal/Drawer overlay，暗色经 --wf-dark-overlay 映射） ── */
   --wf-overlay: rgba(0, 0, 0, 0.4);
@@ -304,9 +304,7 @@
         --wf-dark-brand-50: #1e293b;
     }
 }
-}
 
-@layer tokens {
 /* weifuwu/theme — 暗色模式
  *
  * 两种激活方式（优先级：显式 data-theme > 系统偏好）：
@@ -430,9 +428,7 @@
     --wf-overlay: var(--wf-dark-overlay);
   }
 }
-}
 
-@layer tokens {
 /* weifuwu/theme — 预设主题（shadcn themes.css 式变量组切换）
  *
  * 用法：<html data-preset="minimal|compact|rounded">
@@ -485,7 +481,6 @@
   --wf-btn-radius: 999px;
   --wf-field-radius: var(--wf-radius-md);
 }
-}
 
 @layer base {
 /* weifuwu/theme — 基础元素默认样式 */
@@ -765,34 +760,20 @@ body.wf-dragging {
 }
 
 @layer layout {
-/* stack — 纵向堆叠（L3：gap 默认值 :where() 零优先级——wf-gap-* 等覆盖工具
-   靠优先级获胜，不再依赖 import 顺序） */
+/* stack — 纵向堆叠（L3：gap/align 默认值 :where() 零优先级——wf-gap-*、
+   wf-items-* 覆盖工具靠优先级获胜，不再依赖 import 顺序） */
 .wf-stack {
   display: flex;
   flex-direction: column;
 }
 :where(.wf-stack) {
   gap: var(--wf-gap, var(--wf-gap-md));
+  align-items: var(--wf-align, stretch);
 }
-@media (min-width: 640px) { .wf-stack\@sm { flex-direction: row; align-items: var(--wf-align, center); } }
-@media (min-width: 768px) { .wf-stack\@md { flex-direction: row; align-items: var(--wf-align, center); } }
-@media (min-width: 1024px) { .wf-stack\@lg { flex-direction: row; align-items: var(--wf-align, center); } }
-
-/* stack-reverse — 纵向反向堆叠 */
-.wf-stack-reverse {
-  display: flex;
-  flex-direction: column-reverse;
-}
-:where(.wf-stack-reverse) {
-  gap: var(--wf-gap, var(--wf-gap-md));
-}
-@media (min-width: 640px) { .wf-stack-reverse\@sm { flex-direction: row-reverse; align-items: var(--wf-align, center); } }
-@media (min-width: 768px) { .wf-stack-reverse\@md { flex-direction: row-reverse; align-items: var(--wf-align, center); } }
-@media (min-width: 1024px) { .wf-stack-reverse\@lg { flex-direction: row-reverse; align-items: var(--wf-align, center); } }
 }
 
 @layer layout {
-/* row — 横向排列（L3：gap/align 默认值 :where() 零优先级——wf-gap-*、wf-top 等
+/* row — 横向排列（L3：gap/align 默认值 :where() 零优先级——wf-gap-* 等
    覆盖工具靠优先级获胜，不再依赖 import 顺序） */
 .wf-row {
   display: flex;
@@ -802,9 +783,6 @@ body.wf-dragging {
   gap: var(--wf-gap, var(--wf-gap-md));
   align-items: var(--wf-align, center);
 }
-@media (min-width: 640px) { .wf-row\@sm { flex-direction: row; flex-wrap: wrap; } }
-@media (min-width: 768px) { .wf-row\@md { flex-direction: row; flex-wrap: wrap; } }
-@media (min-width: 1024px) { .wf-row\@lg { flex-direction: row; flex-wrap: wrap; } }
 
 /* row-reverse — 横向反向排列 */
 .wf-row-reverse {
@@ -816,12 +794,9 @@ body.wf-dragging {
   gap: var(--wf-gap, var(--wf-gap-md));
   align-items: var(--wf-align, center);
 }
-@media (min-width: 640px) { .wf-row-reverse\@sm { flex-direction: row-reverse; flex-wrap: wrap; } }
-@media (min-width: 768px) { .wf-row-reverse\@md { flex-direction: row-reverse; flex-wrap: wrap; } }
-@media (min-width: 1024px) { .wf-row-reverse\@lg { flex-direction: row-reverse; flex-wrap: wrap; } }
 
-/* items — 交叉轴对齐工具（设 --wf-align 变量，wf-row/wf-row-reverse 消费；
-   语义与 wf-top/bottom/stretch 等价——items 命名对齐消费侧习惯） */
+/* items — 交叉轴对齐（单机制——设 --wf-align 变量，wf-row/wf-stack 等消费；
+   值为 CSS align-items 值词。物理方向词（top/bottom）禁入对齐域） */
 .wf-items-start { --wf-align: flex-start; }
 .wf-items-center { --wf-align: center; }
 .wf-items-end { --wf-align: flex-end; }
@@ -854,84 +829,22 @@ body.wf-dragging {
 }
 
 @layer layout {
-/* between — 两端对齐（行内垂直居中；L3：align/gap 默认值 :where() 零优先级） */
-.wf-between {
+/* justify — 主轴分布（对齐域统一 CSS 词根——值为 justify-content 值词；
+   L3：align/gap 默认值 :where() 零优先级） */
+.wf-justify-between {
   display: flex;
   justify-content: space-between;
 }
-:where(.wf-between) {
+:where(.wf-justify-between) {
   align-items: var(--wf-align, center);
   gap: var(--wf-gap, var(--wf-gap-md));
 }
-@media (min-width: 640px) { .wf-between\@sm { display: flex; justify-content: space-between; align-items: var(--wf-align, center); gap: var(--wf-gap, var(--wf-gap-md)); } }
-@media (min-width: 768px) { .wf-between\@md { display: flex; justify-content: space-between; align-items: var(--wf-align, center); gap: var(--wf-gap, var(--wf-gap-md)); } }
-@media (min-width: 1024px) { .wf-between\@lg { display: flex; justify-content: space-between; align-items: var(--wf-align, center); gap: var(--wf-gap, var(--wf-gap-md)); } }
-}
 
-@layer layout {
-/* right — 靠右对齐（L3：align/gap 默认值 :where() 零优先级） */
-.wf-right {
+.wf-justify-end {
   display: flex;
   justify-content: flex-end;
 }
-:where(.wf-right) {
-  align-items: var(--wf-align, center);
-  gap: var(--wf-gap, var(--wf-gap-md));
-}
-}
-
-@layer layout {
-/* top — 顶部对齐（L3：gap 默认值 :where() 零优先级；align-items 是身份属性） */
-.wf-top {
-  display: flex;
-  align-items: flex-start;
-}
-:where(.wf-top) {
-  gap: var(--wf-gap, var(--wf-gap-md));
-}
-}
-
-@layer layout {
-/* bottom — 底部对齐（L3：gap 默认值 :where() 零优先级；align-items 是身份属性） */
-.wf-bottom {
-  display: flex;
-  align-items: flex-end;
-}
-:where(.wf-bottom) {
-  gap: var(--wf-gap, var(--wf-gap-md));
-}
-}
-
-@layer layout {
-/* stretch — 拉伸对齐（L3：gap 默认值 :where() 零优先级；align-items 是身份属性） */
-.wf-stretch {
-  display: flex;
-  align-items: stretch;
-}
-:where(.wf-stretch) {
-  gap: var(--wf-gap, var(--wf-gap-md));
-}
-}
-
-@layer layout {
-/* around — 均匀环绕分布（L3：align/gap 默认值 :where() 零优先级） */
-.wf-around {
-  display: flex;
-  justify-content: space-around;
-}
-:where(.wf-around) {
-  align-items: var(--wf-align, center);
-  gap: var(--wf-gap, var(--wf-gap-md));
-}
-}
-
-@layer layout {
-/* evenly — 均匀分布（L3：align/gap 默认值 :where() 零优先级） */
-.wf-evenly {
-  display: flex;
-  justify-content: space-evenly;
-}
-:where(.wf-evenly) {
+:where(.wf-justify-end) {
   align-items: var(--wf-align, center);
   gap: var(--wf-gap, var(--wf-gap-md));
 }
@@ -946,183 +859,6 @@ body.wf-dragging {
 }
 }
 
-@layer layout {
-/* flex-none — 固定不伸缩（推荐名；wf-fixed 为兼容别名——易与 position:fixed 混淆，
-   position:fixed 请用 wf-pin） */
-.wf-flex-none,
-.wf-fixed {
-  flex: none;
-}
-
-/* pin — 固定定位（角标/浮层锚点——position: fixed，坐标由 inline 参数控制） */
-.wf-pin {
-  position: fixed;
-  z-index: var(--wf-z, var(--wf-cover-z));
-}
-}
-
-@layer layout {
-/* auto — 按内容撑满 */
-.wf-auto {
-  flex: auto;
-  min-width: 0;
-  min-height: 0;
-}
-}
-
-@layer layout {
-/* cover — 全屏覆盖 */
-.wf-cover {
-  position: fixed;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--wf-z, var(--wf-cover-z));
-}
-}
-
-@layer layout {
-/* pop — 浮动层 */
-.wf-pop {
-  position: absolute;
-  z-index: var(--wf-z, var(--wf-pop-z));
-}
-}
-
-@layer layout {
-/* popup — 浮层基类（usePopup.portal 自动附加；Modal/Drawer 等手动浮层可选用）
- *
- * 宽度视口 clamp：任何浮层默认不横向溢出（375px 屏也能完整操作）。
- * usePopup 已内联 maxWidth；本类兜底组件手动引用场景（audit 规则的目标选择器）。
- */
-.wf-popup {
-  max-width: min(var(--wf-popup-max, 480px), calc(100vw - 32px));
-  box-sizing: border-box;
-}
-
-/* usePopup mask 模式遮罩：全屏 fixed，z-index 低于面板（overlay=80 < popover=120），
- * 模态语义阻断页面交互；点击遮罩关闭（maskClosable 门控在组件层） */
-.wf-popup-mask {
-  position: fixed;
-  inset: 0;
-  z-index: var(--wf-z-overlay);
-  background: var(--wf-overlay);
-}
-}
-
-@layer layout {
-/* safe-area — iOS 刘海屏/Home 条安全区工具（env() 未生效环境自动为 0） */
-.wf-safe-bottom {
-  padding-bottom: env(safe-area-inset-bottom);
-}
-.wf-safe-top {
-  padding-top: env(safe-area-inset-top);
-}
-}
-
-@layer layout {
-/* anchor — 定位锚点容器 */
-.wf-anchor {
-  position: relative;
-}
-}
-
-@layer layout {
-/* sticky — 粘性定位 */
-.wf-sticky {
-  position: sticky;
-  top: var(--wf-offset, 0);
-}
-}
-
-@layer utilities {
-/* surface — 基础面 + 面工具类（背景色/气泡/胶囊） */
-
-.wf-surface {
-  border-radius: var(--wf-surface-radius);
-  box-shadow: var(--wf-surface-shadow);
-  background: var(--wf-surface-bg);
-}
-
-/* 平面表面（M4 表面语言——静态卡片/面板组合 wf-border 用：阴影仅抬升语义） */
-.wf-surface--flat {
-  box-shadow: none;
-}
-
-/* ── 背景色工具 — 引用语义 Token，免自定义 CSS ── */
-.wf-bg-secondary { background: var(--wf-color-bg-secondary); }
-.wf-bg-tertiary { background: var(--wf-color-bg-tertiary); }
-.wf-bg-brand { background: var(--wf-color-primary-bg); } /* 兼容别名 → wf-bg-primary */
-.wf-bg-primary { background: var(--wf-color-primary-bg); }
-.wf-bg-success { background: var(--wf-color-success-bg); }
-.wf-bg-warning { background: var(--wf-color-warning-bg); }
-.wf-bg-error { background: var(--wf-color-error-bg); }
-.wf-bg-info { background: var(--wf-color-info-bg); }
-
-/* ── 胶囊圆角（状态徽章/标签/色块） ── */
-.wf-pill { border-radius: 999px; }
-
-/* ── 圆角工具 — 引用圆角 Token ── */
-.wf-rounded-sm { border-radius: var(--wf-radius-sm); }
-.wf-rounded { border-radius: var(--wf-radius); }
-.wf-rounded-md { border-radius: var(--wf-radius-md); }
-.wf-rounded-lg { border-radius: var(--wf-radius-lg); }
-
-/* ── hover 抬升（Card/StatCard 可点击/悬停共用，阴影 + 上移 + 焦点环） ── */
-.wf-elevate {
-  transition: box-shadow var(--wf-dur-fast) var(--wf-ease-out), transform var(--wf-dur-fast) var(--wf-ease-out);
-}
-.wf-elevate:hover {
-  box-shadow: var(--wf-shadow-md);
-  transform: translateY(-2px);
-}
-.wf-elevate:focus-visible {
-  outline: none;
-  box-shadow: var(--wf-shadow-md), var(--wf-focus-ring);
-}
-
-/* ── 面板入场：统一 scale+fade（面板族：dropdown/select/datepicker 从触发点下方弹出） ── */
-.wf-panel-in {
-  animation: wf-panel-in var(--wf-dur-fast) var(--wf-ease-out);
-  transform-origin: top center;
-}
-
-@keyframes wf-panel-in {
-  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-/* ── 聊天气泡 ──
- * 用法：wf-bubble（对方/AI）+ wf-bubble--own（自己）
- * 行布局用 wf-row + wf-gap/wf-mb 覆盖；文字用 wf-pre-wrap 已内建
- */
-.wf-bubble {
-  display: inline-block;
-  max-width: 70%;
-  padding: var(--wf-space-sm) var(--wf-space-md);
-  border-radius: var(--wf-radius-md);
-  background: var(--wf-color-bg-secondary);
-  color: var(--wf-color-text);
-  font-size: var(--wf-font-size-base);
-  line-height: var(--wf-line-height);
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.wf-bubble--own {
-  background: var(--wf-color-primary);
-  color: var(--wf-color-on-brand);
-  border-bottom-right-radius: var(--wf-radius-sm);
-}
-
-.wf-bubble--ai {
-  background: var(--wf-color-primary-bg);
-  border: var(--wf-border-width) solid var(--wf-color-border-light);
-  border-bottom-left-radius: var(--wf-radius-sm);
-}
-}
-
 @layer layout {
 /* grid — 二维网格（L3：gap 默认值 :where() 零优先级） */
 .wf-grid {
@@ -1136,7 +872,7 @@ body.wf-dragging {
 
 @layer layout {
 /* cluster — 换行簇（L3：justify/align/gap 默认值 :where() 零优先级——
-   wf-right 等分布工具叠加时靠优先级获胜） */
+   wf-justify-end 等分布工具叠加时靠优先级获胜） */
 .wf-cluster {
   display: flex;
   flex-wrap: wrap;
@@ -1149,100 +885,47 @@ body.wf-dragging {
 }
 
 @layer layout {
-/* scroll — 可滚动容器（全局滚动条样式见 _base.css；此类仅标记语义 + overflow） */
-.wf-scroll {
-  overflow: auto;
-}
-}
-
-@layer layout {
-/* clip — 裁剪溢出 */
-.wf-clip {
-  overflow: hidden;
-}
-}
-
-@layer utilities {
-/* hidden — 隐藏元素 */
-.wf-hidden {
-  display: none;
-}
-@media (min-width: 640px) { .wf-hidden\@sm { display: none; } }
-@media (min-width: 768px) { .wf-hidden\@md { display: none; } }
-@media (min-width: 1024px) { .wf-hidden\@lg { display: none; } }
-
-/* dim — 视觉淡化（运行中/历史态/次要操作） */
-.wf-dim {
-  opacity: 0.7;
-}
-
-/* cursor — 交互指针 */
-.wf-pointer { cursor: pointer; }
-.wf-not-allowed { cursor: not-allowed; }
-
-/* 打印工具 — 导出 PDF 时隐藏工具区 / 恢复块级 */
-@media print {
-  .wf-print-hidden { display: none !important; }
-  .wf-print-block { display: block !important; }
-}
-}
-
-@layer utilities {
-/* block — 块级显示 */
-.wf-block {
-  display: block;
+/* cover — 全屏覆盖 */
+.wf-cover {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--wf-z, var(--wf-cover-z));
 }
-@media (min-width: 640px) { .wf-block\@sm { display: block; } }
-@media (min-width: 768px) { .wf-block\@md { display: block; } }
-@media (min-width: 1024px) { .wf-block\@lg { display: block; } }
 }
 
 @layer layout {
-/* inline — 行内显示 */
-.wf-inline {
-  display: inline;
-}
+/* position — 定位工具（属性名即类名——wf-relative + wf-absolute 是 CSS
+   用户的零学习配对：容器 wf-relative，角标/覆盖层子项 wf-absolute。
+   fixed 视口覆盖用组合原语 wf-cover；sticky 用 wf-sticky） */
+.wf-relative { position: relative; }
+.wf-absolute { position: absolute; }
 }
 
 @layer layout {
-/* inline-block — 行内块 */
-.wf-inline-block {
-  display: inline-block;
-}
-}
-
-@layer utilities {
-/* flex — 弹性盒 display 工具（补全 display 族：block/inline/inline-block/contents/hidden/flex）
- * 核心场景：响应式显隐的 flex 容器——`wf-hidden wf-flex@lg`（窄隐宽显且保持 flex 布局）。
- * 不可用 wf-block@lg 替代：block 会覆盖 wf-stack 的 display:flex，
- * 致 flex-direction/gap/mt-auto 全部静默失效（layouts-demo 侧栏 mt-auto 实测踩坑）。 */
-.wf-flex {
-  display: flex;
-}
-@media (min-width: 640px) { .wf-flex\@sm { display: flex; } }
-@media (min-width: 768px) { .wf-flex\@md { display: flex; } }
-@media (min-width: 1024px) { .wf-flex\@lg { display: flex; } }
-
-@media (min-width: 640px) { .wf-flex@sm { display: flex; } }
-@media (min-width: 768px) { .wf-flex@md { display: flex; } }
+/* sticky — 粘性定位 */
+.wf-sticky {
+  position: sticky;
+  top: var(--wf-offset, 0);
 }
-
-@layer layout {
-/* container — 内容宽度约束居中 */
-/* width: 100% 必须：margin: 0 auto 在 flex 父中阻止 stretch（宽度=内容）
-   ——landing 特性区 404px 而非撑满 1100 容器的根因 */
-.wf-container {
-  width: 100%;
-  max-width: var(--wf-max, 1200px);
-  margin: 0 auto;
-  padding: 0 var(--wf-gap, var(--wf-gap-lg));
 }
+
+@layer layout {
+/* overflow — 溢出控制（属性根 + CSS 值词；全局滚动条样式见 _base.css） */
+.wf-overflow-auto { overflow: auto; }
+.wf-overflow-hidden { overflow: hidden; }
+.wf-overflow-x { overflow-x: auto; }
 }
 
 @layer layout {
-/* contents — 容器抹除（子元素直接参与上层布局） */
-.wf-contents {
-  display: contents;
+/* safe-area — iOS 刘海屏/Home 条安全区工具（env() 未生效环境自动为 0） */
+.wf-safe-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.wf-safe-top {
+  padding-top: env(safe-area-inset-top);
 }
 }
 
@@ -1254,9 +937,17 @@ body.wf-dragging {
 }
 }
 
+@layer layout {
+/* align-self — 弹性子项交叉轴对齐（消费侧 wf-self-* 缺口——容器内单元素对齐） */
+.wf-self-start { align-self: flex-start; }
+.wf-self-center { align-self: center; }
+.wf-self-end { align-self: flex-end; }
+.wf-self-stretch { align-self: stretch; }
+}
+
 @layer layout {
 /* nowrap — 不换行（只管 flex-wrap——不定义 align-items，避免与
-   wf-stretch 等对齐工具叠加冲突：双份 CSS 下 nowrap 后置曾覆盖 stretch；
+   wf-items-* 对齐工具叠加冲突：双份 CSS 下 nowrap 后置曾覆盖 stretch；
    L3：gap 默认值 :where() 零优先级） */
 .wf-nowrap {
   display: flex;
@@ -1268,135 +959,29 @@ body.wf-dragging {
 }
 
 @layer layout {
-/* min — flex 子项可收缩约束 */
+/* min — flex 子项可收缩约束（flex 收缩坑标配：默认 min-width/height: auto
+   会阻止子项收缩——内容溢出/撑破布局时加这类） */
 .wf-shrink {
   min-width: 0;
   min-height: 0;
 }
-}
-
-@layer utilities {
-/* 间距/尺寸工具类 — 全部引用 --wf-* Token，无硬编码
- *
- * 命名：wf-p(adding)/wf-m(argin)[x|y|t|b] + 刻度(xs sm md lg xl 2xl)
- * 与 flex 原语协作：wf-gap-* 设置 --wf-gap 变量（stack/row/split 等读取）
- */
-
-/* ── padding ── */
-.wf-p-xs { padding: var(--wf-space-xs); }
-.wf-p-sm { padding: var(--wf-space-sm); }
-.wf-p-md { padding: var(--wf-space-md); }
-.wf-p-lg { padding: var(--wf-space-lg); }
-.wf-p-xl { padding: var(--wf-space-xl); }
-.wf-p-2xl { padding: var(--wf-space-2xl); }
-
-/* ── padding: 水平/垂直 ── */
-.wf-px-xs { padding-left: var(--wf-space-xs); padding-right: var(--wf-space-xs); }
-.wf-px-sm { padding-left: var(--wf-space-sm); padding-right: var(--wf-space-sm); }
-.wf-px-md { padding-left: var(--wf-space-md); padding-right: var(--wf-space-md); }
-.wf-px-lg { padding-left: var(--wf-space-lg); padding-right: var(--wf-space-lg); }
-.wf-px-xl { padding-left: var(--wf-space-xl); padding-right: var(--wf-space-xl); }
-.wf-px-2xl { padding-left: var(--wf-space-2xl); padding-right: var(--wf-space-2xl); }
-
-.wf-py-xs { padding-top: var(--wf-space-xs); padding-bottom: var(--wf-space-xs); }
-.wf-py-sm { padding-top: var(--wf-space-sm); padding-bottom: var(--wf-space-sm); }
-.wf-py-md { padding-top: var(--wf-space-md); padding-bottom: var(--wf-space-md); }
-.wf-py-lg { padding-top: var(--wf-space-lg); padding-bottom: var(--wf-space-lg); }
-.wf-py-xl { padding-top: var(--wf-space-xl); padding-bottom: var(--wf-space-xl); }
-.wf-py-2xl { padding-top: var(--wf-space-2xl); padding-bottom: var(--wf-space-2xl); }
-
-/* ── padding: 单侧顶/底（幽灵类防线抓出 wf-pt-md/wf-pb-md 误用——补全家族） ── */
-.wf-pt-xs { padding-top: var(--wf-space-xs); }
-.wf-pt-sm { padding-top: var(--wf-space-sm); }
-.wf-pt-md { padding-top: var(--wf-space-md); }
-.wf-pt-lg { padding-top: var(--wf-space-lg); }
-.wf-pt-xl { padding-top: var(--wf-space-xl); }
-.wf-pt-2xl { padding-top: var(--wf-space-2xl); }
-.wf-pb-xs { padding-bottom: var(--wf-space-xs); }
-.wf-pb-sm { padding-bottom: var(--wf-space-sm); }
-.wf-pb-md { padding-bottom: var(--wf-space-md); }
-.wf-pb-lg { padding-bottom: var(--wf-space-lg); }
-.wf-pb-xl { padding-bottom: var(--wf-space-xl); }
-.wf-pb-2xl { padding-bottom: var(--wf-space-2xl); }
-
-/* ── margin：重置 ── */
-.wf-m-0 { margin: 0; }
-.wf-p-0 { padding: 0; }
-
-/* ── margin（高频方向：top / bottom / 垂直） ── */
-.wf-mt-xs { margin-top: var(--wf-space-xs); }
-.wf-mt-sm { margin-top: var(--wf-space-sm); }
-.wf-mt-md { margin-top: var(--wf-space-md); }
-.wf-mt-lg { margin-top: var(--wf-space-lg); }
-.wf-mt-xl { margin-top: var(--wf-space-xl); }
-.wf-mt-2xl { margin-top: var(--wf-space-2xl); }
-
-.wf-mb-xs { margin-bottom: var(--wf-space-xs); }
-.wf-mb-sm { margin-bottom: var(--wf-space-sm); }
-.wf-mb-md { margin-bottom: var(--wf-space-md); }
-.wf-mb-lg { margin-bottom: var(--wf-space-lg); }
-.wf-mb-xl { margin-bottom: var(--wf-space-xl); }
-.wf-mb-2xl { margin-bottom: var(--wf-space-2xl); }
-
-.wf-my-xs { margin-top: var(--wf-space-xs); margin-bottom: var(--wf-space-xs); }
-.wf-my-sm { margin-top: var(--wf-space-sm); margin-bottom: var(--wf-space-sm); }
-.wf-my-md { margin-top: var(--wf-space-md); margin-bottom: var(--wf-space-md); }
-.wf-my-lg { margin-top: var(--wf-space-lg); margin-bottom: var(--wf-space-lg); }
-.wf-my-xl { margin-top: var(--wf-space-xl); margin-bottom: var(--wf-space-xl); }
-.wf-my-2xl { margin-top: var(--wf-space-2xl); margin-bottom: var(--wf-space-2xl); }
-
-/* ── margin: auto（居中） ── */
-.wf-mx-auto { margin-left: auto; margin-right: auto; }
-
-/* ── margin: 左/右（间距体系对称——消费侧 ml-* 缺口） ── */
-.wf-ml-none { margin-left: 0; }
-.wf-ml-xs { margin-left: var(--wf-space-xs); }
-.wf-ml-sm { margin-left: var(--wf-space-sm); }
-.wf-ml-md { margin-left: var(--wf-space-md); }
-.wf-ml-lg { margin-left: var(--wf-space-lg); }
-.wf-ml-xl { margin-left: var(--wf-space-xl); }
-.wf-ml-2xl { margin-left: var(--wf-space-2xl); }
-.wf-ml-auto { margin-left: auto; }
-.wf-mr-none { margin-right: 0; }
-.wf-mr-xs { margin-right: var(--wf-space-xs); }
-.wf-mr-sm { margin-right: var(--wf-space-sm); }
-.wf-mr-md { margin-right: var(--wf-space-md); }
-.wf-mr-lg { margin-right: var(--wf-space-lg); }
-.wf-mr-xl { margin-right: var(--wf-space-xl); }
-.wf-mr-2xl { margin-right: var(--wf-space-2xl); }
-.wf-mr-auto { margin-right: auto; }
-.wf-mt-none { margin-top: 0; }
-.wf-mb-none { margin-bottom: 0; }
-.wf-mx-none { margin-left: 0; margin-right: 0; }
-
-.wf-my-auto { margin-top: auto; margin-bottom: auto; }
-.wf-mt-auto { margin-top: auto; }  /* flex 列推底（侧栏 footer——曾写不存在类静默失效） */
-.wf-mb-auto { margin-bottom: auto; }
-
-/* ── gap：直接设置 gap 属性（不设 --wf-gap 变量——变量会继承污染子孙：
-   壳 root wf-gap-none 曾让 KPI grid 的 gap: var(--wf-gap) = 0 卡无间距） ── */
-.wf-gap-none { gap: 0; }
-.wf-gap-xs { gap: var(--wf-gap-xs); }
-.wf-gap-sm { gap: var(--wf-gap-sm); }
-.wf-gap-md { gap: var(--wf-gap-md); }
-.wf-gap-lg { gap: var(--wf-gap-lg); }
-.wf-gap-xl { gap: var(--wf-gap-xl); }
-.wf-gap-2xl { gap: var(--wf-gap-2xl); }
 
-/* ── 尺寸 ── */
-.wf-w-full { width: 100%; }
-.wf-h-full { height: 100%; }
-.wf-w-auto { width: auto; }
+/* 单边版本（只需横向收缩的场景——属性名即类名） */
+.wf-min-width-0 {
+  min-width: 0;
+}
+}
 
-/* ── 固定宽度阶梯（对齐 token 阶梯——卡片/面板/容器宽不再内联） ── */
-.wf-w-xs { width: var(--wf-w-xs, 320px); }
-.wf-w-sm { width: var(--wf-w-sm, 480px); }
-.wf-w-md { width: var(--wf-w-md, 640px); }
-.wf-w-lg { width: var(--wf-w-lg, 768px); }
-.wf-w-xl { width: var(--wf-w-xl, 1024px); }
-.wf-w-max { max-width: 100%; }
-.wf-w-md-auto { width: 100%; }
-@media (min-width: 768px) { .wf-w-md-auto { width: var(--wf-w-md, 640px); } }
+@layer layout {
+/* container — 内容宽度约束居中 */
+/* width: 100% 必须：margin: 0 auto 在 flex 父中阻止 stretch（宽度=内容）
+   ——landing 特性区 404px 而非撑满 1100 容器的根因 */
+.wf-container {
+  width: 100%;
+  max-width: var(--wf-max, 1200px);
+  margin: 0 auto;
+  padding: 0 var(--wf-gap, var(--wf-gap-lg));
+}
 }
 
 @layer layout {
@@ -1510,10 +1095,6 @@ body.wf-dragging {
   color: var(--wf-color-primary-text);
 }
 
-.wf-nav-icon {
-  flex-shrink: 0;
-  display: inline-flex;
-}
 
 /* ── 折叠态：图标-only 导航（配合 --wf-sidebar-width 收窄侧栏） ── */
 .wf-nav--collapsed .wf-nav-item {
@@ -1578,88 +1159,155 @@ body.wf-dragging {
 }
 
 @layer utilities {
-/* 边框工具类 — 全部引用 --wf-border-width / --wf-color-border */
-.wf-border { border: var(--wf-border-width) solid var(--wf-color-border); }
-.wf-border-t { border-top: var(--wf-border-width) solid var(--wf-color-border); }
-.wf-border-b { border-bottom: var(--wf-border-width) solid var(--wf-color-border); }
-.wf-border-l { border-left: var(--wf-border-width) solid var(--wf-color-border); }
-.wf-border-r { border-right: var(--wf-border-width) solid var(--wf-color-border); }
+/* surface — 基础面 + 面工具类（背景色/圆角/阴影——全部引用语义 Token） */
+
+.wf-surface {
+  border-radius: var(--wf-surface-radius);
+  box-shadow: var(--wf-surface-shadow);
+  background: var(--wf-surface-bg);
 }
 
-@layer utilities {
-/* 排版工具类 — 字号 / 色阶 / 字重 / 截断（零 CSS 用户自排版） */
+/* 平面表面（M4 表面语言——静态卡片/面板组合 wf-border 用：阴影仅抬升语义） */
+.wf-surface--flat {
+  box-shadow: none;
+}
 
-/* ── text-align ── */
+/* ── 背景色工具 — 引用语义 Token，免自定义 CSS ── */
+.wf-bg-secondary { background: var(--wf-color-bg-secondary); }
+.wf-bg-tertiary { background: var(--wf-color-bg-tertiary); }
+.wf-bg-primary { background: var(--wf-color-primary-bg); }
+.wf-bg-warning { background: var(--wf-color-warning-bg); }
+.wf-bg-error { background: var(--wf-color-error-bg); }
+.wf-bg-none { background: transparent; }
 
-.wf-text-left {
-  text-align: left;
+/* ── 胶囊圆角（状态徽章/标签/色块） ── */
+.wf-pill { border-radius: 999px; }
+
+/* ── 圆角工具 — 随 token --wf-radius-*（同名推导） ── */
+.wf-radius-sm { border-radius: var(--wf-radius-sm); }
+.wf-radius { border-radius: var(--wf-radius); }
+.wf-radius-md { border-radius: var(--wf-radius-md); }
+.wf-radius-lg { border-radius: var(--wf-radius-lg); }
+
+/* ── 阴影工具 — 随 token --wf-shadow-*（同名推导；抬升语义见表面语言） ── */
+.wf-shadow { box-shadow: var(--wf-shadow); }
+
+/* ── hover 抬升（Card/StatCard 可点击/悬停共用，阴影 + 上移 + 焦点环） ── */
+.wf-elevate {
+  transition: box-shadow var(--wf-dur-fast) var(--wf-ease-out), transform var(--wf-dur-fast) var(--wf-ease-out);
+}
+.wf-elevate:hover {
+  box-shadow: var(--wf-shadow-md);
+  transform: translateY(-2px);
+}
+.wf-elevate:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-shadow-md), var(--wf-focus-ring);
 }
 
-.wf-text-center {
-  text-align: center;
+/* ── 面板入场：统一 scale+fade（面板族：dropdown/select/datepicker 从触发点下方弹出） ── */
+.wf-panel-in {
+  animation: wf-panel-in var(--wf-dur-fast) var(--wf-ease-out);
+  transform-origin: top center;
 }
 
-.wf-text-right {
-  text-align: right;
+@keyframes wf-panel-in {
+  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ── 聊天气泡 ──
+ * 用法：wf-bubble（对方/AI）+ wf-bubble--own（自己）
+ * 行布局用 wf-row + wf-gap 覆盖；文字用 wf-pre-wrap 已内建
+ */
+.wf-bubble {
+  display: inline-block;
+  max-width: 70%;
+  padding: var(--wf-space-sm) var(--wf-space-md);
+  border-radius: var(--wf-radius-md);
+  background: var(--wf-color-bg-secondary);
+  color: var(--wf-color-text);
+  font-size: var(--wf-font-size-base);
+  line-height: var(--wf-line-height);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.wf-bubble--own {
+  background: var(--wf-color-primary);
+  color: var(--wf-color-on-brand);
+  border-bottom-right-radius: var(--wf-radius-sm);
+}
+
+.wf-bubble--ai {
+  background: var(--wf-color-primary-bg);
+  border: var(--wf-border-width) solid var(--wf-color-border-light);
+  border-bottom-left-radius: var(--wf-radius-sm);
+}
+}
+
+@layer utilities {
+/* 边框工具类 — 全部引用 --wf-border-width / --wf-color-border（方向全词） */
+.wf-border { border: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-top { border-top: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-bottom { border-bottom: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-left { border-left: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-right { border-right: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-none { border: none; }
 }
 
-/* ── 字号 ── */
+@layer utilities {
+/* 排版工具类（design/layout-naming.md 词根分域——过载歼灭）：
+ *   wf-font-<刻度>    字号（font-size ← --wf-font-size-*）
+ *   wf-medium/semibold/bold  字重（裸值词）
+ *   wf-text-<色>      文字颜色（语义 Token——含 on-brand 填充上文字）
+ *   wf-text-<方向>    文本对齐（text-align）
+ *   wf-tracking-*     字距（排版术语 = letter-spacing）
+ */
 
-.wf-text-xs { font-size: var(--wf-font-size-xs); }
-.wf-text-sm { font-size: var(--wf-font-size-sm); }
-.wf-text-base { font-size: var(--wf-font-size-base); }
-.wf-text-lg { font-size: var(--wf-font-size-lg); }
-.wf-text-xl { font-size: var(--wf-font-size-xl); }
-.wf-text-2xl { font-size: var(--wf-font-size-2xl); }
-.wf-text-3xl { font-size: var(--wf-font-size-3xl); }
-.wf-text-4xl { font-size: var(--wf-font-size-4xl); }
-.wf-text-5xl { font-size: var(--wf-font-size-5xl); }
-.wf-text-display { font-size: var(--wf-font-size-display); }
+/* ── 文本对齐（text-align——自然读法保留） ── */
+.wf-text-left { text-align: left; }
+.wf-text-center { text-align: center; }
+.wf-text-right { text-align: right; }
 
-/* ── 数字等宽（统计/表格数值防宽度抖动） ── */
+/* ── 字号（font 属性族） ── */
+.wf-font-xs { font-size: var(--wf-font-size-xs); }
+.wf-font-sm { font-size: var(--wf-font-size-sm); }
+.wf-font-base { font-size: var(--wf-font-size-base); }
+.wf-font-lg { font-size: var(--wf-font-size-lg); }
+.wf-font-2xl { font-size: var(--wf-font-size-2xl); }
+.wf-font-3xl { font-size: var(--wf-font-size-3xl); }
+.wf-font-4xl { font-size: var(--wf-font-size-4xl); }
 
+/* ── 数字等宽（统计/表格数值防宽度抖动） ── */
 .wf-nums {
   font-variant-numeric: var(--wf-nums);
 }
 
-/* ── 色阶 ── */
-
+/* ── 文字色（语义唯一名——随 token 用 error；浅底可读 700 级） ── */
 .wf-text-secondary { color: var(--wf-color-text-secondary); }
 .wf-text-tertiary { color: var(--wf-color-text-tertiary); }
-.wf-text-disabled { color: var(--wf-color-text-disabled); }
-.wf-text-brand { color: var(--wf-color-primary-text); } /* 兼容别名 → wf-text-primary */
 .wf-text-primary { color: var(--wf-color-primary-text); }
 .wf-text-success { color: var(--wf-color-success-text); }
 .wf-text-warning { color: var(--wf-color-warning-text); }
 .wf-text-error { color: var(--wf-color-error-text); }
-.wf-text-info { color: var(--wf-color-info-text); }
-
-/* ── 字重 ── */
-
-.wf-text-medium { font-weight: var(--wf-font-weight-medium); }
-.wf-text-semibold { font-weight: var(--wf-font-weight-semibold); }
-.wf-text-bold { font-weight: var(--wf-font-weight-bold); }
 
-/* ── 行高 ── */
+/* ── 填充上的文字色（实心品牌/警告底——对比度保障） ── */
+.wf-text-on-brand { color: var(--wf-color-on-brand); }
+.wf-text-on-warning { color: var(--wf-color-on-warning); }
 
-.wf-leading-tight { line-height: var(--wf-line-height-tight); }
-.wf-leading-base { line-height: var(--wf-line-height); }
-.wf-leading-relaxed { line-height: var(--wf-line-height-relaxed); }
+/* ── 字重（裸值词） ── */
+.wf-medium { font-weight: var(--wf-font-weight-medium); }
+.wf-semibold { font-weight: var(--wf-font-weight-semibold); }
+.wf-bold { font-weight: var(--wf-font-weight-bold); }
 
-/* ── 字距 ── */
-
-.wf-tracking-normal { letter-spacing: var(--wf-letter-spacing); }
+/* ── 字距（排版术语 tracking = letter-spacing） ── */
 .wf-tracking-wide { letter-spacing: var(--wf-letter-spacing-wide); }
-.wf-tracking-wider { letter-spacing: var(--wf-letter-spacing-wider); }
-
-/* ── 文本变换 ── */
 
+/* ── 文本变换（裸值词） ── */
 .wf-uppercase { text-transform: uppercase; }
-.wf-lowercase { text-transform: lowercase; }
-.wf-capitalize { text-transform: capitalize; }
 
 /* ── 换行/折行 ── */
-
 .wf-pre-wrap {
   white-space: pre-wrap;
   word-break: break-word;
@@ -1675,138 +1323,136 @@ body.wf-dragging {
 }
 
 /* ── 截断 ── */
-
 .wf-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.wf-line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.wf-line-clamp-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-/* 语义文字色（消费侧 wf-text-danger 缺口——错误/危险操作文字） */
-.wf-text-danger { color: var(--wf-color-error-text); }
 }
 
 @layer utilities {
-/* prose — 富文本正文排版（文章/博客/文档渲染，一个类包全部）
+/* 间距/尺寸工具类 — 全部引用 --wf-* Token，无硬编码
+ *
+ * 命名规则（design/layout-naming.md）：属性根全名 + 物理方向全词 + 标尺值
+ *   wf-padding[-{x,y,top,bottom}]-<刻度>   padding（刻度 ← --wf-space-*）
+ *   wf-margin[-{x,y,top,bottom,left}]-<刻度>  margin（刻度 ← --wf-space-*）
+ *   wf-gap-<刻度>                          直接设 gap 属性
+ *   刻度 = none|xs|sm|md|lg|xl（none = 零/取消的唯一形态）
  *
- * 用法：<article class="wf-prose">…markdown/富文本 HTML…</article>
- * 覆盖：h2-h4 / p / ul / ol / li / blockquote / pre / code / a / img / table / hr / strong
+ * 类面随消费证据生长（缺口审计机制化——layout-inventory.test.ts）。
  */
 
-.wf-prose {
-  font-size: var(--wf-font-size-base);
-  line-height: var(--wf-line-height-relaxed);
-  color: var(--wf-color-text);
-}
-
-.wf-prose h2 {
-  font-size: var(--wf-font-size-2xl);
-  font-weight: var(--wf-font-weight-semibold);
-  line-height: var(--wf-line-height-tight);
-  margin: var(--wf-space-xl) 0 var(--wf-space-md);
-}
-
-.wf-prose h3 {
-  font-size: var(--wf-font-size-xl);
-  font-weight: var(--wf-font-weight-semibold);
-  line-height: var(--wf-line-height-tight);
-  margin: var(--wf-space-lg) 0 var(--wf-space-sm);
-}
-
-.wf-prose h4 {
-  font-size: var(--wf-font-size-base);
-  font-weight: var(--wf-font-weight-semibold);
-  margin: var(--wf-space-md) 0 var(--wf-space-sm);
-}
-
-.wf-prose p {
-  margin: 0 0 var(--wf-space-md);
-  line-height: var(--wf-line-height-relaxed);
-}
-
-.wf-prose ul,
-.wf-prose ol {
-  margin: 0 0 var(--wf-space-md);
-  padding-left: var(--wf-space-lg);
-}
-
-.wf-prose li {
-  margin: var(--wf-space-xs) 0;
-  line-height: var(--wf-line-height-relaxed);
-}
+/* ── padding ── */
+.wf-padding-xs { padding: var(--wf-space-xs); }
+.wf-padding-sm { padding: var(--wf-space-sm); }
+.wf-padding-md { padding: var(--wf-space-md); }
+.wf-padding-lg { padding: var(--wf-space-lg); }
+.wf-padding-xl { padding: var(--wf-space-xl); }
+
+/* ── padding: 轴 ── */
+.wf-padding-x-sm { padding-left: var(--wf-space-sm); padding-right: var(--wf-space-sm); }
+.wf-padding-x-md { padding-left: var(--wf-space-md); padding-right: var(--wf-space-md); }
+
+.wf-padding-y-xs { padding-top: var(--wf-space-xs); padding-bottom: var(--wf-space-xs); }
+.wf-padding-y-sm { padding-top: var(--wf-space-sm); padding-bottom: var(--wf-space-sm); }
+.wf-padding-y-md { padding-top: var(--wf-space-md); padding-bottom: var(--wf-space-md); }
+.wf-padding-y-lg { padding-top: var(--wf-space-lg); padding-bottom: var(--wf-space-lg); }
+
+/* ── padding: 单侧 ── */
+.wf-padding-top-sm { padding-top: var(--wf-space-sm); }
+.wf-padding-left-sm { padding-left: var(--wf-space-sm); }
+.wf-padding-bottom-xs { padding-bottom: var(--wf-space-xs); }
+.wf-padding-bottom-sm { padding-bottom: var(--wf-space-sm); }
+.wf-padding-bottom-md { padding-bottom: var(--wf-space-md); }
+
+/* ── margin：重置（零值唯一形态 none） ── */
+.wf-margin-none { margin: 0; }
+
+/* ── margin: top / bottom ── */
+.wf-margin-top-none { margin-top: 0; }
+.wf-margin-top-xs { margin-top: var(--wf-space-xs); }
+.wf-margin-top-sm { margin-top: var(--wf-space-sm); }
+.wf-margin-top-md { margin-top: var(--wf-space-md); }
+
+.wf-margin-bottom-xs { margin-bottom: var(--wf-space-xs); }
+.wf-margin-bottom-sm { margin-bottom: var(--wf-space-sm); }
+.wf-margin-bottom-md { margin-bottom: var(--wf-space-md); }
+.wf-margin-bottom-lg { margin-bottom: var(--wf-space-lg); }
+
+/* ── margin: left / x 轴 ── */
+.wf-margin-left-xs { margin-left: var(--wf-space-xs); }
+.wf-margin-left-sm { margin-left: var(--wf-space-sm); }
+.wf-margin-x-auto { margin-left: auto; margin-right: auto; }
 
-.wf-prose blockquote {
-  margin: 0 0 var(--wf-space-md);
-  padding: var(--wf-space-xs) var(--wf-space-md);
-  border-left: 3px solid var(--wf-color-primary);
-  background: var(--wf-color-primary-bg);
-  border-radius: var(--wf-radius);
-  color: var(--wf-color-text-secondary);
-}
+/* ── gap：直接设置 gap 属性（不设 --wf-gap 变量——变量会继承污染子孙：
+   壳 root wf-gap-none 曾让 KPI grid 的 gap: var(--wf-gap) = 0 卡无间距） ── */
+.wf-gap-none { gap: 0; }
+.wf-gap-xs { gap: var(--wf-gap-xs); }
+.wf-gap-sm { gap: var(--wf-gap-sm); }
+.wf-gap-md { gap: var(--wf-gap-md); }
+.wf-gap-lg { gap: var(--wf-gap-lg); }
+.wf-gap-xl { gap: var(--wf-gap-xl); }
 
-.wf-prose pre {
-  margin: 0 0 var(--wf-space-md);
-  padding: var(--wf-space-md);
-  background: var(--wf-color-bg-tertiary);
-  border: var(--wf-border-width) solid var(--wf-color-border);
-  border-radius: var(--wf-radius);
-  overflow-x: auto;
-  white-space: pre;
+/* ── 尺寸 ── */
+.wf-width-full { width: 100%; }
+.wf-width-sm { width: var(--wf-w-sm, 480px); }
+.wf-height-full { height: 100%; }
 }
 
-.wf-prose code {
-  background: var(--wf-color-bg-tertiary);
-  padding: 2px 6px;
-  border-radius: var(--wf-radius-sm);
+@layer utilities {
+/* hidden — 隐藏元素（响应式显隐唯一模式：`wf-hidden wf-flex@lg` 窄隐宽显） */
+.wf-hidden {
+  display: none;
 }
+@media (min-width: 1024px) { .wf-hidden\@lg { display: none; } }
 
-.wf-prose pre code {
-  background: none;
-  padding: 0;
+/* dim — 视觉淡化（运行中/历史态/次要操作） */
+.wf-dim {
+  opacity: 0.7;
 }
 
-.wf-prose a {
-  color: var(--wf-color-primary-text);
-  text-decoration: none;
+/* cursor — 交互指针（裸值词） */
+.wf-pointer { cursor: pointer; }
 }
 
-.wf-prose a:hover {
-  text-decoration: underline;
+@layer utilities {
+/* block — 块级显示 */
+.wf-block {
+  display: block;
 }
-
-.wf-prose img {
-  max-width: 100%;
-  border-radius: var(--wf-radius-md);
 }
 
-.wf-prose hr {
-  margin: var(--wf-space-lg) 0;
+@layer utilities {
+/* flex — 弹性盒 display 工具（补全 display 族：block/hidden/flex）
+ * 核心场景：响应式显隐的 flex 容器——`wf-hidden wf-flex@lg`（窄隐宽显且保持 flex 布局）。
+ * 不可用 wf-block@lg 替代：block 会覆盖 wf-stack 的 display:flex，
+ * 致 flex-direction/gap 全部静默失效（layouts-demo 侧栏 mt-auto 实测踩坑）。
+ * 注意：@ 选择器必须转义（\.wf-flex\@lg——未转义 @ 是非法选择器，整条规则被丢弃） */
+.wf-flex {
+  display: flex;
 }
-
-.wf-prose strong {
-  font-weight: var(--wf-font-weight-semibold);
+@media (min-width: 640px) { .wf-flex\@sm { display: flex; } }
+@media (min-width: 1024px) { .wf-flex\@lg { display: flex; } }
 }
 
-.wf-prose > :first-child {
-  margin-top: 0;
+@layer layout {
+/* popup — 浮层基类（usePopup.portal 自动附加；Modal/Drawer 等手动浮层可选用）
+ *
+ * 宽度视口 clamp：任何浮层默认不横向溢出（375px 屏也能完整操作）。
+ * usePopup 已内联 maxWidth；本类兜底组件手动引用场景（audit 规则的目标选择器）。
+ */
+.wf-popup {
+  max-width: min(var(--wf-popup-max, 480px), calc(100vw - 32px));
+  box-sizing: border-box;
 }
 
-.wf-prose > :last-child {
-  margin-bottom: 0;
+/* usePopup mask 模式遮罩：全屏 fixed，z-index 低于面板（overlay=80 < popover=120），
+ * 模态语义阻断页面交互；点击遮罩关闭（maskClosable 门控在组件层） */
+.wf-popup-mask {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wf-z-overlay);
+  background: var(--wf-overlay);
 }
 }
 @layer components {
@@ -2542,6 +2188,13 @@ body.wf-dragging {
 .wf-autocomplete--disabled { opacity: 0.6; cursor: not-allowed; }
 .wf-autocomplete--disabled input { cursor: not-allowed; }
 
+/* 错误文案（F2 输入类基线——wf-input-err 同 Input——2027-XX 补齐） */
+.wf-autocomplete .wf-input-err {
+  color: var(--wf-color-error-text);
+  font-size: var(--wf-font-size-xs);
+  margin-top: 4px;
+}
+
 /* weifuwu/components — Avatar */
 
 .wf-avatar {
@@ -3344,7 +2997,8 @@ body.wf-dragging {
   border-radius: var(--wf-radius-sm);
   font-size: var(--wf-font-size-xs);
   pointer-events: none;
-  transform: translate(-50%, -100%);
+  /* 定位由 openPopup 内核 computePos 完成（placement top + 水平居中 + gap 8）——
+   * 不再 transform 双重偏移（旧 usePopup 自定位残留——tooltip 漂移一面板高/半宽） */
   white-space: nowrap;
 }