/* ═══════════════════════════════════════════════════════════════════════════
   UI KIT · 墨绿 × 纸质编辑风   v2.0
   自建系统统一前端基线
   ---------------------------------------------------------------------------
   v2.2 变更（主色换相 + 反色令牌）
     · 主色定为青草绿 #4C7F1E（色相 ~91°），交互主色压深保证白字 AA，
       大色块用青草绿本色 #8DBE3C
     · 信息色改亮蓝紫 #6C4FE0
     · 新增 --ui-on-status / --ui-topbar-* 反色令牌：主色明暗翻转时，
       顶栏与实心标签的文字自动跟着翻，不再出现"白字压在亮色上"
     · 深色模式与 Element Plus 主题同步重配全套 light-N 阶梯
   v2 变更
     · 圆角 6 档 → 4 档；阴影 4 档 → 2 档；卡片去投影，纯描边
     · 去除纸纹噪点与装饰性渐变，整体走极简
     · 顶栏改为主色实心，状态标签新增实心变体
     · 主色以大色块出场
   用法
     <link rel="stylesheet" href="ui-kit.css">
     <html data-scale="md">        ← 小 sm / 中 md / 大 lg
   规则
     1. 业务代码只允许引用 --ui-* 令牌与 .ui-* 组件类，禁止硬编码色值/尺寸
     2. 颜色一律来自令牌，深色模式由令牌覆写承载
     3. 字号与控件尺寸只经由 data-scale 档位调整，不写死 px
     4. Element Plus 项目追加 element-plus-theme.css
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══ 1 · 设计令牌 ═════════════════════════════════════════════════════════ */

:root {

  /* ── 1.1 纸面与墨色 ───────────────────────────────────────────────────── */
  --ui-paper:          #FAF8F3;
  --ui-surface:        #FFFFFF;
  --ui-surface-2:      #F4F1EA;
  --ui-surface-sunk:   #EDE9E0;
  --ui-ink:            #1A1712;   /* 主文字（暖黑，与纸面同族） */
  --ui-ink-2:          #3E3A32;   /* 强调正文（暖深灰） */
  --ui-muted:          #6F6A5F;   /* 次要文字（暖中灰） */
  --ui-faint:          #948D7E;   /* 弱化文字 / 占位符（暖浅灰） */

  /* 深色底（主色实心区 / 深色带）上的文字与分隔 */
  --ui-on-deep:        #FFFFFF;
  --ui-on-deep-soft:   rgba(255, 255, 255, .72);
  --ui-on-deep-line:   rgba(255, 255, 255, .16);

  /* 顶栏（主色实心）：底与文字成对给，深色模式整组换成半透明铺底 */
  --ui-topbar-bg:        #4C7F1E;
  --ui-topbar-ink:       #FFFFFF;
  --ui-topbar-ink-soft:  rgba(255, 255, 255, .78);
  --ui-topbar-hover-bg:  rgba(255, 255, 255, .14);
  --ui-topbar-switch-bg: rgba(0, 0, 0, .16);
  --ui-topbar-switch-active-bg:  #FFFFFF;
  --ui-topbar-switch-active-ink: #4C7F1E;

  /* ── 1.2 描边与分隔 ───────────────────────────────────────────────────── */
  --ui-rule:           #E3DED2;
  --ui-rule-soft:      #EDE9DE;
  --ui-rule-strong:    #CFC8B8;

  /* ── 1.3 品牌青草绿（交互 + 主视觉） ─────────────────────────────────────
     色相 ~91°（黄绿侧），青草绿本色。刻意避开微信绿 / Ant 绿 / Element 绿 /
     政务绿这条主流绿线。交互主色压深一档保证白字 AA；大色块用 bright 本色。 */
  --ui-accent:         #4C7F1E;   /* 主色 · 交互与实心块（白字 4.95:1） */
  --ui-accent-hover:   #3F6A18;
  --ui-accent-active:  #345613;
  --ui-accent-deep:    #24380C;   /* 深色区 */
  --ui-accent-bright:  #8DBE3C;   /* 青草绿本色 · 大色块 / 点缀 / 深底强调 */
  --ui-accent-tint:    #EDF3DC;
  --ui-accent-tint-2:  #DCE8BC;
  --ui-accent-ink:     #FFFFFF;   /* 主色上的文字 */
  --ui-accent-line:    #B4D186;
  --ui-accent-bright-ink: #1A2410; /* 青草绿本色（亮色）上的文字 */

  /* ── 1.4 语义状态色 ───────────────────────────────────────────────────── */
  --ui-success:        #1E7A46;
  --ui-success-tint:   #E6F5EC;
  --ui-warning:        #9A5E0A;
  --ui-warning-tint:   #FBF1DC;
  --ui-danger:         #A8382F;
  --ui-danger-tint:    #F9EAE8;
  --ui-info:           #6C4FE0;   /* 亮蓝紫 · 信息 */
  --ui-info-tint:      #EDE9FA;

  /* ── 1.4b 大色块铺底 ──────────────────────────────────────────────────────
     「大色块」= 顶栏 / 大色块区 / 强调统计块 / 实心标签这类成片着色的元素。
     浅色模式用实心色；深色模式整组换成半透明铺底 —— 同样的颜色关系，
     但在暖黑纸上不再是一整块荧光。底与文字必须成对给，不能只改底色。 */
  --ui-accent-block:          #4C7F1E;   /* 主色大块底 */
  --ui-accent-block-ink:      #FFFFFF;   /* 主色大块上的文字 */
  --ui-accent-block-line:     transparent;
  --ui-accent-block-soft:     #8DBE3C;   /* 青草绿本色大块底 */
  --ui-accent-block-soft-ink: #1A2410;
  --ui-success-block:         #1E7A46;
  --ui-success-block-ink:     #FFFFFF;
  --ui-warning-block:         #9A5E0A;
  --ui-warning-block-ink:     #FFFFFF;
  --ui-danger-block:          #A8382F;
  --ui-danger-block-ink:      #FFFFFF;
  --ui-info-block:            #6C4FE0;
  --ui-info-block-ink:        #FFFFFF;
  --ui-swatch-ink:            #FFFFFF;   /* 色板标本上的文字（浅色模式白字） */

  /* ── 1.5 字体 ─────────────────────────────────────────────────────────── */
  --ui-font-sans:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", system-ui,
    "Segoe UI", sans-serif;
  --ui-font-mono:
    ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas,
    "Courier New", monospace;

  /* ── 1.6 间距（唯一乘子 --ui-scale） ───────────────────────────────────── */
  --ui-scale: 1;

  /* 下拉箭头：随主题切换，深色模式下不隐形 */
  --ui-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 L6 8 L9.5 4.5' fill='none' stroke='%236F6A5F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-space-1:  calc( 4px * var(--ui-scale));
  --ui-space-2:  calc( 8px * var(--ui-scale));
  --ui-space-3:  calc(12px * var(--ui-scale));
  --ui-space-4:  calc(16px * var(--ui-scale));
  --ui-space-5:  calc(20px * var(--ui-scale));
  --ui-space-6:  calc(24px * var(--ui-scale));
  --ui-space-8:  calc(32px * var(--ui-scale));
  --ui-space-10: calc(40px * var(--ui-scale));
  --ui-space-12: calc(48px * var(--ui-scale));
  --ui-space-16: calc(64px * var(--ui-scale));
  --ui-space-20: calc(80px * var(--ui-scale));

  /* ── 1.7 圆角（4 档） ──────────────────────────────────────────────────── */
  --ui-radius-xs:   3px;    /* 标签 */
  --ui-radius-sm:   6px;    /* 按钮 / 输入框 */
  --ui-radius-lg:   14px;   /* 卡片 / 弹层 */
  --ui-radius-pill: 999px;  /* 状态点 / 药丸 */

  /* ── 1.8 阴影（2 档，只给浮层） ────────────────────────────────────────── */
  --ui-shadow-md: 0 8px 28px rgba(20, 22, 26, .10);
  --ui-shadow-lg: 0 24px 64px rgba(8, 40, 30, .22);
  --ui-ring:      0 0 0 3px rgba(76, 127, 30, .24);

  /* ── 1.9 动效 ─────────────────────────────────────────────────────────── */
  --ui-motion-fast: 120ms cubic-bezier(.22, .61, .36, 1);
  --ui-motion-base: 180ms cubic-bezier(.22, .61, .36, 1);
  --ui-motion-slow: 280ms cubic-bezier(.22, .61, .36, 1);

  /* ── 1.10 尺寸档位：小 / 中 / 大 ───────────────────────────────────────── */
  --ui-font-xs:   12px;   --ui-font-sm:   13px;   --ui-font-base: 14px;
  --ui-font-md:   15px;   --ui-font-lg:   17px;   --ui-font-xl:   20px;
  --ui-font-2xl:  26px;   --ui-font-3xl:  36px;
  --ui-line-tight: 1.35;  --ui-line: 1.6;        --ui-line-loose: 1.85;
  --ui-control-sm: 30px;  --ui-control-md: 36px;  --ui-control-lg: 42px;
  --ui-tap-min:    32px;
}

html[data-scale="sm"] {
  --ui-scale: .875;
  --ui-font-xs:  11px;   --ui-font-sm:  12px;   --ui-font-base: 13px;
  --ui-font-md:  14px;   --ui-font-lg:  16px;   --ui-font-xl:  19px;
  --ui-font-2xl: 24px;   --ui-font-3xl: 32px;
  --ui-line-tight: 1.3;   --ui-line: 1.55;       --ui-line-loose: 1.8;
  --ui-control-sm: 26px;  --ui-control-md: 32px;  --ui-control-lg: 38px;
  --ui-tap-min:    28px;
}

html[data-scale="lg"] {
  --ui-scale: 1.125;
  --ui-font-xs:  13px;   --ui-font-sm:  14px;   --ui-font-base: 16px;
  --ui-font-md:  17px;   --ui-font-lg:  19px;   --ui-font-xl:  22px;
  --ui-font-2xl: 28px;   --ui-font-3xl: 38px;
  --ui-line-tight: 1.4;   --ui-line: 1.7;        --ui-line-loose: 1.9;
  --ui-control-sm: 38px;  --ui-control-md: 44px;  --ui-control-lg: 52px;
  --ui-tap-min:    44px;
}

/* ── 1.11 深色模式 ──────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-paper:          #141310;
    --ui-surface:        #1D1C18;
    --ui-surface-2:      #262520;
    --ui-surface-sunk:   #1A1915;
    --ui-ink:            #F2EFE6;
    --ui-ink-2:          #DAD6CB;
    --ui-muted:          #A8A49A;
    --ui-faint:          #8A857C;

    --ui-rule:           #2A2823;
    --ui-rule-soft:      #201F1B;
    --ui-rule-strong:    #3C3931;

    --ui-accent:         #A8D84A;
    --ui-accent-hover:   #BCE264;
    --ui-accent-active:  #94C23C;
    --ui-accent-deep:    #1B2310;
    --ui-accent-bright:  #C6E86E;
    --ui-accent-tint:    #1D2410;
    --ui-accent-tint-2:  #273014;
    --ui-accent-ink:     #16200C;
    --ui-accent-line:    #4B5A22;
    --ui-accent-bright-ink: #16200C;

    /* 大色块铺底降透明度：暖黑纸上不再是一整块荧光 */
    --ui-accent-block:          rgba(168, 216, 74, .16);
    --ui-accent-block-ink:      #CBE98F;
    --ui-accent-block-line:     rgba(168, 216, 74, .30);
    --ui-accent-block-soft:     rgba(198, 232, 110, .20);
    --ui-accent-block-soft-ink: #D6F09B;
    --ui-success-block:         rgba(86, 197, 140, .18);
    --ui-success-block-ink:     #7FD9AC;
    --ui-warning-block:         rgba(224, 168, 82, .18);
    --ui-warning-block-ink:     #E8B96B;
    --ui-danger-block:          rgba(232, 128, 120, .18);
    --ui-danger-block-ink:      #F09A93;
    --ui-info-block:            rgba(155, 133, 245, .18);
    --ui-info-block-ink:        #B6A4F8;
    --ui-swatch-ink:            #16200C;   /* 深色模式下状态色变亮，标本文字改深墨 */

    --ui-success:        #56C58C;
    --ui-success-tint:   #13241A;
    --ui-warning:        #E0A852;
    --ui-warning-tint:   #251C0F;
    --ui-danger:         #E88078;
    --ui-danger-tint:    #261614;
    --ui-info:           #9B85F5;
    --ui-info-tint:      #1A1930;

    --ui-shadow-md: 0 8px 28px rgba(0, 0, 0, .45);
    --ui-shadow-lg: 0 24px 64px rgba(0, 0, 0, .60);
    --ui-ring:      0 0 0 3px rgba(168, 216, 74, .32);
    --ui-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 L6 8 L9.5 4.5' fill='none' stroke='%23A8A49A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --ui-topbar-bg:        rgba(168, 216, 74, .14);
    --ui-topbar-ink:       #CBE98F;
    --ui-topbar-ink-soft:  rgba(203, 233, 143, .74);
    --ui-topbar-hover-bg:  rgba(203, 233, 143, .12);
    --ui-topbar-switch-bg: rgba(0, 0, 0, .32);
    --ui-topbar-switch-active-bg:  #A8D84A;
    --ui-topbar-switch-active-ink: #16200C;
  }
}

html[data-theme="dark"] {
  --ui-paper:          #141310;
  --ui-surface:        #1D1C18;
  --ui-surface-2:      #262520;
  --ui-surface-sunk:   #1A1915;
  --ui-ink:            #F2EFE6;
  --ui-ink-2:          #DAD6CB;
  --ui-muted:          #A8A49A;
  --ui-faint:          #8A857C;
  --ui-rule:           #2A2823;
  --ui-rule-soft:      #201F1B;
  --ui-rule-strong:    #3C3931;
  --ui-accent:         #A8D84A;
  --ui-accent-hover:   #BCE264;
  --ui-accent-active:  #94C23C;
  --ui-accent-deep:    #1B2310;
  --ui-accent-bright:  #C6E86E;
  --ui-accent-tint:    #1D2410;
  --ui-accent-tint-2:  #273014;
  --ui-accent-ink:     #16200C;
  --ui-accent-line:    #4B5A22;
  --ui-accent-bright-ink: #16200C;

  /* 大色块铺底降透明度：暖黑纸上不再是一整块荧光 */
  --ui-accent-block:          rgba(168, 216, 74, .16);
  --ui-accent-block-ink:      #CBE98F;
  --ui-accent-block-line:     rgba(168, 216, 74, .30);
  --ui-accent-block-soft:     rgba(198, 232, 110, .20);
  --ui-accent-block-soft-ink: #D6F09B;
  --ui-success-block:         rgba(86, 197, 140, .18);
  --ui-success-block-ink:     #7FD9AC;
  --ui-warning-block:         rgba(224, 168, 82, .18);
  --ui-warning-block-ink:     #E8B96B;
  --ui-danger-block:          rgba(232, 128, 120, .18);
  --ui-danger-block-ink:      #F09A93;
  --ui-info-block:            rgba(155, 133, 245, .18);
  --ui-info-block-ink:        #B6A4F8;
  --ui-swatch-ink:            #16200C;   /* 深色模式下状态色变亮，标本文字改深墨 */
  --ui-success:        #56C58C;
  --ui-success-tint:   #13241A;
  --ui-warning:        #E0A852;
  --ui-warning-tint:   #251C0F;
  --ui-danger:         #E88078;
  --ui-danger-tint:    #261614;
  --ui-info:           #9B85F5;
  --ui-info-tint:      #1A1930;
  --ui-shadow-md: 0 8px 28px rgba(0, 0, 0, .45);
  --ui-shadow-lg: 0 24px 64px rgba(0, 0, 0, .60);
  --ui-ring:      0 0 0 3px rgba(168, 216, 74, .32);

  --ui-topbar-bg:        rgba(168, 216, 74, .14);
  --ui-topbar-ink:       #CBE98F;
  --ui-topbar-ink-soft:  rgba(203, 233, 143, .74);
  --ui-topbar-hover-bg:  rgba(203, 233, 143, .12);
  --ui-topbar-switch-bg: rgba(0, 0, 0, .32);
  --ui-topbar-switch-active-bg:  #A8D84A;
  --ui-topbar-switch-active-ink: #16200C;
}


/* ══ 2 · 基础层 ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--ui-font-base); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-family: var(--ui-font-sans);
  font-size: var(--ui-font-base);
  line-height: var(--ui-line);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 2.1 排版 ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 650; letter-spacing: -.015em; line-height: var(--ui-line-tight); }
h1 { font-size: var(--ui-font-3xl); }
h2 { font-size: var(--ui-font-2xl); }
h3 { font-size: var(--ui-font-xl); }
h4 { font-size: var(--ui-font-lg); }
h5 { font-size: var(--ui-font-md); }
h6 { font-size: var(--ui-font-base); }
p  { margin: 0; }

.ui-title    { font-size: var(--ui-font-2xl); font-weight: 650; letter-spacing: -.02em; }
.ui-subtitle { font-size: var(--ui-font-md);   color: var(--ui-muted); }
.ui-caption  { font-size: var(--ui-font-xs);   color: var(--ui-faint); line-height: var(--ui-line); }
.ui-mono     { font-family: var(--ui-font-mono); font-size: .92em; font-variant-ligatures: none; }
.ui-muted    { color: var(--ui-muted); }
.ui-faint    { color: var(--ui-faint); }
.ui-accent-text { color: var(--ui-accent); }
.ui-nowrap   { white-space: nowrap; }
.ui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 2.2 链接 ───────────────────────────────────────────────────────────── */
a { color: var(--ui-accent); text-decoration: none; transition: color var(--ui-motion-fast); }
a:hover { color: var(--ui-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ── 2.3 焦点可见 ───────────────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
  border-radius: var(--ui-radius-xs);
}

/* ── 2.4 锚点跳转：留出吸顶栏高度，避免标题被盖住 ───────────────────────── */
[id] { scroll-margin-top: calc(var(--ui-control-lg) + var(--ui-space-6)); }

/* ── 2.5 滚动条 ─────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--ui-rule-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ui-rule-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--ui-radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--ui-faint); background-clip: content-box; }


/* ══ 3 · 布局原语 ═════════════════════════════════════════════════════════ */

.ui-page {
  padding: var(--ui-space-6) var(--ui-space-6) var(--ui-space-20);
  max-width: 1440px;
  margin: 0 auto;
}
.ui-page-narrow { max-width: 880px; }

.ui-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ui-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--ui-space-6);
}
.ui-page-title { font-size: var(--ui-font-2xl); font-weight: 650; letter-spacing: -.02em; }
.ui-page-desc  { margin-top: var(--ui-space-1); color: var(--ui-muted); font-size: var(--ui-font-md); }

.ui-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-radius-lg);
  padding: var(--ui-space-5);
}
.ui-card--flush  { padding: 0; overflow: hidden; }
.ui-card--sunken { background: var(--ui-surface-2); }
.ui-card--solid  { background: var(--ui-accent-block); border-color: var(--ui-accent-block-line); color: var(--ui-accent-block-ink); }
.ui-card--solid .ui-muted, .ui-card--solid .ui-faint { opacity: .72; }
.ui-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  flex-wrap: wrap;
  padding: var(--ui-space-4) var(--ui-space-5);
  border-bottom: 1px solid var(--ui-rule-soft);
}
.ui-card__title { font-size: var(--ui-font-md); font-weight: 650; }
.ui-card__body  { padding: var(--ui-space-5); }

.ui-stack   { display: flex; flex-direction: column; gap: var(--ui-space-4); }
.ui-stack-2 { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.ui-stack-6 { display: flex; flex-direction: column; gap: var(--ui-space-6); }
.ui-row     { display: flex; align-items: center; gap: var(--ui-space-3); flex-wrap: wrap; }
.ui-row--tight   { gap: var(--ui-space-2); }
.ui-row--end     { justify-content: flex-end; }
.ui-row--between { justify-content: space-between; }
.ui-grow    { flex: 1 1 auto; min-width: 0; }

.ui-grid   { display: grid; gap: var(--ui-space-4); }
.ui-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ui-grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ui-grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.ui-divider       { height: 1px; background: var(--ui-rule); border: 0; margin: var(--ui-space-6) 0; }
.ui-divider--soft { background: var(--ui-rule-soft); }


/* ══ 4 · 组件 ═════════════════════════════════════════════════════════════ */

/* ── 4.1 按钮 ───────────────────────────────────────────────────────────── */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  height: var(--ui-control-md);
  padding: 0 var(--ui-space-4);
  font-family: inherit;
  font-size: var(--ui-font-base);
  font-weight: 600;
  line-height: 1;
  color: var(--ui-ink);
  background: transparent;
  border: 1px solid var(--ui-rule-strong);
  border-radius: var(--ui-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background var(--ui-motion-fast), border-color var(--ui-motion-fast),
              color var(--ui-motion-fast);
}
.ui-btn:hover  { background: var(--ui-surface-2); border-color: var(--ui-faint); }
.ui-btn:active { background: var(--ui-surface-sunk); }
.ui-btn[disabled], .ui-btn.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

.ui-btn--primary {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-accent-ink);
}
.ui-btn--primary:hover  { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); color: var(--ui-accent-ink); }
.ui-btn--primary:active { background: var(--ui-accent-active); border-color: var(--ui-accent-active); }

.ui-btn--ghost { border-color: transparent; color: var(--ui-muted); }
.ui-btn--ghost:hover { background: var(--ui-surface-2); color: var(--ui-ink); border-color: transparent; }

.ui-btn--danger { border-color: transparent; color: var(--ui-danger); }
.ui-btn--danger:hover { background: var(--ui-danger-tint); border-color: transparent; }

.ui-btn--link {
  height: auto; padding: 0;
  background: none; border: none;
  color: var(--ui-accent); font-weight: 600;
}
.ui-btn--link:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }

.ui-btn--sm   { height: var(--ui-control-sm); padding: 0 var(--ui-space-3); font-size: var(--ui-font-sm); }
.ui-btn--lg   { height: var(--ui-control-lg); padding: 0 var(--ui-space-6); font-size: var(--ui-font-md); }
.ui-btn--block { width: 100%; }
.ui-btn__icon { width: 1em; height: 1em; flex: none; }

/* ── 4.2 表单控件 ───────────────────────────────────────────────────────── */
.ui-field { display: flex; flex-direction: column; gap: var(--ui-space-2); min-width: 0; }
.ui-label {
  font-size: var(--ui-font-sm);
  font-weight: 600;
  color: var(--ui-ink-2);
  display: flex; align-items: center; gap: var(--ui-space-1);
}
.ui-label__req { color: var(--ui-danger); font-weight: 700; }
.ui-help  { font-size: var(--ui-font-xs); color: var(--ui-faint); }
.ui-error { font-size: var(--ui-font-xs); color: var(--ui-danger); }

.ui-input, .ui-select, .ui-textarea {
  width: 100%;
  height: var(--ui-control-md);
  padding: 0 var(--ui-space-3);
  font-family: inherit;
  font-size: var(--ui-font-base);
  color: var(--ui-ink);
  background: var(--ui-surface);
  border: 1px solid var(--ui-rule-strong);
  border-radius: var(--ui-radius-sm);
  transition: border-color var(--ui-motion-fast), box-shadow var(--ui-motion-fast);
}
.ui-textarea {
  height: auto;
  min-height: calc(var(--ui-control-md) * 2.4);
  padding: var(--ui-space-2) var(--ui-space-3);
  line-height: var(--ui-line);
  resize: vertical;
}
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-faint); }
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--ui-faint); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus {
  border-color: var(--ui-accent);
  box-shadow: var(--ui-ring);
  outline: none;
}
.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled {
  background: var(--ui-surface-sunk);
  color: var(--ui-faint);
  cursor: not-allowed;
}
.ui-input[aria-invalid="true"], .ui-textarea[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-input--sm { height: var(--ui-control-sm); font-size: var(--ui-font-sm); }
.ui-input--lg { height: var(--ui-control-lg); font-size: var(--ui-font-md); }

.ui-select {
  appearance: none;
  padding-right: var(--ui-space-8);
  background-color: var(--ui-surface);
  background-image: var(--ui-arrow-svg);
  background-repeat: no-repeat;
  background-position: right var(--ui-space-3) center;
  background-size: 12px;
  cursor: pointer;
}

.ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-2); cursor: pointer; font-size: var(--ui-font-base); }
.ui-check input { width: 16px; height: 16px; accent-color: var(--ui-accent); cursor: pointer; margin: 0; }

.ui-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.ui-switch input { opacity: 0; width: 0; height: 0; }
.ui-switch__track {
  position: absolute; inset: 0;
  background: var(--ui-rule-strong);
  border-radius: var(--ui-radius-pill);
  cursor: pointer;
  transition: background var(--ui-motion-base);
}
.ui-switch__track::before {
  content: "";
  position: absolute; left: 2px; top: 2px;
  width: 18px; height: 18px;
  background: var(--ui-surface);
  border-radius: 50%;
  transition: transform var(--ui-motion-base);
}
.ui-switch input:checked + .ui-switch__track { background: var(--ui-accent); }
.ui-switch input:checked + .ui-switch__track::before { transform: translateX(18px); }
.ui-switch input:focus-visible + .ui-switch__track { box-shadow: var(--ui-ring); }

/* ── 4.3 筛选栏 ─────────────────────────────────────────────────────────── */
.ui-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  background: var(--ui-surface);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-radius-lg);
  margin-bottom: var(--ui-space-4);
}
.ui-filter .ui-field { width: 200px; }
.ui-filter__actions { display: flex; gap: var(--ui-space-2); margin-left: auto; }

/* ── 4.4 表格 ───────────────────────────────────────────────────────────── */
.ui-table-wrap {
  background: var(--ui-surface);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-radius-lg);
  overflow: hidden;
}
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ui-font-base); }
.ui-table th, .ui-table td {
  padding: var(--ui-space-3) var(--ui-space-4);
  text-align: left;
  border-bottom: 1px solid var(--ui-rule-soft);
  vertical-align: middle;
}
.ui-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--ui-surface-2);
  color: var(--ui-ink-2);
  font-size: var(--ui-font-sm);
  font-weight: 650;
  white-space: nowrap;
  border-bottom: 1px solid var(--ui-rule);
}
.ui-table tbody tr { transition: background var(--ui-motion-fast); }
.ui-table tbody tr:hover { background: var(--ui-accent-tint); }
.ui-table tbody tr.is-selected { background: var(--ui-accent-tint-2); }
.ui-table tbody tr:last-child td { border-bottom: none; }
.ui-table td.is-num { text-align: right; font-family: var(--ui-font-mono); font-variant-numeric: tabular-nums; }
.ui-table--compact th, .ui-table--compact td { padding: var(--ui-space-2) var(--ui-space-3); }
.ui-table__actions { display: flex; gap: var(--ui-space-3); }

.ui-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-4);
  font-size: var(--ui-font-sm);
  color: var(--ui-muted);
  border-top: 1px solid var(--ui-rule-soft);
}
.ui-pagination__page {
  min-width: var(--ui-control-sm);
  min-height: var(--ui-tap-min);
  height: var(--ui-control-sm);
  padding: 0 var(--ui-space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui-font-mono);
  font-size: var(--ui-font-sm);
  color: var(--ui-ink-2);
  background: var(--ui-surface);
  border: 1px solid var(--ui-rule-strong);
  border-radius: var(--ui-radius-sm);
  cursor: pointer;
  transition: all var(--ui-motion-fast);
}
.ui-pagination__page:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-pagination__page.is-active { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-ink); }

/* ── 4.5 标签 / 状态点 ──────────────────────────────────────────────────── */
.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  height: calc(var(--ui-control-sm) * .78);
  padding: 0 var(--ui-space-2);
  font-size: var(--ui-font-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--ui-radius-xs);
  color: var(--ui-muted);
  background: var(--ui-surface-2);
}
.ui-tag--accent  { color: var(--ui-accent);  background: var(--ui-accent-tint); }
.ui-tag--success { color: var(--ui-success); background: var(--ui-success-tint); }
.ui-tag--warning { color: var(--ui-warning); background: var(--ui-warning-tint); }
.ui-tag--danger  { color: var(--ui-danger);  background: var(--ui-danger-tint); }
.ui-tag--info    { color: var(--ui-info);    background: var(--ui-info-tint); }

/* 实心变体：颜色要突出时用这组 */
.ui-tag--solid { color: var(--ui-accent-block-ink); background: var(--ui-accent-block); }
.ui-tag--solid.ui-tag--success { background: var(--ui-success-block); color: var(--ui-success-block-ink); }
.ui-tag--solid.ui-tag--warning { background: var(--ui-warning-block); color: var(--ui-warning-block-ink); }
.ui-tag--solid.ui-tag--danger  { background: var(--ui-danger-block);  color: var(--ui-danger-block-ink); }
.ui-tag--solid.ui-tag--info    { background: var(--ui-info-block);    color: var(--ui-info-block-ink); }

.ui-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-faint); flex: none; }
.ui-dot--accent  { background: var(--ui-accent); }
.ui-dot--success { background: var(--ui-success); }
.ui-dot--warning { background: var(--ui-warning); }
.ui-dot--danger  { background: var(--ui-danger); }
.ui-dot--info    { background: var(--ui-info); }
.ui-dot--pulse { animation: ui-pulse 2.4s ease-in-out infinite; }
@keyframes ui-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.8); }
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: var(--ui-space-1) var(--ui-space-2);
  font-size: var(--ui-font-xs);
  color: var(--ui-muted);
  background: var(--ui-surface-2);
  border-radius: var(--ui-radius-xs);
  white-space: nowrap;
}

/* ── 4.6 统计块 ─────────────────────────────────────────────────────────── */
.ui-stat {
  padding: var(--ui-space-4);
  background: var(--ui-surface);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-radius-lg);
}
.ui-stat__label { font-size: var(--ui-font-sm); color: var(--ui-muted); }
.ui-stat__value {
  margin-top: var(--ui-space-2);
  font-size: var(--ui-font-2xl);
  font-weight: 650;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ui-stat__delta { margin-top: var(--ui-space-1); font-size: var(--ui-font-xs); color: var(--ui-faint); }
.ui-stat__delta--up   { color: var(--ui-success); }
.ui-stat__delta--down { color: var(--ui-danger); }
/* 强调统计块：主色实心，用于最关键的数字 */
.ui-stat--accent {
  background: var(--ui-accent-block);
  border-color: var(--ui-accent-block-line);
  color: var(--ui-accent-block-ink);
}
.ui-stat--accent .ui-stat__label { color: var(--ui-accent-block-ink); }
.ui-stat--accent .ui-stat__delta { color: var(--ui-accent-block-ink); }
.ui-stat--accent .ui-stat__delta--up   { color: var(--ui-success-block-ink); }
.ui-stat--accent .ui-stat__delta--down { color: var(--ui-danger-block-ink); }

/* ── 4.7 空态 / 加载 ────────────────────────────────────────────────────── */
.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-16) var(--ui-space-6);
  color: var(--ui-faint);
  text-align: center;
}
.ui-empty__icon { width: 40px; height: 40px; opacity: .5; }
.ui-empty__title { font-size: var(--ui-font-md); color: var(--ui-muted); font-weight: 600; }
.ui-empty__hint  { font-size: var(--ui-font-sm); }

.ui-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--ui-rule-strong);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: ui-spin .7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

.ui-skeleton {
  background: linear-gradient(90deg, var(--ui-surface-2) 25%, var(--ui-surface-sunk) 37%, var(--ui-surface-2) 63%);
  background-size: 400% 100%;
  animation: ui-shimmer 1.4s ease infinite;
  border-radius: var(--ui-radius-xs);
  height: 1em;
}
@keyframes ui-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── 4.8 提示条 ─────────────────────────────────────────────────────────── */
.ui-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-4);
  font-size: var(--ui-font-base);
  line-height: var(--ui-line-loose);
  border-radius: var(--ui-radius-sm);
  border-left: 3px solid var(--ui-accent);
  background: var(--ui-accent-tint);
  color: var(--ui-ink-2);
}
.ui-alert__title { font-weight: 650; color: var(--ui-accent); }
.ui-alert--success { border-left-color: var(--ui-success); background: var(--ui-success-tint); }
.ui-alert--success .ui-alert__title { color: var(--ui-success); }
.ui-alert--warning { border-left-color: var(--ui-warning); background: var(--ui-warning-tint); }
.ui-alert--warning .ui-alert__title { color: var(--ui-warning); }
.ui-alert--danger  { border-left-color: var(--ui-danger);  background: var(--ui-danger-tint); }
.ui-alert--danger .ui-alert__title { color: var(--ui-danger); }
.ui-alert--info    { border-left-color: var(--ui-info);    background: var(--ui-info-tint); }
.ui-alert--info .ui-alert__title { color: var(--ui-info); }

/* ── 4.9 弹层 / 抽屉 ────────────────────────────────────────────────────── */
.ui-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ui-space-6);
  background: rgba(20, 22, 26, .42);
  animation: ui-fade var(--ui-motion-base);
}
.ui-modal {
  width: min(560px, 100%);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--ui-surface);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-lg);
  animation: ui-rise var(--ui-motion-slow);
}
.ui-modal--wide { width: min(960px, 100%); }
.ui-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4) var(--ui-space-5);
  border-bottom: 1px solid var(--ui-rule-soft);
}
.ui-modal__title { font-size: var(--ui-font-lg); font-weight: 650; }
.ui-modal__body { padding: var(--ui-space-5); overflow: auto; }
.ui-modal__foot {
  display: flex; justify-content: flex-end; gap: var(--ui-space-2);
  padding: var(--ui-space-4) var(--ui-space-5);
  border-top: 1px solid var(--ui-rule-soft);
  background: var(--ui-surface-2);
  border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
}
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-rise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

/* ── 4.10 Toast ─────────────────────────────────────────────────────────── */
.ui-toast-layer {
  position: fixed;
  top: var(--ui-space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  pointer-events: none;
}
.ui-toast {
  display: flex; align-items: center; gap: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-4);
  font-size: var(--ui-font-base);
  background: var(--ui-surface);
  border-radius: var(--ui-radius-sm);
  border-left: 3px solid var(--ui-accent);
  box-shadow: var(--ui-shadow-md);
  animation: ui-rise var(--ui-motion-base);
}
.ui-toast--success { border-left-color: var(--ui-success); }
.ui-toast--warning { border-left-color: var(--ui-warning); }
.ui-toast--danger  { border-left-color: var(--ui-danger); }

/* ── 4.11 尺寸切换分段控件 ──────────────────────────────────────────────── */
.ui-scale-switch {
  display: inline-flex;
  padding: 3px;
  background: var(--ui-surface-sunk);
  border-radius: var(--ui-radius-sm);
  gap: 2px;
}
.ui-scale-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: calc(var(--ui-control-sm) - 8px);
  min-height: var(--ui-tap-min);
  padding: 0 var(--ui-space-2);
  font-family: inherit;
  font-size: var(--ui-font-xs);
  font-weight: 600;
  color: var(--ui-muted);
  background: transparent;
  border: none;
  border-radius: var(--ui-radius-xs);
  cursor: pointer;
  transition: all var(--ui-motion-fast);
}
.ui-scale-switch__item:hover { color: var(--ui-ink); }
.ui-scale-switch__item.is-active {
  background: var(--ui-accent);
  color: var(--ui-accent-ink);
}

/* ── 4.11b 昼夜模式切换（图标分段） ───────────────────────────────────────
   为什么不是「滑块开关」：
     滑块开关只有一个旋钮，状态要靠「旋钮在左还是在右」来推断，
     在顶栏这种小尺寸下很容易读错（用户反馈：看不出现在是昼还是夜）。
     改成两段图标分段后，**当前模式一眼可见**，且和旁边的尺寸档位
     （小/中/大）形态完全一致，一眼看过去是同一套控件语言。
   用法：两个按钮各带一个图标，is-active 表示当前生效的那个。
   ─────────────────────────────────────────────────────────────────────── */
.ui-theme-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--ui-surface-sunk);
  border-radius: var(--ui-radius-sm);
  gap: 2px;
}
.ui-theme-toggle__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-1);
  min-width: 32px;
  height: calc(var(--ui-control-sm) - 8px);
  min-height: var(--ui-tap-min);
  padding: 0 var(--ui-space-2);
  font-family: inherit;
  font-size: var(--ui-font-xs);
  font-weight: 600;
  color: var(--ui-muted);
  background: transparent;
  border: none;
  border-radius: var(--ui-radius-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--ui-motion-fast);
}
.ui-theme-toggle__item:hover { color: var(--ui-ink); }
.ui-theme-toggle__item.is-active {
  background: var(--ui-accent);
  color: var(--ui-accent-ink);
}
.ui-theme-toggle__item .anticon { font-size: var(--ui-font-base); line-height: 1; }

/* ── 4.12 顶栏（墨绿实心，主色以大色块出场） ────────────────────────────── */
.ui-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--ui-space-5);
  height: calc(var(--ui-control-lg) + var(--ui-space-5));
  padding: 0 var(--ui-space-6);
  background: var(--ui-topbar-bg);
  color: var(--ui-topbar-ink);
  border-bottom: 1px solid var(--ui-accent-block-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ui-topbar__brand {
  display: inline-flex; align-items: center; gap: var(--ui-space-2);
  font-size: var(--ui-font-md); font-weight: 700; color: inherit;
}
.ui-topbar__nav { display: flex; gap: var(--ui-space-5); font-size: var(--ui-font-sm); }
.ui-topbar__nav a { color: var(--ui-topbar-ink-soft); }
.ui-topbar__nav a:hover { color: var(--ui-topbar-ink); text-decoration: none; }
.ui-topbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--ui-space-3); }
.ui-topbar .ui-scale-switch { background: var(--ui-topbar-switch-bg); }
.ui-topbar .ui-scale-switch__item { color: var(--ui-topbar-ink-soft); }
.ui-topbar .ui-scale-switch__item:hover { color: var(--ui-topbar-ink); }
.ui-topbar .ui-scale-switch__item.is-active {
  background: var(--ui-topbar-switch-active-bg);
  color: var(--ui-topbar-switch-active-ink);
}
.ui-topbar .ui-theme-toggle { background: var(--ui-topbar-switch-bg); }
.ui-topbar .ui-theme-toggle__item { color: var(--ui-topbar-ink-soft); }
.ui-topbar .ui-theme-toggle__item:hover { color: var(--ui-topbar-ink); }
.ui-topbar .ui-theme-toggle__item.is-active {
  background: var(--ui-topbar-switch-active-bg);
  color: var(--ui-topbar-switch-active-ink);
}
.ui-topbar .ui-btn--ghost { color: var(--ui-topbar-ink-soft); }
.ui-topbar .ui-btn--ghost:hover { background: var(--ui-topbar-hover-bg); color: var(--ui-topbar-ink); }

/* 纸面顶栏：需要克制时用这个变体 */
.ui-topbar--paper {
  background: var(--ui-paper);
  color: var(--ui-ink);
  border-bottom: 1px solid var(--ui-rule);
}
.ui-topbar--paper .ui-topbar__nav a { color: var(--ui-muted); }
.ui-topbar--paper .ui-topbar__nav a:hover { color: var(--ui-ink); }
.ui-topbar--paper .ui-scale-switch { background: var(--ui-surface-sunk); }
.ui-topbar--paper .ui-scale-switch__item { color: var(--ui-muted); }
.ui-topbar--paper .ui-scale-switch__item.is-active { background: var(--ui-accent); color: var(--ui-accent-ink); }
.ui-topbar--paper .ui-theme-toggle { background: var(--ui-surface-sunk); }
.ui-topbar--paper .ui-theme-toggle__item { color: var(--ui-muted); }
.ui-topbar--paper .ui-theme-toggle__item:hover { color: var(--ui-ink); }
.ui-topbar--paper .ui-theme-toggle__item.is-active { background: var(--ui-accent); color: var(--ui-accent-ink); }

.ui-crumbs { display: flex; align-items: center; gap: var(--ui-space-2); font-size: var(--ui-font-sm); color: var(--ui-faint); }
.ui-crumbs a { color: var(--ui-muted); }
.ui-crumbs__sep { color: var(--ui-rule-strong); }

/* ── 4.13 大色块区（页面主视觉） ────────────────────────────────────────── */
.ui-band {
  padding: var(--ui-space-12) var(--ui-space-6);
  background: var(--ui-accent-block);
  color: var(--ui-accent-block-ink);
}
.ui-band--deep { background: var(--ui-accent-deep); color: var(--ui-on-deep); }
.ui-band--deep .ui-band__text { color: var(--ui-on-deep-soft); }
.ui-band--deep .ui-band__rule { background: var(--ui-on-deep-line); }
.ui-band--bright { background: var(--ui-accent-block-soft); color: var(--ui-accent-block-soft-ink); }
.ui-band__title {
  font-size: var(--ui-font-2xl);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.ui-band__text { margin-top: var(--ui-space-3); font-size: var(--ui-font-md); opacity: .82; max-width: 40em; }
.ui-band__rule { height: 3px; width: 56px; background: var(--ui-accent-bright); border-radius: var(--ui-radius-pill); margin-bottom: var(--ui-space-4); }

/* ── 4.14 定义列表 ──────────────────────────────────────────────────────── */
.ui-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--ui-space-2) var(--ui-space-5); margin: 0; }
.ui-dl dt { color: var(--ui-muted); font-size: var(--ui-font-sm); }
.ui-dl dd { margin: 0; color: var(--ui-ink); }


/* ══ 5 · 工具类 ═══════════════════════════════════════════════════════════ */

.ui-hide        { display: none !important; }
.ui-mt-2 { margin-top: var(--ui-space-2) !important; }
.ui-mt-4 { margin-top: var(--ui-space-4) !important; }
.ui-mt-6 { margin-top: var(--ui-space-6) !important; }
.ui-mb-2 { margin-bottom: var(--ui-space-2) !important; }
.ui-mb-4 { margin-bottom: var(--ui-space-4) !important; }
.ui-mb-6 { margin-bottom: var(--ui-space-6) !important; }
.ui-text-center { text-align: center; }
.ui-text-right  { text-align: right; }
.ui-flex-1 { flex: 1 1 auto; min-width: 0; }


/* ══ 6 · 无障碍与打印 ═════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { background: #fff; }
  .ui-topbar, .ui-filter, .ui-btn, .ui-pagination, .ui-toast-layer { display: none !important; }
  .ui-card, .ui-table-wrap { border-color: #ccc; }
  .ui-table thead th { position: static; }
}

@media (max-width: 760px) {
  .ui-page { padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-10); }
  .ui-topbar { padding: 0 var(--ui-space-4); }
  .ui-filter .ui-field { width: 100%; }
  .ui-filter__actions { margin-left: 0; width: 100%; }
}