@layer reset,base,tokens,recipes,utilities;:root{--editor-toolbar-height: 48px;--editor-left-panel-width: 260px;--editor-right-panel-width: 260px}body{background:#f5f5f5;overscroll-behavior:none}:root,body,#root{width:100%;height:100%;margin:0;color:#1a1a1a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}.app{position:relative;width:100vw;height:100vh;overflow:hidden}.canvas-event-target{position:absolute;top:0;right:0;bottom:0;left:0;background:transparent;overflow:hidden;touch-action:none}.canvas-area{position:absolute;top:var(--editor-toolbar-height);left:var(--editor-left-panel-width);right:var(--editor-right-panel-width);bottom:0}.center-view{position:fixed;top:var(--editor-toolbar-height);left:var(--editor-left-panel-width);right:var(--editor-right-panel-width);bottom:0}.layers-panel{position:fixed;top:var(--editor-toolbar-height, 48px);left:0;bottom:0;width:var(--editor-left-panel-width, 260px);display:flex;flex-direction:column;background-color:#fff;border-right:1px solid #e0e0e0}.panel-header{padding:12px;font-size:12px;font-weight:600;color:#666;border-bottom:1px solid #e0e0e0}.layers-list{flex:1;overflow-y:auto;padding:8px 0}.layer-item{-webkit-user-select:none;user-select:none}.layer-row{display:flex;align-items:center;gap:4px;height:28px;padding-right:8px;cursor:pointer;transition:background-color .1s}.layer-row:hover,.layer-row.hovered{background-color:#f5f5f5}.layer-row.selected{background-color:#0d99ff1a}.layer-row.selected:hover{background-color:#0d99ff2a}.layer-row.hidden-layer{opacity:.5}.layer-row.root-layer{font-weight:600}.layer-collapse-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:none;border:none;color:#aaa;font-size:8px;cursor:pointer;flex-shrink:0}.layer-collapse-btn:hover:not(:disabled){color:#666}.layer-collapse-btn:disabled{cursor:default}.layer-name{flex:1;font-size:12px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:grab}.layer-name:active{cursor:grabbing}.layer-actions{display:flex;gap:2px;opacity:0;transition:opacity .1s}.layer-row:hover .layer-actions{opacity:1}.layer-action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:none;border:none;border-radius:2px;color:#999;font-size:12px;cursor:pointer}.layer-action-btn:hover{background-color:#f0f0f0}.layer-action-btn.active{color:#0d99ff}.properties-panel{position:fixed;top:var(--editor-toolbar-height, 48px);right:0;bottom:0;width:var(--editor-right-panel-width, 260px);display:flex;flex-direction:column;background-color:#fff;border-left:1px solid #e0e0e0}.panel-tabs{display:flex;border-bottom:1px solid #e0e0e0}.tab-button{flex:1;padding:12px;border:none;background-color:transparent;color:#666;font-size:12px;font-weight:500;cursor:pointer;transition:color .15s,background-color .15s}.tab-button:hover{background-color:#f5f5f5}.tab-button.active{color:#1a1a1a;border-bottom:2px solid #0d99ff}.panel-content{flex:1;overflow-y:auto;padding:12px}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:12px}.property-section{margin-bottom:16px}.section-title{margin-bottom:8px;font-size:11px;font-weight:600;color:#666;text-transform:uppercase}.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.property-row{display:flex;gap:8px}.property-section label{display:flex;align-items:center;gap:8px}.property-section label span{font-size:11px;color:#999;min-width:16px}.property-section input[type=number],.property-section input[type=text]{flex:1;padding:6px 8px;border:1px solid #e0e0e0;border-radius:4px;background-color:#f8f8f8;color:#1a1a1a;font-size:12px}.property-section input[type=number]:focus,.property-section input[type=text]:focus{outline:none;border-color:#0d99ff}.property-section input[type=color]{width:32px;height:32px;padding:0;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer}.property-section select{flex:1;padding:6px 8px;border:1px solid #e0e0e0;border-radius:4px;background-color:#f8f8f8;color:#1a1a1a;font-size:12px;cursor:pointer}.property-section select:focus{outline:none;border-color:#0d99ff}.design-tab{display:flex;flex-direction:column;gap:4px}.code-tab{display:flex;flex-direction:column;height:100%;gap:8px}.code-header{display:flex;justify-content:space-between;align-items:center}.code-toggle{display:flex;gap:2px;background-color:#f0f0f0;padding:2px;border-radius:4px}.toggle-btn{padding:4px 10px;border:none;border-radius:3px;background-color:transparent;color:#999;font-size:11px;cursor:pointer;transition:all .15s}.toggle-btn:hover{color:#666}.toggle-btn.active{background-color:#fff;color:#1a1a1a;box-shadow:0 1px 2px #00000014}.copy-btn{padding:4px 12px;border:1px solid #e0e0e0;border-radius:4px;background-color:transparent;color:#666;font-size:11px;cursor:pointer;transition:all .15s}.copy-btn:hover{background-color:#f0f0f0;color:#1a1a1a}.code-preview{flex:1;margin:0;padding:12px;border-radius:4px;background-color:#f8f8f8;color:#333;font-family:SF Mono,Monaco,Consolas,monospace;font-size:11px;line-height:1.5;overflow:auto;white-space:pre}.code-preview code{color:#0550ae}.toolbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;height:var(--editor-toolbar-height, 48px);padding:0 12px;background-color:#fff;border-bottom:1px solid #e0e0e0}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:4px}.toolbar-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:4px;background-color:transparent;color:#333;font-size:16px;cursor:pointer;transition:background-color .15s}.toolbar-button:hover{background-color:#f0f0f0}.toolbar-button.active{background-color:#0d99ff;color:#fff}.zoom-level{min-width:48px;text-align:center;font-size:12px;color:#666}.toolbar-separator{width:1px;height:24px;margin:0 8px;background-color:#e0e0e0}.component-menu-container{position:relative}.component-menu{position:absolute;top:100%;left:0;margin-top:4px;min-width:180px;padding:4px 0;background-color:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 4px 12px #00000014;z-index:1000}.menu-item{display:block;width:100%;padding:8px 12px;border:none;background-color:transparent;color:#333;font-size:12px;text-align:left;cursor:pointer}.menu-item:hover:not(:disabled){background-color:#f0f0f0}.menu-item:disabled{color:#aaa;cursor:not-allowed}.menu-separator{height:1px;margin:4px 0;background-color:#e0e0e0}.menu-label{padding:8px 12px 4px;font-size:10px;font-weight:600;color:#999;text-transform:uppercase}