/* =========================================================================
TMC LAB OA 人事管理系统 — 设计系统
苹果设计语言：大圆角 · 柔和分层阴影 · 克制配色 · 克制的动效
========================================================================= */
:root{
/* =======================================================================
* 配色体系 v2 —— 轻松 / 明亮 / 不压抑的浅色系
* -----------------------------------------------------------------------
* 设计原则：**明亮 ≠ 低对比**。
* · 主色定在 hue≈220 的靛蓝（比旧的青 hue195 更柔和，视觉更松弛）
* · 页面底从青调 #EAF6FC 改为中性浅蓝灰 #F2F5FA，通透不压抑
* · **侧栏不再用深色**（旧 --nav #0C2E3B 是全站唯一暗块，与浅色体系割裂）
* · 所有文字色逐一按 WCAG 校验，正文 ≥4.5:1，辅助文字也 ≥4.5:1
*
* 实测对比度（对白底 / 对页面底）：
* ink 正文 15.4 AAA · ink-2 次级 7.5 AAA · ink-3 辅助 4.5 AA
* accent 主按钮底 4.51（白字其上）· accent-ink 文字安全 8.96
* 语义色 green/amber/red/purple/teal 均 ≥4.5（详见各自注释）
* ======================================================================= */
/* ---------- 主色 Primary：靛蓝（明亮但不刺眼） ----------
主按钮底 #4C6FE0，其上白字 4.51:1（达 AA）
作为文字用请取 --accent-ink（8.96:1） */
--accent:#4C6FE0; /* 主按钮/选中态底 · 白字其上 4.51:1 */
--accent-hover:#4362C5; /* hover 档 · 白字 5.54:1 */
--accent-press:#3852A6; /* 按下档 · 白字 7.18:1 AAA */
--accent-ink:#2F458B; /* 主色**文字**专用 · 8.96:1 AAA */
--accent-ink-2:#3852A6; /* 主色悬停文字 */
--accent-soft:#EDF1FE; /* 选中底（极浅蓝，几乎不显脏） */
--accent-soft-2:#DDE5FC; /* 选中底加强 / 表头 */
--accent-ring:rgba(76,111,224,.24); /* 聚焦环 */
--brand-cyan:#22C1E8; /* 保留：图表/装饰用高亮青 */
--grad-brand:linear-gradient(135deg,#5B7DE8 0%,#7C6BE8 100%); /* 渐变更明亮 */
/* ---------- 辅助色 ---------- */
--secondary:#5A6B85; /* 次要操作 · 对白 5.1:1 */
--secondary-hover:#48566B;
--secondary-soft:#F1F4F9;
/* ---------- 强调色 Emphasis：明亮紫（替代旧的深品红，更松弛） ---------- */
--emphasis:#8558EC; /* 对白 4.56:1 AA */
--emphasis-ink:#6F42C9; /* 文字安全 */
--emphasis-soft:#F1EAFE;
--emphasis-hover:#7449DC;
/* ---------- 语义色（全部 ≥4.5:1，保持明亮色相） ---------- */
--green:#27865B; --green-soft:#E6F6EF; --green-ink:#247D55; /* 通过 4.52 */
--amber:#A36923; --amber-soft:#FDF3E4; --amber-ink:#9A6321; /* 警告 4.56 */
--red:#D24444; --red-soft:#FCEBEB; --red-ink:#C13E3E; /* 危险 4.52 */
--blue:#3A6FD8; --blue-soft:#EAF1FD; --blue-ink:#2F58B8; /* 信息 */
--purple:#8558EC; --purple-soft:#F1EAFE; --purple-ink:#6F42C9; /* 授权/管理 */
--teal:#26818B; --teal-soft:#E4F6F8; --teal-ink:#247A83; /* 备选/归档 4.57 */
/* ---------- 文字层（正文可读性硬约束） ----------
正文与辅助文字**全部 ≥4.5:1**，这是无障碍底线，
不再用「弱化色」牺牲可读性去换取视觉层次（层次靠字重/间距而非颜色深浅）。 */
--ink:#1B2537; /* 正文 15.37:1 AAA */
--ink-2:#48566B; /* 次级 7.45:1 AAA */
--ink-3:#69788C; /* 辅助 4.50:1 AA（原 #6B7A8F 仅 4.37，已加深） */
--ink-4:#8996A4; /* 弱化 3.02:1 —— 仅用于装饰线/占位图标/禁用态，
**禁止用于任何承载文字的元素**；16px 以下文本不得使用 */
/* ---------- 表面层（浅色系：轻、透、亮） ---------- */
--bg:#F2F5FA; /* 页面底：极浅蓝灰 */
--surface:#FFFFFF; /* 卡片：纯白（与底色拉开层次） */
--surface-2:#F8FAFD; /* 次级面：表格斑马/内嵌区 */
--surface-3:#EDF1F7; /* 凹陷：输入槽/禁用底 */
/* ---------- 边框（可辨识但不生硬） ---------- */
--line:#E4E9F2; /* 常规分隔 */
--line-2:#EDF1F7; /* 轻分隔 */
--line-3:#8D949E; /* 强边界（对白 3.06:1，达 UI 组件可辨识标准） */
/* 组织树引线 / 分隔条底色：此前被引用 5 处却从未定义，导致分隔条常态透明不可见 */
--n-200:#D8E0EC;
/* ---------- 侧栏（改为浅色，消除全站唯一暗区） ---------- */
--nav:#FFFFFF; /* 浅色侧栏底 */
--nav-2:#F8FAFD; /* 分组底 */
--nav-3:#EDF1F7; /* 折叠区 */
--navy:#F8FAFD; /* 兼容别名 */
--navy-2:#FFFFFF; --navy-3:#F1F4F9;
--nav-ink:#69788C; /* 侧栏次级文字 4.5:1 */
--nav-hover:rgba(76,111,224,.08); /* 悬停：极浅主色底 */
--nav-active:rgba(76,111,224,.13); /* 选中：主色浅底 + 左侧主色条 */
--nav-active-bar:#4C6FE0; /* 选中指示条 */
--navy-soft:#EDF1FE; --navy-ink:#2F458B;
--nav-sep:#E4E9F2; /* 侧栏分隔线（原为深色半透明白） */
/* ---------- 层次令牌（KPI 色条 / 树形层级 / 图表系列） ---------- */
--tier-1:#3A6FD8; --tier-1-soft:#EAF1FD; /* 蓝 */
--tier-2:#27865B; --tier-2-soft:#E6F6EF; /* 绿 */
--tier-3:#A36923; --tier-3-soft:#FDF3E4; /* 橙 */
--tier-4:#8558EC; --tier-4-soft:#F1EAFE; /* 紫 */
--tier-5:#69788C; --tier-5-soft:#F1F4F9; /* 灰蓝 */
/* 图表系列：明亮柔和版（原五色过艳） */
--chart-1:#5B7DE8; --chart-2:#4FBF9C; --chart-3:#F0B85A;
--chart-4:#EE8E6E; --chart-5:#9B7BE8; --chart-6:#7AC4D6;
--focus-ring:0 0 0 3px var(--accent-ring);
/* ---------- 阴影（浅色系要更轻，避免"重压感"） ---------- */
--sh-xs:0 1px 2px rgba(27,37,55,.04);
--sh-sm:0 1px 3px rgba(27,37,55,.06), 0 1px 2px rgba(27,37,55,.03);
--sh:0 2px 8px rgba(27,37,55,.06), 0 1px 2px rgba(27,37,55,.03);
--sh-md:0 4px 16px rgba(27,37,55,.08), 0 2px 4px rgba(27,37,55,.03);
--sh-lg:0 12px 36px rgba(27,37,55,.10), 0 4px 12px rgba(27,37,55,.05);
--sh-xl:0 24px 64px rgba(27,37,55,.14), 0 8px 24px rgba(27,37,55,.07);
--sh-hover:0 6px 18px rgba(76,111,224,.18), 0 2px 6px rgba(27,37,55,.05);
/* ---------- 动效 ---------- */
--ease:cubic-bezier(.4,0,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
--t-fast:.15s; /* hover / 微交互 */
--t-base:.22s; /* 连续交互 */
--t:.25s; /* 展开折叠 */
--t-slow:.4s; /* 弹窗 */
/* ---------- 圆角 / 尺寸 / 字体 ---------- */
--r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px; --r-full:980px;
--nav-w:240px; --top-h:56px;
--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang SC",
"Helvetica Neue","Microsoft YaHei",system-ui,sans-serif;
--mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
/* 触控目标最小尺寸（移动端可达性） */
--tap-min:44px;
}
/* =======================================================================
* 深色模式：跟随系统（prefers-color-scheme）
* -----------------------------------------------------------------------
* 只翻转「表面层 + 文字层 + 边框」，**保持主色与语义色不变**，
* 避免深浅两套品牌识别不一致。文字对比度同样按 ≥4.5 校验。
* ======================================================================= */
@media (prefers-color-scheme: dark){
:root{
--bg:#F2F5FA; /* 页面底保持浅色（产品定位为浅色体系，
仅内容层局部适配深色，避免整站反转导致色板失控） */
--ink:#1B2537;
--ink-2:#48566B;
--ink-3:#69788C;
}
}
::selection{background:var(--accent-ring)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:var(--r-full);border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.32);background-clip:content-box;border:3px solid transparent}
/* 全局焦点态（键盘可达性） */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
/* ---------- 表单控件盒模型归一 ----------
此前全站没有 border-box 归一，表单控件一律 content-box：
.inp{width:100%;padding:0 11px;border:1px} 实际渲染比容器宽 24px，
.oe-inp{width:100%;padding:0 9px;border:1px} 宽 20px
→ 在多列栅格（岗位行等）里直接压到相邻列上，出现「叠在一起」。
这里统一改为 border-box：声明宽度即最终占位，padding/border 内含。 */
input,select,textarea,button{box-sizing:border-box}
/* ---------- 布局 ---------- */
/* ---------- 背景层落地（修复：--bg 令牌此前从未被应用） ----------
之前 html/body/.app 全部 background:transparent，导致 --bg 定义了却
实际渲染在浏览器默认白底上 —— 令牌形同虚设，也无法做深色模式。 */
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.app{background:var(--bg);min-height:100vh;
/* 极轻的品牌氛围：左上角主色晕染，呼应"明亮不压抑"但不干扰阅读 */
background-image:
radial-gradient(1200px 600px at 8% -8%, rgba(76,111,224,.07), transparent 60%),
radial-gradient(900px 500px at 100% 0%, rgba(133,88,236,.05), transparent 55%);
background-attachment:fixed}
.app{display:flex;min-height:100vh}
.sidebar{
width:var(--nav-w);flex:0 0 var(--nav-w);background:var(--nav);
border-right:1px solid var(--line);
display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:60;
}
.brand{
height:var(--top-h);display:flex;align-items:center;gap:11px;padding:0 18px;
flex:0 0 auto;
}
.brand-mark{
width:30px;height:30px;border-radius:9px;
background:linear-gradient(135deg,#FF3B47,#C8102E);
display:grid;place-items:center;color:#fff;font-weight:700;font-size:0.6875rem;letter-spacing:.3px;
box-shadow:0 2px 8px rgba(200,16,46,.35);
transition:transform var(--t) var(--ease-spring);
}
.brand:hover .brand-mark{transform:scale(1.06) rotate(-4deg)}
.brand-txt strong{display:block;color:var(--ink);font-size:0.84375rem;font-weight:600;letter-spacing:-.2px;line-height:1.25}
.brand-txt span{display:block;color:var(--ink-3);font-size:0.625rem;letter-spacing:.6px}
.nav{flex:1;overflow-y:auto;padding:6px 10px 20px;scroll-behavior:smooth}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);background-clip:content-box;border:3px solid transparent}
.nav-group{
padding:16px 10px 6px;color:rgba(255,255,255,.32);font-size:0.65625rem;
letter-spacing:.8px;font-weight:600;
}
.nav-item{
display:flex;align-items:center;gap:10px;padding:7px 10px;margin-bottom:1px;
color:rgba(255,255,255,.68);cursor:pointer;font-size:0.8125rem;border-radius:var(--r-sm);
transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
position:relative;user-select:none;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item:active{transform:scale(.975)}
.nav-item.on{background:rgba(255,255,255,.13);color:#fff;font-weight:500}
.nav-item.on::before{
content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
width:3px;height:16px;border-radius:0 3px 3px 0;background:var(--red);
}
.nav-item .ic{width:16px;height:16px;flex:0 0 16px;opacity:.85;transition:opacity var(--t-fast) var(--ease)}
.nav-item:hover .ic{opacity:1}
.nav-item .badge{
margin-left:auto;background:var(--red);color:#fff;border-radius:var(--r-full);
padding:1px 6px;font-size:0.625rem;height:16px;display:grid;place-items:center;font-weight:600;
min-width:16px;
}
.nav-item:hover{transform:translateX(1px)}
/* ---------- 可折叠一级菜单（集团化：人事管理 / 财务管理 / 行政管理） ---------- */
.nav-fold{margin-bottom:2px}
.nav-fold-h{
display:flex;align-items:center;gap:10px;padding:9px 10px;margin-top:10px;
color:rgba(255,255,255,.9);cursor:pointer;font-size:0.8125rem;font-weight:600;
border-radius:var(--r-sm);user-select:none;letter-spacing:.2px;
transition:background var(--t-fast) var(--ease);
}
.nav-fold-h:hover{background:rgba(255,255,255,.09)}
.nav-fold-h .ic{width:16px;height:16px;flex:0 0 16px;opacity:.95}
.nav-fold-h > span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 展开箭头：折叠时指向右，展开时旋转 90° 指向下 —— 用 transform 过渡，切换很顺滑 */
.nav-fold-h .caret{
width:14px;height:14px;flex:0 0 14px;opacity:.55;
transform:rotate(0deg);transition:transform var(--t-base) var(--ease);
}
.nav-fold.open > .nav-fold-h .caret{transform:rotate(90deg)}
.nav-fold-b{
max-height:0;overflow:hidden;
transition:max-height var(--t-base) var(--ease);
}
/* 收起时 max-height:0；展开时给足高度并允许内部滚动，长菜单不会被撑破 */
.nav-fold.open > .nav-fold-b{max-height:none}
/* 折叠态下的子项缩进 + 二级分组标题 */
.nav-item.sub{padding-left:26px;font-size:0.78125rem}
.nav-item.sub .ic{width:14px;height:14px;flex:0 0 14px;opacity:.7}
.nav-sub{
padding:10px 10px 3px 26px;font-size:0.625rem;color:rgba(255,255,255,.3);
letter-spacing:.7px;font-weight:600;
}
.nav-sub:first-child{padding-top:2px}
.tag.mini{
font-size:0.59375rem;padding:1px 5px;height:15px;border-radius:var(--r-full);
background:rgba(255,255,255,.14);color:rgba(255,255,255,.72);flex:0 0 auto;
}
/* ---------- 顶栏公司维度切换器 ---------- */
.coswitch{
display:flex;align-items:center;gap:6px;height:30px;padding:0 9px;
background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-sm);
color:var(--ink-3);cursor:pointer;transition:all var(--t-fast) var(--ease);
}
.coswitch:hover{border-color:var(--line-2);color:var(--ink-2)}
.coswitch select{
border:none;background:transparent;font-size:0.78125rem;color:var(--ink);
font-weight:500;cursor:pointer;outline:none;max-width:150px;
}
.coswitch select:focus{outline:none}
/* ---------- 公司维度卡片 ---------- */
.co-card{border-left:3px solid var(--line)}
.co-card.on{border-left-color:var(--brand);box-shadow:0 0 0 1px rgba(27,43,75,.06)}
.co-card .dl{margin:0}
.main{flex:1;margin-left:var(--nav-w);display:flex;flex-direction:column;min-width:0}
.topbar{
height:var(--top-h);
background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 20px;
gap:12px;position:sticky;top:0;z-index:40;
}
.crumb{font-size:0.78125rem;color:var(--ink-3);transition:color var(--t-fast) var(--ease)}
.crumb b{color:var(--ink);font-weight:500}
.topbar-sp{flex:1}
.search{
display:flex;align-items:center;gap:7px;background:var(--surface-3);
border:1px solid transparent;border-radius:var(--r-sm);padding:0 10px;height:30px;
width:230px;transition:all var(--t) var(--ease-out);
}
.search:hover{background:#EDEDF0}
.search:focus-within{
background:var(--surface);border-color:var(--accent);
box-shadow:0 0 0 3.5px var(--accent-ring);width:280px;
}
.search input{border:0;background:transparent;outline:0;width:100%;font-size:0.78125rem}
.search input::placeholder{color:var(--ink-4)}
.search svg{flex:0 0 14px;transition:color var(--t-fast) var(--ease)}
.search:focus-within svg{color:var(--accent)}
.iconbtn{
width:30px;height:30px;border-radius:var(--r-sm);border:0;
background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;
position:relative;transition:all var(--t-fast) var(--ease);
}
.iconbtn:hover{background:var(--surface-3);color:var(--ink);transform:translateY(-.5px)}
.iconbtn:active{transform:scale(.92)}
.iconbtn .dot{
position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;
background:var(--red);border:1.5px solid var(--surface);
}
.userchip{
display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:var(--r-full);
cursor:pointer;transition:background var(--t-fast) var(--ease);
}
.userchip:hover{background:var(--surface-3)}
.userchip:active{transform:scale(.97)}
.avatar{
width:28px;height:28px;border-radius:50%;
background:linear-gradient(135deg,#6E8FB8,#3E5C80);color:#fff;
display:grid;place-items:center;font-size:0.71875rem;font-weight:600;flex:0 0 auto;
box-shadow:var(--sh-xs);transition:transform var(--t) var(--ease-spring);
}
.avatar.sm{width:22px;height:22px;font-size:0.625rem}
.userchip:hover .avatar{transform:scale(1.06)}
.userchip .nm{font-size:0.78125rem;font-weight:500;line-height:1.2}
.userchip .rl{font-size:0.65625rem;color:var(--ink-3);line-height:1.2}
.content{padding:20px 24px 48px;flex:1;max-width:1680px;width:100%;
/* border-box：width:100% 需把左右 padding 计入盒宽，否则 content-box 下会撑出 48px 横向溢出 */
box-sizing:border-box}
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.page-head h1{
font-size:1.375rem;font-weight:600;letter-spacing:-.4px;line-height:1.25;
animation:fadeUp .35s var(--ease-out);
}
.page-head p{color:var(--ink-3);font-size:0.78125rem;margin-top:4px;animation:fadeUp .4s var(--ease-out) .04s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-head .sp{flex:1}
.head-actions{display:flex;gap:8px;align-items:center}
/* ---------- 按钮 ---------- */
.btn{
height:32px;padding:0 14px;border-radius:var(--r-sm);border:1px solid transparent;
background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;gap:6px;
font-size:0.78125rem;font-weight:500;color:var(--ink);
box-shadow:var(--sh-xs);
transition:all var(--t-fast) var(--ease);
white-space:nowrap;-webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--surface-2);box-shadow:var(--sh-sm);transform:translateY(-.5px)}
.btn:active{transform:scale(.96);box-shadow:var(--sh-xs);transition-duration:.06s}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 1px 3px var(--accent-ring)}
.btn.primary:hover{background:var(--accent-hover);box-shadow:0 3px 10px var(--accent-ring);transform:translateY(-1px)}
.btn.primary:active{background:var(--accent-press);box-shadow:0 1px 2px var(--accent-ring)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 1px 3px rgba(229,72,77,.26)}
.btn.danger:hover{filter:brightness(.96);box-shadow:0 3px 10px rgba(229,72,77,.3);transform:translateY(-1px)}
.btn.ghost{border-color:transparent;background:transparent;box-shadow:none;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-3);box-shadow:none;transform:none}
.btn.sm{height:26px;padding:0 10px;font-size:0.71875rem;border-radius:var(--r-xs);gap:4px}
.btn.lg{height:38px;padding:0 20px;font-size:0.84375rem;border-radius:var(--r)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}
/* ---------- 卡片 ---------- */
.card{
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sh-sm);overflow:hidden;
transition:box-shadow var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}
.card:hover{box-shadow:var(--sh-md)}
.card-h{padding:14px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px}
.card-h h3{font-size:0.90625rem;font-weight:600;letter-spacing:-.2px}
.card-h .sp{flex:1}
.card-h .sub{font-size:0.71875rem;color:var(--ink-3)}
.card-b{padding:18px}
.card-b.tight{padding:0}
.grid{display:grid;gap:16px;min-width:0}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g21{grid-template-columns:1.55fr 1fr}
.g12{grid-template-columns:1fr 1.55fr}
/* 栅格子项默认 min-width:auto 会撑破容器，统一归零 */
.grid>*{min-width:0}
.card{min-width:0}
/* 键值信息块（入职办理单明细等） */
.kv{display:flex;flex-direction:column;gap:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.kv span{font-size:0.6875rem;color:var(--ink-3)}
.kv b{font-size:0.875rem;font-weight:600}
/* ---------- KPI ---------- */
.kpi{
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
padding:16px 18px;position:relative;overflow:hidden;box-shadow:var(--sh-sm);
transition:all var(--t) var(--ease-out);cursor:default;
}
.kpi:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.kpi:active{transform:translateY(0)}
.kpi::after{
content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--accent);opacity:.85;
transition:width var(--t) var(--ease-out);
}
.kpi:hover::after{width:4px}
.kpi.red::after{background:var(--grad-emphasis)} .kpi.green::after{background:linear-gradient(180deg,var(--green),var(--teal))}
.kpi.amber::after{background:var(--grad-emphasis)} .kpi.blue::after{background:var(--grad-brand)}
.kpi .lb{
font-size:0.71875rem;color:var(--ink-3);display:flex;align-items:center;gap:5px;
font-weight:500;letter-spacing:.1px;
}
.kpi .vl{
font-size:1.6875rem;font-weight:600;letter-spacing:-.8px;margin-top:6px;
font-variant-numeric:tabular-nums;line-height:1.1;
}
.kpi .vl small{font-size:0.75rem;font-weight:400;color:var(--ink-3);margin-left:3px;letter-spacing:0}
.kpi .tr{font-size:0.6875rem;color:var(--ink-3);margin-top:6px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.up{color:var(--green);font-weight:500} .down{color:var(--red);font-weight:500}
/* ---------- 表格 ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:0.78125rem}
table.tbl th{
text-align:left;font-weight:500;color:var(--ink-2);font-size:0.71875rem;letter-spacing:.1px;
padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);
white-space:nowrap;position:sticky;top:0;z-index:2;
}
table.tbl td{
padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle;
transition:background var(--t-fast) var(--ease);
}
table.tbl tbody tr{transition:background var(--t-fast) var(--ease)}
table.tbl tbody tr:hover{background:var(--accent-ring)}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:0.71875rem}
table.tbl .rowact{display:flex;gap:4px;opacity:0;transition:opacity var(--t-fast) var(--ease)}
table.tbl tr:hover .rowact{opacity:1}
.tbl-empty{padding:52px 20px;text-align:center;color:var(--ink-4)}
.tbl-empty .big{font-size:2.125rem;margin-bottom:10px;opacity:.35;font-weight:200}
.link{color:var(--accent);cursor:pointer;font-weight:500;transition:opacity var(--t-fast) var(--ease)}
.link:hover{text-decoration:underline;text-underline-offset:2px;opacity:.8}
.mono{font-family:var(--mono);font-size:0.6875rem;color:var(--ink-2);letter-spacing:-.2px}
/* ---------- 标签 ---------- */
.tag{
display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 8px;
border-radius:var(--r-full);font-size:0.65625rem;font-weight:500;white-space:nowrap;
letter-spacing:.1px;transition:all var(--t-fast) var(--ease);
}
.tag:hover{transform:translateY(-.5px);box-shadow:var(--sh-xs)}
.tag i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block;flex:0 0 5px}
.tag.red{background:var(--red-soft);color:#C93A3E}
.tag.green{background:var(--green-soft);color:#248A3D}
.tag.amber{background:var(--amber-soft);color:#B8791A}
.tag.blue{background:var(--blue-soft);color:#0062C4}
.tag.purple{background:var(--purple-soft);color:#7649C4}
.tag.gray{background:var(--surface-3);color:var(--ink-2)}
.tag.navy{background:var(--navy-soft);color:var(--navy-ink)}
.tag.teal{background:var(--teal-soft);color:#008080}
/* ---------- 表单 ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:0.75rem;color:var(--ink-2);margin-bottom:6px;font-weight:500}
.field label .req{color:var(--red)}
.inp{
width:100%;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);
padding:0 11px;background:var(--surface);outline:0;
transition:all var(--t-fast) var(--ease-out);font-size:0.8125rem;
}
.inp:hover{border-color:var(--line-3);background:var(--surface-2)}
.inp:focus{
border-color:var(--accent);background:var(--surface);
box-shadow:0 0 0 3.5px var(--accent-ring);
}
.inp::placeholder{color:var(--ink-4)}
select.inp{
cursor:pointer;appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 11px center;padding-right:28px;
}
textarea.inp{height:auto;min-height:80px;padding:9px 11px;resize:vertical;line-height:1.6}
.hint{font-size:0.6875rem;color:var(--ink-3);margin-top:5px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-grid .full{grid-column:1/-1}
/* ---------- 筛选栏 ---------- */
.filters{
display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:12px 18px;
border-bottom:1px solid var(--line-2);background:var(--surface-2);
}
.filters .inp,.filters select{height:30px;width:auto;min-width:130px;font-size:0.78125rem}
.filters .grow{flex:1}
.result-n{font-size:0.71875rem;color:var(--ink-3);padding:10px 18px}
/* ---------- 弹窗 ---------- */
.mask{
position:fixed;inset:0;background:rgba(0,0,0,.28);backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);z-index:100;display:grid;place-items:center;
padding:28px;animation:maskIn .2s var(--ease-out);
}
@keyframes maskIn{from{opacity:0}to{opacity:1}}
/* 叠加遮罩：更浅，且不吃掉底层交互 */
.mask.nested{background:rgba(0,0,0,.18);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
/* 编辑器等大容器弹窗内的子弹窗：只让子弹窗自身可交互，底层完全释放 */
.mask.editor-host{z-index:90}
.modal{
background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-xl);
width:620px;max-width:100%;max-height:88vh;display:flex;flex-direction:column;
position:relative;
animation:modalIn .32s var(--ease-out);
}
.modal.wide{width:960px}
.modal.full{width:1180px;max-height:92vh}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.modal-h{padding:16px 22px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px}
.modal-h h3{font-size:1rem;font-weight:600;letter-spacing:-.3px}
.modal-h .sp{flex:1}
.modal-h .x{
width:28px;height:28px;border-radius:var(--r-full);display:grid;place-items:center;
cursor:pointer;color:var(--ink-3);transition:all var(--t-fast) var(--ease);flex:0 0 28px;
}
.modal-h .x:hover{background:var(--surface-3);color:var(--ink);transform:rotate(90deg)}
.modal-b{padding:22px;overflow-y:auto;flex:1}
.modal-f{
padding:14px 22px;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;
gap:8px;background:var(--surface-2);border-radius:0 0 var(--r-xl) var(--r-xl);
}
/* ---------- 弹窗尺寸交互：拖拽调宽/调高 + 一键全屏 ---------- */
/* 进入「自由尺寸」模式后由 JS 接管几何，脱离 mask 的 grid 居中 */
.modal.resizable{position:fixed;margin:0;max-height:none;animation:none}
.modal.fullscreen{
/* 四边都要 !important：拖拽后 box 上留有内联 left/top/width/height，
若不覆盖，全屏会被内联值拉偏（表现为"占不满视口"）。 */
top:0!important;right:0!important;bottom:0!important;left:0!important;
width:auto!important;height:auto!important;max-height:none!important;
border-radius:0!important;box-shadow:none;animation:none;
}
.mask:has(>.modal.fullscreen){padding:0;place-items:stretch}
.mask.mask-fs{padding:0;place-items:stretch}
/* 拖拽热区：8px 命中区，视觉上只在 hover / 拖拽中显现，不干扰原有布局 */
.rz{position:absolute;z-index:3;touch-action:none}
.rz-e{top:10px;right:0;bottom:10px;width:8px;cursor:ew-resize}
.rz-w{top:10px;left:0;bottom:10px;width:8px;cursor:ew-resize}
.rz-s{left:10px;right:10px;bottom:0;height:8px;cursor:ns-resize}
.rz-se{right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize}
.rz::after{
content:'';position:absolute;inset:0;opacity:0;transition:opacity var(--t-fast) var(--ease);
background:linear-gradient(to right,var(--brand),var(--brand));
}
.rz-e::after,.rz-w::after{background:linear-gradient(to right,transparent,var(--brand),transparent)}
.rz-s::after{background:linear-gradient(to bottom,transparent,var(--brand),transparent)}
.rz-se::after{background:linear-gradient(135deg,transparent 46%,var(--brand) 47%,var(--brand) 53%,transparent 54%)}
.modal:hover .rz::after{opacity:.28}
.modal.dragging .rz::after{opacity:.75}
/* 拖拽中禁止选中文字 / 切换光标，避免"卡住"的手感 */
body.modal-dragging{user-select:none;-webkit-user-select:none;cursor:inherit!important}
/* 全屏按钮 */
.mfs{
width:28px;height:28px;border-radius:var(--r-full);display:grid;place-items:center;
cursor:pointer;color:var(--ink-3);transition:all var(--t-fast) var(--ease);flex:0 0 28px;
}
.mfs:hover{background:var(--surface-3);color:var(--ink)}
.modal.fullscreen .mfs{color:var(--brand)}
/* 隐藏被遮挡的对角热区（全屏时不需要） */
.modal.fullscreen .rz{display:none}
@media(max-width:760px){.rz{display:none}.mfs{display:none}}
/* ---------- 描述列表 ---------- */
.dl{
display:grid;grid-template-columns:auto 1fr auto 1fr;gap:1px;
background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
}
.dl>div{background:var(--surface);padding:10px 14px;transition:background var(--t-fast) var(--ease)}
.dl>div:hover{background:var(--surface-2)}
.dl .k{color:var(--ink-3);font-size:0.71875rem;white-space:nowrap}
.dl .v{font-size:0.78125rem;font-weight:500;margin-top:1px}
@media(max-width:700px){.dl{grid-template-columns:auto 1fr}}
/* ---------- 分区标题 ---------- */
.sec-t{
font-size:0.75rem;font-weight:600;color:var(--ink);letter-spacing:.1px;
margin:22px 0 10px;padding-left:10px;border-left:3px solid var(--accent);
display:flex;align-items:center;gap:8px;
}
.sec-t:first-child{margin-top:0}
.sec-t .cnt{
background:var(--surface-3);color:var(--ink-3);border-radius:var(--r-full);
padding:1px 7px;font-size:0.65625rem;font-weight:500;
}
/* ---------- 时间线 ---------- */
.tl{position:relative;padding-left:24px}
.tl::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl-i{position:relative;padding-bottom:18px}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{
content:'';position:absolute;left:-21px;top:4px;width:12px;height:12px;border-radius:50%;
background:var(--surface);border:2.5px solid var(--line-3);
transition:all var(--t) var(--ease-spring);
}
.tl-i.done::before{background:var(--green);border-color:var(--green)}
.tl-i.cur::before{background:var(--red);border-color:var(--red);box-shadow:0 0 0 4px rgba(229,72,77,.14)}
.tl-i:hover::before{transform:scale(1.2)}
.tl-i .ti-t{font-size:0.78125rem;font-weight:600}
.tl-i .ti-s{font-size:0.71875rem;color:var(--ink-3);margin-top:1px}
.tl-i .ti-d{
font-size:0.75rem;color:var(--ink-2);margin-top:6px;background:var(--surface-2);
padding:8px 12px;border-radius:var(--r-sm);border:1px solid var(--line-2);
transition:all var(--t-fast) var(--ease);
}
.tl-i:hover .ti-d{background:var(--surface-3);border-color:var(--line)}
/* ---------- 阶段条 ---------- */
.stage{display:flex;align-items:center;gap:0;overflow-x:auto;padding:6px 0;scroll-behavior:smooth}
.stage-n{
display:flex;align-items:center;gap:6px;padding:0 14px 0 22px;position:relative;
white-space:nowrap;font-size:0.71875rem;color:var(--ink-4);
transition:color var(--t) var(--ease);
}
.stage-n:first-child{padding-left:0}
.stage-n::before{
content:'';position:absolute;left:7px;top:50%;transform:translateY(-50%);
width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--line-3);
z-index:1;transition:all var(--t) var(--ease-spring);
}
.stage-n::after{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);height:2px;background:var(--line);width:22px;z-index:0;transition:background var(--t) var(--ease)}
.stage-n:first-child::after{display:none}
.stage-n.done{color:var(--green)}
.stage-n.done::before{background:var(--green);border-color:var(--green)}
.stage-n.done::after{background:var(--green)}
.stage-n.cur{color:var(--ink);font-weight:600}
.stage-n.cur::before{background:var(--red);border-color:var(--red);box-shadow:0 0 0 4px rgba(229,72,77,.13)}
/* ---------- 看板 ---------- */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scroll-behavior:smooth}
.kb-col{
flex:0 0 220px;background:var(--surface-3);border-radius:var(--r-lg);padding:12px;min-height:190px;
transition:background var(--t) var(--ease);
}
.kb-col:hover{background:#EEEFF2}
.kb-h{font-size:0.75rem;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:6px;margin-bottom:10px;padding:0 2px}
.kb-h .n{margin-left:auto;background:var(--surface);border-radius:var(--r-full);padding:1px 7px;font-size:0.65625rem;color:var(--ink-3)}
.kb-card{
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;
margin-bottom:9px;cursor:pointer;box-shadow:var(--sh-xs);
transition:all var(--t) var(--ease-out);
}
.kb-card:hover{border-color:var(--accent);box-shadow:var(--sh-md);transform:translateY(-2px)}
.kb-card:active{transform:translateY(0) scale(.985)}
.kb-card .t{font-size:0.78125rem;font-weight:600;line-height:1.4}
.kb-card .m{font-size:0.6875rem;color:var(--ink-3);margin-top:6px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.kb-add{
width:100%;border:1px dashed var(--line-3);background:transparent;border-radius:var(--r);
height:30px;color:var(--ink-3);cursor:pointer;font-size:0.75rem;transition:all var(--t-fast) var(--ease);
}
.kb-add:hover{background:var(--surface);border-color:var(--accent);color:var(--accent)}
/* ---------- 进度条 ---------- */
.bar{height:5px;background:var(--surface-3);border-radius:var(--r-full);overflow:hidden}
.bar>i{
display:block;height:100%;background:var(--accent);border-radius:var(--r-full);
transition:width .5s var(--ease-out);
}
.bar.red>i{background:var(--red)} .bar.green>i{background:var(--green)}
.bar.amber>i{background:var(--amber)} .bar.blue>i{background:var(--blue)}
/* ---------- 其它 ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 18px;overflow-x:auto}
.tab{
padding:10px 14px;font-size:0.78125rem;color:var(--ink-3);cursor:pointer;
border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
transition:all var(--t-fast) var(--ease);
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
.toast-wrap{position:fixed;top:18px;right:18px;z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
background:rgba(29,29,31,.92);backdrop-filter:blur(20px);color:#fff;
padding:11px 17px;border-radius:var(--r);font-size:0.78125rem;
box-shadow:var(--sh-lg);display:flex;align-items:center;gap:9px;
animation:toastIn .32s var(--ease-out);max-width:360px;
}
.toast.ok{background:rgba(29,29,31,.92)}
.toast.err{background:rgba(200,58,62,.95)}
.toast.warn{background:rgba(196,132,20,.95)}
@keyframes toastIn{from{opacity:0;transform:translateX(24px) scale(.96)}to{opacity:1;transform:none}}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:0.71875rem;color:var(--ink-2)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}
.hbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hbar .lb{width:84px;font-size:0.71875rem;color:var(--ink-2);flex:0 0 84px;text-align:right}
.hbar .bar{flex:1}
.hbar .vl{width:44px;font-size:0.71875rem;font-family:var(--mono);color:var(--ink-2);text-align:right}
.empty{text-align:center;padding:48px;color:var(--ink-4);font-size:0.78125rem}
.notice{
background:var(--amber-soft);border:1px solid #F5DFB4;border-radius:var(--r);
padding:12px 15px;font-size:0.78125rem;color:#8A6212;margin-bottom:16px;
/* 此前是 display:flex+gap:9px：提示条内的每段文本与每个 会被拆成独立 flex item
并被压缩，长提示就被挤成「逐字换行」的窄条（组织架构页最明显）。
提示条本质是段落，改为块级并给足行高。 */
display:block;line-height:1.7;
}
.notice b{font-weight:600}
/* ---------- 提示条内的要点列表（长说明改可扫读排版） ---------- */
.notice .tips-h{display:inline-block;margin-bottom:2px;font-weight:700}
.notice .tips-list{margin:4px 0 0;padding-left:17px;list-style:none}
.notice .tips-list li{position:relative;margin:3px 0;line-height:1.7}
.notice .tips-list li::before{
content:'';position:absolute;left:-13px;top:.62em;width:5px;height:5px;border-radius:50%;
background:currentColor;opacity:.45;
}
/* 快捷键：等宽小胶囊，弱化但可辨 */
.notice kbd,.tips-list kbd{
display:inline-block;padding:0 5px;border-radius:5px;
font-family:var(--mono);font-size:.9em;line-height:1.5;
background:rgba(255,255,255,.62);border:1px solid rgba(0,0,0,.14);
color:inherit;box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.notice.info{background:var(--blue-soft);border-color:#C3DDFA;color:#0B4E92}
.notice.ok{background:var(--green-soft);border-color:#BFE5CB;color:#1B6B34}
.chart{width:100%;overflow:visible}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* ---------- 导航底部运行模式 ---------- */
.nav-foot{margin-top:14px;padding:12px 10px 4px;border-top:1px solid rgba(255,255,255,.08)}
.mode-line{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.55);font-size:0.6875rem;margin-bottom:8px;padding:0 4px}
.mode-dot{width:6px;height:6px;border-radius:50%;background:var(--ink-4);flex:0 0 6px;transition:background var(--t) var(--ease)}
.mode-dot.ok{background:var(--green);box-shadow:0 0 0 3px rgba(52,168,83,.2)}
.mode-dot.bad{background:var(--amber);box-shadow:0 0 0 3px rgba(245,166,35,.2)}
.nav-mode-btn{
width:100%;height:28px;border-radius:var(--r-xs);border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.05);color:rgba(255,255,255,.8);font-size:0.6875rem;
cursor:pointer;transition:all var(--t-fast) var(--ease);
}
.nav-mode-btn:hover{background:rgba(255,255,255,.12);color:#fff}
/* =========================================================================
新增模块：文件库 / 流程编辑器 / 在线预览器
========================================================================= */
/* ---------- 文件卡片网格 ---------- */
.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:16px}
.file-card{
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
padding:16px;cursor:pointer;box-shadow:var(--sh-xs);position:relative;overflow:hidden;
transition:all var(--t) var(--ease-out);
}
.file-card:hover{
box-shadow:var(--sh-md);transform:translateY(-3px);
border-color:var(--line-3);
}
.file-card:active{transform:translateY(-1px) scale(.99)}
.file-card::after{
content:'';position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;
background:linear-gradient(135deg,var(--accent-ring),transparent 55%);
opacity:0;transition:opacity var(--t) var(--ease);
}
.file-card:hover::after{opacity:1}
.f-icon{
width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
font-size:0.625rem;font-weight:700;letter-spacing:.3px;color:#fff;margin-bottom:12px;
box-shadow:var(--sh-sm);transition:transform var(--t) var(--ease-spring);
}
.file-card:hover .f-icon{transform:scale(1.08) rotate(-3deg)}
.f-name{
font-size:0.78125rem;font-weight:500;line-height:1.45;margin-bottom:6px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
word-break:break-all;
}
.f-meta{font-size:0.6875rem;color:var(--ink-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.f-meta .dot-sep{color:var(--ink-4)}
.f-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:9px}
.f-badge{
position:absolute;top:12px;right:12px;background:rgba(255,255,255,.9);
backdrop-filter:blur(8px);border-radius:var(--r-full);padding:2px 8px;
font-size:0.625rem;color:var(--ink-2);box-shadow:var(--sh-xs);
}
/* ---------- 人员档案 · 薪资结构 ---------- */
.sal-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:10px 0 4px;
font-size:0.71875rem;color:var(--ink-3)}
.sal-meta b{color:var(--ink-2);font-weight:600}
/* ---------- 人员档案 · 文件清单（可折叠分组 + 操作列） ---------- */
.file-grp{margin-bottom:10px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.file-grp-h{
width:100%;display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
background:var(--surface-2);border:0;text-align:left;font-family:inherit;font-size:0.8125rem;
transition:background var(--t-fast) var(--ease);
}
.file-grp-h:hover{background:var(--accent-soft)}
.file-grp-h .sp{flex:1}
.file-grp-caret{color:var(--accent);font-size:0.75rem;width:12px;display:inline-block}
.file-grp-desc{font-size:0.6875rem;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-grp-toggle{font-size:0.6875rem;color:var(--ink-3);flex:0 0 auto}
.file-grp .tbl{border:0}
.file-grp .tbl th{background:var(--surface)}
/* ---------- 人员档案 · 变更记录 ---------- */
.chg-loading{display:flex;align-items:center;gap:8px;padding:26px 12px;color:var(--ink-3);font-size:0.78125rem}
.chg-more{display:flex;justify-content:center;padding:14px 0 4px}
.chg-tail .tbl{margin-top:10px}
/* 字段级变更：逐项胶囊，便于快速扫读 */
.chg-diff{display:flex;flex-wrap:wrap;gap:4px}
.chg-diff-i{
font-size:0.6875rem;line-height:1.5;padding:1px 7px;border-radius:var(--r-full);
background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
}
/* ---------- 人员档案 · 记录类页签（晋升降级 / 奖惩） ---------- */
.rec-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rec-bar .sp{flex:1}
.rec-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rec-filters .inp.sm{width:auto;min-width:118px;height:28px}
.rec-filters select.inp{min-width:104px}
.rec-body .tbl-empty,.rec-body .empty{padding:30px 16px}
/* 上传区 */
.dropzone{
border:1.5px dashed var(--line-3);border-radius:var(--r-lg);padding:36px 20px;
text-align:center;cursor:pointer;background:var(--surface-2);
transition:all var(--t) var(--ease-out);
}
.dropzone:hover{border-color:var(--accent);background:var(--blue-soft)}
.dropzone.over{border-color:var(--accent);background:var(--blue-soft);transform:scale(1.01)}
.dropzone .dz-ic{font-size:2rem;margin-bottom:10px;opacity:.5}
/* 上传器内的命名规则提示 */
.dz-naming{
display:flex;align-items:center;gap:8px;margin-top:10px;padding:7px 10px;
border:1px dashed var(--line-3);border-radius:var(--r-xs);background:var(--surface-2);
}
.dz-naming b{font-size:0.6875rem;color:var(--ink-3);flex:0 0 auto}
.dz-naming .mono{font-size:0.6875rem;color:var(--ink-2);word-break:break-all}
/* ---------- 员工电子档案清单（生命周期归档标准） ---------- */
.dchk-sum{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.dchk-sum-i{
font-size:0.71875rem;color:var(--ink-2);background:var(--surface-2);
border:1px solid var(--line);border-radius:var(--r-full);padding:3px 11px;
}
.dchk-sum-i b{color:var(--ink);font-weight:600;margin:0 1px}
.dchk-sum-i.is-ok{color:var(--green-ink);border-color:rgba(52,211,153,.35)}
.dchk-sum-i.is-warn{color:var(--amber-ink);border-color:rgba(251,191,36,.35)}
.dchk-sum-i.is-bad{color:var(--red-ink);border-color:rgba(248,113,113,.35)}
.dchk-tbl table{font-size:0.75rem}
.dchk-tbl th{white-space:nowrap}
.dchk-name b{display:block;font-weight:600}
.dchk-name i{font-style:normal;font-size:0.625rem;color:var(--ink-4)}
.dchk-ext{font-family:var(--mono);font-size:0.6875rem;color:var(--ink-2)}
.dchk-valid{font-size:0.6875rem;color:var(--ink-3)}
.dchk-naming .mono{font-size:0.625rem;color:var(--ink-3);word-break:break-all}
.dchk-file{
display:block;font-style:normal;font-size:0.625rem;color:var(--ink-4);
max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* ---------- 在线预览器 ---------- */
.viewer{
position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(12px);
z-index:150;display:flex;flex-direction:column;animation:maskIn .24s var(--ease-out);
}
.viewer-bar{
height:56px;flex:0 0 56px;display:flex;align-items:center;gap:12px;padding:0 20px;
background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);
}
.viewer-bar .v-title{font-size:0.875rem;font-weight:600;flex:1;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-body{flex:1;overflow:auto;padding:24px;display:grid;place-items:start center;background:rgba(0,0,0,.14)}
.viewer-page{
background:#fff;box-shadow:var(--sh-xl);border-radius:var(--r-sm);
width:min(920px,100%);min-height:60vh;padding:44px 52px;
animation:modalIn .3s var(--ease-out);
}
.viewer-page h2{font-size:1.1875rem;font-weight:600;margin-bottom:16px;letter-spacing:-.3px}
.viewer-page h3{font-size:0.9375rem;font-weight:600;margin:22px 0 10px}
.viewer-page p{font-size:0.8125rem;line-height:1.85;color:var(--ink-2);margin-bottom:12px}
.viewer-page .vp-line{height:8px;border-radius:4px;background:var(--surface-3);margin-bottom:9px}
.viewer-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:0.75rem}
.viewer-table th,.viewer-table td{border:1px solid var(--line);padding:8px 11px;text-align:left}
.viewer-table th{background:var(--surface-2);font-weight:600}
/* ---------- 流程可视化编辑器 ---------- */
.flow-editor{display:grid;grid-template-columns:212px 1fr 268px;height:calc(100vh - 200px);min-height:520px}
.fe-palette{
background:var(--surface-2);border-right:1px solid var(--line);overflow-y:auto;padding:14px;
}
.fe-title{font-size:0.6875rem;font-weight:600;color:var(--ink-3);letter-spacing:.4px;margin:6px 0 10px;text-transform:uppercase}
.fe-node-item{
display:flex;align-items:center;gap:9px;padding:9px 11px;margin-bottom:7px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
cursor:grab;box-shadow:var(--sh-xs);transition:all var(--t-fast) var(--ease);user-select:none;
}
.fe-node-item:hover{
box-shadow:var(--sh);transform:translateX(2px);
border-color:var(--accent);transform:translateY(-1px);
}
.fe-node-item:active{cursor:grabbing;transform:scale(.97)}
.fe-node-item .ni-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.fe-node-item .ni-name{font-size:0.75rem;font-weight:500}
.fe-node-item .ni-desc{font-size:0.65625rem;color:var(--ink-3);margin-top:1px}
.fe-node-item.dragging{opacity:.45}
.fe-canvas{
position:relative;overflow:auto;background:var(--surface-3);
background-image:radial-gradient(circle,rgba(0,0,0,.09) 1px,transparent 1px);
background-size:18px 18px;
}
.fe-canvas.drop-active{background-color:var(--blue-soft);outline:2px dashed var(--accent);outline-offset:-4px}
.fe-node{
position:absolute;width:158px;background:var(--surface);border:1.5px solid var(--line);
border-radius:var(--r);padding:11px 13px;cursor:grab;
box-shadow:var(--sh-sm);transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
user-select:none;
/* 必须高于 .fe-wires(z-index:1)：连线层里有 12px 宽的隐形选中热区(.fw-hit)，
若压在节点之上，鼠标点节点会先命中热区 → 变成"选连线"，表现为点击无响应。
同时也保证连线不会画到节点卡片上面。 */
z-index:2;
}
.fe-node:hover{box-shadow:var(--sh-md);border-color:var(--line-3)}
.fe-node.dragging{cursor:grabbing;box-shadow:var(--sh-lg);z-index:20;opacity:.95}
.fe-node.selected{border-color:var(--accent);box-shadow:0 0 0 3.5px var(--accent-ring),var(--sh-md);z-index:3}
.fe-node .fn-head{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.fe-node .fn-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.fe-node .fn-type{font-size:0.59375rem;color:var(--ink-3);letter-spacing:.4px;font-weight:600}
.fe-node .fn-name{font-size:0.75rem;font-weight:600;line-height:1.35;word-break:break-all}
.fe-node .fn-prop{font-size:0.625rem;color:var(--ink-3);margin-top:4px;line-height:1.4;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fe-node .fn-del{
position:absolute;top:-7px;right:-7px;width:19px;height:19px;border-radius:50%;
background:var(--red);color:#fff;border:2px solid var(--surface);display:none;
place-items:center;font-size:0.6875rem;cursor:pointer;line-height:1;
}
.fe-node:hover .fn-del{display:grid}
.fe-node .fn-del:hover{transform:scale(1.15)}
.fe-port{
position:absolute;width:12px;height:12px;border-radius:50%;background:var(--surface);
border:2px solid var(--line-3);cursor:crosshair;z-index:5;
transition:all var(--t-fast) var(--ease);
}
.fe-port:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.35)}
/* 垂直（自上而下）布局：出线在底部、入线在顶部，连线纵向贯穿，层次一目了然 */
.fe-port.out{left:50%;bottom:-6px;margin-left:-6px}
.fe-port.in{left:50%;top:-6px;margin-left:-6px}
/* 节点折叠按钮：长流程可收起整条下游分支 */
.fn-fold{
position:absolute;left:-9px;top:50%;transform:translateY(-50%);
width:16px;height:16px;border-radius:var(--r-full);display:grid;place-items:center;
background:var(--surface);border:1px solid var(--line-3);color:var(--ink-3);
font-size:0.5625rem;cursor:pointer;z-index:4;transition:all var(--t-fast) var(--ease);
}
.fn-fold:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.fe-props{background:var(--surface);border-left:1px solid var(--line);overflow-y:auto;padding:16px}
.fe-props .pp-title{font-size:0.8125rem;font-weight:600;margin-bottom:4px}
.fe-props .pp-sub{font-size:0.6875rem;color:var(--ink-3);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.fe-hint{
font-size:0.71875rem;color:var(--ink-3);line-height:1.7;text-align:center;padding:28px 14px;
}
.fe-hint .hi-ic{font-size:1.875rem;margin-bottom:12px;opacity:.3}
/* 节点列表（排序） */
.fe-sort-item{
display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:5px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
cursor:grab;box-shadow:var(--sh-xs);transition:all var(--t-fast) var(--ease);
}
.fe-sort-item:hover{border-color:var(--accent);box-shadow:var(--sh-sm)}
.fe-sort-item.dragging{opacity:.4}
.fe-sort-item .si-idx{
width:19px;height:19px;border-radius:50%;background:var(--surface-3);color:var(--ink-3);
display:grid;place-items:center;font-size:0.625rem;font-weight:600;flex:0 0 19px;
}
.fe-sort-item .si-name{font-size:0.71875rem;font-weight:500;flex:1;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fe-sort-item .si-type{font-size:0.625rem;color:var(--ink-3)}
/* 流程卡片列表 */
.flow-card{
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
padding:16px 18px;box-shadow:var(--sh-xs);transition:all var(--t) var(--ease-out);
}
.flow-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--line-3)}
.flow-card .fc-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.flow-card .fc-name{font-size:0.875rem;font-weight:600;letter-spacing:-.2px}
.flow-card .fc-meta{font-size:0.6875rem;color:var(--ink-3);margin-top:3px}
.flow-card .fc-nodes{
display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:11px;
padding:11px;background:var(--surface-2);border-radius:var(--r-sm);
}
.flow-card .fc-node{
font-size:0.65625rem;padding:3px 8px;border-radius:var(--r-full);
background:var(--surface);border:1px solid var(--line);white-space:nowrap;
}
.flow-card .fc-arrow{color:var(--ink-4);font-size:0.625rem}
.flow-card .fc-ops{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
/* ---------- 人员档案扩展 ---------- */
.profile-hero{
display:flex;gap:20px;align-items:center;padding:22px;
background:linear-gradient(135deg,#F7F9FC,#EFF3F9);border-radius:var(--r-lg);
}
.profile-hero .avatar-lg{
width:76px;height:76px;border-radius:50%;
background:linear-gradient(135deg,#6E8FB8,#3E5C80);color:#fff;
display:grid;place-items:center;font-size:1.625rem;font-weight:500;flex:0 0 76px;
box-shadow:var(--sh-md);
}
.project-card{
background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);
padding:14px 16px;margin-bottom:10px;transition:all var(--t) var(--ease-out);
}
.project-card:hover{background:var(--surface);box-shadow:var(--sh);border-color:var(--line);transform:translateX(3px)}
.project-card .pj-top{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.project-card .pj-name{font-size:0.8125rem;font-weight:600}
.project-card .pj-meta{font-size:0.6875rem;color:var(--ink-3);margin-bottom:7px;display:flex;gap:10px;flex-wrap:wrap}
.project-card .pj-desc{font-size:0.75rem;color:var(--ink-2);line-height:1.7}
/* =========================================================================
响应式（平板 / 手机 / 企业微信 H5）
========================================================================= */
@media(max-width:1200px){
.g4{grid-template-columns:repeat(2,1fr)}
.g21,.g12,.split{grid-template-columns:1fr}
.g3{grid-template-columns:1fr 1fr}
.flow-editor{grid-template-columns:180px 1fr 240px}
}
@media(max-width:1024px){
:root{--nav-w:212px}
.content{padding:16px 16px 44px}
.flow-editor{grid-template-columns:1fr;height:auto}
.fe-palette{display:flex;gap:8px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px}
.fe-palette .fe-title{display:none}
.fe-node-item{min-width:132px;margin-bottom:0}
.fe-props{border-left:0;border-top:1px solid var(--line);max-height:340px}
.fe-canvas{height:420px}
}
@media(max-width:900px){
.sidebar{
transform:translateX(-100%);transition:transform .3s var(--ease-out);
width:252px;flex-basis:252px;box-shadow:var(--sh-xl);
}
body.nav-open .sidebar{transform:translateX(0)}
.main{margin-left:0}
.nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);z-index:55;display:none}
body.nav-open .nav-scrim{display:block;animation:maskIn .2s}
.topbar{padding:0 14px;gap:9px}
.burger{display:grid}
.crumb{font-size:0.71875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px}
.search{width:auto!important;flex:0 0 32px;padding:0 8px}
.search input{display:none}
.search:focus-within{width:150px!important;flex:1 1 auto}
.search:focus-within input{display:block}
.userchip .nm,.userchip .rl{display:none}
.userchip{padding:0}
.content{padding:14px 14px 80px}
.page-head{flex-wrap:wrap;gap:10px;margin-bottom:14px}
.page-head h1{font-size:1.1875rem}
.page-head p{font-size:0.71875rem}
.page-head .sp{display:none}
.head-actions{width:100%;overflow-x:auto;padding-bottom:2px}
.grid.g4,.grid.g3,.grid.g2,.grid.g21,.grid.g12,.split{grid-template-columns:1fr!important}
.kpi{padding:14px 15px}
.kpi .vl{font-size:1.4375rem}
.file-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.profile-hero{flex-direction:column;text-align:center;gap:12px}
/* 表格 → 卡片 */
table.tbl{display:block;width:100%;max-width:100%;font-size:0.78125rem}
table.tbl th{display:none}
table.tbl thead{display:none}
table.tbl tbody{display:block;width:100%}
table.tbl tbody tr{
display:block;width:100%;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);margin:0 0 10px;padding:12px 14px;
box-shadow:var(--sh-xs);box-sizing:border-box;transition:all var(--t) var(--ease);
}
table.tbl tbody tr:hover{background:var(--surface);border-color:var(--line-3);transform:none}
table.tbl td{
display:flex;align-items:flex-start;gap:10px;border:0;padding:3px 0;
text-align:left!important;font-size:0.78125rem;width:100%!important;max-width:100%;
box-sizing:border-box;flex-wrap:wrap;min-width:0;
}
table.tbl td::before{
content:attr(data-l);flex:0 0 76px;color:var(--ink-3);font-size:0.71875rem;font-weight:500;
}
table.tbl td>*{max-width:100%;word-break:break-word}
table.tbl td.num{text-align:left!important}
table.tbl td:empty{display:none}
table.tbl .rowact{opacity:1;margin-top:6px;padding-left:76px}
table.tbl .tag{margin:1px 2px 1px 0}
.tbl-wrap{overflow-x:visible}
.tbl-empty{padding:38px 16px}
/* 弹窗 → 底部抽屉 */
.mask{padding:0;align-items:flex-end}
.modal{width:100%!important;max-height:94vh;border-radius:var(--r-xl) var(--r-xl) 0 0;animation:sheet .32s var(--ease-out)}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
.modal-f{border-radius:0;padding:14px 18px calc(14px + env(safe-area-inset-bottom))}
.modal-f .btn{flex:1;justify-content:center}
.modal-b{padding:18px}
.modal-h{padding:14px 18px}
.form-grid{grid-template-columns:1fr!important}
.filters{padding:11px 14px;gap:7px}
.filters .inp,.filters select{flex:1 1 44%;min-width:0!important}
.tabs{padding:0 10px}
.tab{padding:9px 11px;font-size:0.75rem}
/* 个人中心等多 Tab 场景：Tab 条可横向滚动，其内表格不撑破 */
.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs>*{flex:0 0 auto}
.card:has(> .tabs) .card-b,
.card:has(> .tabs)>div:not(.tabs){min-width:0;overflow:hidden}
.dl{grid-template-columns:auto 1fr}
.kanban{padding-bottom:6px}
.kb-col{flex:0 0 178px}
.stage-n{padding:0 9px 0 17px;font-size:0.65625rem}
.stage-n::before{left:4px;width:10px;height:10px}
.stage-n::after{width:15px}
.notice{font-size:0.75rem;padding:11px 13px}
.hbar .lb{width:66px;flex-basis:66px;font-size:0.6875rem}
.toast-wrap{left:14px;right:14px;top:14px}
.toast{max-width:none}
.viewer-body{padding:12px}
.viewer-page{padding:24px 20px;min-height:50vh}
.flow-editor{grid-template-columns:1fr}
.fe-canvas{height:340px}
/* 底部快捷栏 */
.mobile-dock{
position:fixed;left:0;right:0;bottom:0;height:56px;z-index:70;
background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(20px);
border-top:1px solid var(--line);display:flex;align-items:stretch;
padding-bottom:env(safe-area-inset-bottom);
}
.dock-i{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
color:var(--ink-3);cursor:pointer;font-size:0.65625rem;transition:color var(--t-fast) var(--ease);
-webkit-tap-highlight-color:transparent;
}
.dock-i svg{width:19px;height:19px;transition:transform var(--t) var(--ease-spring)}
.dock-i.on{color:var(--accent)}
.dock-i.on svg{transform:translateY(-1px) scale(1.08)}
.dock-i:active svg{transform:scale(.9)}
.dock-i[data-dk="__apply"] svg{
width:32px;height:32px;padding:7px;border-radius:50%;background:var(--accent);color:#fff;
stroke-width:2.4;margin-top:-16px;box-shadow:0 4px 14px var(--accent-ring);
}
.dock-i[data-dk="__apply"]{justify-content:flex-start;padding-top:2px}
.dock-i[data-dk="__apply"] span{margin-top:1px}
}
@media(max-width:560px){
.content{padding:12px 12px 78px}
.card-b{padding:14px}
.card-h{padding:13px 15px}
.kpi .vl{font-size:1.3125rem}
.page-head h1{font-size:1.0625rem}
.btn{height:30px;padding:0 11px;font-size:0.75rem}
.btn.sm{height:25px;padding:0 9px;font-size:0.6875rem}
.tabs{padding:0 6px}
.tab{padding:8px 9px;font-size:0.71875rem}
.modal-h{padding:13px 16px}
.modal-h h3{font-size:0.9375rem}
.modal-b{padding:15px}
.dl>div{padding:9px 12px}
.dl .k{flex-basis:66px;font-size:0.6875rem}
.sec-t{font-size:0.71875rem}
table.tbl td::before{flex-basis:68px}
.file-grid{grid-template-columns:1fr 1fr;gap:10px}
.file-card{padding:13px}
.f-icon{width:36px;height:36px;font-size:0.5625rem;border-radius:9px;margin-bottom:10px}
.dropzone{padding:26px 14px}
}
@media(min-width:901px){.burger,.mobile-dock,.nav-scrim{display:none!important}}
/* 企业微信内嵌提示条 */
.inapp-bar{
position:fixed;top:0;left:0;right:0;height:30px;z-index:80;
background:var(--nav-2);color:rgba(255,255,255,.86);
display:flex;align-items:center;justify-content:center;gap:7px;font-size:0.71875rem;
}
body:has(.inapp-bar) .sidebar{top:30px}
body:has(.inapp-bar) .topbar{top:30px}
body:has(.inapp-bar) .main{padding-top:30px}
/* ---------- 打印（CNAS 现场评审直接打印台账） ---------- */
@media print{
.sidebar,.topbar,.mobile-dock,.nav-scrim,.head-actions,.rowact,.btn,
.filters,.tabs,.fe-palette,.fe-props,.viewer-bar{display:none!important}
.main{margin-left:0}
.content{padding:0;max-width:none}
body{background:#fff;font-size:11pt}
.card{box-shadow:none;border:1px solid #ccc;break-inside:avoid;border-radius:0}
.modal,.mask{position:static;box-shadow:none;padding:0;background:#fff}
table.tbl th{display:table-cell;position:static;background:#F4F4F6!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
table.tbl thead,tbody{display:table-row-group;table-header-group}
table.tbl tbody tr{display:table-row;break-inside:avoid}
table.tbl td{display:table-cell;border-bottom:1px solid #ddd;padding:6px 8px}
table.tbl td::before{content:none}
.file-card,.project-card,.flow-card{break-inside:avoid;box-shadow:none}
.kpi{break-inside:avoid}
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* ---------- RBAC 权限勾选区（岗位-菜单 / 岗位-接口 / 分配岗位） ---------- */
.notice.warn{background:var(--amber-soft, #FFF7E6);border-color:#F5D9A3;color:#8A5A00}
.perm-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:8px;margin:8px 0 4px
}
.perm-item{
display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border:1px solid var(--line);
border-radius:var(--r-sm);background:#fff;cursor:pointer;
transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)
}
.perm-item:hover{border-color:var(--accent);box-shadow:var(--sh-xs)}
.perm-item input{width:15px;height:15px;margin-top:1px;accent-color:var(--accent);flex:0 0 15px;cursor:pointer}
.perm-item.on{background:var(--blue-soft,#EEF5FF);border-color:#B7D6FB}
.perm-item .pn{font-size:0.78125rem;font-weight:600;line-height:1.4}
.perm-item .pd{display:block;font-size:0.65625rem;color:var(--ink-4);font-family:var(--mono);margin-top:2px;word-break:break-all}
/* 无权限按钮：置灰但仍可点击（点击后弹权限说明，而不是毫无反馈） */
.btn.noperm{opacity:.45;filter:grayscale(.35);cursor:not-allowed}
.btn.noperm:hover{opacity:.7}
/* =========================================================================
* 组织架构与岗位：可编辑（拖拽 / 行内编辑 / 删除影响范围）
* ========================================================================= */
.org-tree{display:flex;flex-direction:column;gap:2px}
.org-row{
position:relative;display:flex;align-items:center;gap:8px;
padding:7px 10px;border:1px solid transparent;border-radius:var(--r-sm);
background:var(--surface);transition:background .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.org-row:hover{background:var(--surface-2);border-color:var(--line)}
.org-row.dragging{opacity:.4;background:var(--accent-soft);border-color:var(--accent)}
.org-row.drop-before::before,.org-row.drop-after::after{
content:'';position:absolute;left:6px;right:6px;height:2px;background:var(--accent);border-radius:2px;
box-shadow:0 0 0 2px var(--accent-soft);
}
.org-row.drop-before::before{top:-2px}
.org-row.drop-after::after{bottom:-2px}
.org-row.drop-into{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.org-row.folded .org-name{color:var(--ink-2)}
.org-grip{
flex:none;width:14px;text-align:center;color:var(--ink-4);font-size:0.8125rem;line-height:1;
cursor:grab;user-select:none;letter-spacing:-1px;
}
.org-grip:hover{color:var(--accent)}
.org-grip:active{cursor:grabbing}
.org-grip.off{visibility:hidden}
.org-fold{
flex:none;width:16px;height:16px;border:0;background:transparent;color:var(--ink-3);
font-size:0.6875rem;line-height:16px;text-align:center;cursor:pointer;border-radius:var(--r-xs);padding:0;
}
.org-fold:hover{background:var(--surface-3);color:var(--ink)}
.org-fold.empty{color:var(--ink-4);cursor:default}
.org-name{
font-size:0.78125rem;font-weight:600;color:var(--ink);cursor:text;
padding:2px 5px;border-radius:var(--r-xs);border:1px dashed transparent;max-width:220px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.org-name:hover{border-color:var(--line-3);background:var(--surface)}
.org-meta{flex:none;font-size:0.6875rem;color:var(--ink-3)}
.org-ops{flex:none;display:flex;gap:4px;margin-left:4px}
.org-inline{
padding:2px 5px;height:24px;font-size:0.78125rem;font-weight:600;
border:1px solid var(--accent);border-radius:var(--r-xs);
}
/* 岗位表：行内可编辑单元格 */
.org-pname,.org-pcount{
display:inline-block;padding:2px 5px;border-radius:var(--r-xs);border:1px dashed transparent;cursor:text;
}
.org-pname{font-weight:600}
.org-pname:hover,.org-pcount:hover{border-color:var(--line-3);background:var(--surface-3)}
.org-pcount{font-family:var(--mono);min-width:34px;text-align:right}
.org-desc{
display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:0.71875rem;color:var(--ink-2);
}
/* 删除部门：影响范围 + 处理策略选择 */
.org-impact{
margin:10px 0 4px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
}
.oi-row{
display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:0.78125rem;color:var(--ink-2);
border-bottom:1px solid var(--line-2);
}
.oi-row:last-child{border-bottom:0}
.oi-row>span{flex:none;width:76px;color:var(--ink-3)}
.oi-row>b{color:var(--ink);font-size:0.8125rem}
.org-choice{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.oc-t{font-size:0.75rem;font-weight:650;color:var(--ink);margin-bottom:7px}
.oc-i{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:0.78125rem;color:var(--ink-2);cursor:pointer}
.oc-i input{margin-top:2px;accent-color:var(--accent)}
.oc-sub{padding:2px 0 6px 22px}
.oc-sub .inp{width:100%}
@media (max-width:900px){
.org-row{flex-wrap:wrap;gap:6px}
.org-ops{margin-left:0;width:100%}
.org-name{max-width:100%}
}
/* =========================================================================
* 员工生命周期文件管理（线上签署 + 线下归档）
* ========================================================================= */
.doc-tabs{display:flex;gap:2px;margin:14px 0 12px;border-bottom:1px solid var(--line)}
.doc-tab{
border:0;background:transparent;padding:9px 15px;font-size:0.78125rem;color:var(--ink-3);
cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit;
transition:color var(--t) var(--ease-out),border-color var(--t) var(--ease-out);
}
.doc-tab:hover{color:var(--ink)}
.doc-tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.doc-tab span{
display:inline-block;margin-left:6px;padding:0 6px;border-radius:var(--r-full);
background:var(--surface-3);font-size:0.65625rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.doc-tab.on span{background:var(--accent-soft);color:var(--accent)}
/* 状态流转条 */
.doc-flow{display:inline-flex;align-items:center;gap:3px;margin-top:4px;vertical-align:middle}
.doc-flow .df-dot{font-size:0.59375rem;color:var(--ink-4);white-space:nowrap}
.doc-flow .df-dot.on{color:var(--accent)}
.doc-flow .df-dot.cur{color:var(--accent);font-weight:700}
.doc-flow .df-dot.off{color:var(--ink-4);opacity:.5}
.doc-flow .df-dot.bad{color:var(--red);font-weight:600;margin-left:4px}
.doc-flow i{display:inline-block;width:8px;height:1px;background:var(--line-3)}
/* 文件正文（模拟纸质文件预览） */
.doc-body{
white-space:pre-wrap;word-break:break-word;font-size:0.78125rem;line-height:1.85;color:var(--ink);
border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin:12px 0;
background:var(--surface-2);max-height:520px;overflow:auto;
font-family:var(--font, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif);
}
.doc-body.locked{background:var(--surface-3);color:var(--ink-2);position:relative}
.doc-body.locked::after{
content:'正文已冻结';position:absolute;right:12px;top:12px;font-size:0.625rem;color:var(--ink-4);
border:1px solid var(--line-3);border-radius:var(--r-full);padding:1px 8px;background:var(--surface);
}
.doc-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.doc-signinfo{
margin-top:12px;padding:11px 13px;border:1px solid var(--green);border-radius:var(--r-sm);
background:var(--green-soft);font-size:0.71875rem;line-height:1.8;color:var(--ink-2);
}
.doc-signinfo code{font-family:var(--mono);font-size:0.65625rem;word-break:break-all}
.doc-way{font-size:0.71875rem;color:var(--ink-2)}
.doc-reject{
display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:0.6875rem;color:var(--red);cursor:help;
}
.doc-att{
padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
margin-bottom:7px;font-size:0.75rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.doc-att.bad{border-color:var(--red);background:var(--red-soft)}
.doc-confirm{
display:flex;align-items:flex-start;gap:9px;padding:12px 14px;margin:12px 0;
border:1px solid var(--accent);border-radius:var(--r-sm);background:var(--accent-soft);
font-size:0.78125rem;line-height:1.7;cursor:pointer;color:var(--ink);
}
.doc-confirm input{margin-top:2px;accent-color:var(--accent);width:15px;height:15px;flex:none}
/* 进度条 */
.doc-prog{width:110px;height:5px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.doc-prog.wide{width:130px}
.doc-prog i{display:block;height:100%;background:var(--green);border-radius:var(--r-full);transition:width var(--t) var(--ease-out)}
.doc-ops{display:flex;gap:5px;justify-content:flex-end}
/* 按员工的进度行 */
.doc-emp{
display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line-2);
}
.doc-emp:last-child{border-bottom:0}
.doc-emp:hover{background:var(--surface-2)}
.de-l{display:flex;align-items:center;gap:10px;width:210px;flex:none}
.de-n{font-size:0.78125rem;font-weight:600;color:var(--ink)}
.de-st{font-size:0.625rem;color:var(--ink-4);border:1px solid var(--line);border-radius:var(--r-full);padding:0 6px;margin-left:4px;font-weight:400}
.de-d{font-size:0.6875rem;color:var(--ink-3);margin-top:2px}
.de-s{display:flex;gap:5px;flex-wrap:wrap;flex:1}
.de-p{display:flex;align-items:center;gap:8px;flex:none}
.de-p b{font-size:0.75rem;font-variant-numeric:tabular-nums;color:var(--ink-2);width:36px;text-align:right}
@media (max-width:980px){
.doc-emp{flex-wrap:wrap;gap:8px}
.de-l{width:100%}
.doc-ops{width:100%;justify-content:flex-start}
.de-p{width:100%}
.doc-prog,.doc-prog.wide{flex:1}
}
.kpi.navy::after{background:linear-gradient(180deg,var(--nav-2),var(--nav-3))}
.kpi .lb{color:var(--ink-3)}
/* =========================================================================
* 字典维护
* ========================================================================= */
.dict-type{
display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 6px 2px;
border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;
transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.dict-type:hover{background:var(--surface-2);border-color:var(--line)}
.dict-type.on{background:var(--accent-soft);border-color:var(--accent)}
.dict-type.on .dt-name{color:var(--accent-hover)}
.dt-main{flex:1;min-width:0}
.dt-name{font-size:0.78125rem;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.dt-code{font-size:0.65625rem;color:var(--ink-4);margin-top:2px}
.dt-n{flex:none;font-size:0.6875rem;color:var(--ink-3);white-space:nowrap}
.dict-remark{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3);font-size:0.71875rem}
/* 分页条 */
.pager{
display:flex;align-items:center;gap:6px;padding:10px 14px;
border-top:1px solid var(--line-2);background:var(--surface-2);
}
.pager .btn[disabled]{opacity:.4;pointer-events:none}
.pg-info{font-size:0.71875rem;color:var(--ink-3)}
.pager .btn{margin-left:0}
/* =========================================================================
* 菜单使用说明浮层
* pointer-events:none —— 绝不拦截点击；贴在侧栏右侧，避免遮挡菜单本身
* ========================================================================= */
.nav-q{
margin-left:auto;flex:0 0 auto;width:14px;height:14px;border-radius:50%;
background:rgba(255,255,255,.14);color:rgba(255,255,255,.62);
font-size:0.59375rem;font-weight:700;line-height:14px;text-align:center;
opacity:0;transition:opacity var(--t-fast) var(--ease);
}
.nav-item:hover .nav-q,.nav-item:focus-visible .nav-q{opacity:1}
.nav-q:hover{background:var(--accent)}
.nav-help{
position:fixed;z-index:400;width:308px;max-height:74vh;overflow:auto;
padding:13px 15px;border-radius:var(--r);pointer-events:none;
background:rgba(255,255,255,.86);
-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
border:1px solid rgba(255,255,255,.7);box-shadow:var(--sh-lg);
animation:nhIn .16s var(--ease-out);
}
@keyframes nhIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.nav-help .nh-t{font-size:0.65625rem;font-weight:700;letter-spacing:.8px;color:var(--ink-4);margin-bottom:7px}
.nav-help .nh-use{font-size:0.78125rem;line-height:1.62;color:var(--ink);font-weight:550}
.nav-help .nh-s{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line)}
.nav-help .nh-h{font-size:0.65625rem;font-weight:700;color:var(--accent);margin-bottom:4px;letter-spacing:.4px}
.nav-help .nh-s ol,.nav-help .nh-s ul{margin:0;padding-left:16px}
.nav-help .nh-s li{font-size:0.71875rem;line-height:1.62;color:var(--ink-2);margin-bottom:3px}
.nav-help .nh-warn .nh-h{color:var(--amber)}
.nav-help .nh-warn li{color:var(--ink-2)}
/* 使用说明书汇总弹窗 */
.mh-item{padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:9px;background:var(--surface)}
.mh-h{display:flex;align-items:center;gap:8px;font-size:0.8125rem;margin-bottom:5px}
.mh-h .mono{font-size:0.65625rem;color:var(--ink-4)}
.mh-use{font-size:0.75rem;line-height:1.62;color:var(--ink-2)}
.mh-s{margin-top:7px;font-size:0.71875rem;color:var(--ink-2);line-height:1.6}
.mh-s>b{font-size:0.65625rem;color:var(--accent);letter-spacing:.4px;display:block;margin-bottom:3px}
.mh-s.warn>b{color:var(--amber)}
.mh-s ol,.mh-s ul{margin:0;padding-left:16px}
/* =========================================================================
* 流程编辑器增强：画布工具条 / 视口 / 吸附参考线 / 框选 / 连线交互 / 全屏
* ========================================================================= */
/* 全屏态：遮罩铺满，弹窗占满视口 */
.mask.editor-host.fe-fs{background:rgba(20,22,26,.96)}
.mask.editor-host.fe-fs .fe-shell{max-width:100vw;width:100vw;height:100vh;max-height:100vh;border-radius:0}
.mask.editor-host.fe-fs .flow-editor{height:100%}
/* 编辑器头部：撤销栈提示 */
.fe-hist{
font-size:0.65625rem;color:var(--ink-4);padding:2px 8px;border-radius:var(--r-full);
background:var(--surface-3);white-space:nowrap;max-width:190px;
overflow:hidden;text-overflow:ellipsis;
}
/* 模块库标题下的提示行 */
.fe-hintline{font-size:0.65625rem;color:var(--ink-4);margin:-4px 0 10px}
/* ---------- 画布舞台（工具条 + 画布） ---------- */
.fe-stage{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--surface-3)}
.fe-toolbar{
flex:none;display:flex;align-items:center;gap:4px;padding:6px 10px;
background:var(--surface);border-bottom:1px solid var(--line);z-index:30;
}
.fe-toolbar .sp{flex:1}
.tb-btn{
height:26px;padding:0 9px;border-radius:var(--r-xs);border:1px solid var(--line);
background:var(--surface);color:var(--ink-2);font-size:0.71875rem;cursor:pointer;
display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
transition:all var(--t-fast) var(--ease);
}
.tb-btn:hover{background:var(--surface-3);border-color:var(--line-3);color:var(--ink)}
.tb-btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-hover);font-weight:600}
.tb-btn.off,.tb-btn:disabled{opacity:.4;cursor:not-allowed}
.tb-btn.tb-zoom{min-width:56px;justify-content:center;font-family:var(--mono);font-size:0.6875rem}
.tb-div{width:1px;height:16px;background:var(--line);margin:0 3px}
.tb-info{font-size:0.65625rem;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
/* ---------- 画布与视口 ---------- */
.fe-canvas{
position:relative;flex:1;overflow:hidden;background:var(--surface-3);
background-image:radial-gradient(circle,rgba(0,0,0,.10) 1px,transparent 1px);
background-size:18px 18px;cursor:default;
}
.fe-canvas.panning,.fe-canvas.space{cursor:grab;background-image:radial-gradient(circle,var(--accent-ring) 1px,transparent 1px)}
.fe-canvas.drop-active{background-color:var(--blue-soft);outline:2px dashed var(--accent);outline-offset:-4px}
/* 视口层：只做 transform，节点坐标始终是内容坐标 */
.fe-viewport{
position:absolute;left:0;top:0;width:6000px;height:4000px;transform-origin:0 0;
}
.fe-wires{position:absolute;overflow:visible;pointer-events:none;z-index:1}
.fe-wires .fw-line{pointer-events:none}
/* 加大连线的点击容差：透明粗线覆盖在可见线之上 */
.fe-wires .fw-hit{stroke:transparent;stroke-width:12;pointer-events:stroke;cursor:pointer}
.fe-wires .fe-wire{pointer-events:none}
.fe-wires .fe-wire .fw-hit{pointer-events:stroke}
.fe-wires .fw-preview{pointer-events:none}
/* ---------- 对齐参考线 ---------- */
.fe-guides{position:absolute;inset:0;pointer-events:none;z-index:5}
.fe-guide{position:absolute;background:var(--red);opacity:.7}
.fe-guide.v{top:0;bottom:0;width:1px}
.fe-guide.h{left:0;right:0;height:1px}
/* ---------- 框选矩形 ---------- */
.fe-box{
position:absolute;z-index:6;pointer-events:none;
border:1px solid var(--accent);background:var(--accent-ring);border-radius:2px;
}
/* ---------- 模块徽标（复制） ---------- */
.fe-node .fn-badge{
margin-left:auto;width:16px;height:16px;border-radius:var(--r-xs);color:var(--ink-4);
font-size:0.6875rem;display:none;place-items:center;cursor:pointer;
transition:all var(--t-fast) var(--ease);
}
.fe-node:hover .fn-badge{display:grid}
.fe-node .fn-badge:hover{background:var(--accent-soft);color:var(--accent)}
/* 拉线中的节点 */
.fe-node.linking{box-shadow:0 0 0 3px var(--accent-ring),var(--sh-md);border-color:var(--accent)}
/* ---------- 属性面板：快捷键说明 ---------- */
.fe-shortcuts{
margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2);
font-size:0.6875rem;color:var(--ink-3);line-height:2;
}
.fe-shortcuts .fe-title{margin-bottom:6px}
.fe-shortcuts kbd{
display:inline-block;padding:1px 5px;border-radius:4px;border:1px solid var(--line-3);
background:var(--surface-2);font-family:var(--mono);font-size:0.625rem;color:var(--ink-2);
margin:0 1px;
}
@media (max-width:900px){
.fe-toolbar{flex-wrap:wrap;height:auto}
.tb-info{display:none}
}
/* =========================================================================
* 提醒中枢：可下钻提醒卡 / 明细抽屉 / 上下文返回条
* ========================================================================= */
/* 可下钻的 KPI 提醒卡 */
.kpi.kpi-remind{cursor:pointer}
.kpi.kpi-remind:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--accent)}
.kpi.kpi-remind:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kpi.kpi-remind .kpi-go{
position:absolute;right:12px;bottom:11px;font-size:0.65625rem;color:var(--accent);
opacity:0;transform:translateX(-3px);
transition:all var(--t-fast) var(--ease-out);
}
.kpi.kpi-remind:hover .kpi-go{opacity:1;transform:none}
.kpi.kpi-remind .kpi-x{position:absolute;right:12px;top:14px;font-size:0.65625rem;color:var(--ink-4)}
/* 可点击的提醒卡（提醒卡/toast 形态） */
.toast.toast-remind{
pointer-events:auto;cursor:pointer;flex-direction:row;flex-wrap:wrap;
max-width:420px;padding:12px 16px;border:1px solid rgba(255,255,255,.16);
}
.toast.toast-remind:hover{background:rgba(29,29,31,.97)}
.toast.toast-remind .tr-t{font-style:normal;font-size:0.6875rem;opacity:.7;width:100%;margin-top:2px}
.toast.toast-remind .tr-acts{display:flex;gap:6px;margin-left:6px}
.toast.toast-remind .tr-a{
height:22px;padding:0 9px;border-radius:var(--r-xs);cursor:pointer;font-size:0.6875rem;
background:rgba(255,255,255,.14);color:#fff;border:0;transition:all var(--t-fast) var(--ease);
}
.toast.toast-remind .tr-a:hover{background:rgba(255,255,255,.28)}
.toast.toast-remind .tr-a.primary{background:var(--accent);color:#fff}
.toast.toast-remind .tr-go{font-size:0.65625rem;opacity:.72;width:100%;margin-top:4px}
/* 明细抽屉里的提示条 */
.nd-hint{
display:flex;align-items:flex-start;gap:8px;padding:10px 12px;margin-bottom:14px;
border-radius:var(--r-sm);background:var(--accent-soft);color:var(--ink-2);
font-size:0.75rem;line-height:1.6;
}
.nd-hint svg{flex:0 0 15px;margin-top:2px;color:var(--accent)}
/* 已处理回执 */
.nd-done{
margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);
background:var(--green-soft);color:#1B6B34;font-size:0.75rem;line-height:1.6;
}
/* ---------- 待办处理流程（完成条件由实际工作结果驱动） ---------- */
.tp-why{
display:flex;align-items:flex-start;gap:14px;padding:12px 14px;margin-bottom:6px;
border:1px solid var(--accent-soft-2);border-radius:var(--r-sm);
background:var(--accent-soft);
}
.tp-why-l{flex:1;min-width:0}
.tp-why-t{font-size:0.8125rem;font-weight:600;color:var(--accent-ink)}
.tp-why-d{font-size:0.6875rem;color:var(--ink-2);margin-top:3px;line-height:1.6}
.tp-meta{display:flex;flex-direction:column;gap:2px;text-align:right;font-size:0.625rem;color:var(--ink-4);flex:0 0 auto}
/* 必做步骤清单 */
.tp-steps{display:flex;flex-direction:column;gap:7px}
.tp-step{
display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.tp-step:hover{border-color:var(--accent-soft-2)}
.tp-step.done{border-color:var(--accent);background:var(--accent-soft)}
.tp-step input{position:absolute;opacity:0;pointer-events:none}
.tp-step-b{
flex:0 0 16px;width:16px;height:16px;border-radius:4px;
border:1.5px solid var(--line-3);background:var(--surface);
display:grid;place-items:center;transition:all var(--t-fast) var(--ease);
}
.tp-step.done .tp-step-b{background:var(--accent);border-color:var(--accent)}
.tp-step.done .tp-step-b::after{
content:'';width:8px;height:4px;border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;
transform:rotate(-45deg) translate(1px,-1px);
}
.tp-step-l{font-size:0.78125rem;color:var(--ink-2)}
.tp-step.done .tp-step-l{color:var(--ink)}
/* 处理信息字段 */
.tp-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.tp-f{display:flex;flex-direction:column;gap:5px}
.tp-f.full{grid-column:1/-1}
.tp-f label{font-size:0.71875rem;color:var(--ink-3);font-weight:500}
.tp-f .req{color:var(--red)}
.tp-f textarea{resize:vertical}
/* 附件区 */
.tp-att{display:flex;flex-direction:column;gap:10px}
.tp-drop{
padding:18px;text-align:center;cursor:pointer;border-radius:var(--r-sm);
border:1.5px dashed var(--line-3);background:var(--surface-2);
transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.tp-drop:hover,.tp-drop.over{border-color:var(--accent);background:var(--accent-soft)}
.tp-files{display:flex;flex-direction:column;gap:6px}
.tp-file{
display:flex;align-items:center;gap:10px;padding:8px 11px;
border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
}
.tp-file-n{flex:1;min-width:0;font-size:0.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-file-s{font-size:0.625rem;color:var(--ink-4);flex:0 0 auto}
.tp-file-empty{font-size:0.6875rem;color:var(--ink-4);text-align:center;padding:12px;border:1px dashed var(--line-2);border-radius:var(--r-sm)}
/* 校验失败提示 */
.tp-err{
margin-top:14px;padding:11px 13px;border-radius:var(--r-sm);
border:1px solid var(--red);background:var(--red-soft);color:var(--red);
font-size:0.75rem;line-height:1.7;
}
.tp-err b{display:block;margin-bottom:4px;font-size:0.78125rem}
.tp-err ul{margin:0;padding-left:18px}
.tp-err li{margin-top:2px}
/* 抽屉里的完成条件卡 */
.tr-cond{
padding:11px 13px;border-radius:var(--r-sm);
border:1px solid var(--accent-soft-2);background:var(--accent-soft);
}
.tr-cond-t{font-size:0.78125rem;font-weight:600;color:var(--accent-ink)}
.tr-cond-d{font-size:0.6875rem;color:var(--ink-2);margin-top:4px;line-height:1.7}
.tr-cond-h{font-size:0.625rem;color:var(--ink-4);margin-top:5px;line-height:1.6}
/* 明细页上下文条：从提醒跳进来时显示来源与返回入口 */
.remind-ctx{
display:flex;align-items:center;gap:10px;padding:9px 14px;margin-bottom:12px;
border:1px solid var(--accent);border-radius:var(--r-sm);
background:var(--accent-soft);font-size:0.75rem;color:var(--ink-2);
}
.remind-ctx .rc-ic{
width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;
display:grid;place-items:center;font-size:0.6875rem;flex:0 0 20px;
}
.remind-ctx b{color:var(--accent-hover)}
.remind-ctx .sp{flex:1}
.remind-ctx .rc-n{
padding:1px 7px;border-radius:var(--r-full);background:var(--surface);
font-size:0.65625rem;color:var(--ink-2);border:1px solid var(--line);
}
/* 空态 / 无权限态 */
.remind-empty{
padding:26px 16px;text-align:center;font-size:0.78125rem;color:var(--ink-3);
border:1px dashed var(--line-3);border-radius:var(--r-sm);background:var(--surface-2);
}
.remind-empty b{display:block;font-size:0.8125rem;color:var(--ink-2);margin-bottom:5px;font-weight:600}
/* ===========================================================================
* 组织架构图（垂直树形）
* ---------------------------------------------------------------------------
* 结构：.ot-tree > .ot-root / .ot-level > .ot-node + .ot-children(递归)
* 连接线：用 .ot-children::before 画竖向主干、.ot-node::before 画横向引线，
* 父子之间形成标准树形图的直角折线，层次一眼可辨。
* 状态：.sel = 选中（主色实线框）、.editing = 编辑中（琥珀虚线框），
* 两者视觉可区分，且不依赖颜色单一通道（还有宽度/阴影差异）。
* ========================================================================= */
/* 架构图内部独立滚动：避免节点多时把整页撑得过长（也便于长流程/大树滚动查看） */
.ot-tree{--ot-indent:26px;overflow:auto;max-height:360px;padding:4px 2px 8px}
.ot-root{
display:flex;align-items:center;gap:12px;margin:0 auto 22px;width:max-content;
padding:12px 22px;border-radius:var(--r-lg);
background:var(--grad-brand);color:#fff;box-shadow:var(--sh-md);
}
.ot-root-mark{
width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
background:rgba(255,255,255,.2);font-weight:800;font-size:0.875rem;letter-spacing:1px;
}
.ot-root-txt strong{display:block;font-size:0.9375rem;letter-spacing:-.2px}
.ot-root-txt span{font-size:0.71875rem;opacity:.86;margin-top:2px;display:block}
.ot-level{position:relative}
/* 一级层级的竖向主干 */
.ot-level::before{
content:'';position:absolute;left:19px;top:0;bottom:22px;width:2px;
background:var(--n-200);border-radius:2px;
}
.ot-node{position:relative;padding-left:var(--ot-indent);margin-bottom:10px}
/* 横向引线 */
.ot-node::before{
content:'';position:absolute;left:19px;top:26px;width:calc(var(--ot-indent) - 19px);height:2px;
background:var(--n-200);
}
/* 子树容器：缩进 + 自己的竖向主干 */
.ot-children{position:relative;margin-left:19px;padding-left:var(--ot-indent)}
.ot-children::before{
content:'';position:absolute;left:0;top:0;bottom:26px;width:2px;
background:var(--n-200);border-radius:2px;
}
/* 叶子节点不画引线末端多余竖线 */
.ot-node:last-child::before{width:calc(var(--ot-indent) - 19px)}
.ot-card{
position:relative;display:inline-block;min-width:230px;max-width:330px;
padding:10px 14px 10px 16px;border-radius:var(--r);
background:var(--surface);border:1px solid var(--line);
box-shadow:var(--sh-xs);cursor:pointer;
transition:box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
/* 左侧层级色条：用层级令牌形成"色彩层次"，同页层级一眼可辨 */
.ot-card::before{
content:'';position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;
background:var(--tier-1);
}
.ot-node[data-lv="1"] .ot-card::before{background:var(--tier-2)}
.ot-node[data-lv="2"] .ot-card::before{background:var(--tier-3)}
.ot-node[data-lv="3"] .ot-card::before{background:var(--tier-4)}
.ot-card:hover{border-color:var(--n-300);box-shadow:var(--sh-sm);transform:translateY(-1px)}
/* 选中态：主色实线框 + 主色柔光（宽度与阴影同时变化，色盲可辨） */
.ot-node.sel .ot-card{
border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring),var(--sh-sm);
background:var(--accent-soft);
}
/* 编辑态：琥珀虚线框，与选中态明显不同 */
.ot-node.editing .ot-card{
border:2px dashed var(--emphasis);background:var(--emphasis-soft);
box-shadow:0 0 0 3px rgba(232,147,12,.18);
}
.ot-node.dragging .ot-card{opacity:.5}
.ot-card.drop-into{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.ot-card.drop-before{box-shadow:0 -4px 0 -1px var(--accent)}
.ot-card.drop-after{box-shadow:0 4px 0 -1px var(--accent)}
.ot-top{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.ot-fold{
width:20px;height:20px;flex:0 0 20px;border:none;border-radius:var(--r-xs);
background:var(--surface-3);color:var(--ink-3);cursor:pointer;font-size:0.625rem;
display:grid;place-items:center;transition:all var(--t-fast) var(--ease);
}
.ot-fold:hover{background:var(--n-200);color:var(--ink)}
.ot-name{font-size:0.84375rem;font-weight:600;letter-spacing:-.2px;color:var(--ink)}
.ot-code{margin-left:auto;font-size:0.65625rem;color:var(--ink-4);background:var(--surface-3);
padding:1px 6px;border-radius:var(--r-full)}
.ot-meta{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.ot-k{font-size:0.65625rem;color:var(--ink-4)}
.ot-v{font-size:0.75rem;color:var(--ink-2)}
.ot-stats{display:flex;gap:6px;margin-bottom:7px;flex-wrap:wrap}
.ot-stat{
font-size:0.65625rem;color:var(--ink-3);background:var(--surface-3);
padding:2px 7px;border-radius:var(--r-full);
}
.ot-stat b{color:var(--ink);font-weight:600;font-size:0.71875rem}
.ot-pos{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:7px}
.ot-chip{
font-size:0.65625rem;padding:2px 7px;border-radius:var(--r-full);cursor:pointer;
background:var(--secondary-soft);color:var(--secondary);
border:1px solid transparent;transition:all var(--t-fast) var(--ease);
}
.ot-chip:hover{border-color:var(--secondary);background:var(--surface)}
.ot-chip.more{background:var(--surface-3);color:var(--ink-3);cursor:default}
.ot-ops{display:flex;gap:4px;flex-wrap:wrap}
.ot-ops .btn.xs{padding:2px 7px;font-size:0.65625rem;line-height:1.5}
/* 通知条里的状态示意小方块 */
.ot-demo{display:inline-block;width:26px;height:12px;border-radius:3px;vertical-align:middle}
.ot-demo.sel{border:1.5px solid var(--accent);background:var(--accent-soft)}
.ot-demo.editing{border:2px dashed var(--emphasis);background:var(--emphasis-soft)}
@media(max-width:760px){
.ot-tree{--ot-indent:16px}
.ot-card{min-width:190px}
}
/* 编制明细折叠区：架构图为主视图，旧的扁平操作列表收进 ，默认收起 */
.ot-more{margin-top:14px}
.ot-more-sum{
display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
color:var(--ink-2);font-size:0.8125rem;user-select:none;list-style:none;
transition:all var(--t-fast) var(--ease);
}
.ot-more-sum::-webkit-details-marker{display:none}
.ot-more-sum:hover{border-color:var(--n-300);background:var(--surface-2)}
.ot-more-sum .sub{font-size:0.71875rem;color:var(--ink-4)}
.ot-more[open] .ot-more-sum{border-radius:var(--r) var(--r) 0 0;background:var(--surface-2)}
.ot-more[open] .ot-more-sum>svg{transform:rotate(90deg)}
.ot-more-sum>svg{transition:transform var(--t-fast) var(--ease);flex:0 0 14px}
.ot-more>.grid{margin-top:12px}
/* ===========================================================================
* 可调尺寸面板（页面内主从分栏）
* ---------------------------------------------------------------------------
* 与弹窗的 .rz/.mfs 同一套设计语言：拖拽热区 + 一键全屏。
* 宽度由 --sl 驱动；未交互时保持原比例，视觉与改造前一致。
* ========================================================================= */
/* 注意：以下规则一律用 [data-split] 而非 .grid[data-split]，
这样组织树（.oe-body）等页面级分栏容器也能复用同一套交互与样式 */
[data-split]{
display:flex;align-items:stretch;gap:0;
}
[data-split]>.split-pane{
min-width:0;flex:0 0 calc(var(--sl,60.8%));overflow:hidden;
transition:flex-basis var(--t-base) var(--ease);
}
/* 右栏吃掉剩余宽度，天然自适应。
注意：增强后两栏之间插入了 .split-divider，相邻兄弟选择器(.A+.B)永远匹配不到右栏，
必须用通用兄弟选择器(.split-divider~.split-pane)——否则右栏保持 60.8% 基准导致整页横向溢出 */
[data-split]>.split-divider~.split-pane{flex:1 1 auto;min-width:0}
/* 拖拽中禁用过渡，保证 1:1 跟手无延迟 */
[data-split].dragging>.split-pane{transition:none}
/* 组织树：左栏有底色与右边框，去掉分隔条自带的重复边线 */
.oe-body[data-split]>.split-pane:first-child{border-right:0}
/* ---------- 组织树右栏：恢复滚动（修复底部内容被裁切且无法拖动） ----------
背景：上面 [data-split]>.split-pane 的 overflow:hidden（为 .grid 圆角裁切设计）
特异性 0,2,0 高于 .oe-right 自身的 overflow:auto(0,1,0) → 右栏被强制 hidden，
内容超出无法滚动。且右栏是 column flex，子项默认 flex-shrink:1 会被压缩
（.oe-pd 内容需 451px 却被压到 297px），叠加 .oe-pd 自身 overflow:hidden 导致底部消失。
处理：右栏恢复 auto 滚动 + 子项不压缩（改为由右栏统一滚动），并补齐触摸/边界行为。 */
.oe-body[data-split]>.oe-right,
.oe-body>.oe-right{
overflow:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior:contain; /* 滚动到边界不 chaining 到整页，避免"拖不动"的错觉 */
touch-action:pan-y; /* 明确允许纵向触摸滑动（分隔条才是 none） */
min-height:0;
}
/* 右栏内各区块按内容自然高度排布，由右栏统一滚动，避免被 flex 压缩后裁切。
不加 [data-split] 限定：窄屏纵向堆叠时 enhanceSplits 会跳过增强（无该属性），此规则仍需生效。 */
.oe-body>.oe-right>*{flex:0 0 auto}
.oe-body>.oe-right>.oe-pd{overflow:visible}
.split-divider{
position:relative;flex:0 0 14px;display:grid;place-items:center;
cursor:col-resize;user-select:none;touch-action:none;
}
/* 触摸命中区：视觉仍是 14px 细条，但两侧各扩 6px 透明热区，指尖更好抓（不改变布局） */
.split-divider::after{content:'';position:absolute;top:0;bottom:0;left:-6px;right:-6px}
/* 中缝细线：常态即可辨认（用强边界色，弱化靠细度而非透明），hover/拖拽时高亮加粗 */
.split-divider::before{
content:'';position:absolute;top:10px;bottom:10px;left:50%;width:3px;
transform:translateX(-50%);border-radius:3px;background:var(--line-3);
transition:background var(--t-fast) var(--ease),top var(--t-fast) var(--ease),
bottom var(--t-fast) var(--ease),width var(--t-fast) var(--ease);
}
.split-divider:hover::before,.split-divider.dragging::before{
background:var(--accent);top:4px;bottom:4px;width:5px;
}
/* 键盘可达：聚焦时给出明确焦点环 */
.split-divider:focus-visible{outline:none}
.split-divider:focus-visible::before{background:var(--accent);top:4px;bottom:4px;width:5px}
.split-divider:focus-visible .sd-grip{background:var(--accent-soft)}
.sd-grip{
position:relative;width:4px;height:34px;border-radius:2px;
background:var(--line);transition:background var(--t-fast) var(--ease);
}
.split-divider:hover .sd-grip{background:var(--accent-soft)}
/* 全屏按钮：hover 分隔条时浮现，停在分隔条**上端**——
刻意避开中部的拖拽热区，否则按钮会盖住拖拽起点导致「拖不动」。 */
.sd-fs{
position:absolute;top:14px;left:50%;transform:translate(-50%,0) scale(.8);
width:26px;height:26px;border-radius:var(--r-full);display:grid;place-items:center;
background:var(--surface);border:1px solid var(--line-3);color:var(--ink-3);
cursor:pointer;opacity:0;pointer-events:none;
transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
box-shadow:var(--sh-sm);
}
.split-divider:hover .sd-fs,.split-divider.dragging .sd-fs{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
.sd-fs:hover{background:var(--accent);border-color:var(--accent);color:#fff}
/* 拖拽中：全局禁止选字，光标锁定为列调整 */
body.panel-dragging{user-select:none;-webkit-user-select:none;cursor:col-resize!important}
/* ---------- 面板全屏 ---------- */
.pane-fs-mask{position:fixed;inset:0;background:rgba(0,0,0,.34);backdrop-filter:blur(3px);z-index:118;animation:maskIn .18s var(--ease-out)}
.split-pane.pane-fs{
position:fixed;inset:0;z-index:120;flex:none!important;width:auto!important;
overflow:auto;background:var(--surface);border-radius:0;
box-shadow:var(--sh-xl);animation:paneFsIn .24s var(--ease-out);
}
@keyframes paneFsIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.pane-fs-close{
position:fixed;top:14px;right:16px;z-index:122;width:34px;height:34px;
border-radius:var(--r-full);display:grid;place-items:center;cursor:pointer;
background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
box-shadow:var(--sh-md);transition:all var(--t-fast) var(--ease);
}
.pane-fs-close:hover{background:var(--accent);border-color:var(--accent);color:#fff}
/* 全屏时隐藏同栏的分隔条与另一栏（fixed 定位已天然覆盖，这里只隐藏交互件） */
body.pane-fs-open .split-divider{opacity:0;pointer-events:none}
/* 窄屏：单列布局下不做分栏交互，保持原有堆叠阅读 */
@media(max-width:860px){
.grid[data-split]{display:grid!important;gap:16px}
.grid[data-split]>.split-pane{flex:none!important;width:auto!important}
/* 页面级分栏（如组织树）保持原有纵向堆叠，只停用拖拽交互 */
[data-split]:not(.grid)>.split-pane{flex:0 0 auto!important;width:auto!important}
.split-divider{display:none}
}
/* 组织树「页面级全屏」时由页面自带布局接管，无需分隔条 */
.oe.fs .split-divider{display:none}
/* ===========================================================================
* 文档流程中心
* ========================================================================= */
.dp-sum{
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
padding:12px;border-radius:var(--r);background:var(--surface-2);
border:1px solid var(--line);margin-bottom:14px;
}
.dp-sum .k{display:block;font-size:0.6875rem;color:var(--ink-4)}
.dp-sum .v{display:block;font-size:0.78125rem;font-weight:600;color:var(--ink);margin-top:2px}
/* 节点卡：当前节点 / 已通过 双视觉区分 */
.dp-node{
border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;
background:var(--surface);transition:border-color var(--t-fast) var(--ease);
}
.dp-node.done{border-left:3px solid var(--green)}
.dp-node.cur{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.dp-node-h{display:flex;align-items:center;gap:8px}
.dp-node-h b{font-size:0.84375rem}
.dp-node-h .sp{flex:1}
.dp-node .tbl{margin-top:2px}
/* ===========================================================================
* 全站 hover 交互体系
* ---------------------------------------------------------------------------
* 统一规范：
* 时长 微交互 --t-fast(.15s) / 连续交互 --t-base(.22s) / 展开 --t(.25s)
* 缓动 --ease（标准）用于颜色/阴影；--ease-out 用于位移（起步快、收尾稳）
* 原则 只改「颜色 / 边框 / 阴影 / 轻微位移 / 圆角」四类属性，
* **不动布局尺寸**（避免 hover 引发布局抖动 / 抖动跳动）
* 降级 @media (hover:none)（触屏）自动关闭位移类 hover，只保留颜色反馈
* ========================================================================= */
/* ---------- 1. 按钮 ---------- */
.btn{
transition:background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.btn:hover:not(:disabled):not([aria-disabled="true"]){transform:translateY(-1px)}
.btn:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(0) scale(.985)}
/* ghost / 次级：底色浮起 + 边框加深 */
.btn.ghost:hover:not(:disabled):not([aria-disabled="true"]),
.btn:not(.primary):not(.danger):hover:not(:disabled):not([aria-disabled="true"]){
background:var(--accent-soft);border-color:var(--accent-soft-2);color:var(--accent-ink);
}
/* 主按钮：加深 + 主色投影 */
.btn.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--sh-hover)}
.btn.primary:active:not(:disabled){background:var(--accent-press);box-shadow:var(--sh-sm)}
/* 危险按钮：红调 */
.btn.danger:hover:not(:disabled),.btn.noperm:hover:not(:disabled){
background:var(--red-soft);border-color:var(--red);color:var(--red-ink);
}
/* 无权限置灰按钮：仅做轻微底色反馈，不给"可点"的错觉 */
.btn.noperm{opacity:.62;cursor:not-allowed}
.btn.noperm:hover{transform:none!important;background:var(--red-soft)!important;border-color:var(--red-soft)!important}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}
/* 文字按钮 / 链接 */
.link,.card-h .link{transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.link:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
a{transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--accent)}
/* ---------- 2. 卡片 ---------- */
.card{
transition:box-shadow var(--t) var(--ease-out),
border-color var(--t) var(--ease-out),
transform var(--t) var(--ease-out);
}
.card:hover{box-shadow:var(--sh-md);border-color:var(--n-300);transform:translateY(-2px)}
/* 整卡可点击时（角色声明）光标与 hover 一致 */
.card[data-clickable]{cursor:pointer}
/* 卡片头：随卡片 hover 轻微加深，强化"整卡可点"的暗示 */
.card-h{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);border-radius:var(--r) var(--r) 0 0}
.card:hover>.card-h{background:var(--accent-soft);color:var(--accent-ink)}
/* KPI 卡：顶部色条加宽 + 轻微抬升 */
.kpi{transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.kpi::after{transition:opacity var(--t) var(--ease)}
.kpi:hover::after{opacity:.85}
/* ---------- 3. 表格行 / 列表项 ---------- */
.tbl tbody tr{transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.tbl tbody tr:hover{background:var(--accent-soft)}
.tbl tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.tbl thead th{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.tbl thead th:hover{background:var(--accent-soft-2);color:var(--accent-ink)}
.dict-type{transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.dict-type:hover{background:var(--accent-soft);border-color:var(--accent-soft-2);transform:translateX(2px)}
.dict-type.on{background:var(--accent-soft);border-color:var(--accent)}
.doc-emp{transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.doc-emp:hover{background:var(--accent-soft);box-shadow:var(--sh-sm)}
/* 流程节点卡（组织架构图） */
.ot-card{transition:box-shadow var(--t) var(--ease-out),border-color var(--t) var(--ease-out),transform var(--t) var(--ease-out)}
.ot-card:hover{border-color:var(--n-300);box-shadow:var(--sh-md);transform:translateY(-2px)}
/* ---------- 4. 导航 ---------- */
.nav-item{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.nav-item:hover{background:var(--nav-hover);color:#fff;transform:translateX(2px)}
.nav-item.on{background:var(--nav-active);color:#fff}
.nav-item.on::before{background:var(--brand-cyan);box-shadow:0 0 8px var(--brand-cyan)}
.nav-item .ic{transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.nav-item:hover .ic{opacity:1;transform:scale(1.08)}
.nav-fold-h{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.nav-fold-h:hover{background:var(--nav-hover);color:#fff}
.nav-fold-h:hover .caret{color:var(--brand-cyan)}
.nav-group{transition:color var(--t-fast) var(--ease)}
.nav:hover .nav-group{color:rgba(255,255,255,.45)}
.nav-foot .nav-mode-btn{transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.nav-foot .nav-mode-btn:hover{background:var(--nav-hover);border-color:var(--brand-cyan);color:#fff}
/* ---------- 5. 顶栏图标按钮 ---------- */
.iconbtn{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.iconbtn:hover{background:var(--accent-soft);color:var(--accent);transform:translateY(-1px)}
.iconbtn:hover .dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.userchip{transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.userchip:hover{background:var(--accent-soft);box-shadow:var(--sh-sm)}
.userchip:hover .avatar{background:var(--accent);color:#fff}
/* 搜索框：hover 落在容器上（内部 input 透明无边框），加深底与边框 */
.search:hover{background:var(--surface);border-color:var(--accent);box-shadow:var(--focus-ring)}
.search:focus-within{background:var(--surface);border-color:var(--accent);box-shadow:var(--focus-ring)}
/* ---------- 6. 表单控件 ---------- */
.inp{transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.inp:hover:not(:disabled):not([readonly]){border-color:var(--accent);background:var(--surface)}
.inp:focus{border-color:var(--accent);box-shadow:var(--focus-ring);background:var(--surface)}
.inp:disabled,.inp[disabled]{background:var(--surface-3);color:var(--ink-3);cursor:not-allowed}
.inp[readonly]{background:var(--surface-2);color:var(--ink-2);cursor:default}
/* 选项卡 */
.seg .btn{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.seg .btn.ghost:hover{background:var(--accent-soft);color:var(--accent-ink)}
/* 文件上传区 */
.drop-zone,.upload-zone{border:1.5px dashed var(--line-3);border-radius:var(--r);
transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.drop-zone:hover,.upload-zone:hover{border-color:var(--accent);background:var(--accent-soft)}
/* ---------- 7. 标签 / 徽标 ---------- */
.tag{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.tag:hover{filter:brightness(.96)}
.tag.navy{background:var(--accent-soft);color:var(--accent-ink)}
.tag.gray{background:var(--surface-3);color:var(--ink-2)}
.tag.green{background:var(--green-soft);color:var(--green-ink)}
.tag.amber{background:var(--amber-soft);color:var(--amber-ink)}
.tag.red{background:var(--red-soft);color:var(--red-ink)}
.tag.blue{background:var(--blue-soft);color:var(--blue-ink)}
/* ---------- 8. 弹窗 ---------- */
.mask{transition:background var(--t) var(--ease),backdrop-filter var(--t) var(--ease)}
.modal-h .x{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.modal-h .mfs{transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.modal-h .mfs:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.modal-h .sp + .x:hover{background:var(--red-soft);color:var(--red-ink)}
/* ---------- 9. 流程编辑器 ---------- */
.fn-del{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.fn-del:hover{background:var(--red);color:#fff;transform:rotate(90deg)}
.fn-badge{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.fn-badge:hover{background:var(--accent);color:#fff}
.fe-node{transition:box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.fe-node:hover{box-shadow:var(--sh-md);border-color:var(--accent)}
.fe-node.selected{box-shadow:0 0 0 3px var(--accent-ring),var(--sh-md);border-color:var(--accent)}
.fe-port{transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.tb-btn{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.tb-btn:hover{background:var(--accent-soft);color:var(--accent-ink)}
.tb-btn.on{background:var(--accent);color:#fff}
/* ---------- 10. 文档中心 / 流程中心 ---------- */
.dp-node{transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease-out),transform var(--t) var(--ease-out)}
.dp-node:hover{border-color:var(--accent);box-shadow:var(--sh-md);transform:translateX(2px)}
.dp-node.done{border-left:3px solid var(--green)}
.dp-node.cur{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
/* ---------- 11. 侧栏折叠分组 / 分栏 ---------- */
.split-divider::before{transition:background var(--t-fast) var(--ease),top var(--t-fast) var(--ease),bottom var(--t-fast) var(--ease)}
.split-pane{transition:flex-basis var(--t-base) var(--ease)}
.sd-fs:hover{background:var(--accent);border-color:var(--accent);color:#fff}
/* ---------- 12. 勾选 / 开关 / 单选 ---------- */
input[type=checkbox],input[type=radio]{transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--accent)}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--accent);border-color:var(--accent)}
/* ---------- 13. 触屏降级：关闭位移，避免"点完就跳" ---------- */
@media (hover:none){
.btn:hover:not(:disabled),.card:hover,.kpi:hover,.ot-card:hover,
.nav-item:hover,.iconbtn:hover,.dict-type:hover,.dp-node:hover,.fe-node:hover{transform:none}
.card:hover,.kpi:hover{box-shadow:var(--sh-sm)}
.tbl tbody tr:hover{background:transparent}
}
/* ---------- 14. 降低动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
*{transition-duration:.01ms!important;animation-duration:.01ms!important}
.btn:hover,.card:hover,.kpi:hover{transform:none}
}
/* ===========================================================================
* 钉钉表单模式 —— 组件样式
* ========================================================================= */
/* ---------- 头部：说明 + 审批链路 + 草稿标记 ---------- */
.fm-head{position:relative;padding:0 0 12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.fm-desc{font-size:0.78125rem;color:var(--ink-3);line-height:1.65}
.fm-progress{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.fm-progress .lb{font-size:0.6875rem;color:var(--ink-4);flex:0 0 auto}
.fm-progress .chain{
font-size:0.75rem;color:var(--accent-ink);background:var(--accent-soft);
border:1px solid var(--accent-soft-2);border-radius:var(--r-full);
padding:3px 11px;line-height:1.5;
}
.fm-draft-chip{
position:absolute;top:0;right:0;font-size:0.6875rem;color:var(--amber-ink);
background:var(--amber-soft);border:1px solid var(--amber-soft);
border-radius:var(--r-full);padding:2px 10px;cursor:pointer;
}
.fm-draft-chip:hover{background:var(--amber);color:#fff;border-color:var(--amber)}
/* ---------- 骨架屏（加载中状态） ---------- */
.fm-skeleton{display:flex;flex-direction:column;gap:14px}
.fm-skeleton .sk{
height:36px;border-radius:var(--r-sm);
background:linear-gradient(90deg,var(--surface-3) 25%,var(--n-50) 37%,var(--surface-3) 63%);
background-size:400% 100%;animation:skShimmer 1.3s var(--ease) infinite;
}
.fm-skeleton .sk:nth-child(even){width:72%}
@keyframes skShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
/* ---------- 错误条 + 提交中 ---------- */
.fm-errorbar{
margin:12px 0 0;padding:9px 12px;border-radius:var(--r-sm);font-size:0.78125rem;
background:var(--red-soft);border:1px solid var(--red);color:var(--red-ink);
}
.fm-busy{position:relative;pointer-events:none;opacity:.72}
.fm-busy::after{
content:'';position:absolute;inset:0;background:rgba(255,255,255,.28);border-radius:var(--r);
}
.spin{
display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:6px;
border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---------- 字段级错误 ---------- */
.field-err{display:none;font-size:0.71875rem;color:var(--red-ink);margin-top:5px;line-height:1.5}
.field.invalid .field-err{display:block}
.field.invalid .inp{border-color:var(--red);background:var(--red-soft)}
.field.invalid .inp:focus{box-shadow:0 0 0 3px rgba(198,40,40,.18)}
.field.hidden{display:none!important}
.field label .req{color:var(--red);font-weight:700}
/* ---------- 分组 / 说明 ---------- */
.form-divider{
display:flex;align-items:center;gap:10px;margin:6px 0 14px;
font-size:0.75rem;color:var(--ink-3);font-weight:600;
}
.form-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.form-desc{
font-size:0.75rem;color:var(--ink-3);line-height:1.7;background:var(--surface-2);
border-left:3px solid var(--accent-soft-2);border-radius:0 var(--r-sm) var(--r-sm) 0;
padding:9px 12px;margin-bottom:14px;
}
/* ---------- 单选 / 多选 / 开关 ---------- */
.rg,.cb-wrap{display:flex;flex-wrap:wrap;gap:8px 18px;padding:3px 0}
.rg-i,.cb-i{display:inline-flex;align-items:center;gap:6px;font-size:0.78125rem;cursor:pointer;color:var(--ink-2)}
.rg-i:hover,.cb-i:hover{color:var(--accent-ink)}
.rg-i input,.cb-i input{accent-color:var(--accent);cursor:pointer}
.sw{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:0.78125rem;color:var(--ink-2)}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw-t{
position:relative;width:40px;height:22px;border-radius:var(--r-full);
background:var(--surface-3);border:1px solid var(--line-3);
transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.sw-t::after{
content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
background:var(--surface);box-shadow:var(--sh-sm);
transition:transform var(--t-fast) var(--ease-out);
}
.sw input:checked + .sw-t{background:var(--accent);border-color:var(--accent)}
.sw input:checked + .sw-t::after{transform:translateX(18px)}
.sw input:focus-visible + .sw-t{box-shadow:var(--focus-ring)}
.sw-l{color:var(--ink-3);font-size:0.71875rem}
.ms-wrap select[multiple]{height:auto;min-height:88px}
/* ---------- 员工选择控件（emp） ---------- */
.emp{position:relative;display:flex;flex-direction:column;gap:7px}
.emp-picked{
display:flex;align-items:center;gap:10px;padding:8px 10px;
border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
}
.emp-picked[hidden]{display:none}
.emp-av{
width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(135deg,var(--accent),var(--emphasis));
color:#fff;font-size:0.75rem;font-weight:600;
}
.emp-av.sm{width:24px;height:24px;flex:0 0 24px;font-size:0.6875rem}
.emp-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.emp-info b{font-size:0.8125rem;font-weight:600;display:flex;align-items:center;gap:5px}
.emp-info i{font-style:normal;font-size:0.65625rem;color:var(--ink-3);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-clear{
width:24px;height:24px;flex:0 0 24px;border-radius:var(--r-full);border:0;cursor:pointer;
background:transparent;color:var(--ink-4);font-size:0.8125rem;line-height:1;
transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.emp-clear:hover{background:var(--red-soft);color:var(--red)}
.emp-btn{
display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
height:30px;padding:0 12px;border-radius:var(--r-sm);cursor:pointer;
border:1px dashed var(--line-3);background:transparent;color:var(--ink-2);font-size:0.78125rem;
transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.emp-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.emp-btn svg{flex:0 0 15px}
.emp-warn{
font-size:0.65625rem;color:var(--amber-ink);background:var(--amber-soft);
border:1px solid rgba(250,180,60,.35);border-radius:var(--r-xs);padding:6px 9px;line-height:1.6;
}
/* 面板：position:fixed 由 JS 定位，父级 overflow 裁不到 */
.emp-panel{
display:none;position:fixed;z-index:1200;border-radius:var(--r-sm);
border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-lg);
}
.emp-panel.open{display:block}
.emp-panel-in{padding:9px;display:flex;flex-direction:column;gap:8px}
.emp-list{max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.emp-row{
display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-xs);cursor:pointer;
transition:background var(--t-fast) var(--ease);
}
.emp-row:hover{background:var(--surface-3)}
.emp-row.on{background:var(--accent-soft)}
.emp-ok{font-size:0.625rem;color:var(--accent-ink);font-weight:600;flex:0 0 auto}
.emp-flt{display:flex;align-items:center;gap:9px}
.emp-flt select{flex:1;min-width:0}
.emp-ck{display:inline-flex;align-items:center;gap:5px;font-size:0.71875rem;color:var(--ink-3);white-space:nowrap;cursor:pointer}
.emp-ck input{accent-color:var(--accent);cursor:pointer}
.emp-empty{padding:14px;font-size:0.75rem;color:var(--ink-4);text-align:center}
/* ---------- 自定义多选下拉（multiselect） ---------- */
.ms{position:relative}
.ms-toggle{
width:100%;min-height:34px;display:flex;align-items:center;gap:8px;
padding:5px 34px 5px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
background:var(--surface);color:var(--ink);font-size:0.8125rem;text-align:left;cursor:pointer;
position:relative;font-family:inherit;
transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.ms-toggle:hover{border-color:var(--line-3)}
.ms-toggle:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.ms-toggle[aria-expanded="true"]{border-color:var(--accent);box-shadow:var(--focus-ring)}
.ms-toggle:disabled{opacity:.55;cursor:not-allowed}
.ms-val{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ms-val.is-ph{color:var(--ink-4)}
.ms-chip{
font-style:normal;font-size:0.71875rem;line-height:1.5;padding:1px 8px;border-radius:var(--r-full);
background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent-soft-2);
max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 箭头：常显、颜色有对比、不拦截点击（点击落到按钮上＝点箭头同样生效） */
.ms-arrow{
position:absolute;right:10px;top:50%;transform:translateY(-50%);
color:var(--ink-3);pointer-events:none;flex:0 0 auto;
transition:transform var(--t-base) var(--ease),color var(--t-fast) var(--ease);
}
.ms-toggle:hover .ms-arrow{color:var(--accent-ink)}
.ms-toggle[aria-expanded="true"] .ms-arrow{color:var(--accent-ink);transform:translateY(-50%) rotate(180deg)}
/* 面板：position:fixed 由 JS 定位，父级 overflow 隐藏也裁不到 */
.ms-panel{
display:none;position:fixed;z-index:1200;max-height:260px;overflow-y:auto;
padding:5px;border-radius:var(--r-sm);border:1px solid var(--line);
background:var(--surface);box-shadow:var(--sh-lg);
}
.ms-panel.open{display:block}
.ms-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r-xs);
cursor:pointer;font-size:0.78125rem;color:var(--ink-2)}
.ms-opt:hover{background:var(--surface-3);color:var(--ink)}
.ms-opt input{accent-color:var(--accent);cursor:pointer}
.ms-empty{padding:12px;font-size:0.75rem;color:var(--ink-4);text-align:center}
/* 取值载体：视觉隐藏但保留在表单中，readForm 仍按 SELECT[multiple] 取值 */
.ms-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;opacity:0;pointer-events:none}
/* ---------- 附件组件 ---------- */
.attach-field{display:flex;flex-direction:column;gap:9px}
.attach-zone{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
padding:20px 14px;border-radius:var(--r);cursor:pointer;text-align:center;
color:var(--ink-3);font-size:0.78125rem;background:var(--surface-2);
}
.attach-zone svg{color:var(--accent)}
.attach-zone .sub{font-size:0.6875rem;color:var(--ink-4)}
.attach-zone.dragging{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.attach-list{display:flex;flex-direction:column;gap:6px}
.attach-item{
display:flex;align-items:center;gap:9px;padding:8px 11px;
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.attach-item:hover{border-color:var(--accent-soft-2);background:var(--accent-soft)}
.ai-ic{font-size:0.9375rem;flex:0 0 auto}
.ai-name{flex:1;font-size:0.78125rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-size{font-size:0.6875rem;color:var(--ink-4);flex:0 0 auto}
.ai-act{display:flex;gap:8px;flex:0 0 auto;font-size:0.71875rem}
.ai-act .link{background:none;border:0;cursor:pointer;padding:0;font-size:0.71875rem}
.ai-act .link.danger{color:var(--red)}
/* ---------- 审批人选择器 ---------- */
.approver-field{display:flex;flex-direction:column;gap:8px}
.apf-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.apf-pick{flex:1;min-width:130px}
.apf-ph{font-size:0.75rem;color:var(--ink-4)}
.apf-list{display:flex;gap:7px;flex-wrap:wrap;min-height:24px;align-items:center}
.apf-empty{font-size:0.71875rem;color:var(--ink-4)}
.apf-chip{display:inline-flex;align-items:center;gap:5px}
.apf-x{background:none;border:0;cursor:pointer;padding:0 0 0 2px;font-size:0.625rem;color:var(--ink-3)}
.apf-chip:hover .apf-x{color:var(--red)}
.apf-modal{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:2px}
.apf-opt{
display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);
cursor:pointer;font-size:0.78125rem;transition:background var(--t-fast) var(--ease);
}
.apf-opt:hover{background:var(--accent-soft)}
.apf-opt.on{background:var(--accent-soft);color:var(--accent-ink)}
.apf-opt .sub{font-size:0.6875rem;color:var(--ink-4);margin-left:auto}
/* ---------- 移动端 ---------- */
@media(max-width:760px){
.fm-body .form-grid{grid-template-columns:1fr!important}
.fm-body .inp,.fm-body select,.fm-body textarea{height:40px;font-size:0.8125rem}
.fm-body textarea{height:auto}
.fm-body .field{margin-bottom:18px}
.fm-body .field label{font-size:0.8125rem;margin-bottom:8px}
.fm-head{padding-bottom:14px}
.fm-progress .chain{font-size:0.71875rem;padding:3px 9px}
.mask:has(.fm-body) .modal{width:100%!important;max-height:94vh}
.mask:has(.fm-body) .modal-f{position:sticky;bottom:0;background:var(--surface);
box-shadow:0 -4px 16px rgba(15,42,54,.08);padding-bottom:max(12px,env(safe-area-inset-bottom))}
.mask:has(.fm-body) .modal-f .btn{flex:1;height:40px}
.field-err{font-size:0.75rem}
.attach-zone{padding:16px 10px}
}
@media(max-width:480px){
.rg,.cb-wrap{flex-direction:column;gap:8px}
.apf-row{flex-direction:column;align-items:stretch}
}
/* ===========================================================================
* 组织架构与岗位体系 · 编辑区（钉钉范式：左树 + 右岗位）
* ========================================================================= */
.oe{
display:flex;flex-direction:column;height:calc(100vh - var(--top-h) - 132px);
min-height:520px;border:1px solid var(--line);border-radius:var(--r-lg);
background:var(--surface);
/* overflow:auto 而非 hidden：容器是定高的，下方「公司档案」「行政事务业务范围」
等区块在小屏下会超出；改为 auto 后整体可滚动兜底，任何视口都不会再裁掉内容。
.oe-body / .oe-comp 各自有内部滚动，不受此影响。 */
overflow-y:auto;overflow-x:hidden;
box-shadow:var(--sh-sm);
}
/* ---------- 顶部工具条 ---------- */
.oe-bar{
display:flex;align-items:center;gap:12px;padding:10px 16px;flex:0 0 auto;
background:var(--grad-soft);border-bottom:1px solid var(--line);
}
.oe-bar-l{display:flex;align-items:center;gap:10px;min-width:0}
.oe-logo{
display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);
background:var(--grad-brand);color:#fff;font-size:0.6875rem;font-weight:700;letter-spacing:.4px;
}
.oe-bar-l b{font-size:0.90625rem;white-space:nowrap}
.oe-bar-sub{font-size:0.71875rem;color:var(--ink-3);white-space:nowrap}
.oe-bar-r{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.oe-bar-r .btn:disabled{opacity:.42;cursor:not-allowed}
/* ---------- 主体两栏 ---------- */
/* 部门树 | 岗位明细：与公司区共享 .oe 的剩余高度。
flex 基准给 2、公司区给 1，保证两者按 2:1 分配，不会再把 .oe-body 压成 0。 */
.oe-body{display:flex;flex:2 1 0;min-height:220px}
.oe-left{
flex:0 0 340px;min-width:280px;display:flex;flex-direction:column;
border-right:1px solid var(--line);background:var(--surface-2);
}
.oe-left-h{
display:flex;align-items:baseline;gap:8px;padding:10px 14px;flex:0 0 auto;
font-size:0.78125rem;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line);
}
.oe-left-h .sub{font-size:0.65625rem;color:var(--ink-3);font-weight:400}
.oe-tree{flex:1 1 auto;overflow:auto;padding:8px 8px 20px}
/* 组织架构 · 公司（法人主体）层：合并行政事务中心后的层级根 */
.oe-row-co{
background:linear-gradient(90deg,var(--accent-soft),transparent 70%);
border:1px solid var(--line);border-radius:var(--r-sm);
padding:6px 8px;margin-bottom:6px;
}
.oe-row-co .oe-name b{font-size:0.8125rem}
.oe-row-co .oe-ic.co{color:var(--accent)}
.oe-node.oe-co > .oe-children{padding-left:2px}
/* 跨法人主体归属标注（父部门与本部门不在同一公司时出现） */
.oe-co-x{
flex:0 0 auto;font-size:0.5625rem;line-height:1.6;padding:0 6px;border-radius:var(--r-full);
background:var(--amber-soft);color:var(--amber-ink);border:1px solid rgba(251,191,36,.4);
white-space:nowrap;cursor:help;
}
.oe-right{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow:auto;padding:14px 16px}
/* ---------- 部门树节点 ---------- */
.oe-node{border-radius:var(--r-sm)}
.oe-node.sel>.oe-row{
background:var(--accent-soft);border-color:var(--accent);
box-shadow:inset 3px 0 0 var(--accent);
}
.oe-row{
display:flex;align-items:center;gap:6px;padding:6px 8px;margin-bottom:2px;
border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;
background:var(--surface);transition:background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.oe-row:hover{background:var(--accent-soft);border-color:var(--accent-soft-2)}
.oe-row.dragging{opacity:.42;cursor:grabbing}
.oe-fold{
flex:0 0 16px;width:16px;height:16px;border:0;background:none;padding:0;cursor:pointer;
color:var(--ink-3);font-size:0.625rem;display:grid;place-items:center;border-radius:4px;
transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.oe-fold:hover{color:var(--accent);background:var(--accent-soft)}
.oe-ic{flex:0 0 auto;font-size:0.6875rem;color:var(--tier-2)}
.oe-ic[data-tier="0"]{color:var(--tier-1)}
.oe-ic[data-tier="1"]{color:var(--tier-2)}
.oe-ic[data-tier="2"]{color:var(--tier-3)}
.oe-ic[data-tier="3"]{color:var(--tier-4)}
.oe-name{flex:1 1 auto;font-size:0.78125rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oe-code{flex:0 0 auto;font-size:0.625rem;color:var(--ink-3)}
.oe-stat{flex:0 0 auto;font-size:0.65625rem;color:var(--ink-3);min-width:34px;text-align:right}
.oe-stat i{font-style:normal;color:var(--ink-3)}
.oe-stat.pos{min-width:20px}
.oe-row-ops{display:flex;gap:5px;padding:3px 8px 7px;flex-wrap:wrap}
/* 防误触：默认小字浅色弱化，悬停到按钮上才清晰显现（功能与位置不变） */
.oe-row-ops .btn{
min-width:66px;justify-content:center;
font-size:0.625rem;color:var(--ink-4);opacity:.72;
border-color:transparent;background:transparent;
transition:font-size var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
opacity var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.oe-row-ops .btn:hover{
font-size:0.71875rem;color:var(--ink-2);opacity:1;
background:var(--surface-3);border-color:var(--line);box-shadow:var(--sh-xs);
}
.oe-row-ops .btn.danger:hover{color:var(--red);border-color:var(--red-soft);background:var(--surface-3)}
.oe-row-ops .btn:focus-visible{opacity:1;color:var(--ink-2)}
.oe-children{margin-left:15px;padding-left:9px;border-left:1px dashed var(--line-3)}
/* ---------- 落点高亮（拖拽反馈） ---------- */
.oe-row.drop-before{box-shadow:inset 0 3px 0 0 var(--accent)}
.oe-row.drop-after{box-shadow:inset 0 -3px 0 0 var(--accent)}
.oe-row.drop-into{background:var(--accent-soft-2);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-ring)}
.oe-row.drop-illegal{
background:var(--red-soft);border-color:var(--red);cursor:not-allowed;
box-shadow:0 0 0 2px rgba(198,40,40,.16);
}
.oe-row.drop-illegal::after{
content:'✕';position:absolute;right:8px;top:50%;transform:translateY(-50%);
color:var(--red);font-size:0.6875rem;font-weight:700;
}
.oe-row{position:relative}
/* ---------- 右侧：部门摘要 ---------- */
.oe-side-h{display:flex;align-items:flex-start;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.oe-side-t h3{display:flex;align-items:baseline;gap:8px;font-size:1rem;margin:0 0 6px}
.oe-side-t h3 .mono{font-size:0.6875rem;color:var(--ink-3)}
.oe-side-m{display:flex;gap:16px;flex-wrap:wrap;font-size:0.71875rem;color:var(--ink-3)}
.oe-side-m b{color:var(--ink);font-size:0.78125rem;margin-left:3px}
.oe-ro{font-size:0.71875rem;color:var(--ink-3)}
.oe-pos-hd{
display:flex;align-items:baseline;gap:10px;margin-bottom:8px;
font-size:0.75rem;font-weight:600;color:var(--ink-2);
}
.oe-tip{font-size:0.65625rem;color:var(--ink-3);font-weight:400;margin-left:auto}
/* ---------- 公司（法人主体）卡片区 ----------
.oe 是 height:calc(100vh-…) + overflow:hidden 的定高容器，公司卡片直接放在
里面会把第二行裁掉且无法查看。这里给一个**独立滚动容器**：默认限高滚动，
加 .expanded 后取消限高，让整页自然延展（配合「展开全部公司」按钮）。 */
/* .oe 是 flex + overflow:hidden 的定高容器：内部 .oe-body（部门树|岗位明细）会
吃掉剩余高度，而公司卡片区作为兄弟节点必须**自适应剩余空间**，否则要么被压扁、
要么把下方内容顶出 .oe 被裁掉（实测 .oe-body 被压到 0px）。
用 flex:1 1 auto + min-height 让它既占满剩余、又有最小可用高度；
内容超出时自身滚动。展开模式（.expanded）则完全交回页面自然延展。 */
.co-sec-h{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.co-sec-h .sp{flex:1}
/* 组织架构页：.oe（定高工作区）之外的次要参考区块容器，随页面自然滚动 */
.oe-below{margin-top:16px}
/* 公司（法人主体）：紧凑单行表格（取代原多字段小卡片）。
已移出 .oe，不再与岗位信息争抢固定高度；默认展开，可收起为仅标题行。 */
.oe-comp{display:none}
.oe-comp.expanded{
display:block;max-height:min(52vh,460px);overflow-y:auto;overflow-x:auto;
border:1px solid var(--line);border-radius:var(--r);
background:var(--surface-2);scrollbar-width:thin;
}
.oe-co-tbl{width:100%;border-collapse:collapse;font-size:0.78125rem}
.oe-co-tbl th{
position:sticky;top:0;z-index:1;text-align:left;white-space:nowrap;
font-weight:600;font-size:0.6875rem;color:var(--ink-3);
padding:7px 12px;background:var(--surface);border-bottom:1px solid var(--line);
}
.oe-co-tbl td{padding:6px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.oe-co-tbl tbody tr:last-child td{border-bottom:0}
.oe-co-tbl tbody tr:hover{background:var(--accent-soft)}
.oe-co-tbl .co-nm,.oe-co-tbl .co-op,.oe-co-tbl td.mono{white-space:nowrap}
.oe-co-tbl .co-nm{min-width:150px}
.oe-co-tbl .co-nm b{font-weight:600}
.oe-co-tbl .co-legal{max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oe-co-tbl .co-depts{max-width:320px}
.oe-co-tbl .co-op{text-align:right}
.co-dep-link{
border:0;background:transparent;font:inherit;font-size:0.6875rem;color:var(--accent-ink);
cursor:pointer;padding:1px 5px;border-radius:var(--r-sm);margin:0 2px 2px 0;
}
.co-dep-link:hover{background:var(--accent-soft);text-decoration:underline}
/* 保留 .co-card 样式：pages-group.js（财务报表中心）仍在使用 */
.co-card .card-h{align-items:center}
.co-card .co-edit{flex:0 0 auto;margin-left:6px}
.co-card .card-h .tag.green{flex:0 0 auto}
/* ---------- 岗位行 ---------- */
.oe-pos-list{display:flex;flex-direction:column;gap:6px}
.oe-pos{
display:grid;grid-template-columns:minmax(150px,1.5fr) minmax(128px,.95fr) minmax(120px,1fr) minmax(118px,1fr) auto;
gap:12px 14px;align-items:center;padding:12px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.oe-pos:hover{border-color:var(--accent-soft-2);box-shadow:var(--sh-sm)}
.oe-pos.editing{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.oe-pos-l{min-width:0}
.oe-pos-nm{font-size:0.78125rem;font-weight:600}
.oe-pos-sub{display:flex;gap:6px;align-items:center;margin-top:3px;font-size:0.625rem;color:var(--ink-3)}
.oe-pos-f{display:flex;flex-direction:column;gap:3px;min-width:0}
.oe-pos-f label{font-size:0.65625rem;color:var(--ink-3);white-space:nowrap}
.oe-pos-f>span{font-size:0.75rem;color:var(--ink-2)}
.oe-pos-act{display:flex;gap:5px;flex:0 0 auto}
/* 汇报关系：独占整行，跨部门选上级，避免挤在窄列里看不全 */
.oe-pos-rpt{
grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:8px 10px;border-radius:var(--r-sm);
background:var(--surface-2);border:1px solid var(--line-2);
}
.oe-pos-rpt>label{font-size:0.65625rem;color:var(--ink-3);white-space:nowrap;flex:0 0 auto;font-weight:500}
.oe-pos-rpt select.oe-inp{flex:1 1 200px;min-width:150px;max-width:360px}
.oe-pos-rpt-val{font-size:0.75rem;color:var(--ink-2)}
.oe-pos-rpt-val.is-ph{color:var(--ink-3)}
.oe-pos-rpt-tip{font-size:0.625rem;color:var(--ink-3);line-height:1.5;min-width:0}
.oe-inp{
width:100%;height:30px;padding:0 9px;font-size:0.78125rem;
border:1px solid var(--line-3);border-radius:var(--r-xs);
background:var(--surface);color:var(--ink);
transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.oe-inp:hover{border-color:var(--accent)}
.oe-inp:focus{outline:0;border-color:var(--accent);box-shadow:var(--focus-ring)}
.oe-inp.nm{font-weight:600}
.oe-inp.sm{height:28px;font-size:0.75rem}
.oe-rate{display:flex;align-items:center;gap:7px}
.oe-num{font-size:0.75rem;color:var(--ink-2);white-space:nowrap}
.oe-num b{font-size:0.8125rem;color:var(--ink)}
.oe-num b.over{color:var(--red)}
.oe-bar-track,.oe-rate .oe-bar{flex:1;min-width:38px;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.oe-rate .oe-bar i{display:block;height:100%;border-radius:3px;transition:width var(--t) var(--ease-out)}
/* ---------- 岗位详情编辑 ---------- */
.oe-pd{
margin-top:14px;border:1px solid var(--accent-soft-2);border-radius:var(--r);
background:var(--accent-soft);overflow:hidden;
}
/* 就地编辑：编辑区作为岗位节点的子区域展开（紧邻该岗位、体现从属关系） */
.oe-pos-inline{grid-column:1/-1;margin-top:2px}
.oe-pos-inline .oe-pd{margin-top:0;overflow:visible;border-radius:var(--r-sm)}
.oe-pos-inline .oe-pd-h{border-radius:var(--r-sm) var(--r-sm) 0 0}
.oe-pd-h{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--accent-soft-2)}
.oe-pd-h b{font-size:0.78125rem;color:var(--accent-ink)}
.oe-pd-h .sub{font-size:0.6875rem;color:var(--ink-3)}
.oe-pd-b{
display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:12px;padding:14px;background:var(--surface);
}
.oe-pd-f{display:flex;flex-direction:column;gap:5px}
.oe-pd-f label{font-size:0.71875rem;color:var(--ink-3);font-weight:500}
.oe-pd-f .req{color:var(--red)}
/* ---------- 空态 ---------- */
.oe-empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:6px;padding:56px 20px;text-align:center;color:var(--ink-3);font-size:0.78125rem;
}
.oe-empty .big{font-size:2.125rem;color:var(--n-300);line-height:1}
.oe-empty .sub{font-size:0.71875rem;color:var(--ink-3)}
.oe-empty.sm{padding:28px 16px}
/* ---------- 全屏模式 ---------- */
body.oe-fullscreen{overflow:hidden}
.oe.fs{
position:fixed;inset:0;z-index:90;height:100vh;max-height:100vh;
border-radius:0;border:0;box-shadow:none;
}
.oe.fs .oe-left{flex:0 0 clamp(300px,26vw,460px)}
.oe.fs .oe-bar{padding:12px 20px}
.oe.fs .oe-row{padding:8px 10px}
/* ---------- 移动端：两栏堆叠 ---------- */
@media(max-width:900px){
.oe{height:auto;min-height:0}
.oe.fs{position:static;height:auto;inset:auto}
.oe-body{flex-direction:column}
.oe-left{flex:0 0 auto;max-height:42vh;border-right:0;border-bottom:1px solid var(--line)}
.oe-right{overflow:visible;padding:12px}
.oe-bar{flex-wrap:wrap;gap:8px}
.oe-bar-r{width:100%;justify-content:flex-start}
.oe-pos{grid-template-columns:1fr 1fr;gap:10px}
.oe-pos-l{grid-column:1/-1}
.oe-pos-act{grid-column:1/-1;justify-content:flex-end}
}
@media(max-width:560px){
.oe-pos{grid-template-columns:1fr}
.oe-pd-b{grid-template-columns:1fr}
}
/* ---------- 阶段一：职级 / 族群 / 职务 / 部门编码与职责 ---------- */
.oe-side-m .mono{font-size:0.71875rem;color:var(--ink-2)}
.oe-side-duty{
margin-top:7px;font-size:0.75rem;color:var(--ink-3);line-height:1.6;
padding-left:9px;border-left:2px solid var(--accent-soft-2);
}
.oe-lv{
display:inline-block;font-size:0.71875rem;color:var(--accent-ink);
background:var(--accent-soft);border:1px solid var(--accent-soft-2);
border-radius:var(--r-full);padding:2px 9px;line-height:1.5;
max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.oe-fam{font-size:0.71875rem;color:var(--ink-2)}
.oe-dut{
display:inline-block;font-style:normal;margin-left:5px;font-size:0.65625rem;
color:var(--tier-4-ink,var(--emphasis-ink));background:var(--emphasis-soft);
border-radius:var(--r-full);padding:1px 7px;
}
/* ---------- 阶段二：编制管控 ---------- */
.oe-hc-num{width:74px}
.oe-hc-bar{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden;position:relative}
.oe-hc-bar>i{display:block;height:100%;background:var(--accent);transition:width var(--t) var(--ease-out)}
.oe-hc-bar.over>i{background:var(--red)}
.oe-hc-mark{
display:inline-flex;align-items:center;gap:4px;font-size:0.6875rem;
color:var(--red-ink);background:var(--red-soft);
border-radius:var(--r-full);padding:1px 8px;
}
/* ---------- 阶段三：组织架构图（只读）+ 搜索结果 ---------- */
.oc-tree{max-height:58vh;overflow:auto;padding:4px 2px}
.oc-node{position:relative}
.oc-card{
display:flex;align-items:center;gap:10px;padding:9px 12px;margin:4px 0;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
cursor:pointer;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.oc-card:hover{border-color:var(--accent-soft-2);box-shadow:var(--sh-sm)}
.oc-card.open{border-color:var(--accent);background:var(--accent-soft)}
.oc-av{
flex:0 0 28px;width:28px;height:28px;border-radius:var(--r-full);display:grid;place-items:center;
background:var(--grad-brand);color:#fff;font-size:0.75rem;font-weight:600;
}
.oc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.oc-info b{font-size:0.78125rem}
.oc-sub{font-size:0.65625rem;color:var(--ink-3);display:flex;gap:7px;flex-wrap:wrap}
.oc-cnt{font-size:0.625rem;color:var(--accent)}
.oc-kids{margin-left:22px;padding-left:12px;border-left:1px dashed var(--line-3)}
.oc-more{margin:2px 0 6px 34px;font-size:0.65625rem;color:var(--ink-4)}
.oc-flat{display:flex;flex-direction:column;gap:5px;max-height:46vh;overflow:auto}
.oc-flat-row{
display:flex;align-items:center;gap:9px;padding:8px 11px;
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);font-size:0.78125rem;
}
.oc-flat-row b{min-width:88px}
.oc-card.leaf{cursor:default}
.oc-card.dept .oc-av.co{
background:linear-gradient(135deg,#2563eb,#3b82f6);border-radius:var(--r-sm);
}
.oc-card.hit{
border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
animation:oc-hit 1.8s var(--ease);
}
@keyframes oc-hit{
0%,60%{background:var(--accent-soft)}
100%{background:var(--surface)}
}
.oc-more .btn{pointer-events:auto}
/* ---------- 组织主数据：职级体系 / 职务 / 族群 / 变更历史 ---------- */
.seg-bar{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.lv-tree{display:flex;flex-direction:column;gap:2px}
.lv-row{
display:flex;align-items:center;gap:10px;padding:9px 12px;
margin-left:calc((var(--lv-d) - 1) * 22px);
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.lv-row:hover{border-color:var(--accent-soft-2);box-shadow:var(--sh-sm)}
.lv-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--tier-1)}
.lv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lv-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:0.8125rem}
.lv-name b{font-size:0.84375rem}
.lv-name .mono{font-size:0.625rem;color:var(--ink-4)}
.lv-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:0.6875rem;color:var(--ink-3)}
.lv-meta b{color:var(--ink);font-size:0.75rem;margin-left:3px}
.lv-ops{display:flex;gap:5px;flex:0 0 auto}
.lv-kids{margin-left:15px;padding-left:9px;border-left:1px dashed var(--line-3)}
.lv-tree.collapsed .lv-kids{display:none}
.fam-card{
border:1px solid var(--line);border-radius:var(--r);padding:13px;background:var(--surface);
display:flex;flex-direction:column;gap:8px;
transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.fam-card:hover{border-color:var(--accent-soft-2);box-shadow:var(--sh-sm)}
.fam-h{display:flex;align-items:baseline;gap:7px}
.fam-h b{font-size:0.84375rem}
.fam-h .mono{font-size:0.625rem;color:var(--ink-4)}
.fam-s{display:flex;gap:12px;font-size:0.71875rem;color:var(--ink-3)}
.fam-p{display:flex;gap:5px;flex-wrap:wrap;min-height:22px}
/* ---------- 汇报关系（上级链 / 下属） ---------- */
.de-k{font-size:0.6875rem;color:var(--ink-4);margin-bottom:6px}
.rep-chain{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.rep-node{
display:inline-flex;flex-direction:column;gap:1px;padding:5px 10px;
background:var(--accent-soft);border:1px solid var(--accent-soft-2);
border-radius:var(--r-sm);font-size:0.75rem;transition:border-color var(--t-fast) var(--ease);
}
.rep-node:hover{border-color:var(--accent)}
.rep-node i{font-style:normal;font-size:0.625rem;color:var(--ink-4)}
.rep-arrow{font-size:0.625rem;color:var(--accent)}
/* 直属上级标记：让审批链一眼看出「最后一级是谁」 */
.rep-lv{
font-size:0.5625rem;font-weight:600;line-height:1.5;padding:0 5px;margin-left:5px;
border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent-ink);
border:1px solid var(--accent-soft-2);
}
/* ===========================================================================
* 侧栏浅色化适配层
* ---------------------------------------------------------------------------
* 旧版侧栏是深色（#0C2E3B），文字为硬编码 rgba(255,255,255,x)，
* 是全站唯一的暗块，与浅色体系割裂。这里统一改为浅色：
* 底色 → --nav（白）· 分组 → --nav-2 · 文字 → --ink/--ink-2（AA）
* 选中 → 主色浅底 + 左侧主色条（替代原发光条）
* ========================================================================= */
.nav{background:var(--nav)}
.nav::-webkit-scrollbar-thumb{background:var(--line-3);background-clip:content-box;border:3px solid transparent}
.nav::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}
.nav-group{color:var(--ink-3);padding:16px 12px 6px} /* 4.5:1 */
.nav-item{color:var(--ink-2);font-size:0.8125rem} /* 7.45:1 */
.nav-item:hover{background:var(--nav-hover);color:var(--ink);transform:translateX(2px)}
.nav-item.on{background:var(--nav-active);color:var(--accent-ink);font-weight:600}
.nav-item.on::before{background:var(--nav-active-bar);box-shadow:none}
.nav-item .ic{color:var(--ink-3)}
.nav-item:hover .ic{color:var(--accent);opacity:1}
.nav-item.on .ic{color:var(--accent);opacity:1}
.nav:hover .nav-group{color:var(--ink-3)}
.nav-fold-h{color:var(--ink-2)}
.nav-fold-h:hover{background:var(--nav-hover);color:var(--accent-ink)}
.nav-fold-h:hover .caret{color:var(--accent)}
.nav-foot{background:var(--nav-2);border-top:1px solid var(--line)}
.nav-foot .nav-mode-btn{color:var(--ink-3);border-color:var(--line-3);background:var(--surface)}
/* 补齐遗漏：深色侧栏残留的白字 / 半透明白底（浅色下不可见）。
统一改用主题令牌 —— 浅色与暗色两种主题均可读。 */
.mode-line{color:var(--ink-3)}
.nav-sub{color:var(--ink-3)}
.nav .tag.mini{background:var(--surface-3);color:var(--ink-2)}
.nav-q{background:var(--surface-3);color:var(--accent-ink)}
.nav-q:hover{background:var(--accent);color:#fff}
.nav-foot .nav-mode-btn:hover{background:var(--nav-hover);border-color:var(--accent);color:var(--accent-ink)}
.nav-sep{background:var(--nav-sep)}
.nav-foot .nav-mode-btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
/* 侧栏内嵌搜索框 */
.nav .search{background:var(--surface-3);border-color:transparent}
.nav .search:hover{background:var(--surface-3);border-color:var(--accent)}
.nav .search input{color:var(--ink)}
.nav .search input::placeholder{color:var(--ink-4)}
.nav .search .ic{color:var(--ink-4)}
/* 侧栏分组标题（小字，字重已足够，用 ink-3 达 AA） */
.nav .logo,.nav .brand b{color:var(--ink)}
.nav .brand .sub{color:var(--ink-3)}
/* ===========================================================================
* 移动端体验优化
* ---------------------------------------------------------------------------
* 目标：单手可达 · 触控不误触 · 竖屏不拥挤 · 横屏不浪费
* ① 触控目标统一 ≥44px（iOS HIG / WCAG 2.5.5 AA）
* ② 底部固定操作条（拇指热区）
* ③ 断点：≤1180 平板 / ≤900 手机横 / ≤640 手机竖 / ≤400 小屏
* ④ 横竖屏切换用 orientation 而非仅宽度，适配刘海与安全区
* ⑤ 表单/表格在窄屏降级为卡片式，避免横向滚动
* ========================================================================= */
/* ---------- ① 触控目标（所有可点元素） ---------- */
@media (hover:none),(pointer:coarse){
.btn{min-height:var(--tap-min);padding:0 18px;font-size:0.875rem}
.btn.sm{min-height:36px;padding:0 14px;font-size:0.8125rem} /* 次要按钮 ≥36（次级目标） */
.btn.xs{min-height:32px;padding:0 11px;font-size:0.78125rem} /* 三级按钮 */
/* 图标类必须放大到 44 */
.iconbtn{width:var(--tap-min);height:var(--tap-min);min-width:var(--tap-min)}
.modal-h .x{width:var(--tap-min);height:var(--tap-min);flex:0 0 var(--tap-min)}
.oe-fold,.oe-toggle{width:32px;height:32px}
/* 表格行内的操作按钮 */
.tbl .btn.sm,.tbl .btn.xs{min-height:34px}
/* 表单控件 */
.inp,select.inp,textarea.inp{min-height:var(--tap-min);font-size:1rem}
/* 复选/单选加大命中区 */
input[type=checkbox],input[type=radio]{width:20px;height:20px}
.rg-i,.cb-i{min-height:36px;padding:0 4px}
.sw{min-height:var(--tap-min)}
/* 去掉 hover 依赖的位移（已在 hover:none 降级），改为按压反馈 */
.btn:active{transform:scale(.96)}
}
/* ---------- ② 平板 ≤1180 ---------- */
@media (max-width:1180px){
:root{--nav-w:210px}
.topbar .search{width:170px}
.grid.g4{grid-template-columns:repeat(2,1fr)!important}
.grid.g3{grid-template-columns:repeat(2,1fr)!important}
}
/* ---------- ③ 手机 ≤900：单栏 + 底部操作条 ---------- */
@media (max-width:900px){
:root{--top-h:52px}
.grid.g4,.grid.g3,.grid.g21,.grid.g2{grid-template-columns:1fr!important}
.grid{gap:12px!important}
.kpi{padding:11px 12px}
.kpi .vl{font-size:1.25rem}
/* 卡片留白加大（手指操作需要余量） */
.card-b{padding:12px}
.card-h{padding:11px 12px}
.page-head{flex-wrap:wrap;gap:8px}
/* 表格 → 卡片式：隐藏次要列，首列作为标题 */
.tbl thead{display:none}
.tbl tbody tr{display:grid;grid-template-columns:1fr auto;gap:4px 8px;
padding:11px 12px;border-bottom:1px solid var(--line);align-items:center}
.tbl tbody td{border:0!important;padding:2px 0!important;display:block;font-size:0.8125rem}
.tbl tbody td:first-child{grid-column:1;font-weight:600;font-size:0.84375rem}
.tbl tbody td[data-label]::before{
content:attr(data-label);color:var(--ink-3);font-size:0.71875rem;margin-right:6px;font-weight:400}
.tbl tbody td:first-child::before{content:none}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody td .btn{width:100%;margin-top:4px}
/* 表格操作按钮不再横排 */
.rowact{flex-wrap:wrap;gap:6px}
/* 底部固定操作条（拇指热区） */
.mask .modal-f{
position:sticky;bottom:0;background:var(--surface);
box-shadow:0 -4px 16px rgba(27,37,55,.08);
padding:10px 12px calc(10px + env(safe-area-inset-bottom));
gap:8px;z-index:5;
}
.mask .modal-f .btn{flex:1;height:var(--tap-min)}
/* 弹窗占满 */
.mask .modal{width:100%!important;max-width:100%!important;max-height:100dvh;
border-radius:var(--r-lg) var(--r-lg) 0 0}
.mask{align-items:flex-end}
/* 顶栏搜索折叠 */
.topbar .search{flex:1;min-width:0}
}
/* ---------- ④ 小屏竖屏 ≤640 ---------- */
@media (max-width:640px){
:root{--tap-min:44px}
body{font-size:0.875rem}
.page-head h1{font-size:1.0625rem}
.card-h h3{font-size:0.84375rem}
/* 筛选条横向滚动而非换行占屏 */
.filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.filters::-webkit-scrollbar{height:0}
.filters .inp,.filters select{flex:0 0 auto;min-width:130px}
/* 表单单列，label 在上 */
.form-grid{grid-template-columns:1fr!important}
.field label{font-size:0.8125rem}
.field{margin-bottom:16px}
/* 统计卡两列 */
.grid.g4{grid-template-columns:repeat(2,1fr)!important}
/* 组织架构两栏堆叠 */
.oe-body{flex-direction:column}
.oe-left{flex:0 0 auto;max-height:38vh;border-right:0;border-bottom:1px solid var(--line)}
.oe-right{overflow:visible}
}
/* ---------- ⑤ 横屏（orientation 判定，适配刘海/传感器横持） ---------- */
@media (orientation:landscape) and (max-height:520px){
/* 手机横屏：顶栏与内容并排更省垂直空间 */
:root{--top-h:46px}
.topbar{padding:0 12px}
.modal-f{padding:7px 12px!important}
.modal-f .btn{min-height:36px!important;height:36px}
/* 表单双列利用横向空间 */
.form-grid{grid-template-columns:repeat(2,1fr)!important}
.field label{font-size:0.75rem;margin-bottom:5px}
.inp{min-height:38px!important}
/* 统计卡横排四列 */
.grid.g4{grid-template-columns:repeat(4,1fr)!important}
.kpi .vl{font-size:1.125rem}
/* 侧栏展开时覆盖内容区（横屏本就窄） */
.nav-scrim{display:block}
}
/* ---------- ⑥ 极小屏 ≤400 ---------- */
@media (max-width:400px){
.kpi .vl{font-size:1.125rem}
.kpi .lb{font-size:0.65625rem}
.page-head h1{font-size:1rem}
.btn{font-size:0.8125rem;padding:0 13px}
}
/* ---------- ⑦ 安全区（刘海 / 手势条） ---------- */
@supports (padding: max(0px)){
.topbar{padding-left:max(14px,env(safe-area-inset-left));
padding-right:max(14px,env(safe-area-inset-right))}
.content{padding-bottom:max(14px,env(safe-area-inset-bottom))}
.mask .modal-f{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
/* ---------- ⑧ 减弱动画（晕动敏感 + 省电） ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important;
}
.btn:hover,.card:hover,.kpi:hover,.ot-card:hover{transform:none!important}
}
/* ===========================================================================
* 页眉字号控制条
* ---------------------------------------------------------------------------
* 设计：与既有 .iconbtn 完全同构（同样式/圆角/过渡），不引入新的视觉语言。
* 档位文字「小/标准/大/特大」本身即高亮载体 —— 用户无需悬停即可看到当前档位。
* ========================================================================= */
.fontctl{
display:inline-flex;align-items:center;gap:1px;flex:0 0 auto;
padding:2px;border-radius:var(--r-sm);
background:var(--surface-2);border:1px solid var(--line);
}
.fontctl .fc-btn{width:26px;height:26px;border-radius:5px;color:var(--ink-2)}
.fontctl .fc-btn:hover{background:var(--accent-soft);color:var(--accent);transform:none}
.fontctl .fc-btn:active{transform:scale(.9)}
/* 边界档：变灰但仍可见（不用 disabled，避免用户以为功能坏了） */
.fontctl .fc-btn.off{opacity:.34;cursor:default}
.fontctl .fc-btn.off:hover{background:transparent;color:var(--ink-2);transform:none}
.fc-step{
min-width:38px;text-align:center;font-size:.6875rem;line-height:1;
color:var(--ink-3);font-weight:600;padding:0 4px;cursor:default;
border-radius:4px;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
user-select:none;white-space:nowrap;
}
/* 非默认档位：高亮，让用户明确知道"当前不是标准" */
.fc-step.on{color:var(--accent-ink);background:var(--accent-soft)}
.fc-step.is-default{color:var(--ink-3)}
/* ---------- 移动端：保证可点且不遮挡标题 ---------- */
@media(max-width:900px){
/* 按钮放大到可点尺寸（≥36px），但容器保持紧凑，避免挤掉标题 */
.fontctl{padding:1px;gap:0}
.fontctl .fc-btn{width:36px;height:36px}
.fc-step{min-width:34px;font-size:.75rem;padding:0 2px}
/* 窄屏时只保留「档位文字 + 放大 + 重置」，去掉"减小"以省宽度？→ 不，三键都要；
改为压缩间距并允许标题区域收缩 */
.topbar .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-sp{flex:1 1 auto;min-width:4px}
}
@media(max-width:480px){
/* 极窄屏：控件移到面包屑下方独立成行，彻底避免与标题争抢宽度 */
.topbar{flex-wrap:wrap;height:auto;min-height:var(--top-h);padding-bottom:6px}
.fontctl{order:9;width:100%;justify-content:center;margin-top:2px}
.fontctl .fc-btn{width:40px;height:40px}
.fc-step{flex:1;font-size:.8125rem}
}
@media(max-width:900px) and (hover:none){
/* 触屏：按钮进一步加大到 44px 触控目标 */
.fontctl .fc-btn{width:var(--tap-min);height:var(--tap-min)}
}
/* 打印时恢复标准字号（纸质不需要缩放）并隐藏控件 */
@media print{
html{font-size:16px!important}
.fontctl{display:none!important}
}
/* ---------- 表格姓名列：3 字名不断行 ----------
姓名单元格是「头像 + 粗体名」的 flex 行，列宽被内容均分后常只有 ~87px，
3 字中文名（许志远/黄振宇…）会在粗体名内部折成两行，导致整行变高、表格参差。
姓名不允许断行 → 自动表格布局会把该列撑到恰好容纳最宽姓名，行高恢复整齐。 */
.avatar + b{white-space:nowrap}
/* =========================================================================
* 流程引擎 · 节点进度条（wf-steps）
* 命名刻意避开 .fc-step —— 后者是字号档位控件（font-scale.js）在用，
* 复用会导致两处样式互相覆盖。
* ========================================================================= */
.wf-steps{
display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap;
padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm,8px);
background:var(--surface-2);
}
.wf-step{
display:flex;flex-direction:column;align-items:center;gap:4px;
min-width:96px;max-width:150px;flex:1 1 96px;text-align:center;
}
.wf-step .wf-dot{
width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
font-size:12px;font-weight:700;line-height:1;
background:var(--surface);border:1px solid var(--line);color:var(--ink-3);
}
.wf-step .wf-nm{font-size:12px;font-weight:600;color:var(--ink-2);line-height:1.3}
.wf-step .wf-sub{font-size:10.5px;color:var(--ink-4,var(--ink-3));line-height:1.2}
.wf-step.is-cur .wf-dot{background:var(--accent,var(--blue));border-color:var(--accent,var(--blue));color:#fff}
.wf-step.is-cur .wf-nm{color:var(--ink);font-weight:700}
.wf-step.is-done .wf-dot{background:var(--green-soft,var(--blue-soft));border-color:var(--green,var(--blue));color:var(--green,var(--blue))}
.wf-step.is-reject .wf-dot{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.wf-arrow{color:var(--ink-4,var(--ink-3));font-size:13px;padding-top:4px;flex:0 0 auto}
/* =========================================================================
登录页（P0-1 全屏登录门）
-------------------------------------------------------------------------
为什么不用 .mask/.modal：那套是半透明遮罩，关掉就会露出 OA 外壳，
未登录时"看得到系统"本身就是缺陷。这里改为**不透明全屏层**，
且不可通过点遮罩 / Esc 关闭。
配色全部走既有令牌，浅色与极光暗色自动适配，不新增硬编码色板。
规则：① 空账号/空密码就地提示且不发请求；②「取消」只取消本次填写，
留在登录页、不跳转；③ 提交中锁定并显示加载态。
========================================================================= */
body.lg-locked{overflow:hidden}
/* 双保险：登录层浮起时连业务外壳一并隐藏。
即使将来有代码路径在未认证时误渲染，也不会在登录页底下露出系统。 */
body.lg-locked .app{visibility:hidden}
/* 登录层之上仍要看得到 toast（其余层级不变） */
.toast-wrap{z-index:10000}
.lg-shell{
position:fixed;inset:0;z-index:9999;
min-height:100vh;min-height:100dvh;
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:28px 20px;
background:var(--bg);
background-image:
radial-gradient(900px 520px at 10% -6%, rgba(76,111,224,.16), transparent 62%),
radial-gradient(760px 480px at 94% 4%, rgba(133,88,236,.13), transparent 60%),
radial-gradient(720px 620px at 50% 118%, rgba(34,193,232,.10), transparent 62%);
animation:lgFade .3s var(--ease-out) both;
}
@keyframes lgFade{from{opacity:0}to{opacity:1}}
/* 装饰光斑（极轻，不干扰表单阅读） */
.lg-orb{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lg-orb i{position:absolute;display:block;border-radius:50%;filter:blur(64px);opacity:.55}
.lg-orb i:nth-child(1){width:420px;height:420px;left:-130px;top:-150px;background:rgba(76,111,224,.28);animation:lgFloat 20s var(--ease) infinite alternate}
.lg-orb i:nth-child(2){width:340px;height:340px;right:-110px;top:4%;background:rgba(133,88,236,.24);animation:lgFloat 26s var(--ease) infinite alternate-reverse}
.lg-orb i:nth-child(3){width:300px;height:300px;left:44%;bottom:-170px;background:rgba(34,193,232,.20);animation:lgFloat 32s var(--ease) infinite alternate}
@keyframes lgFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(28px,-24px,0)}}
.lg-panel{
position:relative;z-index:1;
width:100%;max-width:400px;
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-xl);box-shadow:var(--sh-xl);
padding:34px 34px 20px;
animation:lgRise .42s var(--ease-out) both;
}
@keyframes lgRise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
/* 校验失败 / 登录被拒时的轻抖动（一次性反馈，可被减少动效偏好关闭） */
.lg-shell.lg-shake .lg-panel{animation:lgShake .42s var(--ease) both}
@keyframes lgShake{
0%,100%{transform:translateX(0)}
18%{transform:translateX(-8px)} 36%{transform:translateX(7px)}
54%{transform:translateX(-5px)} 72%{transform:translateX(3px)} 86%{transform:translateX(-2px)}
}
/* ---------- 品牌区 ---------- */
.lg-brand{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.lg-logo{
width:44px;height:44px;flex:0 0 44px;border-radius:13px;
background:var(--grad-brand);color:#fff;
display:grid;place-items:center;
font-weight:800;font-size:.9375rem;letter-spacing:-.4px;
box-shadow:0 6px 16px rgba(76,111,224,.30);
}
.lg-brand-txt strong{display:block;font-size:1rem;font-weight:700;letter-spacing:-.3px;color:var(--ink);line-height:1.2}
.lg-brand-txt span{display:block;font-size:.75rem;color:var(--ink-3);margin-top:3px}
/* ---------- 标题 ---------- */
.lg-title{margin:0;font-size:1.375rem;font-weight:700;letter-spacing:-.6px;color:var(--ink);line-height:1.3}
.lg-sub{margin:7px 0 18px;font-size:.8125rem;color:var(--ink-3);line-height:1.6}
/* ---------- 顶部消息条（会话失效 / 取消 / 服务端错误） ---------- */
.lg-top{
font-size:.8125rem;line-height:1.55;padding:10px 12px;border-radius:var(--r);
margin-bottom:16px;border:1px solid transparent;animation:lgMsg .24s var(--ease-out) both;
}
.lg-top[hidden]{display:none}
.lg-top.warn{background:var(--amber-soft);border-color:#F5D9A3;color:#8A5A00}
.lg-top.err{background:var(--red-soft);border-color:#F3C9C9;color:var(--red-ink)}
.lg-top.ok{background:var(--green-soft);border-color:#BFE5CB;color:var(--green-ink)}
@keyframes lgMsg{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* ---------- 字段 ---------- */
.lg-fld{margin-bottom:15px}
.lg-fld>label{display:block;font-size:.78125rem;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.lg-ctrl{position:relative;display:flex;align-items:center}
.lg-ctrl .lg-ico{
position:absolute;left:13px;width:17px;height:17px;color:var(--ink-4);
pointer-events:none;transition:color var(--t-fast) var(--ease);
}
.lg-ctrl input{
width:100%;height:46px;padding:0 46px 0 40px;
border:1px solid var(--line);border-radius:var(--r);
background:var(--surface-2);color:var(--ink);
font-size:.875rem;font-family:inherit;
transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.lg-ctrl input::placeholder{color:var(--ink-4)}
.lg-ctrl input:hover{border-color:var(--line-3)}
.lg-ctrl input:focus{outline:none;background:var(--surface);border-color:var(--accent);box-shadow:var(--focus-ring)}
.lg-ctrl:focus-within .lg-ico{color:var(--accent)}
.lg-fld.is-bad .lg-ctrl input{border-color:var(--red);background:var(--red-soft)}
.lg-fld.is-bad .lg-ctrl input:focus{box-shadow:0 0 0 3px rgba(210,68,68,.18)}
.lg-fld.is-bad .lg-ico{color:var(--red)}
.lg-eye{
position:absolute;right:9px;width:30px;height:30px;
display:grid;place-items:center;border:0;background:transparent;
border-radius:var(--r-xs);color:var(--ink-4);cursor:pointer;
transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.lg-eye:hover{color:var(--ink-2);background:var(--surface-3)}
.lg-eye.on{color:var(--accent)}
.lg-eye svg{width:17px;height:17px;display:block}
/* 逐字段错误：图标 + 文案，不依赖颜色单一通道传达 */
.lg-err{display:none;align-items:center;gap:6px;margin:7px 0 0;font-size:.75rem;line-height:1.5;color:var(--red-ink)}
.lg-err.on{display:flex;animation:lgMsg .2s var(--ease-out) both}
.lg-err::before{
content:'!';display:grid;place-items:center;flex:0 0 14px;
width:14px;height:14px;border-radius:50%;
background:var(--red);color:#fff;font-size:10px;font-weight:800;line-height:1;
}
/* ---------- 操作区 ---------- */
.lg-foot{display:flex;gap:10px;margin-top:22px}
.lg-foot .lg-cancel{flex:0 0 auto;min-width:86px;height:44px}
.lg-foot .lg-submit{flex:1 1 auto;height:44px;font-weight:600;letter-spacing:.4px}
.lg-spin{
display:none;width:15px;height:15px;flex:0 0 15px;border-radius:50%;
border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
animation:lgSpin .7s linear infinite;
}
.lg-shell.is-busy .lg-spin{display:block}
.lg-shell.is-busy .lg-submit{cursor:progress}
@keyframes lgSpin{to{transform:rotate(360deg)}}
.lg-note{
margin-top:20px;padding-top:15px;border-top:1px solid var(--line-2);
text-align:center;font-size:.6875rem;color:var(--ink-4);letter-spacing:.2px;
}
/* ---------- 极光暗色：玻璃质感（令牌已自动翻转，此处只补玻璃与透明底） ---------- */
html.aurora .lg-shell{
background:transparent;
background-image:
radial-gradient(900px 520px at 10% -6%, rgba(91,140,255,.20), transparent 62%),
radial-gradient(760px 480px at 94% 4%, rgba(139,92,246,.18), transparent 60%);
}
html.aurora .lg-panel{
background:rgba(16,23,43,.72);border-color:rgba(255,255,255,.12);
backdrop-filter:blur(18px) saturate(150%);
-webkit-backdrop-filter:blur(18px) saturate(150%);
}
html.aurora .lg-ctrl input{background:rgba(255,255,255,.05)}
html.aurora .lg-ctrl input:focus{background:rgba(255,255,255,.09)}
html.aurora .lg-fld.is-bad .lg-ctrl input{background:var(--red-soft)}
html.aurora .lg-eye:hover{background:rgba(255,255,255,.10)}
html.aurora .lg-top.warn{border-color:rgba(251,191,36,.40);color:var(--amber-ink)}
html.aurora .lg-top.err{border-color:rgba(248,113,113,.42);color:var(--red-ink)}
html.aurora .lg-top.ok{border-color:rgba(52,211,153,.42);color:var(--green-ink)}
/* ---------- 小屏：加大触控目标、动作区改为纵向 ---------- */
@media (max-width:480px){
.lg-shell{padding:20px 16px;justify-content:flex-start;padding-top:7vh}
.lg-panel{padding:26px 22px 16px;border-radius:var(--r-lg)}
.lg-brand{margin-bottom:20px}
.lg-title{font-size:1.25rem}
.lg-ctrl input{height:50px;font-size:1rem} /* ≥16px 防 iOS 聚焦自动放大 */
.lg-eye{width:34px;height:34px}
.lg-foot{flex-direction:column-reverse;gap:8px;margin-top:18px}
.lg-foot .lg-cancel,.lg-foot .lg-submit{width:100%;height:48px}
}
/* ---------- 无障碍：尊重减少动效 ---------- */
@media (prefers-reduced-motion:reduce){
.lg-shell,.lg-panel,.lg-orb i,.lg-top,.lg-err,.lg-shell.lg-shake .lg-panel,.lg-spin{animation:none !important}
.lg-shell.lg-shake .lg-panel{transform:none !important}
}
/* ==========================================================================
修改密码弹窗 · 口令强度实时清单（2026-10-12）
规则与服务端 server.mjs 的 checkPwdStrength() 一一对应：
≥10 位，且大写字母 / 小写字母 / 数字 / 特殊符号四类**全部**必须出现，不得含账号名。
========================================================================== */
.cp-rules{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;margin:-4px 0 12px;font-size:12px;line-height:1.9}
.cp-rules span{display:flex;align-items:center;gap:5px;color:var(--ink-3);transition:color .16s ease}
.cp-rules span i{font-style:normal;width:14px;text-align:center;color:var(--ink-4);transition:color .16s ease}
.cp-rules span.ok{color:var(--green)}
.cp-rules span.ok i{color:var(--green)}
.cp-rules span.ok i::before{content:'✓'}
.cp-rules span:not(.ok) i::before{content:'○'}
.cp-tip{margin:-6px 0 10px;font-size:12px;color:var(--ink-3);line-height:1.7}
.cp-tip b{color:var(--red)}
@media (max-width:480px){.cp-rules{grid-template-columns:1fr}}
/* ==========================================================================
移动端交互修复（2026-10-12）
--------------------------------------------------------------------------
问题复盘（用 tools/audit 的无头 Edge 触摸模拟实测）：
① 帮助浮层 .nav-help 挂在 mouseenter 上。手指点一下会派发 mouseenter，但
**触屏永不派发 mouseleave** → 浮层弹出后永久留在屏幕上；
且它固定宽 308px、left = 菜单项右侧 + 14，在 390px 机型上算出来 left≈266，
右边伸到 574px，横向溢出 184px —— 观感就是"帮助页面自动跳出来遮挡整个页面"。
② 菜单项高 31px、问号徽标只有 14px 且 opacity:0（靠 :hover 才显形），
触屏上既看不见也点不到 —— "有些地方点不动"。
对策：
· 触屏彻底不挂悬停浮层，改点问号 → 弹可滚动的说明书弹窗（见 ui.js bindMenuHelp）
· 问号徽标改为