/* OC 银行与账单工坊 · BANK STATEMENT
   字体全部本地，跨项目相对引用不复制：
   Archivo 与 Spline Mono 在 #22 吊牌里，Bodoni Moda 在 #11 小册里，Cormorant 在 #08 模拟桌面里，
   Fusion Pixel 在 #16 工牌里，汇文正楷在 #11 小册里，思源宋体／黑体在 shared/fonts。这个项目没有新下载字体。
   西文字体栈第二位一律补本地思源，碰到中文时回退到随项目部署的字，而不是各设备自带的系统字（#27 修过同一个问题）。 */
@font-face { font-family: "OC Bodoni Moda"; src: url("../museum-booklet-generator/fonts/BodoniModa-Latin.woff2") format("woff2");
  font-style: normal; font-weight: 400 900; font-display: swap; }
@font-face { font-family: "OC Cormorant"; src: url("../desktop-moodboard-generator/fonts/CormorantGaramond-Latin.woff2") format("woff2");
  font-style: normal; font-weight: 300 700; font-display: swap; }
/* 点阵字：简体中文包里自带 ASCII，一个文件就够 */
@font-face { font-family: "OC Fusion Pixel"; src: url("../id-badge-generator/fonts/fusion-pixel/fusion-pixel-10px-monospaced-zh_hans.otf.woff2") format("woff2");
  font-style: normal; font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;
  --ui-accent: #2c5a4d;
  --ui-accent-dark: #1f4439;
  --ui-accent-soft: #e2ebe7;
  --ui-warn: #a3342e;
  --ui-warn-soft: #f6e6e4;
  --ui-bg: #e6e9e6;
  --ui-panel: #f6f7f5;
  --ui-card: #fbfcfa;
  --ui-line: #d3d9d4;
  --ui-line-strong: #aeb7b1;
  --ui-text: #151c18;
  --ui-muted: #56615b;
  --topbar-height: 64px;
  /* 界面文字统一用思源宋（西文也走它自带的拉丁字形，界面里不再混两套） */
  --font-ui: "OC Noto Serif SC","Noto Serif SC","Songti SC","PingFang SC",serif;
  --font-serif: "OC Noto Serif SC","Noto Serif SC","Songti SC",serif;
  --font-mono: "OC Spline Mono","OC Noto Sans SC",Consolas,"Courier New",monospace;
  font-family: var(--font-ui);
}
* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; }
body { width: 100%; height: 100vh; height: 100dvh; min-width: 320px; margin: 0; overflow: hidden; display: grid; grid-template-rows: var(--topbar-height) minmax(0,1fr); color: var(--ui-text); background: var(--ui-bg); }
body.is-export-busy,body.is-export-busy button { cursor: progress; }
button,input,textarea,select { font: inherit; color: inherit; }
button,.file-button { -webkit-tap-highlight-color: transparent; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
button:active,.file-button:active { transform: translateY(1px); }
/* 取色器的色块靠 translateY(-50%) 垂直居中；它在 DOM 里排在输入框前面，是外层 <label> 的「被标记控件」，
   按下 label 里任何地方它都算 :active——上面那条会把它顶下去半格，看起来就是点一下弹一下。按下时保持居中 */
.clr-field button:active { transform: translateY(-50%); }
[hidden] { display: none !important; }

.topbar { height: 100%; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--ui-line); background: rgba(251,252,250,.98); position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 250px; color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 3px; background: var(--ui-accent); color: #fff; font-family: var(--font-serif); font-size: 22px; font-weight: 800; box-shadow: 4px 4px 0 #cbd6d0; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy b { font-family: var(--font-serif); font-size: 17px; line-height: 1.2; }
.brand-copy small { color: var(--ui-muted); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.project-field { flex: 1; max-width: 420px; display: grid; grid-template-columns: auto minmax(160px,1fr); align-items: center; gap: 8px; }
.project-field span { color: var(--ui-muted); font-size: 12px; font-weight: 700; }
.project-field input { height: 40px; min-width: 0; padding: 0 12px; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.button,.preview-actions button { min-height: 38px; padding: 0 13px; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 750; white-space: nowrap; }
.button:hover,.preview-actions button:hover { border-color: var(--ui-accent); }
.button.primary { border-color: var(--ui-accent); background: var(--ui-accent); color: #fff; }
.button.quiet { background: transparent; }
.button.compact { min-height: 34px; padding-inline: 10px; font-size: 12px; }
.button:disabled,.preview-actions button:disabled { opacity: .4; cursor: default; }
.file-button { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.file-button input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.text-button { padding: 4px 0; border: 0; background: transparent; color: var(--ui-accent-dark); cursor: pointer; font-size: 12px; font-weight: 750; }
.workspace { min-height: 0; display: grid; grid-template-columns: 364px minmax(430px,1fr) 372px; }
.editor-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); background: var(--ui-panel); }
.content-panel { border-right: 1px solid var(--ui-line); }
.style-panel { border-left: 1px solid var(--ui-line); }
.panel-heading { min-height: 70px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ui-line); background: #f9fbfa; }
.panel-heading > span { padding: 4px 8px; border-radius: 4px; background: var(--ui-accent-soft); color: var(--ui-accent-dark); font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.panel-heading h1 { margin: 0; font-family: var(--font-serif); font-size: 17px; }
.panel-heading p { margin: 2px 0 0; color: var(--ui-muted); font-size: 11px; }
.panel-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px; scrollbar-gutter: stable; }
.editor-card { margin-bottom: 14px; padding: 14px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-card); box-shadow: 0 1px 0 rgba(33,40,36,.03); }
.card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-title h2 { margin: 0; font-family: var(--font-serif); font-size: 15px; }
.card-title p { margin: 3px 0 0; color: var(--ui-muted); font-size: 11px; line-height: 1.5; }
.card-title > span { padding: 3px 7px; border: 1px solid var(--ui-line); border-radius: 4px; color: var(--ui-muted); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.field { min-width: 0; display: grid; gap: 5px; margin-bottom: 10px; }
.field > span { color: var(--ui-muted); font-size: 11px; font-weight: 750; }
.field input,.field select,.field textarea { min-height: 38px; min-width: 0; padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; font-size: 13px; }
.field textarea { min-height: 66px; line-height: 1.6; resize: vertical; }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 9px; }
.field-grid.cols3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.field-grid .span2 { grid-column: span 2; }
.field-grid .span-all { grid-column: 1 / -1; }
.inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.style-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.style-button { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; text-align: left; cursor: pointer; }
.style-button.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.style-swatch { width: 30px; height: 40px; border: 1px solid rgba(0,0,0,.15); border-radius: 3px; background: linear-gradient(180deg,var(--sw-surface) 0 44%,var(--sw-accent) 44% 68%,var(--sw-mark) 68% 82%,var(--sw-line) 82%); }
.style-button b { display: block; font-size: 11.5px; line-height: 1.35; }
.style-button small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 9.5px; line-height: 1.32; }
/* 取色器一加载，shared/oc-color-picker.css 的 .color-grid:has(.clr-field){1fr !important}
   就接管列数，色槽变成一行一个——共享组件的既定行为，#25–#27 都一样。这条是取色器没加载上时的兜底。 */
.color-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.color-field { min-width: 0; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; }
.color-field > span { font-size: 10.5px; font-weight: 750; }
.color-field .clr-field { width: 100%; }
.color-field input { width: 100%; min-width: 0; height: 30px; border: 0; background: transparent; }
.check-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.check-row label,.check-field { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; font-size: 12px; font-weight: 700; }
.check-field { margin-top: 8px; }
.check-row input,.check-field input { accent-color: var(--ui-accent); }
.segment-control { display: grid; gap: 7px; }
.segment-control > span { color: var(--ui-muted); font-size: 11px; font-weight: 750; }
.segment-switch { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); }
.segment-switch button { min-height: 36px; border: 1px solid var(--ui-line); border-right: 0; background: #fff; cursor: pointer; font-size: 12px; font-weight: 800; }
.segment-switch button:first-child { border-radius: 6px 0 0 6px; }
.segment-switch button:last-child { border-right: 1px solid var(--ui-line); border-radius: 0 6px 6px 0; }
.segment-switch button.active { border-color: var(--ui-accent); background: var(--ui-accent); color: #fff; }
.hint-note { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--ui-line-strong); background: #eef2ef; color: var(--ui-muted); font-size: 11px; line-height: 1.6; }
.hint-note.warn { border-left-color: var(--ui-warn); background: var(--ui-warn-soft); color: #7d2520; font-weight: 700; }
.hint-note b { color: var(--ui-text); }
.hint-note code { padding: 1px 4px; border-radius: 3px; background: #fff; color: var(--ui-accent-dark); font: 700 10.5px/1.6 var(--font-mono); }
.empty-note { margin: 4px 0; color: var(--ui-muted); font-size: 11px; }
.calc-note { margin: 9px 0 0; padding: 9px 11px; border-left: 3px solid var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-dark); font-size: 11.5px; line-height: 1.75; }
.calc-note b { font-weight: 700; }
.calc-note.warn { border-left-color: var(--ui-warn); background: var(--ui-warn-soft); color: #7d2520; }
.calc-note:empty { display: none; }
.export-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.export-grid .button { min-height: 42px; }
.export-grid > .oc-pw-export-button { order: 99; grid-column: 1 / -1; }
.preview-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: 48px minmax(0,1fr); background: #d4d9d6; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0 11px; border-bottom: 1px solid var(--ui-line); background: #f3f5f3; }
.preview-toolbar > div { display: flex; align-items: center; gap: 6px; }
.preview-toolbar strong { font-size: 13px; }
.preview-toolbar #save-state { color: var(--ui-muted); font-size: 11px; }
.preview-actions button { min-height: 32px; padding: 0 9px; font-size: 12px; }
.page-badge { min-width: 56px; text-align: center; font: 700 11px/1 var(--font-mono); color: var(--ui-muted); }
.zoom-box { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; }
.zoom-box button { min-width: 26px; min-height: 30px; padding: 0; font-size: 13px; }
.zoom-box output { min-width: 44px; text-align: center; color: var(--ui-muted); font: 700 11px/1 var(--font-mono); }
.preview-viewport { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.preview-stage { position: relative; margin: 26px auto; box-shadow: 0 12px 34px rgba(24,32,28,.22); }

/* ---- 选文档／语言／尺寸 ---- */
.doc-grid,.lang-grid,.size-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.doc-button,.lang-button,.size-button { min-width: 0; min-height: 46px; padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 6px;
  background: #fff; text-align: left; cursor: pointer; }
.doc-button.active,.lang-button.active,.size-button.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.doc-button b,.lang-button b,.size-button b { display: block; font-size: 12.5px; }
.doc-button small,.lang-button small,.size-button small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 9.5px; line-height: 1.35; }
.inline-checks { display: flex; flex-wrap: wrap; gap: 4px 2px; margin-top: 10px; }
.check-inline { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 8px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; color: var(--ui-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.check-inline input { accent-color: var(--ui-accent); }

/* ---- 清单 ＋ 选中项：和 #23 聊天记录一个路子 ---- */
.msg-list,.sticker-list { display: grid; gap: 6px; }
.msg-row { position: relative; display: grid; grid-template-columns: 27px auto minmax(0,1fr) auto; align-items: center; gap: 8px;
  padding: 7px 9px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; cursor: pointer; text-align: left;
  transition: border-color .14s ease, box-shadow .14s ease, opacity .14s ease, transform .14s ease; }
.msg-row.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.msg-row.is-derived { background: #f3f6f4; cursor: default; }
.msg-row.is-replaced { opacity: .55; }
.msg-row b { display: block; overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.msg-row small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row .amt { font: 700 11.5px/1.3 var(--font-mono); white-space: nowrap; text-align: right; }
.msg-row .amt.in { color: var(--ui-accent-dark); }
.msg-drag-handle { width: 27px; height: 31px; padding: 0; display: grid; place-items: center; border: 1px solid var(--ui-line);
  border-radius: 5px; background: #fff; color: var(--ui-muted); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.msg-drag-handle::before { content: ""; width: 12px; height: 18px; opacity: .8;
  background: radial-gradient(circle, currentColor 1.35px, transparent 1.6px) 0 0 / 6px 6px; }
.msg-drag-handle:hover,.msg-drag-handle:focus-visible { border-color: var(--ui-accent); color: var(--ui-accent-dark); outline: none; }
.msg-drag-handle:active { cursor: grabbing; }
.msg-drag-handle[disabled] { visibility: hidden; }
.msg-row.is-dragging { opacity: .46; transform: scale(.985); }
.msg-row.is-drop-before { box-shadow: inset 0 3px 0 var(--ui-accent); }
.msg-row.is-drop-after { box-shadow: inset 0 -3px 0 var(--ui-accent); }
body.is-message-sorting { user-select: none; -webkit-user-select: none; }
.kind-chip { flex: none; min-width: 34px; padding: 2px 5px; border-radius: 3px; background: var(--ui-accent-soft);
  color: var(--ui-accent-dark); font-size: 10px; font-weight: 800; text-align: center; }
.msg-row.active .kind-chip { background: #fff; }
.row-tail { display: flex; align-items: center; gap: 6px; }
.flag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-warn); flex: none; }
.row-actions { display: flex; gap: 4px; }
.row-actions button,.fee-row .row-del { min-height: 26px; padding: 0 8px; display: grid; place-items: center; border: 1px solid var(--ui-line);
  border-radius: 5px; background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--ui-muted); }
.row-actions button:hover,.fee-row .row-del:hover { border-color: var(--ui-accent); color: var(--ui-text); }
.row-actions button.on { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-dark); }
.msg-row .row-actions button { min-height: 28px; padding: 0 7px; font-size: 11px; }
.mini-ava { width: 28px; height: 28px; flex: none; border-radius: 5px; display: grid; place-items: center; overflow: hidden;
  background: var(--ui-accent-soft); color: var(--ui-accent-dark); font-size: 12px; font-weight: 800; }
#sticker-list .msg-row { grid-template-columns: 28px minmax(0,1fr) auto; }
.add-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-top: 9px; }
.add-grid button { min-height: 32px; padding: 0 4px; border: 1px dashed var(--ui-line-strong); border-radius: 5px; background: #fff;
  cursor: pointer; color: var(--ui-accent-dark); font-size: 11.5px; font-weight: 750; }
.add-grid button:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.add-grid .wide { grid-column: span 2; border-style: solid; }
.button.row-add { width: 100%; min-height: 36px; margin-top: 2px; border-style: dashed; color: var(--ui-accent-dark); }
.button.row-add:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }

/* 选中项编辑区：字段竖着排，两三列 */
.row-fields { display: grid; gap: 7px; }
.row-fields .fx { display: grid; gap: 4px; min-width: 0; }
.row-fields .fx > span { color: var(--ui-muted); font-size: 10.5px; font-weight: 700; }
.row-fields input,.row-fields select,.row-fields textarea { min-height: 34px; min-width: 0; padding: 6px 8px;
  border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; font-size: 12.5px; }
.row-fields textarea { min-height: 60px; line-height: 1.6; resize: vertical; }
.row-fields.cols2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.row-fields.cols3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.row-fields .span2 { grid-column: span 2; }
.row-fields .span-all { grid-column: 1 / -1; }
.dir-switch { display: grid; grid-template-columns: 1fr 1fr; }
.dir-switch button { min-height: 34px; border: 1px solid var(--ui-line); background: #fff; cursor: pointer; font-size: 12px; font-weight: 800; }
.dir-switch button:first-child { border-radius: 5px 0 0 5px; border-right: 0; }
.dir-switch button:last-child { border-radius: 0 5px 5px 0; }
.dir-switch button.active { border-color: var(--ui-accent); background: var(--ui-accent); color: #fff; }
.why-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.why { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: 4px;
  background: var(--ui-warn-soft); color: #7d2520; font-size: 11px; font-weight: 750; }
.why.routine { background: var(--ui-accent-soft); color: var(--ui-accent-dark); }
.why.quiet { background: #eef1ef; color: var(--ui-muted); }

/* 一条一行的小清单：佣金档、工资项目、受益人、保障项目、卡片 */
.fee-head { display: grid; grid-template-columns: minmax(0,1fr) 104px 34px; gap: 6px; margin-bottom: 5px; padding: 0 9px; }
.fee-head span { color: var(--ui-muted); font-size: 10.5px; font-weight: 750; }
.fee-row { display: grid; grid-template-columns: minmax(0,1fr) 104px 34px; gap: 6px; align-items: center;
  margin-bottom: 7px; padding: 8px 9px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; }
.fee-row input,.fee-row select,.pr-row input,.pr-row select { min-height: 34px; min-width: 0; padding: 6px 8px; border: 1px solid var(--ui-line);
  border-radius: 5px; background: #fff; font-size: 12.5px; }
.fee-row .row-del { min-height: 34px; padding: 0; }
.pr-row { display: grid; gap: 6px; margin-bottom: 7px; padding: 8px 9px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; }
.pr-row .line1 { display: grid; gap: 6px; align-items: center; }
.pr-row .row-actions button { min-height: 30px; }
.pr-row .line1.cards { grid-template-columns: 70px 76px minmax(0,1fr) auto; }
.pr-row .line1.bene { grid-template-columns: 88px minmax(0,1fr) 78px 64px auto; }
.pr-row .line2 { display: grid; grid-template-columns: minmax(0,1fr) 96px 96px; gap: 6px; }
.pr-row .line2.cards { grid-template-columns: 1fr; }
.pr-row small { color: var(--ui-muted); font-size: 10px; }
.editor-block { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ui-line); }

/* ================= 贴纸 ================= */
.sticker-layer { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.canvas-sticker { position: absolute; left: var(--x); top: var(--y); width: var(--w); min-height: var(--h);
  transform: translate(-50%,-50%) rotate(var(--r)); display: grid; pointer-events: auto; cursor: grab; touch-action: none; }
.canvas-sticker.is-locked { cursor: default; }
.canvas-sticker.is-hidden { display: none; }
.canvas-sticker.is-selected { outline: 1.5px dashed var(--ui-accent); outline-offset: 2px; }
.sticker-body { width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; box-sizing: border-box; word-break: break-word; line-height: 1.2; }
.sticker-body img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sticker-font-sans { font-family: "OC Noto Sans SC","PingFang SC",sans-serif; }
.sticker-font-serif { font-family: "OC Noto Serif SC","Songti SC",serif; }
.sticker-font-kai { font-family: "Huiwen-ZhengKai","OC Noto Serif SC",serif; }
.sticker-font-mono { font-family: "OC Spline Mono","OC Noto Sans SC",monospace; }
/* 点阵字只有一个字重：关掉浏览器的仿粗体，不然像素会糊成一团；字号取 10 的整数倍（20、30）最清楚 */
.sticker-font-pixel { font-family: "OC Fusion Pixel","OC Noto Sans SC",monospace; font-synthesis: none; }
/* 三种西文字体，中文回退到随项目部署的思源 */
.sticker-font-bodoni { font-family: "OC Bodoni Moda","OC Noto Serif SC",serif; }
.sticker-font-cormorant { font-family: "OC Cormorant","OC Noto Serif SC",serif; }
.sticker-font-archivo { font-family: "OC Archivo","OC Noto Sans SC",sans-serif; }
.sticker-handle { position: absolute; z-index: 3; width: 16px; height: 16px; border: 2px solid var(--ui-accent); border-radius: 50%;
  background: #fff; opacity: 0; pointer-events: none; touch-action: none; }
.sticker-handle::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.canvas-sticker.is-selected .sticker-handle { opacity: 1; pointer-events: auto; }
.canvas-sticker.is-locked .sticker-handle { display: none; }
.resize-handle { right: -10px; bottom: -10px; cursor: nwse-resize; transform: scale(var(--preview-inverse-scale,1)); transform-origin: 50% 50%; }
.rotate-handle { left: 50%; top: -28px; margin-left: -8px; cursor: grab; transform: scale(var(--preview-inverse-scale,1)); transform-origin: 50% 50%; }
.rotate-handle::after { content: ""; position: absolute; left: 6px; top: 14px; width: 2px; height: 14px; background: var(--ui-accent); }
.preset-sticker-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 10px; }
.preset-sticker-grid button { min-height: 32px; padding: 0 6px; border: 1px solid var(--ui-line); border-radius: 5px;
  background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; }
.preset-sticker-grid button:hover { border-color: var(--ui-accent); }

.mobile-resizer,.mobile-main-tabs { display: none; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 140; max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 6px; background: var(--ui-accent-dark); color: #fff; font-size: 13px; opacity: 0; pointer-events: none; transform: translate(-50%,16px); transition: .16s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01s !important; animation-duration:.01s !important; scroll-behavior:auto !important; } }


/* ================= 纸面 =================
   一份标记，八套 [data-style] 覆盖。流水与信用卡在 A4 上分页，每一行单行定高，放不下先缩字、再折行。
   以下这一大段和样张 tmp/bank-sample-20260910-1 里的是同一份，改的时候两边一起改。 */

/* ================= 纸面：公共 ================= */
.bk{--surface:#fff;--ink:#1d1d1f;--accent:#6e2f2b;--muted:#5f5f66;--line:#a3a3a8;--mark:#b3261e;--pen:#c52e22;
  --f-body:var(--f-song);--f-num:var(--f-mono);--f-lat:var(--f-mono);
  --f-hand:var(--f-kai);--f-dot:var(--f-dot);
  --pt:54px;--px:50px;--pb:38px;--gut:0px;--rh:26px;--fs:14px;
  color:var(--ink);font-family:var(--f-body);font-size:var(--fs);line-height:1.5;text-align:left;-webkit-font-smoothing:antialiased}
.bk[data-mark="pen"]{--gut:var(--gut-pen,96px)}
.bk *{box-sizing:border-box}
.bk .pg{position:relative;width:794px;height:1123px;overflow:hidden;background:var(--surface);
  padding:var(--pt) calc(var(--px) + var(--gut)) var(--pb) var(--px)}
.bk .pg+.pg{margin-top:28px}
.bk .n{font-family:var(--f-num);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.bk .tb{width:100%;border-collapse:collapse;table-layout:fixed}
.bk .tb td,.bk .tb th{height:var(--rh);padding:0 7px;white-space:nowrap;overflow:hidden;text-overflow:clip;vertical-align:middle}
.bk .tb th{font-weight:700;text-align:left;line-height:1.2}
.bk .tb th b,.bk .tb th i{display:block;font-style:normal}
.bk .tb th i{margin-top:2px;font:500 10.5px/1.2 var(--f-lat);letter-spacing:.06em;color:var(--muted)}
.bk .tb th.n{text-align:right}
.bk .tb td.wrap{white-space:normal;line-height:1.3;padding-top:4px;padding-bottom:4px;word-break:break-all}
.bk[data-style="greenbar"] .tb td.wrap{line-height:24px;padding-top:0;padding-bottom:0}
.bk .tb td.fl{padding:0;text-align:center;font:700 11px/1 var(--f-lat);letter-spacing:-.02em;color:var(--mark)}
.bk[data-mark="system"] tr.flagged td{color:var(--mark)}
.bk[data-mark="system"] tr.flagged td.pty{font-weight:700}
.bk .pg-foot{position:absolute;left:var(--px);right:var(--px);bottom:var(--pb)}
.bk .pg-meta{display:flex;justify-content:space-between;gap:14px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.bk .legend{margin-bottom:6px;font:600 11px/1.4 var(--f-lat);letter-spacing:.04em;color:var(--mark)}
.bk .prop{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);font:600 11px/1.4 var(--f-lat);letter-spacing:.1em;color:var(--muted)}
.bk .prop b{font-family:var(--f-body);letter-spacing:.14em;font-weight:700;margin-right:10px}
.bk .pen{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.bk .pen path{fill:none;stroke:var(--pen);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.bk .pen path.lead{stroke-width:1.3}
.bk .pen-note{position:absolute;font:400 14.5px/1.22 var(--f-hand);color:var(--pen);transform:rotate(-4deg);transform-origin:0 50%;white-space:normal;word-break:break-all;text-wrap:balance}

/* ================= 1 柜面打印 counter ================= */
.bk[data-style="counter"]{--surface:#fff;--ink:#1c1c1e;--accent:#6b2d29;--muted:#58585e;--line:#9d9da3;--mark:#b3261e;--pen:#c42e22;--band:#ebebed;--px:46px}
.bk[data-style="counter"] .hd{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:12px;border-bottom:3px double var(--ink)}
.bk[data-style="counter"] .hd-bank b{display:block;font:900 27px/1.05 var(--f-body);letter-spacing:.1em;color:var(--accent)}
.bk[data-style="counter"] .hd-bank i{display:block;margin-top:6px;font:600 11px/1 var(--f-lat);letter-spacing:.26em;color:var(--accent);font-style:normal}
.bk[data-style="counter"] .hd-title{text-align:right}
.bk[data-style="counter"] .hd-title b{display:block;font:800 21px/1.1 var(--f-body);letter-spacing:.32em}
.bk[data-style="counter"] .hd-title i{display:block;margin-top:6px;font:600 11px/1 var(--f-lat);letter-spacing:.2em;font-style:normal;color:var(--muted)}
.bk[data-style="counter"] .info{display:grid;grid-template-columns:1fr 1.22fr;gap:5px 24px;margin:14px 0 14px;font-size:13.5px}
.bk[data-style="counter"] .info>div{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:baseline}
.bk[data-style="counter"] .info span{color:var(--muted);font-size:12.5px}
.bk[data-style="counter"] .info span i{font:500 10px var(--f-lat);letter-spacing:.03em;font-style:normal;margin-left:4px}
.bk[data-style="counter"] .info .n{text-align:left}
.bk[data-style="counter"] .sum{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:16px;border:1px solid var(--line)}
.bk[data-style="counter"] .sum>div{padding:8px 10px 7px;border-left:1px solid var(--line)}
.bk[data-style="counter"] .sum>div:first-child{border-left:0}
.bk[data-style="counter"] .sum span{display:block;font-size:12px;color:var(--muted)}
.bk[data-style="counter"] .sum span i{display:block;font:500 10px var(--f-lat);letter-spacing:.05em;font-style:normal;margin-top:1px}
.bk[data-style="counter"] .sum strong{display:block;margin-top:2px;font:600 17px/1.3 var(--f-num);text-align:right;font-variant-numeric:tabular-nums}
.bk[data-style="counter"] .sum small{display:block;text-align:right;font:500 11px var(--f-lat);color:var(--muted)}
.bk[data-style="counter"] .tb th,.bk[data-style="counter"] .tb td{border:1px solid var(--line)}
.bk[data-style="counter"] .tb th{height:42px;background:var(--band);font-size:13px}
.bk[data-style="counter"] tr.mo td{height:28px;background:#f5f5f6;font-weight:800;letter-spacing:.08em;font-size:13px}
.bk[data-style="counter"] tr.mo td i{font:600 10.5px var(--f-lat);letter-spacing:.16em;font-style:normal;color:var(--muted);margin-left:8px}
.bk[data-style="counter"] tr.su td{height:28px;font-weight:700;border-top:1.5px solid var(--ink);font-size:13px}
.bk[data-style="counter"] tr.su td.lab small{font-weight:500;color:var(--muted);margin-left:8px;font-size:12px}
.bk[data-style="counter"] tr.cf td{height:28px;background:#fafafa;color:var(--muted);font-weight:700;font-size:13px}
.bk[data-style="counter"] tr.cf td.lab i{font:600 10.5px var(--f-lat);letter-spacing:.12em;font-style:normal;margin-left:8px}
.bk[data-style="counter"] tr.em td{height:28px;color:var(--muted);font-size:13px}
.bk[data-style="counter"] td.pty{font-size:13.5px}
.bk[data-style="counter"] td.dt,.bk[data-style="counter"] td.tm{font-family:var(--f-num);font-size:13px}

/* ================= 2 网银电子版 ebank ================= */
.bk[data-style="ebank"]{--surface:#fbfcfc;--ink:#16202a;--accent:#2b596e;--muted:#56636f;--line:#d2dae0;--mark:#b3302a;--pen:#c2332a;--zebra:#f0f4f6;
  --f-body:var(--f-hei);--f-num:var(--f-arch);--f-lat:var(--f-arch);--pt:0px}
.bk[data-style="ebank"] .hd{display:flex;justify-content:space-between;align-items:center;margin:0 calc(-1 * (var(--px) + var(--gut))) 0 calc(-1 * var(--px));padding:26px calc(var(--px) + var(--gut)) 22px var(--px);background:var(--accent);color:#fff}
.bk[data-style="ebank"] .hd-bank b{display:block;font:700 22px/1.1 var(--f-body);letter-spacing:.06em}
.bk[data-style="ebank"] .hd-bank i{display:block;margin-top:5px;font:600 11px/1 var(--f-lat);letter-spacing:.2em;font-style:normal;opacity:.85}
.bk[data-style="ebank"] .hd-title{text-align:right}
.bk[data-style="ebank"] .hd-title b{display:block;font:500 17px/1.2 var(--f-body);letter-spacing:.12em}
.bk[data-style="ebank"] .hd-title i{display:block;margin-top:4px;font:500 11px/1 var(--f-lat);letter-spacing:.16em;font-style:normal;opacity:.85}
.bk[data-style="ebank"] .info{display:flex;flex-wrap:wrap;gap:4px 22px;margin:16px 0 14px;font-size:13px;color:var(--muted)}
.bk[data-style="ebank"] .info b{color:var(--ink);font-weight:600;margin-left:5px}
.bk[data-style="ebank"] .info i{display:none}
.bk[data-style="ebank"] .sum{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.bk[data-style="ebank"] .sum>div{padding:11px 13px 10px;background:#fff;border:1px solid var(--line);border-radius:6px}
.bk[data-style="ebank"] .sum>div:last-child{border-color:var(--accent);box-shadow:inset 0 3px 0 var(--accent)}
.bk[data-style="ebank"] .sum span{display:block;font-size:12px;color:var(--muted)}
.bk[data-style="ebank"] .sum span i{display:none}
.bk[data-style="ebank"] .sum strong{display:block;margin-top:3px;font:700 20px/1.2 var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bk[data-style="ebank"] .sum small{display:block;margin-top:2px;font:500 11px var(--f-lat);color:var(--muted)}
.bk[data-style="ebank"] .tb th{height:34px;border-bottom:1.5px solid var(--ink);font-size:12.5px;font-weight:600;color:var(--muted)}
.bk[data-style="ebank"] .tb th i{display:none}
.bk[data-style="ebank"] tr.tx:nth-child(even of .tx) td{background:var(--zebra)}
.bk[data-style="ebank"] .tb td{border-bottom:1px solid #e6ebee}
.bk[data-style="ebank"] tr.mo td{height:40px;vertical-align:bottom;padding-bottom:6px;border-bottom:1px solid var(--line)}
.bk[data-style="ebank"] .pill{display:inline-block;padding:2px 9px;border-radius:20px;background:var(--accent);color:#fff;font:700 12px/1.3 var(--f-num);letter-spacing:.04em}
.bk[data-style="ebank"] .mio{float:right;font:500 12px/1.6 var(--f-num);color:var(--muted)}
.bk[data-style="ebank"] .mio b{color:var(--ink);font-weight:700}
.bk[data-style="ebank"] td.amt.pos{color:var(--accent);font-weight:700}
.bk[data-style="ebank"] td.amt{font-weight:600}
.bk[data-style="ebank"] tr.cf td{height:30px;color:var(--muted);font-size:12.5px}
.bk[data-style="ebank"] tr.em td{height:30px;color:var(--muted);font-size:12.5px}
.bk[data-style="ebank"] td.dt,.bk[data-style="ebank"] td.tm{font:500 12.5px var(--f-num);font-variant-numeric:tabular-nums;color:var(--muted)}
.bk[data-style="ebank"] .prop{border-top-color:var(--line)}

/* ================= 3 私人银行 private ================= */
.bk[data-style="private"]{--gut-pen:60px;--surface:#f7f3ea;--ink:#241f19;--accent:#5b482a;--muted:#6b6152;--line:#cbbd9f;--mark:#9e2b25;--pen:#b1281f;
  --f-num:var(--f-corm);--f-lat:var(--f-corm);--pt:70px;--px:92px;--rh:29px;--fs:14.5px}
.bk[data-style="private"] .n{font-variant-numeric:tabular-nums oldstyle-nums;font-size:16.5px;font-weight:500}
.bk[data-style="private"] .hd{text-align:center;padding-bottom:18px;border-bottom:1px solid var(--line)}
.bk[data-style="private"] .hd-bank i{display:block;font:600 12px/1 var(--f-lat);letter-spacing:.42em;font-style:normal;color:var(--accent)}
.bk[data-style="private"] .hd-bank b{display:block;margin-top:9px;font:600 18px/1 var(--f-body);letter-spacing:.5em;color:var(--accent)}
.bk[data-style="private"] .hd-title{margin-top:16px}
.bk[data-style="private"] .hd-title i{display:block;font:italic 500 26px/1.1 var(--f-lat);color:var(--ink)}
.bk[data-style="private"] .hd-title b{display:block;margin-top:4px;font:500 12.5px/1 var(--f-body);letter-spacing:.4em;color:var(--muted)}
.bk[data-style="private"] .info{display:grid;grid-template-columns:1fr 1fr;gap:4px 40px;margin:18px 0 16px;font-size:13.5px}
.bk[data-style="private"] .info>div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--line);padding-bottom:3px}
.bk[data-style="private"] .info span{color:var(--muted);font-size:12.5px}
.bk[data-style="private"] .info span i{font:italic 13px var(--f-lat);margin-left:5px}
.bk[data-style="private"] .info .n{font-size:15px}
.bk[data-style="private"] .sum{display:flex;justify-content:space-between;margin:0 0 20px;padding:12px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.bk[data-style="private"] .sum>div{text-align:center;flex:1}
.bk[data-style="private"] .sum span{display:block;font-size:11.5px;letter-spacing:.2em;color:var(--muted)}
.bk[data-style="private"] .sum span i{display:block;font:italic 13px var(--f-lat);letter-spacing:0}
.bk[data-style="private"] .sum strong{display:block;margin-top:4px;font:500 21px/1.1 var(--f-num);font-variant-numeric:tabular-nums oldstyle-nums}
.bk[data-style="private"] .sum small{display:none}
.bk[data-style="private"] .tb th{height:30px;border-bottom:1px solid var(--ink);font-weight:500;font-size:12px;letter-spacing:.2em;color:var(--muted)}
.bk[data-style="private"] .tb th i{font:italic 13px var(--f-lat);letter-spacing:0;color:var(--muted)}
.bk[data-style="private"] .tb th{height:40px}
.bk[data-style="private"] tr.mo td{height:44px;vertical-align:bottom;padding-bottom:5px;font:italic 500 19px/1 var(--f-lat);color:var(--accent)}
.bk[data-style="private"] tr.mo td small{font:500 12px var(--f-body);letter-spacing:.3em;margin-left:10px;color:var(--muted);font-style:normal}
.bk[data-style="private"] tr.su td{height:31px;border-top:1px solid var(--line);font-style:italic;color:var(--muted)}
.bk[data-style="private"] tr.su td.lab{font:italic 14.5px var(--f-lat)}
.bk[data-style="private"] tr.su td.n{color:var(--ink);font-style:normal}
.bk[data-style="private"] tr.cf td,.bk[data-style="private"] tr.em td{height:30px;font:italic 14.5px var(--f-lat);color:var(--muted)}
.bk[data-style="private"] td.dt{font:500 15px var(--f-lat);font-variant-numeric:tabular-nums oldstyle-nums;color:var(--muted)}
.bk[data-style="private"] td.pty b{font-weight:600;margin-right:8px;color:var(--muted);font-size:12.5px;letter-spacing:.08em}
.bk[data-style="private"] .prop{text-align:center;font:italic 13px var(--f-lat);letter-spacing:.04em}
.bk[data-style="private"] .pg-meta{justify-content:center;gap:40px;font-size:12px}

/* ================= 4 英式网点 highstreet ================= */
.bk[data-style="highstreet"]{--surface:#fff;--ink:#1a1a1a;--accent:#28543a;--muted:#595959;--line:#c6c6c6;--mark:#ad2319;--pen:#c02a1f;--band:#e7eee9;
  --f-body:var(--f-hei);--f-num:var(--f-arch);--f-lat:var(--f-arch);--rh:27px}
.bk[data-style="highstreet"] .hd{display:grid;grid-template-columns:minmax(0,1fr) 262px;gap:26px;align-items:start}
.bk[data-style="highstreet"] .hd-bank i{display:block;font:800 30px/1 var(--f-bod);letter-spacing:.01em;color:var(--accent);font-style:normal}
.bk[data-style="highstreet"] .hd-bank b{display:block;margin-top:6px;font:500 13px/1.3 var(--f-body);letter-spacing:.2em;color:var(--accent)}
.bk[data-style="highstreet"] .hd-title{grid-column:1;margin-top:30px}
.bk[data-style="highstreet"] .hd-title i{display:block;font:700 22px/1.1 var(--f-lat);font-style:normal}
.bk[data-style="highstreet"] .hd-title b{display:block;margin-top:5px;font:500 13px var(--f-body);color:var(--muted)}
.bk[data-style="highstreet"] .hd-box{grid-column:2;grid-row:1 / span 2;border:1.5px solid var(--accent);padding:12px 14px}
.bk[data-style="highstreet"] .hd-box h5{margin:0 0 8px;font:700 13px/1.2 var(--f-lat);color:var(--accent)}
.bk[data-style="highstreet"] .hd-box h5 i{display:block;font:500 11.5px var(--f-body);font-style:normal;color:var(--muted);margin-top:2px}
.bk[data-style="highstreet"] .hd-box div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12.5px;border-top:1px solid var(--line)}
.bk[data-style="highstreet"] .hd-box div strong{font:600 13.5px var(--f-num);font-variant-numeric:tabular-nums}
.bk[data-style="highstreet"] .hd-box div.last strong{font-weight:800}
.bk[data-style="highstreet"] .info{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:3px 28px;margin:18px 0 16px;font-size:12.5px}
.bk[data-style="highstreet"] .info span{display:block;color:var(--muted);font-size:11.5px}
.bk[data-style="highstreet"] .info span i{font-style:normal;margin-left:4px}
.bk[data-style="highstreet"] .info .n{text-align:left}
.bk[data-style="highstreet"] .sum{display:none}
.bk[data-style="highstreet"] .tb th{height:38px;background:var(--accent);color:#fff;font:700 12.5px var(--f-lat)}
.bk[data-style="highstreet"] .tb th i{color:rgba(255,255,255,.8);font-family:var(--f-body)}
.bk[data-style="highstreet"] .tb td{border-bottom:1px solid #e4e4e4}
.bk[data-style="highstreet"] tr.mo td{height:30px;background:var(--band);font:700 13px var(--f-lat);color:var(--accent)}
.bk[data-style="highstreet"] tr.mo td i{font:500 12px var(--f-body);font-style:normal;margin-left:8px;color:var(--muted)}
.bk[data-style="highstreet"] tr.su td{height:28px;font:600 12.5px var(--f-lat);color:var(--muted);border-bottom:1.5px solid var(--accent)}
.bk[data-style="highstreet"] tr.su td.n{color:var(--ink)}
.bk[data-style="highstreet"] tr.cf td,.bk[data-style="highstreet"] tr.em td{height:28px;font:600 12.5px var(--f-lat);color:var(--muted)}
.bk[data-style="highstreet"] td.dt{font:600 12.5px var(--f-num);font-variant-numeric:tabular-nums}
.bk[data-style="highstreet"] td.pty b{font:700 11px var(--f-lat);letter-spacing:.06em;color:var(--muted);margin-right:7px}
.bk[data-style="highstreet"] td.n{font-size:13.5px}

/* ================= 5 点阵连续纸 greenbar ================= */
.bk[data-style="greenbar"]{--surface:#fbfbf4;--ink:#2a283e;--accent:#2a283e;--muted:#56546e;--line:#9fb79f;--mark:#b3262a;--pen:#c02a24;--bar:#dcebdc;
  --f-body:var(--f-dot);--f-num:var(--f-dot);--f-lat:var(--f-dot);
  --pt:48px;--px:56px;--pb:24px;--rh:24px;--fs:20px;line-height:24px}
.bk[data-style="greenbar"] .pg{background:repeating-linear-gradient(to bottom,var(--bar) 0 72px,var(--surface) 72px 144px)}
.bk[data-style="greenbar"] .pg::before,.bk[data-style="greenbar"] .pg::after{content:"";position:absolute;top:0;bottom:0;width:40px;background:
  radial-gradient(circle at 20px 24px,#cfd3c8 0 7px,#fff 7px 7.6px,transparent 8px) 0 0/40px 48px repeat-y;border-color:#c6cdc0}
.bk[data-style="greenbar"] .pg::before{left:0;border-right:1px dashed #b8bfb2;background-color:var(--surface)}
.bk[data-style="greenbar"] .pg::after{right:0;border-left:1px dashed #b8bfb2;background-color:var(--surface)}
.bk[data-style="greenbar"] .pg+.pg{margin-top:0;border-top:2px dashed #9aa394}
.bk[data-style="greenbar"] .hd{display:flex;justify-content:space-between;height:48px;text-transform:uppercase}
.bk[data-style="greenbar"] .hd-bank b{display:block}
.bk[data-style="greenbar"] .hd-bank i{display:block;font-style:normal}
.bk[data-style="greenbar"] .hd-title{text-align:right}
.bk[data-style="greenbar"] .hd-title b,.bk[data-style="greenbar"] .hd-title i{display:block;font-style:normal;font-weight:400}
.bk[data-style="greenbar"] .rule{height:24px;overflow:hidden;white-space:nowrap}
.bk[data-style="greenbar"] .info{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.bk[data-style="greenbar"] .info>div{display:flex;gap:10px;white-space:nowrap;overflow:hidden}
.bk[data-style="greenbar"] .info span i{display:none}
.bk[data-style="greenbar"] .info .n{text-align:left}
.bk[data-style="greenbar"] .sum{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;height:48px}
.bk[data-style="greenbar"] .sum span{display:block}
.bk[data-style="greenbar"] .sum span i{display:none}
.bk[data-style="greenbar"] .sum strong{display:block;font-weight:400}
.bk[data-style="greenbar"] .sum small{display:none}
.bk[data-style="greenbar"] .tb td,.bk[data-style="greenbar"] .tb th{padding:0 4px;font-weight:400}
.bk[data-style="greenbar"] .tb th{height:24px;text-transform:uppercase}
.bk[data-style="greenbar"] .tb th i{display:none}
.bk[data-style="greenbar"] .tb th b{font-weight:400}
.bk[data-style="greenbar"] tr.mo td,.bk[data-style="greenbar"] tr.su td,.bk[data-style="greenbar"] tr.cf td,.bk[data-style="greenbar"] tr.em td{height:24px}
.bk[data-style="greenbar"] .prop,.bk[data-style="greenbar"] .pg-meta{border:0;font:400 20px/24px var(--f-dot);letter-spacing:0;color:var(--ink);margin:0;padding:0;text-transform:uppercase}
.bk[data-style="greenbar"] .prop b{font:inherit;letter-spacing:0}
.bk[data-style="greenbar"] .legend{font:400 20px/24px var(--f-dot);letter-spacing:0;margin:0}
.bk[data-style="greenbar"] .tb td.fl{font:400 20px/24px var(--f-dot);text-align:left;padding:0 0 0 4px}

/* ================= 6 家庭账本 ledger ================= */
.bk[data-style="ledger"]{--surface:#fbf8ee;--ink:#1f2d4d;--accent:#a23a31;--muted:#6d6450;--line:#9fb5cc;--mark:#c0392b;--pen:#c0392b;--red:#b8483e;
  --f-num:var(--f-kai);--rh:30px;--px:44px}
.bk[data-style="ledger"] .hd{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:10px;border-bottom:2px solid var(--red)}
.bk[data-style="ledger"] .hd-title b{display:block;font:900 30px/1 var(--f-body);letter-spacing:.5em;color:var(--red)}
.bk[data-style="ledger"] .hd-title i{display:block;margin-top:8px;font:600 11px/1 var(--f-lat);letter-spacing:.3em;font-style:normal;color:var(--red)}
.bk[data-style="ledger"] .hd-bank{text-align:right;color:var(--red);font-size:13px}
.bk[data-style="ledger"] .hd-bank b{font:400 22px var(--f-hand);color:var(--ink);margin-left:8px;border-bottom:1px solid var(--red);padding:0 10px}
.bk[data-style="ledger"] .hd-bank i{display:block;margin-top:6px;font:400 13px var(--f-body);font-style:normal}
.bk[data-style="ledger"] .hd-bank i em{font:400 18px var(--f-hand);font-style:normal;color:var(--ink);margin:0 6px}
.bk[data-style="ledger"] .info,.bk[data-style="ledger"] .sum{display:none}
.bk[data-style="ledger"] .tb{margin-top:16px;border:1.5px solid var(--red)}
.bk[data-style="ledger"] .tb th{height:44px;padding:0;border:1px solid var(--red);color:var(--red);font:700 13px var(--f-body);text-align:center}
.bk[data-style="ledger"] .tb th i{display:none}
.bk[data-style="ledger"] .tb td{border-bottom:1px solid var(--line);border-left:1px solid var(--red);padding:0 5px;color:var(--ink);font:400 16px/1 var(--f-hand)}
.bk[data-style="ledger"] .tb td.box{padding:0;border-left:3px double var(--red)}
.bk[data-style="ledger"] .digits{display:grid;grid-template-columns:repeat(8,1fr);height:100%;align-items:center;text-align:center;
  background:linear-gradient(to right,transparent calc(75% - .5px),var(--red) calc(75% - .5px) calc(75% + .5px),transparent calc(75% + .5px)),
    repeating-linear-gradient(to right,transparent 0 calc(12.5% - 1px),rgba(159,181,204,.9) calc(12.5% - 1px) 12.5%)}
.bk[data-style="ledger"] .digits span{font:400 17px/1 var(--f-hand)}
.bk[data-style="ledger"] .places{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--red);margin-top:4px}
.bk[data-style="ledger"] .places s{font:400 10px/15px var(--f-body);text-decoration:none;border-left:1px solid rgba(162,58,49,.45)}
.bk[data-style="ledger"] .places s:first-child{border-left:0}
.bk[data-style="ledger"] tr.su td{border-bottom:3px double var(--red);font-weight:400}
.bk[data-style="ledger"] .tb td.fl{font:700 11px/1 var(--f-lat);padding:0}
.bk[data-style="ledger"] tr.su td.lab{color:var(--red);font:700 13px var(--f-body);text-align:center;letter-spacing:.3em}
.bk[data-style="ledger"] tr.cf td.lab{color:var(--red);font:700 13px var(--f-body);text-align:center;letter-spacing:.3em}
.bk[data-style="ledger"] tr.em td.lab{color:var(--muted);font:400 16px var(--f-hand)}
.bk[data-style="ledger"][data-mark="system"] tr.flagged td,.bk[data-style="ledger"][data-mark="system"] tr.flagged .digits span{color:var(--mark)}
.bk[data-style="ledger"] .prop{border-top-color:var(--red);color:var(--red)}
.bk[data-style="ledger"] .pg-meta{color:var(--red)}

/* ================= 7 未来银行 neo ================= */
.bk[data-style="neo"]{--surface:#12171b;--ink:#e6ecef;--accent:#7fb3a4;--muted:#93a1aa;--line:#2a343b;--card:#1a2228;--mark:#f08676;--pen:#ff8b79;
  --f-body:var(--f-hei);--f-num:var(--f-arch);--f-lat:var(--f-arch);--rh:30px;--pt:46px}
.bk[data-style="neo"] .hd{display:flex;justify-content:space-between;align-items:center}
.bk[data-style="neo"] .hd-bank b{font:700 15px var(--f-body);letter-spacing:.14em}
.bk[data-style="neo"] .hd-bank i{margin-left:10px;font:500 11px var(--f-lat);letter-spacing:.2em;font-style:normal;color:var(--muted)}
.bk[data-style="neo"] .hd-title{font:500 12px var(--f-lat);letter-spacing:.18em;color:var(--muted);text-align:right}
.bk[data-style="neo"] .hd-title b{font:500 13px var(--f-body);letter-spacing:.1em;color:var(--ink);margin-right:8px}
.bk[data-style="neo"] .hd-title i{font-style:normal}
.bk[data-style="neo"] .hero{margin:22px 0 16px;padding:20px 22px 12px;border-radius:14px;background:linear-gradient(160deg,#1d2a2f,#161d22)}
.bk[data-style="neo"] .hero span{font:500 12px var(--f-body);color:var(--muted);letter-spacing:.08em}
.bk[data-style="neo"] .hero strong{display:block;margin-top:4px;font:700 40px/1 var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bk[data-style="neo"] .hero small{display:block;margin-top:8px;font:500 12px var(--f-lat);color:var(--muted)}
.bk[data-style="neo"] .hero svg{display:block;width:100%;height:72px;margin-top:8px}
.bk[data-style="neo"] .info{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0 0 10px;font-size:12.5px;color:var(--muted)}
.bk[data-style="neo"] .info i{display:none}
.bk[data-style="neo"] .info b{color:var(--ink);font-weight:500;margin-left:5px}
.bk[data-style="neo"] .sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.bk[data-style="neo"] .sum>div:first-child{display:none}
.bk[data-style="neo"] .sum>div{padding:10px 14px;border-radius:10px;background:var(--card)}
.bk[data-style="neo"] .sum span{font-size:11.5px;color:var(--muted)}
.bk[data-style="neo"] .sum span i{display:none}
.bk[data-style="neo"] .sum strong{display:block;font:600 17px/1.3 var(--f-num);font-variant-numeric:tabular-nums}
.bk[data-style="neo"] .sum small{font:500 11px var(--f-lat);color:var(--muted)}
.bk[data-style="neo"] .tb{border-collapse:separate;border-spacing:0}
.bk[data-style="neo"] .tb thead{display:none}
.bk[data-style="neo"] .tb td{background:var(--card);border-bottom:1px solid var(--line)}
.bk[data-style="neo"] tr.mo td{height:44px;border-radius:12px 12px 0 0;vertical-align:bottom;padding:0 16px 8px;font:700 15px var(--f-num);border-bottom:1px solid var(--line)}
.bk[data-style="neo"] tr.mo td .mio{float:right;font:500 12px var(--f-num);color:var(--muted)}
.bk[data-style="neo"] tr.mo td .mio b{color:var(--ink);font-weight:600}
.bk[data-style="neo"] tr.su td{height:34px;border-bottom:0;color:var(--muted);font-size:12px}
.bk[data-style="neo"] tr.su td:first-child{border-radius:0 0 0 12px;padding-left:16px}
.bk[data-style="neo"] tr.su td:last-child{border-radius:0 0 12px 0;padding-right:16px}
.bk[data-style="neo"] tr.gap td{height:12px;background:transparent;border:0}
.bk[data-style="neo"] tr.tx td:first-child{padding-left:16px}
.bk[data-style="neo"] tr.tx td:last-child{padding-right:16px}
.bk[data-style="neo"] tr.tx td.fl{padding:0 12px 0 0}
.bk[data-style="neo"] td.dt{font:600 13px var(--f-num);color:var(--muted)}
.bk[data-style="neo"] td.dt small{display:block;font:500 10.5px var(--f-body);color:var(--muted);margin-top:1px}
.bk[data-style="neo"] tr.tx td{height:40px}
.bk[data-style="neo"] td.pty{line-height:1.25}
.bk[data-style="neo"] td.pty small{display:block;font:500 11.5px var(--f-body);color:var(--muted)}
.bk[data-style="neo"] td.amt{font-weight:700;font-size:14.5px}
.bk[data-style="neo"] td.amt.pos{color:var(--accent)}
.bk[data-style="neo"] td.bal{color:var(--muted);font-size:12.5px}
.bk[data-style="neo"] tr.cf td,.bk[data-style="neo"] tr.em td{height:34px;color:var(--muted);font-size:12.5px;border-radius:0}
.bk[data-style="neo"] tr.em td{border-radius:12px;padding-left:16px}
.bk[data-style="neo"] .prop{border-top-color:var(--line)}

/* ================= 8 离岸信托 offshore ================= */
.bk[data-style="offshore"]{--gut-pen:66px;--surface:#f3f3ee;--ink:#1a2320;--accent:#314339;--muted:#606a65;--line:#bec4bd;--mark:#a3302a;--pen:#b52f27;
  --f-body:var(--f-song);--f-num:var(--f-mono);--f-lat:var(--f-mono);--pt:64px;--px:70px;--rh:27px;--fs:13.5px}
.bk[data-style="offshore"] .conf{font:600 10.5px/1 var(--f-lat);letter-spacing:.5em;color:var(--mark);margin-bottom:26px}
.bk[data-style="offshore"] .hd{display:grid;grid-template-columns:1fr auto;align-items:end;gap:16px}
.bk[data-style="offshore"] .hd-bank i{display:block;font:500 12px/1 var(--f-lat);letter-spacing:.3em;font-style:normal;color:var(--muted)}
.bk[data-style="offshore"] .hd-bank b{display:block;margin-top:14px;font:italic 500 38px/1 var(--f-corm);color:var(--accent);letter-spacing:.01em}
.bk[data-style="offshore"] .hd-title{text-align:right;font:500 11.5px/1.7 var(--f-lat);color:var(--muted);letter-spacing:.08em}
.bk[data-style="offshore"] .hd-title b{display:block;font-weight:600;color:var(--ink)}
.bk[data-style="offshore"] .hd-title i{display:block;font-style:normal}
.bk[data-style="offshore"] .info{display:none}
.bk[data-style="offshore"] .sum{display:grid;grid-template-columns:repeat(4,1fr);margin:34px 0 30px;border-top:1px solid var(--ink)}
.bk[data-style="offshore"] .sum>div{padding:10px 0 0}
.bk[data-style="offshore"] .sum span{display:block;font:500 10.5px var(--f-lat);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.bk[data-style="offshore"] .sum span b{display:none}
.bk[data-style="offshore"] .sum span i{font-style:normal}
.bk[data-style="offshore"] .sum strong{display:block;margin-top:6px;font:500 16px var(--f-num)}
.bk[data-style="offshore"] .sum small{display:none}
.bk[data-style="offshore"] .tb th{height:30px;border-bottom:1px solid var(--ink);font:500 10.5px var(--f-lat);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.bk[data-style="offshore"] .tb th b{display:none}
.bk[data-style="offshore"] .tb th i{margin:0;font-size:10.5px}
.bk[data-style="offshore"] tr.mo td{height:40px;vertical-align:bottom;padding-bottom:6px;font:600 11px var(--f-lat);letter-spacing:.3em;color:var(--accent)}
.bk[data-style="offshore"] tr.su td{height:30px;border-top:1px solid var(--line);font:500 11.5px var(--f-lat);color:var(--muted)}
.bk[data-style="offshore"] tr.su td.n{color:var(--ink)}
.bk[data-style="offshore"] tr.cf td,.bk[data-style="offshore"] tr.em td{height:28px;font:500 11.5px var(--f-lat);color:var(--muted)}
.bk[data-style="offshore"] td.dt,.bk[data-style="offshore"] td.ref{font:500 12px var(--f-num);color:var(--muted)}
.bk[data-style="offshore"] td.n{font-size:13px}
.bk[data-style="offshore"] .prop{border-top:0;text-align:right;font-size:10.5px}
.bk[data-style="offshore"] .pg-meta{font:500 10.5px var(--f-lat);letter-spacing:.08em}

/* ================= 信用卡 ================= */
.bk .cd-kpi{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:10px;margin:0 0 12px}
.bk .cd-kpi>div{padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:6px}
.bk .cd-kpi>div.big{background:var(--accent);border-color:var(--accent);color:#fff}
.bk .cd-kpi span{display:block;font-size:12px;opacity:.8}
.bk .cd-kpi span i{font:500 10.5px var(--f-lat);font-style:normal;letter-spacing:.06em;margin-left:5px}
.bk .cd-kpi strong{display:block;margin-top:3px;font:700 19px/1.2 var(--f-num);font-variant-numeric:tabular-nums}
.bk .cd-kpi .big strong{font-size:27px}
.bk .cd-kpi small{display:block;margin-top:2px;font:500 11px var(--f-lat);opacity:.8}
.bk .cd-eq{margin:0 0 16px;padding:9px 12px;border-left:3px solid var(--accent);background:var(--zebra,#f2f4f5);font:500 12.5px/1.7 var(--f-num);font-variant-numeric:tabular-nums;color:var(--muted)}
.bk .cd-eq b{color:var(--ink);font-weight:700}
.bk tr.grp td{height:36px;vertical-align:bottom;padding-bottom:5px;font-weight:700;border-bottom:1.5px solid var(--ink)}
.bk tr.grp td small{font-weight:500;color:var(--muted);margin-left:8px}
.bk tr.grp td .rel{display:inline-block;margin-left:8px;padding:0 7px;border-radius:3px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:600}
.bk td.fx{font:500 12px var(--f-num);color:var(--muted)}

/* ================= 存折 ================= */
.bk .pb{position:relative;width:720px;height:452px;overflow:hidden;background:#f4f6ef;border-radius:3px}
.bk .pb-guil{position:absolute;inset:0;opacity:.55}
.bk .pb-head{position:absolute;left:32px;right:32px;top:18px;display:flex;align-items:baseline;gap:12px;color:var(--accent)}
.bk .pb-head b{font:900 17px/1 var(--f-body);letter-spacing:.2em}
.bk .pb-head span{font:700 13px var(--f-body);letter-spacing:.3em}
.bk .pb-head i{font:600 10.5px var(--f-lat);letter-spacing:.18em;font-style:normal}
.bk .pb-head em{margin-left:auto;font:700 13px var(--f-body);font-style:normal;letter-spacing:.1em}
.bk .pb-cols,.bk .pb-row{position:absolute;left:32px;right:32px;display:grid;grid-template-columns:24px 104px 44px 96px 96px 108px 52px 1fr;column-gap:6px}
.bk .pb-cols{top:48px;height:26px;align-items:center;border-top:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);color:var(--accent);font:700 11.5px var(--f-body);letter-spacing:.1em}
.bk .pb-cols span:nth-child(n+4):nth-child(-n+6){text-align:right}
.bk .pb-line{position:absolute;left:32px;right:32px;height:24px;border-bottom:1px solid rgba(107,45,41,.28)}
.bk .pb-line b{position:absolute;left:0;bottom:3px;width:20px;text-align:right;font:600 10.5px var(--f-lat);color:var(--accent);opacity:.8}
.bk .pb-row{height:24px;align-items:center;font:400 20px/24px var(--f-dot);color:#2c2946;white-space:nowrap}
.bk .pb-row span{overflow:hidden}
.bk .pb-row span.n{font:inherit;text-align:right}
.bk .pb-foot{position:absolute;left:32px;right:32px;bottom:12px;display:flex;justify-content:space-between;font:600 10.5px var(--f-lat);letter-spacing:.1em;color:var(--accent)}
.bk .pb-foot b{font:700 11px var(--f-body);letter-spacing:.14em;margin-right:8px}
.bk[data-mark="system"] .pb-row.flagged{color:var(--mark)}

/* ================= 保单 ================= */
.bk .po-sec{margin-top:18px}
.bk .po-sec h4{margin:0 0 6px;font:500 12px/1.4 var(--f-body);letter-spacing:.3em;color:var(--accent)}
.bk .po-sec h4 i{font:italic 15px var(--f-lat);letter-spacing:0;margin-left:8px;color:var(--muted)}
.bk .po-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 40px;font-size:14px}
.bk .po-grid>div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--line);padding:3px 0}
.bk .po-grid span{color:var(--muted);font-size:12.5px}
.bk .po-tb th{height:36px;border-bottom:1px solid var(--ink);font:500 12px var(--f-body);letter-spacing:.14em;color:var(--muted)}
.bk .po-tb th i{font:italic 13px var(--f-lat);letter-spacing:0}
.bk .po-tb td{height:32px;border-bottom:1px solid var(--line)}
.bk .po-tb tr.tot td{border-top:1px solid var(--ink);border-bottom:0;font-weight:700}
.bk .po-tb tr.tot td.ok{color:var(--accent)}
.bk .po-text{margin:0;font-size:14px;line-height:1.9;color:var(--ink)}
.bk .po-sign{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:34px;font-size:13px;color:var(--muted)}
.bk .po-sign div{border-bottom:1px solid var(--ink);padding-bottom:26px}

/* ================= 手机 ================= */
.bk .ph{position:relative;width:420px;padding:22px 18px 20px;background:var(--surface);font-size:14px}
.bk .ph-top{padding:18px 18px 14px;border:1px solid var(--line);margin-bottom:16px}
.bk .ph-top .who{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.bk .ph-top strong{display:block;margin:8px 0 2px;font:700 32px/1.1 var(--f-num);font-variant-numeric:tabular-nums}
.bk .ph-top small{display:block;font-size:12px;color:var(--muted)}
.bk .ph-top .io{display:flex;gap:18px;margin-top:10px;font:500 12.5px var(--f-num);color:var(--muted)}
.bk .ph-top .io b{color:var(--ink);font-weight:700}
.bk .ph-top svg{display:block;width:100%;height:58px;margin-top:10px}
.bk .ph-mh{display:flex;justify-content:space-between;align-items:baseline;padding:10px 2px 6px;border-bottom:1.5px solid var(--ink);font-weight:800}
.bk .ph-mh span{font:500 12px var(--f-num);color:var(--muted)}
.bk .ph-r{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:54px;padding:7px 2px;border-bottom:1px solid var(--line)}
.bk .ph-d{text-align:center;font:700 17px/1.1 var(--f-num)}
.bk .ph-d small{display:block;font:500 10.5px var(--f-body);color:var(--muted);margin-top:2px}
.bk .ph-t b{display:block;font-weight:600;line-height:1.35;word-break:break-all}
.bk .ph-t small{display:block;font-size:12px;color:var(--muted)}
.bk .ph-a{text-align:right;font:700 15px var(--f-num);font-variant-numeric:tabular-nums}
.bk .ph-a.pos{color:var(--accent)}
.bk .ph-a small{display:block;font:500 11px var(--f-num);color:var(--muted)}
.bk .ph-empty{padding:12px 2px;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line)}
.bk .ph-note{grid-column:2 / 4;margin-top:-2px;font:400 15px/1.2 var(--f-hand);color:var(--pen);transform:rotate(-2deg)}
.bk[data-mark="system"] .ph-r.flagged .ph-a,.bk[data-mark="system"] .ph-r.flagged .ph-t b{color:var(--mark)}
.bk[data-mark="system"] .ph-r.flagged::before{content:"";position:absolute;left:-8px;top:50%;width:5px;height:5px;margin-top:-3px;border-radius:50%;background:var(--mark)}
.bk .ph .prop{margin-top:14px}
.bk[data-style="neo"] .ph-top{border:0;border-radius:16px;background:linear-gradient(160deg,#1d2a2f,#161d22)}
.bk[data-style="neo"] .ph-mh{border-bottom-color:var(--line);font-family:var(--f-num)}
.bk[data-style="neo"] .ph-m{margin-bottom:12px;padding:0 12px 4px;border-radius:14px;background:var(--card)}
.bk[data-style="neo"] .ph-r{border-bottom-color:var(--line)}
.bk[data-style="neo"] .ph-r:last-child{border-bottom:0}
.bk[data-style="counter"] .ph-top{border:1.5px solid var(--ink)}
.bk[data-style="counter"] .ph-top .bank{font:900 15px var(--f-body);letter-spacing:.12em;color:var(--accent)}


/* ================= 纸面：项目里补的部分 ================= */
/* 本地字体变量。西文字体栈第二位都是本地思源 */
.bk { --f-song: "OC Noto Serif SC","Noto Serif SC","Songti SC",serif;
  --f-hei: "OC Noto Sans SC","Noto Sans SC","PingFang SC",sans-serif;
  --f-mono: "OC Spline Mono","OC Noto Sans SC",Consolas,monospace;
  --f-arch: "OC Archivo","OC Noto Sans SC",sans-serif;
  --f-corm: "OC Cormorant","OC Noto Serif SC",serif;
  --f-bod: "OC Bodoni Moda","OC Noto Serif SC",serif;
  --f-kai: "Huiwen-ZhengKai","OC Noto Serif SC",serif;
  --f-dot: "OC Fusion Pixel","OC Noto Sans SC",monospace;
  --kpi-bg: #fff; --pb-paper: #f4f6ef; --pb-ink: #2c2946; --pb-rule: rgba(107,45,41,.28);
  position: relative; background: var(--surface); }
/* 各页上下紧挨着排在一块画布上，贴纸层盖在整块上面；导出某一页时整体上移、裁出一页高 */
.bk .pg+.pg { margin-top: 0; }
.bk.show-guides:not(.is-exporting) > .pg+.pg::before,
.bk.show-guides:not(.is-exporting) > .pb+.pb::before { content: ""; position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg,color-mix(in srgb,var(--mark) 55%,transparent) 55%,transparent 0) 0 0/12px 1px repeat-x; }
.bk.is-exporting .canvas-sticker { cursor: default; outline: 0 !important; }
.bk.is-exporting .sticker-handle { display: none !important; }
/* 深色纸上预设贴纸的颜色由脚本按亮度挑，这里只管选中框看得见 */
.bk[data-style="neo"] .canvas-sticker.is-selected { outline-color: #9fd3c4; }

/* ---- 信用卡：大数字格子的底色跟着样式走 ---- */
.bk .cd-kpi>div { background: var(--kpi-bg); }
.bk .cd-kpi>div.big { background: var(--accent); color: var(--surface); }
.bk[data-style="neo"] { --kpi-bg: var(--card); }
.bk[data-style="neo"] .cd-kpi>div.big { color: #0e1316; }
.bk[data-style="private"] { --kpi-bg: transparent; }
.bk[data-style="private"] .cd-kpi>div { border-color: var(--line); border-radius: 0; }
.bk[data-style="greenbar"] { --kpi-bg: transparent; }
.bk[data-style="greenbar"] .cd-kpi>div { border: 0; padding: 0; }
.bk[data-style="greenbar"] .cd-kpi>div.big { background: transparent; color: var(--ink); }
.bk[data-style="greenbar"] .cd-kpi span,.bk[data-style="greenbar"] .cd-kpi strong,.bk[data-style="greenbar"] .cd-kpi small,
.bk[data-style="greenbar"] .cd-eq { font: 400 20px/24px var(--f-dot) !important; opacity: 1; border: 0; background: transparent; padding: 0; }
.bk[data-style="ledger"] { --kpi-bg: transparent; }
.bk[data-style="ledger"] .cd-kpi>div { border-color: var(--red); border-radius: 0; }
.bk[data-style="ledger"] .cd-kpi>div.big { background: transparent; color: var(--ink); border-width: 2px; }
.bk[data-style="offshore"] { --kpi-bg: transparent; }
.bk[data-style="offshore"] .cd-kpi>div { border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 10px 0 0; }
.bk[data-style="offshore"] .cd-kpi>div.big { background: transparent; color: var(--ink); }
.bk .cd-eq { background: color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.bk tr.grp td .rel { background: var(--accent); color: var(--surface); }
.bk[data-style="neo"] tr.grp td { border-bottom-color: var(--line); background: var(--card); }

/* ---- 存折：预印的颜色跟着样式的强调色走，纸和打印墨色单独给 ---- */
.bk .pb { background: var(--pb-paper); }
.bk .pb-line { border-bottom-color: var(--pb-rule); }
.bk .pb-row { color: var(--pb-ink); }
.bk[data-style="neo"] { --pb-paper: #1d252b; --pb-ink: #dfe7ea; --pb-rule: rgba(127,179,164,.25); }
.bk[data-style="private"] { --pb-paper: #f6f1e6; --pb-rule: rgba(91,72,42,.26); }
.bk[data-style="offshore"] { --pb-paper: #f1f1ec; --pb-rule: rgba(49,67,57,.22); }
.bk[data-style="greenbar"] { --pb-paper: #f6f7ef; }
/* 家庭账本那套：机打换成柜员手写——打印机普及之前的存折就是手写的 */
.bk[data-style="ledger"] { --pb-paper: #faf6ea; --pb-ink: #1f2d4d; --pb-rule: rgba(95,130,170,.45); }
.bk[data-style="ledger"] .pb-row { font: 400 19px/24px var(--f-kai); }
.bk[data-style="ledger"] .pb-row span.n { font-family: var(--f-kai); }

/* ---- 工资条：通用的一截纸，点阵连续纸那套另外覆盖 ---- */
.bk .ps { position: relative; width: 794px; padding: 30px 50px 24px; background: var(--surface); color: var(--ink); font-family: var(--f-body); font-size: 14px; line-height: 1.5; }
.bk .ps-edge { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed color-mix(in srgb,var(--muted) 55%,transparent); }
.bk .ps-edge.t { top: 0; }
.bk .ps-edge.b { bottom: 0; }
.bk .ps-hd { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 26px; align-items: end; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.bk .ps-org b { display: block; font-size: 18px; font-weight: 800; color: var(--accent); }
.bk .ps-org i { display: block; margin-top: 3px; font: 600 10.5px/1.2 var(--f-lat); letter-spacing: .14em; color: var(--muted); font-style: normal; }
.bk .ps-title { text-align: right; }
.bk .ps-title b { display: block; font-size: 20px; font-weight: 800; letter-spacing: .3em; }
.bk .ps-title i { display: block; margin-top: 3px; font: 600 10.5px/1.2 var(--f-lat); letter-spacing: .2em; color: var(--muted); font-style: normal; }
.bk .ps-period span { display: block; font-size: 11.5px; color: var(--muted); }
.bk .ps-period b { display: block; font: 600 17px/1.2 var(--f-num); font-variant-numeric: tabular-nums; }
.bk .ps-info { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 10px 0 12px; font-size: 13.5px; }
.bk .ps-info span { margin-right: 6px; color: var(--muted); font-size: 12px; }
.bk .ps-info .n { font-family: var(--f-num); }
.bk .ps-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.bk .ps-tb { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13.5px; }
.bk .ps-tb th { height: 30px; text-align: left; font-weight: 700; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.bk .ps-tb th i { margin-left: 6px; font: 500 10px var(--f-lat); letter-spacing: .08em; color: var(--muted); font-style: normal; }
.bk .ps-tb th.n { text-align: right; }
.bk .ps-tb td { height: 27px; border-bottom: 1px solid color-mix(in srgb,var(--line) 60%,transparent); }
.bk .ps-tb tfoot td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 0; }
.bk .ps .n { font-family: var(--f-num); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bk .ps-net { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 14px; padding: 9px 14px; border: 2px solid var(--ink); }
.bk .ps-net span { font-weight: 800; }
.bk .ps-net span i { margin-left: 8px; font: 600 10.5px var(--f-lat); letter-spacing: .14em; color: var(--muted); font-style: normal; }
.bk .ps-net strong { font: 700 24px/1.1 var(--f-num); font-variant-numeric: tabular-nums; }
.bk .ps-att { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.bk .ps-att b { color: var(--ink); font-weight: 600; margin: 0 4px 0 2px; font-family: var(--f-num); }
.bk .ps-ft { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.bk .ps-ft .prop { margin: 0; padding: 0; border: 0; }
/* 深色、斜体、宽松几套的小修 */
.bk[data-style="neo"] .ps-net { border-color: var(--accent); border-radius: 10px; }
.bk[data-style="neo"] .ps-hd { border-bottom-color: var(--line); }
.bk[data-style="private"] .ps { padding-inline: 72px; }
.bk[data-style="private"] .ps-title i,.bk[data-style="private"] .ps-org i { font: italic 13px var(--f-corm); letter-spacing: 0; }
.bk[data-style="private"] .ps-net { border-width: 1px 0; }
.bk[data-style="ledger"] .ps-hd { border-bottom-color: var(--red); }
.bk[data-style="ledger"] .ps-org b,.bk[data-style="ledger"] .ps-title b { color: var(--red); }
.bk[data-style="ledger"] .ps-tb td { font: 400 16px/1 var(--f-kai); border-bottom-color: var(--line); }
.bk[data-style="ledger"] .ps-tb td.n { font-family: var(--f-kai); }
.bk[data-style="ledger"] .ps-net { border-color: var(--red); }
.bk[data-style="ledger"] .ps-net strong { font-family: var(--f-kai); }
.bk[data-style="highstreet"] .ps-hd { border-bottom-color: var(--accent); }
.bk[data-style="highstreet"] .ps-org b { font-family: var(--f-bod); font-size: 22px; }
.bk[data-style="ebank"] .ps-hd { border-bottom: 0; margin: -30px -50px 0; padding: 22px 50px 16px; background: var(--accent); color: #fff; }
.bk[data-style="ebank"] .ps-hd .ps-org b,.bk[data-style="ebank"] .ps-hd i,.bk[data-style="ebank"] .ps-hd span { color: #fff; opacity: .92; }
.bk[data-style="offshore"] .ps { padding-inline: 64px; }
.bk[data-style="offshore"] .ps-org b { font: italic 500 24px/1 var(--f-corm); color: var(--accent); }
/* 点阵连续纸：条纹、链轮孔、全部落在 24px 的行距格上 */
.bk[data-style="greenbar"] .ps { padding: 24px 60px; background: repeating-linear-gradient(to bottom,var(--bar) 0 72px,var(--surface) 72px 144px); font: 400 20px/24px var(--f-dot); }
.bk[data-style="greenbar"] .ps::before,.bk[data-style="greenbar"] .ps::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px;
  background: radial-gradient(circle at 20px 24px,#cfd3c8 0 7px,#fff 7px 7.6px,transparent 8px) 0 0/40px 48px repeat-y; background-color: var(--surface); }
.bk[data-style="greenbar"] .ps::before { left: 0; border-right: 1px dashed #b8bfb2; }
.bk[data-style="greenbar"] .ps::after { right: 0; border-left: 1px dashed #b8bfb2; }
.bk[data-style="greenbar"] .ps * { font-family: var(--f-dot) !important; font-size: 20px !important; line-height: 24px !important; font-weight: 400 !important; letter-spacing: 0 !important; }
.bk[data-style="greenbar"] .ps-hd { grid-template-columns: minmax(0,1fr) auto auto; gap: 20px; padding: 0; border: 0; align-items: start; }
.bk[data-style="greenbar"] .ps-org b,.bk[data-style="greenbar"] .ps-title b { color: var(--ink); }
.bk[data-style="greenbar"] .ps-org i,.bk[data-style="greenbar"] .ps-title i { margin: 0; color: var(--ink); text-transform: uppercase; }
.bk[data-style="greenbar"] .ps-period span { display: inline; color: var(--ink); margin-right: 8px; }
.bk[data-style="greenbar"] .ps-period b { display: inline; }
.bk[data-style="greenbar"] .ps-info { margin: 0; gap: 0 20px; }
.bk[data-style="greenbar"] .ps-info span { color: var(--ink); }
.bk[data-style="greenbar"] .ps-cols { gap: 34px; margin-top: 24px; }
.bk[data-style="greenbar"] .ps-tb th,.bk[data-style="greenbar"] .ps-tb td { height: 24px; border: 0; padding: 0; }
.bk[data-style="greenbar"] .ps-tb th i { margin-left: 10px; color: var(--ink); }
.bk[data-style="greenbar"] .ps-tb tfoot td { border: 0; }
.bk[data-style="greenbar"] .ps-net { margin: 24px 0 0; padding: 0; border: 0; }
.bk[data-style="greenbar"] .ps-net span i { color: var(--ink); }
.bk[data-style="greenbar"] .ps-net strong::before,.bk[data-style="greenbar"] .ps-net strong::after { content: "***"; }
.bk[data-style="greenbar"] .ps-att { margin: 0; color: var(--ink); }
.bk[data-style="greenbar"] .ps-ft { margin: 0; color: var(--ink); flex-direction: column; gap: 0; }
.bk[data-style="greenbar"] .ps-ft .prop { text-transform: uppercase; }
.bk[data-style="greenbar"] .ps-edge { border-top: 2px dashed #9aa394; }

/* ---- 手机那一档：工资条、保单变成一栏 ---- */
.bk .ps.narrow { width: 420px; padding: 24px 22px 20px; }
.bk .ps.narrow .ps-hd { grid-template-columns: minmax(0,1fr) auto; gap: 10px 16px; }
.bk .ps.narrow .ps-period { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; }
.bk .ps.narrow .ps-cols { grid-template-columns: 1fr; gap: 12px; }
.bk .ps.narrow .ps-ft { flex-direction: column; gap: 6px; }
.bk[data-style="ebank"] .ps.narrow .ps-hd { margin: -24px -22px 0; padding: 18px 22px 14px; }
.bk[data-style="greenbar"] .ps.narrow { padding: 24px 46px; }
.bk[data-style="greenbar"] .ps.narrow .ps-cols { gap: 24px; }
.bk .pg.narrow { width: 420px; height: auto; min-height: 0; padding: 30px 22px 26px; }
.bk .pg.narrow .pg-foot { position: static; margin-top: 26px; }
.bk .pg.narrow .hd { display: block; }
.bk .pg.narrow .hd-title { margin-top: 12px; text-align: left; }
.bk .pg.narrow .po-grid { grid-template-columns: 1fr; }
/* 手机上保单表格太窄：双语表头只留中文那行 */
.bk .pg.narrow .po-tb th i { display: none; }
.bk .pg.narrow .po-tb th { height: 30px; }
.bk .pg.narrow .po-sign { grid-template-columns: 1fr; gap: 26px; }
.bk[data-style="private"] .pg.narrow .hd-title { text-align: center; }
.bk[data-style="ebank"] .pg.narrow .hd { margin: -30px -22px 0; padding: 20px 22px 16px; }

/* ---- 手机：信用卡的算式行、按卡分组的小标题 ---- */
.bk .ph-eq { margin: -4px 0 14px; padding: 8px 10px; border-left: 3px solid var(--accent); background: color-mix(in srgb,var(--accent) 7%,var(--surface)); color: var(--muted); font: 500 11.5px/1.7 var(--f-num); }
.bk .ph-eq b { color: var(--ink); }
.bk .ph-mh .rel { margin-left: 6px; padding: 0 6px; border-radius: 3px; background: var(--accent); color: var(--surface); font-size: 11px; font-weight: 600; }
.bk[data-style="greenbar"] .ph,.bk[data-style="greenbar"] .ph * { font-family: var(--f-dot) !important; font-weight: 400 !important; }
.bk[data-style="greenbar"] .ph { background: repeating-linear-gradient(to bottom,var(--bar) 0 72px,var(--surface) 72px 144px); }
.bk[data-style="ledger"] .ph-a,.bk[data-style="ledger"] .ph-t b,.bk[data-style="ledger"] .ph-top strong { font-family: var(--f-kai); font-weight: 400; }
.bk[data-style="private"] .ph-top { border-width: 1px 0; }
.bk[data-style="private"] .ph-top strong,.bk[data-style="private"] .ph-a { font-family: var(--f-corm); font-variant-numeric: tabular-nums oldstyle-nums; }
.bk[data-style="offshore"] .ph-top { border: 0; border-top: 1px solid var(--ink); padding-inline: 0; }
.bk[data-style="highstreet"] .ph-top { border: 1.5px solid var(--accent); }
.bk[data-style="ebank"] .ph-top { border: 0; background: var(--accent); color: #fff; border-radius: 8px; }
.bk[data-style="ebank"] .ph-top .who,.bk[data-style="ebank"] .ph-top small,.bk[data-style="ebank"] .ph-top .io,.bk[data-style="ebank"] .ph-top .io b { color: #fff; }
.bk[data-style="counter"] .ph-top .bank,.bk .ph-top .bank { font-weight: 800; letter-spacing: .08em; color: var(--accent); }
.bk[data-style="ebank"] .ph-top .bank { color: #fff; }

/* ---- 固定印的那一行：每种纸都要有，贴纸盖不住它的位置由用户自己负责 ---- */
.bk .ph .prop,.bk .ps .prop,.bk .pb-foot { position: relative; z-index: 1; }


/* ---- 这几样派生色跟着用户改的配色走，样张里是写死的 ---- */
.bk[data-style="ledger"] { --red: var(--accent); }
.bk[data-style="counter"] { --band: color-mix(in srgb,var(--line) 20%,var(--surface)); }
.bk[data-style="highstreet"] { --band: color-mix(in srgb,var(--accent) 11%,var(--surface)); }
.bk[data-style="ebank"] { --zebra: color-mix(in srgb,var(--accent) 5%,var(--surface)); }
.bk[data-style="greenbar"] { --bar: color-mix(in srgb,var(--line) 34%,var(--surface)); }
.bk[data-style="neo"] { --card: color-mix(in srgb,var(--ink) 5%,var(--surface)); }
/* 保单在 A4 上是一页，内容多了往下长，页脚跟着走 */
.bk[data-doc="policy"] .pg:not(.narrow) { height: auto; min-height: 1123px; padding-bottom: 96px; }

/* ---- 异常规则：开关 ＋ 阈值一行一条 ---- */
.rule-row { display: grid; grid-template-columns: 104px auto minmax(0,1fr); gap: 7px; align-items: center; margin-bottom: 8px; }
.rule-row:has(input[type="time"] + span) { grid-template-columns: 104px auto minmax(0,1fr) auto minmax(0,1fr); }
.rule-row > span { color: var(--ui-muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.rule-row input:not([type="checkbox"]) { min-height: 34px; min-width: 0; padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; font-size: 12.5px; }
.rule-row .check-inline { justify-content: flex-start; }

/* ---- 抬头、账户信息、汇总格一律单行：放不下由脚本（fitLine）把最宽的那段字缩小，缩到 10px 仍放不下才折行 ---- */
.bk .hd *, .bk .conf, .bk .run-info, .bk .run-info *, .bk .info>div, .bk .info>div *, .bk .sum>div *, .bk .cd-kpi>div *, .bk .hero>small,
.bk .pb-head *, .bk .pb-cols *, .bk .ps-hd *, .bk .ps-info>div, .bk .ps-info>div *, .bk .po-grid>div *, .bk .ph-top .who * { white-space: nowrap; }
/* 抬头左右两块之间至少留 24px：缩字只缩到刚好放下，没有这条两块会贴在一起 */
.bk .hd { column-gap: 24px; }
.bk .info span.v { color: var(--ink); font-size: inherit; }
.bk .info .n { text-align: left; }
/* 纯英文：大写英文标题的字距收一些；柜面的标签列按英文收窄 */
.bk[data-style="counter"][data-lang="en"] .hd-title b { letter-spacing: .1em; }
.bk[data-style="counter"][data-lang="en"] .info>div { grid-template-columns: 96px minmax(0,1fr); }
.bk[data-style="ledger"][data-lang="en"] .hd-title b { letter-spacing: .12em; }
/* 柜面的信用卡：账单周期那一格占满一行，日期区间放得下 */
.bk[data-style="counter"][data-doc="card"] .info>div:nth-child(3) { grid-column: 1 / -1; }
/* 手机上的点阵工资条：抬头改成一栏，单位名独占一行 */
.bk[data-style="greenbar"] .ps.narrow .ps-hd { grid-template-columns: minmax(0,1fr); gap: 0; }
.bk[data-style="greenbar"] .ps.narrow .ps-title > div { text-align: left; }
/* 手机上的未来银行保单：机构中英文名各占一行 */
.bk[data-style="neo"] .pg.narrow .hd-bank b, .bk[data-style="neo"] .pg.narrow .hd-bank i { display: block; margin-left: 0; }
.bk[data-style="neo"] .pg.narrow .hd-bank i { margin-top: 4px; }
/* 点阵连续纸的信用卡大数字：四格排成两行两列，点阵字不缩也放得下 */
.bk[data-style="greenbar"] .cd-kpi { grid-template-columns: 1fr 1fr; gap: 0 20px; margin-bottom: 24px; }
/* 英式网点的信用卡和续页没有摘要框：抬头改成左右两栏 */
.bk[data-style="highstreet"][data-doc="card"] .hd, .bk[data-style="highstreet"] .run-hd .hd { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
.bk[data-style="highstreet"][data-doc="card"] .hd-title, .bk[data-style="highstreet"] .run-hd .hd-title { grid-column: 2; grid-row: 1; margin-top: 0; text-align: right; }
/* 离岸信托抬头：有头像时自动多出一栏 */
.bk[data-style="offshore"] .hd { grid-template-columns: minmax(0,1fr); grid-auto-flow: column; grid-auto-columns: auto; }

/* ---- 续页页眉：抬头照印，下面一行户名、账号、期间；摘要框、头像、大数字只在首页 ---- */
.bk .run-hd { margin-bottom: 16px; }
.bk .run-info { display: flex; flex-wrap: wrap; gap: 3px 22px; margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.bk .run-info b { margin-left: 6px; color: var(--ink); font-weight: 600; }
.bk .run-info b.solo { margin-left: 0; }
.bk[data-style="counter"] .run-info { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.bk[data-style="ebank"] .run-info, .bk[data-style="highstreet"] .run-info, .bk[data-style="neo"] .run-info { margin-top: 14px; }
.bk[data-style="private"] .run-info { justify-content: center; }
.bk[data-style="greenbar"] .run-hd, .bk[data-style="ledger"] .run-hd { margin-bottom: 0; }
.bk[data-style="greenbar"] .run-info { gap: 0 20px; margin: 0; font-size: 20px; line-height: 24px; color: var(--ink); text-transform: uppercase; }
.bk[data-style="greenbar"] .run-info b { margin-left: 10px; font-weight: 400; }
.bk[data-style="greenbar"] .run-info b.solo { margin-left: 0; }
.bk[data-style="offshore"] .run-hd { margin-bottom: 30px; }
.bk[data-style="offshore"] .run-hd .conf { margin-bottom: 18px; }

/* ---- 头像：只在流水、信用卡、工资条上；每套模板的位置和大小不同，点阵连续纸不放 ---- */
.bk .ava { position: relative; flex: none; }
.bk .ava-in { width: 48px; height: 60px; overflow: hidden; background: color-mix(in srgb,var(--muted) 16%,var(--surface)); }
.bk .ava-in img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bk .id-row { display: flex; align-items: flex-start; gap: 18px; margin: 14px 0; }
.bk .id-row > .info { flex: 1; min-width: 0; margin: 0; }
/* 柜面：一寸证件照贴在账户信息右边；有照片时标签中英分两行，腾出宽度给值 */
.bk[data-style="counter"] .id-row .info span i { display: block; margin: 1px 0 0; }
/* 标签和值之间固定留 10px */
.bk[data-style="counter"] .info>div { column-gap: 10px; }
/* 有照片时宽度紧：六格并成一张四栏的表，两列标签各按本列最长的那个定宽，剩下的都给值 */
.bk[data-style="counter"] .id-row .info { grid-template-columns: auto minmax(0,1fr) auto minmax(0,1.1fr); gap: 5px 10px; align-items: baseline; }
.bk[data-style="counter"] .id-row .info>div { display: contents; }
.bk[data-style="counter"] .id-row .info>div:nth-child(odd) span.v { margin-right: 14px; }
.bk[data-style="counter"][data-doc="card"] .id-row .info>div:nth-child(3) span.v { grid-column: 2 / -1; margin-right: 0; }
.bk[data-style="counter"] .ava { padding: 3px; border: 1px solid var(--line); background: var(--surface); }
.bk[data-style="counter"] .ava-in { width: 66px; height: 88px; }
/* 网银：圆形小头像在账户信息左边 */
.bk[data-style="ebank"] .id-row { align-items: center; margin: 16px 0 14px; }
.bk[data-style="ebank"] .id-row .ava { order: -1; padding: 2px; border: 1px solid var(--line); border-radius: 50%; }
.bk[data-style="ebank"] .ava-in { width: 44px; height: 44px; border-radius: 50%; }
/* 私人银行：居中抬头的右侧一张小肖像；左右留同样的宽度，标题仍然居中 */
.bk[data-style="private"] .hd.with-ava { position: relative; padding-inline: 72px; }
.bk[data-style="private"] .hd > .ava { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 3px; border: 1px solid var(--line); }
.bk[data-style="private"] .ava-in { width: 52px; height: 65px; }
/* 英式网点：方形头像在账户信息左边 */
.bk[data-style="highstreet"] .id-row { align-items: center; margin: 18px 0 16px; }
.bk[data-style="highstreet"] .id-row .ava { order: -1; padding: 2px; border: 1.5px solid var(--accent); }
.bk[data-style="highstreet"] .ava-in { width: 54px; height: 54px; }
/* 家庭账本：一张照片用胶带贴在抬头右边 */
.bk[data-style="ledger"] .hd.with-ava > :nth-last-child(2) { margin-left: auto; }
.bk[data-style="ledger"] .hd > .ava { align-self: center; margin: 0 3px 0 0; padding: 4px 4px 11px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22); transform: rotate(2.5deg); }
.bk[data-style="ledger"] .hd > .ava::before { content: ""; position: absolute; z-index: 1; left: 50%; top: -8px; width: 40px; height: 15px; margin-left: -20px; background: rgba(232,221,182,.82); transform: rotate(-5deg); }
.bk[data-style="ledger"] .ava-in { width: 56px; height: 70px; }
/* 未来银行：流水放在大数字卡片右上角；信用卡放在账户信息左边 */
.bk[data-style="neo"] .hero { position: relative; }
.bk[data-style="neo"] .hero > .ava { position: absolute; top: 18px; right: 20px; }
.bk[data-style="neo"] .ava { padding: 2px; border-radius: 50%; background: color-mix(in srgb,var(--accent) 55%,transparent); }
.bk[data-style="neo"] .ava-in { width: 48px; height: 48px; border-radius: 50%; }
.bk[data-style="neo"] .id-row { align-items: center; margin: 4px 0 12px; }
.bk[data-style="neo"] .id-row .ava { order: -1; }
.bk[data-style="neo"] .id-row .ava-in { width: 40px; height: 40px; }
/* 离岸信托：抬头最右边一张小照片 */
.bk[data-style="offshore"] .hd > .ava { padding: 2px; border: 1px solid var(--line); }
.bk[data-style="offshore"] .ava-in { width: 48px; height: 60px; }
/* 手机：圆形小头像在银行名前面 */
.bk .ph-top .who { align-items: center; }
.bk .ph-top .who .bank { margin-right: auto; }
.bk .ph-top .who .ava { margin-right: 10px; padding: 0; border: 0; background: none; box-shadow: none; transform: none; }
.bk .ph-top .ava-in { width: 34px; height: 34px; border-radius: 50%; }
.bk[data-style="ebank"] .ph-top .ava-in { box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
/* 工资条：「工资单 PAYSLIP」右边一张小的 */
.bk .ps-title { display: flex; align-items: flex-end; gap: 12px; }
.bk .ps-title > div { text-align: right; }
.bk .ps .ps-title .ava { padding: 2px; border: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; transform: none; }
.bk .ps .ps-title .ava-in { width: 36px; height: 45px; border-radius: 0; }
.bk[data-style="ebank"] .ps .ps-title .ava { border-color: rgba(255,255,255,.7); }

/* ---- 人物卡：头像预览按当前模板的槽位比例画 ---- */
.ava-row { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 12px; align-items: center; }
.ava-prev { width: 72px; height: 72px; display: grid; place-items: center; border: 1px dashed var(--ui-line-strong); border-radius: 6px; background: #fff; }
.ava-prev .ava-box { display: block; width: var(--ava-w,51px); height: var(--ava-h,64px); overflow: hidden; background: #eef2ef; }
.ava-prev.round .ava-box { border-radius: 50%; }
.ava-prev .ava-box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ava-prev .ava-box span { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ui-muted); font-size: 10px; }
.ava-side .inline-actions { gap: 6px; }
.ava-note { margin: 6px 0 0; color: var(--ui-muted); font-size: 11px; line-height: 1.5; }

/* ---- 头像裁切弹窗（和 #27 同一套） ---- */
.crop-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; }
.crop-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(20,28,24,.72); backdrop-filter: blur(4px); cursor: default; }
.crop-dialog { position: relative; width: min(560px,100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 18px; border-radius: 12px; background: var(--ui-card); box-shadow: 0 24px 90px rgba(0,0,0,.4); }
.crop-dialog header,.crop-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crop-dialog header small { color: var(--ui-accent); font: 800 9px/1 var(--font-mono); letter-spacing: .12em; }
.crop-dialog h2 { margin: 4px 0 12px; font-family: var(--font-serif); font-size: 18px; }
.crop-stage { position: relative; display: grid; place-items: center; min-height: 180px; overflow: hidden; border: 1px solid var(--ui-line-strong); border-radius: 10px; background: #22262a; }
.crop-stage canvas { display: block; max-width: 100%; max-height: min(56dvh,520px); cursor: grab; touch-action: none; }
.crop-stage canvas:active { cursor: grabbing; }
.crop-stage > span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 5px 8px; border-radius: 999px; background: rgba(20,24,21,.72); color: #fff; font-size: 10px; pointer-events: none; }
.crop-zoom { display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 12px; margin: 14px 0; font-size: 11px; font-weight: 750; }
.crop-zoom output { display: block; margin-top: 4px; color: var(--ui-accent); font: 800 10px/1 var(--font-mono); }
.crop-zoom input { width: 100%; accent-color: var(--ui-accent); }
.crop-dialog footer { justify-content: flex-end; }
body.crop-modal-open { overflow: hidden; }

/* ================= 手机端：必须放在文件最后，同特异度下后者赢 ================= */
@media (max-width:900px) {
  :root { --topbar-height:62px; }
  .topbar { gap:8px; padding:0 10px; }
  .brand { min-width:44px; }
  .brand-copy,.project-field,.desktop-action { display:none; }
  .brand-mark { width:40px; height:40px; }
  .top-actions { width:calc(100% - 50px); justify-content:flex-end; gap:6px; }
  .top-actions .button { min-height:40px; padding:0 12px; }
  .workspace { --preview-share:46%; height:auto; min-height:0; grid-template-columns:1fr; grid-template-rows:var(--preview-share) 20px 48px minmax(0,1fr); grid-template-areas:"preview" "resizer" "tabs" "panel"; }
  .preview-panel { grid-area:preview; grid-template-rows:42px minmax(0,1fr); border-bottom:0; }
  .preview-toolbar { padding:0 8px; }
  .preview-toolbar > div:first-child strong { display:none; }
  .preview-actions button { padding:0 7px; }
  .preview-stage { margin:14px auto; }
  .mobile-resizer { grid-area:resizer; display:grid; place-items:center; border-top:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line); background:#eff1ef; cursor:row-resize; touch-action:none; user-select:none; z-index:12; }
  .mobile-resizer span { width:112px; height:5px; border-radius:4px; background:var(--ui-line-strong); pointer-events:none; }
  .mobile-main-tabs { grid-area:tabs; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line); background:#f6f7f5; z-index:14; }
  .mobile-main-tabs button { border:0; border-right:1px solid var(--ui-line); background:transparent; font-size:13px; font-weight:850; }
  .mobile-main-tabs button:last-child { border-right:0; }
  .mobile-main-tabs button.active { background:var(--ui-accent-soft); box-shadow:inset 0 -3px var(--ui-accent); }
  .editor-panel { grid-area:panel; min-height:0; border:0; display:grid; grid-template-rows:minmax(0,1fr); }
  .panel-heading { display:none; }
  .panel-scroll { padding:12px 10px calc(20px + env(safe-area-inset-bottom)); scrollbar-gutter:auto; }
  body[data-active-mobile-panel="content"] .style-panel,body[data-active-mobile-panel="style"] .content-panel { display:none; }
  .editor-card { padding:13px; }
  .field input,.field select,.field textarea { min-height:42px; }
  .row-fields input,.row-fields select { min-height:42px; }
  .row-fields textarea { min-height:66px; }
  .fee-row input,.pr-row input,.pr-row select { min-height:40px; }
  .row-actions button,.button.row-add,.fee-row .row-del { min-height:40px; }
  .msg-row .row-actions button { min-height:34px; }
  .msg-drag-handle { width:30px; height:38px; }
  .add-grid button { min-height:40px; }
  .doc-button,.lang-button,.size-button { min-height:52px; }
  .dir-switch button,.segment-switch button { min-height:42px; }
  .check-inline { min-height:40px; }
  .pr-row .line1.bene { grid-template-columns:78px minmax(0,1fr) 70px; }
  .pr-row .line1.bene .row-actions { grid-column:1 / -1; justify-content:flex-end; }
  .sticker-handle { width:28px; height:28px; border-width:3px; }
  .sticker-handle::before { inset:-8px; }
  .resize-handle { right:-16px; bottom:-16px; }
  .rotate-handle { top:-44px; margin-left:-14px; }
  .rotate-handle::after { left:11px; top:25px; width:3px; height:18px; }
  .toast { bottom:calc(20px + env(safe-area-inset-bottom)); }
  .crop-dialog { padding:14px; }
  .crop-stage canvas { max-height:50dvh; }
  .crop-zoom { grid-template-columns:1fr; gap:6px; }
}
@media (max-width:520px) {
  .top-actions .button { padding-inline:9px; font-size:12px; }
  .style-grid,.check-row,.export-grid { grid-template-columns:1fr; }
  .add-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zoom-box output { min-width:36px; }
}