:root{--builder-primary:#7eb2ff;--builder-secondary:#787d81;--builder-background:#f8f9fa;--builder-text:#212529}
.pointer{cursor:pointer}.builder-wrapper{background-color:var(--builder-background);color:var(--builder-text);font-family:system-ui,sans-serif;border:2px solid green!important}.toolbar{border-bottom:1px solid #ccc;justify-content:space-between;align-items:center;padding:.75rem;display:flex}.canvas .action-btn{transition:background .15s,color .15s,border-color .15s}.canvas .action-btn:hover{filter:brightness(.97)}.canvas-card{transition:box-shadow .15s,transform .15s}.canvas-card:hover{box-shadow:0 6px 14px #0000000f}.canvas .badge{border-radius:999px;font-weight:600}.canvas .drop-slot{outline:1px dashed #6366f140}
.builder-shell{background:radial-gradient(1200px 800px at 10% -10%,#f8fafc 0%,#0000 60%),radial-gradient(1000px 700px at 110% -10%,#f1f5f9 0%,#0000 55%),linear-gradient(#fff,#f7f7fb)}.builder-header{z-index:10;-webkit-backdrop-filter:saturate(140%)blur(10px);backdrop-filter:saturate(140%)blur(10px);background:#ffffffbf;position:sticky;top:0}.hover-elevate:hover{transform:translateY(-1px);box-shadow:0 6px 16px #00000014}.brand-dot{background:linear-gradient(135deg,var(--builder-dropZonePrimary),var(--builder-dropZoneSecondary));border-radius:999px;width:10px;height:10px;display:inline-block}.builder-panel-left,.builder-panel-right{background:linear-gradient(#fff,#fafbff)}.builder-canvas{background-image:linear-gradient(90deg,#a8a8a829 1px,#0000 1px),linear-gradient(#a8a8a829 1px,#0000 1px);background-position:50%;background-size:24px 24px}.builder-panel-left .list-group>.list-group-item,.builder-panel-left .d-flex.p-2.border.rounded,.builder-panel-right .card{box-shadow:0 3px 10px #0000000a;border-color:#11182714!important}.builder-header,.builder-panel-left,.builder-panel-right,.builder-canvas{border-color:#00000014!important}html,body,#__next{height:100%}.builder-shell,.builder-body,.builder-panel-left,.builder-panel-right,.builder-canvas{min-height:0}
.sideBar-width{width:300px}.builder-panel-left .bg-white{will-change:transform,box-shadow}.builder-panel-left .bg-white:hover{box-shadow:0 6px 20px #0000000f}.builder-panel-left .bg-white:active{transform:scale(.98)}.builder-panel-left .rounded-3{-webkit-backdrop-filter:saturate(1.2);backdrop-filter:saturate(1.2)}.placeholder{border-radius:6px;min-height:12px}[data-dragging=true]{opacity:.9;transform:scale(1.03);box-shadow:0 10px 30px #0000001f}.btn-link.text-warning:hover{filter:drop-shadow(0 2px 6px #ffc1074d)}.drag-card{border:1px solid var(--bs-border-color);background:#fff;border-radius:12px;align-items:center;gap:10px;padding:10px 12px;display:flex;box-shadow:0 1px 2px #0000000a}.drag-card:hover{background:linear-gradient(#fff,#fdfdfd);box-shadow:0 6px 20px #0000000f}.drag-card[data-pressed=true]{transform:scale(.985);box-shadow:0 8px 22px #00000014}.drag-card[data-dragging=true]{background:#fff;transform:scale(1.03);box-shadow:0 10px 30px #0000001f,0 0 0 2px #0d6efd1f}[data-drag-handle]{cursor:grab;-webkit-user-select:none;user-select:none;color:var(--bs-secondary-color,#6c757d)}[data-drag-handle]:active{cursor:grabbing}.side-item{border:1px solid var(--bs-border-color);background:#fff;border-radius:5px;align-items:center;gap:10px;margin:6px 10px;padding:7px 12px;transition:box-shadow .16s,background .12s;display:flex}.side-item:hover{background:linear-gradient(#fff,#fbfbfb);box-shadow:0 6px 20px #0000000f}.side-icon{background:var(--bs-light);border:1px solid var(--bs-border-color);border-radius:10px;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex}.side-label{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;overflow:hidden}.side-grip{color:#98a2b3}.side-draggable[data-pressed=true]{transform:scale(.985);box-shadow:0 8px 22px #00000014}.side-draggable[data-dragging=true]{background:#fff;transform:scale(1.03);box-shadow:0 10px 30px #0000001f,0 0 0 2px #0d6efd1f}
.properties-panel{background:var(--bs-body-bg);flex-direction:column;height:100%;min-height:0;display:flex}.properties-header{z-index:2;background:var(--bs-body-bg);-webkit-backdrop-filter:saturate(180%)blur(8px);backdrop-filter:saturate(180%)blur(8px);border-bottom:1px solid #0000000f;position:sticky;top:0}.properties-scroll{flex:auto;min-height:0;padding-right:6px;overflow:hidden auto}.properties-scroll::-webkit-scrollbar-thumb{background:#00000024;border-radius:8px}.properties-scroll:hover::-webkit-scrollbar-thumb{background:#00000047}.properties-panel{flex-direction:column;height:100%;display:flex}.properties-header.sticky-top{z-index:2}.properties-scroll{min-height:0;overflow:auto}.properties-panel{flex-direction:column;min-height:0;display:flex}.properties-scroll{overscroll-behavior:contain;min-height:0;overflow:auto}.properties-header{z-index:5;background:var(--bs-body-bg);border-bottom:1px solid var(--bs-border-color);position:sticky;top:0;box-shadow:0 2px 8px #0000000a}.pp-section{background:#fff;border-radius:5px;overflow:hidden}.pp-section-header{background:#fff;border:none;padding:10px 14px}.pp-section .caret{transition:transform .16s}.pp-section .caret.rot-180{transform:rotate(180deg)}.pp-section-body{max-height:0;transition:max-height .24s;overflow:auto}.pp-section-body.open{max-height:1500px}.properties-scroll::-webkit-scrollbar{width:10px}.properties-scroll::-webkit-scrollbar-thumb{background:#00000026 padding-box padding-box;border:2px solid #0000;border-radius:8px}.properties-scroll::-webkit-scrollbar-thumb:hover{background:#00000040}
.canvas{border:1px dashed var(--builder-primary);background-color:#f7fdff;border-radius:5px}.action-btn{opacity:.85;transition:all .2s ease-in-out;position:relative}.action-bar--sm .action-btn{font-size:12px}.action-btn:hover{opacity:1;transform:scale(1.15);box-shadow:0 0 5px #00000026}.action-menu{background:#fff;border:1px solid #e5e7eb;border-radius:10px;min-width:180px;margin-top:6px;padding:6px;position:absolute;top:100%;right:0;box-shadow:0 12px 28px #0000001f}.action-menu__item{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;width:100%;padding:8px 10px}.action-menu__item:hover{background:#f3f4f6}.action-menu__item--danger{color:#b91c1c}.dragging{opacity:.5;background-color:#f5f5f5;transition:box-shadow .2s,opacity .2s;box-shadow:0 8px 20px #00000026}.highlight-drop{border:1px dashed var(--builder-dropZonePrimary);background-color:#e7f1ff;border-radius:5px;transition:background-color .2s}.droppable-area{z-index:0;min-height:80px;position:relative}.dragging{opacity:.5;background-color:#f5f5f5;box-shadow:0 8px 20px #00000026}.inner-droppable{pointer-events:auto;width:100%}.action-bar{--abg:color-mix(in srgb,var(--bs-body-bg,#fff)70%,transparent);--aborder:#00000014;background:var(--abg);border:1px solid var(--aborder);-webkit-backdrop-filter:saturate(1.2)blur(6px);pointer-events:auto;border-radius:999px;gap:6px;padding:6px;transition:box-shadow .2s,transform .18s,background .18s;animation:.16s ease-out both actionBarIn;display:inline-flex}.action-bar--sm{gap:4px;padding:4px}.action-bar--dragging{transform:translateZ(0)scale(1.02)}.action-btn{--ring:0 0 0 0 #0000;border:1px solid var(--btn-border,#d8dbe0);color:#444;cursor:pointer;-webkit-user-select:none;user-select:none;background:linear-gradient(#fff,#f6f7f9);border-radius:999px;outline:none;justify-content:center;align-items:center;transition:transform .12s,box-shadow .16s,background .12s,border-color .12s,color .12s;display:inline-flex;position:relative;box-shadow:inset 0 1px #fffc,0 1px 2px #0000000f}.action-btn i{font-size:12px;line-height:1}.action-btn:hover{transform:translateY(-1px);box-shadow:inset 0 2px #ffffffe6,0 4px 12px #0000001f}.action-btn:active{transform:translateY(0);box-shadow:inset 0 1px #ffffffd9,0 2px 8px #00000014}.action-btn:focus-visible{box-shadow:var(--ring),0 2px 0 #ffffffe6 inset,0 4px 12px #0000001f;--ring:0 0 0 3px #3884ff40}.action-btn--neutral{--btn-border:#d8dbe0;color:#333;background:linear-gradient(#fff,#f7f8fa)}.action-btn--success{--btn-border:#c7ead6;color:#157347;background:linear-gradient(#f2fff7,#e8fff1)}.action-btn--info{--btn-border:#bfe7fa;color:#087990;background:linear-gradient(#f0fbff,#e7f6ff)}.action-btn--danger{--btn-border:#f0c2c6;color:#b02a37;background:linear-gradient(#fff2f3,#ffe9ea)}.action-btn--handle{color:#2b5fc7;cursor:grab;background:linear-gradient(#f7faff,#eef4ff);border-color:#cfe0ff}.action-bar--dragging .action-btn--handle{color:#fff;background:linear-gradient(#2f6ce6,#3f7aff);border-color:#2f6ce6}.action-btn[data-tooltip]{position:relative}.action-btn[data-tooltip]:after{content:attr(data-tooltip);color:#fff;white-space:nowrap;opacity:0;pointer-events:none;background:#1e2128eb;border-radius:6px;padding:4px 8px;font-size:11px;transition:opacity .16s,transform .16s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)translateY(6px);box-shadow:0 6px 18px #0000002e}.action-btn:hover[data-tooltip]:after,.action-btn:focus-visible[data-tooltip]:after{opacity:1;transform:translate(-50%)translateY(0)}@keyframes actionBarIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.action-bar,.action-btn,.action-btn[data-tooltip]:after{transition:none!important;animation:none!important}}.headerCanvasBorder{left:calc(-1*var(--hb-gapx));right:calc(-1*var(--hb-gapx));top:calc(.01*var(--hb-overlap));height:calc(29px + var(--hb-radius));border-left:var(--hb-stroke)solid var(--hb-border);border-right:var(--hb-stroke)solid var(--hb-border);border-bottom:var(--hb-stroke)solid var(--hb-border);border-bottom-left-radius:var(--hb-radius);border-bottom-right-radius:var(--hb-radius);z-index:0;background:#fff;position:absolute;box-shadow:0 12px 18px -19px #272727}.headerCanvasDiv{margin-top:calc(-1*var(--hb-overlap));padding-top:var(--hb-overlap);z-index:1;justify-content:center;width:100%;display:flex;position:absolute}.headerCanvasControllerDes{z-index:2;align-items:center;display:inline-flex}