:root{--blue: #004EA8;--blue-dark: #003B80;--blue-tint: #EBEFF2;--steel: #B8C7DB;--strong: #1A1A1A;--body: #4D4D4D;--muted: #8A8A8A;--bg: #fff;--subtle: #F5F7F8;--border: #E0E0E0;--light: #EDEDED;--radius: 4px;--radius-lg: 6px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:flex;flex-direction:column;font:400 14px/1.45 Poppins,system-ui,sans-serif;color:var(--body);background:var(--bg)}h1{margin:0;font-size:20px;font-weight:600;color:var(--blue);letter-spacing:0}h2{margin:0 0 8px;font-size:20px;font-weight:600;color:var(--blue)}header,.bar{display:flex;align-items:center;gap:8px;padding:8px 16px}header{gap:16px;border-bottom:1px solid var(--light)}.bar{background:var(--subtle);flex-wrap:wrap}.grow{flex:1}.muted{color:var(--muted);font-size:12px}.sep{width:1px;height:24px;background:var(--border);margin:0 4px}section{flex:1;min-height:0;display:flex;flex-direction:column}section[hidden]{display:none}button{font:500 14px Poppins,system-ui,sans-serif;height:32px;padding:0 16px;border-radius:var(--radius);border:1px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer}button:hover{background:var(--blue-dark)}button.secondary,.bar button,nav button{background:#fff;color:var(--blue)}button.secondary:hover,.bar button:hover{background:var(--blue-tint)}.bar button svg{display:block}.bar button.on{background:var(--blue);color:#fff}button:disabled{opacity:.4;cursor:default;background:#fff}nav{display:flex;gap:8px}nav button{border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--strong)}nav button.on{border-bottom-color:var(--blue);color:var(--blue)}nav button:hover{background:none}input,select{font:400 14px Poppins,system-ui,sans-serif;height:32px;padding:0 8px;border:1px solid var(--border);border-radius:var(--radius);background:#fff}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #004ea826}input[type=number]{width:64px}input[type=color]{width:36px;padding:2px}input.small{width:56px}label{font-size:12px;font-weight:500;color:var(--strong);display:inline-flex;align-items:center;gap:6px}#canvas{flex:1;overflow:auto;background:#d9dee3;padding:16px}#pages{display:flex;flex-direction:column;align-items:center;gap:16px;width:max-content;min-width:100%}.page{position:relative;background:#fff;flex:none}.page canvas,.page svg{position:absolute;inset:0;width:100%;height:100%}.page svg{touch-action:none}body[data-tool=text] .page svg,body[data-tool=cal] .page svg,body[data-tool=dist] .page svg,body[data-tool=poly] .page svg,body[data-tool=area] .page svg{cursor:crosshair}#empty{text-align:center;margin-top:80px}#pages:not(:empty)+#empty{display:none}footer{padding:4px 16px;border-top:1px solid var(--light);min-height:28px}#thumbs{flex:1;overflow:auto;display:flex;flex-wrap:wrap;gap:16px;align-content:flex-start;padding:24px}.thumb{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:var(--radius-lg);cursor:pointer}.thumb{position:relative}.thumb.before:before,.thumb.after:after{content:"";position:absolute;top:0;bottom:0;width:4px;background:var(--blue);border-radius:2px}.thumb.before:before{left:-10px}.thumb.after:after{right:-10px}.thumb:hover{background:var(--subtle)}.thumb.on{background:var(--blue-tint);outline:2px solid var(--blue)}.thumb canvas{border:1px solid var(--border);background:#fff;pointer-events:none}.thumb span{font-size:12px}.pg{display:inline-flex;align-items:center;gap:4px;font-size:12px;margin-left:8px}.pg input{width:56px}.saved{color:var(--success);font-size:12px;font-weight:500}#warn{position:fixed;bottom:48px;left:50%;transform:translate(-50%);z-index:20;display:flex;align-items:center;gap:16px;padding:12px 16px;background:#fff;border:1px solid var(--border);border-left:3px solid var(--warning, #E0A100);border-radius:var(--radius-lg);font-size:14px;color:var(--strong)}#warn[hidden]{display:none}dialog{border:1px solid var(--light);border-radius:var(--radius-lg);padding:24px;min-width:320px}dialog::backdrop{background:#0000004d}dialog .row{display:flex;gap:8px;margin:8px 0}dialog .row.end{justify-content:flex-end;margin-top:16px}dialog .check{display:flex;margin:8px 0;font-weight:400;font-size:14px}