:root{
  --bg:#eef1f6;
  --panel:#ffffff;
  --line:#e3e8ef;
  --text:#1c2530;
  --muted:#6b7787;
  --primary:#1f4d8f;
  --primary-hover:#173c72;
  --red:#ff0000;
  --blue:#3f7fd0;
  --purple:#8064a2;
  --radius:12px;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

/* ---------------- 顶栏 ---------------- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{margin:0;font-size:16px;font-weight:600;letter-spacing:.2px}
.brand .dot{width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#548DD4,#1f4d8f)}
.topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;cursor:pointer;font-family:inherit;transition:.15s}
.badge:hover{border-color:var(--primary);color:var(--primary)}
button.badge{appearance:none}
.badge-ok{background:#eaf6ee;border-color:#bfe3cb;color:#1d7a41}
.badge-warn{background:#fff7e6;border-color:#f5d9a3;color:#8a5a00}
.badge-gray{background:#f3f5f8}

/* ---------------- 按钮 ---------------- */
.btn{
  appearance:none;border:1px solid var(--line);background:#fff;color:var(--text);
  padding:8px 14px;border-radius:9px;font-size:13px;cursor:pointer;
  transition:.15s ease;font-family:inherit;
}
.btn:hover{background:#f7f9fc}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.btn-primary:hover{background:var(--primary-hover)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{background:#f3f5f8;color:var(--text)}
.btn-block{width:100%;padding:12px;font-size:15px}

/* ---------------- 布局 ---------------- */
.layout{
  display:grid;grid-template-columns:minmax(360px,440px) 1fr;
  gap:16px;padding:16px;align-items:start;max-width:1680px;margin:0 auto;
}
@media (max-width:1080px){ .layout{grid-template-columns:1fr} }

.panel{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.panel-title{margin:0 0 12px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.panel-title .sub{font-weight:400;color:var(--muted);font-size:12px}
.form-panel .panel-title:not(:first-child){margin-top:22px;padding-top:16px;border-top:1px dashed var(--line)}

/* ---------------- 表单 ---------------- */
.field{margin-bottom:14px}
.field label{display:flex;align-items:center;gap:8px;font-size:13px;color:#38414f;margin-bottom:6px;font-weight:500}
.field input[type=text],.field input[type=date],.field textarea,.field select{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  font-size:14px;font-family:inherit;color:var(--text);background:#fff;outline:none;transition:.15s;
}
.field textarea{resize:vertical;line-height:1.7}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,77,143,.1)}
.tag{font-style:normal;font-size:11px;font-weight:500;padding:2px 7px;border-radius:5px;line-height:1.6}
.tag-red{background:#ffeceb;color:#c40000}
.tag-blue{background:#eaf1fb;color:#1f4d8f}
.tag-purple{background:#f2edf8;color:#5f4a80}
.hint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.6}

/* ---------------- 照片 ---------------- */
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photo-slot{
  position:relative;aspect-ratio:171.8/212.1;border:1.5px dashed #c6cfdb;border-radius:10px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;
  background:#fafbfd;transition:.15s;color:var(--muted);
}
.photo-slot:hover{border-color:var(--primary);background:#f4f8ff}
.photo-empty{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;pointer-events:none}
.photo-slot img{width:100%;height:100%;object-fit:contain;display:block;background:#fafbfd}
.photo-slot .remove{
  position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;border:none;cursor:pointer;font-size:14px;line-height:1;
}

.actions{margin-top:20px}
.result{margin-top:16px;padding:14px;border-radius:10px;background:#f7f9fc;border:1px solid var(--line);font-size:13px;line-height:1.8}
.result a{color:var(--primary);word-break:break-all}
.dl-btn{display:block;text-align:center;margin-top:10px;padding:13px 14px;border-radius:11px;background:var(--primary);color:#fff;font-size:15px;font-weight:600;text-decoration:none}
.dl-btn:active{background:var(--primary-hover)}
.copy-row{display:flex;gap:8px;margin-top:10px}
.copy-row input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;background:#fff;color:var(--text)}
.copy-row .btn{flex:0 0 auto;white-space:nowrap}
.result .row{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px}
.result .k{color:var(--muted);flex:0 0 62px}
.result .err{color:#c40000}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------------- 预览 ---------------- */
.preview-panel{padding:18px 18px 24px;position:sticky;top:73px}
.preview-head{display:flex;align-items:center;justify-content:space-between}
.zoom-label{font-size:12px;color:var(--muted)}
.preview-scroll{overflow:auto;max-height:calc(100vh - 150px);background:#e6eaf0;border-radius:10px;padding:16px}
.preview-stage{transform-origin:top left}

.a4{
  width:794px;/* 210mm @96dpi */
  min-height:1123px;
  background:#fff;
  /* LOGO 在真实文档里位于页眉（占用上页边距区域），这里同样贴到页顶 */
  padding:11.3px 56.7px 56.7px;
  box-shadow:0 2px 10px rgba(16,24,40,.14);
  font-family:SimSun,"宋体",serif;
  color:#000;
  font-size:16px;/* 12pt */
  line-height:1.3;/* 宋体 12pt 单倍行高 ≈ 15.6pt */
}
.doc-logo{display:block;width:151px;height:67px;object-fit:contain;object-position:left top;margin:0 0 3px}
.doc-title{text-align:center;font-size:24px;font-weight:700;letter-spacing:1px;margin:2px 0 12px}
.doc-meta{display:grid;grid-template-columns:400.75pt 1fr;margin-bottom:6px;white-space:pre}
.meta-spacer{margin-left:0}
.red{color:#ff0000}
.blue{color:#548DD4}
.purple{color:#8064A2}
/* 导出 PDF 时套用：所有字体统一为黑色（预览仍保留红蓝紫标识便于核对） */
.a4.plain-black .red,
.a4.plain-black .blue,
.a4.plain-black .purple{color:#000 !important}

.doc-table{width:100%;border-collapse:collapse;table-layout:fixed;border:1px solid #000}
.doc-table td{border:1px solid #000;padding:5px 5.4pt;vertical-align:middle;word-break:break-word;overflow-wrap:anywhere}
.doc-table .c-center{text-align:center}
.subject-cell{text-align:center;padding-right:4.5% !important}
.doc-table td.blue{color:#548DD4}
.doc-table .recv{padding:5px 5.4pt}
.recv-line{display:flex;justify-content:space-between;align-items:center;gap:6px}
.recv-item{white-space:nowrap}
.content-cell{vertical-align:top;padding:2px 5.4pt 8px !important}
.content-title{font-weight:700;line-height:20pt}
.body-line{line-height:23.4pt;text-indent:2em}
.photos{display:flex;align-items:flex-start;gap:2.6mm;margin:0 0 0 21.65pt;min-height:212.1pt}
.photos .ph{width:171.8pt;height:212.1pt;background:#f2f4f7;border:1px dashed #cfd6e0;display:flex;align-items:center;justify-content:center;color:#98a2b3;font-size:13px;overflow:hidden;flex:0 0 auto}
.photos .ph.has-img{border:none;background:#fff}
.photos .ph img{width:100%;height:100%;object-fit:contain}
.sign-block{margin-left:230pt;margin-top:23.4pt;line-height:31.2pt}
.doc-note{margin-top:6px;font-size:14px}

/* ---------------- 弹层 ---------------- */
.modal{position:fixed;inset:0;background:rgba(16,24,40,.45);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal[hidden]{display:none}
.modal-card{background:#fff;border-radius:14px;padding:20px;width:min(680px,100%);max-height:86vh;overflow:auto;box-shadow:0 20px 60px rgba(16,24,40,.25)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.modal-head h3{margin:0;font-size:15px}
.cfg-table{width:100%;border-collapse:collapse;margin:12px 0}
.cfg-table th{text-align:left;font-size:12px;color:var(--muted);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line)}
.cfg-table td{padding:4px 6px 4px 0}
.cfg-table input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:13px;outline:none}
.cfg-table input:focus{border-color:var(--primary)}
.cfg-table .del{background:transparent;border:none;color:#c40000;cursor:pointer;font-size:16px}
.modal-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn-row{display:inline-flex;gap:8px}
.modal-card code{background:#f3f5f8;padding:1px 6px;border-radius:5px;font-size:12px;word-break:break-all}
.adv{margin:14px 0 4px;border-top:1px dashed var(--line);padding-top:12px}
.adv summary{cursor:pointer;font-size:13px;color:var(--muted);margin-bottom:10px;user-select:none}
.adv .field{margin-bottom:10px}

/* ==================== 访问密码遮罩 ==================== */
.gate{position:fixed;inset:0;z-index:200;background:linear-gradient(135deg,#1f4d8f,#173c72);display:flex;align-items:center;justify-content:center;padding:24px}
.gate[hidden]{display:none}
.gate-card{background:#fff;border-radius:18px;padding:30px 26px;width:min(360px,100%);box-shadow:0 24px 70px rgba(0,0,0,.35);text-align:center}
.gate-logo{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,#548DD4,#1f4d8f);margin:0 auto 12px}
.gate-card h2{margin:0 0 4px;font-size:19px;font-weight:700}
.gate-card .g-hint{color:var(--muted);font-size:13px;margin:0 0 18px}
.gate-card input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:11px;font-size:18px;letter-spacing:6px;text-align:center;outline:none;font-family:inherit;margin-bottom:14px}
.gate-card input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,77,143,.12)}
.gate-card .g-err{color:#c40000;font-size:13px;min-height:18px;margin-top:10px}
/* 未通过前隐藏主区域，避免内容闪现 */
.gate:not([hidden]) ~ main{display:none}

/* ==================== 移动端排版 ==================== */
/* 移动端：录入 / 预览 切换，避免上下堆叠过长导致页面混乱 */
.tabs{display:none}
@media (max-width:760px){
  .tabs{display:flex;gap:8px;padding:10px 14px 0;position:sticky;top:0;z-index:25;background:var(--bg)}
  .tab{flex:1;padding:11px 8px;border:1px solid var(--line);background:#fff;border-radius:9px;font-size:14px;font-family:inherit;color:var(--muted);cursor:pointer}
  .tab.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
  .layout.show-preview .form-panel{display:none}
  .layout.show-form .preview-panel{display:none}

  .topbar{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 14px}
  .brand{width:100%}
  .brand h1{font-size:15px}
  .brand .badge{display:none}
  .topbar-actions{align-self:flex-end}
  .layout{grid-template-columns:1fr;padding:10px;gap:12px}
  .panel{padding:14px}
  .panel-title{font-size:13px}
  .panel-title .sub{display:block;margin-top:2px}
  .field{margin-bottom:12px}
  .field label{font-size:12px}
  .field input[type=text],.field input[type=date],.field textarea,.field select{font-size:16px;padding:11px 12px}
  .preview-panel{position:static;top:auto}
  .preview-scroll{max-height:none;padding:12px}
  .photo-grid{gap:8px}
  .actions{margin-top:14px}
  .actions .btn-row{flex-direction:column}
  .actions .btn-row .btn{width:100%}
  .modal{padding:12px}
  .modal-card{padding:16px;width:100%}
  .modal-actions{flex-direction:column-reverse}
  .modal-actions .btn{width:100%}
}
@media (max-width:380px){
  .doc-table td{padding:4px 3px;font-size:13px}
}