body{margin:0;padding:0;font-family:sans-serif}.App{text-align:center;min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.App-header{background-color:#222;height:60px;padding:5px;color:#fff;display:flex;justify-content:space-between;align-items:center}.App-header h2{margin:0;padding-left:20px}.App-header ul{display:flex;list-style:none;margin:0;padding:0 20px}.App-header li{margin-left:20px}.App-header a{color:#fff;text-decoration:none;padding:5px 10px;border-radius:4px;transition:background-color .3s ease}.App-header a:hover{background-color:#fff3}.App-header a.active{background-color:#007bff}.App-body{position:absolute;inset:60px 0 0;padding:20px}.document-container{position:relative;height:calc(100vh - 100px);z-index:5}.document-container.box{position:relative;height:calc(100vh - 100px);overflow:auto;z-index:5}.signature-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;max-width:800px;margin:0 auto;padding:20px}@media(max-width:768px){.App-header{flex-direction:column;height:auto;padding:10px}.App-header h2,.App-header ul{padding:10px 0}.signature-options{grid-template-columns:1fr;padding:10px}.signature-card{padding:20px}}.signature-card{background:#f8f9fa;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:30px;text-align:center;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}.signature-card:hover{transform:translateY(-5px);box-shadow:0 5px 20px #00000026}.signature-card h3{margin-top:0;color:#333}.signature-card p{color:#666;font-size:16px;line-height:1.5}.signature-card .icon{font-size:48px;margin-bottom:15px;color:#007bff}.signature-card .btn{display:inline-block;background:#007bff;color:#fff;padding:10px 20px;border-radius:4px;text-decoration:none;font-weight:700;margin-top:15px;transition:background .3s ease}.signature-card .btn:hover{background:#0056b3;color:#fff;text-decoration:none}.Viewer{background-color:#eaeaec;position:absolute;inset:0;padding-top:.3rem!important;z-index:10;overflow:auto;-webkit-overflow-scrolling:touch;transform:translateZ(0);-webkit-transform:translateZ(0)}.pdfViewer{position:absolute;inset:0;z-index:20;overflow:visible;will-change:transform;background-image:linear-gradient(rgba(0,0,0,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.1) 1px,transparent 1px);background-size:10px 10px}.pdfViewer .page{width:948px;height:1227px;margin-bottom:.2rem!important;margin-left:auto!important;margin-right:auto!important;border:2px solid rgba(0,0,0,0)!important;overflow:visible;cursor:pointer;position:relative;transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform;transition:border .2s ease,background-color .2s ease}.drop-target.page{border:3px dashed #007bff!important;background-color:#007bff1a;box-shadow:0 0 10px #007bff4d}.pdf-page.drop-target{background-color:#007bff1a!important;box-shadow:0 0 15px #007bff66!important;transition:all .2s ease-in-out}.choose-it{background-color:#28a7451a}.drop-active .drop-target canvas{border:dashed 2px black;touch-action:none}@media screen and (min-width:320px)and (max-width:768px){.Viewer{min-height:50%}.offcanvas{width:0!important}.Viewer{width:793px!important;margin-left:auto!important;margin-right:auto!important}.pdfViewer .page{width:948px;height:1227px;margin-bottom:.2rem!important;margin-left:auto!important;margin-right:auto!important;border:2px solid rgba(0,0,0,0)!important;overflow:hidden;cursor:pointer;position:relative}.drop-target.page{border:3px dashed #007bff!important;background-color:#007bff1a;box-shadow:0 0 10px #007bff4d}.pdf-page.drop-target{background-color:#007bff1a!important;box-shadow:0 0 15px #007bff66!important;transition:all .2s ease-in-out}}#page{width:10%;font-size:15px;color:#efefef;font-weight:700;text-align:center}#canvas-wrapper{margin-top:50px;text-align:center}.canvas-body{width:100%;border:solid 2px black}.drawing-overlay{transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}#grid-snap{position:relative;width:100%;height:100%}.digital-signature{touch-action:none;-webkit-user-select:none;user-select:none;z-index:1000!important;position:absolute;display:inline-block;max-width:100%;max-height:100%;will-change:transform}.ToolbarZoom{position:fixed;left:15.5%;bottom:20px;width:78px;height:55px;background-color:#fff;border:1px solid #f4f5f7;border-radius:5px;padding:2px;z-index:10}.ToolbarZoom>.ZoomIn,.ToolbarZoom>.ZoomOut{border:1px solid white;border-radius:5px;background-color:#f4f5f7;width:32px;height:24px;font-size:12px;font-weight:700;color:#7a7a7b;margin:2px}.ToolbarZoom>.ZoomPercent{text-align:center;font-size:12px;color:#7a7a7b;margin-top:2px;margin-bottom:2px}.ToolbarPage{position:fixed;right:20px;top:30%;width:90px;height:auto;background-color:#fff;border:1px solid #f4f5f7;border-radius:5px;padding:3px;z-index:10}.ToolbarPage:empty{display:none}.ToolbarPage-active{display:none}.ToolbarPage-nonactive{display:block}.ToolbarPage>.DoneIn,.ParafIn,.QrCodeIn,.SignatureIn,.DrawIn{width:82px;height:35px;font-size:12px;font-weight:700;color:#7a7a7b;margin:auto auto 2px}.toolbar-signer-page{display:flex;flex-direction:column;position:fixed;right:20px;top:50%;width:150px;height:170px;background-color:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 10px #0000001a;z-index:10;padding:12px}.header-toolbar{width:100%;text-align:center;border-bottom:1px solid #eee;padding-bottom:8px;font-weight:600;color:#333}.body-toolbar{width:100%;overflow:auto;max-height:150px;margin-bottom:12px;padding:4px 0}.footer-toolbar{width:100%;padding-top:8px;border-top:1px solid #eee}.list-signer{padding-left:0;list-style:none;font-size:11px;margin:0}.list-signer .signer-item{display:flex;align-items:center;justify-content:space-between;padding:2px 0;border-bottom:.5px solid #f0f0f0;transition:background-color .2s ease}.list-signer .signer-item:hover{background-color:#f8f9fa}.list-signer .signer-item-content{display:flex;align-items:center;flex:1}.list-signer .signer-item-page{min-width:40px}.list-signer .signer-item-status{margin:auto}.list-signer .signer-item-action{min-width:24px;display:flex;justify-content:center}.scaling-svg{height:20%;width:20%}.delete-btn{cursor:pointer;transition:all .2s ease-in-out;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background-color:#f8f9fa;border:1px solid #dee2e6;font-weight:700;color:#6c757d}.delete-btn:hover{background-color:#fff5f5;border-color:#ff6b6b;box-shadow:0 2px 4px #ff6b6b4d;color:#ff6b6b}.delete-btn:hover .badge-danger{background-color:#ff6b6b!important}.delete-btn.disabled{opacity:.4;cursor:not-allowed}.delete-btn.disabled:hover{transform:none;background-color:#f8f9fa;box-shadow:none;color:#6c757d}.beautiful-x{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,#ff6b6b,#ee5a52);color:#fff;font-weight:700;font-size:9px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #ff6b6b4d;border:2px solid white;text-shadow:0 1px 2px rgba(0,0,0,.2)}