*{box-sizing:border-box}
body{margin:0;font-family:system-ui;height:100vh;display:flex;flex-direction:column}
#toolbar{background:#1f2937;color:#fff;padding:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;position:sticky;top:0;z-index:50}
.sep{width:1px;height:22px;background:#4b5563;margin:0 4px;display:inline-block}
#layout{flex:1;display:flex;min-height:0}
#viewer{flex:1;background:#0b0f18;overflow:auto;position:relative}
#pages{padding:18px 0}
.pageWrap{position:relative;margin:14px auto;background:#111827;border:1px solid #1f2937;border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.35);width:fit-content}
.pageInner{position:relative}
.pageInner canvas{display:block}
.pageInner .pdfCanvas{position:absolute;inset:0;z-index:0}
.pageInner .drawCanvas{position:absolute;inset:0;z-index:1;touch-action:none;outline:none;cursor:crosshair}
.pageInner .uiCanvas{position:absolute;inset:0;z-index:2;pointer-events:none}
.pageLabel{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:4px 8px;border-radius:999px;z-index:3}
#statusBar{position:sticky;bottom:0;background:#0b1220;color:#cbd5e1;padding:6px 10px;font-size:12px;border-top:1px solid #334155}
#properties{width:340px;background:#f9fafb;padding:12px;border-left:1px solid #e5e7eb;overflow:auto}
.hidden{display:none}
textarea{width:100%;resize:vertical}
label{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.hint{font-size:12px;color:#6b7280;margin-top:6px;line-height:1.35}