:root {
  --navy: #16283f;
  --navy-2: #1f3a5c;
  --orange: #e8871e;
  --ink: #1c2733;
  --muted: #5b6b7c;
  --line: #c9d3dd;
  --bg: #eef2f6;
  --card: #ffffff;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}
.topbar {
  background: var(--navy); color: #fff; padding: 10px 18px;
  display: flex; align-items: center; gap: 14px;
}
.topbar img { height: 46px; background: #fff; border-radius: 6px; padding: 3px; }
.topbar .brand { font-weight: 700; font-size: 17px; letter-spacing: .2px; }
.topbar .brand small { display: block; font-weight: 400; font-size: 12px; color: #cfe0f2; }
.wrap { max-width: 860px; margin: 22px auto 40px; padding: 0 14px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 26px 28px; box-shadow: 0 2px 10px rgba(22,40,63,.08);
}
h1.form-title {
  text-align: center; color: var(--navy); font-size: 19px; margin: 4px 0 2px;
}
h2.form-sub { text-align: center; color: var(--navy); font-size: 14.5px; margin: 0 0 14px; }
.doc-box { border: 1.2px solid #333; padding: 16px 18px; }
.doc-box p {
  font-family: Georgia, "Times New Roman", serif; font-size: 14.5px;
  line-height: 1.5; text-align: justify; margin: 0 0 9px;
}
.doc-box ol { font-family: Georgia, serif; font-size: 14.5px; line-height: 1.5; margin: 0 0 9px; padding-left: 20px; }
.agent-block { font-size: 13px; line-height: 1.55; margin-top: 10px; }
.signer-name { font-weight: 700; text-decoration: underline; }
table.sign-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
table.sign-table td { border: 1px solid #333; padding: 8px 10px; font-size: 14px; vertical-align: middle; }
table.sign-table td.lbl { width: 110px; font-weight: 700; }
.sig-wrap { border: 1.5px dashed var(--navy-2); border-radius: 8px; background: #fbfdff; }
canvas#sigpad { width: 100%; height: 170px; display: block; touch-action: none; cursor: crosshair; }
.sig-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
button, .btn {
  background: var(--navy); color: #fff; border: 0; border-radius: 7px;
  padding: 10px 16px; font-size: 14.5px; cursor: pointer; text-decoration: none;
  display: inline-block;
}
button.secondary, .btn.secondary { background: #fff; color: var(--navy); border: 1.2px solid var(--navy); }
button.primary { background: var(--orange); color: #16283f; font-weight: 700; font-size: 16px; padding: 13px 26px; }
button:disabled { opacity: .55; cursor: default; }
input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 15px;
}
label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
label.check input { margin-top: 3px; transform: scale(1.25); }
.note { color: var(--muted); font-size: 13px; }
.error { background: #fdecec; border: 1px solid #e5a3a3; color: #7c1d1d; padding: 10px 12px; border-radius: 7px; margin-bottom: 12px; }
.oknote { background: #e9f7ee; border: 1px solid #9ed3ab; color: #14532d; padding: 10px 12px; border-radius: 7px; margin-bottom: 12px; }
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th, table.list td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; }
.status { font-weight: 700; text-transform: capitalize; }
.status.completed { color: #157347; }
.status.viewed { color: #b8860b; }
.footer { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 30px; }
h1.page { color: var(--navy); font-size: 21px; }
.mode-toggle { display: flex; gap: 8px; margin-bottom: 8px; }
.mode-toggle button.active { background: var(--navy-2); outline: 2px solid var(--orange); }
#typebox { display: none; margin-bottom: 8px; }