@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root{
  --brand:#2e40dd; --brand-2:#4a5cf2; --brand-d:#1f2fb5; --brand-ink:#1a2795;
  --grad:linear-gradient(140deg,#1c2ba6 0%,#2b3dd6 55%,#3a4ef0 100%);
  --grad-ok:linear-gradient(135deg,#10b981,#059669);
  --grad-bad:linear-gradient(135deg,#fb5b78,#e11d48);
  --bg:#f3f5fc; --bg-2:#e9edfb;
  --card:#ffffff; --ink:#111527; --ink-2:#3a4056; --muted:#7a8296; --line:#e7eaf6;
  --ok:#059669; --bad:#e11d48; --warn:#d97706;
  --radius:16px; --radius-sm:11px;
  --sh-sm:0 1px 2px rgba(17,21,39,.05);
  --sh:0 1px 3px rgba(17,21,39,.05), 0 10px 28px -10px rgba(17,21,39,.16);
  --sh-lg:0 18px 48px -14px rgba(46,64,221,.32);
  --ring:0 0 0 4px rgba(46,64,221,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  color:var(--ink);font-size:15px;line-height:1.55;min-height:100vh;
  background:radial-gradient(1200px 600px at 100% -10%,#e3e8ff 0%,rgba(227,232,255,0) 55%),
             radial-gradient(1000px 500px at -10% 0%,#dfe7ff 0%,rgba(223,231,255,0) 50%),
             linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;
}
body.hero{
  background-color:#243499;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='2'%3E%3Crect x='90' y='90' width='80' height='80' transform='rotate(45 130 130)'/%3E%3Crect x='-40' y='-40' width='80' height='80' transform='rotate(45 0 0)'/%3E%3Crect x='220' y='220' width='80' height='80' transform='rotate(45 260 260)'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(150deg,#1a2aa2 0%,#2b3dd6 55%,#3a4ef0 100%);
  background-attachment:fixed;
}
body.hero .topbar{background:transparent;box-shadow:none}
body.hero .wrap>p{color:rgba(255,255,255,.85)}
a{color:var(--brand-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'Plus Jakarta Sans','Inter',sans-serif;letter-spacing:-.02em;margin:0 0 .5em;color:var(--ink);line-height:1.2}
h1{font-size:27px;font-weight:800}h2{font-size:21px;font-weight:700}h3{font-size:16px;font-weight:700}
code{background:#f0f0f8;padding:2px 6px;border-radius:6px;font-size:13px}

.wrap{max-width:1180px;margin:0 auto;padding:28px 24px}
.narrow{max-width:560px}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;color:#fff;
  background-color:#26379f;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Crect x='55' y='55' width='60' height='60' transform='rotate(45 85 85)' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='2'/%3E%3C/svg%3E"),
    linear-gradient(140deg,#1c2ba6 0%,#2b3dd6 55%,#3a4ef0 100%);
  padding:15px 26px;display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 8px 30px -10px rgba(46,64,221,.55);
}
.topbar .brand{font-family:'Plus Jakarta Sans';font-weight:700;font-size:15px;letter-spacing:-.01em;color:#fff;display:flex;align-items:center;gap:11px}
.brandlogo{height:48px;display:block;background:#fff;padding:9px 17px;border-radius:12px;box-shadow:var(--sh-sm);box-sizing:content-box}
.brandsub{opacity:.92;font-weight:600}
.heroLogo{height:68px;display:block;margin:0 auto 16px}
.topbar a{color:#fff;opacity:.92}
.topbar a:hover{opacity:1;text-decoration:none}
.topbar .small{font-size:12.5px;opacity:.9}

/* ---------- cards ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--sh);padding:24px;margin-bottom:20px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--grad);color:#fff;border:none;padding:12px 22px;border-radius:var(--radius-sm);
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  box-shadow:0 6px 16px -6px rgba(46,64,221,.6);transition:transform .12s,box-shadow .12s,opacity .12s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -6px rgba(46,64,221,.66);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.btn.ghost{background:#fff;color:var(--brand-d);border:1.5px solid #e0ddfb;box-shadow:var(--sh-sm)}
.btn.ghost:hover{border-color:var(--brand);background:#faf9ff}
.btn.gray{background:#eef0f7;color:var(--ink-2);box-shadow:none}
.btn.gray:hover{background:#e6e9f4}
.btn.ok{background:var(--grad-ok);box-shadow:0 6px 16px -6px rgba(5,150,105,.6)}
.btn.bad{background:var(--grad-bad);box-shadow:0 6px 16px -6px rgba(225,29,72,.5)}
.btn.sm{padding:8px 15px;font-size:13.5px;border-radius:9px}
.btn.block{width:100%}
.btnspin{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;display:inline-block;animation:spin .7s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
/* lucide icons */
svg.lucide{width:1.05em;height:1.05em;vertical-align:-.16em;stroke-width:2;flex:0 0 auto}
.btn svg.lucide{width:17px;height:17px}
.tool svg.lucide{width:19px;height:19px;color:var(--brand)}
.tabs .tab svg.lucide{width:16px;height:16px;vertical-align:-.2em}
.pill svg.lucide{width:13px;height:13px}
.big-ico{width:54px;height:54px;color:var(--brand);stroke-width:1.6}
/* roomy signing layout — break the sign step out to ~full viewport width on
   ALL devices, independent of the narrow wrap (full-bleed centering). */
.wrap.wide{max-width:1040px;transition:max-width .2s}
#s-sign:not(.hidden){
  position:relative;left:50%;transform:translateX(-50%);
  width:94vw;max-width:1360px;
}
#s-sign .pdfstage{padding:12px;max-height:84vh}
#signStage.fs{position:fixed;inset:0;z-index:80;max-height:100vh;border-radius:0;padding:20px;margin:0;width:100vw;max-width:none;background:#eef0f6}
:fullscreen{background:#eef0f6}
:-webkit-full-screen{background:#eef0f6}
/* consent list + id preview */
.consent-list{list-style:none;padding:0;margin:14px 0}
.consent-list li{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.consent-list li:last-child{border-bottom:none}
.consent-list svg.lucide{width:19px;height:19px;color:var(--brand);flex:0 0 auto}
.idprev{margin-top:10px}
.guide{list-style:none;padding:0;margin:0;counter-reset:g}
.guide li{display:flex;align-items:flex-start;gap:11px;padding:9px 0;font-size:14px;color:var(--ink-2)}
.guide li svg.lucide{width:18px;height:18px;color:var(--brand);flex:0 0 auto;margin-top:1px}
.pdfchip{display:inline-flex;align-items:center;gap:9px;background:#f2f1ff;border:1px solid #e2ddfb;color:var(--brand-ink);padding:11px 15px;border-radius:11px;font-weight:600;font-size:14px}
.pdfchip svg.lucide{width:20px;height:20px}
/* toasts */
.toaster{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:160;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:calc(100% - 32px);max-width:440px}
.toast{background:#0f1424;color:#fff;padding:13px 18px;border-radius:13px;font-weight:600;font-size:15px;box-shadow:0 14px 38px -10px rgba(0,0,0,.55);display:flex;align-items:center;gap:11px;opacity:0;transform:translateY(-12px);animation:toastIn .25s forwards;max-width:100%}
.toast.out{animation:toastOut .3s forwards}
.toast .tico{color:#8fb0ff;width:20px;height:20px;flex:0 0 auto}
@keyframes toastIn{to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-14px)}}

/* ---------- forms ---------- */
label{display:block;font-weight:600;margin:16px 0 7px;font-size:13.5px;color:var(--ink-2)}
input[type=text],input[type=email],input[type=tel],input[type=password],textarea,select{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-size:16px;font-family:inherit;background:#fff;color:var(--ink);transition:border-color .12s,box-shadow .12s}
textarea{min-height:82px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
input[type=file]{width:100%;font-size:14px;padding:11px;border:1.5px dashed var(--line);border-radius:var(--radius-sm);background:#fbfbff}
input::placeholder,textarea::placeholder{color:#aab0c0}

/* ---------- layout helpers ---------- */
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>*{flex:1;min-width:180px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.flex{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:13px}
.hidden{display:none!important}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.01em}
.pill.gray{background:#eef0f7;color:#5a6172}
.pill.blue{background:#e7e9ff;color:#4338ca}
.pill.green{background:#d8f5e6;color:#0f7a4d}
.pill.red{background:#ffe1e7;color:#b91142}
.pill.amber{background:#fdeecb;color:#96590a}

/* ---------- notes ---------- */
.note{background:#f2f1ff;border:1px solid #e2ddfb;color:#4130a8;padding:13px 15px;border-radius:var(--radius-sm);font-size:14px}
.note.warn{background:#fff8ec;border-color:#fbe3b3;color:#8a5a08}
.note.err{background:#fff0f3;border-color:#fcccd6;color:#a5153f}
.note.ok{background:#e9fbf2;border-color:#bff0d6;color:#0c7346}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);font-size:14px}
th{background:#f8f9fe;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:#8189a0;font-weight:700}
tbody tr{transition:background .12s}
tr:hover td{background:#faf9ff}
tr:last-child td{border-bottom:none}

/* ---------- stepper ---------- */
.steps{display:flex;gap:7px;margin:0 0 24px;flex-wrap:wrap;background:#fff;padding:8px;border-radius:14px;border:1px solid var(--line);box-shadow:var(--sh-sm)}
.step{flex:1;min-width:82px;text-align:center;padding:10px 6px;border-radius:10px;background:transparent;color:#9aa1b4;font-size:12.5px;font-weight:600;transition:.15s}
.step.active{background:var(--grad);color:#fff;box-shadow:0 6px 14px -6px rgba(46,64,221,.6)}
.step.done{background:#e9fbf2;color:#0f7a4d}
.step.done::before{content:'✓ '}

/* ---------- pdf editor ---------- */
.editor{display:grid;grid-template-columns:248px 1fr;gap:20px}
.palette .tool{display:flex;align-items:center;gap:9px;padding:12px 13px;border:1.5px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;cursor:grab;background:#fff;font-weight:600;font-size:14px;transition:.12s;box-shadow:var(--sh-sm)}
.palette .tool:hover{border-color:var(--brand);background:#faf9ff;transform:translateY(-1px)}
.palette .tool.sel{border-color:transparent;background:var(--grad);color:#fff}
.pdfstage{background:#4a4d63;border-radius:14px;padding:18px;overflow:auto;max-height:78vh;box-shadow:inset 0 2px 14px rgba(0,0,0,.28)}
.pageWrap{position:relative;margin:0 auto 16px;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.32);border-radius:4px}
.pageWrap canvas{display:block;border-radius:4px}
.fld{position:absolute;border:1.5px dashed var(--brand);background:rgba(109,94,252,.13);border-radius:6px;cursor:move;font-size:11px;color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-weight:700;user-select:none;overflow:hidden;touch-action:none;backdrop-filter:blur(1px)}
.fld .del{position:absolute;top:-9px;right:-9px;background:var(--bad);color:#fff;border-radius:50%;width:19px;height:19px;font-size:12px;line-height:19px;text-align:center;cursor:pointer;box-shadow:var(--sh-sm)}
.fld .rsz{position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;background:var(--brand);border-radius:3px;cursor:nwse-resize}
.fld.filled{border-style:solid;background:rgba(16,185,129,.12);border-color:var(--ok);color:#0c7346}
.fld .fassign{position:absolute;top:-19px;left:0;max-width:150px;font-size:10.5px;font-weight:600;border:1px solid var(--brand);border-radius:5px;background:#fff;color:var(--brand-ink);padding:1px 3px;cursor:pointer;z-index:6;line-height:1.3}
.fld .lbl{pointer-events:none}

/* ---------- camera / liveness ---------- */
.cambox{position:relative;width:100%;max-width:420px;margin:16px auto;border-radius:18px;overflow:hidden;background:#0b0d16;aspect-ratio:4/3;box-shadow:0 14px 40px -12px rgba(11,13,22,.5);border:3px solid #fff}
.cambox video,.cambox canvas{width:100%;display:block}
#liveVideo{width:100%;transform:scaleX(-1)}
.live-prompt{font-family:'Plus Jakarta Sans';font-size:19px;font-weight:700;text-align:center;margin:12px 0}
.ring{width:13px;height:13px;border-radius:50%;background:#cfd4e2;display:inline-block;transition:.2s}
.ring.on{background:var(--ok);box-shadow:0 0 0 4px rgba(5,150,105,.18)}
.thumbs{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.thumbs img{width:74px;height:74px;object-fit:cover;border-radius:10px;border:2px solid var(--ok);box-shadow:var(--sh-sm)}

/* ---------- signature ---------- */
.sigpad{border:2px dashed #d7dbea;border-radius:14px;background:#fff;touch-action:none;width:100%;height:200px}
.tabs{display:flex;gap:8px;margin-bottom:14px;background:#f1f2f9;padding:5px;border-radius:12px}
.tabs .tab{flex:1;text-align:center;padding:10px 12px;border-radius:9px;cursor:pointer;font-weight:600;font-size:14px;color:var(--ink-2);transition:.12s}
.tabs .tab.active{background:#fff;color:var(--brand-d);box-shadow:var(--sh-sm)}
.fontpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.fontpick .fopt{border:1.5px solid var(--line);border-radius:11px;padding:14px;text-align:center;cursor:pointer;font-size:27px;color:var(--ink);transition:.12s}
.fontpick .fopt:hover{border-color:#cdc7fb}
.fontpick .fopt.active{border-color:var(--brand);background:#faf9ff;box-shadow:var(--ring)}
.f-dancing{font-family:'Dancing Script',cursive}
.f-greatvibes{font-family:'Great Vibes',cursive}
.f-caveat{font-family:'Caveat',cursive}
.f-sacramento{font-family:'Sacramento',cursive}
.f-pacifico{font-family:'Pacifico',cursive}

/* ---------- misc components ---------- */
.dropzone{border:2px dashed #d3d8ea;border-radius:14px;padding:34px;text-align:center;color:var(--muted);cursor:pointer;background:#fbfbff;transition:.15s}
.dropzone:hover{border-color:var(--brand);background:#faf9ff}
.dropzone.drag{border-color:var(--brand);background:#f3f1ff}
.linkbox{display:flex;gap:8px;margin-top:10px}
.linkbox input{font-family:'Inter',monospace;font-size:13px;background:#f8f9fe}
.kv{display:grid;grid-template-columns:170px 1fr;gap:9px 16px;font-size:14px}
.kv b{color:var(--ink-2);font-weight:600}
.filegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.filegrid a{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--sh-sm);transition:.12s}
.filegrid a:hover{transform:translateY(-2px);box-shadow:var(--sh);text-decoration:none}
.filegrid img{width:100%;height:130px;object-fit:cover;display:block}
.filegrid .cap{padding:8px 11px;font-size:12px;font-weight:600;color:var(--ink-2)}
.timeline{border-left:2px solid var(--line);padding-left:18px;margin-left:6px}
.timeline .ev{position:relative;padding:7px 0}
.timeline .ev::before{content:'';position:absolute;left:-25px;top:12px;width:11px;height:11px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.map{width:100%;height:220px;border:0;border-radius:12px;box-shadow:var(--sh-sm)}

/* ---------- recording UI ---------- */
.recdot{width:11px;height:11px;border-radius:50%;background:var(--bad);display:inline-block;animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.25}}
#recPreview{position:fixed;right:16px;bottom:16px;width:136px;border-radius:14px;overflow:hidden;box-shadow:0 14px 40px -8px rgba(0,0,0,.4);z-index:60;background:#000;border:2px solid #fff}
#recPreview video{width:100%;display:block;transform:scaleX(-1)}
#recPreview .recbadge{position:absolute;top:7px;left:7px;background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;display:flex;align-items:center;gap:5px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .editor{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .palette{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
  .palette .tool{margin-bottom:0;white-space:nowrap;flex:0 0 auto}
  .palette hr,.palette label,.palette p{display:none}
  .palette #assignTo{flex:1 0 160px}
}
@media(max-width:640px){
  .wrap{padding:16px 14px}
  .card{padding:18px;border-radius:14px}
  .topbar{padding:13px 15px;flex-wrap:wrap;gap:6px}
  .topbar .brand{font-size:16px}
  .brandlogo{height:38px;padding:7px 13px}
  .topbar .small{font-size:11.5px;width:100%}
  h1{font-size:23px}h2{font-size:19px}
  .steps{gap:4px;padding:6px}
  .step{min-width:0;flex:1;padding:9px 3px;font-size:10.5px}
  .row{gap:11px}.row>*{min-width:100%}
  .btn{padding:13px 20px;font-size:16px;width:100%}
  .btn.sm{padding:9px 14px;font-size:14px;width:auto}
  .flex .btn,.linkbox .btn{width:auto}
  .pdfstage{padding:10px;max-height:70vh}
  .linkbox{flex-wrap:wrap}
  .linkbox input{min-width:100%}
  .fontpick{grid-template-columns:repeat(2,1fr)}
  .filegrid{grid-template-columns:repeat(2,1fr)}
  .cambox{max-width:100%}
  .sigpad{height:180px}
  #recPreview{width:106px;right:10px;bottom:10px}
  #sigModal .card{max-height:92vh;overflow:auto}
}
@media(pointer:coarse){
  .fld .del{width:26px;height:26px;font-size:15px;line-height:26px;top:-13px;right:-13px}
  .fld .rsz{width:22px;height:22px;right:-7px;bottom:-7px}
}