:root{--toolbar-height: 48px;--sidebar-width: 200px;--statusbar-height: 28px;--bg: #1e1e2e;--bg-toolbar: #2a2a3c;--bg-sidebar: #252535;--bg-canvas: #333333;--bg-statusbar: #2a2a3c;--border: #3a3a4e;--text: #e0e0e8;--text-dim: #8888a0;--accent: #6c8ce2;--accent-hover: #8ca5f0;--danger: #e26c6c;--grid-color: rgba(255, 255, 255, .08);--selection-color: #6c8ce2}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:13px;color:var(--text);background:var(--bg)}#app{display:flex;flex-direction:column}.toolbar{height:var(--toolbar-height);background:var(--bg-toolbar);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0}.toolbar-group{display:flex;align-items:center;gap:6px;padding-right:12px;border-right:1px solid var(--border);height:32px}.toolbar-group:last-child{border-right:none}.toolbar button{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:12px;white-space:nowrap;transition:background .15s,border-color .15s}.toolbar button:hover{background:var(--accent);border-color:var(--accent)}.toolbar button:disabled{opacity:.4;cursor:not-allowed}.toolbar button.active{background:var(--accent);border-color:var(--accent)}.toolbar .scale-display{cursor:pointer;padding:4px 10px;border-radius:4px;border:1px solid var(--border);background:var(--bg);font-size:12px;white-space:nowrap}.toolbar .scale-display:hover{border-color:var(--accent)}.toolbar .scale-display.unset{color:var(--danger);font-style:italic}.toolbar .grid-size-input{width:60px;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:4px 6px;border-radius:4px;font-size:12px}.toolbar label{font-size:11px;color:var(--text-dim)}.main-area{flex:1;display:flex;overflow:hidden;min-height:0}.sidebar{width:var(--sidebar-width);background:var(--bg-sidebar);border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0;padding:8px}.sidebar-hint{color:var(--danger);font-size:11px;padding:8px 4px;text-align:center;font-style:italic}.svg-library-item{display:flex;flex-direction:column;align-items:center;padding:8px 4px;margin-bottom:4px;border-radius:6px;cursor:grab;border:1px solid transparent;transition:border-color .15s,background .15s}.svg-library-item:hover{border-color:var(--accent);background:#6c8ce21a}.svg-library-item.disabled{opacity:.3;cursor:not-allowed}.svg-library-item.disabled:hover{border-color:transparent;background:transparent}.svg-library-item .thumb{width:64px;height:48px;display:flex;align-items:center;justify-content:center;pointer-events:none}.svg-library-item .thumb svg{max-width:100%;max-height:100%}.svg-library-item .label{font-size:10px;color:var(--text-dim);margin-top:4px;text-align:center}.canvas-container{flex:1;position:relative;overflow:hidden;background:var(--bg-canvas);cursor:default}.canvas-container.panning{cursor:grab}.canvas-container.panning.active-pan{cursor:grabbing}.canvas-container.measuring,.canvas-container.calibrating{cursor:crosshair}.plan-canvas{display:block;width:100%;height:100%}.selection-outline{fill:none;stroke:var(--selection-color);stroke-width:1.5;stroke-dasharray:4 2;pointer-events:none}.rotation-handle{fill:var(--accent);stroke:#fff;stroke-width:1;cursor:grab}.rotation-line{stroke:var(--accent);stroke-width:1;stroke-dasharray:2 2;pointer-events:none}.measure-line{stroke:var(--accent);stroke-width:1.5;pointer-events:none}.measure-label{fill:var(--text);font-size:12px;pointer-events:none;paint-order:stroke;stroke:var(--bg);stroke-width:3}.drag-ghost{opacity:.6;pointer-events:none}.status-bar{height:var(--statusbar-height);background:var(--bg-statusbar);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:20px;font-size:11px;color:var(--text-dim);flex-shrink:0}.status-bar .status-item{display:flex;align-items:center;gap:4px}.status-bar .status-zoom{margin-left:auto}.status-bar .zoom-input{width:50px;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:2px 4px;border-radius:3px;font-size:11px;text-align:right}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-dialog{background:var(--bg-toolbar);border:1px solid var(--border);border-radius:8px;padding:20px 24px;min-width:300px;max-width:400px;box-shadow:0 8px 32px #0006}.modal-dialog h3{margin-bottom:12px;font-size:15px}.modal-dialog p{margin-bottom:16px;color:var(--text-dim);line-height:1.5}.modal-dialog .input-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}.modal-dialog input{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:4px;font-size:13px;width:80px}.modal-dialog .dialog-buttons{display:flex;justify-content:flex-end;gap:8px}.modal-dialog button{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:6px 16px;border-radius:4px;cursor:pointer;font-size:13px}.modal-dialog button.primary{background:var(--accent);border-color:var(--accent)}.modal-dialog button.primary:hover{background:var(--accent-hover)}.modal-dialog button:hover{border-color:var(--accent)}.modal-dialog button.danger{background:var(--danger);border-color:var(--danger)}.modal-dialog .measured-info{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:10px 12px;margin-bottom:12px;font-size:12px}.modal-dialog .measured-info .label{color:var(--text-dim);display:inline-block;width:110px}.upload-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:var(--bg-canvas);z-index:5}.upload-overlay .upload-text{color:var(--text-dim);font-size:15px}.upload-overlay .upload-button{background:var(--accent);border:none;color:#fff;padding:10px 24px;border-radius:6px;cursor:pointer;font-size:14px}.upload-overlay .upload-button:hover{background:var(--accent-hover)}.placed-element{cursor:move}.placed-element:hover .element-hover-outline{stroke:#6c8ce280}.element-hover-outline{fill:none;stroke:transparent;stroke-width:1;pointer-events:none}