[data-v-cec6f912]{font-family:PingFang SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.grid-layout-setting[data-v-cec6f912]{height:100%;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);display:flex;flex-direction:column}.top-toolbar[data-v-cec6f912]{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#fff;border-bottom:1px solid #e8e8e8;box-shadow:0 2px 8px rgba(0,0,0,.08);position:sticky;top:0;z-index:1000}.toolbar-left[data-v-cec6f912]{display:flex;flex-direction:column;align-items:flex-start}.toolbar-title[data-v-cec6f912]{display:flex;align-items:center;gap:8px;margin-bottom:4px}.title-icon[data-v-cec6f912]{color:#1890ff}.title-text[data-v-cec6f912]{font-size:18px;font-weight:600;color:#333}.toolbar-desc[data-v-cec6f912]{font-size:13px;color:#666}.toolbar-right[data-v-cec6f912]{display:flex;align-items:center;gap:12px}.toolbar-btn[data-v-cec6f912]{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:2px;font-size:14px;font-weight:500;transition:all .2s ease;border:1px solid #d9d9d9;background:#fff;color:#666}.toolbar-btn[data-v-cec6f912]:hover{border-color:var(--color-,#0158f0);color:var(--color-,#0158f0);transform:translateY(-1px);box-shadow:0 4px 12px rgba(1,88,240,.15)}.toolbar-btn.primary[data-v-cec6f912]{background:var(--color-,#0158f0);border-color:var(--color-,#0158f0);color:#fff}.toolbar-btn.primary[data-v-cec6f912]:hover{background:rgba(1,88,240,.8);border-color:rgba(1,88,240,.8);color:#fff}.toolbar-btn.primary.saved[data-v-cec6f912]{background:var(--color-,#0158f0);border-color:var(--color-,#0158f0);color:#fff;box-shadow:0 2px 8px rgba(1,88,240,.3)}.toolbar-btn.primary.saved[data-v-cec6f912]:hover{background:var(--color-,#0158f0);border-color:var(--color-,#0158f0);color:#fff;box-shadow:0 4px 12px rgba(1,88,240,.4)}.toolbar-btn.secondary[data-v-cec6f912]{border-color:#ff4d4f;color:#ff4d4f}.toolbar-btn.secondary[data-v-cec6f912]:hover{background:#ff4d4f;color:#fff}.main-content[data-v-cec6f912]{display:flex;flex:1;overflow:hidden}.component-panel[data-v-cec6f912]{width:320px;background:#fff;border-left:1px solid #e8e8e8;display:flex;flex-direction:column;position:fixed;right:0;top:0;bottom:0;z-index:1050;transform:translateX(100%);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:-2px 0 12px rgba(0,0,0,.08);border-radius:2px 0 0 2px;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95)}.component-panel.panel-visible[data-v-cec6f912]{transform:translateX(0);box-shadow:-4px 0 20px rgba(0,0,0,.12)}.panel-header[data-v-cec6f912]{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #f0f0f0;background:linear-gradient(135deg,#f8f9fa,#e9ecef);position:relative}.panel-header[data-v-cec6f912]:before{content:"";position:absolute;left:24px;bottom:0;width:40px;height:2px;background:linear-gradient(90deg,#1890ff,#40a9ff);border-radius:1px}.panel-title[data-v-cec6f912]{margin:0;font-size:16px;font-weight:600;color:#333}.panel-close[data-v-cec6f912]{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:2px;cursor:pointer;transition:background-color .2s ease;color:#666}.panel-close[data-v-cec6f912]:hover{background:#f0f0f0;color:#333}.panel-content[data-v-cec6f912]{flex:1;overflow-y:auto;padding:16px;scrollbar-width:thin;scrollbar-color:#d9d9d9 transparent}.panel-content[data-v-cec6f912]::-webkit-scrollbar{width:6px}.panel-content[data-v-cec6f912]::-webkit-scrollbar-track{background:transparent}.panel-content[data-v-cec6f912]::-webkit-scrollbar-thumb{background:#d9d9d9;border-radius:3px}.panel-content[data-v-cec6f912]::-webkit-scrollbar-thumb:hover{background:#bfbfbf}.panel-tips[data-v-cec6f912]{padding:12px 16px;margin-bottom:16px;background:linear-gradient(135deg,#e6f7ff,#f0f8ff);border-radius:2px;border:1px solid #b3e0ff}.tip-item[data-v-cec6f912]{display:flex;align-items:center;gap:8px;margin-bottom:4px}.tip-item[data-v-cec6f912]:last-child{margin-bottom:0}.tip-key[data-v-cec6f912]{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:20px;background:var(--color-,#0158f0);color:#fff;font-size:10px;font-weight:600;border-radius:2px;text-transform:uppercase}.tip-desc[data-v-cec6f912]{font-size:12px;color:#666}.component-group[data-v-cec6f912]{margin-bottom:16px}.group-header[data-v-cec6f912]{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f8f9fa;border-radius:2px;cursor:pointer;transition:background-color .2s ease}.group-header[data-v-cec6f912]:hover{background:#e9ecef}.group-arrow[data-v-cec6f912]{transition:transform .2s ease;color:#999}.group-arrow.expanded[data-v-cec6f912]{transform:rotate(90deg);color:#666}.group-title[data-v-cec6f912]{font-size:14px;font-weight:600;color:#333;flex:1}.group-count[data-v-cec6f912]{font-size:12px;color:#999}.group-items[data-v-cec6f912]{margin-top:8px;display:flex;flex-direction:column;gap:6px}.component-item[data-v-cec6f912]{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid #e8e8e8;border-radius:2px;cursor:pointer;transition:all .2s ease}.component-item[data-v-cec6f912]:hover{border-color:var(--color-,#0158f0);background:#f0f8ff;transform:translateY(-1px);box-shadow:0 2px 8px rgba(1,88,240,.15)}.component-item.item-active[data-v-cec6f912]{border-color:#52c41a;background:#f6ffed;color:#52c41a}.item-icon[data-v-cec6f912]{color:#666;transition:color .2s ease}.component-item.item-active .item-icon[data-v-cec6f912],.component-item:hover .item-icon[data-v-cec6f912]{color:currentColor}.item-name[data-v-cec6f912]{flex:1;font-size:13px;font-weight:500}.item-action[data-v-cec6f912]{color:#999;transition:color .2s ease}.component-item.item-active .item-action[data-v-cec6f912],.component-item:hover .item-action[data-v-cec6f912]{color:currentColor}.grid-container[data-v-cec6f912]{flex:1;display:flex;flex-direction:column;background:#fafbfc;transition:all .3s ease;width:100%;position:relative}.mobile-overlay[data-v-cec6f912]{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);z-index:1040;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(2px)}.mobile-overlay.overlay-visible[data-v-cec6f912]{opacity:1;visibility:visible}.grid-header[data-v-cec6f912]{padding:16px 24px;background:#fff;border-bottom:1px solid #f0f0f0}.grid-info[data-v-cec6f912]{display:flex;align-items:center;gap:24px}.grid-stats[data-v-cec6f912]{font-size:14px;font-weight:600;color:#333}.grid-wrapper[data-v-cec6f912]{flex:1;overflow:auto}.grid-item-wrapper[data-v-cec6f912]{border-radius:2px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:box-shadow .2s ease}.grid-item-wrapper[data-v-cec6f912]:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}.grid-item-content[data-v-cec6f912]{position:relative;height:100%;background:#fff;border-radius:2px;overflow:hidden}.item-overlay[data-v-cec6f912]{position:absolute;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,.05);opacity:0;transition:opacity .2s ease;pointer-events:none}.grid-item-wrapper:hover .item-overlay[data-v-cec6f912]{opacity:1;pointer-events:auto}.item-controls[data-v-cec6f912]{position:absolute;top:8px;right:8px;display:flex;gap:4px}.control-btn[data-v-cec6f912]{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:hsla(0,0%,100%,.9);border:none;border-radius:2px;cursor:pointer;transition:all .2s ease;color:#666;backdrop-filter:blur(4px)}.control-btn[data-v-cec6f912]:hover{background:#fff;color:#333;transform:scale(1.1)}.remove-btn[data-v-cec6f912]:hover{background:#ff4d4f;color:#fff}.empty-state[data-v-cec6f912]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:400px;padding:40px;text-align:center}.empty-icon[data-v-cec6f912]{margin-bottom:16px;color:#d9d9d9}.empty-title[data-v-cec6f912]{margin:0 0 8px 0;font-size:18px;font-weight:600;color:#333}.empty-desc[data-v-cec6f912]{margin:0 0 24px 0;font-size:14px;color:#666;line-height:1.5}.empty-action[data-v-cec6f912]{display:flex;align-items:center;gap:6px;padding:10px 20px;border-radius:2px;font-weight:500;background:var(--color-,#0158f0);border-color:var(--color-,#0158f0);color:#fff}.empty-action[data-v-cec6f912]:hover{background:rgba(1,88,240,.8);border-color:rgba(1,88,240,.8)}@media (max-width:1200px){.component-panel[data-v-cec6f912]{width:280px}.toolbar-right[data-v-cec6f912]{gap:8px}.toolbar-btn[data-v-cec6f912]{padding:6px 12px;font-size:13px}}@media (max-width:768px){.component-panel[data-v-cec6f912]{width:100%;max-width:320px;z-index:1060;box-shadow:-2px 0 16px rgba(0,0,0,.2);border-radius:2px 0 0 0}.top-toolbar[data-v-cec6f912]{padding:12px 16px}.toolbar-left[data-v-cec6f912],.toolbar-right[data-v-cec6f912]{gap:8px}.toolbar-btn[data-v-cec6f912]{padding:8px 12px;font-size:12px}.title-text[data-v-cec6f912]{font-size:16px}.toolbar-desc[data-v-cec6f912]{font-size:12px}.grid-wrapper[data-v-cec6f912]{padding:16px}.grid-header[data-v-cec6f912]{padding:12px 16px}.grid-info[data-v-cec6f912]{flex-direction:column;align-items:flex-start;gap:8px}.empty-state[data-v-cec6f912]{padding:24px 16px;min-height:300px}}[data-v-cec6f912] .vue-grid-layout{background:transparent}[data-v-cec6f912] .vue-grid-item{transition:all .2s ease}[data-v-cec6f912] .vue-grid-item.vue-grid-placeholder{background:rgba(1,88,240,.2);border:2px dashed var(--color-,#0158f0);border-radius:2px}[data-v-cec6f912] .vue-resizable-handle{z-index:200;background:var(--color-,#0158f0);opacity:0;transition:opacity .2s ease}[data-v-cec6f912] .vue-grid-item:hover .vue-resizable-handle{opacity:.8}[data-v-cec6f912] .vue-resizable-handle:hover{opacity:1}