.sign-workspace{display:flex;flex-direction:column;gap:1.5rem}.file-info{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--bg-secondary, #f5f5f5);border-radius:8px}.file-name{font-weight:500}.page-info{color:var(--text-secondary, #666);font-size:.875rem}.error-message{padding:.75rem;background:#ef44441a;color:var(--error, #ef4444);border-radius:8px}.page-select{display:flex;align-items:center;gap:1rem}.page-select label{font-weight:500}.page-select select{padding:.5rem 1rem;border:1px solid var(--border-color, #ddd);border-radius:6px;font-size:1rem;min-height:48px}.signature-mode{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.signature-mode button{padding:.75rem .5rem;border:1px solid var(--border-color, #ddd);background:#fff;border-radius:8px;cursor:pointer;font-size:.875rem;transition:all .2s;min-height:48px}.signature-mode button.active{background:var(--primary, #4361ee);color:#fff;border-color:var(--primary, #4361ee)}.draw-section,.type-section,.upload-section,.camera-section{display:flex;flex-direction:column;gap:.75rem}.draw-section label,.type-section label,.upload-section label{font-weight:500}.signature-canvas{border:2px dashed var(--border-color, #ddd);border-radius:8px;background:#fff;cursor:crosshair;touch-action:none}.canvas-actions,.camera-actions{display:flex;gap:.5rem}.type-section input{padding:.75rem;border:1px solid var(--border-color, #ddd);border-radius:8px;font-size:1.25rem;font-style:italic;font-family:Brush Script MT,cursive,serif}.upload-section .file-input{padding:.75rem;border:1px solid var(--border-color, #ddd);border-radius:8px;background:#fff}.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;cursor:pointer}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.camera-preview{width:100%;max-width:400px;border-radius:8px;background:#000}.signature-preview{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:var(--bg-secondary, #f5f5f5);border-radius:8px}.signature-preview label{font-weight:500}.sig-preview-img{max-width:300px;max-height:100px;border:1px solid var(--border-color, #ddd);border-radius:4px;background:#fff;object-fit:contain}.position-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:.5rem}.setting-group{display:flex;flex-direction:column;gap:.5rem}.setting-group label{font-size:.875rem;font-weight:500}.setting-group select{padding:.5rem;border:1px solid var(--border-color, #ddd);border-radius:6px}.setting-group input[type=range]{width:100%}.placement-section{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}.placement-area{border:2px solid var(--border-color, #ddd);border-radius:8px;background:#fff;padding:1rem}.page-outline{position:relative;width:100%;aspect-ratio:8.5 / 11;max-height:300px;border:1px dashed var(--border-color, #ccc);border-radius:4px;background:var(--color-bg-secondary);overflow:hidden}.page-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ccc;font-size:.875rem;pointer-events:none}.draggable-sig{position:absolute;cursor:grab;border:2px dashed var(--primary, #4361ee);border-radius:4px;padding:4px;background:#4361ee1a;touch-action:none;-webkit-user-select:none;user-select:none}.draggable-sig:active{cursor:grabbing}.draggable-sig img{max-width:80px;max-height:30px;display:block;pointer-events:none}.placement-hint{font-size:.75rem;color:var(--text-secondary, #666);margin:0;text-align:center}.result-section{display:flex;flex-direction:column;gap:1rem;align-items:center}.success-message{padding:1rem;background:#4caf501a;color:var(--success, #4caf50);border-radius:8px;font-weight:500;width:100%;text-align:center}.action-buttons{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.privacy-note{text-align:center;padding:.75rem;background:#4caf501a;color:var(--success, #4caf50);border-radius:8px;font-size:.875rem;margin-top:1rem}@media(max-width:640px){.signature-mode{grid-template-columns:repeat(2,1fr)}.position-settings{grid-template-columns:1fr}.action-buttons{flex-direction:column;width:100%}.action-buttons .btn{width:100%}}