.component-sidebar[data-v-20abe386]{width:300px;height:100vh;background-color:#f8f9fa;border-right:1px solid #e9ecef;display:flex;flex-direction:column;overflow:hidden}.sidebar-header[data-v-20abe386]{padding:20px;border-bottom:1px solid #e9ecef;background-color:#fff}.sidebar-header h2[data-v-20abe386]{margin:0 0 16px;font-size:18px;font-weight:600;color:#495057}.search-input[data-v-20abe386]{width:100%;padding:8px 12px;border:1px solid #ced4da;border-radius:6px;font-size:14px;background-color:#fff}.search-input[data-v-20abe386]:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.sidebar-content[data-v-20abe386]{flex:1;overflow-y:auto;padding:8px 0}.category-section[data-v-20abe386]{margin-bottom:8px}.category-title[data-v-20abe386]{padding:12px 20px;margin:0;font-size:14px;font-weight:600;color:#6c757d;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;background-color:#fff;border-bottom:1px solid #e9ecef}.category-title[data-v-20abe386]:hover{background-color:#f8f9fa}.expand-icon[data-v-20abe386]{transition:transform .2s ease;font-size:12px}.expand-icon.expanded[data-v-20abe386]{transform:rotate(90deg)}.category-components[data-v-20abe386]{background-color:#fff}.component-item[data-v-20abe386]{padding:12px 20px 12px 40px;cursor:grab;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:12px;border-bottom:1px solid #f8f9fa;transition:background-color .2s ease}.component-item[data-v-20abe386]:hover{background-color:#e3f2fd}.component-item[data-v-20abe386]:active{cursor:grabbing}.component-icon[data-v-20abe386]{font-size:16px;width:20px;text-align:center}.component-name[data-v-20abe386]{font-size:13px;color:#495057;font-weight:500}.sidebar-content[data-v-20abe386]::-webkit-scrollbar{width:6px}.sidebar-content[data-v-20abe386]::-webkit-scrollbar-track{background:#f1f1f1}.sidebar-content[data-v-20abe386]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.sidebar-content[data-v-20abe386]::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.canvas-element[data-v-074ad439]{position:relative;margin-bottom:16px;transition:all .2s ease;border-radius:8px}.canvas-element[data-v-074ad439]:hover{outline:2px solid #007bff;outline-offset:2px}.canvas-element.is-dragging[data-v-074ad439]{opacity:.5;transform:rotate(2deg)}.canvas-element.drag-over[data-v-074ad439]{outline:2px solid #28a745;outline-offset:2px}.element-controls[data-v-074ad439]{position:absolute;top:-8px;right:-8px;background-color:#fff;border:1px solid #e9ecef;border-radius:6px;padding:4px 8px;display:flex;align-items:center;gap:8px;z-index:10;box-shadow:0 2px 8px #0000001a;opacity:0;transition:opacity .2s ease}.canvas-element:hover .element-controls[data-v-074ad439]{opacity:1}.element-label[data-v-074ad439]{font-size:12px;font-weight:600;color:#495057}.control-buttons[data-v-074ad439]{display:flex;gap:4px}.control-btn[data-v-074ad439]{width:24px;height:24px;border:none;border-radius:4px;background-color:#f8f9fa;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.control-btn[data-v-074ad439]:hover{background-color:#e9ecef}.control-btn.delete[data-v-074ad439]:hover{background-color:#dc3545;color:#fff}.container-content[data-v-074ad439]{min-height:80px;border-radius:8px;position:relative}.empty-container[data-v-074ad439]{display:flex;align-items:center;justify-content:center;height:80px;border:2px dashed #ced4da;border-radius:8px;background-color:#f8f9fa;color:#6c757d;font-size:14px;font-weight:500}.empty-container-text[data-v-074ad439]{pointer-events:none}.component-content[data-v-074ad439]{border-radius:8px;overflow:hidden}.container-drop-indicator[data-v-074ad439]{position:absolute;border:2px dashed #007bff;border-radius:4px;z-index:1000;pointer-events:none;animation:pulse-074ad439 1s infinite;background-color:#007bff1a}.container-drop-indicator.horizontal[data-v-074ad439]{width:100%;height:4px;left:0!important}.container-drop-indicator.vertical[data-v-074ad439]{width:4px;height:40px}@keyframes pulse-074ad439{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.is-container .component-content[data-v-074ad439]{padding:16px}.is-container.drag-over .container-content[data-v-074ad439]{background-color:#28a7451a}.design-canvas[data-v-77b8ddc4]{flex:1;display:flex;flex-direction:column;height:100vh;background-color:#fff}.canvas-header[data-v-77b8ddc4]{padding:20px;border-bottom:1px solid #e9ecef;background-color:#f8f9fa;display:flex;justify-content:space-between;align-items:center}.canvas-header h2[data-v-77b8ddc4]{margin:0;font-size:18px;font-weight:600;color:#495057}.canvas-actions[data-v-77b8ddc4]{display:flex;gap:12px}.action-btn[data-v-77b8ddc4]{padding:8px 16px;border:1px solid #ced4da;border-radius:6px;background-color:#fff;color:#495057;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s ease}.action-btn[data-v-77b8ddc4]:hover{background-color:#e9ecef;transform:translateY(-1px)}.action-btn.primary[data-v-77b8ddc4]{background-color:#007bff;color:#fff;border-color:#007bff}.action-btn.primary[data-v-77b8ddc4]:hover{background-color:#0056b3}.btn-icon[data-v-77b8ddc4]{font-size:14px}.canvas-content[data-v-77b8ddc4]{flex:1;padding:20px;overflow-y:auto;min-height:0;position:relative;transition:background-color .2s ease}.canvas-content.drag-over[data-v-77b8ddc4]{background-color:#e3f2fd}.empty-canvas[data-v-77b8ddc4]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:400px;color:#6c757d;text-align:center}.empty-icon[data-v-77b8ddc4]{font-size:64px;margin-bottom:16px;opacity:.7}.empty-canvas h3[data-v-77b8ddc4]{margin:0 0 8px;font-size:20px;font-weight:600}.empty-canvas p[data-v-77b8ddc4]{margin:0;font-size:14px;opacity:.8}.drop-indicator[data-v-77b8ddc4]{position:fixed;width:100%;height:4px;border:2px dashed #007bff;border-radius:4px;background-color:#007bff1a;z-index:1000;pointer-events:none;animation:pulse-77b8ddc4 1s infinite}@keyframes pulse-77b8ddc4{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.canvas-content[data-v-77b8ddc4]::-webkit-scrollbar{width:8px}.canvas-content[data-v-77b8ddc4]::-webkit-scrollbar-track{background:#f1f1f1}.canvas-content[data-v-77b8ddc4]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.canvas-content[data-v-77b8ddc4]::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.export-panel-overlay[data-v-e5bffe29]{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.export-panel[data-v-e5bffe29]{background-color:#fff;border-radius:12px;width:90%;max-width:800px;height:80%;max-height:600px;display:flex;flex-direction:column;box-shadow:0 20px 40px #0000004d}.export-header[data-v-e5bffe29]{padding:24px;border-bottom:1px solid #e9ecef;display:flex;justify-content:space-between;align-items:center}.export-header h2[data-v-e5bffe29]{margin:0;font-size:20px;font-weight:600;color:#495057}.close-btn[data-v-e5bffe29]{width:32px;height:32px;border:none;border-radius:50%;background-color:#f8f9fa;color:#6c757d;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s ease}.close-btn[data-v-e5bffe29]:hover{background-color:#e9ecef;color:#495057}.export-content[data-v-e5bffe29]{flex:1;display:flex;flex-direction:column;overflow:hidden}.export-tabs[data-v-e5bffe29]{padding:16px 24px 0;display:flex;gap:8px;border-bottom:1px solid #e9ecef}.tab-btn[data-v-e5bffe29]{padding:8px 16px;border:none;border-radius:6px 6px 0 0;background-color:#f8f9fa;color:#6c757d;cursor:pointer;font-weight:500;transition:all .2s ease}.tab-btn[data-v-e5bffe29]:hover{background-color:#e9ecef}.tab-btn.active[data-v-e5bffe29]{background-color:#fff;color:#495057;border-bottom:2px solid #007bff}.code-container[data-v-e5bffe29]{flex:1;display:flex;flex-direction:column;overflow:hidden}.code-actions[data-v-e5bffe29]{padding:16px 24px;border-bottom:1px solid #e9ecef;display:flex;justify-content:flex-end}.copy-btn[data-v-e5bffe29]{padding:8px 16px;border:1px solid #007bff;border-radius:6px;background-color:#fff;color:#007bff;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:6px;transition:all .2s ease}.copy-btn[data-v-e5bffe29]:hover{background-color:#007bff;color:#fff}.code-block[data-v-e5bffe29]{flex:1;margin:0;padding:24px;background-color:#f8f9fa;color:#495057;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.5;overflow:auto;white-space:pre}[data-v-e5bffe29] .comment{color:#6c757d;font-style:italic}[data-v-e5bffe29] .tag{color:#e83e8c;font-weight:700}[data-v-e5bffe29] .attribute{color:#fd7e14}[data-v-e5bffe29] .string{color:#20c997}[data-v-e5bffe29] .selector{color:#6f42c1;font-weight:700}[data-v-e5bffe29] .property{color:#007bff}[data-v-e5bffe29] .value{color:#28a745}.code-block[data-v-e5bffe29]::-webkit-scrollbar{width:8px;height:8px}.code-block[data-v-e5bffe29]::-webkit-scrollbar-track{background:#e9ecef}.code-block[data-v-e5bffe29]::-webkit-scrollbar-thumb{background:#ced4da;border-radius:4px}.code-block[data-v-e5bffe29]::-webkit-scrollbar-thumb:hover{background:#adb5bd}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}#app{height:100vh;overflow:hidden}.app{display:flex;height:100vh;background-color:#f8f9fa}.btn{padding:12px 24px;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s ease}.chip{padding:6px 12px;border-radius:16px;font-size:14px;display:inline-block}.card{border-radius:8px;padding:16px;box-shadow:0 2px 8px #0000001a}.text-field,.textarea,.select,.number-input,.date-picker,.time-picker,.autocomplete,.combobox,.file-input{width:100%;padding:12px;border:1px solid #ccc;border-radius:4px;font-family:inherit}.checkbox,.radio-group{display:flex;align-items:center;gap:8px}.range-slider,.slider{width:100%;height:6px;border-radius:3px;outline:none}.table,.data-table{width:100%;border-collapse:collapse;border:1px solid #e0e0e0}.table th,.table td,.data-table th,.data-table td{padding:12px;text-align:left;border-bottom:1px solid #e0e0e0}.table th,.data-table th{background-color:#f8f9fa;font-weight:600}.grid{display:grid;gap:16px}.grid-item{padding:16px;background-color:#f8f9fa;border:1px solid #e0e0e0;border-radius:8px;text-align:center}.alert{padding:12px;border-radius:4px;margin-bottom:16px}.badge{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:700}.avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}.image{max-width:100%;height:auto;border-radius:8px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.progress-circular{animation:spin 2s linear infinite}.skeleton-loader{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200px 100%;animation:shimmer 2s infinite}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider-switch{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider-switch:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}.switch input:checked+.slider-switch{background-color:#007bff}.switch input:checked+.slider-switch:before{transform:translate(26px)}.tabs{border-bottom:1px solid #e0e0e0;display:flex}.tab{padding:12px 24px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s ease}.tab:hover{background-color:#f8f9fa}.tab.active{border-bottom-color:#007bff;color:#007bff;font-weight:600}.progress-bar{width:100%;height:8px;background-color:#f0f0f0;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background-color:#007bff;transition:width .3s ease}.button-toggle{display:flex;border:1px solid #ccc;border-radius:4px;overflow:hidden}.toggle-btn{padding:8px 16px;border:none;background-color:#fff;cursor:pointer;transition:background-color .2s ease}.toggle-btn:hover{background-color:#f8f9fa}.toggle-btn.active{background-color:#007bff;color:#fff}.stepper{display:flex;align-items:center;gap:16px}.step{padding:8px 16px;border:2px solid #e0e0e0;border-radius:50px;background-color:#fff;color:#6c757d;font-weight:500;transition:all .2s ease}.step.active{border-color:#007bff;background-color:#007bff;color:#fff}.timeline{position:relative;padding-left:24px;border-left:2px solid #007bff}.timeline-item{position:relative;padding:16px 0 16px 24px;margin-bottom:16px}.timeline-item:before{content:"";position:absolute;left:-28px;top:20px;width:12px;height:12px;border-radius:50%;background-color:#007bff}.otp-input{display:flex;gap:8px}.otp-input input{width:40px;height:40px;text-align:center;border:1px solid #ccc;border-radius:4px;font-size:18px;font-weight:700}.otp-input input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}