:root{--paper:#f4f2ec;--ink:#111;--gray:#8a8a84;--line:2px solid #111;--desk:#cdcabf}
*{box-sizing:border-box;border-radius:0}
html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);
 font:15px/1.3 ui-monospace,"SFMono-Regular",Menlo,Consolas,"Courier New",monospace;
 -webkit-text-size-adjust:100%;touch-action:pan-x pan-y;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.hidden{display:none!important}
button,input,select{font:inherit;color:var(--ink)}
button{background:var(--paper);border:var(--line);padding:0 10px;min-height:44px;min-width:44px;font-weight:700;font-size:13px;letter-spacing:.5px;cursor:pointer;text-transform:uppercase;touch-action:manipulation;white-space:nowrap}
button:active,button.on{background:var(--ink);color:var(--paper)}
button.pri{background:var(--ink);color:var(--paper)}
button.pri:active{background:var(--paper);color:var(--ink)}
button:disabled{color:var(--gray);border-color:var(--gray);background:var(--paper);cursor:default}
button.big{min-height:64px;font-size:20px;width:100%}
input[type=text],input[type=number],input[type=password],input:not([type]){background:#fff;border:var(--line);min-height:44px;padding:0 8px;min-width:0}
.mut{font-size:13px}
.err{border:var(--line);background:var(--ink);color:var(--paper);padding:10px;font-weight:700;margin-top:10px}
h1{font-size:22px;margin:0 0 14px;text-transform:uppercase;letter-spacing:1px}

#top{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;border-bottom:var(--line)}
#fname{grid-column:1/-1;font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:18px}
#tools{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:6px;border-bottom:var(--line)}
#tools button{padding:0 2px;min-height:42px;font-size:12px}
#props{display:flex;gap:6px;align-items:center;padding:6px;border-bottom:var(--line);overflow-x:auto;min-height:56px;white-space:nowrap;scrollbar-width:none}
#props::-webkit-scrollbar{display:none}
#props>*{flex:none}
#props .grp{display:flex;gap:4px;align-items:center}
#props .sw{width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border:var(--line);position:relative}
#props .sw.on{outline:3px solid var(--ink);outline-offset:2px;background:inherit}
#props .sw.white{background:#fff}
#props .sw.cust{background:conic-gradient(#d11a1a,#ffe600,#1a7f37,#1456d6,#d11a1a);overflow:hidden}
#props .sw input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
#props .wd{min-width:40px;padding:0 6px;min-height:40px}
#props .wd i{display:block;background:currentColor;width:22px;margin:0 auto}
#props .num{width:62px;text-align:center}
#props .sep{width:2px;align-self:stretch;background:var(--ink);margin:0 2px}
#props .hint{font-size:13px}
#props button{min-height:40px}

#work{flex:1;min-height:0;display:flex;position:relative}
#viewer{flex:1;min-width:0;overflow:auto;background:var(--desk);position:relative;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;outline:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#pages{width:max-content;min-width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 14px 40px;transform-origin:0 0}
#pages.zooming{will-change:transform}
.pg{position:relative;background:#fff;flex:none;box-shadow:0 0 0 2px #111,5px 5px 0 2px #111;margin-right:5px}
.pg canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.pg .mk{touch-action:pan-x pan-y}
#pages.draw .mk{touch-action:none;cursor:crosshair}
#pages.t-select .mk{cursor:default}
#pages.t-erase .mk{touch-action:none;cursor:cell}
#pages.t-text .mk,#pages.t-note .mk{cursor:text}
.pg .no{position:absolute;left:0;top:-1px;transform:translateY(-100%);font-size:11px;font-weight:700;display:none}
.sel{position:absolute;border:2px dashed #111;outline:2px solid #fff;touch-action:none;cursor:move;z-index:5}
.sel.ln{border:0;outline:0;height:26px;margin-top:-13px;transform-origin:0 50%}
.sel.ln::before{content:"";position:absolute;left:0;right:0;top:12px;border-top:2px dashed #111}
.sel .h{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;background:#fff;border:2px solid #111;touch-action:none}
.sel .h::after{content:"";position:absolute;inset:-12px}
.sel .h.nw,.sel .h.se{cursor:nwse-resize}.sel .h.ne,.sel .h.sw{cursor:nesw-resize}.sel .h.e,.sel .h.w{cursor:ew-resize}.sel .h.p{cursor:move}
.ed{position:absolute;margin:0;border:2px dashed #111;outline:none;resize:none;overflow:hidden;background:rgba(255,255,255,.7);transform-origin:0 0;z-index:6;font-size:16px;line-height:1.2;white-space:pre-wrap;word-wrap:break-word;user-select:text;-webkit-user-select:text;touch-action:auto;border-radius:0}

#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px}
#empty .card{border:var(--line);background:var(--paper);padding:18px;max-width:440px;width:100%;box-shadow:5px 5px 0 #111}
#empty p{margin:12px 0 0}
#viewer.drag{outline:4px dashed #111;outline-offset:-8px}
#thumbs{width:136px;flex:none;overflow:auto;border-right:var(--line);background:var(--paper);padding:8px;position:relative}
#thumbs .th{display:block;width:100%;padding:0;margin:0 0 10px;border:var(--line);background:#fff;min-height:0;position:relative;text-transform:none}
#thumbs .th canvas{display:block;position:absolute;left:0;top:0;width:100%;height:100%}
#thumbs .th b{position:absolute;left:0;bottom:0;background:var(--paper);border:var(--line);border-width:2px 2px 0 0;padding:0 5px;font-size:12px}
#thumbs .th.cur{outline:4px solid #111;outline-offset:2px}
#thumbs .th.cur b{background:var(--ink);color:var(--paper)}
#bar{display:flex;gap:4px;align-items:center;justify-content:center;padding:6px;border-top:var(--line);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
#bar button{padding:0 6px;min-width:40px}
#bar>*{flex:none}
#pnav{display:flex;align-items:center;gap:2px;font-weight:700}
#pNum{width:48px;text-align:center;padding:0}
#zFit{min-width:56px}

#dim{position:fixed;inset:0;background:rgba(244,242,236,.8);display:flex;align-items:center;justify-content:center;z-index:50;padding:12px}
#dlg{background:var(--paper);border:var(--line);box-shadow:6px 6px 0 #111;padding:16px;width:100%;max-width:460px;max-height:100%;overflow:auto}
#dlg h2{margin:0 0 10px;font-size:18px;text-transform:uppercase}
#dlg p{margin:8px 0}
#dlg .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
#dlg .btns button{flex:1 1 auto}
#dlg input{width:100%}
#dlg canvas{display:block;width:100%;border:var(--line);background:#fff;touch-action:none}
#dlg img.sigp{display:block;max-width:100%;border:var(--line);background:#fff;padding:6px}
#dlg label{display:flex;gap:8px;align-items:center;margin-top:10px;min-height:36px}
#dlg label input{width:24px;min-height:24px}
#busy{position:fixed;inset:0;background:rgba(244,242,236,.8);display:flex;align-items:center;justify-content:center;z-index:60;padding:12px}
#busy .card{border:var(--line);background:var(--paper);padding:16px;width:100%;max-width:360px;box-shadow:6px 6px 0 #111;font-weight:700}
#busy .bar{height:16px;border:var(--line);margin-top:10px;background:#fff}
#busy .bar i{display:block;height:100%;width:0;background:var(--ink)}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(70px + env(safe-area-inset-bottom));background:var(--ink);color:var(--paper);padding:10px 14px;font-weight:700;z-index:70;max-width:92vw;border:2px solid var(--paper);outline:2px solid var(--ink)}

@media (min-width:760px){
 #top{display:flex;align-items:center}
 #fname{flex:1;min-width:0;order:0;font-size:15px}
 #top button{min-width:96px}
 #tools{display:flex}
 #tools button{flex:1;font-size:13px}
 #thumbs{width:160px}
}
@media (max-width:759px){
 #thumbs{position:absolute;left:0;top:0;bottom:0;z-index:20;width:150px;box-shadow:5px 0 0 #111}
 #pages{padding:10px 10px 40px}
}
@media (max-height:480px){
 #tools{grid-template-columns:repeat(12,1fr)}
 #tools button{min-height:36px}
}