:root { --a4w: 210mm; --a4h: 297mm; }
* { box-sizing: border-box; font-family: system-ui, sans-serif; }
body { margin: 0; background:#f5f7fb; color:#111; }
.toolbar { display:flex; gap:.5rem; padding:.75rem 1rem; background:#fff; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:10; flex-wrap: wrap; }
.toolbar button, .toolbar label { padding:.5rem .75rem; border:1px solid #d1d5db; border-radius:.5rem; background:#fff; cursor:pointer; }
.wrapper { display:flex; gap:1rem; padding:1rem; align-items:flex-start; flex-wrap: wrap; }
.canvas-wrap { background: repeating-conic-gradient(#f0f0f0 0% 25%, #fff 0% 50%) 0/20px 20px; padding:1rem; border:1px dashed #e5e7eb; border-radius:8px; overflow:auto; }
.canvas { position: relative; width: var(--a4w); height: var(--a4h); background:#fff; border:1px solid #cbd5e1; background-size: cover; background-position:center; }
.item { position: absolute; border:1px dashed #60a5fa; padding:4px; background: rgba(255,255,255,.85); user-select: none; }
.item.selected { outline:2px solid #2563eb; }
.item .resize { position:absolute; width:10px; height:10px; border:1px solid #2563eb; background:#fff; }
.resize.br { right:-6px; bottom:-6px; cursor: se-resize; }
.panel { width: 360px; max-width: 100%; background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:12px; height: fit-content; }
.panel h3 { margin:.25rem 0 0.75rem; font-size:1rem; }
.panel .row { display:flex; gap:.5rem; margin:.5rem 0; align-items:center; flex-wrap: wrap; }
.panel input[type="text"], .panel select, .panel input[type="number"] { padding:.5rem; border:1px solid #d1d5db; border-radius:.5rem; }
.panel input[type="text"] { width:100%; }
.small { font-size:.85rem; color:#6b7280; }
.bg-note { background:#ecfeff; border:1px solid #a5f3fc; padding:.5rem .75rem; border-radius:.5rem; }
#selFont { max-width: 160px; }
#selStyle { max-width: 140px; }