/* ============================================================
鑫朋友CRM · 清研设计系统 v3.0
纯净底色 + 松杉绿主色 + 精炼层级 + 等宽数字
基于原账本美学升级，保持品牌一致性，提升可读性与交互
============================================================ */
:root {
--paper: #f5f6f8; --surface: #ffffff; --surface-2: #f8f9fb; --surface-3: #f0f1f4;
--line: #e8eaed; --line-strong: #d1d5da;
--ink-900: #1a1d23; --ink-700: #2d3340; --ink-500: #5c6573; --ink-400: #8b94a3;
--pine-900: #172554; --pine-800: #1e3a8a; --pine-700: #1e40af; --pine-600: #1d4ed8;
--pine-500: #2563eb; --pine-400: #3b82f6; --pine-300: #60a5fa; --pine-100: #dbeafe; --pine-50: #eff6ff;
--gold: #9a7d1a; --gold-bg: #fdf6e3;
--red: #b3261e; --red-bg: #fdeaea;
--amber: #8a5e0e; --amber-bg: #fdf3e0;
--blue: #15539e; --blue-bg: #e8f0fb;
--purple: #4f3ba8; --purple-bg: #efeaf8;
--font-body: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
--font-display: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
--font-mono: "DIN Alternate", "Helvetica Neue", "Segoe UI", monospace;
--shadow-xs: 0 1px 2px rgba(15,30,25,.04);
--shadow-sm: 0 1px 3px rgba(15,30,25,.06), 0 1px 2px rgba(15,30,25,.04);
--shadow-md: 0 4px 14px -3px rgba(15,30,25,.10), 0 2px 6px -2px rgba(15,30,25,.06);
--shadow-lg: 0 12px 36px -8px rgba(15,30,25,.14), 0 4px 12px -4px rgba(15,30,25,.08);
--r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
--t-fast: 120ms ease-out; --t-normal: 200ms ease-out; --t-slow: 350ms ease-out;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background: var(--paper); color: var(--ink-900); font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: var(--pine-600); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--pine-500); }
button { font-family: inherit; cursor: pointer; transition: all var(--t-fast); }
input, select, textarea { font-family: inherit; color: var(--ink-900); }
/* ============ 登录页（科技风） ============ */
.login-wrap {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
background: radial-gradient(ellipse at 50% 0%, #0d2b3d 0%, #06121e 50%, #03080f 100%);
padding: 24px; position: relative; overflow: hidden;
}
.login-wrap::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(45,212,191,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(45,212,191,.04) 1px, transparent 1px);
background-size: 40px 40px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.login-wrap::after {
content: ""; position: absolute; width: 600px; height: 600px; top: -200px; right: -100px;
background: radial-gradient(circle, rgba(15,110,86,.12) 0%, transparent 70%);
border-radius: 50%; pointer-events: none;
}
.login-box {
display: grid; grid-template-columns: 1.05fr .95fr; width: 840px; max-width: 100%; min-height: 480px;
background: rgba(13,25,38,.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border: 1px solid rgba(45,212,191,.15); border-radius: var(--r-xl); overflow: hidden;
box-shadow: 0 0 40px rgba(15,110,86,.12), 0 20px 60px rgba(0,0,0,.4);
position: relative; z-index: 1;
}
.login-box::before, .login-box::after {
content: ""; position: absolute; width: 18px; height: 18px; z-index: 5; pointer-events: none;
border: 2px solid rgba(45,212,191,.35);
}
.login-box::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.login-box::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.login-brand {
background: linear-gradient(135deg, rgba(6,46,33,.5) 0%, rgba(8,80,65,.15) 100%);
color: #e8f5ee; padding: 48px 42px; display: flex; flex-direction: column;
position: relative; overflow: hidden;
}
.login-brand::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(111,197,164,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(111,197,164,.05) 1px, transparent 1px);
background-size: 24px 24px; animation: loginGrid 20s linear infinite;
}
@keyframes loginGrid { from { background-position: 0 0; } to { background-position: 24px 24px; } }
.login-brand::after {
content: ""; position: absolute; left: 0; right: 0; height: 1px; top: 0;
background: linear-gradient(90deg, transparent, rgba(45,212,191,.4), transparent);
animation: loginScan 5s ease-in-out infinite;
}
@keyframes loginScan {
0%, 100% { top: 0%; opacity: 0; }
10% { opacity: 1; } 50% { top: 100%; opacity: 1; } 90% { opacity: 0; }
}
.login-brand .logo { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: .05em; display: flex; align-items: center; position: relative; z-index: 1; }
.login-brand .logo-img { width: 36px; height: 36px; border-radius: var(--r-md); margin-right: 10px; object-fit: cover; box-shadow: 0 0 12px rgba(45,212,191,.2); }
.login-brand .logo em { font-style: normal; color: var(--pine-300); }
.login-brand .sub-cap { font-size: 10px; letter-spacing: .3em; color: #6a9b85; margin-top: 6px; position: relative; z-index: 1; }
.login-brand .slogan { margin-top: auto; position: relative; z-index: 1; }
.login-brand .slogan .big { font-family: var(--font-display); font-size: 19px; line-height: 1.75; color: #d5f0e3; }
.login-brand .slogan .sub { font-size: 12.5px; color: #93c5fd; margin-top: 10px; line-height: 1.85; }
.login-brand .sys-status { margin-top: 24px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6a9b85; font-family: var(--font-mono); letter-spacing: .1em; position: relative; z-index: 1; }
.login-brand .sys-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 6px #3b82f6; animation: loginPulse 2s ease-in-out infinite; }
@keyframes loginPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.login-form { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.login-form h1 { font-family: var(--font-display); font-size: 20px; margin-bottom: 4px; color: #e8f5ee; font-weight: 600; }
.login-form .sub { font-size: 11px; color: #5c6573; margin-bottom: 26px; font-family: var(--font-mono); letter-spacing: .08em; }
.login-form label { display: block; font-size: 11px; color: #8b94a3; margin: 14px 0 6px; font-weight: 500; letter-spacing: .08em; font-family: var(--font-mono); }
.login-form input, .login-form select {
width: 100%; padding: 11px 14px; font-size: 14px; color: #e8f5ee;
background: rgba(20,184,166,.04); border: 1px solid rgba(45,212,191,.2); border-radius: var(--r-sm);
transition: border var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.login-form input::placeholder { color: #4a5568; }
.login-form input:focus { outline: none; border-color: var(--pine-400); background: rgba(20,184,166,.07); box-shadow: 0 0 0 3px rgba(45,212,191,.1); }
.login-form button {
width: 100%; margin-top: 26px; padding: 12px; color: #fff; border: none; border-radius: var(--r-sm);
font-size: 14.5px; letter-spacing: .3em; font-weight: 500;
background: linear-gradient(135deg, var(--pine-600) 0%, var(--pine-400) 100%);
transition: all var(--t-normal); position: relative; overflow: hidden;
}
.login-form button:hover { box-shadow: 0 4px 16px rgba(15,110,86,.35); transform: translateY(-1px); }
.login-form button:active { transform: translateY(0); }
.login-tip { margin-top: 20px; }
.login-tip .tip-label { font-size: 10px; color: #5c6573; letter-spacing: .08em; margin-bottom: 8px; font-family: var(--font-mono); }
.login-tip .demo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.login-tip .demo-chip {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
font-size: 12px; color: var(--pine-300); cursor: pointer; user-select: none;
background: rgba(15,110,86,.08); border: 1px solid rgba(45,212,191,.2); border-radius: 999px;
transition: all var(--t-fast); font-family: var(--font-mono);
}
.login-tip .demo-chip:hover { background: rgba(15,110,86,.15); border-color: var(--pine-400); color: #6fc5a4; }
.login-tip .demo-chip .chip-role { color: #6a9b85; font-size: 10px; }
.err { color: var(--red); font-size: 13px; margin-top: 12px; }
@media (max-width: 760px) { .login-box { grid-template-columns: 1fr; } .login-brand { min-height: 150px; padding: 28px 32px; } .login-brand .slogan, .login-brand .sys-status { display: none; } }
/* ============ 布局 ============ */
.layout { display: flex; min-height: 100vh; }
/* ============ 左侧导航栏（2026-09-05 美化）============
设计要点：加宽到 232px；渐变背景 + 顶部柔光；菜单项 hover 时左侧 3px 主色描边出现；
active 项加深色高亮条 + 柔光 + 内阴影；分组标题加主色描线；user-box 卡片化、角色徽章化 */
.sidebar {
width: 200px;
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
color: #94a3b8;
flex-shrink: 0;
display: flex; flex-direction: column;
position: sticky; top: 0; height: 100vh;
box-shadow: 1px 0 0 rgba(255,255,255,.05);
}
.sidebar .logo {
padding: 20px 22px 18px;
display: flex; align-items: center; gap: 10px;
border-bottom: 1px solid rgba(96, 165, 250, .10);
position: relative;
}
.sidebar .logo::after {
content: ''; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .35), transparent);
}
.sidebar .logo-img {
width: 34px; height: 34px; border-radius: 9px;
box-shadow: 0 4px 12px rgba(59, 130, 246, .25), inset 0 0 0 1px rgba(255,255,255,.08);
object-fit: cover;
}
.sidebar .logo b {
display: block; color: #fff;
font-family: var(--font-display);
font-size: 17px; font-weight: 600; letter-spacing: .04em;
text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.sidebar .logo small { display: none; }
.sidebar nav { flex: 1; padding: 8px 0 14px; overflow-y: auto; scrollbar-width: thin; }
.sidebar nav::-webkit-scrollbar { width: 4px; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(96, 165, 250, .15); border-radius: 2px; }
/* ============ 侧栏导航（2026-09-09 v39 重设计：减负+降饱和度）============
旧版问题：upppercase + 大字间距刺眼、.ico 方块背景视觉噪音、active 渐变+box-shadow 刺眼、绿色饱和度过高
新版：去掉 uppercase、去掉大字间距、.ico 扁平显示、active 单色高亮、降低饱和度、增强一级/二级层次 */
.sidebar nav .grp {
font-size: 11.5px;
color: #8a9ba6;
padding: 14px 18px 4px;
margin: 0 10px;
font-weight: 500;
letter-spacing: 0;
display: flex; align-items: center; gap: 8px;
cursor: pointer; user-select: none;
border-radius: 6px;
transition: color .15s ease, background .15s ease;
}
.sidebar nav .grp:hover {
color: #c8d6df;
background: rgba(255, 255, 255, .03);
}
.sidebar nav .grp::before {
content: '';
display: inline-block;
width: 10px;
height: 1.5px;
background: #60a5fa;
opacity: .5;
border-radius: 1px;
}
.sidebar nav .grp .grp-arrow {
display: inline-block;
width: 12px;
font-size: 9px;
color: #6a7884;
opacity: .7;
margin-left: auto;
text-align: right;
transition: transform .2s ease;
}
.sidebar nav .grp.folded .grp-arrow { color: #5a6874; }
.sidebar nav .grp .grp-label {
flex: 1;
font-weight: 500;
}
/* 分组折叠态：旗下菜单项整体隐藏 */
.sidebar nav a.hidden-by-grp { display: none !important; }
/* 菜单项（扁平、去掉方块背景、去掉 box-shadow、降低饱和度） */
.sidebar nav a {
display: flex; align-items: center; gap: 10px;
padding: 7px 18px 7px 30px;
margin: 1px 10px;
border-radius: 6px;
color: #b8c4cc;
font-size: 13px;
font-weight: 400;
border-left: 2px solid transparent;
position: relative;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar nav a .ico {
width: 18px;
text-align: center;
font-size: 14px;
opacity: .8;
background: none;
border-radius: 0;
display: inline-block;
transition: opacity .15s ease, color .15s ease;
}
.sidebar nav a:hover {
background: rgba(255, 255, 255, .04);
color: #e0e8ee;
}
.sidebar nav a:hover .ico {
opacity: 1;
background: none;
color: #b8c4cc;
}
.sidebar nav a.active {
background: rgba(59, 130, 246, .10);
color: #ffffff;
font-weight: 500;
border-left-color: #3b82f6;
box-shadow: none;
}
.sidebar nav a.active .ico {
opacity: 1;
color: #3b82f6;
background: none;
}
/* 工作台特殊样式（首页突出：略大字号+浅色背景） */
.sidebar nav a[href="#/dashboard"] {
font-weight: 500;
font-size: 13.5px;
padding: 10px 18px;
margin: 6px 10px 4px;
background: rgba(59, 130, 246, .08);
color: #c4d2dc;
border-left: 2px solid transparent;
}
.sidebar nav a[href="#/dashboard"] .ico {
font-size: 15px;
}
.sidebar nav a[href="#/dashboard"]:hover {
background: rgba(59, 130, 246, .14);
}
.sidebar nav a[href="#/dashboard"].active {
background: rgba(59, 130, 246, .15);
color: #fff;
border-left-color: #3b82f6;
}
/* 2026-09-21 王总：集团账号首页「集团总览」要和普通账号的「工作台」一样，在侧栏有同样的突出样式 */
.sidebar nav a[href="#/groupboard"] {
font-weight: 500;
font-size: 13.5px;
padding: 10px 18px;
margin: 6px 10px 4px;
background: rgba(59, 130, 246, .08);
color: #c4d2dc;
border-left: 2px solid transparent;
}
.sidebar nav a[href="#/groupboard"] .ico {
font-size: 15px;
}
.sidebar nav a[href="#/groupboard"]:hover {
background: rgba(59, 130, 246, .14);
}
.sidebar nav a[href="#/groupboard"].active {
background: rgba(59, 130, 246, .15);
color: #fff;
border-left-color: #3b82f6;
}
/* 用户信息区（卡片化） */
.sidebar .user-box {
margin: 12px 14px 14px;
padding: 14px 14px 10px;
border-radius: 10px;
background: linear-gradient(160deg, rgba(59, 130, 246, .10), rgba(255,255,255,.02));
border: 1px solid rgba(96, 165, 250, .14);
font-size: 12px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.sidebar .user-box b {
display: block; color: #fff; font-weight: 600; font-size: 13px;
letter-spacing: .02em;
}
/* 名字与职位并排（2026-09-09 老板反馈：名字和职位放同一行） */
.sidebar .user-box .user-meta {
display: flex; align-items: center; gap: 8px;
min-width: 0;
}
.sidebar .user-box .user-meta b {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar .user-box .role {
display: inline-block;
flex-shrink: 0;
color: #1e3a8a;
background: linear-gradient(135deg, #93c5fd, #3b82f6);
font-size: 10.5px; font-weight: 600;
padding: 2px 9px; border-radius: 10px;
letter-spacing: .04em;
box-shadow: 0 2px 6px rgba(59, 130, 246, .25);
}
.sidebar .user-box > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.sidebar .user-box > div > div { flex: 1; min-width: 0; }
.sidebar .user-box a {
display: inline-block;
color: #93c5fd; cursor: pointer; font-size: 11.5px;
margin-right: 10px;
padding: 1px 0;
transition: color .15s ease;
}
.sidebar .user-box a:last-child { margin-right: 0; }
.sidebar .user-box a:hover { color: #fff; text-decoration: underline; }
.main { flex: 1; padding: 22px 28px 60px; min-width: 0; }
.page-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 18px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.page-title small { font-family: var(--font-body); font-weight: 400; color: var(--ink-400); font-size: 12.5px; letter-spacing: .02em; }
/* ============ 组件 ============ */
/* 工作台卡片统一立体感（2026-09-05 需求3：与待收款项/到期续费保持一致——白色背景 + 明显阴影 + 加深边框 + 圆角 + header 区分） */
.card { background: var(--surface); border: 1px solid #e3e8e3; border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(15,30,25,.04), 0 6px 18px -8px rgba(15,30,25,.12), 0 2px 6px -2px rgba(15,30,25,.06); margin-bottom: 14px; transition: box-shadow .2s ease, transform .2s ease; }
.card:hover { box-shadow: 0 1px 2px rgba(15,30,25,.04), 0 10px 28px -10px rgba(15,30,25,.16), 0 3px 8px -2px rgba(15,30,25,.08); }
.card h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--ink-900); }
/* 工作台长列表卡片：内容区独立滚动（标题吸顶），避免整页滚动条过长 */
.card.sc { max-height: 440px; overflow-y: auto; scrollbar-width: thin; }
.card.sc h3 { position: sticky; top: -18px; z-index: 2; background: var(--surface); margin: -18px -20px 12px; padding: 18px 20px 12px; border-bottom: 1px solid #e3e8e3; border-radius: 14px 14px 0 0; font-size: 14.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card.sc h3::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, var(--pine-500), var(--pine-700)); flex-shrink: 0; }
.card.sc h3 a { margin-right: 0; margin-left: auto; }
/* 服务客户列表：整屏 + 分页浏览（2026-09-24 王总要求「全屏，并且是分页浏览，不要靠滚动条下滑」）
覆盖 .card.sc 的 max-height:440px —— 1400 条标的挤在 440px 里一次只能看 7~8 行。
做法：外层 .svc-page 撑满 .main，列表卡 flex:1 吃掉剩余空间；每页只回 20 条，
行数不够铺满时列表卡自然收高（height:auto 兜底），够多时才在卡内滚动 —— 主导航手段是**翻页**不是下滑。 */
.svc-page {
display: flex; flex-direction: column;
/* ⚠️ 不能用 height:100% —— .layout 只有 min-height:100vh，.main 高度不确定，百分比会退回 auto
（2026-09-24 第一版就是这么失效的：卡片没撑开，下方留一大片空白）。
直接用视口算：.main padding-top22 + 标题46 + 工具栏46 + 分页条46 = 160，留 20 余量。
margin-bottom:-46px 抵掉 .main 的 padding-bottom:60px，让卡片底边贴到视口底（只剩 14px 呼吸位）。 */
height: calc(100vh - 180px); min-height: 360px; margin-bottom: -46px;
}
/* 用 `.card.svc-list-card` 而不是 `.svc-list-card`，否则 specificity 低于 `.card.sc` 的 max-height:440px 会被覆盖 */
.card.svc-list-card { max-height: none; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.svc-list-card .svc-tbl-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
.svc-list-card thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
/* 分页条：固定在列表卡下方（不随表格滚），常驻可见 → 翻页不用先滚到底 */
.svc-pager { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 2px 2px; margin-top: 8px; }
/* 考勤页（人事中心）tab 内容卡：取消 .card.sc 的 440px 固定高度（2026-09-28 王总：
明细卡片下方大片空白很难看 → 卡片随内容自然长高，页面整体滚动；长列表靠**分页**管理不靠内滚）。
⚠️ 必须写 `.card.att-card` 两个类才能盖过 `.card.sc` 的 specificity（单类盖不住，09-24 踩过）。 */
.card.att-card { max-height: none; overflow: visible; }
/* 成长中心「合作地址 / 地址管理」列表卡：取消 .card.sc 的 440px 固定高度（2026-10-09 王总：
地址条目一多只能看到 7~8 行，卡片随内容自然长高、整页滚动）。
渠道档案三张卡直接不挂 .sc，天然无高度限制。
⚠️ 必须写 `.card.addr-card` 两个类才能盖过 `.card.sc` 的 specificity（单类盖不住，09-24 踩过）。 */
.card.addr-card { max-height: none; overflow: visible; }
/* 日常报销列表卡：取消 .card.sc 的 440px 固定高度（2026-10-19q 王总：「取消董事长日常报销卡片的高度的限制」——
截图里最后一行备注被卡在 440px 处截断，得在卡内滚才能看全）。
口径与考勤 att-card / 地址 addr-card 一致：卡片随内容自然长高，整页滚动。
⚠️ 必须写 `.card.de-list-card` 两个类才能盖过 `.card.sc` 的 specificity（单类盖不住，09-24 踩过）。 */
.card.de-list-card { max-height: none; overflow: visible; }
.svc-pager .btn.sm { min-width: 34px; padding: 4px 9px; }
.svc-pager .btn.sm[disabled] { opacity: .45; cursor: not-allowed; }
/* 统计数字卡：单卡立体感 */
.stat { background: var(--surface); border: 1px solid #e3e8e3; border-radius: 12px; padding: 15px 17px 13px; box-shadow: 0 1px 2px rgba(15,30,25,.04), 0 4px 12px -6px rgba(15,30,25,.10); position: relative; transition: box-shadow .2s ease, transform .2s ease; }
.stat:hover { box-shadow: 0 1px 2px rgba(15,30,25,.04), 0 8px 20px -8px rgba(15,30,25,.14); transform: translateY(-1px); }
/* 工作台 dash-card 外壳（2026-09-05 整合）：hover 抬升 + 容纳 ↻ 按钮（合并之前 line 274 + line 753 两份定义） */
.dash-card { position: relative; cursor: default; transition: transform .2s ease; }
.dash-card:hover { transform: translateY(-2px); }
/* 旧的拖拽手柄样式已弃用（2026-09-04 取消 DIY 排序），保留空定义避免历史缓存样式错乱 */
.dash-card .dash-handle { margin-right: 8px; color: var(--ink-400); font-size: 12px; letter-spacing: 2px; user-select: none; opacity: .55; cursor: grab; }
.dash-card:hover .dash-handle { opacity: 1; color: var(--pine-600); }
.dash-card.dragging { opacity: .55; outline: 2px dashed var(--pine-500); }
.dash-edit { float: right; font-size: 12px; color: var(--ink-500); cursor: pointer; user-select: none; font-weight: 400; }
.dash-edit:hover { color: var(--pine-600); text-decoration: underline; }
/* 直录客户只读预览（2026-09-02）：信息只读展示值 */
.pv-val { padding: 7px 0; color: var(--ink-700); font-size: 13px; word-break: break-all; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.toolbar input, .toolbar select { padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 13px; background: var(--surface); transition: border var(--t-fast), box-shadow var(--t-fast); }
.toolbar input:focus, .toolbar select:focus { outline: none; border-color: var(--pine-500); box-shadow: 0 0 0 3px rgba(15,110,86,.10); }
.toolbar .f-date { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-500); }
.toolbar .f-date input[type=date], .toolbar .f-date input[type=month] { padding: 5px 8px; }
/* 业务核实「核实项」多选下拉（2026-09-09） */
.msel { position: relative; display: inline-block; }
.msel-panel { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 220px; max-width: 320px; max-height: 320px; overflow: auto; margin-top: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-md); }
.msel-panel label { display: flex; align-items: center; gap: 7px; padding: 5px 8px; font-size: 13px; color: var(--ink-700); cursor: pointer; border-radius: var(--r-xs); }
.msel-panel label:hover { background: var(--surface-2); }
.msel-panel input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--pine-500); cursor: pointer; }
.msel-tip { padding: 6px 8px 2px; font-size: 12px; color: var(--ink-400); }
.msel-acts { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.msel-acts .btn { padding: 5px 12px; font-size: 12px; }
.btn { padding: 7px 15px; border-radius: var(--r-sm); border: 1px solid var(--pine-600); background: var(--pine-600); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; /* 窄列防竖排：2026-09-02 */ }
.btn:hover { background: var(--pine-700); border-color: var(--pine-700); box-shadow: 0 2px 8px rgba(15,110,86,.20); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--pine-700); border-color: var(--pine-300); }
.btn.ghost:hover { background: var(--pine-50); border-color: var(--pine-500); color: var(--pine-700); }
.btn.gray { background: var(--surface); color: var(--ink-700); border-color: var(--line-strong); }
.btn.gray:hover { border-color: var(--ink-400); background: var(--surface-2); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover { background: #992018; box-shadow: 0 2px 8px rgba(179,38,30,.22); color: #fff; }
.btn.sm { padding: 4px 11px; font-size: 12px; }
/* 表格：信息密度优先 */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--ink-500); font-weight: 500; font-size: 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 10px 11px; white-space: nowrap; letter-spacing: .03em; }
td { padding: 10px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:hover td { background: var(--pine-50); }
/* 长表格滚动容器（收款提单等大列表）：表体独立滚动、表头吸顶，超长列表配合前端分批渲染 */
.tbl-scroll { max-height: 420px; overflow-y: auto; scrollbar-width: thin; border: 1px solid var(--line); border-radius: var(--r-sm); }
.tbl-scroll table { margin: 0; }
.tbl-scroll thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--line); }
.tbl-scroll .empty { padding: 18px 0; }
td b { font-variant-numeric: tabular-nums; font-weight: 600; }
.cell-co { display: inline-block; max-width: 260px; overflow-wrap: anywhere; vertical-align: bottom; line-height: 1.4; }
.cell-reason { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
td input, td select { padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 12.5px; background: var(--surface); }
/* 标签：带状态圆点 */
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--r-xs); font-size: 12px; font-weight: 500; line-height: 1.7; background: var(--surface-3); color: var(--ink-500); white-space: nowrap; /* 窄列防竖排：2026-09-02 */ }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.green { background: var(--pine-100); color: var(--pine-700); }
.tag.red { background: var(--red-bg); color: var(--red); }
.tag.orange { background: var(--amber-bg); color: var(--amber); }
.tag.blue { background: var(--blue-bg); color: var(--blue); }
.tag.gray { background: var(--surface-3); color: var(--ink-500); }
.tag.gold { background: var(--gold-bg); color: var(--gold); }
.tag.purple { background: var(--purple-bg); color: var(--purple); }
/* 经营看板：横向条形图 */
.bchart { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.brow { display: grid; grid-template-columns: 110px 1fr 96px; align-items: center; gap: 10px; }
.blbl { font-size: 12.5px; color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btrack { height: 22px; background: var(--surface-2); border-radius: var(--r-xs); overflow: hidden; border: 1px solid var(--line); }
.bbar { height: 100%; border-radius: 3px; transition: width var(--t-slow); opacity: .92; }
.bval { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-700); font-weight: 600; }
@media (max-width: 640px) { .brow { grid-template-columns: 84px 1fr 72px; } }
/* 管家工作台：我的月度任务指标（双面板布局，2026-09-01） */
.ttmy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* 工作台 task_my/task_team 进度面板（2026-09-05 立体感统一）：白色背景 + 加深阴影 + 加大圆角 */
.ttmy-panel { background: var(--surface); border: 1px solid #e3e8e3; border-radius: 12px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(15,30,25,.04), 0 4px 12px -6px rgba(15,30,25,.10); transition: box-shadow .2s ease, transform .2s ease; }
.ttmy-panel:hover { box-shadow: 0 1px 2px rgba(15,30,25,.04), 0 8px 20px -8px rgba(15,30,25,.14); transform: translateY(-1px); }
.ttmy-head { display: flex; align-items: center; justify-content: space-between; }
.ttmy-title { font-size: 13px; font-weight: 600; color: var(--ink-700); letter-spacing: .02em; }
.ttmy-main { display: flex; align-items: center; gap: 18px; }
.ttmy-pct { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; font-family: var(--font-mono); min-width: 92px; }
.ttmy-pct small { font-size: 16px; font-weight: 600; margin-left: 1px; }
.ttmy-pct i { display: block; font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--ink-500); margin-top: 5px; letter-spacing: .04em; }
.ttmy-nums { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ttmy-nums > div { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.ttmy-nums span { color: var(--ink-500); }
.ttmy-nums b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ttmy-foot { font-size: 12px; line-height: 1.6; }
@media (max-width: 860px) { .ttmy-grid { grid-template-columns: 1fr; } }
/* KPI 统计卡：左侧色条 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 16px; }
/* .stat 基础样式已在 line 271 定义（立体感版），此处只放变体 */
.stat::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 99px; background: var(--pine-300); }
.stat.k-red::before { background: var(--red); }
.stat.k-gold::before { background: var(--gold); }
.stat.k-amber::before { background: var(--amber); }
.stat .num { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; font-family: var(--font-mono); }
.stat .num.green { color: var(--pine-600); }
.stat .num.red { color: var(--red); }
.stat .lbl { font-size: 12px; color: var(--ink-500); margin-top: 4px; letter-spacing: .03em; }
.tabs { display: inline-flex; gap: 0; margin-bottom: 12px; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.tabs button { padding: 7px 15px; border: none; background: var(--surface); color: var(--ink-500); font-size: 13px; transition: all var(--t-fast); }
.tabs button + button { border-left: 1px solid var(--line); }
.tabs button.active { background: var(--pine-700); color: #fff; }
.tabs button:not(.active):hover { background: var(--surface-2); color: var(--ink-900); }
.modal-mask { position: fixed; inset: 0; background: rgba(6,46,33,.40); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 50; overflow-y: auto; }
.modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; width: 640px; max-width: 100%; box-shadow: var(--shadow-lg); }
.modal.wide { width: 880px; }
.modal h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-item label { display: block; font-size: 12.5px; color: var(--ink-500); margin-bottom: 6px; font-weight: 500; }
.form-item label .req { color: var(--red); margin-left: 2px; }
.form-item input, .form-item select, .form-item textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 13px; background: var(--surface); transition: border var(--t-fast), box-shadow var(--t-fast); }
.form-item input:focus, .form-item select:focus, .form-item textarea:focus { outline: none; border-color: var(--pine-500); box-shadow: 0 0 0 3px rgba(15,110,86,.10); }
.form-item textarea { min-height: 64px; resize: vertical; }
.form-item input:disabled { background: var(--surface-2); color: var(--ink-400); }
/* ==== 登记收款提单 · 弹窗分组版式（2026-10-22 王总 UI 优化） ==== */
.pay-sec { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); padding: 12px 14px 14px; margin-bottom: 12px; }
.pay-sec-t { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px dashed var(--line-strong); font-size: 13px; font-weight: 600; color: var(--ink-700); }
.pay-sec-t .idx { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: var(--pine-600); color: #fff; font-size: 12px; font-weight: 700; }
.pay-sec-t small { font-weight: 400; color: var(--ink-400); font-size: 12px; }
.pay-sec > .form-grid { gap: 10px 14px; }
.pay-sec .form-item { margin-bottom: 0; }
/* 金额主视觉：¥ 前缀 + 大号粗体，一眼看到「这次收到多少钱」 */
.pay-hero .pay-amt-wrap { position: relative; }
.pay-hero .pay-amt-wrap::before { content: "\A5"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-400); font-size: 14px; pointer-events: none; }
.pay-hero input#payAmount { padding-left: 28px; height: 42px; font-size: 19px; font-weight: 700; letter-spacing: .6px; color: var(--pine-700); }
/* 胶囊分段器（关联合同 / 免合同产品） */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 999px; }
.seg .chip { border: none; background: transparent; border-radius: 999px; padding: 6px 18px; font-size: 13px; }
.seg .chip:hover { border-color: transparent; background: var(--pine-50); color: var(--pine-600); }
.seg .chip.on { background: var(--pine-600); color: #fff; box-shadow: var(--shadow-xs); }
/* 2026-10-23 王总：登记收款提单弹窗「订单总金额」（只读展示条） */
.pay-ot-box { display: flex; align-items: baseline; gap: 10px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.pay-ot-num { font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: .5px; color: var(--pine-700); }
.pay-ot-num.muted { color: var(--ink-400); font-size: 15px; font-weight: 500; }
@media (max-width: 1000px) { .pay-sec > .form-grid { grid-template-columns: 1fr; } }
.modal .foot { margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }
/* 2026-10-23c 王总：登记到账弹窗 —— 卡片加宽 + 固定高度，滚动条收在弹窗内部（标题与底部按钮钉住） */
.modal.tall { width: 1040px; display: flex; flex-direction: column; height: calc(100vh - 96px); min-height: 460px; padding: 22px 24px 0; overflow: hidden; }
.modal.tall > h3 { flex: 0 0 auto; }
.modal.tall .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 8px; margin-right: -8px; }
.modal.tall .modal-body::-webkit-scrollbar { width: 9px; }
.modal.tall .modal-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; }
.modal.tall .modal-body::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
.modal.tall .modal-body::-webkit-scrollbar-track { background: transparent; }
.modal.tall .foot { flex: 0 0 auto; margin-top: 0; padding: 14px 0 18px; border-top: 1px solid var(--line); background: var(--surface); }
@media (max-width: 1100px) { .modal.tall { width: 100%; } }
@media (max-height: 620px) { .modal.tall { height: calc(100vh - 24px); min-height: 0; } }
/* ===== 2026-10-23k 王总：全站弹窗统一为「收款管理 → 登记到账」同款骨架 =====
标题 / 底部按钮钉住，内容区内部滚动；内容装不下时 app.js modalAutoHeight() 自动升为 tall（宽 1040）。
矮弹窗看不出变化（flex 容器在内容没超限时与自然流一致），只有超高弹窗才切换到「登记到账」那款。 */
.modal { display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.modal > h3 { flex: 0 0 auto; }
.modal > .foot { flex: 0 0 auto; }
.modal > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
.modal > .modal-body::-webkit-scrollbar { width: 9px; }
.modal > .modal-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; }
.modal > .modal-body::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
.modal > .modal-body::-webkit-scrollbar-track { background: transparent; }
.modal.sm { width: 520px; }
.modal-mask.tall-mask { align-items: center; padding: 24px 16px; }
.chk-row { display: flex; gap: 14px; flex-wrap: wrap; padding: 4px 0; }
.chk-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-700); }
.chk-row input[type=checkbox] { accent-color: var(--pine-600); }
/* 业务线勾选区的一级分类小标题（两级筛选） */
.biz-group-h { width: 100%; margin: 8px 0 2px; padding-bottom: 4px; border-bottom: 1px dashed var(--line-strong); font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--pine-600); }
/* 新增商机弹窗：已有客户搜索结果选择项 */
.opp-cust-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; margin-bottom: 6px; font-size: 13px; color: var(--ink-700); transition: border-color var(--t-fast), background var(--t-fast); }
.opp-cust-item:hover { border-color: var(--pine-500); background: var(--surface-2); }
.opp-cust-item.sel { border-color: var(--pine-600); background: var(--pine-50); cursor: default; }
.opp-cust-item .muted { flex: 1 1 160px; }
.tagChk { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--ink-700); cursor: pointer; transition: all var(--t-fast); }
.tagChk:has(input:checked) { background: var(--purple-bg); border-color: #c5b8e8; color: var(--purple); }
/* ---- 公司名称快捷复制按钮（2026-09-02）：mask 图标，hover 高亮，点击后 .done 反馈 ---- */
.copy-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 5px; border: none; border-radius: 4px; background: transparent; cursor: pointer; vertical-align: -4px; color: var(--ink-400); }
.copy-ico:hover { color: var(--pine-600); background: var(--pine-50); }
.copy-ico::after { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; }
.copy-ico.done { color: var(--pine-600); }
/* ---- 服务内容选择器（发起合同/客户档案）：卡片式，普通项整行可选，多选一项为「标题 + 选项胶囊」 ---- */
.svc-box { width: 100%; }
.svc-pick { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.svc-item { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
.svc-item:hover { border-color: var(--pine-400); }
.svc-item:has(input:checked) { border-color: var(--pine-600); background: var(--pine-50); box-shadow: var(--shadow-xs); }
.svc-single { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.svc-single input[type=checkbox] { accent-color: var(--pine-600); width: 15px; height: 15px; flex-shrink: 0; }
.svc-item-name { font-weight: 600; color: var(--ink-900); }
.svc-biz { display: inline-block; margin-right: 6px; padding: 0 6px; font-size: 11px; font-weight: 600; line-height: 17px; color: var(--pine-700); background: var(--pine-50); border: 1px solid var(--pine-100); border-radius: 4px; vertical-align: 1px; white-space: nowrap; }
.svc-single .svc-item-name { flex: 1; }
.svc-picked { display: none; font-size: 12px; font-weight: 600; color: var(--pine-600); flex-shrink: 0; }
.svc-item:has(input:checked) .svc-picked { display: inline; }
.svc-item-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.svc-item-head input[type=checkbox] { accent-color: var(--pine-600); width: 15px; height: 15px; flex-shrink: 0; }
.svc-item-head .svc-item-name { flex: 1; }
.svc-item-meta { font-size: 12px; font-weight: 400; color: var(--ink-400); flex-shrink: 0; }
.svc-opts { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px dashed var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-md) var(--r-md); }
.svc-opt { display: inline-flex; align-items: center; padding: 5px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--ink-700); cursor: pointer; transition: all var(--t-fast); }
.svc-opt:hover { border-color: var(--pine-400); }
.svc-opt input[type=radio] { display: none; }
.svc-opt:has(input:checked) { background: var(--pine-600); border-color: var(--pine-600); color: #fff; font-weight: 600; }
.svc-opt:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.tagChk:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.svc-edit-row .btn.danger { flex-shrink: 0; }
/* ---- 设置页：服务内容编辑器（多选项/单选组 分区块） ---- */
.svc-sec { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.svc-sec:last-child { border-bottom: none; padding-bottom: 4px; }
.svc-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.svc-sec-head b { font-size: 14px; color: var(--ink-900); margin-right: 8px; }
.svc-sec-head .muted { font-size: 12px; }
.svc-edit-row, .ch-edit-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.svc-edit-row input, .ch-edit-row input { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); font-size: 13px; color: var(--ink-900); }
.svc-edit-row input:focus, .ch-edit-row input:focus { outline: none; border-color: var(--pine-600); }
.svc-edit-row select { padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); font-size: 13px; color: var(--ink-900); }
.svc-edit-row select:focus { outline: none; border-color: var(--pine-600); }
.svc-edit-fields { display: flex; gap: 8px; flex: 1; min-width: 280px; flex-wrap: wrap; }
.seName { width: 190px; flex-shrink: 0; }
.seBiz { width: 132px; flex-shrink: 0; }
.seOpts { flex: 1; min-width: 240px; }
.svc-ord { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); font-size: 12px; color: var(--ink-700); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc-empty { padding: 4px 0 8px; font-size: 13px; }
.empty { text-align: center; color: var(--ink-400); padding: 32px 0; font-size: 13px; }
/* 工作台卡片空状态（2026-09-05）：图标 + 引导文案，居中卡片化，避免一行灰字显得空 */
.empty-dash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 16px 26px; text-align: center; color: var(--ink-400); }
.empty-dash .ed-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--pine-50); border: 1px solid var(--pine-100); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--pine-600); }
.empty-dash .ed-tit { font-size: 13px; color: var(--ink-600); font-weight: 500; }
.empty-dash .ed-sub { font-size: 12px; color: var(--ink-400); max-width: 340px; line-height: 1.6; }
/* 预警条 */
.warn-bar { background: var(--amber-bg); border: 1px solid #e8d4a8; border-radius: var(--r-md); padding: 12px 16px; font-size: 13px; margin-bottom: 14px; color: #6d4f0e; }
.warn-bar b { color: var(--amber); font-variant-numeric: tabular-nums; }
.warn-bar a { color: var(--amber); margin-left: 8px; font-weight: 500; }
.warn-bar a:hover { text-decoration: underline; }
/* 移交提醒（工作台顶部条，蓝色） */
.tran-bar { background: #e8f1fb; border: 1px solid #b6cce8; border-radius: var(--r-md); padding: 12px 16px; font-size: 13px; margin-bottom: 14px; color: #1f4373; }
.tran-bar b { color: #15539e; font-variant-numeric: tabular-nums; }
.tran-bar a { color: #15539e; margin-left: 8px; font-weight: 500; }
.tran-bar a:hover { text-decoration: underline; }
/* 客户详情内的移交提醒（只读模式） */
.tran-detail-bar { background: #f5f7fb; border: 1px dashed #b6cce8; border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; margin-bottom: 12px; color: #1f4373; }
.tran-detail-bar b { color: #15539e; }
/* 业务核实项编辑高亮（行底色 + 左边色块），让用户清楚当前在编辑哪一行 */
.vi-editing { background: #fff7e6; box-shadow: inset 4px 0 0 #f3c969; }
/* 跟进时间线 */
.timeline { border-left: 2px solid var(--pine-100); padding-left: 18px; margin: 8px 0; }
.timeline .t-item { margin-bottom: 14px; position: relative; }
.timeline .t-item::before { content: ''; position: absolute; left: -23px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--pine-400); border: 2px solid var(--surface); }
.timeline .t-meta { font-size: 12px; color: var(--ink-400); }
/* 详情页签 */
.detail-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.detail-tabs button { border: none; background: none; padding: 8px 14px; font-size: 13.5px; color: var(--ink-500); border-bottom: 2px solid transparent; transition: all var(--t-fast); }
.detail-tabs button.active { color: var(--pine-700); border-bottom-color: var(--pine-500); font-weight: 500; }
.detail-tabs button:hover:not(.active) { color: var(--ink-900); }
/* 进度条 */
.progress-bar { background: var(--surface-3); border-radius: 99px; height: 8px; overflow: hidden; width: 130px; display: inline-block; vertical-align: middle; }
.progress-bar i { display: block; height: 100%; background: var(--pine-500); border-radius: 99px; transition: width var(--t-slow); }
.muted { color: var(--ink-400); font-size: 12px; }
.mt { margin-top: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .grid2 { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } }
/* 系统设置 Tab 分区 */
.set-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.set-tab { border: 1px solid var(--line); background: var(--surface); color: var(--ink-500); border-radius: 99px; padding: 7px 16px; font-size: 13px; cursor: pointer; transition: all var(--t-fast); }
.set-tab:hover { border-color: var(--pine-400); color: var(--pine-600); }
.set-tab.active { background: var(--pine-600, #2d6a4f); border-color: var(--pine-600, #2d6a4f); color: #fff; font-weight: 600; }
.set-pane { display: flex; flex-direction: column; gap: 14px; }
/* 2026-10-29 王总：系统设置去掉固定宽度，整页自适应铺开；卡片可并排，表单字段按宽度自动分列 */
.set-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 14px; align-items: start; }
.set-cols .card { margin-bottom: 0; }
.form-grid.auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.set-pane .ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 12px; }
.set-pane .ch-grid .ch-edit-row { margin-bottom: 0; }
.set-save { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; z-index: 20; }
.set-save .btn { box-shadow: 0 6px 18px rgba(20, 40, 32, .18); }
.set-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.set-card-head h3 { margin-bottom: 2px; }
.set-card-head .btn { white-space: nowrap; }
/* ============ 产品管理：一级分类分组折叠 + 弹窗分区美化（2026-09-01） ============ */
/* 分组行：整行可点折叠，上边框加粗与普通行区分 */
.prod-grp { cursor: pointer; background: var(--surface-2); user-select: none; }
.prod-grp:hover { background: var(--surface-3); }
.prod-grp td { border-top: 2px solid var(--line-strong); padding: 9px 12px; }
.prod-grp.folded td { border-bottom: 2px solid var(--line-strong); }
.prod-grp-arrow { display: inline-block; width: 14px; color: var(--ink-400); font-size: 11px; transition: transform var(--t-fast); }
.prod-grp-name { font-size: 13.5px; margin-right: 8px; }
/* 弹窗：分区标题 */
.prod-sec-title { font-size: 12px; font-weight: 600; color: var(--pine-700, var(--pine-500)); letter-spacing: .5px; margin: 2px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.prod-form .form-grid { margin-bottom: 16px; }
/* 记账类开关卡片：勾选后整卡变绿，比普通 checkbox 更醒目 */
.prod-bk-chk { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 11px 13px; cursor: pointer; background: var(--surface); transition: border var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
.prod-bk-chk:hover { border-color: var(--pine-500); }
.prod-bk-chk.on { border-color: var(--pine-500); background: var(--pine-50); box-shadow: 0 0 0 3px rgba(15,110,86,.08); }
.prod-bk-chk input { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--pine-600, #2d6a4f); flex-shrink: 0; }
.prod-bk-chk b { display: block; font-size: 13px; margin-bottom: 2px; }
.prod-bk-chk span { font-size: 12px; color: var(--ink-500); }
/* 金额：朱砂红 + 等宽数字（中国财务习惯） */
.money, .money b { color: var(--red); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-family: var(--font-mono); }
/* 数字全局等宽对齐 */
td b, .stat .num, .money, .login-tip, .bval { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* ============ 快捷筛选 chips（到期续费等） ============ */
.chip-group { display: inline-flex; gap: 6px; }
.chip { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-500); font-size: 12.5px; transition: all var(--t-fast); }
.chip:hover { border-color: var(--pine-400); color: var(--pine-600); }
.chip.on { background: var(--pine-600); border-color: var(--pine-600); color: #fff; }
/* ============ 经营看板 · 卡片级独立月份筛选（2026-09-01） ============ */
.bd-mctl { float: right; display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; position: relative; z-index: 3; }
.bd-mctl input[type=month] { height: 28px; padding: 2px 8px; font-size: 12.5px; color: var(--ink-700); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); transition: border var(--t-fast), box-shadow var(--t-fast); }
.bd-mctl input[type=month]:hover { border-color: var(--pine-400); }
.bd-mctl input[type=month]:focus { outline: none; border-color: var(--pine-500); box-shadow: 0 0 0 3px var(--pine-100, rgba(15,110,86,.12)); }
.bd-mbtn { height: 28px; padding: 0 12px; font-size: 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-500); cursor: pointer; transition: all var(--t-fast); }
.bd-mbtn:hover { border-color: var(--pine-400); color: var(--pine-600); }
.bd-mbtn.cur { border-color: var(--pine-600); color: var(--pine-600); background: var(--surface); }
.bd-mbtn:not(.cur) { color: var(--ink-700); }
/* 看板卡片头部：标题行与控件对齐、说明文字换行不挤压控件 */
.card h3 { overflow: hidden; }
.card h3 small.muted { margin-right: 4px; }
/* ============ 合同模板设置（2026-09-04 batch9 / batch10 美化） ============ */
/* 分区小标题：与产品管理「prod-sec-title」一致，松杉绿 + 下划线 */
.tpl-sec-title {
font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--pine-700, var(--pine-500));
margin: 4px 0 11px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 6px;
}
.tpl-sec-title .ico { font-size: 13px; }
/* 合同格式设置面板：整段浅底卡片，字段间距统一 */
.tpl-fmt-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin-top: 12px; }
/* 三栏配置网格：在窄屏自适应为单栏，避免挤压 */
.tpl-fmt-grid { display: grid; gap: 14px; }
.tpl-fmt-grid > .form-item { margin-bottom: 4px; }
@media (max-width: 980px) { .tpl-fmt-grid { grid-template-columns: 1fr !important; } }
/* 合同格式设置里的「签字栏」单选卡片（2026-09-04 优化：图标 + 头部 + 选中态更清晰） */
.tpl-sig-card {
transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
border: 1.5px solid var(--line-strong);
border-radius: 10px;
padding: 12px 14px;
background: var(--surface);
cursor: pointer;
position: relative;
}
.tpl-sig-card:hover { border-color: var(--pine-400); background: var(--surface-2); }
.tpl-sig-card b { color: var(--ink-900); }
.tpl-sig-card.is-sel {
border-color: var(--pine-500);
background: var(--pine-50);
box-shadow: 0 0 0 3px rgba(15,110,86,.09);
}
.tpl-sig-card .sig-ico {
display: flex; width: 26px; height: 26px; align-items: center; justify-content: center;
border-radius: 7px; font-size: 14px; background: var(--surface-2); border: 1px solid var(--line);
}
.tpl-sig-card.is-sel .sig-ico { background: var(--pine-500); color: #fff; border-color: var(--pine-500); }
.tpl-sig-card .sig-check {
position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%;
border: 1.5px solid var(--line-strong); background: var(--surface);
}
.tpl-sig-card.is-sel .sig-check { border-color: var(--pine-500); background: var(--pine-500); }
.tpl-sig-card.is-sel .sig-check::after {
content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 12px; font-weight: 700;
}
/* 模板卡片网格 */
.tpl-card {
transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
border: 1px solid var(--line); border-radius: var(--r-md);
display: flex; flex-direction: column; justify-content: space-between;
}
.tpl-card:hover { border-color: var(--pine-400); box-shadow: 0 6px 18px rgba(15,110,86,.08); transform: translateY(-1px); }
/* 模板编辑器（含 Quill 工具栏）占满整行；保证预览框不被业务下拉挤窄 */
.tpl-quill-editor { min-height: 220px; max-height: 50vh; overflow-y: auto; background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; }
.tpl-quill-editor .ql-editor { min-height: 180px; font-size: 14px; line-height: 1.6; }
/* Quill snow 工具栏微调：贴合清研风格（圆角、浅底、两端留白） */
.tpl-quill-wrap { border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; }
.tpl-quill-wrap .ql-toolbar { border: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.tpl-quill-wrap .ql-container { border: 0; }
/* 服务内容同步预览（放在模板编辑弹窗底部） */
.tpl-svc-preview code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; font-size: 11.5px; }
/* 模板编辑弹窗顶部说明条 */
.tpl-hint {
background: var(--pine-50); border: 1px solid var(--pine-100); border-radius: var(--r-sm);
padding: 8px 12px; font-size: 12.5px; color: var(--pine-800); line-height: 1.6; margin-bottom: 4px;
}
/* ============ 业务核实 · 一司一行项目 chips ============ */
.vitems { max-width: 580px; }
/* 业务核实页表格排版：客户列限宽但超长名称自动换行完整显示，等级/管家/汇总/截止日收紧，空间留给核实项目列
🚨 2026-10-16 王总「客户字段的行和其他字段行不一样高，看着像视觉错开」：
根因 = ① `.cell-co` 单独写了 `vertical-align: bottom`（其余列默认 middle）→ 客户名沉底、其他列居中；
② `.cell-sm { white-space: nowrap }` 被同选择器带到了 `td.cell-co` 之外，但客户名长时 `b` 换行仍会让
「客户列」行高与「核实项目列（inline-flex chip）」不同步，基线各走各的。
改法：**所有单元格统一 `vertical-align: middle`**；客户名与 chip 的行高统一 1.5；
chip 区改成 flex 换行容器，与其它列基线对齐。 */
.monthly-tbl th, .monthly-tbl td { vertical-align: middle; }
/* ⚠️ 全局 `.cell-co` 带 `vertical-align: bottom`（第 438 行，影响多页）→ 这里**只在业务核实表内**覆盖回 middle，
不去动全局类，避免把离档/合同等其他页面的排版一起改掉。 */
.monthly-tbl td.cell-co { vertical-align: middle; line-height: 1.5; }
.monthly-tbl th:nth-child(1), .monthly-tbl td.cell-co { width: 200px; min-width: 150px; max-width: 230px; }
.monthly-tbl td.cell-co b { display: block; max-width: 100%; overflow-wrap: anywhere; line-height: 1.5; }
.monthly-tbl th:nth-child(2) { width: 60px; }
.monthly-tbl th:nth-child(3) { width: 74px; }
.monthly-tbl th:nth-child(5) { width: 96px; }
.monthly-tbl th:nth-child(6) { width: 68px; }
.monthly-tbl .cell-sm { white-space: nowrap; }
.monthly-tbl td.cell-dl { font-variant-numeric: tabular-nums; color: var(--ink-600); }
/* chip 区：flex 换行 + 行高统一，避免 inline-flex 基线不齐造成的错位观感 */
.monthly-tbl td.vitems { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.vitem { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 3px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; border: 1px solid var(--line-strong); background: var(--surface); }
.vitem a { color: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; opacity: .85; }
.vitem a:hover { opacity: 1; }
.v-note { font-size: 11px; color: var(--ink-400); font-weight: 400; line-height: 1.3; }
.v-done { background: var(--pine-50); border-color: var(--pine-300); color: var(--pine-700); }
.v-pend { background: var(--amber-bg); border-color: rgba(138,94,14,.30); color: var(--amber); }
.v-od { background: var(--red-bg); border-color: rgba(179,38,30,.30); color: var(--red); }
/* 🚨 2026-10-16 新口径「未勾选也要出行」：空行样式 —— 整行淡一点，但行高与其它行完全一致 */
.monthly-tbl tr.row-empty td { color: var(--ink-400); }
.monthly-tbl tr.row-empty td.cell-co b { color: var(--ink-600); font-weight: 600; }
.v-empty { font-size: 12px; color: var(--ink-400); line-height: 1.5; }
.v-none { font-size: 11px; color: var(--ink-400); border: 1px dashed var(--line-strong); border-radius: 8px; padding: 2px 8px; white-space: nowrap; }
/* ============ 公司logo ============ */
.logo-img { width: auto; height: 1.1em; vertical-align: middle; margin-right: 8px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.08)); }
/* ============ 知识库 ============ */
.kb-wrap { display: flex; gap: 14px; align-items: flex-start; }
.kb-side { width: 210px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; }
.kb-cat { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; color: var(--ink-700); transition: all var(--t-fast); }
.kb-cat:hover { background: var(--surface-2); }
.kb-cat.active { background: var(--pine-50); color: var(--pine-700); font-weight: 500; }
.kb-count { margin-left: auto; font-size: 11px; color: var(--ink-400); background: var(--surface-2); border-radius: 9px; padding: 1px 8px; }
.kb-cat-del { font-style: normal; color: var(--ink-400); padding: 0 4px; border-radius: var(--r-xs); cursor: pointer; }
.kb-cat-del:hover { color: var(--red); background: var(--red-bg); }
.kb-main { flex: 1; min-width: 0; }
.kb-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.kb-toolbar input { flex: 1; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 13px; background: var(--surface); color: var(--ink-900); }
.kb-toolbar input:focus { outline: none; border-color: var(--pine-500); box-shadow: 0 0 0 3px rgba(15,110,86,.10); }
.kb-list { display: flex; flex-direction: column; gap: 10px; }
.kb-item { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; transition: border var(--t-fast), box-shadow var(--t-fast); }
.kb-item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.kb-item-main { flex: 1; min-width: 0; }
.kb-item-title { font-size: 14px; font-weight: 500; color: var(--ink-900); cursor: pointer; text-decoration: none; }
.kb-item-title:hover { color: var(--pine-600); text-decoration: underline; }
.kb-item-meta { font-size: 12px; color: var(--ink-400); margin-top: 4px; }
.kb-preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kb-preview-frame { width: 100%; height: calc(100vh - 200px); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
/* ============ 可搜索下拉选择器（发起合同 / 登记到账弹窗） ============ */
.pick { position: relative; }
.pick input { width: 100%; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 13px; background: var(--surface); color: var(--ink-900); box-sizing: border-box; transition: border var(--t-fast), box-shadow var(--t-fast); }
.pick input:focus { outline: none; border-color: var(--pine-500); box-shadow: 0 0 0 3px rgba(15,110,86,.10); }
.pick-list { display: none; position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.pick-list.show { display: block; }
.pick-item { padding: 8px 12px; font-size: 13px; color: var(--ink-700); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
.pick-item:last-child { border-bottom: none; }
.pick-item:hover { background: var(--pine-50); color: var(--pine-700); }
.pick-empty { padding: 10px 12px; font-size: 12.5px; color: var(--ink-400); text-align: center; }
/* ============ 岗位权限矩阵（系统设置-岗位权限，2026-08-28） ============ */
.perm-tbl { width: 100%; border-collapse: collapse; }
.perm-tbl th { padding: 8px 6px; text-align: center; font-size: 12.5px; color: var(--ink-500); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.perm-tbl td { padding: 7px 6px; text-align: center; border-bottom: 1px solid var(--line); font-size: 13px; }
.perm-tbl td:first-child { font-weight: 500; }
.perm-tbl tr:hover td { background: var(--surface-2); }
.perm-tbl .perm-grp td { background: var(--surface-2); font-weight: 600; font-size: 12px; color: var(--ink-500); letter-spacing: .5px; text-align: left; padding: 6px 8px; }
.perm-tbl input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--pine-600, #1d4ed8); cursor: pointer; }
.perm-tbl input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .6; }
/* v15 岗位管理视觉：提示条 + 销售岗开关框 */
.role-tip { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; }
.role-tip-inner { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ink-500); line-height: 1.65; }
.role-tip-inner b { color: var(--ink-700); font-weight: 600; margin-right: 2px; }
.role-sales, .form-item label.role-sales { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; height: auto; min-height: 44px; box-sizing: border-box; transition: border var(--t-fast), background var(--t-fast); margin-bottom: 0; font-size: 13px; color: var(--ink-700); font-weight: 400; }
.role-sales:hover { border-color: var(--pine-500); }
.role-sales input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--pine-600); cursor: pointer; flex-shrink: 0; margin: 0; }
.role-sales-box { display: flex; flex-direction: column; gap: 3px; line-height: 1.4; flex: 1; min-width: 0; }
.role-sales-box b { font-size: 13px; color: var(--ink-700); font-weight: 600; }
.role-sales-hint { font-size: 11.5px; color: var(--ink-500); }
.role-sales-box.on b { color: var(--pine-700); }
/* v16 权限矩阵列头：岗位名 + 数据范围/销售标签联动展示 */
.perm-tbl th.perm-col { vertical-align: top; padding: 8px 4px; }
.perm-col-name { font-weight: 600; font-size: 12.5px; color: var(--ink-700); margin-bottom: 4px; }
.perm-col-meta { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; align-items: center; }
/* ============ 岗位权限 · 左右分栏（2026-09-22 王总：岗位越来越多，旧横向矩阵铺不开且滚动丢上下文） ============ */
.perm-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.perm-tools .flex1 { flex: 1; }
.perm-dirty { font-size: 12.5px; color: var(--ink-400); }
.perm-dirty.on { color: var(--red); font-weight: 600; }
.perm-layout { display: flex; gap: 12px; align-items: stretch; min-height: 420px; }
.perm-side { width: 262px; flex: 0 0 262px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); padding: 8px; max-height: 62vh; overflow-y: auto; }
.perm-side-search { margin-bottom: 6px; }
.perm-side-search input { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 13px; background: var(--surface); color: var(--ink-700); }
.perm-side-grp { font-size: 11.5px; color: var(--ink-400); font-weight: 600; letter-spacing: .5px; padding: 8px 6px 4px; }
.perm-role-item { padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; margin-bottom: 4px; border: 1px solid transparent; background: var(--surface); }
.perm-role-item:hover { background: var(--surface-2); }
.perm-role-item.on { border-color: var(--pine-600); background: var(--pine-50); }
.perm-role-item.off { opacity: .62; }
.perm-role-item .pr-line1 { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-700); }
.perm-role-item .pr-line2 { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 3px; }
.perm-role-item .pr-line3 { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-400); }
.perm-role-item .pr-perm { color: var(--pine-700); font-weight: 600; }
.pr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: inline-block; }
.perm-main { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); max-height: 68vh; overflow-y: auto; }
.perm-main-head { position: sticky; top: 0; z-index: 2; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.perm-main-head .pm-title { font-size: 15px; font-weight: 700; color: var(--ink-700); }
.perm-main-head .pm-count { font-size: 12.5px; font-weight: 400; color: var(--ink-400); margin-left: 8px; }
.perm-main-head .pm-count b { color: var(--pine-700); font-size: 14px; }
.perm-main-head .pm-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 5px; font-size: 12px; }
.perm-bar { position: sticky; top: 66px; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.perm-bar .flex1 { flex: 1; }
.perm-kw { width: 240px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 13px; background: var(--surface); color: var(--ink-700); }
.perm-grp { border-bottom: 1px solid var(--line); }
.perm-grp-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; background: var(--surface); }
.perm-grp-head:hover { background: var(--surface-2); }
.perm-grp-head .pg-arrow { width: 12px; color: var(--ink-400); font-size: 11px; }
.perm-grp-head .pg-title { font-weight: 600; font-size: 13px; color: var(--ink-700); }
.perm-grp-head .pg-count { font-size: 11.5px; color: var(--ink-400); }
.perm-grp-head .pg-acts { margin-left: auto; display: flex; gap: 6px; }
.perm-grp-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 6px; padding: 8px 14px 12px; }
.perm-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.perm-item:hover { border-color: var(--line-strong); background: var(--surface-2); }
.perm-item.on { background: var(--pine-50); border-color: var(--pine-600); }
.perm-item input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--pine-600); cursor: pointer; flex: 0 0 auto; }
.perm-item input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .6; }
.perm-item .pi-name { font-size: 13px; color: var(--ink-700); flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.perm-item .pi-key { font-size: 11px; color: var(--ink-400); margin-left: auto; white-space: nowrap; }
.pi-warn { font-style: normal; font-size: 10px; color: #c2410c; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; margin-left: 4px; }
/* 权限点覆盖范围提示（2026-09-22）：一个权限点含多个子页面时，灰色小字标注，避免误以为漏配 */
/* 2026-10-25：提示文字独立一行 + 允许折行，防止固定栅格内溢出裁切 */
.pi-sub { font-style: normal; font-size: 10px; color: var(--ink-400, #9aa3b0); display: block; margin: 1px 0 0; line-height: 1.3; word-break: break-all; }
.pi-ro { flex: 0 0 auto; align-self: center; }
.pi-add { color: var(--pine-700); }
.pi-del { color: var(--red); }
/* 批量应用：目标岗位多选列表 */
.pa-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px; background: var(--surface-2); }
.pa-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-700); cursor: pointer; }
.pa-item input { width: 15px; height: 15px; accent-color: var(--pine-600); }
/* 权限体检：结论条目 */
.pa-find { border-left: 3px solid var(--line-strong); padding: 7px 12px; margin-bottom: 8px; background: var(--surface-2); border-radius: var(--r-sm); }
.pa-find.red { border-left-color: var(--red); }
.pa-find.orange { border-left-color: #f59e0b; }
.pa-find .paf-t { font-size: 13px; color: var(--ink-700); }
.pa-find .paf-d { font-size: 12px; color: var(--ink-500); margin-top: 3px; line-height: 1.6; }
/* ============ 商机管理卡片（2026-08-31 卡片式重做） ============ */
.opp-wrap { display: flex; flex-direction: column; gap: 12px; min-height: calc(100vh - 236px); }
/* 沉浸式空态（2026-09-05 商机管理）：居中引导，避免页面大片空白 */
.empty-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; text-align: center; padding: 48px 20px; flex: 1; color: var(--ink-400);
}
.empty-state .es-ico {
width: 68px; height: 68px; border-radius: 20px;
background: linear-gradient(135deg, var(--pine-50), var(--pine-100));
border: 1px solid var(--pine-100);
display: flex; align-items: center; justify-content: center;
font-size: 30px; margin-bottom: 6px;
}
.empty-state .es-tit { font-size: 16px; font-weight: 600; color: var(--ink-700); }
.empty-state .es-sub { font-size: 13px; color: var(--ink-400); line-height: 1.75; max-width: 420px; }
.empty-state .es-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.opp-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 16px 20px 18px; box-shadow: var(--shadow-xs);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.opp-card:hover { border-color: var(--pine-300); box-shadow: var(--shadow-sm); }
.opp-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.opp-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.opp-card-name { font-size: 16px; font-weight: 700; color: var(--pine-800); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.opp-count { background: var(--pine-100); color: var(--pine-700); font-weight: 600; }
.opp-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 2px; font-size: 13px; color: var(--ink-500); }
.opp-meta b { color: var(--ink-700); font-weight: 600; }
.opp-items { margin-top: 10px; border-top: 1px dashed var(--line-strong); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.opp-item {
display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md);
background: var(--surface-2); border: 1px solid var(--line);
transition: border-color var(--t-fast), background var(--t-fast);
}
.opp-item:hover { border-color: var(--pine-300); background: var(--pine-50); }
.opp-no {
flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
background: var(--pine-600); color: #fff; font-size: 12px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
.opp-demand { font-weight: 600; color: var(--ink-900); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-amount { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--pine-700); flex-shrink: 0; }
.opp-status { flex-shrink: 0; padding: 4px 8px; font-size: 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-1); color: var(--ink-700); cursor: pointer; }
.opp-edit { flex-shrink: 0; padding: 3px 8px; font-size: 12px; }
.opp-date { font-size: 12px; color: var(--ink-400); flex-shrink: 0; }
.opp-empty { margin-top: 10px; padding: 10px 14px; background: var(--surface-3); border-radius: var(--r-md); font-size: 13px; color: var(--ink-500); }
/* 重复客户提示条（2026-09-02 直录重复可录入：审核弹窗/直录成交表单黄条提示） */
.dup-tip { background:#fdf6e3; border:1px solid #f0c36d; color:#7a5c00; border-radius:8px; padding:8px 12px; font-size:13px; line-height:1.6; }
.dup-tip b { color:#b45309; }
/* ===== 直录归并 UI（2026-09-04 batch6-merge）===== */
/* 顶部候选条：橙色边框 + 大图标，确保老板一眼看到 */
.merge-bar-top { background:#fff7e6; border:2px solid #e6a23c; border-radius:8px; padding:10px 12px; margin:8px 0 12px 0; color:#7a5c00; box-shadow:0 2px 6px -2px rgba(230,162,60,.25); }
.merge-bar-top b { color:#b45309; }
.merge-cand-row { display:flex; align-items:center; gap:8px; padding:7px 4px; border-bottom:1px dashed #f0c36d; }
.merge-cand-row:last-child { border-bottom:0; }
.merge-lvl { display:inline-block; font-size:11px; color:#fff; padding:1px 6px; border-radius:8px; margin-left:4px; font-weight:600; vertical-align:middle; }
/* 选定归并后：顶部绿色「已归并到」提示条 */
.merge-target-box { background:#f0f9eb; border:2px solid #67c23a; border-radius:8px; padding:10px 12px; margin:8px 0 12px 0; color:#3e6e1e; box-shadow:0 2px 6px -2px rgba(103,194,58,.25); }
.merge-target-box b { color:#2d7a18; }
/* 归并目标自动填表字段：浅色底标（标识「从目标客户自动同步来」） */
.merge-prefill { background:#f0f9eb !important; border-color:#67c23a !important; color:#2d7a18 !important; box-shadow:0 0 0 1px #67c23a inset; }
.merge-prefill::placeholder { color:#a3c585; }
/* 公司名锁定：归并模式下公司名锁死（防止误改导致归并目标错位；改回其他名会自动取消归并） */
.merge-name-locked { background:#f0f9eb !important; border-color:#67c23a !important; color:#2d7a18 !important; cursor:not-allowed; }
/* 礼炮功能已于 2026-09-05 砍掉，celebr-* 样式全部移除 */
/* ===== 工作台卡片 ↻ 局部刷新按钮（2026-09-05 需求2，CSS 移到 .dash-card 块上方时合并后再次保留）=====
注：2026-09-05 已把 .dash-card 基础定位合并到上方；这里只保留 ↻ 按钮 + spin 动画 */
.dash-card-refresh {
position: absolute; top: 6px; right: 8px; z-index: 2;
background: rgba(255,255,255,.92); border: 1px solid var(--line);
border-radius: 50%; width: 26px; height: 26px; line-height: 24px;
text-align: center; cursor: pointer; font-size: 16px; color: var(--pine-700);
opacity: 0; transition: opacity .15s ease, transform .15s ease;
padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.dash-card:hover .dash-card-refresh { opacity: 1; }
.dash-card-refresh:hover { transform: scale(1.08); background: var(--pine-50); }
.dash-card-refresh.spinning {
opacity: 1; pointer-events: none;
animation: dash-refresh-spin .9s linear infinite;
}
@keyframes dash-refresh-spin { to { transform: rotate(360deg); } }
/* ============ 客户账套（代理记账做账闭环，2026-09-16）============ */
/* 账套详情头部：客户 + 准则 + 期间 + 状态，一屏看清当前在做哪套账 */
.ld-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ld-head .ld-co { font-size: 16px; font-weight: 600; color: var(--ink-900); font-family: var(--font-display); }
.ld-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-500); }
.ld-meta b { color: var(--ink-700); font-weight: 500; }
/* 金额单元格：等宽数字右对齐，借贷列一眼对齐 */
.ld-num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); text-align: right; white-space: nowrap; }
th.ld-num { text-align: right; }
.ld-tbl td.ld-num.muted, .ld-tbl td.ld-zero { color: var(--ink-400); }
/* 发票采集（2026-09-17，原名「发票池」）：待生成/未建账套等需要催办的数字与旁注，统一用琥珀色提请注意 */
.ip-warn { color: var(--amber); }
.stat .num.ip-warn { color: var(--amber); }
.ld-tbl td .ld-tagline.ip-warn { color: var(--amber); font-weight: 500; }
/* 表内层级：小计/合计/分节/上级科目 */
.ld-tbl tr.ld-sum td { background: var(--surface-2); font-weight: 600; border-top: 2px solid var(--line-strong); }
.ld-tbl tr.ld-sec td { background: var(--pine-50); font-weight: 600; color: var(--pine-700); }
.ld-tbl tr.ld-total td { background: var(--surface-2); font-weight: 600; }
.ld-tbl tr.ld-parent td { color: var(--ink-500); background: var(--surface-2); }
.ld-tbl td.ld-lv1 { padding-left: 12px; }
.ld-tbl td.ld-lv2 { padding-left: 30px; }
.ld-tbl td.ld-lv3 { padding-left: 48px; }
.ld-tbl td.ld-neg { color: var(--red); }
/* 凭证列表：一张凭证多行分录，首列 rowspan 合并 */
.ld-vtbl td { vertical-align: top; }
.ld-vtbl tr.ld-vhead td { border-bottom: none; padding-bottom: 2px; }
.ld-vtbl tr.ld-vbody td { border-bottom: none; padding-top: 2px; padding-bottom: 2px; color: var(--ink-700); }
.ld-vtbl tr.ld-vend td { border-bottom: 1px solid var(--line); padding-top: 2px; }
.ld-vtbl .ld-vno { font-weight: 600; white-space: nowrap; color: var(--ink-900); }
.ld-vtbl .ld-acts { white-space: nowrap; }
.ld-tagline { font-size: 11.5px; color: var(--ink-400); line-height: 1.35; }
/* 借贷平衡提示条 */
.ld-bal { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; }
.ld-bal.ok { background: var(--pine-50); color: var(--pine-700); }
.ld-bal.bad { background: var(--red-bg); color: var(--red); }
/* 凭证编辑：分录网格 */
.ld-el { width: 100%; border-collapse: collapse; }
.ld-el th { font-size: 12px; padding: 6px 6px; background: var(--surface-2); }
.ld-el td { padding: 4px 5px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ld-el input, .ld-el select { width: 100%; padding: 5px 7px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); font-size: 12.5px; background: var(--surface); }
.ld-el input.ld-amt { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.ld-tplbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
/* 报表滚动容器：表头吸顶 */
.ld-scroll { max-height: 64vh; overflow: auto; scrollbar-width: thin; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ld-scroll table { margin: 0; }
.ld-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); box-shadow: 0 1px 0 var(--line); }
.ld-hint { font-size: 12px; color: var(--ink-400); line-height: 1.6; padding: 10px 14px; background: var(--surface-2); border-radius: var(--r-sm); }
.ld-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ============================================================
待我审核 · 右下角全局提醒（2026-09-29 王总）
审批人不进对应模块也能看到「有单子等我审」：右下角常驻卡片 + 侧栏红色数字角标
============================================================ */
.appr-dock { position: fixed; right: 18px; bottom: 18px; z-index: 9000; width: 322px; max-width: calc(100vw - 36px);
background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
box-shadow: var(--shadow-lg); overflow: hidden; }
.appr-dock.hidden { display: none; }
.appr-dock.open { border-color: var(--amber); box-shadow: 0 12px 32px -8px rgba(138,94,14,.28), var(--shadow-md); }
.appr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px;
background: var(--amber-bg); border-bottom: 1px solid var(--line); }
.appr-head b { font-size: 13.5px; color: var(--amber); }
.appr-num { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--amber);
color: #fff; font-size: 12px; line-height: 18px; text-align: center; font-family: var(--font-mono); }
.appr-ops { display: flex; gap: 10px; font-size: 12px; }
.appr-ops a { cursor: pointer; color: var(--ink-400); }
.appr-ops a:hover { color: var(--pine-600); }
.appr-body { max-height: 46vh; overflow: auto; }
.appr-row { padding: 8px 12px; border-top: 1px solid var(--line); }
.appr-row:first-child { border-top: 0; }
.appr-t { font-size: 13px; font-weight: 600; color: var(--ink-900); margin-bottom: 2px; }
.appr-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: var(--r-xs);
background: var(--amber-bg); color: var(--amber); font-size: 11px; font-weight: 500; }
.appr-s { font-size: 12px; color: var(--ink-500); }
.appr-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 11px; }
.appr-more { padding: 6px 12px; font-size: 12px; color: var(--ink-400); border-top: 1px solid var(--line); }
/* 2026-10-28 王总「与我相关的都要提醒」：卡片内分区标题（待我审核 / 与我相关）+ 动态标签配色（绿=结果通知，与琥珀色的「要我去办」区分） */
.appr-group { padding: 6px 12px; font-size: 11.5px; font-weight: 600; color: var(--ink-400); background: var(--surface-2); border-top: 1px solid var(--line); letter-spacing: .03em; }
.appr-group:first-child { border-top: 0; }
.appr-tag.news { background: var(--pine-100); color: var(--pine-700); }
#sideNav .appr-badge { display: inline-block; margin-left: 6px; min-width: 16px; padding: 0 5px; border-radius: 9px;
background: var(--red); color: #fff; font-size: 11px; line-height: 16px; text-align: center; font-family: var(--font-mono); }
/* 2026-09-29 客户列表「备注」列：单行截断，悬停 title 看全文 */
.cust-remark { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-600, #5b6b7f); }
/* 2026-10-15 王总口径「审核前先看全部详情」：审核弹窗内的单据详情区块
（只读展示，与弹窗内的审核按钮视觉分层，避免审核人误点） */
.appr-detail { border: 1px solid var(--line, #e3e8ef); background: var(--surface-2, #fafbfc); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; max-height: 46vh; overflow-y: auto; }
.appr-detail table { margin: 0; }
.appr-detail th { width: 96px; white-space: nowrap; font-weight: 500; color: var(--ink-500, #6b7a8d); text-align: left; }
.appr-kv th { width: 96px; }
.appr-sec { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line, #e3e8ef); }
.appr-h { font-size: 12px; color: var(--ink-500, #6b7a8d); margin-bottom: 4px; }
/* 2026-10-23j 尾款认领：「审核中未到账」说明条 */
.pay-remain-tip{background:#fff7e6;border:1px solid #ffd591;border-radius:6px;padding:8px 10px;margin:6px 0 8px;font-size:12px;color:#8a5a00;line-height:1.65}
/* 2026-10-28 王总：订单管理 19 列把「客户」列挤到一字宽 ⇒ 公司名竖排一字一行、行高爆炸，操作按钮也竖着摞。
治法 = 表加横向滚动（服务客户页 svc-tbl-wrap 同款思路）+ 客户名单行省略 + 全部单元格不换行 ⇒ 行高恒一行。 */
.ord-tbl-wrap { overflow: auto; scrollbar-width: thin; }
.ord-tbl-wrap table { min-width: 1960px; }
.ord-tbl-wrap td { white-space: nowrap; vertical-align: middle; }
.ord-tbl-wrap .cell-co { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
/* 2026-10-29 王总：合同管理 14 列 ⇒ 公司名按字数换行、行高忽高忽低（与 10-28 订单管理同款治法）：
表横向滚动 + 单元格一律不换行 + 公司名/合同号单行省略（title 看全文）+ 状态副提示单行省略 ⇒ 行高恒定。 */
.ct-tbl-wrap { overflow: auto; scrollbar-width: thin; }
.ct-tbl-wrap table { min-width: 1760px; }
.ct-tbl-wrap td { white-space: nowrap; vertical-align: middle; }
.ct-tbl-wrap .cell-co { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.ct-tbl-wrap .ct-sub { margin-left: 6px; font-size: 11px; color: var(--ink-400); }
.ct-tbl-wrap .ct-sub.el { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.ct-tbl-wrap .empty { padding: 18px 0; }
.ord-tbl-wrap .empty { padding: 18px 0; }
/* ============ 经营看板 · 分组 tab + 卡片折叠 + 表格限高（2026-10-29 王总：滚动优化） ============
背景：10 张卡竖排约 8 屏（生产 40 人更夸张），用户反馈「滚动条要滚半天」。
三件套：① .bd-tabs 顶层分组一次只看一组；② .bd-fold 卡片折叠（状态存 localStorage）；
③ .bd-tbl 表格限高 620px 内滚 + 表头吸顶（滚数据时表头不跑）。 */
.bd-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; flex-wrap: wrap; }
.bd-tabs button { padding: 6px 16px; border: none; background: transparent; color: var(--ink-500); font-size: 13px; border-radius: 999px; cursor: pointer; transition: all var(--t-fast); }
.bd-tabs button:hover { color: var(--pine-600); }
.bd-tabs button.on { background: var(--surface); color: var(--pine-700); font-weight: 600; box-shadow: 0 1px 4px rgba(15,30,25,.14); }
/* 卡片标题行：折叠按钮在左、月份控件靠右（h3 改 flex 后 float 失效，用 margin-left:auto 顶过去） */
.bd-card > h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-card > h3 .bd-mctl { float: none; margin-left: auto; margin-right: 0; }
.bd-fold { flex: 0 0 auto; width: 18px; height: 18px; padding: 0; line-height: 16px; text-align: center; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink-500); font-size: 10px; cursor: pointer; transition: all var(--t-fast); }
.bd-fold:hover { border-color: var(--pine-400); color: var(--pine-600); background: var(--surface-2); }
.bd-card.folded { padding-bottom: 14px; }
.bd-card.folded > *:not(h3) { display: none !important; }
/* 表格限高：620px 内滚 + 表头吸顶。
⚠️ 必须 border-collapse:separate —— collapse 模式下 sticky 表头的底边框滚动时会消失；
改用 inset box-shadow 补底边。min-width:max-content 保证 14 列宽表不被压扁（横向滚）。 */
.bd-tbl { max-height: 620px; overflow: auto; scrollbar-width: thin; border-radius: 10px; }
.bd-tbl::-webkit-scrollbar { width: 9px; height: 9px; }
.bd-tbl::-webkit-scrollbar-thumb { background: #cfd8d3; border-radius: 9px; }
.bd-tbl::-webkit-scrollbar-thumb:hover { background: #b6c2bc; }
.bd-tbl table { width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; }
.bd-tbl th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--line); white-space: nowrap; }
.bd-tbl td, .bd-tbl th { white-space: nowrap; }
.bd-tbl td.cell-co, .bd-tbl .cell-co { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.bd-tbl .empty { padding: 18px 0; white-space: normal; }