*{margin:0;padding:0;box-sizing:border-box}:root{--bg-color: #f8fafc;--panel-bg: #ffffff;--text-color: #0f172a;--grey-color: #64748b;--border-color: #e2e8f0;--primary-color: #3b82f6;--primary-hover: #2563eb;--selected-bg: #eff6ff}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-color);color:var(--text-color);overflow:hidden}.app{display:flex;flex-direction:column;height:100vh}.editor{display:flex;flex-direction:column;flex:1;overflow:hidden}.editor-main{display:flex;flex:1;overflow:hidden}.toolbar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--panel-bg);border-bottom:1px solid var(--border-color)}.toolbar-section{display:flex;align-items:center;gap:4px}.toolbar-divider{padding-left:12px;margin-left:4px;border-left:1px solid var(--border-color)}.tool-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:18px;color:var(--text-color);transition:background .15s}.tool-button:hover{background:var(--selected-bg)}.tool-button.active{background:var(--primary-color);color:#fff}.tool-icon{font-size:16px}.zoom-label{font-size:12px;color:var(--grey-color);min-width:45px;text-align:center}.canvas-container{flex:1;background:var(--bg-color);position:relative;overflow:hidden}.canvas{width:100%;height:100%;display:block}.zoom-indicator{position:absolute;bottom:16px;left:16px;padding:4px 8px;background:#000000b3;color:#fff;font-size:12px;border-radius:4px}.panels{width:280px;display:flex;flex-direction:column;background:var(--panel-bg);border-left:1px solid var(--border-color);overflow-y:auto}.panel{padding:16px;border-bottom:1px solid var(--border-color)}.panel h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--grey-color);margin-bottom:12px}.property-group{margin-bottom:16px}.property-group>label{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--grey-color);margin-bottom:8px}.property-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.property-field{display:flex;align-items:center;gap:4px;flex:1}.property-label{font-size:11px;color:var(--grey-color);min-width:16px}.property-value{font-size:11px;color:var(--grey-color);min-width:35px;text-align:right}input[type=number],input[type=text],select{flex:1;padding:6px 8px;border:1px solid var(--border-color);border-radius:4px;font-size:13px;font-family:inherit;background:var(--panel-bg)}input[type=number]:focus,input[type=text]:focus,select:focus{outline:none;border-color:var(--primary-color)}input[type=range]{flex:1;height:4px;-webkit-appearance:none;background:var(--border-color);border-radius:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--primary-color);border-radius:50%;cursor:pointer}.color-input{width:32px;height:32px;padding:0;border:1px solid var(--border-color);border-radius:4px;cursor:pointer}.color-text{flex:1;font-family:SF Mono,Monaco,monospace;font-size:12px}.text-input{width:100%}.checkbox-label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}.layers-panel{flex:1;min-height:200px}.layer-quick-actions{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}.layer-quick-btn{padding:4px 8px;font-size:11px;border:1px solid var(--border-color);background:var(--panel-bg);border-radius:4px;cursor:pointer;color:var(--grey-color);transition:all .15s}.layer-quick-btn:hover{background:var(--selected-bg);border-color:var(--primary-color);color:var(--primary-color)}.layers-list{display:flex;flex-direction:column;gap:2px}.layer-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none}.layer-item:hover{background:var(--selected-bg)}.layer-item.selected{background:var(--primary-color);color:#fff}.layer-item.locked{opacity:.6}.layer-icon{font-size:14px;width:20px;text-align:center}.layer-name{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s}.layer-item:hover .layer-actions{opacity:1}.layer-action{padding:2px;border:none;background:none;cursor:pointer;font-size:12px;opacity:.7}.layer-action:hover{opacity:1}.layer-action.inactive{opacity:.3}.layer-action.active{color:var(--primary-color)}.text-grey{color:var(--grey-color)}.text-small{font-size:12px}.mt-1{margin-top:8px}.mb-1{margin-bottom:8px}