.signature-container{max-width:800px;margin:2rem auto;padding:2rem;background:#fff;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1);font-family:Segoe UI,system-ui,sans-serif}.signature-container .canvas-controls{display:flex;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}.signature-container .canvas-controls .color-picker,.signature-container .canvas-controls .line-width{display:flex;align-items:center;gap:.5rem}.signature-container .canvas-controls .color-picker label,.signature-container .canvas-controls .line-width label{font-weight:500;color:#2c3e50}.signature-container .canvas-controls .color-picker input[type=color],.signature-container .canvas-controls .line-width input[type=color]{width:40px;height:40px;padding:2px;border:2px solid #dfe6e9;border-radius:6px;cursor:pointer;transition:border-color .2s}.signature-container .canvas-controls .color-picker input[type=color]:hover,.signature-container .canvas-controls .line-width input[type=color]:hover{border-color:#3498db}.signature-container .canvas-controls .color-picker input[type=range],.signature-container .canvas-controls .line-width input[type=range]{width:120px;accent-color:#3498db}.signature-container .canvas-controls .color-picker span,.signature-container .canvas-controls .line-width span{color:#2c3e50;font-weight:500;min-width:40px}.signature-container .signature-canvas{width:100%;height:300px;border:2px solid #dfe6e9;border-radius:8px;touch-action:none;background-color:#fff;transition:border-color .2s}.signature-container .signature-canvas:hover{border-color:#3498db}.signature-container .action-buttons{margin-top:1.5rem;display:flex;gap:1rem;justify-content:flex-end}.signature-container .action-buttons button{padding:.8rem 1.5rem;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px}.signature-container .action-buttons button.clear-button{background-color:#e74c3c;color:#fff}.signature-container .action-buttons button.clear-button:hover{background-color:#c0392b}.signature-container .action-buttons button.download-button{background-color:#3498db;color:#fff}.signature-container .action-buttons button.download-button:hover{background-color:#2980b9}@media(max-width:768px){.signature-container{margin:1rem;padding:1rem}.signature-container .canvas-controls{flex-direction:column;gap:1rem}.signature-container .canvas-controls .line-width input[type=range]{width:100px}.signature-container .action-buttons{flex-direction:column}.signature-container .action-buttons button{width:100%;padding:1rem}}