.official-page { position: relative; width: 100%; aspect-ratio: var(--page-ratio); margin: 0 auto 18px; background: white; overflow: hidden; box-shadow: 0 2px 10px #0002; }
.official-page > .template { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.overlay-text { position: absolute; z-index: 2; font-family: "Courier New", monospace; font-weight: 700; font-size: clamp(7px, 1.02vw, 14px); line-height: 1; text-transform: uppercase; white-space: nowrap; letter-spacing: var(--letter-spacing,.08em); transform: translateY(-50%) scale(var(--font-scale,1)); transform-origin: left center; }
.overlay-chars { position: absolute; z-index: 2; display: grid; height: 1.25%; align-items: center; font-family: "Courier New", monospace; font-weight: 700; font-size: clamp(7px, 1.02vw, 15px); line-height: 1; text-transform: uppercase; }
.overlay-chars span { text-align: center; overflow: hidden; transform: scale(var(--font-scale,1)); }
.coordinate-chars { font-size: clamp(6px, .86vw, 12px); letter-spacing: -.03em; }
.overlay-coordinate-groups{position:absolute;z-index:2;display:grid;grid-template-columns:2.15fr .75fr 7.1fr;align-items:center;height:1.35%;font-family:"Courier New",monospace;font-size:clamp(7px,.9vw,13px);font-weight:700;line-height:1;text-align:center}.overlay-coordinate-groups span{display:block;white-space:nowrap}.coordinate-prefix{text-align:right;padding-right:.12em}.coordinate-dot{text-align:center}.coordinate-decimal{text-align:left;padding-left:.18em;letter-spacing:.24em}
.ac-dash { width: 5.2%; text-align: center; font-weight: 800; }
.overlay-check { position: absolute; z-index: 2; font: 700 clamp(9px, 1.35vw, 19px)/1 Arial; text-align: center; transform: translate(-50%, -50%); }
.overlay-sketch { position: absolute; z-index: 2; object-fit: contain; }
.preview-note { background: #fff5e7; color: #694817; padding: 11px 14px; border-radius: 9px; margin-bottom: 14px; font-size: 12px; }
.editor-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 9px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #ded8cf; }
.editor-bar > span { color: #716d67; font-size: 11px; }
.nudge-controls { display: none; gap: 3px; margin-left: auto; }
.nudge-controls button { width: 31px; height: 31px; border: 1px solid #cabfc0; border-radius: 7px; background: white; color: #701f2b; }
.nudge-controls i { width: 1px; background: #ded8cf; margin: 2px 3px; }
.preview-dialog.editing .nudge-controls { display: flex; }
.preview-dialog.editing .overlay-chars, .preview-dialog.editing .overlay-text, .preview-dialog.editing .overlay-check, .preview-dialog.editing .overlay-sketch { cursor: move; outline: 1px dashed #d58c36; outline-offset: 2px; pointer-events: auto; user-select: none; touch-action: none; }
.preview-dialog.editing .overlay-selected { outline: 2px solid #0b70c9; background-color: rgba(11,112,201,.12); }
.lspop-section { margin: 10px 22px; border: 1px solid #ded8cf; border-radius: 10px; }
.lspop-section summary { cursor: pointer; padding: 12px 14px; font-size: 12px; font-weight: 800; color: #701f2b; background: #faf7f2; border-radius: 10px; }
.lspop-section[open] summary { border-bottom: 1px solid #ded8cf; margin-bottom: 14px; }
.conditional-jpb { display: none; }
.conditional-jpb.show { display: block; }
.master-label { display: inline-block; margin-left: 7px; padding: 3px 7px; border-radius: 10px; background: #701f2b; color: white; font-size: 8px; letter-spacing: .5px; vertical-align: middle; }
.duplicate-template { margin-top: 9px; padding: 7px 10px; border: 1px solid #701f2b; border-radius: 8px; background: #fff8f7; color: #701f2b; font-size: 11px; font-weight: 800; cursor: pointer; }
.identity-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 16px 12px; }
.identity-columns h4 { margin: 0 0 13px; color: #4c111c; }
.signature-preview { display: none; width: 100%; height: 90px; margin-top: 8px; border: 1px dashed #cabfc0; border-radius: 8px; object-fit: contain; background: white; }
.signature-preview.has-image { display: block; }
@media (max-width: 720px) { .identity-columns { grid-template-columns: 1fr; } }
@page { size: 215.9mm 330.2mm; margin: 0; }
@media print { html, body { width: 215.9mm; min-height: 330.2mm; background: white; } .topbar, .view, .dialog-head, .dialog-actions, .preview-note, .editor-bar { display: none !important; } dialog.preview-dialog { display: block !important; position: static; width: 100%; max-height: none; box-shadow: none; } .preview-dialog #printContent { padding: 0; } .official-page { width: 215.9mm; height: 330.2mm; aspect-ratio: auto; box-shadow: none; margin: 0; break-after: page; } .overlay-text, .overlay-chars { font-size: 8.5pt; } .overlay-check { font-size: 12pt; } }