/* ===== 检具验收原型 · 全局样式（CFMOTO 黑白灰 + 品牌红 #D9001B） ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #e8eaed; }
body {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; color: #1a1a1a; min-width: 2870px;
}
a { color: #1a1a1a; text-decoration: none; }
a:hover { color: #D9001B; }

/* ===== 顶部导航（通栏，覆盖画布+面板上方） ===== */
#ai_nav {
  width: 2870px; height: 48px; background: #17181a; color: #fff;
  display: flex; align-items: center; padding: 0 24px; gap: 4px;
  position: relative; z-index: 100000;
}
#ai_nav .logo { font-family: 'Arial Black', Arial, sans-serif; font-weight: 900; font-size: 20px; letter-spacing: 1px; margin-right: 6px; }
#ai_nav .logo em { color: #D9001B; font-style: normal; }
#ai_nav .title { font-size: 13px; color: #bbb; margin-right: 26px; }
#ai_nav .grp { display: flex; align-items: center; margin-right: 14px; }
#ai_nav .grp .cap { font-size: 12px; color: #888; margin-right: 6px; padding-right: 6px; border-right: 1px solid #3a3b3d; }
#ai_nav a.item { color: #ddd; font-size: 13px; padding: 5px 10px; border-radius: 3px; white-space: nowrap; cursor: pointer; }
#ai_nav a.item:hover { color: #fff; background: #2c2d30; }
#ai_nav a.item.on { color: #fff; background: #D9001B; }
#ai_nav .navright { margin-left: auto; display: flex; align-items: center; gap: 14px; }
#ai_nav .who2 { font-size: 12px; color: #bbb; }
#ai_nav .who2 b { color: #fff; }

/* 消息铃铛 */
#msgbell { position: relative; cursor: pointer; padding: 4px 6px; border-radius: 3px; }
#msgbell:hover { background: #2c2d30; }
#msgbell svg { display: block; }
#msgbell .bdg {
  position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; line-height: 16px;
  background: #D9001B; color: #fff; font-size: 11px; border-radius: 8px; text-align: center; padding: 0 4px;
  display: none;
}
#msgbell.has .bdg { display: block; }
#msgpop {
  position: fixed; top: 54px; right: 24px; width: 420px; max-height: 480px; overflow: auto;
  background: #fff; border: 1px solid #d9d9d9; box-shadow: 0 6px 24px rgba(0,0,0,.18);
  z-index: 150000; display: none;
}
#msgpop.show { display: block; }
#msgpop .mp-t { padding: 10px 14px; border-bottom: 1px solid #eee; font-weight: 700; font-size: 14px; background: #fafafa; }
#msgpop .mp-i { padding: 10px 14px; border-bottom: 1px solid #f2f2f2; cursor: pointer; }
#msgpop .mp-i:hover { background: #fff8f8; }
#msgpop .mp-i .t { font-weight: 700; font-size: 13px; color: #D9001B; margin-bottom: 4px; }
#msgpop .mp-i .d { font-size: 12px; color: #555; line-height: 1.6; }
#msgpop .mp-i .m { font-size: 12px; color: #999; margin-top: 4px; }
#msgpop .mp-i.done { opacity: .55; }
#msgpop .mp-i.done .t { color: #666; }
#msgpop .empty { padding: 24px; text-align: center; color: #999; font-size: 13px; }

/* ===== 左侧原型画布 ===== */
.canvas { width: 1920px; padding: 20px 24px 40px 24px; position: relative; }
.rolebar {
  display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #d9d9d9;
  padding: 10px 16px; margin-bottom: 14px;
}
.rolebar .who { font-weight: 700; }
.rolebar .who b { color: #D9001B; }
.rolebar .tip { color: #666; font-size: 13px; }
.rolebar .demosw { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; }
.rolebar .demosw select { height: 30px; border: 1px solid #b9b9b9; padding: 0 8px; min-width: 330px; font-family: inherit; }

.pagehead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pagehead h1 { font-size: 20px; font-weight: 700; }
.pagehead h1 span { color: #888; font-size: 13px; font-weight: 400; margin-left: 10px; }
.card { background: #fff; border: 1px solid #d9d9d9; margin-bottom: 14px; }
.card .card-t {
  padding: 10px 16px; border-bottom: 1px solid #e5e5e5; font-weight: 700; font-size: 15px;
  background: #fafafa; display: flex; align-items: center; justify-content: space-between;
}
.card .card-b { padding: 14px 16px; }
.small { font-size: 12px; } .muted { color: #888; }
.redtx { color: #D9001B; } .bluetx { color: #1677ff; } .greentx { color: #1f8f3b; }

/* ===== 按钮 ===== */
.btn {
  display: inline-block; height: 34px; line-height: 32px; padding: 0 18px; border: 1px solid #1a1a1a;
  background: #fff; color: #1a1a1a; font-size: 14px; cursor: pointer; border-radius: 2px; font-family: inherit;
  user-select: none; white-space: nowrap;
}
.btn:hover { background: #f5f5f5; }
.btn.pri { background: #1a1a1a; color: #fff; }
.btn.pri:hover { background: #333; }
.btn.red { background: #D9001B; border-color: #D9001B; color: #fff; }
.btn.red:hover { background: #b80017; }
.btn.green { background: #1f8f3b; border-color: #1f8f3b; color: #fff; }
.btn.green:hover { background: #187630; }
.btn.plain { border-color: #c2c2c2; color: #555; }
.btn.sm { height: 28px; line-height: 26px; padding: 0 12px; font-size: 13px; }
.btn:active { transform: translateY(1px); }
.btnbar { display: flex; gap: 10px; align-items: center; }
.btnbar .space { flex: 1; }

/* ===== 状态标签 ===== */
.tag { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; line-height: 20px; color: #fff; white-space: nowrap; }
.t-draft { background: #909399; } .t-wait { background: #E6A23C; } .t-return { background: #D9001B; }
.t-approve { background: #7b5cd6; } .t-done { background: #21a03c; } .t-proc { background: #1677ff; }
.tag.tmp { background: #fff; color: #E6A23C; border: 1px solid #E6A23C; margin-left: 6px; }

/* ===== 查询区 ===== */
.searchbar { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; background: #fff; border: 1px solid #d9d9d9; padding: 14px 16px; margin-bottom: 14px; }
.searchbar .sitem { display: flex; align-items: center; gap: 8px; }
.searchbar .sitem label { color: #555; white-space: nowrap; }
.searchbar input.txt, .searchbar select.txt { width: 200px; }
.searchbar .datesep { color: #999; }

/* ===== 输入控件 ===== */
input.txt, select.txt, textarea.txt {
  height: 34px; border: 1px solid #b9b9b9; background: #fff; padding: 0 10px; font-size: 14px;
  font-family: inherit; color: #1a1a1a; outline: none;
}
textarea.txt { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.6; }
input.txt:focus, select.txt:focus, textarea.txt:focus { border-color: #1a1a1a; }
input.txt[readonly], input.txt.dis { background: #f2f3f5; color: #666; }
input.txt.err, select.txt.err { border-color: #D9001B; background: #fff5f5; }
.err-msg { color: #D9001B; font-size: 12px; line-height: 1.4; margin-top: 4px; display: none; }

/* ===== 数据表格 ===== */
table.grid { border-collapse: collapse; width: 100%; background: #fff; }
table.grid th, table.grid td { border: 1px solid #e0e0e0; padding: 8px 10px; font-size: 13px; text-align: left; vertical-align: middle; line-height: 1.5; }
table.grid th { background: #F2F2F2; font-weight: 700; white-space: nowrap; }
table.grid tbody tr:hover { background: #fff8f8; }
table.grid td.op { white-space: nowrap; }
table.grid td.op a { color: #1677ff; margin-right: 10px; cursor: pointer; }
table.grid td.op a.red { color: #D9001B; }
table.grid td.ctr { text-align: center; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 12px 4px 2px 4px; color: #666; font-size: 13px; }
.pager .pg { min-width: 28px; height: 28px; line-height: 26px; text-align: center; border: 1px solid #d5d5d5; background: #fff; cursor: pointer; padding: 0 6px; }
.pager .pg.on { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

/* ===== 表头信息条（详情页） ===== */
.headbar { display: flex; flex-wrap: wrap; background: #fff; border: 1px solid #d9d9d9; margin-bottom: 14px; }
.headbar .hitem { padding: 10px 18px; border-right: 1px solid #ececec; min-width: 190px; }
.headbar .hitem .k { color: #888; font-size: 12px; margin-bottom: 4px; }
.headbar .hitem .v { font-weight: 700; font-size: 14px; }

/* ===== 提示横幅 ===== */
.banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 13px; line-height: 1.7; border: 1px solid; }
.banner b { font-size: 14px; }
.banner.rej { background: #fff5f5; border-color: #f3c1c8; color: #a8071a; }
.banner.warn { background: #fffbe6; border-color: #ffe58f; color: #874d00; }
.banner.ok { background: #f6ffed; border-color: #b7eb8f; color: #237804; }
.banner.info { background: #e6f4ff; border-color: #91caff; color: #0958d9; }
.banner .ic { font-size: 16px; line-height: 1.4; }

/* ===== 流程步骤条 ===== */
.steps { display: flex; align-items: flex-start; padding: 18px 10px 8px 10px; }
.step { flex: 1; text-align: center; position: relative; }
.step .dot {
  width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #c4c4c4; color: #999;
  line-height: 22px; margin: 0 auto 6px auto; font-size: 13px; font-weight: 700; position: relative; z-index: 2;
}
.step .lbl { font-size: 12px; color: #666; line-height: 1.4; }
.step .who9 { font-size: 11px; color: #aaa; }
.step::before {
  content: ''; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: #d9d9d9; z-index: 1;
}
.step:first-child::before { display: none; }
.step.done .dot { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.step.done::before { background: #1a1a1a; }
.step.cur .dot { background: #D9001B; border-color: #D9001B; color: #fff; box-shadow: 0 0 0 4px rgba(217,0,27,.15); }
.step.cur .lbl { color: #D9001B; font-weight: 700; }
.step.back .dot { background: #fff; border-color: #D9001B; color: #D9001B; }
.step.back::before { background: #D9001B; }

/* ===== 纸面单据（还原 CFMOTO 纸质验收表） ===== */
.doc { background: #fff; border: 1px solid #333; padding: 18px 22px 22px 22px; }
.doc .doc-hd { display: flex; align-items: flex-start; margin-bottom: 6px; }
.doc .doc-logo { font-family: 'Arial Black', Arial, sans-serif; font-weight: 900; font-size: 15px; letter-spacing: .5px; white-space: nowrap; padding-top: 8px; }
.doc .doc-logo em { color: #D9001B; font-style: normal; }
.doc .doc-ttl { flex: 1; text-align: center; font-size: 22px; font-weight: 700; letter-spacing: 6px; padding: 6px 0; }
.doc .doc-no { font-weight: 700; font-size: 14px; padding-top: 10px; white-space: nowrap; }

table.dtab { border-collapse: collapse; width: 100%; table-layout: fixed; }
table.dtab th, table.dtab td { border: 1px solid #333; padding: 6px 8px; font-size: 13px; line-height: 1.55; vertical-align: middle; word-break: break-all; }
table.dtab th { background: #fff; font-weight: 400; }
table.dtab td.k { font-weight: 700; }
table.dtab td.ctr { text-align: center; }
table.dtab .sec-cap { background: #F2F2F2; font-weight: 700; text-align: center; writing-mode: vertical-rl; letter-spacing: 4px; padding: 6px 4px; font-size: 13px; }
table.dtab td.vcell { writing-mode: vertical-rl; letter-spacing: 2px; text-align: center; font-weight: 700; font-size: 13px; background: #FAFAFA; padding: 4px 3px; }
table.dtab .note-red { color: #D9001B; }
table.dtab td.sig { height: 64px; vertical-align: top; }
table.dtab td.sig .sigline { border-bottom: 1px solid #999; height: 30px; margin: 6px 4px 2px 4px; font-family: 'cursive'; color: #333; font-size: 15px; }
table.dtab td.sig .dt { color: #888; font-size: 12px; margin: 2px 4px; }

/* 36 项清单里的自检/核查勾选格 */
.ck-cell { text-align: center; font-size: 15px; font-weight: 700; }
.ck-cell.ok { color: #1f8f3b; }
.ck-cell.no { color: #D9001B; }
.ck-cell.na { color: #999; }
.sel-ck { display: flex; gap: 8px; justify-content: center; }
.sel-ck label { cursor: pointer; font-size: 14px; padding: 0 2px; user-select: none; }
.sel-ck input { vertical-align: -2px; }
textarea.remark { width: 100%; border: 1px dashed #bbb; min-height: 26px; padding: 3px 6px; font-family: inherit; font-size: 12px; }

/* 终验收结论选项 */
.fin-opt { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.fin-opt label { cursor: pointer; font-size: 14px; user-select: none; }
.fin-opt input { vertical-align: -2px; margin-right: 4px; }

/* 照片上传格 */
.photo-box { display: flex; gap: 10px; flex-wrap: wrap; }
.photo-slot {
  width: 120px; height: 90px; border: 1px dashed #b9b9b9; background: #fafafa; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #999; font-size: 12px; cursor: pointer; gap: 4px; text-align: center;
}
.photo-slot:hover { border-color: #D9001B; color: #D9001B; }
.photo-slot.has { border: 1px solid #c9c9c9; background: #fff; color: #555; cursor: default; }
.photo-slot .ph-img { font-size: 26px; line-height: 1; }

/* ===== 弹窗（fixed 居中 + 遮罩） ===== */
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200000; display: none; }
.mask.show { display: block; }
.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-52%); width: 640px; max-height: 82vh; overflow: auto;
  background: #fff; z-index: 200100; display: none; box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.modal.show { display: block; animation: pop .16s ease-out; }
.modal.wide { width: 860px; }
@keyframes pop { from { opacity: 0; transform: translate(-50%,-54%) scale(.97); } to { opacity: 1; transform: translate(-50%,-52%) scale(1); } }
.modal .m-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #eee; }
.modal .m-hd .t { font-size: 16px; font-weight: 700; }
.modal .m-hd .x { cursor: pointer; color: #999; font-size: 20px; line-height: 1; padding: 2px 6px; }
.modal .m-hd .x:hover { color: #D9001B; }
.modal .m-bd { padding: 16px 18px; }
.modal .m-ft { padding: 12px 18px 16px 18px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 10px; }
.m-form-row { display: flex; align-items: flex-start; margin-bottom: 12px; }
.m-form-row .lb { width: 110px; text-align: right; padding-right: 10px; line-height: 34px; flex: none; }
.m-form-row .lb.req::before { content: '*'; color: #D9001B; margin-right: 2px; }
.m-form-row .ct { flex: 1; }
.m-form-row .ct input.txt, .m-form-row .ct select.txt, .m-form-row .ct textarea.txt { width: 100%; }
.m-form-row .ct textarea.txt { min-height: 70px; }
.m-tip { background: #f6f6f6; border: 1px solid #e5e5e5; padding: 8px 12px; font-size: 12px; color: #666; line-height: 1.7; margin-bottom: 12px; }
.m-radio { display: flex; gap: 18px; align-items: center; padding: 6px 0; flex-wrap: wrap; }
.m-radio label { cursor: pointer; font-size: 14px; user-select: none; }
.m-radio input { vertical-align: -2px; margin-right: 4px; }

/* toast */
#toast {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 300000;
  background: rgba(23,24,26,.92); color: #fff; padding: 10px 22px; border-radius: 4px; font-size: 14px;
  display: none; max-width: 720px; line-height: 1.6;
}
#toast.ok { background: rgba(31,143,59,.95); }
#toast.err { background: rgba(217,0,27,.95); }

/* ===== AI_LOGIC_PANEL 说明面板 ===== */
#ai_logic_panel { position: absolute; left: 1980px; top: 60px; width: 930px; z-index: 99999; font-family: 'PingFang SC','Microsoft YaHei',sans-serif; font-size: 13px; color: #000; }
#ai_logic_panel .aip-title { font-family: 'Arial Negreta','Arial Normal','Arial',sans-serif; font-weight: 700; font-size: 16px; color: #D9001B; margin: 0 0 10px 0; }
#ai_logic_panel .aip-para { background: #fff; border: 1px solid #797979; padding: 8px 10px; line-height: 1.8; white-space: pre-wrap; color: #000; }
#ai_logic_panel table { border-collapse: collapse; width: 100%; background: #fff; font-size: 13px; color: #000; margin-bottom: 4px; }
#ai_logic_panel th, #ai_logic_panel td { border: 1px solid #797979; padding: 5px 8px; vertical-align: top; line-height: 1.6; white-space: pre-wrap; }
#ai_logic_panel th { background: #F2F2F2; font-weight: 700; }
#ai_logic_panel .aip-view { display: none; }
#ai_logic_panel .aip-view.on { display: block; }

/* ===== 表单分组框（发起页：灰底组名 + 白输入框） ===== */
.fgroup { border: 1px solid #c9c9c9; background: #f5f5f5; padding: 12px 16px 16px 16px; margin-bottom: 14px; position: relative; }
.fgroup > .gname { font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.frow { display: flex; align-items: flex-start; margin-bottom: 10px; gap: 0; }
.frow:last-child { margin-bottom: 0; }
.flabel { width: 150px; text-align: right; padding-right: 10px; line-height: 34px; color: #333; flex: none; }
.flabel.req::before { content: '*'; color: #D9001B; margin-right: 2px; }
.fcontrol { flex: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.w-sm { width: 220px !important; } .w-md { width: 380px !important; } .w-lg { width: 560px !important; }

/* ===== 流转图页 ===== */
.flowwrap { display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.fnode {
  border: 1.5px solid #1a1a1a; background: #fff; padding: 10px 14px; font-size: 13px; text-align: center; min-width: 150px;
  box-shadow: 2px 2px 0 #e5e5e5; position: relative;
}
.fnode .fs { font-weight: 700; font-size: 14px; }
.fnode .fd { color: #777; font-size: 12px; margin-top: 3px; }
.fnode.sup { border-color: #1677ff; }
.fnode.sqe { border-color: #D9001B; }
.fnode.end { border-color: #1f8f3b; background: #f6ffed; }
.fnode.state { border-style: dashed; border-color: #E6A23C; background: #fffbe6; min-width: 130px; }
.farrow { display: flex; flex-direction: column; align-items: center; padding: 0 2px; min-width: 70px; }
.farrow .aline { width: 100%; height: 2px; background: #555; position: relative; }
.farrow .aline::after { content: ''; position: absolute; right: -1px; top: -4px; border-left: 8px solid #555; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.farrow .atx { font-size: 11px; color: #555; padding: 3px 0; white-space: nowrap; }
.flowlane { margin-bottom: 26px; }
.flowlane .lane-t { font-weight: 700; font-size: 15px; margin-bottom: 12px; border-left: 4px solid #D9001B; padding-left: 10px; }