body{margin:0;background:#f7f8f4;color:#172c26;font:15px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}header{background:#123e32;color:white;padding:16px 0}a{color:#14634c}.wrap{max-width:1100px;margin:auto;padding:0 22px}.nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px}.nav a{color:white;text-decoration:none}.brand{font-size:23px;font-weight:850}.navlinks{display:flex;gap:18px}.hero{padding:34px 0 12px}h1{font-size:clamp(32px,5vw,48px);letter-spacing:-.04em;margin:5px 0}h2{margin:0 0 12px}h3{margin:10px 0}.lead{font-size:18px;color:#567065}.panel{background:white;border:1px solid #dfe8e1;border-radius:19px;padding:24px;margin:18px 0;box-shadow:0 12px 40px #173c2910}.drop{display:block;text-align:center;border:2px dashed #a7c6b4;background:#f7fbf8;border-radius:16px;padding:24px;cursor:pointer}.drop.drag{background:#e9f6ec}.drop input{display:block;margin:12px auto 0;max-width:100%}button{cursor:pointer;border:0;background:#166448;color:white;border-radius:10px;padding:11px 16px;font:inherit;font-weight:700}button:disabled{opacity:.45;cursor:not-allowed}.secondary{background:#eff6f0;color:#23573e;border:1px solid #bfd3c5}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}.editor{display:grid;grid-template-columns:minmax(250px,315px) minmax(0,1fr);gap:24px;align-items:start}.controls{background:#f7faf7;border:1px solid #e2eae4;padding:16px;border-radius:15px}.controls label,.form-field{display:flex;flex-direction:column;gap:5px;margin:10px 0;font-size:13px;font-weight:700}input:not([type=file]):not([type=checkbox]),select{border:1px solid #c1d4c8;border-radius:9px;padding:10px;width:100%;font:inherit}.page-view{min-width:0}.page-wrap{position:relative;width:100%;box-shadow:0 4px 23px #0002;border:1px solid #dde5dc;background:white}.page-wrap canvas{display:block;width:100%;height:auto}.page-wrap #overlay{position:absolute;top:0;left:0;cursor:crosshair;touch-action:manipulation}#signaturePad{background:white;border:1px solid #b7ccbd;border-radius:10px;width:100%;height:140px;touch-action:none}#status{color:#246444;min-height:24px}#status.error{color:#aa2929}.muted{font-size:13px;color:#667d6c}.form-field{border-bottom:1px solid #e5eee7;padding-bottom:8px}.faq details{padding:12px 0;border-top:1px solid #e1e8e1}footer{padding:25px 0;border-top:1px solid #dce5df;margin-top:40px}@media(max-width:760px){.editor{grid-template-columns:1fr}.navlinks{gap:10px}.panel{padding:16px}}
.page-wrap{width:100%;height:auto;overflow:hidden}.page-wrap #pageCanvas{width:100%;height:100%;object-fit:fill}.page-wrap #overlay{display:none}#itemLayer{position:absolute;inset:0;touch-action:none;cursor:crosshair}.placed-item{position:absolute;display:flex;align-items:center;justify-content:flex-start;cursor:move;user-select:none;touch-action:none;transform-origin:center center;white-space:pre-wrap;overflow:visible}.placed-item img{width:100%;height:100%;object-fit:fill;pointer-events:none}.placed-item>span:not(.resize-handle){line-height:1.15;max-width:100%;overflow:hidden;pointer-events:none}.placed-item.selected{outline:2px solid #166448;outline-offset:1px;background:#b5e9ca19}.resize-handle{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;background:#166448;border:2px solid white;border-radius:3px;cursor:nwse-resize;box-shadow:0 1px 5px #0005}.transform-panel{margin:12px 0;padding:12px;border:1px solid #c4d8cb;background:#edf7ef;border-radius:10px}.transform-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}.transform-grid label{margin:4px 0}.transform-grid input{padding:7px!important}.transform-panel[hidden]{display:none}

/* Match drawing pad display proportions to its bitmap dimensions. */
#signaturePad{height:auto;aspect-ratio:650 / 220;display:block}
.page-wrap #pageCanvas{height:auto;display:block;aspect-ratio:auto}
.page-wrap{height:auto!important;aspect-ratio:auto!important}
#itemLayer{height:100%;width:100%}
.aspect-toggle{grid-column:1/-1;display:flex!important;flex-direction:row!important;align-items:center;gap:9px!important;cursor:pointer}
.aspect-toggle input{width:auto!important;accent-color:#166448}

/* The whole font-colour field displays its current colour. */
input[type="color"]#fontColor,input[type="color"]#selectedFontColor{appearance:none;-webkit-appearance:none;display:block;width:100%;height:40px;padding:3px!important;background:transparent;border:1px solid #b6cfc0;border-radius:9px;cursor:pointer;overflow:hidden}
input[type="color"]#fontColor::-webkit-color-swatch-wrapper,input[type="color"]#selectedFontColor::-webkit-color-swatch-wrapper{padding:0}
input[type="color"]#fontColor::-webkit-color-swatch,input[type="color"]#selectedFontColor::-webkit-color-swatch{border:0;border-radius:5px}
input[type="color"]#fontColor::-moz-color-swatch,input[type="color"]#selectedFontColor::-moz-color-swatch{border:0;border-radius:5px}

.advanced-edit{padding:12px;margin:12px 0;border:1px solid #cadacf;border-radius:12px;background:#fff}.advanced-edit .actions button{font-size:12px;padding:8px 10px}.advanced-edit label:has(input[type=checkbox]){flex-direction:row;align-items:center}.advanced-edit label input[type=checkbox]{width:auto}.placed-item.selected{outline:2px solid #166448}.placed-item.multi-selected{outline:2px dashed #166448}.placed-item .rotate-handle{position:absolute;left:calc(50% - 7px);top:-24px;width:14px;height:14px;border-radius:50%;background:#d79029;border:2px solid white;cursor:grab;box-shadow:0 1px 5px #0005}.advanced-edit #selectionCount{font-weight:700}

/* Compact, viewport-anchored editor: the page stays visible while editing. */
@media(min-width:900px){.wrap{max-width:1500px}.editor{grid-template-columns:minmax(340px,390px) minmax(0,1fr);gap:16px}.controls{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.page-view{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}.page-wrap{max-width:900px;margin:0 auto}}
.controls{padding:12px}.controls h2{font-size:17px;margin:0 0 4px}.controls h3{font-size:14px;margin:7px 0 4px}.controls label{margin:5px 0;gap:2px}.controls input:not([type=file]):not([type=checkbox]),.controls select{padding:6px 8px}.controls .actions{gap:5px;margin:6px 0}.controls button{padding:7px 10px;font-size:12px;border-radius:7px}.advanced-edit{padding:8px;margin:7px 0}.advanced-edit>p:first-of-type{display:none}.advanced-edit .actions button{padding:6px 8px}.transform-panel{padding:8px;margin:6px 0}.transform-grid{gap:2px 7px}.transform-grid label{margin:2px 0}.controls .muted{margin:4px 0}.compact-topline{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#466354;margin-bottom:5px}.editor-options[hidden]{display:none}.editor-options{border-top:1px solid #e1e9e2;margin-top:8px;padding-top:6px}.editor-options #textStyleControls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px}.editor-options #textStyleControls>label{min-width:0}.editor-options #textStyleControls>label:has(select){grid-column:1/-1}.editor-options #textStyleControls>label:has(input[type=number]){grid-column:1/-1}.controls #export{width:100%}
@media(max-width:899px){.controls{position:relative;max-height:none;overflow:visible}.editor{grid-template-columns:1fr}.page-view{position:relative}}

/* Align annotation text inside its entire editable bounding box. */
.placed-item > span:not(.resize-handle):not(.rotate-handle) {
  display:block;
  width:100%;
  box-sizing:border-box;
  white-space:pre-wrap;
  overflow-wrap:break-word;
}

/* Inline text editing uses the same annotation bounds and alignment. */
.placed-item .inline-text-editor{display:block;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box;padding:0;margin:0;border:1px dashed #3479c9;outline:1px solid #3479c9;background:rgba(255,255,255,.85);resize:none;overflow:auto;white-space:pre-wrap;overflow-wrap:break-word;transform:none;}

/* Temporary visual guides while dragging annotations. */
.pdfied-snap-guide{position:absolute;z-index:100;pointer-events:none;background:#1685d8;opacity:.75}
.pdfied-snap-guide.vertical{top:0;bottom:0;width:1px}
.pdfied-snap-guide.horizontal{left:0;right:0;height:1px}
