:root {
    --sign-image-primary: #2d86df;
    --sign-image-primary-dark: #1267bd;
    --sign-image-ink: #14213d;
    --sign-image-muted: #64748b;
    --sign-image-border: #d9e4ef;
    --sign-image-surface: #f3f6fa;
}

.sign-image-page { padding: 34px 0 64px; background: #f7f9fc; }
.sign-image-card { padding: 32px; border: 1px solid var(--sign-image-border); border-radius: 20px; background: #fff; box-shadow: 0 10px 28px rgba(31, 54, 86, .06); }
.sign-image-intro { max-width: 800px; margin: 0 auto 26px; text-align: center; }
.sign-image-eyebrow { display: inline-flex; padding: 7px 12px; border-radius: 999px; align-items: center; gap: 7px; background: #edf6ff; color: var(--sign-image-primary-dark); font-size: 12px; font-weight: 750; }
.sign-image-intro h1 { margin: 11px 0 8px; color: var(--sign-image-ink); font-size: clamp(27px, 4vw, 38px); font-weight: 800; }
.sign-image-intro p { margin: 0; color: #53657d; font-size: 15px; line-height: 1.65; }
.sign-image-switch-tool { display: inline-flex; margin-top: 14px; padding: 8px 12px; border: 1px solid var(--sign-image-primary); border-radius: 8px; align-items: center; color: var(--sign-image-primary-dark); background: #edf6ff; font-size: 13px; font-weight: 700; gap: 7px; text-decoration: none; }
.sign-image-switch-tool:hover { color: #fff; background: var(--sign-image-primary); }

.sign-image-alert { max-width: 920px; margin: 0 auto 18px; padding: 12px 16px; border: 1px solid #f3bdc4; border-radius: 10px; background: #fff1f2; color: #a42536; text-align: center; }
.sign-image-alert.is-success { border-color: #b9e7d0; background: #edfff4; color: #167246; }
.sign-image-alert.is-warning { border-color: #f0d78c; background: #fff9e8; color: #88610b; }
.sign-image-alert.is-info { border-color: #b9daf5; background: #edf7ff; color: #176799; }

.sign-image-upload { display: grid; min-height: 300px; padding: 35px 24px; border: 2px dashed #b9d2ea; border-radius: 16px; place-items: center; align-content: center; background: #fbfdff; color: var(--sign-image-muted); cursor: pointer; text-align: center; transition: .18s ease; }
.sign-image-upload:hover, .sign-image-upload:focus, .sign-image-upload.is-dragging { border-color: var(--sign-image-primary); background: #f2f8ff; outline: 0; }
.sign-image-upload-icon { display: grid; width: 62px; height: 62px; margin-bottom: 13px; border-radius: 16px; place-items: center; background: #e4f1ff; color: var(--sign-image-primary); font-size: 29px; }
.sign-image-upload h2 { margin: 0 0 7px; color: var(--sign-image-ink); font-size: 22px; font-weight: 800; }
.sign-image-upload p { max-width: 470px; margin: 0 0 17px; line-height: 1.55; }
.sign-image-upload small { display: block; margin-top: 13px; color: #718198; }
.sign-image-upload-button { pointer-events: none; }

.sign-image-workspace { margin-top: 18px; }
.sign-image-file-status { display: flex; min-width: 0; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--sign-image-border); border-radius: 12px; align-items: center; background: #fbfdff; gap: 14px; }
.sign-image-file-info { display: flex; min-width: 0; flex: 1 1 0; margin-right: auto; align-items: center; gap: 10px; }
.sign-image-file-info > div { min-width: 0; flex: 1 1 auto; }
.sign-image-file-info strong, .sign-image-file-info span:not(.sign-image-file-icon) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sign-image-file-info strong { color: var(--sign-image-ink); font-size: 14px; }
.sign-image-file-info span { color: var(--sign-image-muted); font-size: 12px; }
.sign-image-file-icon { display: grid; width: 39px; height: 39px; flex: 0 0 39px; overflow: visible; border-radius: 10px; place-items: center; background: #e4f1ff; color: var(--sign-image-primary); font-size: 20px; line-height: 1; }
.sign-image-file-icon i { display: block; width: auto; max-width: none; overflow: visible; font-size: inherit; line-height: 1; }
.sign-image-file-complete { color: #198754; font-size: 13px; font-weight: 750; white-space: nowrap; }

.sign-image-editor { display: flex; overflow: hidden; height: clamp(610px, calc(100vh - 150px), 760px); min-height: 610px; border: 1px solid var(--sign-image-border); border-radius: 16px; flex-direction: column; background: var(--sign-image-surface); }
.sign-image-toolbar { display: flex; min-height: 66px; padding: 10px 12px; border-bottom: 1px solid var(--sign-image-border); align-items: center; background: #fff; gap: 12px; justify-content: space-between; }
.sign-image-tool-group { display: flex; align-items: center; gap: 5px; }
.sign-image-tool-group-main { min-width: 0; overflow-x: auto; padding-bottom: 2px; }
.sign-image-tool { display: inline-flex; min-height: 40px; padding: 7px 9px; border: 1px solid transparent; border-radius: 8px; align-items: center; background: transparent; color: #40536b; cursor: pointer; font-size: 12px; font-weight: 700; gap: 6px; white-space: nowrap; }
.sign-image-tool:hover, .sign-image-tool:focus-visible { border-color: #c8def5; background: #edf6ff; color: var(--sign-image-primary-dark); outline: 0; }
.sign-image-tool-icon { width: 38px; padding: 6px; justify-content: center; }
.sign-image-toolbar-divider { width: 1px; height: 27px; margin: 0 3px; background: #d9e3ee; }
.sign-image-zoom-label { min-width: 52px; padding: 5px; border: 0; background: transparent; color: #526276; cursor: pointer; font-size: 12px; font-weight: 700; }

.sign-image-selection-tools { display: flex; min-height: 55px; padding: 8px 13px; border-bottom: 1px solid var(--sign-image-border); align-items: center; background: #eef7ff; gap: 10px; }
.sign-image-selection-tools > span, .sign-image-selection-tools > label { color: #3f5876; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sign-image-selection-tools > span { margin-right: auto; }
.sign-image-selection-tools input[type="range"] { width: 110px; accent-color: var(--sign-image-primary); }
.sign-image-selection-tools input[type="color"] { width: 30px; height: 27px; padding: 2px; border: 1px solid #b8c9dc; border-radius: 5px; background: #fff; cursor: pointer; }
.sign-image-selection-tools output { min-width: 34px; color: #49647e; font-size: 12px; }

.sign-image-viewer { position: relative; display: flex; min-height: 0; padding: 25px; align-items: flex-start; justify-content: center; overflow: auto; flex: 1; }
.sign-image-loading { display: flex; min-height: 160px; align-items: center; color: #55708b; font-size: 14px; gap: 9px; }
.sign-image-stage { position: relative; display: none; flex: 0 0 auto; box-shadow: 0 5px 20px rgba(15, 32, 58, .22); line-height: 0; }
.sign-image-stage.is-ready { display: block; }
.sign-image-stage img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.sign-image-overlay { position: absolute; inset: 0; overflow: hidden; z-index: 2; line-height: normal; pointer-events: auto; touch-action: none; }
.sign-image-annotation { position: absolute; box-sizing: border-box; transform-origin: center center; }
.sign-image-annotation:hover { border: 2px dashed var(--sign-image-primary); }
.sign-image-annotation-text { display: block; width: 100%; overflow: hidden; color: inherit; line-height: 1.15; overflow-wrap: anywhere; pointer-events: auto; cursor: move; user-select: none; white-space: pre-wrap; }
.sign-image-annotation-image { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: auto; cursor: move; user-select: none; -webkit-user-drag: none; }
.sign-image-annotation-stamp .sign-image-annotation-text { display: flex; width: 100%; height: 100%; box-sizing: border-box; align-items: center; justify-content: center; padding: .17em .3em; border: .1em solid currentColor; border-radius: .14em; font-weight: 800; letter-spacing: .04em; text-align: center; white-space: nowrap; overflow: visible; }
.sign-image-check-mark { display: flex; width: 100%; height: 100%; box-sizing: border-box; align-items: center; justify-content: center; overflow: visible; font-family: Arial, Helvetica, sans-serif !important; font-weight: 800; line-height: 1; }
.sign-image-check-mark.is-circle, .sign-image-check-mark.is-box { border: .09em solid currentColor; }
.sign-image-check-mark.is-circle { border-radius: 50%; }

.sign-image-selection-frame { position: absolute; box-sizing: border-box; border: 2px dashed var(--sign-image-primary); pointer-events: none; transform-origin: center center; z-index: 20; }
.sign-image-annotation-handle, .sign-image-annotation-remove, .sign-image-annotation-rotate { position: absolute; display: grid; width: 19px; height: 19px; border-radius: 50%; place-items: center; pointer-events: auto; color: #fff; font-size: 10px; line-height: 1; }
.sign-image-annotation-remove { top: -10px; right: -10px; border: 0; background: #ef4452; cursor: pointer; }
.sign-image-annotation-rotate { top: -28px; left: 50%; border: 2px solid #fff; background: #7036df; transform: translateX(-50%); cursor: grab; }
.sign-image-annotation-handle { right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 2px; background: var(--sign-image-primary); cursor: nwse-resize; }

.sign-image-privacy-note { margin: 14px 0; color: #59708c; font-size: 12px; text-align: center; }
.sign-image-privacy-note i { color: #198754; }
.sign-image-download-actions { display: flex; padding-top: 4px; align-items: center; gap: 14px; justify-content: flex-end; }
.sign-image-output-settings { display: flex; align-items: center; gap: 8px; }
.sign-image-output-settings label { margin: 0; color: #53657d; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sign-image-output-settings select { width: 170px; min-height: 40px; font-size: 13px; }
.sign-image-output-settings input[type="range"] { width: 100px; accent-color: var(--sign-image-primary); }
.sign-image-output-settings output { min-width: 36px; color: #53657d; font-size: 12px; }

.sign-image-modal { position: fixed; z-index: 1080; inset: 0; display: grid; padding: 18px; place-items: center; }
.sign-image-modal-backdrop { position: absolute; inset: 0; background: rgba(14, 28, 48, .58); }
.sign-image-modal-dialog { position: relative; z-index: 1; display: flex; width: min(620px, 100%); max-height: calc(100vh - 36px); border-radius: 15px; flex-direction: column; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.sign-image-modal-dialog-small { width: min(500px, 100%); }
.sign-image-modal-header, .sign-image-modal-footer { display: flex; padding: 16px 20px; align-items: center; gap: 12px; }
.sign-image-modal-header { border-bottom: 1px solid var(--sign-image-border); justify-content: space-between; }
.sign-image-modal-header h2 { margin: 0; color: var(--sign-image-ink); font-size: 20px; font-weight: 750; }
.sign-image-modal-header h2 i { color: var(--sign-image-primary); font-size: 18px; }
.sign-image-modal-close { display: grid; width: 33px; height: 33px; border: 0; border-radius: 7px; place-items: center; background: #f2f5f8; color: #41526a; cursor: pointer; }
.sign-image-modal-body { min-height: 0; padding: 20px; overflow: auto; }
.sign-image-modal-body label { display: block; margin: 0 0 7px; color: #3c4c61; font-size: 13px; font-weight: 700; }
.sign-image-modal-body input:not([type="color"]):not([type="range"]), .sign-image-modal-body textarea, .sign-image-modal-body select { margin-bottom: 16px; }
.sign-image-modal-footer { border-top: 1px solid var(--sign-image-border); justify-content: flex-end; }
.sign-image-modal-help { margin: 0 0 12px; color: #66788f; font-size: 13px; }
.sign-image-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.sign-image-modal-body .form-control.is-invalid { border-color: #dc3545; box-shadow: 0 0 0 .16rem rgba(220,53,69,.12); }
.sign-image-field-error { display: block; margin: -9px 0 12px; color: #c92a3b; font-size: 12px; font-weight: 650; line-height: 1.35; }

.sign-image-signature-tabs { display: grid; overflow: hidden; margin: 24px 24px 0; border: 1px solid #d9e3ef; border-radius: 11px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.sign-image-signature-tabs button { display: flex; min-height: 62px; padding: 8px 10px; border: 0; border-right: 1px solid #d9e3ef; align-items: center; flex-direction: column; background: transparent; color: #65758a; cursor: pointer; font-size: 13px; font-weight: 700; gap: 5px; justify-content: center; }
.sign-image-signature-tabs button:last-child { border-right: 0; }
.sign-image-signature-tabs button i { font-size: 17px; }
.sign-image-signature-tabs button.active { background: var(--sign-image-primary); color: #fff; }
#sign-image-signature-modal .sign-image-modal-body { padding: 24px; }
#sign-image-signature-modal .sign-image-signature-pane[data-signature-pane="type"] .form-control { min-height: 50px; margin-bottom: 16px; border-color: #d9e3ef; border-radius: 9px; font-size: 16px; }
.sign-image-signature-pane { display: none; }.sign-image-signature-pane.active { display: block; }
.sign-image-font-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.sign-image-font-choice { display: grid; min-height: 57px; padding: 7px 10px; border: 2px solid #dfe7f0; border-radius: 9px; place-items: center; background: #fff; color: var(--sign-image-ink); cursor: pointer; }
.sign-image-font-choice:hover, .sign-image-font-choice.active { border-color: var(--sign-image-primary); background: #eef6ff; box-shadow: 0 3px 10px rgba(27,112,214,.08); }
.sign-image-font-choice span { display: block; width: 100%; overflow: hidden; font-size: 21px; line-height: 1.1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sign-image-font-choice[data-signature-font-choice="cursive"] span, .sign-image-font-choice[data-signature-font-choice="bold"] span { font-family: "Brush Script MT", "Segoe Script", cursive; }
.sign-image-font-choice[data-signature-font-choice="elegant"] span { font-family: "Snell Roundhand", "Apple Chancery", cursive; }.sign-image-font-choice[data-signature-font-choice="formal"] span { font-family: "Monotype Corsiva", "Lucida Handwriting", cursive; }.sign-image-font-choice[data-signature-font-choice="handwritten"] span, .sign-image-font-choice[data-signature-font-choice="casual"] span { font-family: "Bradley Hand", "Segoe Print", cursive; }.sign-image-font-choice[data-signature-font-choice="classic"] span { font-family: Georgia,serif; font-style: italic; }.sign-image-font-choice[data-signature-font-choice="modern"] span { font-family: Arial,sans-serif; font-style: italic; font-weight: 600; }.sign-image-font-choice[data-signature-font-choice="bold"] span { font-weight: 800; }.sign-image-font-choice[data-signature-font-choice="great-vibes"] span { font-family: "Great Vibes",cursive; font-size:25px; }.sign-image-font-choice[data-signature-font-choice="dancing-script"] span { font-family:"Dancing Script",cursive; font-size:23px; font-weight:600; }.sign-image-font-choice[data-signature-font-choice="allura"] span { font-family:Allura,cursive; font-size:25px; }.sign-image-font-choice[data-signature-font-choice="alex-brush"] span { font-family:"Alex Brush",cursive; font-size:25px; }
.sign-image-draw-canvas { display: block; width: 100%; height: 180px; border: 2px dashed #b7cbe1; border-radius: 10px; background: #fff; cursor: crosshair; touch-action: none; }.sign-image-draw-actions, .sign-image-camera-actions { display: flex; margin-top: 10px; flex-wrap:wrap; gap: 8px; }.sign-image-camera-controls { display:flex; margin-top:10px; flex-wrap:wrap; gap:8px; }.sign-image-camera-facing { display:flex; flex-wrap:wrap; gap:7px; }.sign-image-camera-facing .btn { white-space:nowrap; }.sign-image-camera-facing .btn.active { border-color:var(--sign-image-primary); background:var(--sign-image-primary); color:#fff; box-shadow:none; }.sign-image-image-drop { display: grid; width: 100%; min-height: 155px; padding: 18px; border: 2px dashed #b7cbe1; border-radius: 10px; place-items: center; background: #fbfdff; color: #52708e; cursor: pointer; gap: 7px; }.sign-image-image-drop i { color: var(--sign-image-primary); font-size: 27px; }.sign-image-image-drop span { font-weight: 700; }.sign-image-image-drop small { color: #718198; }.sign-image-upload-preview, .sign-image-camera-video { display: block; width: 100%; max-height: 230px; margin-top: 14px; border: 1px solid #d7e3ef; border-radius: 9px; background: #172335; object-fit: contain; }
.sign-image-signature-options { display: flex; margin-top: 18px; align-items: center; flex-wrap: wrap; gap: 16px; }.sign-image-signature-colors { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }.sign-image-signature-color-choice, .sign-image-custom-color { display: block; width: 31px; height: 31px; padding: 0; border: 0; border-radius: 50%; background: var(--signature-color,#fff); cursor: pointer; }.sign-image-signature-color-choice.active { box-shadow: 0 0 0 3px #fff,0 0 0 5px var(--sign-image-primary); }.sign-image-custom-color { position: relative; overflow: hidden; background: conic-gradient(#f44,#ff4,#4f4,#4ff,#44f,#f4f,#f44); }.sign-image-custom-color input { position:absolute; inset:-3px; width:calc(100% + 6px)!important; height:calc(100% + 6px)!important; padding:0!important; border:0!important; opacity:0; cursor:pointer; }
.sign-image-signature-size-control { display: flex; min-width: 180px; align-items:center; flex:1 1 180px; gap:9px; }.sign-image-signature-size-control label { margin:0!important; white-space:nowrap; }.sign-image-signature-size-control input { min-width:80px; margin:0; flex:1; accent-color:var(--sign-image-primary); }.sign-image-signature-size-control output { min-width:37px; color:#566b85; font-size:12px; }
.sign-image-text-options { display:grid; margin-top:18px; padding-top:15px; border-top:1px solid var(--sign-image-border); align-items:center; gap:10px; grid-template-columns:auto 46px auto minmax(100px,1fr) auto; }.sign-image-text-options label { margin:0; }.sign-image-text-options input[type="color"], .sign-image-check-color-control input[type="color"] { width:38px; height:33px; padding:2px; border:1px solid #bfcddd; border-radius:6px; background:#fff; cursor:pointer; }.sign-image-text-options input[type="range"] { width:100%; accent-color:var(--sign-image-primary); }.sign-image-text-options output { min-width:39px; color:#566b85; font-size:12px; }
.sign-image-check-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.sign-image-check-choice { display:grid; min-height:90px; padding:12px; border:1px solid #d7e1ee; border-radius:10px; place-items:center; gap:7px; color:#53657c; background:#fff; font-size:13px; font-weight:700; }.sign-image-check-choice i { font-size:25px; }.sign-image-check-choice:hover,.sign-image-check-choice.active { border-color:var(--sign-image-primary); color:var(--sign-image-primary); background:#edf5ff; box-shadow:0 0 0 1px var(--sign-image-primary); }.sign-image-check-color-control { display:flex; margin-top:18px; padding-top:15px; border-top:1px solid var(--sign-image-border); align-items:center; gap:12px; }.sign-image-check-color-control label { margin:0; }

@media (max-width: 767.98px) {
    .sign-image-page { padding-top: 20px; }.sign-image-card { padding: 20px 14px; }.sign-image-file-status { display:grid; align-items:start; grid-template-columns:minmax(0,1fr); gap:9px; }.sign-image-file-info { width:100%; }.sign-image-file-complete { margin-left:49px; }.sign-image-file-status > .btn { width:100%; }.sign-image-editor { height:auto; min-height:0; max-height:none; }.sign-image-toolbar { min-height:0; padding:9px; align-items:stretch; flex-wrap:wrap; gap:7px; }.sign-image-tool-group-main { width:100%; }.sign-image-tool { min-height:38px; padding:6px 8px; font-size:11px; }.sign-image-tool-group-actions { width:100%; justify-content:space-between; }.sign-image-selection-tools { padding:9px; flex-wrap:wrap; gap:7px; }.sign-image-selection-tools > span { width:100%; }.sign-image-selection-tools input[type="range"] { flex:1; width:auto; min-width:90px; }.sign-image-viewer { min-height:355px; padding:16px 10px; justify-content:flex-start; }.sign-image-download-actions { align-items:stretch; flex-direction:column; }.sign-image-output-settings { align-items:center; flex-wrap:wrap; }.sign-image-output-settings select { flex:1; width:auto; }.sign-image-output-settings input[type="range"] { flex:1; }.sign-image-download-actions #sign-image-download { width:100%; }
    #sign-image-signature-modal .sign-image-modal-dialog { height:min(680px,calc(100dvh - 16px)); max-height:calc(100dvh - 16px); }.sign-image-modal-header,.sign-image-modal-footer,.sign-image-signature-tabs { flex:0 0 auto; }.sign-image-signature-tabs { margin:16px 16px 0; }.sign-image-signature-tabs button { min-height:57px; padding:7px 5px; font-size:11px; }.sign-image-signature-tabs button i { font-size:15px; }#sign-image-signature-modal .sign-image-modal-body { padding:16px; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; }.sign-image-font-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.sign-image-font-choice { min-height:48px; padding:5px; }.sign-image-font-choice span { font-size:17px; }.sign-image-font-choice[data-signature-font-choice="great-vibes"] span,.sign-image-font-choice[data-signature-font-choice="allura"] span,.sign-image-font-choice[data-signature-font-choice="alex-brush"] span { font-size:21px; }.sign-image-font-choice[data-signature-font-choice="dancing-script"] span { font-size:19px; }.sign-image-signature-options { align-items:stretch; flex-direction:column; gap:17px; }.sign-image-signature-size-control { width:100%; min-width:0; flex:0 0 auto; }.sign-image-text-options { grid-template-columns:auto 44px 1fr auto; }.sign-image-text-options label:nth-of-type(2) { grid-column:1; }.sign-image-text-options input[type="range"] { grid-column:2 / 4; }
}