/* ==================== 版式变量（管理员可在页面上调，全公司生效） ====================
   默认值就是原来的外观：不调、库里没存时，页面跟以前一模一样。
   改版式走 ui_settings 表注入，不用改 CSS、不用重启。 */
:root {
  --card-pad: 12px;
  --card-gap: 10px;
  --card-radius: 9px;
  --card-cols: 1;
  --grid-cols: 3;
  --dcard-min: 215px;
  --fs-base: 14px;
  --fs-title: 14.5px;
  --fs-meta: 12.5px;
  --brand: #1d4ed8;
  --brand-dark: #1e40af;
  --card-shadow: 0 3px 12px rgba(15,23,42,.13);
  --ops-show: block;

  /* ---- 原型色板（对照「界面简洁化_卡片式样板」，2026-10-15 统一全站） ---- */
  --bg: #c4cedb;         /* 页面底：2026-10-29 再压深一档——卡片像白纸贴在桌面上 */
  --surface: #fff;
  --border: #8b9aae;      /* 卡片边框：跟底色拉开明显色阶，轮廓一眼可辨 */
  --line: #c9d6e6;       /* 分隔线：比卡片边框深一档、偏蓝，专门用来分板块 */
  --text: #1f2937;       /* 正文：近黑，白底对比度 12:1 */
  --text2: #55637a;      /* 次要：7:1 */
  --text3: #6b7a8d;      /* 最弱：4.6:1，仍达 AA（原来 #94a3b8 只有 2.8:1，发虚） */
  --brand-soft: #eef4ff;
  /* 状态色：浅底 + 深色字，一律成对使用，不再拿彩色字直接压白底 */
  --g-bg: #f1f5f9; --g-fg: #475569;
  --b-bg: #eef4ff; --b-fg: #1d4ed8;
  --r-bg: #fef2f2; --r-fg: #b91c1c;
  --k-bg: #f0fdf4; --k-fg: #15803d;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
  background: #f1f5f9; color: #1e293b; font-size: var(--fs-base); line-height: 1.6;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  background: #0f172a; color: #fff; padding: 0 24px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50;
}
.topbar .brand { font-size: 16px; font-weight: bold; letter-spacing: .5px; }
.topbar .brand span { color: #60a5fa; }
.topbar .user { font-size: 13px; color: #cbd5e1; display: flex; align-items: center; gap: 14px; }
.topbar .user b { color: #fff; }
.topbar .user a { color: #93c5fd; }

.layout { display: flex; min-height: calc(100vh - 56px); }
.sidebar {
  width: 208px; background: #fff; border-right: 1px solid #e2e8f0; padding: 14px 0;
  flex-shrink: 0;
}
.sidebar a {
  display: block; padding: 9px 20px; color: #334155; font-size: 13.5px;
  border-left: 3px solid transparent;
}
.sidebar a:hover { background: #f8fafc; text-decoration: none; }
.sidebar a.active { background: #eff6ff; color: var(--brand-dark); border-left-color: var(--brand); font-weight: bold; }
.sidebar .grp { padding: 12px 20px 4px; font-size: 11.5px; color: #94a3b8; letter-spacing: 1px; }

.main { flex: 1; padding: 22px 26px 60px; max-width: 1500px; }
h1.page { font-size: 20px; margin-bottom: 4px; }
.sub { color: #64748b; font-size: 13px; margin-bottom: 18px; }

.card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: calc(var(--card-radius) + 1px);
  padding: calc(var(--card-pad) + 4px) calc(var(--card-pad) + 6px);
  margin-bottom: calc(var(--card-gap) + 6px);
}
.card h2 { font-size: 30px; line-height: 1.3; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card h2 .cnt { font-size: 15px; color: #fff; background: #64748b; border-radius: 10px; padding: 2px 10px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr);
         gap: calc(var(--card-gap) + 4px); margin-bottom: 18px; }
.stat { background: #fff; border: 1px solid #e2e8f0; border-radius: calc(var(--card-radius) + 1px);
        padding: calc(var(--card-pad) + 2px) calc(var(--card-pad) + 4px); }
.stat .n { font-size: 26px; font-weight: bold; color: #1d4ed8; }
.stat .l { font-size: 12.5px; color: #64748b; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border: 1px solid #e2e8f0; padding: 7px 9px; text-align: left; vertical-align: top; }
th { background: #f1f5f9; font-weight: bold; font-size: 12.5px; color: #475569; }
tr:hover td { background: #f8fafc; }

/* ---------- 到货验收 / 收货台账：明细逐物料对齐（一行一物料） ---------- */
.btable { width: 100%; font-size: 13px; table-layout: fixed; }
.btable th { white-space: nowrap; }
.btable td { vertical-align: top; }
.btable td.ops { white-space: normal; }
.btable table.sub { width: 100%; border: 0; font-size: 12.5px; }
.btable table.sub th { background: #f8fafc; color: #475569; font-size: 11.5px;
                       padding: 3px 6px; white-space: nowrap; }
.btable table.sub td { border: 0; border-bottom: 1px dashed #eef2f7; padding: 3px 6px; }
.btable table.sub tr:last-child td { border-bottom: 0; }
.btable table.sub td.mname { color: #0f172a; }
.btable table.sub td.num { text-align: right; white-space: nowrap; }
.btable table.sub td.rin input { width: 100%; min-width: 64px; padding: 3px 6px;
                                 text-align: right; font-size: 12.5px; }
.btable table.sub tfoot td { border-top: 1px solid #e2e8f0; font-weight: 600; background: #f8fafc; }
.btable .dn { width: 100%; padding: 4px 6px; font-size: 12.5px; }
.btable .btn.sm { width: 100%; margin-top: 4px; }

/* ---------- 收货 / 检验工作台（一卡一批次，按状态分栏） ---------- */
.wbstat { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.wbstat .s { border: 1px solid #e2e8f0; border-radius: 6px; padding: 5px 12px;
             font-size: 12.5px; background: #f8fafc; color: #334155; }
.wbstat .s b { font-size: 14px; color: #0f172a; }
.wbsection { margin-top: 16px; }
.wbsection h2 { font-size: 14.5px; margin: 0 0 8px; }
.wbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.wbcard { border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; background: #fff;
          border-top: 3px solid #0ea5e9; }
.wbcard.done { background: #f8fafc; border-top-color: #16a34a; }
.wbhead { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.wbmeta { font-size: 12px; color: #475569; margin: 5px 0 7px; line-height: 1.6; }
.wbcard table.sub { width: 100%; border: 0; font-size: 12.5px; border-collapse: collapse; }
.wbcard table.sub th { background: #f8fafc; color: #475569; font-size: 11.5px;
                       padding: 3px 6px; white-space: nowrap; }
.wbcard table.sub td { border: 0; border-bottom: 1px dashed #eef2f7; padding: 3px 6px; }
.wbcard table.sub tr:last-child td { border-bottom: 0; }
.wbcard table.sub td.num { text-align: right; white-space: nowrap; }
.wbcard table.sub td.rin input { width: 100%; min-width: 56px; padding: 2px 4px;
                                 text-align: right; font-size: 12.5px; }
.wbcard table.sub tfoot td { border-top: 1px solid #e2e8f0; font-weight: 600; background: #f8fafc; }
.wbops { margin-top: 8px; }
.wbops .btn.sm { width: 100%; margin-top: 4px; }
.wbops .dn { width: 100%; padding: 4px 6px; font-size: 12.5px; margin-bottom: 4px; }
.wbops .qcr { font-size: 12.5px; line-height: 1.6; }
.wbsrc { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #e2e8f0;
         font-size: 11.5px; color: #64748b; }

.tag { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11.5px; margin: 1px 3px 1px 0; white-space: nowrap; }
/* 步骤卡里的「输入 / 应产出」名单：一行素字，顿号分开。
   2026-10-30 郑总：原先套的是上面那种带底色的圆角胶囊，他叫「气泡字」——
   一张卡里五六颗泡泡，看着比步骤标题还抢眼，也分不清是名单还是能点的按钮。
   名单是次要信息，回归普通文字；只有「状态」这类真正要看一眼的东西才用胶囊。 */
.ioflat { margin: 2px 0; font-size: 12.5px; line-height: 1.7; color: #475569; }
.ioflat b { font-weight: 600; color: #334155; }
.tag.in { background: #dbeafe; color: #1d4ed8; }
.tag.out { background: #dcfce7; color: #15803d; }
.tag.gap { background: #fef2f2; color: #dc2626; font-weight: bold; }
.tag.dept { background: #f1f5f9; color: #475569; }
.tag.st { background: #e0e7ff; color: #3730a3; }
.tag.admin { background: #ede9fe; color: #6d28d9; font-weight: bold; }
.st-doing { background: #fef3c7; color: #92400e !important; }
.st-review { background: #dbeafe; color: #1d4ed8 !important; }
.st-done2 { background: #dcfce7; color: #15803d !important; }
/* 台账「附件状态」分栏目显示（2026-10-10）：每个栏目一列，圆点 + 文字。
   灰=未上传、蓝=待审核、红=已退回、绿=已受控（颜色跟上面的 tag 一致）。 */
.fstat { white-space: nowrap; font-size: 12px; color: #475569; }
.fstat i { display: inline-block; width: 11px; height: 11px; border-radius: 50%;
           margin-right: 5px; vertical-align: -1px;
           box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(15, 23, 42, .07); }
.fstat.gray i { background: #94a3b8; }
.fstat.blue i { background: #1d4ed8; }
.fstat.red i { background: #dc2626; }
.fstat.green i { background: #15803d; }
.fstat.red { color: #b91c1c; }

.btn {
  display: inline-block; padding: 6px 14px; border-radius: 7px; border: 1px solid #cbd5e1;
  background: #fff; color: #334155; cursor: pointer; font-size: 13px; font-family: inherit;
}
.btn:hover { background: #f8fafc; text-decoration: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn.sm { padding: 3px 10px; font-size: 12px; }

input[type=text], input[type=password], input[type=file], textarea, select {
  width: 100%; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 7px;
  font-family: inherit; font-size: 13.5px; background: #fff;
}
textarea { min-height: 84px; resize: vertical; }
label { font-size: 13px; color: #475569; }
.field { margin-bottom: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* 卡片列表容器：列数由 --card-cols 决定（管理员可调 1~4 列） */
.ui-cards { display: grid; grid-template-columns: repeat(var(--card-cols), minmax(0, 1fr));
            gap: var(--card-gap); align-items: start; }
.flowcard {
  border: 1px solid #e2e8f0; border-left: 4px solid var(--brand); border-radius: var(--card-radius);
  padding: var(--card-pad) calc(var(--card-pad) + 3px);
  margin-bottom: var(--card-gap); background: #fff;
}
.ui-cards .flowcard { margin-bottom: 0; }   /* 进网格后间距交给 gap */
.flowcard:hover { box-shadow: var(--card-shadow); }
.flowcard .t { font-weight: bold; font-size: var(--fs-title); }
.flowcard .m { font-size: var(--fs-meta); color: #64748b; margin-top: 3px; }
/* 2026-11-09 郑总：台账表格最右「操作」列格子比左边矮一截、中间多一道横线、
   还有重线感——这条规则本来是控制卡片上按钮组显隐的，却连带命中了
   <div class="card"> 包裹的台账表格里的 <td class="ops">：单元格被改成
   block，不再随行拉伸、边框自己单独画一圈。排除 td（表格单元格保持
   table-cell）。 */
.flowcard .ops:not(td), .card .ops:not(td), .stepcard .ops:not(td) { display: var(--ops-show); }
.book-grp h3 { font-size: 14px; margin: 18px 0 8px; color: #0f172a; }
.book-grp h3 span { font-size: 12px; color: #64748b; font-weight: normal; }

.stepcard { border: 1px solid #e2e8f0; border-radius: var(--card-radius);
            padding: var(--card-pad) calc(var(--card-pad) + 3px);
            margin-bottom: calc(var(--card-gap) - 2px); background: #fff; }
.stepcard.current { border-color: #2563eb; border-width: 2px; background: #f8fbff; }
.stepcard.review { border-color: #f59e0b; border-width: 2px; background: #fffdf5; }
/* 已完成步骤：暖黄底色，提示"已完结不必再操作"，与 current（蓝）/review（米黄）区分明显（2026-10-16） */
.stepcard.done { background: #fff7e1; border-color: #f0c674; }
.stepcard.done > summary.hd { background: #fff3cf; border-radius: 6px; }
/* 步骤卡抬头分两行：
   第 1 行——标题独占用、整行居中（右边不放任何东西，长标题也不会像被推到右边）；
   第 2 行——左边部门 / 输入 / 产出，右边状态块（进行中 / 已完成 + 「点击展开」）。
   之前标题和状态块挤一行时，标题一长右端就顶到状态块，看着像没居中。 */
.stepcard .hd { display: block; }
.stepcard .act { text-align: center; font-weight: bold; font-size: 17px; line-height: 1.45; }
.stepcard .hdline { display: flex; justify-content: space-between; align-items: flex-start;
                    gap: 10px; margin-top: 6px; }
.stepcard .hdline > .mt { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.stepcard .hdline > .hd-r { flex: 0 0 auto; text-align: right; }
/* 「为什么加这一步」那行红字常常很长（一两百字）：tag 默认不换行会横着顶出去，
   压到右边状态块底下。这里允许换行，宽度跟着左边这列走 */
.stepcard .hdline .tag.gap { white-space: normal; }
.stepcard .mt { margin-top: 6px; font-size: 12.5px; }
.stepcard .mt .lbl { color: #94a3b8; }

.timeline { border-left: 2px solid #e2e8f0; margin: 8px 0 0 6px; padding-left: 14px; }
.timeline .item { position: relative; padding-bottom: 8px; font-size: 12.5px; }
.timeline .item:before {
  content: ''; position: absolute; left: -20px; top: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: #94a3b8;
}
.timeline .item.submit:before { background: #2563eb; }
.timeline .item.approve:before { background: #16a34a; }
.timeline .item.reject:before { background: #dc2626; }
.timeline .item.start:before { background: #0f172a; }
.timeline .who { font-weight: bold; }
.timeline .tm { color: #94a3b8; margin-left: 6px; }

.progress { height: 8px; background: #e2e8f0; border-radius: 6px; overflow: hidden; margin: 8px 0 14px; }
.progress > div { height: 100%; background: linear-gradient(90deg,#3b82f6,#22c55e); }

.flash { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 9px 14px;
         border-radius: 8px; margin-bottom: 14px; font-size: 13px; }
.warn { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 9px 14px;
        border-radius: 8px; margin-bottom: 12px; font-size: 13px; }
.note { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 10px 13px;
        font-size: 12.5px; color: #475569; margin-bottom: 12px; }
.checkline { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 13px; }
.checkline input { width: auto; }
.legend { font-size: 12px; color: #64748b; margin-bottom: 12px; }
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh;
              background: linear-gradient(135deg,#0f172a,#1e3a8a); }
.login-box { background: #fff; border-radius: 14px; padding: 32px 34px; width: 380px; }
.login-box h1 { font-size: 19px; margin-bottom: 4px; }
.login-box .sub { margin-bottom: 18px; }
.login-box .tip { font-size: 12px; color: #94a3b8; margin-top: 14px; line-height: 1.8; }
.inline { display: inline; }
.muted { color: #94a3b8; font-size: 12.5px; }
@media (max-width: 900px) {
  .sidebar { display: none; } .stats { grid-template-columns: repeat(2, 1fr); }
  .row2 { grid-template-columns: 1fr; } .main { padding: 14px; }
}

/* ---------- 发起表单 ---------- */
.frm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.fi { display: flex; flex-direction: column; gap: 4px; }
.fi.span2 { grid-column: 1 / -1; }
/* 2026-11-03：流程定义里写 cols:4 的，基本信息一行摆 4 个小格（异常描述等大框照样整行）。
   品质异常整合 F4-14 就是这么排的：环节 / 单号 / 型号 / 数量 一行，地点 / 设备 …，
   描述单独整行——主管一眼扫完再决定停不停线。 */
.frm.cols4 { grid-template-columns: repeat(4, 1fr); }
.frm.cols4 .fi.span2 { grid-column: span 2; }
.frm.cols4 .fi.span4 { grid-column: 1 / -1; }
.frm.cols4 .fi textarea { min-height: 96px; }
.fi .hint { font-size: 12px; color: #94a3b8; line-height: 1.5; }
.fi label { font-size: 13px; color: #475569; }
.req { color: #dc2626; margin-left: 3px; font-weight: bold; }
.auto { background: #dcfce7; color: #15803d; font-size: 11px; border-radius: 10px; padding: 1px 8px; margin-left: 7px; }
input[readonly] { background: #f8fafc; color: #64748b; }

/* ---------- 一键发起（业务场景） ---------- */
.triggers { display: grid; grid-template-columns: repeat(var(--grid-cols), 1fr);
            gap: calc(var(--card-gap) + 1px); }
.trigger {
  border: 1px solid #e8edf3; border-left: 3px solid #93c5fd; border-radius: 8px;
  padding: 9px 11px; background: #fff; display: block;
}
.trigger:hover { background: #f8fbff; border-left-color: #2563eb; text-decoration: none; }
.trigger .tn { font-weight: 600; font-size: 13px; color: #1e293b; }
.trigger .td2 { font-size: 11.5px; color: #94a3b8; margin-top: 2px; line-height: 1.45; }
.trigger .tc { font-size: 10.5px; color: #b8c2cd; margin-top: 4px; }
/* 步骤展开后的完整说明：收起时步骤条只有一句摘要，办这一步的人展开才看全 */
.stepdesc {
  background: #f8fafc; border: 1px solid #e8edf3; border-radius: 7px;
  padding: 8px 11px; margin-bottom: 9px; font-size: 12.5px;
  color: #475569; line-height: 1.65;
}
.stepdesc .lbl { color: #94a3b8; }
.tgrp { margin-bottom: 12px; }
/* 分组标题做轻：去掉蓝竖线，只留淡字 + 淡计数，别和卡片的色条抢眼 */
.tgrp h3 {
  font-size: 12.5px; color: #64748b; font-weight: 600; margin: 0 0 7px; line-height: 1.2;
}
.tgrp h3 .tgc {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: #f1f5f9; color: #94a3b8; font-size: 11px; font-weight: normal;
}

/* ---------- 发起工作台：按账号部门 ---------- */
/* 状态条做轻：原来是白卡+蓝色粗左线，和下面的分组标题、场景卡又各有一条蓝线，三层蓝边叠着很吵 */
.wtbar {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between;
  background: #f8fafc; border: 0; border-radius: 9px; padding: 8px 13px; margin-bottom: 9px;
}
.wtdept { font-size: 14px; font-weight: bold; color: #0f172a; }
.wtdept:before { content: "▍"; color: #2563eb; margin-right: 5px; }
.wtsub { font-size: 12px; color: #64748b; margin-left: 8px; }
.wtscope { white-space: nowrap; }
.chip {
  display: inline-block; padding: 3px 12px; border-radius: 999px; border: 1px solid #e2e8f0;
  background: #f8fafc; color: #475569; font-size: 12.5px; margin: 0 4px 4px 0; cursor: pointer;
}
.chip:hover { background: #eff6ff; border-color: #bfdbfe; text-decoration: none; }
.chip.on { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: bold; }
.chip.sm { font-size: 11.5px; padding: 2px 10px; }
.deptbar { margin-bottom: 10px; font-size: 11.5px; color: #94a3b8; }
.deptbar .dl { margin-right: 3px; }
.deptbar .chip { font-size: 11.5px; padding: 2px 10px; background: #fff; }
/* 状态条里两行：范围切换（我的部门/全部部门）+ 部门切换，同属一块不再各占一块 */
.wtline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.wtscope { margin-left: auto; white-space: nowrap; }
.wtbar .deptbar { margin: 0; }
/* 我最近发起：压成一行快捷链接，不再占一整块卡片 */
.recentline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 9px; font-size: 12px; color: #94a3b8;
}
.rchip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 11.5px;
}
.rchip:hover { background: #eff6ff; border-color: #bfdbfe; text-decoration: none; }
.rchip .rn { margin-left: 5px; color: #b8c2cd; font-size: 10.5px; }
h2.sec { font-size: 15px; margin: 18px 0 10px; color: #0f172a; }
/* 本部门卡：只留绿左边，不再整块铺绿底（一排绿块最晃眼） */
.trigger.mine { border-left-color: #16a34a; }
.trigger.mine:hover { border-left-color: #15803d; }
.mebadge {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: #dcfce7; color: #15803d; font-size: 10.5px; font-weight: normal; vertical-align: 1px;
}
/* 场景卡压成两行：描述 + 编号/次数同一行（编号靠右，不另起一行） */
.trigger .td2 { display: flex; gap: 8px; align-items: baseline; }
.trigger .td2 .td { flex: 1; min-width: 0; }
.trigger .td2 .tc { margin-top: 0; white-space: nowrap; }
.triggers.mini { grid-template-columns: repeat(4, 1fr); }
details.others {
  border: 1px solid #e2e8f0; border-radius: 9px; background: #fff;
  padding: 11px 14px; margin: 16px 0 18px;
}
details.others > summary { cursor: pointer; font-size: 13.5px; font-weight: bold; color: #475569; }
details.others[open] > summary { margin-bottom: 13px; }
/* 流程编号索引：同一批流程在场景卡里已经有了，这里默认收起，要用再点开 */
details.flib {
  border: 1px solid #e2e8f0; border-radius: 9px; background: #fff;
  padding: 10px 13px; margin-top: 14px;
}
details.flib > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: #64748b; }
details.flib[open] > summary { margin-bottom: 11px; }
.empty { color: #64748b; font-size: 13px; line-height: 2; }

@media (max-width: 1100px) { .triggers { grid-template-columns: repeat(2, 1fr); }
  .triggers.mini { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .triggers { grid-template-columns: 1fr; }
  .frm { grid-template-columns: 1fr; }
}

/* ---------- 记录编号 / 键值表 / 柱图 ---------- */
.code {
  font-family: Consolas, Menlo, monospace; font-size: 12px; background: #f1f5f9;
  border-radius: 5px; padding: 1px 7px; color: #0f172a; white-space: nowrap;
}
.kv { width: 100%; font-size: 13px; }
.kv th { width: 200px; background: #f8fafc; color: #475569; }
.mini { font-size: 12.5px; color: #64748b; }
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filterbar select, .filterbar input { width: auto; min-width: 128px; }
.bars { display: flex; align-items: flex-end; gap: 12px; height: 132px; padding: 4px 0 0; }
.bars .b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bars .b i { display: block; width: 100%; min-height: 2px; background: linear-gradient(180deg, #93c5fd, #2563eb); border-radius: 4px 4px 0 0; }
.bars .b span { font-size: 11px; color: #64748b; }

@media (max-width: 1100px) { .triggers { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 部门工作项（原「部门流程」改造） ---------- */
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--dcard-min), 1fr));
         gap: calc(var(--card-gap) + 2px); margin-bottom: 18px; }
.dcard { display: block; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #0f766e;
         border-radius: var(--card-radius); padding: var(--card-pad) calc(var(--card-pad) + 2px);
         color: inherit; }
.dcard:hover { box-shadow: var(--card-shadow); text-decoration: none; }
.dcard .t { font-weight: bold; font-size: var(--fs-title); }
.dcard .n { font-size: 19px; font-weight: bold; color: #0f766e; }
.dcard .m { font-size: var(--fs-meta); color: #64748b; margin-top: 4px; }

.grp-hd { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 14px; font-weight: bold; color: #0f172a; }
.grp-hd .c { font-size: 12px; font-weight: normal; color: #64748b; }
.grp-hd::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: #0f766e; }

.item { border: 1px solid #e2e8f0; border-radius: 9px; padding: 12px 15px; margin-bottom: 9px; background: #fff; }
.item.pend { border-style: dashed; border-color: #fca5a5; background: #fffbfb; }
.item .hd { display: flex; align-items: flex-start; gap: 8px; }
.item .no { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px; background: #f1f5f9;
            color: #475569; font-size: 12px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.item .ti { font-weight: bold; font-size: 13.8px; flex: 1; line-height: 1.5; }
.item .fl { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.item .io { margin-top: 7px; font-size: 12px; color: #475569; line-height: 1.7; }
.item .io b { color: #94a3b8; font-weight: normal; margin-right: 4px; }
.item .nt { margin-top: 6px; font-size: 12px; color: #b45309; }

.fwrap { border: 1px solid #bfdbfe; border-left: 4px solid #2563eb; border-radius: 9px;
         padding: 12px 15px; margin-bottom: 10px; background: #f8fbff; }
.fwrap .cov { margin-top: 9px; padding-top: 8px; border-top: 1px dashed #cbd5e1; font-size: 12.5px; color: #475569; }
.fwrap .cov span { display: inline-block; background: #eef2ff; color: #3730a3; border-radius: 5px;
                   padding: 1px 6px; margin: 2px 4px 2px 0; font-size: 11.5px; }
.fwrap .cov em { font-style: normal; color: #94a3b8; }

.exnote { background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px; padding: 12px 15px;
          font-size: 13px; color: #78350f; margin-bottom: 16px; line-height: 1.7; }
.exnote b { color: #92400e; }

/* 侧栏待建流程角标 */
.badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
         background: #fef2f2; color: #dc2626; font-size: 11px; font-weight: bold;
         border: 1px solid #fecaca; vertical-align: 1px; }
/* 程序文件卡片中"尚无流程"的提示行 */
.dcard .m b { color: #334155; }

/* ==================== 文件表单库 v2：页签 · 上传 · 版本 ==================== */
.libtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
/* 主数据台账按部门分堆（2026-11-03 郑总）：一组一行，组名在前面当小标题 */
.libbox { margin: 0 0 14px; }
.libgroup { margin: 0 0 11px; padding-left: 78px; position: relative; }
.libgroup .libgt { position: absolute; left: 0; top: 5px; width: 72px; font-size: 12px;
                   font-weight: 600; color: #64748b; letter-spacing: .3px; }
.libgroup .libgt .cnt { display: block; font-weight: 400; color: #94a3b8; }
@media (max-width: 720px) {
  .libgroup { padding-left: 0; }
  .libgroup .libgt { position: static; width: auto; margin: 0 0 5px; }
  .libgroup .libgt .cnt { display: inline; margin-left: 5px; }
}
.libsearch { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; max-width: 620px; }
.libsearch input[type=text] { flex: 1; }

.edate { font-size: 10px; }
.iofilter { display: flex; gap: 8px; margin-bottom: 12px; }

.ops { white-space: nowrap; }
.ops > .btn, .ops > details { display: inline-block; vertical-align: top; margin: 1px 1px 1px 0; }
details.up { display: inline-block; }
details.up > summary { display: inline-block; cursor: pointer; list-style: none; }
details.up > summary::-webkit-details-marker { display: none; }
details.up[open] > summary { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }

details.upbox { margin-bottom: 16px; }
details.upbox > summary { display: inline-block; cursor: pointer; list-style: none; }
details.upbox > summary::-webkit-details-marker { display: none; }
details.upbox[open] > summary { background: #1d4ed8; }

.upform { margin-top: 10px; padding: 13px 15px; background: #f8fafc;
          border: 1px solid #e2e8f0; border-radius: 9px; }
.upform .field { margin-bottom: 9px; }
.upform label { display: block; margin-bottom: 3px; }
.upform input[type=text] { width: 100%; max-width: 520px; }
.ops .upform { position: absolute; z-index: 20; width: 330px; box-shadow: 0 6px 20px rgba(15,23,42,.14); }
/* 2026-11-09 郑总：台账表格最右「操作」列的格子比左边矮一截、中间多一道横线、
   还有重线感。根因：proto.css 有全局 `.ops{display:none}`（列表项 hover 才出
   操作按钮那套），之前靠 `.card .ops{display:block}` 对抗——可台账表格就在
   <div class="card"> 里，于是 <td class="ops"> 被改成了 block：不再按行拉伸、
   边框自己画一圈（上面那条 .card .ops:not(td) 已把卡片规则限定到非表格）。
   表格单元格这里显式弹回 table-cell，操作列永远跟着行高走。 */
td.ops { display: table-cell; position: relative; }
code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* 通用兜底模板标签（无专用表单的输入输出） */
.tag.gen { background: #f1f5f9; color: #64748b; }
.tag.gen:after { content: "通用"; font-size: 10px; margin-left: 3px; opacity: .75; }
a.tag { text-decoration: none; }
a.tag:hover { filter: brightness(.95); text-decoration: none; }

/* ============ 模板填报 / 已填查阅（formfill） ============ */
.fillbox { margin: 6px 0 14px 22px; border: 1px solid #dbe3ee; border-radius: 9px;
           background: #fbfdff; }
.fillbox > summary { cursor: pointer; padding: 8px 12px; font-size: 13px; font-weight: 600;
                     color: #1e40af; }
.fillbox > summary .mini { font-weight: 400; }
/* 本步只有一张必填的表：没有箭头、不给折叠，内容直接摊开（见 JS 里的 fflat 保持展开） */
details.fillbox.fflat > summary { list-style: none; cursor: default; }
details.fillbox.fflat > summary::-webkit-details-marker { display: none; }
details.fillbox.fflat > summary::marker { content: ''; }
/* 必填产出不带勾选框（按已勾选提交），这里只是把名字显出来 */
.checkline > .oname { font-weight: 600; color: #0f172a; }
/* 步骤附件：默认收起，放在按钮上方，不抢表单的位置 */
details.attbox { margin: 10px 0 12px; border: 1px dashed #cbd5e1; border-radius: 8px;
                 background: #fbfdff; }
details.attbox > summary { cursor: pointer; padding: 7px 12px; font-size: 12.5px;
                           color: #64748b; list-style: none; }
details.attbox > summary::-webkit-details-marker { display: none; }
details.attbox > summary::before { content: "\25b8 "; color: #94a3b8; }
details.attbox[open] > summary::before { content: "\25be "; }
details.attbox[open] > summary { color: #1e40af; border-bottom: 1px dashed #e2e8f0; }
/* 对话 / 退回往来（审核步骤的对话框） */
.talk { border-left: 3px solid #cbd5e1; padding: 6px 0 10px 12px; margin: 8px 0; }
.talk .t1 { font-size: 12.5px; color: #475569; }
.talk .t2 { margin: 4px 0 6px; font-size: 13.5px; color: #0f172a; line-height: 1.7;
            background: #f8fafc; border-radius: 6px; padding: 6px 9px; }
.talk .t3 { margin: 4px 0 0 14px; font-size: 12.5px; color: #334155; }
.talk .t3 > div { margin-top: 2px; background: #f0fdf4; border-radius: 6px;
                  padding: 5px 9px; line-height: 1.7; }
.ansform { margin: 6px 0 0 14px; }
.ansform textarea { width: 100%; min-height: 56px; }
.talkpanel { margin-top: 10px; padding: 11px 13px; background: #fffdf5;
             border: 1px solid #fcd34d; border-radius: 9px; }
.talkpanel .field { margin-bottom: 8px; }
/* 前序步骤已填内容（本步审核/处理的依据） */
.prevbox { margin: 10px 0 14px; padding: 10px 13px; background: #fffdf5;
           border: 1px solid #fde68a; border-radius: 9px; }
.prevbox > .note { color: #92400e; font-weight: 600; }
.prevbox .pf > div:first-child { font-size: 13px; }
/* 前序步骤已填内容：加框线，逐行看清是哪一栏填了什么 */
.prevbox table.kv { border-collapse: collapse; }
.prevbox table.kv th, .prevbox table.kv td { border: 1px solid #e2e8f0; padding: 4px 8px; }
.fform { padding: 2px 12px 12px; }
.fsec { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: #33507a;
        border-left: 3px solid #93c5fd; padding-left: 7px; }
.fsec .mini { font-weight: 400; margin-left: 6px; }
/* 格子尺寸：minmax 越小每行排得越密——300px 约 3 格/行，230px 约 4 格/行，196px 约 5 格/行。
   定 300px 是为了让「标签 + 值」都能各自排一行：格子窄的时候值被挤成两行，
   有的格子高有的矮，整段看着参差不齐（宁可多两行，也要每格一样高）。 */
.fgrid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 5px 10px; }
.fcell { display: flex; align-items: center; gap: 7px; }
/* 标签不折行：折了那一格就比别的格高一截 */
/* 标签右对齐、贴住输入框：42% 的固定宽度是为了让各格输入框左边一线齐，
   但文字左对齐时短标签（「样品电流」四个字）后面要空出 100px 上下，
   看着离输入框很远、整段也散（2026-10-16 郑总反馈）。改成右对齐：
   输入框起点仍对齐，标签文字紧贴输入框（只隔 gap 的 7px）。 */
.fcell label { flex: 0 0 42%; font-size: 12px; color: #475569; margin: 0;
               white-space: nowrap; text-align: right; }
.fcell input { flex: 1; min-width: 0; }
/* 带选项的栏渲染成下拉（标签里写「（是 / 否）」的那类） */
.fcell select { flex: 1; min-width: 0; padding: 4px 6px; font: inherit; }
/* 可多选的部门栏（「执行部门（可多选）」）：撑开几行，一眼看出能选多个 */
.fcell select.fmulti { min-height: 104px; padding: 3px 6px; line-height: 1.7; }
/* 「执行部门（可多选）」这类多选栏：整行 + 浅蓝底 + 蓝字标签，别让人一眼扫过去没看见 */
.fmultibox { background: #f2f7fd; flex-wrap: wrap; }
/* 标签和说明各占一行，中间整行留给部门网格：挤在一行的话网格只能拿到一列的宽（300px） */
.fmultibox > label { color: #1d4ed8; font-weight: 600; flex: 0 0 100%; text-align: left; }
.fmultibox > .mini { flex: 0 0 100%; }
/* 多选栏里的一排勾选框：做成可点的「小药丸」，一眼看得出能勾（原来是个带滚动条的列表框） */
.fmultiopts { flex: 1; display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 4px 0; }
.fmultiopts label.opt { padding: 5px 12px; border: 1px solid #cbd5e1; border-radius: 999px;
                        background: #fff; font-size: 13px; cursor: pointer;
                        transition: all .12s; }
.fmultiopts label.opt:hover { border-color: #3b82f6; background: #f2f7fd; color: #1d4ed8; }
.fmultiopts label.opt input { flex: none; width: 15px; height: 15px; margin: 0; }
/* 勾中状态由 JS 打 .on（比 :has() 兼容性稳，老浏览器也能看出勾了哪几个） */
.fmultiopts label.opt.on { border-color: #1d4ed8; background: #e0ebfb;
                           color: #1d4ed8; font-weight: 600; }
/* 一个部门一格：3 列网格铺开（9 个部门正好 3×3），勾上后输入框在格内换一行冒出来。
   原来是「一个部门占满整行」——1142px 的行只用到左边 90px，右边全空，还拖出 9 行 */
.fmultiopts.fmultigrid { flex: 1 1 100%; display: grid;
                         grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                         gap: 6px 14px; }
.fmultigrid .fmultiline { width: auto; flex-wrap: wrap; align-items: center; gap: 6px; }
.fmultigrid .fmultiline input.ftask { flex: 1 1 100%; margin-top: 2px; }
/* 一个部门一行：勾选框在左、右边留着「这个部门要做什么」的输入框
   （勾上才冒出来，未勾时整行仍按药丸排列，不占地方） */
.fmultiline { display: flex; align-items: center; gap: 8px; width: 100%; }
/* 默认收起：勾上哪个部门，JS 才把它这一行的输入框显示出来（未勾时不占地方） */
.fmultiline input.ftask { display: none; flex: 1 1 420px; min-width: 260px;
                          font-size: 14px; line-height: 1.4; padding: 7px 10px;
                          border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }
.fmultiline input.ftask:focus { outline: none; border-color: #1d4ed8;
                                box-shadow: 0 0 0 3px #dbeafe; }
/* 展开时前面的「这个部门要做什么 →」，免得冒出一个空框不知道是干嘛的 */
.ftaskarrow { display: none; flex: none; font-size: 12.5px; font-weight: 600;
              color: #1d4ed8; white-space: nowrap; }
/* 查阅模式：勾中的部门下面列出主管交办的事 */
.ftaskro { font-size: 12.5px; color: #334155; background: #f8fafc;
           border-left: 3px solid #93b4dc; padding: 3px 8px; margin-top: 3px; }
/* 大块栏目（Excel 里纵向合并或加高过的填写区）：独占整行 + 多行输入框 */
.fwide { grid-column: 1 / -1; align-items: flex-start; }
/* 大块填写栏（异常描述等）：标签一行、输入框下一行，两个字左端对齐 */
.fcell.fstack { flex-wrap: wrap; }
.fcell.fstack > label { flex: 0 0 100%; margin-bottom: 2px; text-align: left; }
.fcell.fstack > textarea, .fcell.fstack > .fval { flex: 1 1 100%; }
.fcell textarea { flex: 1; min-width: 0; min-height: 58px; resize: vertical;
                  padding: 5px 7px; font: inherit; }
.fwide .fval { white-space: pre-wrap; }
.frow { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 7px; }
/* 勾选组（样品来源 / 用途 / 需增加物料 …）的标签同样右对齐，贴住后面的选项 */
.frow > label { flex: 0 0 22%; font-size: 12.5px; color: #475569; margin: 5px 0 0;
                text-align: right; }
.frow input[type=text] { flex: 1; min-width: 0; }
.fval { font-size: 12px; padding: 2px 0; color: #0f172a; }
/* 前一步带过来的栏（「自动带出，不可修改」）：暖黄底 + 细框，一格一格看得清。
   之前是无底无框的纯文字，跟本步要填的白底输入框混在一片，分不出哪段是带过来的。 */
/* min-height 34px：与本步输入框那一排同高，整张单所有格子齐平 */
.fcell.fro-one { background: #fffbeb; border: 1px solid #fde68a; border-radius: 5px;
                 padding: 3px 8px; align-items: stretch; min-height: 34px; }
/* 标签一格、值一格：中间补一条竖线，跟纸质表单两个单元格之间的那根线一样，
   不然「申请日期 2026-10-16」看着还是糊在一起的一格 */
/* 2026-11-06 郑总：系统生成的文字（申请部门 / 申请人 / 申请日期 …）**一律居中**——
   标签居中、值也居中，上下也跟着居中，跟盖章一样整齐；发起人自己填的输入框仍靠左。 */
.fcell.fro-one > label { color: #92400e; flex: 0 0 42%; align-self: stretch;
                         display: flex; align-items: center; justify-content: center;
                         border-right: 1px solid #fde68a; padding: 0 6px;
                         text-align: center; }
/* 值也只占一行：实在长的尾部省略，鼠标停在格子上能看全（模板里给了 title） */
.fcell.fro-one .fval { color: #78350f; font-weight: 500; flex: 1; min-width: 0;
                       display: flex; align-items: center; justify-content: center;
                       padding: 0 6px; text-align: center;
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 长文本栏（技术要求 / 现有检具情况 / 审批意见这类）：
   独占整行，标签只占自己那点宽度（不按 42% 死分），剩下的全给值——
   值区拉满，一句话能从头读到尾（2026-11-06 郑总）；
   高度仍跟短栏一样 34px，整张单的格子一条线齐平；超长尾部省略，title 看全文 */
.fcell.fro-one.fstack { grid-column: 1 / -1; flex-wrap: nowrap;
                        min-height: 34px; max-height: 34px; }
.fcell.fro-one.fstack > label { flex: 0 0 auto; border-right: 1px solid #fde68a;
                                border-bottom: 0; padding: 0 10px; text-align: center;
                                justify-content: center; align-items: center;
                                white-space: nowrap; }
.fcell.fro-one.fstack .fval { flex: 1 1 auto; min-width: 0; padding: 0 10px;
                              align-items: center; justify-content: flex-start;
                              text-align: left;
                              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 查阅已填表单（只读）：按纸质表单的版式铺成带框线的表格，逐栏跟 Excel 对得上 */
/* 框线与纸质表单一致：细黑线（底色留白，行末不满格的地方不会露出灰块） */
.fgrid2.fro { gap: 0; background: #fff; border: 1px solid #000; border-radius: 5px;
              overflow: hidden; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.fgrid2.fro .fcell { background: #fff; padding: 6px 10px; gap: 10px; align-items: flex-start;
                     border-right: 1px solid #000; border-bottom: 1px solid #000; }
/* 标签与填写值之间补一条竖线：纸质表单里标签一格、值一格，中间有框线 */
.fgrid2.fro .fcell label { flex: 0 0 44%; color: #475569; align-self: stretch;
                           border-right: 1px solid #000; padding-right: 9px;
                           text-align: left; }
.fgrid2.fro .fval { padding: 0; line-height: 1.55; }
/* 勾选组（样品来源 / 用途 / 随附资料 …）与签署行：纸质表单上它们同样是一格一格的，
   但渲染用的是 .frow 不是 .fcell，之前拿不到框线、还带 7px 下边距，
   在带框线的表格中间露出几行裸文字，整张单看着散成一团（2026-10-16 补）。
   勾选组独占整行（后面要横排好几个选项），签署行按普通格子排。 */
.fgrid2.fro > .frow { margin: 0; background: #fff; padding: 6px 10px;
                      border-right: 1px solid #000; border-bottom: 1px solid #000; }
.fgrid2.fro > .fchk { grid-column: 1 / -1; }
.fgrid2.fro > .frow > label { flex: 0 0 44%; align-self: stretch; margin: 0;
                              border-right: 1px solid #000; padding-right: 9px;
                              text-align: left; }
.fgrid2.fro > .frow .fopts, .fgrid2.fro > .frow .fval { flex: 1; min-width: 0; }
/* 只读表格里的分节标题 / 明细表 / 说明：都要占满整行，不能挤在一列里 */
.fgrid2.fro > .fsec, .fgrid2.fro > .fgscroll, .fgrid2.fro > .note { grid-column: 1 / -1; }
.fgrid2.fro > .fgscroll { padding: 0; }
/* 只读表格里的章节标题 / 说明行：跟填写栏一样是白底格子，不能露出底层的灰 */
.fgrid2.fro > .fsec { margin: 0; background: #fff; padding: 7px 10px;
                      border-bottom: 1px solid #000; }
.fgrid2.fro > .fnote { background: #fff; padding: 6px 10px;
                       border-bottom: 1px solid #000; }
/* 模板自带的说明行：与正文同色（黑），只小一号字 */
.fnote { grid-column: 1 / -1; color: #0f172a; font-size: 12px;
         line-height: 1.6; padding: 2px 0; }
.fgscroll { overflow-x: auto; }
table.fgrid { width: 100%; font-size: 12.5px; margin: 0 0 4px; }
table.fgrid th { background: #f1f5f9; font-weight: 600; font-size: 12px; padding: 4px 6px;
                 white-space: nowrap; }
table.fgrid td { padding: 2px 4px; }
table.fgrid td input[type=text] { width: 100%; min-width: 74px; padding: 3px 6px; font-size: 12.5px; }
table.fpick th.flab { text-align: left; white-space: normal; font-weight: 500;
                      max-width: 340px; font-size: 12.5px; }
table.fpick td { text-align: center; width: 42px; }
table.fpick td.pon { background: #dcfce7; }
.fadd { margin: 2px 0 6px; }
.fchk { align-items: center; }
.fopts { flex: 1; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
label.opt { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px;
            color: #334155; margin: 0; white-space: nowrap; }
.opti { width: 150px; }
.fform span.opt { font-size: 12.5px; color: #94a3b8; padding: 1px 5px;
                  border: 1px solid #e2e8f0; border-radius: 5px; }
.fform span.opt.on { color: #065f46; background: #d1fae5; border-color: #6ee7b7; font-weight: 600; }
/* fbigchk：勾选组要一眼看得见、点得着（2026-10-19 郑总：F3-32 第 6 步那几组勾选
   字太小、跟普通字段混在一起看不出来）。只给传了 bigchk 的表单加，别的单子照旧。 */
/* 注意 .fchk 原本是横排（label 左、选项右），这里要整块竖着排：
   标题在上、选项在下一行横着铺开——不然标题占满宽会把选项挤到右上角竖着堆 */
.fform.fbigchk > .fchk { flex-direction: column; align-items: stretch; padding: 10px 12px;
                         margin: 0 0 10px; background: #f8fafc;
                         border: 1px solid #e2e8f0; border-radius: 10px; }
.fform.fbigchk .fchk > label { flex: none; width: 100%; font-size: 15.5px; font-weight: 700;
                               color: #0f172a; margin: 0 0 8px; text-align: left; }
.fform.fbigchk .fchk .fopts { gap: 8px 12px; }
.fform.fbigchk .fchk label.opt { font-size: 15.5px; color: #0f172a; padding: 7px 15px;
                                 border: 1.5px solid #cbd5e1; border-radius: 8px;
                                 background: #fff; cursor: pointer; transition: all .12s; }
.fform.fbigchk .fchk label.opt:hover { border-color: #2563eb; background: #eff6ff; }
.fform.fbigchk .fchk label.opt input[type=checkbox] { width: 18px; height: 18px; }
.fform.fbigchk .fchk label.opt:has(input:checked) { border-color: #2563eb; background: #dbeafe;
                                                    color: #1d4ed8; font-weight: 700; }
.fform.fbigchk .fchk .opti { width: 240px; font-size: 14px; }
/* fwide：整行铺开的填写栏（例：顾客反馈内容——一句话说不完，给足宽度和高度）。
   同样只在这类表单里生效，别的单子多行框维持原样。 */
.fform.fbigchk .fgrid2 > .fwide { grid-column: 1 / -1; }
.fform.fbigchk .fgrid2 > .fwide > label { flex: 0 0 100%; font-size: 15px; font-weight: 700;
                                          color: #0f172a; margin-bottom: 4px; }
.fform.fbigchk .fgrid2 > .fwide textarea { width: 100%; min-height: 92px;
                                           font-size: 14.5px; line-height: 1.6; }
/* 短选项（是/否、返工/报废…）排成一排按钮，点一下就选中，比下拉少一步 */
.fseg { display: flex; flex-wrap: wrap; gap: 6px; }
label.segopt { position: relative; margin: 0; }
label.segopt input { position: absolute; opacity: 0; width: 0; height: 0; }
label.segopt span { display: inline-block; padding: 5px 15px; min-width: 52px; text-align: center;
                    border: 1px solid #cbd5e1; background: #fff; border-radius: 7px;
                    font-size: 12.5px; color: #475569; cursor: pointer; user-select: none;
                    white-space: nowrap; transition: background .12s, border-color .12s; }
label.segopt:hover span { border-color: #93c5fd; color: #1d4ed8; }
label.segopt.on span { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; }
label.segopt input:focus-visible + span { outline: 2px solid #2563eb; outline-offset: 1px; }
.fwide > .fseg { padding-top: 2px; }

/* ---- 触发器入口步骤：本场景从第 N 步开始，前面几步"本次不适用" ---- */
.st-skip { background: #f1f5f9; color: #94a3b8 !important; }
.stepcard.skip { opacity: .5; }
.card.entrynote { border-left: 4px solid #0ea5e9; }
.card.entrynote h2 { color: #0369a1; }
.enote { font-size: 13px; color: #334155; line-height: 1.7; }
ul.skip { margin: 6px 0 8px; padding-left: 20px; }
ul.skip li { font-size: 12.5px; color: #64748b; line-height: 1.7; }
.entryhint { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
             border-radius: 8px; padding: 9px 13px; font-size: 12.5px; margin-bottom: 12px;
             line-height: 1.7; }
tr.skiprow td { opacity: .5; }
tr.entryrow td { background: #eff6ff; }

/* ==================== 主数据台账 ==================== */
.mdhead { border-left: 4px solid #0f766e; }
.mdhead h2 { color: #0f766e; }
.mdmeta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 9px 0 2px;
          font-size: 12.5px; color: #64748b; }
.mdmeta b { color: #0f172a; }
.mdseed { margin-top: 8px; font-size: 12.5px; color: #0f766e; background: #f0fdfa;
          border: 1px dashed #99f6e4; border-radius: 7px; padding: 6px 10px; }
.mdops { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.mdops .spacer { flex: 1; }
.mdops .libsearch input[type=text] { min-width: 220px; }
.mdops select { width: auto; }
/* 2026-11-11 行政部同事反馈：窗口缩窄时列多的台账（花名册列最多）表格超出白色卡片。
   台账列表表格统一套 .tscroll 横向滚动容器——窗口再窄也是在卡片内左右滑，不再溢出。 */
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.mdtable th { white-space: nowrap; }
table.mdtable td { vertical-align: top; line-height: 1.55; }
/* 2026-11-06 郑总：成品检验台账列多、操作列按钮会折成两三行，把整行撑高——
   别的格子内容顶着上边，看着一行高一行低、操作栏也对不齐。
   这一本表格改成所有格子上下居中（td.ops 里的按钮同样居中，别被 top 拉上去）。 */
table.mdtable.md-vmid th, table.mdtable.md-vmid td { vertical-align: middle; }
table.mdtable.md-vmid td.ops > .btn,
table.mdtable.md-vmid td.ops > details,
table.mdtable.md-vmid td.ops form.inline { display: inline-block; vertical-align: middle; }
/* 台账列表：标识列（名称 / 代号 / 编号 / 类别）做成「点进详情」的超链接。
   纯文本列沿用全局 a 的蓝色；select 类的值套在标签里，链接态换成蓝底蓝字，
   跟不可点的标签（灰底）区分开，一眼就知道哪格能点。 */
table.mdtable td a { text-decoration: none; }
table.mdtable td a > .tag.dept { background: #dbeafe; color: #1d4ed8; }
table.mdtable td a:hover > .tag.dept { background: #bfdbfe; }
/* 分组视图的组头行（2026-10-30 郑总：顾客财产按客户一家一家看）——点一下收起 / 展开 */
table.mdtable tr.grphd td { background: #f4f7fb; border-top: 2px solid #cbd5e1;
    font-size: 14px; padding: 7px 10px; }
table.mdtable tr.grphd:hover td { background: #e8eef7; }
.tag.blk { background: #fef2f2; color: #dc2626; font-weight: bold;
           border: 1px solid #fecaca; }
/* 快到期（橙）：跟「已逾期」的红区分开——2026-10-27 器具检定 / 供方证书到期前 30 天 */
.tag.due { background: #fffbeb; color: #b45309; font-weight: bold;
           border: 1px solid #fcd34d; }
.star { color: #d97706; margin-left: 3px; font-size: 11px; cursor: help; }
.pager { display: flex; gap: 10px; align-items: center; font-size: 12.5px;
         color: #64748b; margin: 0 0 16px; }
tr.inerr td { background: #fff5f5; }
.mdbad { color: #dc2626; font-size: 12px; line-height: 1.6; }
details.uphist { margin-top: 4px; }
details.uphist > summary { cursor: pointer; list-style: none; display: inline-block; }
details.uphist > summary::-webkit-details-marker { display: none; }
details.uphist table.kv th { width: 130px; font-size: 12px; padding: 3px 6px; }
details.uphist table.kv td { font-size: 12px; padding: 3px 6px; }

/* 主数据下拉：选中后带出的联系人/电话/类别 */
.mdpick { font-size: 12px; color: #0f766e; background: #f0fdfa; border: 1px dashed #99f6e4;
          border-radius: 6px; padding: 3px 8px; line-height: 1.6; }
.mdpick.mdbad { background: #fef2f2; border-color: #fecaca; color: #b91c1c;
                font-size: 12px; }
.mdpick.mdfree { background: #f8fafc; border-color: #e2e8f0; color: #94a3b8; }
.mdtag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
         background: #ccfbf1; color: #0f766e; font-size: 10.5px; vertical-align: 1px; }

/* ==================== 「发起后会这样流转」预览表 ==================== */
/* 走的是 fixed 布局：原来只靠 th 上的百分比，在自动布局下不生效。
   「缺口」列的长句标签是 nowrap，会强行撑宽自己、反向把「动作」列挤到很窄
   （动作列平均 40 字、最长 141 字，是全表最需要宽度的一列）。 */
table.flowpreview { table-layout: fixed; }
table.flowpreview th:nth-child(1), table.flowpreview td:nth-child(1) { width: 7%; }
table.flowpreview th:nth-child(2), table.flowpreview td:nth-child(2) { width: 42%; }
table.flowpreview th:nth-child(3), table.flowpreview td:nth-child(3) { width: 10%; }
table.flowpreview th:nth-child(4), table.flowpreview td:nth-child(4) { width: 25%; }
table.flowpreview th:nth-child(5), table.flowpreview td:nth-child(5) { width: 16%; }
table.flowpreview td { overflow-wrap: anywhere; }
/* 动作列是主信息，给足行距 */
table.flowpreview td:nth-child(2) { line-height: 1.65; }
/* 产出记录 / 缺口：长句标签改为可折行，不再挤压其它列 */
table.flowpreview td:nth-child(4) .tag,
table.flowpreview td:nth-child(5) .tag {
  white-space: normal; max-width: calc(100% - 6px); line-height: 1.6;
  vertical-align: top;
}

/* 体系运行统计：可展开的缺口 / 记录明细块 */
details.gapdet { border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 8px;
                 background: #fff; }
details.gapdet > summary { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
                           cursor: pointer; list-style: none; font-size: 13px; }
details.gapdet > summary::-webkit-details-marker { display: none; }
details.gapdet > summary::before { content: "\25b8"; color: #94a3b8; }
details.gapdet[open] > summary::before { content: "\25be"; }
details.gapdet > summary:hover { background: #f8fafc; border-radius: 8px; }
details.gapdet > table { margin: 0 10px 10px; }
details.gapdet .progress { display: inline-block; width: auto; min-width: 120px;
                           vertical-align: middle; }

/* 工作台：收到的提醒卡片 */
.notice-unread { border-left: 4px solid #dc2626; background: #fff7f7; }
.notice-item { border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px;
               margin-bottom: 8px; font-size: 13px; }
.notice-item .nt { font-weight: bold; }
.notice-item .nbody { white-space: pre-wrap; margin: 6px 0; color: #334155; }

/* 型号附件：缩略图卡片 + 审核锁定状态 */
.thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.fcard { width: 168px; border: 1px solid #e2e8f0; border-radius: 8px;
         background: #fff; overflow: hidden; }
.fcard.fpend { border-color: #fca5a5; }
.fcard.flocked { border-color: #86efac; }
.fcard .fimg { display: block; height: 120px; background: #f1f5f9; text-align: center; }
.fcard .fimg img { max-width: 100%; max-height: 120px; object-fit: contain; }
.fcard .pdfico { display: inline-block; margin-top: 34px; padding: 8px 16px;
                 background: #fee2e2; color: #dc2626; font-weight: bold;
                 border-radius: 6px; font-size: 14px; }
.fcard .fmeta { padding: 6px 8px 0; }
.fcard .fmuted { padding: 2px 8px 0; font-size: 11px; color: #64748b; }
.fcard .fops { padding: 6px 8px 8px; display: flex; gap: 6px; flex-wrap: wrap; }

/* 粘贴截图：点这里一下再按 Ctrl+V —— 做得大、做得显眼，别让人找不到这个小框 */
.pastebox { display: inline-block; border: 2px dashed #7aa7d9; border-radius: 10px;
            padding: 10px 24px; background: #f2f7fd; color: #1d4ed8;
            font-size: 14px; line-height: 1.5; text-align: center;
            cursor: pointer; vertical-align: middle; transition: all .15s; }
.pastebox:hover { background: #e6f0fb; border-color: #3b82f6; }
.pastebox:focus { outline: none; background: #e0ebfb; border-color: #1d4ed8;
                  box-shadow: 0 0 0 3px #dbeafe; }
.pastebox .pk { font-size: 11.5px; color: #5b7ba6; }
.pastebox.ready { background: #e7f6ec; border-color: #22a35a; color: #15803d; }
.pastebox.ready .pk { color: #15803d; font-weight: 600; }

/* 流程附件卡片：跟主数据库的技术图纸一样直接出图（比那里再大一点，截图看得清） */
.fcard.attcard { width: 240px; }
.fcard.attcard .fimg { height: 180px; }
.fcard.attcard .fimg img { max-height: 180px; cursor: zoom-in; }
.fcard.attcard .fmeta { font-size: 12px; word-break: break-all; }
.attlight { cursor: zoom-out; }

/* 程序文件阅读弹窗 */
.progcard { cursor: pointer; }
.modal-mask { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 99;
              display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-box { background: #fff; border-radius: 10px; width: min(860px, 94vw);
             max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-hd { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
            border-bottom: 1px solid #e2e8f0; }
.modal-body { padding: 14px 20px; overflow: auto; flex: 1; }
.modal-ft { display: flex; align-items: center; gap: 10px; padding: 10px 16px;
            border-top: 1px solid #e2e8f0; }
.progtext { white-space: pre-wrap; word-break: break-word; font-family: inherit;
            font-size: 13.5px; line-height: 1.75; margin: 0; }

/* 组织机构 */
.otree { text-align: center; padding: 10px 0 4px; }
.orow { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ovline { width: 2px; height: 18px; background: #94a3b8; margin: 0 auto; }
.onode { display: inline-block; min-width: 108px; padding: 8px 12px; border: 1.5px solid #2563eb;
         border-radius: 8px; background: #eff6ff; color: #1e3a8a; text-align: center;
         text-decoration: none; }
.onode:hover { background: #dbeafe; }
.onode.dash { border-style: dashed; background: #fff; }
.onode .olabel { font-weight: bold; font-size: 14px; }
.onode .oown { font-size: 12px; color: #166534; margin-top: 2px; }
.onode .osub { font-size: 11px; color: #64748b; margin-top: 2px; }
.oline .onode { border-color: #64748b; background: #f8fafc; color: #334155; }
.oline .onode:hover { background: #f1f5f9; }
.opend { opacity: .85; }

/* 部门细分表编辑器 */
.gridtab { width: 100%; border-collapse: collapse; }
.gridtab th, .gridtab td { border: 1px solid #e2e8f0; padding: 4px 6px; vertical-align: middle; }
.gridtab thead th { background: #f8fafc; }
.gcol-hd { display: flex; gap: 4px; align-items: center; }
/* 2026-11-07 郑总：顶栏「列名」要宽、「类型」下拉要短——全局 select 的
   width:100% 把下拉撑满整格、列名只剩 60px，这里改回来：下拉贴内容宽，
   列名吃剩余空间。 */
.gcol-hd .gname { flex: 1 1 auto; min-width: 110px; font-weight: bold; font-size: 13.5px;
                  border: 1px solid transparent; background: transparent; }
.gcol-hd .gname:hover, .gcol-hd .gname:focus { border-color: #cbd5e1; background: #fff; }
.gcol-hd .gtype { width: auto; flex: 0 0 auto; font-size: 11.5px; padding: 4px 5px; }
.gridtab td input, .gridtab td select, .gridtab td textarea {
  width: 100%; border: 1px solid transparent; background: transparent; font-family: inherit; }
.gridtab td textarea { min-height: 54px; resize: vertical; line-height: 1.5; }
.gridtab td input:hover, .gridtab td input:focus,
.gridtab td select:hover, .gridtab td select:focus,
.gridtab td textarea:hover, .gridtab td textarea:focus { border-color: #cbd5e1; background: #fff; }
.gridtab .grow-no { text-align: center; color: #94a3b8; font-size: 11px; background: #f8fafc; width: 26px; }
.gridtab .grow-ops { text-align: center; background: #f8fafc; }
/* 2026-10-26 郑总：部门职责页的细分表太窄、列挤成一指宽——
   给列一个最小宽度，列多了整表横向滚动，不再互相压；长文本框也加高。 */
.gridwide { overflow-x: auto; }
.gridwide .gridtab { min-width: 960px; }
.gridtab td input, .gridtab td select { min-width: 118px; }
/* 2026-11-07 郑总：「能发起的事 / 能管理的台账」两列拉宽（只在部门细分表内）——
   勾了十几个事项的岗位，框里名字要看得下，列不挤成一指宽。 */
.gridtab td.gc-wide input { min-width: 240px; }
/* 2026-11-07 郑总：组织机构页只把「部门职责 / 细分 / 责任人」这张卡片放开到屏幕宽——
   细分表大屏上别只占半屏；在册成员等其他卡片维持 1500px 上限不动。 */
body.orgwide .wrap.main { max-width: none; }
body.orgwide .card:not(.gridcard) { max-width: 1500px; }
.gridtab td textarea { min-height: 78px; width: 100%; }

/* 流程实例页：步骤卡可折叠——只展开「进行中 / 待审核」那一步，
   已完成的步骤收起来，点标题再看（页面不再一步堆到底）。 */
details.stepcard > summary.hd { cursor: pointer; list-style: none; }
details.stepcard > summary.hd::-webkit-details-marker { display: none; }
details.stepcard > summary.hd::marker { content: ''; }
details.stepcard[open] > summary.hd {
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed #e2e8f0; }
details.stepcard > summary.hd:hover .act { color: #2563eb; }


/* ---------------- 手机工位端 /m（2026-09-26）：产线操作工 ----------------
   设计取向「老年机」：字大、按钮大、一屏一件事，戴手套也点得中。 */
.sf { max-width: 760px; margin: 0 auto; font-size: 20px; line-height: 1.5; }
.sf-hello { font-size: 30px; font-weight: 800; margin: 4px 0 2px; }
.sf-sub { font-size: 18px; color: #475569; margin-bottom: 14px; }
.sf-warn { background: #fff7ed; border: 2px solid #f59e0b; border-radius: 12px;
           padding: 10px 14px; font-size: 17px; margin-bottom: 14px; }
.sf-empty { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 12px;
            padding: 22px; text-align: center; color: #64748b; font-size: 20px; }
.sf-back { display: inline-block; font-size: 20px; font-weight: 700; color: #1d4ed8;
           margin-bottom: 10px; }
.sf-hd { border: 2px solid #cbd5e1; border-radius: 14px; padding: 14px 16px;
         margin-bottom: 16px; background: #f8fafc; }
.sf-card { display: block; border: 2px solid #cbd5e1; border-radius: 14px;
           padding: 14px 16px; margin-bottom: 14px; background: #fff;
           text-decoration: none; color: #0f172a; position: relative; }
.sf-card:active { background: #eff6ff; }
.sf-no { font-size: 26px; font-weight: 800; letter-spacing: .5px; }
.sf-p { font-size: 21px; margin-top: 2px; }
.sf-m { font-size: 17px; color: #475569; margin-top: 4px; }
.sf-st { position: absolute; right: 14px; top: 14px; font-size: 18px; font-weight: 800;
         background: #e2e8f0; color: #334155; border-radius: 10px; padding: 4px 10px; }
.sf-st-run { background: #dcfce7; color: #15803d; }
.sf-box { border: 2px solid #e2e8f0; border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; }
/* 工位端「选项磁贴 + 折叠大按钮」（2026-11-11 郑总：越直接越好） */
.sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.sf-tile { display: block; border: 2px solid #93c5fd; border-radius: 14px; background: #eff6ff;
           padding: 18px 10px; text-align: center; text-decoration: none; color: #0f172a; }
.sf-tile b { display: block; font-size: 26px; font-weight: 800; }
.sf-tile em { display: block; font-style: normal; font-size: 14px; color: #475569; margin-top: 5px; line-height: 1.5; }
.sf-tile:active { background: #dbeafe; }
.sf-sum { list-style: none; cursor: pointer; font-size: 24px; font-weight: 800; }
.sf-sum::-webkit-details-marker { display: none; }
.sf-sum::before { content: '▸ '; color: #64748b; }
.sf-box[open] > .sf-sum::before { content: '▾ '; color: #2563eb; }
.sf-box[open] > .sf-sum { margin-bottom: 10px; }
.sf-t { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.sf-form { margin: 0; }
.sf-btn { display: block; width: 100%; min-height: 66px; line-height: 66px; text-align: center;
          font-size: 25px; font-weight: 800; border: none; border-radius: 14px; color: #fff;
          background: #1d4ed8; margin: 10px 0; cursor: pointer; text-decoration: none;
          box-sizing: border-box; padding: 0 12px; }
.sf-btn-r { background: #dc2626; }
.sf-btn-g { background: #475569; }
.sf-btn-ok { background: #16a34a; }
.sf-btn:active { filter: brightness(.92); }
.sf-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sf-tip { font-size: 17px; color: #64748b; margin: 0 0 8px; min-height: 24px; }
.sf-chk { display: flex; align-items: center; gap: 12px; min-height: 60px; font-size: 21px;
          border: 2px solid #cbd5e1; border-radius: 12px; padding: 0 14px; margin: 8px 0;
          background: #fff; }
.sf-chk input { width: 30px; height: 30px; flex: none; }
.sf-kind { display: flex; align-items: center; gap: 12px; min-height: 58px; font-size: 21px;
           border: 2px solid #cbd5e1; border-radius: 12px; padding: 0 14px; margin: 8px 0; }
.sf-kind input { width: 30px; height: 30px; flex: none; }
.sf-kind span { font-weight: 800; }
.sf-kind em { font-style: normal; font-size: 16px; color: #64748b; }
.sf-ta { width: 100%; font-size: 20px; border: 2px solid #cbd5e1; border-radius: 12px;
         padding: 10px; box-sizing: border-box; margin-top: 8px; }
.sf-atts { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-att { display: block; width: 46%; border: 1px solid #e2e8f0; border-radius: 10px;
          overflow: hidden; text-align: center; text-decoration: none; }
.sf-att img { width: 100%; height: 150px; object-fit: cover; display: block; }
.sf-att-ico { display: block; height: 150px; line-height: 150px; background: #f1f5f9;
              color: #475569; font-size: 18px; }
.sf-att-n { display: block; font-size: 15px; color: #64748b; padding: 4px; }
.sf-foot { margin: 18px 0 30px; }
@media (max-width: 480px) {
  .sf { font-size: 21px; }
  .sf-btn { min-height: 74px; line-height: 74px; font-size: 27px; }
  .sf-no { font-size: 28px; }
  .sf-att { width: 100%; }
}

/* ============================================================================
   原型风格对齐层（2026-10-15）
   ----------------------------------------------------------------------------
   对照「界面简洁化_卡片式样板.html」的视觉规范统一全站：
     · 色板全部走上面的设计变量（底 #f4f6f9 / 边框 #e3e8ef / 文字三级）
     · 状态一律「浅底 + 深字」成对使用，不再拿彩色字压白底
     · 顶栏改白底（原来是深蓝黑）：与原型一致，整页更轻、卡片更突出
     · 数字卡大数字改近黑（原来一律蓝），跟原型 .bdc 一致
   只覆盖 .card / .stat / table / .btn / .tag 这些既有公共类，页面 HTML 不用动；
   放在文件末尾，同权重时后写的生效 —— 想还原只需删掉这一段。
   ============================================================================ */
body { background: var(--bg); color: var(--text); }

/* ---------- 顶栏：白底 + 底部细线 ---------- */
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  color: var(--text); height: 64px;
}
.topbar .brand { color: var(--text); font-size: 17px; font-weight: 700; letter-spacing: .3px; }
.topbar .brand span { color: var(--text3); font-weight: 400; font-size: 14px; }
.topbar .user { color: var(--text2); }
.topbar .user b { color: var(--text); }
.topbar .user a { color: var(--brand); }
.layout { min-height: calc(100vh - 64px); }

/* ---------- 侧边栏：细线分隔，当前项用品牌浅底 ---------- */
.sidebar { border-right: 1px solid var(--border); padding: 12px 0; }
.sidebar a { color: var(--text2); padding: 8px 20px; }
.sidebar a:hover { background: #f8fafc; color: var(--text); }
.sidebar a.active { background: var(--brand-soft); color: var(--brand); border-left-color: var(--brand); font-weight: 600; }
.sidebar .grp { color: var(--text3); }

/* ---------- 标题 / 卡片 ---------- */
h1.page { color: var(--text); font-size: 19px; }
.sub { color: var(--text2); }
h2.sec { font-size: 14.5px; color: var(--text); font-weight: 600; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: calc(var(--card-radius) + 2px);
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.card h2 { font-size: 29px; line-height: 1.3; color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card h2 .cnt { background: #eef2f7; color: var(--text2); font-weight: 500; font-size: 15px; }

/* ---------- 数字卡：深色大数字 + 弱化标签 ---------- */
.stats { gap: calc(var(--card-gap) + 3px); }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: calc(var(--card-radius) + 2px);
  padding: calc(var(--card-pad) + 4px) calc(var(--card-pad) + 5px);
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.stat .n { color: var(--text); font-size: 27px; letter-spacing: -.5px; line-height: 1.2; }
.stat .l { color: var(--text3); font-size: 12.5px; margin-top: 2px; }

/* ---------- 表格：表头更淡、悬停更轻 ---------- */
th, td { border-color: var(--border); }
th { background: #f8fafc; color: var(--text2); }
tr:hover td { background: #fbfcfe; }
.muted, .mini, td.muted { color: var(--text3); }

/* ---------- 按钮 / 输入 ---------- */
.btn { border-color: #cbd5e1; color: var(--text2); border-radius: 8px; }
.btn:hover { background: #f8fafc; color: var(--text); }
.btn.primary { background: var(--brand); border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
input, textarea, select { border-color: #cbd5e1; color: var(--text); }

/* ---------- 状态标签：浅底 + 深字成对 ---------- */
.tag.in, .tag.st, .st-review { background: var(--b-bg); color: var(--b-fg) !important; }
.tag.out, .st-done2 { background: var(--k-bg); color: var(--k-fg) !important; }
.tag.gap, .st-ng { background: var(--r-bg); color: var(--r-fg) !important; }
.tag.dept { background: #f1f5f9; color: var(--text2); }
.st-doing { background: #fffbeb; color: #92400e !important; }

/* ---------- 提示块 / 空态 / 编号 ---------- */
.note { background: #f8fafc; border-color: var(--border); color: var(--text2); }
.flash { border-radius: 9px; }
.empty { color: var(--text3); }
.code { color: var(--text); }

/* ---------- 必填没填的定位提示（2026-10-16）：滚到那一项、居中、红框 + 红字 ---------- */
.needfill {
  border: 2px solid #dc2626 !important;
  border-radius: 7px;
  background: #fef2f2;
  padding: 7px 9px;
  animation: needfill-blink 1.15s ease-in-out 2;
}
.needfill-tip {
  color: #b91c1c;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
  margin-top: 7px;
}
@keyframes needfill-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, .26); }
}

/* ---------- 已发起天数徽标（2026-10-23 起；2026-10-29 挪到全局：不只是工作台，
   单据详情 / 全部单据列表也在用同一套「超 2 天标红」） ---------- */
.age { display:inline-block;margin-top:2px;font-size:12px;padding:1px 6px;
       border-radius:8px;background:#f1f5f9;color:#475569;white-space:nowrap; }
.age-warn { background:#fff4e5;color:#b45309; }
.age-hot  { background:#fee2e2;color:#b91c1c; }
/* 承诺完成日期：正常灰，超期（超过自己承诺的日子）照红 */
.mini.hot { color:#b91c1c;font-weight:700; }

/* ---------- 页签行冻结（2026-11-11 郑总：主界面「① 工作台 ~ ⑥ 联络函」往下滚不动，
   钉在顶栏正下方；手机端同一规则生效——顶栏在手机上折成两行、高度不定，
   top 值由 base.html 脚本按顶栏实际高度动态写进 --tabs-top，写死会盖住或露缝 ---------- */
.wrap.main > .tabs { position: sticky; top: var(--tabs-top, 74px); z-index: 35;
  background: var(--bg); margin-bottom: 0; padding: 4px 2px 10px; }