:root{--c:#3a2fc0;--c2:#eeedfb}
body.anggun{--c:#9a7420;--c2:#f6efdc}
*{box-sizing:border-box}html,body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans CJK SC",sans-serif;background:#f2f3f7;color:#1f2733;font-size:16px}
.hidden{display:none!important}
button,.btn{font:inherit;border:0;border-radius:10px;padding:12px 18px;background:var(--c);color:#fff;cursor:pointer;min-height:46px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;justify-content:center}
button.sec,.btn.sec{background:#fff;color:var(--c);border:1.5px solid var(--c)}button.danger{background:#c33}button.sm{padding:6px 12px;min-height:36px;font-size:14px}
button:disabled{opacity:.5}
input,select,textarea{font:inherit;padding:12px;border:1.5px solid #ccd;border-radius:10px;width:100%;background:#fff;min-height:46px}
label.l{display:block;font-size:13px;color:#556;margin:10px 0 4px}
.top{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--c);display:flex;align-items:center;gap:10px;padding:8px 14px;flex-wrap:wrap}
.top .t{font-weight:700;flex:1;min-width:120px}.top img{height:34px}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.card{background:#fff;border-radius:14px;padding:16px;box-shadow:0 1px 3px #0001;margin-bottom:14px}
.login{max-width:380px;margin:12vh auto}
.brands{display:grid;grid-template-columns:1fr 1fr;gap:16px}.brand{border:3px solid #dde;border-radius:16px;padding:20px;text-align:center;background:#fff;cursor:pointer}
.brand img{max-width:100%;height:80px;object-fit:contain}.brand.sel{border-color:var(--c);background:var(--c2)}.brand b{display:block;margin-top:8px}
.list .it{display:flex;justify-content:space-between;align-items:center;padding:14px 6px;border-bottom:1px solid #eef;cursor:pointer;gap:10px}.list .it:hover{background:#f7f8fc}
.muted{color:#778;font-size:14px}.pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;background:#eef;color:#334}.pill.signed{background:#e3f5e6;color:#1d6b2c}.pill.draft{background:#fff3d6;color:#8a5a00}
.pill.npm{background:#eeedfb;color:#3a2fc0}.pill.follidoc{background:#f4ecd8;color:#7a5c12}.pill.anggun{background:#f6efdc;color:#9a7420}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:640px){.row2,.brands{grid-template-columns:1fr}}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;background:#fff;border-bottom:1px solid #dde;position:sticky;top:53px;z-index:40}
.tabs button{min-width:52px;background:#eef;color:#334;padding:8px 12px;min-height:42px}.tabs button.on{background:var(--c);color:#fff}.tabs button.ok:after{content:" ✓";color:#2a2}.tabs button.on.ok:after{color:#bfb}
#stage{overflow-x:auto;overflow-y:hidden;padding:12px 0 140px}
#fr{transform-origin:top left;margin:0 auto}
#fr .page{background:#fff;box-shadow:0 2px 10px #0002;margin:0 auto 20px}
#fr .cb,#fr td:has(>.bx),#fr .sc,#fr td.ic,#fr .pc{cursor:pointer;-webkit-tap-highlight-color:transparent}
#fr .cb{padding:2px 3px;border-radius:4px}#fr .cb.on{background:#fff7c2}
#fr .cb.on i,#fr .bx.on{background:#123a8f;border-color:#123a8f;position:relative}
#fr .cb.on i:after,#fr .bx.on:after{content:"";position:absolute;left:28%;top:5%;width:30%;height:60%;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
#fr .pick{outline:3px solid #d22;outline-offset:-2px;background:#fff1f1}
#fr .ffill{outline:none;color:#123a8f;font-weight:600;background:#fffbe0;min-width:30px;display:inline-block;cursor:text}
#fr .ffill:focus{background:#fff2a8}#fr .line.ffill{display:block;white-space:nowrap;overflow:hidden}
#fr .notes .ffill{display:block;min-height:80%;background:transparent;line-height:18px;white-space:pre-wrap}
#fr .uf{border-bottom:1px solid #889;min-width:40px;padding:0 2px}
#fr .pad{cursor:pointer;background:#fffbe0;position:relative;overflow:hidden;text-align:center}#fr .pad:empty:after{content:"✍";color:#c90;font-size:12px}
#fr .pad img{height:100%;max-width:100%;object-fit:contain}#fr .line.pad{height:30px}
#fr .hv,#fr .bab,#fr .scanbox{position:relative}#fr canvas.draw{position:absolute;inset:0;width:100%;height:100%;touch-action:none;z-index:5}
#fr .need{box-shadow:0 0 0 3px #f33}
.dbar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #ccd;display:flex;gap:6px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));z-index:60;align-items:center;flex-wrap:nowrap;box-shadow:0 -2px 8px rgba(0,0,0,.06)}
.dbar .sw{width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px #aab;padding:0;min-height:0}.dbar .sw.on{box-shadow:0 0 0 3px #111}
.dbar .sp{flex:1}.status{font-size:13px;color:#667}
#modal{position:fixed;inset:0;background:#0008;z-index:100;display:flex;align-items:center;justify-content:center;padding:10px}
#modal .box{background:#fff;border-radius:16px;padding:16px;width:min(900px,100%);max-height:96vh;overflow:auto}
.sigc{width:100%;height:min(50vh,360px);border:2px dashed #99a;border-radius:10px;touch-action:none;background:#fff;display:block}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#222;color:#fff;padding:10px 18px;border-radius:20px;opacity:0;transition:.3s;z-index:200;pointer-events:none}#toast.show{opacity:1}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.thumbs .th{background:#fafbfc;border-radius:10px;overflow:hidden;font-size:13px}.thumbs img{width:100%;height:130px;object-fit:cover;display:block}.thumbs .th div{padding:6px}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cmp img{width:100%;height:55vh;object-fit:contain;background:#111;border-radius:10px}
table.tb{width:100%;border-collapse:collapse;font-size:14px}table.tb td,table.tb th{padding:8px;border-bottom:1px solid #eef;text-align:left}
iframe.pdf{width:100%;height:75vh;border:0;border-radius:10px;background:#ddd}

.dbar .tools{display:flex;gap:6px;align-items:center;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}.dbar .tools::-webkit-scrollbar{display:none}
.dbar .tools>*{flex:none}.dbar #pens{display:flex;gap:6px}.dbar button{min-height:44px;white-space:nowrap}
.dbar .sw{width:36px;height:36px}.dbar .nav{display:flex;gap:6px;flex:none;margin-left:auto}.dbar .nav .sec{min-width:44px}
.dbar button.on{background:#123a8f;color:#fff;border-color:#123a8f}.dbar .tg{min-width:44px;font-size:18px}
.dbar.closed .tools{display:none}.dbar.closed .tg{background:#123a8f;color:#fff}
@media(max-width:700px){.dbar #fin{padding:0 10px;font-size:13px;max-width:34vw;overflow:hidden;text-overflow:ellipsis}.dbar .sm{padding:0 10px;font-size:13px}}
#fr .dclr{position:absolute;top:0;right:0;z-index:6;width:calc(30px*var(--inv,1));height:calc(30px*var(--inv,1));min-height:0;padding:0;border-radius:50%;border:1px solid #c33;background:#fff;color:#c33;font-size:calc(20px*var(--inv,1));line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.2);transform:translate(30%,-30%)}
#fr.erasing canvas.draw{cursor:cell}

.dbar .ti b{font-weight:400;margin-right:5px}.dbar #fin .fs{display:none}
@media(max-width:700px){.dbar #prev,.dbar #next{display:none}.dbar #fin .fl{display:none}.dbar #fin .fs{display:inline}.dbar #fin{max-width:none;padding:0 10px;white-space:nowrap;flex:none}
 .dbar .ti{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 4px;min-width:58px;max-width:86px;line-height:1.05}.dbar .ti b{margin:0;font-size:17px}.dbar .ti span{font-size:10px;white-space:normal;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
 .dbar .tg{min-width:40px;padding:0}.dbar{gap:5px;padding-left:6px;padding-right:6px}}

#fr.panning canvas.draw,#fr.panning .dclr{pointer-events:none}#stage.panning{cursor:grab}