:root{--teal:#1F7A7A;--teal-d:#165c5c;--teal-l:#e6f2f2;--ink:#1d2a2a;--muted:#5b6b6b;--bad:#b42318}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#eef3f3;padding-bottom:84px}
.hdr{display:flex;gap:16px;align-items:center;background:#fff;border-top:6px solid var(--teal);padding:14px 20px;box-shadow:0 1px 3px #0001}
.logo{width:64px;height:64px;object-fit:contain;flex:none}
h1{font-size:1.25rem;margin:0;color:var(--teal-d)}
.intro{margin:4px 0 0;color:var(--muted);font-size:.95rem}
.progress{position:sticky;top:0;z-index:20;background:#fff;padding:8px 20px 10px;border-bottom:1px solid #d8e3e3}
.progress-row{display:flex;justify-content:space-between;font-size:.9rem;color:var(--muted)}
.bar{height:6px;background:var(--teal-l);border-radius:4px;margin-top:5px;overflow:hidden}
#barFill{height:100%;width:0;background:var(--teal);transition:width .25s}
main{max-width:980px;margin:16px auto;padding:0 12px}
.card{background:#fff;border-radius:12px;padding:20px 22px;box-shadow:0 1px 4px #0002}
.card h2{margin:0 0 6px;color:var(--teal-d)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 16px;margin:14px 0}
.grid label{display:flex;flex-direction:column;font-weight:600;font-size:.92rem;gap:4px}
.grid input{font-size:16px;padding:10px 12px;border:1px solid #b9caca;border-radius:8px}
.grid input:focus{outline:2px solid var(--teal);border-color:var(--teal)}
.grid input.invalid{border-color:var(--bad);background:#fff5f4}
.note{color:var(--muted)}.small{font-size:.85rem}
.btn{font:inherit;font-size:16px;border-radius:999px;padding:10px 20px;border:2px solid var(--teal);cursor:pointer;min-height:44px}
.btn.primary{background:var(--teal);color:#fff}.btn.primary:hover{background:var(--teal-d)}
.btn.ghost{background:#fff;color:var(--teal-d)}
.btn:disabled{opacity:.45;cursor:default}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:.85rem;cursor:pointer}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.navbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid #d8e3e3;display:flex;justify-content:space-between;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
/* pages */
.pagewrap{margin:0 auto 10px}
.pagehead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 8px;flex-wrap:wrap}
.pagehead h2{font-size:1.05rem;margin:0;color:var(--teal-d)}
.page{position:relative;width:100%;aspect-ratio:612/792;background:#fff center/100% 100% no-repeat;box-shadow:0 2px 10px #0003;container-type:inline-size;user-select:none}
.fw{position:absolute}
.fw::before{content:"";position:absolute;inset:-5px -1px}
.fw.text input,.fw.text textarea{position:absolute;left:0;top:0;width:calc(100% / var(--k));height:calc(100% / var(--k));transform:scale(var(--k));transform-origin:0 0;font-size:16px;font-family:Helvetica,Arial,sans-serif;color:#0b2a6b;background:rgba(31,122,122,.10);border:0;border-bottom:1px solid rgba(31,122,122,.5);padding:0 4px;margin:0;border-radius:2px;resize:none}
.fw.text textarea{padding:3px 4px;line-height:1.25;transform:scale(var(--km));width:calc(100% / var(--km));height:calc(100% / var(--km))}
.fw.text input:focus,.fw.text textarea:focus{outline:2px solid var(--teal);background:#fffbe6}
.fw.req.empty input,.fw.req.empty textarea{background:rgba(220,60,40,.10)}
.showerr .fw.req.empty input,.showerr .fw.req.empty textarea,.showerr .fw.req.empty .sigbtn,.showerr .fw.req.empty .box{outline:2px solid var(--bad)}
.fw.choice input{appearance:none;-webkit-appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:pointer;background:transparent;border:0}
.fw.choice .box{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;color:#0b2a6b;font-weight:700}
.fw.choice.small .box{background:rgba(31,122,122,.12);border:1px solid rgba(31,122,122,.55);border-radius:2px;font-size:calc(var(--pw) * 0.014)}
.fw.choice.small.radio .box{border-radius:50%}
.fw.choice.small input:checked+.box::after{content:"✓"}
.fw.choice.small.radio input:checked+.box::after{content:"";width:58%;height:58%;border-radius:50%;background:#0b2a6b}
.fw.choice.circle .box{border-radius:50%;border:2px dashed transparent}
.fw.choice.circle:hover .box{border-color:rgba(31,122,122,.35)}
.fw.choice.circle input:checked+.box{border:2.5px solid #0b2a6b;border-radius:50%}
.fw.choice input:focus-visible+.box{outline:2px solid var(--teal)}
.fw.sig .sigbtn{position:absolute;left:0;right:0;bottom:0;height:100%;min-height:100%;border:1px dashed var(--teal);background:rgba(31,122,122,.10);color:var(--teal-d);font-size:max(10px,calc(var(--pw)*.016));cursor:pointer;padding:0;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.fw.sig .sigbtn img{position:absolute;bottom:0;left:2%;height:100%;max-width:96%;object-fit:contain;object-position:left bottom;pointer-events:none}
.fw.sig.signed .sigbtn{background:transparent;border-color:transparent}
.fw.sig.signed .sigbtn span{display:none}
.drawlayer{position:absolute;touch-action:auto;border:2px dashed transparent;border-radius:6px}
.drawlayer.on{touch-action:none;border-color:#c0392b;background:rgba(255,255,255,.05);cursor:crosshair}
.drawlayer canvas{width:100%;height:100%;display:block}
.tool{font-size:14px;padding:6px 12px;min-height:36px}
.tool.on{background:#c0392b;border-color:#c0392b;color:#fff}
/* modal */
.modal{position:fixed;inset:0;background:#0008;z-index:50;display:flex;align-items:center;justify-content:center;padding:12px}
.modal[hidden],.busy[hidden],.editbar[hidden]{display:none}
.modal-card{background:#fff;border-radius:14px;padding:18px;width:min(640px,100%)}
.modal-card h3{margin:0;color:var(--teal-d)}
.sigwrap{position:relative;margin:10px 0;border:2px solid var(--teal);border-radius:10px;background:#fbfefe;height:min(220px,40vh)}
.sigwrap canvas{width:100%;height:100%;touch-action:none;display:block;cursor:crosshair}
.sigline{position:absolute;left:14px;right:14px;bottom:28%;border-bottom:1px solid #9bb;color:#9bb;font-size:14px;pointer-events:none}
.inline{display:flex;gap:8px;align-items:center;font-size:.92rem}
.inline input{width:20px;height:20px}
.busy{position:fixed;inset:0;background:#fffc;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center}
.spinner{width:44px;height:44px;border:5px solid var(--teal-l);border-top-color:var(--teal);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.editbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:3px solid var(--teal);padding:10px 12px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -4px 14px #0002}
.editbar label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px}
.editrow{display:flex;gap:6px}
.editrow input,.editrow textarea{flex:1;font-size:16px;padding:10px;border:1px solid #9bb;border-radius:8px;min-width:0;font-family:inherit}
.editrow .btn{padding:8px 12px}
.missing{background:#fff5f4;border:1px solid #f3c1bb;border-radius:10px;padding:10px 14px;margin-top:12px}
.missing h3{margin:0 0 6px;font-size:1rem;color:var(--bad)}
.missing ul{margin:0;padding-left:18px}
.missing a{color:var(--bad)}
.ok{background:var(--teal-l);border-radius:10px;padding:10px 14px;margin-top:12px;color:var(--teal-d)}
.sum{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:10px 0}
.sum dt{color:var(--muted)}.sum dd{margin:0;font-weight:600}
.sigthumbs{display:flex;flex-wrap:wrap;gap:8px}.sigthumbs figure{margin:0;border:1px solid #cdd;border-radius:6px;padding:4px;width:150px;font-size:.75rem;color:var(--muted)}
.sigthumbs img{width:100%;height:44px;object-fit:contain}
.done{text-align:center}.done .actions{justify-content:center}
.check{width:72px;height:72px;margin:6px auto 10px;border-radius:50%;background:var(--teal);color:#fff;font-size:42px;line-height:72px}
@media (max-width:640px){
  .hdr{padding:10px 12px;gap:10px}.logo{width:46px;height:46px}h1{font-size:1rem}.intro{font-size:.82rem}
  main{padding:0 4px;margin-top:8px}.card{padding:16px}
  .progress{padding:6px 12px 8px}
  .fw.choice.circle input:checked+.box{border-width:1.5px}
}
@media print{.hdr,.progress,.navbar,.pagehead,.editbar{display:none}.page{box-shadow:none;break-after:page}}