weifuwu 0.91.0 → 0.93.0

package/dist/client/layout/weifuwu-layout.css

@@ -1,1495 +1 @@
-/* weifuwu/layout — 基于 CSS 标准的布局原语
-
-@layer tokens, base, layout, utilities, components;
-
-/* weifuwu/theme — 设计 Token（Primitive + Semantic 双层）
- *
- * 原始层（Primitive）：色值/暗色值只定义一次。品牌换色/暗色调校只改这一层。
- * 语义层（Semantic）：组件消费这一层。主题切换 = 覆盖语义映射（见 _dark.css）。
- *
- * 品牌换肤（WUI 设计语言第一档）：只改 --wf-brand-seed 一个值，
- * 50/500/600/700 色阶经 color-mix() 自动派生（500 = seed 本身）。
- * 暗色阶由 --wf-dark-brand-seed 派生。不支持 color-mix 的旧浏览器
- * 经文件底部 @supports 回退块自动使用默认色板（渐进增强，零 JS）。
- */
-
-/* ══ 原始层（Primitive）══ */
-:root {
-  /* 品牌（WUI 设计语言：改 --wf-brand-seed 一个值全站换肤，色阶 color-mix 派生） */
-  --wf-brand-seed: #4f6ef7;
-  --wf-brand-500: var(--wf-brand-seed);
-  --wf-brand-600: color-mix(in srgb, var(--wf-brand-seed) 85%, #000);
-  --wf-brand-700: color-mix(in srgb, var(--wf-brand-seed) 70%, #000);  /* 品牌文字色（浅底可读，配 --wf-color-primary-text） */
-  --wf-brand-50: color-mix(in srgb, var(--wf-brand-seed) 12%, #fff);
-
-  /* 语义原始色 */
-  --wf-green-500: #22c55e;  --wf-green-50: #f0fdf4;
-  --wf-green-700: #15803d;  /* 语义文字色（浅底可读） */
-  --wf-amber-500: #f59e0b;  --wf-amber-50: #fffbeb;
-  --wf-amber-700: #b45309;  /* 语义文字色（浅底可读） */
-  --wf-red-500: #ef4444;    --wf-red-50: #fef2f2;
-  --wf-red-700: #b91c1c;    /* 语义文字色（浅底可读） */
-  --wf-sky-500: #1677ff;    --wf-sky-50: #e6f4ff;
-  --wf-sky-700: #0369a1;    /* 语义文字色（浅底可读） */
-
-  /* 中性 */
-  --wf-slate-900: #0f172a;  --wf-slate-500: #64748b;  --wf-slate-400: #94a3b8;
-  --wf-slate-300: #cbd5e1;  --wf-slate-200: #e2e8f0;  --wf-slate-100: #f1f5f9;
-  --wf-slate-50: #f8fafc;   --wf-white: #ffffff;
-
-  /* 暗色值（暗色模式只做映射，值定义于此） */
-  --wf-dark-brand-seed: #6b8aff;
-  --wf-dark-brand-500: var(--wf-dark-brand-seed);
-  --wf-dark-brand-600: color-mix(in srgb, var(--wf-dark-brand-seed) 78%, #fff);
-  --wf-dark-brand-50: color-mix(in srgb, var(--wf-dark-brand-seed) 12%, #0f172a);
-  --wf-dark-green-500: #4ade80;  --wf-dark-green-50: #14532d;
-  --wf-dark-amber-500: #fbbf24;  --wf-dark-amber-50: #451a03;
-  --wf-dark-red-500: #f87171;    --wf-dark-red-50: #451a1a;
-  --wf-dark-sky-500: #60a5fa;    --wf-dark-sky-50: #172554;
-  --wf-dark-slate-900: #f1f5f9;  --wf-dark-slate-500: #94a3b8;  --wf-dark-slate-400: #64748b;
-  --wf-dark-slate-300: #475569;  --wf-dark-slate-200: #334155;  --wf-dark-slate-100: #1e293b;
-  --wf-dark-slate-50: #0f172a;   --wf-dark-bg: #0f172a;
-  --wf-dark-overlay: rgba(0, 0, 0, 0.6); /* 暗色遮罩（比亮色更深，压住暗底内容） */
-  --wf-dark-fill: var(--wf-dark-slate-200);           /* 暗色填充（比底色亮一级） */
-  --wf-dark-bg-hover: rgba(255, 255, 255, 0.06);      /* 暗色 hover 反白 */
-  --wf-dark-state-hover: rgba(255, 255, 255, 0.06);   /* 状态层暗色值（hover 反白） */
-  --wf-dark-state-pressed: rgba(255, 255, 255, 0.10); /* 状态层暗色值（pressed 更强） */
-  --wf-dark-surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  --wf-dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
-  --wf-dark-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-  --wf-dark-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  --wf-dark-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
-  --wf-dark-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
-}
-
-/* ══ 语义层（Semantic）— 组件消费 ══ */
-:root {
-  /* ── 间距 ── */
-  --wf-gap-xs: 4px;
-  --wf-gap-sm: 8px;
-  --wf-gap-md: 12px;
-  --wf-gap-lg: 16px;
-  --wf-gap-xl: 24px;
-  --wf-gap-2xl: 32px;
-
-  --wf-space-xs: 4px;
-  --wf-space-sm: 8px;
-  --wf-space: 12px;
-  --wf-space-md: 16px;
-  --wf-space-lg: 24px;
-  --wf-space-xl: 32px;
-  --wf-space-2xl: 40px;
-
-  /* ── 圆角 ── */
-  --wf-radius-xs: 2px;   /* 内联代码/小元素圆角 */
-  --wf-radius-sm: 4px;
-  --wf-radius: 6px;
-  --wf-radius-md: 8px;
-  --wf-radius-lg: 12px;
-  --wf-radius-xl: 20px;
-
-  --wf-surface-radius: var(--wf-radius-md);
-  --wf-surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-
-  /* ── 阴影 ── */
-  --wf-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
-  --wf-shadow-inset: inset 0 1px 2px rgba(0,0,0,0.04);  /* 内阴影：凹槽/轨道深度（Switch/ThemeSwitch） */
-  --wf-shadow: 0 1px 3px rgba(0,0,0,0.08);
-  --wf-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
-  --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
-
-  /* ── 层级 ── */
-  /* 浮层全部 createPortal 到 body，全局参与堆叠。
-     顺序：sticky < overlay < modal/drawer < 弹出面板族 < toast < tooltip。
-     modal 与 drawer 互斥出现；面板族同级（dropdown/select/datepicker/popover）用 DOM 顺序裁决。 */
-  --wf-z-sticky: 40;
-  --wf-z-overlay: 80;
-  --wf-z-modal: 100;
-  --wf-z-tour: 2000;
-  --wf-tour-min-width: 240px;
-  --wf-kanban-col-min-width: 200px;
-  /* Layout 布局外壳（batch-8） */
-  --wf-layout-sider-width: 240px;
-  --wf-layout-sider-collapsed-width: 64px;
-  --wf-layout-header-height: 56px;
-  --wf-kanban-col-max-width: 300px;
-  --wf-treeselect-min-width: 200px;
-  --wf-navmenu-min-width: 160px;
-  --wf-select-menu-min-width: 200px;
-  --wf-treeselect-max-width: 320px;
-  --wf-treeselect-dropdown-max-height: 260px;
-  --wf-z-popover: 120; /* dropdown/select/datepicker 面板与 popover 同层 */
-  --wf-z-toast: 140;
-  --wf-z-tooltip: 160;
-  --wf-z-dropdown: var(--wf-z-popover); /* 语义别名：下拉菜单属弹出面板族 */
-
-  /* ── 兼容别名（旧 token 名，语义近似映射） ── */
-  --wf-pop-z: var(--wf-z-popover);
-  --wf-cover-z: var(--wf-z-modal);
-
-  /* ── 色彩 — 品牌（引用原始层） ── */
-  --wf-color-primary: var(--wf-brand-500);
-  --wf-color-primary-hover: var(--wf-brand-600);
-  --wf-color-primary-bg: var(--wf-brand-50);
-
-  --wf-color-success: var(--wf-green-500);
-  --wf-color-success-bg: var(--wf-green-50);
-  --wf-color-warning: var(--wf-amber-500);
-  --wf-color-warning-bg: var(--wf-amber-50);
-  --wf-color-error: var(--wf-red-500);
-  --wf-color-error-bg: var(--wf-red-50);
-
-  /* ── 色彩 — 中性（引用原始层） ── */
-  --wf-color-text: var(--wf-slate-900);
-  --wf-color-text-secondary: var(--wf-slate-500);
-  --wf-color-text-tertiary: var(--wf-slate-400);
-  --wf-color-text-disabled: var(--wf-slate-300);
-
-  --wf-color-bg: var(--wf-white);
-  --wf-color-bg-secondary: var(--wf-slate-50);
-  --wf-color-bg-tertiary: var(--wf-slate-100);
-
-  --wf-color-border: var(--wf-slate-200);
-  --wf-color-border-light: var(--wf-slate-100);
-  --wf-color-border-dark: var(--wf-slate-300);
-
-  /* ── surface 引用色彩 ── */
-  --wf-surface-bg: var(--wf-color-bg);
-
-  /* 浮层面板底色（surface-2/3：浮层/模态——亮色同 bg 靠阴影区分，暗色抬升一级见 _dark.css） */
-  --wf-color-bg-elevated: var(--wf-color-bg);
-
-  /* ── 字体 ──
-   * 西文优先（拉丁字形平台最优），CJK 显式回退（中文原生：PingFang/苹方、
-   * Hiragino/冬青、雅黑、思源 Noto Sans SC——三平台中文渲染一致） */
-  --wf-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
-  --wf-font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono',
-    'PingFang SC', 'Microsoft YaHei', monospace;
-
-  --wf-font-size-xs: 12px;
-  --wf-font-size-sm: 13px;
-  --wf-font-size-base: 14px;
-  --wf-font-size-lg: 15px;
-  --wf-font-size-xl: 16px;
-  --wf-font-size-2xl: 21px;
-  --wf-font-size-3xl: 24px;
-  --wf-font-size-4xl: 30px;
-  --wf-font-size-5xl: 36px;
-  --wf-font-size-display: 30px; /* 顶级页面标题（PageHeader display 档，配负字距） */
-
-  /* ── 表头/分组标题：文本变换与字距 token 化（CJK 默认 none/0，英文可覆盖 uppercase/0.5px） ── */
-  --wf-heading-case: none;
-  --wf-heading-tracking: 0;
-
-  --wf-font-weight-normal: 400;
-  --wf-font-weight-medium: 500;
-  --wf-font-weight-semibold: 600;
-  --wf-font-weight-bold: 700;
-
-  /* ── 行高 ── */
-  --wf-line-height-tight: 1.25;
-  --wf-line-height: 1.5;
-  --wf-line-height-relaxed: 1.75;
-
-  /* ── 边框宽度 ── */
-  --wf-border-width: 1px;
-
-  /* ── 聚焦环（双层：淡环 bg + 1px primary 线——C5：系统暗色偏好下 primary-bg
-     变暗不可见，primary 是亮蓝——明暗主题聚焦均可见） ── */
-  --wf-focus-ring: 0 0 0 2px var(--wf-color-primary-bg), 0 0 0 1px var(--wf-color-primary);
-
-  /* ── 动效 ──
-   * --wf-transition 为派生别名（hover 类过渡统一走 dur-fast + ease-out——微流明标准节奏）。
-   * 旧 --wf-transition-duration/timing 保留为兼容（不建议新引用——新代码直接用 --wf-dur-* 系列） */
-  --wf-transition-duration: var(--wf-dur-fast);
-  --wf-transition-timing: var(--wf-ease-out);
-  --wf-transition: var(--wf-transition-duration) var(--wf-transition-timing);
-
-  /* ── 动效语言：时长阶梯 + 缓动曲线 + 位移量（组件动效统一引用，不各自硬编码） ── */
-  --wf-dur-fast: 120ms;
-  --wf-dur-base: 200ms;
-  --wf-dur-slow: 300ms;
-
-  --wf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* 入场：快出缓停 */
-  --wf-ease-in: cubic-bezier(0.4, 0, 1, 1);            /* 退场：渐入加速 */
-  --wf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);       /* 往返/闪烁动画 */
-  --wf-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 选中/弹跳 */
-  --wf-ease-standard: ease;                           /* 通用缓动（组件假 token 收敛） */
-  --wf-dur-md: var(--wf-dur-base);                    /* 中档时长（= base 别名） */
-
-  --wf-motion-sm: 4px;
-  --wf-motion-md: 8px;
-  --wf-motion-lg: 24px;                                /* drawer 全幅位移 */
-
-  /* 循环动效族（旋转/呼吸/闪烁/进度——时长阶梯之外的循环节拍——S5 审计强制引用） */
-  --wf-dur-spin: 0.6s;                 /* 旋转（spinner/loading/折叠） */
-  --wf-dur-pulse: 1.2s;                /* 呼吸脉冲（在线点/骨架/思考） */
-  --wf-dur-blink: 1.1s;                /* 光标闪烁（流式光标/AI 回复） */
-  --wf-dur-progress: 1.4s;             /* 不确定进度循环（indeterminate） */
-
-  /* ── 色彩 — 信息（补充） ── */
-  --wf-color-info: var(--wf-sky-500);
-  --wf-color-info-bg: var(--wf-sky-50);
-
-  /* ── 色彩 — 语义文字色（浅底/白底可读，WCAG AA ≥ 4.5:1；实心色上的文字用 on-brand） ── */
-  --wf-color-primary-text: var(--wf-brand-700);
-  --wf-color-success-text: var(--wf-green-700);
-  --wf-color-warning-text: var(--wf-amber-700);
-  --wf-color-error-text: var(--wf-red-700);
-  --wf-color-info-text: var(--wf-sky-700);
-
-  /* ── 色彩 — 通用填充/悬停底色（暗色经 _dark.css 映射） ── */
-  --wf-color-fill: var(--wf-slate-100);               /* 通用填充色（禁裸灰——组件假 token 收敛） */
-  --wf-color-bg-subtle: var(--wf-color-fill);         /* 极淡底（别名） */
-
-  /* ── 状态层（Material 3 state layers 语义——可交互元素统一引用，暗色经 _dark.css 映射） ── */
-  --wf-state-hover: rgba(0, 0, 0, 0.04);              /* hover 叠色（列表项/菜单项） */
-  --wf-state-pressed: rgba(0, 0, 0, 0.08);            /* pressed 按压叠色 */
-  --wf-state-selected: var(--wf-color-primary-bg);    /* 选中态底色 */
-
-  --wf-color-bg-hover: var(--wf-state-hover);         /* 兼容别名（历史名） */
-
-  /* ── 色彩 — 实心填充上的文字/图标（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);
-  --wf-overlay-blur: 4px;  /* 遮罩毛玻璃（弹层现代质感，不支持 backdrop-filter 的环境自动降级为纯色） */
-
-  /* ── 表单控件 ── */
-  --wf-accent-color: var(--wf-color-primary);
-  --wf-caret-color: var(--wf-color-primary);
-
-  /* 控件尺寸：垂直内边距 + 目标高度（移动端在 _base.css 提升到 44px） */
-  --wf-control-pad-y: 10px;
-  --wf-control-height: 36px;
-  /* 字段统一尺寸（组件假 token 收敛——Input/Select/Textarea 引用） */
-  --wf-field-height: var(--wf-control-height);
-  --wf-field-radius: var(--wf-radius);
-
-  /* ── 断点 ── */
-  --wf-bp-sm: 640px;
-  --wf-bp-md: 768px;
-  --wf-bp-lg: 1024px;
-  --wf-bp-xl: 1280px;
-
-  /* ── 应用外壳 ── */
-  --wf-sidebar-width: 240px;
-
-  /* ── 透明度 ── */
-  --wf-opacity-disabled: 0.5;
-  --wf-opacity-overlay: 0.4;
-
-  /* ── 文字间距 ── */
-  --wf-letter-spacing: normal;
-  --wf-letter-spacing-wide: 0.5px;
-  --wf-letter-spacing-wider: 1px;
-  --wf-heading-display-tracking: -0.5px; /* 顶级标题 display 档窄字距（PageHeader display——CJK 可覆盖） */
-
-  /* ── 数字 ── */
-  --wf-nums: 'tabular-nums'; /* 数字等宽（统计/表格数值防抖动） */
-}
-
-/* ══ 旧浏览器回退（渐进增强——不支持 color-mix 时用默认色板硬值） ══
- * 定义处 color-mix 声明无效 → 此处同层覆盖回默认 hex。
- * 注意：声明缩进 4 空格——不参与 token 计数（计数只认 2 空格缩进）。 */
-@supports not (color: color-mix(in srgb, red 50%, blue)) {
-    :root {
-        --wf-brand-600: #3b5ae0;
-        --wf-brand-700: #4338ca;
-        --wf-brand-50: #eef1ff;
-        --wf-dark-brand-600: #8ba3ff;
-        --wf-dark-brand-50: #1e293b;
-    }
-}
-
-/* weifuwu/theme — 暗色模式
- *
- * 两种激活方式（优先级：显式 data-theme > 系统偏好）：
- *   1. 手动：<html data-theme="dark">（或 data-theme="light" 强制亮色）
- *   2. 自动：系统偏好 prefers-color-scheme: dark，无显式覆盖时生效
- *
- * 值全部定义在 _tokens.css 原始层的 --wf-dark-*，此处只做语义映射——
- * 两段代码完全一致，且不含任何硬编码色值（改暗色调校只动原始层）。
- */
-
-/* ── 激活方式一：手动 data-theme="dark" ── */
-:root[data-theme="dark"] {
-  color-scheme: dark;
-
-  --wf-color-primary: var(--wf-dark-brand-500);
-  --wf-color-primary-hover: var(--wf-dark-brand-600);
-  --wf-color-primary-bg: var(--wf-dark-brand-50);
-
-  --wf-color-success: var(--wf-dark-green-500);
-  --wf-color-success-bg: var(--wf-dark-green-50);
-  --wf-color-warning: var(--wf-dark-amber-500);
-  --wf-color-warning-bg: var(--wf-dark-amber-50);
-  --wf-color-error: var(--wf-dark-red-500);
-  --wf-color-error-bg: var(--wf-dark-red-50);
-  --wf-color-info: var(--wf-dark-sky-500);
-  --wf-color-info-bg: var(--wf-dark-sky-50);
-
-  --wf-color-text: var(--wf-dark-slate-900);
-  --wf-color-text-secondary: var(--wf-dark-slate-500);
-  --wf-color-text-tertiary: var(--wf-dark-slate-400);
-  --wf-color-text-disabled: var(--wf-dark-slate-300);
-
-  --wf-color-bg: var(--wf-dark-bg);
-  --wf-color-bg-secondary: var(--wf-dark-slate-100);
-  --wf-color-bg-tertiary: var(--wf-dark-slate-200);
-  --wf-color-fill: var(--wf-dark-fill);
-  --wf-color-bg-subtle: var(--wf-dark-fill);
-  --wf-color-bg-hover: var(--wf-dark-bg-hover);
-
-  /* 状态层（原始层 --wf-dark-state-* 映射） */
-  --wf-state-hover: var(--wf-dark-state-hover);
-  --wf-state-pressed: var(--wf-dark-state-pressed);
-  /* 浮层面板底色：暗色抬升一级（Material tonal elevation——浮层提亮而非只靠阴影） */
-  --wf-color-bg-elevated: var(--wf-dark-slate-100);
-
-  --wf-color-border: var(--wf-dark-slate-200);
-  --wf-color-border-light: var(--wf-dark-slate-100);
-  --wf-color-border-dark: var(--wf-dark-slate-300);
-
-  --wf-surface-bg: var(--wf-color-bg);
-  --wf-surface-shadow: var(--wf-dark-surface-shadow);
-  --wf-shadow-sm: var(--wf-dark-shadow-sm);
-  --wf-shadow: var(--wf-dark-shadow);
-  --wf-shadow-md: var(--wf-dark-shadow-md);
-  --wf-shadow-lg: var(--wf-dark-shadow-lg);
-  --wf-shadow-inset: var(--wf-dark-shadow-inset);
-
-  --wf-color-primary-text: var(--wf-dark-brand-500);
-  --wf-color-success-text: var(--wf-dark-green-500);
-  --wf-color-warning-text: var(--wf-dark-amber-500);
-  --wf-color-error-text: var(--wf-dark-red-500);
-  --wf-color-info-text: var(--wf-dark-sky-500);
-
-  --wf-overlay: var(--wf-dark-overlay);
-}
-
-/* ── 激活方式二：系统暗色偏好（data-theme="light" 可强制亮色） ── */
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    color-scheme: dark;
-
-    --wf-color-primary: var(--wf-dark-brand-500);
-    --wf-color-primary-hover: var(--wf-dark-brand-600);
-    --wf-color-primary-bg: var(--wf-dark-brand-50);
-
-    --wf-color-success: var(--wf-dark-green-500);
-    --wf-color-success-bg: var(--wf-dark-green-50);
-    --wf-color-warning: var(--wf-dark-amber-500);
-    --wf-color-warning-bg: var(--wf-dark-amber-50);
-    --wf-color-error: var(--wf-dark-red-500);
-    --wf-color-error-bg: var(--wf-dark-red-50);
-    --wf-color-info: var(--wf-dark-sky-500);
-    --wf-color-info-bg: var(--wf-dark-sky-50);
-
-    --wf-color-text: var(--wf-dark-slate-900);
-    --wf-color-text-secondary: var(--wf-dark-slate-500);
-    --wf-color-text-tertiary: var(--wf-dark-slate-400);
-    --wf-color-text-disabled: var(--wf-dark-slate-300);
-
-    --wf-color-bg: var(--wf-dark-bg);
-    --wf-color-bg-secondary: var(--wf-dark-slate-100);
-    --wf-color-bg-tertiary: var(--wf-dark-slate-200);
-    --wf-color-fill: var(--wf-dark-fill);
-    --wf-color-bg-subtle: var(--wf-dark-fill);
-    --wf-color-bg-hover: var(--wf-dark-bg-hover);
-
-    /* 状态层（原始层 --wf-dark-state-* 映射） */
-    --wf-state-hover: var(--wf-dark-state-hover);
-    --wf-state-pressed: var(--wf-dark-state-pressed);
-    /* 浮层面板底色：暗色抬升一级（Material tonal elevation——浮层提亮而非只靠阴影） */
-    --wf-color-bg-elevated: var(--wf-dark-slate-100);
-
-    --wf-color-border: var(--wf-dark-slate-200);
-    --wf-color-border-light: var(--wf-dark-slate-100);
-    --wf-color-border-dark: var(--wf-dark-slate-300);
-
-    --wf-surface-bg: var(--wf-color-bg);
-    --wf-surface-shadow: var(--wf-dark-surface-shadow);
-    --wf-shadow-sm: var(--wf-dark-shadow-sm);
-    --wf-shadow: var(--wf-dark-shadow);
-    --wf-shadow-md: var(--wf-dark-shadow-md);
-    --wf-shadow-lg: var(--wf-dark-shadow-lg);
-    --wf-shadow-inset: var(--wf-dark-shadow-inset);
-
-    --wf-color-primary-text: var(--wf-dark-brand-500);
-    --wf-color-success-text: var(--wf-dark-green-500);
-    --wf-color-warning-text: var(--wf-dark-amber-500);
-    --wf-color-error-text: var(--wf-dark-red-500);
-    --wf-color-info-text: var(--wf-dark-sky-500);
-
-    --wf-overlay: var(--wf-dark-overlay);
-  }
-}
-
-/* weifuwu/theme — 预设主题（shadcn themes.css 式变量组切换）
- *
- * 用法：<html data-preset="minimal|compact|rounded">
- * 与暗色 data-theme 正交（可组合：data-theme="dark" data-preset="compact"）。
- * 每组覆盖同一份 token 清单的相应子集——新增预设必须补齐全套（audit 强制）。
- *
- * 预设语义：
- *   minimal  品牌弱化——中性蓝灰主色（适合内容/文档型产品，Geist 式克制）
- *   compact  紧凑密度——控件/间距/字号缩一档（数据密集型工具，专业感）
- *   rounded  大圆角——radius 全升一档 + 按钮胶囊（亲和/消费型产品）
- */
-:root[data-preset="minimal"] {
-  /* 品牌：中性蓝灰（seed 派生色阶自动跟随——50/600/700 不必手改） */
-  --wf-brand-seed: #64748b;
-  --wf-dark-brand-seed: #94a3b8;
-}
-
-:root[data-preset="compact"] {
-  /* 控件尺寸 */
-  --wf-control-height: 32px;
-  --wf-control-pad-y: 6px;
-  /* 间距标尺缩一档（布局原语/工具类同步生效） */
-  --wf-space-xs: 3px;
-  --wf-space-sm: 6px;
-  --wf-space: 9px;
-  --wf-space-md: 12px;
-  --wf-space-lg: 18px;
-  --wf-space-xl: 24px;
-  --wf-space-2xl: 30px;
-  --wf-gap-xs: 3px;
-  --wf-gap-sm: 6px;
-  --wf-gap-md: 9px;
-  --wf-gap-lg: 12px;
-  --wf-gap-xl: 18px;
-  --wf-gap-2xl: 24px;
-  /* 正文字号缩一档（数据密度） */
-  --wf-font-size-sm: 12px;
-  --wf-font-size-base: 13px;
-}
-
-:root[data-preset="rounded"] {
-  /* 圆角标尺全升一档 */
-  --wf-radius-sm: 8px;
-  --wf-radius: 12px;
-  --wf-radius-md: 16px;
-  --wf-radius-lg: 20px;
-  --wf-radius-xl: 28px;
-  --wf-surface-radius: var(--wf-radius-md);
-  /* 组件钩子跟随（按钮胶囊、字段大圆角） */
-  --wf-btn-radius: 999px;
-  --wf-field-radius: var(--wf-radius-md);
-}
-
-@layer base {
-/* weifuwu/theme — 基础元素默认样式 */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* 选区色：primary 调（文字反白，与品牌一致） */
-::selection {
-  background: var(--wf-color-primary-bg);
-  color: var(--wf-color-primary-text);
-}
-
-/* 主题滚动条（全局——所有滚动区一致；Firefox thin + WebKit 样式） */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--wf-color-border-dark) transparent;
-}
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: var(--wf-color-border-dark);
-  border-radius: var(--wf-radius-sm);
-  border: 2px solid transparent;
-  background-clip: padding-box;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: var(--wf-color-text-secondary);
-  background-clip: padding-box;
-  border: 2px solid transparent;
-}
-
-:root {
-  /* 原生控件/滚动条跟随主题；暗色激活时在 _dark.css 中切为 dark */
-  color-scheme: light;
-}
-
-body {
-  margin: 0;
-  background: var(--wf-color-bg);
-  color: var(--wf-color-text);
-  font-family: var(--wf-font-sans);
-  font-size: var(--wf-font-size-base);
-  line-height: var(--wf-line-height);
-  -webkit-font-smoothing: antialiased;
-}
-
-a {
-  color: var(--wf-color-primary-text);
-  text-decoration: none;
-}
-a:hover {
-  color: var(--wf-color-primary-hover);
-  text-decoration: underline;
-}
-
-input,
-textarea,
-select,
-button {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-input,
-textarea,
-select {
-  accent-color: var(--wf-accent-color);
-  caret-color: var(--wf-caret-color);
-  background: var(--wf-color-bg);
-  color: var(--wf-color-text);
-  border: var(--wf-border-width) solid var(--wf-color-border);
-  border-radius: var(--wf-radius);
-  padding: var(--wf-control-pad-y) var(--wf-space);
-}
-
-input:focus,
-textarea:focus,
-select:focus {
-  outline: none;
-  box-shadow: var(--wf-focus-ring);
-  border-color: var(--wf-color-primary);
-}
-
-input:disabled,
-textarea:disabled,
-select:disabled,
-button:disabled {
-  opacity: var(--wf-opacity-disabled);
-  cursor: not-allowed;
-}
-
-button {
-  accent-color: var(--wf-accent-color);
-  background: var(--wf-color-bg);
-  color: var(--wf-color-text);
-  border: var(--wf-border-width) solid var(--wf-color-border);
-  border-radius: var(--wf-radius);
-  padding: var(--wf-control-pad-y) var(--wf-space-md);
-  min-height: var(--wf-control-height);
-  cursor: pointer;
-  transition: border-color var(--wf-dur-fast) var(--wf-ease-out),
-              color var(--wf-dur-fast) var(--wf-ease-out),
-              box-shadow var(--wf-dur-fast) var(--wf-ease-out),
-              background-color var(--wf-dur-fast) var(--wf-ease-out),
-              filter var(--wf-dur-fast) var(--wf-ease-out);
-}
-button:hover {
-  border-color: var(--wf-color-primary);
-  color: var(--wf-color-primary-text);
-}
-button:active:not(:disabled),
-[role="button"]:active {
-  filter: brightness(0.95); /* 按压反馈：不偏移布局，适用任意宽度（block/inline） */
-}
-
-/* 键盘焦点：button 与 [tabindex] 统一 focus ring（仅键盘触发，鼠标点击不闪） */
-button:focus-visible,
-[tabindex]:focus-visible {
-  outline: none;
-  box-shadow: var(--wf-focus-ring);
-}
-
-[role="button"] {
-  cursor: pointer;
-  transition: background-color var(--wf-dur-fast) var(--wf-ease-out),
-              border-color var(--wf-dur-fast) var(--wf-ease-out),
-              box-shadow var(--wf-dur-fast) var(--wf-ease-out),
-              color var(--wf-dur-fast) var(--wf-ease-out),
-              filter var(--wf-dur-fast) var(--wf-ease-out);
-}
-
-/* 触屏设备（coarse pointer）：交互目标提升到 44px（Apple HIG / WCAG 2.5.8） */
-@media (pointer: coarse) {
-  button,
-  [role="button"],
-  input,
-  textarea,
-  select,
-  .wf-card--clickable,
-  .wf-table-th--sortable,
-  .wf-accordion-summary,
-  .wf-tag-close,
-  .wf-checkbox,
-  .wf-switch,
-  .wf-radio,
-  .wf-datepicker-cell {
-    min-height: 44px;
-    min-width: 44px;
-  }
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-weight: var(--wf-font-weight-semibold);
-  line-height: var(--wf-line-height-tight);
-  color: var(--wf-color-text);
-}
-
-p {
-  line-height: var(--wf-line-height-relaxed);
-}
-
-small {
-  font-size: var(--wf-font-size-sm);
-  color: var(--wf-color-text-tertiary);
-}
-
-label {
-  font-size: var(--wf-font-size-base);
-  font-weight: var(--wf-font-weight-medium);
-  color: var(--wf-color-text);
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th {
-  text-align: left;
-  font-weight: var(--wf-font-weight-medium);
-  font-size: var(--wf-font-size-xs);
-  color: var(--wf-color-text-tertiary);
-  text-transform: var(--wf-heading-case); /* CJK 默认 none，英文可覆盖 uppercase */
-  letter-spacing: var(--wf-heading-tracking);
-  padding: var(--wf-space) var(--wf-space-sm);
-  border-bottom: var(--wf-border-width) solid var(--wf-color-border);
-  background: var(--wf-color-bg-secondary);
-}
-
-td {
-  padding: var(--wf-space) var(--wf-space-sm);
-  border-bottom: var(--wf-border-width) solid var(--wf-color-border);
-  color: var(--wf-color-text);
-  font-size: var(--wf-font-size-base);
-}
-
-hr {
-  border: none;
-  border-top: var(--wf-border-width) solid var(--wf-color-border);
-  margin: var(--wf-space-md) 0;
-}
-
-pre, code {
-  font-family: var(--wf-font-mono);
-  font-size: var(--wf-font-size-sm);
-}
-
-
-pre {
-  background: var(--wf-color-bg-secondary);
-  border: var(--wf-border-width) solid var(--wf-color-border);
-  border-radius: var(--wf-radius);
-  padding: var(--wf-space) var(--wf-space-md);
-  overflow-x: auto;
-  white-space: pre;
-}
-
-code {
-  background: var(--wf-color-bg-secondary);
-  padding: 2px 6px;
-  border-radius: var(--wf-radius-sm);
-}
-
-/* ── 无障碍：尊重系统减弱动效偏好 ── */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-
-/* 拖拽中禁用文本选中（useDragDrop 拖拽生命周期标记——Kanban 教训） */
-body.wf-dragging {
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-/* ── 微流明 · 进行态语言：stream-in 内容渐显（AI 回复/流式列表/hero 元素） ──
- * 微流明设计语言三支柱之二（design/design-language.md）——"进行中"是可见的流
- * 用法：元素加 wf-stream-in 类（opacity 0→1 + 上移 4px）
- */
-@keyframes wf-stream-in {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-.wf-stream-in {
-  animation: wf-stream-in var(--wf-dur-base) var(--wf-ease-out) both;
-}
-@media (prefers-reduced-motion: reduce) {
-  .wf-stream-in {
-    animation-duration: 0.01ms;
-  }
-}
-
-/* ── 首页 hero 打字机光标（微流明·进行态——reduced-motion 由下方降级块处理） ── */
-.wf-hero-cursor {
-  animation: wf-hero-blink 1s step-end infinite;
-  color: var(--wf-color-primary);
-}
-
-@keyframes wf-hero-blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
-}
-}
-
-@layer layout {
-/* 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);
-}
-}
-
-@layer layout {
-/* row — 横向排列（L3：gap/align 默认值 :where() 零优先级——wf-gap-* 等
-   覆盖工具靠优先级获胜，不再依赖 import 顺序） */
-.wf-row {
-  display: flex;
-  flex-wrap: wrap;
-}
-:where(.wf-row) {
-  gap: var(--wf-gap, var(--wf-gap-md));
-  align-items: var(--wf-align, center);
-}
-
-/* row-reverse — 横向反向排列 */
-.wf-row-reverse {
-  display: flex;
-  flex-direction: row-reverse;
-  flex-wrap: wrap;
-}
-:where(.wf-row-reverse) {
-  gap: var(--wf-gap, var(--wf-gap-md));
-  align-items: var(--wf-align, center);
-}
-
-/* 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; }
-.wf-items-stretch { --wf-align: stretch; }
-}
-
-@layer layout {
-/* split — 两端展开（L3：align/gap 默认值 :where() 零优先级） */
-.wf-split {
-  display: flex;
-  justify-content: space-between;
-}
-:where(.wf-split) {
-  align-items: var(--wf-align, center);
-  gap: var(--wf-gap, var(--wf-gap-md));
-}
-.wf-split > :last-child {
-  flex-shrink: 0;
-}
-}
-
-@layer layout {
-/* center — 居中 */
-.wf-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-}
-
-@layer layout {
-/* justify — 主轴分布（对齐域统一 CSS 词根——值为 justify-content 值词；
-   L3：align/gap 默认值 :where() 零优先级） */
-.wf-justify-between {
-  display: flex;
-  justify-content: space-between;
-}
-:where(.wf-justify-between) {
-  align-items: var(--wf-align, center);
-  gap: var(--wf-gap, var(--wf-gap-md));
-}
-
-.wf-justify-end {
-  display: flex;
-  justify-content: flex-end;
-}
-:where(.wf-justify-end) {
-  align-items: var(--wf-align, center);
-  gap: var(--wf-gap, var(--wf-gap-md));
-}
-
-.wf-justify-center {
-  display: flex;
-  justify-content: center;
-}
-:where(.wf-justify-center) {
-  align-items: var(--wf-align, center);
-  gap: var(--wf-gap, var(--wf-gap-md));
-}
-}
-
-@layer layout {
-/* fill — 撑满剩余空间 */
-.wf-fill {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
-
-/* 链接行 hover 强调（列表/导航行——整行可点视觉反馈） */
-.wf-fill-hover {
-  border-radius: var(--wf-radius-sm);
-  padding: 2px 4px;
-  margin: -2px -4px;
-  transition: background 0.15s ease;
-}
-.wf-fill-hover:hover { background: var(--wf-color-bg-secondary); }
-}
-
-@layer layout {
-/* grid — 二维网格（L3：gap 默认值 :where() 零优先级） */
-.wf-grid {
-  display: grid;
-  grid-template-columns: var(--wf-cols, repeat(auto-fill, minmax(280px, 1fr)));
-}
-:where(.wf-grid) {
-  gap: var(--wf-gap, var(--wf-gap-lg));
-}
-}
-
-@layer layout {
-/* cluster — 换行簇（L3：justify/align/gap 默认值 :where() 零优先级——
-   wf-justify-end 等分布工具叠加时靠优先级获胜） */
-.wf-cluster {
-  display: flex;
-  flex-wrap: wrap;
-}
-:where(.wf-cluster) {
-  gap: var(--wf-gap, var(--wf-gap-sm));
-  justify-content: var(--wf-justify, center);
-  align-items: var(--wf-align, center);
-}
-}
-
-@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 {
-/* 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 {
-/* sticky — 粘性定位 */
-.wf-sticky {
-  position: sticky;
-  top: var(--wf-offset, 0);
-}
-}
-
-@layer layout {
-/* overflow — 溢出控制（属性根 + CSS 值词；全局滚动条样式见 _base.css） */
-.wf-overflow-auto { overflow: auto; }
-.wf-overflow-hidden { overflow: hidden; }
-.wf-overflow-x { overflow-x: auto; }
-}
-
-@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 {
-/* layer — 层级控制 */
-.wf-layer {
-  position: relative;
-  z-index: var(--wf-z, 1);
-}
-}
-
-@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-items-* 对齐工具叠加冲突：双份 CSS 下 nowrap 后置曾覆盖 stretch；
-   L3：gap 默认值 :where() 零优先级） */
-.wf-nowrap {
-  display: flex;
-  flex-wrap: nowrap;
-}
-:where(.wf-nowrap) {
-  gap: var(--wf-gap, var(--wf-gap-md));
-}
-}
-
-@layer layout {
-/* min — flex 子项可收缩约束（flex 收缩坑标配：默认 min-width/height: auto
-   会阻止子项收缩——内容溢出/撑破布局时加这类） */
-.wf-shrink {
-  min-width: 0;
-  min-height: 0;
-}
-
-/* 单边版本（只需横向收缩的场景——属性名即类名） */
-.wf-min-width-0 {
-  min-width: 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 {
-/* 应用外壳 — 侧边栏 + 主内容区
- *
- * 结构约定（应用层 AppLayout 组件使用）：
- *   wf-app-shell > [wf-sidebar, wf-main]
- *   wf-sidebar   > [wf-sidebar-header(品牌), wf-sidebar-body(wf-nav), wf-sidebar-footer(用户区)]
- *   wf-nav       > wf-nav-group(分组标题) / wf-nav-item(链接，--active 激活)
- *
- * 移动端（<768px）降级：侧边栏堆叠到顶部、静态定位、主区占满。
- * 交互式折叠抽屉属应用层职责（需 JS 开关），layout 只提供静态外壳。
- */
-
-.wf-app-shell {
-  display: grid;
-  grid-template-columns: var(--wf-sidebar-width, 240px) minmax(0, 1fr);
-  /* 固定视口高度（非 min-height）：内部页面（聊天等）依赖 height: 100% 链实现
-     容器内滚动——min-height 会让壳随内容长高，聊天消息区永远无法内部滚动
-     （scrollTop 赋值无效果，页面滚动条不跟随消息到底） */
-  height: 100vh;
-  overflow: hidden;
-}
-
-/* ── 侧边栏 ── */
-.wf-sidebar {
-  display: flex;
-  flex-direction: column;
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  overflow-y: auto;
-  background: var(--wf-color-bg-secondary);
-  border-right: var(--wf-border-width) solid var(--wf-color-border);
-}
-
-.wf-sidebar-header {
-  display: flex;
-  align-items: center;
-  gap: var(--wf-gap-sm);
-  padding: var(--wf-space-md);
-  border-bottom: var(--wf-border-width) solid var(--wf-color-border-light);
-  flex-shrink: 0;
-}
-
-.wf-sidebar-body {
-  flex: 1;
-  padding: var(--wf-space-sm);
-  overflow-y: auto;
-}
-
-.wf-sidebar-footer {
-  padding: var(--wf-space-sm);
-  border-top: var(--wf-border-width) solid var(--wf-color-border-light);
-  flex-shrink: 0;
-}
-
-/* ── 导航 ── */
-.wf-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.wf-nav-group {
-  font-size: var(--wf-font-size-xs);
-  font-weight: var(--wf-font-weight-medium);
-  color: var(--wf-color-text-tertiary);
-  text-transform: var(--wf-heading-case); /* CJK 默认 none，英文可覆盖 uppercase */
-  letter-spacing: var(--wf-heading-tracking);
-  padding: var(--wf-space-md) var(--wf-space-sm) var(--wf-space-xs);
-}
-
-.wf-nav-item {
-  display: flex;
-  align-items: center;
-  gap: var(--wf-gap-sm);
-  padding: var(--wf-space-sm) var(--wf-space);
-  border-radius: var(--wf-radius);
-  color: var(--wf-color-text-secondary);
-  font-size: var(--wf-font-size-base);
-  text-decoration: none;
-  cursor: pointer;
-  border: none;
-  background: none;
-  width: 100%;
-  text-align: left;
-  font-family: inherit;
-  transition: background var(--wf-transition), color var(--wf-transition);
-}
-
-.wf-nav-item:hover {
-  background: var(--wf-color-bg-tertiary);
-  color: var(--wf-color-text);
-  text-decoration: none;
-}
-
-.wf-nav-item:focus-visible {
-  outline: none;
-  box-shadow: var(--wf-focus-ring);
-}
-
-.wf-nav-item--active {
-  background: var(--wf-color-primary-bg);
-  color: var(--wf-color-primary-text);
-  font-weight: var(--wf-font-weight-medium);
-}
-
-.wf-nav-item--active:hover {
-  background: var(--wf-color-primary-bg);
-  color: var(--wf-color-primary-text);
-}
-
-
-/* ── 折叠态：图标-only 导航（配合 --wf-sidebar-width 收窄侧栏） ── */
-.wf-nav--collapsed .wf-nav-item {
-  justify-content: center;
-  gap: 0;
-  padding: var(--wf-space-sm);
-}
-.wf-nav--collapsed .wf-nav-label {
-  display: none;
-}
-.wf-nav--collapsed .wf-nav-group {
-  text-align: center;
-  padding-left: 0;
-  padding-right: 0;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-/* ── 主内容区 ── */
-.wf-main {
-  padding: var(--wf-space-lg);
-  min-width: 0;
-  min-height: 0;
-  /* 内容高于视口时在主区内滚动（壳固定视口高度后的唯一滚动出口） */
-  overflow-y: auto;
-  background: var(--wf-color-bg);
-  /* 行宽约束（P5）：默认 none 全宽（聊天/表格等全宽应用零影响）；
-     文档站/长文本场景设 --wf-main-max: 900px——直接子元素限宽居中 */
-  --wf-main-max: none;
-}
-
-.wf-main > * {
-  max-width: var(--wf-main-max);
-  margin-inline: auto;
-}
-
-/* ── 触屏：导航项 44px 命中区 ── */
-@media (pointer: coarse) {
-  .wf-nav-item {
-    min-height: 44px;
-  }
-}
-
-/* ── 移动端：堆叠降级 ── */
-@media (max-width: 767.98px) {
-  .wf-app-shell {
-    grid-template-columns: 1fr;
-    height: auto;          /* 恢复文档流滚动（侧边栏堆叠在顶部） */
-    overflow: visible;
-  }
-  .wf-sidebar {
-    position: static;
-    height: auto;
-    border-right: none;
-    border-bottom: var(--wf-border-width) solid var(--wf-color-border);
-  }
-  .wf-main {
-    padding: var(--wf-space-md);
-    overflow: visible;
-  }
-}
-}
-
-@layer utilities {
-/* surface — 基础面 + 面工具类（背景色/圆角/阴影——全部引用语义 Token） */
-
-.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-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-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);
-}
-
-/* ── 面板入场：统一 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-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);
-}
-
-/* 圆角/描边类（card 视觉——消费侧欠账 2027-09 补定义） */
-.wf-rounded-sm { border-radius: var(--wf-radius-sm); }
-.wf-rounded-md { border-radius: var(--wf-radius-md); }
-.wf-card-outline { border: 1px solid var(--wf-color-border); }
-}
-
-@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）
- */
-
-/* ── 文本对齐（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-danger { color: var(--wf-color-error-text); }
-.wf-text-warning { color: var(--wf-color-warning-text); }
-.wf-font-mono { font-family: var(--wf-font-mono); }
-.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-font-mono { font-family: var(--wf-font-mono); }
-.wf-text-error { color: var(--wf-color-error-text); }
-
-/* ── 填充上的文字色（实心品牌/警告底——对比度保障） ── */
-.wf-text-on-brand { color: var(--wf-color-on-brand); }
-.wf-text-on-warning { color: var(--wf-color-on-warning); }
-
-/* ── 字重（裸值词） ── */
-.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); }
-
-/* ── 字距（排版术语 tracking = letter-spacing） ── */
-.wf-tracking-wide { letter-spacing: var(--wf-letter-spacing-wide); }
-
-/* ── 文本变换（裸值词） ── */
-.wf-uppercase { text-transform: uppercase; }
-
-/* ── 换行/折行 ── */
-.wf-pre-wrap {
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.wf-break-word {
-  overflow-wrap: break-word;
-  word-break: break-word;
-}
-
-.wf-text-nowrap {
-  white-space: nowrap;
-}
-
-/* ── 截断 ── */
-.wf-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-}
-
-@layer utilities {
-/* 间距/尺寸工具类 — 全部引用 --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 = 零/取消的唯一形态）
- *
- * 类面随消费证据生长（缺口审计机制化——layout-inventory.test.ts）。
- */
-
-/* ── 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-xs { padding-left: var(--wf-space-xs); padding-right: var(--wf-space-xs); }
-.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; }
-
-/* ── margin: y 轴 ── */
-.wf-margin-y-xs { margin-top: var(--wf-space-xs); margin-bottom: var(--wf-space-xs); }
-
-/* ── 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-width-full { width: 100%; }
-.wf-width-sm { width: var(--wf-w-sm, 480px); }
-.wf-height-full { height: 100%; }
-}
-
-@layer utilities {
-/* block — 块级显示 */
-.wf-block {
-  display: block;
-}
-}
-
-@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;
-}
-@media (min-width: 640px) { .wf-flex\@sm { display: flex; } }
-@media (min-width: 1024px) { .wf-flex\@lg { display: flex; } }
-}
-
-@layer utilities {
-/* hidden — 隐藏元素。两种响应式组合：
- *   `wf-hidden wf-flex@lg`（窄隐宽显——基础类无 !important，被 media 内 wf-flex@lg 覆盖）
- *   `wf-flex wf-hidden@lg`（宽隐窄显——media 变体 !important，胜组件自身 display）
- * !important 原因（CHAT-UX 波次 2 L4）：@layer 顺序下 utilities 永远输给 components
- * （@layer tokens,base,layout,utilities,components 顶层声明定死）——.wf-btn 的
- * display:inline-flex 无条件压过 hidden 变体——面板按钮桌面隐藏失效实证；
- * 源顺序洗牌无法修复（层叠顺序优先于源顺序）——!important 是唯一出路 */
-.wf-hidden {
-  display: none;
-}
-@media (min-width: 1024px) { .wf-hidden\@lg { display: none !important; } }
-
-/* dim — 视觉淡化（运行中/历史态/次要操作） */
-.wf-dim {
-  opacity: 0.7;
-}
-
-/* cursor — 交互指针（裸值词） */
-.wf-pointer { cursor: pointer; }
-}
-
-@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 tokens,base,layout,components,utilities;:root{--wf-brand-seed: #4f6ef7;--wf-brand-500: var(--wf-brand-seed);--wf-brand-600: color-mix(in srgb, var(--wf-brand-seed) 85%, #000);--wf-brand-700: color-mix(in srgb, var(--wf-brand-seed) 70%, #000);--wf-brand-50: color-mix(in srgb, var(--wf-brand-seed) 12%, #fff);--wf-green-500: #22c55e;--wf-green-50: #f0fdf4;--wf-green-700: #15803d;--wf-amber-500: #f59e0b;--wf-amber-50: #fffbeb;--wf-amber-700: #b45309;--wf-red-500: #ef4444;--wf-red-50: #fef2f2;--wf-red-700: #b91c1c;--wf-sky-500: #1677ff;--wf-sky-50: #e6f4ff;--wf-sky-700: #0369a1;--wf-slate-900: #0f172a;--wf-slate-500: #64748b;--wf-slate-400: #94a3b8;--wf-slate-300: #cbd5e1;--wf-slate-200: #e2e8f0;--wf-slate-100: #f1f5f9;--wf-slate-50: #f8fafc;--wf-white: #ffffff;--wf-dark-brand-seed: #6b8aff;--wf-dark-brand-500: var(--wf-dark-brand-seed);--wf-dark-brand-600: color-mix(in srgb, var(--wf-dark-brand-seed) 78%, #fff);--wf-dark-brand-50: color-mix(in srgb, var(--wf-dark-brand-seed) 12%, #0f172a);--wf-dark-green-500: #4ade80;--wf-dark-green-50: #14532d;--wf-dark-amber-500: #fbbf24;--wf-dark-amber-50: #451a03;--wf-dark-red-500: #f87171;--wf-dark-red-50: #451a1a;--wf-dark-sky-500: #60a5fa;--wf-dark-sky-50: #172554;--wf-dark-slate-900: #f1f5f9;--wf-dark-slate-500: #94a3b8;--wf-dark-slate-400: #64748b;--wf-dark-slate-300: #475569;--wf-dark-slate-200: #334155;--wf-dark-slate-100: #1e293b;--wf-dark-bg: #0f172a;--wf-dark-overlay: rgba(0, 0, 0, .6);--wf-dark-fill: var(--wf-dark-slate-200);--wf-dark-bg-hover: var(--wf-dark-state-hover);--wf-dark-state-hover: rgba(255, 255, 255, .06);--wf-dark-state-pressed: rgba(255, 255, 255, .1);--wf-dark-surface-shadow: var(--wf-dark-shadow);--wf-dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--wf-dark-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .3);--wf-dark-shadow: 0 1px 3px rgba(0, 0, 0, .3);--wf-dark-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--wf-dark-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4)}:root{--wf-space-xs: 4px;--wf-space-sm: 8px;--wf-space: 12px;--wf-space-md: 16px;--wf-space-lg: 24px;--wf-space-xl: 32px;--wf-space-2xl: 40px;--wf-gap-xs: var(--wf-space-xs);--wf-gap-sm: var(--wf-space-sm);--wf-gap-md: var(--wf-space);--wf-gap-lg: var(--wf-space-md);--wf-gap-xl: var(--wf-space-lg);--wf-gap-2xl: var(--wf-space-xl);--wf-radius-xs: 2px;--wf-radius-sm: 4px;--wf-radius: 6px;--wf-radius-md: 8px;--wf-radius-lg: 12px;--wf-radius-xl: 20px;--wf-surface-radius: var(--wf-radius-md);--wf-surface-shadow: var(--wf-shadow);--wf-shadow-sm: 0 1px 2px rgba(0,0,0,.05);--wf-shadow-inset: inset 0 1px 2px rgba(0,0,0,.04);--wf-shadow: 0 1px 3px rgba(0,0,0,.08);--wf-shadow-md: 0 4px 12px rgba(0,0,0,.1);--wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);--wf-z-sticky: 40;--wf-z-overlay: 80;--wf-z-modal: 100;--wf-z-tour: 2000;--wf-tour-min-width: 240px;--wf-kanban-col-min-width: 200px;--wf-layout-sider-width: 240px;--wf-layout-sider-collapsed-width: 64px;--wf-layout-header-height: 56px;--wf-kanban-col-max-width: 300px;--wf-treeselect-min-width: 200px;--wf-navmenu-min-width: 160px;--wf-select-menu-min-width: 200px;--wf-treeselect-max-width: 320px;--wf-treeselect-dropdown-max-height: 260px;--wf-z-popover: 120;--wf-z-toast: 140;--wf-z-tooltip: 160;--wf-z-dropdown: var(--wf-z-popover);--wf-pop-z: var(--wf-z-popover);--wf-cover-z: var(--wf-z-modal);--wf-color-primary: var(--wf-brand-500);--wf-color-primary-hover: var(--wf-brand-600);--wf-color-primary-bg: var(--wf-brand-50);--wf-color-success: var(--wf-green-500);--wf-color-success-bg: var(--wf-green-50);--wf-color-warning: var(--wf-amber-500);--wf-color-warning-bg: var(--wf-amber-50);--wf-color-error: var(--wf-red-500);--wf-color-error-bg: var(--wf-red-50);--wf-color-text: var(--wf-slate-900);--wf-color-text-secondary: var(--wf-slate-500);--wf-color-text-tertiary: var(--wf-slate-400);--wf-color-text-disabled: var(--wf-slate-300);--wf-color-bg: var(--wf-white);--wf-color-bg-secondary: var(--wf-slate-50);--wf-color-bg-tertiary: var(--wf-slate-100);--wf-color-border: var(--wf-slate-200);--wf-color-border-light: var(--wf-slate-100);--wf-color-border-dark: var(--wf-slate-300);--wf-surface-bg: var(--wf-color-bg);--wf-color-bg-elevated: var(--wf-color-bg);--wf-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;--wf-font-mono: "SF Mono", "Fira Code", "JetBrains Mono", "PingFang SC", "Microsoft YaHei", monospace;--wf-font-size-xs: 12px;--wf-font-size-sm: 13px;--wf-font-size-base: 14px;--wf-font-size-lg: 15px;--wf-font-size-xl: 16px;--wf-font-size-2xl: 21px;--wf-font-size-3xl: 24px;--wf-font-size-4xl: 30px;--wf-font-size-5xl: 36px;--wf-font-size-display: 30px;--wf-heading-case: none;--wf-heading-tracking: 0;--wf-font-weight-normal: 400;--wf-font-weight-medium: 500;--wf-font-weight-semibold: 600;--wf-font-weight-bold: 700;--wf-line-height-tight: 1.25;--wf-line-height: 1.5;--wf-line-height-relaxed: 1.75;--wf-border-width: 1px;--wf-focus-ring: 0 0 0 2px var(--wf-color-primary-bg), 0 0 0 1px var(--wf-color-primary);--wf-transition-duration: var(--wf-dur-fast);--wf-transition-timing: var(--wf-ease-out);--wf-transition: var(--wf-transition-duration) var(--wf-transition-timing);--wf-dur-fast: .12s;--wf-dur-base: .2s;--wf-dur-slow: .3s;--wf-ease-out: cubic-bezier(.16, 1, .3, 1);--wf-ease-in: cubic-bezier(.4, 0, 1, 1);--wf-ease-in-out: cubic-bezier(.4, 0, .2, 1);--wf-ease-snap: cubic-bezier(.34, 1.56, .64, 1);--wf-ease-standard: ease;--wf-dur-md: var(--wf-dur-base);--wf-motion-sm: 4px;--wf-motion-md: 8px;--wf-dur-spin: .6s;--wf-dur-pulse: 1.2s;--wf-dur-blink: 1.1s;--wf-dur-progress: 1.4s;--wf-color-info: var(--wf-sky-500);--wf-color-info-bg: var(--wf-sky-50);--wf-color-primary-text: var(--wf-brand-700);--wf-color-success-text: var(--wf-green-700);--wf-color-warning-text: var(--wf-amber-700);--wf-color-error-text: var(--wf-red-700);--wf-color-info-text: var(--wf-sky-700);--wf-color-fill: var(--wf-slate-100);--wf-color-bg-subtle: var(--wf-color-fill);--wf-state-hover: rgba(0, 0, 0, .04);--wf-state-pressed: rgba(0, 0, 0, .08);--wf-color-bg-hover: var(--wf-state-hover);--wf-color-on-brand: #fff;--wf-color-on-warning: #451a03;--wf-overlay: rgba(0, 0, 0, .4);--wf-overlay-blur: 4px;--wf-accent-color: var(--wf-color-primary);--wf-caret-color: var(--wf-color-primary);--wf-control-pad-y: 10px;--wf-control-height: 36px;--wf-field-height: var(--wf-control-height);--wf-field-radius: var(--wf-radius);--wf-bp-sm: 640px;--wf-bp-md: 768px;--wf-bp-lg: 1024px;--wf-bp-xl: 1280px;--wf-sidebar-width: 240px;--wf-opacity-disabled: .5;--wf-letter-spacing-wide: .5px;--wf-heading-display-tracking: -.5px;--wf-nums: "tabular-nums"}@supports not (color: color-mix(in srgb,red 50%,blue)){:root{--wf-brand-600: #3b5ae0;--wf-brand-700: #4338ca;--wf-brand-50: #eef1ff;--wf-dark-brand-600: #8ba3ff;--wf-dark-brand-50: #1e293b}}:root[data-theme=dark]{color-scheme:dark;--wf-color-primary: var(--wf-dark-brand-500);--wf-color-primary-hover: var(--wf-dark-brand-600);--wf-color-primary-bg: var(--wf-dark-brand-50);--wf-color-success: var(--wf-dark-green-500);--wf-color-success-bg: var(--wf-dark-green-50);--wf-color-warning: var(--wf-dark-amber-500);--wf-color-warning-bg: var(--wf-dark-amber-50);--wf-color-error: var(--wf-dark-red-500);--wf-color-error-bg: var(--wf-dark-red-50);--wf-color-info: var(--wf-dark-sky-500);--wf-color-info-bg: var(--wf-dark-sky-50);--wf-color-text: var(--wf-dark-slate-900);--wf-color-text-secondary: var(--wf-dark-slate-500);--wf-color-text-tertiary: var(--wf-dark-slate-400);--wf-color-text-disabled: var(--wf-dark-slate-300);--wf-color-bg: var(--wf-dark-bg);--wf-color-bg-secondary: var(--wf-dark-slate-100);--wf-color-bg-tertiary: var(--wf-dark-slate-200);--wf-color-fill: var(--wf-dark-fill);--wf-color-bg-subtle: var(--wf-dark-fill);--wf-color-bg-hover: var(--wf-dark-bg-hover);--wf-state-hover: var(--wf-dark-state-hover);--wf-state-pressed: var(--wf-dark-state-pressed);--wf-color-bg-elevated: var(--wf-dark-slate-100);--wf-color-border: var(--wf-dark-slate-200);--wf-color-border-light: var(--wf-dark-slate-100);--wf-color-border-dark: var(--wf-dark-slate-300);--wf-surface-bg: var(--wf-color-bg);--wf-surface-shadow: var(--wf-dark-surface-shadow);--wf-shadow-sm: var(--wf-dark-shadow-sm);--wf-shadow: var(--wf-dark-shadow);--wf-shadow-md: var(--wf-dark-shadow-md);--wf-shadow-lg: var(--wf-dark-shadow-lg);--wf-shadow-inset: var(--wf-dark-shadow-inset);--wf-color-primary-text: var(--wf-dark-brand-500);--wf-color-success-text: var(--wf-dark-green-500);--wf-color-warning-text: var(--wf-dark-amber-500);--wf-color-error-text: var(--wf-dark-red-500);--wf-color-info-text: var(--wf-dark-sky-500);--wf-overlay: var(--wf-dark-overlay)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--wf-color-primary: var(--wf-dark-brand-500);--wf-color-primary-hover: var(--wf-dark-brand-600);--wf-color-primary-bg: var(--wf-dark-brand-50);--wf-color-success: var(--wf-dark-green-500);--wf-color-success-bg: var(--wf-dark-green-50);--wf-color-warning: var(--wf-dark-amber-500);--wf-color-warning-bg: var(--wf-dark-amber-50);--wf-color-error: var(--wf-dark-red-500);--wf-color-error-bg: var(--wf-dark-red-50);--wf-color-info: var(--wf-dark-sky-500);--wf-color-info-bg: var(--wf-dark-sky-50);--wf-color-text: var(--wf-dark-slate-900);--wf-color-text-secondary: var(--wf-dark-slate-500);--wf-color-text-tertiary: var(--wf-dark-slate-400);--wf-color-text-disabled: var(--wf-dark-slate-300);--wf-color-bg: var(--wf-dark-bg);--wf-color-bg-secondary: var(--wf-dark-slate-100);--wf-color-bg-tertiary: var(--wf-dark-slate-200);--wf-color-fill: var(--wf-dark-fill);--wf-color-bg-subtle: var(--wf-dark-fill);--wf-color-bg-hover: var(--wf-dark-bg-hover);--wf-state-hover: var(--wf-dark-state-hover);--wf-state-pressed: var(--wf-dark-state-pressed);--wf-color-bg-elevated: var(--wf-dark-slate-100);--wf-color-border: var(--wf-dark-slate-200);--wf-color-border-light: var(--wf-dark-slate-100);--wf-color-border-dark: var(--wf-dark-slate-300);--wf-surface-bg: var(--wf-color-bg);--wf-surface-shadow: var(--wf-dark-surface-shadow);--wf-shadow-sm: var(--wf-dark-shadow-sm);--wf-shadow: var(--wf-dark-shadow);--wf-shadow-md: var(--wf-dark-shadow-md);--wf-shadow-lg: var(--wf-dark-shadow-lg);--wf-shadow-inset: var(--wf-dark-shadow-inset);--wf-color-primary-text: var(--wf-dark-brand-500);--wf-color-success-text: var(--wf-dark-green-500);--wf-color-warning-text: var(--wf-dark-amber-500);--wf-color-error-text: var(--wf-dark-red-500);--wf-color-info-text: var(--wf-dark-sky-500);--wf-overlay: var(--wf-dark-overlay)}}:root[data-preset=minimal]{--wf-brand-seed: #64748b;--wf-dark-brand-seed: #94a3b8}:root[data-preset=compact]{--wf-control-height: 32px;--wf-control-pad-y: 6px;--wf-space-xs: 3px;--wf-space-sm: 6px;--wf-space: 9px;--wf-space-md: 12px;--wf-space-lg: 18px;--wf-space-xl: 24px;--wf-space-2xl: 30px;--wf-font-size-sm: 12px;--wf-font-size-base: 13px}:root[data-preset=rounded]{--wf-radius-sm: 8px;--wf-radius: 12px;--wf-radius-md: 16px;--wf-radius-lg: 20px;--wf-radius-xl: 28px;--wf-surface-radius: var(--wf-radius-md);--wf-btn-radius: 999px;--wf-field-radius: var(--wf-radius-md)}@property --wf-gap{syntax: "*"; inherits: false;}@property --wf-align{syntax: "*"; inherits: false;}@property --wf-justify{syntax: "*"; inherits: false;}@property --wf-cols{syntax: "*"; inherits: false;}@property --wf-max{syntax: "*"; inherits: false;}@property --wf-w-sm{syntax: "*"; inherits: false;}@property --wf-z{syntax: "*"; inherits: false;}@property --wf-offset{syntax: "*"; inherits: false;}@property --wf-popup-max{syntax: "*"; inherits: false;}@layer base{*,*:before,*:after{box-sizing:border-box}::selection{background:var(--wf-color-primary-bg);color:var(--wf-color-primary-text)}*{scrollbar-width:thin;scrollbar-color:var(--wf-color-border-dark) transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--wf-color-border-dark);border-radius:var(--wf-radius-sm);border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:var(--wf-color-text-secondary);background-clip:padding-box;border:2px solid transparent}:root{color-scheme:light}body{margin:0;background:var(--wf-color-bg);color:var(--wf-color-text);font-family:var(--wf-font-sans);font-size:var(--wf-font-size-base);line-height:var(--wf-line-height);-webkit-font-smoothing:antialiased}a{color:var(--wf-color-primary-text);text-decoration:none}a:hover{color:var(--wf-color-primary-hover);text-decoration:underline}input,textarea,select,button{font-family:inherit;font-size:inherit;line-height:inherit}input,textarea,select{accent-color:var(--wf-accent-color);caret-color:var(--wf-caret-color);background:var(--wf-color-bg);color:var(--wf-color-text);border:var(--wf-border-width) solid var(--wf-color-border);border-radius:var(--wf-radius);padding:var(--wf-control-pad-y) var(--wf-space)}input:focus,textarea:focus,select:focus{outline:none;box-shadow:var(--wf-focus-ring);border-color:var(--wf-color-primary)}input:disabled,textarea:disabled,select:disabled,button:disabled{opacity:var(--wf-opacity-disabled);cursor:not-allowed}button{accent-color:var(--wf-accent-color);background:var(--wf-color-bg);color:var(--wf-color-text);border:var(--wf-border-width) solid var(--wf-color-border);border-radius:var(--wf-radius);padding:var(--wf-control-pad-y) var(--wf-space-md);min-height:var(--wf-control-height);cursor:pointer;transition:border-color var(--wf-dur-fast) var(--wf-ease-out),color var(--wf-dur-fast) var(--wf-ease-out),box-shadow var(--wf-dur-fast) var(--wf-ease-out),background-color var(--wf-dur-fast) var(--wf-ease-out),filter var(--wf-dur-fast) var(--wf-ease-out)}button:hover{border-color:var(--wf-color-primary);color:var(--wf-color-primary-text)}button:active:not(:disabled),[role=button]:active{filter:brightness(.95)}button:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--wf-focus-ring)}[role=button]{cursor:pointer;transition:background-color var(--wf-dur-fast) var(--wf-ease-out),border-color var(--wf-dur-fast) var(--wf-ease-out),box-shadow var(--wf-dur-fast) var(--wf-ease-out),color var(--wf-dur-fast) var(--wf-ease-out),filter var(--wf-dur-fast) var(--wf-ease-out)}@media(pointer:coarse){button,[role=button],input,textarea,select,.wf-card--clickable,.wf-table-th--sortable,.wf-accordion-summary,.wf-tag-close,.wf-checkbox,.wf-switch,.wf-radio,.wf-datepicker-cell{min-height:44px;min-width:44px}}h1,h2,h3,h4,h5,h6{font-weight:var(--wf-font-weight-semibold);line-height:var(--wf-line-height-tight);color:var(--wf-color-text)}p{line-height:var(--wf-line-height-relaxed)}small{font-size:var(--wf-font-size-sm);color:var(--wf-color-text-tertiary)}label{font-size:var(--wf-font-size-base);font-weight:var(--wf-font-weight-medium);color:var(--wf-color-text)}table{width:100%;border-collapse:collapse}th{text-align:left;font-weight:var(--wf-font-weight-medium);font-size:var(--wf-font-size-xs);color:var(--wf-color-text-tertiary);text-transform:var(--wf-heading-case);letter-spacing:var(--wf-heading-tracking);padding:var(--wf-space) var(--wf-space-sm);border-bottom:var(--wf-border-width) solid var(--wf-color-border);background:var(--wf-color-bg-secondary)}td{padding:var(--wf-space) var(--wf-space-sm);border-bottom:var(--wf-border-width) solid var(--wf-color-border);color:var(--wf-color-text);font-size:var(--wf-font-size-base)}hr{border:none;border-top:var(--wf-border-width) solid var(--wf-color-border);margin:var(--wf-space-md) 0}pre,code{font-family:var(--wf-font-mono);font-size:var(--wf-font-size-sm)}pre{background:var(--wf-color-bg-secondary);border:var(--wf-border-width) solid var(--wf-color-border);border-radius:var(--wf-radius);padding:var(--wf-space) var(--wf-space-md);overflow-x:auto;white-space:pre}code{background:var(--wf-color-bg-secondary);padding:2px 6px;border-radius:var(--wf-radius-sm)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body.wf-dragging{user-select:none;-webkit-user-select:none}@keyframes wf-stream-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.wf-stream-in{animation:wf-stream-in var(--wf-dur-base) var(--wf-ease-out) both}@media(prefers-reduced-motion:reduce){.wf-stream-in{animation-duration:.01ms}}.wf-hero-cursor{animation:wf-hero-blink 1s step-end infinite;color:var(--wf-color-primary)}@keyframes wf-hero-blink{0%,to{opacity:1}50%{opacity:0}}}@layer layout{.wf-stack{display:flex;flex-direction:column}:where(.wf-stack){gap:var(--wf-gap, var(--wf-gap-md));align-items:var(--wf-align, stretch)}}@layer layout{.wf-row{display:flex;flex-wrap:wrap}:where(.wf-row){gap:var(--wf-gap, var(--wf-gap-md));align-items:var(--wf-align, center)}.wf-row-reverse{display:flex;flex-direction:row-reverse;flex-wrap:wrap}:where(.wf-row-reverse){gap:var(--wf-gap, var(--wf-gap-md));align-items:var(--wf-align, center)}.wf-items-start{--wf-align: flex-start}.wf-items-center{--wf-align: center}.wf-items-end{--wf-align: flex-end}.wf-items-stretch{--wf-align: stretch}}@layer layout{.wf-split{display:flex;justify-content:space-between}:where(.wf-split){align-items:var(--wf-align, center);gap:var(--wf-gap, var(--wf-gap-md))}.wf-split>:last-child{flex-shrink:0}}@layer layout{.wf-center{display:flex;flex-direction:column;align-items:center;justify-content:center}}@layer layout{.wf-justify-between{display:flex;justify-content:space-between}:where(.wf-justify-between){align-items:var(--wf-align, center);gap:var(--wf-gap, var(--wf-gap-md))}.wf-justify-end{display:flex;justify-content:flex-end}:where(.wf-justify-end){align-items:var(--wf-align, center);gap:var(--wf-gap, var(--wf-gap-md))}.wf-justify-center{display:flex;justify-content:center}:where(.wf-justify-center){align-items:var(--wf-align, center);gap:var(--wf-gap, var(--wf-gap-md))}}@layer layout{.wf-fill{flex:1;min-width:0;min-height:0}.wf-fill-hover{border-radius:var(--wf-radius-sm);padding:2px 4px;margin:-2px -4px;transition:background .15s ease}.wf-fill-hover:hover{background:var(--wf-color-bg-secondary)}}@layer layout{.wf-grid{display:grid;grid-template-columns:var(--wf-cols, repeat(auto-fill, minmax(280px, 1fr)))}:where(.wf-grid){gap:var(--wf-gap, var(--wf-gap-lg))}}@layer layout{.wf-cluster{display:flex;flex-wrap:wrap}:where(.wf-cluster){gap:var(--wf-gap, var(--wf-gap-sm));justify-content:var(--wf-justify, center);align-items:var(--wf-align, center)}}@layer layout{.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{.wf-relative{position:relative}.wf-absolute{position:absolute}}@layer layout{.wf-sticky{position:sticky;top:var(--wf-offset, 0)}}@layer layout{.wf-overflow-auto{overflow:auto}.wf-overflow-hidden{overflow:hidden}.wf-overflow-x{overflow-x:auto}}@layer layout{.wf-safe-bottom{padding-bottom:env(safe-area-inset-bottom)}.wf-safe-top{padding-top:env(safe-area-inset-top)}}@layer layout{.wf-layer{position:relative;z-index:var(--wf-z, 1)}}@layer layout{.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{.wf-nowrap{display:flex;flex-wrap:nowrap}:where(.wf-nowrap){gap:var(--wf-gap, var(--wf-gap-md))}}@layer layout{.wf-shrink{min-width:0;min-height:0}.wf-min-width-0{min-width:0}}@layer layout{.wf-container{width:100%;max-width:var(--wf-max, 1200px);margin:0 auto;padding:0 var(--wf-gap, var(--wf-gap-lg))}}@layer layout{.wf-app-shell{display:grid;grid-template-columns:var(--wf-sidebar-width, 240px) minmax(0,1fr);height:100vh;overflow:hidden}.wf-sidebar{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--wf-color-bg-secondary);border-right:var(--wf-border-width) solid var(--wf-color-border)}.wf-sidebar-header{display:flex;align-items:center;gap:var(--wf-gap-sm);padding:var(--wf-space-md);border-bottom:var(--wf-border-width) solid var(--wf-color-border-light);flex-shrink:0}.wf-sidebar-body{flex:1;padding:var(--wf-space-sm);overflow-y:auto}.wf-sidebar-footer{padding:var(--wf-space-sm);border-top:var(--wf-border-width) solid var(--wf-color-border-light);flex-shrink:0}.wf-nav{display:flex;flex-direction:column;gap:2px}.wf-nav-group{font-size:var(--wf-font-size-xs);font-weight:var(--wf-font-weight-medium);color:var(--wf-color-text-tertiary);text-transform:var(--wf-heading-case);letter-spacing:var(--wf-heading-tracking);padding:var(--wf-space-md) var(--wf-space-sm) var(--wf-space-xs)}.wf-nav-item{display:flex;align-items:center;gap:var(--wf-gap-sm);padding:var(--wf-space-sm) var(--wf-space);border-radius:var(--wf-radius);color:var(--wf-color-text-secondary);font-size:var(--wf-font-size-base);text-decoration:none;cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:inherit;transition:background var(--wf-transition),color var(--wf-transition)}.wf-nav-item:hover{background:var(--wf-color-bg-tertiary);color:var(--wf-color-text);text-decoration:none}.wf-nav-item:focus-visible{outline:none;box-shadow:var(--wf-focus-ring)}.wf-nav-item--active{background:var(--wf-color-primary-bg);color:var(--wf-color-primary-text);font-weight:var(--wf-font-weight-medium)}.wf-nav-item--active:hover{background:var(--wf-color-primary-bg);color:var(--wf-color-primary-text)}.wf-nav--collapsed .wf-nav-item{justify-content:center;gap:0;padding:var(--wf-space-sm)}.wf-nav--collapsed .wf-nav-label{display:none}.wf-nav--collapsed .wf-nav-group{text-align:center;padding-left:0;padding-right:0;overflow:hidden;white-space:nowrap}.wf-main{padding:var(--wf-space-lg);min-width:0;min-height:0;overflow-y:auto;background:var(--wf-color-bg);--wf-main-max: none}.wf-main>*{max-width:var(--wf-main-max);margin-inline:auto}@media(pointer:coarse){.wf-nav-item{min-height:44px}}@media(max-width:767.98px){.wf-app-shell{grid-template-columns:1fr;height:auto;overflow:visible}.wf-sidebar{position:static;height:auto;border-right:none;border-bottom:var(--wf-border-width) solid var(--wf-color-border)}.wf-main{padding:var(--wf-space-md);overflow:visible}}}@layer utilities{.wf-surface{border-radius:var(--wf-surface-radius);box-shadow:var(--wf-surface-shadow);background:var(--wf-surface-bg)}.wf-surface--flat{box-shadow:none}.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-pill{border-radius:999px}.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)}.wf-shadow{box-shadow:var(--wf-shadow)}.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-panel-in{animation:wf-panel-in var(--wf-dur-fast) var(--wf-ease-out);transform-origin:top center}@keyframes wf-panel-in{0%{opacity:0;transform:translateY(calc(var(--wf-motion-sm) * -1)) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.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)}.wf-rounded-sm{border-radius:var(--wf-radius-sm)}.wf-rounded-md{border-radius:var(--wf-radius-md)}.wf-card-outline{border:var(--wf-border-width) solid var(--wf-color-border)}}@layer utilities{.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{.wf-text-left{text-align:left}.wf-text-center{text-align:center}.wf-text-right{text-align:right}.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)}.wf-text-secondary{color:var(--wf-color-text-secondary)}.wf-text-tertiary{color:var(--wf-color-text-tertiary)}.wf-text-danger{color:var(--wf-color-error-text)}.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-font-mono{font-family:var(--wf-font-mono)}.wf-text-error{color:var(--wf-color-error-text)}.wf-text-on-brand{color:var(--wf-color-on-brand)}.wf-text-on-warning{color:var(--wf-color-on-warning)}.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-wide{letter-spacing:var(--wf-letter-spacing-wide)}.wf-uppercase{text-transform:uppercase}.wf-pre-wrap{white-space:pre-wrap;word-break:break-word}.wf-break-word{overflow-wrap:break-word;word-break:break-word}.wf-text-nowrap{white-space:nowrap}.wf-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@layer utilities{.wf-padding-none{padding:0}.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)}.wf-padding-x-xs{padding-left:var(--wf-space-xs);padding-right:var(--wf-space-xs)}.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)}.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)}.wf-margin-none{margin:0}.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)}.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-margin-y-xs{margin-top:var(--wf-space-xs);margin-bottom:var(--wf-space-xs)}.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-width-full{width:100%}.wf-width-sm{width:var(--wf-w-sm, 480px)}.wf-height-full{height:100%}}@layer utilities{:where(.wf-block){display:block}}@layer utilities{:where(.wf-flex){display:flex}@media(min-width:640px){.wf-flex\@sm{display:flex}}@media(min-width:1024px){.wf-flex\@lg{display:flex}}}@layer utilities{:where(.wf-hidden){display:none}@media(min-width:1024px){.wf-hidden\@lg{display:none}}.wf-dim{opacity:.7}.wf-pointer{cursor:pointer}}@layer layout{.wf-popup{max-width:min(var(--wf-popup-max, 480px),calc(100vw - 32px));box-sizing:border-box}.wf-popup-mask{position:fixed;inset:0;z-index:var(--wf-z-overlay);background:var(--wf-overlay)}}