:root { --line:#d5d9e0; --ink:#1c2330; --muted:#6b7280; --red:#c02626; --ok:#1c7a3e; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Microsoft YaHei","SimSun",Arial,sans-serif; color:var(--ink); background:#f5f6f8; font-size:14px; }
.topbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:#20304a; color:#fff; padding:10px 16px; }
.topbar .brand { font-weight:700; font-size:16px; }
.topbar nav { display:flex; gap:14px; flex-wrap:wrap; }
.topbar a { color:#dfe6f2; text-decoration:none; }
.topbar a:hover { color:#fff; text-decoration:underline; }
.topbar .who { margin-left:auto; font-size:13px; color:#cbd5e5; }
.page { max-width:1280px; margin:16px auto; padding:0 16px 48px; }
.card { background:#fff; border:1px solid var(--line); border-radius:6px; padding:14px 16px; margin-bottom:14px; }
h1 { font-size:19px; margin:0 0 10px; }
h2 { font-size:16px; margin:14px 0 8px; }
table { border-collapse:collapse; width:100%; background:#fff; }
th, td { border:1px solid var(--line); padding:5px 8px; text-align:left; vertical-align:top; }
th { background:#eef1f6; font-weight:600; white-space:nowrap; }
td.num { text-align:right; font-variant-numeric:tabular-nums; }
td.codes, .codes { font-size:12px; line-height:1.5; word-break:break-all; max-width:260px; }
tr.diff td { background:#fff4f4; }
.flash { padding:9px 12px; border-radius:5px; margin-bottom:12px; }
.flash.error { background:#fdeaea; border:1px solid #efb3b3; color:var(--red); font-weight:600; }
.flash.ok { background:#eaf6ee; border:1px solid #b7dcc2; color:var(--ok); }
/* 提示固定浮在窗口上方：页面往下翻到「纸质表单与签署件」再上传时，成功和失败的话都看得见 */
.flashbox { position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:90; width:min(760px,92vw);
  animation: flashfade .45s ease 7s forwards; }
.flashbox .flash { box-shadow:0 3px 14px rgba(20,30,55,.28); margin-bottom:6px; }
@keyframes flashfade { to { opacity:0; visibility:hidden; } }
input[type=text], input[type=password], input[type=number], select, textarea {
  padding:5px 7px; border:1px solid #b9c0cc; border-radius:4px; font-size:14px; font-family:inherit; width:100%; }
label { display:block; margin:8px 0 3px; font-size:13px; color:var(--muted); }
button, .btn { padding:6px 14px; border:1px solid #26436f; background:#26436f; color:#fff; border-radius:4px;
  font-size:14px; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover, .btn:hover { background:#1b3357; }
button.warn { background:#8a2b2b; border-color:#8a2b2b; }
button.ghost { background:#fff; color:#26436f; }
button.link { background:none; border:0; color:#26436f; text-decoration:underline; padding:0 4px; font-size:13px; }
.topbar button.link { color:#dfe6f2; }
button.warnbtn { background:#8a2b2b; border-color:#8a2b2b; padding:0 7px; font-size:12px; line-height:1.4; }
button.link.warnbtn { color:#fff; }
.uprow { display:flex; gap:8px; align-items:flex-start; padding:5px 0; border-bottom:1px dashed #dfe4ee; }
.uprow:last-child { border-bottom:0; }
.thumb { width:92px; height:70px; object-fit:cover; border:1px solid #c3cddd; border-radius:3px; display:block; }
.upmeta { flex:1 1 auto; min-width:0; }
.upmeta .hint { display:block; }
.ackform { display:inline-flex; gap:4px; align-items:center; margin-left:6px; }
.ack { font-size:12px; color:var(--muted); white-space:nowrap; }
.ack input { width:auto; margin:0; vertical-align:middle; }
.inline { display:inline; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.col { flex:1 1 220px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pill { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; background:#e6ebf3; color:#2c3e5c; }
.pill.red { background:#fbdcdc; color:#a02020; font-weight:700; }
.pill.amber { background:#fdf0d5; color:#8a5a12; font-weight:700; }
.pill.green { background:#dff1e3; color:#1c7a3e; }
.hint { color:var(--muted); font-size:12px; margin-top:4px; }
.banner-red { background:#fbdcdc; border:1px solid #e79b9b; color:#8f1d1d; padding:10px 12px; border-radius:5px; font-weight:700; margin-bottom:12px; }
dl.kv { display:grid; grid-template-columns:130px 1fr; gap:4px 10px; margin:0; }
dl.kv dt { color:var(--muted); font-size:13px; }

/* 手写签名板 */
.sigpad { margin:10px 0 4px; touch-action:none; }
.sigrow { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; touch-action:none; }
.sigcanvas { width:100%; max-width:520px; height:150px; background:#fff;
  border:1px solid #26436f; border-radius:4px; cursor:crosshair;
  /* 手机上让浏览器别再把手指当翻页手势：整块（含外框、行、画布）都不响应滚动/双击缩放，
     否则一笔下去页面跟着走，还会把这一划切成 pointercancel 断掉。 */
  touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  background-image:linear-gradient(transparent 82%, #cfd7e6 82%); }
.sigside { flex:1 1 190px; }
.sigwarn { display:none; color:var(--red); font-size:13px; font-weight:700; margin-top:6px; }
.sigpad.sigempty .sigwarn { display:block; }
.sigpad.sigempty .sigcanvas { border-color:#a02020; }
img.sigthumb { height:34px; vertical-align:middle; border:1px solid #d3dae8; background:#fff; }
@media (max-width:620px){ .sigcanvas { max-width:100%; height:170px; } .sigside { flex:1 1 100%; } }
dl.kv dd { margin:0; }
.na { color:#9aa3af; }