.canvas-tools{background:#fbfcf8;border-bottom:1px solid #e5e9de;padding:10px 14px;font-size:11px;display:flex;flex-direction:column;gap:9px}.paper-tools{display:flex;align-items:center;gap:7px}.paper-tools>label{color:#7c8970;font-size:10px}.paper-tools select{background:#fff;border:1px solid #dfe5d7;border-radius:5px;padding:6px;font-size:11px;max-width:155px;min-width:90px}.paper-tools button{font-size:10px;border:1px solid #dfe5d7;border-radius:5px;padding:6px 8px;background:#fff;white-space:nowrap}.paper-tools #fitPaper{font-size:15px;padding:3px 8px;margin-left:auto}.paper-tools #fitA4{background:#edf2e7;border-color:#dce4d2;color:#52683e}.canvas-options{display:flex;align-items:center;gap:12px;color:#7f8c72;font-size:10px}.canvas-options label{display:flex;align-items:center;gap:4px;white-space:nowrap}.canvas-options input{width:11px;height:11px;margin:0;accent-color:#6c8059}.canvas-options #canvasFitStatus{margin-left:auto;font-size:9px;color:#6f8858;white-space:nowrap}.canvas-options #canvasFitStatus:before{content:'●';font-size:6px;margin-right:4px}.canvas-options #canvasFitStatus.overflows{color:#bf5933}#drawing{padding:0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}#drawing.is-dragging{cursor:grabbing}.resize-handle{cursor:move;outline:none}.resize-handle .handle-dot{fill:#fff;stroke:#bd714c}.resize-handle path{stroke:#bd714c;pointer-events:none}.resize-handle:hover .handle-dot,.resize-handle:focus .handle-dot,.resize-handle.is-selected .handle-dot{fill:#c56a42;stroke:#fff}.resize-handle:hover path,.resize-handle:focus path,.resize-handle.is-selected path{stroke:white}.resize-handle:focus .handle-dot{filter:drop-shadow(0 0 2px #576e40)}.canvas-selected>div{border-color:#b27b50;background:#fffaf2}.canvas-selected{color:#9c693c}.canvas .canvas-note{pointer-events:none;top:13px;left:14px;opacity:.7}.canvas .canvas-note #canvasName{font-size:7px}.canvas .canvas-note #templateId{font-size:7px}.canvas-gesture-hint{position:absolute;left:14px;right:14px;bottom:50px;text-align:center;font-size:9px;line-height:1.5;color:#98a28c;pointer-events:none}.canvas-bottom{pointer-events:none}.canvas-bottom .zoom{pointer-events:auto}.canvas{background:#eff2ea;height:clamp(320px,43vh,540px)}#directEditor{position:absolute;right:13px;top:13px;width:154px;background:white;border:1px solid #dbe2d1;border-radius:7px;padding:9px;z-index:3}#directEditor>div{display:flex;gap:5px;align-items:center;justify-content:space-between}#directEditor label{font-size:11px;color:#697e55}#closeDirect{color:#9aab8b;font-size:17px;padding:0 2px}#directEditor>div:last-child{border:1px solid #e4e8dc;border-radius:4px;margin-top:7px}#directValue{width:80px;min-width:0;font-size:12px;padding:7px;border:0;outline:0;font-variant-numeric:tabular-nums}#directUnit{font-size:10px;color:#8c9a7f}#directEditor button[type=submit]{padding:6px;color:#5d7746;font-size:14px}.canvas-options label:hover{color:#4d633d}.paper-tools button:hover{background:#e8efdf}.canvas:not(:has(#drawing[style*="display: none"])) #directEditor{display:block}.canvas:has(#drawing[style*="display: none"]) .canvas-gesture-hint{display:none}
@media(max-width:1150px){.canvas-tools{padding:9px 10px}.canvas-options{gap:8px;font-size:9px}.canvas-options #canvasFitStatus{font-size:8px}.paper-tools{gap:5px}.paper-tools select{font-size:10px;width:110px}.paper-tools button{padding:6px;font-size:9px}.paper-tools>label{display:none}}
@media(max-width:850px){.canvas{height:400px}.canvas-tools{padding:9px 12px}.paper-tools select{width:auto}.canvas-options{font-size:10px}.canvas-options #canvasFitStatus{font-size:9px}.canvas-options{flex-wrap:wrap;gap:7px 13px}.canvas-gesture-hint{font-size:9px}.canvas #directEditor{width:145px}}
@media(max-width:580px){.canvas{height:440px}.canvas-tools{padding:10px}.paper-tools{flex-wrap:wrap}.paper-tools select{font-size:11px;max-width:130px}.paper-tools button{font-size:10px}.canvas-options{font-size:10px;gap:9px}.canvas-options #canvasFitStatus{flex-basis:100%;margin-left:0}.canvas-gesture-hint{max-width:220px;margin:auto}.canvas-note{display:none}#directEditor{top:10px;right:10px;width:142px}.scale-note{max-width:150px}}
.canvas:has(#drawing[style*="display: none"]) #directEditor{display:none}
@media print{.canvas-tools,#directEditor,.canvas-gesture-hint,.canvas-note,.canvas-bottom{display:none!important}.canvas #drawing{padding:0!important;cursor:default}}