:root{font-family:Inter,Segoe UI,sans-serif;color:#0f172a;background-color:#f1f5f9;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0}#root{width:100vw;height:100vh}button,input,select{font:inherit}.editor-root{display:grid;grid-template-rows:auto 1fr;width:100%;height:100%}.editor-content{display:grid;grid-template-columns:1fr 380px;min-height:0}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#fff;border-bottom:1px solid #d7dee8}.toolbar-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar-label{color:#475569;font-size:13px}.toolbar-select,.toolbar-button,.panel-add-button{border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#1e293b;padding:7px 10px}.toolbar-button,.panel-add-button{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.toolbar-button:hover,.panel-add-button:hover{background:#f8fafc}.canvas-view{background:#e2e8f0;position:relative;overflow:auto;min-width:0;padding:12px;display:flex;align-items:flex-start;justify-content:center}.canvas-wrapper{position:relative;flex:0 0 auto;box-shadow:0 16px 44px #0f172a33;background:#fff}.canvas-wrapper canvas{display:block}.toolbar-zoom-controls{display:inline-flex;align-items:center;gap:4px;background:#0f172a;color:#fff;border-radius:8px;padding:4px}.toolbar-zoom-controls span{min-width:44px;text-align:center;font-size:12px}.toolbar-zoom-controls button{border:0;width:26px;height:26px;border-radius:6px;display:grid;place-items:center;cursor:pointer;background:#ffffff29;color:#fff}.toolbar-zoom-controls button:hover{background:#ffffff47}.selection-menu{position:absolute;z-index:40;display:inline-flex;align-items:center;gap:2px;background:#2563eb;border-radius:8px;padding:4px;box-shadow:0 8px 24px #2563eb66}.selection-menu button{border:0;background:transparent;color:#fff;border-radius:6px;width:30px;height:30px;display:grid;place-items:center;cursor:pointer}.selection-menu button:hover{background:#fff3}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172a73;color:#fff;display:grid;place-items:center;font-size:20px;font-weight:600;z-index:50}.drop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#2563eb38;border:2px dashed #1d4ed8;display:grid;place-items:center;z-index:70}.drop-overlay-card{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600}.sidebars{display:grid;grid-template-rows:1fr 1fr;gap:10px;padding:10px;background:#e2e8f0;border-left:1px solid #d7dee8;overflow:auto}.panel{background:#fff;border:1px solid #d7dee8;border-radius:12px;padding:12px;overflow:auto}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.panel-header h3{margin:0;font-size:14px;text-transform:uppercase;color:#334155}.layer-list{display:grid;gap:8px}.layer-item{border:1px solid #d7dee8;border-radius:10px;display:grid;grid-template-columns:1fr auto;overflow:hidden}.layer-item--active{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.layer-main{border:0;background:transparent;display:flex;align-items:center;gap:8px;text-align:left;padding:8px;cursor:pointer}.layer-main input{border:1px solid #94a3b8;border-radius:6px;padding:2px 4px;min-width:70px}.layer-type{font-size:10px;color:#64748b;font-weight:700}.layer-name{font-size:13px;overflow:hidden;text-overflow:ellipsis}.layer-actions{display:flex;align-items:center}.layer-actions button{border:0;width:28px;height:28px;display:grid;place-items:center;background:transparent;color:#334155;cursor:pointer}.layer-actions button:hover{background:#f1f5f9}.property-section{display:grid;gap:10px}.property-section h4{margin:0;font-size:14px;color:#0f172a}.property-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.property-grid button{border:1px solid #cbd5e1;border-radius:8px;background:#fff;padding:8px;cursor:pointer;font-size:12px}.property-grid button:hover{background:#f8fafc}.property-label{display:grid;gap:4px;font-size:12px;color:#334155}.property-label input,.property-label select,.property-label textarea{width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:8px;background:#fff}.empty-state{margin:0;color:#64748b;font-size:13px}