.grid-item[data-v-c03f09a8]{box-sizing:border-box;position:relative}.grid-item.drag-over[data-v-c03f09a8]{border-color:#ff6b6b;background-color:#ff6b6b1a}.grid-item-content[data-v-c03f09a8]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#007acc;box-sizing:border-box}.grid-item-children[data-v-c03f09a8]{width:100%;height:100%;display:flex;box-sizing:border-box;position:relative;transition:background-color .2s ease}.grid-item-children.layout-horizontal[data-v-c03f09a8]{flex-direction:row;align-items:stretch;flex-wrap:nowrap}.grid-item-children.layout-vertical[data-v-c03f09a8]{flex-direction:column;align-items:stretch;flex-wrap:nowrap}.grid-item-children.layout-horizontal.align-start[data-v-c03f09a8]{justify-content:flex-start}.grid-item-children.layout-horizontal.align-center[data-v-c03f09a8]{justify-content:center}.grid-item-children.layout-horizontal.align-end[data-v-c03f09a8]{justify-content:flex-end}.grid-item-children.layout-horizontal.align-stretch[data-v-c03f09a8]{justify-content:space-between}.grid-item-children.layout-vertical.align-start[data-v-c03f09a8]{justify-content:flex-start}.grid-item-children.layout-vertical.align-center[data-v-c03f09a8]{justify-content:center}.grid-item-children.layout-vertical.align-end[data-v-c03f09a8]{justify-content:flex-end}.grid-item-children.layout-vertical.align-stretch[data-v-c03f09a8]{justify-content:space-between}.grid-item-children.drag-over[data-v-c03f09a8]{background-color:#ff6b6b0d}.grid-item-children.capacity-exceeded[data-v-c03f09a8]{background-color:#ff00001a;border:2px dashed #ff0000;cursor:not-allowed}.grid-child[data-v-c03f09a8]{box-sizing:border-box;cursor:grab;transition:all .2s ease;-webkit-user-select:none;user-select:none;min-width:0;min-height:0}.grid-child[data-v-c03f09a8]:hover{border-color:#007acc;box-shadow:0 2px 4px #007acc33}.grid-child[data-v-c03f09a8]:active{cursor:grabbing}.grid-child.dragging[data-v-c03f09a8]{opacity:.5;transform:rotate(2deg);z-index:1000}.grid-child.drag-placeholder[data-v-c03f09a8]{border:2px dashed #ff6b6b;background-color:#ff6b6b1a}.drag-placeholder-visual[data-v-c03f09a8]{border:2px dashed #ff6b6b;background-color:#ff6b6b1a;border-radius:2px;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center}.drag-placeholder-visual.placeholder-horizontal[data-v-c03f09a8]{min-width:60px;width:auto}.drag-placeholder-visual.placeholder-vertical[data-v-c03f09a8]{min-height:40px;height:auto}.default-child-content[data-v-c03f09a8]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#666;box-sizing:border-box;pointer-events:none}@keyframes dragEnter-c03f09a8{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.grid-item-children.drag-over[data-v-c03f09a8]{animation:dragEnter-c03f09a8 .3s ease-in-out}.grid-container[data-v-d8866dbe],.grid[data-v-d8866dbe]{width:100%;height:100%;box-sizing:border-box}.debug-info[data-v-d8866dbe]{background:#f9f9f9;border:1px solid #ddd;border-radius:4px;padding:10px;font-family:monospace;font-size:12px;margin-top:20px;box-sizing:border-box}.debug-info h3[data-v-d8866dbe]{margin-top:0;margin-bottom:10px}.debug-info pre[data-v-d8866dbe]{margin:0;white-space:pre-wrap;word-wrap:break-word}.drag-history[data-v-d8866dbe]{max-height:200px;overflow-y:auto;border:1px solid #eee;border-radius:2px;padding:5px;background:#fff}.drag-operation[data-v-d8866dbe]{padding:2px 0;font-size:11px;color:#666;border-bottom:1px solid #f0f0f0}.drag-operation[data-v-d8866dbe]:last-child{border-bottom:none}.default-grid-item-content[data-v-d8866dbe]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#007acc;box-sizing:border-box}.default-child-content[data-v-d8866dbe]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#666;box-sizing:border-box}.grid-item-view[data-v-a57d7b88]{position:relative;overflow:hidden;box-sizing:border-box}.grid-item-children-view[data-v-a57d7b88]{width:100%;height:100%;display:flex;box-sizing:border-box}.grid-item-children-view.layout-horizontal[data-v-a57d7b88]{flex-direction:row;align-items:stretch;flex-wrap:nowrap}.grid-item-children-view.layout-vertical[data-v-a57d7b88]{flex-direction:column;align-items:stretch;flex-wrap:nowrap}.grid-item-children-view.layout-horizontal.align-start[data-v-a57d7b88]{justify-content:flex-start}.grid-item-children-view.layout-horizontal.align-center[data-v-a57d7b88]{justify-content:center}.grid-item-children-view.layout-horizontal.align-end[data-v-a57d7b88]{justify-content:flex-end}.grid-item-children-view.layout-horizontal.align-stretch[data-v-a57d7b88]{justify-content:space-between}.grid-item-children-view.layout-vertical.align-start[data-v-a57d7b88]{justify-content:flex-start}.grid-item-children-view.layout-vertical.align-center[data-v-a57d7b88]{justify-content:center}.grid-item-children-view.layout-vertical.align-end[data-v-a57d7b88]{justify-content:flex-end}.grid-item-children-view.layout-vertical.align-stretch[data-v-a57d7b88]{justify-content:space-between}.grid-child-view[data-v-a57d7b88]{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0}.grid-view-container[data-v-f6a4a413],.grid-view[data-v-f6a4a413]{width:100%;height:100%;box-sizing:border-box}.default-child-content[data-v-f6a4a413]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#666;box-sizing:border-box}#app[data-v-4f6779c9]{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;padding:20px;background:#f5f5f5;min-height:100vh;box-sizing:border-box}.header[data-v-4f6779c9]{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.header h1[data-v-4f6779c9]{margin:0;color:#007acc;font-size:24px}.controls button[data-v-4f6779c9]{padding:8px 16px;background:#007acc;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;margin-left:8px}.controls button[data-v-4f6779c9]:first-child{margin-left:0}.controls button[data-v-4f6779c9]:hover{background:#005a94}.main-content[data-v-4f6779c9]{display:flex;gap:20px;align-items:flex-start}.grid-demos[data-v-4f6779c9]{display:flex;gap:20px}.grid-wrapper[data-v-4f6779c9]{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 8px #0000001a;border:2px solid #e1e8ed;box-sizing:border-box;flex-shrink:0}.grid-title[data-v-4f6779c9]{margin:-10px 0 15px;color:#007acc;font-size:18px;text-align:center}.instructions[data-v-4f6779c9]{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-width:350px;flex-shrink:0;max-height:80vh;overflow-y:auto}.instructions h3[data-v-4f6779c9]{margin-top:0;margin-bottom:10px;color:#007acc;font-size:16px;border-bottom:2px solid #e1e8ed;padding-bottom:5px}.instructions h3[data-v-4f6779c9]:not(:first-child){margin-top:20px}.instructions ul[data-v-4f6779c9]{padding-left:20px}.instructions li[data-v-4f6779c9]{margin-bottom:8px;line-height:1.5}.custom-cell-content[data-v-4f6779c9]{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box}.cell-title[data-v-4f6779c9]{font-weight:700;font-size:14px;color:#333;margin-bottom:4px}.cell-info[data-v-4f6779c9]{font-size:10px;color:#666;text-align:center;line-height:1.2}.external-drag-demo[data-v-4f6779c9]{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-width:300px;flex-shrink:0;margin-bottom:20px}.external-drag-demo h3[data-v-4f6779c9]{margin-top:0;margin-bottom:15px;color:#007acc;font-size:16px;border-bottom:2px solid #e1e8ed;padding-bottom:5px}.external-drag-demo h4[data-v-4f6779c9]{margin-top:20px;margin-bottom:10px;color:#007acc;font-size:14px}.external-items[data-v-4f6779c9],.type-items[data-v-4f6779c9]{display:flex;flex-direction:column;gap:8px}.external-item[data-v-4f6779c9]{padding:8px 12px;border:2px solid #ddd;border-radius:4px;background:#f9f9f9;cursor:grab;transition:all .2s ease;-webkit-user-select:none;user-select:none}.external-item[data-v-4f6779c9]:hover{border-color:#007acc;background:#f0f8ff;transform:translateY(-1px);box-shadow:0 2px 4px #007acc33}.external-item[data-v-4f6779c9]:active{cursor:grabbing;transform:translateY(0)}.external-item.type-panel[data-v-4f6779c9]{border-color:#ff6b6b;background:#fff5f5}.external-item.type-panel[data-v-4f6779c9]:hover{border-color:#ff4757;background:#ffe6e6}.external-item.type-tools[data-v-4f6779c9]{border-color:#ffa502;background:#fffbf0}.external-item.type-tools[data-v-4f6779c9]:hover{border-color:#ff9500;background:#fff4e0}.external-item.type-none[data-v-4f6779c9]{border-color:#70a1ff;background:#f1f4ff}.external-item.type-none[data-v-4f6779c9]:hover{border-color:#5352ed;background:#e8ecff}.item-label[data-v-4f6779c9]{font-weight:700;font-size:14px;margin-bottom:4px;color:#333}.item-info[data-v-4f6779c9]{font-size:11px;color:#666}@media (max-width: 1400px){.main-content[data-v-4f6779c9]{flex-direction:column}.instructions[data-v-4f6779c9],.external-drag-demo[data-v-4f6779c9]{max-width:none}}.gridview-wrapper[data-v-4f6779c9]{margin-top:20px}.gridview-wrapper h3[data-v-4f6779c9]{margin:0 0 15px;color:#28a745;font-size:18px;text-align:center}.gridview-container[data-v-4f6779c9]{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;border:2px solid #28a745;box-sizing:border-box;flex-shrink:0}.gridview-cell[data-v-4f6779c9]{background:#f8fff9!important;border:1px solid #28a745!important}.gridview-cell .cell-tag[data-v-4f6779c9]{font-size:8px;color:#28a745;font-weight:700;margin-top:2px;padding:1px 4px;background:#e8f5e8;border-radius:2px}