:root{--primary: #3b82f6;--primary-hover: #2563eb;--bg-gradient: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);--text-main: #1e293b;--text-muted: #64748b;--border: #cbd5e1}*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-tap-highlight-color:transparent}body{margin:0;padding:0;background-color:#f1f5f9;color:var(--text-main);min-height:100dvh}.app-container{width:100%;min-height:100dvh;display:flex;justify-content:center}.step-view{display:flex;flex-direction:column;width:100%;max-width:500px;height:100dvh;background:#fff;box-shadow:0 0 20px #0000000d;position:relative}.fullscreen-zoom{flex:1;min-height:0;background:#f8fafc;position:relative;overflow:hidden}.scroll-content{flex:1;overflow-y:auto;padding:32px 24px;display:flex;flex-direction:column;gap:40px}.fixed-image-box{width:100%;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000000d;flex-shrink:0}.fixed-image-box img{width:100%;height:auto;display:block;object-fit:contain}.input-group{display:flex;flex-direction:column;gap:12px}.input-group label{font-size:.95rem;font-weight:600;color:#334155}.input-group input{width:100%;padding:16px;border:1px solid #cbd5e1;border-radius:12px;font-size:1.05rem;color:#1e293b;outline:none;transition:all .2s;box-sizing:border-box;background:#fff}.input-group input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #3b82f61a}.input-group input::placeholder{color:#94a3b8}.label-row{display:flex;justify-content:space-between;align-items:center}.clear-btn{display:flex;align-items:center;gap:4px;background:#f1f5f9;border:none;color:#475569;font-size:.85rem;font-weight:600;cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .2s}.clear-btn:hover{background:#e2e8f0}.signature-box{position:relative;width:100%;height:200px;border:2px dashed #cbd5e1;border-radius:12px;background:#f8fafc;overflow:hidden}.signature-box canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;touch-action:none;cursor:crosshair}.canvas-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#94a3b8;pointer-events:none;font-size:.95rem;font-weight:500}.bottom-action{padding:16px 24px 24px;background:#fff;border-top:1px solid #f1f5f9;box-shadow:0 -4px 20px #00000008;display:flex;flex-direction:column;gap:12px;z-index:10}.submit-btn{width:100%;padding:18px;border-radius:12px;font-weight:700;font-size:1.1rem;color:#fff;border:none;cursor:not-allowed;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;background:#94a3b8}.submit-btn.ready{background:var(--primary)!important;box-shadow:0 4px 16px #3b82f640;cursor:pointer}.submit-btn.ready:hover{background:var(--primary-hover)!important;transform:translateY(-1px)}.submit-btn.ready:active{transform:scale(.98)}.submit-btn:disabled{opacity:.6;background:#94a3b8!important;transform:none!important;box-shadow:none!important;cursor:not-allowed!important}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result-view{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;width:100%;max-width:500px;height:100dvh;background:#fff;box-sizing:border-box;text-align:center}.success-header{margin-bottom:32px;display:flex;flex-direction:column;align-items:center;gap:12px}.success-header h2{margin:0;font-size:1.5rem;color:#0f172a;font-weight:700}.success-header p{margin:0;color:#64748b;font-size:.95rem}.final-document{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px #00000014;width:100%}.final-document img{width:100%;display:block;object-fit:contain}@media (max-width: 480px){.scroll-content{padding:24px 16px}}