.sign-page {
  flex: 1;
  position: relative;
  overflow: auto;
  padding: 34px 30px 180px;
  background: #eff8ff;
}
.page-badge {
  position: absolute;
  left: 0;
  top: 28px;
  padding: 13px 22px;
  border-radius: 0 999px 999px 0;
  background: #cce9ff;
  color: #102a56;
  font-size: 18px;
}
.sign-paper {
  min-height: 560px;
  margin: 0 auto;
  padding: 48px 42px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(16, 42, 86, .12);
}
.sign-paper h2 { margin: 0; color: #aaa; font-size: 28px; font-weight: 300; }
.sign-paper p { font-size: 10px; line-height: 1.35; }
.sign-paper .mark { background: #fff58d; }
.sig-ink {
  width: 170px;
  height: 60px;
  margin: 16px 0 0 auto;
  display: block;
}
.sig-ink path {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--w);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.add-sign {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 22px 28px;
  background: #fff;
  color: #102a56;
  text-align: center;
}
.add-sign button {
  width: 100%;
  min-height: 58px;
  border: 2px dashed #2478f2;
  border-radius: 18px;
  background: #fff;
  color: #2478f2;
  font: inherit;
  font-size: 21px;
  font-weight: 800;
}
.sign-sheet {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  align-items: end;
  background: rgba(0,0,0,.32);
}
.sign-sheet section {
  padding: 34px 24px 44px;
  border-radius: 28px 28px 0 0;
  background: #fff;
}
.sign-sheet button {
  width: 100%;
  min-height: 64px;
  border: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  background: transparent;
  color: #102a56;
  font: inherit;
  font-size: 21px;
}
.draw-page {
  flex: 1;
  overflow: auto;
  padding: 34px 22px;
  background: #eff8ff;
  color: #102a56;
}
.draw-pad {
  width: 100%;
  min-height: 430px;
  border: 3px dashed #e1e8f0;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #102a56;
  font: inherit;
  font-size: 19px;
}
.draw-pad .sig-ink {
  width: 80%;
  height: 150px;
  margin: 0;
}
.draw-page label {
  margin-top: 32px;
  display: grid;
  gap: 18px;
  font-size: 20px;
  font-weight: 800;
}
.draw-page input { width: 100%; accent-color: #2478f2; }
.draw-page p { margin-top: 32px; font-size: 20px; font-weight: 800; }
.color-pick { display: flex; gap: 24px; }
.color-pick button {
  width: 46px;
  height: 46px;
  border: 4px solid transparent;
  border-radius: 50%;
  background: var(--c);
}
.color-pick button.on { border-color: #2478f2; box-shadow: inset 0 0 0 4px #fff; }
.scan-sign-demo { background: #eff8ff; }
.scan-sign-page {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 36px 20px;
  background: #eff8ff;
}
.scan-sign-crop {
  position: relative;
  width: min(86%, 330px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(0,0,0,.18);
}
.scan-sign-crop svg { width: 80%; height: 42%; }
.scan-sign-crop path {
  fill: none;
  stroke: #1e2f63;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scan-sign-crop span {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 4px solid #2478f2;
  background: #fff;
}
.scan-sign-crop span:nth-child(2) { left: 24px; top: 24px; }
.scan-sign-crop span:nth-child(3) { right: 24px; top: 24px; }
.scan-sign-crop span:nth-child(4) { right: 24px; bottom: 24px; }
.scan-sign-crop span:nth-child(5) { left: 24px; bottom: 24px; }
.scan-sign-modes {
  min-height: 104px;
  padding: 16px 60px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: #fff;
}
.scan-sign-modes button {
  min-height: 64px;
  border: 0;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #8a96a8;
  font: inherit;
}
.scan-sign-modes button.on {
  background: #eff8ff;
  color: #2478f2;
  font-weight: 800;
}
.sign-paper { position: relative; overflow: hidden; }
.sign-rail { display: flex; gap: 12px; overflow-x: auto; align-items: center; text-align: left; }
.sign-rail button { flex: 0 0 74px; width: 74px !important; min-height: 68px !important; border: 1px solid #d1e9ff !important; border-radius: 10px !important; padding: 4px; background: #fff !important; color: #2478f2 !important; font-size: 12px !important; }
.sign-thumb { position: relative; }.sign-thumb svg { width: 58px; height: 32px; }.sign-thumb.on { box-shadow: inset 0 0 0 2px #2478f2; }
.sign-thumb i { position: absolute; right: -6px; top: -8px; width: 24px; height: 24px; border-radius: 50%; background: #eaf4ff; color: #d92d20; font-style: normal; line-height: 24px; text-align: center; }
.placed-sig { position: absolute; z-index: 2; display: grid; place-items: center; border: 1px dashed #2478f2; background: rgba(255,255,255,.68); }
.placed-sig .sig-ink { width: 90%; height: 60px; margin: 0; }.placed-tools { position: absolute; left: 0; right: 0; bottom: -50px; display: flex; justify-content: center; gap: 6px; }
.placed-tools button { width: 44px; height: 44px; border: 0; border-radius: 22px; background: #fff; color: #102a56; font-size: 10px; box-shadow: 0 2px 8px rgba(16,42,86,.18); }
.sign-dialog { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(0,0,0,.35); }.sign-dialog section { width: min(86%,320px); padding: 22px; border-radius: 18px; background: #fff; color: #102a56; text-align: center; }
.sign-dialog button { width: 100%; min-height: 50px; margin-top: 10px; border: 0; border-radius: 14px; font: inherit; font-weight: 800; }.sign-dialog [data-act=leave] { background: #fee4e2; color: #d92d20; }.sign-dialog [data-act=cancel] { background: #2478f2; color: #fff; }
.sign-saving { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-weight: 800; }