*{box-sizing:border-box}html,body{margin:0;background:#222;color:#fff;font:16px/1.4 system-ui,sans-serif}
header{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:#111;border-bottom:4px solid #ffcc00}
.brand{font-weight:800;font-size:20px;color:#ffcc00}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 18px;border:0;border-radius:10px;background:#ffcc00;color:#000;font-weight:700;font-size:17px;cursor:pointer}
.btn.alt{background:#444;color:#fff}.btn.big{width:100%;min-height:60px;font-size:18px}
.empty{padding:30px 20px;text-align:center}.muted{color:#aaa;font-size:14px}
#pages{padding:8px 0 150px}
.page{position:relative;margin:0 auto 10px;background:#fff;box-shadow:0 2px 8px #000}
.page canvas{display:block;width:100%;height:100%}
.fld{position:absolute;border:2px dashed rgba(0,90,255,.6);background:rgba(0,90,255,.06);border-radius:3px;padding:0;color:#000;overflow:hidden;font:inherit;text-align:left;white-space:nowrap;cursor:pointer}
.fld.sig{border:3px solid rgba(255,170,0,.9);background:rgba(255,204,0,.15)}
.fld.sig.done{border-color:rgba(0,160,0,.8);background:rgba(0,160,0,.05)}
.fld img{width:100%;height:100%;object-fit:contain;display:block}
.fld .tv{position:absolute;left:2px;top:50%;transform:translateY(-50%);font-family:Helvetica,Arial,sans-serif;color:#000}
.fld.check{border-color:rgba(0,90,255,.6)}.fld.check .tv{left:50%;transform:translate(-50%,-50%);font-weight:900}
footer{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;gap:8px;padding:10px;background:#111;border-top:4px solid #ffcc00}
.modal{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6);display:flex;align-items:flex-end}
.sheet{width:100%;background:#1b1b1b;padding:16px;border-top:4px solid #ffcc00;display:grid;gap:12px}
.label{font-weight:700;color:#ffcc00}
#textInput{width:100%;font-size:20px;padding:14px;border-radius:8px;border:2px solid #555;background:#fff;color:#000}
.row{display:flex;gap:10px}.row .btn{flex:1}
[hidden]{display:none!important}
.sigmodal{position:fixed;inset:0;z-index:30;background:#111;display:flex;flex-direction:column}
.sigtop{display:flex;justify-content:space-between;padding:10px 14px;color:#ffcc00;font-weight:700}
.sigwrap{position:relative;flex:1;margin:0 10px;background:#fff;border-radius:10px;overflow:hidden}
#sigCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.sigline{position:absolute;left:8%;right:8%;bottom:25%;border-bottom:2px dashed #bbb;pointer-events:none}
.sigbtns{padding:10px}
#toast{position:fixed;left:50%;bottom:170px;transform:translateX(-50%);z-index:40;background:#000;color:#fff;padding:12px 18px;border-radius:10px;border:2px solid #ffcc00;max-width:90%}