:root{
  --line:#333; --line2:#a8adb5; --soft:#f4f6f8; --brand:#0b5fa5; --warn:#c0392b; --ok:#1d7a4d;
}
*{box-sizing:border-box}
body{margin:0;background:#eef0f3;font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#222;font-size:13px;line-height:1.55}

/* ---------- UI ---------- */
.wrap{max-width:900px;margin:0 auto;padding:12px 12px 60px}
.topbar{background:#fff;border-bottom:1px solid #d8dce1;padding:10px 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.topbar .brand{font-weight:700;font-size:15px;margin-right:auto}
.tabs{display:flex;gap:4px;background:#eef1f4;padding:3px;border-radius:8px;margin-bottom:12px}
.tabs button{border:0;background:transparent;padding:7px 16px;border-radius:6px;cursor:pointer;font-size:13px;font-family:inherit;color:#444}
.tabs button.on{background:#fff;color:var(--brand);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.card{background:#fff;border:1px solid #e1e4e8;border-radius:10px;padding:14px 16px;margin-bottom:12px}
.card .hint{font-size:12px;color:#666;margin:-4px 0 10px;line-height:1.7}
.card h3{margin:0 0 10px;font-size:14px;font-weight:500}
button{font-family:inherit;font-size:13px;padding:7px 14px;border:1px solid #bcc2c9;background:#fff;border-radius:6px;cursor:pointer;color:#222}
button:hover{background:#f2f4f6}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
button.primary:hover{background:#094a80}
button.danger{color:var(--warn);border-color:#e3b8b2}
button.sm{padding:4px 9px;font-size:12px}
button:disabled{opacity:.5;cursor:not-allowed}
input[type=text],input[type=date],input[type=time],input[type=datetime-local],input[type=number],textarea,select{
  width:100%;border:0;border-bottom:1px solid #ccd1d7;background:transparent;font-family:inherit;font-size:13px;color:#111;padding:3px 1px;outline:none;border-radius:0}
input:focus,textarea:focus{border-bottom-color:var(--brand)}
textarea{resize:vertical;min-height:48px}
.muted{color:#777;font-size:12px}
.err{color:var(--warn)}
.ok{color:var(--ok)}
.hide{display:none !important}
.req{color:var(--warn)}
.miss{background:#fdecea !important}

.frow{display:flex;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.frow>div{flex:1;min-width:150px}
.frow label{display:block;font-size:12px;color:#555;margin-bottom:1px}
table.form{width:100%;border-collapse:collapse}
table.form td{padding:5px 6px;border:1px solid #dfe3e8}
table.form td.lab{background:var(--soft);width:130px;font-size:12px;white-space:nowrap}
table.parts{width:100%;border-collapse:collapse;margin-top:4px}
table.parts th{background:var(--soft);font-size:12px;padding:5px;border:1px solid #dfe3e8;text-align:center}
table.parts td{padding:3px 4px;border:1px solid #dfe3e8}
table.parts input{text-align:center}
table.parts input.nm{text-align:left}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.sigbox{border:1px solid #9aa1a9;border-radius:4px;height:92px;background:#fff;position:relative}
.sigbox canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.sigbox .ph{position:absolute;left:8px;bottom:5px;font-size:11px;color:#aaa;pointer-events:none}
.sigtools{margin-top:5px;display:flex;gap:8px;align-items:center;font-size:12px;color:#666;flex-wrap:wrap}
.sigtools input{width:auto;flex:1;min-width:110px}

.item{display:flex;gap:10px;align-items:center;border:1px solid #e1e4e8;border-radius:8px;padding:10px 12px;margin-bottom:8px;background:#fff}
.item .meta{flex:1;min-width:0}
.item .meta b{font-size:13px;font-weight:500}
.item .meta div{font-size:12px;color:#777;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{padding:2px 8px;border-radius:10px;font-size:11px}
.tag.wait{background:#fdf1e3;color:#96601a}
.tag.done{background:#e6f4ec;color:#1d7a4d}
.tag.go{background:#e8f0fe;color:#1a4f9c}
.tag.no{background:#fdecea;color:#a12622}

.linkbox{display:flex;gap:8px;align-items:center;background:var(--soft);border:1px dashed #b9c0c8;border-radius:8px;padding:10px 12px;margin-top:10px;flex-wrap:wrap}
.linkbox input{flex:1;min-width:220px;border:1px solid #ccd1d7;background:#fff;padding:6px 8px;border-radius:5px;font-size:12px}

.share{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.qrwrap{margin-top:10px;background:var(--soft);border:1px solid #dfe3e8;border-radius:8px;padding:12px;display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.qrwrap canvas{width:200px;height:200px;background:#fff;border:1px solid #dfe3e8;border-radius:6px;padding:4px}
.qrwrap .muted{flex:1;min-width:180px}
.tipbox{margin-top:10px;background:#fff8e6;border:1px solid #e8d9a8;border-radius:8px;padding:10px 12px;font-size:12px;line-height:1.85;color:#5c4a15}
.wxbar{background:#fff8e6;border-bottom:1px solid #e8d9a8;padding:9px 14px;font-size:12px;line-height:1.7;color:#5c4a15;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wxbar button{flex:0 0 auto}

/* ---------- 报告正文（A4） ---------- */
.paperwrap{background:#fff;border:1px solid #dfe3e8;border-radius:10px;padding:16px;margin-bottom:12px}
.paper{width:210mm;min-height:250mm;margin:0 auto;background:#fff;padding:10mm 12mm;box-shadow:0 1px 5px rgba(0,0,0,.12);color:#000}
.paper .hd{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:2px solid #000;padding-bottom:5px}
.paper .hd .co{font-size:17px;font-weight:700;letter-spacing:2px;margin:0}
.paper .hd .co2{font-size:12px;color:#333}
.paper .hd .co3{font-size:10px;color:#666;letter-spacing:0;margin-top:1px}
.paper .tt{text-align:center;margin:9px 0 3px}
.paper .tt b{display:block;font-size:19px;letter-spacing:6px}
.paper .tt span{font-size:11px;letter-spacing:2px;color:#444}
.paper .addr{font-size:10.5px;color:#333;text-align:center;border-bottom:1px solid #000;padding-bottom:4px}
/* 表格故意少占 0.5mm：宽度正好等于可打印区宽度时，最后那条竖框线有一半落在
   可打印区之外，导出 PDF / 打印时会被削成一缕灰线，看着就像「最右边的表格线没了」。
   留 0.5mm 余量，右边框线完整落在区内，左边框一样粗。页眉那两条横线跟着缩，
   免得它们比表格右边框多伸出 0.5mm 对不齐。 */
.paper table{width:calc(100% - 0.5mm);border-collapse:collapse;margin-top:5px}
.paper .hd,.paper .addr,.paper .stamp{margin-right:.5mm}
/* 上下内边距从 4px 压到 3px：一行省 2px，一张单二十来行就是 1cm 多，
   正好抵掉「故障描述 / 工作内容各留三行」多出来的高度，长单才不会顶到页脚 */
.paper td,.paper th{border:1px solid #000;padding:3px 5px;font-size:12px;vertical-align:top}
.paper td.lab{background:#f2f4f6;width:1%;white-space:nowrap;font-size:11.5px}
.paper .sub{font-size:9.5px;color:#666;font-weight:400}
.paper td.num{text-align:right}
/* min-width 是防止「空字段格子被压没」的关键：
   表格用自动布局时，没有内容的列最小内容宽度是 0，剩下空间全被
   有内容的列抢走 —— 于是客户叫修时间那种没填的格子会塌成一指宽。
   26mm 大约是一个标签竖排两字再加左右内边距，够撑住签字或手写补填。 */
.paper td.pv{min-height:18px;min-width:26mm;word-break:break-all;white-space:pre-wrap}
/* 故障描述 / 工作内容：不管填没填、填多少，正文区都要留出手写空间。
   4.65em = 行高 1.55 × 3 行，6.2em = 4 行，9.3em = 6 行；用 em 是为了跟着字号走，改字号不用重算。
   min-height 必须给到格子里那层 div：写在 td 上浏览器是不认的（上面那行 min-height 就是个老实说没用的）。
   行数是量出来的（无头 Edge 打印实测）：单价/总价两列 + 工时费/差旅费/共计三行去掉后，
   故障描述 4 行 + 工作内容 6 行 = 266mm / 可打印 277mm，留 11mm 余量；
   两个都提到 6 行会到 275.9mm，只剩 1mm，不能要 —— 零件每多一行还要再吃 6.8mm。 */
.paper td.pv .fill{min-height:4.65em}
.paper td.pv .fill-fault{min-height:6.2em}
.paper td.pv .fill-work{min-height:9.3em}
.paper .ask{margin-top:3px}
.paper .sigcell{height:74px;position:relative}
.paper .sigcell img{max-height:70px;max-width:100%}
.paper .signs{display:flex;gap:16px;margin-top:6px}
.paper .signs>div{flex:1}
.paper .sigline{border-top:1px solid #000;margin-top:3px;padding-top:2px;font-size:11.5px}
.paper .stamp{margin-top:8px;border:1px dashed #999;padding:6px 8px;font-size:10.5px;color:#444;line-height:1.7}
.paper .foot{font-size:9.5px;color:#777;margin-top:5px;line-height:1.6}

@media print{
  /* 左右留 12mm，和屏幕上 .paper 的内边距一致，打印稿才和页面版式等宽 */
  @page{size:A4 portrait;margin:10mm 12mm}
  /* 兜底：标签列必须不换行，否则 width:1% 会把列压到 1 个汉字宽 */
  .paper td.lab{white-space:nowrap}
  /* 签字区和留痕块不许被分页切开 —— 内容长到要翻页时整块推到下一页，
     否则会出现「签名在上一页、签署人日期在下一页」这种不能签字的状态 */
  .paper .signs,.paper .stamp{break-inside:avoid;page-break-inside:avoid}
  body{background:#fff}
  .topbar,.tabs,.ui,.noprint{display:none !important}
  .wrap{max-width:none;padding:0;margin:0}
  .paperwrap{border:0;padding:0;margin:0;border-radius:0}
  .paper{width:auto;min-height:auto;margin:0;padding:0;box-shadow:none}
}
/* 只对屏幕生效 —— 不带 screen 的话，A4 可打印宽度(~718px)也会命中它，
   打印时标签列会被切成竖排单字 */
@media screen and (max-width:820px){
  .paper{width:auto;min-height:auto;padding:10px;box-shadow:none}
  .paperwrap{padding:8px}
  .paper td.lab{white-space:normal}
}