/* Signature.direct — preview app styles (shared by console / send / sign / certificate)
   Brand: ink #20242B / gold #A8863D / bright gold #C9A961 / cream #FAF7F0 / black #1B1B1D
   Fonts: Great Vibes (script), EB Garamond (display + body) */
:root{
  --ink:#20242B; --black:#1B1B1D; --gold:#A8863D; --gold-bright:#C9A961;
  --cream:#FAF7F0; --paper:#FFFDF8; --line:#E7E0D2; --line-dark:#3A3F49;
  --muted:#6B6455; --muted-dark:#B9B2A2; --ok:#2E7D4F; --warn:#B07A1E; --bad:#A33B2E;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'EB Garamond',Georgia,serif;background:var(--cream);color:var(--ink);font-size:18px;line-height:1.6;}
a{color:var(--gold);}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px;}
.script{font-family:'Great Vibes',cursive;font-weight:400;line-height:1;}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600;}
h1{font-size:clamp(30px,4.5vw,44px);font-weight:500;line-height:1.15;}
h2{font-size:26px;font-weight:500;}
h3{font-size:20px;font-weight:600;}

/* preview banner */
.preview-bar{background:var(--black);color:var(--gold-bright);text-align:center;font-size:14px;letter-spacing:.08em;padding:8px 16px;}
.preview-bar b{color:var(--cream);}

/* top nav */
.nav{background:rgba(250,247,240,.95);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;backdrop-filter:blur(8px);}
.nav-inner{max-width:1100px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink);white-space:nowrap;}
.brand .script{font-size:30px;}
.brand .brand-direct{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.nav-links{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.nav-links a{color:var(--ink);text-decoration:none;font-size:16px;}
.nav-links a:hover,.nav-links a.active{color:var(--gold);}
.member{font-size:15px;color:var(--muted);white-space:nowrap;}
.member b{color:var(--ink);}

/* buttons */
.btn{display:inline-block;background:var(--gold);color:var(--black);text-decoration:none;font-weight:600;font-size:16px;padding:10px 24px;border:1px solid var(--gold);cursor:pointer;font-family:inherit;transition:background .18s,color .18s;}
.btn:hover{background:var(--gold-bright);border-color:var(--gold-bright);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--cream);}
.btn-small{padding:6px 14px;font-size:14px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;}

/* layout blocks */
.page-head{padding:44px 0 10px;}
.page-head p{color:var(--muted);max-width:640px;margin-top:8px;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:30px 0;}
.stat{background:var(--paper);padding:20px 22px;}
.stat .num{font-size:34px;line-height:1;}
.stat .lbl{font-size:14px;color:var(--muted);letter-spacing:.05em;}
.card{background:var(--paper);border:1px solid var(--line);padding:26px;margin:22px 0;}
table{width:100%;border-collapse:collapse;font-size:16px;}
th{text-align:left;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:2px solid var(--gold);}
td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
tr:hover td{background:#FBF8F1;}
.pill{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.06em;padding:2px 10px;border-radius:20px;border:1px solid;}
.pill-sent{color:#5B5FEF;border-color:#C9CBFB;background:#F0F0FE;}
.pill-viewed{color:var(--warn);border-color:#EAD9AE;background:#FBF3DC;}
.pill-signed,.pill-completed{color:var(--ok);border-color:#BFE0CC;background:#EBF6EF;}
.pill-draft{color:var(--muted);border-color:var(--line);background:#F4F0E6;}
.pill-void{color:var(--bad);border-color:#EDC9C3;background:#FAECE9;}
.sample-tag{font-size:12px;color:var(--muted);font-style:italic;}

/* templates */
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:26px 0;}
.tpl{background:var(--paper);border:1px solid var(--line);padding:24px;}
.tpl .script{font-size:30px;color:var(--gold);}
.tpl p{font-size:15px;color:var(--muted);margin:8px 0 16px;min-height:48px;}

/* send flow */
.steps-bar{display:flex;gap:8px;margin:26px 0;flex-wrap:wrap;}
.steps-bar span{padding:8px 18px;border:1px solid var(--line-dark);font-size:15px;background:var(--paper);}
.steps-bar span.on{background:var(--black);color:var(--cream);border-color:var(--black);}
.dropzone{border:2px dashed var(--gold);background:var(--paper);padding:36px;text-align:center;margin:16px 0;}
.doc-page{background:#fff;border:1px solid var(--line);box-shadow:0 2px 14px rgba(32,36,43,.08);padding:40px 44px;position:relative;margin:16px 0;font-size:16px;}
.doc-page h4{font-size:21px;margin-bottom:10px;}
.doc-page p{margin-bottom:10px;color:#333;}
.field-chip{position:absolute;background:#FFF3C4;border:1.5px dashed var(--gold);color:var(--ink);font-size:13px;font-weight:600;padding:6px 12px;cursor:move;}
.field-palette{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0;}
.field-palette button{font-family:inherit;font-size:14px;font-weight:600;background:#FFF3C4;border:1.5px dashed var(--gold);padding:7px 14px;cursor:pointer;}
label.f{display:block;font-size:15px;font-weight:600;margin:14px 0 5px;}
input[type=text],input[type=email],select,textarea{width:100%;font-family:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line-dark);background:#fff;color:var(--ink);}
.notice{border:1px solid var(--gold);background:#FBF3DC;padding:14px 18px;font-size:15px;margin:16px 0;display:none;}
.notice.show{display:block;}
.success-seal{text-align:center;padding:26px 0;}
.success-seal .script{font-size:56px;color:var(--gold);}

/* timeline */
.timeline{list-style:none;margin:10px 0;}
.timeline li{padding:12px 0 12px 30px;border-bottom:1px solid var(--line);position:relative;font-size:16px;}
.timeline li::before{content:"✓";position:absolute;left:0;top:12px;color:var(--gold);font-weight:700;}
.timeline li.pending::before{content:"○";color:var(--muted);}
.timeline .t{color:var(--muted);font-size:14px;}

/* signer */
.sig-pad-wrap{border:1px solid var(--line-dark);background:#fff;margin:10px 0;}
canvas#sigpad{width:100%;height:180px;display:block;touch-action:none;cursor:crosshair;}
.sig-line{border-bottom:2px solid var(--ink);min-height:56px;display:flex;align-items:flex-end;padding:0 8px;}
.sig-line .script{font-size:38px;}

/* certificate */
.cert{border:3px double var(--gold);background:var(--paper);padding:44px;margin:30px 0;}
.cert .seal-big{text-align:center;}
.cert .seal-big .script{font-size:64px;color:var(--gold);}
.hash{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;word-break:break-all;color:var(--muted);}

footer{background:var(--black);color:var(--muted-dark);padding:36px 0;font-size:14px;margin-top:70px;}
.footer-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1100px;margin:0 auto;padding:0 24px;}
footer .script{font-size:24px;color:var(--cream);}
footer a{color:var(--gold-bright);text-decoration:none;}

@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr);}.tpl-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.tpl-grid{grid-template-columns:1fr;}.nav-links{display:none;}table{font-size:14px;}th,td{padding:9px 7px;}.doc-page{padding:26px 20px;}}