:root{
  --navy:#14304F; --navy-mid:#1D4470; --navy-soft:#E7ECF1;
  --ink:#2B3440; --ink2:#5A6673; --ink3:#8A949F;
  --line:#DCE2E8; --line2:#B9C2CC; --tint:#F5F7F9; --tint2:#EEF2F6; --brass:#8C6D3F;
  --fs-title:19px; --pad-x:14mm; --pad-y:11mm;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{
  background:#E7EBEF; color:var(--ink);
  font-family:"Inter","Helvetica Neue",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:12px; line-height:1.6; -webkit-font-smoothing:antialiased;
  padding:16px 0 50px;
}

/* ═══ 顶部工具条 ═══ */
.bar{
  width:210mm; margin:0 auto 10px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.tabs{ display:flex; gap:0; border:1px solid var(--line2); border-radius:2px; overflow:hidden; }
.tab{
  font:inherit; font-size:12px; font-weight:600; letter-spacing:.03em;
  padding:8px 16px; border:0; cursor:pointer; white-space:nowrap;
  background:#fff; color:var(--ink2); border-right:1px solid var(--line);
  transition:background .14s, color .14s;
}
.tab:last-child{ border-right:0; }
.tab:hover{ background:var(--tint); }
.tab.on{ background:var(--navy); color:#fff; }
.tab .tg{ font-size:9px; opacity:.65; margin-right:5px; letter-spacing:.1em; }

.bar .sp{ flex:1; }
.btn{
  font:inherit; font-size:11.5px; font-weight:600; letter-spacing:.03em;
  color:#fff; background:var(--navy); border:0; border-radius:2px;
  padding:7px 14px; cursor:pointer; white-space:nowrap; flex:none;
  transition:background .14s;
}
.btn:hover{ background:var(--navy-mid); }
.btn.ghost{ background:#fff; color:var(--ink2); border:1px solid var(--line2); font-weight:500; }
.btn.ghost:hover{ background:var(--tint); color:var(--ink); }
#flash{ font-size:11.5px; color:var(--brass); opacity:0; transition:opacity .2s; flex:none; }
#flash.show{ opacity:1; }
/* 翻译额度徽标：仅「确有内容改动」计 1 次；其余缓存/预过滤/无变化均不计 */
.quota-badge{
  font-size:11px; font-weight:500; letter-spacing:.02em; white-space:nowrap; flex:none;
  color:var(--ink3); background:#F4F8FC; border:1px solid var(--line2); border-radius:2px;
  padding:5px 9px; cursor:default; user-select:none;
}
/* 批量新增行：行数输入框 + 确认按钮，与工具条风格一致 */
.add-box{ display:inline-flex; align-items:center; gap:6px; flex:none; }
.add-box .add-lbl{ font-size:11px; color:var(--ink3); white-space:nowrap; }
.add-num{ width:60px; font:inherit; font-size:12px; padding:6px 8px; border:1px solid var(--line2);
  border-radius:2px; color:var(--ink); text-align:center; }
.add-num:focus{ outline:none; border-color:var(--navy-mid); background:#F4F8FC; }
/* 去掉 number 输入框右侧微调箭头，保持工具条清爽 */
.add-num::-webkit-outer-spin-button,
.add-num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.add-num{ -moz-appearance:textfield; }

/* ═══ A4 页面 ═══ */
.page{
  width:210mm; min-height:296mm; margin:0 auto;
  padding:var(--pad-y) var(--pad-x) 5mm;
  background:#fff; position:relative;
  box-shadow:0 1px 3px rgba(20,48,79,.10), 0 14px 40px rgba(20,48,79,.10);
  display:flex; flex-direction:column;
}
.page::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--navy); }

/* ═══ 1 抬头 ═══ */
.head{ display:flex; align-items:flex-start; gap:14px; padding-bottom:11px; }
.logo-slot{
  width:78px; height:78px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.logo-slot img{
  width:72px; height:auto; max-height:72px; display:block;
  image-rendering:auto;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}

.co{ flex:1; min-width:0; padding-top:2px; }
.co-name{ font-size:15px; font-weight:700; color:var(--navy); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.co-name-en{ font-size:8px; font-weight:500; letter-spacing:.06em; color:var(--ink3);
  text-transform:uppercase; margin-top:3px; line-height:1.35;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.co-meta{ margin-top:7px; font-size:9.5px; line-height:1.7; color:var(--ink2); }
/* 供方联系信息三行结构：地址 / 电话+邮箱 / 网址
   —— 每行独立成块，长内容换行而不被右侧单据栏裁切 */
.co-meta{ margin-top:7px; font-size:9.5px; line-height:1.6; color:var(--ink2); }
#coContact{ display:block; min-width:0; }
/* 每行一个字段：标签列固定 36px（容纳最长标签 Contact），内容列自适应。
   值列统一盒模型（同字号/行高/字重/vertical-align）——地址、联系人、电话、
   邮箱、网址五种值元素严丝合缝对齐成一列；网址仅以强调色区分，不加粗。 */
.co-meta .co-row{
  display:grid; grid-template-columns:36px minmax(0,1fr);
  align-items:baseline; column-gap:6px;
  min-width:0; margin-bottom:1px;
}
.co-meta .co-row > .pick,
.co-meta .co-row > .co-val,
.co-meta .co-row > .co-url{
  font-size:9.5px; line-height:15.2px; font-weight:400;
  vertical-align:baseline; min-width:0;
  /* 固定盒高：三种值元素（pick/co-val/co-url）内容布局一致，bottom 严格齐平，
     一列下来严丝合缝。虚线用背景绘制，不占盒高。 */
  height:16px; box-sizing:border-box;
}
.co-meta .co-row > span{ min-width:0; }
.co-lbl{
  font-size:9px; color:var(--ink3); letter-spacing:.02em;
  /* 左对齐：标签列第一个字（左缘）五五对齐——右对齐会让三字标签「联系人」
     比两字标签左缘凸出，视觉参差 */
  text-align:left; white-space:nowrap;
}
.co-meta .co-row > .pick{
  justify-self:start; max-width:100%;
  overflow:hidden; text-overflow:ellipsis;
  /* 虚线改用背景绘制而非 border-bottom：border 会占 1px 盒高，导致电话/邮箱行
     比地址/网址行底部低 1px。背景虚线零盒高占用，五行值元素盒高严格一致。 */
  border-bottom:0;
  background-image:linear-gradient(to right, var(--line2) 0 3px, transparent 3px 6px);
  background-size:6px 1px; background-repeat:repeat-x; background-position:0 100%;
  padding-right:12px;
}
/* 已选中的项虚线淡一点，避免整页都是横线 */
.co-meta .co-row > .pick:hover{
  border-bottom-color:var(--navy-mid);
  background-image:linear-gradient(to right, var(--navy-mid) 0 3px, transparent 3px 6px);
}
.co-url{
  font-size:9.5px; color:var(--navy-mid);
  letter-spacing:.02em; white-space:nowrap;
}
/* 供方附加固定信息（coExtra：国家/联系人/ID-VAT/EORI）—— 盒模型与 .pick 一致，保证成列对齐 */
.co-val{ font-size:9.5px; color:var(--ink2); font-weight:400; }
.co-meta div{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.co-meta i{ color:var(--line2); font-style:normal; margin:0 5px; }

.doc-id{ text-align:right; flex:none; width:47mm; padding-top:1px; }
.doc-title{ font-size:var(--fs-title); font-weight:700; line-height:1.1; color:var(--navy); }
.doc-sub{ font-size:7px; font-weight:600; letter-spacing:.14em; color:var(--ink3);
  text-transform:uppercase; margin-top:3px; }
.doc-rows{ margin-top:10px; }
.doc-row{ display:flex; justify-content:flex-end; gap:10px; font-size:10.5px; line-height:1.75; }
.doc-row .k{ color:var(--ink3); white-space:nowrap; }
.doc-row .v{ color:var(--ink); font-weight:600; min-width:110px; text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.rule{ height:2px; background:var(--navy); }
.rule-thin{ height:1px; background:var(--line2); margin-top:2px; }

/* ═══ 2 客户区 ═══ */
.block{ margin-top:13px; }
.block-head{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.block-head .cn{ font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--navy); }
.block-head .en{ font-size:8.5px; font-weight:600; letter-spacing:.2em; color:var(--ink3); text-transform:uppercase; }
.block-head::after{ content:""; flex:1; height:1px; background:var(--line); }

.cust{ background:var(--tint); border:1px solid var(--line); border-radius:2px;
  padding:10px 14px; display:grid; grid-template-columns:1fr 1fr; gap:8px 32px; }
.field{ display:flex; gap:8px; align-items:baseline; min-width:0; }
.field .k{ font-size:10.5px; color:var(--ink3); white-space:nowrap; flex:none; width:52px; }
.field .v{ font-size:11.5px; color:var(--ink); font-weight:500; min-width:0; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.field.span2{ grid-column:1 / -1; }
.field.span2 .v{
  white-space:normal; line-height:1.45;      /* 长地址换行显示，不截断 */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ═══ 3 明细表 ═══ */
table.items{ width:100%; border-collapse:collapse; table-layout:fixed;
  border:1px solid var(--line2); }
col.c-no{width:5%} col.c-name{width:26%} col.c-spec{width:27%}
col.c-qty{width:6%} col.c-price{width:10%} col.c-disc{width:7%}
col.c-amt{width:17%} col.c-del{width:22px}

table.items thead th{
  background:var(--navy); color:#fff; font-size:11px; font-weight:600; letter-spacing:.08em;
  padding:8px 7px; text-align:left; border:1px solid rgba(255,255,255,.22); white-space:nowrap;
}
table.items thead th.r{ text-align:right; }
table.items thead th.c{ text-align:center; }
table.items tbody td{
  padding:7px 7px; font-size:12px; border:1px solid var(--line2);
  vertical-align:middle; line-height:1.45;
}
table.items tbody tr:nth-child(even) td{ background:#FAFBFC; }
td.c-no{ text-align:center; color:var(--ink3); font-variant-numeric:tabular-nums; }
td.c-name{ font-weight:600; }
td.c-model{ font-weight:600; font-size:11px; }
td.c-spec{ color:var(--ink2); font-size:11.5px; }
td.c-qty,td.c-price,td.c-disc,td.c-amt{ text-align:right; font-variant-numeric:tabular-nums; font-size:12.5px; }
td.c-disc{ color:var(--ink2); font-size:11.5px; }
td.c-amt{ font-weight:600; }
tfoot td{
  background:var(--navy-soft); font-size:11px; font-weight:700; color:var(--navy);
  letter-spacing:.12em; padding:7px; border:1px solid var(--navy); text-align:right;
}
tfoot td.lbl{ text-align:right; }
tfoot td.c{ text-align:center; }

td.c-del{ padding:0 2px; }
td.c-del button{
  width:16px; height:16px; line-height:1; padding:0; border:0; border-radius:2px; cursor:pointer;
  background:transparent; color:var(--line2); font-size:13px; opacity:0; transition:opacity .12s,color .12s;
}
table.items tbody tr:hover td.c-del button{ opacity:1; }
td.c-del button:hover{ color:#B4453C; background:#F5E9E8; }

/* ═══ 4 汇总 ═══ */
.sum{ display:flex; justify-content:flex-end; margin-top:13px; }
.sum-box{ width:88mm; }
.sum-line{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:2.5px 0; font-size:11px; color:var(--ink2); }
.sum-line .v{ font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600;
  min-width:88px; text-align:right; }
.sum-line.sub .v{ color:var(--ink2); font-weight:500; }
.sum-line.disc .v{ color:var(--brass); }
.sum-total{ margin-top:7px; padding-top:11px 0 0; border-top:2px solid var(--navy);
  display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.sum-total .k{ font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--navy); }
.sum-total .v{ font-size:20px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; line-height:1.1; }
.sum-total .cur{ font-size:12px; font-weight:600; margin-right:3px; color:var(--ink2); }
/* 合计可编辑覆盖：用 .sum-total/.r 前缀提高优先级，压过通用 [contenteditable] 的透明虚线 */
.sum-total .tot-edit, td.r .tot-edit{ display:inline-block; min-width:64px; border-bottom:1px dashed var(--line2);
  padding:0 2px; cursor:text; }
.sum-total .tot-edit:hover, td.r .tot-edit:hover{ border-bottom-color:var(--navy-mid); }
.sum-total .tot-edit:focus, td.r .tot-edit:focus{ outline:none; border-bottom-color:var(--navy-mid); background:#F4F8FC; }
/* 手动覆盖标记 + 恢复自动按钮 */
.ov-tag{ display:inline-block; margin-left:6px; font-size:9px; font-weight:700; letter-spacing:.08em;
  color:#fff; background:var(--brass); border-radius:2px; padding:1px 4px; vertical-align:middle; }
.tot-reset{ margin-left:6px; border:1px solid var(--line2); background:#fff; color:var(--ink2);
  border-radius:3px; cursor:pointer; font-size:12px; line-height:1; padding:2px 5px; vertical-align:middle; }
.tot-reset:hover{ border-color:var(--navy-mid); color:var(--navy); }
.sum-upper{ margin-top:9px; background:var(--tint); border-left:2px solid var(--brass);
  padding:8px 12px; display:flex; gap:10px; align-items:baseline; }
.sum-upper .k{ font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--brass);
  white-space:nowrap; flex:none; }
.sum-upper .v{ font-size:12.5px; font-weight:600; color:var(--ink); letter-spacing:.02em; line-height:1.5; }

/* ═══ 5 条款 ═══ */
.terms{ margin-top:14px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 24px;
  border-top:1px solid var(--line); }
.term{ display:flex; gap:8px; align-items:baseline; padding:5px 0; border-bottom:1px dotted var(--line); }
.term .k{ font-size:10px; font-weight:700; color:var(--navy); white-space:nowrap; flex:none; width:44px; }
.term .v{ font-size:10.5px; color:var(--ink2); line-height:1.5; min-width:0; }

.signs{ margin-top:14px; display:flex; gap:40px; }
.sign{ flex:1; min-width:0; }
/* 签署标题行：仅标题 */
.sign-cap{ font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--ink3); margin-bottom:8px; }
.sign-cap-t{ white-space:nowrap; }
/* 签署底线：签字 / 盖章 / 日期 三个子区域等宽均分（grid repeat(3,1fr)），
   列间距一致（column-gap）、底部对齐（align-items:end），1fr 自动铺满整行可用横向空间。 */
.sign-line{ position:relative; border-top:1px solid var(--line2); min-height:150px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:28px;
  align-items:end; }
/* 每个子区域：统一的「标签 + 填写线」结构，三者宽度、基线、留白完全一致 */
.sig-cell{ position:relative; display:flex; align-items:flex-end; gap:3px;
  min-width:0; min-height:18px; padding-bottom:2px; }
.sig-cell .s{ font-size:10px; color:var(--ink3); white-space:nowrap; flex:none; }
.sig-cell .s-date-lbl{ font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--ink3);
  white-space:nowrap; flex:none; }
/* 统一填写线（签字/盖章）：撑满本列剩余宽度，三段长度一致、水平对齐 */
.sig-fill{ flex:1 1 auto; min-width:0; min-height:13px; border-bottom:1px dashed var(--line2); }
/* 签字 / 盖章：浮于本列填写线上方（绝对定位 + 最高层级 + 轻微旋转，模拟真实落款盖印）；
   图片按 max-height/max-width 等比缩放，不越出所属子区域。 */
.sign-sig{ position:absolute; left:50%; bottom:17px; height:auto; width:auto;
  max-height:70px; max-width:100%; z-index:5;
  transform:translateX(-50%) rotate(-6deg); pointer-events:none; image-rendering:auto;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.sign-stamp{ position:absolute; left:50%; bottom:17px; height:auto; width:auto;
  max-height:100px; max-width:100%; z-index:6;
  transform:translateX(-50%) rotate(-13deg); pointer-events:none; image-rendering:auto;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; }
/* 签署日期（可编辑填写位）：与 .sig-fill 同款虚线，min-height 保证留空时填写位可见；
   选择器加 .sig-cell 前缀提高优先级，压过通用 [contenteditable] 的透明虚线。 */
.sig-cell .sign-date{ flex:1 1 auto; display:inline-block; min-width:0; min-height:13px;
  border-bottom:1px dashed var(--line2); padding:0 2px; color:var(--ink); }
.sig-cell .sign-date:hover{ border-bottom-color:var(--navy-mid); }
.sig-cell .sign-date:focus{ outline:none; border-bottom-color:var(--navy-mid); background:#F4F8FC; }

/* 旧虚拟印章已替换为真实业务章图片，此处隐藏 */
.stamp{ display:none; }

/* ═══ 6 页脚 ═══ */
.foot{ margin-top:auto; padding-top:10px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:10px; font-size:9.5px; color:var(--ink3); }
.foot .sp{ flex:1; }
.foot b{ color:var(--ink2); font-weight:600; }
.foot-logo{
  height:26px; width:auto; flex:none; display:block;
  image-rendering:auto; -webkit-print-color-adjust:exact; print-color-adjust:exact;
}

/* ═══ 可编辑 ═══ */
[contenteditable]{ outline:none; border-bottom:1px dashed transparent; border-radius:1px;
  transition:border-color .15s, background .15s, box-shadow .15s; cursor:text; }
[contenteditable]:hover{ border-bottom-color:var(--line2); }
[contenteditable]:focus{ border-bottom-color:var(--navy-mid); background:#F4F8FC;
  box-shadow:0 0 0 2px rgba(29,68,112,.08); }


/* ═══ 物流信息栏 ═══ */
.cust.logi{ background:#fff; border-style:dashed; }
.cust.logi .field .k{ width:72px; }
.cust.bank{ background:#fff; border-style:dashed; }

/* ═══ 货运备注（编号清单）═══ */
.notes-list{ border:1px solid var(--line); border-radius:2px; padding:4px 0; }
.nrow{ display:flex; gap:10px; padding:4px 14px; align-items:baseline; }
.nrow:nth-child(odd){ background:#FAFBFC; }
.nk{ font-size:10.5px; color:var(--navy); font-weight:600; white-space:nowrap; width:112px; flex:none; }
.nv{ font-size:11px; color:var(--ink); min-width:0; flex:1; }
/* 金额大写行：左侧黄铜色标记，与页面强调色呼应 */
.nrow.nw{ background:#FBF9F4 !important; }
.nrow.nw .nk{ color:var(--brass); }
.nrow.nw .nv{ font-weight:600; color:var(--navy); }
.nv:empty::before{ content:'-'; color:var(--ink3); }

/* ═══ HSN / 品牌 / 备注列 ═══ */
td.c-hsn{ font-variant-numeric:tabular-nums; color:var(--ink2); font-size:11px; white-space:nowrap; }
td.c-brand{ color:var(--ink2); font-size:10.5px; white-space:nowrap; }
td.c-remark{ color:var(--ink3); font-size:10.5px; white-space:nowrap; }

/* HSN 单行：货物表前统一标注（PI）；作为第一页独立行，与上一区块留出间距 */
.hsn-line{ font-size:10.5px; font-weight:600; color:var(--navy); letter-spacing:.02em;
  margin:10px 0 4px; padding-left:2px; }


/* ═══ PI/CI 紧凑版（真实单据内容多，压进 A4 一页）═══ */
/* 银行栏：2 列网格 + 更紧行距；账户名/银行地址占满整行 */
.cust.bank{ padding:8px 12px; gap:5px 24px; grid-template-columns:1fr 1fr; }
.cust.bank .field{ grid-column:span 1; }
.cust.bank .field .k{ width:70px; font-size:9.5px; }
.cust.bank .field .v{ font-size:10px; }
.cust.bank .field.wide{ grid-column:1 / -1; }

/* 货运明细：更紧 */
.notes-list{ padding:2px 0; }
.nrow{ padding:2.5px 12px; }
.nk{ font-size:10px; width:104px; }
.nv{ font-size:10.5px; }

/* 物流栏更紧 */
.cust.logi{ padding:8px 12px; gap:5px 24px; }
.cust.logi .field .k{ width:66px; font-size:9.5px; }
.cust.logi .field .v{ font-size:10.5px; }

/* PI/CI 区块间距压缩 */
body[data-doc="PI"] .block,
body[data-doc="CI"] .block{ margin-top:10px; }
body[data-doc="PI"] .block-head,
body[data-doc="CI"] .block-head{ margin-bottom:5px; }

/* ═══ 区块顺序（flex order）═══
   默认顺序（PI 对齐真实 RAM PI：客户 → HSN → 银行 → 条款 → 货物 → 备注 → 签署）
   CI/QT 把「条款」移到货物之后（商业惯例） */
.head{ order:0; }
#custWrap{ order:1; }
#logiWrap{ order:2; }
#hsnLine{ order:3; }
#bankWrap{ order:4; }
#termsBlock{ order:5; }
#goodsWrap{ order:6; }
#noteWrap{ order:7; }
#signsBlock{ order:8; }
.foot{ order:100; }
body[data-doc="CI"] #termsBlock{ order:7; }
body[data-doc="QT"] #termsBlock{ order:7; }

/* 货运备注：允许内部逐条断行，但单条不拆 */
.notes-list{ break-inside:auto; }
.nrow{ break-inside:avoid; }

/* PI：默认随内容流式排版，尽量压在单页 A4 内；
   仅当货物表过长时才允许自然跨页（表头重复），不再强制分页 */
body[data-doc="PI"] #goodsWrap{ margin-top:0; }
@media print{
  /* 长货物表允许跨页拆分（表头重复），不被整块锁在单页导致溢出 */
  body[data-doc="PI"] #goodsWrap{ break-inside:auto; }
}

/* ═══ PI 紧凑：进一步压缩各区块间距，使默认内容尽量压在单页 A4 内 ═══ */
body[data-doc="PI"] .head{ padding-bottom:5px; }
body[data-doc="PI"] .block{ margin-top:6px; }
body[data-doc="PI"] .block-head{ margin-bottom:2px; }
body[data-doc="PI"] .cust{ padding:5px 8px; }
body[data-doc="PI"] .field.span2 .v{ line-height:1.3; }
body[data-doc="PI"] .cust.bank{ padding:3px 6px; }
body[data-doc="PI"] .hsn-line{ margin:4px 0 2px; }
body[data-doc="PI"] table.items thead th{ padding:4px 5px; }
body[data-doc="PI"] table.items tbody td{ padding:2px 5px; }
body[data-doc="PI"] .terms{ margin-top:6px; }
body[data-doc="PI"] .term{ padding:0; }
body[data-doc="PI"] .notes-list{ padding:0; }
body[data-doc="PI"] .nrow{ padding:0 10px; line-height:1.25; }
body[data-doc="PI"] #noteWrap{ margin-top:4px !important; }
/* PI 表格底已显示「合计」，独立总计行在单列紧凑布局中省略，避免挤占签署区 */
body[data-doc="PI"] .sum{ display:none; }
body[data-doc="PI"] .signs{ margin-top:4px; }
body[data-doc="PI"] .sign-line{ min-height:62px; column-gap:14px; }
body[data-doc="PI"] .sign-cap{ margin-bottom:1px; }
body[data-doc="PI"] .sig-cell .s, body[data-doc="PI"] .sig-cell .s-date-lbl{ font-size:9px; }
body[data-doc="PI"] .sign-sig{ max-height:40px; }
body[data-doc="PI"] .sign-stamp{ max-height:42px; }
/* 打印时释放顶部边距，并取消页脚 margin-top:auto */
@media print{
  body[data-doc="PI"] .page{ padding-top:6mm; }
  body[data-doc="PI"] .foot{ margin-top:0; padding-top:3px; }
}

/* ═══ QT 专用紧凑：默认示例需压到 1 页 ═══ */
body[data-doc="QT"] .block{ margin-top:6px; }
body[data-doc="QT"] .block-head{ margin-bottom:3px; }
body[data-doc="QT"] table.items thead th{ padding:6px 5px; }
body[data-doc="QT"] table.items tbody td{ padding:3px 5px; font-size:11.5px; }
body[data-doc="QT"] .sum-upper{ margin-top:4px; padding:5px 8px; }
body[data-doc="QT"] .terms{ margin-top:6px; }
body[data-doc="QT"] .term{ padding:2px 0; }
body[data-doc="QT"] .signs{ margin-top:6px; }
body[data-doc="QT"] .sign-line{ min-height:104px; column-gap:24px; }
body[data-doc="QT"] .sign-sig{ max-height:62px; }
body[data-doc="QT"] .sign-stamp{ max-height:82px; }
body[data-doc="QT"] .sign-cap{ margin-bottom:5px; }

/* ═══ CI 专用紧凑：需再省约 9mm ═══ */
body[data-doc="CI"] #noteWrap{ margin-top:8px !important; }
body[data-doc="CI"] .nrow{ padding:1px 12px; line-height:1.3; }
body[data-doc="CI"] .notes-list{ padding:1px 0; }
body[data-doc="CI"] .signs{ margin-top:8px; }
body[data-doc="CI"] .sign-line{ min-height:132px; column-gap:16px; }
body[data-doc="CI"] .sign-sig{ max-height:92px; }
body[data-doc="CI"] .sign-stamp{ max-height:108px; }
body[data-doc="CI"] .sign-cap{ margin-bottom:7px; }
body[data-doc="CI"] .sig-cell .s, body[data-doc="CI"] .sig-cell .s-date-lbl{ font-size:9.5px; }
/* CI 客户区地址同样允许 2 行，打印时由 @media print 解除限制完整显示 */
/* 再省 4mm：页脚不能正好卡在 289mm 临界点，打印引擎会判溢出 */
body[data-doc="CI"] #custBox{ padding:7px 12px; gap:5px 24px; }
body[data-doc="CI"] table.items tbody td{ padding:5px 6px; }
body[data-doc="CI"] .sum-total{ padding-top:8px; margin-top:5px; }
body[data-doc="CI"] .sum-upper{ margin-top:7px; padding:6px 12px; }
/* CI 内容已装得下：取消 margin-top:auto，否则页脚被推到 289mm 临界点导致溢出第 2 页 */

/* ═══ 统计面板 ═══ */
.stats{ width:210mm; margin:14px auto 0; }
.panel{ background:#fff; border:1px solid var(--line); border-radius:3px;
  box-shadow:0 1px 3px rgba(20,48,79,.06); margin-bottom:12px; }
.panel-h{ padding:12px 18px 10px; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:10px; }
.panel-h h3{ font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--navy); }
.panel-h .en{ font-size:8.5px; font-weight:600; letter-spacing:.18em; color:var(--ink3); text-transform:uppercase; }
.panel-h .sp{ flex:1; }
.panel-h .note{ font-size:10.5px; color:var(--ink3); }

.cards{ display:grid; grid-template-columns:repeat(6,1fr); }
.stat{ padding:12px 14px; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat-l{ font-size:9.5px; color:var(--ink3); letter-spacing:.05em; margin-bottom:3px; }
.stat-v{ font-size:15px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; }

table.st{ width:100%; border-collapse:collapse; }
table.st th{ font-size:9.5px; font-weight:600; letter-spacing:.1em; color:var(--ink3);
  text-transform:uppercase; text-align:left; padding:8px 18px; border-bottom:1px solid var(--line); }
table.st th.r{ text-align:right; }
table.st td{ padding:8px 18px; font-size:11.5px; color:var(--ink2); border-bottom:1px solid var(--tint2); }
table.st td.r{ text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); }
table.st tr:last-child td{ border-bottom:0; }
table.st .empty{ text-align:center; color:var(--ink3); padding:22px 18px; }
.tag{ display:inline-block; font-size:9px; font-weight:700; letter-spacing:.1em;
  color:var(--navy); background:var(--navy-soft); padding:2px 6px; border-radius:2px; }
.barcell{ width:32%; }
.pbar{ height:7px; background:var(--navy-soft); border-radius:2px; overflow:hidden; }
.pbar > i{ display:block; height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--navy-mid),var(--navy)); }
.mini{ width:18px; height:18px; line-height:1; border:0; border-radius:2px; cursor:pointer;
  background:transparent; color:var(--line2); font-size:13px; }
.mini:hover{ color:#B4453C; background:#F5E9E8; }
#ledgerSum{ font-size:10.5px; color:var(--ink3); padding:9px 18px; border-top:1px solid var(--tint2); }

/* ═══ 英文态 ═══ */
body.lang-en{ font-family:"Cambria","Georgia","Times New Roman",serif; }
body.lang-en .co-name, body.lang-en .doc-title, body.lang-en .block-head .cn,
body.lang-en .sum-total .k, body.lang-en tfoot td, body.lang-en .stat-v,
body.lang-en .panel-h h3{ font-family:"Calibri","Segoe UI",sans-serif; }
body.lang-en table.items thead th, body.lang-en .term .k, body.lang-en .field .k,
body.lang-en .doc-row .k, body.lang-en .stat-l, body.lang-en table.st th,
body.lang-en .tag, body.lang-en .doc-sub, body.lang-en .sum-upper .k{
  font-family:"Calibri","Segoe UI",sans-serif; }
body.lang-en td.c-name{ letter-spacing:-.01em; line-height:1.35; }
body.lang-en td.c-spec{ line-height:1.35; }
body.lang-en table.items thead th{ letter-spacing:.06em; padding:7px 6px; }
body.lang-en .term .v{ line-height:1.45; }
body.lang-en .sum-upper .k{ letter-spacing:.06em; }


/* ═══ 预设选单触发器 ═══ */
.pick{
  cursor:pointer; position:relative; padding-right:12px;
  transition:border-color .14s, background .14s;
}
.pick:hover{ border-bottom-color:var(--navy-mid); background:#F4F8FC; }
.pick.on{ border-bottom-color:var(--navy-mid); background:#EAF1F8; }
.pick .caret{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:8px; color:var(--navy-mid); font-weight:400; pointer-events:none;
}
.pick-cur{ font-weight:600; color:var(--navy); }

/* ═══ 选单浮层 ═══ */
.pickmenu{
  position:absolute; z-index:999;
  min-width:210px; max-width:330px;
  background:#fff; border:1px solid var(--line2); border-radius:3px;
  box-shadow:0 4px 12px rgba(20,48,79,.12), 0 12px 32px rgba(20,48,79,.14);
  padding:5px 0; overflow:hidden;
}
.pm-t{
  font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--ink3);
  text-transform:uppercase; padding:7px 13px 6px; border-bottom:1px solid var(--tint2);
}
.pm-i{
  padding:7px 13px; font-size:12px; color:var(--ink); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .12s, color .12s;
}
.pm-i:hover{ background:var(--navy-soft); color:var(--navy); }
.pm-n{
  font-size:10px; color:var(--ink3); padding:6px 13px 4px;
  border-top:1px solid var(--tint2); margin-top:4px; line-height:1.4;
}

/* 打印时不显示选单触发器样式 */
@media print{
  .pick{ border-bottom:0 !important; background:transparent !important; padding-right:0; }
  .pick .caret{ display:none; }
  .pickmenu{ display:none !important; }
  .sign-date{ border-bottom:0 !important; }
  .sig-fill{ border-bottom:0 !important; }
}

/* ═══ 打印 ═══ */
@page{ size:A4 portrait; margin:0 0 5mm 0;
  @bottom-right{
    content:"第 " counter(page) " 页 / 共 " counter(pages) " 页";
    font-size:9px; color:var(--ink3); padding:0 14mm 3mm 0;
  }
}
@page page-en{
  size:A4 portrait; margin:0 0 5mm 0;
  @bottom-right{
    content:"Page " counter(page) " of " counter(pages);
    font-size:9px; color:var(--ink3); padding:0 14mm 3mm 0;
  }
}
body.lang-en{ page:page-en; }

@media print{
  body{ background:#fff; padding:0; }
  .bar, .stats{ display:none !important; }
  .logo-slot img{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .page{ width:210mm; min-height:100vh; margin:0; box-shadow:none; padding-bottom:0; }
  .block,.terms,.signs{ break-inside:avoid; }
  table.items tr{ break-inside:avoid; }
  table.items thead{ display:table-header-group; }
  .stamp{ display:none; }
  [contenteditable]{ border-bottom:0 !important; background:transparent !important; box-shadow:none !important; }
  td.c-del{ display:none; }
  #pgNo{ display:none; }
  /* 打印时客户长地址完整显示 */
  .field.span2 .v{ -webkit-line-clamp:unset; display:block; }
}

@media (max-width:820px){
  body{ padding:0; }
  .bar,.page,.stats{ width:100%; }
  .page{ min-height:auto; box-shadow:none; padding:12px; }
  .cust,.terms{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .head{ flex-wrap:wrap; }
  .doc-id{ text-align:left; width:auto; }
  .doc-row{ justify-content:flex-start; }
  .doc-row .v{ text-align:left; }
  .sum-box{ width:100%; }
}

/* ═══════════════════════════════════════════════════════════
   Generator-first UI shell
   ═══════════════════════════════════════════════════════════ */
:root{
  --ui-bg:#EEF2F5;
  --ui-panel:#FFFFFF;
  --ui-ink:#172536;
  --ui-muted:#718096;
  --ui-line:#D8E0E8;
  --ui-line-soft:#E9EEF3;
  --ui-navy:#153A5B;
  --ui-navy-2:#20577F;
  --ui-blue-soft:#EAF2F8;
  --ui-gold:#B28A4A;
  --ui-green:#2A8B63;
  --ui-red:#B84A46;
  --ui-shadow:0 18px 50px rgba(22, 44, 68, .08);
}
body.generator-app{
  margin:0;
  padding:0;
  background:
    radial-gradient(circle at 90% 0%, rgba(32,87,127,.10), transparent 30%),
    linear-gradient(145deg, #F4F7F9 0%, #E9EEF3 100%);
  color:var(--ui-ink);
  min-height:100vh;
}
body.generator-app .app-header{
  height:68px;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--ui-line);
  box-shadow:0 4px 18px rgba(26, 55, 82, .05);
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(14px);
}
body.generator-app .brand-lockup{ display:flex; align-items:center; gap:11px; min-width:220px; }
body.generator-app .brand-mark{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; color:#fff; background:linear-gradient(145deg,var(--ui-navy),#2B6A93);
  font-size:10px; font-weight:800; letter-spacing:.08em; box-shadow:0 5px 12px rgba(21,58,91,.20);
}
body.generator-app .brand-copy{ display:flex; flex-direction:column; line-height:1.15; }
body.generator-app .brand-copy strong{ font-size:14px; letter-spacing:.04em; color:var(--ui-ink); }
body.generator-app .brand-copy span{ margin-top:4px; font-size:9px; color:var(--ui-muted); letter-spacing:.14em; text-transform:uppercase; }
body.generator-app .header-context{ display:flex; align-items:center; gap:11px; flex:1; justify-content:center; color:var(--ui-muted); font-size:11px; }
body.generator-app .context-pill{
  padding:5px 10px; color:var(--ui-navy); background:var(--ui-blue-soft);
  border:1px solid #CFE0EE; border-radius:999px; font-weight:700; letter-spacing:.04em;
}
body.generator-app .context-divider{ width:1px; height:14px; background:var(--ui-line); }
body.generator-app .header-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:280px; }
body.generator-app .header-actions .quota-badge{ background:#F7FAFC; }
body.generator-app .btn.compact{ padding:6px 10px; font-size:10px; border-radius:6px; }
body.generator-app .btn.subtle{ color:var(--ui-muted); font-weight:500; }
body.generator-app .btn.wide{ width:100%; }

body.generator-app .app-layout{
  display:grid;
  grid-template-columns:292px minmax(0,1fr);
  min-height:calc(100vh - 68px);
}
body.generator-app .generator-sidebar{
  padding:24px 18px 18px;
  background:rgba(255,255,255,.78);
  border-right:1px solid var(--ui-line);
  display:flex;
  flex-direction:column;
  gap:0;
}
body.generator-app .side-kicker{
  font-size:9px; font-weight:800; letter-spacing:.18em; color:#9AA8B6; margin-bottom:16px;
}
body.generator-app .side-heading{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:17px 2px 9px;
}
body.generator-app .side-heading:first-of-type{ margin-top:0; }
body.generator-app .side-heading span:first-child{ font-size:12px; font-weight:800; color:var(--ui-ink); }
body.generator-app .side-en{ font-size:8px; font-weight:700; letter-spacing:.13em; color:#A0AEBA; }
body.generator-app .doc-tabs{ display:flex; flex-direction:column; gap:6px; border:0; overflow:visible; }
body.generator-app .doc-tabs .tab{
  width:100%; display:grid; grid-template-columns:25px 1fr auto; align-items:center; gap:8px;
  padding:10px 11px; border:1px solid var(--ui-line); border-radius:8px; text-align:left;
  background:#fff; color:var(--ui-ink); box-shadow:none;
}
body.generator-app .doc-tabs .tab small{ font-size:9px; color:#9AA8B6; font-weight:700; letter-spacing:.08em; }
body.generator-app .doc-tabs .tab .tg{ font-size:9px; opacity:.65; margin:0; }
body.generator-app .doc-tabs .tab.on{
  background:linear-gradient(135deg,var(--ui-navy),#235B83);
  border-color:var(--ui-navy); color:#fff; box-shadow:0 7px 15px rgba(21,58,91,.18);
}
body.generator-app .doc-tabs .tab.on small{ color:#BFD7E8; }
body.generator-app .template-card{
  border:1px solid #CDDCE8; border-radius:9px; padding:10px;
  background:linear-gradient(145deg,#F7FBFE,#EEF5FA);
  box-shadow:0 5px 16px rgba(28,72,108,.06);
}
body.generator-app .template-select{
  width:100%; font:inherit; font-size:12px; font-weight:700; color:var(--ui-ink);
  padding:8px 9px; border:1px solid #C5D5E2; border-radius:6px; background:#fff; outline:none;
}
body.generator-app .template-select:focus{ border-color:var(--ui-navy-2); box-shadow:0 0 0 3px rgba(32,87,127,.10); }
body.generator-app .template-meta{ display:flex; align-items:center; gap:7px; margin-top:9px; min-height:17px; }
body.generator-app .template-badge{
  flex:none; padding:2px 6px; border-radius:4px; background:var(--ui-navy); color:#fff;
  font-size:8px; font-weight:800; letter-spacing:.08em;
}
body.generator-app #templateSummary{ font-size:10px; color:var(--ui-muted); line-height:1.35; }
body.generator-app .template-foot{
  display:flex; align-items:center; gap:5px; margin-top:8px; padding-top:8px;
  border-top:1px solid #DCE8F0; color:#8998A5; font-size:9px;
}
body.generator-app .template-dot{ width:3px; height:3px; border-radius:50%; background:#B5C5D1; }
body.generator-app .flow-list{ display:flex; flex-direction:column; gap:4px; }
body.generator-app .flow-item{
  display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:7px;
  padding:8px 9px; border-radius:7px; color:#81909D; font-size:11px;
}
body.generator-app .flow-item b{ font-size:9px; color:#A9B6C0; }
body.generator-app .flow-item i{ font-style:normal; font-size:9px; color:#A9B6C0; }
body.generator-app .flow-item.active{ background:#F2F7FA; color:var(--ui-navy); }
body.generator-app .flow-item.active b{ color:var(--ui-navy-2); }
body.generator-app .flow-item.active i{ color:var(--ui-green); font-weight:700; }
body.generator-app .side-actions{ display:flex; flex-direction:column; gap:8px; }
body.generator-app .action-row{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
body.generator-app .action-row .btn{ min-width:0; }
body.generator-app .add-box{
  display:grid; grid-template-columns:1fr 58px; gap:6px; align-items:center;
  padding-top:2px;
}
body.generator-app .add-box .add-lbl{ grid-column:1 / -1; font-size:10px; color:var(--ui-muted); }
body.generator-app .add-box .add-num{ width:100%; padding:7px 8px; border-radius:6px; }
body.generator-app .danger-row{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
body.generator-app .sidebar-bottom{ margin-top:auto; padding-top:18px; }
body.generator-app .autosave-note{ display:flex; align-items:center; gap:6px; font-size:10px; color:var(--ui-muted); margin-bottom:9px; }
body.generator-app .status-dot{ width:6px; height:6px; border-radius:50%; background:var(--ui-green); box-shadow:0 0 0 3px rgba(42,139,99,.12); }

body.generator-app .generator-main{ min-width:0; padding:22px 30px 52px; }
body.generator-app .canvas-toolbar{
  max-width:1050px; margin:0 auto 10px; display:flex; align-items:center; justify-content:space-between; gap:14px;
}
body.generator-app .canvas-title{ display:flex; align-items:center; gap:9px; }
body.generator-app .canvas-kicker{ font-size:9px; font-weight:800; letter-spacing:.15em; color:#9BA9B5; }
body.generator-app .canvas-title strong{ font-size:15px; color:var(--ui-ink); }
body.generator-app .canvas-separator{ width:1px; height:16px; background:var(--ui-line); margin:0 2px; }
body.generator-app .flash{ font-size:10px; color:var(--ui-green); opacity:0; transition:opacity .2s; }
body.generator-app .flash.show{ opacity:1; }
body.generator-app .canvas-actions{ display:flex; align-items:center; gap:8px; }
body.generator-app .template-context{ font-size:10px; color:var(--ui-muted); margin-right:5px; }
body.generator-app .canvas-note{
  max-width:1050px; margin:0 auto 14px; padding:8px 12px; display:flex; align-items:center; gap:8px;
  color:#64788A; background:rgba(255,255,255,.68); border:1px solid var(--ui-line);
  border-radius:7px; font-size:10px;
}
body.generator-app .note-icon{ color:var(--ui-gold); font-size:12px; }
body.generator-app .page-stage{ max-width:1050px; margin:0 auto; display:flex; justify-content:center; }
body.generator-app .page{ box-shadow:var(--ui-shadow); }

/* Make generated fields feel like a calm generator surface. */
body.generator-app .page [contenteditable]{
  border-bottom:1px dashed transparent;
  border-radius:3px;
  transition:background .12s,border-color .12s;
}
body.generator-app .page [contenteditable]:hover{ background:#F7FAFC; border-bottom-color:#C9D8E3; }
body.generator-app .page [contenteditable]:focus{
  outline:none; background:#F2F8FC; border-bottom-color:var(--ui-navy-2);
  box-shadow:0 0 0 2px rgba(32,87,127,.08);
}
body.generator-app .page .field .v,
body.generator-app .page .co-val,
body.generator-app .page .doc-row .v{ min-height:1.2em; }
body.generator-app .page .items tbody tr:hover td{ background:#F6FAFC; }
body.generator-app .page .items tbody tr:hover td.c-del button{ opacity:1; }
body.generator-app .page .pick:hover{ background:#F2F8FC; }

@media (max-width:1100px){
  body.generator-app .app-header{ padding:0 18px; }
  body.generator-app .header-context{ display:none; }
  body.generator-app .app-layout{ grid-template-columns:250px minmax(0,1fr); }
  body.generator-app .generator-main{ padding:18px 16px 40px; }
}
@media (max-width:820px){
  body.generator-app .app-header{ height:auto; min-height:62px; flex-wrap:wrap; gap:10px; padding:10px 14px; }
  body.generator-app .header-actions{ min-width:0; flex:1; }
  body.generator-app .app-layout{ display:block; }
  body.generator-app .generator-sidebar{ border-right:0; border-bottom:1px solid var(--ui-line); }
  body.generator-app .sidebar-bottom{ margin-top:16px; }
  body.generator-app .generator-main{ padding:15px 10px 32px; }
  body.generator-app .canvas-toolbar{ align-items:flex-start; flex-direction:column; }
  body.generator-app .canvas-actions{ width:100%; justify-content:flex-end; }
  body.generator-app .page-stage{ display:block; }
  body.generator-app .page{ width:100%; min-height:auto; }
}
@media print{
  body.generator-app{ background:#fff !important; padding:0 !important; }
  body.generator-app .app-header,
  body.generator-app .generator-sidebar,
  body.generator-app .canvas-toolbar,
  body.generator-app .canvas-note{ display:none !important; }
  body.generator-app .app-layout{ display:block; min-height:0; }
  body.generator-app .generator-main{ padding:0; }
  body.generator-app .page-stage{ display:block; max-width:none; margin:0; }
  body.generator-app .page{ width:210mm; min-height:100vh; margin:0; box-shadow:none; }
}

/* ═══════════════════════════════════════════════════════════
   ZZSL classic generator template
   Visual language ported from PI-生成器.html / 外贸单据生成器.html
   ═══════════════════════════════════════════════════════════ */
body[data-template="QT-ZZSL"] .page,
body[data-template="PI-ZZSL"] .page,
body[data-template="CI-ZZSL"] .page{
  padding:0;
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;
  border-top:0;
}
body[data-template="QT-ZZSL"] .page::before,
body[data-template="PI-ZZSL"] .page::before,
body[data-template="CI-ZZSL"] .page::before{ display:none; }

body[data-template="QT-ZZSL"] .head,
body[data-template="PI-ZZSL"] .head,
body[data-template="CI-ZZSL"] .head{
  padding:20px 30px 16px;
  background:linear-gradient(135deg,#0B2E5C 0%,#1a4a8a 100%);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.16);
}
body[data-template="QT-ZZSL"] .logo-slot,
body[data-template="PI-ZZSL"] .logo-slot,
body[data-template="CI-ZZSL"] .logo-slot{ width:56px; height:56px; }
body[data-template="QT-ZZSL"] .logo-slot img,
body[data-template="PI-ZZSL"] .logo-slot img,
body[data-template="CI-ZZSL"] .logo-slot img{ width:54px; max-height:54px; }
body[data-template="QT-ZZSL"] .co-name,
body[data-template="PI-ZZSL"] .co-name,
body[data-template="CI-ZZSL"] .co-name{ color:#fff; font-size:15px; letter-spacing:.04em; }
body[data-template="QT-ZZSL"] .co-name-en,
body[data-template="PI-ZZSL"] .co-name-en,
body[data-template="CI-ZZSL"] .co-name-en{ color:rgba(255,255,255,.76); }
body[data-template="QT-ZZSL"] .co-meta,
body[data-template="PI-ZZSL"] .co-meta,
body[data-template="CI-ZZSL"] .co-meta{ color:rgba(255,255,255,.86); }
body[data-template="QT-ZZSL"] .co-lbl,
body[data-template="PI-ZZSL"] .co-lbl,
body[data-template="CI-ZZSL"] .co-lbl{ color:#C8A45C; }
body[data-template="QT-ZZSL"] .doc-title,
body[data-template="PI-ZZSL"] .doc-title,
body[data-template="CI-ZZSL"] .doc-title{ color:#fff; font-size:23px; letter-spacing:.16em; text-transform:uppercase; }
body[data-template="QT-ZZSL"] .doc-sub,
body[data-template="PI-ZZSL"] .doc-sub,
body[data-template="CI-ZZSL"] .doc-sub{ color:#C8A45C; }
body[data-template="QT-ZZSL"] .doc-row .k,
body[data-template="PI-ZZSL"] .doc-row .k,
body[data-template="CI-ZZSL"] .doc-row .k{ color:rgba(255,255,255,.72); }
body[data-template="QT-ZZSL"] .doc-row .v,
body[data-template="PI-ZZSL"] .doc-row .v,
body[data-template="CI-ZZSL"] .doc-row .v{ color:#fff; }
body[data-template="QT-ZZSL"] .rule,
body[data-template="PI-ZZSL"] .rule,
body[data-template="CI-ZZSL"] .rule{ height:5px; background:#C8A45C; }
body[data-template="QT-ZZSL"] .rule-thin,
body[data-template="PI-ZZSL"] .rule-thin,
body[data-template="CI-ZZSL"] .rule-thin{ height:1px; background:#dce1e8; }

body[data-template="QT-ZZSL"] .page,
body[data-template="PI-ZZSL"] .page,
body[data-template="CI-ZZSL"] .page{ --classic-border:#dce1e8; }
body[data-template="QT-ZZSL"] .block,
body[data-template="PI-ZZSL"] .block,
body[data-template="CI-ZZSL"] .block{ margin:16px 30px 0; }
body[data-template="QT-ZZSL"] .block-head,
body[data-template="PI-ZZSL"] .block-head,
body[data-template="CI-ZZSL"] .block-head{ margin-bottom:7px; border-bottom:2px solid #0B2E5C; padding-bottom:4px; }
body[data-template="QT-ZZSL"] .block-head .cn,
body[data-template="PI-ZZSL"] .block-head .cn,
body[data-template="CI-ZZSL"] .block-head .cn{ color:#0B2E5C; letter-spacing:.15em; text-transform:uppercase; }
body[data-template="QT-ZZSL"] .block-head .en,
body[data-template="PI-ZZSL"] .block-head .en,
body[data-template="CI-ZZSL"] .block-head .en{ color:#C8A45C; }
body[data-template="QT-ZZSL"] .cust,
body[data-template="PI-ZZSL"] .cust,
body[data-template="CI-ZZSL"] .cust{ border:1px solid var(--classic-border); border-radius:6px; background:#fff; }
body[data-template="QT-ZZSL"] .field .k,
body[data-template="PI-ZZSL"] .field .k,
body[data-template="CI-ZZSL"] .field .k{ color:#0B2E5C; }
body[data-template="QT-ZZSL"] .field .v,
body[data-template="PI-ZZSL"] .field .v,
body[data-template="CI-ZZSL"] .field .v{ color:#1f2937; }

body[data-template="QT-ZZSL"] table.items,
body[data-template="PI-ZZSL"] table.items,
body[data-template="CI-ZZSL"] table.items{ border:1px solid var(--classic-border); }
body[data-template="QT-ZZSL"] table.items thead th,
body[data-template="PI-ZZSL"] table.items thead th,
body[data-template="CI-ZZSL"] table.items thead th{ background:#0B2E5C; color:#fff; border-color:#0B2E5C; font-size:10px; letter-spacing:.06em; }
body[data-template="QT-ZZSL"] table.items tbody tr:nth-child(even) td,
body[data-template="PI-ZZSL"] table.items tbody tr:nth-child(even) td,
body[data-template="CI-ZZSL"] table.items tbody tr:nth-child(even) td{ background:#f8fafc; }
body[data-template="QT-ZZSL"] table.items tbody tr:hover td,
body[data-template="PI-ZZSL"] table.items tbody tr:hover td,
body[data-template="CI-ZZSL"] table.items tbody tr:hover td{ background:#eef4ff; }
body[data-template="QT-ZZSL"] tfoot td,
body[data-template="PI-ZZSL"] tfoot td,
body[data-template="CI-ZZSL"] tfoot td{ background:#eef4ff; border-color:#0B2E5C; color:#0B2E5C; }

body[data-template="QT-ZZSL"] .sum-upper,
body[data-template="PI-ZZSL"] .sum-upper,
body[data-template="CI-ZZSL"] .sum-upper{ background:#fffbe6; border-left:3px solid #C8A45C; }
body[data-template="QT-ZZSL"] .sum-upper .k,
body[data-template="PI-ZZSL"] .sum-upper .k,
body[data-template="CI-ZZSL"] .sum-upper .k{ color:#0B2E5C; }
body[data-template="QT-ZZSL"] .terms,
body[data-template="PI-ZZSL"] .terms,
body[data-template="CI-ZZSL"] .terms{ border-top:1px solid var(--classic-border); }
body[data-template="QT-ZZSL"] .term .k,
body[data-template="PI-ZZSL"] .term .k,
body[data-template="CI-ZZSL"] .term .k{ color:#0B2E5C; }
body[data-template="QT-ZZSL"] .notes-list,
body[data-template="PI-ZZSL"] .notes-list,
body[data-template="CI-ZZSL"] .notes-list{ border:1px solid var(--classic-border); border-radius:6px; background:#f8fafc; }
body[data-template="QT-ZZSL"] .sign-cap,
body[data-template="PI-ZZSL"] .sign-cap,
body[data-template="CI-ZZSL"] .sign-cap{ color:#0B2E5C; }
body[data-template="QT-ZZSL"] .foot,
body[data-template="PI-ZZSL"] .foot,
body[data-template="CI-ZZSL"] .foot{ background:#f8fafc; border-top:1px solid var(--classic-border); margin-top:18px; padding:9px 30px; }

@media print{
  body[data-template="QT-ZZSL"] .head,
  body[data-template="PI-ZZSL"] .head,
  body[data-template="CI-ZZSL"] .head{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  body[data-template="QT-ZZSL"] .page,
  body[data-template="PI-ZZSL"] .page,
  body[data-template="CI-ZZSL"] .page{ padding-bottom:0; }
}

/* Document info editor in generator sidebar */
body.generator-app .info-heading{ margin-top:18px; }
body.generator-app .doc-info-panel{
  border:1px solid var(--ui-line);
  border-radius:9px;
  background:#fff;
  padding:10px;
  max-height:340px;
  overflow:auto;
  box-shadow:0 5px 16px rgba(28,72,108,.05);
}
body.generator-app .doc-info-panel::-webkit-scrollbar{ width:7px; }
body.generator-app .doc-info-panel::-webkit-scrollbar-thumb{ background:#CBD7E1; border-radius:99px; }
body.generator-app .info-section + .info-section{ margin-top:12px; padding-top:10px; border-top:1px solid var(--ui-line-soft); }
body.generator-app .info-section-title{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:7px; color:var(--ui-navy); font-size:9px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
}
body.generator-app .info-section-title small{ color:#A0AEBA; font-size:8px; letter-spacing:.08em; }
body.generator-app .info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
body.generator-app .info-field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
body.generator-app .info-field.span2{ grid-column:1 / -1; }
body.generator-app .info-field > span{
  color:#718096; font-size:9px; font-weight:700; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.generator-app .info-field input,
body.generator-app .info-field textarea,
body.generator-app .info-field select{
  width:100%; min-width:0; font:inherit; font-size:11px; color:var(--ui-ink);
  padding:7px 8px; border:1px solid var(--ui-line); border-radius:6px;
  background:#FBFCFD; outline:none; transition:border-color .12s,box-shadow .12s,background .12s;
}
body.generator-app .info-field textarea{ min-height:54px; resize:vertical; line-height:1.4; }
body.generator-app .info-field input:focus,
body.generator-app .info-field textarea:focus,
body.generator-app .info-field select:focus{
  border-color:var(--ui-navy-2); background:#fff; box-shadow:0 0 0 3px rgba(32,87,127,.10);
}
body.generator-app .info-field input:disabled{ color:#9AA8B6; background:#F3F6F8; cursor:not-allowed; }
body.generator-app .info-hint{ margin-top:6px; color:#9AA8B6; font-size:9px; line-height:1.4; }

/* Two-page mode switch */
body.generator-app .mode-switch{
  display:inline-flex; align-items:center; padding:3px; gap:2px;
  border:1px solid var(--ui-line); border-radius:8px; background:#F5F8FA;
}
body.generator-app .mode-btn{
  font:inherit; font-size:10px; font-weight:700; letter-spacing:.03em;
  border:0; border-radius:6px; padding:6px 10px; cursor:pointer;
  color:var(--ui-muted); background:transparent; transition:background .14s,color .14s,box-shadow .14s;
}
body.generator-app .mode-btn:hover{ color:var(--ui-navy); background:#fff; }
body.generator-app .mode-btn.on{
  color:#fff; background:var(--ui-navy); box-shadow:0 3px 8px rgba(21,58,91,.18);
}

body.generator-app .editor-page{
  display:none;
  max-width:1050px;
  margin:0 auto 18px;
  padding:22px 24px 26px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--ui-line);
  border-radius:12px;
  box-shadow:var(--ui-shadow);
}
body.generator-app.mode-edit .editor-page{ display:block; }
body.generator-app.mode-edit .page-stage,
body.generator-app.mode-edit .canvas-toolbar,
body.generator-app.mode-edit .canvas-note{ display:none; }
body.generator-app.mode-preview .editor-page{ display:none; }
body.generator-app .editor-page-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--ui-line);
}
body.generator-app .editor-page-head h2{
  margin:5px 0 4px; font-size:22px; line-height:1.2; color:var(--ui-ink); letter-spacing:.02em;
}
body.generator-app .editor-page-head p{ margin:0; font-size:11px; color:var(--ui-muted); }
body.generator-app .editor-page .editor-info-panel{
  max-height:none; overflow:visible; padding:0; border:0; box-shadow:none; background:transparent;
}
body.generator-app .editor-page .info-section{
  margin:0; padding:16px 18px; border:1px solid var(--ui-line); border-radius:9px; background:#fff;
}
body.generator-app .editor-page .info-section + .info-section{ margin-top:12px; border-top:1px solid var(--ui-line); }
body.generator-app .editor-page .info-section-title{ margin-bottom:12px; font-size:10px; }
body.generator-app .editor-page .info-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px; }
body.generator-app .editor-page .info-field > span{ font-size:10px; color:var(--ui-navy); }
body.generator-app .editor-page .info-field input,
body.generator-app .editor-page .info-field textarea,
body.generator-app .editor-page .info-field select{ padding:10px 11px; font-size:13px; border-radius:7px; background:#FBFCFD; }
body.generator-app .editor-page .info-field textarea{ min-height:76px; }
body.generator-app .editor-page .info-hint{ font-size:10px; margin-top:10px; }

@media (max-width:820px){
  body.generator-app .mode-switch{ order:3; width:100%; justify-content:center; }
  body.generator-app .header-actions{ flex-wrap:wrap; }
  body.generator-app .editor-page{ padding:16px 14px 20px; border-radius:9px; }
  body.generator-app .editor-page-head{ flex-direction:column; }
  body.generator-app .editor-page .info-grid{ grid-template-columns:1fr; }
}
@media print{
  body.generator-app .mode-switch,
  body.generator-app .editor-page{ display:none !important; }
  body.generator-app .page-stage{ display:block !important; }
}

/* Full document editor: item rows and read-only calculated fields */
body.generator-app .editor-page .item-editor-head,
body.generator-app .editor-page .item-editor-row{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr)) 28px;
  gap:7px;
  align-items:center;
}
body.generator-app .editor-page .item-editor-head{
  margin-bottom:6px; padding:0 2px;
  color:var(--ui-navy); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
body.generator-app .editor-page .item-editor-row{ margin-bottom:7px; }
body.generator-app .editor-page .item-editor-row input{
  width:100%; min-width:0; font:inherit; font-size:11px; color:var(--ui-ink);
  padding:8px 7px; border:1px solid var(--ui-line); border-radius:6px; background:#FBFCFD; outline:none;
}
body.generator-app .editor-page .item-editor-row input:focus{
  border-color:var(--ui-navy-2); background:#fff; box-shadow:0 0 0 3px rgba(32,87,127,.10);
}
body.generator-app .editor-page .item-remove{
  width:26px; height:26px; border:0; border-radius:6px; cursor:pointer;
  color:#B84A46; background:#FCEBEB; font-size:15px; line-height:1;
}
body.generator-app .editor-page .item-remove:hover{ background:#F7D9D8; }
body.generator-app .editor-page .add-editor-item{
  width:100%; margin-top:4px; padding:9px; border:1px dashed var(--ui-navy-2);
  border-radius:7px; color:var(--ui-navy); background:#F7FAFC;
  font:inherit; font-size:11px; font-weight:700; cursor:pointer;
}
body.generator-app .editor-page .add-editor-item:hover{ background:#EAF2F8; }
body.generator-app .editor-page .readonly-field input,
body.generator-app .editor-page .readonly-field textarea{ background:#F3F6F8; color:#7A8793; }
@media (max-width:900px){
  body.generator-app .editor-page .item-editor-head{ display:none; }
  body.generator-app .editor-page .item-editor-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:9px; border:1px solid var(--ui-line); border-radius:7px; background:#FBFCFD;
  }
  body.generator-app .editor-page .item-remove{ grid-column:2; justify-self:end; }
}

/* Account gate, account badge, and document library */
body.generator-app [hidden]{ display:none !important; }
body.generator-app .account-badge{
  max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:6px 9px; border:1px solid var(--ui-line); border-radius:7px;
  color:var(--ui-navy); background:#F5F8FA; font-size:10px; font-weight:700;
}
body.generator-app .auth-gate{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:radial-gradient(circle at 20% 10%, rgba(32,87,127,.20), transparent 36%), #E9EEF3;
}
body.generator-app .auth-card{
  width:min(420px,100%); padding:28px; border:1px solid var(--ui-line); border-radius:14px;
  background:rgba(255,255,255,.97); box-shadow:0 24px 70px rgba(22,44,68,.18);
}
body.generator-app .auth-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
body.generator-app .auth-brand strong{ display:block; font-size:18px; color:var(--ui-ink); }
body.generator-app .auth-brand span{ display:block; margin-top:4px; color:var(--ui-muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
body.generator-app .auth-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:4px; margin-bottom:18px; border:1px solid var(--ui-line); border-radius:9px; background:#F5F8FA; }
body.generator-app .auth-tab{ border:0; border-radius:7px; padding:9px; font:inherit; font-size:12px; font-weight:700; color:var(--ui-muted); background:transparent; cursor:pointer; }
body.generator-app .auth-tab.on{ color:#fff; background:var(--ui-navy); box-shadow:0 4px 10px rgba(21,58,91,.18); }
body.generator-app .auth-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:13px; }
body.generator-app .auth-field span{ color:var(--ui-navy); font-size:10px; font-weight:800; letter-spacing:.08em; }
body.generator-app .auth-field input{ width:100%; padding:11px 12px; border:1px solid var(--ui-line); border-radius:8px; font:inherit; font-size:13px; color:var(--ui-ink); background:#FBFCFD; outline:none; }
body.generator-app .auth-field input:focus{ border-color:var(--ui-navy-2); background:#fff; box-shadow:0 0 0 3px rgba(32,87,127,.10); }
body.generator-app .auth-submit{ width:100%; margin-top:4px; padding:11px; border-radius:8px; font-size:13px; }
body.generator-app .auth-error{ margin:0 0 12px; padding:9px 10px; border:1px solid #F1C7C5; border-radius:7px; color:#A33B36; background:#FFF4F3; font-size:11px; }
body.generator-app .auth-note{ margin-top:16px; padding-top:14px; border-top:1px solid var(--ui-line-soft); color:var(--ui-muted); font-size:10px; line-height:1.6; }

body.generator-app.mode-library .editor-page,
body.generator-app.mode-library .page-stage,
body.generator-app.mode-library .canvas-toolbar,
body.generator-app.mode-library .canvas-note{ display:none !important; }
body.generator-app .library-page{ display:none; max-width:1050px; margin:0 auto; }
body.generator-app.mode-library .library-page{ display:block; }
body.generator-app .library-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--ui-line); }
body.generator-app .library-head h2{ margin:5px 0 4px; font-size:24px; color:var(--ui-ink); }
body.generator-app .library-head p{ margin:0; color:var(--ui-muted); font-size:11px; }
body.generator-app .library-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0; }
body.generator-app .library-toolbar input{ width:min(440px,100%); padding:10px 12px; border:1px solid var(--ui-line); border-radius:8px; font:inherit; font-size:12px; outline:none; background:#fff; }
body.generator-app .library-toolbar input:focus{ border-color:var(--ui-navy-2); box-shadow:0 0 0 3px rgba(32,87,127,.10); }
body.generator-app .library-tabs{ display:inline-flex; gap:4px; padding:3px; border:1px solid var(--ui-line); border-radius:8px; background:#F5F8FA; }
body.generator-app .library-tab{ border:0; border-radius:6px; padding:7px 12px; font:inherit; font-size:11px; font-weight:700; color:var(--ui-muted); background:transparent; cursor:pointer; }
body.generator-app .library-tab.on{ color:#fff; background:var(--ui-navy); }
body.generator-app .library-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
body.generator-app .library-card{ padding:15px; border:1px solid var(--ui-line); border-radius:10px; background:#fff; box-shadow:0 5px 16px rgba(28,72,108,.05); }
body.generator-app .library-card:hover{ border-color:#B9CEDD; box-shadow:0 8px 20px rgba(28,72,108,.10); }
body.generator-app .library-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
body.generator-app .library-kind{ padding:3px 6px; border-radius:4px; color:#fff; background:var(--ui-navy); font-size:9px; font-weight:800; letter-spacing:.08em; }
body.generator-app .library-date{ color:#9AA8B6; font-size:9px; }
body.generator-app .library-card h3{ margin:0 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ui-ink); font-size:14px; }
body.generator-app .library-meta{ display:flex; flex-wrap:wrap; gap:5px 10px; margin-bottom:12px; color:var(--ui-muted); font-size:10px; }
body.generator-app .library-actions{ display:flex; gap:7px; }
body.generator-app .library-actions .btn{ flex:1; padding:7px 9px; font-size:10px; }
body.generator-app .library-empty{ grid-column:1/-1; padding:46px 20px; border:1px dashed var(--ui-line2); border-radius:10px; color:var(--ui-muted); text-align:center; background:rgba(255,255,255,.65); }
body.generator-app .library-loading{ grid-column:1/-1; padding:30px; color:var(--ui-muted); text-align:center; }

@media (max-width:820px){
  body.generator-app .header-actions{ width:100%; }
  body.generator-app .library-head{ flex-direction:column; }
  body.generator-app .library-toolbar{ flex-direction:column; align-items:stretch; }
  body.generator-app .library-toolbar input{ width:100%; }
}

body.generator-app .item-editor-tools{
  display:grid; grid-template-columns:76px auto 1fr; gap:7px; align-items:center; margin-top:9px;
}
body.generator-app .item-editor-tools input{
  width:100%; padding:8px; border:1px solid var(--ui-line); border-radius:6px;
  font:inherit; font-size:11px; text-align:center; outline:none;
}
body.generator-app .item-editor-tools .add-editor-item{ margin-top:0; }

body.generator-app .sidebar-status{
  display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:9px;
}
body.generator-app .sidebar-status .quota-badge{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
body.generator-app .sidebar-status #adminBtn{ flex:none; }
body.generator-app .secondary-actions{ opacity:.86; }
body.generator-app .secondary-actions .btn{ font-weight:500; }

body.generator-app.mode-library .flow-heading,
body.generator-app.mode-library .flow-list,
body.generator-app.mode-library .action-heading,
body.generator-app.mode-library .side-actions{ display:none; }

/* ============================================================
   QT template family: three intentionally distinct directions
   ============================================================ */

/* ---------- QT-NOIR / editorial dark ---------- */
body[data-template="QT-NOIR"] .page{
  padding:0; background:#F6F2EC; color:#171717;
  font-family:Georgia,"Times New Roman",serif;
}
body[data-template="QT-NOIR"] .page::before{ display:none; }
body[data-template="QT-NOIR"] .head{
  padding:22px 28px 18px; background:#161616; color:#fff;
  border-bottom:4px solid #C8543B;
}
body[data-template="QT-NOIR"] .logo-slot{ width:62px; height:62px; }
body[data-template="QT-NOIR"] .logo-slot img{ width:58px; max-height:58px; }
body[data-template="QT-NOIR"] .co-name{ color:#fff; font-size:17px; letter-spacing:.03em; }
body[data-template="QT-NOIR"] .co-name-en{ color:#C7C7C7; }
body[data-template="QT-NOIR"] .co-meta{ color:#D7D7D7; }
body[data-template="QT-NOIR"] .co-lbl{ color:#E3A14B; }
body[data-template="QT-NOIR"] .doc-title{ color:#fff; font-size:27px; letter-spacing:.12em; }
body[data-template="QT-NOIR"] .doc-sub{ color:#E3A14B; letter-spacing:.12em; }
body[data-template="QT-NOIR"] .doc-row .k{ color:#AFAFAF; }
body[data-template="QT-NOIR"] .doc-row .v{ color:#fff; }
body[data-template="QT-NOIR"] .rule{ height:7px; background:#C8543B; }
body[data-template="QT-NOIR"] .rule-thin{ height:1px; background:#161616; }
body[data-template="QT-NOIR"] .block{ margin:17px 28px 0; }
body[data-template="QT-NOIR"] .block-head{ border-bottom:1px solid #161616; padding-bottom:5px; }
body[data-template="QT-NOIR"] .block-head .cn{ color:#C8543B; letter-spacing:.16em; }
body[data-template="QT-NOIR"] .block-head .en{ color:#777; }
body[data-template="QT-NOIR"] .cust{
  border:0; border-top:1px solid #B9B1A7; border-bottom:1px solid #B9B1A7;
  background:transparent; border-radius:0; padding:9px 4px;
}
body[data-template="QT-NOIR"] .field .k{ color:#C8543B; letter-spacing:.08em; text-transform:uppercase; }
body[data-template="QT-NOIR"] .field .v{ color:#171717; }
body[data-template="QT-NOIR"] table.items{ border-color:#161616; }
body[data-template="QT-NOIR"] table.items thead th{
  background:#161616; color:#fff; border-color:#161616; letter-spacing:.1em;
}
body[data-template="QT-NOIR"] table.items tbody tr:nth-child(even) td{ background:#ECE6DE; }
body[data-template="QT-NOIR"] table.items tbody tr:hover td{ background:#E3D9CD; }
body[data-template="QT-NOIR"] tfoot td{ background:#C8543B; color:#fff; border-color:#161616; }
body[data-template="QT-NOIR"] .sum-upper{
  background:#161616; color:#fff; border-left:0; padding:9px 12px;
}
body[data-template="QT-NOIR"] .sum-upper .k{ color:#E3A14B; }
body[data-template="QT-NOIR"] .terms{ grid-template-columns:1fr 1fr; border-top:2px solid #161616; }
body[data-template="QT-NOIR"] .term{ border-bottom:1px dotted #999; }
body[data-template="QT-NOIR"] .term .k{ width:72px; color:#C8543B; }
body[data-template="QT-NOIR"] .signs{ border-top:4px double #161616; }
body[data-template="QT-NOIR"] .sign-cap{ color:#161616; }
body[data-template="QT-NOIR"] .foot{ background:#161616; color:#fff; border-top:0; }
body[data-template="QT-NOIR"] .foot img{ filter:brightness(0) invert(1); }

/* ---------- QT-GRID / blueprint technical ---------- */
body[data-template="QT-GRID"] .page{
  padding:0; background:#F7FBFF; color:#17324D;
  font-family:"Segoe UI",Arial,sans-serif;
}
body[data-template="QT-GRID"] .page::before{ display:none; }
body[data-template="QT-GRID"] .head{
  padding:18px 24px 16px; background:#fff; color:#17324D;
  border-left:8px solid #1E6FA8; border-bottom:1px solid #1E6FA8;
}
body[data-template="QT-GRID"] .logo-slot{ width:64px; height:64px; }
body[data-template="QT-GRID"] .logo-slot img{ width:58px; max-height:58px; }
body[data-template="QT-GRID"] .co-name{ color:#17324D; font-size:15px; letter-spacing:.04em; }
body[data-template="QT-GRID"] .co-name-en{ color:#5A7890; }
body[data-template="QT-GRID"] .co-meta{ color:#47657C; }
body[data-template="QT-GRID"] .co-lbl,
body[data-template="QT-GRID"] .doc-row .k{ color:#1E6FA8; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:9px; letter-spacing:.08em; }
body[data-template="QT-GRID"] .doc-title{
  color:#1E6FA8; font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:20px; letter-spacing:.08em;
}
body[data-template="QT-GRID"] .doc-sub{ color:#7A94A8; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
body[data-template="QT-GRID"] .rule{ height:1px; background:#7DB2D8; }
body[data-template="QT-GRID"] .rule-thin{ height:4px; background:#1E6FA8; }
body[data-template="QT-GRID"] .block{ margin:15px 24px 0; }
body[data-template="QT-GRID"] .block-head{ border-bottom:2px solid #1E6FA8; padding-bottom:4px; }
body[data-template="QT-GRID"] .block-head .cn{ color:#1E6FA8; letter-spacing:.2em; }
body[data-template="QT-GRID"] .block-head .en{ color:#7A94A8; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
body[data-template="QT-GRID"] .cust{
  background:#F1F8FD; border:1px dashed #7DB2D8; border-radius:0; padding:9px 12px;
}
body[data-template="QT-GRID"] .field .k{ color:#1E6FA8; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
body[data-template="QT-GRID"] .field .v{ color:#17324D; }
body[data-template="QT-GRID"] table.items{ border:1px solid #1E6FA8; }
body[data-template="QT-GRID"] table.items thead th{
  background:#1E6FA8; color:#fff; border-color:#7DB2D8; font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:9px; letter-spacing:.08em;
}
body[data-template="QT-GRID"] table.items tbody td{ border-color:#9CC4E0; }
body[data-template="QT-GRID"] table.items tbody tr:nth-child(even) td{ background:#F3F9FD; }
body[data-template="QT-GRID"] table.items tbody tr:hover td{ background:#E3F1FB; }
body[data-template="QT-GRID"] tfoot td{ background:#DCEFFF; color:#17324D; border-color:#1E6FA8; }
body[data-template="QT-GRID"] .sum-upper{
  background:#EAF5FF; border-left:4px solid #F0A202; color:#17324D;
}
body[data-template="QT-GRID"] .sum-upper .k{ color:#1E6FA8; }
body[data-template="QT-GRID"] .terms{ grid-template-columns:1fr 1fr; border-top:2px solid #1E6FA8; }
body[data-template="QT-GRID"] .term{ border-bottom:1px solid #9CC4E0; }
body[data-template="QT-GRID"] .term .k{ width:76px; color:#1E6FA8; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
body[data-template="QT-GRID"] .signs{ border-top:1px dashed #1E6FA8; }
body[data-template="QT-GRID"] .sign-cap{ color:#1E6FA8; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
body[data-template="QT-GRID"] .foot{ background:#EAF5FF; color:#47657C; border-top:1px dashed #7DB2D8; }

/* ---------- QT-LUXE / letterpress premium ---------- */
body[data-template="QT-LUXE"] .page{
  padding:0; background:#FCF9F3; color:#3A302A;
  font-family:Georgia,"Times New Roman",serif;
}
body[data-template="QT-LUXE"] .page::before{ display:none; }
body[data-template="QT-LUXE"] .head{
  padding:26px 34px 20px; background:#FCF9F3; color:#3A302A;
  border-bottom:1px solid #B39A6B;
}
body[data-template="QT-LUXE"] .logo-slot{ width:64px; height:64px; }
body[data-template="QT-LUXE"] .logo-slot img{ width:58px; max-height:58px; }
body[data-template="QT-LUXE"] .co-name{ color:#5A4632; font-size:16px; letter-spacing:.04em; }
body[data-template="QT-LUXE"] .co-name-en{ color:#8D7A61; }
body[data-template="QT-LUXE"] .co-meta{ color:#776A5A; }
body[data-template="QT-LUXE"] .co-lbl{ color:#A48B5B; }
body[data-template="QT-LUXE"] .doc-title{ color:#7A2E3A; font-size:24px; letter-spacing:.1em; }
body[data-template="QT-LUXE"] .doc-sub{ color:#A48B5B; letter-spacing:.14em; }
body[data-template="QT-LUXE"] .doc-row .k{ color:#A48B5B; }
body[data-template="QT-LUXE"] .doc-row .v{ color:#3A302A; }
body[data-template="QT-LUXE"] .rule{ height:1px; background:#B39A6B; }
body[data-template="QT-LUXE"] .rule-thin{ height:3px; background:#7A2E3A; }
body[data-template="QT-LUXE"] .block{ margin:18px 34px 0; }
body[data-template="QT-LUXE"] .block-head{ border-bottom:1px solid #D6C7AA; padding-bottom:5px; }
body[data-template="QT-LUXE"] .block-head .cn{ color:#7A2E3A; letter-spacing:.18em; }
body[data-template="QT-LUXE"] .block-head .en{ color:#A48B5B; }
body[data-template="QT-LUXE"] .cust{
  background:#FFFDF8; border:1px solid #D6C7AA; border-radius:0; padding:10px 13px;
}
body[data-template="QT-LUXE"] .field .k{ color:#A48B5B; letter-spacing:.12em; text-transform:uppercase; }
body[data-template="QT-LUXE"] .field .v{ color:#3A302A; }
body[data-template="QT-LUXE"] table.items{ border:0; }
body[data-template="QT-LUXE"] table.items thead th{
  background:#7A2E3A; color:#FFFDF8; border-color:#7A2E3A; letter-spacing:.1em;
}
body[data-template="QT-LUXE"] table.items tbody td{ border-color:#E7DCC8; background:#FFFDF8; }
body[data-template="QT-LUXE"] table.items tbody tr:nth-child(even) td{ background:#F8F3E9; }
body[data-template="QT-LUXE"] table.items tbody tr:hover td{ background:#F1E7D6; }
body[data-template="QT-LUXE"] tfoot td{ background:#F2E9D8; color:#7A2E3A; border-color:#D6C7AA; }
body[data-template="QT-LUXE"] .sum-upper{ background:#F7F0E3; border-left:3px solid #B39A6B; }
body[data-template="QT-LUXE"] .sum-upper .k{ color:#7A2E3A; }
body[data-template="QT-LUXE"] .terms{ grid-template-columns:1fr 1fr; border-top:3px double #B39A6B; }
body[data-template="QT-LUXE"] .term{ border-bottom:1px solid #E7DCC8; }
body[data-template="QT-LUXE"] .term .k{ width:74px; color:#7A2E3A; }
body[data-template="QT-LUXE"] .signs{ border-top:3px double #B39A6B; }
body[data-template="QT-LUXE"] .sign-cap{ color:#7A2E3A; }
body[data-template="QT-LUXE"] .foot{ background:#F7F0E3; color:#776A5A; border-top:1px solid #D6C7AA; }

@media print{
  body[data-template="QT-NOIR"] .head,
  body[data-template="QT-GRID"] .head,
  body[data-template="QT-LUXE"] .head,
  body[data-template="QT-NOIR"] table.items thead th,
  body[data-template="QT-GRID"] table.items thead th,
  body[data-template="QT-LUXE"] table.items thead th{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}

body.generator-app.mode-preview .page [contenteditable],
body.generator-app.mode-preview .page .pick,
body.generator-app.mode-preview .page td.c-del button{
  pointer-events:none !important; cursor:default !important;
}
body.generator-app.mode-preview .page [contenteditable]:hover,
body.generator-app.mode-preview .page [contenteditable]:focus{
  background:transparent !important; border-bottom-color:transparent !important; box-shadow:none !important;
}
body.generator-app.mode-preview .page .pick .caret{ opacity:.45; }

/* Noir header refinement: keep editorial contrast without a heavy black band */
body[data-template="QT-NOIR"] .head{
  background:#F6F2EC; color:#171717;
  border-bottom:1px solid #C8543B;
}
body[data-template="QT-NOIR"] .co-name{ color:#171717; }
body[data-template="QT-NOIR"] .co-name-en{ color:#6F6A63; }
body[data-template="QT-NOIR"] .co-meta{ color:#4B4843; }
body[data-template="QT-NOIR"] .co-lbl{ color:#C8543B; }
body[data-template="QT-NOIR"] .doc-id{
  min-width:220px; padding:9px 13px 8px;
  background:#161616; color:#fff;
  border-left:4px solid #C8543B;
}
body[data-template="QT-NOIR"] .doc-title{ color:#fff; font-size:24px; }
body[data-template="QT-NOIR"] .doc-sub{ color:#E3A14B; }
body[data-template="QT-NOIR"] .doc-row .k{ color:#AFAFAF; }
body[data-template="QT-NOIR"] .doc-row .v{ color:#fff; }
body[data-template="QT-NOIR"] .rule{ height:5px; background:#C8543B; }

/* Remove all heavy black surfaces from the Noir template */
body[data-template="QT-NOIR"] .doc-id{
  background:#F0E8DE; color:#171717;
  border-left:4px solid #C8543B;
}
body[data-template="QT-NOIR"] .doc-title{ color:#171717; }
body[data-template="QT-NOIR"] .doc-sub{ color:#C8543B; }
body[data-template="QT-NOIR"] .doc-row .k{ color:#6F6A63; }
body[data-template="QT-NOIR"] .doc-row .v{ color:#171717; }
body[data-template="QT-NOIR"] .rule-thin{ background:#C8543B; }
body[data-template="QT-NOIR"] table.items thead th{
  background:#C8543B; color:#fff; border-color:#C8543B;
}
body[data-template="QT-NOIR"] .sum-upper{
  background:#F0E8DE; color:#171717; border-left:4px solid #C8543B;
}
body[data-template="QT-NOIR"] .sum-upper .k{ color:#C8543B; }
body[data-template="QT-NOIR"] .foot{
  background:#F0E8DE; color:#4B4843; border-top:1px solid #C8543B;
}
body[data-template="QT-NOIR"] .foot img{ filter:none; }

body.generator-app .footer-clear-row{ display:flex; justify-content:flex-end; margin-top:9px; }
body.generator-app .footer-clear-row .btn{ padding:6px 9px; font-size:10px; }

body.generator-app .auth-tabs{ grid-template-columns:1fr; }

.doc-sub:empty{ display:none; }

.doc-sub{ display:none !important; }

/* ============================================================
   PI / CI three-way template family
   ============================================================ */

/* ---------- Noir family for PI / CI ---------- */
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .page{
  padding:0; background:#F6F2EC; color:#171717; font-family:Georgia,"Times New Roman",serif;
}
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .page::before{ display:none; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .head{
  padding:20px 28px 16px; background:#F6F2EC; color:#171717; border-bottom:4px solid #C8543B;
}
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .co-name{ color:#171717; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .co-name-en{ color:#6F6A63; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .co-meta{ color:#4B4843; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .co-lbl,
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .doc-row .k{ color:#C8543B; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .doc-id{
  min-width:220px; padding:8px 13px; background:#F0E8DE; color:#171717; border-left:4px solid #C8543B;
}
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .doc-title{ color:#171717; font-size:23px; letter-spacing:.08em; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .rule{ height:5px; background:#C8543B; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .rule-thin{ background:#C8543B; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .block{ margin:15px 28px 0; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .block-head{ border-bottom:1px solid #171717; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .block-head .cn{ color:#C8543B; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .cust,
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .notes-list{
  background:#FFFDF8; border:1px solid #D8C9BA; border-radius:0;
}
body[data-template$="-NOIR"]:not([data-template^="QT-"]) table.items thead th{
  background:#C8543B; color:#fff; border-color:#C8543B;
}
body[data-template$="-NOIR"]:not([data-template^="QT-"]) table.items tbody tr:nth-child(even) td{ background:#ECE6DE; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) tfoot td{ background:#F0E8DE; color:#171717; border-color:#C8543B; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .sum-upper{
  background:#F0E8DE; border-left:4px solid #C8543B; color:#171717;
}
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .sum-upper .k{ color:#C8543B; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .terms{ border-top:2px solid #171717; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .term .k{ color:#C8543B; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .signs{ border-top:4px double #171717; }
body[data-template$="-NOIR"]:not([data-template^="QT-"]) .foot{
  background:#F0E8DE; color:#4B4843; border-top:1px solid #C8543B;
}

/* ---------- Blueprint Grid family for PI / CI ---------- */
body[data-template$="-GRID"]:not([data-template^="QT-"]) .page{
  padding:0; background:#F7FBFF; color:#17324D; font-family:"Segoe UI",Arial,sans-serif;
}
body[data-template$="-GRID"]:not([data-template^="QT-"]) .page::before{ display:none; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) .head{
  padding:18px 24px 16px; background:#fff; color:#17324D;
  border-left:8px solid #1E6FA8; border-bottom:1px solid #1E6FA8;
}
body[data-template$="-GRID"]:not([data-template^="QT-"]) .co-name{ color:#17324D; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) .co-name-en{ color:#5A7890; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) .co-lbl,
body[data-template$="-GRID"]:not([data-template^="QT-"]) .doc-row .k{
  color:#1E6FA8; font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
body[data-template$="-GRID"]:not([data-template^="QT-"]) .doc-id{ min-width:220px; padding:8px 12px; border-left:4px solid #1E6FA8; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) .doc-title{
  color:#1E6FA8; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:20px;
}
body[data-template$="-GRID"]:not([data-template^="QT-"]) .rule{ background:#7DB2D8; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) .rule-thin{ height:4px; background:#1E6FA8; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) .block{ margin:14px 24px 0; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) .block-head{ border-bottom:2px solid #1E6FA8; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) .block-head .cn{ color:#1E6FA8; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) .cust,
body[data-template$="-GRID"]:not([data-template^="QT-"]) .notes-list{
  background:#F1F8FD; border:1px dashed #7DB2D8; border-radius:0;
}
body[data-template$="-GRID"]:not([data-template^="QT-"]) table.items{ border:1px solid #1E6FA8; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) table.items thead th{
  background:#1E6FA8; color:#fff; border-color:#7DB2D8;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
body[data-template$="-GRID"]:not([data-template^="QT-"]) table.items tbody tr:nth-child(even) td{ background:#F3F9FD; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) tfoot td{ background:#DCEFFF; color:#17324D; border-color:#1E6FA8; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) .sum-upper{
  background:#EAF5FF; border-left:4px solid #F0A202; color:#17324D;
}
body[data-template$="-GRID"]:not([data-template^="QT-"]) .sum-upper .k{ color:#1E6FA8; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) .terms{ border-top:2px solid #1E6FA8; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) .term .k{
  color:#1E6FA8; font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
body[data-template$="-GRID"]:not([data-template^="QT-"]) .signs{ border-top:1px dashed #1E6FA8; }
body[data-template$="-GRID"]:not([data-template^="QT-"]) .foot{
  background:#EAF5FF; color:#47657C; border-top:1px dashed #7DB2D8;
}

/* ---------- Luxe Letterpress family for PI / CI ---------- */
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .page{
  padding:0; background:#FCF9F3; color:#3A302A; font-family:Georgia,"Times New Roman",serif;
}
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .page::before{ display:none; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .head{
  padding:24px 34px 18px; background:#FCF9F3; color:#3A302A; border-bottom:1px solid #B39A6B;
}
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .co-name{ color:#5A4632; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .co-name-en{ color:#8D7A61; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .co-lbl{ color:#A48B5B; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .doc-id{ min-width:220px; padding:8px 12px; border-left:4px solid #7A2E3A; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .doc-title{ color:#7A2E3A; font-size:22px; letter-spacing:.08em; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .rule{ background:#B39A6B; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .rule-thin{ height:3px; background:#7A2E3A; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .block{ margin:16px 34px 0; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .block-head{ border-bottom:1px solid #D6C7AA; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .block-head .cn{ color:#7A2E3A; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .cust,
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .notes-list{
  background:#FFFDF8; border:1px solid #D6C7AA; border-radius:0;
}
body[data-template$="-LUXE"]:not([data-template^="QT-"]) table.items thead th{
  background:#7A2E3A; color:#FFFDF8; border-color:#7A2E3A;
}
body[data-template$="-LUXE"]:not([data-template^="QT-"]) table.items tbody tr:nth-child(even) td{ background:#F8F3E9; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) tfoot td{ background:#F2E9D8; color:#7A2E3A; border-color:#D6C7AA; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .sum-upper{
  background:#F7F0E3; border-left:3px solid #B39A6B;
}
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .sum-upper .k{ color:#7A2E3A; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .terms{ border-top:3px double #B39A6B; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .term .k{ color:#7A2E3A; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .signs{ border-top:3px double #B39A6B; }
body[data-template$="-LUXE"]:not([data-template^="QT-"]) .foot{
  background:#F7F0E3; color:#776A5A; border-top:1px solid #D6C7AA;
}

@media print{
  body[data-template$="-NOIR"]:not([data-template^="QT-"]) .head,
  body[data-template$="-GRID"]:not([data-template^="QT-"]) .head,
  body[data-template$="-LUXE"]:not([data-template^="QT-"]) .head,
  body[data-template$="-NOIR"]:not([data-template^="QT-"]) table.items thead th,
  body[data-template$="-GRID"]:not([data-template^="QT-"]) table.items thead th,
  body[data-template$="-LUXE"]:not([data-template^="QT-"]) table.items thead th{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}

/* ═══════════════════════════════════════════════════════════
   PI-ZZSL dedicated layout
   Faithful port of zzsl-外贸单据/生成器/PI-生成器.html
   ═══════════════════════════════════════════════════════════ */
#piZzslLayout{ display:none; }

body[data-template="PI-ZZSL"] .page > :not(#piZzslLayout){
  display:none !important;
}
body[data-template="PI-ZZSL"] #piZzslLayout:not([hidden]){
  display:block !important;
}
body[data-template="PI-ZZSL"] .page{
  padding:0;
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;
  color:#1f2937;
  line-height:1.5;
}

.pz-document{
  min-height:296mm;
  background:#fff;
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;
  color:#1f2937;
  line-height:1.5;
}

/* ── 抬头 ── */
.pz-head{
  background:#0B2E5C;
  color:#fff;
  padding:22px 36px 0;
}
.pz-head-top{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:12px;
  align-items:flex-start;
  min-height:54px;
}
.pz-logo{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pz-logo svg{ width:44px; height:44px; display:block; }
.pz-logo img{ width:54px; height:54px; display:block; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.pz-company-block{ min-width:0; padding-top:1px; }
.pz-company{
  font-size:13.5px;
  font-weight:700;
  line-height:1.35;
}
.pz-address{
  margin-top:3px;
  font-size:10px;
  line-height:1.45;
  opacity:.82;
}
.pz-contact{
  text-align:right;
  font-size:10.5px;
  line-height:1.65;
  opacity:.9;
  white-space:nowrap;
}
.pz-title-bar{
  margin:18px -36px 0;
  padding:16px 36px;
  background:linear-gradient(135deg,#0B2E5C 0%,#1a4a8a 100%);
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.pz-title{
  font-size:24px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:3px;
  text-transform:uppercase;
}
.pz-meta{
  text-align:right;
  font-size:11px;
  line-height:1.8;
}
.pz-meta span{ opacity:.75; }
.pz-meta strong{ font-weight:600; }

/* ── 正文 ── */
.pz-body{ padding:24px 36px 28px; }

.pz-parties{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}
.pz-party-box{
  border:1px solid #dce1e8;
  border-radius:6px;
  overflow:hidden;
  background:#fff;
}
.pz-party-label{
  background:#eef2f8;
  padding:7px 12px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  color:#0B2E5C;
  text-transform:uppercase;
  border-bottom:1px solid #dce1e8;
}
.pz-party-content{
  padding:10px 12px;
  font-size:11.5px;
  line-height:1.8;
}
.pz-party-name{
  margin-bottom:3px;
  color:#0B2E5C;
  font-size:12.5px;
  font-weight:700;
  line-height:1.45;
}

.pz-section-title{
  margin-bottom:8px;
  padding-bottom:5px;
  border-bottom:2px solid #0B2E5C;
  color:#0B2E5C;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

/* ── 货物明细 ── */
.pz-items{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  margin-bottom:16px;
  font-size:11.5px;
}
.pz-items th{
  padding:8px 6px;
  background:#0B2E5C;
  color:#fff;
  border:0;
  text-align:left;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.5px;
}
.pz-items td{
  padding:8px 6px;
  border-bottom:1px solid #dce1e8;
  vertical-align:top;
  background:#fff;
}
.pz-items tbody tr:nth-child(even) td{ background:#f8fafc; }
.pz-items .pz-center{ text-align:center; }
.pz-items .pz-num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.pz-model{
  color:#0B2E5C;
  font-weight:600;
}
.pz-desc{
  color:#6b7280;
  font-size:10.5px;
  margin-top:1px;
}
.pz-items tr.pz-negative .pz-num{ color:#c0392b; }
.pz-items tr.pz-muted .pz-num{ color:#6b7280; }
.pz-total-row td{
  background:#eef4ff !important;
  border-top:2px solid #0B2E5C;
  border-bottom:0;
  color:#0B2E5C;
  font-size:13px;
  font-weight:700;
}
.pz-total-label{ text-align:right; padding-right:14px !important; }
.pz-total-amount{ white-space:nowrap; font-size:12.5px; }

.pz-amount-words{
  margin-bottom:16px;
  padding:8px 12px;
  background:#fffbe6;
  border-left:3px solid #C8A45C;
  font-size:11.5px;
  line-height:1.6;
}
.pz-amount-words strong{ color:#0B2E5C; }

/* ── 银行 + 条款 ── */
.pz-bottom-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
.pz-bank-box,
.pz-terms-box{
  border:1px solid #dce1e8;
  border-radius:6px;
  overflow:hidden;
  background:#fff;
}
.pz-box-head{
  padding:7px 12px;
  background:#eef4ff;
  border-bottom:1px solid #dce1e8;
  color:#0B2E5C;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.pz-terms-box .pz-box-head{
  background:#eef2f8;
}
.pz-bank-body,
.pz-terms-body{
  padding:10px 12px;
  font-size:11px;
  line-height:1.9;
}
.pz-bank-row{ display:flex; min-width:0; }
.pz-bank-row .k{
  min-width:88px;
  flex:none;
  color:#6b7280;
  font-weight:500;
}
.pz-bank-row .v{
  flex:1;
  min-width:0;
  font-weight:500;
}
.pz-term-item{
  display:flex;
  gap:6px;
}
.pz-term-num{
  flex:none;
  color:#0B2E5C;
  font-weight:700;
}
.pz-term-item strong{ font-weight:700; }

/* ── 签署 ── */
.pz-signature-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid #dce1e8;
}
.pz-sign-block{ font-size:11.5px; }
.pz-sign-label{
  margin-bottom:36px;
  color:#0B2E5C;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.pz-sign-company{
  margin-bottom:4px;
  font-weight:600;
}
.pz-sign-space{ height:28px; }
.pz-sign-line{
  padding-top:5px;
  border-top:1px solid #9ca3af;
  color:#6b7280;
  font-size:10px;
}

/* ── 打印 ── */
@media print{
  body[data-template="PI-ZZSL"] #piZzslLayout,
  body[data-template="PI-ZZSL"] .pz-head,
  body[data-template="PI-ZZSL"] .pz-items th,
  body[data-template="PI-ZZSL"] .pz-total-row td{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .pz-document{ min-height:0; }
}

@media (max-width:1000px){
  .pz-head{ padding-left:20px; padding-right:20px; }
  .pz-title-bar{ margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px; }
  .pz-body{ padding-left:20px; padding-right:20px; }
  .pz-contact{ white-space:normal; }
}