:root {
--bg: var(--border-strong);
--card: var(--border-strong);
--surface: #ffffff;
--surface-2: var(--border-strong);
--border: var(--ok);
--text: #173f3f;
--text-dim: #6e9b98;
--primary: #00b8a9;
--primary-dark: var(--primary);
--danger: #e5385b;
--danger-bg: #ffeef2;
--warn: #f59e0b;
--warn-bg: #fff5e6;
--ok: #1a9c6b;
--ok-bg: #e6f7ef;
--shadow: 0 2px 12px rgba(30, 41, 82, 0.08);
--radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/*
* 全局：hidden 属性必须是最高优先级的隐藏手段。
* 浏览器 UA 的 [hidden]{display:none} 会被作者样式（如 .view.active{display:block}、
* .case-detail-page{display:grid}）覆盖，导致 el.hidden = true 完全失效 ——
* 这是「点击按钮没反应」类 bug 的典型根因（详情页/视图切换都踩过）。
*/
[hidden] { display: none !important; }
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* 顶栏 */
.topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 32px;
background: var(--card);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
width: 44px; height: 44px; border-radius: 12px;
background: linear-gradient(135deg, var(--primary), var(--primary));
color: var(--on-primary); font-weight: 800; font-size: 18px;
display: flex; align-items: center; justify-content: center;
}
.brand-text h1 { font-size: 18px; font-weight: 700; letter-spacing: 0.3px; }
.brand-text p { font-size: 12px; color: var(--text-dim); }
.badge {
font-size: 12px; padding: 6px 12px; border-radius: 20px;
background: var(--ok-bg); color: var(--ok); font-weight: 600;
}
.badge.off { background: var(--warn-bg); color: var(--warn); }
/* 主体 */
.container { max-width: 1120px; width: 100%; margin: 0 auto; padding: 28px 20px 40px; flex: 1; }
/* 上传卡片 */
.upload-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.upload-zone {
border: 2px dashed var(--border); border-radius: 12px;
padding: 40px 20px; text-align: center; cursor: pointer;
transition: all .2s ease;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--primary); background: var(--primary-soft); }
.upload-icon { color: var(--primary); margin-bottom: 8px; display: flex; justify-content: center; }
.upload-title { font-size: 16px; font-weight: 600; }
.upload-title .link { color: var(--primary); }
.upload-sub { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
.upload-sub.dim { font-size: 12px; opacity: .8; }
/* V4.80 · 上传须知折叠块（L2：只在遇到对应情况时才需要）。
用胶囊形状的 summary 而不是「一行灰字链接」：折叠入口本身必须看得出来
「这里还有东西」，否则等于把 4 条说明藏成了不存在（隐藏内容的失败模式
不是「多点了两下」，而是「以为没有」）。 */
.upload-notes { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.upload-notes > summary {
cursor: pointer; display: inline-block; list-style: none;
padding: 3px 12px; border: 1px solid var(--border);
border-radius: 999px; background: var(--surface-2); color: var(--text-dim);
}
.upload-notes > summary::-webkit-details-marker { display: none; }
.upload-notes > summary::before { content: "▸ "; }
.upload-notes[open] > summary::before { content: "▾ "; }
.upload-notes[open] > summary { margin-bottom: 6px; }
.upload-notes > summary:hover { color: var(--primary); border-color: var(--primary); }
.upload-notes p { margin: 5px 0 0; font-size: 12px; line-height: 1.7; opacity: .9; }
.file-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.file-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
background: var(--bg);
}
.file-item .ficon { font-size: 18px; }
.file-item .fname { flex: 1; font-size: 14px; word-break: break-all; }
.file-item .fsize { font-size: 12px; color: var(--text-dim); }
.file-item .fremove { cursor: pointer; color: var(--text-dim); font-size: 18px; padding: 0 4px; }
.file-item .fremove:hover { color: var(--danger); }
.upload-actions { margin-top: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* V4.80（要求3）功能与提示分开：提交按钮旁的「提交后去哪」—— 全站唯一
不折叠也不挪走的提示。它必须离按钮近：阅读时机 = 点提交前后。 */
.upload-go-hint { font-size: 12px; color: var(--text-dim); }
/* 控件行下方的说明行：不与控件挤同一行（窄屏折行后说明会被读成另一个选项）。 */
.ct-hint {
margin: -2px 0 6px; padding-left: 4px;
font-size: 12px; color: var(--text-dim); line-height: 1.6;
}
.btn {
padding: 11px 22px; border-radius: 10px; font-size: 14px; font-weight: 600;
border: none; cursor: pointer; transition: all .15s ease;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: var(--border); }
.btn-ghost:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: 7px 14px; font-size: 12px; }
/* 进度 */
.progress-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-top: 20px; box-shadow: var(--shadow); }
.progress-steps { display: flex; justify-content: space-between; margin-bottom: 14px; }
.step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.step .dot {
width: 24px; height: 24px; border-radius: 50%; background: var(--ok-bg); color: var(--text-dim);
display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.step.active { color: var(--primary); font-weight: 600; }
.step.active .dot { background: var(--primary); color: var(--on-primary); }
.step.done { color: var(--ok); }
.step.done .dot { background: var(--ok); color: var(--on-primary); }
.progress-bar { height: 8px; background: var(--ok-bg); border-radius: 8px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--primary)); border-radius: 8px; transition: width .4s ease; }
.progress-tip { font-size: 13px; color: var(--text-dim); margin-top: 10px; }
/* 结果 */
.results { margin-top: 20px; }
.overview {
display: grid; grid-template-columns: 220px 1fr 320px; gap: 16px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
align-items: center;
}
.score-card { display: flex; align-items: center; gap: 14px; }
.score-ring {
width: 96px; height: 96px; border-radius: 50%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--ok-bg) 0);
position: relative;
}
.score-ring::before { content: ""; position: absolute; inset: 8px; background: var(--surface); border-radius: 50%; }
.score-ring span, .score-ring small { position: relative; z-index: 1; }
.score-ring span { font-size: 26px; font-weight: 800; }
.score-ring small { font-size: 11px; color: var(--text-dim); }
.score-label .level-pill { display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 16px; }
.score-label p { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat {
text-align: center; padding: 14px 8px; border-radius: 10px; background: var(--bg);
display: flex; flex-direction: column; align-items: center;
}
.stat-num { font-size: 26px; font-weight: 800; }
.stat-name { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.stat.high .stat-num { color: var(--danger); }
.stat.mid .stat-num { color: var(--warn); }
.stat.low .stat-num { color: var(--ok); }
.conclusion-card { border-left: 4px solid var(--ring-color, #bfe0dc); padding: 6px 16px; }
.conclusion-tag { font-size: 20px; font-weight: 800; }
.conclusion-card p { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
/* Tabs */
.tabs { display: flex; gap: 4px; margin: 20px 0 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 6px; width: fit-content; }
.tab {
padding: 9px 20px; border: none; background: transparent; border-radius: 8px;
font-size: 14px; font-weight: 600; color: var(--text-dim); cursor: pointer;
}
.tab.active { background: var(--primary); color: var(--on-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* 风险清单 */
.risk-list { display: flex; flex-direction: column; gap: 12px; }
.risk-item {
background: var(--card); border: 1px solid var(--border); border-radius: 12px;
padding: 16px 18px; border-left: 5px solid var(--sev-color); box-shadow: var(--shadow);
}
.risk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sev-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.risk-cat { font-size: 12px; color: var(--text-dim); background: var(--surface-2); padding: 3px 10px; border-radius: 12px; }
.risk-title { font-size: 15px; font-weight: 700; }
.risk-desc { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.risk-basis { font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.risk-basis b { color: var(--text-dim); }
.risk-source {
font-size: 11px; color: var(--text-dim);
background: var(--bg); padding: 1px 8px; border-radius: 6px; margin-left: auto;
}
/* 建议面板 */
.advice-panel { display: flex; flex-direction: column; gap: 16px; }
.advice-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); }
.advice-card h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.advice-card h3 .ic { font-size: 18px; }
.advice-card ul { list-style: none; }
.advice-card li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 14px; color: var(--text); }
.advice-card li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
/* ── 统一折叠组件（L2「依据/过程」层）────────────────────────────
★ 为什么要有这个组件：项目里此前已有 9 套各自为政的折叠样式
（.dis-rule / .dce-det / .l2-adv / .q-doc / .cr-pv-ctx / .upload-notes /
.rg-details / .li-notes / .dis-method-fold），而理算区一个都没用 ——
口径、来源、扣除链、对账全部平铺在结论下面，用户看一个金额要穿过四五段解释。
新用一律走 .cap-fold，不再造第 10 套。
★ 三条判据（写在这里，免得下次又退回去）：
① 折叠摘要必须写清「里面有什么」（.cfd），否则等于把内容藏进黑洞；
② 只有 L2 能进折叠 —— 改变结论怎么读的那几句（如「未解析出统筹地区，
不会按全国标准代替」「未理算 ≠ 应赔付 0 元」）必须常显；
③ 折叠默认收起，且不跨会话记忆展开状态（否则首屏又会变长）。 */
.cap-fold { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin: 12px 0; }
.cap-fold > summary { cursor: pointer; list-style: none; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text-dim); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cap-fold > summary::-webkit-details-marker { display: none; }
.cap-fold > summary::before { content: ""; width: 0; height: 0; flex: none;
border-left: 4.5px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
transition: transform .15s; transform-origin: 25% 50%; }
.cap-fold[open] > summary::before { transform: rotate(90deg); }
.cap-fold > summary:hover { color: var(--primary); }
.cap-fold > summary .cfd { font-weight: 400; font-size: 11.5px; color: var(--text-dim); opacity: .9; }
.cap-fold > summary .cnt { margin-left: auto; font-weight: 500; font-size: 11.5px; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 0 8px; }
/* 结论卡后面那条边界说明是 direct child（不在卡片内），需要自己撑出间距 */
#detail-panel-settle-flow > .settle-note,
#settlementPanel > .settle-note { margin-top: 12px; }
.cfb { padding: 2px 14px 14px; border-top: 1px dashed var(--border); margin-top: 2px; }
.cfb > *:first-child { margin-top: 10px; }
/* 折叠内的小节：DOM 仍沿用 .advice-card（回归锁按它取卡片），只是视觉上去壳，
避免「卡片套卡片」的双层边框。 */
.cfb .advice-card { border: 0; background: transparent; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 14px; }
.cfb .advice-card > h3 { font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
.cfb .advice-card > h3 .ic { font-size: 13px; }
/* 识别结果 */
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.meta-chip { font-size: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 5px 12px; color: var(--text-dim); }
.meta-chip b { color: var(--text); font-weight: 600; }
.fields-card, .text-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.fields-card h3, .text-card h3 { font-size: 15px; margin-bottom: 14px; }
.fields-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.field-box { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.field-box .flabel { font-size: 12px; color: var(--text-dim); }
.field-box .fvalue { font-size: 14px; font-weight: 600; margin-top: 2px; word-break: break-all; }
.text-card pre { white-space: pre-wrap; word-break: break-all; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; max-height: 420px; overflow: auto; font-family: inherit; }
/* 空状态 */
.empty-state { text-align: center; padding: 50px 20px; color: var(--text-dim); }
.empty-illustration { color: var(--border-strong); margin-bottom: 12px; }
.empty-state h2 { font-size: 18px; color: var(--text); margin-bottom: 8px; }
.empty-state p { font-size: 14px; max-width: 520px; margin: 0 auto; }
.feature-row { display: flex; justify-content: center; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.feature { display: flex; flex-direction: column; }
.feature b { font-size: 14px; color: var(--text); }
.feature span { font-size: 12px; color: var(--text-dim); }
.footer { text-align: center; padding: 20px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 12px; }
.footer .disclaimer { display: block; margin-top: 4px; opacity: .8; }
.hidden { display: none !important; }
/* ===== 赔偿测算 ===== */
.settle-hero {
background: linear-gradient(135deg, var(--primary), var(--primary));
color: var(--on-primary); border-radius: 14px; padding: 26px 28px;
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
box-shadow: var(--shadow);
}
.settle-hero .amount { font-size: 40px; font-weight: 800; letter-spacing: .5px; }
.settle-hero .amount small { font-size: 16px; font-weight: 600; }
.settle-hero .label { font-size: 13px; opacity: .92; margin-top: 2px; }
.settle-hero .params { font-size: 13px; line-height: 1.9; text-align: right; opacity: .96; }
.settle-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.settle-table th {
text-align: left; padding: 10px 12px; background: var(--bg); color: var(--text-dim);
font-size: 12px; font-weight: 600;
}
.settle-table th.num, .settle-table td.num { text-align: right; }
.settle-table td { padding: 12px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.settle-table .basis { font-size: 12px; color: var(--text-dim); }
.settle-table tr.total td { font-weight: 700; background: var(--bg); }
.settle-table tr.final td { font-weight: 800; color: var(--primary); font-size: 16px; }
.settle-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.settle-flow .flow-step { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; text-align: center; min-width: 108px; }
.settle-flow .flow-step b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.settle-flow .flow-step span { font-size: 11px; color: var(--text-dim); }
.settle-flow .arrow { color: var(--text-dim); font-size: 18px; }
.settle-note { font-size: 13px; color: var(--text-dim); padding-left: 18px; position: relative; margin-bottom: 8px; }
.settle-note::before { content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
/* 未理算结论卡（V4.99d）：只回答「能不能算 / 缺几项 / 缺哪几项 / 下一步」。
★ 缺项用 chips 而不是表格 —— 首屏要的是「缺什么」的名字，不是逐项三层说明。 */
.settle-uncalc-lead { font-size: 14px; line-height: 1.75; margin: 0 0 10px; }
.settle-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.settle-chip { font-size: 12px; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; }
.settle-chip-more { opacity: .85; }
.settle-uncalc-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.settle-note.warn::before { background: var(--warn); }
/* OR-M：采集数据理算 —— 口径来源条 + 待补标准行 */
.settle-srcline {
background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--primary);
border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
font-size: 13px; line-height: 1.9; color: var(--text-dim);
}
.settle-srcline b { color: var(--text); }
.settle-srcline > span { display: block; font-size: 12px; color: var(--text-dim); }
.settle-table tr.settle-pending td { background: var(--warn-bg); color: var(--text-dim); }
.settle-pending-tag {
display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
font-size: 11px; font-weight: 600; background: var(--warn); color: var(--on-primary); vertical-align: 1px;
cursor: help;
}
/* ★ V4.75：pending 行的「缺口」说明 —— 光给一个「未出数」用户不知道该去补什么 */
.settle-table td > .settle-gap,
.settle-gap {
margin-top: 3px; font-size: 11px; line-height: 1.5; color: var(--warn);
font-weight: 400; padding-left: 0;
}
/* ★ V4.75：按月待遇标签（供养亲属抚恤金）—— 与「待补标准」必须长得不一样，
否则会被当成「还没算」，而它其实是「按月发放、不计入一次性合计」 */
.settle-monthly-tag {
display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
font-size: 11px; font-weight: 600; background: var(--ok); color: var(--on-primary);
vertical-align: 1px; cursor: help;
}
/* 身故三项口径卡：三项基数各不相同，逐项一行，别挤成一段 */
.settle-srcline > div { display: block; font-size: 13px; color: var(--text-dim); line-height: 1.9; }
.settle-srcline > div b { color: var(--text); }
/* ★★ V4.83（OR-M2）医疗五步扣除链路 + 未计入合计的待补项
—— 与 .settle-table 同族但是**另一张表**：这张表逐行是「步骤」不是「赔付项」，
两者的列语义不同（步骤没有「扣减」与「可赔」两列，而是「基数 / 作用 / 之后」）。
★ 窄屏必须能横滚：步骤名 + 三个数字 + 依据说明在手机上必然放不下，
而压扁的后果是数字换行看不全（本项目的老问题：能横滚 ≠ 用户看得见）。 */
.settle-chain { width: 100%; border-collapse: collapse; font-size: 13px; }
.settle-chain th {
text-align: left; padding: 8px 10px; background: var(--bg); color: var(--text-dim);
font-size: 12px; font-weight: 600;
}
.settle-chain td { padding: 8px 10px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.settle-chain tr.final td { font-weight: 700; background: var(--bg); }
/* 「未执行」的步骤行保留在表里（判据：做不到的那一步要留在账上并写明原因），
用与「待补标准」同族的浅黄底 —— 不另造一种颜色，避免被读成两类不同的事 */
.settle-chain tr[style*="fffbf0"] td { color: var(--text-dim); }
.settle-chain-card { overflow-x: auto; }
.settle-chain-card .settle-chain { min-width: 640px; }
/* ★ V4.75：理算人工覆盖（案件层字段「人工值优先」）
设计取舍：输入框要**看得出现在是人工值还是原始值**（左边框 + 徽标），
并始终把那句话「原始值：…」摆在旁边 —— 改赔款基数的功能，
最怕的就是「用户以为改的是这个数、其实改的是另一个」。 */
.settle-ov-tip { font-size: 12px; color: var(--text-dim); line-height: 1.8; margin: 2px 0 10px; }
.settle-ov-group { margin-top: 10px; }
.settle-ov-gtitle {
font-size: 12px; font-weight: 700; color: var(--text-dim);
padding-bottom: 4px; border-bottom: 1px dashed var(--border); margin-bottom: 6px;
}
.settle-ov-row {
display: grid; grid-template-columns: 190px minmax(140px, 260px) 1fr auto;
align-items: center; gap: 8px; padding: 4px 0 4px 8px;
border-left: 3px solid transparent; border-radius: 6px;
}
.settle-ov-row.is-ovr { border-left-color: var(--warn); background: var(--warn-bg); }
.settle-ov-k { font-size: 13px; font-weight: 600; color: var(--text); }
.settle-ov-badge {
display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px;
font-size: 11px; font-weight: 600; background: var(--warn); color: var(--on-primary);
vertical-align: 1px; cursor: help;
}
.settle-ov-in {
width: 100%; box-sizing: border-box; padding: 5px 8px; font-size: 13px;
border: 1px solid var(--border); border-radius: 6px; background: var(--card);
color: var(--text);
}
.settle-ov-in:focus { outline: none; border-color: var(--primary); }
.settle-ov-row.is-ovr .settle-ov-in { border-color: var(--warn); font-weight: 600; }
.settle-ov-orig { font-size: 11px; color: var(--text-dim); }
.settle-ov-revoke { white-space: nowrap; }
.settle-ov-actions { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.settle-ov-msg { font-size: 12px; color: var(--text-dim); }
.settle-ov-msg.is-err { color: var(--warn); font-weight: 600; }
/* 字段采集页：被人工覆盖的案件层字段要能一眼认出来（否则那里显示的是旧值来源） */
.field-box.is-override { border-color: var(--warn); background: var(--warn-bg); }
.field-group-tip { font-size: 12px; color: var(--text-dim); margin: 4px 0 8px; }
.receipt-st.warn { color: var(--warn); }
/* 统筹地区为推断值 —— 它决定社平工资进而决定伤残金，必须显眼 */
.settle-inferred {
display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 4px;
font-size: 11px; font-weight: 600; background: var(--warn); color: var(--on-primary);
vertical-align: 1px; cursor: help;
}
/* 详情页「理算完整经过」里的待补标准流块 */
.settle-flow .flow-step.settle-pending-step {
background: var(--warn-bg); border-style: dashed; color: var(--text-dim);
}
/* 「未理算」占位（P0-1）：必须与「¥0」在视觉上**一眼可分** ——
旧实现把 null 渲染成 ¥0，审核员会读成「系统判定不赔」。
所以这里刻意不用货币色（绿/红），改用中性虚线徽标 + tooltip 说明原因。 */
.settle-unsettled {
display: inline-block; padding: 0 6px; border-radius: 4px;
border: 1px dashed var(--border); background: var(--bg); color: var(--text-dim);
font-size: 12px; font-weight: 600; cursor: help; white-space: nowrap;
}
/* 上传面板顶部的「将套用哪套规则库」提示条（P0-3）
—— 把「隐式分支」变成「显式声明」：同一份材料在两个菜单下套不同规则、
结论可能不同，而原来这个分支在界面上**零提示**。 */
.upload-rule-hint {
margin: 0 0 12px; padding: 8px 12px; border-radius: 8px;
background: var(--primary-soft); border: 1px solid var(--border); color: var(--accent);
font-size: 13px; line-height: 1.7;
}
.upload-rule-hint b { color: var(--accent); }
.upload-rule-hint .dim { color: var(--accent); font-size: 12px; }
.upload-rule-hint.is-audit { background: var(--warn-bg); border-color: var(--border); color: var(--warn); }
.upload-rule-hint.is-audit b { color: var(--warn); }
.upload-rule-hint.is-audit .dim { color: var(--warn); }
/* 案件清单的来源口径切换（P0-2）—— 让「本菜单 / 全部」可核对，不再让
一个菜单的 0 被读成「全库没有案件」。 */
.case-stat select.case-src-select {
font-size: 12px; padding: 2px 6px; border: 1px solid var(--border);
border-radius: 6px; background: var(--surface); color: var(--text);
}
/* ===== 单据识别 ===== */
.doc-types { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-type-chip {
border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
background: var(--bg); display: flex; flex-direction: column; gap: 3px; min-width: 150px;
}
.doc-type-chip .dt-label { font-size: 14px; font-weight: 600; }
.doc-type-chip .dt-matched { font-size: 11px; color: var(--text-dim); }
.doc-type-chip.primary { border-color: var(--primary); background: var(--ok-bg); }
.doc-type-chip.primary .dt-label { color: var(--primary); }
.doc-type-chip .dt-badge {
font-size: 11px; font-weight: 700; color: var(--on-primary); background: var(--primary);
border-radius: 10px; padding: 1px 8px; align-self: flex-start;
}
.dt-score {
background: var(--primary); color: var(--on-primary); border-radius: 6px;
padding: 1px 8px; font-size: 11px; font-weight: 700; align-self: flex-start;
}
/* ===== 分类字段 ===== */
.field-group { margin-bottom: 18px; }
.field-group:last-child { margin-bottom: 0; }
.field-group-title {
font-size: 13px; font-weight: 700; color: var(--primary);
margin-bottom: 10px; padding-left: 10px; border-left: 3px solid var(--primary);
}
.field-group .fields-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* ===== 核赔规则审核 ===== */
.rule-summary {
display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.rule-sum-stat {
flex: 1; min-width: 120px; text-align: center;
background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 8px;
}
.rule-sum-stat b { display: block; font-size: 24px; font-weight: 800; color: var(--text); }
.rule-sum-stat.warn b { color: var(--warn); }
.rule-sum-stat span { font-size: 12px; color: var(--text-dim); }
.ra-material-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ra-material-head h3 { display: flex; align-items: center; gap: 8px; }
.ra-issue-type {
font-size: 11px; font-weight: 600; color: var(--warn); background: var(--warn-bg);
border-radius: 10px; padding: 2px 10px;
}
.ra-scene { font-size: 12px; color: var(--text-dim); margin: 4px 0 12px; }
.ra-check {
border-left: 3px solid var(--border); padding: 10px 12px; margin-bottom: 10px;
background: var(--bg); border-radius: 0 8px 8px 0;
}
.ra-check:last-child { margin-bottom: 0; }
.ra-check-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ra-status {
font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 8px; white-space: nowrap;
}
.ra-point { font-weight: 700; font-size: 14px; }
.ra-val {
font-size: 12px; color: var(--primary); background: var(--ok-bg);
border-radius: 6px; padding: 1px 6px; word-break: break-all;
}
.ra-rule { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.ra-script {
font-size: 12px; color: var(--text-dim); margin-top: 6px;
background: var(--surface); border: 1px dashed var(--border); border-radius: 6px; padding: 6px 10px;
}
/* ===== 案件头（单一案件展示） ===== */
.case-header {
display: flex; align-items: stretch; gap: 16px; margin-bottom: 22px;
padding: 18px 22px;
background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
border: 1px solid var(--border); border-radius: 14px;
box-shadow: var(--shadow);
flex-wrap: wrap;
}
.case-id-block {
display: flex; align-items: center; gap: 14px;
padding-right: 18px; border-right: 1px dashed var(--border);
}
.case-icon { font-size: 32px; line-height: 1; }
.case-id-text { display: flex; flex-direction: column; gap: 4px; }
.case-id-row { display: flex; align-items: center; gap: 8px; }
.case-label {
font-size: 11px; font-weight: 600; color: var(--text-dim);
text-transform: uppercase; letter-spacing: .5px;
}
.case-id {
font-size: 20px; font-weight: 800; color: var(--primary);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .5px;
}
.case-time-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.case-time { color: var(--text-dim); }
.case-source {
background: var(--ok-bg); color: var(--primary); border-radius: 6px;
padding: 1px 8px; font-size: 11px; font-weight: 600;
}
.case-summary {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px 24px; flex: 1; min-width: 280px;
}
.case-sum-item { display: flex; flex-direction: column; gap: 2px; }
.case-sum-label {
font-size: 11px; color: var(--text-dim); font-weight: 600;
text-transform: uppercase; letter-spacing: .4px;
}
.case-sum-val { font-size: 14px; color: var(--text); font-weight: 500; }
.case-sum-item.highlight .case-sum-val { color: var(--ok); font-size: 18px; font-weight: 800; }
#newCaseBtn {
align-self: flex-start; white-space: nowrap;
}
/* ===== 案件内材料卡片 ===== */
#caseMaterials { display: flex; flex-direction: column; gap: 10px; }
.mat-card {
display: flex; align-items: center; gap: 14px;
padding: 12px 16px; background: var(--bg);
border: 1px solid var(--border); border-radius: 10px;
transition: all .15s;
}
.mat-card:hover { background: var(--ok-bg); border-color: var(--primary); }
.mat-icon { font-size: 24px; line-height: 1; }
.mat-body { flex: 1; min-width: 0; }
.mat-name {
font-size: 14px; font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mat-meta {
display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
font-size: 12px; color: var(--text-dim);
}
.mat-primary {
background: var(--ok-bg); color: var(--primary);
border-radius: 6px; padding: 1px 8px; font-weight: 600;
}
.mat-primary.none { background: var(--bg); color: var(--text-dim); }
.mat-method, .mat-chars { color: var(--text-dim); }
.mat-score { background: var(--warn-bg); color: var(--warn); border-radius: 6px; padding: 1px 6px; font-weight: 600; }
.mat-time {
font-size: 12px; color: var(--text-dim);
background: var(--bg); padding: 2px 8px; border-radius: 6px;
}
@media (max-width: 860px) {
.overview { grid-template-columns: 1fr; }
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.topbar { padding: 14px 16px; }
.case-header { flex-direction: column; }
.case-id-block { padding-right: 0; border-right: none; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
}
/* ============================================================
全局导航 + 视图切换
============================================================ */
.global-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.global-nav-btn {
background: transparent; border: 1px solid transparent; color: var(--text-dim);
padding: 6px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; font-weight: 500;
transition: all .15s;
}
.global-nav-btn:hover { background: var(--surface-2); color: var(--text); }
.global-nav-btn.active {
background: var(--primary); color: var(--on-primary); border-color: var(--primary);
box-shadow: 0 2px 8px rgba(0,184,169,0.3);
}
.view { display: none; }
.view.active { display: block; }
.page-header { margin-bottom: 18px; }
.page-header h2 { font-size: 20px; margin: 0 0 4px; }
.page-header .dim { color: var(--text-dim); font-size: 13px; margin: 0; }
.dim { color: var(--text-dim); }
.dim2 { color: var(--text-dim); }
.dim.small { font-size: 12px; }
/* 搜索框 / 按钮 */
.input-search {
flex: 1; min-width: 220px; padding: 8px 12px; border: 1px solid var(--border);
border-radius: 8px; font-size: 13px; background: var(--surface);
}
.btn-xs { padding: 3px 8px; font-size: 12px; border-radius: 6px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
/* 案件清单 */
.case-list-toolbar, .rule-toolbar {
display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap;
}
.case-stats-row { display: flex; gap: 16px; margin-bottom: 14px; }
.case-stat {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 16px; min-width: 100px;
display: flex; flex-direction: column; align-items: center;
}
.case-stat b { font-size: 22px; color: var(--primary); }
.case-stat span { color: var(--text-dim); font-size: 12px; }
/* V4.87（OR-J1）：案件清单分页器。
★ 与统计行（.case-stats-row）同族但**不共用**：统计行是「有多少」，
分页器是「在看哪一段」—— 前者是数据，后者是导航，混一排会让
「共 337 件」看起来像一个可以点的按钮。
★ 左右分栏：左边信息（共 N 件 / 第几段 / 每页条数），右边动作（翻页）。
窄屏折行时信息在上、动作在下，阅读顺序与直觉一致。 */
.case-pager {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin: -4px 0 12px 0;
font-size: 12.5px; color: var(--text-dim);
}
.case-pager:empty { display: none; }
.case-pager-info b { color: var(--text); font-variant-numeric: tabular-nums; }
.case-pager-nav { display: inline-flex; gap: 6px; }
/* V4.87（OR-J6）：表格勾选列。
★ 类名**刻意不叫 `.ct-check`** —— 那个是全站表单勾选行组件（`label.ct-check`，
`display:inline-flex`）；同名套到 `| / | ` 上会把单元格塌成 inline-flex，
表头整行错位、且不报任何错（表格照样「渲染出来了」）。
★ 宽度写死 40px：不写的话这一列会被表头里那个复选框撑到与其他列同宽，
「勾选列」占了和「案件」一样的位置。 */
.case-check-col { width: 40px; text-align: center; padding-left: 6px; padding-right: 6px; }
.case-check-col input { cursor: pointer; accent-color: var(--primary); }
/* V4.87（OR-J6）：批量操作条。默认 `hidden`（由 JS 控制），这里只管出现时的样子。
★ 三段从左到右 = 「选了几件」→「能做什么」→「为什么有些做不了」：
未开通的权限说明放在动作**之后**，用户先读到能做什么，不必先读限制。
★ 用主色底而不是中性灰底：它是一个**状态提示**（有东西被选中了），
中性底会混进一排白色卡片里看不见。 */
.case-bulk-bar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 8px 12px; margin: 0 0 12px 0;
background: var(--primary-soft); border: 1px solid var(--primary);
border-radius: 10px; font-size: 12.5px; color: var(--text);
}
.cbb-count b { color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.cbb-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cbb-denied { color: var(--text-dim); font-size: 12px; }
/* 卡片视图里的勾选框：与案件号同一行（`.case-card-top` 是行容器）。
★ 不能让它直接落进 `.case-card-head`（那是 column 容器）—— 会自成一行浮在
案件号上方，看起来像标题装饰而不是「这件被选中了」。 */
.case-card-top { display: flex; align-items: center; gap: 6px; }
.case-card-top .case-row-check { flex: none; cursor: pointer; accent-color: var(--primary); }
/* V4.87（OR-J6）：批量弹层（影响面提示 / 结果报告 两用）。
★ `.bulk-note` 与 `.bulk-sum` 分开定义：「可处理 8 件」是**数字摘要**，
要压过旁边的说明文字；两者同字号时用户会漏掉件数。 */
.bulk-note { font-size: 12.5px; color: var(--text); line-height: 1.7; margin: 0 0 8px 0; }
.bulk-note.dim { color: var(--text-dim); font-size: 12px; }
.bulk-sum { font-size: 13px; color: var(--text); margin: 0 0 8px 0; }
.bulk-sum b { color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.bulk-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px 0; }
.bulk-pick select { width: auto; min-width: 190px; }
/* 逐条结果可能几十行 —— 限高让「弹层底部按钮」始终可见，
否则用户得先滚到底才知道怎么关。横向也允许滚（原因列可能很长）。 */
.bulk-scroll { max-height: 46vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.bulk-table { font-size: 12.5px; }
/* ★★ 四个状态必须**四种颜色**（V4.87 判据）：
「跳过（原本就是该类型）」是**幂等成功**，「未处理（出错）」是**失败** ——
两者都表现为「这次没改动」，用同一种颜色会把正常的跳过读成故障，
进而让用户去重试一个本来就对的操作。 */
.br-tag {
display: inline-block; padding: 1px 8px; border-radius: 999px;
font-size: 11px; font-weight: 700; white-space: nowrap;
}
.br-ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.br-skip { background: var(--surface-2); color: var(--text-dim); }
.br-fail { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.bulk-table .br-err { color: var(--danger); }
.case-list { display: grid; gap: 10px; }
/* V4.80（要求6）卡片 / 表格双视图切换：
· 开关用「下划线页签」语汇（与全站导航一致），不用两颗互相排他的按钮；
· 表格 = 一行一案：行点击进详情，金额列数字右对齐 + 等宽（可比大小）；
操作列不随容器横滚飘走的前提是列本身不超宽 —— 列数已按最小必要收敛。 */
.case-view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.case-view-switch button {
border: 0; background: transparent; padding: 5px 14px; cursor: pointer;
font-size: 12px; color: var(--text-dim);
}
.case-view-switch button.is-on { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.case-table-wrap { overflow-x: auto; }
.case-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.case-table th, .case-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
/* ★ 一行一案的关键：任何一格都不许竖排折行。列窄时中文一格一字的「竖排」
比横向滚动难读得多（看不懂 > 滚一下）。容器自带 overflow-x。 */
.case-table td { white-space: nowrap; }
/* `.conclusion-tag` 的 20px/800 是详情页大结论样式，表格里同样要约束回
行内状态（与卡片 meta 行同一判据：结论靠色相区分，不靠体量）。 */
.case-table .conclusion-tag { font-size: 12px; font-weight: 700; }
.case-table thead th { font-size: 11.5px; color: var(--text-dim); font-weight: 600; background: var(--surface-2); white-space: nowrap; }
.case-table tbody tr:last-child td { border-bottom: 0; }
.case-table tbody tr { cursor: pointer; }
.case-table tbody tr:hover { background: var(--surface-2); }
.case-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.case-table .dim-cell { color: var(--text-dim); }
.case-table .ct-name { font-weight: 600; }
.case-table .ct-sub { font-size: 11px; color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.case-table .ct-amt { font-size: 15px; font-variant-numeric: tabular-nums; }
.case-table .ct-unset { color: var(--text-dim); font-size: 12px; }
.case-table .ops { white-space: nowrap; }
.case-table .ops .btn { padding: 3px 8px; }
/* ★ 操作列 sticky：列多时表格横滚，「删除/补充」恰好是被裁掉的那一列 ——
最需要点得到的按钮反而最难点到。钉在右缘 + 左缘投影，滚动时始终可点。 */
.case-table th:last-child, .case-table td:last-child {
position: sticky; right: 0; background: var(--surface);
box-shadow: -6px 0 8px -6px rgba(16, 24, 40, .18);
}
.case-table thead th:last-child { background: var(--surface-2); }
.case-table tbody tr:hover td:last-child { background: var(--surface-2); }
.case-table tr.is-busy td:last-child {
background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.case-table tr.is-busy td { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.case-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 14px 16px; display: flex; gap: 16px; align-items: center;
cursor: pointer; transition: all .15s;
}
.case-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.06); border-color: var(--primary); }
.case-card-head { display: flex; flex-direction: column; gap: 2px; min-width: 130px; }
.case-card-id { font-weight: 700; color: var(--primary); font-size: 14px; }
.case-card-time { color: var(--text-dim); font-size: 11px; }
.case-card-body { flex: 1; min-width: 0; }
.case-card-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.case-card-info { display: flex; gap: 12px; flex-wrap: wrap; color: var(--text-dim); font-size: 12px; margin-bottom: 4px; }
.case-card-info b { color: var(--text); }
.case-card-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
/* V4.80 · 信息四级制（要求2）：`.conclusion-tag` 的 20px/800 是给**详情页大结论**
设计的；案件卡的 meta 行复用了同一个 class，等于让「协商赔付」四个字比案件名
（15px）还大、和金额主判据（20px）一样大 —— 两个「最重要的东西」互相打架，
结果谁都不突出。卡内约束回 12px：结论是 L3 状态，靠色相区分，不靠体量。 */
.case-card-meta .conclusion-tag { font-size: 12px; font-weight: 700; }
/* 处理节点（报案审核/风险初筛/金额理算）是**中性事实**：它不携带好坏，
不该占用 ok 绿（绿在这套语义里=正常/通过）。灰化后，红色胶囊（全量人工）
才能重新成为这一行里唯一「要警觉」的信号。 */
.case-card-meta .badge { background: var(--surface-2); color: var(--text-dim); font-weight: 600; }
/* V4.80 · 信息四级制（要求2）：卡片右侧独立列，承载**金额主判据**与操作。
左侧回答「这是哪个案子」，右侧回答「赔多少、下一步点哪」—— 两件事分开站，
扫清单时视线只走一列就够了。分隔线是必要的：没有它，右侧金额会被读成
左列某个字段的续行（而不是一个独立结论）。 */
.case-card-side {
display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
gap: 10px; min-width: 172px; padding-left: 16px; align-self: stretch;
border-left: 1px solid var(--border);
}
.case-card-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; max-width: 100%; }
.case-card-amount .ca-label { font-size: 11px; color: var(--text-dim); }
.case-card-amount .ca-value {
font-size: 20px; line-height: 1.2; letter-spacing: -.01em;
font-variant-numeric: tabular-nums; color: var(--text);
}
.case-card-amount .ca-unsettled { font-size: 13px; line-height: 1.4; text-align: right; }
.case-card-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* 「删除」降权：破坏性操作与常规操作（查看/补充）平级排列时，
手滑的代价等于误看的代价。这里让它平时只用灰字，悬停才转红。 */
.case-card-actions [data-quiet] {
color: var(--text-dim); background: transparent; border-color: transparent;
padding-left: 6px; padding-right: 6px;
}
.case-card-actions [data-quiet]:hover {
color: var(--danger, #e5385b); border-color: var(--danger, #e5385b);
background: transparent;
}
.empty-card {
background: var(--surface); border: 1px dashed var(--border);
border-radius: 10px; padding: 40px; text-align: center; color: var(--text-dim);
}
/* 案件详情 */
.case-detail-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px;
background: var(--surface-2); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px;
}
.case-detail-grid > div { font-size: 13px; }
.case-detail-grid b { color: var(--text); }
.sub-h { font-size: 14px; margin: 14px 0 8px; color: var(--text); }
.file-link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.file-link-card {
border: 1px solid var(--border); border-radius: 8px; padding: 10px;
background: var(--surface);
}
.file-link-name { font-weight: 600; font-size: 13px; }
.file-link-meta { color: var(--text-dim); font-size: 11px; margin: 2px 0 6px; }
.file-link-thumbs { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.file-link-thumbs img {
max-width: 100%; max-height: 160px; border-radius: 4px; border: 1px solid var(--border);
}
.no-thumb { color: var(--text-dim); font-size: 12px; padding: 12px; background: var(--surface-2); border-radius: 6px; width: 100%; text-align: center; }
.file-link-orig { font-size: 12px; color: var(--primary); text-decoration: none; }
/* 风险卡片新增 */
.risk-id {
font-family: ui-monospace, monospace; font-size: 11px;
background: var(--surface-2); padding: 1px 6px; border-radius: 4px; color: var(--text-dim);
}
.risk-source-dim { color: var(--text-dim); font-size: 11px; }
.risk-evidence {
background: var(--warn-bg); border-left: 3px solid var(--warn); padding: 6px 10px;
border-radius: 0 6px 6px 0; margin-top: 6px; font-size: 12px;
}
.evidence-text { font-family: ui-monospace, monospace; color: var(--text); }
.risk-foot {
display: flex; justify-content: space-between; align-items: center;
margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.risk-source-block { flex: 1; }
.src-evidence-btn {
background: var(--ok-bg); border: 1px solid var(--border); color: var(--primary);
padding: 3px 10px; border-radius: 6px; font-size: 12px; cursor: pointer;
}
.src-evidence-btn:hover { background: var(--ok-bg); }
/* 规则管理 */
.rule-stats, .training-stats {
display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.rule-stat, .training-stat {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 16px; min-width: 110px;
display: flex; flex-direction: column; align-items: center;
}
.rule-stat b, .training-stat b { font-size: 22px; color: var(--primary); }
.rule-stat span, .training-stat span { color: var(--text-dim); font-size: 12px; }
.rule-list { display: flex; flex-direction: column; gap: 10px; }
.rule-group {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 12px 16px;
}
.rule-group.disabled { opacity: 0.55; }
.rule-group-head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px;
}
.rule-group-name { font-weight: 700; font-size: 15px; }
.rule-group-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; margin-top: 2px; }
.rule-group-actions { display: flex; gap: 4px; flex-shrink: 0; }
.rule-points { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--border); }
.rule-point {
background: var(--surface-2); border-radius: 6px; padding: 8px 12px;
}
.rule-point.disabled { opacity: 0.5; }
.rule-point-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rule-point-title { font-weight: 600; font-size: 13px; }
.rule-point-actions { display: flex; gap: 4px; }
.rule-point-rule { font-size: 12px; color: var(--text); margin: 4px 0; }
.rule-point-issues { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.rule-point-script { font-size: 11px; color: var(--text-dim); margin-top: 2px; font-style: italic; }
/* 训练中心 */
.training-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 16px; margin-bottom: 16px;
}
.training-card h3 { font-size: 15px; margin: 0 0 10px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th, .data-table td {
text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border);
}
/* ★ 表头一律不折行（2026-10-08 工伤标准表「表头逐字竖排」修复）：
中文可在任意字间断行，表格 auto 布局在列多 / 容器窄时会把列压到**一个字宽**
（实测 th 仅 43px，减掉左右 28px padding 后内容区 15px，13px 字号每行放不下一个字
→ 「伤残等级」被渲染成 4 行竖排）。表头都是短标签，本来就不该折行。
nowrap 之后列宽的硬下限 = 表头文字宽，配合外层 .training-table 的
overflow-x:auto（见下）—— 宽度不够时**横向滚动**，而不是把表格压扁。 */
.data-table th { background: var(--surface-2); font-weight: 600; white-space: nowrap; }
.data-table tbody tr:hover { background: var(--surface-2); }
/* ★ 表格「操作」列适配（2026-10-08，用户报障「操作列展示不全」）：
病灶不是窄屏 —— 实测社平工资表操作列**独占 334px**（3 个纯文字按钮各 100px），
整表 1225px 而容器上限 1140px → 在 1440 / 1280 窗口下**恒定溢出 85px**，
要横滚才看得到「🕘 痕迹」「🗑 删除」，用户只能看见第一个「✏️ 修改」。
三件套处置（缺一不可；下列数值均为 1440 视口实测）：
① 最常用的「修改」保留文字，次要 / 危险操作**图标化**（title 保留完整说明、
aria-label 保无障碍）→ 操作列 334 → 185px；
② `.is-dense` 把单元格水平内边距 14 → 9px → 12 列共省约 120px（见下方该条规则）；
③ 操作列 `sticky` 固定右侧 —— 万一窗口更窄仍需横滚，操作按钮也必须始终可见。
结果：整表 1225 → **1140px = 容器宽，溢出 0px**（1100 窄窗口同样 0px）。
注意 sticky 单元格必须自带**不透明背景**，否则横滚时下层列会从它底下透出来；
且 `border-collapse: collapse` 下 sticky 单元格的左边框不渲染，分隔线用阴影代替。 */
/* ★ 必须写成 `.data-table .op-col .btn-icon`（3 个类）而不是裸 `.btn-icon`（1 个类）：
本文件末尾「按钮现代化」一节有 `.btn { padding: 11px 22px }`，与 `.btn-xs` 特指度相同
但**定义在后面** → 裸 `.btn-icon` 会被它覆盖，图标按钮退化成 22px 水平内边距的宽按钮
（实测 66px，预期 30px）。用更高特指度直接锁死尺寸，不去和全局按钮样式比先后。 */
.data-table .op-col .btn-icon {
box-sizing: border-box;
width: 30px;
min-width: 30px;
padding: 3px 0;
font-size: 13px;
line-height: 1.3;
text-align: center;
}
.data-table th.op-col,
.data-table td.op-col {
position: sticky;
right: 0;
background: var(--card);
box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .18);
}
.data-table thead th.op-col { background: var(--surface-2); }
/* hover 背景写在 tr 上，但 sticky 单元格自带背景会盖住它 → 显式同步，否则 */
/* 鼠标划过时操作列与其他列不同色，看着像「这一格坏了」。 */
.data-table tbody tr:hover td.op-col { background: var(--surface-2); }
/* ★ 宽表「紧凑模式」：水平内边距 14 → 9px。12 列的表格单靠这一项就省下约 120px ——
这是让整表**放回容器内**（不再恒定横滚）的关键余量，同时信息密度更高。
只加在列数最多的表上（`.training-table.is-dense`），不动其余 30 处表格的观感。 */
.training-table.is-dense .data-table th,
.training-table.is-dense .data-table td { padding-left: 9px; padding-right: 9px; }
/* ★ P1-12（V4.79h）：**选型对比表**不该用截断。
实测候选引擎评估表实宽 1489px 被压到 1106px，「互验独立性 / 中文混排准确率 /
接入成本 / 许可协议 / 部署形态」这些**选型时最该横向比较的列**全部截断，
横向对比退化成逐格 hover。这张表的价值就是「并排看清差异」，
信息一被切掉，表就只剩装饰作用。
容器 .training-table 本来就有 overflow-x:auto，所以放开列宽只会横滚、不会压扁。 */
.training-table.is-wide .cell-trunc {
max-width: none; white-space: normal; word-break: break-word; line-height: 1.5;
}
/* ★ P1-11（V4.79h）：医院库地址列 —— 实测 12 处被截断。
医院 → 统筹地区反查是理算「三层解析」的第二层，院区/地址正是判断
「该用哪个地区标准」的依据；截断后无法肉眼确认是哪家医院哪个院区
（hover title 不应是唯一出口）。改为可换行，最多三行。 */
.hosp-address { max-width: 300px; }
.hosp-address small { white-space: normal; word-break: break-word; line-height: 1.5; }
/* P1-14：伤残预估案件卡 —— 未选中的卡片不再挂按钮，改为一句灰字说明
（卡片本身就是入口，四个一模一样的「开始预估」按钮只会造出「必须点按钮」的错觉）。 */
.dis-case-item .dc-hint { font-size: 11px; color: var(--text-dim, #6b7c8c); }
/* P1-14：页头技术口径说明收进折叠块 —— 首屏让给「选案件 / 看结果」。 */
.dis-method-fold { margin: 2px 0 6px; }
.dis-method-fold > summary {
cursor: pointer; font-size: 12px; color: var(--primary); font-weight: 600;
list-style: none; display: inline-block; padding: 2px 0;
}
.dis-method-fold > summary::-webkit-details-marker { display: none; }
.dis-method-fold > summary::before { content: "▸ "; }
.dis-method-fold[open] > summary::before { content: "▾ "; }
.dis-method-fold[open] > summary { margin-bottom: 4px; }
.dis-method-fold p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.75; }
/* ★「口径」列最小宽度：该列内容形如「工伤保险待遇核发基数 + 📌社保缴费基数 + 🩹工伤核发基数」，
列窄时中文会被逐字断行 —— 实测 62px 宽时该格折成 **18 行、整行高 371px**，
把表格撑得极高且完全不可读。给出「主文本整行显示」所需的宽度下限，
并把行内徽标改为块级（各占一行），让该格稳定在 4 行以内。 */
.data-table th.col-wagetype,
.data-table td.col-wagetype { min-width: 122px; }
/* 口径名不折行 → 列宽的**硬下限由真实文本宽度决定**，不靠字号折算（实测折算值偏小 2 行）。
两个徽标各占一行，该格稳定在 3 行。 */
.data-table td.col-wagetype .wt-name { display: block; white-space: nowrap; }
.data-table td.col-wagetype .src-badge { display: block; margin: 3px 0 0; }
.data-table code {
background: var(--bg); padding: 1px 6px; border-radius: 4px; font-size: 12px;
}
.cell-trunc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag {
display: inline-block; background: var(--surface-2); padding: 1px 8px; border-radius: 4px;
font-size: 11px; color: var(--text-dim);
}
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.off { background: var(--danger-bg); color: var(--danger); }
/* 弹层 */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none !important; } /* 兼容：用 [hidden] 属性关闭的弹窗 */
.modal.hidden { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.modal-card {
position: relative; background: var(--surface); border-radius: 12px;
width: 90%; max-width: 540px; max-height: 88vh; display: flex; flex-direction: column;
box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.modal-card.modal-wide { max-width: 880px; }
.modal-head {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.modal-head h3 { font-size: 15px; margin: 0; }
.modal-close {
background: transparent; border: none; font-size: 22px; cursor: pointer; color: var(--text-dim);
line-height: 1; padding: 0 6px;
}
.modal-body { padding: 16px 18px; overflow-y: auto; }
/* V4.81 减损建议「依据完整性」声明条（对照设计原型）。
★ 「没跑」与「跑了没问题」绝不能同形 —— 缺依据的建议用黄框 + 逐条列缺哪块，
依据完整才用绿框。两态只差一个色号而不差结构的话，扫一眼是分不出来的。 */
.basis {
background: var(--warn-bg); border: 1px solid var(--warn); border-radius: 6px;
padding: 8px 12px; font-size: 12px; color: var(--warn); margin: 8px 0;
}
.basis.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.basis ul { margin: 4px 0 0; padding-left: 18px; }
.basis li { margin: 2px 0; }
/* V4.81 补跑弹层：每环节一行（名称 | 状态或计数 | 动作）。
行式而不是「一个环节一个卡片」——用户要比较的是环节之间的可补性，
卡片会把可比较信息摊到纵向，行式才让「哪几个能补」一眼扫完。 */
.repair-row {
display: flex; align-items: center; gap: 12px; padding: 9px 0;
border-bottom: 1px solid var(--border); font-size: 13px;
}
.repair-row:last-child { border-bottom: none; }
.repair-row .rr-name { flex: 1 1 auto; min-width: 0; }
.repair-row .rr-meta { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.repair-note { font-size: 12px; color: var(--text-dim); margin: 10px 0 0; line-height: 1.6; }
.repair-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
/* 汇总层：把「合计将补跑 N 处」做成可扫的大字，避免用户自己在心里加 */
.repair-total { font-size: 13px; margin-top: 12px; }
.repair-total b { color: var(--primary); }
/* V4.81 补跑留痕（效果图 12）。一条一行、时间等宽对齐 ——
留痕是**流水**，行与行之间唯一可比较的就是时间与操作人：
时间列不固定宽度时，每条的时间长度不同（有无秒）会让右侧栏目左右跳动，
一段流水看起来像三段不同的东西。 */
.trace-head {
display: flex; align-items: baseline; gap: 10px;
}
.trace-head h3 { margin: 0; }
.trace {
list-style: none; margin: 10px 0 0; padding: 0;
font-size: 12px; color: var(--text-dim);
}
.trace li {
display: flex; gap: 10px; align-items: baseline;
padding: 4px 0; border-bottom: 1px dashed var(--border);
}
.trace li:last-child { border-bottom: none; }
.trace .tr-time {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
white-space: nowrap; flex: 0 0 auto;
}
.trace .tr-case { color: var(--text); flex: 0 1 auto; }
.trace li.dim { color: var(--text-dim); }
/* ============================================================
V4.81 · 批量操作条（效果图 4）
------------------------------------------------------------
常驻一条横条，「已选 N 件」与动作按钮同行。
★ 底纹用 `--ok-bg`（浅青）而不是白：它是**临时动作区**，不是常驻工具栏 ——
与上方筛选条同色会让两块看起来是同一件事，而筛选条改的是「看什么」、
这条改的是「对已选案件做什么」，混在一起就会出现「以为在筛，其实在选」。
★ `flex-wrap` 必须开：窄窗口下强行单行会把「补跑只对未勾选的环节生效」
挤出容器（不换行也没有滚动条），而那正是最该被读到的一句。
============================================================ */
.batch-bar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 12px 0 14px; padding: 9px 14px;
background: var(--ok-bg); border: 1px solid var(--border);
border-radius: 10px; font-size: 12.5px; color: var(--text);
}
.batch-bar .batch-all {
display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
}
.batch-bar .batch-n { white-space: nowrap; color: var(--text-dim); }
.batch-bar .batch-n b {
color: var(--primary-dark); font-size: 14px; padding: 0 3px;
font-variant-numeric: tabular-nums; /* 数位等宽：0→10 时横条不左右抖 */
}
.batch-bar .batch-hint { margin-left: auto; }
/* 置灰时仍要能看清「为什么点不动」—— 用 opacity 会让 title 的提示对象变成一块灰 */
.batch-bar .btn[disabled] { cursor: not-allowed; }
/* ============================================================
V4.81 · 角色能力矩阵（效果图 14）
------------------------------------------------------------
★ 这里的样式全部是「读得出结论」用的，不是装饰：
· 角色列**定宽 + 居中**：列宽随角色名长短变化时，同一行十个单元格会左右错位，
扫一眼根本看不出「哪一列是断的」——而「一眼看出断在哪」正是这张表唯一的用途。
· `.cur-col` 高亮 = 当前登录角色列。★ 高亮必须同时落在 thead 与 tbody，
只高亮表头的话，视线往下一走就丢了参照。
· `.off` 用淡化而不是红色：这里「不可」是**正常状态**（只读角色本来就该满是 —），
涂成警示色会让整表看上去像出了故障。
· `.cap-group-start` 分组线：三组能力（可勾环节 / 补跑 / 页签）之间必须有可见分隔，
否则「批量补跑」紧挨着「页签 · 上传」会让人以为它俩同级。
============================================================ */
.cap-matrix, .cap-model { width: 100%; border-collapse: collapse; }
.cap-matrix th, .cap-matrix td { white-space: nowrap; }
.cap-matrix .cap-name { text-align: left; color: var(--text); }
/* ★ 角色列定宽 92px 且**允许表头折行**（表体仍不折）：角色名长短不一
（「超级管理员」5 字 vs「诊断-环节勾选受限」9 字），不定宽就会出现
「同一个人名撑宽一列、下一列跟着右移」—— 扫列时看到的分组线是斜的。
表头折行不影响任何一格的位置，是这里唯一不付代价的收窄手段。 */
.cap-matrix .cap-role, .cap-matrix .cap-mark { text-align: center; width: 92px; }
.cap-matrix .cap-role {
white-space: normal; word-break: break-word; line-height: 1.25; font-size: 11.5px;
}
.cap-matrix .cap-mark { font-size: 15px; font-weight: 700; line-height: 1.2; }
.cap-matrix .cap-mark.on { color: var(--primary); }
.cap-matrix .cap-mark.off { color: var(--border); font-weight: 500; }
.cap-matrix .cap-note,
.cap-matrix .cap-model-point,
.cap-model .cap-lv {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11.5px;
}
.cap-matrix .cap-note { color: var(--text-dim); text-align: left; }
.cap-matrix tbody tr.cap-group-start td { border-top: 2px solid var(--border); }
/* 当前登录角色列：底纹 + 表头加粗。用内阴影而不是 border —— border 会参与表格布局，
让高亮列比别的列宽 1px，列与列之间的对齐线就歪了。 */
.cap-matrix .cur-col {
background: var(--ok-bg);
box-shadow: inset 1px 0 0 var(--primary), inset -1px 0 0 var(--primary);
}
.cap-matrix th.cur-col { color: var(--primary-dark); }
/* 权限点归属（建议）：文档表。
★ 说明列 `width:100%` 会吃掉全部富余宽度，把另外三列压到 min-content ——
「intake（新）· 上传与查询」于是被折成 4 行。三列各给 min-width 兜底，
富余才轮到说明列（说明是唯一该长的列，但不是唯一能长的列）。 */
.cap-sub { margin: 18px 0 8px; font-size: 13px; color: var(--text); }
.cap-model .cap-name { text-align: left; min-width: 190px; }
.cap-model .cap-model-point {
color: var(--primary-dark); white-space: nowrap; min-width: 210px;
}
.cap-model .cap-lv { color: var(--text-dim); white-space: nowrap; min-width: 86px; }
.cap-model .cap-note {
color: var(--text-dim); font-size: 12px; white-space: normal;
min-width: 200px; width: 100%;
}
.cap-foot { margin-top: 8px; }
/* 操作列：保证多个操作链接不互相挤掉，按可换行 flex 排列 */
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row-actions .account-action-link { white-space: nowrap; }
/* 报案清单列表：详情链接 / 行 hover 高亮，便于点击 */
.pr-detail-link {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
transition: background 0.15s;
}
.pr-detail-link:hover { background: rgba(67, 100, 247, 0.08); text-decoration: none; }
#prListTable tbody tr { cursor: pointer; transition: background 0.15s; }
#prListTable tbody tr:hover { background: rgba(67, 100, 247, 0.04); }
.source-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-bottom: 12px; }
.source-preview img { max-width: 100%; border-radius: 6px; border: 1px solid var(--border); }
/* 表单 */
.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.form-row label { font-size: 12px; color: var(--text-dim); }
.form-row input, .form-row textarea, .form-row select {
padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
font-size: 13px; background: var(--surface); font-family: inherit;
}
.form-row input:disabled, .form-row textarea:disabled { background: var(--surface-2); color: var(--text-dim); }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* ============================================================
案件类型选择 / 上传模式
============================================================ */
.case-type-select {
display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
padding: 8px 4px; font-size: 13px;
}
.ct-label { color: var(--text-dim); font-weight: 600; }
.ct-check { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--text); }
.ct-check input { accent-color: var(--primary); cursor: pointer; }
/* V4.74：上传页「后果」二选一（死亡 / 伤残）与「附加责任」多选的视觉分组。
两组混在一排会让人以为都是多选 —— 而后果选错会直接改变完整度清单与理算口径。 */
.ct-sub { color: var(--text-dim); font-size: 12px; }
.ct-req { color: var(--danger, #d9534f); font-weight: 600; }
.ct-sep {
width: 1px; align-self: stretch; min-height: 18px; margin: 0 2px;
background: var(--border, rgba(128, 128, 128, .35));
}
.ct-check.ct-dd {
padding: 2px 8px; border-radius: 6px;
border: 1px solid var(--border, rgba(128, 128, 128, .35));
}
.ct-check.ct-dd:has(input:checked) {
border-color: var(--primary); background: var(--primary-weak, rgba(64, 158, 255, .10));
font-weight: 600;
}
/* 未选后果时的行内红字（与后端 400 文案同义，见 case_types.validate_upload） */
.ct-err { color: var(--danger, #d9534f); font-size: 12px; font-weight: 600; }
/* ============================================================
批量案件汇总条
============================================================ */
.batch-summary {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
}
.batch-label { color: var(--text-dim); font-size: 13px; font-weight: 600; margin-right: 4px; }
.batch-chip {
display: inline-flex; gap: 6px; align-items: center;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer;
}
.batch-chip span { color: var(--text-dim); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-chip b { color: var(--primary); }
.batch-chip.active { border-color: var(--primary); background: var(--ok-bg); box-shadow: 0 0 0 1px var(--primary); }
/* ============================================================
保险责任判断
============================================================ */
.liab-list { display: flex; flex-direction: column; gap: 8px; }
.liab-item {
display: flex; gap: 12px; align-items: flex-start;
padding: 8px 12px; background: var(--surface-2); border-radius: 8px; font-size: 13px;
}
.liab-name { min-width: 90px; font-weight: 700; }
.liab-status { min-width: 86px; flex-shrink: 0; }
.liab-reason { color: var(--text-dim); }
/* ============================================================
报案风险 / 社平工资
============================================================ */
.report-risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .report-risk-grid { grid-template-columns: 1fr; } }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
.form-grid .form-row { margin-bottom: 0; }
/* ---- 账号变更留痕（V4.79h）----
设计取舍：留痕是**给人追责用的**，所以时间线按「谁 + 什么时候 + 改了什么」一行一顿，
而不是塞成一张宽表（宽表在这个弹窗里必然要横向滚动，「同一时刻的几个字段」会被拆散）。 */
.acct-audit { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; }
.acct-audit-h { font-size: 12.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; }
.acct-audit-list { max-height: 240px; overflow-y: auto; }
.acct-audit-item {
border-left: 3px solid var(--border); padding: 6px 0 6px 10px;
margin-bottom: 6px; font-size: 12px;
}
.acct-audit-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.acct-audit-act { font-weight: 700; }
.acct-audit-who { color: var(--primary-dark); font-weight: 600; }
.acct-audit-time, .acct-audit-ip { color: var(--text-dim); font-size: 11.5px; }
.acct-audit-chg { margin-top: 3px; color: var(--text-dim); line-height: 1.7; }
.acct-audit-chg b { color: var(--text); font-weight: 600; }
.acct-audit-arrow { color: var(--text-dim); margin: 0 4px; }
.acct-audit-fp {
margin-left: 5px; padding: 0 4px; border-radius: 4px; font-size: 10.5px;
background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
}
.form-section-title {
grid-column: 1 / -1;
margin-top: 10px;
padding: 6px 10px;
font-size: 12px;
font-weight: 700;
color: var(--primary);
background: var(--surface-2);
border-left: 3px solid var(--primary);
border-radius: 4px;
}
.form-section-title:first-child { margin-top: 0; }
/* 二级子菜单 tabs（用于报案风险/其它页面下分组） */
.subtab-bar {
display: flex;
gap: 6px;
margin: 12px 0 16px;
border-bottom: 2px solid var(--surface-2, #edf7f6);
}
.subtab-btn {
padding: 9px 18px;
border: none;
background: transparent;
font-size: 14px;
font-weight: 500;
color: var(--text-2, #5e8a87);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all .2s;
}
.subtab-btn:hover { color: var(--primary, #00b8a9); }
.subtab-btn.active {
color: var(--primary, #00b8a9);
border-bottom-color: var(--primary, #00b8a9);
font-weight: 700;
}
.subtab-pane { display: block; }
.subtab-pane[hidden] { display: none; }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.src-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
background: linear-gradient(90deg, var(--primary) 0%, var(--primary) 100%);
color: var(--on-primary);
font-size: 11px;
border-radius: 8px;
vertical-align: middle;
font-weight: 600;
letter-spacing: 0.2px;
}
/* 社平工资 · 来源溯源 */
.data-table td.src-cell {
color: var(--primary); cursor: pointer; font-weight: 600;
text-decoration: underline; text-decoration-color: transparent;
transition: text-decoration-color .15s;
}
.data-table td.src-cell:hover { text-decoration-color: var(--primary); }
/* 共用 · 筛选条行 */
.sw-filter-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.sw-filter-row .form-row { flex: 1 1 140px; min-width: 140px; }
/* 工伤标准 · 数据 / 备注 标记 */
.src-pre {
margin: 0; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border);
border-radius: 6px; font-size: 12px; white-space: pre-wrap; word-break: break-all;
}
.src-row { display: flex; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.src-row:last-child { border-bottom: none; }
.src-row > label {
flex: 0 0 84px; color: var(--text-dim); font-size: 13px; padding-top: 2px;
}
.src-row > .src-val { flex: 1; color: var(--text); line-height: 1.6; word-break: break-all; }
.src-row > .src-val.src-note {
background: var(--surface-2); border-radius: 8px; padding: 10px 12px;
font-size: 13.5px; line-height: 1.7;
}
.src-row a { color: var(--primary); text-decoration: underline; }
/* ============================================================
V4.76 · 来源引用快照（来源列三态徽标 + 溯源弹层引文块）
★ 落地口径见前端 openSwSource / _sourceCellHtml 注释；
引文块的 padding-right 是给右上角「逐字/转述」角标让位的 —— 少写会与正文重叠
（原型阶段实际踩到过，属于「绝对定位装饰必须先算包围盒」那一类）。
============================================================ */
.data-table td.src-cell { color: inherit; font-weight: 400; vertical-align: top; }
.src-dept { color: var(--primary); font-weight: 600; }
.data-table td.src-cell:hover { background: var(--bg); }
.data-table td.src-cell:hover .src-dept { text-decoration: underline; }
.src-badge.snap { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--border); }
.src-badge.link { background: var(--primary-soft); color: var(--accent); border: 1px solid var(--border); }
.src-badge.none { background: var(--bg); color: var(--text-dim); border: 1px solid var(--border); }
.src-peek {
display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 3px;
/* ★ 宽度是**列宽下限**：本行 nowrap，所以「摘要 max-width + 单元格 padding」直接决定来源列宽。
230px 时实测来源列 248px → 整表 1193 > 容器 1140（溢出 53px，被 smoke_table_align 抓住）。
★ 判据：**表格里任何 `nowrap` 元素的 max-width 都是列宽的硬下限** —— 想压缩列宽，
先找现在撑宽它的那个不可断行元素，而不是去调 padding。 */
/* ★★ P1-10（V4.79h）：上面那两条判据是对的，但**结论取舍错了**。
为压住表宽而用了「nowrap + ellipsis」⇒ 用**截断**换**不溢出**。
实测代价：来源列截断 **453 处**，而工伤标准 / 社平工资这两个库的**全部价值
就是可溯源**（理算的月数、基数都出自这里）。想看出处必须逐格 hover ——
在 59,618px / 约 57 屏长的表里逐格 hover 是体力活，等于**溯源功能形同虚设**。
★ 正确解法是**换行**而不是截断：换行不撑宽表格（宽度仍由 max-width 决定、
高度自增），照样不溢出，而内容完整可读（最长摘录也就 2~3 行）。
★ 判据（本项目通用）：**「压缩列宽」与「截断内容」不是一回事** ——
前者是布局选择，后者是丢信息。任何时候都不该拿「丢信息」去换「不溢出」。 */
max-width: 170px; overflow: hidden; overflow-wrap: anywhere;
white-space: normal; line-height: 1.5;
}
.src-peek.dashed { color: var(--border-strong); }
/* 图标按钮压到最小可点面积（22px）；原文 URL 完整信息在 title 与弹层里，不靠按钮承载。 */
.src-jump {
margin-left: 4px; padding: 0; width: 22px; height: 20px; line-height: 18px;
text-align: center; vertical-align: top;
}
.src-valbar {
display: flex; gap: 10px; flex-wrap: wrap; background: var(--surface-2);
border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.src-valbar .vitem { display: flex; flex-direction: column; min-width: 120px; }
.src-valbar .vitem label { font-size: 11.5px; color: var(--text-dim); }
.src-valbar .vitem b { font-size: 19px; color: var(--primary); font-variant-numeric: tabular-nums; }
.src-valbar .vitem b.sm { font-size: 13px; color: var(--text); font-weight: 600; }
.src-valbar .vitem.ok b { color: var(--ok); }
.src-valbar .vitem.na b { color: var(--text-dim); }
.src-quote-label { display: flex; gap: 8px; align-items: center; font-size: 12.5px;
color: var(--text-dim); margin: 0 0 8px; }
.src-quote-label .arrow { color: var(--primary); font-weight: 700; }
.src-quote {
position: relative; background: var(--surface); border: 1px solid var(--border);
border-left: 4px solid var(--primary); border-radius: 6px;
padding: 16px 84px 16px 20px; font-size: 14px; line-height: 2;
color: var(--text); word-break: break-word;
}
.src-quote.empty {
padding: 14px 18px; font-size: 13px; line-height: 1.9; color: var(--warn);
background: var(--warn-bg); border-left-color: var(--warn);
}
.src-quote-stamp {
position: absolute; right: 14px; top: 12px; font-size: 10.5px; color: var(--border-strong);
border: 1px dashed var(--border); border-radius: 4px; padding: 1px 6px; letter-spacing: .5px;
}
.src-hl {
background: var(--warn-bg); box-shadow: inset 0 -2px 0 var(--warn); border-radius: 2px;
padding: 0 2px; font-weight: 700; color: var(--text);
}
.src-quote-meta { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.src-actions {
display: flex; gap: 10px; align-items: center; margin-top: 14px;
padding-top: 12px; border-top: 1px solid var(--border);
}
/* ============================================================
规则管理 · 子标签（核赔规则 / 报案风险规则）
============================================================ */
.sub-nav {
display: flex; gap: 4px; margin-bottom: 16px;
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 5px; width: fit-content;
}
.sub-nav-btn {
padding: 8px 22px; border: none; background: transparent; border-radius: 7px;
font-size: 14px; font-weight: 600; color: var(--text-dim); cursor: pointer;
}
.sub-nav-btn.active { background: var(--primary); color: var(--on-primary); }
.ruleset { display: none; }
.ruleset.active { display: block; }
/* ============================================================
采集数据标识
============================================================ */
.mat-collected {
background: var(--ok-bg); color: var(--ok);
border-radius: 6px; padding: 1px 8px; font-weight: 700;
}
/* ============================================================
报案风险 · 批量上传
============================================================ */
.batch-upload-row {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border);
}
.batch-report-item {
border: 1px solid var(--border); border-radius: 10px;
padding: 12px 14px; margin-bottom: 10px; background: var(--surface);
}
.batch-report-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.batch-report-idx {
background: var(--surface-2); border-radius: 6px; padding: 1px 8px;
font-weight: 700; color: var(--primary); font-size: 12px;
}
.batch-report-name { font-weight: 700; font-size: 14px; }
.batch-report-time { color: var(--text-dim); font-size: 12px; }
.batch-report-desc {
font-size: 13px; color: var(--text-dim); margin-top: 6px;
background: var(--surface-2); border-radius: 6px; padding: 6px 10px;
}
/* ============================================================
* 子 Tab（标准库 / 账号管理）
* ============================================================ */
.subtab-bar {
display: flex; gap: 4px; padding: 0 4px;
border-bottom: 1px solid var(--surface-2);
margin-bottom: 18px;
}
.subtab-btn {
background: transparent; border: 0; padding: 9px 18px;
font-size: 14px; color: var(--text-dim); cursor: pointer;
border-bottom: 2px solid transparent; transition: all .15s;
border-radius: 6px 6px 0 0;
}
.subtab-btn:hover { color: var(--text); background: var(--surface-2); }
.subtab-btn.active {
color: var(--primary); border-bottom-color: var(--primary);
font-weight: 600;
}
.subtab-pane { display: none; }
.subtab-pane.active { display: block; }
/* ============================================================
* 多选下拉（补助项目）
* ============================================================ */
.multi-select { position: relative; min-width: 180px; }
.multi-select-trigger {
display: flex; justify-content: space-between; align-items: center;
background: var(--surface-2); border: 1px solid var(--surface-2);
border-radius: 6px; padding: 6px 10px; cursor: pointer;
font-size: 13px; color: var(--text);
user-select: none;
}
.multi-select-trigger:hover { border-color: var(--primary); }
.multi-select-arrow { color: var(--text-dim); margin-left: 6px; }
.multi-select-panel {
display: none; position: absolute; top: 100%; left: 0; right: 0;
background: var(--surface); border: 1px solid var(--surface-2);
border-radius: 6px; margin-top: 4px; padding: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
z-index: 100; max-height: 320px; overflow: auto;
}
.multi-select-panel.open { display: block; }
.multi-select-all {
display: block; padding: 6px 4px; border-bottom: 1px dashed var(--surface-2);
font-size: 13px; color: var(--primary); cursor: pointer; font-weight: 600;
}
.multi-select-list label {
display: flex; align-items: center; gap: 6px;
padding: 5px 4px; font-size: 13px; cursor: pointer;
border-radius: 4px;
}
.multi-select-list label:hover { background: var(--surface-2); }
/* ============================================================
* 账号 / 角色 / 权限
* ============================================================ */
.perm-group {
margin-bottom: 16px;
background: var(--surface); border: 1px solid var(--surface-2);
border-radius: 8px; padding: 12px 16px;
}
.perm-group h4 {
margin: 0 0 10px; font-size: 14px; color: var(--primary);
font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.perm-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 8px;
}
.perm-item {
display: flex; align-items: flex-start; gap: 6px;
padding: 6px 8px; background: var(--surface-2);
border-radius: 6px; cursor: pointer; font-size: 13px;
}
.perm-item:hover { background: var(--primary); color: white; }
.perm-item code { font-size: 11px; color: var(--text-dim); }
.perm-item:hover code { color: rgba(255,255,255,0.8); }
.role-card {
background: var(--surface); border: 1px solid var(--surface-2);
border-radius: 8px; padding: 14px 16px; margin-bottom: 12px;
}
.role-card h4 { margin: 0 0 6px; font-size: 15px; }
.role-card .role-code {
display: inline-block; background: var(--surface-2);
padding: 2px 6px; border-radius: 4px; font-size: 11px;
color: var(--text-dim); margin-left: 6px; font-family: monospace;
}
.role-card .role-desc { color: var(--text-dim); font-size: 13px; margin-bottom: 8px; }
.role-card .role-perms { display: flex; flex-wrap: wrap; gap: 4px; }
.role-perm-tag {
display: inline-block; padding: 2px 8px;
background: var(--surface-2); border-radius: 4px;
font-size: 11px; color: var(--primary);
cursor: pointer; position: relative; outline: none;
}
.role-perm-tag.is-all { color: var(--primary); font-weight: 600; }
.role-perm-tag.is-part { color: var(--text); }
.role-perm-tag.is-unknown { color: var(--text-dim); border: 1px dashed var(--surface-2); }
.role-perm-tag .perm-tag-detail { display: none; }
.role-perm-tag.open .perm-tag-detail {
display: block; margin-top: 4px; padding-top: 4px;
border-top: 1px solid var(--surface-2);
font-size: 11px; color: var(--text-dim); font-weight: 400;
}
.role-perm-tag.open { display: block; width: 100%; }
/* ============================================================
* V4.58 权限配置三级树（模块 → 功能组 → 级别）
* 取代原来的 6×3 矩阵：粒度从「菜单」下沉到「功能组」。
* ============================================================ */
.perm-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; margin: 14px 0 4px;
}
.perm-head #permScope { font-size: 12px; }
.perm-tip { margin: 2px 0 10px; font-size: 12px; line-height: 1.7; }
.perm-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.perm-toolbar .l2-input { flex: 1; }
.perm-tree { display: flex; flex-direction: column; gap: 8px; }
.perm-mod {
border: 1px solid var(--surface-2); border-radius: 8px;
background: var(--surface); overflow: hidden;
}
.perm-mod-head {
display: grid; grid-template-columns: 1fr auto auto;
gap: 12px; align-items: center;
padding: 9px 12px; background: var(--surface-2);
}
.perm-mod-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm-mod-title b { font-size: 13px; }
.perm-mod-hint { font-size: 11px; }
.perm-mod-levels, .perm-grp-levels { display: flex; gap: 4px; align-items: center; }
.perm-lv {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 7px; border-radius: 4px;
font-size: 12px; cursor: pointer;
background: var(--surface); border: 1px solid var(--surface-2);
color: var(--text-dim); user-select: none; white-space: nowrap;
}
.perm-lv input[type="checkbox"] {
width: 14px; height: 14px; cursor: pointer; accent-color: var(--primary);
}
.perm-lv.on { color: var(--text); border-color: var(--primary); font-weight: 600; }
.perm-lv.is-unsupported { opacity: 0.35; cursor: not-allowed; }
.perm-grp.is-inherited .perm-lv { opacity: 0.65; cursor: default; }
.perm-groups { display: flex; flex-direction: column; }
.perm-grp {
display: grid; grid-template-columns: 1fr auto;
gap: 6px 12px; align-items: center;
padding: 8px 12px; border-top: 1px solid var(--surface-2);
}
.perm-grp-name { font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.perm-grp-key { font-size: 10px; font-family: monospace; }
.perm-grp-desc { grid-column: 1; font-size: 11px; line-height: 1.5; }
.perm-grp-levels { grid-row: 1 / span 2; grid-column: 2; }
.perm-badge {
font-size: 10px; padding: 1px 6px; border-radius: 3px;
font-weight: 400; white-space: nowrap;
}
.perm-badge.inherit { background: var(--surface-2); color: var(--text-dim); }
.perm-badge.higher { background: var(--surface-2); color: var(--primary); font-weight: 600; }
.perm-unknown {
margin-top: 12px; padding: 10px 12px;
border: 1px dashed var(--surface-2); border-radius: 8px;
font-size: 12px; line-height: 1.7;
}
.perm-unknown-list {
display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.perm-unknown-list code {
background: var(--surface-2); border-radius: 3px;
padding: 1px 5px; font-size: 11px;
}
.account-status-active { color: var(--ok); font-weight: 600; }
.account-status-disabled { color: var(--danger); font-weight: 600; }
.account-action-link {
color: var(--primary); cursor: pointer; font-weight: 600;
margin-right: 10px;
/* ★ P1-13（V4.79h）：行内操作链的**可点区太小且相邻**。
实测「✏️修改 / 🕘痕迹」两个链各约 39×19px 且紧挨着 —— 19px 高的点击区
在密集表格里极易误点：把「痕迹」点成「修改」会进编辑态，并产生
edit_history 留痕。本项目原则是「误操作要留痕，但别制造误操作」。
本条是该类在全站的唯一实现（账号 / 社平 / 工伤 / 目录 / 职业病 / 医院库共用），
所以在这里抬高度即可全站生效；纯 CSS，不动任何结构。 */
display: inline-flex; align-items: center; min-height: 28px; padding: 0 8px;
border-radius: 6px;
}
.account-action-link.danger { color: var(--danger); }
.account-action-link:hover { text-decoration: none; background: var(--surface-2); }
#accountBadge { background: var(--surface-2); color: var(--text); }
/* ============================================================
* 登录门禁 + 全屏登录页
* ============================================================ */
#loginPage { display: none; }
/* 未登录：隐藏主界面，仅显示登录页 */
body.locked > header,
body.locked > main,
body.locked > footer { display: none !important; }
body.locked #loginPage { display: flex; }
body.locked { overflow: hidden; }
.login-page {
min-height: 100vh;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
background:
radial-gradient(1200px 600px at 10% -10%, var(--ok-bg) 0%, transparent 60%),
radial-gradient(900px 500px at 100% 110%, var(--warn-bg) 0%, transparent 55%),
var(--bg);
}
.login-card {
width: 100%;
max-width: 420px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: var(--shadow);
padding: 34px 32px;
}
.login-brand {
display: flex; align-items: center; gap: 14px;
margin-bottom: 24px;
}
.login-brand .logo {
width: 52px; height: 52px; border-radius: 14px; font-size: 22px;
}
.login-brand-title { font-size: 18px; font-weight: 700; letter-spacing: 0.3px; }
.login-brand-sub { font-size: 12px; color: var(--text-dim); }
.login-form h2 { font-size: 20px; margin: 0 0 14px; }
.login-tabs {
display: flex; gap: 6px; margin-bottom: 18px;
background: var(--surface-2); border-radius: 10px; padding: 4px;
}
.login-tab {
flex: 1; padding: 8px 0; border: none; border-radius: 8px;
background: transparent; color: var(--text-dim);
font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.login-tab.active {
background: var(--card); color: var(--primary);
box-shadow: var(--shadow);
}
.login-tip { font-size: 13px; color: var(--text-dim); margin: 0 0 20px; }
.login-code-row { display: flex; gap: 8px; }
.login-code-row input { flex: 1; }
.login-code-row .btn { white-space: nowrap; }
.login-submit { width: 100%; margin-top: 8px; padding: 12px; font-size: 15px; }
.login-dev { margin-top: 14px; font-size: 12px; word-break: break-all; }
.login-footer {
margin-top: 18px; font-size: 12px; color: var(--text-dim); text-align: center;
}
/* ============================================================
* V3.1 视觉升级样式包（PRD 升级需求文档 §3.6）
* 主题：极简高级 · 飞书/Linear 风格
* 追加于 2026-09-11 build v3.1-restyle
* ============================================================ */
/* ----- 全局变量补强 ----- */
:root {
--accent: #14cdba;
--success: var(--ok);
--success-bg: #e6f7ef;
--warning: #f59e0b;
--warning-bg: #fdf0d0;
--info: #14b8a6;
--info-bg: #dff7f4;
--danger-bg: #ffeef2;
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 14px;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
--shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.04);
--grad-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary) 100%);
--grad-soft: linear-gradient(135deg, #e7faf7 0%, #eafaf7 100%);
--t-fast: 0.15s ease;
--t-med: 0.25s ease;
}
/* ----- 全局基础增强 ----- */
body { background: linear-gradient(180deg, var(--bg) 0%, var(--ok-bg) 100%); }
/* 卡片悬停抬升（用于 .case-card / .overview / .file-card） */
.case-card,
.upload-card,
.progress-card,
.overview,
.advice-card,
.file-card {
transition: transform var(--t-med), box-shadow var(--t-med);
}
.case-card:hover,
.upload-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* ----- 顶部导航现代化 ----- */
.global-nav {
background: var(--card);
border-radius: var(--radius-lg);
padding: 6px;
box-shadow: var(--shadow);
gap: 2px !important;
}
.global-nav-btn {
border-radius: 999px !important;
padding: 8px 16px !important;
font-weight: 700 !important;
font-size: 13.5px !important;
transition: all var(--t-fast) !important;
position: relative;
}
.global-nav-btn:hover:not(.active) {
background: var(--mint-soft, #dff7f4);
color: var(--mint-deep) !important;
}
.global-nav-btn.active {
background: linear-gradient(135deg, var(--mint-2), var(--mint)) !important;
color: var(--on-primary) !important;
box-shadow: 0 4px 14px rgba(0, 184, 169, 0.32);
}
/* ----- 顶部 logo 渐变增强 ----- */
.logo {
background: var(--grad-primary) !important;
box-shadow: 0 4px 12px rgba(0, 184, 169, 0.3);
}
/* ----- 关键数据高亮（理算金额） ----- */
.settle-hero {
background: var(--grad-primary);
color: var(--on-primary);
padding: 24px 28px;
border-radius: var(--radius-lg);
box-shadow: 0 8px 24px rgba(0, 184, 169, 0.2);
position: relative;
overflow: hidden;
}
.settle-hero::before {
content: '';
position: absolute;
top: -50%; right: -10%;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 70%);
}
.settle-hero .label {
font-size: 12px;
opacity: .85;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
}
.settle-hero .amount {
font-size: 38px;
font-weight: 800;
letter-spacing: -0.5px;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.settle-hero .sub {
font-size: 12px;
opacity: .75;
margin-top: 4px;
}
/* ----- 案件摘要卡（重构） ----- */
.case-summary-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px 24px;
box-shadow: var(--shadow);
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
}
.case-summary-card .meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 13px;
color: var(--text-dim, #6e9b98);
margin-top: 6px;
}
.case-summary-card .meta strong {
color: var(--text);
font-weight: 600;
margin-left: 4px;
}
/* ----- OCR 采集来源徽标（PRD §3.1.7） ----- */
.source-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
}
.source-badge.rapidocr {
background: var(--info-bg);
color: var(--ok);
}
.source-badge.hunyuan {
background: linear-gradient(135deg, var(--ok-bg), var(--ok-bg));
color: var(--ok);
border: 1px solid var(--border);
}
.source-badge.human {
background: var(--success-bg);
color: var(--success);
}
.source-badge::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
}
/* ----- 低置信度字段高亮 ----- */
.field-low-confidence {
background: linear-gradient(90deg, var(--warn-bg) 0%, transparent 100%);
border-left: 3px solid var(--warning);
padding-left: 8px;
margin-left: -8px;
}
.field-low-confidence .confidence-pill {
background: var(--warning-bg);
color: var(--warn);
font-size: 10px;
padding: 1px 6px;
border-radius: 8px;
margin-left: 6px;
font-weight: 600;
}
/* ----- 理算完整经过流程图（PRD §3.3.4） ----- */
.settle-flow {
display: flex;
align-items: center;
gap: 8px;
margin: 16px 0;
flex-wrap: wrap;
padding: 16px;
background: var(--surface-2, #f2faf9);
border-radius: var(--radius);
}
.settle-flow .flow-step {
background: var(--card);
border: 2px solid var(--primary);
border-radius: var(--radius);
padding: 8px 14px;
font-size: 12px;
font-weight: 600;
color: var(--primary);
min-width: 80px;
text-align: center;
}
.settle-flow .flow-op {
background: var(--surface-2, #f2faf9);
color: var(--text-dim, #6e9b98);
padding: 8px 10px;
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 600;
}
.settle-flow .flow-arrow {
color: var(--text-dim, #6e9b98);
font-size: 16px;
font-weight: 700;
}
.settle-flow .flow-result {
background: var(--success-bg);
border: 2px solid var(--success);
color: var(--success);
padding: 8px 14px;
border-radius: var(--radius);
font-weight: 700;
font-size: 13px;
min-width: 100px;
text-align: center;
}
/* ----- LLM 风险分析卡片（PRD §3.4） ----- */
.llm-risk-card {
background: var(--card);
border-left: 4px solid var(--warning);
border-radius: var(--radius);
padding: 14px 18px;
margin-bottom: 12px;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t-fast);
}
.llm-risk-card:hover {
box-shadow: var(--shadow);
}
.llm-risk-card.high {
border-left-color: var(--danger);
background: linear-gradient(90deg, var(--danger-bg) 0%, var(--card) 30%);
}
.llm-risk-card.medium {
border-left-color: var(--warning);
background: linear-gradient(90deg, var(--warn-bg) 0%, var(--card) 30%);
}
.llm-risk-card .llm-title {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 14px;
}
.llm-risk-card .llm-confidence {
background: var(--info-bg);
color: var(--info);
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
font-weight: 600;
}
.llm-risk-card .llm-reasoning {
margin-top: 8px;
font-size: 12.5px;
color: var(--text-dim, #6e9b98);
line-height: 1.7;
}
.llm-risk-card .llm-reasoning b {
color: var(--text);
font-weight: 600;
}
.llm-risk-card .llm-tag {
display: inline-block;
background: var(--surface-2, #f2faf9);
color: var(--text-dim, #6e9b98);
padding: 1px 8px;
border-radius: 10px;
font-size: 10.5px;
margin-right: 4px;
font-weight: 500;
}
/* ----- LLM 推理链区块 ----- */
.llm-reasoning-chain {
background: var(--surface-2, #f2faf9);
border-radius: var(--radius-sm);
padding: 10px 12px;
margin-top: 8px;
font-size: 12px;
color: var(--text);
border-left: 3px solid var(--accent);
}
/* ----- 案件详情页（独立路由 · 全屏覆盖层） ----- */
.case-detail-page {
position: fixed;
inset: 0;
z-index: 600;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--bg);
padding: 20px 28px 56px;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
align-content: start;
}
.case-detail-header {
display: flex;
align-items: center;
gap: 12px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 16px;
box-shadow: var(--shadow);
}
.case-detail-header h2 {
flex: 1;
font-size: 17px;
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.case-detail-actions { display: flex; gap: 8px; flex-shrink: 0; }
.detail-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
background: var(--card);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: 0 8px;
}
.detail-tabs .detail-tab {
padding: 12px 20px;
font-size: 14px;
color: var(--text-dim, #6e9b98);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all var(--t-fast);
font-weight: 500;
}
.detail-tabs .detail-tab:hover {
color: var(--primary);
}
.detail-tabs .detail-tab.active {
color: var(--on-primary);
border-bottom-color: transparent;
background: linear-gradient(135deg, var(--mint-2), var(--mint));
font-weight: 700;
}
/* ----- 训练中心三类 sub-nav（PRD §3.5） ----- */
.rule-type-tabs {
display: flex;
gap: 6px;
background: var(--surface-2, #f2faf9);
border-radius: var(--radius);
padding: 4px;
margin-bottom: 16px;
width: fit-content;
}
.rule-type-tabs .type-tab {
padding: 8px 18px;
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--text-dim, #6e9b98);
cursor: pointer;
transition: all var(--t-fast);
font-weight: 500;
}
.rule-type-tabs .type-tab.active {
background: var(--card);
color: var(--primary);
box-shadow: var(--shadow-sm);
font-weight: 600;
}
.rule-type-tabs .type-tab:hover:not(.active) {
color: var(--text);
}
/* ----- 加载骨架屏 ----- */
.skeleton {
background: linear-gradient(90deg, var(--surface-2) 25%, var(--ok-bg) 50%, var(--surface-2) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: var(--radius-sm);
height: 14px;
}
.skeleton.lg { height: 32px; }
.skeleton.card { height: 80px; border-radius: var(--radius); }
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ----- 按钮：现代化升级 ----- */
.btn {
border-radius: var(--radius) !important;
font-weight: 600 !important;
letter-spacing: 0.2px;
transition: all var(--t-fast) !important;
}
.btn-primary {
box-shadow: 0 2px 6px rgba(0, 184, 169, 0.25);
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 184, 169, 0.35);
}
.btn-primary:active:not(:disabled) {
transform: translateY(0);
}
/* ----- 风险等级色条（现代化） ----- */
.risk-item {
border-left: 4px solid var(--border) !important;
padding-left: 14px !important;
transition: all var(--t-fast);
}
.risk-item:hover {
background: var(--surface-2, #f2faf9);
border-radius: var(--radius);
}
.risk-item.severity-high { border-left-color: var(--danger) !important; }
.risk-item.severity-mid { border-left-color: var(--warning) !important; }
.risk-item.severity-low { border-left-color: var(--success) !important; }
/* ----- Tab 切换平滑 ----- */
.tabs {
border-bottom: 1px solid var(--border);
}
.tabs .tab {
transition: all var(--t-fast) !important;
font-weight: 500 !important;
}
.tabs .tab.active {
font-weight: 600 !important;
color: var(--primary) !important;
border-bottom: 2px solid var(--primary) !important;
}
/* ----- 滚动条美化 ----- */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--ok-bg);
border-radius: 5px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--ok-bg);
background-clip: padding-box;
border: 2px solid transparent;
}
/* ----- 全局导航状态点 ----- */
.global-nav-btn::after {
content: '';
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%) scale(0);
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
transition: transform var(--t-fast);
}
.global-nav-btn.active::after {
transform: translateX(-50%) scale(1);
}
/* ----- 案件列表网格（响应式） ----- */
.case-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
@media (max-width: 768px) {
.case-grid { grid-template-columns: 1fr; }
.settle-hero .amount { font-size: 28px; }
}
/* ----- 通用徽标 ----- */
.pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.pill.high { background: var(--danger-bg); color: var(--danger); }
.pill.mid { background: var(--warning-bg); color: var(--warn); }
.pill.low { background: var(--success-bg); color: var(--success); }
.pill.info { background: var(--info-bg); color: var(--info); }
/* 兼容短横线写法：历史代码里有 class="pill pill-low" 这类写法，
但此处只定义了「pill + 级别」的复合类，导致那批徽标拿不到颜色。
两种写法都补上，避免同一个页面里徽标一半有色一半无色。 */
.pill.pill-high { background: var(--danger-bg); color: var(--danger); }
.pill.pill-mid { background: var(--warning-bg); color: var(--warn); }
.pill.pill-low { background: var(--success-bg); color: var(--success); }
.pill.pill-info { background: var(--info-bg); color: var(--info); }
/* ★ V4.99f：表格里的徽标不许折行。
实测「可用」两个汉字在窄列里被拆成上下两行（`可` / `用`），徽标变成一个竖块 ——
它仍然「渲染出来了」，但已经不像一个徽标，而且列宽再挤一点就会看不清。
★ 只作用于表格单元格（`.data-table .pill`），不动卡片/工具栏里的徽标布局。 */
.data-table .pill { white-space: nowrap; }
/* ----- 空状态 ----- */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-dim, #6e9b98);
}
.empty-state .icon {
font-size: 48px;
margin-bottom: 12px;
opacity: 0.4;
}
/* ----- 移动端适配（≥768px） ----- */
@media (max-width: 768px) {
.container { padding: 16px 12px; }
.global-nav {
overflow-x: auto;
flex-wrap: nowrap !important;
}
.global-nav-btn {
flex-shrink: 0;
}
.case-summary-card {
grid-template-columns: 1fr;
}
.settle-flow {
flex-direction: column;
align-items: stretch;
}
.settle-flow .flow-arrow {
transform: rotate(90deg);
align-self: center;
}
}
/* ============================================================
* V3.1 样式包结束 · 2026-09-11
* ============================================================ */
/* ============================================================
* V3.1 案件审核板块样式（PRD §3.2）
* ============================================================ */
/* 步骤条 */
.audit-steps {
display: flex;
gap: 4px;
margin: 16px 0 20px;
padding: 12px 16px;
background: var(--card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow-x: auto;
}
/* P1-7：步骤条的「流程示意」标签 —— 它不再是进度条，必须自己说清身份，
否则去掉 active 高亮后用户仍会把它读成「当前进行到第几步」。 */
.audit-steps-label {
align-self: center; flex: none; margin-right: 8px; padding: 2px 8px;
border-radius: 99px; background: var(--surface-2); color: var(--text-dim);
font-size: 11px; font-weight: 700; white-space: nowrap; letter-spacing: .3px;
}
.audit-step {
flex: 1;
min-width: 100px;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: var(--radius);
font-size: 13px;
font-weight: 600;
color: var(--text-dim, #6e9b98);
background: var(--surface-2, #f2faf9);
transition: all var(--t-fast);
}
.audit-step .step-no {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--border);
color: var(--text-dim, #6e9b98);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
}
.audit-step.active {
background: var(--grad-primary);
color: var(--on-primary);
box-shadow: 0 4px 12px rgba(0, 184, 169, 0.2);
}
.audit-step.active .step-no {
background: rgba(255,255,255,.25);
color: var(--on-primary);
}
.audit-step.done .step-no {
background: var(--success);
color: var(--on-primary);
}
/* 工具栏 */
.audit-toolbar {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 16px;
}
.audit-search {
flex: 1;
min-width: 200px;
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 13px;
background: var(--card);
transition: border-color var(--t-fast);
}
.audit-search:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.1);
}
.audit-filter {
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 13px;
background: var(--card);
}
/* 案件列表 */
.audit-list-container {
background: var(--card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
/* V3.21：新增「处理进度」列后列宽变紧，允许横向滚动，避免挤压其它列 */
overflow-x: auto;
overflow-y: hidden;
}
.audit-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.audit-table thead {
background: var(--surface-2, #f2faf9);
}
.audit-table th {
padding: 12px 16px;
text-align: left;
font-weight: 600;
color: var(--text-dim, #6e9b98);
font-size: 12px;
letter-spacing: 0.5px;
text-transform: uppercase;
border-bottom: 1px solid var(--border);
}
.audit-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.audit-table tr:last-child td {
border-bottom: none;
}
.audit-table tr {
transition: background var(--t-fast);
}
.audit-table tbody tr:hover {
background: var(--surface-2, #f2faf9);
}
.audit-table .col-check { width: 32px; }
.audit-table .col-id { width: 110px; font-family: monospace; color: var(--text-dim, #6e9b98); }
/* P1-5：案件列两行式 —— 主行案件名（用户自己的文件名，最可读），
次行「案件号 · 被保人」（保留哈希用于对账，但不再逼人靠它认案）。 */
.audit-table .col-case { min-width: 190px; max-width: 300px; }
.case-name-cell {
font-weight: 600; line-height: 1.35;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.case-sub-cell { font-size: 11.5px; color: var(--text-dim, #6e9b98); line-height: 1.5; }
.case-sub-cell .mono { font-family: monospace; }
.audit-table .col-amount {
text-align: right;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--success);
}
.audit-table .col-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.audit-table .col-actions button {
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 600;
border: 1px solid var(--border);
background: var(--card);
color: var(--text);
cursor: pointer;
transition: all var(--t-fast);
}
.audit-table .col-actions button:hover {
border-color: var(--primary);
color: var(--primary);
}
.audit-table .col-actions button.btn-primary-sm {
background: var(--primary);
color: var(--on-primary);
border-color: var(--primary);
}
/* 已选条 */
.audit-selected-bar {
position: sticky;
bottom: 16px;
margin-top: 16px;
padding: 12px 20px;
background: var(--card);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
}
.audit-selected-bar b {
color: var(--primary);
font-size: 16px;
font-weight: 700;
}
/* 案件审核 · 上传成功提示 */
.audit-toast {
position: fixed;
top: 80px;
right: 24px;
padding: 12px 20px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 100%);
color: var(--on-primary);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0, 184, 169, 0.35);
font-size: 14px;
font-weight: 600;
z-index: 9999;
animation: audit-toast-in 0.25s ease-out;
}
@keyframes audit-toast-in {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
/* 加载骨架 */
.loading-skeleton {
padding: 20px;
}
.loading-skeleton .skeleton {
margin-bottom: 12px;
}
/* ============================================================
* V3.1 训练中心三类规则样式（PRD §3.5）
* ============================================================ */
.training-tabs {
display: flex;
gap: 6px;
background: var(--surface-2, #f2faf9);
border-radius: var(--radius);
padding: 4px;
margin-bottom: 16px;
width: fit-content;
}
.training-tabs .training-tab {
padding: 8px 18px;
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--text-dim, #6e9b98);
cursor: pointer;
transition: all var(--t-fast);
font-weight: 500;
}
.training-tabs .training-tab.active {
background: var(--card);
color: var(--primary);
box-shadow: var(--shadow-sm);
font-weight: 600;
}
.training-tabs .training-tab .badge {
display: inline-block;
background: var(--primary);
color: var(--on-primary);
border-radius: 10px;
padding: 1px 8px;
font-size: 10px;
margin-left: 6px;
font-weight: 600;
}
.training-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
}
@media (max-width: 1024px) {
.training-grid { grid-template-columns: 1fr; }
}
/* ★ 这个类名在本项目里被当作**表格外层容器**用（``
包 ` `，30+ 处），语义与样式名不符，但已是既成约定。
overflow 必须写成 `overflow-x: auto; overflow-y: hidden` 两个方向分别声明：
早先写的 `overflow: hidden` 是**简写**，会把 x 也重置成 hidden ——
表格在窄容器里超宽时右侧列被**直接裁掉且没有滚动条**，
叠加表头 nowrap 就变成「既看不见、也滚不动」。 */
.training-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
background: var(--card);
border-radius: var(--radius-lg);
overflow-x: auto;
overflow-y: hidden;
box-shadow: var(--shadow);
}
.training-table thead { background: var(--surface-2, #f2faf9); }
.training-table th {
padding: 10px 14px;
text-align: left;
font-size: 12px;
font-weight: 600;
color: var(--text-dim, #6e9b98);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.training-table td {
padding: 12px 14px;
border-top: 1px solid var(--border);
}
.training-table .code-cell {
font-family: monospace;
font-size: 12px;
background: var(--surface-2, #f2faf9);
padding: 4px 8px;
border-radius: 4px;
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.training-stats-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px 20px;
margin-bottom: 12px;
box-shadow: var(--shadow-sm);
}
.training-stats-card h3 {
margin: 0 0 12px;
font-size: 13px;
color: var(--text-dim, #6e9b98);
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.training-stats-card .stat-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-top: 1px solid var(--border);
}
.training-stats-card .stat-row:first-of-type { border-top: none; }
.training-stats-card .stat-row .label { color: var(--text-dim, #6e9b98); font-size: 13px; }
.training-stats-card .stat-row .value { font-weight: 700; font-size: 14px; }
.training-stats-card .stat-row .value.high { color: var(--danger); }
.training-stats-card .stat-row .value.med { color: var(--warning); }
.training-stats-card .stat-row .value.low { color: var(--success); }
/* 候选规则操作按钮 */
.cand-action {
padding: 3px 10px;
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 600;
border: 1px solid var(--border);
background: var(--card);
cursor: pointer;
margin-right: 4px;
transition: all var(--t-fast);
}
.cand-action.gray:hover { border-color: var(--warning); color: var(--warning); }
.cand-action.full:hover { border-color: var(--success); color: var(--success); }
.cand-action.reject:hover { border-color: var(--danger); color: var(--danger); }
/* ============================================================
* 单据级视图：材料卡（缩略图 + 单据字段）
* ============================================================ */
.dm-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 18px;
margin-bottom: 12px;
box-shadow: var(--shadow);
}
.dm-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.dm-title { font-weight: 700; font-size: 14px; min-width: 0; word-break: break-all; }
.dm-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dm-kind {
font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
background: var(--surface-2); color: var(--text);
border: 1px solid var(--border);
}
.dm-kind.kind-invoice { background: var(--info-bg); color: var(--info); border-color: transparent; }
.dm-kind.kind-record { background: var(--success-bg); color: var(--success); border-color: transparent; }
.dm-kind.kind-id_card { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.dm-kind.kind-generic { background: var(--surface-2); color: var(--text-dim); }
.dm-body {
display: grid; grid-template-columns: 190px minmax(0, 1fr);
gap: 16px; margin-top: 12px; align-items: start;
}
@media (max-width: 700px) {
.dm-body { grid-template-columns: minmax(0, 1fr); }
}
.dm-thumb {
position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface-2); overflow: hidden;
height: 148px; display: flex; align-items: center; justify-content: center;
}
.dm-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.dm-thumb-none { font-size: 12px; color: var(--text-dim); text-align: center; line-height: 1.7; }
.dm-thumb.clickable { cursor: zoom-in; }
.dm-thumb-mask {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(28, 35, 51, 0.42); color: var(--on-primary); font-size: 13px; font-weight: 600;
opacity: 0; transition: opacity var(--t-fast);
}
.dm-thumb.clickable:hover .dm-thumb-mask { opacity: 1; }
.dm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
@media (max-width: 900px) { .dm-fields { grid-template-columns: minmax(0, 1fr); } }
.dm-field {
display: flex; gap: 8px; align-items: baseline;
font-size: 13px; padding: 6px 10px; border-radius: var(--radius-sm);
background: var(--surface-2);
}
.dm-field .dm-label { color: var(--text-dim); flex-shrink: 0; min-width: 68px; }
.dm-field .dm-value { font-weight: 600; word-break: break-all; }
.dm-field.empty { background: transparent; }
.dm-field.empty .dm-value { font-weight: 400; color: var(--text-dim); font-style: normal; }
.dm-fields-empty { font-size: 13px; color: var(--text-dim); padding: 6px 2px; }
.dm-foot {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.dm-meta { font-size: 12px; color: var(--text-dim); margin-left: auto; }
.dm-text {
margin-top: 10px; padding: 10px 12px; max-height: 220px; overflow: auto;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-all;
color: var(--text-dim); font-family: ui-monospace, Menlo, Consolas, monospace;
}
/* ============================================================
* V4.61 · 材料分区展示
* 分类选择标签条 / 就诊日期时间线 / 非医疗按大类分组 / 字段折叠
* 全部走主题令牌（--card/--border/--text/--text-dim/--mint…），
* classic / nebula（深色）/ minimal 三套主题自适应，无硬编码色值。
* ============================================================ */
/* ---- 分类选择标签条 ---- */
.dp-fbar {
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface-2); padding: 10px 14px 8px; margin: 0 0 16px;
}
.dp-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 3px 0; }
.dp-lab { font-size: 12px; color: var(--text-dim); flex-shrink: 0; width: 62px; }
.dp-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; line-height: 1.5; padding: 3px 10px; border-radius: 999px;
border: 1px solid var(--border); background: var(--card); color: var(--text);
cursor: pointer; font-family: inherit;
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.dp-chip:hover { border-color: var(--primary); }
.dp-chip.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 700; }
.dp-chip.on .dp-chip-n { background: rgba(255, 255, 255, .3); color: var(--on-primary); }
.dp-chip.zero { border-style: dashed; color: var(--text-dim); }
.dp-chip-n {
font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px;
background: var(--surface-2); color: var(--text-dim);
}
.dp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dp-sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
.dp-tail { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); }
.dp-clear {
font-size: 12px; padding: 3px 12px; border-radius: 999px;
border: 1px solid var(--border); background: var(--card); color: var(--primary);
cursor: pointer; font-family: inherit;
}
.dp-clear:hover { border-color: var(--primary); background: var(--mint-soft); }
.dp-fnote { font-size: 11.5px; color: var(--text-dim); margin: 6px 0 2px; }
/* V4.99e：口径说明默认收起。原生 details，不依赖任何脚本；
★ 用 display:flex 的 summary 必须显式去掉 ::-webkit-details-marker，
否则 Chrome 会同时画原生三角与自定义 ▸（两个箭头，看着像没对齐）。 */
.dp-fnote-fold { font-size: 11.5px; color: var(--text-dim); margin: 6px 0 2px; }
.dp-fnote-fold > summary { cursor: pointer; list-style: none; user-select: none; display: inline-flex; align-items: center; gap: 4px; }
.dp-fnote-fold > summary::-webkit-details-marker { display: none; }
.dp-fnote-fold > summary::before { content: "▸"; font-size: 10px; }
.dp-fnote-fold[open] > summary::before { content: "▾"; }
.dp-fnote-fold > summary:hover { color: var(--primary); }
.dp-fnote-fold > div { margin-top: 4px; line-height: 1.6; padding-left: 14px; }
/* ---- 分区（一、医疗相关 / 二、非医疗相关） ---- */
.dp-zone { margin: 0 0 8px; }
.dp-zhead {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 6px 2px 10px; border-bottom: 2px solid var(--border); margin-bottom: 12px;
}
.dp-zbar { width: 4px; height: 17px; border-radius: 2px; background: var(--primary); flex-shrink: 0; }
.dp-zhead h4 { font-size: 15px; font-weight: 800; }
.dp-zmeta { font-size: 12px; color: var(--text-dim); }
.dp-zsum { margin-left: auto; font-size: 12.5px; font-weight: 700; }
.dp-znote { font-size: 12px; color: var(--text-dim); margin: -6px 0 12px 2px; }
.dp-nonote { font-size: 12.5px; color: var(--text-dim); padding: 8px 2px 12px; }
/* ---- 就诊分区（医疗相关：一次就诊一区） ---- */
.dp-visit {
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--card); margin-bottom: 14px; overflow: hidden;
}
.dp-vhead {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.dp-vdate { font-size: 13px; font-weight: 800; font-family: ui-monospace, Menlo, Consolas, monospace; }
.dp-vtag {
font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
background: var(--primary-soft); color: var(--mint-deep);
}
.dp-vtag.is-in { background: var(--warn-bg); color: var(--warn); }
.dp-vmeta { font-size: 12px; color: var(--text-dim); }
.dp-vsum { margin-left: auto; font-size: 12.5px; font-weight: 700; }
.dp-vbody { padding: 12px 14px 0; }
.dp-vbody .dm-card:last-child { margin-bottom: 12px; }
/* ---- 大类分组（非医疗相关） ---- */
.dp-group { margin-bottom: 14px; }
.dp-ghead {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 12px; background: var(--surface-2);
border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
cursor: pointer; user-select: none;
}
.dp-group.collapsed .dp-ghead { border-radius: var(--radius); }
.dp-gcaret { font-size: 10px; color: var(--text-dim); transition: transform var(--t-fast); }
.dp-group:not(.collapsed) .dp-gcaret { transform: rotate(90deg); }
.dp-gdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dp-gname { font-size: 13.5px; font-weight: 800; }
.dp-gcnt { font-size: 12px; color: var(--text-dim); }
.dp-greg { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.dp-gbody {
border: 1px solid var(--border); border-top: 0;
border-radius: 0 0 var(--radius) var(--radius);
padding: 12px 12px 0; background: var(--card);
}
.dp-group.collapsed .dp-gbody { display: none; }
.dp-gbody .dm-card:last-child { margin-bottom: 12px; }
/* ---- 字段折叠：常显「必填 + 关键」，其余收进 .dp-more ---- */
.dp-fields-wrap { min-width: 0; }
.dp-fold {
display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
font-size: 12.5px; line-height: 1.5; padding: 3px 12px; border-radius: 999px;
border: 1px dashed var(--border); background: var(--card); color: var(--primary);
cursor: pointer; font-family: inherit; user-select: none;
}
.dp-fold:hover { border-color: var(--primary); background: var(--mint-soft); }
.dp-more { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
/* ---- 两种「空」：缺件结论 / 筛选无交集 ---- */
.dp-empty {
border: 1px dashed var(--border); border-radius: var(--radius);
padding: 18px 20px; background: var(--card); margin-bottom: 14px;
}
.dp-empty h4 { font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.dp-empty p { font-size: 13px; color: var(--text-dim); margin: 5px 0; }
.dp-empty .dp-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.dp-empty .dp-kinds span {
font-size: 12px; padding: 2px 9px; border-radius: 999px;
border: 1px dashed var(--border); color: var(--text-dim);
}
/* ----- 材料预览弹窗 ----- */
.doc-preview-modal { z-index: 1100; }
.doc-preview-card {
max-width: 1100px; width: calc(100vw - 64px);
height: calc(100vh - 80px); display: flex; flex-direction: column;
max-height: calc(100vh - 80px);
}
.doc-preview-head { flex-wrap: wrap; gap: 10px; align-items: center; }
.doc-preview-head h3 { flex: 1; min-width: 140px; }
.doc-preview-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.doc-preview-pos { font-size: 12px; color: var(--text-dim); min-width: 52px; text-align: center; }
.doc-preview-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.doc-preview-meta {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px 18px; border-bottom: 1px solid var(--border);
background: var(--surface-2); font-size: 12px;
}
.doc-preview-body {
flex: 1; min-height: 0; overflow: auto; padding: 0;
background: var(--surface-2);
display: flex; align-items: flex-start; justify-content: center;
}
.doc-preview-zoomwrap { width: 100%; display: flex; justify-content: center; padding: 12px; }
.doc-preview-zoomwrap img { display: block; height: auto; max-width: none; }
.doc-preview-frame { width: 100%; height: 100%; min-height: 70vh; border: 0; background: var(--surface); }
.doc-preview-hint { padding: 40px 24px; text-align: center; color: var(--text-dim); font-size: 13px; }
.doc-preview-hint p { margin-bottom: 12px; }
.doc-preview-thumbwrap { margin: 12px auto; }
.doc-preview-thumbwrap img { max-width: 420px; max-height: 320px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
/* ============================================================
* 清新薄荷主题（Mint Refresh）· 组件增强层
* 目标：按钮更明显 / 配色更活泼 / 重点提示更清晰
* 设计令牌：主色薄荷 #00b8a9 → #14cdba 渐变；异常珊瑚红 #e5385b；强调暖黄 #f5a524
* ============================================================ */
:root {
--mint: #00b8a9;
--mint-2: var(--primary);
--mint-deep: var(--primary);
--mint-soft: #dff7f4;
--coral: #e5385b;
--coral-soft: var(--danger);
--amber: #f5a524;
--amber-soft: #fff5e6;
--shadow-sm: 0 2px 10px rgba(0, 184, 169, .10);
--shadow-mint: 0 6px 20px rgba(0, 184, 169, .22);
--shadow-coral: 0 6px 20px rgba(229, 56, 91, .20);
}
/* ---- 1. 按钮：加大、加粗、带阴影与按压反馈 ---- */
.btn {
font-weight: 800;
padding: 11px 22px;
border-radius: 12px;
font-size: 14.5px;
transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
}
.btn:not(:disabled):active { transform: scale(.96); }
.btn-primary {
background: linear-gradient(135deg, var(--mint-2), var(--mint));
color: var(--on-primary);
border: 0;
box-shadow: var(--shadow-mint);
}
.btn-primary:not(:disabled):hover { box-shadow: 0 8px 26px rgba(0, 184, 169, .34); }
.btn-ghost {
background: var(--surface);
border: 2px solid var(--mint-soft);
color: var(--mint-deep);
}
.btn-ghost:not(:disabled):hover { background: var(--mint-soft); border-color: var(--mint); color: var(--mint-deep); }
.btn-danger, .btn.danger { background: var(--coral); color: var(--on-primary); border: 0; box-shadow: var(--shadow-coral); }
.btn-sm { padding: 8px 16px; font-size: 13.5px; border-radius: 10px; }
.btn:disabled { opacity: .5; box-shadow: none; }
/* ---- 2. Tab / 导航：胶囊化，选中态用薄荷渐变 ---- */
.tabs { gap: 8px; background: var(--surface); border-radius: 999px; padding: 6px; box-shadow: var(--shadow-sm); display: inline-flex; flex-wrap: wrap; }
.tab {
border: 0; background: transparent; color: var(--text-dim);
font-weight: 700; border-radius: 999px; padding: 9px 20px;
transition: all .16s ease;
}
.tab:hover { background: var(--mint-soft); color: var(--mint-deep); }
.tab.active { background: linear-gradient(135deg, var(--mint-2), var(--mint)); color: var(--on-primary); box-shadow: var(--shadow-mint); }
.detail-tabs { display: flex; gap: 8px; background: var(--surface); border-radius: 999px; padding: 6px; box-shadow: var(--shadow-sm); }
.detail-tab {
border-radius: 999px; padding: 9px 20px; font-weight: 700; color: var(--text-dim);
transition: all .16s ease; cursor: pointer;
}
.detail-tab:hover { background: var(--mint-soft); color: var(--mint-deep); }
.detail-tab.active { background: linear-gradient(135deg, var(--mint-2), var(--mint)); color: var(--on-primary); box-shadow: var(--shadow-mint); }
.global-nav-btn { border-radius: 999px; font-weight: 700; transition: all .16s ease; }
.global-nav-btn:hover { background: var(--mint-soft); color: var(--mint-deep); }
.global-nav-btn.active { background: linear-gradient(135deg, var(--mint-2), var(--mint)); color: var(--on-primary); box-shadow: var(--shadow-mint); }
/* ---- 3. 卡片：左侧薄荷彩条 + 更大圆角 + 更明显投影 ---- */
.card, .upload-card, .result-card, .advice-card, .text-card {
border-radius: 16px;
box-shadow: var(--shadow-sm);
}
.dm-card {
border-radius: 16px;
border-left: 5px solid var(--mint);
box-shadow: var(--shadow-sm);
transition: box-shadow .16s ease, transform .16s ease;
}
.dm-card:hover { box-shadow: var(--shadow-mint); }
/* 有未识别字段的材料卡 → 珊瑚红彩条 + 淡红底（一眼定位问题单据） */
.dm-card.has-missing { border-left-color: var(--coral); background: linear-gradient(90deg, var(--coral-soft), var(--surface) 32%); }
.dm-field.empty { background: var(--coral-soft); }
.dm-field.empty .dm-value { color: var(--coral); font-weight: 700; }
.dm-field.hot, .dm-field.key { background: linear-gradient(135deg, var(--mint-2), var(--mint)); }
.dm-field.hot .dm-label, .dm-field.key .dm-label { color: var(--on-primary); }
.dm-field.hot .dm-value, .dm-field.key .dm-value { color: var(--on-primary); }
/* ---- 4. 重点提示横幅（Key Alert） ---- */
.key-alert {
display: flex; align-items: center; gap: 14px;
border-radius: 16px; padding: 14px 20px; margin: 0 0 16px;
background: linear-gradient(90deg, var(--amber-soft), var(--surface) 60%);
border: 2px solid var(--amber);
box-shadow: 0 4px 16px rgba(245, 165, 36, .18);
}
.key-alert.is-high { background: linear-gradient(90deg, var(--coral-soft), var(--surface) 60%); border-color: var(--coral); box-shadow: var(--shadow-coral); }
.key-alert.is-ok { background: linear-gradient(90deg, var(--mint-soft), var(--surface) 60%); border-color: var(--mint); box-shadow: 0 4px 16px rgba(0,184,169,.18); }
.key-alert .ka-icon {
width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 20px;
background: var(--amber); color: var(--on-primary);
}
.key-alert.is-high .ka-icon { background: var(--coral); }
.key-alert.is-ok .ka-icon { background: var(--mint); }
.key-alert .ka-body { flex: 1; min-width: 0; }
.key-alert .ka-title { font-weight: 800; font-size: 14.5px; color: var(--text); }
.key-alert .ka-title em { font-style: normal; color: var(--coral); font-weight: 900; }
.key-alert .ka-sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.key-alert .ka-act { flex-shrink: 0; }
/* ---- 5. 风险统计卡：更活泼的语义配色 ---- */
.stat { border-radius: 14px; transition: transform .16s ease; }
.stat:hover { transform: translateY(-2px); }
.stat.high { background: var(--coral-soft); }
.stat.high .stat-num { color: var(--coral); }
.stat.mid { background: var(--amber-soft); }
.stat.mid .stat-num { color: var(--amber); }
.stat.low { background: var(--mint-soft); }
.stat.low .stat-num { color: var(--mint-deep); }
.level-pill { font-weight: 800; padding: 6px 16px; border-radius: 999px; }
.score-ring { box-shadow: 0 4px 18px rgba(0, 184, 169, .16); }
/* ---- 6. 风险条目：严重度色带更清晰 ---- */
.risk-item { border-radius: 14px; }
.risk-item.high { border-left: 5px solid var(--coral); background: linear-gradient(90deg, var(--coral-soft), var(--surface) 40%); }
.risk-item.mid { border-left: 5px solid var(--amber); background: linear-gradient(90deg, var(--amber-soft), var(--surface) 40%); }
.risk-item.low { border-left: 5px solid var(--mint); background: linear-gradient(90deg, var(--mint-soft), var(--surface) 40%); }
/* ---- 7. 表单控件：薄荷聚焦态 ---- */
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--mint) !important;
box-shadow: 0 0 0 3px rgba(0, 184, 169, .16) !important;
}
/* ---- 8. 顶栏标识：薄荷渐变 ---- */
.logo { background: linear-gradient(135deg, var(--mint-2), var(--mint-deep)); box-shadow: var(--shadow-mint); }
.progress-fill { background: linear-gradient(90deg, var(--mint-2), var(--mint-deep)); }
.badge { background: var(--mint-soft); color: var(--mint-deep); }
/* 「复核工作台」页签徽标的三态（P1-4）
★ 事故：原来未进过复核台时显示「0」，被复核岗读成「没有待办」。
三态必须在**视觉上**可分，否则改文案等于没改：
未开始 = 中性灰（不是 0、不是绿）
待复核 = 红（有 todo，必须点进去）
完成 = 绿勾 */
.badge.is-idle { background: var(--surface-2); color: var(--text-dim); font-weight: 600; }
.badge.is-todo { background: var(--danger-bg); color: var(--danger); font-weight: 700; }
.badge.is-done { background: var(--surface-2); color: var(--ok); font-weight: 700; }
.pill.info { background: var(--mint-soft); color: var(--mint-deep); }
/* ============================================================
* V3.2 · 系统管理（大模型管理子页）
* ============================================================ */
#llmConfigForm select.input {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius, 10px);
background: var(--card, #fff);
color: var(--text);
font-size: 14px;
outline: none;
}
#llmConfigForm select.input:focus {
border-color: var(--accent, #00b8a9);
box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.12);
}
#llmConfigForm label > small { font-weight: 400; line-height: 1.5; }
/* ============================================================
* 单据级视图 v2 —— 类型修正 / 字段编辑 / 置信度与证据 / 重采入口
* 颜色一律取语义变量（--info/--success/--warn/--danger/--primary 及其 -bg），
* 四套主题都已定义这些变量，故自动适配；不要写死十六进制，否则深色主题瞎眼。
* ============================================================ */
/* ---- 单据类型配色 ----
* 按「族」给色而非逐 kind：色板只有 6 档，52 个类型必然要合并。
* 未列出的 kind 落到最下面 .dm-kind 的默认色，不会出现无样式。
* ★ 已删除的类型（id_cert / medical_record / medical_bill，v3.3）保留在下面，
* 只为兜历史案件 DOM —— 历史材料的 doc_kind 经后端 LEGACY_KIND_MAP 归一，
* 正常不会出现；留着是零成本的保险，不要删（删了旧数据页面会掉色）。 */
.dm-kind.kind-id_cert,
.dm-kind.kind-policy,
.dm-kind.kind-medical_bill,
.dm-kind.kind-inpatient_invoice { background: var(--info-bg); color: var(--info); border-color: transparent; }
.dm-kind.kind-medical_record,
.dm-kind.kind-diagnosis_cert,
.dm-kind.kind-salary_cert { background: var(--success-bg); color: var(--success); border-color: transparent; }
.dm-kind.kind-labor_contract,
.dm-kind.kind-claim_application { background: var(--primary-soft, var(--surface-2)); color: var(--primary-dark); border-color: transparent; }
.dm-kind.kind-accident_cert,
.dm-kind.kind-disability_appraisal { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.dm-kind.kind-work_injury_decision { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.dm-kind.kind-death_cert,
.dm-kind.kind-business_license,
.dm-kind.kind-generic { background: var(--surface-2); color: var(--text-dim); border-color: transparent; }
/* 兼容 v1 遗留类名（历史案件可能仍带着旧 kind 值） */
.dm-kind.kind-invoice { background: var(--info-bg); color: var(--info); border-color: transparent; }
.dm-kind.kind-record { background: var(--success-bg); color: var(--success); border-color: transparent; }
.dm-kind.kind-id_card { background: var(--primary-soft, var(--surface-2)); color: var(--primary-dark); border-color: transparent; }
/* ---- 单据类型修正条 ---- */
.dm-typebar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 10px; padding: 8px 10px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.dm-typebar-label { font-size: 12px; font-weight: 700; color: var(--text-dim); flex-shrink: 0; }
.dm-kind-select {
font-size: 12.5px; font-weight: 600; color: var(--text);
background: var(--card); border: 1px solid var(--border);
border-radius: 999px; padding: 4px 10px; max-width: 280px; cursor: pointer;
}
.dm-kind-select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.dm-kind-select:disabled { opacity: .55; cursor: progress; }
.dm-typebar-hint { font-size: 11.5px; color: var(--text-dim); }
.dm-typebar [data-edit] { margin-left: auto; }
/* ---- 单据级校验问题（身份证校验位不通过等）---- */
.dm-issues { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dm-issue {
font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
background: var(--warn-bg); color: var(--warn);
}
/* ---- 字段行：置信度条 / 来源标 / 校验失败 ---- */
.dm-field { flex-wrap: wrap; row-gap: 2px; }
.dm-field .dm-req { color: var(--danger); font-style: normal; font-weight: 700; margin-left: 1px; }
/* 扩展字段（V3.19）：有则采、缺不报，不计入完整度 —— 用弱化的灰色小标区分，避免与必填抢注意力 */
.dm-field .dm-ext {
color: var(--text-dim); font-style: normal; font-size: 10px; font-weight: 600;
border: 1px solid var(--border); border-radius: 3px;
padding: 0 3px; margin-left: 3px; vertical-align: 1px;
}
.dm-field .dm-none { color: var(--text-dim); font-style: normal; }
.dm-field.key .dm-value { color: var(--primary-dark); }
.dm-field.invalid { background: var(--danger-bg); }
.dm-field.invalid .dm-value { color: var(--danger); }
.dm-field.manual { background: var(--primary-soft, var(--surface-2)); }
.dm-src {
display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
font-size: 10.5px; font-weight: 700; vertical-align: middle;
background: var(--surface); color: var(--text-dim); border: 1px solid var(--border);
}
.dm-src-manual { background: var(--info-bg); color: var(--info); border-color: transparent; }
.dm-src-llm { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.dm-confbar {
flex: 1 1 100%; height: 3px; border-radius: 2px;
background: var(--track, var(--border)); overflow: hidden; margin-top: 2px;
}
.dm-confbar > i { display: block; height: 100%; border-radius: 2px; background: var(--primary); }
.dm-confbar.high > i { background: var(--success); }
.dm-confbar.mid > i { background: var(--warn); }
.dm-confbar.low > i { background: var(--danger); }
.dm-confbar.none { display: none; }
/* ---- 字段编辑态 ---- */
.dm-input {
flex: 1 1 100%; font-size: 13px; font-weight: 600; color: var(--text);
background: var(--card); border: 1px solid var(--primary);
border-radius: var(--radius-sm); padding: 4px 8px; margin-top: 2px;
}
.dm-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.dm-card.editing { border-color: var(--primary); }
.dm-editbar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 10px; padding: 10px 12px;
background: var(--primary-soft, var(--surface-2));
border: 1px solid var(--primary); border-radius: var(--radius-sm);
}
.dm-editbar-hint { font-size: 12px; color: var(--text-dim); }
.dm-card.is-corrected { border-left: 3px solid var(--primary); }
/* ---- 跨材料校验提示 ---- */
.doc-cross-alert {
margin-bottom: 12px; padding: 12px 16px;
background: var(--warn-bg); border: 1px solid var(--warn);
border-radius: var(--radius);
}
.doc-cross-alert .dca-title { font-size: 13px; font-weight: 700; color: var(--warn); }
.doc-cross-alert .dca-item { font-size: 12.5px; margin-top: 6px; color: var(--text); }
/* ---- 重点提示条的操作区（一键重采）---- */
.key-alert .ka-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* ============================================================
* L2 采集规则库 · 训练中心「采集处理规则」
* 配色只用主题变量（--surface/--border/--text/--primary…），
* 四个界面风格（经典青 / 深空夜 / 素白简）自动跟随，深色主题不用另写。
* ============================================================ */
/* ---------- 子页签 ---------- */
.l2-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.l2-subtab {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
background: var(--surface); color: var(--text-dim); font-size: 13px;
cursor: pointer; user-select: none; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.l2-subtab:hover { color: var(--text); border-color: var(--primary); }
.l2-subtab.active { background: var(--primary-soft, var(--surface-2)); color: var(--primary); border-color: var(--primary); font-weight: 600; }
.l2-subtab .l2-count {
font-size: 11px; padding: 1px 6px; border-radius: 999px;
background: var(--surface-2); color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.l2-subtab.active .l2-count { background: var(--surface); color: var(--primary); }
/* ---------- 流水线提示 ---------- */
.l2-hint {
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px;
}
.l2-pipe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; margin-bottom: 8px; }
.l2-step {
padding: 3px 8px; border-radius: var(--radius-sm);
background: var(--surface); border: 1px solid var(--border);
color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.l2-step:hover { border-color: var(--primary); color: var(--text); }
.l2-step.is-on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.l2-step-sep { color: var(--text-dim); font-style: normal; opacity: .6; }
.l2-hint-text { font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }
.l2-hint-text b { color: var(--text); }
.l2-eff { margin-top: 6px; font-size: 12px; color: var(--text-dim); }
/* ---------- 工具条 ---------- */
.l2-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.l2-input, .l2-in {
padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit;
min-width: 0;
}
.l2-input { flex: 0 1 220px; }
.l2-input:focus, .l2-in:focus { outline: none; border-color: var(--primary); }
.l2-ta { width: 100%; min-height: 64px; resize: vertical; line-height: 1.6; }
.l2-statline { font-size: 12px; color: var(--text-dim); margin-left: auto; }
.l2-statline b { color: var(--text); }
.l2-stale { color: var(--warn); cursor: help; border-bottom: 1px dashed currentColor; }
/* ---------- 规则卡片（一规则一屏） ---------- */
.l2-list { display: flex; flex-direction: column; gap: 10px; }
.l2-rule {
background: var(--surface); border: 1px solid var(--border);
border-left: 3px solid var(--primary); border-radius: var(--radius-sm);
padding: 12px 14px; transition: box-shadow .15s ease, opacity .15s ease;
}
.l2-rule:hover { box-shadow: var(--shadow-sm); }
.l2-rule.is-off { opacity: .58; border-left-color: var(--border); }
.l2-rule.is-seed { border-left-style: dashed; }
.l2-rule-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.l2-rule-title { display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 1 1 auto; }
.l2-rule-name { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.5; }
.l2-rule-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.l2-tag {
font-size: 11px; padding: 2px 7px; border-radius: 999px;
background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.l2-tag.src-seed { color: var(--info); border-color: currentColor; }
.l2-tag.src-manual { color: var(--ok); border-color: currentColor; }
.l2-tag.src-learn { color: var(--accent, var(--primary)); border-color: currentColor; }
.l2-tag.is-suggest { color: var(--warn); border-color: currentColor; }
.l2-tag.is-auto { color: var(--primary); border-color: currentColor; }
.l2-rule-ops { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.l2-switch { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-dim); cursor: pointer; padding: 2px 6px; }
.l2-switch input { accent-color: var(--primary); }
.l2-danger { color: var(--danger); }
.l2-rule-body { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.l2-rule-foot { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border); display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.l2-rid { font-size: 11px; color: var(--text-dim); background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
.l2-rule-remark { font-size: 11.5px; color: var(--text-dim); line-height: 1.6; flex: 1 1 100%; }
.l2-dim { color: var(--text-dim); font-size: 12px; }
/* ---------- 键值行 / 标签 ---------- */
.l2-kv { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.75; }
.l2-k { flex: 0 0 96px; color: var(--text-dim); }
.l2-v { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--text); min-width: 0; }
.l2-chip {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.l2-chip.is-kind { border-color: var(--primary); color: var(--primary); }
.l2-chip.is-miss { border-style: dashed; color: var(--text-dim); }
.l2-chip i { font-style: normal; cursor: pointer; opacity: .6; padding: 0 1px; }
.l2-chip i:hover { opacity: 1; color: var(--danger); }
.l2-map { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 4px; }
.l2-map-from { padding: 2px 8px; border-radius: 4px; background: var(--danger-bg); color: var(--danger); }
.l2-map-to { padding: 2px 8px; border-radius: 4px; background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.l2-map-arrow { color: var(--text-dim); }
.l2-spec { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.l2-spec-item { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.l2-spec-item i { font-style: normal; color: var(--text-dim); }
/* ---------- 表单 ---------- */
.l2-sect { margin-top: 14px; }
.l2-sect h4 { margin: 0 0 8px; font-size: 13px; color: var(--text); }
.l2-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.l2-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.l2-f-wide { grid-column: 1 / -1; }
.l2-f label { font-size: 12px; color: var(--text-dim); }
.l2-f label em, .va-field label em { color: var(--danger); font-style: normal; margin-left: 3px; }
.l2-f .l2-in { width: 100%; }
.l2-note, .l2-note-grid {
font-size: 12px; line-height: 1.7; color: var(--text-dim);
background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px;
}
.l2-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.l2-foot-hint { font-size: 11.5px; color: var(--text-dim); }
/* ---------- 多选控件（字段 / 类型） ---------- */
.l2-ms {
display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); padding: 6px 8px; min-height: 38px;
}
.l2-ms-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.l2-ms-input { border: none; background: transparent; flex: 1 1 140px; padding: 3px 2px; font-size: 12.5px; }
.l2-ms-input:focus { border: none; }
.l2-ms-hint { font-size: 12px; color: var(--text-dim); }
/* ---------- 即时预览 / 试跑 ---------- */
.l2-preview-out { width: 100%; font-size: 12.5px; }
.l2-np { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; }
.l2-np-line { display: flex; gap: 8px; align-items: flex-start; line-height: 1.6; }
.l2-np-line i { font-style: normal; flex: 0 0 18px; color: var(--text-dim); }
.l2-np-line span { word-break: break-all; color: var(--text); }
.l2-np-hits { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; color: var(--text-dim); }
.l2-np-draft { font-size: 12px; color: var(--text-dim); border-top: 1px dashed var(--border); padding-top: 5px; }
.l2-np-draft.is-hit { color: var(--ok); }
.l2-json { font-size: 11.5px; max-height: 320px; overflow: auto; background: var(--surface-2); padding: 8px; border-radius: var(--radius-sm); }
.l2-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.l2-preview-bar label { font-size: 12.5px; color: var(--text-dim); }
.l2-preview-bar .l2-in { flex: 0 1 320px; }
.l2-pv-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin: 10px 0 6px; font-size: 13px; }
.l2-pv-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 7px; background: var(--surface); }
.l2-pv-row.is-hit { border-color: var(--ok); background: var(--ok-bg); }
.l2-pv-title { font-size: 12.5px; font-weight: 600; color: var(--text); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.l2-pv-sub { font-size: 12px; color: var(--text-dim); margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; line-height: 1.7; }
.l2-pv-issue { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; padding: 4px 0; border-top: 1px dashed var(--border); margin-top: 4px; }
.l2-pv-issue code { font-size: 11px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
/* ---------- 样本分析 ---------- */
.l2-learn { display: flex; flex-direction: column; gap: 12px; }
.l2-learn .l2-form { grid-template-columns: 1fr 1fr; }
.l2-learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.l2-learn-left h4, .l2-learn-right h4, .l2-learn-save h4 { margin: 0 0 8px; font-size: 13px; color: var(--text); }
.l2-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.l2-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.l2-table tr.is-hit td { background: var(--ok-bg); }
.l2-learn-samples { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.l2-learn-sample { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px; background: var(--surface); }
.l2-learn-save { border-top: 1px solid var(--border); padding-top: 12px; }
.l2-alert { border-radius: var(--radius-sm); padding: 9px 11px; font-size: 12.5px; line-height: 1.7; }
.l2-alert.is-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid currentColor; }
.l2-alert.is-err { background: var(--danger-bg); color: var(--danger); border: 1px solid currentColor; }
/* ---------- 修改痕迹 ---------- */
.l2-hist { display: flex; flex-direction: column; gap: 0; font-size: 12px; }
.l2-hist-row {
display: grid; grid-template-columns: 140px 130px 1fr 100px;
gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--border); align-items: baseline;
}
.l2-hist-time, .l2-hist-who { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.l2-hist-op { color: var(--text); font-weight: 600; }
.l2-hist-val { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.l2-hist-old { color: var(--text-dim); text-decoration: line-through; word-break: break-all; }
.l2-hist-new { color: var(--ok); word-break: break-all; }
/* ---------- 轻提示 ---------- */
.l2-flash-host { position: fixed; right: 18px; bottom: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.l2-flash {
background: var(--surface); border: 1px solid var(--primary); border-left-width: 4px;
color: var(--text); font-size: 12.5px; padding: 9px 14px; border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg, var(--shadow)); opacity: 1; transform: translateY(0);
transition: opacity .4s ease, transform .4s ease; max-width: 340px; line-height: 1.6;
}
.l2-flash.is-err { border-color: var(--danger); }
.l2-flash.is-out { opacity: 0; transform: translateY(8px); }
/* ============================================================
* 案件详情 ·「材料校验」页签
* ============================================================ */
/* V4.99e：刷新失败但页面上还是旧数据时的顶部提示。
★ 与 uiState("error") 分工明确：那条是「整块没有数据」，
这条是「数据是旧的」—— 后者最怕被当成最新结论，所以必须常显、不能收进折叠。 */
.vl-errnote {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-bottom: 10px; padding: 8px 12px; border-radius: var(--radius);
background: var(--warn-bg); border: 1px solid var(--warn-border, #e8d5a8);
color: #7a5a12; font-size: 12.5px;
}
.vl-hero {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 16px 18px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--surface);
margin-bottom: 14px;
}
.vl-hero.is-bad { border-left: 4px solid var(--warn); }
.vl-hero.is-ok { border-left: 4px solid var(--ok); }
/* V4.99e：刷新失败 = 中性态。红会被读成「有问题」、绿会被读成「没问题」，
而这时连结论都还没拿到 —— 所以两者都不能用（与 hero 文案同一判据）。 */
.vl-hero.is-stale { border-left: 4px solid var(--text-dim); }
.vl-hero-num { font-size: 34px; font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.vl-hero.is-bad .vl-hero-num { color: var(--warn); }
.vl-hero.is-ok .vl-hero-num { color: var(--ok); }
.vl-hero.is-stale .vl-hero-num { color: var(--text-dim); }
.vl-hero-body { flex: 1 1 auto; min-width: 200px; }
.vl-hero-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.vl-hero-sub { font-size: 12px; color: var(--text-dim); margin-top: 5px; line-height: 1.7; }
.vl-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.vl-filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
.vl-fbtn {
font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
font-family: inherit;
}
.vl-fbtn:hover { color: var(--text); border-color: var(--primary); }
.vl-fbtn.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.vl-file-sel { margin-left: auto; }
.vl-group { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--surface); overflow: hidden; }
.vl-group-head {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 9px 12px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--text);
}
.vl-group-file { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; }
.vl-lv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); flex: 0 0 auto; }
.vl-lv-error .vl-lv-dot { background: var(--danger); }
.vl-lv-warn .vl-lv-dot { background: var(--warn); }
.vl-lv-info .vl-lv-dot { background: var(--info); }
.vl-issue {
display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
padding: 7px 12px; font-size: 12.5px; color: var(--text);
border-top: 1px solid var(--border); line-height: 1.6;
}
.vl-issue-msg { flex: 1 1 240px; min-width: 0; }
.vl-issue-val { font-size: 11.5px; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; color: var(--text-dim); }
.vl-issue-rule { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.vl-fill { background: var(--surface-2); }
.vl-card {
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); padding: 12px 14px; margin-top: 12px;
}
.vl-card h3 { margin: 0 0 6px; font-size: 13.5px; color: var(--text); }
.vl-card .l2-dim { margin: 0 0 6px; line-height: 1.7; }
.vl-sub { font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin: 8px 0 2px; }
.vl-rule-list { display: flex; flex-direction: column; gap: 0; }
.vl-rule-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.vl-rule-name { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#detailValidationBadge.is-zero { opacity: .45; }
/* ============================================================
* 图形类证据 · 人工标注
* ============================================================ */
.va-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.va-left, .va-right { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.va-media {
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface-2); min-height: 300px; max-height: 62vh; overflow: auto;
display: flex; align-items: center; justify-content: center; padding: 6px;
}
.va-media img { max-width: 100%; height: auto; display: block; border-radius: 4px; }
.va-media-none { color: var(--text-dim); font-size: 12.5px; text-align: center; line-height: 1.8; }
.va-media-ops { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.va-fields { display: flex; flex-direction: column; gap: 10px; max-height: 56vh; overflow: auto; padding-right: 2px; }
.va-field { display: flex; flex-direction: column; gap: 4px; }
.va-field label { font-size: 12px; color: var(--text-dim); }
.va-field.is-req label { color: var(--text); font-weight: 600; }
.va-field .l2-in { width: 100%; }
.va-hint { font-size: 11px; color: var(--text-dim); line-height: 1.6; }
.va-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
/* ---------- 类型标签（分组配色） ---------- */
.kind-pill {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--kg, var(--border));
color: var(--text); white-space: nowrap; max-width: 100%;
}
.kind-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kg, var(--primary)); flex: 0 0 auto; }
.kind-visual { font-style: normal; font-size: 10px; padding: 0 5px; border-radius: 3px; background: var(--warn-bg); color: var(--warn); }
.kind-extra { font-style: normal; font-size: 10.5px; color: var(--text-dim); }
.dm-kind[class*="kindg-"] { box-shadow: inset 3px 0 0 var(--kg, transparent); }
.kindg-identity { --kg: var(--primary); }
.kindg-employment { --kg: var(--cat-2); }
.kindg-accident { --kg: var(--danger); }
.kindg-medical { --kg: var(--cat-4); }
.kindg-bill { --kg: var(--warn); }
.kindg-work_injury { --kg: var(--info); }
.kindg-death { --kg: var(--cat-7); }
.kindg-subject { --kg: var(--ok); }
.kindg-insurance { --kg: var(--cat-9); }
/* ---------- 窄屏 ---------- */
@media (max-width: 900px) {
.l2-form, .l2-learn-grid, .va-wrap { grid-template-columns: 1fr; }
.l2-hist-row { grid-template-columns: 1fr; gap: 2px; }
.l2-statline { margin-left: 0; flex: 1 1 100%; }
.l2-k { flex: 0 0 76px; }
.va-media { min-height: 220px; }
}
/* ==========================================================
L2 业务友好化：句式化展示 + 填空式配置
========================================================== */
.l2-sentence {
font-size: 13.5px;
line-height: 2.1;
color: var(--text, #1a2b3c);
}
.l2-sentence .pill { margin: 0 2px; vertical-align: 1px; }
.l2-blank {
display: inline-block;
padding: 1px 8px;
margin: 0 2px;
border-radius: 6px;
background: var(--primary-soft, rgba(26,188,156,.10));
border: 1px solid var(--primary-border, rgba(26,188,156,.35));
color: var(--primary, #17a589);
font-weight: 600;
line-height: 1.7;
max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
.l2-blank.is-kind {
background: rgba(99,102,241,.10);
border-color: rgba(99,102,241,.35);
color: var(--accent);
}
.l2-blank.is-to {
background: rgba(46,204,113,.12);
border-color: rgba(46,204,113,.4);
color: var(--ok);
}
.l2-sent-sub { display: block; font-size: 12px; color: var(--text-dim, #8a97a6); }
.l2-rule-more { margin-top: 6px; font-size: 12px; color: var(--text-dim, #8a97a6); }
/* 弹层：句式填空行 */
.l2-sentprev {
margin: -6px -6px 12px;
padding: 10px 12px;
border-radius: 8px;
background: var(--primary-soft, rgba(26,188,156,.08));
border: 1px dashed var(--primary-border, rgba(26,188,156,.35));
font-size: 13px;
line-height: 2;
}
.l2-sentprev i, .l2-sentline > i {
font-style: normal;
color: var(--text-dim, #8a97a6);
font-size: 12px;
margin-right: 4px;
flex: none;
}
.l2-sentline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin: 2px 0 10px;
font-size: 13.5px;
line-height: 2;
}
.l2-sentline .l2-ms { flex: 1 1 260px; min-width: 220px; }
.l2-in-blank {
display: inline-block;
width: auto !important;
min-width: 140px;
max-width: 320px;
padding: 3px 10px !important;
border-radius: 6px !important;
border: 1px solid var(--primary-border, rgba(26,188,156,.35)) !important;
background: var(--primary-soft, rgba(26,188,156,.06)) !important;
font-weight: 600;
}
.l2-in-blank.is-to { border-color: rgba(46,204,113,.4) !important; background: rgba(46,204,113,.08) !important; }
.l2-fhint {
margin: -2px 0 10px;
padding: 6px 10px;
border-radius: 6px;
background: var(--surface-2, rgba(0,0,0,.03));
color: var(--text-dim, #8a97a6);
font-size: 12px;
line-height: 1.8;
}
.l2-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.l2-suffix { display: flex; align-items: center; gap: 6px; }
.l2-suffix input { flex: 1; }
.l2-suffix i { font-style: normal; color: var(--text-dim, #8a97a6); font-size: 12px; flex: none; }
/* 高级选项折叠 */
.l2-adv { margin: 8px 0 2px; }
.l2-adv summary {
cursor: pointer;
user-select: none;
font-size: 12.5px;
color: var(--text-dim, #8a97a6);
padding: 5px 2px;
}
.l2-adv summary span { opacity: .75; margin-left: 6px; font-size: 11.5px; }
.l2-adv summary:hover { color: var(--primary, #17a589); }
.l2-adv-body { padding: 6px 2px 2px; }
/* 引导语示例行 */
.l2-hint-eg {
display: block;
margin-top: 4px;
font-size: 12px;
color: var(--primary, #17a589);
opacity: .9;
}
/* ==========================================================
报案风险识别规则库（训练中心）：句式化 + 字段条件构建器
========================================================== */
.pr-sect-hint { font-weight: 400; font-size: 11.5px; color: var(--text-dim, #8a97a6); margin-left: 6px; }
.pr-or {
font-style: normal;
display: inline-block;
padding: 0 6px;
margin: 0 4px;
border-radius: 10px;
background: var(--surface-2, rgba(0,0,0,.05));
color: var(--text-dim, #8a97a6);
font-size: 11.5px;
}
.pr-sent-tip { color: var(--text-dim, #8a97a6); font-size: 12px; }
/* 关键词 chips */
.pr-kw-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pr-scope-sel { display: inline-block; width: auto !important; min-width: 150px; padding: 2px 8px !important; }
/* 条件构建器 */
.pr-conds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pr-cond {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--border, #e3e8ef);
background: var(--surface-2, rgba(0,0,0,.02));
}
.pr-cond-no {
flex: none;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--primary-soft, rgba(26,188,156,.12));
color: var(--primary, #17a589);
font-size: 11.5px;
font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.pr-cond select.pr-c-field { flex: 1 1 190px; min-width: 160px; }
.pr-cond select.pr-c-op { flex: 1 1 170px; min-width: 150px; }
.pr-c-args { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 150px; }
.pr-c-args .l2-in { min-width: 90px; max-width: 190px; }
.pr-c-args .pr-c-ref { min-width: 130px; }
.pr-arg-sep { color: var(--text-dim, #8a97a6); }
.pr-c-del { flex: none; color: var(--danger, #e05252); }
.pr-c-noarg { font-size: 12px; }
/* 试跑弹层 */
.pr-pv-note {
margin: 8px 0 12px;
padding: 8px 10px;
border-radius: 6px;
background: var(--surface-2, rgba(0,0,0,.03));
color: var(--text-dim, #8a97a6);
font-size: 12px;
line-height: 1.8;
}
.pr-pv-group { margin-bottom: 12px; }
.pr-pv-gtitle {
font-size: 12px;
font-weight: 600;
color: var(--text-dim, #8a97a6);
margin: 6px 0 4px;
padding-bottom: 3px;
border-bottom: 1px dashed var(--border, #e3e8ef);
}
.pr-req {
display: inline-block;
margin-left: 4px;
padding: 0 5px;
border-radius: 8px;
background: var(--primary-soft, rgba(26,188,156,.14));
color: var(--primary, #17a589);
font-size: 11px;
font-weight: 600;
}
.pr-pv-toggle { margin: 4px 0 12px; }
.pr-pv-hit {
margin: 10px 0;
padding: 10px 12px;
border-radius: 8px;
font-weight: 600;
background: var(--surface-2, rgba(0,0,0,.04));
}
.pr-pv-hit.is-hit { background: rgba(230,90,90,.12); color: var(--danger); }
.pr-pv-risks { display: flex; flex-direction: column; gap: 8px; }
.pr-pv-ev { font-size: 12px; color: var(--text-dim, #8a97a6); }
.pr-pv-score {
margin-top: 10px;
padding: 8px 12px;
border-radius: 8px;
background: var(--surface-2, rgba(0,0,0,.03));
font-size: 13px;
}
/* ============================================================
V3.16 · 规则中心命中的风险来源标注 + 案件级规则试跑
（风险清单 / 报案风险识别结果共用；深浅主题都用变量，保证可读）
============================================================ */
.risk-rc-badge {
display: inline-block; padding: 1px 8px; border-radius: 9px;
background: rgba(23, 165, 137, .13); color: var(--primary, #17a589);
font-size: 11px; font-weight: 600; white-space: nowrap;
}
.risk-meta-row {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px;
}
.risk-basis-inline { font-size: 11px; color: var(--text-dim, #6e9b98); }
.pr-pv-case { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.pr-pv-case label { font-size: 12px; color: var(--text-dim, #6e9b98); white-space: nowrap; }
.pr-pv-case select { flex: 1; min-width: 0; }
.cr-pv-ctx { margin-top: 10px; font-size: 12px; }
.cr-pv-ctx summary { cursor: pointer; color: var(--text-dim, #6e9b98); }
.cr-pv-ctx-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
margin-top: 6px; max-height: 220px; overflow: auto;
}
.cr-pv-ctx-grid span {
font-size: 12px; color: var(--text-dim, #6e9b98);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 规则中心页签增加到 6 个：允许换行，避免窄屏溢出 */
.training-tabs { flex-wrap: wrap; max-width: 100%; }
/* ============================================================
V3.17 · 审核规则库（规则中心 → 审核规则）· 案件审核菜单
+ 规则库「适用范围」徽标 + 案件分析「规则审核」清单
============================================================ */
/* 规则库适用范围徽标（四类规则库页签标题右侧） */
.applies-badge {
display: inline-block; margin-left: 8px; padding: 2px 9px;
border-radius: 999px; font-size: 11px; font-weight: 600;
vertical-align: middle; white-space: nowrap;
background: rgba(23, 165, 137, .13); color: var(--primary, #17a589);
border: 1px solid rgba(23, 165, 137, .28);
}
/* 待审规则收集（ 折叠入口） */
.ar-label-box {
margin-top: 18px; padding: 12px 14px;
background: var(--surface-2, #f4f8f8); border-radius: 10px;
border: 1px dashed rgba(110, 155, 152, .35);
}
.ar-label-box > summary {
cursor: pointer; font-size: 13px; font-weight: 700;
color: var(--text, #245653); list-style: none;
}
.ar-label-box > summary::-webkit-details-marker { display: none; }
.ar-label-box > summary::before { content: "▸ "; color: var(--text-dim, #6e9b98); }
.ar-label-box[open] > summary::before { content: "▾ "; }
/* 列表按材料组分组 */
.ar-mat-head {
display: flex; align-items: center; gap: 8px;
margin: 16px 0 8px; padding: 6px 10px;
background: var(--surface-2, #f4f8f5); border-radius: 8px;
border-left: 3px solid var(--primary, #17a589);
}
.ar-mat-head:first-child { margin-top: 4px; }
.ar-mat-name { font-size: 13px; font-weight: 700; color: var(--text, #245653); }
.ar-mat-count { font-size: 11px; color: var(--text-dim, #6e9b98); }
.ar-mat-line { flex: 1; height: 1px; background: rgba(110, 155, 152, .22); }
/* 规则卡内：材料组 / 展示位置 / 话术 */
.l2-tag.ar-disp-risk { background: rgba(231, 76, 60, .12); color: var(--danger); }
.l2-tag.ar-disp-checklist { background: rgba(0, 184, 169, .14); color: var(--ok); }
.ar-script {
margin-top: 8px; padding: 8px 10px; border-radius: 8px;
background: rgba(23, 165, 137, .07);
border-left: 3px solid rgba(23, 165, 137, .45);
font-size: 12px; color: var(--text, #245653); line-height: 1.6;
}
.ar-script b { color: var(--primary, #17a589); }
/* 空态（此前只在 JS 中使用、CSS 缺失，一并补上） */
.l2-empty {
padding: 28px 16px; text-align: center; font-size: 13px;
color: var(--text-dim, #6e9b98);
background: var(--surface-2, #f4f8f8); border-radius: 10px;
}
.l2-empty.is-err { color: var(--danger); background: rgba(231, 76, 60, .08); }
/* 风险清单：审核规则来源徽标（与「🎯 规则中心」区分） */
.risk-ar-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px; border-radius: 999px;
background: rgba(231, 76, 60, .11); color: var(--danger);
font-size: 11px; font-weight: 600; white-space: nowrap;
}
/* 案件分析「规则审核」页签 · 规则中心命中清单 */
.ar-hit-group { margin-bottom: 12px; }
.ar-hit-group-head {
display: flex; align-items: center; gap: 8px;
margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text, #245653);
}
.ar-hit-item {
padding: 9px 12px; margin-bottom: 6px; border-radius: 8px;
background: var(--surface-2, #f4f8f5);
border-left: 3px solid rgba(110, 155, 152, .5);
}
.ar-hit-item.is-risk { border-left-color: var(--danger); }
.ar-hit-item.is-check { border-left-color: var(--primary); }
.ar-hit-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-hit-title { font-size: 13px; font-weight: 600; color: var(--text, #245653); }
.ar-hit-ev { margin-top: 5px; font-size: 12px; color: var(--text-dim, #6e9b98); line-height: 1.6; }
.ar-hit-rid { font-size: 11px; color: var(--text-dim, #6e9b98); font-family: ui-monospace, Menlo, monospace; }
.ar-mat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* ---- V3.19：卡片标题右侧的操作按钮（导出系统字段表）---- */
.fields-card h3 .btn-sm {
float: right; font-size: 12px; font-weight: 500;
padding: 4px 10px; margin-top: -2px; line-height: 1.4;
}
/* ======================================================================
V3.21：上传结果卡 + 案件处理进度
需求：上传页只反馈「是否上传成功」；处理进度统一在案件清单 / 明细页查看。
全部走 CSS 变量，classic / nebula / minimal 三套主题自适应。
====================================================================== */
/* ---- 域名与 HTTPS 巡检（V3.28 OR-K3）---- */
.dom-summary {
border-radius: 10px; padding: 12px 16px; border: 1px solid var(--border);
background: var(--card);
}
.dom-summary.ok { border-color: var(--ok); background: var(--ok-bg, var(--card)); }
.dom-summary.bad { border-color: var(--danger); background: var(--danger-bg); }
.dom-verdict { font-weight: 700; font-size: 15px; color: var(--text); }
.dom-summary.ok .dom-verdict { color: var(--ok); }
.dom-summary.bad .dom-verdict { color: var(--danger); }
.dom-meta { font-size: 12px; margin-top: 4px; }
.dom-alerts { margin: 8px 0 0; padding-left: 20px; }
.dom-alerts li { font-size: 13px; color: var(--text); margin-bottom: 4px; line-height: 1.6; }
.dom-sect { font-weight: 600; margin: 12px 0 8px; font-size: 13px; color: var(--text); }
/* ---- 未完成任务找回卡（V3.28 OR-K1：发版/重启中断的任务可一键重试）---- */
.retry-card {
background: var(--warn-bg); border: 1px solid var(--warn);
border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px;
}
.retry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.retry-head b { color: var(--warn); }
.retry-head .dim { display: block; margin-top: 2px; font-size: 12px; }
.retry-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.retry-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--card); border: 1px solid var(--border); border-radius: 8px;
padding: 8px 12px;
}
.retry-name { font-weight: 600; color: var(--text); }
.retry-meta { font-size: 12px; margin-top: 2px; }
.retry-why { color: var(--warn); }
.retry-ops { display: flex; gap: 6px; flex: 0 0 auto; }
/* ---- 上传结果卡（上传页，替代原先就地渲染分析结果）---- */
.upload-receipt { margin-top: 14px; }
.receipt-card {
background: var(--card, #fff);
border: 1px solid var(--border, #cdeee9);
border-radius: var(--radius, 14px);
box-shadow: var(--shadow, 0 2px 12px rgba(30, 41, 82, .08));
overflow: hidden;
}
.receipt-head {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px; font-size: 14px; font-weight: 700;
}
.receipt-head.ok {
background: var(--ok-bg, #e6f7ef); color: var(--ok, #1a9c6b);
border-bottom: 1px solid var(--border, #cdeee9);
}
.receipt-head.fail {
background: var(--danger-bg, #ffeef2); color: var(--danger, #e5385b);
border-bottom: 1px solid var(--border, #cdeee9);
}
.receipt-msg { padding: 14px 16px; font-size: 13px; color: var(--text, #173f3f); line-height: 1.7; }
.receipt-rows { padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.receipt-row {
display: grid;
grid-template-columns: 24px 96px minmax(140px, 1.8fr) 84px 158px 72px;
gap: 10px; align-items: center;
padding: 9px 8px; border-radius: 8px; font-size: 13px;
}
.receipt-row:nth-child(odd) { background: var(--surface-2, #f2faf9); }
.receipt-flag { text-align: center; font-size: 13px; }
.receipt-case {
font-family: ui-monospace, Menlo, monospace; font-size: 12px;
color: var(--text-dim, #6e9b98);
}
.receipt-name {
font-weight: 600; color: var(--text, #173f3f);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.receipt-mat { font-size: 12px; color: var(--text-dim, #6e9b98); }
.receipt-row .btn { white-space: nowrap; justify-self: end; }
.receipt-st { font-size: 12px; font-weight: 600; color: var(--info, #14b8a6); }
.receipt-tip {
padding: 10px 16px; font-size: 12px; line-height: 1.7;
color: var(--text-dim, #6e9b98);
border-top: 1px dashed var(--border, #cdeee9);
}
.receipt-tip b { color: var(--primary, #00b8a9); }
.receipt-actions { padding: 0 16px 14px; display: flex; gap: 8px; }
/* ---- 案件处理进度（清单 / 明细共用）---- */
.case-progress {
height: 6px; margin: 6px 0 4px;
border-radius: 999px; overflow: hidden;
background: var(--surface-2, #e9f4f2);
}
.case-progress-fill {
height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--primary, #00b8a9), var(--accent, #14cdba));
transition: width .45s ease;
}
.case-progress-txt {
font-size: 11px; line-height: 1.5;
color: var(--text-dim, #6e9b98);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.case-progress-cell { min-width: 148px; max-width: 220px; }
.case-progress-cell .pill { margin-bottom: 2px; }
/* V3.21：徽标一律不折行（「待评估」「高风险」竖排折行很难读） */
.audit-table td .pill, .audit-table th { white-space: nowrap; }
/* 处理中的案件卡片加一条左侧进度色带，列表里一眼能扫到 */
.case-card.is-busy { border-left: 3px solid var(--primary, #00b8a9); }
.case-card.is-busy .case-card-id::after {
content: "· 处理中"; font-size: 11px; font-weight: 500;
color: var(--text-dim, #6e9b98);
}
@media (max-width: 1100px) {
.receipt-row { grid-template-columns: 24px 1fr 84px; row-gap: 4px; }
.receipt-case, .receipt-st { display: none; }
}
/* ============================================================
一句话规则新增（V3.23）
============================================================ */
.nl-step { font-weight: 600; margin: 6px 0 10px; color: var(--text); }
.nl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; align-items: center; }
.nl-chip {
cursor: pointer; font-size: 12px; padding: 3px 10px; border-radius: 999px;
background: var(--primary-soft); color: var(--primary-dark);
border: 1px solid var(--border); text-decoration: none;
}
.nl-chip:hover { background: var(--primary); color: var(--on-primary); }
.nl-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.nl-badge {
display: inline-block; padding: 3px 12px; border-radius: 999px;
background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: 600;
}
.nl-badge-2 { background: var(--accent); }
.nl-warn {
background: var(--danger-bg); color: var(--danger);
border: 1px solid var(--danger); border-radius: 8px;
padding: 8px 12px; margin-bottom: 10px; font-size: 13px;
}
/* V3.28（OR-H3）：模型可用但置信度偏低 —— 用弱提示，与「通路不可用」区分开 */
.nl-warn-soft { background: var(--warn-bg, var(--primary-soft)); color: var(--warn, var(--primary-dark)); border-color: var(--warn, var(--border)); }
.nl-why { display: block; color: var(--text-dim); font-size: 12px; margin-top: 3px; word-break: break-all; }
.nl-reason { font-size: 12px; color: var(--text-dim); margin: -4px 0 10px; }
/* 字段级「原文依据」：能对上原文用弱色，对不上原文用告警色（最该先看的地方） */
.nl-ev { font-size: 11px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }
.nl-ev-none { color: var(--warn, var(--danger)); }
.nl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 12px; }
.nl-f label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 3px; }
.nl-f .l2-in { width: 100%; }
.nl-f-wide { grid-column: 1 / -1; }
.nl-sect { font-weight: 600; margin: 12px 0 8px; font-size: 13px; }
.nl-sect-dup { color: var(--danger); }
.nl-sect-con { color: var(--danger); }
.nl-sect-rel { color: var(--primary-dark); }
.nl-card {
border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px;
padding: 8px 12px; margin-bottom: 8px; background: var(--surface);
}
.nl-card.nl-dup { border-left-color: var(--danger); }
.nl-card.nl-con { border-left-color: var(--danger); }
.nl-card.nl-rel { border-left-color: var(--primary); }
.nl-card-head { font-size: 13px; font-weight: 600; }
.nl-card-name { font-size: 13px; margin-top: 3px; }
.nl-card-reason { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.nl-card-ops { margin-top: 4px; }
.nl-link { cursor: pointer; color: var(--primary-dark); font-size: 13px; text-decoration: underline; }
.nl-confirm { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 8px 0; cursor: pointer; }
.nl-prio { margin: 10px 0; font-size: 13px; }
.nl-prio b { color: var(--primary-dark); font-size: 15px; }
.nl-impact {
background: var(--surface-2); border: 1px dashed var(--border-strong);
border-radius: 8px; padding: 10px 12px; margin: 12px 0; font-size: 13px;
}
.nl-impact-t { font-weight: 600; margin-bottom: 5px; }
.nl-impact div { line-height: 1.7; }
.nl-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.nl-foot-hint { font-size: 12px; color: var(--text-dim); }
.nl-done { text-align: center; padding: 26px 10px; }
.nl-done-t { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.nl-done .nl-foot { justify-content: center; }
/* ============================================================
首页（V3.24）
============================================================ */
.home-hero {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
background: linear-gradient(120deg, var(--primary-soft), var(--surface));
border: 1px solid var(--border); border-radius: 14px;
padding: 20px 24px; margin-bottom: 16px;
}
.home-hero h2 { margin: 0 0 4px; font-size: 21px; color: var(--text); }
.home-hero-sub { margin: 0; font-size: 13px; color: var(--text-dim); }
.home-hero-date { text-align: right; font-size: 13px; color: var(--text-dim); line-height: 1.7; white-space: nowrap; }
.home-quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 1100px) { .home-quick { grid-template-columns: repeat(3, 1fr); } }
.home-quick a {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 14px 8px; border-radius: 12px; text-decoration: none;
background: var(--surface); border: 1px solid var(--border);
color: var(--text); font-size: 13px; font-weight: 600;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.home-quick a:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.home-quick .q-ico { font-size: 22px; }
.home-quick .q-desc { font-size: 11px; color: var(--text-dim); font-weight: 400; }
.home-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: 1fr; } }
.home-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.home-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: 16px 18px;
}
.home-card h3 { margin: 0 0 12px; font-size: 14px; color: var(--text); display: flex; align-items: center; justify-content: space-between; }
.home-more { font-size: 12px; cursor: pointer; }
.home-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.home-stat {
text-align: center; padding: 10px 4px; border-radius: 10px;
background: var(--surface); border: 1px solid var(--border);
}
.home-stat b { display: block; font-size: 20px; color: var(--primary-dark); }
.home-stat span { font-size: 11px; color: var(--text-dim); }
.home-stat.warn b { color: var(--warn); }
.home-stat.danger b { color: var(--danger); }
/* V4.80 · 布局 A（要求6）待办优先：待办两张卡前置放大、可点。
· button 重置（.home-stat 原是 div 语法，button 有自己的默认边框/字体）；
· 有存货时用边框强调（背景仍素 —— 首页不宜大面积色块）；
· 待办数字字号 26px > 事实类 20px：位次和体量一起说「先看这两张」。 */
.home-stat.todo {
cursor: pointer; font: inherit; color: inherit; text-align: center;
border-color: var(--border);
}
.home-stat.todo b { font-size: 26px; color: var(--primary-dark); }
/* ★ 警示色只在**有存货**时出现：0 也是平静的结论（「没有要处理的」），
把 0 染成橙红 = 天天喊狼来了，真有失败的那天反而没人抬头。 */
.home-stat.todo.warn.has { border-color: var(--warn); }
.home-stat.todo.warn.has b { color: var(--warn); }
.home-stat.todo.danger.has { border-color: var(--danger); }
.home-stat.todo.danger.has b { color: var(--danger); }
.home-stat.todo:hover { border-color: var(--primary); }
.home-stat.todo:not(.has) { opacity: .72; }
/* ★ P2-18（V4.79h）：规则与标准库的**配置计数**收成一行小字。
为什么要视觉上明显不同于上面的 `.home-stat`：那是「数字 + 标签」的**指标卡语法**，
摆在首页主列就是在说「这几个数是你要关注的业务量」。配置计数换了这身皮，
才不会被读成「24303 条没处理」。性质标签（配置计数·不是待办）放在数字**前面**。 */
.home-rule-line {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
padding: 9px 14px; border-radius: 10px;
background: var(--surface-2, var(--surface)); border: 1px dashed var(--border);
font-size: 12px; color: var(--text-dim);
}
.home-rule-line .hrl-head { font-weight: 700; color: var(--text); font-size: 12.5px; }
.home-rule-line .hrl-tag {
font-size: 11px; padding: 1px 7px; border-radius: 999px;
border: 1px solid var(--border); color: var(--text-dim); cursor: help;
}
.home-rule-line .hrl-items { display: inline-flex; flex-wrap: wrap; gap: 2px 4px; }
.home-rule-line .hrl-item b { color: var(--text); }
.home-rule-line .hrl-sep { font-style: normal; opacity: .45; }
.home-rule-line .btn { margin-left: auto; }
.home-recent { display: flex; flex-direction: column; gap: 8px; }
.home-recent-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
cursor: pointer; background: var(--surface);
}
.home-recent-item:hover { border-color: var(--primary); }
.home-recent-item .ri-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); font-weight: 600; }
.home-recent-item .ri-meta { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.home-recent-empty { color: var(--text-dim); font-size: 13px; padding: 12px 0; text-align: center; }
.home-sys { display: flex; flex-direction: column; gap: 8px; }
.home-sys-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text); }
.home-sys-row .k { color: var(--text-dim); }
.home-sys-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.home-sys-dot.ok { background: var(--ok); }
.home-sys-dot.bad { background: var(--danger); }
/* V4.80 · 文案分级：系统状态卡下半部分是 L4 元信息（引擎型号 / 构建号 / 库体积 /
库更新时间）。它被收在这里而不是删掉 —— 排查问题时要看，日常不必扫。 */
.home-sys-foot {
font-size: 11px; color: var(--text-dim); line-height: 1.5; word-break: break-all;
}
.home-sys-foot.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* V4.87（OR-J3）首页「我的待办」三张卡。
★ 与 `.home-stat.todo` 同族但**不复用**：那三张是「处理中 / 失败」（案件状态），
这三张是「待复核 / 待补材料 / 待确认风险」（该谁动手）—— 两组数字都会
出现在同一屏上，长得一样就会让人以为其中一组是重复渲染。
★ 可点 → 必须给出**可点的样子**（hover 抬边 + cursor），否则它读起来就是
一个数字卡，用户不会想到去点。
★ 有件数时用主色描边（.has），为 0 时不描边 —— 「有没有事」要一眼可分，
而 0 仍然显示（藏掉会让「到底有没有事」变得不可判）。 */
.home-todos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 760px) { .home-todos { grid-template-columns: 1fr; } }
.home-todo {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 10px 14px; background: var(--surface-2);
border: 1px solid var(--border); border-radius: 10px;
cursor: pointer; text-align: left; font-family: inherit;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.home-todo:hover { border-color: var(--primary); box-shadow: 0 3px 10px rgba(0, 0, 0, .07); }
.home-todo b { font-size: 24px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.home-todo span { font-size: 12px; color: var(--text-dim); }
.home-todo.has { background: var(--primary-soft); }
.home-todo.has b { color: var(--primary-dark); }
.home-todo.has span { color: var(--text); }
/* 首屏可能还没有案件（新库）—— 待办取不到时用同一处空态文案样式，不出第二套。 */
/* ============================================================
* V3.26 模糊搜索下拉组件（fuzzy-combo.js 配套样式）
* 主题适配：全部走 theme.css 变量，三套主题自动适配
* ============================================================ */
.fz-select-wrap { position: relative; display: inline-flex; }
.fz-select-wrap .fz-combo-input { width: 100%; box-sizing: border-box; }
.fz-hidden-select { display: none !important; }
.fz-menu {
position: fixed;
z-index: 99999;
max-height: 280px;
overflow-y: auto;
/* ★ 阻止滚动链：菜单滚到底后继续滚，不该把底下的页面一起带着滚 ——
否则那一刻会触发页面 scroll，浮层被 closeMenu 收掉，
用户体感是「滚着滚着菜单自己没了」。（2026-09-29 与 fuzzy-combo 的捕获阶段 scroll 联动修复） */
overscroll-behavior: contain;
background: var(--surface, #fff);
color: var(--text, #1a1a1a);
border: 1px solid var(--border, #d8dee9);
border-radius: 8px;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.16);
padding: 4px;
display: none;
box-sizing: border-box;
}
.fz-option {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 7px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fz-option-label { overflow: hidden; text-overflow: ellipsis; }
.fz-option-hint {
flex: none;
font-size: 11px;
color: var(--text-dim, #8a94a6);
max-width: 45%;
overflow: hidden;
text-overflow: ellipsis;
}
.fz-option.fz-active, .fz-option:hover { background: var(--surface-hover, rgba(127, 127, 127, 0.12)); }
.fz-empty {
padding: 10px;
font-size: 12px;
color: var(--text-dim, #8a94a6);
text-align: center;
}
.fz-panel-filter {
width: calc(100% - 12px);
margin: 4px 6px 8px;
padding: 6px 8px;
font-size: 12px;
border: 1px solid var(--border, #d8dee9);
border-radius: 6px;
background: var(--surface, #fff);
color: var(--text, #1a1a1a);
box-sizing: border-box;
}
.fz-panel-filter:focus { outline: none; border-color: var(--primary, #2563eb); }
/* V3.26c 模糊下拉占位样式：未选中时显示「全部…」灰字 */
.fz-combo-input::placeholder { color: var(--text-dim, #8a94a6); opacity: 1; }
/* ============================================================
* V3.27 · 质量看板（第一期 P0 可度量闭环）
* 全部取色走主题变量（--…），三版主题自动适配。
* ============================================================ */
.q-skel, .q-empty {
padding: 18px 14px;
color: var(--text-dim);
font-size: 13px;
text-align: center;
background: var(--bg-soft, transparent);
border-radius: 10px;
}
.q-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 10px;
}
.q-cards-sm { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.q-card {
background: var(--card-bg, var(--panel));
border: 1px solid var(--border);
border-left: 3px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
}
.q-card-v { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--text); }
.q-card-v.is-na { font-size: 15px; color: var(--text-dim); font-weight: 500; }
.q-card-l { margin-top: 4px; font-size: 13px; color: var(--text); }
.q-card-s { margin-top: 2px; font-size: 12px; color: var(--text-dim); }
.q-c-teal { border-left-color: var(--primary); }
.q-c-blue { border-left-color: var(--accent); }
.q-c-green { border-left-color: var(--ok); }
.q-c-amber { border-left-color: var(--warn); }
.q-c-red { border-left-color: var(--danger); }
.q-grid2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 12px;
}
.q-h4 { margin: 0 0 6px; font-size: 14px; color: var(--text); }
.q-mini { width: 100%; border-collapse: collapse; font-size: 13px; }
.q-mini td { padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.q-layers td:first-child { width: 46%; }
.q-case { color: var(--accent, #0a8f86); cursor: pointer; text-decoration: underline dotted; }
.q-val { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 12px; color: var(--text); }
.q-old { color: var(--text-dim); text-decoration: line-through; }
.q-new { color: var(--ok); font-weight: 600; }
.q-note {
margin-top: 10px;
padding: 10px 12px;
border-radius: 8px;
background: var(--bg-soft, rgba(0, 184, 169, 0.06));
border: 1px solid var(--border);
font-size: 13px;
color: var(--text);
}
.q-sub { margin-top: 5px; font-size: 12px; color: var(--text-dim); }
.q-bar {
height: 8px;
min-width: 90px;
border-radius: 6px;
background: var(--border);
overflow: hidden;
}
.q-bar > i { display: block; height: 100%; background: var(--primary); }
/* 阈值配置 */
.q-cfg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px;
}
.q-cfg-item { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text); }
.q-cfg-item > span { color: var(--text-dim); }
.q-cfg-item > code { font-size: 11px; }
/* 留痕展示 */
.q-pre {
max-height: 320px;
overflow: auto;
margin: 0;
padding: 10px;
border-radius: 8px;
background: var(--bg-soft, rgba(0, 0, 0, 0.03));
border: 1px solid var(--border);
font-size: 12px;
line-height: 1.55;
color: var(--text);
white-space: pre-wrap;
word-break: break-all;
}
.q-blocks { max-height: 320px; overflow: auto; }
.q-block {
display: flex;
gap: 8px;
align-items: baseline;
padding: 3px 6px;
border-bottom: 1px dashed var(--border);
font-size: 12px;
}
.q-bx { flex: 0 0 62px; color: var(--text-dim); font-family: var(--mono, monospace); }
.q-bbox { flex: 0 0 150px; color: var(--text-dim); font-family: var(--mono, monospace); font-size: 11px; }
.q-btext { flex: 1; color: var(--text); word-break: break-all; }
.q-bconf { flex: 0 0 46px; text-align: right; color: var(--text-dim); }
/* 溯源链路 */
.q-trace-item {
margin-top: 10px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--card-bg, var(--panel));
}
.q-trace-1, .q-trace-2, .q-trace-3 { font-size: 13px; color: var(--text); margin-bottom: 3px; }
.q-trace-1 > b, .q-trace-2 > b, .q-trace-3 > b { color: var(--text-dim); font-weight: 600; margin-right: 6px; }
.q-trace-1 { font-size: 14px; }
/* OR-C2：分类候选一键改判 */
.dm-cands {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 6px 0 2px;
padding: 6px 8px;
border-radius: 8px;
background: var(--bg-soft, rgba(232, 163, 61, 0.08));
border: 1px dashed var(--border);
}
.dm-cands-label { font-size: 12px; color: var(--text-dim); }
.dm-cand {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 9px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--card-bg, var(--panel));
color: var(--text);
font-size: 12px;
cursor: pointer;
}
.dm-cand:hover { border-color: var(--accent, #00b8a9); color: var(--accent, #00b8a9); }
.dm-cand:disabled { opacity: 0.5; cursor: not-allowed; }
.dm-cand-score {
font-size: 11px;
color: var(--text-dim);
font-family: var(--mono, monospace);
}
.dm-cands-hint { font-size: 11px; color: var(--text-dim); margin-left: auto; }
/* ============================================================
V3.27a（OR-A1）文件去重与同源材料识别
—— 疑似重复材料提示行 + 跨案件同源材料警示行，取色全走主题变量
============================================================ */
.dm-dup {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 2px;
padding: 6px 10px;
border-radius: 6px;
border: 1px dashed var(--border);
background: var(--surface-2, transparent);
color: var(--text-dim);
font-size: 12px;
line-height: 1.6;
}
.dm-dup .btn { margin-left: auto; }
/* 同源材料（疑似重复索赔）：用告警色左条，与普通重复提示区分 */
.dm-dup-warn {
border-style: solid;
border-left: 3px solid var(--danger, #e05252);
color: var(--text);
}
/* V3.27a（OR-B2）双引擎交叉一致性：材料卡内一行结论 + 冲突明细 */
.dm-cross {
margin: 6px 0 2px;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
line-height: 1.6;
border-left: 3px solid var(--border, #d5d8dd);
background: var(--surface-2, transparent);
color: var(--text);
}
.dm-cross-ok { border-left-color: var(--ok, #3a9d5d); }
.dm-cross-bad { border-left-color: var(--danger, #e05252); }
.dm-cross-skip { border-left-color: var(--border, #d5d8dd); color: var(--text-dim); }
.dm-cross-conf { margin-top: 4px; color: var(--text); font-size: 12px; }
/* ============================================================
V3.27a（OR-A5）材料齐全度核验
—— 覆盖率头部 + 三张清单（缺失 / 重复 / 疑似多余）+ 清单配置表
============================================================ */
.cp-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.cp-score { display: flex; flex-direction: column; min-width: 96px; }
.cp-num { font-size: 30px; font-weight: 700; line-height: 1.1; font-family: var(--mono, monospace); }
.cp-lab { font-size: 12px; color: var(--text-dim); }
.cp-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cp-bar > i { display: block; height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.cp-hint { margin-top: 8px; font-size: 12px; color: var(--text-dim); line-height: 1.6; }
.cp-item {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
background: var(--surface-2); margin-bottom: 6px; font-size: 13px; color: var(--text);
}
.cp-sub { font-size: 12px; color: var(--text-dim); }
.cp-note { font-size: 12px; color: var(--text-dim); font-style: italic; }
.cp-group { margin-bottom: 16px; }
.cp-group-title { font-size: 13px; font-weight: 600; color: var(--text); margin: 4px 0 6px; }
.cp-kinds { display: flex; gap: 4px; flex-wrap: wrap; }
.cp-lvsel {
padding: 2px 6px; border-radius: 6px; font-size: 12px;
border: 1px solid var(--border); background: var(--card); color: var(--text);
}
/* V3.27a（OR-D1）业务校验冲突明细 */
.bv-detail {
width: 100%;
margin-top: 4px;
font-size: 12px;
color: var(--text-dim);
line-height: 1.65;
white-space: pre-wrap;
}
/* V3.32（OR-A2/A3/A4）图像预处理明细：展开区嵌在 .cp-item 里，
所以内部元素统一 width:100% —— .cp-item 是 flex-wrap 容器，
不加宽度的话子块会与 pill/文件名挤在同一行。 */
.ip-detail {
width: 100%;
margin-top: 6px;
padding: 8px 10px;
border-top: 1px dashed var(--border);
font-size: 12px;
color: var(--text-dim);
}
.ip-detail .bv-detail { margin-top: 2px; }
/* ============================================================
* V3.28 · OR-E1 复核三件套界面 + OR-E2 差异优先
*
* 布局目标「一屏完成」：左原图（可缩放/翻页/定位高亮）· 中主操作 · 右字段列表，
* 三列各自独立滚动，材料条与键盘提示固定在底部 —— 复核过程中不出现整页滚动。
* 全部用主题变量取色，三套主题自动适配（新 UI 一律 var(--…)）。
* ============================================================ */
.rv-wrap { display: flex; flex-direction: column; gap: 10px; }
/* ---------- 顶部状态条 ---------- */
.rv-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
padding: 10px 14px; border-radius: var(--radius);
background: var(--card); border: 1px solid var(--border);
}
.rv-bar-l, .rv-bar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-title { font-weight: 700; font-size: 14px; color: var(--text); }
.rv-chip {
font-size: 12px; padding: 3px 10px; border-radius: 999px;
background: var(--surface-2); color: var(--text-dim);
border: 1px solid var(--border); white-space: nowrap;
}
.rv-chip.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; font-weight: 700; }
.rv-chip.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; font-weight: 700; }
.rv-chip.dim { opacity: 0.75; }
.rv-switch {
display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
color: var(--text-dim); cursor: pointer; user-select: none;
padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
background: var(--surface-2);
}
.rv-switch input { accent-color: var(--primary); cursor: pointer; }
.rv-zoom {
font-size: 12px; color: var(--text-dim); min-width: 42px; text-align: center;
font-family: var(--mono, monospace);
}
/* ---------- 三列主体 ---------- */
.rv-main {
display: grid;
grid-template-columns: minmax(0, 1fr) 66px minmax(320px, 400px);
gap: 10px;
align-items: stretch;
height: calc(100vh - 330px);
min-height: 420px;
}
/* 左：原图舞台 */
.rv-stage {
display: flex; flex-direction: column; min-width: 0;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius); overflow: hidden;
}
.rv-stagebar {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 6px 10px; border-bottom: 1px solid var(--border);
background: var(--card); font-size: 12px; color: var(--text-dim);
}
.rv-stagehint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-warn-text { color: var(--warn); font-weight: 600; }
.rv-pager { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rv-imgscroll {
flex: 1; overflow: auto; padding: 12px;
display: flex; align-items: flex-start; justify-content: center;
}
.rv-imgbox { position: relative; display: inline-block; line-height: 0; max-width: 100%; }
.rv-imgbox.hidden { display: none; }
.rv-imgbox img {
display: block; height: auto; max-width: 100%;
border-radius: 6px; box-shadow: var(--shadow);
background: var(--surface);
}
.rv-overlay { position: absolute; inset: 0; line-height: normal; cursor: default; }
.rv-overlay.rv-selecting { cursor: crosshair; background: rgba(0, 184, 169, 0.06); }
/* 字段定位高亮框 */
.rv-box {
position: absolute; pointer-events: none;
border: 2px solid var(--primary);
background: rgba(0, 184, 169, 0.16);
border-radius: 3px;
transition: box-shadow 0.15s ease;
}
.rv-box.rv-box-done { border-color: var(--ok); background: rgba(26, 156, 107, 0.13); }
.rv-box.rv-box-manual { border-style: dashed; }
.rv-box.active {
border-width: 3px; border-color: var(--danger);
background: rgba(229, 56, 91, 0.18);
box-shadow: 0 0 0 2px rgba(229, 56, 91, 0.28), 0 0 14px rgba(229, 56, 91, 0.4);
animation: rvPulse 1.1s ease-in-out infinite;
}
@keyframes rvPulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(229, 56, 91, 0.28), 0 0 10px rgba(229, 56, 91, 0.32); }
50% { box-shadow: 0 0 0 5px rgba(229, 56, 91, 0.14), 0 0 18px rgba(229, 56, 91, 0.5); }
}
.rv-box-drawing {
border: 2px dashed var(--danger); background: rgba(229, 56, 91, 0.14);
}
.rv-imgfallback { padding: 16px; background: var(--card); border-top: 1px solid var(--border); }
/* 中：一键操作列 */
.rv-mid {
display: flex; flex-direction: column; gap: 8px;
align-items: stretch; justify-content: flex-start;
}
.rv-mbtn {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 10px 4px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--card); color: var(--text);
cursor: pointer; font-size: 11px; font-weight: 600;
transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.rv-mbtn:hover { box-shadow: var(--shadow); }
.rv-mbtn:active { transform: scale(0.95); }
.rv-mbtn .rv-micon { font-size: 17px; line-height: 1; font-weight: 800; }
.rv-mbtn .rv-mtext { font-size: 11px; color: inherit; opacity: 0.85; }
.rv-mbtn.primary {
background: var(--primary); border-color: transparent; color: var(--on-primary);
box-shadow: var(--shadow);
}
.rv-mbtn.primary .rv-mtext { opacity: 1; }
.rv-mbtn.ghost { background: var(--surface-2); color: var(--text-dim); }
/* 右：字段列表 */
.rv-side {
display: flex; flex-direction: column; min-width: 0; overflow: hidden;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius);
}
.rv-sidehead { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.rv-sidetitle {
font-size: 13px; font-weight: 700; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-sidemeta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rv-alert {
margin: 8px 12px 0; padding: 7px 10px; border-radius: 8px;
background: var(--warn-bg); color: var(--warn);
font-size: 12px; line-height: 1.5; font-weight: 600;
}
.rv-kindbar {
margin: 8px 12px 0; padding: 8px 10px; border-radius: 8px;
background: var(--surface-2); border: 1px solid var(--border);
}
.rv-kindhint { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.rv-kindcands { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rv-fields { flex: 1; overflow-y: auto; padding: 10px 12px 14px; }
.rv-row {
border: 1px solid var(--border); border-left: 3px solid transparent;
border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
background: var(--surface-2); cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rv-row:hover { box-shadow: var(--shadow); }
.rv-row.active { border-color: var(--primary); border-left-color: var(--primary); background: var(--card); box-shadow: var(--shadow); }
.rv-row.rv-hasdiff { border-left-color: var(--warn); }
.rv-row.rv-diff-corrected::before,
.rv-row.rv-diff-biz_conflict::before { content: none; }
.rv-row.rv-hasdiff.rv-diff-empty_required { border-left-color: var(--danger); }
.rv-row.rv-diff-biz_conflict { border-left-color: var(--danger); }
.rv-row.rv-verified { border-left-color: var(--ok); opacity: 0.82; }
.rv-row-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rv-label { font-size: 13px; font-weight: 700; color: var(--text); }
.rv-req, .rv-keyf {
font-size: 11px; padding: 1px 6px; border-radius: 4px;
background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border);
}
.rv-req { color: var(--danger); border-color: var(--danger-bg); background: var(--danger-bg); }
.rv-keyf { color: var(--primary); border-color: transparent; background: var(--info-bg, var(--surface-2)); }
.rv-conf { font-size: 11px; font-family: var(--mono, monospace); font-weight: 700; }
.rv-conf-ok { color: var(--ok); }
.rv-conf-mid { color: var(--warn); }
.rv-conf-bad { color: var(--danger); }
.rv-difftag {
font-size: 11px; padding: 1px 7px; border-radius: 999px;
background: var(--warn-bg); color: var(--warn); font-weight: 700;
}
.rv-oktag {
font-size: 11px; padding: 1px 7px; border-radius: 999px;
background: var(--ok-bg); color: var(--ok); font-weight: 700;
}
.rv-rowops { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.rv-op {
font-size: 11px; padding: 2px 8px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--border); background: var(--card); color: var(--text-dim);
}
.rv-op:hover { color: var(--primary); border-color: var(--primary); }
.rv-op-ok { color: var(--ok); border-color: var(--ok-bg); background: var(--ok-bg); font-weight: 800; }
.rv-op-done { opacity: 0.7; cursor: default; }
.rv-noloc { font-size: 11px; color: var(--text-dim); opacity: 0.7; }
.rv-val {
margin-top: 5px; font-size: 14px; font-weight: 600; color: var(--text);
word-break: break-all; border-bottom: 1px dashed var(--border);
padding-bottom: 2px; cursor: text;
}
.rv-val:hover { border-bottom-color: var(--primary); }
.rv-empty { color: var(--text-dim); font-weight: 400; font-size: 13px; }
.rv-input {
width: 100%; padding: 4px 6px; border-radius: 6px; font-size: 13px;
border: 1px solid var(--primary); background: var(--card); color: var(--text);
font-family: inherit;
}
.rv-ev { margin-top: 4px; font-size: 12px; color: var(--text-dim); line-height: 1.5; word-break: break-all; }
.rv-line { margin-top: 2px; font-size: 12px; color: var(--text-dim); opacity: 0.85; line-height: 1.5; word-break: break-all; }
/* 底部：材料条与键盘提示 */
.rv-units {
display: flex; gap: 8px; overflow-x: auto; padding: 8px 10px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.rv-unit {
display: flex; flex-direction: column; gap: 3px; min-width: 150px; max-width: 220px;
padding: 7px 10px; border-radius: 8px; cursor: pointer; text-align: left;
border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.rv-unit:hover { box-shadow: var(--shadow); }
.rv-unit.active { border-color: var(--primary); background: var(--card); box-shadow: var(--shadow); }
.rv-unit.done { opacity: 0.72; }
.rv-unit-no {
font-size: 11px; font-weight: 800; color: var(--text-dim);
font-family: var(--mono, monospace);
}
.rv-unit-name {
font-size: 12px; font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-unit-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.rv-tag {
font-size: 10px; padding: 1px 6px; border-radius: 999px;
background: var(--surface); color: var(--text-dim); border: 1px solid var(--border);
}
.rv-tag.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; font-weight: 700; }
.rv-tag.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; font-weight: 700; }
.rv-tag.mid { background: var(--info-bg, var(--surface-2)); color: var(--info, var(--primary)); border-color: transparent; }
.rv-help {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 7px 12px; border-radius: var(--radius);
background: var(--surface-2); border: 1px solid var(--border);
font-size: 12px; color: var(--text-dim);
}
.rv-help b { color: var(--text); font-size: 12px; }
.rv-help kbd {
display: inline-block; padding: 1px 6px; margin: 0 1px;
border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
background: var(--card); color: var(--text);
font-family: var(--mono, monospace); font-size: 11px;
}
/* 窄屏（笔记本分屏）：字段列表收到 300px，仍保持三列一屏 */
@media (max-width: 1280px) {
.rv-main { grid-template-columns: minmax(0, 1fr) 60px 320px; }
.rv-main { height: calc(100vh - 300px); }
}
@media (max-width: 1024px) {
.rv-main {
grid-template-columns: minmax(0, 1fr);
height: auto; min-height: 0;
}
.rv-mid { flex-direction: row; flex-wrap: wrap; }
.rv-mbtn { flex: 1 1 90px; }
.rv-stage { min-height: 380px; }
.rv-side { max-height: 60vh; }
}
/* ============================================================
* V3.29 · P1 批次「质量闭环收口」质量看板新增页签样式
* 作业产能（OR-E5）· 规则效果（OR-D3）· 阈值治理（OR-C4/C5/G4）
* 全部使用主题变量，三主题自动适配；不引入固定浅色底。
* ============================================================ */
.q-section {
margin-top: 14px;
padding: 14px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.q-section > .sub-h { margin: 0 0 10px; }
.q-h5 { margin: 0 0 8px; font-size: 13px; color: var(--text-dim); font-weight: 600; }
.q-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin-top: 14px; }
.q-2col > .q-section { margin-top: 0; }
.q-table-wrap { overflow-x: auto; }
.q-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.q-table-wrap th {
text-align: left; padding: 7px 8px; color: var(--text-dim);
font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.q-table-wrap td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.q-table-wrap tr:last-child td { border-bottom: none; }
.q-bar { margin-top: 4px; }
.q-bar-warn > i { background: var(--warn); }
.q-bar-ok > i { background: var(--ok); }
.q-bad { color: var(--danger); font-weight: 600; }
.q-ok { color: var(--ok); font-weight: 600; }
.q-row-hl { background: var(--ok-bg); }
.q-row-hl td { font-weight: 600; }
.q-checksel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.q-hint {
margin-top: 8px; padding: 8px 10px; border-radius: 8px;
background: var(--surface-2); border-left: 3px solid var(--border);
font-size: 13px; color: var(--text);
}
.q-hint.q-bad { background: var(--danger-bg); border-left-color: var(--danger); }
.q-hint.q-ok { background: var(--ok-bg); border-left-color: var(--ok); }
.q-doc {
margin-top: 10px; padding: 8px 10px; border-radius: 8px;
background: var(--surface-2); font-size: 12px; color: var(--text-dim);
}
.q-doc > summary { cursor: pointer; color: var(--text-dim); font-weight: 600; }
.q-doc ul { margin: 8px 0 0; padding-left: 18px; }
.q-doc li { margin: 3px 0; line-height: 1.6; }
/* 窄屏：表格与双列退化为单列，保证平板可用 */
@media (max-width: 1100px) {
.q-2col { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.q-section { padding: 10px; }
.q-table-wrap table { font-size: 12px; }
.q-table-wrap th, .q-table-wrap td { padding: 6px 5px; }
}
/* V3.29（OR-D2）统一风险清单：来源库徽标与来源分布条 */
.risk-lib-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 8px 10px; margin-bottom: 10px;
background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
font-size: 12px;
}
.risk-lib-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 10px; font-size: 12px; line-height: 1.6;
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-left-width: 3px;
}
.risk-lib-chip b { font-weight: 700; }
.risk-lib-chip.q-c-blue { border-left-color: var(--accent); }
.risk-lib-chip.q-c-teal { border-left-color: var(--primary); }
.risk-lib-chip.q-c-amber { border-left-color: var(--warn); }
.risk-lib-chip.q-c-green { border-left-color: var(--ok); }
.risk-lib-chip.q-c-red { border-left-color: var(--danger); }
/* ============================================================
* V3.30（OR-H2 + OR-D4）规则治理中心
* ------------------------------------------------------------
* 全部走主题变量：三套主题（浅色 / 清新薄荷 / nebula 深色）都要能用。
* ★ 坑：CSS 变量必须在 :root 显式声明，否则深色主题下取不到值会掉回
* 浏览器默认色（白底黑字），在深色页面上就是一块刺眼的亮色块。
* ============================================================ */
.rg-subtabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 10px 0 14px;
border-bottom: 1px solid var(--border);
padding-bottom: 8px;
}
.rg-subtab {
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-dim);
border-radius: var(--radius);
padding: 5px 12px;
font-size: 13px;
cursor: pointer;
transition: all .15s;
}
.rg-subtab:hover { color: var(--text); border-color: var(--primary); }
.rg-subtab.active {
background: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
font-weight: 600;
}
.rg-pane { padding-top: 4px; }
.rg-toolbar {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 10px;
}
.rg-inline {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-dim);
}
.rg-h4 {
margin: 14px 0 8px;
font-size: 14px;
color: var(--text);
border-left: 3px solid var(--primary);
padding-left: 8px;
}
.rg-h5 {
margin: 12px 0 6px;
font-size: 13px;
color: var(--text-dim);
font-weight: 600;
}
.rg-libblock {
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--border);
}
.rg-find { margin-bottom: 10px; }
.rg-find-h {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 5px;
}
.rg-chip {
display: inline-flex;
align-items: center;
font-size: 12px;
padding: 2px 8px;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid var(--border);
border-left-width: 3px;
color: var(--text);
}
.rg-chip.q-c-blue { border-left-color: var(--accent); }
.rg-chip.q-c-teal { border-left-color: var(--primary); }
.rg-chip.q-c-amber { border-left-color: var(--warn); }
.rg-chip.q-c-green { border-left-color: var(--ok); }
.rg-chip.q-c-red { border-left-color: var(--danger); }
.rg-ops {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.rg-ops .btn { padding: 2px 8px; font-size: 12px; }
.rg-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
}
.rg-diffbox {
margin: 10px 0;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
}
.rg-diffhead {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 13px;
color: var(--text);
margin-bottom: 8px;
}
.rg-diffhead .btn { margin-left: auto; }
.rg-pre {
margin: 8px 0 0;
padding: 8px;
background: var(--surface-2);
border-radius: calc(var(--radius) / 2);
font-size: 12px;
color: var(--text-dim);
white-space: pre-wrap;
word-break: break-all;
}
.rg-err {
padding: 10px 12px;
border-radius: var(--radius);
background: var(--danger-bg);
border: 1px solid var(--danger);
border-left-width: 3px;
color: var(--text);
font-size: 13px;
}
.rg-err ul { margin: 6px 0 0 18px; }
@media (max-width: 900px) {
.rg-toolbar { flex-direction: column; align-items: stretch; }
.rg-toolbar .l2-input { width: 100%; }
}
/* ============================================================
* V3.31（OR-H4 变更单 / OR-H1 沙盒）——补样式
* 全部走主题变量：三主题（浅色/深色/nebula）自动适配
* ============================================================ */
.rg-warnbox {
margin: 8px 0;
padding: 10px 12px;
border-radius: var(--radius);
background: var(--warn-bg);
border: 1px solid var(--warn);
border-left-width: 3px;
color: var(--text);
font-size: 13px;
}
.rg-warnbox ul { margin: 6px 0 0 18px; }
.rg-warnbox li { margin: 2px 0; }
.rg-h5 {
margin: 12px 0 6px;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.rg-table { width: 100%; font-size: 13px; }
.rg-table th { text-align: left; font-weight: 600; color: var(--text-dim); }
.rg-table td { vertical-align: top; padding: 6px 8px; }
.rg-table tr + tr td { border-top: 1px solid var(--border); }
.rg-diffbox {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.rg-diffrow {
display: flex;
align-items: baseline;
gap: 8px;
padding: 5px 10px;
font-size: 13px;
}
.rg-diffrow + .rg-diffrow { border-top: 1px solid var(--border); }
.rg-diffrow .rg-mono { min-width: 110px; color: var(--text-dim); }
.rg-old { color: var(--danger); text-decoration: line-through; word-break: break-all; }
.rg-new { color: var(--ok); word-break: break-all; }
.rg-arrow { color: var(--text-dim); }
.rg-details { margin-top: 10px; }
.rg-details > summary {
cursor: pointer;
font-size: 13px;
color: var(--text-dim);
padding: 4px 0;
}
.rg-details[open] > summary { margin-bottom: 6px; }
.rg-find {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px 10px;
margin: 6px 0;
}
.rg-find-head { font-size: 13px; margin-bottom: 3px; }
/* ============================================================
* V3.40（OR-B5）票据切分与关联
* ------------------------------------------------------------
* 一页多票 / 跨页归并的可视化确认区。用现有 CSS 变量，浅深主题自动适配。
* ============================================================ */
.split-card {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px 10px;
margin: 6px 0 10px;
background: var(--surface-2, transparent);
}
.split-card-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 13px;
margin-bottom: 4px;
}
.split-card-head b { word-break: break-all; }
.split-ops {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 8px;
}
/* ============================================================
* V4.41（OR-B4）表格结构还原
* ------------------------------------------------------------
* 逐表渲染结构化行列；合计行加重，让「合计 vs 明细求和」一眼可比。
* ============================================================ */
.table-one {
margin-top: 8px;
padding-top: 6px;
border-top: 1px dashed var(--border);
}
.table-one .data-table td { white-space: nowrap; }
.table-one .data-table tr.table-total td {
border-top: 1px solid var(--border);
background: var(--surface-2, transparent);
}
/* ============================================================
V4.48（OR-K3）上传页改造
------------------------------------------------------------
1) 文件夹选择按钮化：旧版「选择文件夹」是一行小字链接，埋在说明文字里
几乎没人看见 —— 「选不了文件夹」的反馈多半是没找到入口，不是功能缺失。
2) 补传模式：案件号输入 + 候选联想。
3) 分案方式确认弹窗。
============================================================ */
.upload-pick-btns {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 10px 0 4px;
}
.upload-pick-hint {
font-size: 12px;
line-height: 1.5;
}
.upload-pick-btns .btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
}
/* 补传区 */
.supp-box {
border: 1px dashed var(--border, #cbd5e1);
border-radius: 8px;
padding: 12px 14px;
margin: 8px 0;
background: var(--bg-subtle, rgba(148, 163, 184, 0.07));
}
.supp-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.supp-label {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
.supp-row .input {
flex: 1 1 260px;
max-width: 380px;
}
.supp-cand {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 6px;
max-height: 220px;
overflow-y: auto;
}
.supp-cand-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border: 1px solid var(--border, #e2e8f0);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
}
.supp-cand-item:hover {
border-color: var(--primary, #2563eb);
background: var(--bg-subtle, rgba(37, 99, 235, 0.06));
}
.supp-cand-item.on {
border-color: var(--primary, #2563eb);
background: var(--bg-subtle, rgba(37, 99, 235, 0.10));
font-weight: 600;
}
.supp-cand-item .cno {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
color: var(--text-dim, #64748b);
}
.supp-cand-item .spacer { flex: 1 1 auto; }
.supp-target {
margin: 8px 0 0;
font-size: 12px;
}
.supp-target.ok {
color: var(--success, #15803d);
font-weight: 600;
}
/* 分案方式确认弹窗 */
.modal-foot {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 12px 16px;
border-top: 1px solid var(--border, #e2e8f0);
}
.split-ask-list {
margin: 10px 0 0;
padding-left: 18px;
font-size: 13px;
line-height: 1.8;
max-height: 240px;
overflow-y: auto;
}
.split-ask-note {
margin-top: 10px;
font-size: 12px;
color: var(--text-dim, #64748b);
}
/* ══════════════════════════════════════════════════════════════════
V4.77（OR-M1）理算入参来源 / 缺口三层提示
· .in-src —— 来源徽标（材料抽取 / 人工录入 / 标准库 / 计算得出）
· .input-src-table —— 入参来源表（值 / 来源 / 来自哪个字段）
· .miss-list —— 缺口三层清单（缺什么 / 能从哪些字段来 / 去哪里补）
★ 四个来源徽标必须**颜色互不相同**：把「材料抽取」与「人工录入」画成同一个样子，
使用者就分不出这个数是谁给的（判据 D：不同来源不许渲染成同一个样子）。
══════════════════════════════════════════════════════════════════ */
.in-src {
display: inline-block; padding: 1px 8px; border-radius: 999px;
font-size: 11px; font-weight: 600; line-height: 1.7; white-space: nowrap;
}
.in-src.src-material { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--border); }
.in-src.src-manual { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--border); }
.in-src.src-standard { background: var(--primary-soft); color: var(--accent); border: 1px solid var(--border); }
.in-src.src-derived { background: var(--primary-soft); color: var(--accent); border: 1px solid var(--border); }
.in-src.src-none { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
.input-src-table td { font-size: 13px; }
.input-src-table tr.nosrc td { color: var(--text-dim); }
.input-src-table tr.in-src-group td {
background: var(--bg); font-size: 12px; font-weight: 700; color: var(--text-dim);
padding: 6px 12px;
}
.miss-list { list-style: none; margin: 0; padding: 0; }
.miss-list > li { padding: 10px 0; border-top: 1px solid var(--border); }
.miss-list > li:first-child { border-top: none; padding-top: 2px; }
.miss-head { font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.miss-used { font-size: 12px; color: var(--text-dim); font-weight: 400; }
.miss-why { font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.6; }
.miss-line { font-size: 12px; margin-top: 5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.miss-k { color: var(--text-dim); flex: 0 0 104px; }
.miss-line code {
background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
padding: 0 6px; font-size: 12px; margin-right: 2px;
}
.miss-none { color: var(--text-dim); font-style: normal; }
.miss-hint { color: var(--text-dim); }
/* ============================================================
V4.77（OR-L2/L3）字段管理 / 单据类型管理
------------------------------------------------------------
本组样式只服务两个新页签，前缀统一 cfg- ，不与既有类名冲突。
★ 「已停用」一律用弱化 + 徽标表达，**不隐藏** —— 使用者需要看得出
「这个类型原本由哪些字段构成」，否则停用一件事会让类型凭空变小。
============================================================ */
.cfg-notebar {
background: var(--surface-2);
border: 1px solid var(--border);
border-left: 3px solid var(--primary);
border-radius: 10px;
padding: 10px 14px;
font-size: 12.5px;
line-height: 1.75;
color: var(--text-dim);
margin-bottom: 12px;
}
.cfg-notebar b { color: var(--text); }
.cfg-toolbar { flex-wrap: wrap; align-items: center; }
.cfg-toolbar .input { min-width: 150px; }
.cfg-hint { font-size: 12.5px; margin-left: auto; }
/* 待复核横幅：常显在页签顶部，生效前行为不变 —— 必须先说清「尚未生效」 */
.cfg-review-banner {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
background: var(--warn-bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 9px 14px;
font-size: 13px;
margin-bottom: 12px;
}
.cfg-review-banner .cfg-rb-n { font-weight: 700; color: var(--warn); }
.cfg-review-banner .cfg-rb-why { color: var(--warn); font-size: 12.5px; flex: 1 1 320px; }
/* 评测口径横幅（OR-L5）。★ 与上面那条是两件事，刻意不合并：
· 待复核横幅 = 「改动**尚未生效**」（配置侧）
· 本横幅 = 「评测结果的**口径**是否还与当前配置同源」（数据侧）
合成一条会让人以为「复核完就没事了」，而复核通过恰恰是**开始**需要重算的时刻。 */
.cfg-stale-banner {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
border-radius: 10px; padding: 9px 14px; font-size: 13px; margin-bottom: 12px;
background: var(--warn-bg); border: 1px solid var(--border);
}
.cfg-stale-banner .cfg-sb-n { font-weight: 700; color: var(--warn); }
.cfg-stale-banner .cfg-sb-why { color: var(--warn); font-size: 12.5px; flex: 1 1 320px; }
/* 口径同源时降级为一条**信息行**（不是警告）：一个总是亮着的警告等同于没有警告，
所以「无事」必须看起来就没事；但覆盖范围仍要常显 —— 那是说明书 6.5 要求评审看到的。 */
.cfg-stale-banner.is-fresh {
background: var(--panel-2, #f7f9fb); border-color: var(--line, #e3e8ee);
}
.cfg-stale-banner.is-fresh .cfg-sb-why { color: var(--muted, #6b7785); }
.cfg-stale-banner .cfg-sb-cov { font-size: 12.5px; color: var(--muted, #6b7785); }
.cfg-stale-banner table { border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.cfg-stale-banner th, .cfg-stale-banner td {
border: 1px solid var(--line, #e3e8ee); padding: 3px 8px; text-align: left;
}
.cfg-sb-block { flex: 1 1 100%; }
/* 草稿条：无草稿时整行隐藏（不是禁用） */
.cfg-draftbar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
background: var(--primary-soft);
border: 1px solid var(--border);
border-radius: 10px;
padding: 9px 14px;
font-size: 13px;
margin-bottom: 12px;
}
.cfg-draftbar .cfg-draft-n { font-weight: 700; color: var(--accent); }
.cfg-draftbar .cfg-draft-hint { color: var(--text-dim); font-size: 12.5px; }
/* 主从布局：左列表可滚动，右详情跟随 */
.cfg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 14px; }
@media (max-width: 1280px) { .cfg-split { grid-template-columns: minmax(0, 1fr); } }
.cfg-list-col { min-width: 0; }
.cfg-detail-col { min-width: 0; }
.cfg-stats { margin-bottom: 10px; }
.cfg-list-scroll { max-height: 620px; overflow: auto; }
.cfg-row-on td.cfg-fname { font-weight: 600; }
.cfg-row-off td { color: var(--text-dim); }
.cfg-k {
display: inline-block;
background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
padding: 0 5px; font-size: 11.5px; color: var(--text-dim);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cfg-chip {
display: inline-block; font-size: 11.5px; border-radius: 20px;
padding: 1px 8px; border: 1px solid var(--border);
background: var(--surface-2); color: var(--text-dim);
}
.cfg-chip.on { background: var(--ok-bg); color: var(--ok); border-color: var(--border); }
.cfg-chip.off { background: var(--danger-bg); color: var(--danger); border-color: var(--border); }
.cfg-chip.draft { background: var(--primary-soft); color: var(--accent); border-color: var(--border); font-weight: 600; }
/* 字段详情 */
.cfg-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 12px; padding: 14px;
}
.cfg-detail-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cfg-detail-head h3 { font-size: 15px; }
.cfg-detail-sub { font-size: 12px; color: var(--text-dim); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cfg-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.cfg-sec > h4 { font-size: 13px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.cfg-sec > h4 .dim { font-weight: 400; font-size: 12px; }
.cfg-switch {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600;
}
.cfg-pos-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cfg-pos-table th, .cfg-pos-table td {
padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left;
vertical-align: middle;
}
.cfg-pos-table th { background: var(--surface-2); font-weight: 600; white-space: nowrap; }
.cfg-pos-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.cfg-pos-table select { font-size: 12px; padding: 2px 4px; }
.cfg-reason { font-size: 11.5px; color: var(--text-dim); }
.cfg-readonly-alias { display: flex; gap: 6px; flex-wrap: wrap; }
/* 单据类型管理 */
.cfg-group { margin-bottom: 12px; }
.cfg-group-head {
display: flex; align-items: center; gap: 10px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 10px; padding: 9px 14px; cursor: pointer;
font-size: 13.5px; font-weight: 600;
}
.cfg-group-head .cfg-g-count { font-weight: 400; color: var(--text-dim); font-size: 12px; }
.cfg-group-head .cfg-caret { color: var(--text-dim); font-size: 12px; }
.cfg-group-body { border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; }
.cfg-kind-row { border-top: 1px solid var(--border); padding: 10px 14px; }
.cfg-kind-row:first-child { border-top: none; }
.cfg-kind-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cfg-kind-name { font-weight: 600; font-size: 13.5px; min-width: 150px; }
.cfg-kind-label-wrap { min-width: 0; }
.cfg-kind-sub { font-size: 12px; color: var(--text-dim); }
.cfg-kind-fields { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.cfg-kind-field {
font-size: 11.5px; border: 1px solid var(--border); border-radius: 20px;
padding: 1px 9px; background: var(--surface); color: var(--text);
}
.cfg-kind-field.off { color: var(--border-strong); background: var(--bg); border-style: dashed; }
.cfg-kind-field.off::after { content: " · 已停用"; font-size: 10.5px; }
.cfg-kind-field.req { border-color: var(--border); background: var(--ok-bg); }
.cfg-kind-field.key { font-weight: 600; }
.cfg-kind-actions { display: flex; gap: 10px; align-items: center; }
/* 变更单：四块内容 */
.cfg-tk-block { margin-bottom: 14px; }
.cfg-tk-block > h4 {
font-size: 13px; margin-bottom: 6px; padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
.cfg-tk-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.85; }
.cfg-tk-none { font-size: 12.5px; color: var(--text-dim); }
.cfg-tk-risk {
border-radius: 8px; padding: 8px 12px; font-size: 12.5px; line-height: 1.75;
}
.cfg-tk-risk.high { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--border); }
.cfg-tk-risk.low { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--border); }
.cfg-tk-risk ul { margin: 4px 0 0; padding-left: 18px; }
.cfg-tk-meta { font-size: 12px; color: var(--text-dim); display: flex; gap: 14px; flex-wrap: wrap; }
.cfg-tk-acc-na { background: var(--warn-bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: var(--warn); }
.cfg-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cfg-mini-table th, .cfg-mini-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.cfg-mini-table th { background: var(--surface-2); font-weight: 600; }
.cfg-up { color: var(--ok); font-weight: 600; }
.cfg-down { color: var(--danger); font-weight: 600; }
/* 通用确认弹层 */
.cfg-confirm-body { font-size: 13px; line-height: 1.8; }
.cfg-confirm-body .cfg-warn-title { font-weight: 700; color: var(--danger); margin-bottom: 6px; }
.cfg-confirm-body ul { margin: 6px 0 0; padding-left: 18px; }
.cfg-confirm-body .dim { font-size: 12px; margin-top: 8px; }
/* ============================================================
V4.77（OR-M6）与申报值对账
------------------------------------------------------------
★★ 本组的核心不是配色好看，而是让「未做对账」与「对账一致」**一眼可分**：
两者都没有差额数字，若同形渲染，使用者会读成「没问题」——
而「未做对账」意味着「这块根本没比过」。
因此：
· 一致 → 实心绿底（有结论）
· 偏高/偏低 → 实心橙底（有结论、且要处理）
· 未做对账 → **灰底虚边框**（无结论），且文案里带「未做对账」四字
§AN 通则：不同性质的结论不许渲染成同一个样子（判据 D）。
============================================================ */
.recon-table td { font-size: 13px; }
.recon-table .basis { line-height: 1.65; }
.rc-head {
font-size: 13px; line-height: 1.8; margin: 0 0 10px;
background: var(--surface-2); border: 1px solid var(--border);
border-left: 3px solid var(--primary); border-radius: 8px; padding: 8px 12px;
}
.rc-foot { font-size: 12px; color: var(--text-dim); margin: 8px 0 0; line-height: 1.8; }
.rc-badge {
display: inline-block; padding: 2px 9px; border-radius: 999px;
font-size: 11.5px; font-weight: 700; line-height: 1.7; white-space: nowrap;
}
.rc-badge.rc-match { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--border); }
.rc-badge.rc-over { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--border); }
.rc-badge.rc-under { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--border); }
/* ★ 「无结论」档：虚线边框 + 灰字。与上面三档的**形状**不同，色弱使用者也能分。 */
.rc-badge.rc-na {
background: transparent; color: var(--text-dim);
border: 1px dashed var(--border-strong); font-weight: 600;
}
.rc-rate { font-size: 11px; color: var(--text-dim); }
.rc-scope {
display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px;
font-size: 10.5px; background: var(--surface-2); color: var(--text-dim);
border: 1px solid var(--border);
}
.rc-why { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.rc-hints { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--text-dim); line-height: 1.8; }
/* ============================================================
* V4.78 · 伤残预估（GB/T 16180-2014）
* 全部颜色走 CSS 变量，三版主题（classic/nebula/minimal）自动适配。
* ★ 表格不使用 nowrap：长文件名靠 word-break 折行，避免把整表撑出容器
* （V4.76 教训：nowrap 单元格的 max-width 会变成列宽硬下限 → 恒横滚）。
* ============================================================ */
.dis-case-list { display: grid; gap: 8px; max-height: 560px; overflow-y: auto; margin-top: 10px; }
.dis-case-item {
padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
background: var(--surface); transition: border-color .15s, background .15s;
/* P1-14：**卡片本身就是入口**（点击 → 选中 + 预估）。既然点它有事发生，
就必须看起来能点 —— 只有 hover 变边框不足以说明「这是按钮」，光标才是。 */
cursor: pointer;
}
.dis-case-item:hover { border-color: var(--primary); background: var(--surface-2); }
.dis-case-item.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.dis-case-item .dc-name { font-weight: 700; font-size: 13.5px; }
.dis-case-item .dc-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.dis-case-item .dc-actions { margin-top: 8px; }
.dis-empty { color: var(--text-dim); font-size: 13px; padding: 20px 0; text-align: center; }
.dis-none-hint { color: var(--text-dim); font-size: 12.5px; padding: 6px 0; }
.dis-head { display: flex; flex-direction: column; gap: 2px; }
.dis-case-title { font-size: 16px; font-weight: 800; }
.dis-case-meta { font-size: 12px; color: var(--text-dim); }
.dis-existing { margin-top: 6px; font-size: 12.5px; color: var(--warn); }
.dis-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 6px; font-size: 12.5px; color: var(--text-dim); }
.dis-stats b { color: var(--text); }
.dis-stdline { font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }
/* 区间 */
.dis-range {
margin: 10px 0 6px; padding: 14px 18px; border-radius: var(--radius);
background: var(--surface-2); border: 1px solid var(--border);
}
.dis-range-grade { font-size: 26px; font-weight: 800; color: var(--primary-dark); letter-spacing: 1px; }
.dis-range-note { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.dis-range-none { border-style: dashed; }
.dis-range-none .dis-range-grade { font-size: 20px; color: var(--text-dim); }
/* 多模型一致时主判据位换成模型结论（V4.80c）：区间降级为同一张卡里的支撑小字 */
.dis-range-adopted { border-color: var(--primary); border-left: 3px solid var(--primary); }
.dis-range-adopted .dis-range-grade { color: var(--primary-dark); }
.dis-range-tag {
display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 999px;
font-size: 11.5px; line-height: 1.7; color: var(--primary-dark);
background: var(--primary-soft); border: 1px solid var(--border);
}
.dis-range-adopted .dis-range-note { margin-top: 6px; line-height: 1.7; }
.dis-warns {
margin: 8px 0; padding: 8px 12px; border-radius: 10px;
background: var(--warn-bg); color: var(--warn); font-size: 12.5px; line-height: 1.7;
}
.dis-section { margin-top: 16px; }
.dis-section h4 {
font-size: 13.5px; margin: 0 0 8px; padding-left: 8px;
border-left: 3px solid var(--primary);
}
/* 条款引用 */
.dis-cite {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px; font-weight: 700; color: var(--primary-dark);
background: var(--surface-2); border: 1px solid var(--border);
padding: 1px 6px; border-radius: 6px; white-space: nowrap;
}
.dis-tag {
display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
}
.dis-tag-dim { opacity: .8; }
.dis-tag-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
/* 候选条款 */
.dis-cand {
border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
margin-bottom: 8px; background: var(--surface);
}
.dis-cand-out { opacity: .68; border-style: dashed; }
.dis-cand-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dis-score { margin-left: auto; font-size: 11.5px; color: var(--text-dim); }
.dis-cand-text { font-size: 13px; margin: 8px 0 6px; line-height: 1.75; }
.dis-cand-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--text-dim); }
.dis-hits { margin-top: 8px; display: grid; gap: 4px; }
.dis-hit { font-size: 11.5px; color: var(--text-dim); line-height: 1.7; }
.dis-hit-src {
display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px;
background: var(--surface-2); border: 1px solid var(--border);
}
/* ★ V4.100 命中来源段：判定性段落（诊断 / 检查结果 / 手术经过）用 ok 色实心，
描述性段落（查体 / 病史 / 表单）用中性虚线 —— 同一张卡里两种依据必须**看得出区别**，
否则用户会把「查体提到过」当成「诊断已成立」。 */
.dis-hit-sec {
display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px;
font-size: 11px; background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok);
}
.dis-hit-sec-weak {
background: transparent; color: var(--text-dim); border: 1px dashed var(--border);
}
.dis-hit-off { opacity: .72; }
.dis-hit-weak { margin-left: 6px; font-size: 11px; color: var(--warn); }
.dis-hits mark { background: var(--warn-bg); color: inherit; padding: 0 2px; border-radius: 3px; }
/* 判定状态 */
.dis-cond { padding: 1px 7px; border-radius: 999px; font-size: 11px; border: 1px solid var(--border); }
.dis-cond-satisfied { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.dis-cond-failed { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.dis-cond-insufficient { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.dis-cond-in { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.dis-cond-out { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
/* 风险点 */
.dis-risk {
border: 1px solid var(--border); border-left-width: 4px;
border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.dis-risk-up { border-left-color: var(--danger); background: var(--danger-bg); }
.dis-risk-down { border-left-color: var(--warn); background: var(--warn-bg); }
.dis-risk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dis-risk-arrow { font-weight: 800; font-size: 15px; }
.dis-risk-up .dis-risk-arrow { color: var(--danger); }
.dis-risk-down .dis-risk-arrow { color: var(--warn); }
.dis-risk-title { font-weight: 700; font-size: 13px; }
.dis-risk-reason { font-size: 12.5px; margin-top: 6px; line-height: 1.75; }
.dis-risk-detail { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.dis-rule { margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.dis-rule summary { cursor: pointer; }
.dis-rule div { margin-top: 4px; line-height: 1.75; }
/* ★ 材料术语医学解读（V4.79e）—— 挂在候选条款卡片内的「命中说明」位置。
刻意**不加区块边框**：它是候选条款说明的一部分，不是新的一层结论。
术语按来源类别着色（外伤性反应 / 陈旧痕迹 / 影像描述 / 退变变异 / 诊断名），
因为「这个词是外伤反应还是退变」正是核赔要判断的第一件事。 */
.dis-ip-badge {
font-size: 11.5px; color: var(--text-dim); line-height: 1.7; margin-bottom: 8px;
padding: 6px 10px; border-radius: 8px; background: var(--surface-2);
border: 1px solid var(--border);
}
.dis-ip-badge.dis-ip-cloud { border-color: var(--primary-dark); color: var(--text); }
.dis-ip-degraded { display: block; color: var(--warn); margin-top: 3px; font-size: 11.5px; line-height: 1.7; }
.dis-cand-terms { margin-top: 8px; font-size: 11.5px; }
.dis-cand-terms-h { color: var(--text-dim); margin-right: 4px; }
/* ★ 第一档的**具名容器**：两档结构对称（h1 / h2 各一个 wrapper），
冒烟脚本才能对称地断言「术语落到了哪一档」。
早先第一档的标题是裸 、chip 是它的兄弟节点 —— 选择器只能靠
`parentNode` 拐弯，契约脆且读不出意图。此容器只是 block div，无视觉变化。 */
.dis-cand-terms-h1 { margin: 0; }
/* ★ 第二档（同部位背景）必须**视觉上弱于**第一档 ——
它是背景，不是「本条凭什么被召回」，措辞与颜色都要让人一眼看出差别。 */
.dis-cand-terms-h2 {
color: var(--text-dim); margin: 5px 0 2px; font-style: italic;
border-top: 1px dashed var(--border); padding-top: 5px;
}
.dis-cand-terms-h2 .dis-term-chip { opacity: .82; }
.dis-term-chip {
display: inline-flex; align-items: center; gap: 5px; margin: 2px 4px 2px 0;
padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border);
background: var(--surface-2);
}
.dis-term-chip b { font-weight: 700; }
.dis-term-cat { color: var(--text-dim); font-size: 11px; }
.dis-term-pw { color: var(--text-dim); font-size: 11px; }
.dis-term-ai {
font-size: 10px; padding: 0 5px; border-radius: 4px; font-weight: 700;
background: var(--primary-dark); color: var(--on-primary);
}
/* 来源类别：用**左边框颜色**区分，不用整块底色（避免页面花、也避免让
「退变」这类需要核实的词看起来像结论）。 */
.dis-term-descriptive { border-left: 3px solid var(--border); }
.dis-term-trauma { border-left: 3px solid var(--ok); }
.dis-term-old_trace { border-left: 3px solid var(--warn); }
.dis-term-degenerative { border-left: 3px solid var(--danger); }
.dis-term-diagnosis { border-left: 3px solid var(--primary-dark); }
.dis-term-fold { margin-top: 4px; }
.dis-term { border-left: 3px solid var(--border); padding: 6px 0 6px 10px; margin-top: 8px; }
.dis-term-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dis-term-word { font-weight: 700; font-size: 13px; }
.dis-term-meaning { margin-top: 4px; line-height: 1.8; }
.dis-term-rel { margin-top: 4px; line-height: 1.8; color: var(--text-dim); }
.dis-term-follow { margin-top: 4px; line-height: 1.8; color: var(--primary-dark); }
.dis-ip-footer { margin-top: 12px; }
.dis-ip-loose { font-size: 11.5px; }
.dis-ip-link {
margin-top: 8px; padding: 8px 11px; border-radius: 9px;
background: var(--surface-2); border: 1px solid var(--border);
}
.dis-ip-link-h { font-weight: 700; font-size: 12.5px; }
.dis-ip-link-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px;
color: var(--text-dim); margin-top: 4px; }
.dis-ip-link-note { font-size: 12px; line-height: 1.8; margin-top: 5px; }
/* ★ 医学预后层（未来风险点）—— 必须与上面的「级别调整风险点」视觉区分开：
上面每一条都能追到 GB/T 16180-2014 条文号；这一层的依据是法定鉴定时机 +
临床病程共识，**不是国标条文**。所以整块走**虚线边框**（「尚未定论」的语义），
区块头显式声明免责，每条挂「依据」徽标。 */
.dis-prog-disc {
font-size: 12px; color: var(--text-dim); line-height: 1.75; margin-bottom: 8px;
padding: 7px 10px; border-radius: 8px; background: var(--surface-2);
border: 1px dashed var(--border);
}
.dis-prog {
border: 1px dashed var(--border); border-left: 4px solid var(--primary-dark);
border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface);
}
.dis-prog-watch { border-left-color: var(--primary-dark); }
.dis-prog-up { border-left-color: var(--danger); }
.dis-prog-down { border-left-color: var(--warn); }
.dis-prog-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dis-prog-arrow { font-weight: 800; font-size: 14px; }
.dis-prog-watch .dis-prog-arrow { color: var(--primary-dark); }
.dis-prog-up .dis-prog-arrow { color: var(--danger); }
.dis-prog-down .dis-prog-arrow { color: var(--warn); }
.dis-prog-title { font-weight: 700; font-size: 13px; }
.dis-prog-dir { margin-left: auto; }
.dis-basis {
font-size: 11px; padding: 1px 7px; border-radius: 999px;
border: 1px dashed var(--border); color: var(--text-dim); white-space: nowrap;
}
.dis-prog-mech { font-size: 12.5px; margin-top: 6px; line-height: 1.75; }
.dis-prog-meta {
display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px;
color: var(--text-dim); margin-top: 5px; line-height: 1.7;
}
.dis-prog-note { font-size: 11.5px; color: var(--warn); margin-top: 5px; }
.dis-prog-action { font-size: 12.5px; margin-top: 6px; line-height: 1.75; }
/* 缺证据 */
.dis-miss { border: 1px dashed var(--border); border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; }
.dis-miss-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; }
.dis-miss-codes { font-size: 11.5px; color: var(--text-dim); }
.dis-miss-reason { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.7; }
/* 量化要素 */
.dis-feat-row { display: flex; gap: 12px; font-size: 12.5px; padding: 4px 0; }
.dis-feat-k { width: 110px; color: var(--text-dim); flex: none; }
.dis-feat-v { font-weight: 700; }
.dis-feat-src { color: var(--text-dim); font-size: 11.5px; }
/* 每个读数的耳别 / 「这是成品均值」标记 —— 让用户能把页面上的数与材料原文逐个对上 */
.dis-feat-one { display: inline-flex; align-items: baseline; gap: 3px; }
.dis-feat-ear, .dis-feat-avg {
font-size: 10.5px; font-weight: 600; padding: 0 4px; border-radius: 4px;
background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border);
}
/* 抽到但物理上不成立的读数：**不用红色** —— 红是「赔付方向」的语义色，
这里要说的是「这个数请你去核对原文」，不是「风险」。 */
.dis-feat-bad .dis-feat-v { color: var(--warn); }
.dis-feat-bad { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 6px; }
/* ---- 条款族落档（V4.79h）：同族取最重满足档 ---- */
.dis-fam-intro { font-size: 12.5px; color: var(--text-dim); line-height: 1.8; margin-bottom: 10px; }
.dis-fam {
border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
margin-bottom: 10px; background: var(--surface);
}
.dis-fam-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dis-fam-label { font-weight: 700; font-size: 13.5px; }
.dis-fam-grade { font-size: 13px; color: var(--text-dim); }
.dis-fam-grade b { font-size: 19px; color: var(--primary-dark); margin-left: 2px; }
.dis-fam-rule { font-size: 12.5px; margin-top: 6px; line-height: 1.75; }
.dis-fam-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; margin-top: 7px; }
.dis-fam-src { font-size: 11px; color: var(--text-dim); }
.dis-fam-count {
font-size: 12px; color: var(--text-dim); margin-top: 7px; line-height: 1.75;
padding: 6px 9px; border-left: 3px solid var(--primary); background: var(--surface-2);
border-radius: 0 6px 6px 0;
}
.dis-fam-note {
font-size: 11.5px; color: var(--warn); margin-top: 7px; line-height: 1.7;
padding-left: 9px; border-left: 3px solid var(--warn);
}
/* 族内刻度表：一行一档，把「为什么落这一档、上一档差多少」摆平给人看 */
.dis-ladder { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-top: 9px; }
.dis-ladder th, .dis-ladder td {
padding: 5px 7px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top;
}
.dis-ladder th { color: var(--text-dim); font-weight: 600; background: var(--surface-2); }
.dis-ladder-rep { background: var(--surface-2); font-weight: 700; }
.dis-ladder-out td { color: var(--text-dim); }
.dis-ladder-star {
font-size: 10px; font-weight: 700; margin-left: 5px; padding: 0 4px; border-radius: 4px;
background: var(--primary); color: var(--on-primary);
}
.dis-ladder-thr { white-space: nowrap; }
.dis-ladder-gap { color: var(--text-dim); white-space: nowrap; }
.dis-ladder-ok { color: var(--ok); white-space: nowrap; }
.dis-ladder-nolane {
color: var(--text-dim); font-size: 11px; border-bottom: 1px dotted var(--text-dim);
cursor: help; white-space: nowrap;
}
/* 材料语料表 */
.dis-mat-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dis-mat-table th, .dis-mat-table td {
padding: 6px 8px; border-bottom: 1px solid var(--border);
text-align: left; vertical-align: top;
}
.dis-mat-table th { color: var(--text-dim); font-weight: 600; background: var(--surface-2); }
.dis-mat-name { word-break: break-all; }
.dis-num { text-align: right; }
.dis-mat-rel td:first-child { font-weight: 700; }
.dis-ok { color: var(--ok); }
.dis-warn { color: var(--warn); margin-left: 6px; }
.dis-corpus-note { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; line-height: 1.7; }
/* 口径提示 */
.dis-note { font-size: 12.5px; color: var(--text-dim); line-height: 1.8; }
/* 条款库 */
.dis-std-grade { min-width: 110px; }
.dis-std-list { margin-top: 10px; display: grid; gap: 8px; }
.dis-clause { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; background: var(--surface); }
.dis-clause-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dis-clause-text { font-size: 13px; margin: 6px 0 4px; line-height: 1.75; }
.dis-clause-keys { font-size: 11.5px; color: var(--text-dim); }
/* ★ 多模型交叉复核（V4.79g）—— 本区块最容易出的错是「看起来像结论」：
三个模型一致时它确实是一个可用的第二意见，但**定级权仍在规则引擎**。
所以：① 区块底色与候选条款区**同族**（不用结论色块）；
② 裁定条只给「一致 / 分歧 / 无结论」三态语义色，不给"最好等级"的暗示；
③ 每个模型卡片必须能看到它的**状态**（已给出结论 / 明示无法判断 /
输出无法解析 / 调用失败）—— 四种原因处置完全不同。 */
.dis-cons-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 8px 10px; margin-bottom: 10px; border-radius: 10px;
background: var(--surface-2); border: 1px solid var(--border);
}
.dis-cons-hint { font-size: 12px; color: var(--text-dim); line-height: 1.6; flex: 1 1 260px; }
.dis-cons-hint-ok { color: var(--ok); }
.dis-cons-hint-warn { color: var(--warn); }
.dis-cons-hint-bad { color: var(--danger); }
.dis-cons-hint-busy { color: var(--primary-dark); }
.dis-cons-hint-muted { color: var(--text-dim); }
.dis-cons-section { border-top: 2px dashed var(--border); padding-top: 12px; }
.dis-cons-verdict {
border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px;
padding: 10px 12px; margin-bottom: 10px; background: var(--surface);
}
.dis-cons-verdict-ok { border-left-color: var(--ok); }
.dis-cons-verdict-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.dis-cons-verdict-bad { border-left-color: var(--danger); background: var(--danger-bg); }
.dis-cons-verdict-main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dis-cons-verdict-icon { font-weight: 800; font-size: 16px; }
.dis-cons-verdict-ok .dis-cons-verdict-icon { color: var(--ok); }
.dis-cons-verdict-warn .dis-cons-verdict-icon { color: var(--warn); }
.dis-cons-verdict-bad .dis-cons-verdict-icon { color: var(--danger); }
.dis-cons-verdict-level { font-size: 18px; font-weight: 800; }
.dis-cons-verdict-label { font-size: 12px; color: var(--text-dim); }
.dis-cons-verdict-note { font-size: 12.5px; line-height: 1.8; margin-top: 6px; }
.dis-cons-verdict-votes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 11.5px; }
.dis-cons-vote {
padding: 1px 8px; border-radius: 999px; background: var(--surface-2);
border: 1px solid var(--border);
}
.dis-cons-excl {
font-size: 11.5px; color: var(--warn); line-height: 1.8; margin: 0 0 10px;
padding: 6px 10px; border-radius: 8px; background: var(--warn-bg);
}
.dis-cons-excl-item { margin-right: 10px; }
.dis-cons-compare {
font-size: 12.5px; line-height: 1.8; margin-bottom: 10px;
padding: 7px 11px; border-radius: 8px; background: var(--surface-2);
border: 1px solid var(--border);
}
.dis-cons-compare-agree { border-color: var(--ok); }
.dis-cons-compare-heavier, .dis-cons-compare-lighter { border-color: var(--warn); }
.dis-cons-stale {
font-size: 12px; color: var(--danger); margin-bottom: 10px; padding: 7px 11px;
border-radius: 8px; background: var(--danger-bg); border: 1px solid var(--danger);
}
.dis-cons-model {
border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px;
padding: 10px 12px; margin-bottom: 8px; background: var(--surface);
}
.dis-cons-ok { border-left-color: var(--primary-dark); }
.dis-cons-muted { border-left-color: var(--border); }
.dis-cons-warn { border-left-color: var(--warn); }
.dis-cons-bad { border-left-color: var(--danger); }
.dis-cons-model-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dis-cons-model-key {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10.5px; color: var(--text-dim);
}
.dis-cons-status { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); }
.dis-cons-status-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.dis-cons-status-muted { background: var(--surface-2); color: var(--text-dim); }
.dis-cons-status-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.dis-cons-status-bad { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.dis-cons-model-level { margin-top: 6px; font-size: 13px; }
.dis-cons-model-level b { font-size: 15px; }
.dis-cons-conf { font-size: 11.5px; color: var(--text-dim); margin-left: 8px; }
.dis-cons-cite { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dis-cons-cite-raw { display: block; font-size: 11.5px; color: var(--text-dim); line-height: 1.7; }
.dis-cons-flag-ok { font-size: 11px; color: var(--ok); }
.dis-cons-flag-bad { font-size: 11px; color: var(--danger); }
.dis-cons-flag-warn { font-size: 11px; color: var(--warn); font-weight: 700; }
.dis-cons-flag-muted { font-size: 11px; color: var(--text-dim); }
.dis-cons-reason { font-size: 12.5px; line-height: 1.8; margin-top: 7px; }
.dis-cons-miss { font-size: 11.5px; color: var(--primary-dark); line-height: 1.75; margin-top: 5px; }
/* 模型失败说明（V4.96）：一句人话 + 下一步 + 折叠原文。
★ 原文不再直接铺在页面上：`HTTP Error 402: Payment Required | {...}` 对操作员
无用（既不知道原因也不知道找谁），而且看起来像系统故障。 */
.dis-cons-err {
font-size: 11.5px; color: var(--danger); line-height: 1.7; margin-top: 5px;
}
.dis-cons-err .dce-sum { font-weight: 600; }
.dce-act { color: var(--text-dim); font-size: 11.5px; line-height: 1.7; margin-top: 2px; }
.dce-det { margin-top: 4px; }
.dce-det > summary {
cursor: pointer; font-size: 11px; color: var(--text-dim); list-style: none;
display: inline-block; padding: 1px 8px; border: 1px solid var(--border);
border-radius: 999px; background: var(--surface-2);
}
.dce-det > summary::-webkit-details-marker { display: none; }
.dce-det pre {
margin: 5px 0 0; padding: 7px 9px; max-height: 180px; overflow: auto;
background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 11px; line-height: 1.6; color: var(--text-dim);
white-space: pre-wrap; word-break: break-all;
}
.dis-cons-model-meta {
display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px;
color: var(--text-dim); margin-top: 6px;
}
.dis-cons-foot {
margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border);
font-size: 11.5px; color: var(--text-dim); line-height: 1.8;
}
.dis-cons-note { font-size: 11.5px; line-height: 1.8; }
/* ============================================================
* V4.80d（OR-M5）理算 · 保单责任配置
* ★ 素简白单主题：只用 :root 令牌，不写死颜色 —— 换主题不会留下一块对不上的区域。
* ============================================================ */
.rule-stats-row { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.policy-grid { grid-template-columns: minmax(320px, 420px) 1fr; }
@media (max-width: 1000px) { .policy-grid { grid-template-columns: 1fr; } }
.policy-selfcheck { margin-bottom: 14px; }
.policy-selfcheck-bad {
border: 1px solid var(--danger); background: var(--danger-bg);
color: var(--danger); border-radius: var(--radius-lg); padding: 10px 14px; font-size: 13px;
}
.policy-selfcheck-bad ul { margin: 6px 0 0 18px; padding: 0; }
.policy-selfcheck-bad li { margin: 2px 0; line-height: 1.7; }
/* ---- 左列：清单 ---- */
.policy-item {
border: 1px solid var(--border); border-left: 3px solid transparent;
border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px;
cursor: pointer; background: var(--surface);
}
.policy-item:hover { background: var(--surface-2); }
.policy-item.active { border-left-color: var(--primary); background: var(--primary-soft); }
.policy-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.policy-no { font-size: 14px; font-weight: 600; color: var(--text); word-break: break-all; }
.policy-badge {
font-size: 11px; border-radius: 10px; padding: 1px 8px; white-space: nowrap;
}
.policy-badge-active { background: var(--ok-bg); color: var(--ok); }
.policy-badge-archived { background: var(--surface-2); color: var(--text-dim); }
.policy-item-sub { font-size: 12px; margin-top: 3px; }
.policy-item-metrics { display: flex; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.policy-item-metrics b { color: var(--primary); font-size: 15px; }
/* ---- 右列：详情 ---- */
.policy-detail-body { max-height: 70vh; overflow: auto; }
.policy-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding-bottom: 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.policy-head-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; font-size: 12.5px; }
.policy-facts {
display: flex; gap: 24px; margin: 12px 0 4px;
}
.policy-facts > div { display: flex; flex-direction: column; align-items: center; }
.policy-facts b { font-size: 20px; color: var(--primary); }
.policy-facts span { font-size: 12px; color: var(--text-dim); }
.policy-section { margin-top: 16px; }
.policy-section h4 {
font-size: 13px; color: var(--text); margin: 0 0 8px;
padding-left: 8px; border-left: 3px solid var(--primary);
}
.policy-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; }
.policy-field { display: flex; flex-direction: column; gap: 3px; }
.policy-field label { font-size: 12px; color: var(--text-dim); }
.policy-field input, .policy-field select {
border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 6px 8px; font-size: 13px; background: var(--surface); color: var(--text);
font-family: inherit;
}
.policy-field input:disabled, .policy-field select:disabled { background: var(--surface-2); color: var(--text-dim); }
.policy-field-wide { grid-column: 1 / -1; }
.policy-desc-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 2; }
.policy-usage-row {
display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px;
font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed var(--border);
}
.policy-changes { display: flex; flex-direction: column; gap: 8px; }
.policy-change { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; }
.policy-change-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 4px; }
.policy-change-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 10px; font-size: 12px; line-height: 1.9; }
.policy-change-field { color: var(--text); }
.policy-reserved-list { display: flex; flex-wrap: wrap; gap: 8px; }
.policy-reserved-chip {
border: 1px dashed var(--border-strong); border-radius: 10px;
padding: 2px 10px; font-size: 12px; color: var(--text-dim); background: var(--surface-2);
}
/* ============================================================
V4.81 上传与查询（intake）：环节勾选 / 环节页签 / 四种状态
============================================================ */
/* 锁定项（材料识别）：看起来就是一个「已勾上但动不了」的选项，
而不是隐藏它 —— 用户需要知道「这一步一定会跑」。 */
.ct-check.ct-locked { cursor: default; color: var(--text-dim); }
.ct-check.ct-locked input { cursor: default; }
/* ★ 未被角色授权的环节：斜纹灰块 + 点不动。
为什么不是「直接隐藏」：隐藏会让人以为系统没有这个环节，
而斜纹 + 提示让人知道「这是配置问题，找管理员开通即可」。 */
.ct-check.ct-denied {
cursor: not-allowed; color: var(--text-dim); position: relative;
border-radius: 6px; padding: 1px 8px;
background-image: repeating-linear-gradient(
45deg, transparent 0 4px, var(--surface-2) 4px 8px);
border: 1px dashed var(--border-strong);
}
.ct-check.ct-denied input { cursor: not-allowed; }
/* 页签角标（各环节池的成员数） */
.tab-badge {
display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 2px;
border-radius: 9px; font-size: 11px; line-height: 16px; text-align: center;
background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border);
}
.tab-badge:empty { display: none; }
.subtab-btn.active .tab-badge { background: rgba(255,255,255,.22); color: var(--on-primary); border-color: transparent; }
/* ★★ 四种「没有金额」必须视觉可分：操作动作不同（补跑 / 等 / 补数据 / 重试） */
.node-states { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.node-chip {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11.5px; padding: 1px 7px; border-radius: 9px;
border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
white-space: nowrap;
}
.node-chip b { font-weight: 500; color: var(--text); }
/* 已运行 */
.node-chip.st-done { border-color: var(--ok, #1a9c6b); color: var(--ok, #1a9c6b); }
.node-chip.st-done b { color: var(--ok, #1a9c6b); }
/* 排队中 —— 用信息色，且文案写「排队中」而不是「处理中」：
处理中会让人以为可以盯着等，排队中才说得清「还没轮到，别重复提交」 */
.node-chip.st-queued { border-color: var(--info, #2563eb); color: var(--info, #2563eb); }
.node-chip.st-queued b{ color: var(--info, #2563eb); }
/* 未运行（没勾 / 没跑到） */
.node-chip.st-todo { border-style: dashed; }
/* 已运行但算不出 */
.node-chip.st-blank { border-style: dashed; color: var(--warn, #b45309); }
.node-chip.st-blank b { color: var(--warn, #b45309); }
/* 运行失败 */
.node-chip.st-fail { border-color: var(--danger, #dc2626); color: var(--danger, #dc2626); }
.node-chip.st-fail b { color: var(--danger, #dc2626); }
/* ★ V4.96：状态没有记录过（迁移前的存量案件）。**不能**复用 st-todo（未运行）——
「没记录」与「没跑」是两件事，把前者画成后者等于替用户下了一个没人验证的结论。 */
.node-chip.st-unknown { border-style: dotted; color: var(--text-dim); }
.node-chip.st-unknown b { color: var(--text-dim); }
/* 补跑按钮（行内） */
.repair-btn {
font-size: 11.5px; padding: 1px 8px; border-radius: 9px; cursor: pointer;
border: 1px solid var(--border-strong); background: var(--surface);
color: var(--text-dim); font-family: inherit;
}
.repair-btn:hover { color: var(--text); border-color: var(--primary); }
.repair-btn[disabled] { opacity: .45; cursor: not-allowed; }
/* 上传与查询：案件行的环节摘要区 */
.intake-row-nodes { margin-top: 4px; }
.intake-list-empty { padding: 26px 0; text-align: center; color: var(--text-dim); font-size: 13px; }
/* ============================================================
* V4.96 · 环节进度展示（方案 A：总进度 + 四段步进条）
* ------------------------------------------------------------------
* 解决的是同一件事：四个环节一起排队时，用户看不出「走到哪、卡在哪、还要等什么」。
*
* ★★★ 六态必须两两可分，靠「颜色 + 填充方式 + 右侧文字」三处同时不同，不靠单一色号：
* done 绿实心满格 / run 青斜纹+脉冲点 / wait 队列色空条 /
* todo 灰空条 / warn 橙 / fail 红
* 「排队中」与「未运行」压成一个「未完成」是这里最贵的错：
* 前者该等（别重复提交），后者该点「补跑环节」——两件完全不同的事。
* ★★ 只有「材料识别」有真实份数比例；责任判断 / 金额理算 / 减损建议由引擎一次算完，
* 内部没有子步骤 ⇒ 只能 0 或 100。给它们编中间值，条卡住不动时用户会以为系统死了。
* ★ 类名一律 `fp-` 前缀：`.step` 在本文件 133 行已被「上传步骤指示器」占用，
* 复用会让两处互相污染（页面看起来只是「有点歪」，排查时极难定位）。
* ★ 颜色只用语义令牌，不写死色值 —— 换肤（V4.84）只换 :root 令牌，
* 写死颜色的地方会留下一块永远对不上的区域。
* ============================================================ */
.intake-progress { margin-top: 8px; }
.fp-lbl {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
font-size: 12px; color: var(--text-dim); margin-bottom: 5px;
}
.fp-lbl b { color: var(--text); font-size: 13px; }
.fp-cnt { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.fp-track {
height: 8px; border-radius: 6px; overflow: hidden;
background: var(--surface-2); border: 1px solid var(--border);
}
.fp-fill { height: 100%; background: var(--ok); transition: width .3s ease; }
.fp-fill.running { background: var(--primary); }
.fp-segs {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 10px; border: 1px solid var(--border); border-radius: 10px;
overflow: hidden; background: var(--surface-2);
}
.fp-seg {
position: relative; min-width: 0; padding: 9px 12px 10px;
border-right: 1px solid var(--border);
}
.fp-seg:last-child { border-right: none; }
.fp-seg .nm {
display: flex; align-items: center; gap: 5px;
padding-right: 42px; /* 给右上角的比例让位，长名也不压字 */
font-size: 12px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-seg .ch {
padding-right: 42px; margin-top: 3px; font-size: 11px; color: var(--text-dim);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-seg .bar {
height: 4px; margin-top: 7px; border-radius: 3px; overflow: hidden;
background: var(--border);
}
.fp-seg .bar > i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
/* ★ 段条的填充色必须跟这一段的状态一致：满格的绿条配「算不出」三个字，
读起来就是「已经完成且没问题」—— 而真相是「跑完了但没有可用结论」。 */
.fp-seg.warn .bar > i { background: var(--warn); }
.fp-seg.fail .bar > i { background: var(--danger); }
/* 进行中：斜纹 + 背景位移。★ 宽度仍按真实 ratio 给 —— 斜纹条即便只有 38%
也很像「满格」，所以「看起来满」不能用宽度去暗示。 */
.fp-seg .bar > i.run {
background: repeating-linear-gradient(
115deg, var(--primary) 0 7px, var(--info-bg) 7px 14px);
background-size: 200% 100%;
animation: ecFpSlide 1.6s linear infinite;
}
@keyframes ecFpSlide { from { background-position: 0 0; } to { background-position: 28px 0; } }
.fp-seg .pct {
position: absolute; right: 12px; top: 9px;
font-size: 11px; font-weight: 700; color: var(--ok);
}
.fp-seg .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.fp-seg .dot.ok { background: var(--ok); }
.fp-seg .dot.run { background: var(--primary); box-shadow: 0 0 0 3px var(--info-bg); }
.fp-seg .dot.wait { background: var(--info); }
.fp-seg .dot.warn { background: var(--warn); }
.fp-seg .dot.fail { background: var(--danger); }
.fp-seg .live, .fp-lbl .live {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--primary); margin-right: 4px;
animation: ecFpPulse 1.4s ease-in-out infinite;
vertical-align: middle;
}
@keyframes ecFpPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.fp-seg.done { background: var(--surface); }
.fp-seg.run { background: var(--info-bg); box-shadow: inset 0 -2px 0 var(--primary); }
/* ★ 排队中用白底 + 队列色点 + 空条；进行中用浅青底 + 底边色带 + 斜纹。
两态在**底色**上也分开：本项目 --info 与 --primary 本来就接近（都是青绿），
只靠色号区分等于没分 —— 底色/填充方式/文字三处必须同时不同。 */
.fp-seg.wait { background: var(--surface); }
.fp-seg.wait .nm { color: var(--text-dim); }
.fp-seg.todo { background: var(--surface-2); }
.fp-seg.todo .nm { color: var(--text-dim); }
.fp-seg.todo .dot.wait { background: var(--text-dim); opacity: .45; }
.fp-seg.warn { background: var(--warn-bg); }
.fp-seg.fail { background: var(--danger-bg); }
.fp-seg .pct.p-run { color: var(--primary); }
.fp-seg .pct.p-wait { color: var(--info); font-weight: 400; }
.fp-seg .pct.p-todo { color: var(--text-dim); font-weight: 400; }
.fp-seg .pct.p-warn { color: var(--warn); }
.fp-seg .pct.p-fail { color: var(--danger); }
.ip-foot { margin-top: 7px; }
/* 窄屏：四段横排会挤成「每段都只剩省略号」⇒ 折成 2×2。
★ 不是「能横滚就行」：横滚的表格用户根本不会去滚（同族判据见 MEMORY）。 */
@media (max-width: 760px) {
.fp-segs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-seg:nth-child(2n) { border-right: none; }
.fp-seg:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
/* ★ reduce ≠ 全禁（换肤那一版的教训）：只停位移/脉冲类动画，
「进行中 / 排队中 / 未运行」的底色与文字仍然分得开。 */
@media (prefers-reduced-motion: reduce) {
.fp-seg .bar > i.run { animation: none; }
.fp-seg .live, .fp-lbl .live { animation: none; }
.fp-fill { transition: none; }
}
/* ============================================================
* V4.89（OR-J2）· 全局搜索
* ------------------------------------------------------------------
* 形态：顶栏一枚输入框 + 下拉结果面板（分组 + 键盘可选）。
* 判据：
* ① 面板是**浮层**，不挤压顶栏高度（否则每次搜索页面都会跳一下）；
* ② 「无结果 / 无权限 / 失败」三种态必须长得不一样（颜色 + 文案 + 是否有
* 「重试」），不能都渲染成一句「暂无数据」；
* ③ 键盘焦点态与 hover 态**同款高亮** —— 只做 hover 的话，用键盘的人
* 看不见自己选中了哪一条，回车就会打开错误的对象。
* ============================================================ */
.gsearch { position: relative; flex: 0 1 260px; min-width: 140px; }
.gsearch-input {
width: 100%; height: 32px; padding: 0 10px;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface); color: var(--text);
font-size: 12.5px; font-family: inherit;
transition: border-color .15s ease, box-shadow .15s ease;
}
.gsearch-input::placeholder { color: var(--text-dim); opacity: .75; }
.gsearch-input:focus {
outline: none; border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
/* Chrome/Safari 的 search 清除按钮在深色输入框里是黑的，统一去掉，用 Esc 清空 */
.gsearch-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.gsearch-panel {
position: absolute; top: calc(100% + 6px); right: 0;
width: 400px; max-width: calc(100vw - 24px); max-height: 70vh; overflow: auto;
padding: 6px; z-index: 40;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.gs-group { padding: 2px 0 4px; }
.gs-group + .gs-group { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 6px; }
.gs-group-hd {
display: flex; align-items: center; justify-content: space-between;
padding: 4px 8px; font-size: 11.5px; font-weight: 700;
color: var(--text-dim); letter-spacing: .3px;
}
.gs-count {
font-weight: 600; color: var(--text-dim);
background: var(--surface-2); border-radius: 9px; padding: 0 7px;
}
.gs-item {
display: block; width: 100%; text-align: left;
padding: 6px 8px; border: 0; border-radius: var(--radius-sm);
background: transparent; cursor: pointer; font-family: inherit;
}
.gs-item:hover, .gs-item.gs-active { background: var(--primary-soft); }
.gs-item-main { display: flex; align-items: center; gap: 8px; }
.gs-title {
font-size: 13px; font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gs-badge {
flex: none; font-size: 10.5px; font-weight: 600;
padding: 1px 7px; border-radius: 9px;
background: var(--surface-2); color: var(--text-dim);
}
.gs-sub {
margin-top: 1px; font-size: 11.5px; color: var(--text-dim);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gs-more, .gs-note {
padding: 3px 8px 5px; font-size: 11px; color: var(--text-dim);
}
/* 「没搜」与「搜了没有」必须一眼可分：前者用琥珀底提示是**范围缺失** */
.gs-group.is-mute .gs-note {
display: inline-block; margin: 2px 8px 4px;
padding: 2px 8px; border-radius: 9px;
background: var(--warn-bg); color: var(--warn); font-weight: 600;
}
.gs-state { padding: 14px 10px; font-size: 12.5px; color: var(--text-dim); }
.gs-state.is-error { color: var(--danger); }
.gs-state .gs-retry {
margin-left: 8px; font: inherit; font-weight: 700; cursor: pointer;
color: var(--primary); background: none; border: 0; padding: 0;
text-decoration: underline;
}
.gs-foot {
margin-top: 4px; padding: 6px 8px 2px; border-top: 1px solid var(--border);
font-size: 10.5px; color: var(--text-dim);
display: flex; justify-content: space-between; gap: 8px;
}
/* 顶栏在窄屏下优先保留导航；搜索框收起（功能不丢：可用 / 键? 不做承诺） */
@media (max-width: 1180px) { .gsearch { flex-basis: 180px; } }
@media (max-width: 980px) { .gsearch { display: none; } }
/* ============================================================
* V4.90（OR-J7）· 空态 / 无匹配 / 无权限 / 服务异常 四态统一
* ------------------------------------------------------------------
* 目标：任何「这里没有东西」的画面，都必须能回答两个问题 ——
* ① 是哪一种「没有」？（库里本来没有 / 筛掉了 / 没权限 / 取失败）
* ② 我现在该做什么？（去新增 / 清条件 / 申请权限 / 重试）
*
* 判据（每条都对应一种「看着正常、结论却相反」）：
* ① **四态颜色不能是「深浅不同」** —— 必须色相不同（灰 / 蓝 / 琥珀 / 红），
* 且各带一枚文字标签。只靠颜色 = 色盲与打印场景下全部失效。
* ② **「重试」只在失败态出现**。给「库里本来没有」配一个重试按钮，
* 等于告诉用户「再点几次就会出现数据」—— 那是在制造无效动作。
* ③ **无权限态绝不能说「刷新重试」**。刷一百次也不会出现数据，
* 而用户会因此认为系统坏了，于是谁都不去申请权限。
* ④ 左竖条 3px + 文字标签，两个以上通道表达同一件事（不是唯一通道）。
* ============================================================ */
.ui-state {
--us-c: var(--text-dim);
--us-bg: var(--surface-2);
display: flex; align-items: flex-start; gap: 10px;
margin: 8px 0; padding: 10px 12px;
border: 1px solid var(--border); border-left: 3px solid var(--us-c);
border-radius: var(--radius); background: var(--us-bg);
font-size: 12.5px; line-height: 1.55; color: var(--text);
}
.ui-state.us-block { display: block; }
/* 文字标签：即使整页被打印成黑白，四种「没有」仍然可分 */
.ui-tag {
flex: none; margin-top: 1px;
padding: 1px 8px; border-radius: 9px;
font-size: 11px; font-weight: 700; letter-spacing: .2px;
color: var(--us-c); background: transparent;
border: 1px solid var(--us-c);
white-space: nowrap;
}
.ui-body { min-width: 0; flex: 1 1 auto; }
.ui-title { font-weight: 700; color: var(--text); }
.ui-detail {
margin-top: 3px; color: var(--text-dim);
font-size: 12px; word-break: break-word;
}
.ui-hint { margin-top: 3px; font-size: 12px; color: var(--text-dim); }
.ui-acts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.us-retry { font-weight: 700; }
/* —— 四态：色相 + 边框样式双通道 —— */
.ui-state.us-empty {
--us-c: var(--text-dim); --us-bg: transparent;
border-style: dashed;
}
.ui-state.us-filtered {
--us-c: var(--info); --us-bg: var(--info-bg);
}
.ui-state.us-forbidden {
--us-c: var(--warn); --us-bg: var(--warn-bg);
}
.ui-state.us-missing {
--us-c: var(--text-dim); --us-bg: transparent;
border-left-style: dotted; border-left-width: 3px;
}
.ui-state.us-error {
--us-c: var(--danger); --us-bg: var(--danger-bg);
}
.ui-state.us-loading { --us-c: var(--text-dim); --us-bg: transparent; border-style: dashed; }
/* 表格里的空态：不要左右各缩进 8px，否则会看起来「表格断了一截」 */
.ui-state.us-in-table { margin: 0; border-radius: 0; border-left-width: 3px; }
/* ============================================================
* V4.92（OR-D5）法规知识库
* ★ 只用主题令牌，不写死颜色：本站有换肤（D 版「苔原·森系」），
* 硬编码色不跟 var() 走，换肤后这一屏就会成为唯一的「异色区」。
* ★ 有效性 / 提醒三种状态必须**色相 + 文字**双通道：只靠颜色区分，
* 在色弱与灰度打印下就变成三个一样的圆角块。
* ============================================================ */
.st-chips {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin: 2px 0 10px;
}
.st-chip {
border: 1px solid var(--border); background: var(--surface);
color: var(--text); border-radius: 999px; padding: 5px 13px;
font-size: 12.5px; cursor: pointer; transition: all .16s ease;
}
.st-chip:hover { border-color: var(--primary); color: var(--primary); }
.st-chip.active {
background: var(--primary); border-color: var(--primary);
color: var(--surface); font-weight: 700;
}
.st-chip b { font-weight: 800; }
.st-pill { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.st-pill-ok { background: var(--ok-bg); color: var(--ok); }
.st-pill-bad { background: var(--danger-bg); color: var(--danger); }
.st-pill-warn { background: var(--warn-bg); color: var(--warn); }
.st-pill-unk { background: var(--surface-2); color: var(--text-dim); border: 1px dashed var(--border); }
.st-table .st-bodyclamp {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; max-width: 520px; margin-top: 2px;
}
.st-table tr.st-row-on { background: var(--surface-2); }
.st-table tr.st-row-on td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.st-tag-mini {
font-size: 10.5px; padding: 1px 6px; border-radius: 5px; margin-left: 6px;
background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border);
}
.st-stat-foot {
flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.st-tag {
display: inline-block; padding: 2px 9px; border-radius: 11px; margin: 2px 6px 2px 0;
background: var(--surface-2); color: var(--text); font-size: 12px;
}
.st-tag-risk { background: var(--warn-bg); color: var(--warn); }
.st-detail {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px 18px; margin: 0 0 14px;
box-shadow: var(--shadow);
}
.st-dhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.st-dhead-right { display: flex; align-items: center; gap: 6px; flex: none; }
.st-body {
white-space: pre-wrap; line-height: 1.85; font-size: 13.5px;
background: var(--surface-2); border-left: 3px solid var(--primary);
border-radius: 8px; padding: 12px 14px; margin: 12px 0;
}
.st-banner {
border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin: 10px 0;
border-left: 3px solid currentColor;
}
.st-banner-bad { background: var(--danger-bg); color: var(--danger); }
.st-banner-warn { background: var(--warn-bg); color: var(--warn); }
.st-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px 20px; margin: 6px 0 12px;
}
.st-kv { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; }
.st-kv > span:first-child {
color: var(--text-dim); flex: 0 0 76px; text-align: right; white-space: nowrap;
}
.st-kv b { font-weight: 600; word-break: break-all; }
.st-kv-wide { grid-column: 1 / -1; }
.st-kv-wide > div { flex: 1; }
.st-check {
border: 1px solid var(--border); border-radius: 10px;
padding: 10px 14px 12px; margin: 10px 0;
}
.st-check legend { font-size: 12.5px; font-weight: 700; padding: 0 6px; }
.st-check-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px;
}
.st-check-row label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.st-check-row .st-inline { color: var(--text-dim); font-size: 12px; }
.st-check-reason { margin-top: 8px; }
.st-actions {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--border);
}
.st-err {
background: var(--danger-bg); color: var(--danger);
border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin: 8px 0;
}
.st-err:empty { display: none; }
.st-form {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 10px 16px; margin-top: 10px;
}
.st-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-dim); }
.st-form .st-form-wide { grid-column: 1 / -1; }
.st-ta {
width: 100%; border: 1px solid var(--border); border-radius: 8px;
padding: 8px 10px; font-size: 13px; font-family: inherit;
background: var(--surface); color: var(--text); resize: vertical;
}
.st-changes { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); }
.st-changes-title { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.st-changes-table { font-size: 12px; }
.st-diff { display: inline-block; margin-right: 12px; }
.st-diff i { font-style: normal; color: var(--text-dim); margin-right: 4px; }
.st-diff b { color: var(--primary); }
@media (max-width: 720px) {
.st-table .st-bodyclamp { max-width: 220px; }
.st-kv > span:first-child { flex-basis: 62px; }
}
/* ============================================================
* V4.93（OR-I5）标准库数据质检
* ★ 只用主题令牌，不写死颜色：V4.84 的教训是硬编码色不跟 :root 走，
* 换肤后会出现「卡片还是旧配色、文字对比度掉到不可读」。
* ============================================================ */
.li-notes { margin: 0 0 10px; }
.li-notes > summary { cursor: pointer; padding: 4px 0; }
.li-notes > ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.7; }
.li-grid {
display: grid; gap: 10px; margin-bottom: 14px;
grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.li-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 10px 12px;
display: flex; flex-direction: column; gap: 6px;
}
.li-card.is-on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--surface-2); }
.li-card.is-off { opacity: 0.62; }
.li-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.li-card-hd b { font-size: 13.5px; }
.li-card-nums { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-dim); }
.li-card-nums b { font-size: 17px; color: var(--text); }
.li-card-nums b.li-n-bad { color: var(--danger); }
.li-card-hint { line-height: 1.5; min-height: 2.6em; }
.li-card .btn { align-self: flex-start; }
.li-warn {
background: var(--warn-bg); border: 1px solid var(--warn);
border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px;
font-size: 12.5px; line-height: 1.7; color: var(--text);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.li-warn b { color: var(--warn); }
.li-strip {
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px;
font-size: 12.5px; line-height: 1.7;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.li-strip-warn { color: var(--warn); }
.li-strip-bad { color: var(--danger); }
.li-table { font-size: 12.5px; }
.li-table th { white-space: nowrap; }
.li-table.is-dense td, .li-table.is-dense th { padding: 6px 9px; }
/* ---------- V4.94（OR-E7）字段抽取模板 ---------- */
/* 内置别名做成可换行的 chips 区：一屏能扫完几十条，比一行逗号串好核「是不是已经有了」。 */
.tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tpl-chips .pill { font-size: 12px; }
/* 预览区用左边框与上面几段隔开：它读的是「粘贴进来的文本」，不是库里的数据。 */
.tpl-prev { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--border); }
.tpl-prev textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
/* ============================================================
* V4.101 · 案件详情「🏦 流水核查」
* ------------------------------------------------------------
* ★★★ 配色是**判据的一部分**，不是装饰：
* · 银行侧 verified → 绿（唯一的正向证据）
* · 银行侧 not_found → 中性灰（原因不可知；画成红色＝把 OCR 错字当伪造）
* · 账目 fail → 红（材料自己算不平，可指到具体行，可复核）
* · unknown → 空心灰（「没算」不是「通过」）
* ============================================================ */
.bv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px; margin-bottom: 12px; }
.bv-top-main h3 { margin: 0 0 4px; font-size: 16px; }
.bv-headline { color: var(--text-dim); font-size: 13px; margin: 0; }
.bv-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.bv-sum-cell { flex: 1 1 96px; background: var(--card); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 12px; }
.bv-sum-n { font-size: 20px; font-weight: 600; line-height: 1.2; }
.bv-sum-k { font-size: 12px; color: var(--text-dim); }
.bv-sum-cell.is-ok .bv-sum-n { color: var(--ok); }
.bv-sum-cell.is-bad .bv-sum-n { color: var(--danger); }
.bv-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
padding: 16px; margin-bottom: 12px; }
.bv-head { padding-bottom: 10px; border-bottom: 1px dashed var(--border); }
.bv-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bv-file { font-weight: 600; }
.bv-bank { font-size: 12px; padding: 2px 8px; border-radius: 999px;
background: var(--surface-2); color: var(--text-dim); }
.bv-meta { margin-top: 6px; font-size: 12px; color: var(--text-dim); line-height: 1.9; }
.bv-infer { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px;
font-size: 11px; border: 1px dashed var(--warn); color: var(--warn); cursor: help; }
.bv-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px;
border: 1px solid transparent; white-space: nowrap; }
.bv-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
/* 中性：未命中与未能查询都不该有告警腔 */
.bv-neutral { background: var(--surface-2); color: var(--text-dim); border-color: var(--border); }
.bv-idle { background: var(--surface-2); color: var(--text-dim); border-color: var(--border);
border-style: dashed; }
.bv-bad { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.bv-sec { margin-top: 12px; }
.bv-sec-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.bv-evi, .bv-counts { font-weight: 400; font-size: 12px; color: var(--text-dim); }
.bv-reason { font-size: 13px; margin: 4px 0; }
.bv-note, .bv-req, .bv-last { font-size: 12px; color: var(--text-dim); margin: 6px 0; }
.bv-warn-neutral { font-size: 12.5px; margin: 6px 0; padding: 8px 10px; border-radius: 8px;
background: var(--surface-2); border-left: 3px solid var(--border-strong, var(--border));
color: var(--text); }
.bv-miss { font-size: 12px; margin: 6px 0; color: var(--danger); }
.bv-miss-i { display: inline-block; margin: 0 4px 4px 0; padding: 1px 7px; border-radius: 4px;
background: var(--danger-bg); }
.bv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.bv-copy { width: 100%; margin-top: 6px; font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 12px; }
.bv-boundary { font-size: 11.5px; color: var(--text-dim); margin: 6px 0 0;
padding-left: 10px; border-left: 3px solid var(--warn); }
.bv-tbl-wrap { overflow-x: auto; margin: 6px 0; }
.bv-tbl { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.bv-tbl th, .bv-tbl td { border: 1px solid var(--border); padding: 6px 8px; text-align: left;
white-space: nowrap; }
.bv-tbl th { background: var(--surface-2); font-weight: 600; }
.bv-checks { list-style: none; margin: 0; padding: 0; }
.bv-check { display: grid; grid-template-columns: 76px 1fr; gap: 4px 10px;
padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.bv-check:last-child { border-bottom: 0; }
.bv-check-tag { font-size: 11px; text-align: center; border-radius: 4px; padding: 1px 0;
height: 20px; line-height: 18px; }
.bv-check-ok .bv-check-tag { background: var(--ok-bg); color: var(--ok); }
.bv-check-bad .bv-check-tag { background: var(--danger-bg); color: var(--danger); }
.bv-check-unk .bv-check-tag { background: var(--surface-2); color: var(--text-dim);
border: 1px dashed var(--border); }
.bv-check-label { color: var(--text); }
.bv-check-detail { grid-column: 2; color: var(--text-dim); font-size: 12px; }
.bv-foot { padding: 12px 4px 4px; font-size: 12px; color: var(--text-dim); }
.bv-foot-2 { margin-top: 4px; opacity: .85; }
.bv-switch-off { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px;
background: var(--warn-bg); color: var(--text); border-left: 3px solid var(--warn); }
.bv-manual { margin-top: 12px; padding: 14px; border-radius: 10px;
border: 1px solid var(--border-strong, var(--border)); background: var(--surface); }
.bv-manual-h { font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.bv-manual-row { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px; }
.bv-manual-row select, .bv-manual-row textarea { display: block; width: 100%; margin-top: 4px;
font-size: 13px; color: var(--text); }
.bv-manual-err { color: var(--danger); font-size: 12px; min-height: 16px; }
.bv-last-stale { color: var(--warn); }
/* ============================================================
* V4.102a（P0-2）清单截断提示
* ------------------------------------------------------------
* ★ 配色即判据：这是「还有更多，你没看到」，不是「出错了」，
* 所以用 warn 而不是 danger —— 标成红色会让人以为加载失败并反复刷新，
* 而刷新永远拉不出第 201 件。
* ============================================================ */
.list-trunc-hint { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px;
font-size: 12.5px; line-height: 1.6;
background: var(--warn-bg); color: var(--text);
border-left: 3px solid var(--warn); }
|