:root{--background-color: #f0f2f5;--canvas-background: #ffffff;--toolbar-background: #2c3e50;--toolbar-button-hover: #34495e;--toolbar-secondary-button: #34495e;--toolbar-secondary-button-hover: #4a627a;--primary-text: #ffffff;--secondary-text: #bdc3c7;--grid-color: #e0e0e0;--wall-color: #34495e;--wall-preview-color: #3498db;--font-family: "Inter", sans-serif;--delete-color: #e74c3c;--delete-hover-color: #c0392b;--path-color: #2980b9;--start-color: #2ecc71;--end-color: #e74c3c;--state-available-fill: rgba(46, 204, 113, .3);--state-available-stroke: #27ae60;--state-occupied-fill: rgba(231, 76, 60, .4);--state-occupied-stroke: #c0392b;--state-reserved-fill: rgba(241, 196, 15, .4);--state-reserved-stroke: #f39c12}body,html{margin:0;padding:0;width:100%;height:100%;font-family:var(--font-family);background-color:var(--background-color);overflow:hidden;display:flex;flex-direction:column}#page-header{display:flex;align-items:center;justify-content:space-between;padding:0 24px;background-color:var(--toolbar-background);color:var(--primary-text);flex-shrink:0;height:60px;box-shadow:0 2px 4px #0000001a}.header-left{display:flex;align-items:center;gap:24px}#page-header h1{font-size:20px;font-weight:600}#undo-redo-container{display:flex;gap:8px}.header-action-btn{background-color:var(--toolbar-button-hover);border:1px solid var(--toolbar-secondary-button-hover);color:var(--secondary-text);padding:6px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.header-action-btn:hover:not(:disabled){background-color:var(--toolbar-secondary-button-hover);color:var(--primary-text)}.header-action-btn:disabled{opacity:.5;cursor:not-allowed}#page-header nav{display:flex;gap:8px}.view-switch-btn{background-color:transparent;border:1px solid var(--toolbar-button-hover);color:var(--secondary-text);padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.view-switch-btn:hover{background-color:var(--toolbar-button-hover);color:var(--primary-text)}.view-switch-btn.active{background-color:var(--wall-preview-color);color:#fff;border-color:var(--wall-preview-color)}#view-container{flex-grow:1;position:relative;display:flex;min-height:0}#editor-view,#simulator-view{width:100%;height:100%;display:flex;overflow:hidden}#app-container{display:flex;height:100%;width:100%}#toolbar{width:240px;background-color:var(--toolbar-background);padding:16px;box-sizing:border-box;display:flex;flex-direction:column;gap:24px;color:var(--primary-text);flex-shrink:0;overflow-y:auto}.toolbar-header{font-size:14px;font-weight:600;color:var(--secondary-text);text-transform:uppercase;margin:0;padding-bottom:8px;border-bottom:1px solid var(--toolbar-button-hover)}.tool-group{display:flex;flex-direction:column;gap:8px}.tool-button{display:flex;align-items:center;gap:12px;background-color:transparent;border:2px solid transparent;color:var(--secondary-text);padding:12px;border-radius:8px;cursor:pointer;font-size:16px;font-family:var(--font-family);transition:background-color .2s ease,color .2s ease;text-align:left;width:100%}.tool-button:hover{background-color:var(--toolbar-button-hover);color:var(--primary-text)}.tool-button.active{background-color:var(--toolbar-button-hover);color:var(--primary-text);border-color:var(--wall-preview-color)}.tool-button-secondary{display:flex;align-items:center;justify-content:center;gap:8px;background-color:var(--toolbar-secondary-button);border:none;color:var(--primary-text);padding:10px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;font-family:var(--font-family);transition:background-color .2s ease}.tool-button-secondary:hover{background-color:var(--toolbar-secondary-button-hover)}.tool-button svg{flex-shrink:0}#main-content{flex-grow:1;display:flex;overflow:hidden}#canvas-container{flex-grow:1;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box;background-color:var(--background-color)}#canvas-container.panning,#canvas-container:active.panning{cursor:grabbing}#canvas{width:100%;height:100%;background-color:var(--canvas-background);box-shadow:0 4px 12px #0000001a;border-radius:8px;cursor:default;background-image:linear-gradient(var(--grid-color) 1px,transparent 1px),linear-gradient(to right,var(--grid-color) 1px,transparent 1px);background-size:20px 20px}#inspector{width:280px;flex-shrink:0;background-color:#fdfdfd;border-left:1px solid #ddd;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;overflow-y:auto}#inspector h3{margin:0;font-size:18px;font-weight:600;color:var(--toolbar-background);border-bottom:2px solid #e0e0e0;padding-bottom:12px}#inspector-content .placeholder{color:#777;font-style:italic;text-align:center;margin-top:20px}#inspector-actions{display:none;flex-direction:column;gap:12px}.prop-group{display:flex;flex-direction:column;gap:8px}.prop-group-header{font-size:12px;font-weight:600;color:#777;text-transform:uppercase;margin:8px 0 4px;padding-bottom:4px;border-bottom:1px solid #eee}.prop-grid{display:grid;grid-template-columns:20px 1fr 20px 1fr;gap:8px 4px;align-items:center}.prop-grid label{font-weight:500;font-size:13px}.prop-grid input{width:100%;background-color:#eee;border:1px solid #ddd;font-size:12px}.prop-group label{font-size:14px;font-weight:500;color:#555}.prop-group input[type=color],.prop-group select,.prop-group input[type=number],.prop-group input[type=text]{width:100%;padding:8px;border:1px solid var(--grid-color);border-radius:4px;font-size:14px;box-sizing:border-box}.prop-group input[type=color]{padding:0;height:30px;border:none;flex-grow:1}.prop-group input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:#ddd;outline:none;border-radius:4px;opacity:.9;transition:opacity .2s}.prop-group input[type=range]:hover{opacity:1}.prop-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--wall-preview-color);cursor:pointer;border-radius:50%}.color-prop-container{display:flex;align-items:center;gap:8px;border:1px solid var(--grid-color);padding:4px 8px;border-radius:4px}#delete-button{width:100%;padding:12px;background-color:var(--delete-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px;margin-top:16px;transition:background-color .2s;font-weight:500}#delete-button:hover{background-color:var(--delete-hover-color)}.action-buttons-container{display:flex;gap:8px;width:100%}.action-buttons-container button{flex:1;padding:10px;background-color:var(--toolbar-secondary-button);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:background-color .2s,opacity .2s}.action-buttons-container button:hover:not(:disabled){background-color:var(--toolbar-secondary-button-hover)}.action-buttons-container button:disabled{background-color:#95a5a6;cursor:not-allowed;opacity:.6}.path-preview{stroke:var(--wall-preview-color);stroke-width:3;stroke-dasharray:5 5;stroke-linecap:round;fill:none}g[class^=layer-]>*,.object-group{cursor:pointer;vector-effect:non-scaling-stroke}.selection-box{fill:none;stroke:var(--wall-preview-color);stroke-width:1px;stroke-dasharray:4 2;vector-effect:non-scaling-stroke}.multi-selection-box{fill:#3498db1a;stroke:var(--wall-preview-color);stroke-width:1.5px;vector-effect:non-scaling-stroke}.resize-handle{fill:#fff;stroke:var(--wall-preview-color);stroke-width:1px;vector-effect:non-scaling-stroke}.rotation-handle-line{stroke:var(--wall-preview-color);stroke-width:1px;vector-effect:non-scaling-stroke}.rotation-handle-knob{fill:#fff;stroke:var(--wall-preview-color);stroke-width:1px;cursor:grab;vector-effect:non-scaling-stroke}.rotation-handle-knob:active{cursor:grabbing}.resize-handle.nw,.resize-handle.se{cursor:nwse-resize}.resize-handle.ne,.resize-handle.sw{cursor:nesw-resize}.car-icon{pointer-events:none}.wall{stroke:var(--wall-color);stroke-width:5;stroke-linecap:round;fill:none}.road{stroke-width:0;fill:#d3d3d3}.parking-space{stroke:#7f8c8d;stroke-width:0;fill:#bdc3c733;transition:fill .3s,stroke .3s}.poi{stroke:#8e44ad;stroke-width:2;fill:#9b59b64d}.location{stroke:#1abc9c;stroke-width:2;fill:#1abc9c4d}.default-object{stroke:var(--secondary-text);stroke-width:1.5;fill:none}.nav-path{fill:none;stroke:#3498db;stroke-width:4;stroke-opacity:.7}.parking-space.state-available{fill:var(--state-available-fill);stroke:var(--state-available-stroke)}.parking-space.state-occupied{fill:var(--state-occupied-fill);stroke:var(--state-occupied-stroke)}.parking-space.state-reserved{fill:var(--state-reserved-fill);stroke:var(--state-reserved-stroke)}#floor-list{display:flex;flex-direction:column;gap:4px}.floor-item{display:flex;justify-content:space-between;align-items:center;padding:10px;background-color:var(--toolbar-button-hover);border-radius:6px;cursor:pointer;border:2px solid transparent;transition:background-color .2s,border-color .2s}.floor-item.active{border-color:var(--wall-preview-color);color:var(--primary-text)}.floor-item:not(.active){color:var(--secondary-text)}.floor-name{flex-grow:1;background:transparent;border:none;color:inherit;font-size:14px;font-family:var(--font-family)}.floor-name:focus{outline:none;background:#0003;border-radius:4px}.delete-floor-btn{background:none;border:none;color:var(--secondary-text);cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;border-radius:4px}.delete-floor-btn:hover{color:var(--delete-color);background-color:#ffffff1a}#layer-list{display:flex;flex-direction:column;gap:4px}.layer-item{padding:8px;background-color:var(--toolbar-button-hover);border-radius:6px}.layer-item-header{display:flex;align-items:center;justify-content:space-between;color:var(--secondary-text)}.layer-item-header.active{color:var(--primary-text)}.layer-item-name{font-size:14px;font-weight:500}.layer-item-controls{display:flex;align-items:center;gap:8px}.layer-control-btn{background:none;border:none;color:inherit;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;border-radius:4px}.layer-control-btn:hover{background-color:#ffffff1a}.layer-control-btn.active{color:var(--wall-preview-color)}.layer-control-btn svg{width:18px;height:18px}.layer-opacity-slider{width:100%;margin-top:8px}.layer-item.locked{background-color:#4a627a}#simulator-toolbar{width:240px;background-color:var(--toolbar-background);padding:16px;box-sizing:border-box;display:flex;flex-direction:column;gap:24px;color:var(--primary-text);flex-shrink:0;overflow-y:auto}#simulator-main-content{flex-grow:1;display:flex;overflow:hidden}#simulator-canvas-container{flex-grow:1;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box;background-color:var(--background-color)}#simulator-canvas-container.panning,#simulator-canvas-container:active.panning{cursor:grabbing}#simulator-canvas{width:100%;height:100%;background-color:var(--canvas-background);box-shadow:0 4px 12px #0000001a;border-radius:8px;cursor:default;background-image:linear-gradient(var(--grid-color) 1px,transparent 1px),linear-gradient(to right,var(--grid-color) 1px,transparent 1px);background-size:20px 20px}#simulator-canvas.path-finding{cursor:crosshair}#simulator-canvas .parking-space,#simulator-canvas .poi,#simulator-canvas .location{cursor:pointer}#simulator-inspector{width:280px;flex-shrink:0;background-color:#fdfdfd;border-left:1px solid #ddd;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;overflow-y:auto}#simulator-inspector h3{margin:0;font-size:18px;font-weight:600;color:var(--toolbar-background);border-bottom:2px solid #e0e0e0;padding-bottom:12px}#simulator-inspector-content .placeholder{color:#777;font-style:italic;text-align:center;margin-top:20px}#simulator-inspector-content .control-group{margin-top:16px;display:flex;flex-direction:column;gap:12px}#simulator-inspector-content .control-group p{margin:0;font-size:14px}#simulator-inspector-content .control-group p span{font-weight:600;background-color:#eee;padding:2px 6px;border-radius:4px}#simulator-inspector-content .control-buttons{display:flex;flex-direction:column;gap:8px}#simulator-inspector-content .control-buttons button{padding:10px;border-radius:6px;border:1px solid #ccc;background-color:#f0f0f0;cursor:pointer;transition:background-color .2s;font-weight:500}#simulator-inspector-content .control-buttons button:hover{background-color:#e0e0e0}#simulator-floor-list{display:flex;flex-direction:column;gap:4px}.simulator-floor-item{display:flex;justify-content:space-between;align-items:center;padding:10px;background-color:var(--toolbar-button-hover);border-radius:6px;cursor:pointer;border:2px solid transparent;transition:background-color .2s,border-color .2s;color:var(--secondary-text)}.simulator-floor-item.active{border-color:var(--wall-preview-color);color:var(--primary-text)}#route-status{color:var(--secondary-text);font-size:13px;padding:8px;background-color:var(--toolbar-button-hover);border-radius:4px;text-align:center;min-height:1em}.nav-control-group{display:flex;flex-direction:column;gap:4px}.nav-select-container{display:flex;align-items:center;gap:8px}.nav-control-group label{font-size:13px;color:var(--secondary-text);font-weight:500}.nav-control-group select{width:100%;flex-grow:1;padding:8px;background-color:var(--toolbar-button-hover);color:var(--primary-text);border:1px solid var(--toolbar-secondary-button-hover);border-radius:4px;font-family:var(--font-family)}.nav-pick-btn{flex-shrink:0;padding:8px;background-color:var(--toolbar-button-hover);border:1px solid var(--toolbar-secondary-button-hover);color:var(--secondary-text);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.nav-pick-btn:hover{background-color:var(--toolbar-secondary-button-hover);color:var(--primary-text)}.nav-pick-btn.active{background-color:var(--wall-preview-color);border-color:var(--wall-preview-color);color:#fff}#simulator-canvas-container.picking-mode,#simulator-canvas-container.picking-mode .parking-space,#simulator-canvas-container.picking-mode .poi,#simulator-canvas-container.picking-mode .location{cursor:crosshair}.nav-path-line{fill:none;stroke:var(--path-color);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 10;animation:dash-flow 1s linear infinite;pointer-events:none}@keyframes dash-flow{to{stroke-dashoffset:-20}}.nav-marker{stroke:#fff;stroke-width:2px;pointer-events:none}.start-marker{fill:var(--start-color)}.end-marker{fill:var(--end-color)}