/* DocSign — design 1 "สะอาด ทางการ" */
:root{
  --bg:#f3f5fa; --surface:#fff; --ink:#18202f; --muted:#6b7487; --line:#e2e6ef; --soft:#f8fafc;
  --accent:#1d4ed8; --accent-ink:#fff; --accent-soft:#e8eeff;
  --ok:#15803d; --ok-soft:#dcfce7; --warn:#b45309; --warn-soft:#fff3dc; --danger:#b91c1c; --danger-soft:#fee2e2;
  --info:#4338ca; --info-soft:#e0e7ff; --grey-soft:#eef0f4;
  --radius:14px; --shadow:0 8px 30px rgba(20,30,60,.08);
  --head:'Kanit','Sarabun',sans-serif; --body:'Sarabun',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body)}
h1,h2,h3,h4{font-family:var(--head);font-weight:600;margin:0;line-height:1.25}
a{color:var(--accent)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.muted{color:var(--muted)} .small{font-size:13px} .nowrap{white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:11px;padding:10px 16px;font-weight:600;font-size:15px;text-decoration:none;line-height:1.2;transition:filter .15s,background .15s}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.pri{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn.pri:hover:not(:disabled){filter:brightness(1.08)}
.btn.sec{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn.sec:hover:not(:disabled){background:var(--soft)}
.btn.ghost{background:transparent;color:var(--accent);padding:8px 10px}
.btn.danger{background:var(--surface);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.btn.lg{padding:13px 20px;font-size:16px;border-radius:13px}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:9px}
.btn.block{width:100%}

/* forms */
label.f{display:block;font-size:14px;color:var(--muted);margin:14px 0 5px;font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);outline:none;transition:border .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical;min-height:80px}
.row{display:flex;gap:12px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.err{background:var(--danger-soft);color:var(--danger);border-radius:10px;padding:10px 12px;font-size:14px;margin-top:12px}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:22px}
.card h3{font-size:18px}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;border-radius:999px;padding:3px 11px;white-space:nowrap}
.chip.pending{background:var(--warn-soft);color:var(--warn)}
.chip.viewed{background:var(--info-soft);color:var(--info)}
.chip.approved{background:var(--ok-soft);color:var(--ok)}
.chip.changes{background:var(--danger-soft);color:var(--danger)}
.chip.expired,.chip.revoked{background:var(--grey-soft);color:var(--muted)}
.chip.plain{background:var(--soft);color:var(--muted);border:1px solid var(--line);font-weight:500}

/* modal */
.ov{position:fixed;inset:0;background:rgba(5,8,18,.5);backdrop-filter:blur(3px);z-index:60;display:none;align-items:center;justify-content:center;padding:16px}
.ov.open{display:flex}
.modal{background:var(--surface);border-radius:20px;width:100%;max-width:520px;max-height:92vh;overflow:auto;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:mup .22s ease}
.modal.wide{max-width:920px}
.modal h3{font-size:21px}
@keyframes mup{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:600px){.ov.sheet{align-items:flex-end;padding:0}.ov.sheet .modal{border-radius:22px 22px 0 0;max-height:94vh}}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;z-index:90;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100% - 32px);text-align:center}

/* signature pad */
.pad{position:relative;border:2px dashed var(--line);border-radius:var(--radius);background:#fff;touch-action:none;user-select:none}
.pad canvas{width:100%;height:190px;display:block;border-radius:var(--radius);cursor:crosshair}
.pad .ph{position:absolute;inset:0;display:grid;place-items:center;color:#b5bbc9;pointer-events:none}
.pad .base{position:absolute;left:8%;right:8%;bottom:36px;border-bottom:1px solid #dfe3eb;pointer-events:none}

/* pdf pages */
.pages{display:grid;gap:16px;background:#e5e9f2;border-radius:var(--radius);padding:14px}
.pg{position:relative;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.16);border-radius:2px;margin:0 auto;width:100%}
.pg canvas{display:block;width:100%;height:auto;border-radius:2px}
.pg .slot{position:absolute;border:2px dashed color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:6px;display:grid;place-items:center;color:var(--accent);font-size:clamp(9px,1.6vw,13px);font-weight:600;text-align:center;pointer-events:none}
.pg .slot img{max-width:100%;max-height:100%}
.pg .pno{position:absolute;right:8px;top:8px;background:rgba(17,24,39,.6);color:#fff;font-size:11px;border-radius:99px;padding:1px 8px}
.pg.loading{aspect-ratio:1/1.414;display:grid;place-items:center;color:var(--muted);font-size:14px}

.brandmark{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:600;font-size:20px}
.brandmark b{width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:17px}
.brandmark span em{font-style:normal;color:var(--accent)}