:root{--green-50: #f0fdf4;--green-100: #dcfce7;--green-200: #bbf7d0;--green-400: #4ade80;--green-500: #22c55e;--green-600: #16a34a;--green-700: #15803d;--white: #ffffff;--ink: #0f172a;--muted: #64748b;--line: #e2e8f0;--danger: #dc2626;--gradient: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);--shadow: 0 8px 30px rgba(15, 23, 42, .08);--radius: 16px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Heebo,system-ui,sans-serif;color:var(--ink);background:var(--green-50);-webkit-font-smoothing:antialiased}a{color:var(--green-600)}button{font-family:inherit;cursor:pointer}img{max-width:100%;display:block}.topbar{background:var(--gradient);color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar .brand{font-weight:800;font-size:20px;letter-spacing:.5px}.container{max-width:900px;margin:0 auto;padding:24px 16px 64px}.center-screen{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.card+.card{margin-top:16px}h1{font-size:26px;font-weight:800}h2{font-size:20px;font-weight:700}.muted{color:var(--muted)}label{display:block;font-weight:600;margin-bottom:6px;font-size:15px}input[type=text],input[type=email]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:16px;background:#fff}input:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px #22c55e26}.field{margin-bottom:18px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;background:var(--gradient);color:#fff;font-weight:700;font-size:16px;padding:14px 22px;border-radius:12px;transition:transform .15s ease,box-shadow .15s ease,opacity .15s}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px #22c55e4d}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.btn.block{width:100%}.btn.secondary{background:#fff;color:var(--green-700);border:1.5px solid var(--green-200)}.btn.ghost{background:transparent;color:var(--green-700);border:1.5px solid transparent}.btn.small{font-size:14px;padding:8px 14px}.error{color:var(--danger);font-size:14px;margin-top:8px}.notice{background:var(--green-100);border:1px solid var(--green-200);color:var(--green-700);padding:12px 14px;border-radius:10px;font-size:14px}.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}.pill.sent{background:#f1f5f9;color:#475569}.pill.viewed{background:#fef9c3;color:#854d0e}.pill.signed{background:var(--green-100);color:var(--green-700)}.quote-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.quote-row:last-child{border-bottom:none}.quote-row .meta{min-width:0}.quote-row .title{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-actions{display:flex;gap:8px;flex-shrink:0}.viewer{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px;max-height:70vh;overflow:auto}.doc-page{position:relative;margin:0 auto 12px;background:#fff;box-shadow:0 2px 10px #0000001f}.doc-page:last-child{margin-bottom:0}.doc-page canvas,.doc-page img{display:block;width:100%;height:auto}.sig-box{position:absolute;border:2px dashed var(--green-600);border-radius:10px;display:flex;align-items:center;justify-content:center;touch-action:none}.sig-box.admin{border-color:#3b82f6;background:#3b82f61a}.sig-box.client{border-color:var(--green-600);background:#22c55e1a}.sig-box.draggable{cursor:grab}.sig-box .sig-tag{background:#fff;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 1px 4px #00000026}.sig-box.admin .sig-tag{color:#2563eb}.sig-box.client .sig-tag{color:var(--green-700)}.sig-box .resize-handle{position:absolute;right:-7px;bottom:-7px;width:16px;height:16px;background:var(--green-600);border:2px solid #fff;border-radius:50%;cursor:nwse-resize}.sig-box.admin .resize-handle{background:#2563eb}.sig-box img{width:100%;height:100%;object-fit:contain}.page-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}.page-control{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:13px;font-weight:600}.page-control button{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--green-50);color:var(--green-700);font-size:16px;line-height:1}.page-control button:disabled{opacity:.4;cursor:not-allowed}.sig-box.signable{border:2px dashed var(--green-500);background:#22c55e12;cursor:pointer;animation:sigpulse 1.8s ease-in-out infinite}.sig-box.signable.done{animation:none;border:1px solid var(--green-200);background:transparent}.sign-pill{background:var(--gradient);color:#fff;font-weight:700;font-size:14px;padding:8px 16px;border-radius:999px;box-shadow:0 4px 14px #22c55e66;display:inline-flex;align-items:center;gap:6px;pointer-events:none}.sig-box.readonly{border:none;background:transparent}@keyframes sigpulse{0%,to{box-shadow:0 0 #22c55e59}50%{box-shadow:0 0 0 8px #22c55e00}}.sigpad-tabs{display:flex;gap:8px;margin-bottom:12px}.sigpad-tabs button{flex:1;padding:10px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-weight:600}.sigpad-tabs button.active{border-color:var(--green-500);background:var(--green-50);color:var(--green-700)}.sigpad-canvas{width:100%;height:200px;border:2px solid var(--line);border-radius:12px;background:#fff;touch-action:none}.type-preview{height:120px;border:2px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--ink)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:0}.sheet{background:#fff;width:100%;max-width:560px;border-radius:20px 20px 0 0;padding:20px;max-height:90vh;overflow:auto}@media (min-width: 640px){.overlay{align-items:center}.sheet{border-radius:20px}}.spinner{width:26px;height:26px;border:3px solid var(--green-200);border-top-color:var(--green-600);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.checkbox-row{display:flex;gap:10px;align-items:flex-start;font-size:15px}.checkbox-row input{margin-top:3px;width:20px;height:20px;flex-shrink:0}