.signature-workspace{padding:26px}.signature-toolbar{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:20px}.signature-ink{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.signature-ink>span{font-size:13px;font-weight:700;margin-right:8px}.signature-ink button{width:38px;height:38px;background:var(--pen);border:5px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #dfe6d8;padding:0}.signature-ink button[aria-pressed=true]{outline:2px solid #71874e;outline-offset:3px}.signature-ink label{display:flex;align-items:center;gap:6px;font-size:12px}.signature-ink input{width:36px;height:36px;padding:2px;border:1px solid #dce3d2;border-radius:9px;background:white}.signature-width{display:grid;grid-template-columns:auto auto;gap:8px 18px;font-size:12px;font-weight:600;min-width:170px}.signature-width output{text-align:right;font-variant-numeric:tabular-nums}.signature-width input{grid-column:1/-1;width:100%;accent-color:#768d42;min-height:28px}.signature-pad-shell{position:relative;overflow:hidden;border:1px solid #d4ddca;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 6px #f7f9f1}.signature-pad-shell:after{content:'';position:absolute;left:7%;right:7%;bottom:26%;border-bottom:1px dashed #d7decf;pointer-events:none}.signature-pad-shell canvas{display:block;width:100%;height:auto;aspect-ratio:2/1;touch-action:none;cursor:crosshair;position:relative;z-index:1}.signature-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#8c9780;pointer-events:none}.signature-empty strong{font-size:18px;font-weight:500}.signature-empty span{font-size:12px}.signature-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}.signature-bottom .actions{margin:0}.signature-bottom label{font-size:13px;display:flex;align-items:center;gap:8px}.signature-bottom input{width:18px;height:18px;accent-color:#71874e}.signature-result{margin-top:24px;padding-top:22px;border-top:1px solid #dfe6d8}.signature-result h2{font-size:19px;margin:0 0 12px}.signature-preview{border:1px solid #dfe6d8;border-radius:16px;padding:18px;min-height:150px;display:flex;align-items:center;justify-content:center;background-color:#fff;background-image:linear-gradient(45deg,#e7ebdf 25%,transparent 25%),linear-gradient(-45deg,#e7ebdf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7ebdf 75%),linear-gradient(-45deg,transparent 75%,#e7ebdf 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.signature-preview img{max-width:100%;max-height:240px;object-fit:contain}.signature-workspace .primary,.signature-workspace .secondary{min-height:44px}.signature-note{font-size:12px;color:#687160}.signature-result [translate=no]{font-variant-numeric:tabular-nums}@media(max-width:650px){.signature-workspace{padding:16px}.signature-toolbar{gap:18px}.signature-width{width:100%}.signature-empty strong{font-size:15px}.signature-empty span{font-size:10px}.signature-bottom{align-items:stretch}.signature-bottom .actions{width:100%}.signature-pad-shell{border-radius:16px}.signature-ink button{width:40px;height:40px}}

/* The full pad owns touch gestures; the surrounding page remains scrollable. */
.signature-pad-shell{touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.signature-pad-shell canvas{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media(max-width:650px){
 .signature-workspace{padding:12px}
 .signature-pad-shell canvas{height:clamp(300px,50svh,420px);aspect-ratio:auto}
 .signature-empty strong{font-size:14px;text-align:center;padding:0 12px}
 .signature-toolbar{margin-bottom:16px;gap:12px}
}
@media(max-width:950px) and (max-height:500px) and (orientation:landscape){
 .signature-pad-shell canvas{height:65svh;min-height:220px;aspect-ratio:auto}
}

/* Keep the page still between strokes, not only while a pointer is held down. */
html.signature-drawing{overflow:hidden!important;overscroll-behavior:none;touch-action:none;scroll-behavior:auto!important}
html.signature-drawing body{touch-action:none;overscroll-behavior:none}
.signature-lock-bar{position:fixed;z-index:1000;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(520px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px;background:#33482c;color:#fff;border:1px solid #6e855a;border-radius:17px;box-shadow:0 8px 28px #24342133}
.signature-lock-bar strong{font-size:13px;display:block;line-height:1.5}
.signature-lock-bar small{font-size:11px;display:block;line-height:1.5;color:#dce8d2}
.signature-lock-bar button{flex-shrink:0;min-height:44px;padding:10px 14px;border:0;border-radius:11px;background:#dfff3f;color:#26351f;font-weight:800;font-size:13px;touch-action:manipulation}