:root{--ink:#14213d;--brand:#0f766e;--brand2:#14b8a6;--acc:#f59e0b;--bg:#f6f7fb;--line:#e3e6ee;--mut:#6b7280;--r:12px}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--brand)}button,.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 14px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.p,button.p{background:var(--brand);color:#fff;border-color:var(--brand)}.btn.p:hover{background:#0b5e58}.btn.lg{padding:13px 22px;font-size:16px;font-weight:600}
.demo-banner{background:#fef3c7;color:#92400e;text-align:center;font-size:12px;padding:5px}
.top{display:flex;align-items:center;gap:20px;padding:12px 24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.logo{font-weight:800;font-size:20px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.mark{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:Caveat;font-size:24px}
#nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}#nav a{padding:7px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:14px}#nav a.on,#nav a:hover{background:#ecfdf5;color:var(--brand)}
.burger{display:none}
main{max-width:1240px;margin:0 auto;padding:24px}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:40px 0}
.hero h1{font-size:52px;line-height:1.05;margin:0 0 16px;letter-spacing:-1.5px}.hero h1 em{font-style:normal;color:var(--brand);font-family:Caveat;font-size:64px}
.hero p{font-size:18px;color:var(--mut)}
.mock{background:#fff;border-radius:16px;box-shadow:0 20px 50px #14213d22;padding:20px;transform:rotate(1.5deg)}
.mock .ln{height:8px;background:#eef0f5;border-radius:4px;margin:9px 0}.mock .sg{border:2px dashed var(--brand2);border-radius:8px;padding:10px;font-family:Caveat;font-size:30px;color:#1e3a8a;margin-top:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card h3{margin:0 0 6px}.card p{color:var(--mut);margin:0;font-size:14px}.ic{font-size:26px;margin-bottom:8px}
h2.sec{font-size:32px;text-align:center;margin:50px 0 24px}
.price{text-align:center}.price .amt{font-size:42px;font-weight:800}.price ul{text-align:left;padding-left:18px;color:var(--mut);font-size:14px;line-height:1.8}.price.hot{border:2px solid var(--brand)}
.toggle{display:flex;justify-content:center;gap:8px;margin-bottom:18px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}th{background:#f1f5f9;cursor:pointer;user-select:none;white-space:nowrap}th:after{content:" ⇅";color:#94a3b8;font-size:11px}th.asc:after{content:" ▲"}th.desc:after{content:" ▼"}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.pill{display:inline-block;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:600}
.s-draft{background:#f1f5f9;color:#475569}.s-sent,.s-waiting{background:#fef3c7;color:#92400e}.s-completed{background:#dcfce7;color:#166534}.s-declined,.s-expired{background:#fee2e2;color:#991b1b}.s-viewed{background:#dbeafe;color:#1e40af}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sp{flex:1}
.kpi .v{font-size:28px;font-weight:800}.kpi .l{color:var(--mut);font-size:13px}
.editor{display:grid;grid-template-columns:230px 1fr 260px;gap:16px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;position:sticky;top:80px;max-height:calc(100vh - 100px);overflow:auto}
.panel h4{margin:6px 0 8px;font-size:12px;text-transform:uppercase;color:var(--mut);letter-spacing:.5px}
.ftool{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px dashed var(--line);border-radius:8px;margin-bottom:6px;cursor:grab;background:#fafafa;font-size:14px;touch-action:none}
.ftool:hover{border-color:var(--brand)}
.pages{display:flex;flex-direction:column;align-items:center;gap:16px}
.page{position:relative;background:#fff;box-shadow:0 4px 18px #0002;max-width:100%}.page canvas{display:block;width:100%;height:auto}
.fld{position:absolute;border:2px solid;border-radius:4px;font-size:11px;display:flex;align-items:center;justify-content:center;cursor:move;overflow:hidden;touch-action:none;user-select:none}
.fld .x{position:absolute;top:-1px;right:1px;cursor:pointer;font-weight:700}.fld.sel{outline:2px solid #111}
.fld .rs{position:absolute;right:0;bottom:0;width:10px;height:10px;cursor:nwse-resize;background:currentColor;opacity:.5}
.fld.fill{cursor:pointer}.fld.done{border-style:solid;background:transparent!important}.fld.cur{animation:pulse 1s infinite}
.fld img{max-width:100%;max-height:100%}.fld input[type=text]{width:100%;height:100%;border:0;background:transparent;font-size:12px}
@keyframes pulse{50%{box-shadow:0 0 0 5px #f59e0b88}}
.signer{display:flex;gap:6px;align-items:center;margin-bottom:6px}.signer input,.signer select{width:100%;padding:5px;border:1px solid var(--line);border-radius:6px;font-size:12px}
.dot{width:12px;height:12px;border-radius:50%;flex:none}
input,select,textarea{font:inherit;padding:8px;border:1px solid var(--line);border-radius:8px}
label.f{display:block;font-size:13px;margin:8px 0 3px;color:var(--mut)}
.modal{position:fixed;inset:0;background:#0007;display:grid;place-items:center;z-index:50}.hidden{display:none}
.mbox{background:#fff;border-radius:16px;padding:22px;width:min(560px,94vw);max-height:90vh;overflow:auto}
.tabs{display:flex;gap:4px;margin-bottom:10px}.tabs button.on{background:var(--ink);color:#fff}
#sigpad{border:1px dashed #94a3b8;border-radius:8px;width:100%;height:170px;touch-action:none;background:#fcfcff}
.typed{font-size:40px;padding:10px;border-bottom:1px solid var(--line)}
.signbar{position:sticky;top:64px;z-index:10;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r);display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.signbar button{border:0}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:99px;opacity:0;transition:.3s;pointer-events:none;z-index:60}.toast.show{opacity:1}
.tl{border-left:2px solid var(--line);margin-left:6px;padding-left:16px}.tl div{position:relative;padding:4px 0;font-size:13px}.tl div:before{content:"";position:absolute;left:-22px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--brand2)}
.cert{background:#fff;max-width:820px;margin:auto;padding:40px;border:1px solid var(--line);border-top:6px solid var(--brand)}
.mono{font-family:ui-monospace,monospace;font-size:11px;word-break:break-all}
.bar{display:flex;align-items:flex-end;gap:10px;height:140px}.bar div{flex:1;background:linear-gradient(var(--brand2),var(--brand));border-radius:6px 6px 0 0;position:relative}.bar span{position:absolute;bottom:-18px;width:100%;text-align:center;font-size:11px;color:var(--mut)}
footer{text-align:center;color:var(--mut);font-size:13px;padding:40px}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero h1{font-size:38px}.grid3,.grid4{grid-template-columns:1fr 1fr}.editor{grid-template-columns:1fr}.panel{position:static;max-height:none}
.burger{display:block;margin-left:auto}#nav{display:none;position:absolute;top:56px;left:0;right:0;background:#fff;flex-direction:column;padding:10px;border-bottom:1px solid var(--line)}body.navopen #nav{display:flex}
.ftools{display:flex;flex-wrap:wrap;gap:6px}.ftool{margin:0}}
@media(max-width:560px){.grid3,.grid4{grid-template-columns:1fr}main{padding:14px}}
.panel input:not([type=checkbox]),.panel select,.panel textarea{max-width:100%;min-width:0}.signer select{width:auto;flex:none}.editor>*{min-width:0}
.dz{border:3px dashed #94a3b8;border-radius:16px;background:#fff;text-align:center;padding:44px 20px;margin-bottom:20px;transition:.15s}.dz.over{border-color:var(--brand);background:#ecfdf5}.dz p{color:var(--mut)}
#dropov{position:fixed;inset:0;background:#0f766ecc;z-index:80;display:none;place-items:center;pointer-events:none}#dropov.on{display:grid}#dropov div{border:4px dashed #fff;border-radius:24px;padding:60px 80px;color:#fff;font-size:32px;font-weight:800}
.pages.placing .page{cursor:crosshair}.fld.ghost{opacity:.6;pointer-events:none;border-style:dashed;z-index:5}
#hint{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 16px;border-radius:99px;font-size:13px;z-index:70}
.fld .h{position:absolute;background:#fff;border:2px solid currentColor;border-radius:3px;z-index:2}.fld .hl,.fld .hr{top:50%;width:8px;height:16px;margin-top:-8px;cursor:ew-resize}.fld .hl{left:-1px}.fld .hr{right:-1px}.fld .ht{left:50%;top:-1px;width:16px;height:8px;margin-left:-8px;cursor:ns-resize}.fld.sel{overflow:visible}
.asig{display:flex;align-items:center;gap:6px;margin-top:4px;min-height:22px}.asig img{height:24px;max-width:120px;object-fit:contain;object-position:left}.asig img[src=""]{display:none}.asig small{color:var(--mut);font-size:11px}
.genopt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin:6px 0;cursor:pointer}.genopt.on{border-color:var(--brand);background:#ecfdf5}.genopt img{height:48px;max-width:62%;object-fit:contain}.genopt img.ini{height:40px;max-width:22%}.genopt small{margin-left:auto;color:var(--mut)}
.meter{font-size:13px;background:#ecfdf5;color:var(--brand);border-radius:99px;padding:6px 10px;text-decoration:none;font-weight:600}
.auth{max-width:460px;margin:12px auto}
.note{font-size:12px;color:var(--mut);margin:6px 0 0}
.banner{background:#ecfdf5;border:1px solid #99f6e4;border-radius:12px;padding:12px 14px;margin-bottom:16px}