.app{display:flex;flex-direction:column;height:100vh;background-color:#1a1a1a;color:#f0f0f0}.header{padding:1rem 2rem;background-color:#2a2a2a;border-bottom:1px solid #444}.header h1{margin:0;color:#7c3aed}.header p{margin:.5rem 0;color:#ccc}.main{flex:1;display:flex;padding:1rem;gap:2rem;overflow:hidden}.designer{flex:1;display:flex;gap:2rem;overflow:hidden}.preview{flex:1;display:flex;overflow:hidden}.component-tree{flex:2;overflow-y:auto;padding:1rem;background-color:#2a2a2a;border-radius:12px}.component-box{background-color:#eee;border:2px solid #555;border-radius:12px;padding:.7rem;position:relative;transition:all .2s ease;min-width:10em;min-height:1.5em;box-shadow:0 4px 12px #0000004d}.component-container{min-height:5em}.children-container{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1rem}.component-content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.component-label{font-weight:700;color:#7c3aed;cursor:pointer;padding:.25rem .5rem;border-radius:4px}.component-label:hover{background-color:#444}.ellipsis{font-size:1.5rem;color:#666;-webkit-user-select:none;user-select:none;opacity:.7}.component-actions{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.5rem}.component-actions button{width:24px;height:24px;border-radius:50%;border:none;background-color:#555;color:#fff;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.component-actions button:hover{background-color:#7c3aed}.component-actions button:first-child:hover{background-color:#10b981}.component-actions button:last-child:hover{background-color:#ef4444}input[type=text]{background-color:#444;border:1px solid #555;border-radius:4px;color:#fff;padding:.25rem .5rem;font-size:1rem}input[type=text]:focus{outline:none;border-color:#7c3aed}.insertion-preview{background-color:#888;border-radius:8px;height:40px;margin:4px 0;opacity:.7;border:2px dashed #aaa}.entity-path-display{display:flex;flex-direction:column;align-items:center;cursor:default}.component-actions{display:none}.designer .component-box:hover>.component-actions{display:flex}.entity-label{font-size:.9rem;color:#ccc;font-weight:700}.property-label{font-size:1.2rem;color:#ccc;font-weight:700}.context-menu{position:fixed;background-color:#2a2a2a;border-radius:8px;border:1px solid #444;box-shadow:0 4px 20px #00000080;z-index:1000;min-width:300px;overflow:hidden;animation:fadeIn .15s ease-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.menu-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background-color:#333;border-bottom:1px solid #444}.menu-header h5{margin:0;font-size:1.1rem;color:#ccc}.close-btn{background:none;border:none;color:#888;font-size:1.2rem;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%}.close-btn:hover{background-color:#444;color:#fff}.accordion{max-height:300px;overflow-y:auto;padding:.5rem}.accordion-item{border-radius:6px;margin-bottom:.25rem;overflow:hidden;background-color:#333}.accordion-title{padding:.75rem 1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:700;color:#fff;-webkit-user-select:none;user-select:none}.accordion-title:hover{background-color:#3a3a3a}.accordion-icon{font-size:1.2rem;color:#888}.accordion-content{background-color:#2a2a2a;border-top:1px solid #444}.property-option{padding:.75rem .5rem .75rem 2rem;cursor:pointer;color:#ddd;font-size:1.1rem}.property-option:hover{background-color:#3a3a3a;color:#fff}.menu-options{display:flex;flex-direction:column;padding:.5rem}.menu-option{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;border-radius:6px;margin-bottom:.25rem}.menu-option:hover{background-color:#3a3a3a}.option-icon{font-size:1.2rem;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:#444}.option-label{color:#ddd;font-size:.9rem}.cursor-move{cursor:move}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.preview-view{flex:1;display:flex;flex-direction:column;padding:1rem}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.preview-header h2{margin:0;color:#7c3aed}.preview-close-button{background:none;border:none;color:#888;font-size:1.2rem;cursor:pointer;padding:.5rem;border-radius:4px}.preview-close-button:hover{background-color:#444;color:#fff}.preview-components{flex:1;overflow-y:auto;padding:1rem;background-color:#2a2a2a;border-radius:12px}.preview-component{margin-bottom:.5rem}.preview-component-label{font-size:.9rem;color:#ccc}.preview-children{margin-left:20px;margin-top:.5rem}.entity-properties select{color:#333;background-color:#fff}.entity-properties select option{background-color:#fff;color:#333}.type-select{font-weight:700}.type-select.type-string{background-color:#3b82f6;color:#fff}.type-select.type-number{background-color:#22c55e;color:#fff}.type-select.type-entity{background-color:#eab308;color:#333}.entity-type-select{font-weight:700}[data-part=content]{background-color:#333!important;color:#fff!important;border:1px solid #555!important}[data-part=item][data-highlighted]{background-color:#555!important}[data-part=item]{background-color:transparent!important;color:#fff!important}[data-tab-trigger][data-selected]{color:#fff!important;background-color:#444!important}.menu-option,.property-option{color:#ddd!important}.menu-option:hover,.property-option:hover,.menu-option:focus,.property-option:focus{background-color:#3a3a3a!important;color:#fff!important}.menu-option:active,.property-option:active{background-color:#555!important;color:#fff!important}.preview-exit-btn{color:#ddd!important}.preview-exit-btn:hover{background-color:#444!important}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%;height:100vh}