.canvas-editor{--canvas-bg:#161619;--canvas-surface:#1e1e22;--canvas-surface-hover:#252529;--canvas-border:#3a3a40;--canvas-border-hover:#4a4a50;--canvas-text:#ffffff;--canvas-text-secondary:#b0b0b0;--canvas-text-muted:#808080;--canvas-accent:#ffffff;--canvas-accent-hover:rgba(255,255,255,0.9);--canvas-selection:rgba(255,255,255,0.15);--canvas-selection-border:rgba(255,255,255,0.5);--canvas-element-bg:#3a3a3e;--canvas-scrollbar:#3a3a40;--canvas-scrollbar-hover:#4a4a50}.canvas-editor ::-webkit-scrollbar{width:6px;height:6px}.canvas-editor ::-webkit-scrollbar-track{background:transparent}.canvas-editor ::-webkit-scrollbar-thumb{background:var(--canvas-scrollbar);border-radius:3px}.canvas-editor ::-webkit-scrollbar-thumb:hover{background:var(--canvas-scrollbar-hover)}.canvas-workspace{background-color:var(--canvas-bg);background-image:radial-gradient(circle,var(--canvas-border) 1px,transparent 1px);background-size:20px 20px}.canvas-workspace.hide-grid{background-image:none}.canvas-element{transition:box-shadow .15s ease}.canvas-element.selected{box-shadow:0 0 0 2px var(--canvas-selection-border)}.canvas-element.hovered:not(.selected){box-shadow:0 0 0 1px var(--canvas-border-hover)}.resize-handle{position:absolute;width:10px;height:10px;background:var(--canvas-accent);border:2px solid var(--canvas-bg);border-radius:9999px;z-index:100;cursor:pointer}.resize-handle.nw{top:-5px;left:-5px;cursor:nwse-resize}.resize-handle.ne{top:-5px;right:-5px;cursor:nesw-resize}.resize-handle.sw{bottom:-5px;left:-5px;cursor:nesw-resize}.resize-handle.se{bottom:-5px;right:-5px;cursor:nwse-resize}.resize-handle.n{top:-5px}.resize-handle.n,.resize-handle.s{left:50%;transform:translateX(-50%);cursor:ns-resize}.resize-handle.s{bottom:-5px}.resize-handle.w{left:-5px}.resize-handle.e,.resize-handle.w{top:50%;transform:translateY(-50%);cursor:ew-resize}.resize-handle.e{right:-5px}.sidebar-tab{padding:8px 16px;font-size:13px;font-weight:500;color:var(--canvas-text-secondary);border-radius:9999px;transition:all .15s ease;cursor:pointer}.sidebar-tab:hover{color:var(--canvas-text);background:var(--canvas-surface-hover)}.sidebar-tab.active{color:var(--canvas-text);background:rgba(255,255,255,.1)}.layer-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;transition:all .15s ease;cursor:pointer}.layer-item:hover{background:var(--canvas-surface-hover)}.layer-item.selected{background:var(--canvas-selection)}.layer-item.dragging{opacity:.5}.property-group{padding:14px;border-bottom:1px solid var(--canvas-border)}.property-label{font-size:11px;font-weight:500;color:var(--canvas-text-muted);margin-bottom:6px}.property-input{width:100%;padding:8px 12px;font-size:12px;color:var(--canvas-text);background:var(--canvas-surface);border:1px solid var(--canvas-border);border-radius:9999px;outline:none;transition:all .15s ease}.property-input[type=number]::-webkit-inner-spin-button,.property-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.property-input[type=number]{-moz-appearance:textfield}.property-input:hover{border-color:var(--canvas-border-hover)}.property-input:focus{border-color:var(--canvas-accent);background:var(--canvas-surface-hover)}.property-input::-moz-placeholder{color:var(--canvas-text-muted)}.property-input::placeholder{color:var(--canvas-text-muted)}.color-picker-wrapper{position:relative;display:flex;align-items:center;gap:6px}.color-preview{width:32px;height:32px;border-radius:9999px;border:1px solid var(--canvas-border);cursor:pointer;transition:border-color .15s ease;padding:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;flex-shrink:0}.color-preview::-webkit-color-swatch-wrapper{padding:0}.color-preview::-webkit-color-swatch{border:none;border-radius:9999px}.color-preview::-moz-color-swatch{border:none;border-radius:9999px}.color-preview:hover{border-color:var(--canvas-border-hover)}.canvas-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;font-size:12px;font-weight:500;color:var(--canvas-text);background:var(--canvas-surface);border:1px solid var(--canvas-border);border-radius:9999px;cursor:pointer;transition:all .15s ease}.canvas-btn:hover{background:var(--canvas-surface-hover);border-color:var(--canvas-border-hover)}.canvas-btn.primary{color:var(--canvas-text);background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}.canvas-btn.primary:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}.canvas-btn:disabled{opacity:.5;cursor:not-allowed}.canvas-btn-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:none;border-radius:9999px;cursor:pointer;transition:all .15s ease;color:var(--canvas-text-secondary)}.canvas-btn-icon:hover{background:var(--canvas-surface-hover);color:var(--canvas-text)}.add-element-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:var(--canvas-surface);border-top:1px solid var(--canvas-border)}.add-element-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;font-size:12px;font-weight:500;color:var(--canvas-text-secondary);background:transparent;border:1px solid var(--canvas-border);border-radius:9999px;cursor:pointer;transition:all .15s ease}.add-element-btn:hover{color:var(--canvas-text);background:var(--canvas-surface-hover);border-color:var(--canvas-border-hover)}.line-clamp-4{-webkit-line-clamp:4}.line-clamp-2,.line-clamp-4{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2}.skeleton{background:linear-gradient(90deg,var(--canvas-surface) 25%,var(--canvas-surface-hover) 50%,var(--canvas-surface) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.aspect-ratio-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 6px;font-size:10px;color:var(--canvas-text-secondary);background:transparent;border:1px solid var(--canvas-border);border-radius:9999px;cursor:pointer;transition:all .15s ease}.aspect-ratio-btn:hover{color:var(--canvas-text);background:var(--canvas-surface-hover)}.aspect-ratio-btn.active{color:var(--canvas-text);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}.aspect-ratio-preview{width:24px;height:24px;background:currentColor;border-radius:4px;opacity:.5}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding:6px 10px;font-size:11px;color:var(--canvas-text);background:var(--canvas-surface);border:1px solid var(--canvas-border);border-radius:8px;white-space:nowrap;opacity:0;visibility:hidden;transition:all .15s ease;pointer-events:none;z-index:1000}.tooltip:hover:after{opacity:1;visibility:visible}.prompt-input{flex:1;padding:12px 20px;font-size:14px;color:var(--canvas-text);background:var(--canvas-surface);border:1px solid var(--canvas-border);border-radius:9999px;outline:none;transition:all .15s ease}.prompt-input:hover{border-color:var(--canvas-border-hover)}.prompt-input:focus{border-color:var(--canvas-accent)}.prompt-input::-moz-placeholder{color:var(--canvas-text-muted)}.prompt-input::placeholder{color:var(--canvas-text-muted)}.slider-track{width:100%;height:4px;background:var(--canvas-border);border-radius:2px}.slider-fill{height:100%;border-radius:2px}.slider-fill,.slider-thumb{background:var(--canvas-accent)}.slider-thumb{width:16px;height:16px;border:2px solid var(--canvas-bg);border-radius:9999px;cursor:grab}.slider-thumb:active{cursor:grabbing}.canvas-editor input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.canvas-editor input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:white;border-radius:50%;cursor:pointer;margin-top:-5px;box-shadow:0 1px 3px rgba(0,0,0,.3)}.canvas-editor input[type=range]::-moz-range-thumb{width:14px;height:14px;background:white;border:none;border-radius:50%;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.3)}.canvas-editor input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px}.canvas-editor input[type=range]::-moz-range-track{height:4px;border-radius:2px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}