.signature-grid { align-items: start; }
.signature-grid .result__value { font-size: clamp(1.4rem, 3vw, 2rem); }
.signature-preview { margin-top: 1.4rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background-color: #fff; background-image: linear-gradient(45deg, #ededed 25%, transparent 25%), linear-gradient(-45deg, #ededed 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ededed 75%), linear-gradient(-45deg, transparent 75%, #ededed 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.signature-preview canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; }
.signature-download { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1rem; }
.signature-download p { flex: 1 1 240px; margin: 0; }
.signature-preview[hidden], .signature-download[hidden] { display: none; }
.signature-drawing { margin-top: 1.4rem; }
.signature-draw-canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair; border: 0; outline: 1px solid var(--line); border-radius: var(--radius); background-color: #fff; background-image: linear-gradient(45deg, #ededed 25%, transparent 25%), linear-gradient(-45deg, #ededed 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ededed 75%), linear-gradient(-45deg, transparent 75%, #ededed 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.signature-draw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; }
.signature-draw-actions p { flex: 1 1 250px; margin: 0; }
.signature-drawing[hidden], [data-signature-text-fields][hidden], [data-signature-draw-fields][hidden] { display: none; }
@media (max-width: 768px) { .signature-grid { grid-template-columns: minmax(0, 1fr); } .signature-download .btn { width: 100%; } }