/* ==========================================================================
   木里 ERP · 统一底层（tokens.css）  2026-09-24 老板定稿 · 第二版（圆润）
   --------------------------------------------------------------------------
   来源：老板 09-23 选定的「门店工具·高对比」（扫码作业台 ScanStation.vue +
   门户效期·留样页 label.html），加上采购需求池新版已在用的紧急三档色。
   规矩：
   · 全站只认这里的变量；页面里不再硬写颜色 / 阴影 / 圆角 / 字号。
   · 只有浅色一套（ERP 本身只有浅色）。
   · 不用渐变，不用装饰阴影；阴影只给「浮起来的东西」用，共 3 档。
   · 第二版（09-24 老板意见「太方正、太硬核、死板」）：只改形状和质感，颜色 / 字号 /
     间距一个不动。往 Google Material 3 靠：小东西胶囊形，按钮明显圆角，卡片大圆角、
     少边线、靠浅底色块和很淡的阴影分区；选中 = 浅色色块 + 深色字，不用粗描边。
   · 基础类统一 ui- 前缀（避开手机端现有 mu-* 与 antd 的 ant-*）。
   ========================================================================== */

:root {
  /* ---------- 品牌 ---------- */
  --brand:          #4e7fff;  /* 沿用现主色：选中竖条、焦点框、图标点缀、图表主色 */
  --brand-strong:   #2f5bd3;  /* 主按钮底、链接字。#4e7fff 上白字对比只有 3.6，
                                 在店里强光下发虚；#2f5bd3 是扫码台已认可的「出库蓝」，
                                 同色相加深到 5.9，不新增颜色 */
  --brand-press:    #2850bd;  /* 主按钮按下 / 悬停 */
  --brand-soft:     #f2f5fd;  /* 选中行 / 选中胶囊的淡底（扫码台出库淡底） */
  --brand-line:     #c9d6f5;  /* 选中态描边（第二版基本不用描边了，留着兼容） */
  --brand-tonal:    #e3eafc;  /* 第二版新增：浅蓝色块（选中的胶囊、浅色按钮的底）。
                                 同一个品牌蓝调浅，不是新颜色；淡蓝底 #f2f5fd 在白卡上
                                 几乎看不出来，做「色块」不够用 */

  /* ---------- 中性色（带一点品牌蓝的灰，全部取自高对比方案） ---------- */
  --ink:            #1d2433;  /* 正文、标题、数字（替掉 #0a0e27 #1a1f2e #1b1d21 三种墨色） */
  --ink-2:          #5b6475;  /* 次要文字：规格、说明 */
  --ink-3:          #8b93a3;  /* 弱文字：时间、单号、占位（替掉 #9aa3b5 #9ca3af 两套灰） */
  --ink-4:          #b3b9c4;  /* 禁用字、空状态插图线 */
  --line-strong:    #c5cbd5;  /* 按钮 / 输入框描边 */
  --line:           #d9dde3;  /* 卡片、面板、顶栏的边线 */
  --line-soft:      #eceff3;  /* 列表行之间的分隔线 */
  --bg-sunken:      #f3f5f8;  /* 表头底、输入框底、分段按钮底 */
  --bg-page:        #f4f5f7;  /* 页面底 */
  --bg-hover:       #f7f8fa;  /* 行悬停 */
  --surface:        #ffffff;  /* 卡片、抽屉、弹层、弹窗 */
  --on-fill:        #ffffff;  /* 深色块上的字（主按钮、角标、识别色块） */
  --mask:           rgba(29, 36, 51, .42); /* 底部弹层 / 弹窗后面的遮罩 */

  /* ---------- 语义色：好 / 提醒 / 危险 / 信息（字色 + 淡底） ---------- */
  --ok:             #1f8a55;  --ok-soft:     #eef7f2;  /* 已完成、已到货、入库 */
  --warn:           #c26d00;  --warn-soft:   #fff4e2;  /* 提醒字色（橙底上的字、超时未到） */
  --warn-fill:      #f08c00;                           /* 提醒色块 / 竖条 */
  --danger:         #d1383d;  --danger-soft: #fdeeee;  /* 危险字色、删除、驳回 */
  --danger-fill:    #e5484d;                           /* 危险色块 / 竖条 / 数字角标 */
  --danger-line:    #f0b9bb;                           /* 危险按钮描边 */
  --info:           #2f5bd3;  --info-soft:   #f2f5fd;  /* 一般提示（与品牌深蓝同一个色） */

  /* ---------- 需求池紧急三档（沿用现值，一个都不改） ---------- */
  --urg-red:        #ef4444;  /* ≤5 天：该买了 */
  --urg-orange:     #f59e0b;  /* 6–7 天：今天该下单 */
  --urg-yellow:     #eab308;  /* 8–10 天：可以再等等 */
  --urg-none:       #c7cbd4;  /* 算不出 / 够用 */
  --urg-orange-text:#e08a00;  /* 橙档写成字时用 */
  --urg-yellow-text:#ca8a04;  /* 黄档写成字时用 */

  /* ---------- 功能识别色（扫码台四张大卡，只用于「这是哪类活」的色条和色块） ---------- */
  --fn-out:         #2f5bd3;  /* 出库 */
  --fn-in:          #1f8a55;  /* 入库 */
  --fn-label:       #6d4ad6;  /* 效期·留样 / 标签 */
  --fn-move:        #e0b000;  /* 调拨（黄底上的字用 --ink） */

  /* ---------- 门店利润语义色（门店利润页两端用；公共件第 2 轮从页面收进来，颜色值一个没改） ---------- */
  --profit:         #0d9488;  --profit-soft:  #99e2d9;  /* 利润（算进利润的那一块） */
  --deposit:        #6d28d9;  --deposit-line: #7c3aed;  --deposit-soft: #f5f3ff;  /* 押金、保证金（单独列出来，不算花销） */
  --buy:            #6d4c41;  --buy-line:     #8d6e63;  --buy-ink:      #5d4037;  --buy-soft: #efebe9;  /* 买货花的钱（变成库存，不算进利润） */

  /* ---------- 字体 ---------- */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  /* 字号阶梯：7 档（现状 50 种） */
  --fs-12: 12px;  /* 辅助：时间、单号、表头、角标、「谁报的」 */
  --fs-13: 13px;  /* 次要：规格说明、小按钮、标签文字、表格次行 */
  --fs-14: 14px;  /* 正文：表格正文、按钮、输入框、菜单 */
  --fs-16: 16px;  /* 列表行商品名、分组标题、抽屉 / 弹层标题 */
  --fs-18: 18px;  /* 卡片大标题、弹窗标题、手机页标题 */
  --fs-22: 22px;  /* 首页数字卡的数（营业额 / 成本 / 利润） */
  --fs-28: 28px;  /* 电脑页大标题、首页主数字 */

  /* 字重：3 档（苹果中文字体最多到半粗，再粗也显示成半粗） */
  --fw-regular: 400;
  --fw-strong:  600;  /* 按钮、表头、标签、次级标题 */
  --fw-heavy:   700;  /* 商品名、数字、功能名、标题 */

  /* 行高：3 档 */
  --lh-tight:  1.25;  /* 数字、标题 */
  --lh-normal: 1.45;  /* 正文、列表 */
  --lh-loose:  1.65;  /* 大段说明 */

  /* ---------- 圆角：6 档 + 胶囊（第二版：整体放大，看着圆润） ---------- */
  --r-xs:   6px;   /* 很小的东西：图例色块、复选框、表格里的小色条 */
  --r-sm:   8px;   /* 小色块：行内数字块、下拉里的选项（标签和角标改用胶囊） */
  --r-md:   12px;  /* 按钮、输入框、提醒条、统计小色块 */
  --r-lg:   16px;  /* 卡片、面板、分组块 */
  --r-xl:   24px;  /* 底部弹层顶上两个角 */
  --r-2xl:  28px;  /* 居中弹窗 */
  --r-full: 999px; /* 胶囊：标签、角标、切店、筛选、小按钮、搜索框、分段切换 */

  /* ---------- 阴影：3 档（第二版：更柔更淡，范围放大、颜色变浅） ---------- */
  --shadow-1: 0 1px 2px rgba(29, 36, 51, .04), 0 2px 8px rgba(29, 36, 51, .04);   /* 卡片：只防白贴白，几乎看不见 */
  --shadow-2: 0 4px 12px rgba(29, 36, 51, .06), 0 12px 32px rgba(29, 36, 51, .08); /* 浮层：右侧抽屉、下拉、底部弹层 */
  --shadow-3: 0 8px 24px rgba(29, 36, 51, .08), 0 24px 64px rgba(29, 36, 51, .14); /* 居中弹窗（最高一层） */
  --focus-ring: 0 0 0 3px rgba(78, 127, 255, .28);                                /* 键盘焦点，不算阴影档 */

  /* ---------- 间距：4px 栅格 ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --gutter: 16px;          /* 手机左右留白 */
  --gutter-desk: 24px;     /* 电脑内容区左右留白(窄电脑 768–1023 收成 12,见文件末尾) */
  --pad-card: 16px;        /* 电脑白卡里面的留白(ui-card 头和身、工作台顶上那一块;窄电脑收成 12) */

  /* ---------- 图标：2 档 ---------- */
  --icon-sm: 16px;  /* 文字旁、按钮里、列表行、标签 */
  --icon-md: 20px;  /* 菜单、首页快捷入口、工具条、顶栏 */

  /* ---------- 尺寸 ---------- */
  --h-control: 32px;        /* 电脑按钮 / 输入框高 */
  --h-control-touch: 40px;  /* 手机按钮高（手指点得准） */
  --h-row: 52px;            /* 列表行最小高 */
  --w-drawer: clamp(300px, 34vw, 390px); /* 电脑右侧抽屉宽（沿用采购需求池新版） */
  --w-side: 80px;           /* 电脑左边导航轨宽（MULEE-370 老板选「Google 导航轨」，原来 180 的侧栏换掉了） */
  --w-side-mini: 56px;      /* 导航轨收起：只留图标 */
  --h-header: 56px;         /* 电脑顶栏高（只留一个值，不再 49/56 打架） */
  --h-tabs: 44px;           /* 电脑标签栏高 */
  --bp: 768px;              /* 手机 / 电脑唯一分界（写在这里备查，媒体查询里照抄这个数） */

  /* ---------- 层级 ---------- */
  --z-sticky:  10;    /* 吸顶的表头、工具条 */
  --z-header:  100;   /* 顶栏、侧栏 */
  --z-drawer:  990;   /* 右侧抽屉（不遮罩，低于弹窗） */
  --z-sheet:   1000;  /* 底部弹层 + 遮罩 */
  --z-modal:   1000;  /* 居中弹窗 + 遮罩（与 antd 弹窗同层） */
  --z-page-form: 1002; /* 手机整页填单（新增 / 改单那一整页）：要盖住打开它时还开着的底部弹层、弹窗和请购小确认窗（1001），低于 antd 轻提示（1010） */
  --z-popover: 1050;  /* 下拉、气泡（与 antd 下拉同层，能盖住抽屉和弹窗） */
  --z-toast:   1100;  /* 顶部轻提示 */
  --z-page-slide: 3001; /* 手机换页正在滑的那一页（MULEE-516）：只在手机外框里比，压住外框顶栏和别的页面自己的弹层（页面里写死的最高到 3000） */

  /* ---------- 动效（MULEE-424 全站动效统一）----------
     · 只动 opacity 和 transform;时长只在这里定义,页面里不许再写秒数。
     · --dur:换页淡入、悬停、选中这类小变化;--dur-pop:底部弹层 / 抽屉 / 弹窗的进出场。
     · --dur-slide / --ease-slide:手机换页左右滑(MULEE-516,老板 09-30 看了能动的演示后定):往里点新页从右边滑进来,
       返回时这一页往右滑走;缓动跟那个演示同一条。电脑换页照旧淡入(--dur),不用这两个。
     · 系统开了「减少动态效果」时三档都归零(见文件末尾),占位条流光也停。 */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: .18s;
  --dur-pop: .24s;
  --ease-slide: cubic-bezier(.2, .8, .2, 1);
  --dur-slide: .24s;
}

/* ==========================================================================
   基础类（少量，够拼出所有页面）· 第二版：圆润、色块分区、少边线
   ========================================================================== */

.ui-num { font-variant-numeric: tabular-nums; }

/* 图标：<span class="ui-icon"><svg …/></span>，颜色跟随文字 */
.ui-icon { display: inline-flex; width: var(--icon-sm); height: var(--icon-sm); flex: none;
  align-items: center; justify-content: center; line-height: 0; }
.ui-icon svg { width: 100%; height: 100%; }
.ui-icon--md { width: var(--icon-md); height: var(--icon-md); }

/* [报销照片 · 09-28] 「看这里」:点「去传照片」后,传照片那一格框一圈亮两秒(utils/attachmentFile.pointAtUpload 加上、自己去掉);
   写在卡片前面:本来是卡片的照旧用卡片自己的大圆角 */
.ui-attn { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--r-md); transition: outline-color var(--dur) var(--ease); }
/* 卡片：大圆角，不画边线，靠白卡落在浅灰页面上 + 很淡的阴影分出来 */
.ui-card { background: var(--surface); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.ui-card__head { display: flex; align-items: center; gap: var(--s-2); padding: var(--pad-card) var(--pad-card) var(--s-2);
  font-size: var(--fs-16); font-weight: var(--fw-heavy); color: var(--ink); line-height: var(--lh-tight); }
.ui-card__body { padding: var(--pad-card); }
/* 浅色分组块：卡片里再分一块时用浅底，不用框线 */
.ui-well { background: var(--bg-sunken); border-radius: var(--r-md); padding: var(--s-3); }

/* 分组标题：左侧圆头竖条 + 标题 + 右侧计数 */
.ui-section-title { display: flex; align-items: center; gap: var(--s-2); margin: 0;
  font-size: var(--fs-16); font-weight: var(--fw-heavy); color: var(--ink); line-height: var(--lh-tight); }
.ui-section-title::before { content: ""; width: 4px; height: 16px; border-radius: var(--r-full);
  background: var(--bar, var(--brand)); flex: none; }
.ui-section-title small { font-size: var(--fs-12); font-weight: var(--fw-regular); color: var(--ink-3); }

/* 列表行：状态用行首圆头竖色条（离边 4px，上下留空），不用整行涂色 */
.ui-row { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: var(--h-row);
  padding: var(--s-2) var(--s-4); background: var(--surface); border-bottom: 1px solid var(--line-soft);
  cursor: pointer; color: var(--ink); font-size: var(--fs-14); line-height: var(--lh-normal);
  transition: background var(--dur) var(--ease); }
.ui-row::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 4px;
  border-radius: var(--r-full); background: var(--bar, transparent); pointer-events: none; }
.ui-row:hover { background: var(--bg-hover); }
.ui-row.is-active { background: var(--brand-soft); }
.ui-row__main { flex: 1; min-width: 0; }
.ui-row__title { font-size: var(--fs-16); font-weight: var(--fw-heavy); line-height: var(--lh-tight);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row__meta { font-size: var(--fs-12); color: var(--ink-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row__side { text-align: right; flex: none; }

/* 标签（文字）与角标（数字）：一律胶囊 */
.ui-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px;
  border-radius: var(--r-full); font-size: var(--fs-12); font-weight: var(--fw-strong); line-height: 1;
  white-space: nowrap; color: var(--ink-2); background: var(--line-soft); }
.ui-tag .ui-icon { width: 1.1em; height: 1.1em; }  /* 标签里的图标跟字一样大 */
.ui-tag--ok     { color: var(--ok);     background: var(--ok-soft); }
.ui-tag--warn   { color: var(--warn);   background: var(--warn-soft); }
.ui-tag--danger { color: var(--danger); background: var(--danger-soft); }
.ui-tag--info   { color: var(--info);   background: var(--brand-tonal); }
.ui-tag--line   { color: var(--ink-2);  background: var(--bg-sunken); }  /* 第二版不描边：普通说明用最浅的灰底 */
.ui-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px;
  height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--danger-fill); color: var(--on-fill);
  font-size: var(--fs-12); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; line-height: 1; }
.ui-badge--soft { background: var(--line-soft); color: var(--ink-2); }  /* 普通计数（不急的数） */
.ui-badge[hidden] { display: none; }  /* 上面写了 inline-flex，会盖掉 hidden；数字是 0 时整个藏起来 */
/* 入口角标（MULEE-525）：像手机桌面 App 右上角的红数字，压在入口的右上角（入口自己要 position: relative）；
   一圈白边把它和入口分开。它长在入口里面，点它就是点入口；鼠标停上去说一句有几个品要处理 */
.ui-badge--corner { position: absolute; top: -7px; right: -7px; z-index: 1; box-shadow: 0 0 0 2px var(--surface); }
.ui-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--dot, var(--urg-none));
  display: inline-block; flex: none; }

/* 按钮：主要（实色，一屏一个）/ 默认（浅灰色块，最常用）/ 浅色（浅蓝色块，次一级的正事）/ 文字 / 危险
   第二版：不再用描边当默认样式；圆角 12，小按钮是胶囊 */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-control); padding: 0 16px; border-radius: var(--r-md); border: 0;
  background: var(--line-soft); color: var(--ink); font: inherit; font-size: var(--fs-14);
  font-weight: var(--fw-strong); line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ui-btn:hover { background: var(--line); }
.ui-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-btn--primary { background: var(--brand-strong); color: var(--on-fill); box-shadow: var(--shadow-1); }
.ui-btn--primary:hover { background: var(--brand-press); }
.ui-btn--tonal { background: var(--brand-tonal); color: var(--brand-press); }
.ui-btn--tonal:hover { background: var(--brand-line); }
.ui-btn--text { background: transparent; color: var(--brand-strong); padding: 0 10px; }
.ui-btn--text:hover { background: var(--brand-soft); }
.ui-btn--danger { background: var(--danger-soft); color: var(--danger); }
.ui-btn--danger:hover { background: var(--danger-line); }
.ui-btn--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); } /* 少用：只在浅色块上还要再放一个按钮时 */
.ui-btn--sm { height: 28px; padding: 0 12px; font-size: var(--fs-13); border-radius: var(--r-full); }
.ui-btn--touch { height: var(--h-control-touch); padding: 0 20px; font-size: var(--fs-16); border-radius: var(--r-md); }
.ui-btn--pill { border-radius: var(--r-full); }
.ui-btn[disabled] { color: var(--ink-4); background: var(--bg-sunken); box-shadow: none; cursor: not-allowed; }

/* 输入框 / 搜索框：浅灰底、无边线，圆角 12；搜索框是胶囊。点进去才出蓝色焦点圈 */
.ui-input { display: block; width: 100%; height: var(--h-control); padding: 0 12px; border: 0; border-radius: var(--r-md);
  background: var(--bg-sunken); color: var(--ink); font: inherit; font-size: var(--fs-14); outline: none;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ui-input::placeholder { color: var(--ink-3); }
.ui-input:hover { background: var(--line-soft); }
.ui-input:focus { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--brand), var(--focus-ring); }
.ui-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-full);
  background: var(--bg-sunken); color: var(--ink-3); font-size: var(--fs-14); min-width: 0; }
.ui-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ink); outline: none; }
.ui-search input::placeholder { color: var(--ink-3); }
.ui-search:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--brand), var(--focus-ring); }

/* 分段切换（单项 / 整单、手机版 / 电脑版）：胶囊槽 + 选中那段浮起一块白 */
.ui-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-full); background: var(--line-soft); border: 0; }
.ui-seg > button { height: 28px; padding: 0 14px; border: 0; border-radius: var(--r-full); background: transparent;
  font: inherit; font-size: var(--fs-13); font-weight: var(--fw-strong); color: var(--ink-2); cursor: pointer;
  white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ui-seg > button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* 胶囊（切门店）：没选中 = 浅灰色块（跟默认按钮同一个灰）；选中 = 浅蓝色块 + 深蓝字，不加粗框 */
.ui-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: var(--r-full); border: 0; background: var(--line-soft); color: var(--ink-2);
  font: inherit; font-size: var(--fs-14); font-weight: var(--fw-strong); cursor: pointer; white-space: nowrap; flex: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ui-chip:hover { background: var(--line); }
.ui-chip.is-on { background: var(--brand-tonal); color: var(--brand-press); }
.ui-chip b { font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.ui-chip .ui-badge { height: 20px; min-width: 20px; }
.ui-chip .ui-badge--soft { background: var(--surface); color: var(--ink-2); }  /* 灰胶囊里的普通计数用白底小胶囊，不跟底色糊在一起 */
.ui-chip:has(.ui-badge:last-child) { padding-right: 7px; }  /* 右边有角标时，右侧留白收一点，角标贴着胶囊圆头 */

/* 胶囊筛选按钮（只看急的 / 被催的 / 在路上）：选中 = 浅蓝色块 + 深蓝字 + 前面一个勾 */
.ui-filter { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  border-radius: var(--r-full); border: 0; background: var(--line-soft); color: var(--ink-2);
  font: inherit; font-size: var(--fs-13); font-weight: var(--fw-strong); cursor: pointer; white-space: nowrap; flex: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ui-filter:hover { background: var(--line); }
.ui-filter .ui-filter__ck { display: none; }
.ui-filter.is-on { background: var(--brand-tonal); color: var(--brand-press); padding-left: 10px; }
.ui-filter.is-on .ui-filter__ck { display: inline-flex; }

/* 统计小色块：一个数一块浅色圆角，不用带竖分隔线的方格表 */
.ui-stats { display: grid; grid-template-columns: repeat(var(--cols, 4), auto); gap: var(--s-2); }  /* 按字多少分宽，窄屏也尽量不折行 */
.ui-stat { min-width: 0; padding: 10px 8px 10px 10px; border-radius: var(--r-md); background: var(--bg-sunken); }
.ui-stat b { display: block; font-size: var(--fs-18); font-weight: var(--fw-heavy); line-height: var(--lh-tight);
  color: var(--ink); font-variant-numeric: tabular-nums; }
.ui-stat b small { font-size: var(--fs-12); font-weight: var(--fw-strong); margin-left: 1px; }
.ui-stat span { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--ink-2); line-height: 1.3;
  text-wrap: balance; }  /* 窄屏放不下就折成两行，不截断 */
.ui-stat--danger { background: var(--danger-soft); }
.ui-stat--danger b { color: var(--urg-red); }
.ui-stat--warn { background: var(--warn-soft); }
.ui-stat--warn b { color: var(--warn); }
.ui-stat--info { background: var(--brand-soft); }
.ui-stat--info b { color: var(--brand-strong); }
/* 一行式统计块:数在前、名在后、胶囊形,一块一行字,放不下整块换行,不从中间断(电脑采购需求池顶上那一排)。
   原来写在采购需求池页面里,挪到统一底层,窄电脑小一号时跟统计块一起变(见文件末尾) */
.ui-stats--row { display: flex; flex-wrap: wrap; }
.ui-stats--row .ui-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border-radius: var(--r-full); }
.ui-stats--row .ui-stat b { display: inline; }
.ui-stats--row .ui-stat span { display: inline; margin: 0; font-size: var(--fs-13); white-space: nowrap; }

/* 提醒条：浅色底圆角条，不加边框；只有一行短话时可以用胶囊 */
.ui-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--brand-soft); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-normal); }
.ui-note > .ui-icon { margin-top: 2px; color: var(--info); }
.ui-note b { color: var(--ink); font-weight: var(--fw-heavy); }
.ui-note--warn   { background: var(--warn-soft); color: var(--warn); }
.ui-note--warn > .ui-icon { color: var(--warn); }
.ui-note--warn b { color: var(--warn); }
.ui-note--danger { background: var(--danger-soft); color: var(--danger); }
.ui-note--danger > .ui-icon { color: var(--danger); }
.ui-note--danger b { color: var(--danger); }
.ui-note--ok     { background: var(--ok-soft); color: var(--ok); }
.ui-note--ok > .ui-icon { color: var(--ok); }
.ui-note--pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--r-full); }
.ui-note--pill > .ui-icon { margin-top: 0; }
/* 顶上居中浮着的一句话,配 ui-note ui-note--pill 用(ERP、木里同一个):折叠屏开合时单子还开着,
   「单子存好或关掉后自动换成电脑版」;压在弹窗和整页填单上面(跟顶部轻提示同一层) */
.ui-endbar { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast); max-width: calc(100vw - 2 * var(--gutter)); box-shadow: var(--shadow-2); font-weight: var(--fw-strong); }
/* 放到手机顶栏下面(ERP 用):手机填单页的标题在顶栏正中间,浮在顶栏里会把「新增其它出库」整个盖住。
   手机顶栏最高 52px(填单页外框、手机顶栏;列表、需求池的顶栏 44～48),往下再空一格 */
.ui-endbar--under { top: calc(52px + var(--s-2) + env(safe-area-inset-top, 0px)); }

/* 工具条：一行放 筛选 / 切换 / 次要按钮；主要按钮靠右。第二版不画底线，靠留白分开 */
.ui-toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); background: var(--surface); border-bottom: 0; }
.ui-toolbar__spacer { flex: 1; }

/* 遮罩（底部弹层、居中弹窗共用） */
.ui-mask { position: fixed; inset: 0; background: var(--mask); z-index: var(--z-sheet); }

/* 底部弹层（手机详情）：顶上两个大圆角 24 */
.ui-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet); max-height: 82vh;
  display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-2); overflow: hidden; }
.ui-sheet__grip { width: 36px; height: 4px; border-radius: var(--r-full); background: var(--line-strong); margin: 10px auto 2px; flex: none; }

/* 右侧抽屉（电脑详情；不遮罩，列表还能继续点）：左侧两个角 16 圆，不画边线，靠阴影浮起；从标签栏下面开始 */
.ui-drawer { position: fixed; top: calc(var(--h-header) + var(--h-tabs)); right: 0; bottom: 0; width: var(--w-drawer);
  z-index: var(--z-drawer); display: flex; flex-direction: column; background: var(--surface);
  border-left: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; }

/* 抽屉 / 弹层 / 弹窗 共用的头、身、脚：第二版不画分隔线，靠留白 */
.ui-panel__head { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-2);
  border-bottom: 0; }
.ui-panel__title { flex: 1; min-width: 0; font-size: var(--fs-16); font-weight: var(--fw-heavy);
  color: var(--ink); line-height: var(--lh-tight); }
.ui-panel__body { flex: 1; overflow: auto; padding: var(--s-2) var(--s-5) var(--s-4); }
.ui-panel__foot { display: flex; gap: var(--s-2); justify-content: flex-end; padding: var(--s-3) var(--s-5) var(--s-4);
  border-top: 0; }

/* 居中弹窗（只用于「要你确认一件事」，不拿来看详情）：圆角 28 */
.ui-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: var(--z-modal);
  width: min(420px, calc(100vw - 32px)); background: var(--surface); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-3); padding: var(--s-2) var(--s-1); }
.ui-modal .ui-panel__title { font-size: var(--fs-18); }

/* 键值表（详情里用）：左边灰字名，右边墨色值 */
.ui-kv { display: grid; grid-template-columns: 5.5em 1fr; row-gap: var(--s-2); column-gap: var(--s-3);
  font-size: var(--fs-14); line-height: var(--lh-normal); }
.ui-kv dt { color: var(--ink-3); }
.ui-kv dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 占位条(等数据用,MULEE-424):页面第一次进来、一条数据都没有时,画几条灰条占位,
   数据到了换成内容;已有数据只是刷新时不用它。流光是 ::after 一条淡光从左往右扫,
   只用 transform(老手机也不卡);这是全站唯一允许超过 .3s 的动画——它是等待循环,不是过渡。 */
.ui-skeleton { padding: var(--s-4); }
.ui-skeleton__bar { position: relative; overflow: hidden; height: 14px; border-radius: var(--r-full);
  background: var(--line-soft); }
.ui-skeleton__bar + .ui-skeleton__bar { margin-top: var(--s-3); }
.ui-skeleton__bar:nth-child(3n + 2) { width: 92%; }
.ui-skeleton__bar:nth-child(3n) { width: 76%; }
.ui-skeleton__bar::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 80%);
  transform: translateX(-100%); animation: ui-skeleton-flow 1.6s var(--ease) infinite; }
@keyframes ui-skeleton-flow { to { transform: translateX(100%); } }

/* 进场动画帧(MULEE-424):全站只有这三个,各处直接用,不再各写一份。只动 opacity 和 transform;只做进场、不做离场
   (免得多等一倍时间)。时长缓动用上面的档:换页换视图 --dur,弹层弹窗 --dur-pop;减少动态效果时自动归零。
   · ui-fade-in 轻轻淡入:换页 <transition name="ui-fade"> 包 router-view;v-if 出来的整屏(全屏选择器)根元素加
     class="ui-fade-in";遮罩、门户换视图在自己的规则里写 animation: ui-fade-in …
   · ui-rise-in 底部弹层的白卡淡入 + 滑上来一点;ui-pop-in 居中弹窗的白卡淡入 + 轻轻缩上来
     (用 translate(-50%, -50%) 居中的弹窗,缩放要连着位移一起写,不用这个) */
.ui-fade-in, .ui-fade-enter-active { animation: ui-fade-in var(--dur) var(--ease); }
@keyframes ui-fade-in { from { opacity: 0; } }
@keyframes ui-rise-in { from { opacity: 0; transform: translateY(48px); } }
@keyframes ui-pop-in { from { opacity: 0; transform: scale(.97); } }
/* 手机换页左右滑(MULEE-516):只有手机外框 MobileLayout 用,时长缓动用 --dur-slide / --ease-slide。只动 transform;
   往里点 ui-slide-in 新页从右边进来,返回 ui-slide-out 这一页往右出去 */
@keyframes ui-slide-in { from { transform: translateX(100%); } }
@keyframes ui-slide-out { to { transform: translateX(100%); } }

/* 「⋯」更多操作的下拉菜单(antd 下拉挂在页面最外层,组件自己的样式够不着,所以放这里):
   每一项图标 + 字;危险的(删除、作废)红字。第 1 批公共外框两端都用 */
.ui-menu .ant-dropdown-menu-item { display: flex; align-items: center; gap: var(--s-2); min-width: 128px; }
.ui-menu .ant-dropdown-menu-item.is-danger { color: var(--danger); }

/* ==========================================================================
   外框零件(09-27 老板定「顶栏统一」):顶栏 · 圆形图标按钮 · 顶栏胶囊按钮 · 头像名字 · 下拉 ·
   电脑页签条 · 手机页签行 · 电脑导航轨和二级面板。
   ERP 电脑、ERP 手机、木里电脑、木里手机、门户五处只引用这里的类,各自不再写一套外框样式;
   页面本身还是各写各的(电脑是电脑、手机是手机)。只用上面已有的变量:没有新颜色、没有渐变、没有装饰阴影。
   图标一律是 .ui-icon:ERP 的 <a-icon> 加 class="ui-icon",门户的内联 svg 外面包一层 <span class="ui-icon">。
   ========================================================================== */

/* ---- 顶栏:电脑 56 高(--h-header),手机 52 高;白底不画边线,靠下面的页签行分开 ---- */
.ui-topbar { height: var(--h-header); display: flex; align-items: center; gap: var(--s-2); min-width: 0;
  padding: 0 var(--s-4) 0 var(--s-5); background: var(--surface); }
.ui-topbar--m { height: 52px; padding: 0 var(--gutter); }
.ui-topbar--line { position: relative; z-index: 1; box-shadow: 0 1px 0 var(--line-soft); }  /* 门户没有页签行:顶栏下面留一条细线 */
/* 标志:五处同一张 Mulee 横版字标图片,永远在最左 */
.ui-topbar__logo { display: block; height: 26px; width: auto; flex: none; }
.ui-topbar--m .ui-topbar__logo { height: 24px; }
/* 标志右边写系统名(ERP「进销存」、木里「老板管理台」/「员工运营」),12 号浅灰,两端同一条规矩;门户不写。
   不缩不省略;往下挪一点,跟字标里的「Mulee」、后面的「财务」站在同一条底线上 */
.ui-topbar__sys { flex: none; padding-top: 7px; font-size: var(--fs-12); line-height: 1; color: var(--ink-3); white-space: nowrap; }
/* 电脑再接「大类 / 页名」(大类 14 号浅灰、页名 18 号粗),前面一条细竖线跟系统名隔开。
   挤的时候(折叠屏展开 ~800):先缩搜索框(缩到 96 为止);顶栏窄(is-narrow)时不写大类(左边导航轨已经亮着它);
   还放不下才把页名省略成「…」。按钮一颗不少 */
.ui-topbar__crumb { flex: 0 .01 auto; min-width: 0; max-width: 18em; display: flex; align-items: baseline; gap: 6px;
  white-space: nowrap; overflow: hidden; }
.ui-topbar__crumb::before { content: ""; flex: none; align-self: center; width: 1px; height: 16px; margin: 0 6px 0 4px;
  background: var(--line); }
.ui-topbar__crumb small { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); font-size: var(--fs-14); }
.ui-topbar__crumb i { flex: none; font-style: normal; color: var(--ink-4); }
.ui-topbar__crumb b { flex: 0 .01 auto; min-width: 0; max-width: 14em; overflow: hidden; text-overflow: ellipsis; color: var(--ink);
  font-size: var(--fs-18); font-weight: var(--fw-heavy); }
.ui-topbar.is-narrow .ui-topbar__crumb small, .ui-topbar.is-narrow .ui-topbar__crumb i { display: none; }
.ui-topbar__sp { flex: 1; min-width: var(--s-2); }
.ui-topbar__search { position: relative; flex: 0 1 340px; min-width: 96px; }
.ui-topbar__search .ui-search { height: 40px; }
.ui-topbar__search .ui-search > .ui-icon { color: var(--ink-3); width: var(--icon-md); height: var(--icon-md); }
/* 右边一组,从左到右永远是:(ERP 电脑)铃铛 · 切端 · 门户 · ⇄ 切系统 ·(电脑)头像名字;哪一处没有就空着,顺序不变 */
.ui-topbar__acts { flex: none; display: flex; align-items: center; gap: var(--s-2); }
.ui-topbar--m .ui-topbar__acts { gap: 4px; }
/* 顶栏窄(折叠屏展开 ~800,由页面量顶栏宽后挂 is-narrow):名字后面的门店整个不画(大类见上面),按钮一颗不少 */
.ui-topbar.is-narrow .ui-who__scope { display: none; }
/* 手机、电脑同一个页面(门户选系统页):窄于 768 就按手机顶栏的尺寸(52 高、字标 24、按钮间距 4),宽了按电脑的 */
@media (max-width: 767.98px) {
  .ui-topbar--fit { height: 52px; padding: 0 var(--gutter); }
  .ui-topbar--fit .ui-topbar__logo { height: 24px; }
  .ui-topbar--fit .ui-topbar__acts { gap: 4px; }
}

/* ---- 圆形图标按钮:铃铛、切端、手机上的门户、页签条的「⋯」、面板的收回 ---- */
.ui-ib { position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur) var(--ease); }
.ui-ib .ui-icon { width: var(--icon-md); height: var(--icon-md); }
.ui-ib:hover { background: var(--line-soft); color: var(--ink); }
.ui-ib:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-ib.is-on { background: var(--brand-tonal); color: var(--brand-press); }
.ui-ib--m { width: 36px; height: 36px; }
.ui-ib--sm { width: 32px; height: 32px; }
.ui-ib--sm .ui-icon { width: var(--icon-sm); height: var(--icon-sm); }

/* ---- 顶栏 / 页签条上的胶囊按钮:灰 = 门户、刷新本页、退出;浅蓝 = ⇄ 切系统(顶栏右边唯一一颗浅蓝的) ---- */
.ui-bar-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0;
  border-radius: var(--r-full); background: var(--line-soft); color: var(--ink); font: inherit; font-size: var(--fs-13);
  font-weight: var(--fw-strong); line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background var(--dur) var(--ease); }
.ui-bar-btn .ui-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--ink-2); }
.ui-bar-btn:hover { background: var(--line); }
.ui-bar-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-bar-btn--switch { background: var(--brand-tonal); color: var(--brand-press); }
.ui-bar-btn--switch .ui-icon { color: inherit; }
.ui-bar-btn--switch:hover { background: var(--brand-line); }

/* ---- 头像名字(电脑顶栏最右):实心蓝圆头像 + 名字 + 门店 + ▾,点开下拉;门户只放头像 ---- */
.ui-who { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 6px; border: 0;
  border-radius: var(--r-full); background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-14);
  font-weight: var(--fw-strong); white-space: nowrap; cursor: pointer; }
.ui-who:hover { background: var(--line-soft); }
.ui-who.is-on { background: var(--brand-tonal); }
.ui-who__ava { flex: none; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--brand-strong); color: var(--on-fill);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-13); font-weight: var(--fw-heavy); }
.ui-who__scope { font-size: var(--fs-13); font-weight: var(--fw-regular); color: var(--ink-3); }
.ui-who__caret { width: 12px; height: 12px; color: var(--ink-3); }

/* ---- 会话倒计时(木里):平时不显示,最后 5 分钟才出一颗橙色小胶囊 ---- */
.ui-topbar__timer { display: none; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--r-full);
  background: var(--warn-soft); color: var(--warn); font-size: var(--fs-12); font-weight: var(--fw-strong); white-space: nowrap; }
.ui-topbar__timer.is-soon { display: inline-flex; }
/* 手机顶栏放不下:橙色提醒出来的那几分钟,先让出系统名的位置,提醒写「锁 · 4 分钟锁定」(「后」字收起);
   一动屏幕提醒收起,系统名回来。再窄连「锁定」也收,只写「锁 · 4 分钟」,不然最右边的 ERP 钮会被挤出屏幕:
   老板台多一颗切到电脑版(ui-topbar__end),窄于 380 就收;员工端窄于 340 才收(09-27 真 Chrome 量过:
   按钮全出时老板台要 380、员工端要 340 才放得下) */
.ui-topbar__timer small, .ui-topbar__timer b { font: inherit; }
.ui-topbar--m:has(.ui-topbar__timer.is-soon) .ui-topbar__sys { display: none; }
.ui-topbar--m .ui-topbar__timer small { display: none; }
@media (max-width: 379.98px) { .ui-topbar--m:has(.ui-topbar__end) .ui-topbar__timer b { display: none; } }
@media (max-width: 339.98px) { .ui-topbar--m .ui-topbar__timer b { display: none; } }

/* ---- 下拉(名字后面的菜单、顶栏搜索结果):白底大圆角浮层,每一项图标 + 字,危险的红字 ---- */
.ui-dd { position: absolute; z-index: var(--z-popover); min-width: 220px; padding: 6px; background: var(--surface);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); line-height: var(--lh-normal); }
.ui-dd__hd { padding: 10px 12px; margin-bottom: 2px; }
.ui-dd__hd b { display: block; font-size: var(--fs-14); font-weight: var(--fw-heavy); color: var(--ink); }
.ui-dd__hd span { font-size: var(--fs-12); color: var(--ink-3); }
.ui-dd__cap { padding: 8px 12px 4px; font-size: var(--fs-12); color: var(--ink-3); }
.ui-dd__it { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: var(--r-md);
  color: var(--ink); font-size: var(--fs-14); white-space: nowrap; cursor: pointer; }
.ui-dd__it:hover { background: var(--line-soft); }
.ui-dd__it > .ui-icon { color: var(--ink-2); }
.ui-dd__it.is-danger, .ui-dd__it.is-danger > .ui-icon { color: var(--danger); }
.ui-dd__g { margin-left: auto; padding-left: var(--s-3); font-size: var(--fs-12); color: var(--ink-3); }
.ui-dd__sep { height: 1px; margin: 4px 8px; background: var(--line-soft); }
.ui-dd__empty { padding: 18px 12px; text-align: center; color: var(--ink-3); font-size: var(--fs-13); }

/* ---- 电脑页签条:44 高(--h-tabs),胶囊页签;第一个(首页 / 看板)关不掉;右边「刷新本页」+「⋯」 ---- */
.ui-tabbar { height: var(--h-tabs); display: flex; align-items: center; gap: var(--s-2); min-width: 0;
  padding: 0 var(--s-4) 0 var(--s-2); background: var(--surface); }
.ui-tabbar__list { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ui-tabbar__list::-webkit-scrollbar { display: none; }
.ui-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border: 0;
  border-radius: var(--r-full); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-13);
  font-weight: var(--fw-strong); white-space: nowrap; cursor: pointer; user-select: none; }
.ui-tab:hover { background: var(--line-soft); color: var(--ink); }
.ui-tab.is-on { background: var(--brand-tonal); color: var(--brand-press); }
.ui-tab--fixed { padding-right: 12px; }
.ui-tab__t { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.ui-tab__x { width: 20px; height: 20px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center;
  color: inherit; opacity: .55; }
.ui-tab__x .ui-icon { width: 12px; height: 12px; }
.ui-tab__x:hover { opacity: 1; background: var(--line); }
.ui-tab:not(.is-on):not(:hover) .ui-tab__x { visibility: hidden; }   /* 当前页的 × 一直在,别的鼠标放上去才出 */
.ui-tabbar__act { flex: none; display: flex; align-items: center; gap: 4px; }

/* ---- 手机页签行:42 高,下划线页签,固定的分类不能关;两个系统同一行样子 ---- */
.ui-mtabs { display: flex; align-items: center; gap: 20px; padding: 0 var(--gutter); background: var(--surface);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--line-soft); }
.ui-mtabs::-webkit-scrollbar { display: none; }
.ui-mtab { flex: none; position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 11px 0 12px;
  font-size: var(--fs-14); font-weight: var(--fw-strong); line-height: var(--lh-tight); color: var(--ink-3);
  white-space: nowrap; cursor: pointer; }
.ui-mtab.is-on { color: var(--ink); font-weight: var(--fw-heavy); }
.ui-mtab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: var(--r-full);
  background: var(--brand-strong); }
.ui-mtab__dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--danger-fill); }
@media (max-width: 380px) { .ui-mtabs { gap: 14px; } .ui-mtab { font-size: var(--fs-13); } }  /* 360 的手机:7 个页签一排放下;390 照常 14 号、间距 20 */

/* ---- 电脑左边导航轨:从顶栏下面开始(top = --h-header),80 宽;图标放在 56×32 的胶囊里,下面两个字 ---- */
.ui-rail { position: fixed; z-index: var(--z-header); top: var(--h-header); left: 0; bottom: 0; width: var(--w-side);
  display: flex; flex-direction: column; align-items: center; padding: var(--s-2) 0 var(--s-3); background: var(--surface); }
.ui-rail__list { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px;
  overflow-y: auto; scrollbar-width: none; }
.ui-rail__list::-webkit-scrollbar { display: none; }
.ui-rail__it { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0 4px;
  border: 0; background: none; color: var(--ink-2); font: inherit; font-size: var(--fs-12); font-weight: var(--fw-strong);
  line-height: var(--lh-tight); cursor: pointer; }
.ui-rail__pill { position: relative; width: 56px; height: 32px; border-radius: var(--r-full); display: flex; align-items: center;
  justify-content: center; color: var(--ink-2); transition: background var(--dur) var(--ease); }
.ui-rail__pill .ui-icon { width: var(--icon-md); height: var(--icon-md); }
.ui-rail__it:hover .ui-rail__pill { background: var(--line-soft); }
.ui-rail__it.is-open .ui-rail__pill { background: var(--line-soft); color: var(--ink); }   /* 二级面板正开着的那一类 */
.ui-rail__it.is-on { color: var(--ink); font-weight: var(--fw-heavy); }
.ui-rail__it.is-on .ui-rail__pill { background: var(--brand-tonal); color: var(--brand-press); }
.ui-rail__it:focus-visible { outline: none; }
.ui-rail__it:focus-visible .ui-rail__pill { box-shadow: var(--focus-ring); }
.ui-rail__badge { position: absolute; top: -4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full);
  background: var(--danger-fill); color: var(--on-fill); font-size: var(--fs-12); font-weight: var(--fw-heavy); line-height: 18px; text-align: center; }
.ui-rail__foot { flex: none; margin-top: var(--s-2); }
/* 点导航轨弹出的二级面板:276 宽、圆角 16,从顶栏下面开始;按小组排,每项图标 + 名字(ERP 顶上带搜索,木里不带) */
.ui-rail-panel { position: fixed; z-index: var(--z-popover); left: calc(var(--w-side) + 4px); top: calc(var(--h-header) + 4px);
  width: 276px; max-height: calc(100vh - var(--h-header) - 16px); display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.ui-rail-panel__hd { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 10px 8px 20px;
  font-size: var(--fs-16); font-weight: var(--fw-heavy); color: var(--ink); }
.ui-rail-panel__hd > .ui-icon { width: var(--icon-md); height: var(--icon-md); color: var(--brand-strong); }
.ui-rail-panel__t { flex: 1; min-width: 0; }
.ui-rail-panel__q { flex: none; margin: 2px 12px 4px; }
.ui-rail-panel__body { flex: 1; min-height: 0; overflow: auto; padding: 0 10px 12px; scrollbar-width: none; }
.ui-rail-panel__body::-webkit-scrollbar { display: none; }
.ui-rail-panel__gt { padding: 12px 12px 4px; font-size: var(--fs-12); font-weight: var(--fw-strong); color: var(--ink-3); white-space: nowrap; }
/* 每一项:ERP 是 div,木里是 button(跟导航轨那颗一样),两种都得是整行宽、没有边框 */
.ui-rail-panel__it { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; height: 40px; padding: 0 14px; border: 0;
  border-radius: var(--r-full); background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-14); text-align: left;
  white-space: nowrap; cursor: pointer; }
.ui-rail-panel__it .ui-icon { color: var(--ink-2); }
.ui-rail-panel__it:hover { background: var(--line-soft); }
.ui-rail-panel__it.is-on { background: var(--brand-tonal); color: var(--brand-press); font-weight: var(--fw-strong); }
.ui-rail-panel__it.is-on .ui-icon { color: var(--brand-press); }
.ui-rail-panel__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-rail-panel__g { margin-left: auto; font-size: var(--fs-12); color: var(--ink-3); }
.ui-rail-panel__it > .ui-badge { margin-left: auto; }   /* 待办数(木里「结算中心」这类)靠右 */

/* ==========================================================================
   窄电脑(768–1023 宽,老板折叠屏展开 ~800)紧凑一点(老板 09-30):
   左右留白 24 → 12、白卡里面 16 → 12、统计块小一号(胶囊跟小按钮一样 28 高)。
   只认屏幕宽度,不认是什么设备;ERP 电脑、木里电脑、门户同一条。窄于 768、1024 及以上一个像素不变。
   页面不许另写折叠屏特例:用 --gutter-desk / --pad-card / ui-stat 的地方自动跟着变。
   手机那一端也可能 768 宽以上(手机横过来照旧停在手机版;折叠屏展开后手动点了「切到手机版」):
   · 统计块小一号只给电脑那一端 —— 手机那一端的外框(ERP .m-layout、木里 #mobilePage)里面的统计块照旧不变;
     :where 不加分量,页面自己写的统计块样式照旧说了算。
   · 木里员工端 768 宽以上本来就借用电脑留白(--gutter-desk,见 mulee.html「宽屏」一段),这一档跟着收成 12,是有意的。
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root { --gutter-desk: 12px; --pad-card: 12px; }
  .ui-stat:not(:where(.m-layout *)):not(:where(#mobilePage *)) { padding: 8px 8px 8px 10px; }
  .ui-stat:not(:where(.m-layout *)):not(:where(#mobilePage *)) b { font-size: var(--fs-16); }
  .ui-stats--row .ui-stat { padding: 4px 10px; gap: 4px; }
  .ui-stats--row .ui-stat span { font-size: var(--fs-12); }
}

/* ==========================================================================
   减少动态效果(MULEE-424):系统里开了「减少动态效果」的人,全站动效时长归零、
   占位条流光静止。所有页面只要用 --dur / --dur-pop 写动效,这里一条就全关掉;
   手机换页的左右滑(--dur-slide)也归零 = 不滑、直接换页(MULEE-516)。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; --dur-pop: 0s; --dur-slide: 0s; }
  .ui-skeleton__bar::after { animation: none; }
}