/* 发货安排 · 样式（2026-10-06 起，WP-011）
 *
 * 令牌（颜色、字号、圆角、深浅两套）在 kit/base.css，跟广告助手同一套；本应用的主色调在下面「一、令牌」里改写
 * （只改本应用，广告应用照旧）。字号五档（20 / 15 / 14 / 13 / 12）。**组件里不许写死色值**，要改风格改令牌。
 *
 * 版式照 GoQ 那张受注一览（张洋 2026-10-06 给的截图）：顶栏 → 一排状态 → 一张白卡（筛选条 → 筛选面板 → 第二排页签
 * → 勾选后的批量操作条 → 表 → 翻页）。手机上表换成一行一条、筛选面板放进底部抽屉。
 *
 * 2026-10-06 17:52 张洋给了四张参考图（存在他 Windows 的下载目录：ck1.jpg / ck5.png / ck6.png / ck22.png），图上批注：
 *   · ck6「主色调参考」：浅青绿的底（#b4dbd9）、白卡片、浅青标签 → 一、令牌；按钮的深青绿取自 ck5「Add a New Job」（#21504b）；
 *   · ck5「状态栏样式参考」：一排首尾相接的箭头，上面大号的数、下面名字 → 三、状态条；
 *   · ck5「每一行数据像这样分2行展示」+ 他的话「把之前的2列合成一列然后上下展示」→ 六、表里的「上下两行」；
 *   · ck22「表格上方的筛选栏可参考」：圆角的搜索框、「Filters 3 ×」那种带数的筛选按钮、选中的页签一块很淡的灰底 → 四、五；
 *   · ck22「每一条数据用这样的左右不封口的灰色线」（他说优先于 ck6 的「每一行数据单独一个框」）→ 六：行与行之间一条细灰线，
 *     线离白卡左右两边各留一截，不画竖线、不给每行加框。
 *   · ck1（没批注）只学了表头：灰色小字、不填底色，排序的箭头只在正在排的那一列上出现。
 * 整页只有两处实心颜色：选中的状态箭头、主按钮。
 *
 * 2026-10-08 张洋又给了四张图（表格里各元素的样式「参考一 / 二 / 三」+ 当前页面的截图），图上批注：
 *   · 「多样式，不要单纯无任何样式的文本和数值」「表格里的各个数值，状态文本，标签，按钮等 希望可以可视化高，好看样式，
 *     比如说带颜色背景色等」→ 六之二：表里的值统一一套小标签（同一个高、同一个圆角、淡底 + 同色深字）——状态、操作标记、
 *     发货方式、平台 / 店长、要留意 / 数据异常；可售天数一块浅青的小块，件数加粗，0 和空浅一档，日期一个圆角小框；
 *   · 「发货仓和库存希望统合到一列」「平台和店长名分开 作为2个独立的标签 点击之后可以筛选」→ .wtag；同日 11:47 又改成
 *     「做成那种看上去像一个按钮的样式吧，同一个背景色，只是不同平台不同色。但是点击的话是分开点击」——一个按钮分左右两半；
 *     12:04「中间不要有竖线分割」「选中店长……把整个按钮的样式都改变」「配色……高级一点」→ 两个名字挨着、选店长整个按下、--pf-* 那套色；
 *   · 「希望不要再出现这种第三层的表头」→ 六：两层表头那一套样式拿掉了；
 *   · 「借调按钮」画在参考图二「Setup ↗」那一列上 → 表里的按钮（优先申请）改成描边 + 右边一个斜箭头。
 * 颜色只说「这是什么」，不说「好不好」（几天算少是状态规则管的事）。
 */

/* ══════════════════════════════════════════════════════════════════
   一、令牌（改写 base.css 里的几项；浅色写在 :root，深色写在 html.dark——base.css 的 html.dark 比 :root 优先，
   所以深色这一份必须单独写一遍）
   ══════════════════════════════════════════════════════════════════ */
:root {
  --bg:        #b4dbd9;   /* ck6 的底色 */
  --surface:   #ffffff;
  --surface-2: #f6f8f8;
  --surface-3: #eef2f2;
  --line:      #e2e7e7;
  --line-2:    #ececec;   /* ck22 行与行之间那条线 */
  --text:      #1f2a2e;
  --text-2:    #435055;
  --text-3:    #6b787c;
  --text-4:    #98a3a6;
  --accent:    #21504b;   /* ck5「Add a New Job」的深青绿 */
  --tone-brand: #21504b; --tone-brand-bg: #e2f1ef; --tone-brand-line: #b7d9d5;
  --brand-solid: #21504b; --on-brand: #ffffff;          /* 选中的状态箭头 */
  --tag-bg: #ade4e3; --tag-text: #1d3d3a;              /* ck6「team 911」那种浅青标签（发货方式） */
  --glass: rgba(255, 255, 255, .6); --glass-hover: rgba(255, 255, 255, .9);   /* 青底上的半透明白 */
  --on-bg: #1f3b38; --on-bg-2: #3f625e;                /* 青底上直接写的字 */
  --row-hover: #f5faf9; --row-picked: #e6f3f1;
  --tab-on: #eef3f2;                                    /* ck22 选中页签那块很淡的底 */
  --hue-green: #15803d; --hue-green-bg: #dcfce7;        /* 「确认发货」的颜色（base.css 里没有绿） */
  --bulk-shadow: 0 18px 40px -12px rgba(16, 48, 44, .30), 0 4px 12px -4px rgba(16, 48, 44, .12);   /* 浮着的操作条 */
  /* 表里的标签（2026-10-08 15:32 他给的参考图三 Refero：淡底 + 接近黑的字、4 像素圆角——「人家标签的色形状多好看，
     你的圆角有点太圆了，颜色人家的也好看」）。黄 / 绿 / 蓝 / 灰四个是从参考图上取的原色，其余几种照同一个深浅配的 */
  --tg-neutral-bg: #edeff6; --tg-neutral-fg: #1b1d27;   /* Impact 那种浅灰 */
  --tg-yellow-bg:  #fbf285; --tg-yellow-fg:  #211e0e;   /* In review */
  --tg-green-bg:   #c7dfaa; --tg-green-fg:   #16221c;   /* Completed */
  --tg-blue-bg:    #c0dcf9; --tg-blue-fg:    #111a32;   /* New */
  --tg-amber-bg:   #fcdf9a; --tg-amber-fg:   #2b1d06;
  --tg-orange-bg:  #fbcfa6; --tg-orange-fg:  #2c1606;
  --tg-rose-bg:    #f8c4c7; --tg-rose-fg:    #2e0f12;
  --tg-violet-bg:  #ddd0f7; --tg-violet-fg:  #1f1433;
  --tg-indigo-bg:  #cfd4f6; --tg-indigo-fg:  #151a38;
  --tg-sky-bg:     #bfe8f5; --tg-sky-fg:     #0d2630;
  --tg-mint-bg:    #bfe6dc; --tg-mint-fg:    #0f2a24;
  --tg-gray-bg:    #edeff6; --tg-gray-fg:    #1b1d27;
  --tg-hover: rgba(16, 24, 40, .06);
  /* 「AI判断」那一大格整列的底（张洋 2026-11-03「背景色跟其他列不同」）：跟操作标记「AI」那个紫同一个色族、浅得多，
     表头那一格、行悬停、勾选时各深一档 */
  --ai-col-bg: #f8f6fd; --ai-col-head: #f1edfb; --ai-col-hover: #f0ebfb; --ai-col-picked: #e9e2f8;
  --days-bg: #e2f1ef; --days-fg: #24564f;              /* 可售天数那一块浅青（跟主色同一族，比发货方式的标签浅一档） */
  --seg-hover: rgba(16, 40, 36, .07); --seg-hover-on: rgba(255, 255, 255, .16);   /* 平台 / 店长按钮：鼠标停上去压一层 */
  /* 平台的配色（张洋 2026-10-08 12:04：「配色太丑了，能不能高级一点」）：一组低饱和、偏灰的色，色相在色环上隔开，
     每个平台三个色——字色、浅底、选中时的实心色（白字）。字和浅底的对比度都在 5.7 以上，白字和实心色都在 4.9 以上 */
  --pf-rose: #794d52; --pf-rose-bg: #f8eaeb; --pf-rose-solid: #925e64;   /* 乐天 */
  --pf-clay: #75523a; --pf-clay-bg: #f7ebe4; --pf-clay-solid: #8e6448;   /* 亚马逊 */
  --pf-olive: #615c35; --pf-olive-bg: #f0eee3; --pf-olive-solid: #767043;   /* 线下 */
  --pf-sage: #376557; --pf-sage-bg: #e4f1ed; --pf-sage-solid: #447b6a;   /* 公司仓 */
  --pf-dusk: #3f5e7b; --pf-dusk-bg: #e6eff8; --pf-dusk-solid: #4e7295;   /* 小平台 */
  --pf-ink: #565a6a; --pf-ink-bg: #ecedf3; --pf-ink-solid: #696e81;   /* POD&TK */
  --pf-plum: #6d4f6a; --pf-plum-bg: #f4eaf3; --pf-plum-solid: #846181;   /* 雅虎 */
  /* 列名旁边的「平台」「公司」小标签（张洋 2026-10-12）：一冷一暖两种淡底，跟平台那套色、状态色都错开 */
  --sc-pf-bg: #e4e8fb; --sc-pf-fg: #36437f;
  --sc-co-bg: #fbecd1; --sc-co-fg: #74470b;
  /* 可售天数按参数设置上色的三种红黄（2026-10-12：「日本可售天数低于多少天改成黄底红字展示」）；别的几种借上面的标签色 */
  --ds-yr-bg: #fff1a6; --ds-yr-fg: #c8102e;
  --ds-rw-bg: #d33124; --ds-rw-fg: #ffffff;
  --ds-rose-bg: #fbd3d6; --ds-rose-fg: #a3121c;
  --abn-ic: #c8102e;
  --r-card: 14px;
  /* 拉杆箱的颜色（拉杆箱那一页按颜色分的色点；是货本身的颜色，深浅两套一样，外面一圈细线让白色、黑色在哪种底上都看得出）。
     701 七种；2026-11-03 分系列以后多了 601 的黄、801 的紫和红、901 的灰（色码跟产品资料：YW / VT / RD / GY） */
  --lgx-sw-BK: #2f3133; --lgx-sw-SY: #c3c8cc; --lgx-sw-WH: #f6f6f3; --lgx-sw-BE: #4a78b5;
  --lgx-sw-PK: #e7a3b3; --lgx-sw-GD: #c8a45a; --lgx-sw-GR: #4f8f68;
  --lgx-sw-YW: #d4ba54; --lgx-sw-VT: #7a5ca8; --lgx-sw-RD: #b8443e; --lgx-sw-GY: #5c6268;
  --lgx-sw-ink: #1f2a2e;   /* 浅色色块（银、白、粉、金、黄）上的字：深浅两套模式都用这一个深色（色块本身不随模式变） */

  --el-color-primary: #21504b;
  --el-color-primary-dark-2: #1a403c;
  --el-color-primary-light-3: #5f8783;
  --el-color-primary-light-5: #8fb0ac;
  --el-color-primary-light-7: #b9d3d0;
  --el-color-primary-light-8: #d2e4e2;
  --el-color-primary-light-9: #e8f2f1;
  --el-border-color-hover: #b6c3c3;
}
html.dark {
  --ai-col-bg: #1b1b28; --ai-col-head: #212033; --ai-col-hover: #222136; --ai-col-picked: #28263f;
  --bg:        #0f1918;
  --surface:   #162120;
  --surface-2: #1b2827;
  --surface-3: #212f2e;
  --line:      #2a3938;
  --line-2:    #243231;
  --text:      #e4eeec;
  --text-2:    #bccbc8;
  --text-3:    #8a9d9a;
  --text-4:    #6a7e7b;
  --accent:    #6fcabd;
  --tone-brand: #6fcabd; --tone-brand-bg: #183230; --tone-brand-line: #2b524d;
  --brand-solid: #2e8a7f; --on-brand: #ffffff;
  --tag-bg: #1f4744; --tag-text: #bdeee9;
  --glass: rgba(255, 255, 255, .06); --glass-hover: rgba(255, 255, 255, .12);
  --on-bg: #d3e6e3; --on-bg-2: #93b2ad;
  --row-hover: #1b2a29; --row-picked: #1c3532;
  --tab-on: #223130;
  --hue-green: #86efac; --hue-green-bg: #14301f;
  --bulk-shadow: 0 18px 40px -12px rgba(0, 0, 0, .65), 0 4px 12px -4px rgba(0, 0, 0, .4);
  --tg-neutral-bg: #2a2f3a; --tg-neutral-fg: #e4e7ef;
  --tg-yellow-bg:  #403b13; --tg-yellow-fg:  #f6ec9b;
  --tg-green-bg:   #2c3a22; --tg-green-fg:   #d3e8bb;
  --tg-blue-bg:    #1d3350; --tg-blue-fg:    #cfe3fa;
  --tg-amber-bg:   #44330f; --tg-amber-fg:   #fce0a3;
  --tg-orange-bg:  #47280f; --tg-orange-fg:  #fcd3b0;
  --tg-rose-bg:    #4a1f24; --tg-rose-fg:    #f9cdd0;
  --tg-violet-bg:  #33284d; --tg-violet-fg:  #e2d7fa;
  --tg-indigo-bg:  #262c52; --tg-indigo-fg:  #d6dbfa;
  --tg-sky-bg:     #153a47; --tg-sky-fg:     #c8edf8;
  --tg-mint-bg:    #173d35; --tg-mint-fg:    #c6ebe1;
  --tg-gray-bg:    #2a2f3a; --tg-gray-fg:    #e4e7ef;
  --tg-hover: rgba(255, 255, 255, .07);
  --days-bg: #183230; --days-fg: #9fdcd2;
  --seg-hover: rgba(255, 255, 255, .08); --seg-hover-on: rgba(0, 0, 0, .14);
  --pf-rose: #eac2c6; --pf-rose-bg: #3d2b2c; --pf-rose-solid: #dba8ad;
  --pf-clay: #e6c7b2; --pf-clay-bg: #3c2d23; --pf-clay-solid: #d6ae93;
  --pf-olive: #d3cfb0; --pf-olive-bg: #333121; --pf-olive-solid: #beb98f;
  --pf-sage: #b3d7ca; --pf-sage-bg: #22352f; --pf-sage-solid: #92c4b3;
  --pf-dusk: #b7d1ea; --pf-dusk-bg: #25323e; --pf-dusk-solid: #9abbdd;
  --pf-ink: #cacddb; --pf-ink-bg: #2e3037; --pf-ink-solid: #b2b6c9;
  --pf-plum: #dfc4db; --pf-plum-bg: #382c37; --pf-plum-solid: #cdabc9;
  --sc-pf-bg: #272d4e; --sc-pf-fg: #c9d0f7;
  --sc-co-bg: #3c2e14; --sc-co-fg: #f1d39b;
  --ds-yr-bg: #4a400c; --ds-yr-fg: #ff9a8f;
  --ds-rw-bg: #b3271c; --ds-rw-fg: #ffffff;
  --ds-rose-bg: #4a1f24; --ds-rose-fg: #ffb3b8;
  --abn-ic: #ff8a80;

  --el-color-primary: #3a9d91;
  --el-color-primary-dark-2: #5fb5a9;
  --el-color-primary-light-3: #2e746c;
  --el-color-primary-light-5: #275651;
  --el-color-primary-light-7: #1f3d3a;
  --el-color-primary-light-8: #1c2f2d;
  --el-color-primary-light-9: #182221;
  --el-border-color-hover: #3a4c4a;
}

/* ══════════════════════════════════════════════════════════════════
   二、整页骨架
   ══════════════════════════════════════════════════════════════════ */
/* 整页不出滚动条（张洋 2026-10-15 圈着窗口最右边那一条：「这里还是没改啊？」——「显示列」弹出框底边超出窗口，整页冒出一条滚动条、
   画面往左挤 15）。要滚的地方各在自己那一块里滚：看板（筛选面板开着时）、参数设置、调拨账本 / 发货归档 / 账号管理、登录页，
   都先留好滚动条的位置、右边距少掉同样宽（--sbw，app.js 量的），滚动条出不出来画面都不挪；弹出框按窗口高度收矮，不超出窗口 */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
#app { height: 100%; }
::selection { background: var(--tone-brand-line); color: var(--text); }
.boot { padding: 48px 24px; color: var(--on-bg-2); }
.grow { flex: 1; }
.muted { color: var(--text-4); }
.pad { padding: 24px 4px; }

.ic { width: 16px; height: 16px; flex: none; }
.el-button > span { display: inline-flex; align-items: center; gap: 4px; }

.sp { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* 顶栏：直接放在青底上（ck6 顶上那一排），两个页面放进一颗半透明白的药丸里 */
.top { display: flex; align-items: center; gap: 8px; padding: 12px 20px 10px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .mark {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-solid); color: var(--on-brand);
}
.brand .mark .ic { width: 18px; height: 18px; }
.brand .bt { font-size: 15px; font-weight: 600; color: var(--on-bg); }
.views { display: flex; gap: 2px; margin-left: 14px; padding: 3px; border-radius: 12px; background: var(--glass); }
.views a {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 9px;
  color: var(--on-bg-2); text-decoration: none; font-size: 13px; white-space: nowrap;
}
.views a:hover { color: var(--on-bg); }
.views a.on { background: var(--surface); color: var(--text); font-weight: 600; }
.views a.on .ic { color: var(--accent); }
.asof { color: var(--on-bg-2); font-size: 12px; margin-right: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.who { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-bg); margin-left: 6px; }
.who .av {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface); color: var(--accent); font-size: 12px; font-weight: 600;
}
.who em {
  font-style: normal; font-size: 12px; color: var(--on-bg-2); padding: 0 8px; border-radius: 9px; line-height: 20px;
  background: var(--glass);
}
/* 右上角那块是一颗按钮（点开是谁、哪一档、退出登录；2026-10-14 账号登录起） */
button.who {
  border: 0; background: none; font: inherit; cursor: pointer; padding: 2px 8px 2px 2px; border-radius: 18px;
}
button.who:hover { background: var(--glass); }
button.who:focus-visible { outline: 2px solid var(--on-brand); outline-offset: 1px; }
.who-pop .who-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; min-width: 200px;
  border-bottom: 1px solid var(--line); }
.who-pop .who-h .av {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--tone-brand-bg); color: var(--accent); font-size: 13px; font-weight: 600;
}
.who-pop .who-h b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.who-pop .who-h span { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.who-pop .el-dropdown-menu__item .ic { width: 14px; height: 14px; margin-right: 6px; }

/* 登录页、修改密码弹窗那几格（.lgn-* / .pwd）2026-10-16 起在 kit/base.css（两个应用共用）；
   用到的 --r-card / --brand-solid / --on-brand 还是本文件 :root 里那几个值，外观不变 */
/* 账号管理页（右上角头像菜单 →「账号管理」，只有超级管理员进得来） */
.acc-id { font-family: var(--mono); font-size: 13px; color: var(--text); }
.acc-me {
  font-style: normal; font-size: 11px; color: var(--accent); background: var(--tone-brand-bg);
  border-radius: 9px; padding: 0 7px; line-height: 18px; margin-left: 8px;
}
.acc-role.r-super { --tg-bg: var(--brand-solid); --tg-fg: var(--on-brand); }
.acc-role.r-manager { --tg-bg: var(--tone-brand-bg); --tg-fg: var(--accent); }
.acc-role.r-member { --tg-bg: var(--surface-2); --tg-fg: var(--text-2); }
.acc-roles { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.acc-roles .el-radio { height: auto; margin-right: 0; align-items: flex-start; }
.acc-roles .el-radio__label { display: flex; flex-direction: column; gap: 1px; line-height: 1.5; }
.acc-roles small { font-size: 12px; color: var(--text-3); }
.acc-note { font-size: 12px; color: var(--text-3); }

/* 青底上的白按钮（ck6 右上角「Customize」那种） */
.el-button.glass {
  --el-button-bg-color: var(--glass); --el-button-border-color: transparent;
  --el-button-hover-bg-color: var(--glass-hover); --el-button-hover-border-color: transparent;
  --el-button-active-bg-color: var(--surface); --el-button-active-border-color: transparent;
  --el-button-text-color: var(--on-bg); --el-button-hover-text-color: var(--text);
  --el-button-disabled-bg-color: var(--glass); --el-button-disabled-border-color: transparent;
  border-radius: 10px;
}
.top .el-button + .el-button { margin-left: 0; }


/* 页面主体：状态条 + 一张白卡。没开筛选面板时表格吃掉剩下的高度；开着时整块往下滚（表格照样给足一屏） */
.board { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 2px 20px 16px; }
.board > * { flex-shrink: 0; }
.board > .card { flex: 1 1 auto; min-height: 0; }
/* 筛选面板开着时整块往下滚：滚动条的位置先留出来（scrollbar-gutter），右边距少掉同样宽（--sbw = 这台电脑一条滚动条多宽，
   app.js 量的；手机、Mac 那种不占位的滚动条是 0）——白卡、状态条一个像素都不挪（张洋 2026-10-15 图上圈着右边那条滚动条：
   「右边会弹出来导致整个画面左移 这种交互小细节要注意啊！！！」；在这之前面板一开，滚动条冒出来，整块往左挤 15） */
.board.scroll { overflow-y: auto; scrollbar-gutter: stable; padding-right: max(0px, calc(20px - var(--sbw, 0px))); }
.board.scroll > .card { flex: none; }
.board.scroll .tbl { flex: none; height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 420px; }

/* ══════════════════════════════════════════════════════════════════
   三、状态条（ck5：一排首尾相接的箭头，上面大号的数、下面名字；选中的整格填深青绿）
   箭头靠 clip-path 剪出来：每格右边一个尖、左边一个凹口，后一格往左压进前一格的尖里，中间留 4px 露出青底当分隔。
   ══════════════════════════════════════════════════════════════════ */
.flow { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* 上面多留 18 像素给角上那个圆（一半探出格子上沿，四位数的圆直径 34）：横向能滚的盒子会把探出去的那一半剪掉；再用 -18 的
   外边距抵回去，状态条跟上面那一行的距离不变。这一截是透明的，不接鼠标，免得挡住上面那一行的按钮 */
.steps {
  --d: 16px;
  display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto;
  padding-top: 18px; margin-top: -18px; pointer-events: none;
}
.steps::-webkit-scrollbar { display: none; }
/* 一格 = 箭头（.step，剪成箭头的形状）+ 角上那个圆（.sfb）。圆不能放在箭头里面：箭头的 clip-path 会把探出去的那一半剪掉 */
.stw { position: relative; flex: none; margin-left: calc(4px - var(--d)); pointer-events: auto; }
.stw:first-child { margin-left: 0; }
.step {
  appearance: none; border: 0; font: inherit; cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 136px; height: 62px; padding: 0 calc(var(--d) + 16px);
  background: var(--surface); color: var(--text);
  clip-path: polygon(0 0, calc(100% - var(--d)) 0, 100% 50%, calc(100% - var(--d)) 100%, 0 100%, var(--d) 50%);
}
.stw:first-child .step {
  padding-left: 22px; border-radius: 12px 0 0 12px;
  clip-path: polygon(0 0, calc(100% - var(--d)) 0, 100% 50%, calc(100% - var(--d)) 100%, 0 100%);
}
.stw:last-child .step {
  padding-right: 22px; border-radius: 0 12px 12px 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--d) 50%);
}
.stw:only-child .step { border-radius: 12px; clip-path: none; padding: 0 22px; }
.step .sn { font-size: 20px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.step .sl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.step .sd { width: 7px; height: 7px; border-radius: 50%; background: var(--hue); flex: none; }
/* 设了筛选时：右上角一个正圆（张洋 2026-10-12 11:00「中线直径刚好压住边框的圆」），圆心在格子上沿那条线上。
   整个圆摆在上沿还平着的那一段里、离拐弯处留 4 像素：箭头那几格的上沿到尖之前就收了（尖占 --d），最后一格到圆角（12）就弯了。
   在这之前圆心压在拐弯处，两位数以上被撑成椭圆，最后一格那个还探出状态条右边被剪掉一截（张洋 2026-10-12 14:24：
   「你就不会用圆形吗」「你就不会往左边移一点吗」）。
   一直是正圆：一两位数直径 24、三位数 28、四位数 34（字跟着小一号，.d3 / .d4）。
   浮在格子外面一层，格子的宽、总数的位置筛不筛都不动；一圈跟卡片同色的细边，把圆从格子和青底上「抠」出来 */
.sfb {
  position: absolute; top: 0; right: calc(var(--d) + 4px); z-index: 1; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; pointer-events: none;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0;
  background: var(--brand-solid); color: var(--on-brand);
  box-shadow: 0 0 0 2px var(--surface), 0 2px 6px -2px rgba(16, 48, 44, .35);
  transition: background-color .2s ease-out, color .2s ease-out;
}
.sfb.d3 { width: 28px; height: 28px; font-size: 11px; }
.sfb.d4 { width: 34px; height: 34px; font-size: 10.5px; letter-spacing: -.02em; }
.stw:last-child .sfb, .stw:only-child .sfb { right: 16px; }
.sfb.zero { background: var(--surface-3); color: var(--text-3); box-shadow: 0 0 0 2px var(--surface); }
/* 勾选的条目在这一页有几条（张洋 2026-11-12 13:15「在右上角用数字标记出来」）：跟筛选后那个圆同一个位置、同一个大小；白底、品牌色的圈和字
   （勾选框也是品牌色），跟筛选后那个实心的圆分得开。有勾选时这一排的圆只表示勾选，筛选后的条数那时候不摆 */
.sfb.spk { background: var(--surface); color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 2px 6px -2px rgba(16, 48, 44, .35); }
.sfb-enter-active { transition: opacity .18s ease-out, transform .24s cubic-bezier(.22, 1, .36, 1); }
.sfb-leave-active { transition: opacity .12s ease-in, transform .12s ease-in; }
.sfb-enter-from, .sfb-leave-to { opacity: 0; transform: translateY(-50%) scale(.6); }
@media (prefers-reduced-motion: reduce) {
  .sfb-enter-active, .sfb-leave-active { transition: opacity .12s linear; }
  .sfb-enter-from, .sfb-leave-to { transform: translateY(-50%); }
}
.step:hover { background: var(--row-hover); }
.step:hover .sl { color: var(--text-2); }
.step:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--accent); }
.step.zero .sn { color: var(--text-4); }
.step.on { background: var(--brand-solid); color: var(--on-brand); }
.step.on .sn { color: var(--on-brand); }
.step.on .sl { color: var(--on-brand); opacity: .88; }
.step.on .sd { box-shadow: 0 0 0 1.5px var(--on-brand); }
.step.on:focus-visible { box-shadow: inset 0 -3px 0 var(--on-brand); }
.step-add {
  appearance: none; font: inherit; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; gap: 6px; height: 62px; padding: 0 18px; border-radius: 12px;
  border: 1.5px dashed var(--on-bg-2); background: var(--glass); color: var(--on-bg); font-size: 13px;
}
.step-add:hover { background: var(--glass-hover); }
/* 状态条多了「排柜」一格以后，1500 以内的屏放不下整排（1463 宽只剩 2 像素）：「新建状态」只留加号（鼠标停上去有名字），省出的地方给状态那一串 */
@media (min-width: 961px) and (max-width: 1500px) {
  .step-add-t { display: none; }
  .step-add { padding: 0 20px; }
}
/* 1400 以内（1366 的笔记本）再把状态那几格收窄 8：不收的话多了「排柜」一格以后状态那一串要横着滑、最后一格被切掉 56 像素 */
@media (min-width: 961px) and (max-width: 1400px) {
  .step { min-width: 128px; }
}
.step-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 安排发货：状态条末尾单独一格（张洋 2026-10-13「把确定发货改成一个区别于状态栏的东西，样式也要改变」）。
   2026-10-15 起跟前面几个状态一个样子：白底、上面大号的数、下面名字，选中整格填深青（张洋：「安排发货按钮的显示不明显，我现在即使
   处在安排发货的页面，也经常不确定我现在到底位于哪个状态，你在那个圆外围加一个圈不太直观。另外这个按钮其实也挺丑的，跟前面的
   几个状态风格也不统一，区分倒是区分的挺明显的」）。跟状态那一串分开的地方：不进箭头那一串、自己一格圆角，左边一个深青的圆
   里面一个朝右的三角形（选中时圆反过来是白的）。在这之前是一颗深青的圆、旁边写数，选中只在圆外面多一圈环 */
.shipw { position: relative; flex: none; display: flex; align-items: center; }
/* 一块（.tile）：白底圆角、左边一个圆里一个图标、右边上面大号的数下面名字，选中整块填深青、圆反过来是白的。
   「安排发货」那一格（.tile.ship）和调拨账本、发货归档、账号管理顶上那一排分类块（CatTiles）是同一份样子
   （张洋 2026-10-15 调拨账本截图批注：「完全毛坯房UI，跟首页一样精装修」「能复用的直接复用，整个系统各个页面模块统一标准和风格」）。
   圆的颜色经 --tile-bg / --tile-fg 给：安排发货实心深青（t-solid），分类块按这一类的颜色给浅底 + 同色图标（t-ok / t-warn……） */
.tile {
  appearance: none; border: 0; font: inherit; cursor: pointer; position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 12px; height: 62px; padding: 0 24px 0 16px; border-radius: 12px;
  background: var(--surface); color: var(--text);
  --tile-bg: var(--tone-brand-bg); --tile-fg: var(--accent);
  transition: background-color .15s ease-out, color .15s ease-out;
}
.tile-o {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tile-bg); color: var(--tile-fg);
  transition: background-color .15s ease-out, color .15s ease-out;
}
.tile-o .ic { width: 16px; height: 16px; }
.tile-t { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px; }
.tile-n { font-size: 20px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile-l { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.tile.zero .tile-n { color: var(--text-4); }
.tile:hover { background: var(--row-hover); }
.tile:hover .tile-l { color: var(--text-2); }
.tile.on { background: var(--brand-solid); color: var(--on-brand); }
.tile.on .tile-n { color: var(--on-brand); }
.tile.on .tile-l { color: var(--on-brand); opacity: .88; }
.tile.on .tile-o { background: var(--on-brand); color: var(--tile-on-fg, var(--tile-fg)); }
.tile:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--accent); }
.tile.on:focus-visible { box-shadow: inset 0 -3px 0 var(--on-brand); }
.tile.t-solid { --tile-bg: var(--brand-solid); --tile-fg: var(--on-brand); --tile-on-fg: var(--brand-solid); }
.tile.t-ok { --tile-bg: var(--tone-ok-bg); --tile-fg: var(--tone-ok); }
.tile.t-warn { --tile-bg: var(--tone-warn-bg); --tile-fg: var(--tone-warn); }
.tile.t-danger { --tile-bg: var(--tone-danger-bg); --tile-fg: var(--tone-danger); }
.tile.t-calm { --tile-bg: var(--tone-calm-bg); --tile-fg: var(--tone-calm); }
.tile.t-violet { --tile-bg: var(--hue-violet-bg); --tile-fg: var(--hue-violet); }
.tile.t-sky { --tile-bg: var(--hue-sky-bg); --tile-fg: var(--hue-sky); }
.tile.t-teal { --tile-bg: var(--hue-teal-bg); --tile-fg: var(--hue-teal); }
/* 三角形画实心：图标库里那个是描边的多边形，填上颜色、圆一下角；往右挪一点，看着在圆的正中 */
.tile.ship .tile-o .ic { width: 14px; height: 14px; fill: currentColor; stroke-linejoin: round; transform: translateX(1px); }
.tile.ship.busy .tile-o .ic { fill: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tile, .tile-o { transition: none; }
}
/* 一排分类块（调拨账本、发货归档、账号管理顶上，跟发货看板的状态条同一个位置）：块与块之间隔 8，放不下左右滑 */
.tiles { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; }
.tiles::-webkit-scrollbar { display: none; }
/* 筛选后还剩几条：跟状态格一样一个正圆，压在圆的右上沿 */
.shipw .sfb.ship-fb { right: 16px; }

/* 安排发货还是空的：表格中间一颗「开始安排」 */
/* 表里没东西（安排发货还是空的、调拨账本 / 发货归档 / 账号管理一条都没有、读不出来）：中间一个浅底的圆里一个图标、一句粗的、
   底下一句小字，要动手的再给一颗按钮——各页同一个样子（2026-10-15 起，原来只有安排发货这一处叫 .ship-empty） */
.empty-st {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 16px 64px;
  color: var(--text-3); font-size: 13px; line-height: 1.5; text-align: center;
}
.empty-st b { font-size: 15px; font-weight: 600; color: var(--text); }
.empty-st-o {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 2px;
  background: var(--tone-brand-bg); color: var(--accent);
}
.empty-st-o .ic { width: 20px; height: 20px; }
.empty-st-o.bad { background: var(--tone-danger-bg); color: var(--tone-danger); }
/* 安排发货那一颗是实心的三角形（跟状态条上那一格一样） */
.empty-st-o.play .ic { width: 18px; height: 18px; fill: currentColor; stroke-linejoin: round; transform: translateX(1px); }
.empty-st .el-button, .empty-st .tb-btn { margin-top: 4px; }
/* 弹窗里的（本期结算没有要结算的）：上下留白小一点 */
.empty-st.in-dlg { padding: 20px 12px 8px; }
/* 表格自带的「没有数据」那一格：宽只有一半、行高 60，换成整宽、正常行高，上面那一块才居中 */
.grid .el-table__empty-text { width: 100%; line-height: normal; }

/* 筛选那一行右边的一组按钮（原来跟状态条摆在一行，张洋 2026-10-13「这些全部移到下一行，不要跟状态栏放一行」） */
.tb-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-btn:disabled { opacity: .45; cursor: not-allowed; }
.tb-btn:disabled:hover { border-color: var(--line); color: var(--text-2); }
.tb-n.hot { background: var(--brand-solid); color: var(--on-brand); font-weight: 600; border-radius: 9px; }

/* ══════════════════════════════════════════════════════════════════
   四、白卡 + 筛选条（ck22 顶上那一排：圆角搜索框、带数的「筛选」、常用筛选、显示列）
   ══════════════════════════════════════════════════════════════════ */
.card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border-radius: var(--r-card);
}
.card > * { flex-shrink: 0; }
.card > .tbl { flex: 1 1 auto; min-height: 0; }
.tb { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; flex-wrap: wrap; }
/* 搜索框、常用筛选不够宽时先收窄，筛选条不折成两行（张洋 2026-10-15 排柜那一面截图：「排柜表多出来一行导致少了一行展示空间，
   显得很局促拥挤」——那一面多了「按条目 / 按柜」，1600 宽以下「常用筛选」被挤到第二行）。够宽时照旧 260 / 168 */
.tb-q { flex: 1 1 150px; max-width: 260px; min-width: 0; }
.tb-q .el-input__wrapper, .b-saved .el-select__wrapper {
  border-radius: 10px; box-shadow: 0 0 0 1px var(--line) inset; background: var(--surface);
}
.tb-q .el-input__wrapper:hover, .b-saved .el-select__wrapper:hover { box-shadow: 0 0 0 1px var(--el-border-color-hover) inset; }
.tb-q .el-input__wrapper.is-focus, .b-saved .el-select__wrapper.is-focused { box-shadow: 0 0 0 1px var(--accent) inset; }
.tb-btn {
  appearance: none; font: inherit; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 13px; white-space: nowrap;
}
.tb-btn:hover { border-color: var(--el-border-color-hover); color: var(--text); }
.tb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tb-btn .ic { width: 15px; height: 15px; }
/* 「筛选 3 ×」：数是一小块灰底（ck22），× 清空全部条件 */
.tb-f { display: inline-flex; align-items: center; }
.tb-f.has .tb-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tb-f.on .tb-btn { background: var(--tone-brand-bg); border-color: var(--tone-brand-line); color: var(--accent); }
.tb-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; margin-left: 2px;
  background: var(--surface-3); color: var(--text-2); font-size: 12px; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.tb-f.on .tb-n { background: var(--surface); color: var(--accent); }
.tb-x {
  appearance: none; font: inherit; cursor: pointer; display: grid; place-items: center;
  width: 30px; height: 32px; border: 1px solid var(--line); border-left: 0; border-radius: 0 10px 10px 0;
  background: var(--surface); color: var(--text-3);
}
.tb-x:hover { color: var(--tone-danger); background: var(--tone-danger-bg); }
.tb-x .ic { width: 14px; height: 14px; }
.tb-f.on .tb-x { border-color: var(--tone-brand-line); background: var(--tone-brand-bg); }
.b-saved { flex: 1 1 116px; max-width: 168px; min-width: 0; }
/* 安排发货（两面）按钮最多，排柜那一面还多一组「按条目 / 按柜」：1600 宽以下按钮左右各收 3，筛选条不折成两行
   （2026-10-23 加了「下载」以后排柜那一面 1463 宽折成两行、切换时表格往下跳，原来只管排柜那一面、1440 以下） */
@media (min-width: 961px) and (max-width: 1600px) {
  .tb.pk-tb .tb-btn, .tb.ship-tb .tb-btn { padding: 0 9px; }
  .tb.pk-tb .tb-seg button { padding: 0 8px; }
}
.b-saved .el-select__prefix .ic { width: 15px; height: 15px; color: var(--text-3); }

/* 面板收起时，已设的条件在筛选条上一排可点 × 的标签 */
.chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.fchip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 360px; height: 26px; padding: 0 4px 0 10px;
  border-radius: 9px; background: var(--surface-3); color: var(--text-2); font-size: 12px;
}
.fchip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip-x {
  appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--text-3); padding: 2px;
  display: grid; place-items: center; border-radius: 6px;
}
.fchip-x:hover { background: var(--line); color: var(--text); }
.fchip-x .ic { width: 12px; height: 12px; }
.fchip.ro { padding: 0 10px; height: auto; min-height: 24px; max-width: 100%; white-space: normal; line-height: 1.5; }

/* 常用筛选的下拉：名字 · 谁存的 · 删除 */
.sv-pop .el-select-dropdown__item { padding-right: 8px; }
.sv-o { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.sv-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sv-by { font-size: 12px; color: var(--text-4); }
.sv-del {
  appearance: none; border: 0; background: transparent; cursor: pointer; padding: 3px; border-radius: 4px;
  color: var(--text-4); display: grid; place-items: center;
}
.sv-del:hover { color: var(--tone-danger); background: var(--tone-danger-bg); }
.sv-del .ic { width: 14px; height: 14px; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }

/* 筛选面板（2026-10-09 重排：左边一列分类、右边只摆这一类的格子，标签在上、控件在下；张洋同日嫌原来那一大片
   「密密麻麻的字，没有任何重点」）。放在卡里、筛选条下面；手机上放进底部抽屉，分类变成顶上一排横滑页签 */
.fpanel {
  margin: 0 16px 12px; display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.fp-nav {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px;
  background: var(--surface-2); border-bottom: 1px solid var(--line-2);
}
.fp-c {
  appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px;
  color: var(--text-2); font-size: 13px; white-space: nowrap; flex: none;
}
.fp-c:hover { background: var(--surface-3); color: var(--text); }
.fp-c.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(16, 24, 40, .06); }
.fp-c:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fp-cl { min-width: 0; }
.fp-cn {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; text-align: center;
  background: var(--brand-solid); color: var(--on-brand); font-size: 11px; font-weight: 600; line-height: 18px;
  font-variant-numeric: tabular-nums;
}
.fp-body { padding: 18px 22px 20px; min-width: 0; }
.fg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 22px; align-items: start; max-width: 1240px; }
.fg-col { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ff { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ff.w2 { grid-column: span 2; }
.ff.full { grid-column: 1 / -1; }
.fl { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.fl-n { font-weight: 600; color: var(--accent); }
.fl-h { font-weight: 400; color: var(--text-4); }
.fl-h.top { font-size: 12px; margin-bottom: 2px; }
.ff .el-select, .ff .el-cascader, .ff .el-input, .ff .el-textarea { width: 100%; }
.fpick.ex .el-select__wrapper { box-shadow: 0 0 0 1px var(--tone-warn) inset; }
.fpick-ex { font-size: 12px; color: var(--tone-warn); font-weight: 600; white-space: nowrap; }
/* 一段数：两格之间写「至」，后面单位 */
.frange { display: inline-flex; align-items: center; gap: 6px; }
.frange .el-input-number { width: 96px; }
.frange .el-input__inner { text-align: right; font-variant-numeric: tabular-nums; }
.frange-s, .frange-u { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.frange.on .el-input__wrapper { box-shadow: 0 0 0 1px var(--tone-brand-line) inset; background: var(--tint-brand); }
.fdate { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.w-xs { width: 92px; }
.w-s { width: 112px; }
.w-n { width: 72px; }
.w-d { width: 140px; }
.w-m { width: 168px; }
.w-l { width: 220px; }
.w-sku { width: 320px; }
.fi-u { font-size: 12px; color: var(--text-4); white-space: nowrap; }
.fg-col .cond { max-width: 780px; margin: 0; }
/* 一组可多选的值：一排药丸（比一排复选框好认；Labyrinth 那套「筛选芯片」的样子） */
.ctg { display: flex; flex-wrap: wrap; gap: 6px; }
.ctg-i {
  appearance: none; font: inherit; cursor: pointer; height: 30px; padding: 0 12px; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 13px;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.ctg-i:hover { border-color: var(--el-border-color-hover); color: var(--text); }
.ctg-i.on { background: var(--tone-brand-bg); border-color: var(--tone-brand-line); color: var(--accent); font-weight: 600; }
.ctg-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fp-foot {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--line-2); background: var(--surface);
}
.fp-foot .el-button { margin-left: 0; }
.fp-count { font-size: 12px; color: var(--text-3); }
.fp-count b { font-size: 16px; color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 2px; }
.chev { width: 14px; height: 14px; transition: transform .15s; }
.chev.up { transform: rotate(180deg); }

/* 手机：面板放进底部抽屉，分类一排横滑、格子一格一行 */
.sp-drawer.fdrawer .el-drawer__body { padding: 0 0 8px; }
.fd-saved { padding: 12px 16px 4px; }
.fd-saved .b-saved { width: 100%; max-width: none; }
.fpanel.stacked { margin: 8px 0 0; border: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr); }
.fpanel.stacked .fp-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 12px; }
.fpanel.stacked .fp-nav::-webkit-scrollbar { display: none; }
.fpanel.stacked .fp-body { padding: 14px 16px; min-height: 0; }
.fpanel.stacked .fg { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.fpanel.stacked .ff.w2 { grid-column: auto; }
.fpanel.stacked .fp-foot { padding: 10px 16px; }

/* ══════════════════════════════════════════════════════════════════
   五、第二排页签（ck22 那排：只有字，选中的那个一块很淡的底；右边是数）+ 批量操作条
   ══════════════════════════════════════════════════════════════════ */
.vtabs {
  display: flex; align-items: center; gap: 2px; padding: 0 16px 8px; overflow-x: auto; scrollbar-width: none;
}
.vtabs::-webkit-scrollbar { display: none; }
.vt {
  appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer; flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px;
  color: var(--text-3); font-size: 13px;
}
/* 数字那一块至少放得下三位数：换状态时这一排的数变了（26 → 108），页签不跟着变宽变窄、后面的页签不左右挪（张洋 2026-10-14
   「不同状态切换的时候表格一弹一弹的」） */
.vt .ct {
  min-width: 34px; height: 18px; padding: 0 6px; border-radius: 6px; text-align: center;
  background: var(--surface-3); font-size: 12px; line-height: 18px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
/* 平台页签前面一个色点：跟表里那个平台标签同一个颜色（2026-10-08） */
.vt-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.vt .ic { width: 14px; height: 14px; }
.vt:hover { color: var(--text); background: var(--surface-2); }
.vt.on { background: var(--tab-on); color: var(--text); font-weight: 600; }
.vt.on .ct { background: var(--surface); color: var(--text-2); }
.vt.on .ic { color: var(--accent); }
.vt.zero, .vt.zero .ct { color: var(--text-4); }
.vt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vt-sep { width: 1px; height: 16px; margin: 0 8px; background: var(--line); flex: none; }
/* 看板那一排（vtabs-sub，发货归档页那一排不动）：「全部 + 各平台」一组（vt-ps）、三种走法一组（vt-ms，分隔线 + 海运 / 快船 / 空运）。
   手机上两组照旧连成一排横滑（vt-ps 拆开不占一层）。电脑上分左右两栏：走法那一组钉在第一行右头，平台在左边那一栏里放不下就折行
   ——事业部拆成十来家以后，1463 宽的屏排到「公司」就满了，三种走法挤到看不见的右边、又没有滚动条（深圳跟单 2026-11-05 17:15
   「我看现在上面条目不显示海运空运快船了」）。页签一直是这一套（切状态只变数）、选中加粗也不变宽（vt-t），折在哪不跟着跳 */
.vt-ms { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.vt-ps { display: contents; }
/* 名字后面垫一份看不见的粗体：页签宽度按粗体算，选中、不选中一样宽 */
.vt-t { display: inline-flex; flex-direction: column; }
.vt-t::after { content: attr(data-t); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
@media (min-width: 961px) {
  .vtabs-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; overflow-x: visible; }
  .vtabs-sub .vt-ps { display: flex; flex-wrap: wrap; gap: 4px 2px; min-width: 0; }
  /* 左右内边距用手机那一档的 10：十五个页签省出 60，1920 宽的屏一行放得下 */
  .vtabs-sub .vt { padding: 0 10px; }
}

/* 勾了行以后的操作条：浮在表的底部正中、从下面滑出来（不占位，表格不跳；2026-10-08 14:49 他嫌原来夹在页签和表中间
   「整个表格弹一下」）。手机上贴着屏幕底边。表里多留出一截底，最后几行能滚到操作条上面来。 */
.card { position: relative; }
.bulk {
  position: absolute; left: 50%; bottom: 58px; z-index: 20; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 8px 10px 8px 16px;
  white-space: nowrap; overflow-x: auto; scrollbar-width: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--bulk-shadow);
}
.bulk::-webkit-scrollbar { display: none; }
.bulk b { color: var(--accent); font-variant-numeric: tabular-nums; }
.bulk .el-button { margin-left: 0; }
.bulk-sep { width: 1px; height: 16px; background: var(--line); flex: none; }
.bulk.m {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: none;
  max-width: none; flex-wrap: wrap; white-space: normal;
}
.bulk-enter-active { transition: opacity .22s cubic-bezier(.16, 1, .3, 1), transform .34s cubic-bezier(.16, 1, .3, 1); }
.bulk-leave-active { transition: opacity .14s ease-in, transform .18s ease-in; }
.bulk-enter-from, .bulk-leave-to { opacity: 0; transform: translate(-50%, 18px) scale(.98); }
.bulk.m.bulk-enter-from, .bulk.m.bulk-leave-to { transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  .bulk-enter-active, .bulk-leave-active { transition: opacity .12s linear; }
  .bulk-enter-from, .bulk-leave-to { transform: translateX(-50%); }
  .bulk.m.bulk-enter-from, .bulk.m.bulk-leave-to { transform: none; }
}
.tbl.has-bulk .el-table__body-wrapper .el-scrollbar__view { padding-bottom: 72px; }
.tbl.has-bulk .mlist { padding-bottom: 104px; }

/* 状态标签：参考图三 Refero 的 Status（「In review」「Completed」「New」那种）——这个状态的颜色做淡底、字接近黑、
   4 像素圆角、不带圆点（2026-10-08 15:32） */
.spill {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 4px; white-space: nowrap;
  background: var(--tg-bg, var(--tg-neutral-bg)); color: var(--tg-fg, var(--tg-neutral-fg));
  font-size: 12px; font-weight: 500; line-height: 20px;
}
.spill .dot { display: none; }
.spill .pin { width: 12px; height: 12px; }

/* ══════════════════════════════════════════════════════════════════
   六、表（ck22：行与行之间一条细灰线，线离白卡左右两边各留 16px；不画竖线、不给每行加框。
   一对相关的列合成一格、上下两行：上一行是主数，下一行小一号、浅一档）
   ══════════════════════════════════════════════════════════════════ */
.tbl { flex: 1 1 auto; min-height: 0; padding: 0 16px; }
.foot {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px 12px; flex-wrap: wrap;
}
.foot .rg { font-size: 12px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.foot .ps { width: 104px; }
.foot .el-pagination { --el-pagination-button-bg-color: transparent; }

.grid {
  --el-table-border-color: var(--line-2);
  --el-table-border: 1px solid var(--line-2);
  --el-table-header-bg-color: var(--surface);
  --el-table-header-text-color: var(--text-3);
  --el-table-bg-color: var(--surface);
  --el-table-tr-bg-color: var(--surface);
  --el-table-row-hover-bg-color: var(--row-hover);
  --el-table-text-color: var(--text);
  font-variant-numeric: tabular-nums;
}
.grid .el-table__inner-wrapper::before { display: none; }   /* 表格最底下那条横贯的线不要：每行自己带一条 */
/* 带框那一套（el-table--border：外框 + 每格竖线）全部拿掉，只留横线——参数设置页「货号资料」那张表是带框的，靠这几条 */
.grid.el-table--border::before, .grid.el-table--border::after,
.grid.el-table--border .el-table__inner-wrapper::after { display: none; }
.grid.el-table--border .el-table__cell,
.grid.el-table--border .el-table-fixed-column--left.is-last-column.el-table__cell { border-right: 0; }
/* 发货看板的表头只有一层（2026-10-08：「希望不要再出现这种第三层的表头」）：以前两层表头上一层底下那条括号线随之拿掉 */
.grid th.el-table__cell {
  padding: 8px 0 9px; font-size: 12px; font-weight: 500; vertical-align: top;   /* 名字一排对齐，底下那行小字另一排 */
  border-bottom: 1px solid var(--line) !important;
}
/* 每一格两边留的空：发货看板那张表每一列一样（app.js 的 COL_PAD，经 --col-pad 给；张洋 2026-10-14「同样都是列，为什么有的列
   距离分割线近有的远？……你取2者折衷的距离统一一下」），别的表（货号资料、借调记录）没给照旧 10 */
.grid th.el-table__cell > .cell { white-space: nowrap; padding: 0 var(--col-pad, 10px); line-height: 18px; }
.grid td.el-table__cell { padding: 7px 0; font-size: 13px; }
.grid td.el-table__cell > .cell { padding: 0 var(--col-pad, 10px); line-height: 19px; }
/* 钉在左边的最后一列（发货仓）右边一条竖线，钉住的几列当左边的表头（2026-10-08 17:52「发货仓的右边最好加一条竖线」） */
.grid .el-table__cell.c-split { border-right: 1px solid var(--line); }
/* 人在表头上加的分隔线（2026-10-13「可以在右边新增一条分割的线」）：那一列右边一条竖线，跟锁定那条一个样子 */
.grid .el-table__cell.c-div { border-right: 1px solid var(--line); }
/* 勾选框那一列窄成 34、两边各 10；紧挨着它的那一格左边距只留 4（2026-10-12 14:24 他圈着勾选框两边「留白多」）。
   表头用同一个 class，表头的字跟数据的左边对齐 */
.grid .el-table__cell.c-pick > .cell { padding: 0 10px; }
/* 数据行那一格：勾选框外面还包了一层（.pick，左右各 4，免得点偏了点到整行），比 34 减两边 10 剩下的 14 宽，
   放不下的那一截被表格的省略号顶成一个小黑点，贴在货号左下角——张洋 2026-10-12 16:22「货号左边的小点是什么东西 给我去掉」。
   这一格不留边、不出省略号，勾选框居中 */
.grid td.el-table__cell.c-pick > .cell { padding: 0; text-overflow: clip; display: flex; justify-content: center; }
.grid .el-table__cell.c-lead > .cell { padding-left: var(--col-lead, 4px); }
/* 最右边那一格空列（表比各列加起来宽时多出来的都在这里，各列照量出来的宽；2026-10-15「我说了一万遍统一统一」） */
.grid .el-table__cell.c-fill > .cell { padding: 0; }
/* 产品信息、发货仓两格挨着时中间各少一点（app.js 的 PAIR_TIGHT；张洋 2026-10-15「留白有点多，稍微再靠近一点，大概3-5个像素试试」） */
.grid .el-table__cell.c-pair-l > .cell { padding-right: calc(var(--col-pad, 10px) - var(--pair-half, 0px)); }
.grid .el-table__cell.c-pair-r > .cell { padding-left: calc(var(--col-pad, 10px) - var(--pair-half, 0px)); }
/* 列宽量好之前（刚打开页面那一下）表先不露：不然先按估的宽摆一下、再跳到量好的宽 */
.grid.msr-wait .el-table__inner-wrapper { visibility: hidden; }
.grid .el-table__row { cursor: pointer; }
.grid .el-table__row.is-picked > td.el-table__cell { background: var(--row-picked); }
.grid .el-table__empty-text { color: var(--text-3); }
.grid .pick { display: inline-flex; padding: 2px 4px; cursor: default; }
.grid .el-table-fixed-column--left.is-last-column::before { box-shadow: inset 10px 0 8px -8px rgba(16, 48, 44, .12); }

/* 表头：一行是名字（点它排序）；合成的那一格第二行写上下两行各是什么，点哪个按哪一行排；箭头只在正在排的那个上。
   每一列居中（2026-10-08 14:49「希望每一列都可以居中 标题，小标题，值」） */
.th { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
.th.al-center { align-items: center; text-align: center; }
.th-n, .lgb-tbl th.el-table__cell > .cell { font-size: 12px; font-weight: 600; color: var(--text-2); }
.th-s { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-4); }
/* 发货看板那张表的表头：上下两行隔 10。能拖动的那几列一直是这个样子——它们的 .mv 类跟「移至状态」那个小框的 .mv 撞了名、带上了 10 的间距；
   手写的发货申请 / 借调申请 / 复核三列、没有改列权限的人看到的表头原来是 1，第二行比别的列高 9 像素（2026-11-12 页面评审量出来的）。
   这里写明，都按 10；调拨账本那几张表（.ptab）照旧 */
.grid:not(.ptab) .th { gap: 10px; }
.th-k {
  appearance: none; border: 0; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap;
}
.th-k:hover { color: var(--text); }
.th-k.on { color: var(--accent); }
/* 「平台」「公司」小标签：表头、显示列、手机上那一行同一个样子（ScopeTag） */
.sct {
  display: inline-flex; align-items: center; flex: none; height: 16px; padding: 0 5px; margin-left: 4px; border-radius: 4px;
  font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .02em; white-space: nowrap; vertical-align: 1px;
}
.sct.pf { background: var(--sc-pf-bg); color: var(--sc-pf-fg); }
.sct.co { background: var(--sc-co-bg); color: var(--sc-co-fg); }
.th-k .sct { margin-left: 2px; }
.cp-i .sct { margin-left: 0; }
/* 能点排序的标题（单独一列、发货仓）跟不能点的一样粗、一样深（2026-10-08：每一列标题一个样） */
.th-k.th-n { font-size: 12px; font-weight: 600; color: var(--text-2); }
.th-k.th-n:hover { color: var(--text); }
.th-k.th-n.on { color: var(--accent); }
.th-k:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
.th-ar { width: 12px; height: 12px; }
.th-dot { color: var(--text-4); opacity: .55; }

/* 一格两行：上一行主数，下一行小一号、浅一档。两行各 22 高、各自上下居中，一行里每一格的上下两行横着对得齐
   （2026-10-08 14:49「每一个条目的上下2行也可以对齐」）；放不下的字省略，标签不省略 */
.st { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.st-a, .st-b {
  display: flex; align-items: center; justify-content: center; gap: 4px; height: 22px; max-width: 100%; min-width: 0;
  white-space: nowrap;
}
.st-a { font-size: 13px; color: var(--text); line-height: 20px; }
.st-b { font-size: 12px; color: var(--text-3); line-height: 20px; }
.ln { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 手机卡片上货号、品名后面的标签小一号（像标题旁边的小徽章） */
.mrow-t .tg { height: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; }
.ln.sku { font-weight: 600; letter-spacing: .01em; }
/* 货号点了就筛选，样子照旧是普通的字（张洋 2026-10-08 17:42：「不需要设计额外的样式，就普通的文字即可」）：
   按钮的边框、底色、内边距都去掉，只留键盘选中时那一圈 */
.ln.plain {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; color: inherit;
  font-family: inherit; font-size: inherit; line-height: inherit; text-align: left; cursor: pointer;
}
.ln.plain:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
/* 货号 + 右边的 new（张洋 2026-10-14 第 5 条「在货号的右边显示一个小一点的带边框的透明底的new标签。也可以点击后筛选」）：
   比别的标签小一号、透明底、细边框；点了只看新品，选上的那个边框变粗 */
.sku-l { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.newtag {
  appearance: none; margin: 0; font: inherit; flex: none; display: inline-flex; align-items: center;
  height: 15px; padding: 0 4px; border: 1px solid var(--hue-green); border-radius: 4px; background: transparent;
  color: var(--hue-green); font-size: 10px; font-weight: 600; line-height: 13px; letter-spacing: .02em;
}
button.newtag { cursor: pointer; }
button.newtag:hover { background: var(--hue-green-bg); }
button.newtag.on { box-shadow: 0 0 0 1px var(--hue-green); }
button.newtag:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 详情标题里品名后面那一个：跟品名隔开一点、跟字的中线对齐 */
.dt-name .newtag { margin-left: 8px; vertical-align: 2px; }

/* 量列宽用的那一份（app.js 的 ColMeasure）：用表里同一个组件画在页面外面、看不见、不占地方，量完就清空。
   字号、行高照表里的格子（td 13 号、表头 12 号）；长字最多量到 --text-max，品名那一行不量（不撑宽） */
.msr { position: fixed; left: -10000px; top: 0; visibility: hidden; pointer-events: none; contain: layout style; }
.msr-j { display: block; white-space: nowrap; }
.msr-c, .msr-h { display: inline-block; vertical-align: top; white-space: nowrap; }
.msr-c { font-size: 13px; line-height: 19px; }
.msr-h { font-size: 12px; font-weight: 500; line-height: 18px; }
.msr .txt { max-width: var(--text-max); }
.msr-nob .st-b { display: none; }

/* ══════════════════════════════════════════════════════════════════
   六之二、表里的值（2026-10-08 参考图一 / 二 / 三：Refero 的状态块、ck22 的 dev / office 标签、日志表的 403 / PASS）
   一套小标签：高 20、圆角 6、淡底 + 同色深字、12 号半粗；颜色经 --chip-bg / --chip-fg 给（平台 / 店长按钮 .wtag 的颜色由 app.js 的 hueVars 给）
   ══════════════════════════════════════════════════════════════════ */
.chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 20px; padding: 0 7px; border-radius: 4px;
  font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; vertical-align: middle;
  background: var(--chip-bg, var(--tg-neutral-bg)); color: var(--chip-fg, var(--tg-neutral-fg));
}
.chip .ic { width: 12px; height: 12px; flex: none; }
.chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip.mth { --chip-bg: var(--tag-bg); --chip-fg: var(--tag-text); }   /* 发货方式：ck6 那种浅青标签 + 走法图标 */
.chip.note { --chip-bg: var(--hue-amber-bg); --chip-fg: var(--hue-amber); }                     /* 要留意 */
.chip.bad { --chip-bg: var(--hue-rose-bg); --chip-fg: var(--hue-rose); font-weight: 600; }        /* 数据异常、到货前缺口（参考图二的 403） */
.chip.warn { --chip-bg: var(--tone-warn-bg); --chip-fg: var(--tone-warn); }                       /* 件数待填 */
.chip.grade { min-width: 24px; justify-content: center; }
/* 表里会点着筛选的那几种标签（操作标记、优先级、季节备货、公司 / 平台新品）：参考图三 Refero——淡底、接近黑的字、
   4 像素圆角。点了只看这一种，选上的那个外面一圈主色细线（跟筛选条上的标签对上）；鼠标停上去压一层浅色 */
.tg {
  appearance: none; border: 0; margin: 0; font: inherit;
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 4px; flex: none;
  font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; vertical-align: middle;
  background: var(--tg-bg, var(--tg-neutral-bg)); color: var(--tg-fg, var(--tg-neutral-fg));
}
button.tg { cursor: pointer; transition: box-shadow .15s ease-out; }
button.tg:hover { box-shadow: inset 0 0 0 999px var(--tg-hover); }
button.tg.on { box-shadow: 0 0 0 1.5px var(--accent); }
button.tg.on:hover { box-shadow: 0 0 0 1.5px var(--accent), inset 0 0 0 999px var(--tg-hover); }
button.tg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tg.rule { --tg-bg: var(--tg-neutral-bg); --tg-fg: var(--tg-neutral-fg); }
.tg.ai { --tg-bg: var(--tg-violet-bg); --tg-fg: var(--tg-violet-fg); }
.tg.manual { --tg-bg: var(--tg-amber-bg); --tg-fg: var(--tg-amber-fg); }
.tg.season { --tg-bg: var(--tg-blue-bg); --tg-fg: var(--tg-blue-fg); }
.tg.cnew { --tg-bg: var(--tg-green-bg); --tg-fg: var(--tg-green-fg); }
.tg.pnew { --tg-bg: var(--tg-mint-bg); --tg-fg: var(--tg-mint-fg); }
/* 发货性质（2026-10-12 14:24「有缺口补货，冬季备货，夏季备货，防灾备货，平台新品，公司新品（标签展示）」）：冬季备货用上面季节备货
   那个蓝，公司新品、平台新品照上面两个；有缺口补货橙、夏季备货黄、别的季节货天蓝、防灾备货靛蓝。一格里几个标签挨着、隔 4 */
.tgs { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; }
.tg.n-gap { --tg-bg: var(--tg-orange-bg); --tg-fg: var(--tg-orange-fg); }
.tg.n-summer { --tg-bg: var(--tg-yellow-bg); --tg-fg: var(--tg-yellow-fg); }
.tg.n-season { --tg-bg: var(--tg-sky-bg); --tg-fg: var(--tg-sky-fg); }
.tg.n-disaster { --tg-bg: var(--tg-indigo-bg); --tg-fg: var(--tg-indigo-fg); }
/* 备货充足（2026-10-12 16:22「性质再加上一个备货充足」）：什么都不用补的那一种，最淡的灰底、常规粗细，比上面几种退后一档 */
.tg.n-enough, .tg.dv-gone { --tg-bg: var(--surface-3); --tg-fg: var(--text-2); font-weight: 400; }
/* 更新记录的上一行：正常更新只写字、不加底色（张洋 2026-10-14 第 1 条「正常更新就直接显示文字就好了，不加灰色底色」）；
   数据异常照下面那个淡红；数据缺失淡黄 + 一个提示图标（缺参数、下不了判断，比数对不上轻一档） */
.upd-ok {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; font-size: 12px; font-weight: 400;
  line-height: 20px; color: var(--text-2); white-space: nowrap;
}
button.upd-ok { cursor: pointer; border-radius: 3px; }
button.upd-ok:hover { color: var(--text); }
button.upd-ok.on { color: var(--accent); font-weight: 600; }
button.upd-ok:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tg.dmiss { --tg-bg: var(--tg-yellow-bg); --tg-fg: var(--tg-yellow-fg); gap: 3px; padding-left: 5px; }
.tg.dmiss .ic { width: 12px; height: 12px; flex: none; }
/* 排柜（操作记录那一格的下一行）：规则 / AI / 人工照上一行操作标记那三种颜色；待定最淡、虚线框；锁定薄荷绿 + 一把锁 */
.tg.lm-wait { --tg-bg: transparent; --tg-fg: var(--text-3); font-weight: 400; box-shadow: inset 0 0 0 1px var(--line); }
.tg.lm-lock { --tg-bg: var(--tg-mint-bg); --tg-fg: var(--tg-mint-fg); gap: 3px; padding-left: 5px; }
.tg.lm-lock .ic { width: 12px; height: 12px; flex: none; }
/* 发货排柜确认（张洋 2026-10-15《发货优化》第 1 条：上一行发货、下一行排柜状态）：不发货、待定只写字（大多数条目是它们，不抢眼）；
   发货那一行 2026-10-23 起写发货方式：跟「发货安排」那一格的走法标签（.chip.mth）同一个浅青 + 走法图标，做成能点的 .tg；
   预排柜淡黄、排柜确定薄荷绿带锁（跟排柜那一格的「锁定」一个颜色）、已装柜绿带箱子——走得越远颜色越定 */
.sx-q {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; font-size: 12px; font-weight: 400;
  line-height: 20px; color: var(--text-3); white-space: nowrap; cursor: pointer; border-radius: 3px;
}
.sx-q:hover { color: var(--text); }
.sx-q.on { color: var(--accent); font-weight: 600; }
.sx-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tg.sx { gap: 3px; }
.tg.sx .ic { width: 12px; height: 12px; flex: none; }
.tg.sx-pre { --tg-bg: var(--tg-yellow-bg); --tg-fg: var(--tg-yellow-fg); }
.tg.sx-lock { --tg-bg: var(--tg-mint-bg); --tg-fg: var(--tg-mint-fg); padding-left: 5px; }
.tg.sx-in { --tg-bg: var(--tg-green-bg); --tg-fg: var(--tg-green-fg); padding-left: 5px; }
.tg.sx-mth { --tg-bg: var(--tag-bg); --tg-fg: var(--tag-text); padding-left: 5px; }
/* 数据异常（操作记录那一格的下一行）：淡红底 + 一个红色的提示图标 */
.tg.abn { --tg-bg: var(--tg-rose-bg); --tg-fg: var(--tg-rose-fg); gap: 3px; padding-left: 5px; }
.tg.abn .ic { width: 12px; height: 12px; flex: none; color: var(--abn-ic); }
/* 产品类型（产品分类那一格的下一行）：最淡的灰底、常规粗细，比上面几种标签退后一档 */
.tg.ptype { --tg-bg: var(--surface-3); --tg-fg: var(--text-2); font-weight: 400; }
/* 优先级：照参考图三的 Impact 抄——浅灰底、一个带高光的圆点 + 字（低绿、中黄、高红；颜色从图上取的） */
.tg.prio { padding-left: 5px; }
.tg.prio .dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, var(--dot-hi) 0, var(--dot) 58%, var(--dot-lo) 100%);
  box-shadow: inset 0 -.5px 1px rgba(0, 0, 0, .18);
}
.tg.prio.hi { --dot: #d33124; --dot-hi: #ef6a5f; --dot-lo: #b3271c; }
.tg.prio.mid { --dot: #f7d149; --dot-hi: #fcec8c; --dot-lo: #e2b52a; }
.tg.prio.lo { --dot: #51b036; --dot-hi: #86dc6a; --dot-lo: #3e8f29; }
.tnum { font-variant-numeric: tabular-nums; }

/* 平台名 + 店长名：看上去是一个按钮（平台的浅底 + 同色一圈很淡的细边），两个名字挨着、中间不画线，两半分开点。
   只选了平台：平台那一半实心填上平台色、字变白（深色主题字变深，--on-hue）；选了店长（等于平台也选上）：整个按钮实心、
   外圈细边去掉，看上去是一整个按下的按钮。鼠标停上去那一半压一层浅色。 */
.wtag {
  position: relative; display: inline-flex; align-items: stretch; max-width: 100%; min-width: 0; height: 22px;
  border-radius: 4px; vertical-align: middle; background: var(--chip-bg); color: var(--chip-fg);
  transition: background-color .15s ease-out, color .15s ease-out;
}
.wtag::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid currentColor; opacity: .18;
  pointer-events: none; transition: opacity .15s ease-out;
}
.wtag.all { background: var(--chip-solid); color: var(--on-hue); }
.wtag.all::after { opacity: 0; }
.seg {
  appearance: none; border: 0; margin: 0; font: inherit; cursor: pointer;
  display: inline-block; background: transparent; color: inherit;
  font-size: 12px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
}
.seg.plat { flex: none; font-weight: 600; padding: 0 3px 0 8px; border-radius: 4px 0 0 4px; }
.seg.who { flex: 0 1 auto; min-width: 0; font-weight: 500; padding: 0 8px 0 3px; border-radius: 0 4px 4px 0; }
.seg:only-child { padding: 0 8px; border-radius: 4px; }
.seg.on { background: var(--chip-solid); color: var(--on-hue); }
.seg:hover { box-shadow: inset 0 0 0 999px var(--seg-hover); }
.seg.on:hover, .wtag.all .seg:hover { box-shadow: inset 0 0 0 999px var(--seg-hover-on); }
.seg:focus-visible { outline: 2px solid var(--chip-solid); outline-offset: 1px; position: relative; z-index: 1; }

/* 数：件数加粗；0 和空浅一档；可售天数一块浅青的小块；日期一个圆角小框（参考图一的「12 feb」） */
.num { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.num.sub { font-size: 12px; font-weight: 400; color: var(--text-3); }
.num.z { font-weight: 400; color: var(--text-4); }
.num .u { margin-left: 2px; font-size: 11px; font-weight: 400; color: var(--text-3); }
/* 发货安排那一格定了几种走法的下一行：一种一个件数，「/」隔开（2026-10-12 16:22「下行分别展示xx件/xx件/xx件」）。
   类名别叫 .pq：参数设置页的货号搜索框是 .pq { width: 240px }，10-12 到 10-14 这一行跟它重名、被撑成 240 宽，
   发货安排那一列因此宽出七十多像素（张洋 2026-10-14「为什么发货安排这一列留白那么多？？」） */
.st-b.plan-qty { gap: 0; }
.pq-sep { margin: 0 4px; font-style: normal; color: var(--text-4); font-size: 12px; }
.pq-wait { font-size: 12px; color: var(--tone-warn); }
.nil { color: var(--text-4); }
.txt { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
.txt.sub { color: var(--text-3); }
.dchip {
  display: inline-flex; align-items: baseline; gap: 2px; height: 20px; padding: 0 6px; border-radius: 4px;
  font-size: 12px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--days-bg); color: var(--days-fg);
}
.dchip small { font-size: 11px; font-weight: 500; opacity: .75; }
.dchip.z { background: var(--surface-3); color: var(--text-4); }
/* 可售天数按参数设置里的样式上色（webapp/display.py；张洋 2026-10-12 14:24「可以在参数设置里修改可售天数的样式 /
   可以改成比如日本可售天数低于多少天改成黄底红字展示」）：从上往下第一条对上的那一种。写在 .z 后面，0 天对上了也照这个颜色 */
.dchip.ds-yr { background: var(--ds-yr-bg); color: var(--ds-yr-fg); }
.dchip.ds-rw { background: var(--ds-rw-bg); color: var(--ds-rw-fg); }
.dchip.ds-rose { background: var(--ds-rose-bg); color: var(--ds-rose-fg); }
.dchip.ds-orange { background: var(--tg-orange-bg); color: var(--tg-orange-fg); }
.dchip.ds-green { background: var(--tg-green-bg); color: var(--tg-green-fg); }
.dchip.ds-blue { background: var(--tg-blue-bg); color: var(--tg-blue-fg); }
.dchip.ds-gray { background: var(--surface-3); color: var(--text-4); }
.dtag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 4px; box-sizing: border-box;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 发货仓那一格的第二行「可用 / 待检」（他图上写的「100/0」）：可用加粗；待检大于 0 是黄的（到了深圳还没质检） */
.stk { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; line-height: 20px; color: var(--text-4);
       font-variant-numeric: tabular-nums; white-space: nowrap; }
.stk b { font-size: 13px; font-weight: 600; color: var(--text); }
.stk b.z { font-weight: 400; color: var(--text-4); }
.stk i, .stk em { font-style: normal; }
.stk em.warn { color: var(--tone-warn); font-weight: 600; }

.gate { padding: 48px 16px; }

/* 手机：一行一条，同样只用细灰线隔开（不给每条加框） */
.mlist { height: 100%; overflow-y: auto; }
.m-pick { padding: 4px 0 8px; border-bottom: 1px solid var(--line-2); }
.mrow { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.mrow.picked { background: var(--row-picked); margin: 0 -8px; padding: 12px 8px; border-radius: 8px; }
.mrow-h { display: flex; gap: 10px; align-items: flex-start; }
.mrow-t { flex: 1; min-width: 0; }
.mrow-t .sku { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mrow-t .nm { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--text-2); }
.mrow-t .wh { margin-top: 4px; }
.mrow-t .nt { margin-top: 4px; }
.mrow-t .sku .chip { font-size: 12px; }
.mrow-t .mths { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mrow-t .mths .chip { font-size: 12px; }
/* 手机上一项一行（数前面带着「可用 / 待检」这种字，两项并一行放不下）；宽一点的屏一行两项 */
.mrow-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 5px 24px; margin-top: 8px; padding-left: 26px; }
.cg { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; min-width: 0; }
.cg .k { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg .k { flex: none; }
.cg .v { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
         min-width: 0; display: flex; justify-content: flex-end; }
.cv2 { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
/* 发货安排定了几种走法的：放不下就折行、靠右（不往卡片外面撑） */
.cv2.wrap { flex-wrap: wrap; justify-content: flex-end; white-space: normal; }
.cv-k { color: var(--text-3); }
.cv-dot { font-style: normal; color: var(--text-4); }
.num.wq { color: var(--tone-warn); font-weight: 600; }
.m-pager { justify-content: center; margin: 8px 0; }

/* ══════════════════════════════════════════════════════════════════
   七、抽屉与对话框（状态设置 / 一行的详情 / 操作记录 / 设置发货 / 常用筛选）
   ══════════════════════════════════════════════════════════════════ */
.sp-drawer .el-drawer__header { margin-bottom: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sp-drawer .el-drawer__title { font-size: 15px; font-weight: 600; color: var(--text); }
.sp-drawer .el-drawer__body { padding: 16px 20px; }
.sp-drawer .el-drawer__footer { padding: 12px 20px; border-top: 1px solid var(--line); }
.sp-dialog { border-radius: var(--r-card); }

.ed-sec { margin-bottom: 22px; }
.ed-h { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.ed-sub { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--text-3); }
.ed-empty {
  padding: 8px 10px; margin-bottom: 10px; font-size: 12px; color: var(--text-3);
  background: var(--surface-2); border-radius: var(--r-s);
}
.ed-row { display: flex; align-items: center; gap: 12px; }
.ed-preview { color: var(--text-2); }
.ed-preview b { color: var(--accent); font-variant-numeric: tabular-nums; }
.ed-bad { color: var(--tone-danger); font-size: 12px; }
.ed-foot { display: flex; align-items: center; gap: 8px; }
.ed-foot .el-button { margin-left: 0; }

.cond { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.c-field { width: 176px; flex: none; }
.c-op { width: 108px; flex: none; }
.c-val { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.c-val .el-input-number { width: 110px; }
.c-val .el-select, .c-val .el-date-editor, .c-val .el-input { width: 100%; }
.c-del { flex: none; padding: 4px; }

/* 一条的详情（2026-10-15 起，张洋截图批注「跟首页一样精装修」「整个系统各个页面模块统一标准和风格」）：抽屉底色浅一档，一块一张白卡
   （跟页面上青底 + 白卡同一个道理），块头一个浅底圆里一个图标 + 名字（13.5 / 600），右边小字；数跟看板那张表同一个画法 */
.dt-drawer .el-drawer__body { background: var(--surface-3); padding: 12px; }
.dt { display: flex; flex-direction: column; gap: 10px; }
.dt-card {
  background: var(--surface); border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(16, 48, 44, .06), 0 0 0 1px var(--line-2);
}
.dt-head { padding-bottom: 14px; }
.dt-name { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text); }
.dt-name .tg { margin-left: 6px; vertical-align: 1px; }
.dt-sub { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; font-size: 12px; color: var(--text-3); }
.dt-sub .wtag { flex: none; max-width: 70%; }
.dt-wh { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-st { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 发货安排那张卡：收货仓、领星备货单那几块灰底下面接按钮时隔开（跟上面走法那一行到灰底一样 10） */
.dt-plan .dt-mark + .dt-st { margin-top: 10px; }
.dt-st .el-button { margin-left: 0; }
.dt-gh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.dt-gi {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tone-brand-bg); color: var(--accent);
}
.dt-gi .ic { width: 13px; height: 13px; }
/* 详情里「申请发货」后面那个状态、「本期操作记录」后面几件（一个小灰块）和右边那行小字（2026-10-14 第 6、7 条） */
.dt-gh .dt-rq { margin-left: 2px; }
.dt-gh-n {
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 6px; text-align: center; box-sizing: border-box;
  background: var(--surface-3); color: var(--text-3); font-size: 12px; font-weight: 500; line-height: 18px; font-variant-numeric: tabular-nums;
}
.dt-gh-s { font-size: 12px; font-weight: 400; color: var(--text-4); font-variant-numeric: tabular-nums; }
.plan-k { font-size: 12px; color: var(--text-3); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.kv-i { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 32px; padding: 4px 0;
        border-bottom: 1px solid var(--line-2); font-size: 13px; }
.kv-i .k { color: var(--text-3); white-space: nowrap; }
.kv-i .v { text-align: right; color: var(--text); min-width: 0; }
.kv-i .v.num { font-variant-numeric: tabular-nums; }
.kv-i.wide { grid-column: 1 / -1; }
.kv-i.wide .v { text-align: left; }

/* 库存与销量：行是指标、列是当前平台 / 全公司（表头带看板上那两个小标签）；数跟看板同一个画法（天数是按参数设置上色的小块） */
.mt { width: 100%; border-collapse: collapse; font-size: 13px; }
.mt th { font-size: 12px; font-weight: 600; color: var(--text-2); text-align: center; padding: 0 8px 8px; border-bottom: 1px solid var(--line);
         white-space: nowrap; }
.mt th .sct { margin-left: 0; height: 18px; padding: 0 7px; font-size: 11.5px; }
.mt th:first-child, .mt td:first-child { text-align: left; color: var(--text-2); }
.mt td { height: 34px; padding: 0 8px; text-align: center; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.mt tbody tr:last-child td { border-bottom: 0; }
.mt tbody tr:hover td { background: var(--row-hover); }

/* 操作记录的时间线（详情里「本期操作记录」、右上角「操作记录」同一个样子）：左边一条竖线，一件一个圆点（颜色按这一类事，logTone），
   第一行几点、谁做的，第二行一个标签（做了什么）+ 改了什么；撤销过的那一件淡一档、写「已撤销」 */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl-i { position: relative; padding: 0 0 14px 22px; }
.tl-i::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -2px; width: 2px; border-radius: 1px; background: var(--line); }
.tl-i:last-child { padding-bottom: 0; }
.tl-i:last-child::before { display: none; }
.tl-dot {
  position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  background: var(--surface); border: 3px solid var(--lt-dot, var(--text-4));
}
.tl-h { display: flex; align-items: center; gap: 10px; min-height: 20px; font-size: 12px; color: var(--text-3); }
.tl-t { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-2); font-weight: 500; }
.tl-u { font-style: normal; font-size: 11.5px; color: var(--text-3); background: var(--surface-3); border-radius: 4px; padding: 0 6px; line-height: 18px; }
.tl-a { margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.tl-k { margin-right: 8px; vertical-align: 1px; }
.tl-i.undone .tl-x { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--text-4); }
.tl-i.undone .tl-k { opacity: .6; }
.tl-i.undone .tl-dot { border-color: var(--line); }
.lt-rose { --lt-dot: var(--hue-rose); } .lt-rose .tl-k { --tg-bg: var(--tg-rose-bg); --tg-fg: var(--tg-rose-fg); }
.lt-brand { --lt-dot: var(--brand-solid); } .lt-brand .tl-k { --tg-bg: var(--tone-brand-bg); --tg-fg: var(--accent); }
.lt-mint { --lt-dot: var(--tone-ok); } .lt-mint .tl-k { --tg-bg: var(--tg-mint-bg); --tg-fg: var(--tg-mint-fg); }
.lt-blue { --lt-dot: var(--hue-blue); } .lt-blue .tl-k { --tg-bg: var(--tg-blue-bg); --tg-fg: var(--tg-blue-fg); }
.lt-sky { --lt-dot: var(--hue-sky); } .lt-sky .tl-k { --tg-bg: var(--tg-sky-bg); --tg-fg: var(--tg-sky-fg); }
.lt-violet { --lt-dot: var(--hue-violet); } .lt-violet .tl-k { --tg-bg: var(--tg-violet-bg); --tg-fg: var(--tg-violet-fg); }
.lt-amber { --lt-dot: var(--hue-amber); } .lt-amber .tl-k { --tg-bg: var(--tg-amber-bg); --tg-fg: var(--tg-amber-fg); }
.lt-gray { --lt-dot: var(--text-4); } .lt-gray .tl-k { --tg-bg: var(--tg-neutral-bg); --tg-fg: var(--tg-neutral-fg); }
/* 谁做的：名字前面一个圆（第一个字），程序做的一个芯片图标，经 AI 助手做的名字后面一个紫色的 AI */
.lw { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--text-2); font-size: 12px; }
.lw-av {
  flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 10.5px; font-weight: 600; background: var(--tone-brand-bg); color: var(--accent);
}
.lw-av.bot { background: var(--surface-3); color: var(--text-3); }
.lw-av .ic { width: 11px; height: 11px; }
.lw-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-ai {
  flex: none; height: 16px; padding: 0 5px; border-radius: 4px; font-size: 10.5px; font-weight: 600; line-height: 16px; letter-spacing: .02em;
  background: var(--tg-violet-bg); color: var(--tg-violet-fg);
}

.pd { display: flex; flex-direction: column; gap: 14px; }
.pd-row { display: flex; align-items: center; gap: 12px; }
/* 「top」跟页面顶上标题栏（header.top）撞名会被套上它的左右留白：改叫 al-top */
.pd-row.al-top { align-items: flex-start; }
.pd-k { width: 64px; flex: none; color: var(--text-2); font-size: 13px; line-height: 32px; }
.pd-v { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pd-modes { flex-wrap: wrap; }
/* 设置发货：三种走法各一行（勾上哪几种、每种各自怎么定件数），先后照 空运 → 快船 → 海运 */
.pm { width: 100%; }
.pm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 32px; }
.pm-row:not(.on) .pm-mode { opacity: .45; }
.pm-m { width: 72px; margin-right: 0; }
.pm-m .el-checkbox__label { display: inline-flex; align-items: center; gap: 4px; }
.pm-m .ic { width: 13px; height: 13px; color: var(--text-3); }
.pm-q { width: 96px; }
.pd-hint { font-size: 12px; color: var(--text-3); }
.pd-hint.warn { color: var(--tone-warn); }   /* 登记为强制发货方式的货号（2026-10-14） */
.pd-sum { padding: 8px 10px; border-radius: var(--r-s); background: var(--surface-2); font-size: 12px; color: var(--text-2); }

.plan-now { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
.plan-q { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-n { color: var(--text-2); font-size: 12px; }
.plan-by { color: var(--text-3); font-size: 12px; }

/* 右上角「操作记录」：时间线（.tl，跟详情里本期操作记录同一份）里多三样——改了什么一行一句（小字、前面一个小点）、
   跟着自动执行的那一遍规则挂在下面（浅底一小块）、撤销按钮或不能撤销的原因 */
.lg-t { font-weight: 600; }
.lg-ls { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-2); }
.lg-ls li { position: relative; padding-left: 10px; overflow-wrap: anywhere; }
.lg-ls li::before { content: ""; position: absolute; left: 1px; top: .72em; width: 4px; height: 4px; border-radius: 50%; background: var(--text-4); }
.tl-i.undone .lg-ls { color: var(--text-4); text-decoration: line-through; }
.lg-c { margin: 6px 0 0; padding: 4px 10px; border-radius: 6px; background: var(--surface-2); display: flex; flex-wrap: wrap; gap: 2px 10px;
        font-size: 12px; color: var(--text-3); }
.lg-ca { color: var(--text-2); font-weight: 600; }
.lg-f { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.lg-why { font-size: 12px; color: var(--text-4); }

/* ══════════════════════════════════════════════════════════════════
   八、参数设置页（2026-10-09 重排，照 Nextcloud 那套设置页的结构：左边一列目录（跟着滚动亮起当前那一节），右边一节一张白卡；
   一行一个参数：左边名字 + 一句意思（最多两行），右边值和单位（单位写在框里）；改过的框变成浅黄、名字后面写原值；
   底部一条保存栏逐项写「旧值 → 新值」，一次保存）
   ══════════════════════════════════════════════════════════════════ */
.setp { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 4px max(0px, calc(20px - var(--sbw, 0px))) 104px 20px; }
.set-wrap { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 22px; max-width: 1180px; align-items: start; }
.set-nav {
  position: sticky; top: 4px; display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--glass); border-radius: 14px;
}
.sn-i {
  appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px;
  color: var(--on-bg-2); font-size: 13px; white-space: nowrap;
}
.sn-i:hover { background: var(--glass-hover); color: var(--on-bg); }
.sn-i.on { background: var(--surface); color: var(--text); font-weight: 600; }
.sn-i:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sn-d { width: 6px; height: 6px; border-radius: 50%; background: var(--tone-warn); margin-left: auto; }
.set-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sset { scroll-margin-top: 8px; }
.sset-h { padding: 0 4px 10px; }
.sset-t { margin: 0; font-size: 15px; font-weight: 600; color: var(--on-bg); }
.sset-d { margin: 3px 0 0; font-size: 12px; color: var(--on-bg-2); }
.sset-card { background: var(--surface); border-radius: var(--r-card); padding: 4px 20px; }
.prm {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line-2);
}
.prm:last-child { border-bottom: 0; }
.prm-n { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.prm-was {
  font-size: 11px; font-weight: 500; color: var(--tone-warn); background: var(--tone-warn-bg);
  padding: 0 6px; border-radius: 4px; line-height: 18px; font-variant-numeric: tabular-nums;
}
.prm-w {
  margin-top: 3px; max-width: 620px; font-size: 12px; color: var(--text-3); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prm-v { display: flex; justify-content: flex-end; min-width: 140px; }
.prm.ro .prm-v { max-width: 520px; }
/* 一个数 + 单位，单位写在框里 */
.nu {
  display: inline-flex; align-items: center; height: 32px; padding-right: 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  transition: border-color .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out;
}
.nu:hover { border-color: var(--el-border-color-hover); }
.nu:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--tone-brand-bg); }
.nu .el-input-number { width: 92px; }
.nu .el-input__wrapper, .nu .el-input__wrapper.is-focus, .nu .el-input__wrapper:hover { box-shadow: none !important; background: transparent; padding: 0 6px 0 8px; }
.nu .el-input__inner { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.nu em { font-style: normal; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.nu.dirty { border-color: var(--tint-warn-line); background: var(--tint-warn); }
.nu.sm { height: 30px; padding-right: 8px; }
.nu.sm .el-input-number { width: 58px; }
/* 物流时效：一张走法 × 分段的小表，「全程」一列加粗、浅灰底 */
.tscroll { overflow-x: auto; }
.lt { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; font-size: 13px; }
.lt th {
  padding: 14px 8px 10px; font-size: 12px; font-weight: 600; color: var(--text-2); text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--line-2); vertical-align: bottom;
}
.lt th small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--text-4); }
.lt td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--line-2); }
.lt tbody tr:last-child td { border-bottom: 0; }
.lt .lt-m { text-align: left; width: 84px; }
.lt .lt-sum { background: var(--surface-2); min-width: 64px; }
.lt td.lt-sum b { font-size: 16px; color: var(--accent); font-variant-numeric: tabular-nums; }
.lt td.lt-sum small { margin-left: 2px; font-size: 12px; color: var(--text-3); }
.lt .lt-x { border-left: 1px dashed var(--line); }
.lt-notes {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; padding: 12px 0 14px;
  border-top: 1px solid var(--line-2); font-size: 12px;
}
.lt-notes dt { color: var(--text-2); font-weight: 600; }
.lt-notes dd { margin: 0; color: var(--text-3); }
/* 运费单价与起发量：两张小表并排 */
.sset-card.dicts { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.dbox { padding: 16px 20px 12px; min-width: 0; }
.dbox + .dbox { border-left: 1px solid var(--line-2); }
.dbox-t { font-size: 13px; font-weight: 600; }
.dbox-w { margin: 3px 0 10px; min-height: 18px; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.drow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-2); }
.drow-k { color: var(--text-2); }
.pu { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ro { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.kvp {
  display: inline-flex; align-items: center; gap: 2px; font-size: 12px; padding: 0 8px; line-height: 22px; border-radius: 4px;
  background: var(--surface-3); color: var(--text-2);
}
.kvp .ic { width: 11px; height: 11px; color: var(--text-4); transform: rotate(45deg); }
.ps { width: 160px; }
.pl { width: 300px; }
.pq { width: 240px; }
.pstat { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.pstat b { color: var(--text); font-variant-numeric: tabular-nums; }
.pstat b.warn, .miss { color: var(--tone-warn); font-weight: 600; }
.dim { width: 72px; }
.prod-tb { display: flex; align-items: center; gap: 8px; padding: 16px 0 12px; }
.prod-tb .el-button { margin-left: 0; }
/* 参数设置里的两张登记表（特殊发货产品登记、新品登记，2026-10-14）：跟货号资料同一种表；类名一律 rg- 打头（styles.css 全是全局类名，
   短名会撞——2026-10-14 .pq 撞过一次） */
.rg-q { width: 240px; }
.rg-off { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 4px;
  font-size: 11px; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line); vertical-align: 1px; white-space: nowrap; }
.rg-plats { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.tg.sp-hard { --tg-bg: var(--tg-amber-bg); --tg-fg: var(--tg-amber-fg); }
.tg.sp-soft { --tg-bg: var(--tg-blue-bg); --tg-fg: var(--tg-blue-fg); }
.tg.sp-ex { --tg-bg: var(--tg-violet-bg); --tg-fg: var(--tg-violet-fg); }
.rg-cnt { margin-left: auto; color: var(--text-3); }
.rg-cnt b { color: var(--accent); font-variant-numeric: tabular-nums; }
.rg-tip { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-k .rg-tip { margin-left: 4px; }
.rg-pre { display: flex; gap: 8px; }
.rg-pre .el-button { flex: none; margin-left: 0; min-width: 88px; }
.rg-ex { margin-top: 14px; }
.rg-ex-h { appearance: none; border: 0; background: transparent; padding: 4px 0; margin-bottom: 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); }
.rg-ex-h:hover { color: var(--text); }
.rg-ex-h .ic { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .15s ease-out; }
.rg-ex-h .ic.open { transform: none; }
.rg-ex-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.rg-form { display: flex; flex-direction: column; gap: 16px; }
.rg-modes { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rg-modes .el-radio { height: auto; margin-right: 0; }
.rg-modes small { margin-left: 8px; font-size: 12px; color: var(--text-3); }
.rg-opt { font-weight: 600; }
.rg-opt-n { margin-left: 10px; font-size: 12px; color: var(--text-3); }
.rg-plat-pick { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.rg-plat-pick .el-checkbox { margin-right: 0; }
.sset .m-pager { margin: 10px 0 14px; }
/* 参数设置 · 可售天数样式（2026-10-12）：一条一行「几号 · 哪种可售天数 · 平台/公司 · 低于/不低于/介于 · 几天 · 显示为 · 颜色 · 示例」，
   行尾上移 / 下移 / 删除；底下一块预览：每种可售天数一行，从 7 天到 180 天几个数按改着的规则上色 */
.dsr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.dsr-no { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-3); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dsr .el-select { flex: none; }
.dsr-col { width: 136px; }
.dsr-sc { width: 112px; }
.dsr-op { width: 88px; }
.dsr-st { width: 124px; }
.dsr .nu .el-input-number { width: 64px; }
.dsr-to, .dsr-arrow { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.dsr-opt { display: inline-flex; align-items: center; gap: 8px; }
.dsr-acts { display: inline-flex; gap: 2px; }
.dsr-b {
  appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--text-4);
}
.dsr-b:hover:not(:disabled) { color: var(--accent); background: var(--tone-brand-bg); }
.dsr-b.del:hover { color: var(--tone-danger); background: var(--tone-danger-bg); }
.dsr-b:disabled { opacity: .35; cursor: default; }
.dsr-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dsr-b .ic { width: 14px; height: 14px; }
.dsp { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.dsp-h { font-size: 12px; font-weight: 600; color: var(--text-3); }
.dsp-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dsp-k { flex: none; width: 128px; display: inline-flex; align-items: center; font-size: 13px; color: var(--text-2); }
.dsp-v { display: flex; flex-wrap: wrap; gap: 6px; }
/* 参数设置 · 产品分类显示（2026-10-12）：大 / 中 / 小类目三颗开关，底下一张「完整分类 → 看板上显示为」的示例表 */
.cats { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; }
.cats-k { font-size: 13px; color: var(--text-2); }
.cat-ex { width: 100%; border-collapse: collapse; font-size: 13px; }
.cat-ex th { text-align: left; font-size: 12px; font-weight: 500; color: var(--text-3); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.cat-ex td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); color: var(--text-2); }
.cat-ex td b { font-weight: 600; color: var(--text); }
.cat-ex th:first-child, .cat-ex td:first-child { width: 55%; }
/* 参数设置 · 优先级规则：适用范围一行，高 / 中 / 低各一段（条件的写法同状态设置），底栏左边写保存后各几条 */
.sset-card.prs { padding: 16px 20px; }
.prs-scope { padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.prs-lv { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.prs-lh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prs-lh + * { margin-top: 10px; }
.prs-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 14px; }
.prs-foot .el-button { margin-left: 0; }
.prs-imp { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; font-variant-numeric: tabular-nums; }
.prs-il { font-size: 12px; color: var(--text-3); }
.prs-imp.live .prs-il { color: var(--accent); font-weight: 600; }
.prs-n { display: inline-flex; align-items: center; gap: 5px; }
.prs-n b { font-size: 16px; font-weight: 600; color: var(--text); }
.prs-n small { font-size: 12px; color: var(--text-3); }
.prs-n em { font-style: normal; font-size: 11px; font-weight: 600; padding: 0 5px; border-radius: 4px; line-height: 16px; }
.prs-n em.up { background: var(--tone-brand-bg); color: var(--accent); }
.prs-n em.down { background: var(--surface-2); color: var(--text-2); }
/* 底部保存栏：浮在页面底部正中 */
.set-save {
  position: fixed; left: 50%; bottom: 20px; z-index: 30; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(980px, calc(100vw - 32px));
  padding: 10px 12px 10px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--bulk-shadow);
}
.set-save .el-button { margin-left: 0; }
.ss-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-l b { font-size: 13px; color: var(--text); }
.ss-items { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-i + .ss-i::before { content: '；'; }
.ss-i s { color: var(--text-4); }
.ss-i .ic { width: 11px; height: 11px; margin: 0 3px; vertical-align: -1px; transform: rotate(45deg); color: var(--text-4); }
.ss-more { margin-left: 6px; color: var(--text-4); }

/* ══════════════════════════════════════════════════════════════════
   八之二、2026-10-07 那份需求文档加的：操作标记、条件的「且 / 或」、执行规则、优先申请、货号资料的筛选与批量修改
   ══════════════════════════════════════════════════════════════════ */
/* 状态条上固定的两个（总览、确定发货）名字后面一把小锁；「执行规则」按钮上待调整的条数 */
.step .slk { width: 11px; height: 11px; opacity: .55; }
/* 船期登记（2026-10-12）：上面一行登记，下面一张表——一班船一行，日子 / 港口 / 方式 / 柜数 / 备注 / 谁登记的 / 改删 */
.sail { display: flex; flex-direction: column; gap: 12px; }
/* 使用说明（2026-10-14 第 2 条）：一行标题能收起；展开是几条短句，浅底、细字，不抢登记那一行的位置 */
.sail-help { border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px 6px; }
.sail-help-h {
  appearance: none; border: 0; background: none; padding: 6px 0; margin: 0; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-2); display: flex; align-items: center; gap: 6px; cursor: pointer; width: 100%; text-align: left;
}
.sail-help-h .ic { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.sail-help-h .sail-help-c { margin-left: auto; transition: transform .15s ease-out; }
.sail-help-h .sail-help-c.open { transform: rotate(180deg); }
.sail-help-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sail-help-b { margin: 0 0 6px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px;
  line-height: 1.6; color: var(--text-2); }
.sail-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.sail-add .el-button { margin-left: 0; }
.sail-date.el-date-editor { width: 128px; }
.sail-port { width: 120px; }
.sail-n { display: inline-flex; align-items: center; gap: 4px; }
.sail-n .el-input-number { width: 84px; }
.sail-note { flex: 1; min-width: 100px; }
.sail-sum { display: flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--text-3); }
.sail-sum b { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; margin: 0 2px 0 4px; }
.sail-st { font-weight: 600; color: var(--text-2); }
.sail-dot { font-style: normal; margin: 0 4px; color: var(--text-4); }
.sail-empty { padding: 14px; border-radius: 10px; border: 1px dashed var(--line); text-align: center; font-size: 13px; color: var(--text-3); }
.sail-list { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.sail-row {
  display: grid; align-items: center; gap: 10px; padding: 9px 12px; min-height: 44px; box-sizing: border-box;
  grid-template-columns: 128px minmax(0, 1fr) 76px 60px minmax(0, 1.3fr) 104px 64px; font-size: 13px; color: var(--text);
}
.sail-row + .sail-row { border-top: 1px solid var(--line-2); }
.sail-row:hover { background: var(--row-hover); }
.sail-row.editing { background: var(--tint-brand); grid-template-columns: 128px minmax(0, 1fr) 112px 86px minmax(0, 1.1fr) 124px; }
.sail-row.editing .sail-c-date.el-date-editor { width: 100%; }
.sail-row.editing .el-input-number { width: 100%; }
.sail-c-date { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sail-c-port, .sail-c-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sail-c-note { color: var(--text-2); }
.sail-c-n { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-2); }
.sail-c-n b { font-size: 14px; color: var(--text); }
.sail-c-by { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-3); }
.sail-c-act { display: inline-flex; justify-content: flex-end; gap: 4px; }
.sail-c-act .el-button { margin-left: 0; }
.sail-c-err { grid-column: 1 / -1; }
.sail-ib { appearance: none; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px; color: var(--text-3); }
.sail-ib .ic { width: 15px; height: 15px; }
.sail-ib:hover { background: var(--surface-3); color: var(--text); }
.sail-ib.bad:hover { background: var(--tone-danger-bg); color: var(--tone-danger); }
.sail-ib:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sail-ib:disabled { opacity: .4; cursor: not-allowed; }
.sail-past-t { appearance: none; border: 0; background: transparent; cursor: pointer; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 6px; font: inherit; font-size: 12px; color: var(--text-3); }
.sail-past-t b { margin: 0 2px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sail-past-t .ic { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .15s ease-out; }
.sail-past-t .ic.open { transform: none; }
.sail-past-t:hover { color: var(--text); background: var(--surface-2); }
.sail-list.past .sail-row:not(.editing) { color: var(--text-3); }
.sail-list.past .sail-c-date, .sail-list.past .sail-c-n b { color: var(--text-3); font-weight: 500; }

/* ══ 状态设置（2026-10-09 重排）：名称 → 排在哪 → 归入条件 → 排除条件 → 说明；底栏左边一个大数 = 保存后本状态几条 ══ */
.se-dialog.el-dialog { padding: 0; }
.se-dialog .el-dialog__header { padding: 16px 24px 12px; margin: 0; border-bottom: 1px solid var(--line-2); }
.se-dialog .el-dialog__title { font-size: 15px; font-weight: 600; }
.se-dialog .el-dialog__body { padding: 18px 24px 8px; max-height: calc(100vh - 12vh - 140px); overflow-y: auto; }
.se-dialog.is-fullscreen .el-dialog__body { max-height: none; }
.se-dialog .el-dialog__footer { padding: 12px 24px 14px; border-top: 1px solid var(--line-2); text-align: left; }
.se-name { display: flex; align-items: center; gap: 10px; }
.se-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hue); flex: none; }
.se-name-in .el-input__wrapper { padding: 2px 12px; }
.se-name-in .el-input__inner { height: 36px; font-size: 16px; font-weight: 600; }
.se-pos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 0 20px; font-size: 12px; color: var(--text-3); }
.se-pos .ic { width: 13px; height: 13px; color: var(--text-4); }
.se-pos b { color: var(--accent); font-variant-numeric: tabular-nums; }
.se-pos-sep { width: 1px; height: 11px; background: var(--line); margin: 0 2px; }
.se-fixed {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-2); font-size: 12px; line-height: 1.6;
}
.se-fixed .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--text-3); }
.se-sec { margin-top: 26px; }
/* 「不参与安排发货」开关：名字和一句说明在左、开关在右（2026-10-14） */
.se-nl { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px;
  border-radius: 10px; background: var(--surface-2); }
.se-nl-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.se-sh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.se-st { font-size: 14px; font-weight: 600; color: var(--text); }
.se-ss { font-size: 12px; color: var(--text-3); }
.se-note {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 7px 10px; border-radius: 8px;
  background: var(--tone-brand-bg); color: var(--accent); font-size: 12px;
}
.se-note .ic { width: 14px; height: 14px; flex: none; }
/* 没有修改权限时的一行说明：状态设置里、参数设置顶上（2026-10-14 三档权限） */
.se-ro, .set-ro {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-2); font-size: 13px;
}
.se-ro { margin-top: 14px; }
.se-ro .ic, .set-ro .ic { width: 14px; height: 14px; flex: none; color: var(--text-3); }
.set-ro { background: var(--surface); }
.se-blank { padding: 12px; margin-bottom: 10px; border-radius: 10px; background: var(--surface-2); color: var(--text-3); font-size: 12px; line-height: 1.55; }
.se-blank.warn { background: var(--tint-warn); color: var(--tone-warn); box-shadow: 0 0 0 1px var(--tint-warn-line) inset; }
.se-add {
  appearance: none; font: inherit; cursor: pointer; width: 100%; height: 38px; margin-top: 8px;
  display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px;
  border: 1px dashed var(--line); background: transparent; color: var(--text-2); font-size: 13px;
  transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}
.se-add:hover { border-color: var(--tone-brand-line); background: var(--tint-brand); color: var(--accent); }
.se-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.se-add .ic { width: 14px; height: 14px; }
.se-foot { display: flex; align-items: center; gap: 8px; }
.se-foot .el-button { margin-left: 0; }
.se-impact { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: default; }
.se-big { font-size: 28px; font-weight: 600; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.se-il { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-3); min-width: 0; text-align: left; }
.se-il b { font-size: 12px; font-weight: 600; color: var(--text-2); }

/* 条件：一组一行（组号 · 条件块 · 删除），组与组之间一条「或」；条件块上列名浅、比成什么深 */
.cgs { display: flex; flex-direction: column; }
.cg-line {
  display: flex; align-items: center; gap: 4px; padding: 8px 6px 8px 0; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
}
.cg-line.warn { border-color: var(--tint-warn-line); background: var(--tint-warn); }
.cg-no { width: 30px; flex: none; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-4); font-variant-numeric: tabular-nums; }
.cg-chips {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: thin; padding-bottom: 1px;
}
.cchip {
  appearance: none; font: inherit; cursor: pointer; flex: none; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 5px; height: 30px; padding: 0 11px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); line-height: 28px;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.cchip:hover { border-color: var(--tone-brand-line); background: var(--tint-brand); }
.cchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cc-f { font-size: 12px; color: var(--text-3); }
.cc-r { font-size: 13px; font-weight: 600; }
.cchip.ro { cursor: default; }
.cchip.ro:hover { border-color: var(--line-2); background: var(--surface-2); }
.cchip.add { align-items: center; border-style: dashed; border-color: var(--line); color: var(--text-3); background: transparent; font-size: 12px; }
.cchip.add .ic { width: 13px; height: 13px; }
.cg-and { flex: none; font-size: 11px; color: var(--text-4); font-weight: 600; }
.cg-or { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.cg-or::before, .cg-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.cg-or span { padding: 0 8px; border-radius: 10px; background: var(--tone-brand-bg); color: var(--accent); font-size: 11px; font-weight: 600; line-height: 18px; }
.cg-del {
  appearance: none; border: 0; background: transparent; cursor: pointer; flex: none; padding: 6px; border-radius: 6px;
  color: var(--text-4); display: grid; place-items: center;
}
.cg-del:hover { color: var(--tone-danger); background: var(--tone-danger-bg); }
.cg-del .ic { width: 15px; height: 15px; }
.cg-warn { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0 30px; font-size: 12px; color: var(--tone-warn); line-height: 1.5; }
.cg-warn .ic { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.ed-flows { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ed-flow {
  display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 6px;
  background: var(--surface-3); color: var(--text-2); font-size: 12px; white-space: nowrap;
}
.ed-flow b { color: var(--accent); font-variant-numeric: tabular-nums; margin-left: 2px; }
.ed-flow-ar { width: 12px; height: 12px; color: var(--text-4); transform: rotate(45deg); }

/* 执行规则的确认：规则范围、会从哪挪到哪 */
.rn-scope { display: flex; align-items: flex-start; gap: 12px; }
.rn-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 5px; }
.rn-chip { font-size: 12px; padding: 1px 9px; border-radius: 9px; background: var(--surface-3); color: var(--text-2); }
.rn-flows { border: 1px solid var(--line-2); border-radius: var(--r-s); }
.rn-flow { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13px; }
.rn-flow + .rn-flow { border-top: 1px dashed var(--line-2); }
.rn-arrow { color: var(--text-4); }
.rn-flow b { color: var(--accent); font-variant-numeric: tabular-nums; }
.rn-flows.sm .rn-flow { padding: 5px 12px; font-size: 12px; }
/* 「清除标记后执行」（2026-10-12）：标了 AI / 人工的有几条、清掉标记以后会挪几条，跟按钮放在一起看 */
.rn-clear { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r-s);
  border: 1px dashed var(--line); }
.rn-ch { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.rn-ch .ic { width: 14px; height: 14px; color: var(--text-3); }
.rn-cs { font-size: 12px; line-height: 1.6; color: var(--text-2); }
.rn-cs b { color: var(--accent); font-variant-numeric: tabular-nums; }
.rn-cs b.warn { color: var(--tone-warn); }
.rn-clear.off .rn-cs { color: var(--text-3); }
.rn-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.rn-foot .el-button { margin-left: 0; }
.pd-sum b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* 优先申请：表里那一列（只有负责人看得到）、手机上那颗按钮、申请的弹窗 */
.rq-cell { display: inline-flex; }
.rq-btn {
  appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  height: 24px; padding: 0 7px 0 9px; border-radius: 4px; border: 1px solid var(--accent); background: var(--surface);
  color: var(--accent); font-size: 12px; font-weight: 600; transition: background-color .15s ease-out;
}
.rq-btn:hover { background: var(--tone-brand-bg); }
.rq-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rq-btn .ic { width: 13px; height: 13px; }
.rq-done {
  appearance: none; font: inherit; cursor: pointer; white-space: nowrap; height: 24px; padding: 0 9px; border-radius: 6px;
  border: 0; background: var(--hue-amber-bg); color: var(--hue-amber); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; transition: box-shadow .15s ease-out;
}
.rq-done:hover { box-shadow: inset 0 0 0 1px var(--hue-amber); }
.rq-done:focus-visible { outline: 2px solid var(--hue-amber); outline-offset: 1px; }
.rq-head { padding: 8px 10px; border-radius: var(--r-s); background: var(--surface-2); }
.pd-row .pd-grow { flex: 1; min-width: 0; }
.rq-sku { font-weight: 600; }
.rq-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.rq-warn { font-size: 12px; color: var(--tone-warn); }
.mrow-s { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }

/* 一条的详情：标记、最近一次是谁 */
/* 操作标记的说明：规则内容 / 备注、操作时间、操作人（一行一项，左边小标签） */
.dt-mark { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--surface-2);
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 12px; line-height: 1.55; }
.dt-mark dt { color: var(--text-4); }
.dt-mark dd { margin: 0; color: var(--text-2); word-break: break-word; }
.dd-cur { margin-left: 8px; font-size: 11px; color: var(--text-4); }
/* 移至状态：填备注的小框 */
.mv { display: flex; flex-direction: column; gap: 10px; }
.mv-to { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.mv-to b { color: var(--text); font-variant-numeric: tabular-nums; }
.mv-l { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.mv-lt { font-size: 13px; font-weight: 600; color: var(--text); }
.mv-ls { font-size: 12px; color: var(--text-4); }

/* 预览才有：头像菜单里「以发货仓负责人身份查看」（2026-10-15 起，原来在顶上那一行黄条里）——现在是谁、换人那个框 */
.who-pop .who-as { margin-left: 8px; padding: 0 6px; border-radius: 4px; background: var(--tone-brand-bg); color: var(--accent); font-size: 12px; }
.who-as-sel { width: 100%; }

/* 货号资料：快捷筛选（缺什么，带个数）、筛选条、批量修改 */
.pquick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pq-b {
  appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 28px;
  padding: 0 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  font-size: 12px; white-space: nowrap;
}
.pq-b .ct { color: var(--text-4); font-variant-numeric: tabular-nums; }
.pq-b.warn .ct { color: var(--tone-warn); font-weight: 600; }
.pq-b:hover { border-color: var(--el-border-color-hover); }
.pq-b.on { background: var(--tone-brand-bg); border-color: var(--tone-brand-line); color: var(--accent); font-weight: 600; }
.pq-b.on .ct { color: var(--accent); }
.pfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.pfilter .el-button { margin-left: 0; }
.pbatch-run {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 6px 12px; border-radius: 10px; font-size: 12px;
  background: var(--tone-warn-bg); color: var(--tone-warn);
}
.pbatch-run .ic { width: 14px; height: 14px; }
.pbulk { margin: 0 0 8px; }
.ptab .el-table__row.is-picked > td.el-table__cell { background: var(--row-picked); }
.pfail { max-height: 180px; overflow: auto; font-size: 12px; color: var(--text-2); }
.pfail-i { padding: 3px 0; border-bottom: 1px dashed var(--line-2); }
.pfail-i b { margin-right: 8px; }

/* ══════════════════════════════════════════════════════════════════
   八之三、2026-10-09：规则模板、显示列（表头拖动 + 选择器）、右下角 AI 助手
   ══════════════════════════════════════════════════════════════════ */
/* 规则模板：状态条右边一颗按钮（写着现在用的是哪个模板），点开是清单 */
.tb-btn.tpl-btn { max-width: 240px; }
.tpl-bt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tpl-btn .chev { width: 13px; height: 13px; opacity: .7; }
.tpl-pop.el-popover.el-popper { padding: 6px; border-radius: 12px; }
.tpl-h { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 10px 6px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.tpl-hn { font-weight: 500; color: var(--text-4); font-variant-numeric: tabular-nums; }
/* 三十八轮：一个流程一整套——菜单顶上一句说明；公司流程 / 我的流程两组（只有有自己的流程时才分组）；
   普通用户只看不切（行不响应） */
.tpl-note { padding: 0 10px 8px; font-size: 12px; color: var(--text-3); line-height: 1.6; }
.tpl-g { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.tpl-gn { font-weight: 400; color: var(--text-4); }
.tpl-tag { flex: none; font-size: 11px; line-height: 18px; padding: 0 6px; border-radius: 4px; background: var(--tone-brand-bg); color: var(--accent); white-space: nowrap; }
.tpl-i.ro { cursor: default; }
.tpl-i.ro:hover { background: transparent; }
.tpl-i.ro.on, .tpl-i.ro.on:hover { background: var(--tone-brand-bg); }
/* 只竖着滚：一行是 100% 宽再加左右留白，原来横着多出 16 像素、底下冒出一条横滚动条
   （张洋 2026-10-12 16:22 截图上圈着它打了个「？」） */
.tpl-list { display: flex; flex-direction: column; gap: 2px; max-height: max(120px, min(300px, calc(100vh - 420px))); overflow-y: auto; overflow-x: hidden; }
.tpl-i {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 38px; padding: 0 6px 0 10px; border-radius: 8px;
  cursor: pointer; color: var(--text); text-align: left;
}
.tpl-i:hover { background: var(--surface-2); }
.tpl-i.on { background: var(--tone-brand-bg); }
.tpl-i:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tpl-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.tpl-c { font-size: 12px; color: var(--text-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tpl-ok { width: 15px; height: 15px; color: var(--accent); }
/* 行尾：改名、用当前流程覆盖、删除。鼠标移到这一行上才显出来 */
.tpl-act {
  appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--text-4); opacity: 0; transition: opacity .15s;
}
.tpl-i:hover .tpl-act, .tpl-i:focus-within .tpl-act, .tpl-act:focus-visible { opacity: 1; }
.tpl-act:hover { color: var(--accent); background: var(--tone-brand-bg); }
.tpl-act.del:hover { color: var(--tone-danger); background: var(--tone-danger-bg); }
.tpl-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tpl-act .ic { width: 14px; height: 14px; }
/* 新建模板：内容二选一，一行一种，选中的那一块浅底 */
.tpl-src { display: flex; flex-direction: column; gap: 6px; }
.tpl-opt { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); cursor: pointer; }
.tpl-opt.on { border-color: var(--tone-brand-line); background: var(--tone-brand-bg); }
.tpl-opt .el-radio { height: 22px; margin-right: 0; }
.tpl-od { padding-left: 24px; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.tpl-add {
  appearance: none; font: inherit; cursor: pointer; width: 100%; height: 36px; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px;
  border: 1px dashed var(--line); background: transparent; color: var(--text-2); font-size: 13px;
}
.tpl-add:hover { border-color: var(--tone-brand-line); background: var(--tint-brand); color: var(--accent); }
.tpl-add .ic { width: 14px; height: 14px; }
/* 通用：标签在上、控件在下的一格（弹窗里用） */
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld-l { font-size: 12px; font-weight: 600; color: var(--text-2); }

/* 显示列选择器：一组一排药丸，点一下显示 / 隐藏 */
.cp-pop.el-popover.el-popper { padding: 0; border-radius: 12px; overflow: hidden; }
.cp-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line-2); }
.cp-t { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-q { width: 150px; }
.cp-body { max-height: max(160px, min(420px, calc(100vh - 340px))); overflow-y: auto; padding: 6px 14px 12px; }
.cp-g { padding-top: 10px; }
.cp-gh { margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.cp-items { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-i {
  appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 8px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 12px; white-space: nowrap;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.cp-i .ic { width: 13px; height: 13px; color: var(--text-4); }
.cp-i small { font-size: 11px; color: var(--text-4); margin-left: 2px; }
.cp-i:hover { border-color: var(--el-border-color-hover); color: var(--text); }
.cp-i.on { background: var(--tone-brand-bg); border-color: var(--tone-brand-line); color: var(--accent); font-weight: 600; }
.cp-i.on .ic { color: var(--accent); }
.cp-i.on small { color: var(--accent); opacity: .7; font-weight: 400; }
.cp-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cp-f { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 9px 14px; background: var(--surface-2); border-top: 1px solid var(--line-2); font-size: 12px; color: var(--text-3); }
.cp-f .ic { width: 13px; height: 13px; }
.cp-f.cp-scope { border-top: 0; padding-top: 0; }
/* 下载挑列（2026-10-27，ExportPicker）：跟显示列同一个弹层；底下那一条：全选 · 已选几列（数照勾选后操作条的「已选 N 行」）·
   几颗按钮，空照别处操作栏（fp-foot / ed-foot）的 8。「已选」用次一档字色：cp-f 的 text-3 在这条灰底上只有 4.3:1；
   按钮里的图标照别处小按钮的 16（cp-f 那条 13 是给说明行前面的小图标的） */
.xp-f { gap: 8px; color: var(--text-2); }
.xp-f .el-button { margin-left: 0; }
.xp-f .el-checkbox { margin-right: 0; }
.xp-f .el-button .ic { width: 16px; height: 16px; }
.xp-f b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* 表头：鼠标停上去名字右边露出把手——点一下是这一列的设置（锁定列 / 取消锁定、隐藏列、分隔线、移至最前 / 最后），按住拖调先后
   （2026-10-13；2026-10-14 张洋「把按钮的为止从列名的左边调整到右边」）；拖的时候落点那一边一条竖线。
   把手浮在名字右边（.th-h 里绝对定位）、落在格子右边的留白里，不占位：名字照旧居中 */
.th.mv { position: relative; cursor: grab; }
.th.mv:active { cursor: grabbing; }
.th-h { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.th-menu { position: absolute; left: calc(100% + 1px); top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .15s ease-out; }
.th-menu .el-dropdown { display: block; }
.th-grip {
  display: grid; place-items: center; width: 14px; height: 22px; border-radius: 4px; cursor: pointer; color: var(--text-4);
  transition: color .15s ease-out, background-color .15s ease-out;
}
.th-grip .ic { width: 12px; height: 12px; }
.th-grip:hover { color: var(--text-2); background: var(--surface-2); }
.th-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.th.mv:hover .th-menu, .th-menu.on, .th-menu:has(:focus-visible) { opacity: 1; }   /* 点过菜单后焦点留在把手上，不常亮 */
.th-menu.on .th-grip { color: var(--accent); background: var(--tone-brand-bg); }
.th-menu-pop .el-dropdown-menu__item { gap: 8px; font-size: 13px; }
.th-menu-pop .el-dropdown-menu__item .ic { width: 14px; height: 14px; color: var(--text-3); }
.th.dragging { opacity: .4; }
.th.drop-l::before, .th.drop-r::after {
  content: ""; position: absolute; top: -6px; bottom: -6px; width: 2px; border-radius: 1px; background: var(--accent);
}
.th.drop-l::before { left: -11px; }
.th.drop-r::after { right: -11px; }

/* ── 右下角 AI 助手：一颗圆角方块按钮（勾了条目时角上一个数），点开是对话窗 ── */
.ai-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 52px; height: 52px; border-radius: 16px; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--brand-solid); color: var(--on-brand);
  box-shadow: 0 12px 28px -10px rgba(16, 48, 44, .5), 0 3px 8px -2px rgba(16, 48, 44, .22);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease-out;
}
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(16, 48, 44, .55), 0 4px 10px -2px rgba(16, 48, 44, .25); }
.ai-fab:focus-visible { outline: 3px solid var(--tone-brand-line); outline-offset: 2px; }
.ai-fab .ic { width: 22px; height: 22px; }
.ai-fab.busy::after {
  content: ""; position: absolute; inset: -4px; border-radius: 19px; border: 2px solid transparent;
  border-top-color: var(--accent); border-right-color: var(--accent); animation: ai-spin 1.1s linear infinite;
}
.ai-badge {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--surface); color: var(--accent); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px var(--brand-solid); font-variant-numeric: tabular-nums;
}
.ai-panel {
  position: fixed; right: 24px; bottom: 88px; z-index: 60; width: 420px; height: min(640px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 28px 56px -18px rgba(16, 48, 44, .38), 0 6px 16px -6px rgba(16, 48, 44, .14);
}
.ai-h { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 16px; border-bottom: 1px solid var(--line-2); }
.ai-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--tone-brand-bg); color: var(--accent); flex: none; }
.ai-mark .ic { width: 18px; height: 18px; }
.ai-ht { flex: 1; min-width: 0; }
.ai-title { font-size: 14px; font-weight: 600; color: var(--text); }
.ai-seen { display: flex; align-items: center; gap: 4px; margin-top: 1px; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-seen .ic { width: 12px; height: 12px; flex: none; }
.ai-ib {
  appearance: none; border: 0; background: transparent; cursor: pointer; flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px; color: var(--text-3);
}
.ai-ib:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.ai-ib:disabled { opacity: .4; cursor: default; }
.ai-ib:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ai-ib .ic { width: 17px; height: 17px; }
.ai-ib.sm { width: 26px; height: 26px; }
.ai-ib.sm .ic { width: 14px; height: 14px; }
.ai-list { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.ai-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: auto 0; padding: 8px 4px; text-align: center; }
.ai-hero { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--tone-brand-bg); color: var(--accent); }
.ai-hero .ic { width: 24px; height: 24px; }
.ai-intro { margin: 0 0 6px; max-width: 300px; font-size: 13px; color: var(--text-2); line-height: 1.65; }
.ai-starters { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.ai-starter {
  appearance: none; font: inherit; cursor: pointer; text-align: left; padding: 10px 12px; border-radius: 10px; line-height: 1.45;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 13px;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.ai-starter:hover { border-color: var(--tone-brand-line); background: var(--tint-brand); }
.ai-starter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ai-u { align-self: flex-end; max-width: 86%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ai-ub {
  padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--brand-solid); color: var(--on-brand);
  font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.ai-uc { font-size: 11px; color: var(--text-4); }
.ai-a { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* 处理过程：查了什么、中间说的过程话。处理中展开，答完收成一行 */
.ai-proc { border-radius: 10px; background: var(--surface-2); }
.ai-proc-h {
  appearance: none; border: 0; background: none; font: inherit; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; font-size: 12px; color: var(--text-3);
}
.ai-proc-h:hover { color: var(--text-2); }
.ai-proc-h:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ai-proc-h .ic { width: 14px; height: 14px; flex: none; color: var(--accent); }
.ai-proc-h .ic.spin { animation: ai-spin 1s linear infinite; }
.ai-proc-n { color: var(--text-4); font-variant-numeric: tabular-nums; }
.ai-proc-h .chev { margin-left: auto; color: var(--text-4); }
.ai-proc.open .ai-proc-h .chev { transform: rotate(180deg); }
.ai-steps { list-style: none; margin: 0; padding: 0 10px 9px; display: flex; flex-direction: column; gap: 5px; }
.ai-steps li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); min-width: 0; }
.ai-steps .ic { width: 14px; height: 14px; flex: none; color: var(--accent); }
.ai-steps li.completed .ic { color: var(--tone-ok); }
.ai-steps li.failed { color: var(--tone-danger); }
.ai-steps li.failed .ic { color: var(--tone-danger); }
.ai-steps li:not(.completed):not(.failed):not(.note) { color: var(--text-2); }
.ai-steps li:not(.completed):not(.failed):not(.note) .ic { animation: ai-spin 1s linear infinite; }
.ai-steps li.note { display: block; padding-left: 21px; line-height: 1.55; color: var(--text-3); white-space: pre-wrap; word-break: break-word; }
.ai-md { font-size: 13px; line-height: 1.7; color: var(--text); word-break: break-word; }
.ai-md p { margin: 0 0 8px; }
.ai-md > :last-child { margin-bottom: 0; }
.ai-md p.h { font-weight: 600; margin-top: 4px; }
.ai-md ul, .ai-md ol { margin: 0 0 8px; padding-left: 20px; }
.ai-md li { margin: 3px 0; }
.ai-md b { font-weight: 600; }
.ai-md code { font-family: var(--mono); font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--surface-3); }
.ai-md table { display: block; overflow-x: auto; border-collapse: collapse; margin: 4px 0 10px; font-size: 12px; max-width: 100%; }
.ai-md th, .ai-md td { padding: 5px 9px; border: 1px solid var(--line-2); text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ai-md th { background: var(--surface-2); color: var(--text-2); font-weight: 600; }
.ai-md.live > :last-child::after {
  content: ""; display: inline-block; width: 7px; height: 14px; margin-left: 3px; vertical-align: -2px; border-radius: 1px;
  background: var(--accent); animation: ai-blink 1s steps(2, start) infinite;
}
.ai-wait { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.ai-dots { display: inline-flex; gap: 3px; }
.ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ai-pulse 1.2s infinite cubic-bezier(.16, 1, .3, 1); }
.ai-dots i:nth-child(2) { animation-delay: .15s; }
.ai-dots i:nth-child(3) { animation-delay: .3s; }
.ai-err { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; background: var(--tone-danger-bg); color: var(--tone-danger); font-size: 12px; }
.ai-err .ic { width: 14px; height: 14px; flex: none; }
.ai-link { appearance: none; border: 0; background: none; padding: 0; margin-left: 4px; font: inherit; cursor: pointer; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ai-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-4); }
.ai-changed { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 4px; background: var(--tone-ok-bg); color: var(--tone-ok); font-weight: 600; line-height: 18px; }
.ai-changed .ic { width: 12px; height: 12px; }
.ai-sec { font-variant-numeric: tabular-nums; }
.ai-f { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line-2); }
.ai-in {
  flex: 1; min-width: 0; min-height: 40px; max-height: 148px; resize: none; padding: 10px 12px; field-sizing: content;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 13px; line-height: 1.45; outline: none;
  transition: border-color .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out;
}
.ai-in::placeholder { color: var(--text-4); }
.ai-in:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--tone-brand-bg); }
.ai-in:disabled { opacity: .7; }
.ai-send {
  appearance: none; border: 0; cursor: pointer; flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; background: var(--brand-solid); color: var(--on-brand); transition: background-color .15s ease-out;
}
.ai-send:disabled { background: var(--surface-3); color: var(--text-4); cursor: default; }
.ai-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-send .ic { width: 18px; height: 18px; }
.spin { animation: ai-spin 1s linear infinite; }
.ai-pop-enter-active { transition: opacity .2s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1); }
.ai-pop-leave-active { transition: opacity .14s ease-in, transform .16s ease-in; }
.ai-pop-enter-from, .ai-pop-leave-to { opacity: 0; transform: translateY(14px) scale(.97); }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-blink { to { opacity: 0; } }
@keyframes ai-pulse { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ai-fab, .ai-starter { transition: none; }
  .ai-fab.busy::after, .ai-steps li .ic, .ai-proc-h .ic.spin, .spin, .ai-dots i, .ai-md.live > :last-child::after { animation: none; }
  .ai-pop-enter-active, .ai-pop-leave-active { transition: opacity .12s linear; }
  .ai-pop-enter-from, .ai-pop-leave-to { transform: none; }
}
/* 电脑上按钮压在白卡的右下角：表底那一排（翻页、每页几行）给它让出位置 */
.sp:has(.ai-fab) .board .foot { padding-right: 92px; }
.sp:has(.ai-fab) .board .bulk { max-width: calc(100% - 200px); }
/* 手机：按钮贴右下角（勾了条目时让开底部的操作条），对话窗从底部铺满大半屏 */
.ai.m .ai-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; }
.sp:has(.bulk.m) .ai.m .ai-fab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.ai.m .ai-panel { left: 0; right: 0; bottom: 0; width: auto; height: 88dvh; border-radius: 16px 16px 0 0; border-bottom: 0; }
.ai.m:has(.ai-panel) .ai-fab { display: none; }   /* 手机上对话窗开着时收起按钮（窗上自己有关闭），不压住发送 */
.ai.m .ai-f { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* ══════════════════════════════════════════════════════════════════
   九、窄屏（手机 / 企业微信里窄的窗口）
   ══════════════════════════════════════════════════════════════════ */
.top .brand .bt, button.who { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1400px) {
  /* 2026-10-23 加了「拉杆箱」页签：笔记本宽度顶栏放不下，「发货安排」四个字被挤成竖排——只留图标（企微里窗口标题就是应用名） */
  .top .brand .bt { display: none; }
}
@media (max-width: 960px) {
  /* 手机上顶栏放不下：几个页面只留字，按钮、间距收一点（2026-10-09 加了「活动日历」一个按钮之后 390 宽要挤下） */
  .top { padding: 10px 12px 8px; gap: 4px; }
  .views { margin-left: 4px; }
  .views a { padding: 6px 8px; }
  .views a .ic { display: none; }
  .top .el-button { padding: 8px; }
  /* 右上角只剩头像（点开看是谁、退出登录；2026-10-14 账号登录起手机上也要有） */
  button.who { padding: 0; margin-left: 0; }
  .board { padding: 0 10px 10px; gap: 10px; }
  .flow { gap: 8px; }
  .steps { --d: 12px; }
  .step { min-width: 104px; height: 54px; padding: 0 calc(var(--d) + 10px); }
  .sfb { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font-size: 11px; }
  .stw:first-child .step { padding-left: 14px; }
  .stw:last-child .step { padding-right: 14px; }
  .step .sn { font-size: 17px; }
  /* 手机上状态单占一行（左右滑，右边露出半个就知道后面还有）；新建状态、调整顺序、状态设置挪到下一行 */
  .flow { flex-wrap: wrap; row-gap: 8px; }
  .steps { flex: 1 1 100%; }
  .step-add { height: 32px; padding: 0 12px; border-width: 1px; }
  .step-add .ic { width: 14px; height: 14px; }
  .tile { height: 54px; gap: 8px; padding: 0 14px 0 10px; }
  .tile-o { width: 26px; height: 26px; }
  .tile-o .ic, .tile.ship .tile-o .ic { width: 12px; height: 12px; }
  .tile-n { font-size: 17px; }
  .shipw .sfb.ship-fb { right: 10px; }
  /* 手机上搜索框、筛选在最上面一行，这一组（连「显示列」）在下面另起一行，放不下再折——电脑上 2026-10-15 起这一组在左边、搜索在右边
     （张洋「A区和B区位置互换」），手机上照旧 */
  .tb-q { order: 1; }
  .tb-filter { order: 2; }
  .chips { order: 3; }
  .tb-acts { flex: 1 1 100%; gap: 6px; order: 4; }
  .tb-acts .tb-btn { padding: 0 9px; gap: 4px; }
  .tb .grow { display: none; }   /* 手机上搜索框占满筛选按钮左边那一截 */
  .card { border-radius: 12px; }
  .tb { padding: 10px 12px 8px; }
  .tb-q { width: auto; flex: 1; min-width: 0; max-width: none; }
  .chips { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fchip { flex: none; max-width: 260px; }
  .vtabs { padding: 0 12px 6px; }
  .vt { height: 30px; padding: 0 10px; }
  .bulk { margin: 0 12px 8px; }
  .tbl { padding: 0 12px; }
  .foot { padding: 6px 12px 10px; justify-content: center; }
  .cond { flex-wrap: wrap; }
  .c-field { width: calc(60% - 6px); }
  .c-op { width: 40%; }
  .c-val { flex-basis: calc(100% - 40px); }
  .kv { grid-template-columns: 1fr; }
  .setp { padding: 0 10px 96px; }
  .set-wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .set-nav { position: sticky; top: 0; z-index: 5; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .set-nav::-webkit-scrollbar { display: none; }
  .sn-i { flex: none; height: 32px; }
  .sset-card { padding: 4px 14px; }
  .sset-card.dicts { grid-template-columns: 1fr; }
  .dbox + .dbox { border-left: 0; border-top: 1px solid var(--line-2); }
  .prm { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .prm-v { justify-content: flex-start; }
  .pq { width: 100%; }
  .set-save { left: 12px; right: 12px; transform: none; width: auto; max-width: none; flex-wrap: wrap; }
  .set-save.bulk-enter-from, .set-save.bulk-leave-to { transform: translateY(18px); }
  .se-dialog .el-dialog__body { padding: 16px; }
  .se-foot { flex-wrap: wrap; }
  .se-impact { flex-basis: 100%; }
  .pfilter .w-m, .pfilter .w-l, .pfilter .w-s, .pfilter .w-sku { width: 100%; }
  .rn-scope { flex-direction: column; gap: 4px; }
}
@media (max-width: 400px) {
  /* 390 / 360 宽的手机：线上顶栏还多一个「重新取数」，放不下——图标让出来，取数时间折成两行（日期一行、时刻一行） */
  .top .brand { display: none; }
  .top { gap: 2px; }
  .views a { padding: 6px 6px; }
  .asof { width: 5ch; margin-right: 2px; white-space: normal; text-align: right; font-size: 11px; line-height: 1.2; }
  /* 2026-10-23 加了「拉杆箱」一个页签以后五个页签放不下（加之前右上角头像就已经被挤出去半个）：页签这一排可以收窄、
     左右滑，右边的取数时间和几个按钮不再被挤出屏幕；切到哪一页，那一页的页签自己滚到看得见的地方（app.js Root 里那段 watch） */
  .views { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .asof { flex: none; }
  .views::-webkit-scrollbar { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   在途可售：数字点开看每一票的物流进度（2026-10-09）
   ══════════════════════════════════════════════════════════════════ */
.trl { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
  border-bottom: 1px dashed var(--accent); line-height: 1.2; }
.trl:hover { color: var(--accent); }
.trl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.trd { display: flex; flex-direction: column; gap: 12px; }
.trd-sum { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.trd-sum b { color: var(--text); font-variant-numeric: tabular-nums; }
.trd-sep { width: 1px; height: 12px; background: var(--line); }
.trd-one { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.trd-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.trd-no { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.trd-m { padding: 0 6px; border-radius: 4px; background: var(--surface-2); color: var(--text-2); font-size: 12px; line-height: 20px; }
.trd-q { color: var(--text-2); font-variant-numeric: tabular-nums; }
.trd-wh { color: var(--text-3); font-size: 12px; }
.trd-bl { font-size: 12px; color: var(--text-3); }
.trd-steps { list-style: none; margin: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 0; }
.trd-steps li { position: relative; display: flex; align-items: center; gap: 10px; padding: 3px 0 3px 18px; font-size: 13px; color: var(--text-3); }
.trd-steps li::before { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.trd-steps li:first-child::before { top: 50%; }
.trd-steps li:last-child::before { bottom: 50%; }
.trd-steps li:only-child::before { display: none; }
.trd-steps .dot { position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  border: 1.5px solid var(--text-4); background: var(--surface); box-sizing: border-box; }
.trd-steps li.done { color: var(--text); }
.trd-steps li.done .dot { border-color: var(--tone-ok); background: var(--tone-ok); }
.trd-steps li.late .dot { border-color: var(--tone-warn); }
.trd-d { width: 64px; flex: none; font-variant-numeric: tabular-nums; }
.trd-late { font-size: 11px; color: var(--tone-warn); background: var(--tone-warn-bg); padding: 0 6px; border-radius: 4px; line-height: 18px; }
.trd-note { font-size: 12px; line-height: 1.6; color: var(--text-2); background: var(--surface-2); border-radius: 8px; padding: 8px 10px;
  white-space: pre-wrap; word-break: break-word; }
.trd-nl { display: block; color: var(--text-4); margin-bottom: 2px; }
/* 日本可售 / 日本仓公司那一格点开：各平台各多少（2026-10-23）。表、数、天数小块都照详情里「库存与销量」那张（.mt + .num + .dchip），
   平台名前面一个跟第二排页签同色的圆点；库存那一列宽一点，给挂在数右边的「（FBA …）」留位置 */
.jpd-c1 { width: 32%; }
.jpd-c2 { width: 40%; }
.jpd-p { display: inline-flex; align-items: center; gap: 6px; }
.jpd-p .vt-dot { background: var(--text-4); }
.jpd-n { position: relative; }
.jpd-f { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); padding-left: 2px;
  font-size: 12px; color: var(--text-3); white-space: nowrap; }
.jpd-z .jpd-p { color: var(--text-3); }
/* 平台下面的店长仓（2026-11-05 深圳跟单「可以以店长仓显示吗」）：一个平台一组（tbody.jpd-g），组里不画线、组跟组之间一条线；
   店长仓那几行矮一截、名字小一号次要字色，组尾多留一点——组里的行挨得比组跟组近。圆点那个位置留空，名字跟平台名左边对齐。
   这张表不能点，鼠标停上去整组一起亮（不是一条一条地亮） */
.mt.jpd td { border-bottom: 0; }
.mt.jpd .jpd-g:not(:last-child) tr:last-child td { border-bottom: 1px solid var(--line-2); }
.mt.jpd tbody tr:hover td { background: none; }
.mt.jpd .jpd-g:hover td { background: var(--row-hover); }
.mt tr.jpd-w td { height: 24px; font-size: 12px; }
.mt tr.jpd-w td:first-child { color: var(--text-3); }
.mt.jpd .jpd-g tr.jpd-w:last-child td { height: 30px; padding-bottom: 6px; }
.jpd-nodot { visibility: hidden; }
.jpd-w .jpd-p { max-width: 100%; }
.jpd-wn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 平台多、店长仓多的货号一屏放不下：弹窗里面滚、表头钉住（跟复核小窗 .jd-dlg 同一个限高）；手机上全屏照旧整页 */
.jpd-dialog .el-dialog__body { max-height: calc(85vh - 136px); overflow-y: auto; }
.jpd-dialog.is-fullscreen .el-dialog__body { max-height: none; }
.jpd thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }

/* ══════════════════════════════════════════════════════════════════
   申请：申请发货 / 申请借调上下两个按钮；申请借调弹框；调拨账本（2026-10-09）
   ══════════════════════════════════════════════════════════════════ */
.rq-two { display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px; }
.rq-two .rq-btn, .rq-two .rq-done { justify-content: center; }
/* 发货申请 / 借调申请两列（2026-10-14 第 6 条：上一行申请按钮，下一行这条申请到哪一步）：待审核淡黄、已通过淡绿，
   无申请只写字 */
.rq-st .rq-btn, .rq-st .rq-done { height: 22px; }
.tg.rqs { height: 18px; line-height: 18px; padding: 0 6px; font-size: 11.5px; }
.tg.rq-wait { --tg-bg: var(--tg-amber-bg); --tg-fg: var(--tg-amber-fg); }
.tg.rq-ok { --tg-bg: var(--tg-green-bg); --tg-fg: var(--tg-green-fg); }
.rqs-none { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.rq-btn:disabled { opacity: .45; cursor: not-allowed; }
.bw-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bw-it { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.bw-it:hover { border-color: var(--tone-brand-line); }
.bw-it.on { border-color: var(--accent); background: var(--tint-brand); }
.bw-it input { margin: 0; accent-color: var(--accent); }
.bw-n { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; color: var(--text); }
.bw-n small, .bw-v small { font-size: 11px; color: var(--text-3); }
.bw-v { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: var(--text-2); text-align: right; }
.bw-v b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.bw-none { font-size: 13px; color: var(--text-3); padding: 6px 0; }
.bw-max { font-size: 12px; color: var(--text-3); }
.bw-plan { display: flex; flex-direction: column; gap: 6px; }
.bw-plan .el-radio-group { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.bw-tip { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.5; color: var(--text-3); background: var(--surface-2);
  border-radius: 8px; padding: 8px 10px; }
.bw-tip .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
/* 借后可售（2026-10-12）：两格并排——借出仓借完、借入仓借到以后各能卖几天；填了件数写「现在 → 借后」，没填只写现在。
   这一行一直在，填数时只换字，下面几行不跳 */
.bw-after { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; transition: opacity .15s ease-out; }
.bw-after.busy { opacity: .6; }
.bw-a { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 7px 12px; border-radius: 10px; background: var(--surface-2); }
.bw-a-k { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 11px; color: var(--text-3); }
.bw-a-k em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; color: var(--text-2); }
.bw-a-v { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bw-a-v b { font-size: 15px; font-weight: 600; color: var(--text); }
.bw-a-v .was { font-size: 12px; color: var(--text-3); }
.bw-a-v .ic { width: 13px; height: 13px; color: var(--text-4); flex: none; }

/* 一行底下那一行小字（排柜那一面手机上货号后面的发货仓） */
.lgr-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════════
   十、列表页（调拨账本、发货归档、账号管理）：跟发货看板同一个骨架（2026-10-15 张洋调拨账本截图批注：「完全毛坯房UI，
   跟首页一样精装修」「能复用的直接复用，整个系统各个页面模块统一标准和风格」）——顶上一排分类块（.tiles，在状态条那个位置）、
   一张白卡（筛选条 .tb → 表 .tbl .grid → 底下一行 .foot），都是看板那几样；这里只写列表页多出来的几样
   ══════════════════════════════════════════════════════════════════ */
/* 筛选条左边：这一页筛出来的合计（几单 / 几条、几件、待归还几件） */
.lst-sum { font-size: 13px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lst-sum b { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 2px; }
.lst-sum b.hot { color: var(--tone-danger); }
.lst-grid td.el-table__cell { padding: 8px 0; }
.lst-grid .el-table__row { cursor: default; }
.lst-id { font-weight: 600; letter-spacing: .01em; color: var(--text); }
.lst-doc { font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--text); }
/* 箱号、物流单号：等宽字（一位一位核对的时候不串行） */
.lst-no { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; }
.st-b .lst-no { font-size: 12px; color: var(--text-2); }
/* 人名前面一个圆（名字的第一个字），跟右上角头像同一个画法、小一号 */
.lst-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; white-space: nowrap; }
.lst-av {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 11px; font-weight: 600; background: var(--tone-brand-bg); color: var(--accent);
}
/* 申请理由：最多两行，多出来的省略（鼠标停上去看全文）；短的居中，长的折成两行左对齐 */
.lst-note {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  width: fit-content; max-width: 100%; margin: 0 auto; text-align: left;
  font-size: 12.5px; line-height: 20px; color: var(--text-2); white-space: normal; word-break: break-word;
}
.lst-note.nil { color: var(--text-4); }
.lst-ret { font-size: 12px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lst-ret b { color: var(--text); font-weight: 600; }
.foot .rg.lst-fn { color: var(--text-4); }
/* 走到哪一步、平账的标签（看板那套淡底深字）：进行中 / 未平账黄、已完成 / 已平账绿、预览蓝、没成的 / 无需归还灰、逾期红 */
.tg.k-open { --tg-bg: var(--tg-amber-bg); --tg-fg: var(--tg-amber-fg); }
.tg.k-preview { --tg-bg: var(--tg-blue-bg); --tg-fg: var(--tg-blue-fg); }
.tg.k-done { --tg-bg: var(--tg-green-bg); --tg-fg: var(--tg-green-fg); }
.tg.k-failed { --tg-bg: var(--surface-3); --tg-fg: var(--text-2); }
.tg.k-late { --tg-bg: var(--tg-rose-bg); --tg-fg: var(--tg-rose-fg); font-weight: 600; }
/* 仓库标签只看不点（WhTagRo）：没有小手、没有按下去那一层 */
.wtag.wtag-ro .seg { cursor: default; }
.wtag.wtag-ro .seg:hover { box-shadow: none; }
/* 收货仓（2026-11-06）：表上那一格两个仓是一个两列小网格——两行跟一格两行（.st）一样 22 高、隔 2，仓标签靠右、件数靠左，
   标签和件数之间一条竖线对齐；再多的「+N」是第三列一个灰标签，跟前面件数拉开。没定给谁的那几件写「未指定」（次要字）。
   手机卡片、条目详情一个不收（.rcvs）：一个仓一组「标签 + 件数」，组里挨着、组和组拉开，放不下折行 */
.rcv2 { display: inline-grid; grid-template-columns: auto auto; grid-auto-rows: 22px; row-gap: 2px; column-gap: 4px;
        align-items: center; }
.rcv2.more { grid-template-columns: auto auto auto; }
.rcv2 > .wtag, .rcv2 > .rcv-none { grid-column: 1; justify-self: end; }
.rcv2 > .num { grid-column: 2; justify-self: start; }
.rcv2 > .rcv-more { grid-column: 3; grid-row: 2; margin-left: 4px; }
.rcv-none { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.rcvs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; white-space: normal; }
.rcvs.end { justify-content: flex-end; }
.rcv-i { display: inline-flex; align-items: center; gap: 4px; flex: none; }
/* 手机：一单一张卡（看板手机上那种）——货号和件数一行，单号 · 时间 · 申请人一行，借出仓 → 借入仓一行，右上角两个标签 */
.lst-m .mrow-t .sku .num { margin-left: auto; font-size: 14px; }
.lst-m .mrow-g { padding-left: 0; }
.lst-m .cg .v { white-space: normal; text-align: right; }
/* 申请理由这种长的一段：名字在上、字在下，左对齐（右对齐折成几行读着别扭） */
.lst-m .cg.lst-m-note { flex-direction: column; gap: 2px; }
.lst-m .cg.lst-m-note .v { text-align: left; justify-content: flex-start; color: var(--text-2); }
@media (max-width: 960px) {
  /* 手机上筛选条：合计单独一行，下面搜索框占满、按钮跟在后面 */
  .board.lst .lst-sum { order: 0; flex: 1 1 100%; }
  .board.lst .tb > .tb-btn { order: 2; }
}
.lst-route { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lst-route > .ic { width: 14px; height: 14px; color: var(--text-4); }
/* 筛选条上的按钮再两种：实心主色（新增账号这种这一页最主要的动作）、表里一行的小按钮（修改 / 重置密码 / 删除，删除鼠标停上去变红） */
.tb-btn.pri { background: var(--brand-solid); border-color: var(--brand-solid); color: var(--on-brand); font-weight: 500; }
.tb-btn.pri:hover { background: var(--el-color-primary-dark-2); border-color: var(--el-color-primary-dark-2); color: var(--on-brand); }
.tb-btn.sm { height: 28px; padding: 0 10px; gap: 5px; border-radius: 8px; font-size: 12.5px; }
.tb-btn.sm .ic { width: 13px; height: 13px; }
.tb-btn.danger:hover { color: var(--tone-danger); border-color: var(--tone-danger); background: var(--tone-danger-bg); }
/* 账号管理：名字加粗。表里一行的几颗小按钮（账号管理、参数设置里的登记表和货号资料）：挨着、居中 */
.acc-nm { font-weight: 600; color: var(--text); }
.row-ops { display: flex; align-items: center; justify-content: center; gap: 6px; }
.row-ops.m { justify-content: flex-start; margin-top: 10px; }
/* 参数设置里的几张表（特殊发货产品登记、新品登记、货号资料）表头跟看板那一格一个样子：12 号半粗、深一档（看板的表头是 ThCell 画的，
   这几张是表格自带的表头）；产品信息那一格第二行小字照看板那样细一档 */
.grid.ptab th.el-table__cell > .cell { font-weight: 600; color: var(--text-2); }
.grid.ptab .th-s { font-weight: 500; }
.grid.ptab td.el-table__cell { padding: 8px 0; }


/* 活动日历（右上角，张洋 2026-10-09 14:49 第 7 条）：一个月一页，跨几天的活动是一条横条，颜色 = 平台（跟平台标签同一套）；
   活动前那几天同色浅底。横条按周排成几行（不重叠），底下列这个月的活动 */
.cal-pop.el-popover.el-popper { padding: 16px; border-radius: 14px; max-height: calc(100vh - 80px); overflow-y: auto; box-sizing: border-box; }
.cal { display: flex; flex-direction: column; gap: 12px; }
.cal-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-t { min-width: 92px; text-align: center; font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cal-b {
  appearance: none; cursor: pointer; width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  transition: background-color .15s ease-out, border-color .15s ease-out;
}
.cal-b:hover { background: var(--surface-2); }
.cal-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-b .ic { width: 15px; height: 15px; }
.cal-b.prev .ic { transform: rotate(90deg); }
.cal-b.next .ic { transform: rotate(-90deg); }
.cal-lg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.cal-lgi { display: inline-flex; align-items: center; gap: 6px; }
.cal-sw { width: 16px; height: 8px; border-radius: 3px; background: var(--chip-solid); }
.cal-lgi.pre .cal-sw { background: color-mix(in srgb, var(--pf-ink-solid) 30%, transparent); }
.cal-g { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.cal-wd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface-2); font-size: 12px; color: var(--text-3); text-align: center; line-height: 28px; }
.cal-w { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 84px; border-top: 1px solid var(--line-2); }
.cal-d { grid-row: 1 / -1; padding: 3px 5px; border-left: 1px solid var(--line-2); }
.cal-d:first-child { border-left: 0; }
.cal-d.out { background: var(--surface-2); }
.cal-n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.cal-d.out .cal-n { color: var(--text-4); }
.cal-d.today .cal-n { background: var(--accent); color: var(--on-hue); font-weight: 600; }
.cal-bar {
  position: relative; z-index: 1; height: 20px; margin: 1px 0; min-width: 0;
  display: flex; align-items: center; overflow: hidden; cursor: default;
  --pre: color-mix(in srgb, var(--chip-solid) 30%, transparent);
  background: linear-gradient(90deg, var(--pre) 0 var(--p), var(--chip-solid) var(--p) var(--q), var(--pre) var(--q) 100%);
}
.cal-bar.head { margin-left: 4px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.cal-bar.tail { margin-right: 4px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.cal-bl {
  min-width: 0; padding: 0 6px 0 calc(var(--lp) + 6px); font-size: 11.5px; font-weight: 600; line-height: 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--chip-fg);
}
.cal-bar.solid .cal-bl { color: var(--on-hue); }   /* 深色主题实心色是浅的，字变深 */
.cal-ls { display: flex; flex-direction: column; }
.cal-lt { font-size: 12px; font-weight: 600; color: var(--text-3); padding: 2px 2px 6px; }
.cal-li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 2px; border-top: 1px solid var(--line-2); font-size: 13px; }
.cal-li.past { opacity: .55; }
.cal-pf { flex: none; padding: 0 8px; border-radius: 6px; line-height: 20px; font-size: 12px; font-weight: 600; background: var(--chip-bg); color: var(--chip-fg); }
.cal-ln { flex: 1; min-width: 0; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ld { flex: none; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cal-now { flex: none; padding: 0 6px; border-radius: 4px; line-height: 18px; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--tone-brand-bg); }
.cal-src { flex: none; padding: 0 6px; border-radius: 4px; line-height: 18px; font-size: 11px; color: var(--text-3); background: var(--surface-2); }
.cal-src.warn { color: var(--tone-warn); background: var(--tone-warn-bg); }
.cal-none { padding: 10px 2px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--text-3); }
@media (max-width: 640px) {
  .cal-w { min-height: 70px; }
  .cal-d { padding: 2px 3px; }
  .cal-bl { font-size: 10.5px; padding-left: calc(var(--lp) + 4px); padding-right: 4px; }
  .cal-li { flex-wrap: wrap; row-gap: 4px; }
  .cal-ld { order: 4; width: 100%; padding-left: 2px; }
}

/* 货号资料的修改框（2026-10-09 第 5 条）：分组两列，每格上面一行字；本系统存了、没写回领星的格名字旁标「本系统」，
   底下一行写领星里是多少 */
.pe { display: flex; flex-direction: column; gap: 18px; max-height: min(64vh, 660px); overflow-y: auto; padding-right: 6px; margin-right: -6px; }
.pe-hint { font-size: 12px; color: var(--text-3); line-height: 1.6; }
.pe-warn { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; background: var(--tone-warn-bg); color: var(--tone-warn); font-size: 12px; }
.pe-warn .ic { width: 14px; height: 14px; flex: none; }
.pe-g { display: flex; flex-direction: column; gap: 10px; }
.pe-gt { margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--text); }
.pe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.pe-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pe-f.wide { grid-column: 1 / -1; }
.pe-k { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.pe-tag { padding: 0 5px; border-radius: 4px; font-style: normal; font-size: 10.5px; line-height: 16px; color: var(--tone-warn); background: var(--tone-warn-bg); }
.pe-in { width: 100%; }
.pe-num { display: flex; align-items: center; gap: 6px; }
.pe-num .el-input-number { flex: 1; min-width: 0; width: auto; }
.pe-num .el-input__inner { text-align: left; }
.pe-num em { font-style: normal; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.pe-lx { font-size: 11.5px; color: var(--tone-warn); }
.pe-note { font-size: 11.5px; color: var(--text-3); }
.pe-attrs { display: flex; flex-wrap: wrap; gap: 0 14px; }
.pe-attrs .el-checkbox { margin-right: 0; }
@media (max-width: 640px) { .pe-grid { grid-template-columns: 1fr; } }
/* 货号资料表：本系统存了、没写回领星的格右上角一个小点；「读取时间」那一格写本系统修改几项（鼠标停上去逐项写领星 / 本系统各是多少） */
.ptab .loc { position: relative; padding-right: 9px; }
.ptab .loc::after { content: ""; position: absolute; top: 1px; right: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--tone-warn); }
.plocal { display: inline-block; padding: 0 7px; border-radius: 4px; line-height: 20px; font-size: 12px; color: var(--tone-warn); background: var(--tone-warn-bg); cursor: default; }
.plabels { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.plabel { padding: 0 6px; border-radius: 4px; line-height: 18px; font-size: 11.5px; color: var(--text-2); background: var(--surface-2); white-space: nowrap; }
.pgrade { font-weight: 600; color: var(--text); }
.pe-dims { display: flex; align-items: center; gap: 4px; }
.pe-dims .el-input-number { flex: 1; min-width: 0; width: auto; }
.pe-dims .el-input__inner { text-align: center; }
.pe-dims em { margin-left: 2px; font-style: normal; font-size: 12px; color: var(--text-3); }
.pe-x { font-style: normal; font-size: 12px; color: var(--text-4); }
.pe-money { display: flex; align-items: center; gap: 6px; }
.pe-money .el-input-number { flex: 1; min-width: 0; width: auto; }
.pe-money .el-input__inner { text-align: left; }
.pe-cur { width: 76px; flex: none; }

/* 船期登记、借后可售在手机上（2026-10-12）：一班船一张小卡——第一行日子、方式、柜数，第二行港口和备注，第三行谁登记的、改删 */
@media (max-width: 960px) {
  .sail-add { padding: 10px; }
  .sail-date.el-date-editor, .sail-port { width: calc(50% - 4px); }
  .sail-m { flex: 1; display: flex; flex-wrap: nowrap; }
  .sail-m .el-radio-button { flex: 1; }
  .sail-m .el-radio-button__inner { width: 100%; }
  .sail-note { flex-basis: 100%; }
  .sail-go { flex-basis: 100%; }
  .sail-row, .sail-row.editing {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "date m n" "port port port" "note note note" "by by act";
    row-gap: 4px; column-gap: 8px; padding: 10px 12px;
  }
  .sail-row .sail-c-date { grid-area: date; }
  .sail-row .sail-c-m { grid-area: m; }
  .sail-row .sail-c-n { grid-area: n; }
  .sail-row .sail-c-port { grid-area: port; }
  .sail-row .sail-c-note { grid-area: note; font-size: 12px; }
  .sail-row .sail-c-note.empty { display: none; }
  .sail-row .sail-c-n { justify-self: end; }
  .sail-row .sail-c-by { grid-area: by; }
  .sail-row .sail-c-act { grid-area: act; }
  .sail-row.editing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "date port" "m n" "note note" "act act"; }
  .sail-row.editing .sail-c-act { justify-content: flex-end; }
  .bw-after { grid-template-columns: 1fr; }
}

/* ══ 安排发货、本期结算、发货归档、船期里每个柜（2026-10-12 下午）══
 * 安排发货窗口：开始前摆范围和上一次，跑的时候过程跟右下角 AI 助手一个样，跑完是回执（一行合计 + 每个柜一条装满条）。
 * 本期结算窗口：归档 / 未发出 / 保留 / 结算的柜四段，每段一个标题行。船期登记里每班船下面一行是它的几个柜。 */
.ld { display: flex; flex-direction: column; gap: 14px; }
.ld-k { font-size: 12px; color: var(--text-3); white-space: nowrap; }
/* 挑选顺序（张洋 2026-10-13「从后往前一个一个状态挨个搜罗后排柜排期，直到满柜为止」）：一个状态一块，名字 + 条数；
   块之间一个朝右的小尖；头一块（最先挑的最后一个状态）深青底 */
.ld-order { display: flex; flex-direction: column; gap: 8px; }
.ld-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.ld-chain li {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: 8px; background: var(--surface-2); font-size: 13px; color: var(--text-2); white-space: nowrap;
}
.ld-chain li + li { margin-left: 18px; }
.ld-chain li + li::before {
  content: ''; position: absolute; left: -12px; top: 50%; width: 6px; height: 6px;
  border-top: 1.5px solid var(--text-4); border-right: 1.5px solid var(--text-4); transform: translateY(-50%) rotate(45deg);
}
.ld-chain li b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ld-chain li.first { background: var(--brand-solid); color: var(--on-brand); }
.ld-chain li.first b { color: var(--on-brand); }
/* 开了「不参与安排发货」的状态：照摆在原位，只留细框、字淡、名字划掉，写「不参与」（2026-10-14） */
.ld-chain li.off { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-4); }
.ld-chain li.off .ld-cn { text-decoration: line-through; text-decoration-color: var(--text-4); }
.ld-off { font-style: normal; font-size: 12px; color: var(--text-3); }
/* 三道 AI 审核走到哪（初审 → 复审 → 排柜审核）：跟上面「初审范围」那一排同一个样子（.ld-chain）——正在跑的那一道填主色，
   完成的打勾，跳过的照「不参与」那种细框淡字，没跑成的标红（鼠标停上去看为什么） */
.ld-pass li .ic { width: 14px; height: 14px; }
.ld-pass-s { font-size: 12px; color: var(--text-3); }
.ld-pass li.is-running { background: var(--brand-solid); color: var(--on-brand); }
.ld-pass li.is-running .ld-pass-s { color: var(--on-brand); opacity: .88; }
.ld-pass li.is-done .ic { color: var(--tone-ok); }
.ld-pass li.is-skipped, .ld-pass li.is-wait { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-3); }
.ld-pass li.is-error { background: var(--tone-danger-bg); color: var(--tone-danger); }
.ld-pass li.is-error .ld-pass-s { color: var(--tone-danger); }
/* 手机宽一行放不下三块（第三块折到第二行、行首挂着小尖）：完成、跳过、待开始只留图标（勾 / 箭头 / 沙漏），
   字留给读屏；进行中、未完成照写 */
@media (max-width: 640px) {
  .ld-pass li:not(.is-running):not(.is-error) .ld-pass-s {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.ld-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* 排柜窗口（2026-10-14 第 3 条）：待排柜、可装柜、待重新排柜三格一排；待重新排柜有数时那个数用警示色，底下列出是哪几条 */
.ld-scope3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ld-stat.hot .ld-v b { color: var(--tone-warn); }
.ld-pack-off { list-style: none; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--surface-2);
  display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ld-pack-off li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ld-pack-off li b { flex: none; font-weight: 600; }
.ld-pack-off .lpo-w { flex: none; font-size: 12px; color: var(--text-3); }
.ld-pack-off .lpo-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.ld-pack-off li.more { font-size: 12px; color: var(--text-3); }
@media (max-width: 560px) { .ld-scope3 { grid-template-columns: minmax(0, 1fr); } }
.ld-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 14px;
  border-radius: 10px; background: var(--surface-2); }
.ld-v { font-size: 12px; color: var(--text-3); }
.ld-v b { margin-right: 3px; font-size: 18px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ld-warn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border-radius: 10px;
  background: var(--tone-warn-bg); color: var(--tone-warn); font-size: 13px; }
.ld-warn .ic { width: 15px; height: 15px; flex: none; }
.ld-warn .el-button { margin-left: auto; }
/* 没登记船期时的一句说明（照参数排，不是警告）：浅灰底 */
.ld-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border-radius: 10px;
           background: var(--surface-2); color: var(--text-2); font-size: 13px; }
.ld-info .ic { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.ld-info .el-button { margin-left: auto; }
.ld-last { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 2px 2px 0; font-size: 13px; }
.ld-last-t { color: var(--text-2); font-variant-numeric: tabular-nums; }
.ld-last-n { color: var(--text); font-variant-numeric: tabular-nums; }
.ld-link { appearance: none; border: 0; background: transparent; padding: 2px 4px; border-radius: 6px; font: inherit; font-size: 13px;
  color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ld-link:hover { background: var(--tint-brand); }
.ld-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ld-run { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.ld-run .ic { width: 16px; height: 16px; color: var(--accent); }
.ld-sec { font-size: 12px; font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ld-steps { list-style: none; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
  display: flex; flex-direction: column; gap: 6px; }
.ld-steps li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); min-width: 0; }
.ld-steps .ic { width: 14px; height: 14px; flex: none; color: var(--accent); }
.ld-steps li.completed { color: var(--text-3); }
.ld-steps li.completed .ic { color: var(--tone-ok); }
.ld-steps li.failed, .ld-steps li.failed .ic { color: var(--tone-danger); }
.ld-steps li.note { display: block; padding-left: 21px; line-height: 1.55; color: var(--text-3); white-space: pre-wrap; word-break: break-word; }
.ld-md { padding: 2px 2px 0; max-height: 40vh; overflow-y: auto; }
.ld-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; padding: 12px 14px; border-radius: 10px;
  background: var(--tint-brand); color: var(--text-2); font-size: 13px; }
.ld-total b { margin-right: 2px; font-size: 20px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.ld-total i { font-style: normal; color: var(--text-4); margin: 0 4px; }
.ld-boxes { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 10px; }
.ld-box { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.ld-box + .ld-box { border-top: 1px solid var(--line-2); }
.ld-box-h { display: flex; align-items: baseline; gap: 8px; }
.ld-box-l { font-size: 13px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-box-fill { font-size: 13px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.ld-box-fill.low { color: var(--tone-warn); }
.ld-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.ld-bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand-solid); transition: width .4s cubic-bezier(.16, 1, .3, 1); }
.ld-box-n { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ld-more { display: flex; flex-direction: column; gap: 6px; }
.ld-line { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--text-2); }
.ld-line .ld-k { width: 52px; flex: none; }
.ld-line b { color: var(--text); font-variant-numeric: tabular-nums; }
.ld-skus { color: var(--text-3); }
/* 空运、快船没到起发量（只提示）：一句橙字跟在那一行后面 */
.ld-short { font-style: normal; color: var(--tone-warn); }
/* 船期登记里照参数排的那几批：港口那一格写「按参数」，浅一档 */
.sail-param { color: var(--text-3); }
.ld-note { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.ld-meta { font-size: 12px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.ld-fail { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--tone-danger); }
.ld-fail .ic { width: 16px; height: 16px; }
.ld-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ld-foot .el-button { margin-left: 0; }

.stl { display: flex; flex-direction: column; gap: 14px; }
.stl-sec { display: flex; flex-direction: column; gap: 2px; }
.stl-h { display: flex; align-items: baseline; gap: 8px; padding-bottom: 6px; font-size: 13px; color: var(--text-2); }
.stl-h b { color: var(--text); font-variant-numeric: tabular-nums; }
.stl-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.stl-t::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); }
.stl-sec.ok .stl-t::before { background: var(--tone-ok); }
.stl-sec.warn .stl-t::before { background: var(--tone-warn); }
.stl-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.stl-row + .stl-row { margin-top: 4px; }
.stl-l { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stl-no { font-family: var(--mono); font-size: 12px; color: var(--text-2); letter-spacing: .02em; }
.stl-n, .stl-to { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stl-more { padding: 4px 10px 0; font-size: 12px; color: var(--text-3); }
.stl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stl-chip { padding: 3px 9px; border-radius: 6px; font-size: 12px; line-height: 18px; }
.stl-chip.ok { background: var(--tone-ok-bg); color: var(--tone-ok); }
.stl-chip.warn { background: var(--tone-warn-bg); color: var(--tone-warn); }

/* 数据变动（DataChangeDialog，张洋 2026-11-11）：第一行取数时间（.trd-sum，物流在途弹窗那一行）、右边这一张表几条；
   顶上几种原因各几件是 AI初审回执那几块（.rv-sum，变体写在「AI初审回执」那一段：这里块窄，标签在上、数在下，一排能放下全部几种，
   点了只看那一种）；下面一条一行（条目详情那种小表 .mt；列一律居中、一格上下两行，跟看板一样）；手机一条一张卡（发货归档手机版 .mrow）。
   原因一种一个色，只说「这是什么」：新入库绿、待检转可用薄荷、新增待检琥珀、备货单扣减蓝、其他减少玫瑰、待检减少灰；
   状态变更靛青；初审作废跟操作标记「AI」同一个紫；已清空跟「库存充足」那种最淡的灰标签同一份（.tg.n-enough 那一条）。
   表的高度按全部条数定（app.js 的 listH：一行 DV_ROW_H、表头 DV_HEAD_H，跟下面 td / th 的高同一个数），只看一种时不跟着变矮；
   先留好滚动条的位置（scrollbar-gutter），滚动条出不出来列都不挪 */
.dv { display: flex; flex-direction: column; gap: 12px; }
.dv .trd-sum .ld-link { margin-left: -2px; }
.dv-list { max-height: calc(94vh - 280px); min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.mt.dv-t { table-layout: fixed; }
.mt.dv-t th, .mt.dv-t th:first-child { height: 28px; padding: 0 8px; text-align: center; color: var(--text-2); vertical-align: middle; }
.mt.dv-t td, .mt.dv-t td:first-child { height: 54px; text-align: center; color: var(--text); }
.mt.dv-t thead th { position: sticky; top: 0; z-index: 1; background: var(--el-dialog-bg-color, var(--surface));
  box-shadow: inset 0 -1px 0 var(--line); }
.dv-c-prod { width: 21%; }
.dv-c-wh { width: 16%; }
.dv-c-n { width: 10%; }
.dv-c-why { width: 27%; }
.dv-c-st { width: 16%; }
.num.dv-same { font-weight: 400; color: var(--text-3); }
.st-b.dv-was { gap: 6px; }
.cg .v.dv-why { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
/* 手机卡片上「前 → 后」：旧的次一档灰，箭头两边各隔开一点 */
.cg .v.dv-chg { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.dv-old, .dv-arr { color: var(--text-3); }
.dv-foot { display: flex; align-items: center; gap: 8px; }
.dv-foot .el-button { margin-left: 0; }
/* 手机全屏时一整个窗口一起滑：标题栏、底下那一行贴住上下边，关窗口的两颗按钮一直看得见 */
/* （窗口自己有一圈内边距，贴住的那一截外面再用同色盖住这一圈，滑过去的字不从边上露出来） */
.dv-dialog.is-fullscreen .el-dialog__header { position: sticky; top: 0; z-index: 3; background: var(--el-dialog-bg-color, var(--surface));
  box-shadow: 0 calc(-1 * var(--el-dialog-padding-primary, 16px)) 0 var(--el-dialog-bg-color, var(--surface)); }
.dv-dialog.is-fullscreen .el-dialog__footer { position: sticky; bottom: 0; z-index: 3; background: var(--el-dialog-bg-color, var(--surface));
  box-shadow: 0 var(--el-dialog-padding-primary, 16px) 0 var(--el-dialog-bg-color, var(--surface)); }
/* 顶栏取数时间（看板那一份）点了看数据变动：照「点开看明细」那种虚线下划线（.trl） */
.asof-btn { appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer; padding: 0; line-height: 1.2;
  font-size: 12px; color: var(--on-bg-2); border-bottom: 1px dashed var(--on-bg-2); }
.asof-btn:hover { color: var(--on-bg); border-bottom-color: var(--on-bg); }
.asof-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.tg.dv-in { --tg-bg: var(--tg-green-bg); --tg-fg: var(--tg-green-fg); }
.tg.dv-qc { --tg-bg: var(--tg-mint-bg); --tg-fg: var(--tg-mint-fg); }
.tg.dv-qn { --tg-bg: var(--tg-amber-bg); --tg-fg: var(--tg-amber-fg); }
.tg.dv-ord { --tg-bg: var(--tg-blue-bg); --tg-fg: var(--tg-blue-fg); }
.tg.dv-out { --tg-bg: var(--tg-rose-bg); --tg-fg: var(--tg-rose-fg); }
.tg.dv-qo { --tg-bg: var(--tg-gray-bg); --tg-fg: var(--tg-gray-fg); }
.tg.dv-mv { --tg-bg: var(--tg-indigo-bg); --tg-fg: var(--tg-indigo-fg); }
.tg.dv-void { --tg-bg: var(--tg-violet-bg); --tg-fg: var(--tg-violet-fg); }


/* 船期登记里每班船下面一行：柜1 装了多少 · 箱号 · 结算结果；末尾「回填箱号」 */
.sail-boxes, .sail-bx-edit { grid-column: 1 / -1; }
.sail-boxes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.sail-box { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px; border-radius: 6px;
  background: var(--surface-2); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sail-box b { font-weight: 600; color: var(--text); }
.sail-box.empty .sail-box-load { color: var(--text-4); }
.sail-box.has { background: var(--tint-brand); }
.sail-box-no { font-family: var(--mono); font-size: 11px; color: var(--text); letter-spacing: .02em; }
.sail-box-res { padding: 0 6px; border-radius: 4px; font-size: 11px; line-height: 16px; }
.sail-box-res.ok { background: var(--tone-ok-bg); color: var(--tone-ok); }
.sail-box-res.warn { background: var(--tone-warn-bg); color: var(--tone-warn); }
.sail-fill { appearance: none; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto; padding: 3px 8px; border-radius: 6px; font: inherit; font-size: 12px; color: var(--accent); }
.sail-fill .ic { width: 13px; height: 13px; }
.sail-fill:hover { background: var(--tint-brand); }
.sail-fill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sail-fill:disabled { opacity: .4; cursor: not-allowed; }
.sail-bx-edit { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--tint-brand); }
.sail-bx-row { display: grid; grid-template-columns: 44px 104px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; }
.sail-bx-n { font-weight: 600; color: var(--text); font-size: 13px; }
.sail-bx-load { color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sail-bx-in .el-input__inner { font-family: var(--mono); letter-spacing: .02em; }
.sail-bx-act { display: flex; align-items: center; gap: 8px; }
.sail-bx-act .el-button { margin-left: 0; }

@media (max-width: 960px) {
  .ld-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-total b { font-size: 18px; }
  .ld-line { flex-direction: column; gap: 2px; }
  .ld-line .ld-k { width: auto; }
  .ld-foot { flex-wrap: wrap; }
  .stl-row { flex-wrap: wrap; row-gap: 2px; }
  .sail-boxes { margin-top: 2px; }
  .sail-bx-row { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "n load" "cn cn" "bl bl"; }
  .sail-bx-row .sail-bx-n { grid-area: n; }
  .sail-bx-row .sail-bx-load { grid-area: load; justify-self: end; }
  .sail-bx-row .sail-bx-in:nth-of-type(1) { grid-area: cn; }
  .sail-bx-row .sail-bx-in:nth-of-type(2) { grid-area: bl; }
}

/* ── 排柜那一面（张洋 2026-10-14《发货系统改造》第 2 条「排柜有自己的专属表格面板，可以分2种维度展示」；2026-10-15 起在发货看板
   的表里：安排发货里按下「排柜」——「排柜……是位于发货内部的功能……还是在发货看板的表格里展示」「我说了你直接复用不就行了」）。
   表就是发货看板那张（.grid，同一套表头、格子、列宽），这里只写排柜才有的几样：
   按条目：一个发货仓的一个货号一组，几种发货方式上下几行、组内不画分隔线（一条一格的列几行合成一格）；
   按柜：海运 柜1、柜2……、快船、空运，一柜一组，组头一行横跨整张表，写开船 / 起飞日和装满几成。 ── */
/* 筛选条上「按条目 / 按柜」（跟筛选条上的按钮一样高） */
.tb-seg { display: inline-flex; flex: none; padding: 2px; gap: 2px; height: 32px; box-sizing: border-box; border-radius: 10px;
  background: var(--surface-2); }
.tb-seg button { appearance: none; border: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 11px; border-radius: 8px; background: transparent; color: var(--text-2); font-size: 13px; white-space: nowrap; }
.tb-seg button .ic { width: 14px; height: 14px; }
.tb-seg button:hover { color: var(--text); }
.tb-seg button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 40, 36, .10); }
.tb-seg button.on .ic { color: var(--accent); }
.tb-seg button:disabled { color: var(--text-4); cursor: default; }
.tb-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 「排柜」按下（排柜那一面开着）：跟「筛选」面板开着一个样子 */
.tb-f.on .tb-btn .tb-n.hot { background: var(--brand-solid); color: var(--on-brand); }
/* 表上面那一行黄条：几条待重新排柜、前三条为什么 */
.pkv-todo { display: flex; align-items: baseline; gap: 6px; margin: 0 16px 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  background: var(--tone-warn-bg); color: var(--tone-warn); }
.pkv-todo .ic { width: 14px; height: 14px; align-self: center; flex: none; }
.pkv-todo b { font-variant-numeric: tabular-nums; }
.pkv-todo-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.ed-bad.pkv-err { margin: 0 16px 8px; }
/* 按条目：同一条的几行之间不画线，最后一行才画；一条一格的那几列（产品信息、发货仓……，span-method 合成一格）画在一组的第一行里，
   它的下沿就是这一组的分隔线：照画 */
.grid.pk-grid .el-table__row.pk-mid > td.el-table__cell { border-bottom-color: transparent; }
.grid.pk-grid .el-table__row.pk-mid > td.el-table__cell[rowspan]:not([rowspan="1"]) { border-bottom-color: var(--el-table-border-color); }
/* 按柜：组头一行（从勾选框那一格起横跨整张表）——浅底，不跟着鼠标变色、点了不开详情 */
.grid.pk-grid .el-table__row.pk-head > td.el-table__cell { background: var(--surface-2); padding: 0; cursor: default; }
.grid.pk-grid .el-table__row.pk-head > td.el-table__cell > .cell { padding: 0; display: block; text-overflow: clip; }
.grid.pk-grid .el-table__row.pk-head:hover > td.el-table__cell { background: var(--surface-2); }
.grid.pk-grid .el-table__row.pk-empty > td.el-table__cell { cursor: default; }
.grid.pk-grid .el-table__row.pk-empty > td.el-table__cell > .cell { display: block; }
.pk-sku { font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.pk-cont { display: inline-flex; align-items: center; gap: 6px; }
.pk-cont b { font-weight: 600; color: var(--text); }
.chip.pk-par { --chip-bg: var(--surface-3); --chip-fg: var(--text-3); height: 18px; font-size: 11px; }
.chip.pk-lock { --chip-bg: var(--tone-ok-bg); --chip-fg: var(--tone-ok); height: 18px; font-size: 11px; }
.pk-sh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 14px; }
.pk-sh-m { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--tone-brand-bg); color: var(--accent); }
.pk-sh-m .ic { width: 15px; height: 15px; }
.pk-sh.wait .pk-sh-m { background: var(--tone-warn-bg); color: var(--tone-warn); }
.pk-sh-t { display: inline-flex; align-items: center; gap: 6px; }
.pk-sh-t b { font-size: 15px; font-weight: 600; color: var(--text); }
.pk-sh-c { font-style: normal; font-size: 12px; color: var(--text-3); }
.pk-sh-d { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pk-fill { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.pk-fill b { font-size: 14px; color: var(--accent); }
.pk-fill.low b { color: var(--tone-warn); }
.pk-fill.over b { color: var(--tone-danger); }
.pk-fill-n { font-size: 12px; color: var(--text-3); }
.pk-bar { width: 120px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.pk-bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand-solid); }
.pk-fill.low .pk-bar i { background: var(--tone-warn); }
.pk-sh-n { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pk-sh-n b { color: var(--text); font-size: 13px; }
.tb-btn.pk-edit { height: 28px; }
/* 柜头最左边的全选框（张洋 2026-10-15《发货优化》第 1 条「在每一柜的显示栏上最左边加上全选框」）：跟下面每一行的勾选框对齐——
   勾选框那一列 34 宽、框居中，组头左边距收成 10、框 14 宽，中线都在 17 */
.pk-sh { padding-left: 10px; }
.pk-sh-pick { display: inline-flex; align-items: center; width: 14px; flex: none; }
.pk-sh-pick .el-checkbox { height: 20px; }
/* 锁定 / 取消锁定（同一条「右边加上锁定/取消锁定按钮，锁定即代表排柜确定，取消锁定则是预排柜」）：没锁时一把锁 + 锁定；
   锁着时薄荷绿底、开着的锁 + 取消锁定；柜里有待重新排柜的字淡一档（点了说为什么）。
   锁着的柜：组头左边一条薄荷绿竖线，柜名后面「已锁定」小标签 */
.tb-btn.pk-lk { height: 28px; }
.tb-btn.pk-lk.on { background: var(--tg-mint-bg); color: var(--tg-mint-fg); border-color: transparent; }
.tb-btn.pk-lk.blocked { color: var(--text-3); }
.chip.pk-cfm { --chip-bg: var(--tg-mint-bg); --chip-fg: var(--tg-mint-fg); height: 18px; font-size: 11px; gap: 3px; }
.chip.pk-cfm .ic { width: 11px; height: 11px; }
.pk-sh.cf { box-shadow: inset 3px 0 0 var(--tg-mint-fg); }
.pk-none { padding: 12px 14px; font-size: 13px; color: var(--text-4); text-align: left; }
/* 表底下那一行：已排柜几条、几件、海运几柜 */
.foot .rg.pk-stat b { color: var(--text-2); font-weight: 600; }
/* 手机上：一条一张卡（按条目）/ 一柜一块（按柜） */
.pk-mlist-v .pk-m-head { margin: 8px 0 0; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.pk-mlist-v .pk-m-line { padding: 4px 2px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pk-mlist-v .pk-m-line.first { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.pk-mlist-v .pk-m-line.picked { background: var(--row-picked); }
.pk-m-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pk-cl-c { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-cl-r1 { display: flex; align-items: center; gap: 8px; }
.pk-cl-r1 b { color: var(--text); }
.pk-cl-r2 { font-size: 12px; color: var(--text-3); padding-top: 2px; }
/* 安排发货回执：三种发货方式各几条几件（2026-10-14 起安排发货不装柜，装柜在排柜里） */
.ld-mths { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ld-mth { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; }
.ld-mth-h { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.ld-mth-h .ic { width: 13px; height: 13px; color: var(--accent); }
.ld-mth-v { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ld-mth-v b { font-size: 16px; color: var(--text); }
.ld-mth-s { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ld-line.hot b { color: var(--tone-warn); }
@media (max-width: 760px) {
  .pk-sh { padding: 10px 12px; }
  .pk-bar { width: 72px; }
}

/* ── AI初审 ·「AI判断」那一大格（张洋 2026-11-03 15:16「1.起一个AI判断的大列，并且背景色跟其他列不同。2.大列下面有3小列，
   判断/详情/复核」）──
   整列（表头那一格也是）一个淡紫的底 --ai-col-*，行悬停、勾选时照样深一档。格子里横着三小列：宽是量出来的（app.js 的 ajW →
   --aj1 / --aj2 / --aj3），小列之间隔 --aj-gap（跟列与列之间一样），表头底下那一行三个小列名用同一套宽，各在自己那一小列正上方。
   判断：颜色跟流程里同名的状态一样（app.js 的 judgeStyle）；流程里没有同名状态的照这里：优先发货绿、优先借调天蓝、
   暂不发货灰（不用动的退后一档，跟「备货充足」一样）、优先检品黄（2026-11-05 起，待检里要先检的那一份，跟待检那个数一个色系）；
   暂不发货的原因：白底细边；复核：已通过薄荷绿、已改判靛蓝（人换了 AI 的判断）、待审批黄（跟申请的待审核一个色）、已驳回淡红；
   待复核是一颗「复审」按钮（.rq-btn，跟「申请发货」那颗同一个样子） */
.grid .el-table__cell.c-ai { background: var(--ai-col-bg); }
.grid .el-table__header .el-table__cell.c-ai { background: var(--ai-col-head); }
.grid .el-table__body tr:hover > td.el-table__cell.c-ai,
.grid .el-table__body tr.hover-row > td.el-table__cell.c-ai { background: var(--ai-col-hover); }
.grid .el-table__row.is-picked > td.el-table__cell.c-ai { background: var(--ai-col-picked); }
.aj { display: grid; grid-template-columns: var(--aj1) var(--aj2) var(--aj3); column-gap: var(--aj-gap); align-items: center;
  justify-items: center; }
.aj-c { display: flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%; }
/* AI初审那一面一条分了几种处理的（张洋 2026-11-05 手写稿，同日 14:25「除了产品信息和发货仓之外，其他都跟正常条目一样」）：
   拆成几整行，每一行照普通条目画（app.js 的 judgeTableRows / judgeSpan），这一段不另加样式 */
/* 量列宽时（ColMeasure）一条一种判断的样子和拆开的几行上下都画上：一列宽装得下两种，换状态不跳 */
.aj-msr { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.th-s.aj-hs { display: grid; grid-template-columns: var(--aj1) var(--aj2) var(--aj3); column-gap: var(--aj-gap); justify-items: center; }
.aj-who { font-size: 12px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 手机卡片上一行：标签、按钮不缩，中间那一句放不下省略（鼠标停上去看全；11-03 页面评审：字长了伸出卡片、折成三行） */
.aj-in { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.aj-in > .tg, .aj-in > .rq-btn { flex: none; }
.aj-in-d { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;
           color: var(--text-2); }
/* 拆成几行的写第一行，后面还有几行写「+N」（标准第三节「前 N 个 + 『+M』」；点复审看全） */
.aj-more { flex: none; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* 详情写成一行（复核小窗、条目详情）：几个标签和件数挨着、放不下折行 */
.aj-ln { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; font-size: 13px; color: var(--text);
         font-variant-numeric: tabular-nums; }
.aj-ln-k, .aj-fl { font-size: 12px; color: var(--text-3); }
.aj-fl { margin-right: 2px; }
/* 一种走法带着「其中 仓标签 件数」包成一组（MethodDest）：组里隔 4，带着明细的那一组跟后面那一样再拉开 6 */
.aj-grp { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.aj-ln > .aj-grp.has-d:not(:last-child) { margin-right: 6px; }
.tg.jd-ship { --tg-bg: var(--tg-green-bg); --tg-fg: var(--tg-green-fg); }
.tg.jd-borrow { --tg-bg: var(--tg-sky-bg); --tg-fg: var(--tg-sky-fg); }
.tg.jd-hold { --tg-bg: var(--surface-3); --tg-fg: var(--text-2); font-weight: 400; }
.tg.jd-qc { --tg-bg: var(--tg-amber-bg); --tg-fg: var(--tg-amber-fg); }
.tg.jr { --tg-bg: var(--surface-3); --tg-fg: var(--text-2); font-weight: 400; }
.tg.rvw-pass { --tg-bg: var(--tg-mint-bg); --tg-fg: var(--tg-mint-fg); }
.tg.rvw-change { --tg-bg: var(--tg-indigo-bg); --tg-fg: var(--tg-indigo-fg); }
.tg.rvw-ask { --tg-bg: var(--tg-amber-bg); --tg-fg: var(--tg-amber-fg); }
/* 复审（第二道 AI 审核）的结论：通过绿、改判橙、存疑黄（只说这是什么）；「复核」小列下一行、手机卡片、复核小窗里同一颗 */
.tg.rck-pass { --tg-bg: var(--tg-green-bg); --tg-fg: var(--tg-green-fg); }
.tg.rck-change { --tg-bg: var(--tg-orange-bg); --tg-fg: var(--tg-orange-fg); }
.tg.rck-doubt { --tg-bg: var(--tg-yellow-bg); --tg-fg: var(--tg-yellow-fg); }
.tg.rvw-reject { --tg-bg: var(--tg-rose-bg); --tg-fg: var(--tg-rose-fg); }
.tg.rvw-nego { --tg-bg: var(--tg-sky-bg); --tg-fg: var(--tg-sky-fg); }
.tg.rvw-lent { --tg-bg: var(--tg-green-bg); --tg-fg: var(--tg-green-fg); }
/* 拿旧数判的（之后重新取过数）淡一点 */
.ai-old { opacity: .55; }

/* 复核小窗：上面 AI 的判断和依据（一块淡紫底，跟表上那一大格同一个底色），下面复核那几行照「设置发货」「申请借调」的样子 */
.jd-ai { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--ai-col-bg); }
/* 待审批：人申请改成的那一份，跟 AI 那块同一个写法、换成中性底，上下对照着看 */
.jd-ask { background: var(--surface-2); }
/* 复核小窗里复审那一块：跟「申请改为」同一个底（AI 那一块是淡紫，这一块是复审对它的意见） */
.jd-rck { background: var(--surface-2); }
/* 复核那几行：间距跟小窗里别的行一样（.pd 的 14）。2026-11-05 起是六行件数（处理）+ 判断 + 说明，借调件数大于 0 才多借出仓和
   归还方式、整条暂不发货才多原因：判断那一行紧跟在六行下面（改了件数马上看得到判断成了什么），借出仓、原因摆在它后面；
   小窗正文到高了就在里面滚，按钮一直露着（同 .se-dialog）——原来按三选一那一版量的最小高度 228 不再要 */
.jd-form { display: flex; flex-direction: column; gap: 14px; }
.jd-dlg .el-dialog__body { max-height: calc(85vh - 136px); overflow-y: auto; }
.jd-dlg.is-fullscreen .el-dialog__body { max-height: none; }
/* 件数是 0 的那几行名字压浅一档，一眼看得出这一条分到了哪几种；六行一样高：后面那句小字不折行（手机上放不下省略） */
.jd .pm-row:not(.on) .pm-m { color: var(--text-3); }
.jd .pm-row { flex-wrap: nowrap; }
.jd .pm-row .jd-need { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 走法那一行下面「添加收货仓」的几小行（2026-11-06）：一种走法和它的小行一组（.pm-grp，组里隔 4、组和组照 .pd-v 隔 8）；
   小行前面空一格跟走法名字一样宽，件数框跟上面那一行的件数框一列，收货仓下拉落在上面那句小字那一列，删除（× 图标，
   跟筛选条件那一行同一个画法）和「添加收货仓」都钉在行尾；最后一行是留给默认收货仓的件数（只读，跟件数框里的数一样居中）。
   定宽的几样不让挤（只让那句小字省略）。手机上一行放不下：添加收货仓、收货仓下拉、默认收货仓各自换到下一行，落在件数框那一列
   （72 + 10）。
   下拉弹层挂在 body 底下，样式挂在 popper-class 上：仓标签后面小一号写完整仓名（一位店长两个仓时分得开） */
.pm-grp { display: flex; flex-direction: column; gap: 4px; }
.jd .pm-row > .pm-m, .jd .pm-row > .pm-q, .jd .pm-row > .pu, .jd .pm-row > .pm-rs, .jd .pm-row > .pm-qro { flex: none; }
.jd .pm-row > .pm-add, .jd .pm-row > .pm-del { flex: none; margin-left: auto; }
.jd .pm-rs { width: 176px; }
.jd .pm-qro { width: 96px; text-align: center; }
/* 「默认收货仓 / 借入」和它后面的仓标签挨着（4），跟这一行别的东西拉开 */
.jd .pm-home { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.jd-rs-pop .el-select-dropdown__item { display: flex; align-items: center; gap: 8px; }
.jd-rs-pop .pm-rwho { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--text-3); }
@media (max-width: 560px) {
  /* 一小行折成两行时里面隔 2、小行之间隔 6（组和组照旧 8）：件数和它的收货仓一眼配得上 */
  .jd .pm-grp { gap: 6px; }
  .jd .pm-row.has-add, .jd .pm-sub { flex-wrap: wrap; row-gap: 2px; }
  .jd .pm-row.has-add > .pm-add { margin-left: 82px; }
  .jd .pm-sub > .pm-rs { order: 1; flex: 0 0 calc(100% - 82px); width: auto; margin-left: 82px; }
  .jd .pm-sub > .pm-home { flex: 0 0 calc(100% - 82px); margin-left: 82px; }
}
/* 合计那一行：借调、走法、优先检品加起来比深圳这一批多的（拿旧数判的、借了照样全发的老判断），提醒色写多几件——通过时后端会拦下 */
.jd-over { color: var(--tone-warn); font-weight: 600; }
.jd-warn { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tone-warn); }
.jd-warn .ic { width: 14px; height: 14px; flex: none; }
.jd-ai-h, .jd-now { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.jd-now { padding: 0 2px; }
.jd-k { font-size: 12px; font-weight: 600; color: var(--text-3); }
.jd-ai-d { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.jd-why { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.jd-meta { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.jd .pm-m { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.jd-need { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.jd-rs { flex-wrap: wrap; row-gap: 6px; }

/* 「AI初审」回执里三种判断各几条那三块（点了只看那一种） */
.rv-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rv-sum-i {
  appearance: none; border: 0; font: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: baseline; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2);
  transition: box-shadow .15s ease-out;
}
.rv-sum-i:hover { box-shadow: inset 0 0 0 1px var(--tone-brand-line); }
.rv-sum-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rv-sum-i .tg { align-self: center; }
.rv-sum-i b { margin-left: auto; font-size: 20px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.rv-sum-u { font-size: 12px; color: var(--text-3); }
@media (max-width: 560px) { .rv-sum { grid-template-columns: minmax(0, 1fr); } }
/* 同一种块放在窄格子里（数据变动弹窗顶上那一排，.dv-sum）：一块里上面标签、下面大数 + 单位，一排放下全部几种（auto-fit 按宽度
   自己分几列）；点了只看那一种的那一块一圈主色；没有条目的那一块点不了，0 用次一档灰、常规粗细，单位跟它同色 */
.rv-sum.dv-sum { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.dv-sum .rv-sum-i { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px; padding: 10px 12px; }
.dv-sum .rv-sum-i .tg { grid-column: 1 / -1; justify-self: start; }
.dv-sum .rv-sum-i b { margin-left: 0; }
.rv-sum-i.on, .rv-sum-i.on:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.rv-sum-i:disabled { cursor: default; }
.rv-sum-i:disabled:hover { box-shadow: none; }
.rv-sum-i.zero b, .rv-sum-i.zero .rv-sum-u { font-weight: 400; color: var(--text-3); }

/* 一条的 AI 评价（点那一格弹出来的，和条目详情里那一块） */
.avd { display: flex; flex-direction: column; gap: 14px; }
.avd-h { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.avd-sku { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: .01em; }
.avd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-2); }
.avd-wh { flex: none; font-size: 12px; color: var(--text-3); }
.avd-v { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.avd-v .tg { flex: none; margin-top: 1px; }
.avd-l { font-size: 14px; font-weight: 600; line-height: 22px; color: var(--text); }
.avd-s { display: flex; flex-direction: column; gap: 4px; }
.avd-s + .avd-s { margin-top: 10px; }
.avd-k { font-size: 12px; font-weight: 600; color: var(--text-3); }
.avd-s p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.avd-s p.avd-lead { font-weight: 600; color: var(--text); }
.avd-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 10px 0; padding-top: 10px;
  border-top: 1px solid var(--line-2); font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.avd-old { color: var(--tone-warn); }
.dt-av { margin-left: 2px; }

/* ══════════════════════════════════════════════════════════════════
   拉杆箱（2026-10-23，app.js 的 LuggageView）：表就是发货看板那一张（2026-10-26 起，.grid / .pk-grid），骨架、标签是调拨账本 /
   发货看板那一套，这里只补几样它独有的
   ══════════════════════════════════════════════════════════════════ */
/* 颜色色点：分类块圆里一个大一点的，表里、卡片上颜色名前面一个小的 */
.lgx-sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle;
  background: var(--lgx-sw, var(--surface-3)); box-shadow: 0 0 0 1px var(--text-4); }
.lgx-sw-tile { width: 16px; height: 16px; }
.lgx-sw-BK { --lgx-sw: var(--lgx-sw-BK); } .lgx-sw-SY { --lgx-sw: var(--lgx-sw-SY); } .lgx-sw-WH { --lgx-sw: var(--lgx-sw-WH); }
.lgx-sw-BE { --lgx-sw: var(--lgx-sw-BE); } .lgx-sw-PK { --lgx-sw: var(--lgx-sw-PK); } .lgx-sw-GD { --lgx-sw: var(--lgx-sw-GD); }
.lgx-sw-GR { --lgx-sw: var(--lgx-sw-GR); }
.lgx-sw-YW { --lgx-sw: var(--lgx-sw-YW); } .lgx-sw-VT { --lgx-sw: var(--lgx-sw-VT); } .lgx-sw-RD { --lgx-sw: var(--lgx-sw-RD); }
.lgx-sw-GY { --lgx-sw: var(--lgx-sw-GY); }
.tile.on .tile-o .lgx-sw { box-shadow: 0 0 0 1px var(--text-4), 0 0 0 3px var(--on-brand); }
.lgx-m .sku .lgx-sw { margin-right: 2px; }
/* 预支与缺口：负的是缺口（看板「到货前缺口」那种红，.chip.bad），正的是预支（蓝） */
.chip.lgx-pre { --chip-bg: var(--tg-blue-bg); --chip-fg: var(--tg-blue-fg); }
/* 「数据提示」：图标黄一点，说明这次计算有要留意的数 */
.tb-btn.lgx-warn .ic { color: var(--tone-warn); }
/* 底行：待发柜明细的入口（看板上「点开看明细」那种虚线 .trl），数据时点那句是要读的内容、用次要字色，
   最近一次没算成的红字；合计每一段「名称 数 单位」不拆开 */
.lgx-link { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.board.lgx .foot .rg.lst-fn { color: var(--text-3); }
.lgx-seg { white-space: nowrap; }
.foot .rg.lgx-fail { color: var(--tone-danger); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 弹层（数据提示、备货建议、待发柜明细）：小标题 + 一条一行 */
.lgx-pop-b { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.lgx-pop-t { font-size: 12px; font-weight: 600; color: var(--text-3); }
.lgx-pop-t + .lgx-ls, .lgx-pop-t + .lgx-pc { margin-top: -2px; }
.lgx-ls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 20px; color: var(--text-2); }
.lgx-ls li { position: relative; padding-left: 12px; overflow-wrap: anywhere; }
.lgx-ls li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-4); }
.lgx-pc { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lgx-pc-w { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgx-pc b { color: var(--text); font-weight: 600; }
.lgx-none { font-size: 13px; color: var(--text-4); }
/* 手机卡片：一项一行，名字不折、数放不下省略；排柜那一面一段一行的货号放不下省略（鼠标提示看全） */
.lgx-m .cg .k { flex: none; white-space: nowrap; }
.lgx-m .cg .v { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgx-m-sku { flex: 0 1 auto; font-weight: 600; color: var(--text); }
/* 电脑上搜索框定宽：切「排柜」那几颗按钮多了少了，搜索框不跟着变宽变窄；窄一点的电脑上按钮左右各收 3，工具条不折成两行
   （看板安排发货那两面同一条规矩） */
@media (min-width: 961px) {
  .board.lgx .tb-q { flex: 0 0 220px; }
}
@media (min-width: 961px) and (max-width: 1600px) {
  .board.lgx .tb .tb-btn { padding: 0 9px; }
  .board.lgx .tb .tb-seg button { padding: 0 8px; }
}
/* 1366 以下搜索框收到 180（两面一样宽）：排柜那一面按钮多，220 时 1190 宽以下折成两行、货号那一面一行，切「排柜」表格会跳 */
@media (min-width: 961px) and (max-width: 1365px) {
  .board.lgx .tb-q { flex: 0 0 180px; }
}
/* 1366 以下（笔记本）排柜那一面按钮最多：「备货建议」「显示列」「数据提示」「下载」只留图标和数，鼠标停上去有字
   （显示列是看板那颗，字包在 .tb-txt 里；看板上照旧带字） */
@media (min-width: 961px) and (max-width: 1365px) {
  .board.lgx .tb .lgx-btxt, .board.lgx .tb .tb-txt { display: none; }
}
@media (max-width: 960px) {
  /* 手机上：合计、底行那两句字多，折行（调拨账本那几句短，照旧一行）；筛选条先合计、再搜索（占满一行）、再按钮 */
  .board.lgx .lst-sum { white-space: normal; line-height: 20px; }
  .board.lgx .tb-q { order: 1; flex: 1 1 100%; max-width: none; }
  /* 「排柜」那几颗跟「备货建议」「数据提示」「下载」排成同一串、自然折行（不各占一行） */
  .board.lgx .tb-acts { display: contents; }
  .board.lgx .tb-acts > *, .board.lgx .tb > .tb-btn { order: 2; }
  .board.lgx .foot { flex-wrap: wrap; row-gap: 4px; }
  .board.lgx .foot .rg.lst-fn { white-space: normal; flex: 1 1 100%; order: 3; }
}

/* ══════════════════════════════════════════════════════════════════
   拉杆箱另外五页（2026-10-27，张洋「把701的7个颜色的单独模组全部删掉…改成展示排柜表信息和备货信息…再加一个出货明细」
   「新增一个本期采购订单表」「把企微表里的701出货记录跟踪也加入系统」）：白卡、工具条、表都是看板那一套（.card / .tb / .grid），
   这里只补这几页自己的：顶上块的单位、企微那种「名目一列 + 一柜一列」的表、颜色那一格、最终结果标签、两个弹窗的格子
   ══════════════════════════════════════════════════════════════════ */
.tile-u { margin-left: 2px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.tile.on .tile-u { color: var(--on-brand); opacity: .88; }
/* 名目那一列（出货明细、排柜表）：浅灰底、字小一号；总数那一行、排柜表表头那几行同一个浅灰底 */
.lgb-sheet td.el-table__cell.lgb-lab { background: var(--surface-2); }
.lgb-lab-t { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.lgb-sheet .lgb-r-total > td.el-table__cell, .lgb-sheet .lgb-r-head > td.el-table__cell { background: var(--surface-2); }
.lgb-sheet .lgb-r-at .txt, .lgb-sheet .lgb-r-by .txt { font-size: 12px; }
.lgb-bx { display: inline-flex; align-items: center; gap: 2px; }
.lgb-ed {
  appearance: none; border: 0; background: transparent; padding: 2px; border-radius: 4px; cursor: pointer;
  display: inline-grid; place-items: center; color: var(--text-3);
}
.lgb-ed:hover { background: var(--surface-3); color: var(--accent); }
.lgb-ed:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lgb-ed .ic { width: 12px; height: 12px; }
/* 出货明细「最终结果」还没审核：能改数的账号点开选审核结果（张洋 2026-10-27 17:57「点审核通过生成本期采购单」）。
   跟定了结果的那种标签一样高、一样圆角，边框照工具条按钮那条线 */
.lgb-rvb {
  appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 2px;
  height: 20px; padding: 0 4px 0 7px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text-2); font-size: 12px; font-weight: 500; line-height: 18px;
}
.lgb-rvb:hover { border-color: var(--accent); color: var(--accent); }
.lgb-rvb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lgb-rvb .ic { width: 12px; height: 12px; }
/* 最终结果 / 负责人审核：审核通过绿、修改通过蓝、本期跳过灰；本周锁定（人改过、定了结果）黄 */
.chip.lgb-rv-ok { --chip-bg: var(--tg-green-bg); --chip-fg: var(--tg-green-fg); }
.chip.lgb-rv-edit { --chip-bg: var(--tg-blue-bg); --chip-fg: var(--tg-blue-fg); }
.chip.lgb-rv-skip { --chip-bg: var(--tg-gray-bg); --chip-fg: var(--tg-gray-fg); }
.chip.lgb-frz { margin-left: 6px; --chip-bg: var(--tg-amber-bg); --chip-fg: var(--tg-amber-fg); }
/* 排柜表表头：需求批次（小字）/ 柜号 / 状态标签，竖着三行 */
.lgb-pg th.el-table__cell > .cell { white-space: normal; line-height: 16px; }
.lgb-ph { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; }
.lgb-ph small, .lgb-ph b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgb-ph small { font-size: 12px; font-weight: 400; color: var(--text-3); }
.lgb-ph b { font-size: 12px; font-weight: 600; color: var(--text-2); }
.lgb-ph-x { visibility: hidden; }   /* 没有状态标签的那几列也占这一行，表头一样高（切「总订单」时表不往上跳） */
.lgb-ph > span { line-height: 18px; }
.chip.lgb-st-p { --chip-bg: var(--tg-amber-bg); --chip-fg: var(--tg-amber-fg); }
.chip.lgb-st-s { --chip-bg: var(--tg-mint-bg); --chip-fg: var(--tg-mint-fg); }
/* 本期采购订单、厂家备货：颜色那一格照参考图填上颜色（深色白字、浅色深字），合计那一行浅灰底 */
.lgb-cl {
  display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 22px; padding: 0 8px; border-radius: 4px;
  font-size: 12px; font-weight: 600; background: var(--lgx-sw, var(--surface-3)); color: var(--lgx-sw-ink); box-shadow: inset 0 0 0 1px var(--line);
}
.lgb-cl.dark { color: var(--on-brand); box-shadow: none; }
.lgb-po .el-table__footer-wrapper td.el-table__cell, .lgx-tot .el-table__footer-wrapper td.el-table__cell { background: var(--surface-2); }
.lgb-po .el-table__footer-wrapper .cell, .lgx-tot .el-table__footer-wrapper .cell { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.lgb-po .el-table__footer-wrapper td.el-table__cell:first-child .cell, .lgx-tot .el-table__footer-wrapper td.el-table__cell:first-child .cell { color: var(--text-2); }
.lgx-tot .el-table__footer-wrapper .cell { padding: 0 4px; white-space: nowrap; overflow: visible; }   /* 列宽是按单行的数量的，合计位数多也不折行 */
.lgb-per { width: 160px; }
/* 本期采购订单能改的一格（LgCell）：平时跟只读的一样，鼠标停上去一圈细框表示能点；点进去换成输入框 */
.lgb-cell { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-width: 56px; min-height: 24px;
  padding: 0 6px; border-radius: 4px; vertical-align: middle; }
.lgb-cell.ed { cursor: text; }
.lgb-cell.ed:hover { box-shadow: inset 0 0 0 1px var(--el-border-color-hover); }
.lgb-cell.ed:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lgb-in { width: 100%; }
.lgb-in .el-input__inner { font-family: inherit; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
/* 出货记录跟踪：柜名旁边一个要确认的小标（鼠标停上去看是哪几件） */
.lgb-key { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.lgb-al { display: inline-grid; place-items: center; color: var(--tone-warn); }
.lgb-al .ic { width: 14px; height: 14px; }
.lgb-tip { white-space: pre-line; max-width: 360px; }
.lgb-al.off { visibility: hidden; }   /* 每一行都给提醒图标留位置，柜名不跟着有没有图标左右挪 */
/* 两个弹窗：改出货明细一柜（21 个名目三列排）、改出货记录跟踪一柜（两列排） */
.lgb-qf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.lgb-qf-i { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lgb-qf-k { flex: none; width: 44px; font-size: 13px; color: var(--text-2); }
.lgb-qf-i .el-input-number { flex: 1; min-width: 0; width: auto; }
.lgb-qf-t { float: left; font-size: 13px; line-height: 32px; color: var(--text-2); }
.lgb-qf-t b { color: var(--text); font-variant-numeric: tabular-nums; }
.lgb-tf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.lgb-tf .el-select, .lgb-tf .el-date-editor.el-input { width: 100%; }
@media (max-width: 960px) {
  .lgb-qf { gap: 8px; }
  .lgb-qf-k { width: 40px; font-size: 12px; }
  .lgb-tf { grid-template-columns: minmax(0, 1fr); }
}
/* 表：表头格上下居中（名目那一格跨两层）；分组表头不填底色（文件头「表头：灰色小字、不填底色」）；行没有点开的事不显示手形 */
.lgb-tbl th.el-table__cell { vertical-align: middle; }
.lgb-tbl thead.is-group th.el-table__cell { background: var(--surface); }
.lgb-tbl .el-table__row { cursor: default; }
.lgb-tbl.lgb-click .el-table__row, .lgb-tm.lgb-click { cursor: pointer; }
/* 跟踪在手机上一柜一张卡 */
.lgb-tm-t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lgb-tm-al { display: flex; align-items: flex-start; gap: 6px; padding: 0 12px 8px; font-size: 12px; line-height: 18px; color: var(--tone-warn); }
.lgb-tm-al .ic { flex: none; width: 14px; height: 14px; margin-top: 2px; }
/* 顶上六块一样宽（同类几块格式一样）：电脑上均分系列页签右边剩下的宽，最宽 184、最窄 160（最长那段字「出货记录跟踪」
   「35,483套」放得下），约 1270 宽以上六块都摆得下，再窄才左右滑；手机上照旧按内容宽、横着滑 */
@media (min-width: 961px) {
  .board.lgx .flow .tiles { flex: 1 1 auto; }
  .board.lgx .flow .tile { flex: 1 1 0; min-width: 160px; max-width: 184px; }
}
/* 顶上最左边那一组系列页签（601 / 701 / 801 / 901，2026-11-03 分系列）：跟顶栏页签（.views）同一种样子——青底上一条半透明白、
   选中的那颗白底加粗。它是「换一个系列看」的页签，不是块：整页的实心色照旧只有选中的块和主按钮（文件头），
   字是页签那一档（13），不跟块上的大数一档。比块矮，在那一行里竖着居中。手机上 .flow 折行，这一组单占一行、四颗平分，
   内边距 6：组的左边跟下面那排块齐（10），选中那一颗的左边跟顶栏页签齐（16）——取 3 时两边各差 3 像素，看着像没对齐 */
.lgx-ser { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 12px; background: var(--glass); }
.lgx-ser-b { appearance: none; border: 0; font: inherit; cursor: pointer; flex: none; padding: 6px 14px; border-radius: 9px;
  background: transparent; color: var(--on-bg-2); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lgx-ser-b:hover { color: var(--on-bg); }
.lgx-ser-b.on { background: var(--surface); color: var(--text); font-weight: 600; }
.lgx-ser-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 960px) {
  .lgx-ser { flex: 1 1 100%; padding: 6px; }
  .lgx-ser-b { flex: 1 1 0; border-radius: 6px; }
}