:root{--navy:#0a1830;--navy2:#132846;--gold:#eab62d;--ink:#122033;--muted:#607087;--line:#dbe3ec;--paper:#fff;--bg:#f3f6fa;--blue:#2866d4;--green:#16865c;--red:#c8323c;--amber:#a66700;--shadow:0 12px 32px rgba(18,32,51,.10);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.boot{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:14px}
.brand-mark{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#ffd95c,#d89800);color:#07162d;font-weight:900;box-shadow:0 8px 24px rgba(219,160,0,.28)}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(340px,470px) 1fr}
.auth-panel{background:#fff;padding:48px;display:flex;flex-direction:column;justify-content:center;box-shadow:14px 0 34px rgba(13,29,52,.08);z-index:2}
.auth-hero{padding:7vw;background:radial-gradient(circle at 65% 25%,#274f7b 0,#0c1f3b 42%,#071426 100%);color:#fff;display:flex;align-items:center}
.auth-hero h1{font-size:clamp(34px,5vw,66px);line-height:1.02;max-width:820px;margin:0}
.auth-hero p{max-width:690px;font-size:18px;color:#c9d7e9;line-height:1.7}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:38px}
.brand strong{font-size:22px}
.brand small{display:block;color:var(--muted);margin-top:2px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.panel{padding:22px}
.stack{display:grid;gap:15px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#44536a}
input,select,textarea{width:100%;border:1px solid #cfd9e5;border-radius:10px;background:#fff;color:var(--ink);padding:11px 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(40,102,212,.12)}
textarea{min-height:84px;resize:vertical}
.btn{border:0;border-radius:10px;padding:10px 15px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#16335b}
.btn-blue{background:var(--blue);color:#fff}
.btn-green{background:var(--green);color:#fff}
.btn-danger{background:#fff0f0;color:var(--red);border:1px solid #f0c9cd}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-small{font-size:12px;padding:7px 10px}
.btn:disabled{opacity:.48;cursor:not-allowed}
.legal{font-size:11px;color:var(--muted);line-height:1.55}
.app{min-height:100vh;display:grid;grid-template-columns:250px 1fr}
.sidebar{background:var(--navy);color:#fff;min-height:100vh;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:20px 14px}
.sidebar .brand{margin:0 8px 28px}
.sidebar .brand small{color:#a8bbd1}
.nav{display:grid;gap:5px}
.nav button{border:0;background:transparent;color:#c7d4e4;text-align:left;padding:11px 12px;border-radius:10px;font-weight:650}
.nav button:hover,.nav button.active{background:#203b5e;color:#fff}
.sidebar-bottom{margin-top:auto;border-top:1px solid #29415f;padding:16px 9px 0}
.sidebar-bottom strong{font-size:13px}
.sidebar-bottom small{display:block;color:#a8bbd1;margin:3px 0 12px}
.content{min-width:0}
.topbar{height:74px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20}
.topbar h1{font-size:20px;margin:0}
.topbar .meta{font-size:12px;color:var(--muted)}
main{padding:26px;max-width:1500px;margin:auto}
.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}
.page-head h2{margin:0 0 5px;font-size:28px}
.page-head p{margin:0;color:var(--muted)}
.metrics{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:12px;margin-bottom:22px}
.metric{padding:17px;border-top:4px solid var(--blue)}
.metric strong{display:block;font-size:27px}
.metric span{font-size:12px;color:var(--muted)}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 13px;border-bottom:1px solid var(--line);font-size:13px;text-align:left;vertical-align:middle}
.table th{background:#f7f9fc;color:#405069;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.table tr:hover td{background:#fbfcfe}
.status{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.status-draft{background:#fff4cf;color:#7a5100}
.status-sent,.status-in_progress{background:#eaf1ff;color:#2455aa}
.status-completed{background:#e4f7ef;color:#13724e}
.status-declined,.status-voided,.status-expired{background:#fde8ea;color:#a5212d}
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.notice{border-radius:12px;padding:12px 14px;font-size:12px;line-height:1.55;background:#eaf2ff;border:1px solid #c7dafe;color:#204f9c}
.warning{background:#fff4df;border-color:#ecd09c;color:#825000}
.danger{background:#fff0f1;border-color:#efc8cc;color:#98222d}
.envelope-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:18px;align-items:start}
.document-stage{background:#cbd4df;border-radius:16px;padding:18px;min-height:650px;overflow:auto}
.pdf-page{position:relative;margin:0 auto 18px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18);width:min(100%,860px);line-height:0}
.pdf-page canvas{width:100%;height:auto}
.field{position:absolute;border:2px solid var(--field,#2866d4);background:color-mix(in srgb,var(--field,#2866d4) 12%,transparent);border-radius:5px;line-height:1.15;font-size:10px;padding:4px;color:#10213a;overflow:hidden;cursor:pointer}
.field.pending.required:after{content:'Required';position:absolute;right:3px;bottom:2px;font-size:8px;color:#52647b}
.field.signed{background:#ddf8ec;border-color:var(--green)}
.builder-side{position:sticky;top:92px;display:grid;gap:14px;max-height:calc(100vh - 112px);overflow:auto}
.recipient{border:1px solid var(--line);border-left:5px solid var(--recipient,#2866d4);border-radius:11px;padding:11px;background:#fff;display:grid;gap:5px}
.recipient.selected{box-shadow:0 0 0 3px rgba(40,102,212,.15);border-color:var(--recipient)}
.recipient strong{font-size:13px}
.recipient small{color:var(--muted)}
.toolbar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tool{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 4px;font-size:10px;font-weight:750}
.tool.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.page-label{background:#0d223e;color:#fff;padding:8px 12px;font-size:11px;line-height:1;display:flex;justify-content:space-between}
.modal-backdrop{position:fixed;inset:0;background:rgba(4,13,27,.58);display:grid;place-items:center;padding:20px;z-index:50}
.modal{width:min(620px,100%);max-height:90vh;overflow:auto}
.modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:16px 20px}
.modal-head h3{margin:0}
.modal-body{padding:20px}
.close{border:0;background:#eef2f6;border-radius:50%;width:30px;height:30px}
.sign-shell{min-height:100vh;background:#e5ebf2}
.sign-head{height:72px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:30}
.sign-head .brand{margin:0}
.sign-head .brand small{color:#b7c8da}
.sign-main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;max-width:1600px;margin:auto}
.sign-document{padding:24px;background:#cbd4df;min-height:calc(100vh - 72px);overflow:auto}
.sign-side{background:#fff;border-left:1px solid var(--line);padding:20px;position:sticky;top:72px;height:calc(100vh - 72px);overflow:auto}
.progress{height:8px;border-radius:20px;background:#e7ecf2;overflow:hidden}
.progress div{height:100%;background:var(--green)}
.focused{animation:pulse 1.4s ease-in-out infinite;z-index:5}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(234,182,45,.36)}
}
.signature-preview{height:92px;border:1px dashed #bdcad8;border-radius:10px;background:#fafcff;display:grid;place-items:center;font-family:cursive;font-size:28px;overflow:hidden}
.signature-preview img{max-height:86px;max-width:100%}
.draw-pad{width:100%;height:150px;border:1px solid var(--line);border-radius:10px;background:#fff;touch-action:none}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(30px);background:#10213a;color:#fff;border-radius:999px;padding:11px 18px;opacity:0;pointer-events:none;transition:.2s;z-index:100;font-size:13px;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.code-box{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:#f4f6f9;border:1px solid var(--line);border-radius:9px;padding:9px;word-break:break-all;font-size:11px}
.invite{border:1px solid var(--line);border-radius:12px;padding:13px;display:grid;gap:8px}
.hidden{display:none!important}
@media(max-width:1050px){.metrics{grid-template-columns:repeat(3,1fr)}
.envelope-layout{grid-template-columns:1fr}
.builder-side{position:static;max-height:none}
.sign-main{grid-template-columns:1fr}
.sign-side{position:static;height:auto;border-left:0}
.auth-shell{grid-template-columns:1fr}
.auth-hero{display:none}
}
@media(max-width:720px){.app{grid-template-columns:1fr}
.sidebar{position:static;height:auto;min-height:auto}
.nav{grid-template-columns:repeat(3,1fr)}
.nav button{text-align:center;font-size:11px}
.sidebar-bottom{display:block}
.topbar{position:static;padding:0 16px}
main{padding:16px}
.grid2,.grid3{grid-template-columns:1fr}
.metrics{grid-template-columns:repeat(2,1fr)}
.page-head{display:grid}
.auth-panel{padding:28px}
.sign-head{height:auto;padding:12px}
.sign-document{padding:10px}
.sign-side{padding:16px}
}
.pdf-sheet{margin:0 auto 18px;width:min(100%,860px)}
.pdf-sheet>.pdf-page{margin:0;width:100%}
.recipient{cursor:pointer;text-align:left}
.recipient-actions{display:flex;gap:5px;margin-top:5px}

.field.optional:after{content:"Optional";font-size:8px}
.page-head,.recipient,.sign-side{overflow-wrap:anywhere}
@font-face{font-family:IrioOblique;src:url('/fonts/Oblique.ttf')}@font-face{font-family:IrioSerif;src:url('/fonts/Serif.ttf')}@font-face{font-family:IrioMono;src:url('/fonts/Mono.ttf')}
.product-footer{font-size:9px;line-height:1.5;color:#738095;text-align:center;padding:14px 22px}.field-hint{display:block;font-size:clamp(6px,.65vw,10px);font-weight:400;line-height:1.3;margin-top:4px}.archive-actions{display:flex;gap:6px;flex-wrap:wrap}.archive-filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:18px}.archive-filters input,.archive-filters select{width:100%}@media(max-width:700px){.archive-filters{grid-template-columns:1fr}.archive-actions{min-width:130px}}
.signature-preview,.field{font-kerning:none;font-feature-settings:'liga' 0,'calt' 0,'kern' 0}

@font-face{font-family:IrioAllura;src:url(/fonts/Allura.ttf) format("truetype");font-display:block;}
@font-face{font-family:IrioAlexBrush;src:url(/fonts/AlexBrush.ttf) format("truetype");font-display:block;}
@font-face{font-family:IrioGreatVibes;src:url(/fonts/GreatVibes.ttf) format("truetype");font-display:block;}
@font-face{font-family:IrioSacramento;src:url(/fonts/Sacramento.ttf) format("truetype");font-display:block;}
@font-face{font-family:IrioParisienne;src:url(/fonts/Parisienne.ttf) format("truetype");font-display:block;}
@font-face{font-family:IrioYellowtail;src:url(/fonts/Yellowtail.ttf) format("truetype");font-display:block;}
@font-face{font-family:IrioDancingScript;src:url(/fonts/DancingScript.ttf) format("truetype");font-display:block;}
@font-face{font-family:IrioSatisfy;src:url(/fonts/Satisfy.ttf) format("truetype");font-display:block;}
@font-face{font-family:IrioCookie;src:url(/fonts/Cookie.ttf) format("truetype");font-display:block;}
@font-face{font-family:IrioCourgette;src:url(/fonts/Courgette.ttf) format("truetype");font-display:block;}
@font-face{font-family:IrioKalam;src:url(/fonts/Kalam.ttf) format("truetype");font-display:block;}
@font-face{font-family:IrioHandlee;src:url(/fonts/Handlee.ttf) format("truetype");font-display:block;}
/* V10.05: customer identity is separate from vendor branding. */
.vendor-wordmark{font-size:12px;letter-spacing:.5px;min-width:48px}.customer-identity{text-align:right;max-width:340px;border-left:2px solid var(--line);padding-left:18px}.customer-identity strong{display:block;font-size:13px;color:var(--ink)}.customer-identity small{display:block;font-size:10px;line-height:1.4;white-space:pre-line;max-height:42px;overflow:auto}.topbar{height:auto;min-height:74px;gap:15px;padding-top:10px;padding-bottom:10px}.sidebar{overflow-y:auto}.metric{text-align:left;font:inherit;color:var(--ink)}.metric.selected{background:var(--navy2);color:#fff;outline:3px solid var(--gold)}.metric.selected span{color:#fff}.table-wrap{resize:both;min-height:100px;max-height:65vh;max-width:100%;min-width:180px;overflow:auto}.table th{position:sticky;top:0;z-index:1;background:var(--paper);resize:horizontal;overflow:auto;min-width:90px}.draggable{touch-action:none;cursor:move}.field-resizer{position:absolute;right:0;bottom:0;width:16px;height:16px;background:var(--field);clip-path:polygon(100% 0,100% 100%,0 100%);cursor:nwse-resize;z-index:3}.field:after{pointer-events:none}.signature-preview{overflow:hidden;white-space:nowrap}.product-footer{clear:both}.content{min-width:0}
:root[data-theme=teal]{--navy:#082c32;--navy2:#12474b;--blue:#147b82;--gold:#f3c75a}
:root[data-theme=slate]{--navy:#18222f;--navy2:#334457;--blue:#476992;--gold:#eab62d}
:root[data-mode=dark]{color-scheme:dark;--paper:#182639;--bg:#0d1726;--ink:#edf3fb;--muted:#b7c5d8;--line:#3b4c62;--shadow:0 12px 32px #0003}
[data-mode=dark] .topbar,[data-mode=dark] .auth-panel,[data-mode=dark] .modal,[data-mode=dark] input,[data-mode=dark] select,[data-mode=dark] textarea,[data-mode=dark] .sign-side,[data-mode=dark] .sign-head{background:var(--paper);color:var(--ink)}
[data-mode=dark] label,[data-mode=dark] .legal,[data-mode=dark] .table td,[data-mode=dark] .table th,[data-mode=dark] .page-head p{color:var(--muted)}
[data-mode=dark] .btn-ghost,[data-mode=dark] .notice,[data-mode=dark] .recipient,[data-mode=dark] .code-box,[data-mode=dark] .signature-preview{background:#24364c;color:var(--ink);border-color:var(--line)}
[data-mode=dark] .table tr:hover{background:#24364c}[data-mode=dark] .modal-head{border-color:var(--line)}
@media(max-width:700px){.customer-identity{max-width:170px}.customer-identity small{max-height:28px}.table-wrap{resize:none;width:100%!important}.metric{min-width:0}}

.password-wrap{position:relative;display:block}.password-wrap input{padding-right:44px;width:100%}.password-eye{position:absolute;right:7px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--ink);cursor:pointer;padding:6px;display:flex}.password-eye:focus-visible{outline:2px solid var(--blue)}.pending-badge:not(:empty){background:var(--gold);color:#101a2c;border-radius:12px;padding:1px 7px;margin-left:6px}.recipient-summary{font-size:12px;border-bottom:1px solid var(--line);padding:10px 0;margin:12px 0}.recipient-summary h3{font-size:14px}.recorded-preview{opacity:1!important;cursor:default;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:4px 6px;overflow:hidden}.recorded-preview small{font-size:clamp(6px,.65vw,10px);text-align:left}.recorded-preview:after{display:none}.nav button:focus:not(.active){background:transparent}.personal-state:empty{display:none}
:root[data-theme=ocean]{--navy:#12364c;--navy2:#1d5372;--blue:#166c9c;--gold:#edc34e}
:root[data-theme=forest]{--navy:#18352a;--navy2:#28523f;--blue:#267044;--gold:#edc34e}
:root[data-theme=plum]{--navy:#32213f;--navy2:#4f3260;--blue:#764993;--gold:#edc34e}
:root[data-theme=burgundy]{--navy:#3d1c2a;--navy2:#623044;--blue:#963d58;--gold:#edc34e}
:root[data-theme=indigo]{--navy:#222a4b;--navy2:#384274;--blue:#4c59aa;--gold:#edc34e}
:root[data-theme=copper]{--navy:#3c2a20;--navy2:#604331;--blue:#94582e;--gold:#edc34e}
:root[data-theme=charcoal]{--navy:#24292e;--navy2:#3d464f;--blue:#52636e;--gold:#edc34e}
:root[data-theme=emerald]{--navy:#10382d;--navy2:#205640;--blue:#17754f;--gold:#edc34e}
:root[data-theme=violet]{--navy:#302044;--navy2:#50386d;--blue:#7950a4;--gold:#edc34e}
:root[data-theme=steel]{--navy:#243746;--navy2:#3a566b;--blue:#476f8c;--gold:#edc34e}
:root[data-theme=olive]{--navy:#303722;--navy2:#4c5835;--blue:#687a38;--gold:#edc34e}
:root[data-theme=midnight]{--navy:#131c35;--navy2:#263655;--blue:#375684;--gold:#edc34e}