.teamcmp-file-dropzone {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    padding: 20px;
    border: 2px dashed #c8d0d9;
    border-radius: 4px;
    background: #fafbfc;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.teamcmp-file-dropzone:hover,
.teamcmp-file-dropzone:focus,
.teamcmp-file-dropzone.is-dragover {
    border-color: #6b7a89;
    background: #f3f6f8;
    outline: none;
}
.teamcmp-file-prompt { display: block; }
.teamcmp-file-button {
    display: inline-block;
    margin-left: 4px;
    padding: 5px 10px;
    border: 1px solid #8b98a5;
    border-radius: 3px;
    background: #fff;
    font-weight: 600;
}
.teamcmp-file-help {
    margin-top: 8px;
    font-size: .875em;
    opacity: .75;
}
.teamcmp-file-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.teamcmp-file-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
.teamcmp-file-list li { margin: 4px 0; }
.teamcmp-file-status { margin-top: 8px; font-size: .9em; }
.teamcmp-file-error { color: #a40000; font-weight: 600; }

.teamcmp-signature-ui { max-width: 100%; }
.teamcmp-signature-canvas {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 2px dashed #c8c8c8;
    background: #fff;
    cursor: crosshair;
    touch-action: none;
}
.teamcmp-signature-canvas:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.teamcmp-signature-toolbar { margin-top: 6px; text-align: right; }
.teamcmp-signature-clear {
    padding: 4px 8px;
    border: 1px solid #aeb7c0;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}
.teamcmp-signature-error { margin-top: 4px; color: #a40000; font-weight: 600; }