:root{
/* ==========================================================================
v2.0 色温统一（2026-11-03）
改版前顶栏是米橙暖色、内容区是冷灰蓝 —— 一个界面两套色温，
这是"看着别扭但说不出哪儿"最直接的原因。现在全站转暖：
底色从 #f6f7f9（冷灰）换成 #faf8f5（暖白），边框从冷灰换成米灰，
主色从钢蓝 var(--primary) 换成陶土 #b8501f。
为什么主色选 #b8501f：它和白字的对比是 4.99:1（过 AA），
而顶栏现成的 #e89a6b 只有 2.3:1 —— 那个只能做装饰，不能做按钮底色。
========================================================================== */
--bg:#faf8f5; /* 页面底：暖白，不是灰白 */
--bg-2:#f5f0ea; /* 次级底：表头、内嵌块、hover */
--panel:#ffffff;
--line:#ece4db; /* 轻边框 */
--line-2:#ddd2c6; /* 强边框：输入框、需要看清的边界 */
--line-soft:#f2e9e0; /* 表格行分隔：比 --line 再淡一档 */
--text:#2c2521; /* 暖黑，比 var(--text) 柔 */
--muted:#7a6c60; /* 暖灰，在 --bg 上 4.77:1 过 AA */
--primary:#b8501f; /* 陶土橙（白字 4.99:1） */
--primary-d:#9a4219; /* hover / 深字 */
--primary-soft:#fbf1e9;
--danger:#b4372a; --danger-soft:#fdf1ef;
--warn:#a8630c; --warn-soft:#fdf6e8;
--ok:#2f7a52; --ok-soft:#eef7f1;
--radius:10px;--radius-sm:8px;--radius-lg:14px;
/* ==========================================================================
P0 设计令牌：字体 6 档 + 间距 7 档（DESIGN_SYSTEM.md 第二节）
改版前这里散着 16 种字号、22 种间距 —— 同一级的文字权重不一致，
卡片内边距各不相同，页面拼不齐。收敛成两套刻度后，
「同级信息看起来同级」才成立。
硬下限：--fs-micro = 11px。再小在 Windows 125% 缩放下会糊成灰块。
========================================================================== */
--fs-display:24px; /* 全站最大：KPI 数字、统计卡 */
--fs-xl:20px; /* 强调数字：工资条实发合计、绩效最终分、登录页标题 */
--fs-h1:18px; /* 页面标题 */
--fs-h2:15px; /* 卡片标题 */
--fs-body:13px; /* 正文、表格 —— 全站基准 */
--fs-sm:12px; /* 辅助说明、标签 */
--fs-micro:11px; /* 角标（下限，不可再小） */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
--sp-6:24px; --sp-8:32px; --sp-12:48px;
/* 顶栏药丸滑块（Lucian #039）：--x / --w 由 syncNavPill() 按实测像素实时写入。
这里兜底两个用处：首帧还没测量时不塌成 0 宽；令牌守卫要求 var() 有定义。
--i 是项目既有的逐行延迟约定（列表行、下拉行共用），兜底 0 与原 fallback 等价。 */
--x:0px; --w:80px; --i:0;
/* 顶栏搜索框的左边距（v1.9.4 改为贴着菜单栏、向右展开）。
由 nsOpen() 实测写入；这里兜底一个值，令牌守卫才认它有定义。 */
--ns-l:160px;
/* 缓动 --ease-out / --ease-spring 定义在文件后段「动效令牌」一节，
不要在这里再写一份：两份值不同（.34,1.56 vs .34,1.4），后定义者生效，
容易让人以为是这里在起作用。
顶栏暖色（用户要求：纯黑太硬，要轻松温暖）。
只作用于顶栏 + 下拉，不动全站 --text / --line —— 改全局会让表格、表单一起变色。
--warm-dim 是未选中项的文字色：#7d6555 在 --warm-soft 上约 4.9:1，够 AA。 */
--warm-1:#f7bd93; --warm-2:#e89a6b; --warm-ink:#4a2c17;
--warm-soft:#fdf2e9; --warm-line:#f1e2d6; --warm-dim:#7d6555;
/* 搜索结果行的图标底色：由 JS 内联写成 style="--c:…"（按分组轮换）。
这里给 :root 兜底，令牌守卫才认它有定义；内联值会覆盖。 */
--c:linear-gradient(140deg,#f8c9a6,#efae82);
}
*{box-sizing:border-box}
/* font 简写里不能塞 var()：整条声明要到 computed-value time 才解析，
斜杠后的字族部分会和 font-size 的解析打架，浏览器直接丢弃。
所以拆成 font-size + line-height 两行写。 */
body{margin:0;background:var(--bg);color:var(--text);
font-size:var(--fs-body);line-height:1.6;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
a{color:var(--primary);text-decoration:none}
/* 登录 / 门禁页：第一印象。
原来是纯渐变 + 居中文字 —— 长段落居中读起来费劲（每行都要重新找起点），
而且 360px 宽把「到飞书工作台找到「六道CRM」点开即自动登录」挤成三行。
现在：加宽到 420、文字左对齐、背景叠两层暖色光晕把整块白卡"托"起来。 */
.login-wrap{display:flex;align-items:center;justify-content:center;height:100vh;
background:
radial-gradient(110% 80% at 88% -12%,rgba(232,154,107,.20),transparent 58%),
radial-gradient(80% 70% at -8% 108%,rgba(184,80,31,.07),transparent 60%),
var(--bg)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
padding:var(--sp-8);width:420px;max-width:calc(100vw - 32px);
box-shadow:0 1px 2px rgba(62,44,32,.04),0 24px 48px -34px rgba(62,44,32,.4)}
.login-card h1{margin:0 0 var(--sp-1);font-size:var(--fs-xl);letter-spacing:-.3px}
.login-card p{margin:0 0 var(--sp-6);color:var(--muted);font-size:var(--fs-body)}
.login-logo{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xl);
font-weight:700;margin-bottom:var(--sp-1);letter-spacing:-.2px}
.login-logo .logo-mark{width:28px;height:28px;font-size:var(--fs-h2);border-radius:9px}
/* ---------- 布局：顶部横向导航（工作台）+ 左侧纵栏（管理后台） ---------- */
.app-shell{display:flex;flex-direction:column;min-height:100vh}
.app-body{flex:1;display:flex;min-height:0}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
/* ---------- 版式骨架（v2.0） ----------
原来 .content 是 padding 16/24 + 无最大宽度：1440 宽下表格直接贴到窗口边缘，
1920 宽下再拉长 —— 内容永远比"舒适阅读宽度"宽一截，眼睛要横着扫。
现在加最大宽度 + 左右 32px，宽屏时居中留白，窄屏靠 media query 收回。 */
.content{padding:var(--sp-5) var(--sp-8) var(--sp-12);overflow:auto;flex:1;
max-width:1720px;width:100%;margin:0 auto}
/* 页面标题：从一个 15px 的加粗字，改成有上下呼吸的页头。
底边线让"页头"和"内容"分开 —— 原来标题和第一张卡之间只有 16px，
看起来像卡片的标题跑到了外面。 */
.page-head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-5);
padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.page-head b{font-size:var(--fs-h1);font-weight:650;letter-spacing:-.3px}
/* ---- 顶栏 ---- */
.navbar{height:56px;background:#fffdfb;border-bottom:1px solid var(--warm-line);display:flex;align-items:center;
justify-content:space-between;padding:0 var(--sp-4);position:sticky;top:0;z-index:30}
.navbar-left,.navbar-right{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.navbar-right{gap:var(--sp-3)}
.logo{display:flex;align-items:center;gap:var(--sp-2);margin-right:var(--sp-4);flex-shrink:0}
.logo-mark{width:26px;height:26px;border-radius:7px;background:var(--primary);color:#fff;font-weight:700;
display:flex;align-items:center;justify-content:center;font-size:var(--fs-body)}
.logo-text{font-weight:700;font-size:var(--fs-h2);letter-spacing:.3px}
.console-title{font-size:var(--fs-h2);font-weight:600;margin-left:var(--sp-1)}
.console-title .crumb{font-size:var(--fs-body);font-weight:400;color:var(--muted);margin-left:var(--sp-2)}
/* 顶部主导航 = Lucian UX/UI #039「Sliding pill tabs」的横向版。
原来是一排各自 independent 的小方块（hover 变灰、选中蓝底），
改成一整颗胶囊容器 + 一枚深色滑块：换页时滑块带弹簧曲线滑过去，
「我现在在哪一块」从文字变色变成一件看得见的位移。
⚠ 滑块是 absolute + transform，容器**不能**改成 overflow:hidden ——
窄屏 .nav-main 要横向滚动，hidden 会把下拉和滑块一起裁掉。 */
.nav-main{position:relative;display:flex;align-items:center;gap:0;min-width:0;overflow:visible;
padding:var(--sp-1);border-radius:999px;background:var(--warm-soft);box-shadow:0 0 0 1px var(--warm-line)}
.nav-pill{position:absolute;left:0;top:var(--sp-1);bottom:var(--sp-1);width:var(--w,80px);
border-radius:999px;background:linear-gradient(135deg,var(--warm-1),var(--warm-2));
transform:translateX(var(--x,var(--sp-1)));
box-shadow:0 10px 20px -12px rgba(180,101,47,.65),inset 0 1px 0 rgba(255,255,255,.55);
pointer-events:none;
transition:transform .5s var(--ease-spring),width .5s var(--ease-spring)}
.nav-item{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);border-radius:6px;
color:var(--text);font-size:var(--fs-body);white-space:nowrap;cursor:pointer}
.nav-item:hover{background:var(--bg)}
.nav-item.active{color:var(--primary);font-weight:600;background:var(--primary-soft)}
.nav-item.ghost{border:1px solid var(--line);padding:var(--sp-1) var(--sp-3);font-size:var(--fs-body)}
.nav-item .caret{font-size:var(--fs-micro);color:var(--muted)}
/* 以下四条只作用于顶栏这一层（> 直系），下拉菜单里的 .nav-item 仍保持原来的方块 hover */
.nav-main>.nav-item,.nav-main>.dd>.dd-toggle{position:relative;z-index:1;
padding:var(--sp-1) var(--sp-3);border-radius:999px;background:none;
color:var(--warm-dim);font-weight:600;transition:color .35s var(--ease-out)}
.nav-main>.nav-item:hover,.nav-main>.dd>.dd-toggle:hover{background:none;color:var(--warm-ink)}
.nav-main>.nav-item.active,.nav-main>.dd>.dd-toggle.active{background:none;color:var(--warm-ink);font-weight:600}
.nav-main>.nav-item.active .caret,.nav-main>.dd>.dd-toggle.active .caret{color:var(--warm-ink);opacity:.85}
.badge{background:#ef4444;color:#fff;font-size:var(--fs-sm);line-height:1;border-radius:20px;
padding:var(--sp-1) var(--sp-2);min-width:18px;text-align:center}
/* ---------- 顶栏全局搜索 = Lucian UX/UI #027「Expanding top-bar search」 ----------
原元素：点放大镜 → 输入框从 44px 横向拉长 → 下方浮层展开建议、命中字母高亮、上下键选择。
移植时保留结构、宽度伸展曲线（.55s 弹簧）与浮层的 delay 分层，
只把数据换成本系统的功能模块。
⚠ v1.9.4：放大镜从顶栏最右挪到**菜单栏右边**（用户："想搜要横跨整个屏幕"）。
所以锚边整体从左改写：按钮/输入框贴 left，展开时向右长，浮层也从左侧展开。
别只改 JS 不改这几行 —— 那样输入框会从屏幕中间往外长，浮层还会跑到视口外。
⚠ 展开时把导航淡出（同 #027 让 logo/nav 让位），否则浮层和菜单抢注意力。 */
.nav-search{position:relative;width:34px;height:34px;flex:none;z-index:46;margin-left:var(--sp-2)}
.ns-go{position:absolute;left:0;top:0;width:34px;height:34px;border:1px solid var(--warm-line);
border-radius:10px;background:var(--warm-soft);color:var(--warm-ink);display:grid;place-items:center;
padding:0;cursor:pointer;z-index:2;
transition:background-color .25s var(--ease-out),opacity .2s var(--ease-out)}
.ns-go:hover{background:#fbe5d3}
.ns-go:focus-visible{outline:2px solid var(--warm-2);outline-offset:2px}
.ns-go svg,.ns-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nav-search.is-open .ns-go{opacity:0;pointer-events:none}
.ns-field{position:absolute;left:0;top:50%;transform:translateY(-50%);
width:34px;height:34px;display:flex;align-items:center;border-radius:10px;background:#fff;
box-shadow:0 0 0 1px var(--warm-line);
transition:width .55s var(--ease-spring),box-shadow .3s var(--ease-out)}
/* --ns-l 由 nsOpen() 写入（按钮当前的左边距），把展开宽度夹在视口内 */
.nav-search.is-open .ns-field{width:min(320px,calc(100vw - var(--ns-l,160px) - var(--sp-4)));
box-shadow:0 0 0 2px var(--warm-2),0 12px 26px -18px rgba(150,90,50,.55)}
.ns-in{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;
padding:0 var(--sp-8) 0 var(--sp-3);
font-size:var(--fs-body);color:var(--text);opacity:0;transition:opacity .3s var(--ease-out) .12s}
.ns-in::placeholder{color:var(--muted)}
/* 输入框不能再吃全站的蓝色焦点环（:focus-visible 的 primary 描边 + input:focus 的蓝光晕）：
外框已经用 --warm-2 的 2px 描边表示「正在输入」，再叠一层蓝框就花了。 */
.ns-in:focus,.ns-in:focus-visible{outline:none;box-shadow:none}
.nav-search.is-open .ns-in{opacity:1}
.ns-x{position:absolute;right:2px;top:2px;width:30px;height:30px;border:0;padding:0;border-radius:8px;
background:var(--warm-soft);color:var(--warm-ink);display:grid;place-items:center;cursor:pointer;
opacity:0;transform:scale(.6) rotate(-90deg);
transition:opacity .25s var(--ease-out),transform .5s var(--ease-spring)}
.nav-search.is-open .ns-x{opacity:1;transform:none}
.ns-pop{position:absolute;left:0;top:calc(100% + var(--sp-3));width:340px;
max-width:calc(100vw - var(--ns-l,160px) - var(--sp-4));padding:var(--sp-3) var(--sp-2) var(--sp-2);
border-radius:14px;background:#fffdfb;
box-shadow:0 0 0 1px var(--warm-line),0 30px 60px -30px rgba(120,80,50,.45);
transform-origin:0 0;opacity:0;transform:translateY(-10px) scale(.96);
pointer-events:none;visibility:hidden;
transition:opacity .25s var(--ease-out),transform .45s var(--ease-spring),visibility 0s .45s}
.nav-search.is-open .ns-pop{opacity:1;transform:none;pointer-events:auto;visibility:visible;
transition:opacity .3s var(--ease-out) .1s,transform .55s var(--ease-spring) .1s}
.ns-sec{margin:0 var(--sp-2) var(--sp-2);font-size:var(--fs-sm);font-weight:700;
letter-spacing:.04em;color:var(--muted)}
.ns-recent{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin:0 var(--sp-1) var(--sp-3)}
.ns-recent button{height:28px;padding:0 var(--sp-3);border:0;border-radius:999px;
background:var(--warm-soft);font-size:var(--fs-sm);font-weight:600;color:var(--warm-ink);cursor:pointer}
.ns-recent button:hover{background:#fbe5d3}
.ns-list{margin:0;padding:0;list-style:none;max-height:300px;overflow:auto}
.ns-opt{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1) var(--sp-2);
border-radius:10px;cursor:pointer;opacity:0;transform:translateY(6px);
transition:background-color .2s var(--ease-out),opacity .3s var(--ease-out),
transform .45s var(--ease-spring)}
.nav-search.is-open .ns-opt{opacity:1;transform:none}
.ns-opt:hover{background:var(--warm-soft)}
.ns-opt[aria-selected="true"]{background:var(--warm-soft)}
.ns-opt i{width:26px;height:26px;flex:none;border-radius:8px;background:var(--c,var(--warm-1))}
.ns-opt b{display:block;font-size:var(--fs-body);font-weight:600;color:var(--text)}
.ns-opt b mark{background:none;color:#b4652f;font-weight:800}
.ns-opt small{display:block;font-size:var(--fs-sm);color:var(--muted)}
.ns-empty{padding:var(--sp-6) var(--sp-2);text-align:center;font-size:var(--fs-body);color:var(--muted)}
/* 搜索展开时让位（#027 的 logo/nav 淡出）：导航与右侧按钮淡到几乎不可见但保留占位 */
.navbar.searching .nav-main{opacity:.16;pointer-events:none;
transition:opacity .25s var(--ease-out)}
.navbar.searching .navbar-right>:not(.nav-search){opacity:0;pointer-events:none;
transition:opacity .2s var(--ease-out)}
/* 下拉：展开/收起由 JS 统一驱动（55ms 进、160ms 出），不再用 :hover。
原因：:hover 与「点击钉住」的 .open 会叠加 —— 一个菜单被点击钉住后，
再 hover 下一项就是两个菜单同时展开（2026-11-02 用户截图的那个 bug）。
只留 JS 一个真相源后，移开必收、也不可能同时开两个。
★ 菜单与按钮之间有 6px 视觉间距，鼠标向下移动会穿过空隙：
给菜单挂一层透明伪元素「悬停桥」把空隙填满，热区连续，视觉留白不变。 */
.dd{position:relative}
.dd-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:180px;background:#fffdfb;
border:1px solid var(--warm-line);border-radius:10px;box-shadow:0 14px 34px -14px rgba(120,80,50,.28);
padding:var(--sp-2);z-index:40;transform-origin:top left}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} /* ← 悬停桥 */
/* ⚠ fill-mode 用 backwards 不用 both：both 会在结束后钉住 transform:none，
日后谁给 .dd-menu 加一点 hover 位移都会被压掉（navRowIn 踩过这个坑）。
15 个入场也一并从手写的 cubic-bezier(.2,.8,.3,1) 改成 var(--ease-out) ——
那条手写曲线和令牌不是同一个值（y1 .8 vs 1），等于全站并存两套 ease-out。 */
.dd-menu.show{display:block;animation:ddIn .15s var(--ease-out) backwards}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.dd-menu .nav-item{display:flex;width:100%;border-radius:8px;padding:var(--sp-2) var(--sp-3)}
.dd-menu .nav-item:hover{background:var(--warm-soft);color:var(--warm-ink)}
.dd-menu .nav-item.active{background:var(--warm-soft);color:var(--warm-ink);font-weight:600}
/* 下拉子项逐行入场 —— Lucian #039 的 stagger。
只做「展开那一下」，不常驻循环：看板类页面是每天盯的，常驻动画会晃眼。
⚠ 用 backwards 而不是 both：both 会把 transform:none 钉死在动画结束后，
压掉 .nav-item:active 的 scale(.97) 按压反馈（这个坑之前踩过）。
⚠ v1.9.5：原来是 .42s + var(--ease-spring)。两处都不对 ——
① 420ms 超了 UI 的 300ms 预算，菜单每天点几十次，慢就是钝；
② 弹簧回弹是"有物理感"的语气，用在财务系统每天点的菜单上像在玩。
改成 .22s ease-out + 32ms 递进：6 项走完 380ms，第 7 项起同时到（--i 上限 5）。
别把 delay 也去掉 —— 递进本身是这个动效唯一的信息量（"从上面长出来"）。 */
.dd-menu>.nav-item{animation:navRowIn .22s var(--ease-out) backwards;
animation-delay:calc(var(--i,0) * 32ms)}
@keyframes navRowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
/* reduced-motion 必须连 animation-delay 一起清：
只把 duration 归零的话，延迟期元素还停在 opacity:0，菜单会先空一片再突然出现。 */
@media (prefers-reduced-motion:reduce){
.dd-menu>.nav-item{animation:none!important;animation-delay:0s!important}
}
.dd-menu.right{left:auto;right:0;min-width:220px;transform-origin:top right}
.dd-head{padding:var(--sp-2) var(--sp-3) var(--sp-3);border-bottom:1px solid var(--line);margin-bottom:var(--sp-2)}
.dd-head .muted{margin-top:var(--sp-1)}
/* 鼠标已经进入菜单 / 按钮时，保持展开（JS 加分，避免临界抖动） */
.dd.open>.dd-menu{display:block;animation:ddIn .15s var(--ease-out) backwards}
.dd-menu.open{display:block;animation:ddIn .15s var(--ease-out) backwards} /* 头像菜单：点击展开 */
.avatar-menu{position:relative}
.avatar{width:32px;height:32px;border-radius:50%;background:#7c3aed;color:#fff;font-weight:600;
display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;font-size:var(--fs-body)}
/* 顶栏的「管理后台 / 进入工作台」切换：原来和导航药丸**同色同形**（橙描边 + 橙字），
一进页面顶栏就有两个橙色胶囊，谁"当前选中"就说不清了。
改成中性描边 —— 顶栏只保留一个橙色高亮（当前所在导航项）。 */
button.pill{border:1px solid var(--line-2);color:var(--text);background:var(--panel);
border-radius:20px;height:30px;padding:0 var(--sp-3);font-size:var(--fs-sm)}
button.pill:hover{background:var(--bg);border-color:var(--line-2);color:var(--text)}
/* ---- 管理后台左侧纵栏 ---- */
.admin-side{width:186px;background:#fff;border-right:1px solid var(--line);padding:var(--sp-3) 0;flex-shrink:0;overflow:auto}
.side-brand{padding:var(--sp-1) var(--sp-4) var(--sp-3);font-weight:600;font-size:var(--fs-body);border-bottom:1px solid var(--line);margin-bottom:var(--sp-2)}
.side-group{padding:var(--sp-3) var(--sp-4) var(--sp-1);font-size:var(--fs-sm);color:var(--muted);letter-spacing:.5px}
.side-item{display:block;padding:var(--sp-2) var(--sp-4);color:var(--text);font-size:var(--fs-body)}
.side-item:hover{background:var(--bg)}
.side-item.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
/* ---- 开关卡片 / 步骤条 ---- */
.sw-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3)}
.sw{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
border:1px solid var(--line);border-radius:8px;padding:var(--sp-3) var(--sp-4);background:var(--bg)}
.sw.on{border-color:#f0d5c3;background:#f8fbff}
.sw-right{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-3)}
.step{display:flex;gap:var(--sp-3);border:1px solid var(--line);border-radius:8px;padding:var(--sp-3) var(--sp-4);background:var(--bg)}
.step .n{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--primary-soft);
color:var(--primary);font-weight:600;font-size:var(--fs-sm);display:flex;align-items:center;justify-content:center}
/* ---- 折叠区（高级排障） ---- */
details.adv{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:var(--sp-4)}
details.adv>summary{padding:var(--sp-3) var(--sp-4);cursor:pointer;font-weight:600;font-size:var(--fs-body);list-style:none;
display:flex;align-items:center;gap:var(--sp-2)}
details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::before{content:"▸";color:var(--muted);font-size:var(--fs-sm)}
details.adv[open]>summary::before{content:"▾"}
details.adv[open]>summary{border-bottom:1px solid var(--line)}
.adv-body{padding:var(--sp-4) var(--sp-4)}
.adv-body h3{margin:var(--sp-4) 0 var(--sp-2);font-size:var(--fs-body);color:var(--muted);font-weight:600}
.adv-body h3:first-child{margin-top:0}
/* ---------- 组件 ---------- */
/* ---------- 组件（v2.0 重做） ----------
这一层改的不是"颜色好不好看"，是三个结构性问题：
① 卡片 = 白底 + 1px 边框 + 阴影，三层同时上 → 一页十张卡就是十圈框线。
现在边框保留（数据密集页需要边界），但阴影压到几乎看不见（.03 透明度的
2px 内阴影），让"白"本身承担分层，不再靠画框。
② 表格表头原来是灰底 + 600 字重 + 13px，和正文同一个视觉层级 →
表头在"抢"数据。现在去掉底色，改成 11px + 0.06em 字距的"标签感"表头，
眼睛先扫到数据、需要时才去找列名。
③ 按钮 hover 原来是"边框和文字同时变主色"—— 一页十几个按钮同时闪橙边，
比不 hover 还吵。现在 hover 只把底色压深一档，主按钮才用实色。
========================================================================== */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
padding:var(--sp-5);margin-bottom:var(--sp-4);
box-shadow:0 1px 2px rgba(62,44,32,.035)}
.card h2{margin:0 0 var(--sp-4);font-size:var(--fs-h2);font-weight:650;color:var(--text);
display:flex;align-items:center;gap:var(--sp-2);letter-spacing:-.1px}
.card h3{margin:var(--sp-4) 0 var(--sp-2);font-size:var(--fs-sm);color:var(--muted);font-weight:600}
.row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
/* 横排表单（`）：
原来每个字段宽度由内容撑开 —— 付款主体 158px、金额 85px、事由 220px，
一排下来右端参差不齐；`align-items:center` 又让按钮浮在中间，
底线和输入框差 4px，说不清哪儿别扭但就是歪。
现在：字段等宽（150~300 之间伸缩）、按钮单独贴底。
⚠ 只对有 label 的行生效（`:has`）—— `.row` 也用来放纯按钮组和说明文字，
给那些行改对齐反而会歪。浏览器不支持 `:has` 时整条规则被忽略，退化成原样。 */
.row:has(>div>label){align-items:flex-end}
.row>div:has(>label){flex:1 1 150px;min-width:132px;max-width:300px}
.row>div:has(>label)>input,
.row>div:has(>label)>select,
.row>div:has(>label)>textarea{width:100%!important;max-width:none}
/* ↑ 必须 !important：历史代码里给单个字段写了 style="width:120px"（全项目 26 处），
内联样式优先于任何选择器。等宽栅格一旦落定，格子宽度就该由栅格决定，
而不是由"这个字段当年觉得多宽合适"决定 —— 否则 6 个格子等宽、
里面控件一个 120 一个 220，看起来还是参差。 */
.row>button{align-self:flex-end;flex:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-3)}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;justify-content:center;
gap:var(--sp-1);min-height:74px;min-width:0}
.stat .n{font-size:var(--fs-xl);font-weight:650;letter-spacing:-.5px;line-height:1.25;
font-variant-numeric:tabular-nums}
.stat .l{font-size:var(--fs-sm);color:var(--muted);line-height:1.4}
/* 表头不加底色：底色会把"表头条"变成第二个视觉块，和上方卡片标题打架。
靠字距 + 小字号 + 一条稍深的底边线把它压到背景里。 */
table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
th,td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:middle}
th{background:transparent;color:var(--muted);font-weight:600;font-size:var(--fs-micro);
letter-spacing:.06em;white-space:nowrap;border-bottom:1px solid var(--line)}
tr:hover td{background:var(--bg)}
button{font:inherit;font-size:var(--fs-body);height:32px;padding:0 var(--sp-3);
border:1px solid var(--line-2);background:var(--panel);color:var(--text);
border-radius:var(--radius-sm);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
transition:background-color .16s var(--ease-out),border-color .16s var(--ease-out),
color .16s var(--ease-out),box-shadow .16s var(--ease-out)}
button:hover{background:var(--bg);border-color:var(--line-2);color:var(--text)}
button.primary{background:var(--primary);border-color:var(--primary);color:#fff;
box-shadow:0 1px 2px rgba(184,80,31,.22)}
button.primary:hover{background:var(--primary-d);border-color:var(--primary-d);color:#fff}
button.danger{color:var(--danger);border-color:#f2d2cc}
button.danger:hover{background:var(--danger-soft);color:var(--danger)}
button.sm{height:28px;padding:0 var(--sp-2);font-size:var(--fs-sm)}
button:disabled{opacity:.45;cursor:not-allowed}
/* 输入框统一 34px：原来按钮和输入框一个 32 一个 30，并排时底线差 2px ——
单据页那排"字段 + 按钮"就是歪的，说不清哪儿别扭但就是歪。 */
input,select,textarea{font:inherit;font-size:var(--fs-body);height:34px;padding:0 var(--sp-2);
border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--panel);
color:var(--text);outline:none;max-width:100%;
transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out)}
textarea{height:auto;min-height:72px;padding:var(--sp-2);line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--primary);
box-shadow:0 0 0 3px rgba(184,80,31,.12)}
label{font-size:var(--fs-sm);color:var(--muted);display:block;margin-bottom:var(--sp-1);font-weight:500}
/* 标签：药丸(20px 圆角)改成小方角 + 语义圆点。
一屏里"审批通过/已锁定/已通过"三个药丸并排时，药丸的形状本身就在抢镜；
改成"● 文字"之后，颜色只负责区分状态，形状不再参与。 */
.tag{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0 var(--sp-2);border-radius:6px;
font-size:var(--fs-micro);font-weight:550;line-height:1.7;white-space:nowrap;
background:var(--bg-2);color:var(--muted)}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;
opacity:.8;flex:none}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.err{background:var(--danger-soft);color:var(--danger)}
.tag.info{background:var(--primary-soft);color:var(--primary-d)}
.muted{color:var(--muted);font-size:var(--fs-sm)}
/* 空态：一行灰字 + 一大片白，读起来像"页面坏了"。
加一个中性的空盒图标做锚点，让空白变成"这里本来就空"。
图标用 data-uri 内联，不引外部请求（离线/内网也能显示）。 */
.empty{padding:var(--sp-12) var(--sp-6);text-align:center;color:var(--muted);font-size:var(--fs-body)}
.empty::before{
content:"";display:block;width:46px;height:46px;margin:0 auto var(--sp-3);
border-radius:14px;background:var(--bg-2) center/22px no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8968a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8l8-4 8 4v8l-8 4-8-4z'/%3E%3Cpath d='M4 8l8 4 8-4M12 12v8'/%3E%3C/svg%3E")
}
.error{background:var(--danger-soft);color:var(--danger);padding:var(--sp-2) var(--sp-3);
border-radius:var(--radius-sm);margin-bottom:var(--sp-3)}
.notice{background:var(--primary-soft);color:var(--primary-d);padding:var(--sp-2) var(--sp-3);
border-radius:var(--radius-sm);margin-bottom:var(--sp-3);font-size:var(--fs-body)}
/* 链路预览 */
.chain{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-3) var(--sp-3);background:var(--bg-2);
border:1px dashed var(--line);border-radius:6px;margin:var(--sp-3) 0}
.chain .n{background:#fff;border:1px solid var(--line);border-radius:6px;padding:var(--sp-1) var(--sp-3);font-size:var(--fs-sm)}
.chain .n.approve{border-color:#f0d5c3;background:var(--primary-soft);color:var(--primary-d)}
.chain .n.cc{border-color:#e9d5ff;background:#faf5ff;color:#7e22ce}
.chain .arw{color:var(--muted)}
/* 弹层 */
.mask{position:fixed;inset:0;background:rgba(62,44,32,.35);display:flex;align-items:center;
justify-content:center;padding:var(--sp-6);z-index:50}
.modal{background:#fff;border-radius:10px;width:760px;max-width:100%;max-height:86vh;overflow:auto;padding:var(--sp-6)}
.modal h2{margin:0 0 var(--sp-4);font-size:var(--fs-h2)}
.modal .foot{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.field{margin-bottom:var(--sp-3)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
/* ---------- 首页看板 ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4) var(--sp-4);
border-left:3px solid var(--primary)}
.kpi.warn{border-left-color:var(--warn)}
.kpi-l{font-size:var(--fs-sm);color:var(--muted)}
.kpi-n{font-size:var(--fs-display);font-weight:600;margin:var(--sp-1) 0 var(--sp-1);line-height:1.25}
.kpi-n small{font-size:var(--fs-sm);font-weight:400;color:var(--muted);margin-left:var(--sp-1)}
.kpi-h{font-size:var(--fs-sm);color:var(--muted);line-height:1.4}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media (max-width:1100px){.grid2{grid-template-columns:1fr}}
.card h2 .muted{margin-left:var(--sp-2);font-weight:400;font-size:var(--fs-sm)}
table .r,th.r,td.r{text-align:right}
/* 业务存量：9 个带边框的小方块 → 一条连续的指标条。
原因：auto-fill 网格在 1440 宽下每行放 7 个，9 个条目就是 7+2 ——
第二行右边永远空 5 格，这是首页最大一块"像没做完"的地方。
改成 flex + 竖线分隔，条目数不是列数的整数倍时也不会露洞。 */
.dash .grid{display:flex;flex-wrap:wrap;align-items:stretch}
.stock{display:block;flex:0 0 auto;min-width:122px;
background:none;border:0;border-left:1px solid var(--line);border-radius:0;
padding:var(--sp-1) var(--sp-5);color:inherit}
.stock:first-child{border-left:0;padding-left:0}
.stock:hover{background:var(--bg);border-radius:var(--radius-sm);color:inherit}
.stock .n{font-size:var(--fs-xl);font-weight:650;letter-spacing:-.4px;line-height:1.35;
font-variant-numeric:tabular-nums}
.stock .l{font-size:var(--fs-sm);color:var(--muted);line-height:1.4}
.neg{color:var(--danger)}
/* 回款情况三层表 */
tr.grp td{background:var(--bg-2)}
tr.sub td.pad{padding-left:var(--sp-6);color:var(--muted);font-size:var(--fs-sm)}
tr.leaf td.pad2{padding-left:var(--sp-12);font-size:var(--fs-sm)}
tr.leaf td{font-size:var(--fs-sm)}
/* 条形图 */
.bar-row{display:grid;grid-template-columns:110px 1fr 150px;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-2)}
.bar-lab{font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{background:var(--bg-2);border-radius:4px;height:14px;overflow:hidden}
.bar-fill{height:100%;background:var(--primary);border-radius:4px}
.bar-val{font-size:var(--fs-sm);text-align:right}
.bar-val .muted{margin-left:var(--sp-2)}
/* 额度进度条：已用/总额比数字直观；超额度转红，≥80% 转橙 */
.pg-row{margin-bottom:var(--sp-3)}
.pg-head{display:flex;align-items:baseline;gap:var(--sp-2);font-size:var(--fs-sm);margin-bottom:var(--sp-1)}
.pg-head .muted{margin-left:auto}
.pg-val{font-variant-numeric:tabular-nums;font-weight:600}
.pg-val.warn{color:#b45309}
.pg-val.over{color:var(--danger)}
.pg-track{background:var(--bg-2);border-radius:6px;height:12px;overflow:hidden}
.pg-fill{height:100%;background:var(--primary);border-radius:6px;transition:width .4s ease}
.pg-fill.warn{background:#f59e0b}
.pg-fill.over{background:var(--danger)}
.pg-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}
.trend{display:flex;align-items:flex-end;gap:var(--sp-3);height:170px;padding:var(--sp-2) 0}
.trend-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.trend-bars{flex:1;display:flex;align-items:flex-end;gap:var(--sp-1);width:100%;justify-content:center}
.trend-bar{width:16px;border-radius:3px 3px 0 0;min-height:2px}
.trend-bar.c-in{background:var(--primary)}
.trend-bar.c-cost{background:#f59e0b}
.trend-x{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}
.legend{display:flex;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:var(--sp-1)}
.legend i.c-in{background:var(--primary)}
.legend i.c-cost{background:#f59e0b}
/* ---------- 通用列表 ---------- */
.lbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3) var(--sp-3);margin-bottom:var(--sp-3);
flex-wrap:wrap}
.lbar-l,.lbar-r{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
/* 数据范围提示（v2.2.0）：只给「本部门 / 仅本人」的人显示，全量的人看不到这一枚。
用暖色底而不是灰色 —— 它是"解释"，不是"状态"，别做成告警的样子。
cursor:help 是唯一能让人知道"可以停一下看解释"的线索（title 没有原生指示器）。 */
.scope-chip{display:inline-flex;align-items:center;height:auto;flex:none;
padding:var(--sp-1) var(--sp-2);border-radius:999px;cursor:help;
font-size:var(--fs-micro);line-height:1.4;white-space:nowrap;
color:var(--primary-d);background:var(--primary-soft);
border:1px solid var(--primary)}
/* 列表内搜索（23 个列表共用同一枚）：圆角 + 放大镜 + 清空 + `/` 键位提示。
原来是一个浏览器原生方框 + 一个「搜索」按钮，和顶栏那颗放大镜完全是两套语言；
现在两处同一个视觉（圆角、暖色描边、同样的图标）。
⚠ .lq 必须把全站的 input 边框/焦点光晕全部压掉（!important）：
第 279/479/1349 行三处全局规则都会给它加描边和蓝色光晕，
叠在 .lsearch 自己的 focus-within 暖色外框上就是双框、还是蓝的。 */
.lsearch{position:relative;display:flex;align-items:center;height:34px;
border:1px solid var(--line);border-radius:20px;background:#fff;
padding:0 var(--sp-2) 0 var(--sp-3);min-width:0;
transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.lsearch:hover{border-color:var(--warm-2)}
.lsearch:focus-within{border-color:var(--warm-2);box-shadow:0 0 0 3px rgba(232,154,107,.18)}
.ls-ico{width:15px;height:15px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;
stroke-linecap:round;margin-right:var(--sp-2)}
.lsearch:focus-within .ls-ico{stroke:var(--warm-ink)}
.lq{width:220px;height:28px;min-height:0!important;border:0!important;outline:0!important;
background:none!important;box-shadow:none!important;padding:0!important;
font-size:var(--fs-body);color:var(--text);min-width:0}
.ls-x{display:none;width:22px;height:22px;flex:none;border:0;border-radius:50%;padding:0;
background:var(--warm-soft);color:var(--warm-ink);font-size:var(--fs-sm);line-height:1;
cursor:pointer;place-items:center}
.ls-x:hover{background:#fbe5d3}
.lsearch.has-q .ls-x{display:grid}
.ls-kbd{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
flex:none;border:1px solid var(--line);border-radius:5px;font-size:var(--fs-micro);
color:var(--muted);background:var(--bg);font-family:inherit;line-height:1}
.lsearch.has-q .ls-kbd{display:none}
/* 空结果（Lucian #092）：说清"卡在哪"，并给清筛选/清关键词的出口 */
.lempty{display:flex;flex-direction:column;align-items:center;text-align:center;
padding:var(--sp-8) var(--sp-6);gap:var(--sp-2)}
.lempty b{font-size:var(--fs-h2)}
.lempty p{margin:0;max-width:460px;line-height:1.8;font-size:var(--fs-body)}
.lem-act{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;margin-top:var(--sp-3)}
.lem-ico{width:44px;height:44px;color:var(--warm-2);opacity:.85}
.lem-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* 分段控件：原来选中项是**实心主色块**，和旁边的「新建」按钮抢同一档视觉权重 ——
一进列表页眼睛先落在"表格/看板"上，而不是该点的「新建」。
改成 iOS 式凹槽 + 白色浮片：选中靠"浮起来"表示，不靠颜色。 */
.seg{display:inline-flex;gap:var(--sp-1);padding:var(--sp-1);border:0;border-radius:9px;
background:var(--bg-2);overflow:visible}
.seg-i{display:flex;align-items:center;height:26px;padding:0 var(--sp-3);
font-size:var(--fs-sm);color:var(--muted);cursor:pointer;border-radius:6px}
.seg-i.on{background:var(--panel);color:var(--text);font-weight:600;
box-shadow:0 1px 2px rgba(62,44,32,.14)}
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip{padding:var(--sp-1) var(--sp-3);border:1px solid var(--line);border-radius:20px;font-size:var(--fs-sm);
color:var(--muted);cursor:pointer;white-space:nowrap}
.chip.on{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.lfpan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:var(--sp-4) var(--sp-4);margin-bottom:var(--sp-3)}
.lfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--sp-3)}
.lfgrid .field{margin-bottom:0}
table.ltable{margin:0}
/* 表内链接去色：原来 15 行里 15 个主色字，整片表格"满眼都是可点的东西"，
反而看不出哪儿该点。数据表里主键列本来就是深色字，hover 才提示可交互 ——
全站 `a{color:primary}` 是给正文里的引用链接用的，不该管到表格。 */
.ltable td a{color:var(--text);font-weight:500}
.ltable td a:hover{color:var(--primary);text-decoration:underline}
.ltable tbody tr:hover td a{color:var(--primary-d)}
/* 「展开剩余」按钮只在窄屏折卡片时才有意义，宽屏一律不显示 */
.ltable td.lmore-btn{display:none}
.ltable th,.ltable td{white-space:nowrap}
.ltable td{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.ltotals{margin-top:var(--sp-3);background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:var(--sp-3) var(--sp-4);overflow:auto}
.ltotals table{width:auto}
.ltotals th,.ltotals td{border:none;padding:var(--sp-1) var(--sp-4) var(--sp-1) 0;white-space:nowrap}
.lpager{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3);flex-wrap:wrap}
.lboard{display:flex;gap:var(--sp-3);overflow:auto;padding-bottom:var(--sp-2)}
.lane{flex:0 0 260px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
display:flex;flex-direction:column;max-height:520px}
.lane-h{padding:var(--sp-3) var(--sp-3);border-bottom:1px solid var(--line);display:flex;
justify-content:space-between;align-items:baseline;gap:var(--sp-2)}
.lane-h .muted{font-size:var(--fs-sm);white-space:nowrap}
.lane-c{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--bg-2)}
.lane-c:hover{background:var(--bg)}
.lane-t{font-size:var(--fs-body)}
.lane-a{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}
button.ghost-pill{border-color:var(--line);color:var(--muted);border-radius:20px;padding:var(--sp-1) var(--sp-4);font-size:var(--fs-body)}
button.ghost-pill:hover{border-color:var(--line);color:var(--muted);background:var(--bg)}
/* ==========================================================================
交互动效与细节打磨（纯 CSS，无依赖）
========================================================================== */
/* ---- 1. 按压反馈 + 涟漪 ---- */
button,.pill,.chip,.seg-i,.nav-item,.side-item,.stock,.kpi,.stat,.lane-c{
transition:background-color .16s ease,border-color .16s ease,color .16s ease,
box-shadow .18s ease,transform .12s var(--ease-out)}
button:active:not(:disabled){transform:translateY(1px) scale(.985)}
button.pill:active,.chip:active,.seg-i:active{transform:scale(.96)}
.nav-item:active,.side-item:active{transform:scale(.97)}
.rp{position:relative;overflow:hidden}
.rp>.ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
background:currentColor;opacity:.22;animation:rip .55s var(--ease-out) forwards}
@keyframes rip{to{transform:scale(2.6);opacity:0}}
/* ---- 2. 卡片 / 数据块悬浮 ----
⚠ 有**位移**的悬浮必须门禁在 (hover:hover) and (pointer:fine) 里：
触屏点一下会先触发 hover 态，卡片跳 2px 再弹回，看着像"点歪了"。
只加阴影的不门禁（没有位移，不会造成点歪的错觉）。 */
.card{transition:box-shadow .2s ease,border-color .2s ease}
.card:hover{box-shadow:0 4px 16px rgba(62,44,32,.06)}
.kpi,.stat{transition:box-shadow .2s ease,transform .16s var(--ease-out),border-color .2s ease}
.lane-c{cursor:default}
@media (hover:hover) and (pointer:fine){
.kpi:hover,.stat:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(62,44,32,.09)}
.stock:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(184,80,31,.12)}
.lane-c:hover{transform:translateX(2px)}
}
tr{transition:background-color .14s ease}
tr:hover td{background:var(--bg)}
.ltable tbody tr.rowlink{cursor:pointer}
.ltable tbody tr.rowlink:hover td{background:var(--primary-soft)}
/* ---- 3. 弹窗入场 ----
⚠ 这里原来有两套弹层动画并存：本节的 .mask{maskIn} / .modal{modalIn}
和后段「交互质感层」的 .mask{fadeIn} / .mask>.modal{popIn}。
后段选择器更具体（.mask>.modal = 0-2-0 打败 .modal = 0-1-0），
所以本节的 maskIn 从来没生效过、modalIn 只剩 .login-card 一个用户。
删掉死规则，弹层只留一套：遮罩淡入 + 内容上浮（后段 popIn）。
modalIn 这个 keyframe 要留着给登录卡用 —— 它不在 .mask 里。 */
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
/* ---- 4. 视图切换 / 骨架屏 ----
路由切换是几十次/天的动作，原来 .2s + 上移 4px 属于"每次翻页都晃一下"。
位移去掉，只留 .15s 透明度 —— 保住"不是硬切"，去掉"在动"。 */
#vbody{animation:viewIn .15s var(--ease-out) backwards}
@keyframes viewIn{from{opacity:0}to{opacity:1}}
/* ---- 5. 骨架屏 ---- */
.skel{padding:var(--sp-1) 0}
.skel-row{height:14px;border-radius:6px;margin-bottom:var(--sp-3);
background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-2) 37%,var(--bg-2) 63%);
background-size:400% 100%;animation:shimmer 1.3s ease-in-out infinite}
.skel-row.w60{width:60%} .skel-row.w40{width:40%} .skel-row.w80{width:80%}
.skel-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.skel-card{height:76px;border-radius:var(--radius);
background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-2) 37%,var(--bg-2) 63%);
background-size:400% 100%;animation:shimmer 1.3s ease-in-out infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
/* ---- 6. 表格：表头吸顶 + 数字等宽 ---- */
.ltable thead th{position:sticky;top:0;z-index:2;background:var(--panel)}
.ltable td.r,.ltable th.r{font-variant-numeric:tabular-nums}
.ltotals td,.ltotals th{font-variant-numeric:tabular-nums}
.kpi-n,.stat .n,.stock .n{font-variant-numeric:tabular-nums;letter-spacing:-.2px}
/* ---- 7. 输入框聚焦柔和过渡 ---- */
input,select,textarea{transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(184,80,31,.12)}
/* ---- 8. 键盘可达性（只对键盘生效，鼠标点击不显示） ---- */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
a.nav-item:focus-visible,.side-item:focus-visible{outline-offset:-2px}
/* ---- 9. 滚动条（长表格更清爽） ---- */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d8cabd;border-radius:8px;border:3px solid transparent;
background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#b9c2cf;background-clip:content-box}
/* ---- 10. 顶栏当前项的指示条 ---- */
.nav-main>.nav-item.active,.nav-main>.dd>.dd-toggle.active{position:relative}
.nav-main>.dd>.dd-toggle .caret{transition:transform .18s ease}
.nav-main>.dd.open>.dd-toggle .caret{transform:rotate(180deg)}
.dd:hover>.dd-toggle .caret,.dd.open>.dd-toggle .caret{transform:rotate(180deg)}
/* ---- 11. 徽标轻微脉冲（有待办时看得出"活的"） ---- */
/* 筛选计数小圆标：从 scale(.6) 起相当于"无中生有"，现实里没有东西是这么出现的。
.9 起 + 弹一下的弹簧，"多了一个"这件事被说清楚就够了。 */
.badge{animation:pop .22s var(--ease-spring) backwards}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
/* ---- 12. 尊重系统"减少动态效果"设置 ---- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* ---- 13. 页头与登录页细修 ---- */
.page-head{align-items:center;padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);margin-bottom:var(--sp-4)}
.page-head b{font-size:var(--fs-h1);letter-spacing:.2px}
.login-card{animation:modalIn .3s var(--ease-out) both}
.login-logo .logo-mark{box-shadow:0 4px 12px rgba(184,80,31,.28)}
.seg-i{transition:background-color .16s ease,color .16s ease}
.seg-i:hover:not(.on){background:var(--bg-2);color:var(--text)}
.chip:hover:not(.on){border-color:var(--line-2);color:var(--text)}
button:hover:not(:disabled){box-shadow:0 1px 4px rgba(62,44,32,.06)}
button.primary:hover:not(:disabled){box-shadow:0 3px 12px rgba(184,80,31,.3)}
.stock:active,.kpi:active,.stat:active{transform:translateY(0) scale(.995)}
/* ==========================================================================
15. 详情抽屉：一张单据 + 它挂着的所有关联对象
PC 从右侧滑出占半屏 —— 左边列表还在，看完一单能接着翻下一单，不用跳页；
手机从底部上滑占满（见窄屏块）。关联对象做成一排 tab，点关联行是"下钻"不是跳转，
面包屑能逐级退回。统一用 .2,.8,.3,1 这条缓动，进退都不生硬。
========================================================================== */
.mask-drawer{justify-content:flex-end;align-items:stretch;padding:0;
background:rgba(62,44,32,.3);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.mask-drawer .drawer{width:min(780px,76vw);height:100%;background:#fff;display:flex;
flex-direction:column;min-width:0;box-shadow:-18px 0 50px rgba(62,44,32,.2);
animation:dwIn .26s var(--ease-out) both}
@keyframes dwIn{from{opacity:.35;transform:translateX(30px)}to{opacity:1;transform:none}}
/* 切 tab / 下钻时只是"换内容"，不重放进场动画，否则每点一下整块滑一次，晃得难受 */
.mask-swap{animation:none!important}
.mask-swap .drawer{animation:none!important}
.dw-head{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4) var(--sp-4) var(--sp-3);
border-bottom:1px solid var(--line);flex-shrink:0}
.dw-ic{width:30px;height:30px;flex-shrink:0;padding:0;border-radius:8px;border:1px solid var(--line);
background:#fff;color:var(--muted);font-size:var(--fs-body);line-height:1;display:flex;
align-items:center;justify-content:center;cursor:pointer}
.dw-ic:hover{border-color:var(--primary);color:var(--primary)}
.dw-htitle{flex:1;min-width:0}
.dw-t1{font-size:var(--fs-h2);font-weight:600;display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.dw-t2{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}
.dw-crumb{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}
.dw-tabs{flex-shrink:0;border-bottom:1px solid var(--line);position:relative}
.dw-tabs-in{display:flex;gap:var(--sp-1);overflow-x:auto;padding:0 var(--sp-3);scrollbar-width:none}
.dw-tabs-in::-webkit-scrollbar{display:none}
.dw-tab{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-body);
color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;
transition:color .16s ease,border-color .16s ease,background-color .16s ease}
.dw-tab:hover{color:var(--text);background:var(--bg)}
.dw-tab.on{color:var(--primary);font-weight:600;border-bottom-color:var(--primary)}
.dw-tab .n{font-size:var(--fs-sm);background:#eef2f7;color:var(--muted);border-radius:20px;
padding:var(--sp-1) var(--sp-2);min-width:18px;text-align:center;
transition:background-color .16s ease,color .16s ease}
.dw-tab.on .n{background:var(--primary-soft);color:var(--primary)}
.dw-tab .n.zero{opacity:.45}
.dw-body{flex:1;overflow:auto;padding:var(--sp-3) var(--sp-4) var(--sp-4);-webkit-overflow-scrolling:touch}
.dw-body .empty{padding:var(--sp-8) 0;text-align:center;color:var(--muted);font-size:var(--fs-body)}
/* 概况：右对齐标签的两列字段表 */
.dw-fields{width:100%;font-size:var(--fs-body)}
.dw-fields th{width:118px;background:transparent;color:var(--muted);font-weight:500;
padding:var(--sp-2) var(--sp-3) var(--sp-2) 0;border-bottom:1px solid var(--bg-2);vertical-align:top;text-align:left}
.dw-fields td{padding:var(--sp-2) 0;border-bottom:1px solid var(--bg-2);word-break:break-word}
/* 详情里就地编辑的多选：整格都是可点的，右侧留一点余量免得贴着边 */
.dw-multi{padding-right:var(--sp-1)}
/* 关联对象小表格：整行可点 = 下钻到那条单据 */
.dw-tblwrap{overflow:auto;border:1px solid var(--line);border-radius:10px}
.dw-tbl{width:100%;font-size:var(--fs-body)}
.dw-tbl th{background:var(--bg-2);padding:var(--sp-2) var(--sp-3);font-weight:600;white-space:nowrap}
.dw-tbl td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--bg-2);white-space:nowrap;
font-variant-numeric:tabular-nums}
.dw-tbl tbody tr{cursor:pointer;transition:background-color .14s ease}
.dw-tbl tbody tr:hover{background:var(--primary-soft)}
.dw-tbl tbody tr:hover .dw-first{color:var(--primary)}
.dw-tbl tbody tr:last-child td{border-bottom:none}
.dw-first{font-weight:600}
.dw-tot{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted);padding:var(--sp-2) var(--sp-1) 0}
.dw-tot b{color:var(--text);font-variant-numeric:tabular-nums}
.dw-more{font-size:var(--fs-sm);padding-top:var(--sp-2)}
.dw-skel{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-2) 0}
.dw-skel i{height:14px;border-radius:6px;
background:linear-gradient(90deg,var(--bg-2),#e9edf3,var(--bg-2));
background-size:400% 100%;animation:shimmer 1.3s ease-in-out infinite}
.dw-skel i:nth-child(2){width:78%}
.dw-skel i:nth-child(3){width:88%}
.dw-skel i:nth-child(4){width:58%}
.dw-foot{flex-shrink:0;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);
border-top:1px solid var(--line);background:var(--bg);
padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.dw-sp{flex:1}
/* ---- 16. 列表：翻页/筛选后的内容轻淡入 ----
⚠ v1.9.5 删掉了这里原本的「行悬浮左侧指示条」：整条规则挂的是 `.rowlink`，
而这个 class **在 ui.js / app.js 里从来没被加上过** —— 从写下来那天就是死的，
谁也没见过那根 3px 的蓝条。而且它是用名为 `barIn` 的关键帧写的，
和后段提示条的 `@keyframes barIn` **同名不同义**（后者覆盖前者）。
处理：直接删，不补 class —— 行本来就不能点（只有行内链接能点），
给一行加"选中感"的蓝条会让用户以为点哪儿都能进详情。
⚠⚠ 关于 `#lmain{animation:softIn}`：**写了很久，但只在整页 render 时播过一次。**
CSS 动画挂在元素自己身上，**换它的 innerHTML 不会让动画重播** ——
lrefresh() 和 lquick() 都只是 `#lmain.innerHTML = …`，
所以"翻页/筛选后内容轻淡入"这句注释描述的效果，之前**一次都没出现过**。
它唯一真正生效的场合是首屏：而那时 `#vbody` 也在淡入（viewIn），
两层嵌套 opacity 相乘 → 0.55 × 0.55 ≈ 0.30，首屏反而发灰。
现在分叉成三件事：
· lrefresh()（翻页 / 筛选 / 清空关键词 / 保存后）→ 新建一层 .lmain-soft，
新节点必然播动画，"刷新后轻淡入"这才第一次真的出现；
· 首屏 → 不挂（只让 #vbody 淡一层，不再两层相乘）；
· lquick()（边打字边搜）→ 不挂（搜索是 100+/天的动作，列表不该跟着透明度动）。
⚠ 别改回把 animation 挂 #lmain —— 那样刷新时又什么都不播了。 */
.lmain-soft{animation:softIn .18s var(--ease-out) backwards}
@keyframes softIn{from{opacity:.55}to{opacity:1}}
/* ==========================================================================
15. 细节统一：控件同高 · 下拉多选 · 用户表 · 审批节点表 · 批量换人
"错位"几乎都不是玄学，就三件事：控件高度不一、列宽被内容随便撑、
行内元素按基线对齐。这一节把它们逐条钉死。
========================================================================== */
/* ---- 控件基准：所有输入类控件同高，横着排的时候底边自然齐 ---- */
input:not([type=checkbox]):not([type=radio]),select{min-height:34px;line-height:1.35}
input::placeholder{color:var(--muted)}
select{cursor:pointer}
/* ---- 表格通用：表头更轻，操作列不挤成团 ---- */
th{font-size:var(--fs-sm);letter-spacing:.2px}
.r,th.r,td.r{text-align:right}
.td-acts{display:inline-flex;gap:var(--sp-2);align-items:center;justify-content:flex-end;white-space:nowrap}
/* ---- 用户与角色：一键保存条 + 待保存标记 ----
用户诉求：一次性改几个账号，按一次保存，不要一行行点。
改动过的行左侧描边 + 姓名旁一个圆点，改了什么一眼能看到。 */
.u-savebar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
padding:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0;
background:var(--primary-soft);border:1px solid #f2dbc9;border-radius:10px;
color:var(--text)}
.u-savebar b{color:var(--primary)}
.u-savebar button{margin-left:auto}
.u-savebar button+button{margin-left:0}
table.utable tr.u-dirty{background:var(--warn-soft);box-shadow:inset 3px 0 0 var(--warn)}
.u-dot{color:var(--warn);margin-left:var(--sp-2);font-size:var(--fs-sm)}
/* 窄屏：保存条按钮占满一行，别挤成一小条 */
@media(max-width:768px){
.u-savebar button{margin-left:0;flex:1 1 auto;min-height:44px}
table.utable tr.u-dirty{box-shadow:inset 3px 0 0 var(--warn)}
}
.tbl-wrap{overflow-x:auto}
table.mini{font-size:var(--fs-body);border:1px solid var(--line);border-radius:8px;overflow:hidden}
table.mini th{background:var(--bg-2)}
table.mini td,table.mini th{padding:var(--sp-2) var(--sp-3)}
table.mini tr:last-child td{border-bottom:none}
/* ---- 卡片标题：加一条细线，一屏多卡时能一眼分块 ---- */
.card>h2{padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
/* ---- 下拉多选：用户角色、流程「指定成员」共用 ----
原生