.layer-expand-controls{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--border-color,rgba(255,255,255,.1));background:rgba(0,0,0,.1)}.layer-expand-btn{display:flex;align-items:center;justify-content:center;gap:2px;padding:3px 6px;font-size:10px;font-weight:500;color:var(--font-color-muted,#9ca3af);background:transparent;border:1px solid var(--border-color,rgba(255,255,255,.15));border-radius:3px;cursor:pointer;transition:all .15s ease;min-width:24px}.layer-expand-btn:hover{color:var(--font-color,#e5e7eb);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25)}.layer-expand-btn:active{background:rgba(255,255,255,.12)}.layer-expand-btn span{font-size:9px;text-transform:uppercase;letter-spacing:.5px}.tree-node.hidden{opacity:.5}.tree-node.dragging{opacity:.5;transform:rotate(2deg);z-index:1000}.tree-drag-handle{display:flex;align-items:center;justify-content:center;color:#9ca3af;cursor:grab;margin-right:4px;padding:1px;border-radius:2px;transition:color .15s ease}.tree-drag-handle:hover{color:#6b7280;background:rgba(0,0,0,.05)}.tree-drag-handle:active{cursor:grabbing}.hierarchical-layers{width:100%;padding:8px}.tree-node-wrapper{width:100%}.tree-node{position:relative;cursor:pointer;width:100%;padding:4px 8px;margin:1px 0;border-radius:3px;font-size:11px;display:flex;align-items:center;min-height:24px;transition:all .15s ease;background:var(--white);border:1px solid #e5e7eb;color:#374151;font-weight:400}.tree-node:hover{background:#f8fafc!important;border-color:#e2e8f0!important}.tree-node.selected{background:#e0e7ff!important;border:1px solid #6366f1!important;color:#1e40af!important;font-weight:600!important}.tree-node.hidden{opacity:.6;color:#9ca3af}.tree-line-vertical{position:absolute;width:1px;top:0;bottom:0}.tree-line-horizontal{position:absolute;height:1px;top:12px;width:12px}.tree-expand-button{border:none;background:transparent;cursor:pointer;padding:2px;margin-right:4px;font-size:8px;color:#6b7280;display:flex;align-items:center;justify-content:center;width:12px;height:12px;transition:color .15s ease}.tree-expand-button:hover{color:#374151}.tree-icon{margin-right:6px;font-size:12px}.tree-name{flex:1;margin-right:6px;font-weight:inherit;color:inherit}.tree-actions{display:flex;gap:2px;align-items:center}.tree-action-button{border:none;background:transparent;cursor:pointer;padding:2px;font-size:10px;color:#6b7280;display:flex;align-items:center;transition:color .15s ease}.tree-action-button:hover{color:#374151}.tree-action-button.delete,.tree-action-button.hidden{color:#ef4444}.tree-node-id{font-size:8px;color:#9ca3af;margin-left:4px}.tree-node.from-layout{background:#fef3c7;border-color:#fcd34d}.tree-node.from-layout:hover{background:#fef9c3!important;border-color:#facc15!important}.tree-drag-handle.locked{color:#d97706;cursor:not-allowed}.layout-badge{font-size:8px;background:#fbbf24;color:#78350f;padding:1px 4px;border-radius:3px;margin-left:6px;font-weight:600}.custom-layer-wrapper,.root-children{width:100%}.layer-children{width:100%;overflow:hidden}.layer-children.collapsed{display:none}.layer-children.expanded{display:block}.craft-layer-node{width:100%}.craft-layers-container .craftjs-layer,.craft-layers-container [data-craftjs=layer]{all:unset!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 12px!important;margin:2px 0!important;border-radius:6px!important;font-size:12px!important;background:#ffffff!important;color:#374151!important;cursor:pointer!important;transition:all .2s ease!important;border:1px solid #e5e7eb!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important;font-weight:500!important;box-shadow:0 1px 3px rgba(0,0,0,.1)!important;min-height:32px!important;width:100%!important;box-sizing:border-box!important;position:relative!important}.craft-layers-container .craftjs-layer>div:first-child,.craft-layers-container .craftjs-layer>span:first-child{display:flex!important;align-items:center!important;flex:1!important;min-width:0!important}.craft-layers-container .craftjs-layer:before{content:"📦"!important;font-size:14px!important;margin-right:8px!important;flex-shrink:0!important;display:inline-block!important;width:16px!important;text-align:center!important}.craft-layers-container .craftjs-layer[data-type*=Text]:before{content:"📝"!important}.craft-layers-container .craftjs-layer[data-type*=Button]:before{content:"🔘"!important}.craft-layers-container .craftjs-layer[data-type*=Video]:before{content:"🎥"!important}.craft-layers-container .craftjs-layer span:not([role=button]){flex:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important;font-weight:inherit!important;color:inherit!important}.craft-layers-container .craftjs-layer [role=button],.craft-layers-container .craftjs-layer button{all:unset!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:18px!important;height:18px!important;border-radius:3px!important;background:rgba(0,0,0,.1)!important;color:inherit!important;font-size:10px!important;cursor:pointer!important;transition:all .15s ease!important;flex-shrink:0!important;margin-left:8px!important}.craft-layers-container .craftjs-layer [role=button]:hover,.craft-layers-container .craftjs-layer button:hover{background:rgba(0,0,0,.2)!important;transform:scale(1.1)!important}.craft-layers-container .craftjs-layer:hover{background:#f8fafc!important;border-color:#3b82f6!important;transform:translateX(2px)!important;box-shadow:0 3px 8px rgba(0,0,0,.15)!important}.craft-layers-container .craftjs-layer.selected,.craft-layers-container .craftjs-layer[data-selected=true]{background:#3b82f6!important;color:white!important;border-color:#3b82f6!important;font-weight:600!important;box-shadow:0 4px 12px rgba(59,130,246,.3)!important}.craft-layers-container .craftjs-layer[data-selected=true]:hover{background:#2563eb!important;transform:translateX(0)!important}.craft-layers-container .craftjs-layer .craftjs-layer{margin-left:20px!important;border-left:2px solid #e5e7eb!important;padding-left:12px!important;background:#f9fafb!important;position:relative!important}.craft-layers-container .craftjs-layer .craftjs-layer:after{content:""!important;position:absolute!important;left:-2px!important;top:50%!important;width:8px!important;height:1px!important;background:#d1d5db!important}.craft-layers-container:empty:after{content:"🎨 Drag components from toolbox to add layers"!important;display:block!important;text-align:center!important;padding:24px 16px!important;color:#9ca3af!important;font-size:12px!important;font-style:italic!important;background:#f9fafb!important;border:2px dashed #d1d5db!important;border-radius:8px!important;margin:8px!important}@keyframes layerSlideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.craft-layers-container .craftjs-layer{animation:layerSlideIn .2s ease-out!important}