:root{--primary:#2563eb;--soft:#eff6ff;--ink:#0f172a;--gold:#facc15}*{font-family:'Sarabun',sans-serif}body{background:linear-gradient(135deg,#f8fbff,#eef6ff 45%,#fff8db);color:var(--ink)}.app-nav{background:linear-gradient(90deg,#1d4ed8,#06b6d4)}.hero{background:linear-gradient(135deg,#2563eb,#06b6d4);color:white;border-radius:28px;padding:32px;box-shadow:0 20px 45px rgba(37,99,235,.22)}.card{border:0;border-radius:24px;box-shadow:0 12px 35px rgba(15,23,42,.08)}.stat{padding:22px;border-radius:22px;background:white}.btn{border-radius:999px}.form-control,.form-select{border-radius:16px;padding:.75rem 1rem}.signature-box{background:white;border:2px dashed #94a3b8;border-radius:20px;overflow:hidden}.signature-pad{width:100%;height:220px;display:block}.table{vertical-align:middle}.print-area{background:white;border-radius:24px;padding:28px}.sig-img{max-width:180px;max-height:80px}.badge{border-radius:999px;padding:.5rem .8rem}@media print{.navbar,.no-print,footer{display:none!important}body{background:white}.container{max-width:100%!important}.card,.print-area{box-shadow:none!important;border:0!important}}

/* Signature UI patch: ช่องลายเซ็นใหญ่ + ช่องเล็กสำหรับเซ็นชื่อ */
.signature-section{
  background:#fff;
  border-radius:28px;
  padding:26px;
  box-shadow:0 16px 42px rgba(15,23,42,.08);
}
.signature-title{
  display:block;
  font-weight:800;
  font-size:1.2rem;
  color:#0f172a;
  margin-bottom:4px;
}
.signature-subtitle{
  color:#475569;
  font-size:.95rem;
}
.signature-box-large{
  position:relative;
  min-height:260px;
  height:clamp(230px, 32vw, 360px);
  border:2px dashed #93c5fd;
  border-radius:20px;
  background:#fff;
  overflow:hidden;
}
.signature-box-large:focus-within{
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}
.signature-box-large .signature-pad{
  width:100%;
  height:100%;
  display:block;
  position:relative;
  z-index:2;
}
.signature-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#93a9d5;
  font-weight:600;
  pointer-events:none;
  z-index:1;
}
.signature-box-large.has-signature .signature-placeholder,
.small-sign-box.has-signature .sign-line,
.small-sign-box.has-signature .sign-label{
  opacity:.20;
}
.btn-clear-signature{
  position:absolute;
  right:16px;
  bottom:14px;
  z-index:3;
  border:1px solid #ff3b4f;
  color:#ff3b4f;
  background:#fff;
  border-radius:999px;
  padding:8px 18px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}
.btn-clear-signature:hover{
  background:#fff1f2;
}
.small-sign-wrap{
  text-align:center;
  margin:22px auto 16px;
}
.small-sign-title{
  margin-bottom:8px;
  font-weight:700;
  color:#334155;
}
.small-sign-box{
  position:relative;
  width:360px;
  max-width:100%;
  height:120px;
  margin:0 auto;
  border:2px dashed #3b82f6;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}
.signature-pad-small{
  width:100%;
  height:100%;
  display:block;
  position:relative;
  z-index:2;
}
.sign-line{
  position:absolute;
  left:42px;
  right:42px;
  bottom:42px;
  border-bottom:1.5px solid #64748b;
  pointer-events:none;
  z-index:1;
}
.sign-label{
  position:absolute;
  left:0;
  right:0;
  bottom:16px;
  font-size:14px;
  color:#64748b;
  pointer-events:none;
  z-index:1;
}
.signature-help{
  background:#eff6ff;
  color:#1d4ed8;
  padding:13px 16px;
  border-radius:14px;
  font-weight:700;
}
@media (max-width:576px){
  .signature-section{padding:18px;border-radius:22px;}
  .signature-box-large{height:240px;}
  .btn-clear-signature{right:10px;bottom:10px;padding:7px 14px;}
}