/* 新每创 CRM · 本地版 */
:root {
--bg: #f4f6f3;
--surface: #ffffff;
--ink: #1b2421;
--muted: #6d7873;
--line: #e4e8e3;
--line-soft: #eef1ec;
--accent: #3864A1;
--accent-dark: #2c5285;
--accent-soft: #e8eef6;
--danger: #b42318;
--danger-soft: #fdecea;
--warn: #b54708;
--warn-soft: #fdf3e7;
--ok: #067647;
--ok-soft: #e8f5ee;
--radius: 14px;
--shadow: 0 1px 2px rgba(20, 35, 28, .04), 0 8px 24px rgba(20, 35, 28, .04);
/* ---- 状态标识色 token（三层视觉权重，所有状态色只准引用这里，禁止写死色值） ----
T1 焦点：需求发现→商务谈判推进色带 + 赢单；T2 过程：服务中/已交付；T3 沉默：输单/无效 */
--st-blue-bg:#E9EDF3; --st-blue-fg:#4A6072; /* 需求发现 */
--st-indigo-bg:#E8EFFA; --st-indigo-fg:#2A5FA8; /* 需求确认 */
--st-violet-bg:#ECEAFB; --st-violet-fg:#534AB7; /* 方案报价 */
--st-amber-bg:#FDF1DE; --st-amber-fg:#8A5A0B; /* 商务谈判 */
--st-green-bg:#DFF2E4; --st-green-fg:#0B6B3A; /* 赢单 */
--st-steel-bg:#E8EEF6; --st-steel-fg:#3864A1; /* 服务中 */
--st-sage-bg:#E4EFE8; --st-sage-fg:#4A7360; /* 已交付 */
--st-gray-bg:#EFF1F0; --st-gray-fg:#5F6B65; --st-gray-line:#D9DFDB; /* 输单（实线框） */
--st-ghost-bg:#F2F3F2; --st-ghost-fg:#66716B; --st-ghost-line:#D9DFDB; /* 无效（虚线框） */
--follow-dot:#F4772C; /* 要跟进角标 */
/* 尺寸 token */
--tag-fs:12px; --tag-lh:19px; --tag-pad-y:1px; --tag-pad-x:8px; --tag-radius:999px;
--badge-fs:13px; --badge-radius:8px; --chip-radius:8px;
/* 侧边栏宽度：侧栏自身与抽屉左边界共用同一个 token，
展开 / 折叠只需改这一处，两边同步，不会留下「侧栏收了、抽屉没跟上」的空白带 */
--side-w: 232px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 14px/1.55 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.app { display: flex; min-height: 100vh; }
/* ---------------- 侧边栏 ---------------- */
.sidebar {
width: var(--side-w); flex: none; background: var(--surface);
border-right: 1px solid var(--line);
display: flex; flex-direction: column;
padding: 20px 14px 18px; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 6px 22px; }
.brand-mark {
width: 38px; height: 38px; border-radius: 11px; flex: none;
background: linear-gradient(140deg, #4a7bbf, #2c5285);
color: #fff; font-weight: 700; font-size: 19px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px rgba(14, 124, 107, .25);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.brand-text strong { font-size: 15px; letter-spacing: .2px; white-space: nowrap; }
.brand-text span { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; flex-direction: column; gap: 3px; }
/* ICP 备案悬挂（管局要求：链接至工信部备案网） */
.beian {
margin-top: auto; padding-top: 14px;
font-size: 11px; color: var(--muted); text-decoration: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.beian:hover { color: var(--ink); text-decoration: underline; }
html.side-collapsed .beian { display: none; }
@media (max-width: 900px) { .beian { display: none; } }
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 10px;
color: var(--muted); font-size: 13.5px; font-weight: 500;
transition: background .12s, color .12s;
}
.nav-item svg { transition: color .12s; }
/* ---- 菜单彩色图标方案：每项一组 --nv 主色 / --nv-soft 选中浅底 / --nv-dark 选中文字 ----
色环均布 12 色相，饱和度取 500~700 档（适中、不刺眼），浅底统一 50 档，深字 700~800 档：
默认态 = 灰图标灰字（整套菜单安静）；悬浮态 = 图标亮主色、字加深、底浅灰；
选中态 = 该色浅底色块 + 主色图标 + 深色字；折叠态 = 同配色，只保留图标与浅底色块。 */
.nav-item[data-view="dashboard"] { --nv:#3b82f6; --nv-soft:#eff6ff; --nv-dark:#1d4ed8; } /* 工作台 · 蓝 */
.nav-item[data-view="customers"] { --nv:#0891b2; --nv-soft:#ecfeff; --nv-dark:#0e7490; } /* 客户列表 · 青 */
.nav-item[data-view="opportunities"] { --nv:#ea580c; --nv-soft:#fff7ed; --nv-dark:#c2410c; } /* 商机看板 · 橙 */
.nav-item[data-view="workorders"] { --nv:#6366f1; --nv-soft:#eef2ff; --nv-dark:#4f46e5; } /* 执行工单 · 靛 */
.nav-item[data-view="my"] { --nv:#8b5cf6; --nv-soft:#f5f3ff; --nv-dark:#7c3aed; } /* 我的项目 · 紫 */
.nav-item[data-view="products"] { --nv:#db2777; --nv-soft:#fdf2f8; --nv-dark:#be185d; } /* 产品库 · 品红 */
.nav-item[data-view="followups"] { --nv:#0d9488; --nv-soft:#f0fdfa; --nv-dark:#0f766e; } /* 跟进记录 · 翠绿 */
.nav-item[data-view="analytics"] { --nv:#16a34a; --nv-soft:#f0fdf4; --nv-dark:#15803d; } /* 数据分析 · 绿 */
.nav-item[data-view="suppliers"] { --nv:#b45309; --nv-soft:#fffbeb; --nv-dark:#92400e; } /* 供应商 · 琥珀棕 */
.nav-item[data-view="knowledge"] { --nv:#dc2626; --nv-soft:#fef2f2; --nv-dark:#b91c1c; } /* 知识库 · 红 */
.nav-item[data-view="demos"] { --nv:#0284c7; --nv-soft:#f0f9ff; --nv-dark:#0369a1; } /* 演示资源 · 天蓝 */
.nav-item[data-view="platforms"] { --nv:#64748b; --nv-soft:#f1f5f9; --nv-dark:#334155; } /* 平台链接 · 石板灰 */
.nav-item:hover { background: #f5f7f4; color: var(--ink); }
.nav-item:hover svg { color: var(--nv, var(--accent)); }
.nav-item.active { background: var(--nv-soft, var(--accent-soft)); color: var(--nv-dark, var(--accent-dark)); font-weight: 600; }
.nav-item.active svg { color: var(--nv, var(--accent)); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.side-btn {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 12px; border: 0; background: transparent; border-radius: 9px;
color: var(--muted); font-size: 13px; cursor: pointer; text-align: left;
}
.side-btn:hover { background: #f5f7f4; color: var(--ink); }
.side-btn svg { width: 16px; height: 16px; }
.side-hint { font-size: 12px; color: #98a29d; line-height: 1.6; padding: 10px 12px 0; margin: 0; }
.side-hint code { background: #eef1ec; padding: 1px 4px; border-radius: 4px; font-size: 12px; }
.side-menu { position: relative; }
.side-drop {
display: none; position: absolute; left: 10px; bottom: 44px;
background: #fff; border: 1px solid var(--line); border-radius: 10px;
box-shadow: var(--shadow); padding: 5px; z-index: 30; min-width: 132px;
}
.side-drop.open { display: block; }
.side-drop button {
display: block; width: 100%; text-align: left; border: 0; background: none;
padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: var(--ink); cursor: pointer;
}
.side-drop button:hover { background: #f5f7f4; }
/* ---------------- 主区域 ---------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
height: 72px; flex: none; display: flex; align-items: center; justify-content: space-between;
gap: 20px; padding: 0 30px; background: rgba(255, 255, 255, .82);
backdrop-filter: saturate(1.2) blur(8px);
border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.view-head { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.view-head h1 { font-size: 19px; margin: 0; font-weight: 600; letter-spacing: .2px; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.searchbox {
display: flex; align-items: center; gap: 10px; width: 440px;
background: #fff; border: 1.5px solid #c3d2ea; border-radius: 12px;
padding: 0 16px; height: 44px; transition: box-shadow .18s, border-color .18s; position: relative;
box-shadow: 0 1px 3px rgba(16,24,40,.05);
}
.searchbox:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(16,24,40,.08), 0 0 0 3px rgba(56,100,161,.08); }
.searchbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(56,100,161,.14); }
.searchbox .search-ico { width: 18px; height: 18px; color: var(--accent); flex: none; }
.searchbox input { border: 0; background: none; outline: none; width: 100%; font-size: 14px; color: var(--ink); }
.searchbox input::placeholder { color: #8a94a0; }
.search-hint {
font-size: 12px; font-weight: 600; color: #6b7a72; background: #eef2f0;
padding: 3px 8px; border-radius: 6px; flex: none; letter-spacing: .5px;
}
.searchbox:focus-within .search-hint { background: var(--accent-soft); color: var(--accent-dark); }
/* ---- 搜索下拉联想面板（客户 / 商机 / 跟进 分组）---- */
.search-pop {
position: absolute; top: calc(100% + 6px); right: 0;
width: min(430px, calc(100vw - 24px));
max-height: min(62vh, 480px); overflow-y: auto;
background: #fff; border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 10px 32px rgba(16, 24, 40, .14);
z-index: 95; padding: 6px;
animation: fade .12s ease;
}
.sp-group + .sp-group { margin-top: 4px; border-top: 1px solid var(--line-soft); padding-top: 4px; }
.sp-group-t {
font-size: 11.5px; font-weight: 500; color: var(--muted);
padding: 5px 10px 3px; letter-spacing: .5px;
}
.sp-item { padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.sp-item.active { background: var(--accent-soft); }
.sp-title {
font-size: 13px; font-weight: 500; color: var(--ink);
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-sub {
font-size: 12px; color: var(--muted); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-py { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent-dark); }
.sp-empty { padding: 16px 12px; font-size: 12.5px; color: var(--muted); text-align: center; }
@media (max-width: 640px) {
.search-pop { right: -60px; }
}
.view { padding: 26px 30px 70px; }
/* ---------------- 通用 ---------------- */
.muted { color: var(--muted); font-size: 12.5px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #8b958f; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line);
background: #fff; color: var(--ink); font-size: 13px; font-weight: 500;
cursor: pointer; transition: .12s; white-space: nowrap;
}
.btn:hover { border-color: #cfd6d0; background: #fbfcfa; }
.btn svg { width: 15px; height: 15px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.sm { padding: 4px 9px; font-size: 12px; border-radius: 7px; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: #f2d3cf; background: #fff; }
.btn.danger:hover { background: var(--danger-soft); }
/* 危险操作确认框：红色实心主按钮（比 .btn.danger 描边款更醒目） */
.btn.danger-fill { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-fill:hover { filter: brightness(0.92); }
/* 确认框挂在独立 #confirm-root，层级压过普通弹窗（z-index:60），可叠加在案件弹窗之上 */
.confirm-overlay { z-index: 90; }
.dlg-confirm { max-width: 460px; }
.dlg-confirm .dlg-msg { line-height: 1.8; white-space: normal; word-break: break-all; }
.dlg-confirm .dlg-msg b { word-break: break-all; }
.dlg-confirm .dlg-msg .red { color: var(--danger); }
.icon-btn {
width: 30px; height: 30px; border: 0; background: transparent; border-radius: 8px;
color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: #f2f4f1; color: var(--ink); }
.pill {
display: inline-flex; align-items: center; gap: 4px;
padding: var(--tag-pad-y) var(--tag-pad-x); border-radius: var(--tag-radius);
font-size: var(--tag-fs); line-height: var(--tag-lh);
font-weight: 500; white-space: nowrap; background: #eef1ec; color: #4d5852;
}
.stars { color: #e9a13b; letter-spacing: 1px; font-size: 12px; }
/* 阶段 / 状态配色 */
.s1 { background: var(--st-blue-bg); color: var(--st-blue-fg); }
.s2 { background: var(--st-indigo-bg); color: var(--st-indigo-fg); }
.s3 { background: var(--st-violet-bg); color: var(--st-violet-fg); }
.s4 { background: var(--st-amber-bg); color: var(--st-amber-fg); }
.s5 { background: var(--st-green-bg); color: var(--st-green-fg); }
.s6 { background: var(--st-steel-bg); color: var(--st-steel-fg); }
.s7 { background: var(--st-sage-bg); color: var(--st-sage-fg); }
/* T3 沉默层：去色 + 图标 + 线型区分（实线=输单 / 虚线=无效）；padding 减 1px 抵消边框，保持与其他 pill 等高 */
.s8 { background: var(--st-gray-bg); color: var(--st-gray-fg); border: 1px solid var(--st-gray-line); padding: 0 7px; }
.s9 { background: var(--st-ghost-bg); color: var(--st-ghost-fg); border: 1px dashed var(--st-ghost-line); padding: 0 7px; }
/* 要跟进角标：唯一暖色警示位，只在下次跟进 ≤ 今天时出现 */
.pill .pill-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--follow-dot);
border: 1px solid #fff; flex: none; margin-left: 1px;
}
.st0 { background: #eef1ec; color: #59645e; }
.st1 { background: #e8effa; color: #2a5fa8; }
.st2 { background: #fdf1de; color: #9a6212; }
.st3 { background: #e4f4ec; color: #0d7a4d; }
.st4 { background: #f2f0ea; color: #7a6a4a; }
.st5 { background: #fbe9e7; color: #a53226; }
/* ---------------- 工作台 ---------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 17px 18px 15px; box-shadow: var(--shadow);
}
.stat-label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stat-value { font-size: 27px; font-weight: 600; letter-spacing: -.5px; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.stat-sub { font-size: 12px; color: #8b958f; }
.stat.alert .stat-value { color: var(--danger); }
.panel {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 18px 20px; margin-top: 16px; box-shadow: var(--shadow);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.panel-head h2 { font-size: 14.5px; margin: 0; font-weight: 600; }
.panel-head .muted { font-size: 12px; }
.due-group { margin-top: 12px; }
.due-title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; }
.due-title .dot { width: 7px; height: 7px; border-radius: 50%; background: #c9d0ca; }
.due-title.red .dot { background: var(--danger); }
.due-title.amber .dot { background: #d98620; }
.due-title.green .dot { background: var(--ok); }
.due-title .count { font-weight: 500; color: #9aa49e; }
.due-item {
display: flex; align-items: center; gap: 12px; padding: 11px 10px;
border-radius: 10px; cursor: pointer; border: 1px solid transparent;
}
.due-item:hover { background: #f8faf7; border-color: var(--line-soft); }
.due-item + .due-item { border-top: 1px dashed var(--line-soft); }
.due-main { flex: 1; min-width: 0; }
.due-name { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-sub { font-size: 12px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.due-date.red { color: var(--danger); font-weight: 600; }
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 12px; padding: 11px 2px; border-top: 1px dashed var(--line-soft); cursor: pointer; }
.feed-item:first-child { border-top: 0; }
.feed-avatar {
width: 30px; height: 30px; border-radius: 9px; flex: none; background: var(--accent-soft);
color: var(--accent-dark); font-size: 12px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
}
.feed-body { min-width: 0; flex: 1; }
.feed-meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.feed-meta b { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.feed-text { font-size: 13px; margin-top: 3px; color: #3c4641; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ---------------- 客户列表 ---------------- */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
border: 1px solid var(--line); background: #fff; color: var(--muted);
padding: 5px 11px; border-radius: 999px; font-size: 12.5px; cursor: pointer; transition: .12s;
}
.chip:hover { border-color: #cfd6d0; color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.toolbar .spacer { flex: 1; }
.toolbar input.filter {
border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; font-size: 13px;
outline: none; width: 190px; background: #fff;
}
.toolbar input.filter:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,100,161,.08); }
/* 归属指派工具条（仅管理员可见） */
.owner-bar {
background: #f7f9fc; border: 1px solid var(--line); border-radius: var(--radius);
padding: 8px 12px; gap: 10px;
}
.owner-bar .pick-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.owner-bar .pick-all input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.owner-bar .pick-count { font-size: 12.5px; color: var(--muted); }
.owner-bar .pick-count.on { color: var(--accent); font-weight: 600; }
.owner-bar .owner-pick {
border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px;
font-size: 13px; background: #fff; outline: none; min-width: 150px;
}
.owner-bar .owner-pick:focus { border-color: var(--accent); }
/* 客户页工具条紧凑化（cust-bar）：归属范围+指派+批量改字段合并为一行后，
压缩内边距与间距，把省下的高度让给下方客户列表 */
.cust-bar { padding: 4px 8px; gap: 6px; margin-bottom: 8px; }
.cust-bar .chip { padding: 2px 7px; font-size: 12px; }
.cust-bar .chips { gap: 4px; }
.cust-bar .owner-pick { padding: 4px 6px; min-width: 0; font-size: 12.5px; }
.cust-bar .pick-all, .cust-bar .pick-count { font-size: 12px; }
.scope-bar.cust-bar { background: transparent; }
/* 懒加载「加载更多」 */
.more-wrap { display: flex; justify-content: center; padding: 12px 0 4px; }
.fu-end { text-align: center; font-size: 12px; color: var(--muted); padding: 12px 0 4px; }
.table .pick-cell, table.table .pick-cell { width: 40px; text-align: center; }
.pick-cell input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.table { width: 100%; border-collapse: collapse; }
.table th {
text-align: left; font-size: 12px; font-weight: 500; color: var(--muted);
padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #fbfcfa;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover { background: #f9fbf8; }
.cust-name { font-weight: 600; font-size: 13.5px; }
.cust-code { margin-top: 1px; }
.cell-strong { font-variant-numeric: tabular-nums; font-weight: 500; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty h3 { font-size: 15px; color: var(--ink); margin: 0 0 6px; font-weight: 600; }
.empty p { margin: 0 0 16px; font-size: 13px; }
/* ---------------- 看板 ---------------- */
.board { display: flex; gap: 13px; overflow-x: auto; padding: 2px 2px 14px; align-items: flex-start; }
.col { flex: 0 0 252px; background: #eef1ed; border-radius: 13px; padding: 10px; }
.col-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; }
.col-head .sum { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kcard {
background: #fff; border: 1px solid var(--line); border-radius: 11px;
padding: 11px 12px; margin-bottom: 8px; cursor: pointer; transition: .12s;
}
.kcard:hover { border-color: #cfd6d0; box-shadow: 0 3px 10px rgba(20,35,28,.06); transform: translateY(-1px); }
.kcard-name { font-size: 13px; font-weight: 600; line-height: 1.4; }
.kcard-cust { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kcard-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; font-size: 12px; color: var(--muted); }
.kcard-amt { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.kcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-soft); }
.kcard-date { font-size: 12px; color: var(--muted); }
.kcard-date.red { color: var(--danger); font-weight: 600; }
.col-empty { font-size: 12px; color: #9aa49e; text-align: center; padding: 14px 0 18px; }
/* ---------------- 跟进列表 ---------------- */
.fu-card {
background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
padding: 13px 16px; margin-bottom: 9px; box-shadow: 0 1px 2px rgba(20,35,28,.03);
cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.fu-card:hover { border-color: #cfd6d0; box-shadow: 0 3px 10px rgba(20,35,28,.05); }
.fu-head { display: flex; align-items: flex-start; gap: 12px; }
.fu-info { flex: 1; min-width: 0; }
.fu-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fu-cust { font-size: 14px; color: var(--ink); font-weight: 600; }
.fu-cust:hover { color: var(--accent-dark); }
.fu-opp { font-size: 12.5px; color: var(--muted); }
.fu-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.fu-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fu-content { font-size: 13.5px; line-height: 1.7; margin: 9px 0 0; white-space: pre-wrap; color: #313b36; }
.fu-next { font-size: 12.5px; color: var(--muted); margin-top: 7px; padding-left: 10px; border-left: 2px solid var(--accent-soft); }
.fu-actions { display: flex; gap: 4px; flex: none; opacity: 0; transition: .12s; }
.fu-card:hover .fu-actions { opacity: 1; }
.fu-files { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fu-file { font-size: 12px; color: var(--accent-dark); background: var(--accent-soft); padding: 2px 8px; border-radius: 6px; }
/* ---------------- 搜索 ---------------- */
.search-summary { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.search-summary b { color: var(--ink); }
.result-group { margin-bottom: 18px; }
.result-group h3 { font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.result-row {
background: #fff; border: 1px solid var(--line); border-radius: 10px;
padding: 11px 14px; margin-bottom: 7px; cursor: pointer;
}
.result-row:hover { border-color: #cfd6d0; background: #fbfcfa; }
.result-title { font-size: 13.5px; font-weight: 500; }
.result-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
mark { background: #fff2b8; color: inherit; padding: 0 1px; border-radius: 2px; }
/* ---------------- 抽屉 ---------------- */
.drawer-overlay {
position: fixed; inset: 0; background: rgba(18, 28, 23, .32);
z-index: 40; animation: fade .18s ease;
}
.drawer {
position: fixed; top: 0; right: 0; bottom: 0; width: min(800px, 100%);
background: #fff; z-index: 41; display: flex; flex-direction: column;
box-shadow: -18px 0 50px rgba(15, 30, 22, .16);
animation: slideIn .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes slideIn { from { transform: translateX(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.drawer-head { padding: 20px 26px 14px; border-bottom: 1px solid var(--line); }
.drawer-kicker { font-size: 12px; color: var(--muted); letter-spacing: .3px; }
.drawer-head h2 { font-size: 21px; margin: 3px 0 8px; font-weight: 600; letter-spacing: .2px; }
.drawer-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 工单头部快捷日期（申报截止/预计公示）：胶囊外形与 pill 一致，内嵌原生日期控件，点选即存 */
.proj-date {
display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
font-size: 12px; line-height: 1.5; cursor: pointer; transition: border-color .15s;
}
.proj-date:hover { border-color: var(--accent); }
.proj-date-label { color: var(--muted); font-size: 11.5px; }
.proj-date input {
border: 0; background: transparent; padding: 0; font-size: 12px; font-family: inherit;
color: var(--ink); cursor: pointer; outline: none;
}
.proj-date input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; margin: 0; }
.proj-date:hover input::-webkit-calendar-picker-indicator { opacity: 1; }
.drawer-actions { position: absolute; top: 20px; right: 22px; display: flex; gap: 6px; align-items: center; }
.tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--line); flex: none; overflow-x: auto; }
.tab {
border: 0; background: none; padding: 12px 12px 11px; font-size: 13px; color: var(--muted);
cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 600; }
.tab .n { font-size: 12px; color: #9aa49e; margin-left: 3px; }
.drawer-body { overflow-y: auto; padding: 20px 26px 48px; flex: 1; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; margin: 4px 0 0; }
.info-grid .full { grid-column: 1 / -1; }
.info-grid dt { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.info-grid dd { margin: 0; font-size: 13.5px; }
.note-box { background: #f8faf7; border: 1px solid var(--line-soft); border-radius: 10px; padding: 11px 13px; font-size: 13px; white-space: pre-wrap; min-height: 44px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
.section-head h3 { font-size: 13.5px; margin: 0; font-weight: 600; }
.contact-card {
border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px;
display: flex; align-items: center; gap: 12px; margin-bottom: 9px;
}
.contact-avatar {
width: 36px; height: 36px; border-radius: 10px; flex: none;
background: #eef3ef; color: #4c5a52; font-weight: 600; font-size: 14px;
display: flex; align-items: center; justify-content: center;
}
.contact-main { flex: 1; min-width: 0; }
.contact-name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.contact-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.contact-actions { display: flex; gap: 2px; opacity: 0; transition: .12s; }
.contact-card:hover .contact-actions { opacity: 1; }
.opp-row {
border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px;
margin-bottom: 9px; display: flex; align-items: center; gap: 14px;
}
.opp-main { flex: 1; min-width: 0; }
.opp-name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opp-sub { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; gap: 12px; flex-wrap: wrap; }
.opp-actions { display: flex; align-items: center; gap: 5px; opacity: 0; transition: .12s; }
.opp-row:hover .opp-actions { opacity: 1; }
/* ---- 商机自定义排序：↑ / ↓ / ☆ ---- */
.opp-order-tip { font-size: 12px; color: var(--muted); margin-right: auto; }
.opp-order { display: inline-flex; align-items: center; gap: 1px; }
.opp-order .icon-btn { width: 24px; height: 24px; font-size: 12px; }
.opp-order .icon-btn.on { color: #e9a13b; background: #fdf4e4; }
.icon-btn:disabled { opacity: .3; cursor: not-allowed; }
.icon-btn:disabled:hover { background: transparent; color: var(--muted); }
/* 置顶行：左侧橙色竖条 + 淡底色，常显（不随 hover） */
.opp-row.is-pinned { background: #fffdf6; border-color: #f0d9a8; position: relative; padding-left: 18px; }
.opp-row.is-pinned::before {
content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
background: #e9a13b; border-radius: 0 3px 3px 0;
}
.opp-pin-flag {
flex: none; font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: 999px;
background: #fdf4e4; color: #a9701a; border: 1px solid #f0d9a8; font-weight: 500;
}
@media (max-width: 1024px) {
.opp-order .icon-btn { width: 28px; height: 28px; font-size: 13px; }
}
.sys-hint { font-size: 12px; color: var(--muted); margin: -4px 0 12px; }
.sys-list { display: flex; flex-direction: column; gap: 9px; }
.sys-card {
border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px;
display: flex; align-items: flex-start; gap: 12px;
}
.sys-main { flex: 1; min-width: 0; }
.sys-name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sys-link { color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; }
.sys-link:hover { text-decoration: underline; }
.sys-sub { font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.sys-creds { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.sys-cred { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.sys-label { color: var(--muted); font-size: 12px; width: 40px; flex: none; }
.sys-val { font-size: 12.5px; }
.sys-pwd { letter-spacing: 1px; }
.sys-note {
margin-top: 9px; font-size: 12px; color: #66736b; background: #f8faf7;
border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 10px; white-space: pre-wrap;
}
.sys-actions { display: flex; gap: 2px; opacity: 0; transition: .12s; flex: none; }
.sys-card:hover .sys-actions { opacity: 1; }
.icon-btn.mini { padding: 1px 4px; font-size: 12px; }
.quick {
background: #f7f9f6; border: 1px solid var(--line); border-radius: 12px;
padding: 13px; margin-bottom: 18px;
}
.quick textarea {
width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px;
font: inherit; font-size: 13px; resize: vertical; min-height: 70px; outline: none; background: #fff;
}
.quick textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,100,161,.08); }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; margin-top: 10px; }
.qfield { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qfield .quick-label { flex: 0 0 auto; }
.qfield select, .qfield input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12.5px; background: #fff; color: var(--ink); outline: none; }
.qfield select:focus, .qfield input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,100,161,.08); }
.quick-foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.quick-foot .spacer { flex: 1; }
@media (max-width: 640px) { .quick-grid { grid-template-columns: 1fr; } }
/* 时间线 */
.timeline { position: relative; padding-left: 18px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.tl-item { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.tl-item::before {
content: ""; position: absolute; left: -18px; top: 4px; width: 9px; height: 9px;
border-radius: 50%; background: #fff; border: 2px solid var(--accent);
}
.tl-time { flex: none; width: 112px; white-space: nowrap; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.tl-main { flex: 1; min-width: 0; }
.tl-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.tl-opp { color: var(--muted); }
.tl-content { font-size: 13.5px; line-height: 1.75; white-space: pre-wrap; margin-top: 4px; color: #313b36; }
.tl-next { font-size: 12.5px; color: var(--muted); margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--accent-soft); }
.tl-actions { flex: none; display: flex; gap: 4px; opacity: 0; transition: .12s; }
.tl-item:hover .tl-actions { opacity: 1; }
/* 附件 */
.dropzone {
border: 1.5px dashed #cfd8d1; border-radius: 12px; padding: 22px 16px;
text-align: center; color: var(--muted); font-size: 12.5px; cursor: pointer;
background: #fbfcfa; transition: .12s; margin-bottom: 14px;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.dropzone b { color: var(--ink); font-size: 13px; display: block; margin-bottom: 3px; }
.file-row {
display: flex; align-items: center; gap: 11px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: 10px; margin-bottom: 7px;
}
.file-icon {
width: 32px; height: 32px; border-radius: 8px; background: #eef3ef; flex: none;
display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #5c6a62;
}
.file-main { flex: 1; min-width: 0; }
.file-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.file-summary { font-size: 12px; color: var(--muted); margin: -6px 0 10px; }
/* 客户等级彩色星徽（5★红 4★橙 3★绿 2★蓝 1★灰，未评级空白，对齐简道云 5 档口径） */
.lv-badge {
display: inline-flex; align-items: center; color: #fff;
font-size: 10.5px; letter-spacing: 1px; line-height: 1;
padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.lv5 { background: #e5484d; } .lv4 { background: #f59e0b; }
.lv3 { background: #30a46c; } .lv2 { background: #3b82f6; }
.lv1 { background: #9ca3af; }
/* 编辑弹窗里的等级下拉选择器：框内胶囊 + 点开面板 */
.lv-dd { position: relative; }
.lv-dd-box {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
background: #fff; cursor: pointer; min-height: 34px; box-sizing: border-box;
}
.lv-dd-box:hover { border-color: var(--accent); }
.lv-caret { color: var(--muted); font-size: 11px; }
.lv-dd-panel {
position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
background: #fff; border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 6px;
display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto;
}
.lv-dd-panel[hidden] { display: none; }
.lv-dd-opt {
display: flex; align-items: center; border: none; background: transparent;
cursor: pointer; padding: 7px 8px; border-radius: 8px; text-align: left;
font-size: 13px; color: var(--ink);
}
.lv-dd-opt:hover { background: var(--accent-soft); }
.lv-dd-clear { color: var(--muted); }
/* ---------------- 弹窗 ---------------- */
.modal-overlay {
position: fixed; inset: 0; background: rgba(18, 28, 23, .38); z-index: 60;
display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 4vh;
overflow-y: auto; animation: fade .15s ease;
}
.modal {
width: 560px; max-width: 100%; background: #fff; border-radius: 16px;
box-shadow: 0 24px 70px rgba(10, 25, 18, .28); animation: pop .18s cubic-bezier(.2,.8,.3,1);
overflow: hidden;
}
.modal.wide { width: 660px; }
/* 合作案件弹窗：字段多，加宽到 720px 减少纵向滚动；窄屏走 .modal 的 max-width:100% 自适应 */
.modal.case-modal-wide { width: 720px; }
/* 案件弹窗三列并排（专利类型 / 申请通道 / 业务类型）；窄屏收单列 */
.case-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 13px 14px; }
.case-3col .field { margin: 0; min-width: 0; }
@media (max-width: 640px) { .case-3col { grid-template-columns: 1fr; } }
/* 案件弹窗两列日期行（申请日 / 公告日），与 case-3col 同栅格；窄屏收单列 */
.case-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
.case-date-row .field { margin: 0; min-width: 0; }
@media (max-width: 640px) { .case-date-row { grid-template-columns: 1fr; } }
/* 合作案件 · 客户搜索选择器：文本框 + 隐藏 customer_id + 浮层下拉（最多 30 条，客户端过滤） */
.cust-picker { position: relative; }
.cust-main { display: flex; gap: 6px; align-items: center; }
.cust-main input[type="text"] { flex: 1; width: auto; }
.cust-drop {
position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: 4px;
max-height: 264px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 25, 20, .14);
}
.cust-item { padding: 7px 11px; font-size: 13px; cursor: pointer; }
.cust-item + .cust-item { border-top: 1px solid var(--line-soft); }
.cust-item:hover, .cust-item.act { background: var(--accent-soft); }
.cust-empty { padding: 14px 11px; font-size: 12.5px; color: var(--muted); text-align: center; }
@keyframes pop { from { transform: translateY(8px) scale(.99); opacity: .5; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px 13px; border-bottom: 1px solid var(--line-soft); }
.modal-head h2 { font-size: 15.5px; margin: 0; font-weight: 600; }
.modal-body { padding: 18px 22px 4px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.field label .req { color: var(--danger); margin-left: 2px; }
.field label.cb-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); margin-bottom: 0; }
.field label.cb-line input { width: auto; margin: 0; }
.field input, .field select, .field textarea {
width: 100%; border: 1px solid var(--line); border-radius: 9px;
padding: 8px 10px; font: inherit; font-size: 13px; background: #fff; color: var(--ink); outline: none;
}
.field textarea { resize: vertical; min-height: 76px; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,100,161,.09);
}
.field .hint { font-size: 12px; color: #98a29d; margin-top: 3px; }
/* 快捷日期：日历控件选历史日期太慢，给「今天/昨天/上月今天/上月末」一键落点 */
.dq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dq-chip {
font: inherit; font-size: 12px; line-height: 1;
padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px;
background: #fff; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.dq-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-soft, #fafbfc); }
.dq-chip:active { transform: translateY(1px); }
/* 分段式日期输入（年/月/日三格）：年份输满 4 位自动跳月，修复原生控件年份不跳格 */
.dseg {
position: relative; display: flex; align-items: center;
border: 1px solid var(--line); border-radius: 9px; background: #fff;
padding: 0 6px 0 10px; height: 38px; width: 100%;
}
.dseg:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,100,161,.09); }
.dseg input { border: 0; outline: none; background: none; padding: 0 2px; font: inherit; font-size: 13.5px; text-align: center; color: var(--ink); }
.dseg input:focus { box-shadow: none; }
.dseg-y { width: 54px; }
.dseg-m, .dseg-d { width: 30px; }
.dseg-slash { color: var(--muted); margin: 0 1px; }
.dseg-cal { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 5px; margin-left: auto; display: flex; align-items: center; }
.dseg-cal:hover { color: var(--accent); }
/* 日历用的隐藏原生控件：不可见但可 showPicker()（display:none 会让面板弹不出） */
.dseg-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
/* 弹窗上传组件：文件名回显 */
.modal-file-name { font-size: 12.5px; color: var(--ok); padding-top: 5px; }
/* 登记到账：左列时间 / 右列金额+放大备注 */
.pay-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 18px; align-items: start; }
.pay-grid .field textarea { min-height: 168px; }
.check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); padding-top: 2px; }
.check input { width: auto; }
.form-error { color: var(--danger); font-size: 12.5px; padding: 0 22px 8px; }
/* ---------------- 提示 ---------------- */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
background: #1c2621; color: #fff; padding: 9px 18px; border-radius: 10px;
font-size: 12.5px; opacity: 0; pointer-events: none; transition: .2s; z-index: 90;
box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: #8f1d14; }
.loading { padding: 60px 0; text-align: center; color: var(--muted); font-size: 13px; }
.skeleton { height: 14px; background: #eef1ec; border-radius: 4px; margin: 8px 0; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #d7ddd7; border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #c3cbc3; background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }
/* 侧栏收窄：只改 --side-w，抽屉左边界自动跟随（原来抽屉是写死 204px 的第二处硬编码，易漏改） */
@media (max-width: 1180px) {
:root { --side-w: 204px; }
.stats { grid-template-columns: repeat(2, 1fr); }
.searchbox { width: 240px; }
}
@media (max-width: 900px) {
:root { --side-w: 64px; }
.sidebar { padding: 18px 8px; }
.brand { justify-content: center; padding: 2px 0 20px; }
.brand-text, .side-hint, .nav-item .nav-label { display: none; }
.nav-item { justify-content: center; gap: 0; padding: 11px 0; }
.nav-item svg { margin: 0; }
.side-btn { font-size: 0; justify-content: center; padding: 10px 0; }
.side-drop { left: 56px; bottom: 10px; }
.topbar { padding: 0 16px; }
.view { padding: 18px 16px 60px; }
.searchbox { width: 170px; }
.top-actions .btn.primary { padding: 8px 10px; font-size: 0; gap: 0; }
.top-actions .btn.primary svg { margin: 0; }
.form-grid { grid-template-columns: 1fr; }
.info-grid { grid-template-columns: 1fr; }
.drawer-head { position: relative; padding: 18px 18px 12px; }
.drawer-body { padding: 16px 18px 40px; }
.drawer-actions { position: static; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.drawer-actions .btn { display: inline-flex; }
.drawer-actions .icon-btn { position: absolute; top: 12px; right: 14px; }
}
/* ---------- 销售简报 ---------- */
.brief-select {
margin-left: auto;
padding: 6px 10px;
border: 1px solid var(--border, #e2e5e9);
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 13px;
cursor: pointer;
}
.brief-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
padding: 14px 16px;
}
.brief-item {
background: var(--bg-soft, #f7f8fa);
border-radius: 10px;
padding: 12px 14px;
}
.brief-value {
font-size: 26px;
font-weight: 700;
color: var(--brand, #1f7a5a);
line-height: 1.2;
}
.brief-unit { font-size: 13px; font-weight: 500; margin-left: 3px; color: var(--muted, #8a919c); }
.brief-label { font-size: 13px; font-weight: 600; margin-top: 2px; }
.brief-sub { font-size: 12px; color: var(--muted, #8a919c); margin-top: 2px; }
.brief-funnel { padding: 4px 16px 16px; }
.brief-funnel-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.funnel-row {
display: grid;
grid-template-columns: 64px 1fr 150px;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.funnel-label { font-size: 12px; color: var(--muted, #6b7280); text-align: right; }
.funnel-bar-wrap { background: var(--bg-soft, #f0f2f5); border-radius: 6px; height: 18px; overflow: hidden; }
.funnel-bar {
height: 100%;
border-radius: 6px;
background: linear-gradient(90deg, #2f9e77, #6fc7ab);
min-width: 0;
}
.funnel-num { font-size: 12px; color: var(--muted, #6b7280); white-space: nowrap; }
.funnel-num b { color: var(--text, #222); }
/* ---------- 分页 ---------- */
.pager {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 14px 0 6px;
}
.pager .btn.mini { padding: 4px 12px; font-size: 13px; }
.pager .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
/* ---------- 数据日志 ---------- */
.audit-list { display: flex; flex-direction: column; gap: 10px; }
.audit-item {
display: flex;
gap: 10px;
background: var(--bg-soft, #f7f8fa);
border-radius: 10px;
padding: 10px 12px;
}
.audit-avatar {
flex: 0 0 30px;
width: 30px; height: 30px;
border-radius: 50%;
background: #e8590c;
color: #fff;
font-size: 14px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
}
.audit-main { flex: 1; min-width: 0; }
.audit-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.audit-head b { font-size: 13.5px; }
.audit-action {
font-size: 12px;
padding: 1px 8px;
border-radius: 999px;
background: #eef1f4;
color: #5b6470;
}
.audit-action.ok { background: #e3f5ec; color: #1f7a4d; }
.audit-action.stage { background: #e7edfb; color: #2b5fb8; }
.audit-target { font-size: 12px; }
.audit-time { margin-left: auto; font-size: 12px; color: var(--muted, #8a919c); white-space: nowrap; }
.audit-changes { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.audit-change {
display: flex; align-items: center; gap: 6px;
font-size: 12.5px; min-width: 0; flex-wrap: wrap;
}
.ac-label { color: var(--muted, #6b7280); flex: 0 0 auto; }
.ac-old, .ac-new {
padding: 1px 6px;
border-radius: 5px;
max-width: 46%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-old { background: #fdecec; color: #b23b3b; text-decoration: line-through; text-decoration-color: rgba(178,59,59,.55); }
.ac-new { background: #e3f5ec; color: #1f7a4d; }
.ac-arrow { color: var(--muted, #8a919c); }
/* ---------- 列表区域内部滚动 + 吸顶表头 ---------- */
.table-wrap.scroll-y {
max-height: calc(100vh - 178px);
overflow-y: auto;
overflow-x: auto;
}
.table-wrap.scroll-y .table th {
position: sticky;
top: 0;
z-index: 2;
}
/* ---------- 宽表格卡片化（P1-5）----------
企业档案、知产台账、研发/政府项目、平台链接等表格列多，小屏横向拖动很难用。
这里沿用客户列表的卡片化做法：≤900px 时每行变一张卡，表头文字由 JS 自动
写到 td 的 data-label 上作为字段名，不需要逐个模板改。 */
@media (max-width: 900px) {
.table-wrap.t-cards { border: none; box-shadow: none; background: transparent; overflow: visible; }
.table-wrap.t-cards table.table { min-width: 0; }
.table-wrap.t-cards .table thead { display: none; }
.table-wrap.t-cards .table tbody { display: block; }
.table-wrap.t-cards .table tr {
display: block; background: var(--surface, #fff); border: 1px solid var(--line);
border-radius: 12px; margin-bottom: 10px; padding: 12px 14px;
}
.table-wrap.t-cards .table td {
display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
padding: 5px 0; border: none; white-space: normal; text-align: right; font-size: 13px;
}
.table-wrap.t-cards .table td::before {
content: attr(data-label); font-weight: 500; color: var(--muted); font-size: 12px;
flex: none; margin-right: 12px; text-align: left;
}
.table-wrap.t-cards .table td:first-child {
display: block; text-align: left; padding-bottom: 8px; font-weight: 500;
border-bottom: 1px solid var(--line-soft, #eceef0);
}
.table-wrap.t-cards .table td:first-child::before { content: none; }
.table-wrap.t-cards .table td[data-label=""] { justify-content: flex-end; }
.table-wrap.t-cards .table td[data-label=""]::before { content: none; }
.table-wrap.t-cards .table td[colspan] { display: block; text-align: center; }
.table-wrap.t-cards .table td[colspan]::before { content: none; }
/* 卡片里输入框要能撑满，否则编辑企业档案时会挤成一条 */
.table-wrap.t-cards .prof-table input,
.table-wrap.t-cards .prof-table select { width: 100%; min-width: 0; max-width: 100%; }
.table-wrap.t-cards .prof-table td:has(> input) { flex-wrap: wrap; }
}
/* ---------- 简道云风格底部分页条 ---------- */
.pager-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 4px 0;
}
.pager-left { display: flex; align-items: center; gap: 10px; }
.pager-right { display: flex; align-items: center; gap: 8px; }
.pager-size {
padding: 5px 8px;
border: 1px solid var(--line, #e2e5e9);
border-radius: 7px;
background: var(--surface, #fff);
font: inherit;
font-size: 12.5px;
color: var(--text, #222);
cursor: pointer;
}
.pg-btn {
width: 28px; height: 28px;
border: 1px solid var(--line, #e2e5e9);
border-radius: 7px;
background: var(--surface, #fff);
color: var(--text, #222);
font-size: 15px;
line-height: 1;
cursor: pointer;
}
.pg-btn:hover:not([disabled]) { border-color: var(--brand, #1f7a5a); color: var(--brand, #1f7a5a); }
.pg-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.pg-info { font-size: 12.5px; color: var(--muted, #6b7280); min-width: 44px; text-align: center; }
/* 快捷跟进表单标签 + 时间输入 */
.quick-label { font-size: 12px; color: var(--muted, #6b7280); white-space: nowrap; }
.quick-row input[type="datetime-local"] {
border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit;
font-size: 12.5px; background: #fff; color: var(--ink); outline: none; max-width: 190px;
}
.pill.green { background: #e3f5ec; color: #1f7a4d; }
/* ---------- 附件在线预览 ---------- */
.preview-modal {
width: min(920px, 92vw);
height: min(720px, 86vh);
background: var(--surface, #fff);
border-radius: 14px;
box-shadow: 0 18px 60px rgba(0, 0, 0, .25);
display: flex;
flex-direction: column;
overflow: hidden;
}
.preview-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--line, #e2e5e9);
flex: 0 0 auto;
}
.preview-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.preview-body { flex: 1; min-height: 0; }
.preview-frame { width: 100%; height: 100%; border: 0; background: #525659; }
.preview-center { display: flex; align-items: center; justify-content: center; overflow: auto; background: #f2f3f5; }
.preview-media { max-width: 96%; max-height: 96%; object-fit: contain; box-shadow: 0 4px 18px rgba(0,0,0,.15); }
/* 区块级行内编辑（研发项目 / 知产台账 / 政府项目 / 档案各区块，与财务档案同构） */
.sec-table td { padding: 6px 8px; }
.sec-table td input, .sec-table td select { width: 100%; min-width: 0; }
.sec-table td input[type="number"]::-webkit-outer-spin-button,
.sec-table td input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sec-table td input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
tr.sec-del td { opacity: .45; }
tr.sec-del td input, tr.sec-del td select { text-decoration: line-through; }
.sec-err, .sec-err:focus { border-color: var(--danger, #c0392b) !important; background: #fff5f4; }
tr.sec-row-err td { background: #fff5f4; }
/* 区块保存条与财务档案共用 .fin-save-bar，禁用态同一视觉 */
.fin-save-bar .btn[disabled] { opacity: .45; cursor: not-allowed; }
/* ---- 知产台账专用表格（仅本模块）：列宽拖拽 + 吸顶表头 + 底部常驻横滚条 + 可选冻结首列 ---- */
.ips-wrap {
max-height: 68vh; overflow: auto;
border: 1px solid var(--line); border-radius: var(--radius);
background: var(--surface); box-shadow: var(--shadow);
}
.ips-table { table-layout: fixed; margin: 0; }
.ips-table th { position: relative; }
.ips-table thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--line); }
.ips-table .th-txt { display: inline-block; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.ips-table .col-grip { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 4; }
.ips-table .col-grip:hover { background: linear-gradient(90deg, transparent, rgba(56,100,161,.3), transparent); }
.ips-freeze .ips-table th:first-child,
.ips-freeze .ips-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.ips-freeze .ips-table thead th:first-child { z-index: 3; background: #fbfcfa; }
.ips-freeze .ips-table th:first-child { box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.ips-freeze .ips-table td:first-child { box-shadow: inset -1px 0 0 var(--line); }
/* 底部常驻横滚拖拽条：数据多少都显示，与容器 scrollLeft 双向同步 */
.hscroll { height: 14px; margin-top: 6px; background: var(--line-soft); border-radius: 999px; position: relative; cursor: pointer; }
.hscroll-thumb { position: absolute; top: 2px; left: 0; height: 10px; min-width: 40px; border-radius: 999px; background: #c3cdc4; }
.hscroll:hover .hscroll-thumb, .hscroll:active .hscroll-thumb { background: var(--accent); }
/* 列设置下拉面板 */
.col-menu-wrap { position: relative; }
.ips-col-menu {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
box-shadow: var(--shadow); padding: 10px 12px; min-width: 168px;
}
.ips-col-menu label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 4px 2px; cursor: pointer; white-space: nowrap; }
.ips-col-menu .icm-title { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.ips-col-menu .icm-sep { border-top: 1px solid var(--line-soft); margin: 6px 0; }
/* 凭证行文件名 = 预览入口：默认与正文同色虚线下划线，悬停变主题色 */
.fitem a.fname {
color: var(--text, #222);
text-decoration: none;
border-bottom: 1px dashed var(--line, #d6dade);
cursor: pointer;
}
.fitem a.fname:hover { color: var(--accent, #1f7a5a); border-bottom-color: var(--accent, #1f7a5a); }
/* 页码可编辑输入框 */
.pg-input {
width: 44px;
padding: 2px 4px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
font: inherit;
font-size: 12.5px;
color: var(--text, #222);
text-align: center;
-moz-appearance: textfield;
appearance: textfield;
}
.pg-input::-webkit-inner-spin-button, .pg-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pg-input:hover { border-color: var(--line, #e2e5e9); background: var(--surface, #fff); }
.pg-input:focus { border-color: var(--brand, #1f7a5a); background: #fff; outline: none; }
/* ---------- 关键日期 & 回款 ---------- */
.due-date.amber { color: #d98620; font-weight: 600; }
.due-date.green { color: var(--ok); }
.pill.amber { background: #fdf3e3; color: #b07115; }
.pill.red { background: #fdecec; color: #b23b3b; }
/* 回款进度 */
.pay-box { padding: 6px 0 2px; }
.pay-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pay-item { font-size: 13px; color: var(--muted); }
.pay-item b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pay-item b.green { color: var(--ok); }
.pay-item.red b { color: var(--danger); }
.pay-bar { height: 8px; border-radius: 6px; background: #edf0ee; margin: 8px 0 6px; overflow: hidden; }
.pay-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2f9e77, #6fc7ab); transition: width .3s; }
/* 关键日期卡片 */
.kd-list { display: flex; flex-direction: column; gap: 10px; }
.kd-card {
display: flex; align-items: center; gap: 12px;
border: 1px solid var(--line-soft); border-radius: 10px; padding: 11px 14px;
}
.kd-card.done { opacity: 0.55; }
.kd-main { flex: 1; min-width: 0; }
.kd-title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.kd-date { font-size: 12.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.kd-date.red { color: var(--danger); font-weight: 600; }
.kd-date.amber { color: #d98620; font-weight: 600; }
.kd-note { font-size: 12px; color: var(--muted); margin-top: 3px; }
.kd-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* 负责人 / 循环标记：三处（客户卡、工单抽屉、工作台）统一小灰签，不抢日期本身的颜色 */
.kd-owner {
font-size: 11.5px; font-weight: 500; color: #5b665f;
background: #f1f3ef; border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.kd-title .pill.tag, .kd-title .kd-owner { flex: none; }
/* 工作台条目的标题允许换行，否则「每年 / 负责人」会被 nowrap 截掉 */
.kd-name { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.due-item.kd-soon { background: #fffcf4; }
.due-item.kd-soon:hover { background: #fff8e8; }
/* 工单详情：项目级关键日期（长周期项目靠它兜年度反复事项） */
.kd-line {
display: flex; align-items: center; gap: 10px;
padding: 9px 2px; border-bottom: 1px solid var(--line-soft);
}
.kd-line:last-child { border-bottom: 0; }
.kd-line.done { opacity: 0.5; }
.kd-line.done .kd-title { text-decoration: line-through; }
.kd-sub { font-size: 12px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.kd-line.red .kd-sub { color: var(--danger); font-weight: 600; }
.kd-line.amber .kd-sub { color: #d98620; font-weight: 600; }
.kd-check {
flex: 0 0 auto; width: 18px; height: 18px; padding: 0; border-radius: 5px;
border: 1px solid var(--line); background: var(--surface); color: #fff;
font-size: 11px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.kd-check.on { background: var(--ok); border-color: var(--ok); }
.kd-empty {
font-size: 12.5px; color: var(--muted); line-height: 1.6;
padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px;
}
.kd-add {
margin-left: 8px; padding: 0 2px; border: 0; background: none;
font-size: 11px; font-weight: 400; color: var(--muted); cursor: pointer;
opacity: 0; transition: opacity .15s;
}
.tl-item:hover .kd-add, .kd-add:focus-visible { opacity: 1; }
@media (hover: none) { .kd-add { opacity: 1; } }
/* 商机「关键节点」聚合卡（需求二 V2）。
类名一律 kjt- 前缀：.timeline/.tl-item/.tl-dot 已被工单节点时间轴占用，
复用会直接串样式（工单那条轴自带竖线与 padding-bottom）。 */
.kjt { display: block; }
.kjt-head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 12.5px; color: var(--muted); margin-bottom: 8px;
}
.kjt-head b { color: var(--ink); }
.kjt-grow { flex: 1 1 auto; }
.kjt-group { margin-bottom: 10px; }
.kjt-ghead {
display: flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; color: var(--ink-2, #4d5852);
padding: 4px 0; border-bottom: 1px solid var(--line-soft);
}
.kjt-item {
display: flex; align-items: center; gap: 10px;
padding: 7px 8px; border-radius: 8px; cursor: default;
}
.kjt-item[onclick] { cursor: pointer; }
.kjt-item:hover { background: #f7f9f6; }
.kjt-dot {
flex: none; width: 7px; height: 7px; border-radius: 50%;
background: var(--line); border: 1px solid var(--line);
}
.kjt-item.done .kjt-dot { background: var(--ok); border-color: var(--ok); }
.kjt-item.done { opacity: .55; }
.kjt-item.done .kjt-label { text-decoration: line-through; }
.kjt-item.overdue .kjt-dot, .kjt-item.today .kjt-dot { background: #e5484d; border-color: #e5484d; }
.kjt-item.due .kjt-dot { background: #e8a33d; border-color: #e8a33d; }
.kjt-item.overdue, .kjt-item.today { background: #fdf1f1; }
.kjt-item.overdue:hover, .kjt-item.today:hover { background: #fbe9e9; }
.kjt-item.due { background: #fffcf4; }
.kjt-item.due:hover { background: #fff8e8; }
.kjt-main { flex: 1 1 auto; min-width: 0; }
.kjt-label {
font-size: 13.5px; color: var(--ink); white-space: normal;
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.kjt-sub { font-size: 12px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.kjt-when {
flex: none; text-align: right; font-size: 12px; color: var(--muted);
font-variant-numeric: tabular-nums; line-height: 1.4;
}
.kjt-when b { display: block; font-weight: 600; font-size: 12.5px; color: var(--ink); }
.kjt-when.overdue b, .kjt-when.today b { color: #e5484d; }
.kjt-when.due b { color: #d98620; }
.kjt-when.overdue span, .kjt-when.today span { color: #e5484d; font-weight: 600; }
.kjt-when.due span { color: #d98620; font-weight: 600; }
.kjt-when.done b { color: var(--ok); }
.kjt-foot { font-size: 11.5px; padding-top: 6px; border-top: 1px dashed var(--line-soft); line-height: 1.6; }
.kjt-empty {
font-size: 12.5px; color: var(--muted); line-height: 1.6;
padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px;
}
/* ---------- 客户标签体系 ---------- */
.cust-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
/* 标签 pill 颜色 */
.pill.tag { cursor: default; }
.pill.tag.tag-green { background: #e3f5ec; color: #1f7a4d; }
.pill.tag.tag-blue { background: #e8effa; color: #2a5fa8; }
.pill.tag.tag-purple { background: #eceafb; color: #5a4bb0; }
.pill.tag.tag-teal { background: #e2f3f0; color: #0b6b5c; }
.pill.tag.tag-amber { background: #fdf3e3; color: #b07115; }
.pill.tag.tag-red { background: #fdecec; color: #b23b3b; }
.pill.tag.tag-gray { background: #eef1ec; color: #4d5852; }
.pill.tag .tag-x {
border: 0; background: transparent; cursor: pointer; padding: 0 2px;
margin-left: 2px; color: inherit; opacity: .6; font-size: 13px; line-height: 1;
}
.pill.tag .tag-x:hover { opacity: 1; }
/* 标签筛选栏 */
.tag-bar { border-top: 1px dashed var(--line-soft); padding-top: 10px; margin-top: 4px; }
.tag-label { font-size: 12px; color: var(--muted); flex: 0 0 auto; padding-top: 6px; }
/* 标签选择器（弹窗内多选） */
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-opt {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none;
transition: background .12s, border-color .12s, color .12s;
}
.tag-opt input { display: none; }
.tag-opt:hover { border-color: #cfd6d0; color: var(--ink); }
.tag-opt.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); font-weight: 500; }
/* 标签筛选 chip 选中态：绿色主题，跟状态 chip 的黑色区分 */
.chip.tag-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ---------- 发票 / 回款流水 ---------- */
.pay-panel { padding: 4px 2px; }
.pay-summary { display: flex; flex-wrap: wrap; gap: 18px; padding: 2px 0 10px; }
/* 编辑弹窗里的「已回款」只读汇总：事实源是回款流水，这里只展示不给输入 */
.pay-readonly {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
min-height: 38px; padding: 7px 12px;
border: 1px dashed var(--line); border-radius: 10px;
background: var(--surface-soft, #fafbfc);
}
.pay-readonly .pay-item { font-size: 13px; }
.pay-readonly .btn { margin-left: auto; white-space: nowrap; }
/* 只读块内的标签/数值/说明：说明独占一行，避免和按钮挤在同一行 */
.pay-readonly .pr-label { font-size: 12.5px; color: var(--muted); }
.pay-readonly .pr-val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-readonly .pr-hint { flex: 1 1 100%; font-size: 12px; color: var(--muted); line-height: 1.5; }
@media (max-width: 640px) {
.pay-readonly .btn { margin-left: 0; width: 100%; }
}
.pay-line {
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 12px;
}
.pay-line + .pay-line { margin-top: 6px; }
.pay-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pay-line-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pay-line-title { font-size: 13px; font-weight: 600; }
.pay-line-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.pay-line-amt { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-line-amt.green { color: var(--ok); }
.pay-line-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.pay-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
@media (max-width: 640px) { .pay-cols { grid-template-columns: 1fr; } }
.pay-col .section-head { margin-bottom: 8px; }
/* 催款提示框 */
.dunning-box {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--warn-soft); border: 1px solid #f2d9b6; border-radius: 10px;
padding: 10px 14px; margin: 6px 0 4px;
}
.dunning-text { font-size: 13px; color: #8a5a1a; }
.dunning-text b.red { color: var(--danger); }
/* ---------- 申报档案（财务档案 + 知产档案） ---------- */
.profile-tab { padding: 2px; }
.profile-tab .section-head { margin-bottom: 10px; }
.profile-tab .table-wrap { margin-bottom: 4px; }
.table td.strong { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cell-act { width: 32px; text-align: center; }
/* 知产档案行 */
.ip-row {
display: flex; align-items: center; gap: 12px;
border: 1px solid var(--line-soft); border-radius: 10px;
padding: 11px 14px; margin-bottom: 8px; background: var(--surface);
}
.ip-main { flex: 1; min-width: 0; }
.ip-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.ip-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ip-nums { display: flex; gap: 14px; flex: 0 0 auto; font-size: 12.5px; color: var(--muted); }
.ip-nums b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 2px; }
/* ---------- 项目交付 ---------- */
.proj-row {
display: flex; align-items: center; gap: 12px;
border: 1px solid var(--line-soft); border-radius: 10px;
padding: 11px 14px; margin-bottom: 8px; background: var(--surface);
cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.proj-row:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.proj-main { flex: 1; min-width: 0; }
.proj-name { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.proj-no { font-size: 12px; color: var(--muted); background: var(--bg-soft, #f0f2f5); padding: 1px 6px; border-radius: 4px; }
.proj-sub { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.proj-side { flex: 0 0 auto; text-align: right; }
.proj-stage { font-size: 12.5px; font-weight: 600; color: var(--ink); }
/* 项目卡片（金额概览） */
.proj-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) { .proj-cards { grid-template-columns: 1fr 1fr; } }
.proj-card { border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.proj-card .k { font-size: 12px; color: var(--muted); }
.proj-card .v { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
/* 节点时间轴 */
.timeline { padding: 4px 0 4px 2px; }
.tl-item { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
background: var(--bg-soft, #f0f2f5); border: 2px solid #cfd6d0; margin-top: 3px; position: relative; z-index: 1;
}
.tl-item.done .tl-dot { background: var(--accent); border-color: var(--accent); }
.tl-item.current .tl-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tl-item.terminal .tl-dot { background: var(--ok); border-color: var(--ok); }
.tl-item.done::before, .tl-item.current::before {
content: ""; position: absolute; left: 8px; top: 18px; bottom: -2px; width: 2px; background: var(--accent); opacity: .35;
}
.tl-item:last-child::before { display: none; }
.tl-body { flex: 1; min-width: 0; }
.tl-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tl-item.current .tl-title { color: var(--accent-dark); }
.tl-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
/* 工作台视角切换 */
.view-switch {
display: flex; gap: 6px; margin-bottom: 14px;
background: var(--bg-soft, #f0f2f5); padding: 4px; border-radius: 10px; width: fit-content;
}
.vs-btn {
border: none; background: transparent; padding: 7px 18px; border-radius: 8px;
font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer;
}
.vs-btn:hover { color: var(--ink); }
.vs-btn.active { background: var(--surface); color: var(--accent-dark); box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.08)); }
/* 交付看板项目行 */
.dv-proj {
display: flex; align-items: center; gap: 12px;
border: 1px solid var(--line-soft); border-radius: 10px;
padding: 12px 14px; margin-bottom: 8px; background: var(--surface);
cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.dv-proj:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.dv-proj-main { flex: 1; min-width: 0; }
.dv-proj-name { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dv-no { font-size: 12px; color: var(--muted); background: var(--bg-soft, #f0f2f5); padding: 1px 6px; border-radius: 4px; }
.dv-proj-sub { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dv-prog { height: 5px; background: var(--bg-soft, #f0f2f5); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.dv-prog-bar { height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; }
.dv-proj-side { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
@keyframes slideIn { }
@keyframes fade { }
/* 时间线 */
.timeline { position: relative; padding-left: 18px; }
@keyframes pop { }
@keyframes pulse { }
/* ---------- 销售简报 ---------- */
.brief-select {
margin-left: auto;
padding: 6px 10px;
border: 1px solid var(--border, #e2e5e9);
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 13px;
cursor: pointer;
}
.pay-col .section-head { margin-bottom: 8px; }
.proj-card { border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.empty-ico { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.empty-ico svg { width: 22px; height: 22px; }
.funnel { display: flex; flex-direction: column; gap: 11px; padding-top: 4px; }
.funnel-row { display: flex; align-items: center; gap: 14px; }
.funnel-label { flex: 0 0 88px; }
.funnel-track { flex: 1; height: 22px; background: #eef1ec; border-radius: 6px; overflow: hidden; }
.funnel-fill { height: 100%; background: linear-gradient(90deg, #4a7bbf, #2c5285); border-radius: 6px; transition: width .35s ease; min-width: 3px; }
.funnel-num { flex: 0 0 auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 900px) {
.funnel-label { flex: 0 0 72px; }
.funnel-num { font-size: 12px; }
}
/* ---- 商机分析：增强漏斗 / 输单原因分布 / 停留超期预警 ---- */
.funnel-block { display: flex; flex-direction: column; gap: 4px; }
.funnel-meta { margin-left: 102px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.funnel-fill.is-win { background: linear-gradient(90deg, #57b894, var(--ok)); }
.funnel-fill.is-neg { background: linear-gradient(90deg, #dfe3e1, #9aa5a0); }
.ana-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.reason-list { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.reason-row { display: flex; flex-direction: column; gap: 5px; }
.reason-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reason-name { font-size: 13px; font-weight: 600; }
.reason-num { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reason-track { height: 14px; background: #eef1ec; border-radius: 5px; overflow: hidden; }
.reason-fill { height: 100%; background: linear-gradient(90deg, #d98a82, var(--danger)); border-radius: 5px; transition: width .35s ease; min-width: 3px; }
.stall-list { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.stall-item {
display: flex; align-items: center; gap: 12px; padding: 9px 12px;
border: 1px solid var(--line-soft); border-radius: 10px; background: #fbfcfb;
cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.stall-item:hover { background: var(--accent-soft); border-color: var(--accent); }
.stall-main { flex: 1; min-width: 0; }
.stall-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stall-sub { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stall-days { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.stall-days.amber { color: var(--warn); }
.stall-days.red { color: var(--danger); }
.mini-filter { width: auto; height: auto; padding: 2px 6px; font-size: 12px; }
@media (max-width: 1180px) { .ana-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .funnel-meta { margin-left: 86px; } }
@media (max-width: 640px) {
.funnel-meta { margin-left: 0; }
.stall-item { padding: 10px; }
}
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; overflow-y: hidden; box-shadow: var(--shadow); }
table.table { width: 100%; min-width: 860px; border-collapse: collapse; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: middle; white-space: nowrap; }
.table td.cust-name, .table td.note-cell { white-space: normal; }
.drawer {
position: fixed; top: 0; right: 0; bottom: 0; left: var(--side-w); width: auto;
background: #fff; z-index: 41; display: flex; flex-direction: column;
box-shadow: -18px 0 50px rgba(15, 30, 22, .16);
animation: slideIn .22s cubic-bezier(.2,.8,.3,1);
/* 与 .sidebar 的 width 过渡同步，折叠时抽屉跟着一起滑过去，不会瞬移 */
transition: left .2s ease;
}
/* ---- 抽屉左右分栏：左主内容 + 右侧栏（跟进记录/数据日志）---- */
.drawer-split { display: flex; flex: 1; min-height: 0; }
.drawer-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.drawer-main .drawer-body { flex: 1; }
.drawer-side {
flex: 0 0 380px; min-width: 0; display: flex; flex-direction: column;
border-left: 1px solid var(--line); background: #f7f9f7;
}
.drawer-side .side-tabs { background: #fff; border-bottom: 1px solid var(--line); padding: 0 14px; }
.drawer-side .side-body { flex: 1; padding: 16px 18px 40px; }
.drawer-side .quick { background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px; }
/* 侧栏窄栏适配：表单字段上下排列、2 列网格，避免横向挤压 */
.drawer-side .quick-grid { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.drawer-side .qfield { flex-direction: column; align-items: stretch; gap: 3px; }
.drawer-side .qfield .quick-label { font-size: 11px; color: var(--muted); }
.drawer-side .quick-foot { flex-wrap: nowrap; }
.drawer-side .quick textarea { min-height: 64px; font-size: 12.5px; }
.drawer-side .ai-structure-row input { font-size: 12px; }
/* ---- 跟进记录：日期分组 + 卡片（右侧栏窄栏适配）---- */
.fu-list { display: flex; flex-direction: column; padding-top: 2px; }
.fu-day {
display: flex; align-items: center; gap: 8px;
font-size: 11.5px; font-weight: 600; color: var(--muted);
margin: 14px 0 8px; letter-spacing: .3px;
}
.fu-day:first-child { margin-top: 4px; }
.fu-day::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.fu-card {
background: #fff; border: 1px solid var(--line-soft); border-radius: 10px;
padding: 9px 12px; margin-bottom: 8px;
transition: border-color .12s ease, box-shadow .12s ease;
}
.fu-card:hover { border-color: var(--line); box-shadow: 0 1px 6px rgba(20, 35, 28, .05); }
.fc-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fc-head .pill { flex: none; }
.fc-opp {
font-size: 11.5px; color: var(--muted); min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-time {
margin-left: auto; flex: none; font-size: 11.5px; color: var(--muted);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fc-actions { flex: none; display: flex; gap: 2px; opacity: 0; transition: opacity .12s ease; }
.fu-card:hover .fc-actions, .fc-actions:focus-within { opacity: 1; }
.fc-actions .icon-btn { width: 24px; height: 24px; font-size: 12px; }
.fc-content {
font-size: 13px; line-height: 1.7; color: #313b36; margin-top: 6px;
white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.fc-next {
display: inline-block; font-size: 12px; color: var(--accent-dark);
background: var(--accent-soft); border-radius: 6px; padding: 3px 8px; margin-top: 7px;
overflow-wrap: anywhere;
}
.fc-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fc-file-wrap {
display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
background: var(--accent-soft); border-radius: 6px; padding: 2px 4px 2px 8px;
}
.fc-file {
font-size: 12px; color: var(--accent); min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-file-wrap .fc-del { width: 18px; height: 18px; font-size: 10px; color: var(--muted); }
.fc-file-wrap .fc-del:hover { color: var(--danger); }
/* ---- 跟进记录：作者标签 / 追加回复 / 权限口径提示 ---- */
.fc-author {
flex: none; font-size: 11px; color: var(--ink-2, #4a5550);
background: var(--bg, #f4f6f3); border-radius: 999px; padding: 1px 7px;
max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fu-card.fu-reply {
margin-left: 18px; border-left: 3px solid var(--accent-soft);
background: #fbfcfb;
}
.fu-reply-form { margin-top: 8px; }
.fu-reply-form textarea {
width: 100%; min-height: 58px; resize: vertical;
border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px;
font-size: 13px; line-height: 1.6; font-family: inherit; color: inherit; background: #fff;
}
.fu-reply-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.scope-hint {
font-size: 12px; color: var(--muted); background: var(--bg, #f4f6f3);
border: 1px dashed var(--line); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px;
}
/* ---- 抽屉放大 / 全屏 ---- */
.drawer.drawer-wide { left: 0; }
.drawer.drawer-full { left: 0 !important; z-index: 45; }
.drawer-actions .icon-btn.active { color: var(--accent); background: var(--accent-soft); }
/* 缩放单按钮（循环 正常→放大→全屏）：带描边浅底保证一眼可见，不喧宾夺主 */
.drawer-actions .zoom-btn {
width: 30px; height: 30px; font-size: 14px;
color: var(--ink); background: var(--bg, #f4f6f3);
border: 1px solid var(--line); border-radius: 8px;
}
.drawer-actions .zoom-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.drawer-actions .zoom-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.drawer-actions .zoom-btn.active { color: #fff; background: var(--accent); border-color: var(--accent); }
/* 危险操作分组：竖分隔线把「删除」与常规操作物理隔开 */
.act-sep { flex: none; width: 1px; height: 20px; background: var(--line); margin: 0 5px; }
/* 删除按钮弱化：平时灰色幽灵样式，悬停/聚焦才显危险色 */
.btn.ghost-danger { color: var(--muted); background: transparent; border-color: transparent; }
.btn.ghost-danger:hover, .btn.ghost-danger:focus-visible {
color: var(--danger); border-color: var(--danger); background: var(--danger-soft);
}
/* 移动端点击热区：操作图标按钮放大到 32px（≥44px 含间距） */
@media (max-width: 640px) {
.drawer-actions .icon-btn, .drawer-actions .zoom-btn { width: 32px; height: 32px; }
.fc-actions .icon-btn { width: 28px; height: 28px; }
.act-sep { margin: 0 4px; }
}
/* ---- 企业档案（结构化区块 + 逐行编辑）---- */
.head-btns { display: flex; gap: 6px; }
.prof-block h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.prof-tip { font-size: 12.5px; padding: 6px 0; }
.prof-line { font-size: 13px; line-height: 1.7; padding: 3px 0 3px 14px; position: relative; overflow-wrap: anywhere; }
.prof-line::before { content: "·"; position: absolute; left: 2px; color: var(--muted); font-weight: 700; }
.prof-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-edit-tip {
font-size: 12px; color: var(--warn); background: var(--warn-soft);
border-radius: 8px; padding: 7px 10px; margin-bottom: 14px;
}
.prof-edit-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.prof-edit-row input, .prof-table input {
border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px;
font: inherit; font-size: 12.5px; width: 100%; min-width: 0;
background: #fff; color: var(--ink); outline: none;
}
.prof-edit-row input:focus, .prof-table input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,100,161,.08); }
.prof-table input { min-width: 56px; }
/* 行内编辑的下拉：与输入框同一视觉，字段类型与弹窗一致 */
.prof-table select.prof-sel {
border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px;
font: inherit; font-size: 12.5px; width: 100%; min-width: 64px;
background: #fff; color: var(--ink); outline: none;
}
.prof-table select.prof-sel:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,100,161,.08); }
.prof-add { margin-top: 8px; }
.prof-table th, .prof-table td { padding: 7px 10px; }
/* 区块卡片化：统一视觉、分区清晰 */
.prof-block {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 12px 14px 14px;
margin-bottom: 12px;
}
.prof-block h4 {
display: flex; align-items: center; gap: 6px;
margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink);
}
.prof-block h4::before {
content: ""; width: 3px; height: 13px; border-radius: 2px;
background: var(--accent); flex: none;
}
.prof-block .table-wrap { border: none; box-shadow: none; background: transparent; }
.prof-block .table-wrap .table th { background: var(--line-soft); }
.prof-block .prof-tip { margin: 2px 0; }
.prof-block .prof-add { margin-top: 10px; }
.profile-tab .section-head { margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.profile-tab .section-head h3 { font-size: 14px; }
.profile-tab .section-head .head-btns { margin-left: auto; }
/* 统计汇总条（知产 / 政府项目 / 研发项目） */
.ip-stats {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 0 0 10px;
}
.ip-stats > span {
display: inline-flex; align-items: baseline; gap: 4px;
font-size: 12px; color: var(--muted);
background: var(--accent-soft);
border: 1px solid #dbe4f0;
border-radius: 999px;
padding: 4px 11px;
white-space: nowrap;
}
.ip-stats > span b {
font-size: 14px; font-weight: 700; color: var(--accent-dark);
font-variant-numeric: tabular-nums;
}
.ip-stats > span:first-child { background: var(--ink); border-color: var(--ink); color: #cfd8d3; }
.ip-stats > span:first-child b { color: #fff; }
.ip-stats > span:last-child { background: var(--ok-soft); border-color: #cfe8db; }
.ip-stats > span:last-child b { color: var(--ok); }
/* 导入预览区 */
#ip-import-preview { margin-top: 4px; }
#ip-import-preview .prof-edit-tip { margin-bottom: 8px; }
#ip-import-preview .table-wrap { max-height: 220px; overflow: auto; }
/* 小屏适配：区块内边距收紧、按钮换行、统计条精简 */
@media (max-width: 640px) {
.prof-block { padding: 10px 11px 12px; border-radius: 11px; }
.prof-block h4 { font-size: 12.5px; margin-bottom: 8px; }
.prof-edit-row { flex-wrap: wrap; }
.prof-edit-row input { flex: 1 1 120px; }
.prof-table input { min-width: 48px; font-size: 12px; padding: 4px 6px; }
.ip-stats > span { font-size: 11.5px; padding: 3px 9px; }
.ip-stats > span b { font-size: 13px; }
.profile-tab .section-head { align-items: flex-start; }
.profile-tab .section-head .head-btns { width: 100%; }
.profile-tab .section-head .head-btns .btn { flex: 1; justify-content: center; }
}
/* ---- 上传按钮行（紧凑：图片 / 文件 / ▦）---- */
/* ---- 上传区（对齐简道云）：标题 + [选择] + 虚线粘贴提示框 ---- */
.upload-bars { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.upload-bar { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.upload-title { font-size: 12px; color: var(--muted); }
.upload-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.upload-choose {
flex: none; border: 0; background: none; padding: 0 2px;
color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer;
}
.upload-choose:hover { color: var(--accent-dark); text-decoration: underline; }
.upload-drop {
flex: 1; min-width: 0; display: flex; align-items: center;
height: 32px; padding: 0 10px;
border: 1px dashed var(--line); border-radius: 8px;
color: var(--muted); font-size: 12px; cursor: pointer;
transition: border-color .12s ease, color .12s ease, background .12s ease;
background: #fff;
}
.upload-drop:hover { border-color: var(--accent); color: var(--accent); }
.upload-drop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-drop.paste-mode {
border-color: var(--ok); color: var(--ok); background: var(--ok-soft);
justify-content: center; font-weight: 500;
}
@media (max-width: 1360px) { .drawer-side { flex-basis: 330px; } }
@media (max-width: 1180px) { .drawer-side { flex-basis: 300px; } }
@media (max-width: 1024px) {
.drawer-split { flex-direction: column; overflow-y: auto; }
.drawer-main { flex: none; }
.drawer-main .drawer-body { overflow-y: visible; flex: none; }
.drawer-side { flex: none; border-left: 0; border-top: 1px solid var(--line); }
.drawer-side .side-body { overflow-y: visible; }
}
/* 抽屉宽度自适应：跟随侧栏宽度变化（--side-w）；≤900px 窄屏抽屉照旧盖满整屏 */
@media (max-width: 900px) {
.drawer { left: 0; }
}
.contact-actions, .opp-actions, .sys-actions, .fu-actions, .tl-actions { opacity: 1; }
/* prod 系列 */
.prod-list-wrap { max-height: 320px; overflow-y: auto; }
.prod-row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--line-soft); }
.prod-row:last-child { border-bottom: 0; }
.prod-info { flex: 1; min-width: 0; }
.prod-name { font-size: 13.5px; font-weight: 600; }
.prod-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.prod-actions { display: flex; gap: 2px; }
/* ---------------- 附件暂存回显 ---------------- */
.pending-files { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pend-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-soft); border-radius: 9px; padding: 7px 10px; background: #fff; }
.pend-thumb { width: 40px; height: 40px; border-radius: 7px; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; background: #f0f3ef; cursor: pointer; }
.pend-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pend-ext { font-size: 11px; font-weight: 700; color: var(--muted); }
.pend-main { flex: 1; min-width: 0; }
.pend-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pend-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
/* 可点击文本链接 */
.linklike { cursor: pointer; }
.linklike:hover { color: var(--accent-dark); text-decoration: underline; }
/* 产品知识卡片 */
/* ---- 应收台账：分组卡片布局（取消宽表格，任何屏幕不横滚）---- */
.recv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.recv-chip {
border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
padding: 6px 12px; font-size: 12.5px; color: var(--muted); cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.recv-chip b { color: var(--ink); font-weight: 600; }
.recv-chip:hover { border-color: var(--accent); color: var(--ink); }
.recv-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.recv-chip.on b { color: var(--accent-dark); }
.recv-chip-amt { font-size: 11.5px; color: #b45309; }
.recv-chip-amt.red { color: var(--danger); }
.recv-group { border: 1px solid var(--line); border-radius: 12px; margin-top: 10px; overflow: hidden; }
.recv-group.g6 { opacity: .92; }
.recv-group-head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 14px; background: #f7f9f8; cursor: pointer;
}
.recv-group-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.recv-group-meta { font-size: 12px; color: var(--muted); flex: 1; min-width: 0; }
.recv-fold { font-size: 12px; color: var(--accent-dark); white-space: nowrap; }
.recv-rows { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.recv-row {
border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 12px;
background: var(--surface);
}
.recv-row.is-settled { background: #fafcfb; }
.recv-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recv-name { font-size: 13.5px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.recv-row-nums {
display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px;
font-size: 12.5px; color: var(--muted);
}
.recv-row-nums b { color: var(--ink); font-weight: 600; }
.recv-row-nums b.green { color: #0f9d58; }
.recv-row-diff {
display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 5px; font-size: 12.5px;
}
.recv-diff { font-weight: 600; color: var(--danger); }
.recv-row-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* ---------- 执行工单 ---------- */
.wo-prog { display: flex; align-items: center; gap: 6px; }
.wo-prog-bar { flex: 1; min-width: 60px; height: 6px; border-radius: 4px; background: #EEF1F5; overflow: hidden; }
.wo-prog-bar > i { display: block; height: 100%; background: #3864A1; }
.wo-prog-txt { font-size: 12px; color: var(--muted, #8A94A6); white-space: nowrap; }
.wo-note { margin-top: 3px; font-size: 12px; color: #A32D2D; }
.wo-pick { max-width: 150px; }
.wo-node-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.wo-node-chk { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; }
/* ---------------- 我的项目（项目部工作台） ---------------- */
.my-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.my-card {
border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
background: #fff; cursor: pointer; transition: .12s;
}
.my-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(56, 100, 161, .08); }
.my-card.overdue { border-color: #e5484d; background: #fff7f7; }
.my-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.my-card-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-no { font-size: 11px; color: var(--muted); margin-left: 6px; font-weight: 400; }
.my-card-sub { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.my-card-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
/* ---------------- 项目详情：项目部四 Tab ---------------- */
.proj-tabs { margin: 6px 0 10px; }
.dc-wrap { padding: 2px 0 10px; }
.dc-block { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.dc-head { background: #f5f7fa; padding: 7px 12px; font-size: 13px; font-weight: 600; }
.dc-body { padding: 9px 12px; font-size: 13px; line-height: 1.7; }
.ck-group { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.ck-group-head { background: #f5f7fa; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ck-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); }
.ck-row:first-child { border-top: none; }
.ck-name { font-size: 13px; flex: 1; min-width: 0; }
.ck-pick { max-width: 110px; }
.pl-add { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.pl-add textarea { flex: 1; min-height: 46px; resize: vertical; }
.pl-row { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.pl-row.sales { background: #f7f9fc; }
.pl-row.voided { opacity: .6; }
.pl-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.pl-role { padding: 1px 7px; border-radius: 999px; background: #e8f0fb; color: #3864a1; font-size: 11px; }
.pl-role.sales { background: #f3f0fb; color: #6b4fd8; }
.pl-body { font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
/* 时间轴：计划日与超期标红 */
.tl-plan { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--muted); }
.tl-plan.red { color: #e5484d; }
.tl-item.tl-overdue .tl-dot { background: #e5484d; }
/* 节点明细折叠：横向节点条已覆盖节点名/到达状态/推进，时间轴默认收起，
摘要行只保留节点条没有的信号（已到 n/m、计划日逾期数），展开才是完整时间轴 */
.tl-fold { margin-top: 4px; }
.tl-fold > summary {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
cursor: pointer; user-select: none; list-style: none;
padding: 7px 10px; border-radius: var(--radius, 8px);
background: var(--surface-2, #F5F7FA); border: 1px solid var(--line);
font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.tl-fold > summary::-webkit-details-marker { display: none; }
.tl-fold > summary::before {
content: "▸"; color: var(--muted); font-size: 11px; transition: transform 0.15s;
}
.tl-fold[open] > summary::before { transform: rotate(90deg); }
.tl-fold > summary .tl-fold-tip { font-weight: 400; font-size: 11.5px; }
.tl-fold > summary:hover { background: var(--surface-3, #EEF1F5); }
.tl-fold[open] > summary { margin-bottom: 10px; }
.tl-fold > .timeline { padding-top: 2px; }
/* 工作台销售数据总览折叠条 */
.stats-fold { margin: 2px 0 12px; }
.stats-fold > summary { padding: 9px 12px; font-size: 13px; }
.stats-fold > .stats { margin-top: 10px; }
.wo-chip.active { background: var(--brand, #3864A1); color: #fff; border-color: transparent; }
/* ---------- 当前登录身份标识 ---------- */
.me-card {
margin: 10px 12px 4px; padding: 10px 12px; border-radius: var(--radius);
background: var(--surface-2, #F5F7FA); border: 1px solid var(--line);
}
.me-card-in { display: flex; align-items: center; gap: 10px; }
.me-avatar {
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-weight: 500; border-radius: 50%; flex: none;
width: 28px; height: 28px; font-size: 13px; line-height: 1;
}
.me-avatar.lg { width: 36px; height: 36px; font-size: 16px; }
/* sm = 顶栏徽标：显示完整姓名，宽度随字数自适应（原为固定 26px 圆形头像，只放一个首字） */
.me-avatar.sm {
display: inline-block; width: auto; min-width: 26px; height: 24px; line-height: 24px;
padding: 0 9px; font-size: 12px; border-radius: 12px; text-align: center;
max-width: 104px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.me-meta { min-width: 0; }
.me-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-uname { margin-left: 4px; font-size: 11px; color: var(--muted, #8A94A6); font-weight: 400; }
.me-role-row { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.me-role {
display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; line-height: 18px;
border: 1px solid transparent;
}
.me-role.role-admin { color: #0C447C; background: #E6F1FB; border-color: #B5D4F4; }
.me-role.role-engineer { color: #0F6E56; background: #E1F5EE; border-color: #9FE1CB; }
.me-role.role-other { color: #5F5E5A; background: #F1EFE8; border-color: #D3D1C7; }
.me-warn { font-size: 11px; color: #A32D2D; background: #FCEBEB; border: 1px solid #F7C1C1; border-radius: 10px; padding: 1px 7px; }
.me-chip-wrap { position: relative; }
.me-chip {
display: inline-flex; align-items: center; gap: 6px; max-width: 240px;
padding: 3px 8px 3px 4px; border-radius: 999px; border: 1px solid var(--line);
background: var(--surface); cursor: pointer;
}
.me-chip:hover { border-color: var(--line-strong, #C9D2E0); }
.me-chip .me-role { font-style: normal; flex: none; }
.me-caret { width: 14px; height: 14px; fill: var(--muted, #8A94A6); flex: none; }
.me-pop {
display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
min-width: 168px; padding: 4px; border-radius: var(--radius); border: 1px solid var(--line);
background: var(--surface); box-shadow: var(--shadow);
}
.me-pop.open { display: block; }
.me-pop button {
display: block; width: 100%; text-align: left; padding: 7px 10px; font-size: 13px;
border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--text);
}
.me-pop button:hover { background: var(--surface-2, #F5F7FA); }
/* 右上角账号菜单：原左下角 设置/备份数据/导出CSV/修改密码 迁移过来后的行样式
注意：选择器必须写成 .me-pop button.xxx，否则会被上面的 .me-pop button（同权重、在前）盖掉 */
.me-pop button.me-pop-item { display: flex; align-items: center; gap: 8px; }
.me-pop-item svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.me-pop button.me-pop-danger { color: var(--danger, #A32D2D); }
.me-pop-sep { height: 1px; margin: 4px 8px; background: var(--line); }
.me-pop-hint { margin: 2px 0 0; padding: 6px 10px 4px; font-size: 12px; color: #98a29d; line-height: 1.6; border-top: 1px solid var(--line, #E6EAF0); }
.me-sub-wrap { position: relative; }
.me-sub-caret { width: 12px !important; height: 12px !important; margin-left: auto; fill: var(--muted, #8A94A6) !important; }
/* 商机归类（PM P0）：设置页 tab */
.cls-pick { min-width: 150px; }
.cls-fold { margin: 6px 14px 0; }
.cls-fold summary { cursor: pointer; font-size: 13px; color: var(--accent); padding: 6px 0; }
/* 导出 CSV 子菜单：内联展开，不浮层，避免窄屏溢出与被 pop 容器裁切 */
.me-sub { display: none; }
.me-sub.open { display: block; }
.me-sub button { padding: 6px 10px 6px 34px; font-size: 12.5px; color: var(--muted, #5F6B7A); }
@media (max-width: 720px) {
.me-chip .me-avatar.sm { max-width: 76px; }
.me-chip { padding: 3px 6px 3px 3px; gap: 5px; }
}
.pool-badge {
display: inline-block; margin: 2px 0; padding: 1px 7px; border-radius: 10px;
font-size: 11px; line-height: 18px; color: #854F0B; background: #FAEEDA; border: 1px solid #FAC775;
}
.scope-bar { align-items: center; gap: 8px; flex-wrap: wrap; }
.scope-chip.active { background: var(--brand, #3864A1); color: #fff; border-color: transparent; }
.recv-flow {
display: flex; align-items: center; gap: 8px; padding: 7px 2px;
border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.recv-flow:last-child { border-bottom: 0; }
@media (max-width: 640px) {
.recv-row-acts .btn { flex: 1; justify-content: center; }
.recv-group-meta { flex-basis: 100%; }
}
/* 产品关键信息：占满弹窗整行 + 内部两栏，高度随内容自适应，避免竖向过高 */
.product-kb { margin-top: 2px; }
.product-kb.full { grid-column: 1 / -1; min-width: 0; }
.kb-card { background: #f5f8f6; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; }
.kb-head-row { display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; margin-bottom: 4px; }
.kb-cols { columns: 2; column-gap: 24px; }
.kb-point { font-weight: 600; color: #0f6e56; margin-bottom: 4px; }
.kb-subsidy { color: #b45309; font-weight: 500; margin-bottom: 6px; }
.kb-sec { margin-top: 6px; break-inside: avoid; }
.kb-title { font-weight: 600; color: #313b36; margin-bottom: 2px; }
.kb-sec ul { margin: 0; padding-left: 18px; color: #444a45; line-height: 1.55; }
@media (max-width: 720px) { .kb-cols { columns: 1; } }
/* 知识库检索 */
.kb-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; cursor: pointer; background: var(--surface); }
.kb-row:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(20,35,28,.06); }
.kb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.kb-title { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.kb-summary { font-size: 12.5px; color: #4a514b; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* 知识库智能问答 */
.kb-ask-title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.kb-ask-brand { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: .3px; }
.kb-ask-sub { font-size: 12px; color: var(--muted); }
.kb-ask-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; background: var(--surface); box-shadow: var(--shadow); }
.kb-ask-box { display: flex; align-items: center; gap: 10px; }
.kb-ask-input { flex: 1; height: 44px; padding: 0 14px; font-size: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); outline: none; transition: .12s; }
.kb-ask-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,100,161,.08); }
.kb-ask-input::placeholder { color: var(--muted); }
.kb-ask-box .btn { height: 44px; padding: 0 22px; font-size: 14px; white-space: nowrap; background: var(--accent); color: #fff; border-color: var(--accent); }
.kb-ask-box .btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.kb-ask-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kb-ask-tags .lbl { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
.kb-ask-box { flex-direction: column; align-items: stretch; }
.kb-ask-box .btn { width: 100%; }
}
.kb-answer { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 4px; background: var(--surface); }
.kb-answer-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kb-answer-body { font-size: 13.5px; line-height: 1.7; color: var(--ink); }
.kb-answer-src { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.kb-answer-src a { color: var(--accent); text-decoration: none; }
.kb-answer-src a:hover { text-decoration: underline; }
.kb-empty { border: 1px dashed var(--line); border-radius: 12px; padding: 14px 16px; color: var(--muted); font-size: 13px; }
.kb-answer-feedback { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.kb-answer-feedback .fb-lbl { font-size: 12px; color: var(--muted); }
.kb-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; margin-bottom: 14px; }
.kb-col { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); }
.kb-col-ask { border-color: var(--accent); box-shadow: var(--shadow); }
.kb-col-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.kb-col-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.kb-col-ask .kb-col-title { color: var(--accent); }
.kb-col-desc { font-size: 12px; color: var(--muted); }
.kb-col .toolbar { margin-bottom: 10px; }
@media (max-width: 900px) {
.kb-layout { grid-template-columns: 1fr; }
}
.kb-search-box { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kb-search-box input.filter { flex: 1; }
.kb-search-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.kb-sync-hint { font-size: 12px; color: var(--muted); }
/* AI 商机诊断结果 */
.ai-diag { white-space: pre-wrap; line-height: 1.7; font-size: 14px; color: var(--text); }
.ai-structure-row { display: flex; gap: 8px; margin: 8px 0 4px; align-items: center; }
.ai-structure-row input { flex: 1; padding: 8px 12px; border: 1px solid var(--border, #e3e5e8); border-radius: 8px; font-size: 13px; }
.ai-next-box { border: 1px solid var(--accent, #3864A1); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface, #fff); }
.ai-next-summary { font-size: 13px; margin-bottom: 8px; font-weight: 600; }
.ai-next-item { display: flex; gap: 8px; padding: 4px 0; align-items: flex-start; }
.ai-next-rank { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent, #3864A1); color: #fff; text-align: center; line-height: 20px; font-size: 12px; font-weight: 700; }
.ai-next-main { flex: 1; }
.ai-next-main b { font-size: 13px; }
.ai-next-main .muted { font-size: 12px; margin-top: 1px; }
/* 演示资源：一行一条，标题/类型/状态为主，描述与标签弱化并折叠 */
.demo-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.demo-card {
display: flex; align-items: center; gap: 12px; padding: 10px 14px;
border: 1px solid var(--border, #e3e5e8); border-radius: 10px;
background: var(--surface, #fff); cursor: pointer;
transition: border-color .12s ease, box-shadow .12s ease;
}
.demo-card:hover, .demo-card:focus-visible {
border-color: var(--accent, #3864A1); box-shadow: var(--shadow); outline: none;
}
.demo-card:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
.dm-main { flex: 1; min-width: 0; }
.dm-title { font-size: 14px; font-weight: 600; color: #1b2421; line-height: 1.45; word-break: break-word; }
.demo-card:hover .dm-title { color: var(--accent, #3864A1); }
.dm-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.dm-cat { font-size: 11.5px; color: #5f6862; background: #f3f4f2; border-radius: 8px; padding: 1px 8px; }
.dm-st { font-size: 11.5px; border-radius: 8px; padding: 1px 8px; font-weight: 500; }
.dm-st.dm-on { color: #185FA5; background: #E6F1FB; }
.dm-st.dm-file { color: #3B6D11; background: #EAF3DE; }
.dm-dim { font-size: 11.5px; color: #9aa29c; }
.dm-desc {
font-size: 12px; color: #7b837d; margin-top: 3px; line-height: 1.5;
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.dm-tags { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.dm-tags .tag { font-size: 11px; }
.dm-more { color: #9aa29c; cursor: default; }
.dm-actions { display: flex; gap: 4px; flex: none; }
.chip-n { color: #9aa29c; font-size: 11px; margin-left: 2px; }
.chip.active .chip-n { color: #a9c4e6; }
/* 加载骨架：真实占位，不用假数据 */
.dm-skel {
height: 62px; border-radius: 10px; border: 1px solid var(--line-soft, #eef0ee);
background: #f6f7f6; animation: dm-pulse 1.2s ease-in-out infinite;
}
@keyframes dm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (max-width: 560px) {
.demo-card { align-items: flex-start; flex-direction: column; gap: 8px; }
.dm-actions { align-self: flex-end; }
}
.ip-stats { display: flex; gap: 20px; padding: 8px 2px; font-size: 13px; color: var(--muted, #888); }
.ip-stats b { color: var(--text, #222); font-weight: 600; }
/* ---------------- 可访问性 ---------------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
}
/* ============ 移动端触控与小屏适配 ============ */
@media (max-width: 480px) {
.icon-btn { width: 40px; height: 40px; border-radius: 10px; }
.btn { min-height: 40px; padding: 9px 15px; }
.btn.sm { min-height: 34px; padding: 6px 12px; }
.chip { padding: 7px 13px; }
.topbar { height: 58px; padding: 0 12px; gap: 8px; }
.view-head { gap: 6px; }
.view-head h1 { font-size: 17px; }
.view-head .muted { display: none; }
.searchbox { width: 108px; height: 36px; padding: 0 8px; }
.searchbox input { font-size: 12px; }
.top-actions { gap: 8px; }
.view { padding: 14px 12px 60px; }
.panel { padding: 14px; }
.stat { padding: 14px 15px 12px; }
.stat-value { font-size: 24px; }
.table th, .table td { padding: 10px 12px; }
.drawer-body { padding: 14px 14px 40px; }
}
/* 筛选区来源分隔线 + 搜索框凸显 */
.chip-sep { width: 1px; height: 22px; background: var(--line); flex: none; align-self: center; }
.group-label { font-size: 12px; color: var(--muted, #888); flex: 0 0 auto; padding-top: 6px; }
.toolbar input.filter { border-color: #c3d2ea; background: #fbfcff; box-shadow: 0 0 0 1px var(--accent-soft); }
.toolbar input.filter:hover, .toolbar input.filter:focus { border-color: var(--accent); }
/* 表头列筛选（点选多选） */
.th-filterable { position: relative; white-space: nowrap; }
.th-filter-btn {
display: inline-flex; align-items: center; justify-content: center;
margin-left: 4px; width: 18px; height: 18px; border: none; background: transparent;
border-radius: 4px; cursor: pointer; color: var(--muted, #999); vertical-align: -3px; position: relative;
}
.th-filter-btn svg { width: 11px; height: 11px; fill: currentColor; display: block; }
.th-filter-btn:hover { background: var(--accent-soft, #e8eef6); color: var(--accent, #3864A1); }
.th-filter-btn.active { color: var(--accent, #3864A1); }
.th-filter-dot {
position: absolute; top: -5px; right: -6px; min-width: 14px; height: 14px; padding: 0 3px;
background: var(--accent, #3864A1); color: #fff; font-style: normal;
font-size: 10px; line-height: 14px; border-radius: 7px; text-align: center;
}
.col-filter-pop {
position: fixed; z-index: 2000; width: 220px; max-height: 320px; overflow: auto;
background: var(--surface, #fff); border: 1px solid var(--line, #e5e7eb);
border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); display: flex; flex-direction: column;
}
.cf-head { padding: 10px 14px 8px; font-size: 13px; font-weight: 600; color: var(--text, #222); border-bottom: 1px solid var(--line, #e5e7eb); display: flex; justify-content: space-between; align-items: center; }
.cf-head .muted { font-weight: 400; font-size: 11px; }
.cf-list { padding: 6px; }
.cf-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text, #333); }
.cf-item:hover { background: var(--accent-soft, #e8eef6); }
.cf-item input { width: 16px; height: 16px; accent-color: var(--accent, #3864A1); cursor: pointer; }
.cf-item.checked { color: var(--accent, #3864A1); }
.cf-foot { padding: 8px; border-top: 1px solid var(--line, #e5e7eb); display: flex; justify-content: flex-end; }
/* ============ 系统性移动端适配（Edge/Chrome/移动浏览器） ============ */
img, svg, video, canvas { max-width: 100%; height: auto; }
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
.main { min-width: 0; }
/* 平板 / 大屏手机（≤900px） */
@media (max-width: 900px) {
.modal-overlay { align-items: center; padding: 3vh 12px; }
.modal, .modal.wide { width: 100%; border-radius: 14px; }
.modal-head { padding: 15px 16px 11px; }
.modal-head h2 { font-size: 15px; }
.modal-body { padding: 15px 16px 6px; }
.modal-foot { padding: 12px 16px 16px; }
.drawer-head { padding: 16px 16px 12px; }
.drawer-head h2 { font-size: 18px; }
.tabs { padding: 0 10px; }
.table th, .table td { font-size: 12.5px; }
.table-wrap { -webkit-overflow-scrolling: touch; }
}
/* 手机竖屏（≤480px） */
@media (max-width: 480px) {
.modal-overlay { align-items: center; padding: 8px; }
.modal, .modal.wide { width: 100%; max-height: calc(100vh - 16px); overflow-y: auto; border-radius: 14px; }
.modal-head { padding: 14px 15px 10px; }
.modal-body { padding: 14px 15px 8px; }
.modal-foot { padding: 12px 15px 14px; }
.drawer-head { padding: 14px 14px 10px; }
.drawer-head h2 { font-size: 17px; }
.drawer-kicker { font-size: 11px; }
.table th, .table td { padding: 9px 10px; font-size: 12px; }
.field input, .field select, .field textarea { font-size: 16px; padding: 10px 12px; }
.nav-item { min-height: 44px; }
.tab { padding: 13px 10px 12px; }
.th-filter-btn { width: 24px; height: 24px; }
.col-filter-pop { width: 200px; max-width: calc(100vw - 24px); }
.pager { flex-wrap: wrap; gap: 8px; }
}
/* 横屏手机（≤900px 且横屏） */
@media (max-width: 900px) and (orientation: landscape) {
.modal-overlay { align-items: flex-start; padding: 2vh 12px; }
.modal, .modal.wide { max-height: 94vh; }
}
/* ============ 跟进记录移动端优化 ============ */
@media (max-width: 900px) {
/* 触屏无 hover，编辑/删除按钮始终可见 */
.fu-actions, .tl-actions { opacity: 1; }
.tl-time { width: 96px; }
}
@media (max-width: 480px) {
/* 时间线：时间上移单独一行，内容全宽，按钮靠右 */
.tl-item { flex-wrap: wrap; gap: 4px 10px; }
.tl-time { flex: 1 1 100%; width: 100%; font-size: 11.5px; padding-top: 0; }
.tl-main { flex: 1 1 auto; }
.tl-actions { flex: 0 0 auto; opacity: 1; }
/* 跟进卡片头部可换行，按钮靠右 */
.fu-head { flex-wrap: wrap; gap: 8px; }
.fu-actions { margin-left: auto; opacity: 1; }
.fu-title { gap: 6px; }
.fu-content, .tl-content { font-size: 13px; }
/* 表单输入防 iOS 缩放 */
.quick textarea, .qfield input, .qfield select, .ai-structure-row input { font-size: 16px; }
.ai-structure-row { flex-wrap: wrap; }
.quick-foot { flex-wrap: wrap; gap: 8px; }
}
/* ---------- 设置页 ---------- */
.settings-nav { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.set-tab {
padding: 9px 18px; font: inherit; font-size: 13.5px; cursor: pointer;
border: none; background: none; color: var(--muted); border-bottom: 2px solid transparent;
}
.set-tab.active { color: var(--accent-dark, #0f6e56); border-bottom-color: var(--accent); font-weight: 600; }
.settings-body { display: flex; flex-direction: column; gap: 14px; }
.dict-items { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; }
.dict-item { display: inline-flex; align-items: center; gap: 4px; }
.dict-item input { width: 150px; }
.dict-item .icon-btn { opacity: 1; }
.dict-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 12px 16px 16px; }
.dict-map-row { display: flex; align-items: center; gap: 10px; }
.dict-map-key { flex: 0 0 auto; min-width: 76px; font-size: 13px; color: var(--ink); }
.dict-map-row input { width: 90px; }
/* ---------- 移动端底部导航 + 表格卡片化（≤640px） ---------- */
.mobile-nav { display: none; }
.more-menu { display: flex; flex-direction: column; }
.more-item {
display: block; width: 100%; padding: 12px 14px; text-align: left;
font-size: 14px; color: var(--ink); background: none; border: none;
border-radius: 8px; cursor: pointer; text-decoration: none;
}
.more-item:hover { background: var(--bg-soft, #f5f6f7); }
.more-sep { height: 1px; background: var(--line); margin: 8px 0; }
.more-danger { color: var(--danger); }
@media (max-width: 640px) {
.sidebar { display: none; }
.mobile-nav {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
background: var(--surface, #fff); border-top: 1px solid var(--line);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.mnav-item {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 4px 0; font-size: 11px; color: var(--muted); text-decoration: none;
background: none; border: none; cursor: pointer;
}
.mnav-item svg { width: 22px; height: 22px; fill: currentColor; }
.mnav-item.active { color: var(--accent); }
.view { padding-bottom: 78px; }
/* 客户表格卡片化 */
.table-wrap.scroll-y { border: none; box-shadow: none; background: transparent; overflow: visible; }
.table-wrap.scroll-y table.table { min-width: 0; }
.table-wrap.scroll-y .table thead { display: none; }
.table-wrap.scroll-y .table tbody { display: block; }
.table-wrap.scroll-y .table tr {
display: block; background: var(--surface, #fff); border: 1px solid var(--line);
border-radius: 12px; margin-bottom: 10px; padding: 12px 14px;
}
.table-wrap.scroll-y .table td {
display: flex; justify-content: space-between; align-items: center;
padding: 5px 0; border: none; white-space: normal; text-align: right; font-size: 13px;
}
.table-wrap.scroll-y .table td::before {
content: attr(data-label); font-weight: 500; color: var(--muted); font-size: 12px;
flex: none; margin-right: 12px;
}
.table-wrap.scroll-y .table td:first-child {
display: block; text-align: left; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}
.table-wrap.scroll-y .table td:first-child::before { content: none; }
.table-wrap.scroll-y .table td[data-label=""] { justify-content: flex-end; }
.table-wrap.scroll-y .table td[data-label=""]::before { content: none; }
.table-wrap.scroll-y .table td.hide-mobile { display: none; }
}
/* ---------- 商机阶段推进条 ---------- */
.stage-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stage-node {
display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 6px;
font-size: 12px; line-height: 1.5; white-space: nowrap;
}
.stage-node.done { background: #eaf3de; color: #3b6d11; }
.stage-node.current { background: #b5d4f4; color: #0c447c; font-weight: 500; }
.stage-node.next { background: #f1efe8; color: #888780; }
.stage-node.win { background: var(--st-green-bg); color: var(--st-green-fg); font-weight: 500; }
/* 未到达的「赢单」节点：目标态 —— 描边绿，保持焦点位但不冒充已赢 */
.stage-node.goal { background: #fff; color: var(--st-green-fg); border-color: #bfe3cf; }
.stage-node.neg { background: var(--st-gray-bg); color: var(--st-gray-fg); border-color: var(--st-gray-line); font-weight: 500; }
.stage-arrow { color: #b4b2a9; font-size: 12px; }
/* ---------- 跟进区状态摘要卡片 ---------- */
.opp-summary {
display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
padding: 10px 12px; margin-bottom: 10px; background: var(--bg-soft, #f5f6f7);
border-radius: 8px; font-size: 13px;
}
.os-item { display: inline-flex; align-items: center; gap: 4px; }
.os-item b { font-weight: 500; }
.os-item.red { color: var(--danger, #d64545); }
/* ---------- 阶段条增强：可点击 + 放大 ---------- */
.stage-node {
padding: 6px 14px; border: 1px solid transparent; border-radius: 8px;
font-size: 13px; line-height: 1.4; white-space: nowrap; cursor: pointer;
font-family: inherit; transition: transform .06s ease, filter .06s ease;
}
.stage-node:hover { transform: translateY(-1px); filter: brightness(.96); }
.stage-node:active { transform: translateY(0); }
.stage-node.done { background: #eaf3de; color: #3b6d11; }
.stage-node.current { background: #b5d4f4; color: #0c447c; font-weight: 500; border-color: #378add; }
.stage-node.next { background: #f1efe8; color: #888780; }
.stage-node.win { background: var(--st-green-bg); color: var(--st-green-fg); font-weight: 500; }
.stage-node.goal { background: #fff; color: var(--st-green-fg); border-color: #bfe3cf; }
.stage-node.neg { background: var(--st-gray-bg); color: var(--st-gray-fg); border-color: var(--st-gray-line); font-weight: 500; cursor: default; }
.stage-node.neg-btn { background: var(--st-gray-bg); color: var(--st-gray-fg); font-weight: 500; border-color: var(--st-gray-line); }
.stage-node.neg-btn:hover { background: #e6e9e7; }
.stage-arrow { color: #b4b2a9; font-size: 13px; }
.stage-neg-group { display: inline-flex; gap: 6px; margin-left: 4px; padding-left: 12px; border-left: 1px dashed var(--line, #d8ded9); }
.stage-btn.ghost {
padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line, #d8ded9);
background: none; color: var(--accent-dark, #0f6e56); cursor: pointer; font-size: 12px;
}
/* ---------- 工单横向节点条（P1：与商机阶段条同视觉，进度对齐） ---------- */
.wo-stagebar {
padding: 10px 12px; margin: 8px 0 10px;
background: var(--bg-soft, #f5f6f7); border-radius: 8px;
}
.wo-stagebar .stage-bar { margin-top: 0; }
.wo-pct {
display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 8px;
border: 1px solid var(--line, #d8ded9); border-radius: 6px; background: #fff;
font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wo-pct.green { color: var(--ok, #3b6d11); border-color: #bfe3cf; background: var(--st-green-bg, #eaf3de); }
.wo-stage-hint { margin-top: 6px; font-size: 12px; }
/* ---------- 应结未结清单（P2：盘点 + 勾选批量结项） ---------- */
.stale-force {
display: flex; gap: 8px; align-items: flex-start; margin: 8px 0;
padding: 8px 10px; border: 1px dashed var(--line, #d8ded9); border-radius: 8px;
background: #fff; font-size: 12px; line-height: 1.6; cursor: pointer;
}
.stale-force input { margin-top: 2px; }
.stale-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.stale-row {
display: grid; grid-template-columns: auto 1fr minmax(220px, 320px);
gap: 10px; align-items: start; padding: 8px 10px;
border: 1px solid var(--line, #d8ded9); border-radius: 8px; background: var(--bg-soft, #f5f6f7);
}
.stale-row input[type="text"], .stale-row input:not([type]) { padding: 6px 8px; }
.stale-pick { display: flex; align-items: center; height: 26px; }
.stale-title { font-size: 13px; font-weight: 500; }
.stale-no { margin-left: 6px; font-size: 12px; color: var(--muted, #888); font-weight: 400; }
.stale-sub { font-size: 12px; color: var(--muted, #666); margin-top: 2px; }
.stale-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.stale-form { display: flex; flex-direction: column; gap: 6px; }
.stale-ev { display: flex; gap: 6px; }
.stale-ev input { flex: 1 1 auto; min-width: 0; }
.stale-unknown {
margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--line, #d8ded9);
border-radius: 8px; background: #fff;
}
.stale-unknown > summary { cursor: pointer; font-size: 13px; font-weight: 500; }
.stale-unknown .stale-list { max-height: 34vh; margin-top: 6px; }
.stale-evtip { font-size: 11px; }
@media (max-width: 768px) {
.stale-row { grid-template-columns: auto 1fr; }
.stale-form { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.wo-stagebar .stage-arrow { display: none; }
}
@media (max-width: 640px) {
.stage-node { padding: 9px 12px; font-size: 12px; }
.stage-neg-group { margin-left: 0; padding-left: 8px; }
}
/* ---------- 按补贴百分比收款（模式 A / B）---------- */
.pct-block {
border: 1px dashed var(--line, #d8ded9); border-radius: 8px; padding: 10px 12px;
background: #fbfcfb; margin: 2px 0;
}
.pct-block[hidden] { display: none; }
.pct-title { font-size: 12px; font-weight: 600; color: var(--accent-dark, #0f6e56); margin-bottom: 8px; }
.pct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; }
.pct-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #5f6368; }
.pct-grid label[hidden] { display: none; }
.pct-grid input, .pct-grid select {
padding: 6px 8px; border: 1px solid var(--line, #d8ded9); border-radius: 6px;
font-size: 13px; background: #fff;
}
.pct-calc {
margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line, #d8ded9);
font-size: 13px; line-height: 1.7; color: #2c2f33;
}
.pct-calc b { color: var(--accent-dark, #0f6e56); font-size: 15px; }
.pct-warn { color: #a32d2d; font-size: 12px; }
/* 粗算卡里的预估毛利：与算式区隔一行，纯提示不参与提交 */
.pct-gross {
margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line);
font-size: 12.5px; color: var(--ink); line-height: 1.6;
}
.pct-gross b { font-size: 14px; font-variant-numeric: tabular-nums; }
.pct-gross b.red { color: var(--danger, #c0392b); }
input.ro, input[readonly].ro {
background: #f1efe8; color: #2c2f33; cursor: not-allowed; border-style: dashed;
}
/* ---------- 应收分期计划 ---------- */
.recv-plans { margin-top: 6px; border-top: 1px dashed var(--line, #d8ded9); padding-top: 6px; }
.recv-plan {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 5px 8px; border-radius: 6px; background: #fafbf9; margin-bottom: 4px; font-size: 12.5px;
}
.recv-plan.is-done { background: #f1f7f2; }
.recv-plan .rp-seq {
min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%;
background: var(--accent, #0f6e56); color: #fff; font-size: 11px;
}
.recv-plan .rp-title { font-weight: 600; color: #2c2f33; }
.recv-plan .rp-amt { color: #5f6368; }
.recv-plan .rp-amt b { color: #2c2f33; }
.recv-plan .rp-st { margin-left: auto; font-size: 12px; color: #5f6368; }
.pl-add { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pl-add input, .pl-add select {
padding: 6px 8px; border: 1px solid var(--line, #d8ded9); border-radius: 6px;
font-size: 13px; background: #fff; min-width: 90px;
}
/* ---------- 产品分类树 / 产品库 / 要点卡（P0–P1，2026-10-22） ---------- */
/* 三段级联：72 个产品平铺成一个 select 已经不可用，改「一级→二级→产品」 */
.pc-cascade { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; }
.pc-cascade select {
padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px;
background: #fff; font-size: 13px; min-width: 0; color: var(--ink);
}
@media (max-width: 700px) { .pc-cascade { grid-template-columns: 1fr; } }
/* 产品库：左分类树 + 右卡片 + 内联详情 */
.prod-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; align-items: start; }
.prod-tree {
position: sticky; top: 6px; max-height: calc(100vh - 150px); overflow-y: auto;
background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 6px;
}
.prod-tree.admin-tree { position: static; max-height: 360px; display: block; margin: 0 12px 12px; }
.prod-cat {
display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%;
text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 6px;
font-size: 13px; color: #3d4540; cursor: pointer; font-family: inherit;
}
.prod-cat.lv2 { padding-left: 20px; font-size: 12.5px; color: #5f6368; }
.prod-cat:hover { background: #f2f6f3; }
.prod-cat.active { background: var(--accent, #0f6e56); color: #fff; }
.prod-cat.active .pc-catn { color: rgba(255, 255, 255, .82); }
.pc-catn { color: #8a938d; font-size: 11.5px; flex: none; }
.prod-main { min-width: 0; }
.prod-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.prod-tools input {
flex: 1; max-width: 360px; padding: 7px 10px; border: 1px solid var(--line);
border-radius: 8px; font-size: 13px; color: var(--ink);
}
.prod-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.prod-card {
background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 10px;
padding: 10px 12px; cursor: pointer; transition: box-shadow .15s, border-color .15s;
}
.prod-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(15, 110, 86, .08); }
.prod-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(15, 110, 86, .12); }
.pc-name { font-weight: 600; font-size: 13.5px; color: #2c2f33; line-height: 1.35; }
.pc-parent { color: #8a938d; margin-right: 3px; }
.pc-cat { color: #7b837d; font-size: 11.5px; margin: 3px 0 7px; }
.pc-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.pc-chips .chip { padding: 2px 7px; font-size: 11.5px; cursor: default; }
.prod-detail { margin-top: 14px; }
.prod-detail .panel-head { gap: 10px; flex-wrap: wrap; }
.prod-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 14px 10px; font-size: 12px; }
.prod-meta .chip { padding: 2px 8px; font-size: 12px; cursor: default; }
.prod-kb-body { padding: 0 14px 14px; }
/* 要点完整度徽标 */
.kb-score { padding: 1px 8px; border-radius: 10px; font-size: 11px; background: #eef3ef; color: #4b5550; white-space: nowrap; }
.kb-score.warn { background: #fdf3e3; color: #a8651b; }
.kb-score.ok { background: #e8f4ec; color: #1b6b46; }
/* 六段式要点卡：身份条 / 门槛 / 力度 / 时间 / 评审 / 资料 */
.kb-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.kb-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.kb-chip { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; font-size: 11.5px; color: #4b5550; }
.kb-empty { color: #9aa29c; font-size: 12px; }
.kb-force div { line-height: 1.6; color: #444a45; }
.kb-cap { color: #a32d2d; font-size: 12px; margin-top: 2px; }
.kb-kv { display: grid; grid-template-columns: 62px 1fr; gap: 6px; font-size: 12.5px; line-height: 1.55; }
.kb-kv b { color: #5f6368; font-weight: 500; }
.kb-sub { font-size: 11.5px; color: #7b837d; margin: 6px 0 2px; }
.kb-fold { margin-top: 8px; }
.kb-fold summary { cursor: pointer; font-size: 12px; color: var(--accent, #0f6e56); }
.kb-tip { font-size: 12px; background: #fdf8e8; border: 1px solid #f0e2b6; border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; line-height: 1.55; }
.kb-loading { color: #8a938d; }
/* 要点编辑弹窗的小节标题 */
.form-sec-title {
font-size: 12px; font-weight: 600; color: #0f6e56; background: #f1f7f3;
border-left: 3px solid #0f6e56; padding: 5px 8px; margin: 4px 0 2px; border-radius: 4px;
}
@media (max-width: 900px) {
.prod-layout { grid-template-columns: 1fr; }
.prod-tree { position: static; max-height: 220px; }
}
.kb-score.empty { background: #f2f2f0; color: #8a938d; }
.kb-score.empty { background: #f2f2f0; color: #8a938d; }
/* ---------- 平台页头部：单行紧凑工具条（说明靠左 / 搜索+按钮靠右） ---------- */
.pf-toolbar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 0 0 12px;
}
.pf-sub { font-size: 13px; color: #7b837d; }
.pf-hit {
font-size: 12px; color: var(--accent); background: var(--accent-soft);
border-radius: 9px; padding: 2px 9px;
}
.pf-ops { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pf-ops input[type="search"] { width: 230px; }
@media (max-width: 720px) {
/* 窄屏：说明独占一行，操作行保持「搜索+按钮」同排不溢出 */
.pf-toolbar .pf-sub { flex-basis: 100%; }
.pf-ops { margin-left: 0; flex: 1; }
.pf-ops input[type="search"] { flex: 1; width: auto; min-width: 0; }
}
/* ============================================================
平台链接：常用入口置顶 + 业务场景分组卡片网格（2026-10-22）
八组配色：申报=蓝 / 知产=青绿 / 人才=紫 / 政策=橙 / 企服=深绿 /
查证=褐金 / 备案=青蓝 / 区县=灰
============================================================ */
.pf-groups { display: flex; flex-direction: column; gap: 22px; }
.pf-group { --pf-gc: #3864A1; --pf-gbg: #eef3f9; }
.pf-group.pf-g-apply { --pf-gc: #3864A1; --pf-gbg: #eef3f9; }
.pf-group.pf-g-ip { --pf-gc: #1F8A70; --pf-gbg: #eaf5f1; }
.pf-group.pf-g-talent { --pf-gc: #7A4FA8; --pf-gbg: #f2ecfa; }
.pf-group.pf-g-policy { --pf-gc: #C2682A; --pf-gbg: #fdf1e7; }
.pf-group.pf-g-service { --pf-gc: #2E7D5B; --pf-gbg: #eaf5ef; }
.pf-group.pf-g-check { --pf-gc: #8A6D3B; --pf-gbg: #faf3e6; }
.pf-group.pf-g-record { --pf-gc: #4F7C8A; --pf-gbg: #eef5f7; }
.pf-group.pf-g-gov { --pf-gc: #7A8288; --pf-gbg: #f2f4f5; }
/* ---------- 组头：层级条（默认 soft；data-skin 切 min / icon） ----------
层级对比：图标/圆点（可选）→ 组名（墨色 600）→ 计数（组色浅底小徽章）→ 说明（浅灰），
组色只做点缀不做大色块，靠间距与细分隔线分层，不靠重边框。 */
.pf-group-head {
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
padding: 0 0 8px 0; margin-bottom: 12px;
border-bottom: 1px solid var(--line-soft);
}
.pf-gdot { width: 7px; height: 7px; border-radius: 50%; background: var(--pf-gc); flex: none; opacity: .8; }
.pf-gico {
display: none; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 8px;
background: var(--pf-gbg); color: var(--pf-gc); flex: none;
}
.pf-gname { font-size: 14.5px; font-weight: 600; color: #1b2421; margin: 0; letter-spacing: .2px; }
.pf-gn {
font-size: 11.5px; color: var(--pf-gc); background: var(--pf-gbg);
border-radius: 9px; padding: 1px 8px; line-height: 1.6; font-weight: 500;
}
.pf-gdesc { font-size: 12px; color: #8a938d; }
.pf-gdesc::before { content: "·"; margin-right: 9px; color: #c4cac5; }
/* —— 皮肤 min：纯文字极简（去圆点/图标，计数变斜杠数字，说明紧跟） —— */
.pf-groups[data-skin="min"] .pf-gdot,
.pf-groups[data-skin="min"] .pf-gico { display: none; }
.pf-groups[data-skin="min"] .pf-group-head { gap: 8px; border-bottom-color: transparent; padding-bottom: 4px; }
.pf-groups[data-skin="min"] .pf-gn { background: transparent; padding: 0; color: #9aa29c; }
.pf-groups[data-skin="min"] .pf-gn::before { content: "/ "; }
.pf-groups[data-skin="min"] .pf-gdesc { color: #a4aca6; }
/* —— 皮肤 icon：图标 + 文字（24px 圆角小底，组色浅底 + 组色线条图标） —— */
.pf-groups[data-skin="icon"] .pf-gdot { display: none; }
.pf-groups[data-skin="icon"] .pf-gico { display: inline-flex; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; }
/* 卡片：去掉左侧色条，统一 1px 灰边框；组色只在 hover 提示与徽章上出现 */
.pf-card {
position: relative; display: flex; flex-direction: column; gap: 6px;
background: var(--surface); border: 1px solid var(--line);
border-radius: 12px; padding: 12px 13px; cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pf-card:hover, .pf-card:focus-visible {
transform: translateY(-2px); box-shadow: var(--shadow);
border-color: var(--pf-gc); outline: none;
}
.pf-card:focus-visible { box-shadow: 0 0 0 3px var(--pf-gbg); }
.pf-top { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
/* 名称完整显示：允许换行，不做省略号截断（长名如「江苏省投资项目在线审批监管平台」） */
.pf-name { font-size: 14px; font-weight: 600; color: #1b2421; line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; }
.pf-desc { font-size: 12px; color: #5f6862; line-height: 1.5; flex: 1; }
.pf-foot {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
border-top: 1px dashed var(--line-soft); padding-top: 7px; margin-top: 2px;
}
.pf-cat { font-size: 11.5px; color: #8a938d; }
.pf-acts { display: flex; align-items: center; gap: 2px; }
/* 「可申报」徽章：组色浅底 + 组色深字（min 皮肤退化为纯文字） */
.pf-badge {
font-size: 11px; color: var(--pf-gc); background: var(--pf-gbg);
border-radius: 8px; padding: 1px 7px; margin-right: 4px; font-weight: 500;
}
.pf-groups[data-skin="min"] .pf-badge { background: transparent; padding-left: 0; color: #6a736d; }
.pf-groups[data-skin="min"] .pf-badge::before { content: "· "; color: #b8c0bb; }
/* 地区标签统一中性浅灰（信息在文字里，色彩只留给组与交互态） */
.pf-top .pill.tag { background: #f3f4f2; color: #6a736d; }
.pf-groups[data-skin="icon"] .pf-top .pill.tag.tag-red { background: #FCEBEB; color: #A32D2D; }
.pf-groups[data-skin="icon"] .pf-top .pill.tag.tag-amber { background: #FAEEDA; color: #854F0B; }
.pf-groups[data-skin="icon"] .pf-top .pill.tag.tag-blue { background: #E6F1FB; color: #185FA5; }
.pf-groups[data-skin="icon"] .pf-top .pill.tag.tag-green { background: #EAF3DE; color: #3B6D11; }
.pf-groups[data-skin="icon"] .pf-top .pill.tag.tag-purple { background: #EEEDFE; color: #534AB7; }
/* ---------- 常用入口（星标置顶区）：淡蓝细边 + 极浅底，克制不加框 ---------- */
.pf-pin {
border: 1px solid #c9d7ea; background: #f7fafd;
border-radius: 12px; padding: 12px 13px;
}
.pf-pin-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-pin-title { font-size: 13.5px; font-weight: 700; color: var(--accent); }
.pf-pin-n {
font-size: 11.5px; color: #fff; background: var(--accent);
border-radius: 9px; padding: 1px 8px; line-height: 1.6;
}
.pf-pin-desc { font-size: 12px; color: #7b837d; }
.pf-pin-empty { border-style: dashed; background: #fff; }
.pf-pin-hint { font-size: 12px; color: #7b837d; line-height: 1.6; }
.pf-pin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pf-pin-card {
display: flex; align-items: flex-start; gap: 6px; justify-content: space-between;
background: #fff; border: 1px solid var(--accent); border-radius: 10px;
padding: 9px 10px; cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease;
}
.pf-pin-card:hover, .pf-pin-card:focus-visible {
transform: translateY(-2px); box-shadow: var(--shadow); outline: none;
}
.pf-pin-name {
font-size: 13px; font-weight: 600; color: #1b2421; line-height: 1.45;
word-break: break-word; overflow-wrap: anywhere;
}
.pf-star {
border: none; background: transparent; cursor: pointer; flex: none;
font-size: 13px; line-height: 1; color: #b8c0bb; padding: 3px 4px; border-radius: 6px;
}
.pf-star:hover { background: var(--accent-soft); color: var(--accent); }
.pf-star.on { color: #d99b04; }
.pf-star.on:hover { color: #a8760a; }
/* ---------- 产品要点里的「相关网站入口」 ---------- */
.kb-plat { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.kp-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.kp-item {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
background: #fbfcfb; transition: background .12s ease, border-color .12s ease;
}
.kp-item:hover { background: var(--accent-soft); border-color: var(--accent); }
.kp-name { font-size: 13px; font-weight: 600; color: #1b2421; }
.kp-desc { font-size: 11.5px; color: #7b837d; flex: 1; min-width: 120px; }
.kp-more { font-size: 12px; color: var(--accent); white-space: nowrap; }
.kp-item:hover .kp-more { text-decoration: underline; }
/* ---------- 工单 / 项目详情顶部快捷入口 ---------- */
.pf-quick {
background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
padding: 10px 12px; margin-bottom: 14px;
}
.pfq-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pfq-title { font-size: 13px; font-weight: 700; color: #1b2421; }
.pfq-list { display: flex; flex-wrap: wrap; gap: 7px; }
.pfq-btn {
display: inline-flex; align-items: center; gap: 5px;
border: 1px solid var(--line); border-radius: 9px; padding: 5px 10px;
font-size: 12.5px; background: #fff; color: #1b2421;
transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.pfq-btn:hover { transform: translateY(-1px); }
.pfq-btn.g-apply:hover { background: #eef3f9; border-color: #3864A1; color: #3864A1; }
.pfq-btn.g-policy:hover { background: #eaf5f1; border-color: #1F8A70; color: #1F8A70; }
.pfq-btn.g-tool:hover { background: #fdf1e7; border-color: #C2682A; color: #C2682A; }
.pfq-go { color: #9aa29c; font-size: 11px; }
/* 每个入口 = 链接 chip + 其下方内联账号条（chip 是 ，账号条必须在 外面） */
.pfq-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pfq-cred {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
margin: 0 0 2px 2px; padding: 3px 8px;
background: #f7f9fb; border: 1px dashed #d9e0e6; border-radius: 8px;
font-size: 12px; line-height: 1.5;
}
.pfq-cred .pc-sys { font-weight: 600; color: #46524c; max-width: 200px; }
.pfq-cred.empty { background: transparent; border-style: dotted; }
.pfq-cred .pc-item { display: inline-flex; align-items: center; gap: 4px; }
.pfq-cred .pc-item i { font-style: normal; color: #8b9590; font-size: 11.5px; }
.pfq-cred .pc-item b { font-weight: 600; color: #1b2421; max-width: 160px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfq-cred .pc-copy {
border: 1px solid #cdd7d1; background: #fff; color: #46524c;
border-radius: 7px; padding: 2px 7px; font-size: 11.5px; cursor: pointer;
}
.pfq-cred .pc-copy:hover { border-color: var(--accent); color: var(--accent); }
.pfq-cred .pc-copy.ghost { border-style: dashed; }
.pfq-more { margin-top: 8px; }
.pfq-more summary { cursor: pointer; font-size: 12px; color: var(--accent); }
.pfq-more .pfq-list { margin-top: 7px; }
@media (max-width: 900px) {
.pf-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pf-pin-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
}
@media (max-width: 560px) {
.pf-grid { grid-template-columns: 1fr; }
/* 常用区在手机上保持两列：名称短、点击热区够大，一屏能看到 6 个以上 */
.pf-pin-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
.pf-pin { padding: 10px; }
.pf-groups { gap: 18px; }
.pf-gdesc { display: none; }
.pf-pin-desc { display: none; }
.kp-desc { display: none; }
}
/* 客户对账（st-* 专用前缀，避免与 kjt-*/tl-* 串台） */
.st-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
justify-content: space-between; margin-bottom: 12px; }
.st-range { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-range input[type="date"] { padding: 5px 8px; border: 1px solid var(--line);
border-radius: 6px; background: var(--bg); color: var(--ink); }
.st-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.st-sum { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.st-cell { flex: 1 1 120px; min-width: 110px; background: var(--line-soft);
border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.st-cell span { display: block; font-size: 12px; color: var(--muted); }
.st-cell b { display: block; font-size: 16px; font-weight: 500; margin-top: 2px; }
.st-cell em { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; }
.st-cell.big { flex: 1 1 200px; background: var(--danger-soft); border-color: var(--danger); }
.st-cell.big b { font-size: 22px; color: var(--danger); }
.st-op { align-self: center; color: var(--muted); font-size: 15px; }
.st-meta { margin-top: 8px; font-size: 12px; color: var(--muted); }
.st-warn { margin-top: 8px; padding: 8px 10px; border-radius: 6px; font-size: 12px;
background: var(--warn-soft); color: #8a5a00; border: 1px solid #f0d9a8; }
.st-tip { margin-bottom: 10px; padding: 8px 10px; border-radius: 6px; font-size: 12px;
background: var(--line-soft); color: var(--muted); border: 1px solid var(--line); }
.st-tbl .num { text-align: right; }
.st-ghead td { background: var(--line-soft); font-size: 12px; color: var(--muted); }
.st-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
padding: 10px 0; border-bottom: 1px solid var(--line); }
.st-row:last-child { border-bottom: 0; }
.st-main { flex: 1 1 260px; min-width: 220px; }
.st-title { font-size: 14px; font-weight: 500; }
.st-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.st-sub.warn { color: var(--danger); }
.st-amount { font-size: 18px; font-weight: 500; min-width: 100px; text-align: right; }
.st-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.st-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.st-loading { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }
.st-pill { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px;
border: 1px solid var(--line); color: var(--muted); background: var(--surface); }
.st-pill.ok { color: #0f6e56; border-color: #9fe1cb; background: #e1f5ee; }
.st-pill.info { color: #185fa5; border-color: #b5d4f4; background: #e6f1fb; }
.st-pill.warn { color: #854f0b; border-color: #fac775; background: #faeeda; }
.st-pill.gray { color: var(--muted); }
/* 开票 / 对账主体：八项信息平铺，缺项弱化并标「待补」 */
.st-party { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 8px; }
.st-pcell { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
background: var(--surface); }
.st-pcell span { display: block; font-size: 12px; color: var(--muted); }
.st-pcell b { display: block; font-size: 13.5px; font-weight: 500; margin-top: 2px;
word-break: break-all; }
.st-pcell.empty { border-style: dashed; }
.st-pcell.empty b { color: var(--muted); font-weight: 400; }
/* ---------------- 供应商合作（列表+详情）UI 审查落地 20261023 ----------------
详情页此前用裸 ，没吃到 .table-wrap/.table 的任何样式
（无内边距/无表头底色/无横向滚动），导致列挤压、表头竖排。统一改走
.table-wrap + table.table；财务卡重做为「标题/大金额/分项行/口径脚注」四层。 */
.fin-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 1000px) { .fin-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fin-cards { grid-template-columns: 1fr; } }
.fin-card { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px 11px; background: var(--surface); min-width: 0; }
.fin-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fin-title { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fin-amount { font-size: 21px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 3px; letter-spacing: -0.2px; white-space: nowrap; }
.fin-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.fin-rows { margin-top: 8px; display: grid; gap: 3px; }
.fin-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--muted); }
.fin-row b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-row b.red { color: var(--danger); }
.fin-foot { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line-soft); font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.sp-note { margin-top: 10px; padding: 7px 12px; background: #f7f9fc; border: 1px solid var(--line-soft); border-radius: 9px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.sp-note b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-note .red { color: var(--danger); }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-case-table { min-width: 1160px; }
.sp-case-table td.note-cell { max-width: 300px; }
.sp-num, .table th.sp-num { text-align: right; font-variant-numeric: tabular-nums; }
.sp-case-q { padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; width: 180px; outline: none; background: #fff; }
.sp-case-q:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,100,161,.08); }
/* 列表页口径折叠 + 金额主行强调（20261023 列表页 UI 落地） */
.sp-caliber { border: 1px solid var(--line-soft); border-radius: 10px; background: #f7f9fc; margin-bottom: 14px; }
.sp-caliber summary {
cursor: pointer; padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted);
list-style: none; display: flex; align-items: center; gap: 6px; user-select: none;
}
.sp-caliber summary::-webkit-details-marker { display: none; }
.sp-caliber summary .arr { display: inline-block; transition: transform .15s; font-size: 11px; }
.sp-caliber[open] summary .arr { transform: rotate(90deg); }
.sp-caliber summary:hover { color: var(--ink); }
.sp-caliber .caliber-body { padding: 2px 14px 10px; font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.sp-caliber b { color: var(--ink); }
.sp-fin-strong { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* 供应商档案：五个子模块（资质 / 联系人 / 邮箱 / 地址 / 账号）上下分隔，
标题行沿用 .section-head，新增按钮靠右，与「客户详情 - 联系人 / 系统账号」同一套观感 */
.sup-sub { padding: 12px 0 14px; border-top: 1px dashed var(--line); }
.sup-sub:first-child { border-top: 0; padding-top: 2px; }
.sup-sub .section-head { margin: 0 0 8px; gap: 8px; }
.sup-sub .section-head h3 { margin-right: auto; }
.sup-sub .section-head .muted { font-size: 12px; }
/* ---------------- 侧边栏折叠（仅桌面 >900px 生效；≤900px 本来就是图标模式） ---------------- */
.sidebar { transition: width .2s ease; }
.nav-item .nav-label, .brand-text { transition: opacity .15s ease; }
.side-toggle {
position: absolute; top: 50%; transform: translateY(-50%); right: -13px;
width: 26px; height: 26px; padding: 0;
border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted);
cursor: pointer; display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, .10); z-index: 25;
}
.side-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.side-toggle svg { width: 16px; height: 16px; transition: transform .2s ease; }
@media (min-width: 901px) {
/* 折叠 = 只改宽度 token：侧栏收窄 + 抽屉左边界同步左移，主区/抽屉一起吃掉释放出的 168px */
html.side-collapsed { --side-w: 64px; }
html.side-collapsed .sidebar { padding: 20px 8px 18px; }
html.side-collapsed .brand { justify-content: center; padding: 2px 0 20px; }
/* 直接移出布局（而非仅透明），保证 brand-mark 与图标严格居中不偏移 */
html.side-collapsed .brand-text, html.side-collapsed .side-hint { display: none; }
html.side-collapsed .nav-item { justify-content: center; gap: 0; padding: 11px 0; }
html.side-collapsed .nav-item .nav-label { display: none; }
html.side-collapsed .side-toggle svg { transform: rotate(180deg); }
}
/* 901~1024px + 折叠：抽屉实际宽度 = 视口 − 64，比不折叠时多出 168px，
已经放得下「主内容 + 右侧栏」并排，不必再退化成上下堆叠（否则白白浪费横向空间） */
@media (min-width: 901px) and (max-width: 1024px) {
html.side-collapsed .drawer-split { flex-direction: row; overflow: hidden; }
html.side-collapsed .drawer-main { flex: 1 1 auto; }
html.side-collapsed .drawer-main .drawer-body { overflow-y: auto; flex: 1; }
html.side-collapsed .drawer-side {
flex: 0 0 300px; border-left: 1px solid var(--line); border-top: 0;
}
html.side-collapsed .drawer-side .side-body { overflow-y: auto; }
}
@media (max-width: 900px) { .side-toggle { display: none; } }
/* ---------- 案件凭证：按业务流程分组 + 两步式上传（与开票/到账登记同款） ---------- */
.grp { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
.grp-t { display: block; font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
.flist { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.fitem {
display: inline-flex; align-items: center; gap: 5px; background: #fff;
border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12px;
}
.fitem b { font-weight: 500; color: var(--accent); }
.fitem .icon-btn { padding: 0 2px; font-size: 12px; }
/* 凭证组折叠：状态驱动 —— 当前阶段展开高亮，其余折叠成一行摘要 */
details.grp { padding: 6px 12px 8px; }
details.grp > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
details.grp > summary::-webkit-details-marker { display: none; }
details.grp > summary::before { content: "▸"; color: #9aa29c; font-size: 11px; }
details.grp[open] > summary::before { content: "▾"; }
details.grp > summary .grp-t { display: inline-block; margin-bottom: 0; margin-right: 2px; }
details.grp.grp-cur { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(56, 100, 161, 0.08); }
.grp-badge {
font-size: 11px; padding: 1px 7px; border-radius: 999px;
background: var(--accent); color: #fff; font-weight: 500;
}
/* 状态条：案件状态是主线索，视觉权重高于其他字段；终止/异常档用红底区分 */
.chip.chip-warn.active { background: #b4232a; border-color: #b4232a; color: #fff; }
/* 分区小标题（如官费区）：把低频但性质独立的一块切开，避免与相邻字段混读 */
.case-sec {
margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line);
display: flex; align-items: baseline; gap: 2px; font-size: 12.5px; font-weight: 600;
}
/* ---------- 案件凭证：按业务流程分组 + 两步式上传（与开票/到账登记同款） ---------- */
.grp { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
.grp-t { display: block; font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
.flist { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.fitem {
display: inline-flex; align-items: center; gap: 5px; background: #fff;
border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12px;
}
.fitem b { font-weight: 500; color: var(--accent); }
.fitem .icon-btn { padding: 0 2px; font-size: 12px; }
/* ---------- 项目编辑窗：第三方成本折叠区（非重点项，默认收起） ---------- */
.tp-fold { margin-top: 4px; }
.tp-fold summary { cursor: pointer; font-size: 12.5px; padding: 4px 0; }
.tp-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding-top: 8px; }
.tp-body .field.full { grid-column: 1 / -1; }
@media (max-width: 720px) { .tp-body { grid-template-columns: 1fr; } }
/* ---------- 项目编辑窗：来源商机同步条 ---------- */
.sync-ok {
display: inline-flex; align-items: center; font-size: 11.5px; color: #8a94a6;
background: #f4f6f9; border: 1px dashed #d6dce5; border-radius: 999px; padding: 1px 9px;
}
.sync-ok::before { content: "✓"; margin-right: 4px; color: #4a9a6d; }
/* ---------- 供应商合作案件明细：一屏优先（列合并 + 省略 + 限高展开） ---------- */
/* fixed 布局按百分比定列宽：窄屏不横向滚动，宽屏剩余宽度全部给「备注 / 待办」 */
.sp-case-table { table-layout: fixed; }
.sp-case-table th, .sp-case-table td { padding: 6px 8px; vertical-align: top; word-break: break-word; }
.sp-case-table th:nth-child(1) { width: 8%; }
.sp-case-table th:nth-child(2) { width: 20%; }
.sp-case-table th:nth-child(3) { width: 8%; }
.sp-case-table th:nth-child(4) { width: 6%; }
.sp-case-table th:nth-child(5) { width: 8%; }
.sp-case-table th:nth-child(6) { width: 8%; }
.sp-case-table th:nth-child(7) { width: 10%; }
.sp-case-table th:nth-child(8) { width: 8%; }
.sp-case-table th:nth-child(10) { width: 68px; }
.ellip {
display: block; max-width: 100%; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
a.ellip { color: var(--accent); }
.icon-btn.del:hover { background: #fdeceb; color: #c0392b; }
.clamp2 {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
/* ---------- 供应商操作日志 ---------- */
.sup-logs { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: #fbfcfd; }
.sup-logs summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.sup-logs summary:hover { color: var(--ink); }
.log-list { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.log-item {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
font-size: 12px; padding: 4px 0; border-bottom: 1px dashed #eef0f3;
}
.log-item:last-child { border-bottom: none; }
.log-time { font-variant-numeric: tabular-nums; color: var(--muted); }
.log-act { font-weight: 600; }
.log-user { margin-left: auto; font-size: 11.5px; }
.log-chg { width: 100%; padding-left: 2px; font-size: 11.5px; }
/* —— 财务档案：浏览态行内编辑 + 区域级保存（未修改置灰）—— */
.fin-save-bar { display: inline-flex; gap: 6px; }
.fin-save-bar .btn[disabled] { opacity: .45; cursor: not-allowed; }
/* 备注默认单行截断（上限随视口收缩），点「展开」看全文，避免长备注把表撑出横向滚动 */
.fin-note { display: inline-block; max-width: 100%; vertical-align: bottom; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fin-note-cell.open .fin-note { white-space: normal; overflow: visible; text-overflow: clip; }
.fin-note-tgl { font-size: 12px; color: var(--accent); cursor: pointer; white-space: nowrap; margin-left: 6px; }
/* 财务档案编辑格：fixed 布局（仅此处）。与列表表格的「禁 fixed」纪律不冲突——
那条针对含派单下拉/操作按钮的列表（控件会被截断）；本表是纯输入格，
input width:100% 随列伸缩、无可截断控件，fixed 才能让列宽恒等于分配值，
在抽屉主区 ~500px 的窄容器里也不出横向滚动（auto 布局下 input 的固有
最小宽度约 130px×5 列必然撑破， percentage 提示压不住）。 */
table.prof-fin-table { table-layout: fixed; min-width: 0; } /* 全局 table.table 有 min-width:860px（同为 0-1-1 需在其后覆盖），这里是窄容器内的编辑格，必须归零 */
.prof-fin-table th:nth-child(1) { width: 13%; }
.prof-fin-table th:nth-child(2), .prof-fin-table th:nth-child(3),
.prof-fin-table th:nth-child(4), .prof-fin-table th:nth-child(5) { width: 16%; }
.prof-fin-table th:nth-child(6) { width: 21%; }
/* 数字格隐藏步进按钮：省 ~20px/列，年度与金额直接键入 */
.prof-fin-table input[type="number"]::-webkit-outer-spin-button,
.prof-fin-table input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prof-fin-table input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.prof-fin-table th:nth-child(7) { width: 40px; }
.prof-fin-table td, .prof-fin-table th { padding: 8px 8px; } /* 默认 12×14 在窄容器里会吃掉小数格大半宽度 */
.prof-fin-table td { overflow: hidden; }
.prof-fin-table td input { width: 100%; min-width: 0; padding: 6px 6px; } /* 收窄内边距，保证 7 位数值完整显示 */