:root {
  --orange-50:#fff7ed; --orange-100:#ffedd5; --orange-200:#fed7aa;
  --orange-500:#f97316; --orange-600:#ea580c; --orange-700:#c2410c;
  --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --white:#fff;
  --danger:#b91c1c; --success:#166534;
}
*{box-sizing:border-box}
html{font-size:18px}
body{margin:0;font-family:"Noto Sans Thai","TH Sarabun New",Tahoma,Arial,sans-serif;color:var(--ink);background:#fffaf5;line-height:1.6}
a{color:var(--orange-700);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1180px,calc(100% - 32px));margin:auto}
.topbar{background:linear-gradient(135deg,var(--orange-600),var(--orange-500));color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12);position:sticky;top:0;z-index:20}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:1.12rem}
.brand:hover{text-decoration:none}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:#fff;color:var(--orange-600);border-radius:50%}
.nav-links{display:flex;gap:18px;flex-wrap:wrap}.nav-links a{color:#fff;font-weight:700}
.page-shell{padding:28px 0 48px}.footer{padding:24px;text-align:center;color:var(--muted)}
.card{background:#fff;border:1px solid var(--orange-100);border-radius:16px;box-shadow:0 8px 30px rgba(124,45,18,.08);padding:24px;margin-bottom:22px}
.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
h1,h2,h3{line-height:1.25;margin-top:0}h1{font-size:clamp(1.7rem,3vw,2.35rem)}h2{font-size:1.5rem}.muted{color:var(--muted)}
.grid{display:grid;gap:18px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:7px}.field label{font-weight:700}.required::after{content:" *";color:var(--danger)}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid #d1d5db;border-radius:10px;background:#fff;color:var(--ink);font:inherit}
input:focus,select:focus,textarea:focus{outline:3px solid var(--orange-100);border-color:var(--orange-500)}textarea{min-height:100px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:10px;padding:10px 16px;font:inherit;font-weight:800;cursor:pointer;text-decoration:none;transition:.15s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}.btn-primary{background:var(--orange-600);color:#fff}.btn-primary:hover{background:var(--orange-700)}
.btn-secondary{background:var(--orange-100);color:var(--orange-700)}.btn-outline{background:#fff;color:var(--orange-700);border:1px solid var(--orange-300,#fdba74)}
.btn-danger{background:#fee2e2;color:var(--danger)}.btn-success{background:#dcfce7;color:var(--success)}.btn-sm{padding:8px 12px;font-size:.95rem}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.actions.end{justify-content:flex-end}
.alert{padding:13px 16px;border-radius:10px;margin-bottom:18px;font-weight:700}.alert-success{background:#dcfce7;color:var(--success)}.alert-error{background:#fee2e2;color:var(--danger)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%;background:#fff}th,td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:left}th{background:var(--orange-50);color:#9a3412;font-weight:800}tr:last-child td{border-bottom:none}
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:.92rem;font-weight:800}.badge-open{background:#dcfce7;color:#166534}.badge-closed{background:#f3f4f6;color:#4b5563}.badge-signed{background:var(--orange-100);color:var(--orange-700)}
.stat{background:linear-gradient(135deg,#fff,var(--orange-50));border:1px solid var(--orange-100);border-radius:14px;padding:20px}.stat strong{display:block;font-size:2rem;color:var(--orange-600)}
.login-wrap{max-width:500px;margin:6vh auto}.hero{text-align:center;padding:46px 20px}.hero-icon{font-size:4rem;color:var(--orange-600)}
.copy-box{display:flex;gap:8px}.copy-box input{font-size:1rem;background:#f9fafb}
.participant-list{display:grid;gap:12px}.participant-card{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px;border:2px solid var(--orange-100);border-radius:14px;background:#fff;cursor:pointer;transition:.15s}
.participant-card:hover{border-color:var(--orange-400,#fb923c);box-shadow:0 5px 18px rgba(234,88,12,.1)}.participant-card.signed{background:#fff7ed;border-color:#fdba74}.participant-card input{width:24px;height:24px;accent-color:var(--orange-600)}
.person-name{font-size:1.18rem;font-weight:800}.person-meta{color:var(--muted);font-size:1rem}.search-input{font-size:1.12rem;padding:14px 15px}
.modal{position:fixed;inset:0;background:rgba(17,24,39,.58);display:none;align-items:center;justify-content:center;padding:18px;z-index:50}.modal.open{display:flex}.modal-panel{width:min(760px,100%);background:#fff;border-radius:18px;padding:22px;box-shadow:0 25px 70px rgba(0,0,0,.3)}
.signature-wrap{border:2px dashed #fdba74;border-radius:12px;background:#fff;overflow:hidden;touch-action:none}.signature-wrap canvas{display:block;width:100%;height:260px;touch-action:none;cursor:crosshair}.signature-hint{text-align:center;color:var(--muted);padding:6px;background:var(--orange-50)}
.kv{display:grid;grid-template-columns:170px 1fr;gap:8px 14px}.kv dt{font-weight:800;color:#7c2d12}.kv dd{margin:0}
.empty{text-align:center;padding:38px 20px;color:var(--muted)}
.guide-hero{text-align:center}.guide-grid{align-items:start}.guide-section h2{margin-bottom:14px}.guide-section ol,.guide-section ul{margin:0 0 16px;padding-left:24px}.guide-section li{margin-bottom:8px}.guide-section p:last-child{margin-bottom:0}
.report-sheet{background:#fff;color:#000;width:100%;min-height:210mm;padding:14mm 12mm;margin:auto;box-shadow:0 0 0 1px #ddd;font-family:"TH Sarabun New","Sarabun",Tahoma,sans-serif;font-size:18px}
.report-header{text-align:center;margin-bottom:12px}.report-logo{max-height:70px;max-width:90px;margin-bottom:6px}.report-title{font-size:27px;font-weight:700}.report-subtitle{font-size:21px}
.report-meta{margin:10px 0 14px}.report-table{border:1px solid #000;border-collapse:collapse}.report-table th,.report-table td{border:1px solid #000;padding:5px 6px}.report-table tbody tr:last-child td{border-bottom:1px solid #000!important}.report-table th{text-align:center;background:#f2f2f2;color:#000}.report-table .center{text-align:center}.report-signature{max-width:120px;max-height:44px;display:block;margin:auto}
.signoff-admin{background:#fff;border:1px solid var(--orange-100);border-radius:14px;padding:18px;margin-bottom:18px}.signoff-admin-heading{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:14px}.signoff-admin-heading h2{margin:0}.signoff-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.signoff-admin-item{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--orange-50)}.signature-person-box{padding:10px 12px;margin-bottom:12px;border-radius:10px;background:var(--orange-50);color:#7c2d12}
.print-signoff{display:grid;grid-template-columns:1fr 1fr;gap:32mm;text-align:center;margin-top:16mm;break-inside:avoid;page-break-inside:avoid}.print-signoff-item{min-width:0}.print-signature-space{height:25mm;display:flex;align-items:flex-end;justify-content:center}.report-approval-signature{display:block;max-width:55mm;max-height:24mm;object-fit:contain}.print-signoff-rule{width:58mm;max-width:100%;margin:0 auto 2mm;border-top:1px dotted #000}.print-signoff-name{line-height:1.35}.print-signoff-role{line-height:1.35}
@media(max-width:800px){.grid-2,.grid-3,.signoff-admin-grid{grid-template-columns:1fr}.topbar-inner{align-items:flex-start;padding:14px 0;flex-direction:column}.nav-links{padding-bottom:6px}.card{padding:18px}.participant-card{grid-template-columns:auto 1fr}.participant-card .status{grid-column:2}.kv{grid-template-columns:1fr}.copy-box{flex-direction:column}}
@page{size:A4 portrait;margin:15mm}
@page reportPage{size:A4 portrait;margin:15mm}
@media print{
  html,body{margin:0!important;padding:0!important;background:#fff!important}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .no-print{display:none!important}
  .container{width:auto!important;max-width:none!important;margin:0!important;padding:0!important}
  .page-shell{padding:0!important}
  .report-sheet{page:reportPage;box-shadow:none!important;width:auto!important;max-width:none!important;min-height:0!important;margin:0!important;padding:0!important}
  .report-header,.report-meta,.print-signoff,.report-notes,.report-footer{break-inside:avoid;page-break-inside:avoid}
  .report-table{width:100%!important;table-layout:fixed;border-collapse:collapse!important;border:1px solid #000!important;font-size:13px}
  .report-table thead{display:table-header-group}
  .report-table tbody{display:table-row-group}
  .report-table tr,.report-table th,.report-table td{break-inside:avoid;page-break-inside:avoid}
  .report-table th,.report-table td{border:1px solid #000!important;overflow-wrap:anywhere;word-break:break-word}
  .report-table tbody tr:last-child td{border-bottom:1px solid #000!important}
  .report-signature{max-height:38px}
  .print-signoff{margin-top:14mm;gap:28mm}
  .print-signature-space{height:23mm}
}