@liveroom-tech/react-immersive 2.0.0 → 2.1.1

package/dist/index.js

@@ -54,9 +54,11 @@ __export(index_exports, {
   SimpleModelViewer: () => SimpleModelViewer,
   material: () => material,
   patchBindings: () => patchBindings,
+  patchSceneConfig: () => patchSceneConfig,
   useObjectBinding: () => useObjectBinding,
   useObjectBindingIds: () => useObjectBindingIds,
   useObjectBindings: () => useObjectBindings,
+  useSceneConfig: () => useSceneConfig,
   useShareableViewerState: () => useShareableViewerState,
   useViewerActions: () => useViewerActions,
   useViewerAnimations: () => useViewerAnimations,
@@ -5492,32 +5494,37 @@ function ObjectBindingDataPanel({
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", { className: "left-panel__divider" }),
         objectToRender.actions && objectToRender.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "left-panel__actions-label", children: "Actions" }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "left-panel__actions-list", children: objectToRender.actions.map((action) => {
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "left-panel__actions-list", children: objectToRender.actions.map((action, index) => {
             const isActive = currentAction?.action.id === action.id && (currentAction.binding === objectToRender || currentAction.binding?.id === objectToRender.id || currentAction.binding?.modelObjectId === objectToRender.modelObjectId || currentAction.objectId === objectToRender.id || currentAction.objectId === objectToRender.modelObjectId);
             const extra = renderActionExtra?.(action.id);
-            return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react18.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                "button",
-                {
-                  onClick: (e) => onAction({
-                    objectId: objectToRender.modelObjectId || objectToRender.id || "",
-                    action,
-                    binding: objectToRender,
-                    screenX: e.clientX,
-                    screenY: e.clientY
-                  }),
-                  className: [
-                    "left-panel__action-btn",
-                    `left-panel__action-btn--${action.id}`,
-                    isActive ? "left-panel__action-btn--active" : ""
-                  ].filter(Boolean).join(" "),
-                  "data-action-id": action.id,
-                  "data-label": action.label,
-                  children: action.label
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ActionExtra, { content: extra })
-            ] }, action.id);
+            return (
+              // Keyed by position, not action.id: ids are author-supplied
+              // and not guaranteed unique within a binding, and colliding
+              // keys make React drop one of the buttons.
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react18.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  "button",
+                  {
+                    onClick: (e) => onAction({
+                      objectId: objectToRender.modelObjectId || objectToRender.id || "",
+                      action,
+                      binding: objectToRender,
+                      screenX: e.clientX,
+                      screenY: e.clientY
+                    }),
+                    className: [
+                      "left-panel__action-btn",
+                      `left-panel__action-btn--${action.id}`,
+                      isActive ? "left-panel__action-btn--active" : ""
+                    ].filter(Boolean).join(" "),
+                    "data-action-id": action.id,
+                    "data-label": action.label,
+                    children: action.label
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ActionExtra, { content: extra })
+              ] }, index)
+            );
           }) })
         ] })
       ] })
@@ -8223,11 +8230,11 @@ function ModelViewer({
 }
 
 // src/components/BindingBuilder/BindingBuilder.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_lucide_react16 = require("lucide-react");
 
 // src/styles/BindingBuilder.css
-styleInject('.bb-root {\n  --bb-font-family:\n    Inter,\n    "Segoe UI",\n    Helvetica,\n    Arial,\n    sans-serif;\n  --bb-app-bg:\n    radial-gradient(\n      \n      circle at top left,\n      rgba(226, 232, 240, 0.8),\n      transparent 30% ),\n    linear-gradient(\n      135deg,\n      #f6f1e8 0%,\n      #ebe8df 40%,\n      #e9edf2 100%);\n  --bb-app-text: #111827;\n  --bb-sidebar-bg:\n    linear-gradient(\n      180deg,\n      rgba(20, 27, 45, 0.98),\n      rgba(25, 34, 57, 0.95)),\n    #121826;\n  --bb-sidebar-text: #f8fafc;\n  --bb-sidebar-muted-text: #b3bfd2;\n  --bb-sidebar-subtle-text: #94a3b8;\n  --bb-sidebar-border: rgba(148, 163, 184, 0.18);\n  --bb-sidebar-border-hover: rgba(148, 163, 184, 0.32);\n  --bb-sidebar-divider: rgba(148, 163, 184, 0.14);\n  --bb-sidebar-surface: rgba(255, 255, 255, 0.04);\n  --bb-sidebar-surface-hover: rgba(255, 255, 255, 0.08);\n  --bb-sidebar-surface-strong: rgba(255, 255, 255, 0.05);\n  --bb-sidebar-eyebrow-bg: rgba(148, 163, 184, 0.16);\n  --bb-sidebar-eyebrow-text: #cbd5e1;\n  --bb-sidebar-left-shadow: 18px 0 42px rgba(15, 23, 42, 0.12);\n  --bb-sidebar-right-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);\n  --bb-sidebar-chip-bg: rgba(15, 23, 42, 0.42);\n  --bb-sidebar-chip-border: rgba(148, 163, 184, 0.14);\n  --bb-sidebar-accent: rgba(99, 102, 241, 0.18);\n  --bb-sidebar-accent-border: rgba(99, 102, 241, 0.4);\n  --bb-sidebar-accent-text: #f8fafc;\n  --bb-menu-bg: #1a1f2e;\n  --bb-menu-shadow: 0 16px 32px rgba(15, 23, 42, 0.4);\n  display: flex;\n  height: 100%;\n  min-height: 0;\n  width: 100%;\n  background: var(--bb-app-bg);\n  color: var(--bb-app-text);\n  font-family: var(--bb-font-family);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-synthesis: none;\n}\n.bb-root * {\n  box-sizing: border-box;\n}\n.bb-root input,\n.bb-root select,\n.bb-root textarea,\n.bb-root button {\n  font-family: inherit;\n}\n.bb-sidebar {\n  width: 400px;\n  min-height: 0;\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bb-sidebar-bg);\n  color: var(--bb-sidebar-text);\n  transition: width 0.24s ease;\n}\n.bb-sidebar--left {\n  border-right: 1px solid var(--bb-sidebar-border);\n  box-shadow: var(--bb-sidebar-left-shadow);\n}\n.bb-sidebar--right {\n  width: 300px;\n  border-left: 1px solid var(--bb-sidebar-border);\n  box-shadow: var(--bb-sidebar-right-shadow);\n}\n.bb-sidebar--collapsed {\n  width: 36px;\n}\n.bb-sidebar--collapsed .bb-header {\n  padding: 5px;\n  display: flex;\n  justify-content: center;\n}\n.bb-sidebar--collapsed .bb-header--sidebar {\n  min-height: 36px;\n}\n.bb-sidebar--collapsed .bb-sidebarToggle {\n  width: 26px;\n  height: 26px;\n  font-size: 12px;\n}\n.bb-header {\n  padding: 5px 20px;\n  border-bottom: 1px solid var(--bb-sidebar-divider);\n}\n.bb-header--sidebar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  min-height: 55px;\n}\n.bb-eyebrow {\n  display: inline-block;\n  margin-bottom: 12px;\n  padding: 6px 10px;\n  border-radius: 999px;\n  background: var(--bb-sidebar-eyebrow-bg);\n  color: var(--bb-sidebar-eyebrow-text);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n}\n.bb-title {\n  margin: 0 0 0px;\n  font-size: 20px;\n  line-height: 0.95;\n  letter-spacing: -0.04em;\n  font-weight: 800;\n  color: var(--bb-sidebar-text);\n}\n.bb-sidebarToggle {\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n  border-radius: 6px;\n  border: 1px solid var(--bb-sidebar-border);\n  background: var(--bb-sidebar-surface-strong);\n  color: var(--bb-sidebar-text);\n  font-size: 16px;\n  font-weight: 800;\n  cursor: pointer;\n  transition:\n    transform 0.18s ease,\n    background-color 0.18s ease,\n    border-color 0.18s ease;\n}\n.bb-sidebarToggle:hover {\n  transform: translateY(-1px);\n  background: var(--bb-sidebar-surface-hover);\n  border-color: var(--bb-sidebar-border-hover);\n}\n.bb-subtitle {\n  margin: 0;\n  max-width: 32ch;\n  font-size: 15px;\n  line-height: 1.7;\n  color: var(--bb-sidebar-muted-text);\n}\n.bb-statRow {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 10px;\n  margin-top: 22px;\n}\n.bb-statChip {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n  padding: 12px 14px;\n  border-radius: 8px;\n  background: var(--bb-sidebar-chip-bg);\n  border: 1px solid var(--bb-sidebar-chip-border);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);\n}\n.bb-statChip strong {\n  font-size: 13px;\n  color: var(--bb-sidebar-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.bb-statLabel {\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--bb-sidebar-subtle-text);\n}\n.bb-tabRow {\n  display: flex;\n  gap: 6px;\n  padding: 10px 20px 10px;\n}\n.bb-tab {\n  flex: 1;\n  padding: 6px 10px;\n  border-radius: 6px;\n  border: 1px solid var(--bb-sidebar-border);\n  background: var(--bb-sidebar-surface);\n  color: var(--bb-sidebar-muted-text);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  cursor: pointer;\n  transition:\n    background-color 0.18s ease,\n    border-color 0.18s ease,\n    color 0.18s ease;\n}\n.bb-tab:hover {\n  background: var(--bb-sidebar-surface-hover);\n  border-color: var(--bb-sidebar-border-hover);\n}\n.bb-tab--active {\n  background: var(--bb-sidebar-accent);\n  border-color: var(--bb-sidebar-accent-border);\n  color: var(--bb-sidebar-accent-text);\n}\n.bb-toolbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 20px 8px;\n  border-bottom: 1px solid var(--bb-sidebar-divider);\n  flex-wrap: wrap;\n}\n.bb-toolbarGroup {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n.bb-toolbarDivider {\n  width: 1px;\n  align-self: stretch;\n  background: var(--bb-sidebar-divider);\n  margin: 0;\n}\n.bb-iconButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border-radius: 7px;\n  border: 1px solid var(--bb-sidebar-border);\n  background: var(--bb-sidebar-surface);\n  color: var(--bb-sidebar-text);\n  cursor: pointer;\n  transition: background-color 0.18s ease, border-color 0.18s ease;\n}\n.bb-iconButton:hover:not(:disabled) {\n  background: var(--bb-sidebar-surface-hover);\n  border-color: var(--bb-sidebar-border-hover);\n}\n.bb-iconButton:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.bb-exportMenuWrapper {\n  position: relative;\n  display: inline-flex;\n}\n.bb-exportMenu {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  right: 0;\n  z-index: 20;\n  display: flex;\n  flex-direction: column;\n  min-width: 150px;\n  padding: 6px;\n  border-radius: 9px;\n  border: 1px solid var(--bb-sidebar-border);\n  background: var(--bb-menu-bg);\n  box-shadow: var(--bb-menu-shadow);\n}\n.bb-exportMenuItem {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--bb-sidebar-text);\n  font-size: 12px;\n  font-weight: 600;\n  text-align: left;\n  cursor: pointer;\n}\n.bb-exportMenuItem:hover {\n  background: var(--bb-sidebar-surface-hover);\n}\n@media (max-width: 640px) {\n  .bb-toolbarDivider {\n    width: 100%;\n    height: 1px;\n  }\n}\n.bb-button,\n.bb-fileLabel {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-height: 32px;\n  padding: 0 12px;\n  border-radius: 7px;\n  border: 1px solid var(--bb-sidebar-border);\n  background: var(--bb-sidebar-surface);\n  color: var(--bb-sidebar-text);\n  font-size: 12px;\n  font-weight: 700;\n  cursor: pointer;\n  transition:\n    transform 0.18s ease,\n    background-color 0.18s ease,\n    border-color 0.18s ease,\n    box-shadow 0.18s ease;\n}\n.bb-button:hover,\n.bb-fileLabel:hover {\n  transform: translateY(-1px);\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(148, 163, 184, 0.32);\n  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18);\n}\n.bb-button:disabled,\n.bb-fileLabel:has(.bb-hiddenInput:disabled) {\n  opacity: 0.55;\n  cursor: not-allowed;\n  transform: none;\n  box-shadow: none;\n}\n.bb-button--primary {\n  background: #135bc0;\n  border-color: transparent;\n  color: #ffffff;\n}\n.bb-button--primary:hover {\n  background: #1a68d6;\n}\n.bb-button--ghost {\n  background: rgba(248, 250, 252, 0.08);\n}\n.bb-hiddenInput {\n  display: none;\n}\n.bb-statusCard {\n  margin-top: 4px;\n  padding: 14px 16px;\n  border-radius: 9px;\n  background: rgba(15, 23, 42, 0.44);\n  border: 1px solid rgba(148, 163, 184, 0.15);\n}\n.bb-statusCard--error {\n  background: rgba(127, 29, 29, 0.32);\n  border-color: rgba(248, 113, 113, 0.24);\n}\n.bb-statusCard--success {\n  background: rgba(6, 78, 59, 0.34);\n  border-color: rgba(52, 211, 153, 0.24);\n}\n.bb-statusTitle {\n  margin-bottom: 6px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: #cbd5e1;\n}\n.bb-status {\n  font-size: 13px;\n  line-height: 1.55;\n  color: #e2e8f0;\n}\n.bb-status--error {\n  color: #fecaca;\n}\n.bb-status--success {\n  color: #bbf7d0;\n}\n.bb-input--error {\n  border-color: #dc2626;\n}\n.bb-nodeList {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n  background: #141824;\n}\n.bb-sectionHead {\n  padding: 24px 20px 16px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.07);\n}\n.bb-sectionKicker {\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: #64748b;\n}\n.bb-sectionHeading {\n  margin-top: 4px;\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: #f1f5f9;\n}\n.bb-search {\n  padding: 14px 16px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.07);\n}\n.bb-input,\n.bb-select,\n.bb-textarea {\n  width: 100%;\n  border-radius: 10px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  background: rgba(255, 255, 255, 0.05);\n  color: #e2e8f0;\n  padding: 10px 14px;\n  font-size: 13px;\n  line-height: 1.45;\n}\n.bb-input::placeholder,\n.bb-textarea::placeholder {\n  color: #475569;\n}\n.bb-input--compact {\n  width: 64px;\n  max-width: 64px;\n  flex: 0 0 auto;\n  padding: 7px 4px;\n  text-align: center;\n}\n.bb-input:focus,\n.bb-select:focus,\n.bb-textarea:focus {\n  outline: none;\n  border-color: rgba(255, 255, 255, 0.18);\n  background: rgba(255, 255, 255, 0.08);\n  box-shadow: none;\n}\n.bb-textarea {\n  min-height: 110px;\n  resize: vertical;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n}\n.bb-nodeItems {\n  min-height: 0;\n  overflow-y: auto;\n  padding: 10px 0;\n}\n.bb-nodeButton {\n  width: 100%;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  padding: 12px 20px;\n  margin-bottom: 0;\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.12s ease, color 0.12s ease;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.04);\n}\n.bb-nodeButton:hover {\n  background: rgba(255, 255, 255, 0.05);\n}\n.bb-nodeButton--active {\n  background: rgba(255, 255, 255, 0.05);\n  box-shadow: none;\n}\n.bb-nodeName {\n  display: block;\n  margin-bottom: 2px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #e2e8f0;\n}\n.bb-nodeMeta {\n  display: block;\n  font-size: 11px;\n  color: #94a3b8;\n}\n.bb-editor {\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  overflow-y: auto;\n  padding: 16px 16px 28px;\n  overscroll-behavior: contain;\n}\n.bb-editorHeader {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 18px;\n  padding: 18px;\n  border-radius: 11px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(148, 163, 184, 0.12);\n}\n.bb-editorTitle {\n  margin: 8px 0 0;\n  font-size: 24px;\n  line-height: 1.1;\n  color: #f8fafc;\n}\n.bb-editorMeta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px 12px;\n  margin-top: 10px;\n  font-size: 12px;\n  color: #94a3b8;\n}\n.bb-editorBadge {\n  flex-shrink: 0;\n  padding: 8px 12px;\n  border-radius: 999px;\n  background: rgba(251, 191, 36, 0.12);\n  border: 1px solid rgba(251, 191, 36, 0.2);\n  color: #fcd34d;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n.bb-emptyEditor {\n  padding: 28px 8px;\n  font-size: 14px;\n  color: #a7b1c3;\n}\n.bb-section {\n  margin-bottom: 10px;\n  border-radius: 7px;\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(148, 163, 184, 0.12);\n  overflow: hidden;\n}\n.bb-sectionHeaderButton {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border: none;\n  background: rgba(255, 255, 255, 0.03);\n  padding: 11px 14px;\n  cursor: pointer;\n  text-align: left;\n  color: inherit;\n}\n.bb-sectionHeaderButton:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n.bb-sectionHeaderMain {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 8px;\n}\n.bb-sectionChevron {\n  flex-shrink: 0;\n  color: #8b97ab;\n  transform: rotate(-90deg);\n  transition: transform 0.18s ease;\n}\n.bb-sectionChevron--open {\n  transform: rotate(0deg);\n}\n.bb-sectionBody {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 14px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n}\n.bb-sectionTitle {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 700;\n  color: #c3cbdb;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n.bb-sectionHelp {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  margin-left: 2px;\n  border-radius: 999px;\n  color: #b9c0ca;\n  cursor: help;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease,\n    transform 0.18s ease;\n}\n.bb-sectionHelp:hover {\n  background: rgba(255, 255, 255, 0.08);\n  color: #eef2ff;\n  transform: translateY(-0.5px);\n}\n.bb-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 10px;\n}\n.bb-presetGallery {\n  display: flex;\n  justify-items: center;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin-bottom: 14px;\n}\n.bb-presetSwatch {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 5px;\n  width: 64px;\n  padding: 6px 4px;\n  border-radius: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  background: rgba(148, 163, 184, 0.06);\n  cursor: pointer;\n  transition: border-color 0.15s, background 0.15s;\n}\n.bb-presetSwatch:hover:not(:disabled) {\n  border-color: rgba(148, 163, 184, 0.4);\n  background: rgba(148, 163, 184, 0.12);\n}\n.bb-presetSwatch:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.bb-presetSwatchColor {\n  width: 32px;\n  height: 32px;\n  border-radius: 999px;\n  border: 1px solid rgba(255, 255, 255, 0.18);\n}\n.bb-presetSwatchLabel {\n  font-size: 10px;\n  font-weight: 600;\n  color: #cbd5e1;\n  text-align: center;\n  line-height: 1.2;\n}\n.bb-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n.bb-field--full {\n  grid-column: 1 / -1;\n}\n.bb-label {\n  font-size: 12px;\n  font-weight: 700;\n  color: #d7dee9;\n}\n.bb-note {\n  font-size: 11px;\n  color: #8b97ab;\n}\n.bb-tierLock {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 16px 14px;\n  border-radius: 7px;\n  background: rgba(251, 191, 36, 0.08);\n  border: 1px dashed rgba(251, 191, 36, 0.3);\n  color: #fcd34d;\n}\n.bb-tierLockMessage {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n}\n.bb-root--licenseChecking,\n.bb-root--licenseInvalid {\n  align-items: center;\n  justify-content: center;\n}\n.bb-readonly {\n  background: rgba(148, 163, 184, 0.08);\n  color: #9ca3af;\n}\n.bb-checkboxRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.bb-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 5px;\n  border-radius: 7px;\n  background: rgba(15, 23, 42, 0.22);\n  border: 1px solid rgba(148, 163, 184, 0.12);\n  font-size: 13px;\n  color: #d7dee9;\n}\n.bb-checkbox input {\n  accent-color: #f59e0b;\n}\n.bb-sliderField {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.bb-slider {\n  flex: 1 1 auto;\n  min-width: 0;\n  accent-color: #2aa8d8;\n}\n.bb-slider--unset {\n  opacity: 0.45;\n}\n.bb-fileField {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.bb-fileField-input {\n  width: 100%;\n  padding-right: 40px;\n}\n.bb-fileFieldButton {\n  position: absolute;\n  right: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: 5px;\n  background: transparent;\n  color: #aab4c5;\n  cursor: pointer;\n}\n.bb-fileFieldButton:hover {\n  background: rgba(255, 255, 255, 0.08);\n  color: #f8fafc;\n}\n.bb-materialPanel {\n  margin-top: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.14);\n  border-radius: 6px;\n  background: rgba(15, 23, 42, 0.28);\n  overflow: hidden;\n}\n.bb-materialPanel:first-of-type {\n  margin-top: 0;\n}\n.bb-materialPanelHeader {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border: none;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.03);\n  cursor: pointer;\n  text-align: left;\n  color: inherit;\n}\n.bb-materialPanelHeader:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n.bb-materialPanelTitleWrap {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  color: #dbe4f0;\n}\n.bb-materialPanelChevron {\n  flex-shrink: 0;\n  color: #8b97ab;\n  transform: rotate(-90deg);\n  transition: transform 0.18s ease;\n}\n.bb-materialPanelChevron--open {\n  transform: rotate(0deg);\n}\n.bb-materialPanelTitle {\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n.bb-materialPanelHelp {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  margin-left: 2px;\n  border-radius: 999px;\n  color: #b9c0ca;\n  cursor: help;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease,\n    transform 0.18s ease;\n}\n.bb-materialPanelHelp:hover {\n  background: rgba(255, 255, 255, 0.08);\n  color: #eef2ff;\n  transform: translateY(-0.5px);\n}\n.bb-materialPanelBody {\n  padding: 12px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.bb-actionList {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.bb-actionCard {\n  border: 1px solid rgba(148, 163, 184, 0.14);\n  border-radius: 9px;\n  padding: 14px;\n  background: rgba(15, 23, 42, 0.2);\n}\n.bb-actionCardHeader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  margin-bottom: 12px;\n}\n.bb-actionCardTitle {\n  font-size: 13px;\n  font-weight: 700;\n  color: #f8fafc;\n}\n.bb-actionCardMeta {\n  flex-shrink: 0;\n  padding: 5px 9px;\n  border-radius: 999px;\n  background: rgba(148, 163, 184, 0.12);\n  color: #94a3b8;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n.bb-actionGrid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 10px;\n}\n.bb-actionFooter {\n  margin-top: 12px;\n}\n.bb-actionRemove {\n  width: 100%;\n}\n.bb-previewShell {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 5px;\n  overflow: hidden;\n}\n.bb-previewHeader {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 0 4px 10px;\n}\n.bb-previewControls {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-end;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n.bb-previewTitle {\n  margin: 2px 0 0;\n  font-size: 20px;\n  line-height: 1.05;\n  letter-spacing: -0.03em;\n  color: #1f2937;\n}\n.bb-previewToggles {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n}\n.bb-checkbox--compact {\n  gap: 5px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 1;\n  color: #4b5563;\n}\n.bb-checkbox--compact:hover {\n  background: transparent;\n  transform: none;\n}\n.bb-checkbox--compact input[type=checkbox] {\n  width: 11px;\n  height: 11px;\n}\n.bb-previewMeta {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 8px;\n}\n.bb-removeModelButton {\n  background-color: rgb(174, 54, 54);\n  min-height: 34px;\n  padding: 0 14px;\n}\n.bb-removeModelButton:hover {\n  background-color: rgb(163, 20, 20);\n}\n.bb-previewMeta span {\n  display: inline-flex;\n  align-items: center;\n  min-height: 34px;\n  padding: 0 12px;\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.7);\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  color: #475569;\n  font-size: 12px;\n  font-weight: 700;\n}\n.bb-preview {\n  position: relative;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n  border-radius: 14px;\n  background:\n    radial-gradient(\n      circle at top left,\n      rgba(255, 255, 255, 0.92),\n      rgba(236, 240, 244, 0.82)),\n    #f8fafc;\n  border: 1px solid rgba(148, 163, 184, 0.24);\n  box-shadow: 0 24px 48px rgba(148, 163, 184, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);\n}\n.bb-loadingOverlay {\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  padding: 24px;\n  text-align: center;\n  border-radius: 14px;\n  background: rgba(248, 250, 252, 0.82);\n  backdrop-filter: blur(2px);\n}\n.bb-loadingSpinner {\n  width: 40px;\n  height: 40px;\n  border-radius: 999px;\n  border: 3px solid rgba(148, 163, 184, 0.3);\n  border-top-color: #2563eb;\n  animation: bb-spin 0.8s linear infinite;\n}\n@keyframes bb-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.bb-loadingMessage {\n  max-width: 320px;\n  color: #475569;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.5;\n}\n.bb-previewStatus {\n  max-width: 280px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bb-previewStatus--success {\n  background: rgba(34, 197, 94, 0.12) !important;\n  border-color: rgba(34, 197, 94, 0.3) !important;\n  color: #15803d !important;\n}\n.bb-previewStatus--error {\n  background: rgba(239, 68, 68, 0.12) !important;\n  border-color: rgba(239, 68, 68, 0.3) !important;\n  color: #b91c1c !important;\n}\n.bb-previewModelName {\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bb-previewPlaceholder {\n  position: relative;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  text-align: center;\n  color: #64748b;\n  font-size: 15px;\n  line-height: 1.7;\n  border-radius: 14px;\n  border: 2px dashed rgba(148, 163, 184, 0.24);\n  background:\n    radial-gradient(\n      circle at top,\n      rgba(251, 191, 36, 0.12),\n      transparent 30%),\n    linear-gradient(\n      180deg,\n      rgba(255, 255, 255, 0.82),\n      rgba(238, 242, 248, 0.9));\n  transition:\n    border-color 0.2s ease,\n    background 0.2s ease,\n    transform 0.2s ease,\n    box-shadow 0.2s ease;\n}\n.bb-previewPlaceholder > div {\n  max-width: 420px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 14px;\n}\n.bb-previewPlaceholderTitle {\n  font-size: 28px;\n  line-height: 1.05;\n  letter-spacing: -0.03em;\n  font-weight: 800;\n  color: #1f2937;\n}\n.bb-previewPlaceholderButton {\n  margin-top: 8px;\n  border: 0;\n  border-radius: 999px;\n  padding: 13px 22px;\n  background: #135bc0;\n  color: #ffffff;\n  font-size: 14px;\n  font-weight: 800;\n  cursor: pointer;\n  transition:\n    transform 0.18s ease,\n    box-shadow 0.18s ease,\n    opacity 0.18s ease;\n}\n.bb-previewPlaceholderButton:hover:not(:disabled) {\n  transform: translateY(-1px);\n  box-shadow: 0 14px 30px rgba(19, 91, 192, 0.28);\n}\n.bb-previewPlaceholderButton:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.bb-previewPlaceholder--dragActive {\n  border-color: rgba(245, 158, 11, 0.75);\n  background:\n    radial-gradient(\n      circle at top,\n      rgba(251, 191, 36, 0.22),\n      transparent 32%),\n    linear-gradient(\n      180deg,\n      rgba(255, 252, 245, 0.95),\n      rgba(255, 244, 230, 0.92));\n  transform: scale(0.995);\n  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.14);\n}\n.bb-sectionHeader {\n  cursor: pointer;\n  user-select: none;\n}\n.bb-iconButton {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--bb-sidebar-subtle-text);\n  transition: color 0.2s ease;\n  padding: 4px 8px;\n  border-radius: 4px;\n}\n.bb-iconButton:hover {\n  color: var(--bb-sidebar-text);\n  background: var(--bb-sidebar-surface-strong);\n}\n.bb-cameraLive,\n.bb-cameraSaved {\n  background: rgba(15, 23, 42, 0.44);\n  border-radius: 8px;\n  padding: 14px;\n  margin-bottom: 16px;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  transition: all 0.2s ease;\n}\n.bb-cameraLive:hover,\n.bb-cameraSaved:hover {\n  border-color: rgba(148, 163, 184, 0.25);\n  background: rgba(15, 23, 42, 0.52);\n}\n.bb-cameraLiveHeader,\n.bb-cameraSavedHeader {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.15);\n}\n.bb-cameraLiveBadge {\n  background:\n    linear-gradient(\n      135deg,\n      #10b981,\n      #059669);\n  color: white;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 3px 8px;\n  border-radius: 10px;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n}\n.bb-cameraSavedBadge {\n  background:\n    linear-gradient(\n      135deg,\n      #3b82f6,\n      #2563eb);\n  color: white;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 3px 8px;\n  border-radius: 10px;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n}\n.bb-cameraLiveLabel,\n.bb-cameraSavedLabel {\n  font-size: 12px;\n  font-weight: 600;\n  color: #cbd5e1;\n}\n.bb-cameraValues {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.bb-cameraRow {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 12px;\n  flex-wrap: wrap;\n}\n.bb-cameraLabel {\n  font-weight: 600;\n  color: #94a3b8;\n  min-width: 58px;\n  font-size: 11px;\n  letter-spacing: 0.02em;\n}\n.bb-cameraCode {\n  font-family:\n    "Monaco",\n    "Menlo",\n    "Ubuntu Mono",\n    "Consolas",\n    monospace;\n  font-size: 11px;\n  background: rgba(0, 0, 0, 0.3);\n  padding: 3px 8px;\n  border-radius: 4px;\n  color: #fcd34d;\n  letter-spacing: 0.02em;\n  word-break: break-all;\n}\n.bb-cameraPlaceholder {\n  color: #94a3b8;\n  font-size: 12px;\n  text-align: center;\n  padding: 16px;\n  font-style: italic;\n}\n.bb-cameraControls {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 14px;\n  flex-wrap: wrap;\n}\n.bb-button--primary {\n  background: #135bc0;\n  border-color: transparent;\n  color: #ffffff;\n}\n.bb-button--primary:hover:not(:disabled) {\n  background: #1a68d6;\n  transform: translateY(-1px);\n}\n.bb-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  transform: none;\n}\n.bb-cameraMessage {\n  padding: 10px 14px;\n  border-radius: 6px;\n  margin-bottom: 14px;\n  font-size: 12px;\n  font-weight: 500;\n  animation: slideIn 0.3s ease-out;\n}\n.bb-cameraMessage--success {\n  background: rgba(16, 185, 129, 0.15);\n  color: #6ee7b7;\n  border: 1px solid rgba(16, 185, 129, 0.3);\n}\n.bb-cameraMessage--error {\n  background: rgba(239, 68, 68, 0.15);\n  color: #ffe5e55c;\n  border: 1px solid rgba(255, 248, 248, 0.3);\n}\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.bb-readonly {\n  background: rgba(148, 163, 184, 0.08);\n  color: #9ca3af;\n  cursor: default;\n}\n@media (max-width: 1280px) {\n  .bb-cameraRow {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 4px;\n  }\n  .bb-cameraLabel {\n    min-width: auto;\n  }\n  .bb-cameraControls {\n    flex-direction: column;\n  }\n  .bb-cameraControls .bb-button {\n    width: 100%;\n  }\n}\n@media (max-width: 980px) {\n  .bb-sidebar--left {\n    width: 100%;\n    max-height: 42vh;\n  }\n  .bb-sidebar--collapsed {\n    width: 100%;\n  }\n  .bb-previewShell {\n    padding: 14px;\n  }\n  .bb-preview {\n    min-height: 44vh;\n  }\n  .bb-previewHeader {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .bb-previewControls {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .bb-previewMeta {\n    justify-content: flex-start;\n  }\n  .bb-grid,\n  .bb-actionGrid,\n  .bb-statRow {\n    grid-template-columns: 1fr;\n  }\n}\n.bb-annotationsInfo {\n  margin-top: 8px;\n}\n.bb-emptyAnnotations {\n  padding: 32px;\n  text-align: center;\n  background: #f5f5f5;\n  border-radius: 4px;\n  color: #666;\n  font-size: 14px;\n}\n.bb-annotationsList {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.bb-annotationCard {\n  background: #f9f9f9;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  padding: 12px;\n  transition: all 0.2s ease;\n}\n.bb-annotationCard:hover {\n  background: #ffffff;\n  border-color: #4caf50;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n.bb-annotationHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n.bb-annotationBadge {\n  background: #4caf50;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 2px;\n  font-size: 11px;\n  font-weight: 600;\n}\n.bb-annotationActions {\n  display: flex;\n  gap: 8px;\n}\n.bb-annotationEdit,\n.bb-annotationDelete {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 2px;\n  font-size: 14px;\n  transition: all 0.2s ease;\n}\n.bb-annotationEdit:hover {\n  background: #e8f5e9;\n  transform: scale(1.05);\n}\n.bb-annotationDelete:hover {\n  background: #ffebee;\n  transform: scale(1.05);\n}\n.bb-annotationTitle {\n  font-weight: 600;\n  font-size: 14px;\n  color: #333;\n  margin-bottom: 6px;\n}\n.bb-annotationDescription {\n  font-size: 13px;\n  color: #666;\n  margin-bottom: 8px;\n  line-height: 1.4;\n}\n.bb-annotationPosition {\n  font-size: 11px;\n  font-family: monospace;\n  color: #999;\n  background: #f0f0f0;\n  padding: 4px 6px;\n  border-radius: 2px;\n  display: inline-block;\n}\n.bb-modalOverlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n.bb-modal {\n  background: white;\n  border-radius: 6px;\n  width: 500px;\n  max-width: 90%;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n  animation: modalSlideIn 0.2s ease;\n}\n@keyframes modalSlideIn {\n  from {\n    transform: translateY(-20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n.bb-modalHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n}\n.bb-modalHeader h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n.bb-modalClose {\n  background: transparent;\n  border: none;\n  font-size: 20px;\n  cursor: pointer;\n  color: #999;\n  transition: color 0.2s ease;\n}\n.bb-modalClose:hover {\n  color: #333;\n}\n.bb-modalBody {\n  padding: 20px;\n}\n.bb-modalFooter {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n}\n.bb-annotationsInfo {\n  margin-top: 8px;\n}\n.bb-emptyAnnotations {\n  padding: 32px;\n  text-align: center;\n  background: rgba(15, 23, 42, 0.44);\n  border-radius: 10px;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  color: #94a3b8;\n  font-size: 14px;\n}\n.bb-annotationsList {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.bb-annotationCard {\n  background: rgba(15, 23, 42, 0.44);\n  border-left: 4px solid #22d3ee;\n  border-radius: 8px;\n  padding: 16px;\n  transition: all 0.2s ease;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);\n}\n.bb-annotationCard:hover {\n  transform: translateX(4px);\n  background: rgba(15, 23, 42, 0.6);\n  border-color: rgba(148, 163, 184, 0.25);\n  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);\n}\n.bb-annotationBadge {\n  display: inline-block;\n  background: #22d3ee;\n  color: #06343c;\n  padding: 2px 10px;\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  margin-bottom: 12px;\n  text-transform: uppercase;\n}\n.bb-annotationTitle {\n  font-weight: 700;\n  font-size: 15px;\n  color: #f8fafc;\n  margin-bottom: 8px;\n  line-height: 1.3;\n}\n.bb-annotationDescription {\n  font-size: 13px;\n  color: #cbd5e1;\n  margin-bottom: 12px;\n  line-height: 1.5;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n.bb-annotationPosition {\n  font-size: 11px;\n  font-family:\n    "Monaco",\n    "Menlo",\n    "Ubuntu Mono",\n    "Consolas",\n    monospace;\n  color: #94a3b8;\n  background: rgba(0, 0, 0, 0.3);\n  padding: 4px 8px;\n  border-radius: 4px;\n  display: inline-block;\n  margin-top: 4px;\n  letter-spacing: 0.02em;\n}\n.bb-annotationHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n.bb-annotationActions {\n  display: flex;\n  gap: 4px;\n}\n.bb-annotationAction {\n  background: none;\n  border: none;\n  color: #94a3b8;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 2px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n}\n.bb-annotationAction--edit:hover {\n  border-radius: 50%;\n  background: rgba(59, 130, 246, 0.2);\n  color: #3b82f6;\n}\n.bb-annotationAction--delete:hover {\n  border-radius: 50%;\n  background: rgba(239, 68, 68, 0.2);\n  color: #ef4444;\n}\n.bb-editSpotOverlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n.bb-editSpotPopup {\n  background:\n    linear-gradient(\n      180deg,\n      rgba(20, 27, 45, 0.98),\n      rgba(25, 34, 57, 0.95)),\n    #121826;\n  border-radius: 8px;\n  padding: 24px;\n  min-width: 400px;\n  max-width: 500px;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.3);\n}\n.bb-editSpotHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n}\n.bb-editSpotTitle {\n  color: #f8fafc;\n  font-size: 18px;\n  font-weight: 600;\n  margin: 0;\n}\n.bb-editSpotClose {\n  background: none;\n  border: none;\n  color: #94a3b8;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 0 4px;\n  transition: color 0.2s ease;\n}\n.bb-editSpotClose:hover {\n  color: #f8fafc;\n}\n.bb-editSpotBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.bb-editSpotBody .bb-input,\n.bb-editSpotBody .bb-textarea {\n  background: rgba(15, 23, 42, 0.4);\n  border-color: rgba(148, 163, 184, 0.2);\n  color: #f8fafc;\n}\n.bb-editSpotBody .bb-input:focus,\n.bb-editSpotBody .bb-textarea:focus {\n  border-color: rgba(251, 191, 36, 0.65);\n  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.12);\n}\n.bb-editSpotBody .bb-label {\n  color: #d7dee9;\n}\n.bb-editSpotActions {\n  display: flex;\n  gap: 8px;\n  margin-top: 8px;\n}\n.bb-editSpotActions .bb-button {\n  background: rgba(255, 255, 255, 0.04);\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  color: #e5edf7;\n}\n.bb-editSpotActions .bb-button:hover {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(148, 163, 184, 0.32);\n  transform: translateY(-1px);\n}\n.bb-button--danger {\n  background: #ef4444;\n  color: white;\n  border: none;\n  padding: 8px 16px;\n  border-radius: 7px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  transition: all 0.2s ease;\n}\n.bb-button--danger:hover {\n  background: #dc2626;\n  transform: translateY(-1px);\n  box-shadow: 0 10px 18px rgba(239, 68, 68, 0.25);\n}\n.bb-button--primary {\n  background: #135bc0;\n  border-color: transparent;\n  color: #ffffff;\n}\n.bb-button--primary:hover {\n  background: #1a68d6;\n}\n.bb-annotationCard {\n  background: rgba(15, 23, 42, 0.44);\n  border-left: 4px solid #22d3ee;\n  border-radius: 8px;\n  padding: 16px;\n  transition: all 0.2s ease;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);\n}\n.bb-annotationCard:hover {\n  transform: translateX(4px);\n  background: rgba(15, 23, 42, 0.6);\n  border-color: rgba(148, 163, 184, 0.25);\n  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);\n}\n.bb-annotationBadge {\n  display: inline-block;\n  background: #22d3ee;\n  color: #06343c;\n  padding: 2px 10px;\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  margin-bottom: 12px;\n  text-transform: uppercase;\n}\n.bb-annotationTitle {\n  font-weight: 700;\n  font-size: 15px;\n  color: #f8fafc;\n  margin-bottom: 8px;\n  line-height: 1.3;\n}\n.bb-annotationDescription {\n  font-size: 13px;\n  color: #cbd5e1;\n  margin-bottom: 12px;\n  line-height: 1.5;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n.bb-annotationPosition {\n  font-size: 11px;\n  font-family:\n    "Monaco",\n    "Menlo",\n    "Ubuntu Mono",\n    "Consolas",\n    monospace;\n  color: #94a3b8;\n  background: rgba(0, 0, 0, 0.3);\n  padding: 4px 8px;\n  border-radius: 4px;\n  display: inline-block;\n  margin-top: 4px;\n  letter-spacing: 0.02em;\n}\n.bb-emptyAnnotations {\n  padding: 32px;\n  text-align: center;\n  background: rgba(15, 23, 42, 0.44);\n  border-radius: 10px;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  color: #94a3b8;\n  font-size: 14px;\n}\n@media (max-width: 1280px) {\n  .bb-cameraRow {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 4px;\n  }\n  .bb-cameraLabel {\n    min-width: auto;\n  }\n  .bb-cameraControls {\n    flex-direction: column;\n  }\n  .bb-cameraControls .bb-button {\n    width: 100%;\n  }\n}\n@media (max-width: 1120px) {\n  .bb-sidebar--left {\n    width: 320px;\n  }\n  .bb-sidebar--right {\n    width: 220px;\n  }\n  .bb-grid {\n    grid-template-columns: 1fr;\n  }\n  .bb-statRow {\n    grid-template-columns: 1fr;\n  }\n}\n@media (max-width: 980px) {\n  .bb-root {\n    flex-direction: column;\n    height: auto;\n    min-height: 0;\n  }\n  .bb-sidebar--left {\n    width: 100% !important;\n    max-height: 45vh;\n    border-right: none;\n    border-bottom: 1px solid rgba(148, 163, 184, 0.18);\n    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);\n  }\n  .bb-sidebar--right {\n    width: 100% !important;\n    max-height: 45vh;\n    border-left: none;\n    border-top: 1px solid rgba(148, 163, 184, 0.18);\n    box-shadow: 0 -18px 42px rgba(15, 23, 42, 0.12);\n    order: 3;\n  }\n  .bb-sidebar--collapsed {\n    width: 100% !important;\n    max-height: 72px;\n    overflow: hidden;\n  }\n  .bb-sidebar--collapsed .bb-nodeList,\n  .bb-sidebar--collapsed .bb-tabRow,\n  .bb-sidebar--collapsed .bb-toolbar {\n    display: none;\n  }\n  .bb-previewShell {\n    flex: 1 1 auto;\n    min-height: 50vh;\n    padding: 14px;\n    order: 2;\n  }\n  .bb-preview {\n    min-height: 44vh;\n    border-radius: 10px;\n  }\n  .bb-previewHeader {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 12px;\n  }\n  .bb-previewControls {\n    width: 100%;\n    justify-content: flex-start;\n    flex-wrap: wrap;\n  }\n  .bb-previewMeta {\n    justify-content: flex-start;\n  }\n  .bb-previewMeta span {\n    font-size: 11px;\n    padding: 0 10px;\n    min-height: 30px;\n  }\n  .bb-grid,\n  .bb-actionGrid,\n  .bb-statRow {\n    grid-template-columns: 1fr;\n  }\n  .bb-editor {\n    padding: 12px 12px 20px;\n  }\n  .bb-editorHeader {\n    flex-direction: column;\n    align-items: stretch;\n    padding: 14px;\n  }\n  .bb-editorTitle {\n    font-size: 20px;\n  }\n  .bb-editorBadge {\n    align-self: flex-start;\n  }\n  .bb-toolbar {\n    flex-direction: column;\n    gap: 12px;\n    padding: 16px 20px 18px;\n  }\n  .bb-toolbarDivider {\n    width: 100%;\n    height: 1px;\n    margin: 0;\n  }\n  .bb-tabRow {\n    padding: 12px 16px 0;\n    gap: 6px;\n  }\n  .bb-tab {\n    font-size: 10px;\n    padding: 8px 10px;\n  }\n  .bb-header {\n    padding: 14px 16px 12px;\n  }\n  .bb-header--sidebar {\n    min-height: 60px;\n  }\n  .bb-title {\n    font-size: 17px;\n  }\n  .bb-subtitle {\n    font-size: 13px;\n  }\n  .bb-statChip {\n    padding: 10px 12px;\n  }\n  .bb-statChip strong {\n    font-size: 12px;\n  }\n  .bb-nodeButton {\n    padding: 10px 12px;\n  }\n  .bb-nodeName {\n    font-size: 12px;\n  }\n  .bb-nodeMeta {\n    font-size: 10px;\n  }\n  .bb-section {\n    padding: 14px;\n  }\n  .bb-sectionTitle {\n    font-size: 9px;\n  }\n  .bb-field {\n    gap: 4px;\n  }\n  .bb-label {\n    font-size: 11px;\n  }\n  .bb-input,\n  .bb-select,\n  .bb-textarea {\n    padding: 9px 11px;\n    font-size: 12px;\n  }\n  .bb-textarea {\n    min-height: 80px;\n  }\n  .bb-button,\n  .bb-fileLabel {\n    min-height: 36px;\n    padding: 0 14px;\n    font-size: 12px;\n  }\n  .bb-previewPlaceholderTitle {\n    font-size: 22px;\n  }\n  .bb-previewPlaceholderButton {\n    padding: 10px 18px;\n    font-size: 13px;\n  }\n  .bb-editSpotPopup {\n    min-width: 90%;\n    max-width: 90%;\n    padding: 20px;\n  }\n  .bb-modal {\n    width: 95%;\n    max-width: 95%;\n  }\n  .bb-annotationCard {\n    padding: 12px;\n  }\n  .bb-annotationTitle {\n    font-size: 14px;\n  }\n  .bb-annotationDescription {\n    font-size: 12px;\n  }\n}\n@media (max-width: 640px) {\n  .bb-root {\n    flex-direction: column;\n    height: auto;\n    min-height: 0;\n  }\n  .bb-sidebar--left {\n    max-height: 40vh;\n    width: 100% !important;\n  }\n  .bb-sidebar--right {\n    max-height: 40vh;\n    width: 100% !important;\n  }\n  .bb-previewShell {\n    min-height: 40vh;\n    padding: 10px;\n  }\n  .bb-preview {\n    min-height: 35vh;\n    border-radius: 8px;\n  }\n  .bb-previewHeader {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 0 0 12px;\n  }\n  .bb-previewTitle {\n    font-size: 17px;\n  }\n  .bb-previewControls {\n    gap: 6px;\n  }\n  .bb-previewMeta span {\n    font-size: 10px;\n    padding: 0 8px;\n    min-height: 26px;\n  }\n  .bb-editor {\n    padding: 10px 10px 16px;\n  }\n  .bb-editorHeader {\n    padding: 12px;\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .bb-editorTitle {\n    font-size: 18px;\n  }\n  .bb-editorMeta {\n    font-size: 11px;\n    gap: 6px 8px;\n  }\n  .bb-editorBadge {\n    font-size: 9px;\n    padding: 4px 10px;\n    align-self: flex-start;\n  }\n  .bb-section {\n    padding: 12px;\n    margin-bottom: 12px;\n  }\n  .bb-sectionTitle {\n    font-size: 9px;\n    margin-bottom: 10px;\n  }\n  .bb-grid {\n    gap: 8px;\n  }\n  .bb-field--full {\n    grid-column: 1 / -1;\n  }\n  .bb-label {\n    font-size: 11px;\n  }\n  .bb-input,\n  .bb-select,\n  .bb-textarea {\n    padding: 8px 10px;\n    font-size: 12px;\n    border-radius: 6px;\n  }\n  .bb-textarea {\n    min-height: 70px;\n  }\n  .bb-button,\n  .bb-fileLabel {\n    min-height: 34px;\n    padding: 0 12px;\n    font-size: 11px;\n    border-radius: 6px;\n  }\n  .bb-toolbar {\n    padding: 12px 14px 14px;\n    gap: 10px;\n  }\n  .bb-tabRow {\n    padding: 10px 12px 0;\n    gap: 4px;\n  }\n  .bb-tab {\n    font-size: 9px;\n    padding: 6px 8px;\n    border-radius: 4px;\n  }\n  .bb-header {\n    padding: 10px 12px 8px;\n  }\n  .bb-header--sidebar {\n    min-height: 52px;\n  }\n  .bb-title {\n    font-size: 15px;\n  }\n  .bb-subtitle {\n    font-size: 12px;\n  }\n  .bb-eyebrow {\n    font-size: 9px;\n    padding: 4px 8px;\n    margin-bottom: 8px;\n  }\n  .bb-statRow {\n    gap: 6px;\n    margin-top: 14px;\n  }\n  .bb-statChip {\n    padding: 8px 10px;\n    border-radius: 6px;\n  }\n  .bb-statChip strong {\n    font-size: 11px;\n  }\n  .bb-statLabel {\n    font-size: 9px;\n  }\n  .bb-sidebarToggle {\n    width: 30px;\n    height: 30px;\n    font-size: 14px;\n    border-radius: 5px;\n  }\n  .bb-nodeItems {\n    padding: 4px 6px;\n  }\n  .bb-nodeButton {\n    padding: 8px 10px;\n    border-radius: 6px;\n    margin-bottom: 4px;\n  }\n  .bb-nodeName {\n    font-size: 11px;\n  }\n  .bb-nodeMeta {\n    font-size: 10px;\n  }\n  .bb-search {\n    padding: 8px 10px;\n  }\n  .bb-statusCard {\n    padding: 10px 12px;\n    border-radius: 7px;\n  }\n  .bb-status {\n    font-size: 12px;\n  }\n  .bb-statusTitle {\n    font-size: 10px;\n  }\n  .bb-checkboxRow {\n    gap: 6px;\n  }\n  .bb-checkbox {\n    padding: 6px 10px;\n    font-size: 12px;\n    border-radius: 5px;\n  }\n  .bb-actionCard {\n    padding: 10px;\n    border-radius: 7px;\n  }\n  .bb-actionCardTitle {\n    font-size: 12px;\n  }\n  .bb-actionCardMeta {\n    font-size: 9px;\n    padding: 3px 7px;\n  }\n  .bb-previewPlaceholder {\n    padding: 24px;\n    border-radius: 8px;\n  }\n  .bb-previewPlaceholderTitle {\n    font-size: 18px;\n  }\n  .bb-previewPlaceholderButton {\n    padding: 8px 14px;\n    font-size: 12px;\n    border-radius: 999px;\n  }\n  .bb-editSpotPopup {\n    min-width: 95%;\n    max-width: 95%;\n    padding: 16px;\n    border-radius: 6px;\n  }\n  .bb-editSpotTitle {\n    font-size: 16px;\n  }\n  .bb-editSpotActions .bb-button {\n    padding: 8px 12px;\n    font-size: 12px;\n  }\n  .bb-modal {\n    width: 98%;\n    max-width: 98%;\n    border-radius: 5px;\n  }\n  .bb-modalHeader {\n    padding: 12px 16px;\n  }\n  .bb-modalHeader h3 {\n    font-size: 16px;\n  }\n  .bb-modalBody {\n    padding: 14px;\n  }\n  .bb-modalFooter {\n    padding: 12px 16px;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .bb-modalFooter .bb-button {\n    width: 100%;\n    justify-content: center;\n  }\n  .bb-annotationCard {\n    padding: 10px;\n    border-left-width: 3px;\n    border-radius: 6px;\n  }\n  .bb-annotationTitle {\n    font-size: 13px;\n  }\n  .bb-annotationDescription {\n    font-size: 11px;\n  }\n  .bb-annotationPosition {\n    font-size: 10px;\n    padding: 3px 6px;\n  }\n  .bb-annotationBadge {\n    font-size: 9px;\n    padding: 2px 8px;\n  }\n  .bb-emptyAnnotations {\n    padding: 20px;\n    font-size: 12px;\n    border-radius: 7px;\n  }\n  .bb-removeModelButton {\n    min-height: 30px;\n    padding: 0 10px;\n    font-size: 11px;\n  }\n  .bb-annotationsList {\n    gap: 8px;\n  }\n  .bb-cameraLive,\n  .bb-cameraSaved {\n    padding: 10px;\n    border-radius: 6px;\n  }\n  .bb-cameraLiveHeader,\n  .bb-cameraSavedHeader {\n    flex-wrap: wrap;\n  }\n  .bb-cameraLiveLabel,\n  .bb-cameraSavedLabel {\n    font-size: 11px;\n  }\n  .bb-cameraRow {\n    font-size: 11px;\n    gap: 4px;\n  }\n  .bb-cameraCode {\n    font-size: 10px;\n    padding: 2px 6px;\n  }\n  .bb-cameraControls {\n    flex-direction: column;\n    gap: 6px;\n  }\n  .bb-cameraControls .bb-button {\n    width: 100%;\n    justify-content: center;\n  }\n  .bb-cameraMessage {\n    font-size: 11px;\n    padding: 8px 12px;\n  }\n  .bb-readonly {\n    font-size: 11px;\n    padding: 6px 8px;\n  }\n}\n@media (max-width: 420px) {\n  .bb-sidebar--left {\n    max-height: 35vh;\n  }\n  .bb-sidebar--right {\n    max-height: 35vh;\n  }\n  .bb-previewShell {\n    min-height: 35vh;\n    padding: 6px;\n  }\n  .bb-preview {\n    min-height: 30vh;\n    border-radius: 6px;\n  }\n  .bb-previewTitle {\n    font-size: 15px;\n  }\n  .bb-previewMeta span {\n    font-size: 9px;\n    padding: 0 6px;\n    min-height: 22px;\n  }\n  .bb-editorTitle {\n    font-size: 16px;\n  }\n  .bb-title {\n    font-size: 13px;\n  }\n  .bb-tab {\n    font-size: 8px;\n    padding: 5px 6px;\n  }\n  .bb-button,\n  .bb-fileLabel {\n    font-size: 10px;\n    min-height: 30px;\n    padding: 0 10px;\n  }\n  .bb-input,\n  .bb-select,\n  .bb-textarea {\n    font-size: 11px;\n    padding: 6px 8px;\n  }\n  .bb-statChip {\n    padding: 6px 8px;\n  }\n  .bb-statChip strong {\n    font-size: 10px;\n  }\n  .bb-previewPlaceholderTitle {\n    font-size: 15px;\n  }\n  .bb-previewPlaceholderButton {\n    font-size: 11px;\n    padding: 6px 12px;\n  }\n  .bb-editSpotPopup {\n    padding: 14px;\n    border-radius: 5px;\n  }\n  .bb-editSpotTitle {\n    font-size: 14px;\n  }\n  .bb-editSpotBody .bb-input,\n  .bb-editSpotBody .bb-textarea {\n    font-size: 12px;\n    padding: 6px 8px;\n  }\n  .bb-modalHeader h3 {\n    font-size: 14px;\n  }\n  .bb-annotationTitle {\n    font-size: 12px;\n  }\n}\n@media (max-width: 980px) {\n  .bb-sidebar--collapsed .bb-header--sidebar {\n    min-height: 52px;\n  }\n  .bb-sidebar--collapsed .bb-title {\n    font-size: 14px;\n  }\n  .bb-sidebar--collapsed .bb-sidebarToggle {\n    width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n}\n@media (hover: none) and (pointer: coarse) {\n  .bb-nodeButton:hover,\n  .bb-button:hover,\n  .bb-fileLabel:hover,\n  .bb-tab:hover,\n  .bb-sidebarToggle:hover,\n  .bb-annotationCard:hover {\n    transform: none;\n  }\n  .bb-nodeButton:active,\n  .bb-button:active,\n  .bb-fileLabel:active,\n  .bb-tab:active,\n  .bb-sidebarToggle:active {\n    transform: scale(0.97);\n    transition: transform 0.1s ease;\n  }\n}\n@media print {\n  .bb-root {\n    height: auto;\n    min-height: 0;\n    background: white;\n  }\n  .bb-sidebar--left,\n  .bb-sidebar--right {\n    width: 100% !important;\n    max-height: none !important;\n    background: white !important;\n    color: black !important;\n    border: 1px solid #ddd !important;\n    box-shadow: none !important;\n  }\n  .bb-previewShell {\n    min-height: auto !important;\n    padding: 10px !important;\n  }\n  .bb-preview {\n    min-height: auto !important;\n    border-radius: 4px !important;\n    border: 1px solid #ddd !important;\n    box-shadow: none !important;\n  }\n  .bb-button,\n  .bb-fileLabel,\n  .bb-sidebarToggle,\n  .bb-tab,\n  .bb-annotationAction,\n  .bb-iconButton {\n    display: none !important;\n  }\n  .bb-nodeList {\n    overflow: visible !important;\n  }\n  .bb-previewPlaceholderButton {\n    display: none !important;\n  }\n}\n.bb-checkboxRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  align-items: center;\n  padding: 4px 0;\n}\n.bb-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  border-radius: 7px;\n  font-weight: 600;\n  font-size: 13px;\n  color: #f3eeee;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n.bb-checkbox input[type=checkbox] {\n  width: 16px;\n  height: 16px;\n  accent-color: #f59e0b;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n.bb-editorDivider {\n  height: 1px;\n  background: rgba(148, 163, 184, 0.14);\n  margin: 4px 0 16px 0;\n  width: 100%;\n}\n.bb-preview {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.ri-viewer {\n  width: 100% !important;\n  height: 100% !important;\n  position: relative !important;\n}\n.ri-buttonContainer {\n  position: absolute !important;\n  bottom: 20px !important;\n  right: 20px !important;\n  z-index: 10000 !important;\n  display: flex !important;\n  gap: 10px !important;\n  pointer-events: auto !important;\n}\n.ri-downloadButton {\n  display: flex !important;\n  align-items: center !important;\n  gap: 6px !important;\n  padding: 10px 12px !important;\n  background: #2f302f74 !important;\n  color: white !important;\n  border: none !important;\n  border-radius: 6px !important;\n  cursor: pointer !important;\n  font-size: 12px !important;\n  font-weight: 500 !important;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n}\n.ri-downloadButton svg {\n  width: 14px !important;\n  height: 14px !important;\n}\n.ri-resetButton {\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  padding: 6px !important;\n  background: #2f302f74 !important;\n  border: none !important;\n  border-radius: 6px !important;\n  cursor: pointer !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n}\n.ri-resetButton svg {\n  width: 14px !important;\n  height: 14px !important;\n}\n.bb-reset-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  backdrop-filter: blur(4px);\n  animation: bb-fade-in 0.2s ease;\n}\n.bb-reset-dialog {\n  background: #1a1f2e;\n  border-radius: 12px;\n  max-width: 480px;\n  width: 90%;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);\n  animation: bb-slide-up 0.25s ease;\n}\n.bb-reset-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px 16px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n}\n.bb-reset-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: #f8fafc;\n}\n.bb-reset-title .bb-icon-warning {\n  color: #f59e0b;\n  flex-shrink: 0;\n}\n.bb-reset-close {\n  background: transparent;\n  border: none;\n  color: #94a3b8;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bb-reset-close:hover {\n  color: #f8fafc;\n  background: rgba(255, 255, 255, 0.06);\n}\n.bb-reset-body {\n  padding: 20px 24px 24px;\n}\n.bb-reset-message {\n  margin: 0 0 12px 0;\n  font-size: 15px;\n  color: #e2e8f0;\n  line-height: 1.5;\n}\n.bb-reset-message strong {\n  color: #f8fafc;\n}\n.bb-reset-details {\n  color: #94a3b8;\n  text-align: center;\n  font-size: 13px;\n  line-height: 1.6;\n  margin: 0 0 12px 0;\n}\n.bb-reset-warning {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #f59e0b;\n  font-size: 13px;\n  font-weight: 600;\n  margin: 4px 0 0 0;\n  padding: 10px 12px;\n  background: rgba(245, 158, 11, 0.08);\n  border-radius: 6px;\n  border: 1px solid rgba(245, 158, 11, 0.15);\n}\n.bb-reset-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n  padding: 16px 24px 20px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n}\n.bb-reset-btn {\n  padding: 8px 20px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  background: rgba(255, 255, 255, 0.04);\n  color: #e2e8f0;\n}\n.bb-reset-btn:hover {\n  background: rgba(255, 255, 255, 0.08);\n  transform: translateY(-1px);\n}\n.bb-reset-btn-danger {\n  padding: 8px 20px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: none;\n  background: #dc2626;\n  color: white;\n}\n.bb-reset-btn-danger:hover {\n  background: #b91c1c;\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);\n}\n@keyframes bb-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes bb-slide-up {\n  from {\n    opacity: 0;\n    transform: translateY(20px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n');
+styleInject('.bb-root {\n  --bb-font-family:\n    Inter,\n    "Segoe UI",\n    Helvetica,\n    Arial,\n    sans-serif;\n  --bb-app-bg:\n    radial-gradient(\n      \n      circle at top left,\n      rgba(226, 232, 240, 0.8),\n      transparent 30% ),\n    linear-gradient(\n      135deg,\n      #f6f1e8 0%,\n      #ebe8df 40%,\n      #e9edf2 100%);\n  --bb-app-text: #111827;\n  --bb-sidebar-bg:\n    linear-gradient(\n      180deg,\n      rgba(20, 27, 45, 0.98),\n      rgba(25, 34, 57, 0.95)),\n    #121826;\n  --bb-sidebar-text: #f8fafc;\n  --bb-sidebar-muted-text: #b3bfd2;\n  --bb-sidebar-subtle-text: #94a3b8;\n  --bb-sidebar-border: rgba(148, 163, 184, 0.18);\n  --bb-sidebar-border-hover: rgba(148, 163, 184, 0.32);\n  --bb-sidebar-divider: rgba(148, 163, 184, 0.14);\n  --bb-sidebar-surface: rgba(255, 255, 255, 0.04);\n  --bb-sidebar-surface-hover: rgba(255, 255, 255, 0.08);\n  --bb-sidebar-surface-strong: rgba(255, 255, 255, 0.05);\n  --bb-sidebar-eyebrow-bg: rgba(148, 163, 184, 0.16);\n  --bb-sidebar-eyebrow-text: #cbd5e1;\n  --bb-sidebar-left-shadow: 18px 0 42px rgba(15, 23, 42, 0.12);\n  --bb-sidebar-right-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);\n  --bb-sidebar-chip-bg: rgba(15, 23, 42, 0.42);\n  --bb-sidebar-chip-border: rgba(148, 163, 184, 0.14);\n  --bb-sidebar-accent: rgba(99, 102, 241, 0.18);\n  --bb-sidebar-accent-border: rgba(99, 102, 241, 0.4);\n  --bb-sidebar-accent-text: #f8fafc;\n  --bb-menu-bg: #1a1f2e;\n  --bb-menu-shadow: 0 16px 32px rgba(15, 23, 42, 0.4);\n  display: flex;\n  height: 100%;\n  min-height: 0;\n  width: 100%;\n  background: var(--bb-app-bg);\n  color: var(--bb-app-text);\n  font-family: var(--bb-font-family);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-synthesis: none;\n}\n.bb-root * {\n  box-sizing: border-box;\n}\n.bb-root input,\n.bb-root select,\n.bb-root textarea,\n.bb-root button {\n  font-family: inherit;\n}\n.bb-sidebar {\n  width: 400px;\n  min-height: 0;\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bb-sidebar-bg);\n  color: var(--bb-sidebar-text);\n  transition: width 0.24s ease;\n}\n.bb-sidebar--left {\n  border-right: 1px solid var(--bb-sidebar-border);\n  box-shadow: var(--bb-sidebar-left-shadow);\n}\n.bb-sidebar--right {\n  width: 300px;\n  border-left: 1px solid var(--bb-sidebar-border);\n  box-shadow: var(--bb-sidebar-right-shadow);\n}\n.bb-sidebar--collapsed {\n  width: 36px;\n}\n.bb-sidebar--collapsed .bb-header {\n  padding: 5px;\n  display: flex;\n  justify-content: center;\n}\n.bb-sidebar--collapsed .bb-header--sidebar {\n  min-height: 36px;\n}\n.bb-sidebar--collapsed .bb-sidebarToggle {\n  width: 26px;\n  height: 26px;\n  font-size: 12px;\n}\n.bb-header {\n  padding: 5px 20px;\n  border-bottom: 1px solid var(--bb-sidebar-divider);\n}\n.bb-header--sidebar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  min-height: 55px;\n}\n.bb-eyebrow {\n  display: inline-block;\n  margin-bottom: 12px;\n  padding: 6px 10px;\n  border-radius: 999px;\n  background: var(--bb-sidebar-eyebrow-bg);\n  color: var(--bb-sidebar-eyebrow-text);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n}\n.bb-title {\n  margin: 0 0 0px;\n  font-size: 20px;\n  line-height: 0.95;\n  letter-spacing: -0.04em;\n  font-weight: 800;\n  color: var(--bb-sidebar-text);\n}\n.bb-sidebarToggle {\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n  border-radius: 6px;\n  border: 1px solid var(--bb-sidebar-border);\n  background: var(--bb-sidebar-surface-strong);\n  color: var(--bb-sidebar-text);\n  font-size: 16px;\n  font-weight: 800;\n  cursor: pointer;\n  transition:\n    transform 0.18s ease,\n    background-color 0.18s ease,\n    border-color 0.18s ease;\n}\n.bb-sidebarToggle:hover {\n  transform: translateY(-1px);\n  background: var(--bb-sidebar-surface-hover);\n  border-color: var(--bb-sidebar-border-hover);\n}\n.bb-subtitle {\n  margin: 0;\n  max-width: 32ch;\n  font-size: 15px;\n  line-height: 1.7;\n  color: var(--bb-sidebar-muted-text);\n}\n.bb-statRow {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 10px;\n  margin-top: 22px;\n}\n.bb-statChip {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n  padding: 12px 14px;\n  border-radius: 8px;\n  background: var(--bb-sidebar-chip-bg);\n  border: 1px solid var(--bb-sidebar-chip-border);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);\n}\n.bb-statChip strong {\n  font-size: 13px;\n  color: var(--bb-sidebar-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.bb-statLabel {\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--bb-sidebar-subtle-text);\n}\n.bb-tabRow {\n  display: flex;\n  gap: 6px;\n  padding: 10px 20px 10px;\n}\n.bb-tab {\n  flex: 1;\n  padding: 6px 10px;\n  border-radius: 6px;\n  border: 1px solid var(--bb-sidebar-border);\n  background: var(--bb-sidebar-surface);\n  color: var(--bb-sidebar-muted-text);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  cursor: pointer;\n  transition:\n    background-color 0.18s ease,\n    border-color 0.18s ease,\n    color 0.18s ease;\n}\n.bb-tab:hover {\n  background: var(--bb-sidebar-surface-hover);\n  border-color: var(--bb-sidebar-border-hover);\n}\n.bb-tab--active {\n  background: var(--bb-sidebar-accent);\n  border-color: var(--bb-sidebar-accent-border);\n  color: var(--bb-sidebar-accent-text);\n}\n.bb-toolbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 20px 8px;\n  border-bottom: 1px solid var(--bb-sidebar-divider);\n  flex-wrap: wrap;\n}\n.bb-toolbarGroup {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n.bb-toolbarDivider {\n  width: 1px;\n  align-self: stretch;\n  background: var(--bb-sidebar-divider);\n  margin: 0;\n}\n.bb-iconButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border-radius: 7px;\n  border: 1px solid var(--bb-sidebar-border);\n  background: var(--bb-sidebar-surface);\n  color: var(--bb-sidebar-text);\n  cursor: pointer;\n  transition: background-color 0.18s ease, border-color 0.18s ease;\n}\n.bb-iconButton:hover:not(:disabled) {\n  background: var(--bb-sidebar-surface-hover);\n  border-color: var(--bb-sidebar-border-hover);\n}\n.bb-iconButton:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.bb-exportMenuWrapper {\n  position: relative;\n  display: inline-flex;\n}\n.bb-exportMenu {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  right: 0;\n  z-index: 20;\n  display: flex;\n  flex-direction: column;\n  min-width: 150px;\n  padding: 6px;\n  border-radius: 9px;\n  border: 1px solid var(--bb-sidebar-border);\n  background: var(--bb-menu-bg);\n  box-shadow: var(--bb-menu-shadow);\n}\n.bb-exportMenuItem {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--bb-sidebar-text);\n  font-size: 12px;\n  font-weight: 600;\n  text-align: left;\n  cursor: pointer;\n}\n.bb-exportMenuItem:hover {\n  background: var(--bb-sidebar-surface-hover);\n}\n@media (max-width: 640px) {\n  .bb-toolbarDivider {\n    width: 100%;\n    height: 1px;\n  }\n}\n.bb-button,\n.bb-fileLabel {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-height: 32px;\n  padding: 0 12px;\n  border-radius: 7px;\n  border: 1px solid var(--bb-sidebar-border);\n  background: var(--bb-sidebar-surface);\n  color: var(--bb-sidebar-text);\n  font-size: 12px;\n  font-weight: 700;\n  cursor: pointer;\n  transition:\n    transform 0.18s ease,\n    background-color 0.18s ease,\n    border-color 0.18s ease,\n    box-shadow 0.18s ease;\n}\n.bb-button:hover,\n.bb-fileLabel:hover {\n  transform: translateY(-1px);\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(148, 163, 184, 0.32);\n  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18);\n}\n.bb-button:disabled,\n.bb-fileLabel:has(.bb-hiddenInput:disabled) {\n  opacity: 0.55;\n  cursor: not-allowed;\n  transform: none;\n  box-shadow: none;\n}\n.bb-button--primary {\n  background: #135bc0;\n  border-color: transparent;\n  color: #ffffff;\n}\n.bb-button--primary:hover {\n  background: #1a68d6;\n}\n.bb-button--ghost {\n  background: rgba(248, 250, 252, 0.08);\n}\n.bb-hiddenInput {\n  display: none;\n}\n.bb-statusCard {\n  margin-top: 4px;\n  padding: 14px 16px;\n  border-radius: 9px;\n  background: rgba(15, 23, 42, 0.44);\n  border: 1px solid rgba(148, 163, 184, 0.15);\n}\n.bb-statusCard--error {\n  background: rgba(127, 29, 29, 0.32);\n  border-color: rgba(248, 113, 113, 0.24);\n}\n.bb-statusCard--success {\n  background: rgba(6, 78, 59, 0.34);\n  border-color: rgba(52, 211, 153, 0.24);\n}\n.bb-statusTitle {\n  margin-bottom: 6px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: #cbd5e1;\n}\n.bb-status {\n  font-size: 13px;\n  line-height: 1.55;\n  color: #e2e8f0;\n}\n.bb-status--error {\n  color: #fecaca;\n}\n.bb-status--success {\n  color: #bbf7d0;\n}\n.bb-input--error {\n  border-color: #dc2626;\n}\n.bb-nodeList {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n  background: #141824;\n}\n.bb-sectionHead {\n  padding: 24px 20px 16px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.07);\n}\n.bb-sectionKicker {\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: #64748b;\n}\n.bb-sectionHeading {\n  margin-top: 4px;\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: #f1f5f9;\n}\n.bb-search {\n  padding: 14px 16px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.07);\n}\n.bb-input,\n.bb-select,\n.bb-textarea {\n  width: 100%;\n  border-radius: 10px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  background: rgba(255, 255, 255, 0.05);\n  color: #e2e8f0;\n  padding: 10px 14px;\n  font-size: 13px;\n  line-height: 1.45;\n}\n.bb-input::placeholder,\n.bb-textarea::placeholder {\n  color: #475569;\n}\n.bb-input--compact {\n  width: 64px;\n  max-width: 64px;\n  flex: 0 0 auto;\n  padding: 7px 4px;\n  text-align: center;\n}\n.bb-input:focus,\n.bb-select:focus,\n.bb-textarea:focus {\n  outline: none;\n  border-color: rgba(255, 255, 255, 0.18);\n  background: rgba(255, 255, 255, 0.08);\n  box-shadow: none;\n}\n.bb-textarea {\n  min-height: 110px;\n  resize: vertical;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n}\n.bb-nodeItems {\n  min-height: 0;\n  overflow-y: auto;\n  padding: 10px 0;\n}\n.bb-nodeButton {\n  width: 100%;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  padding: 12px 20px;\n  margin-bottom: 0;\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.12s ease, color 0.12s ease;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.04);\n}\n.bb-nodeButton:hover {\n  background: rgba(255, 255, 255, 0.05);\n}\n.bb-nodeButton--active {\n  background: rgba(255, 255, 255, 0.05);\n  box-shadow: none;\n}\n.bb-nodeName {\n  display: block;\n  margin-bottom: 2px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #e2e8f0;\n}\n.bb-nodeMeta {\n  display: block;\n  font-size: 11px;\n  color: #94a3b8;\n}\n.bb-editor {\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  overflow-y: auto;\n  padding: 16px 16px 28px;\n  overscroll-behavior: contain;\n}\n.bb-editorHeader {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 18px;\n  padding: 18px;\n  border-radius: 11px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(148, 163, 184, 0.12);\n}\n.bb-editorTitle {\n  margin: 8px 0 0;\n  font-size: 24px;\n  line-height: 1.1;\n  color: #f8fafc;\n}\n.bb-editorMeta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px 12px;\n  margin-top: 10px;\n  font-size: 12px;\n  color: #94a3b8;\n}\n.bb-editorBadge {\n  flex-shrink: 0;\n  padding: 8px 12px;\n  border-radius: 999px;\n  background: rgba(251, 191, 36, 0.12);\n  border: 1px solid rgba(251, 191, 36, 0.2);\n  color: #fcd34d;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n.bb-emptyEditor {\n  padding: 28px 8px;\n  font-size: 14px;\n  color: #a7b1c3;\n}\n.bb-section {\n  margin-bottom: 10px;\n  border-radius: 7px;\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(148, 163, 184, 0.12);\n  overflow: hidden;\n}\n.bb-sectionHeaderButton {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border: none;\n  background: rgba(255, 255, 255, 0.03);\n  padding: 11px 14px;\n  cursor: pointer;\n  text-align: left;\n  color: inherit;\n}\n.bb-sectionHeaderButton:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n.bb-sectionHeaderMain {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 8px;\n}\n.bb-sectionChevron {\n  flex-shrink: 0;\n  color: #8b97ab;\n  transform: rotate(-90deg);\n  transition: transform 0.18s ease;\n}\n.bb-sectionChevron--open {\n  transform: rotate(0deg);\n}\n.bb-sectionBody {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 14px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n}\n.bb-sectionTitle {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 700;\n  color: #c3cbdb;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n.bb-sectionHelp {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  margin-left: 2px;\n  border-radius: 999px;\n  color: #b9c0ca;\n  cursor: help;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease,\n    transform 0.18s ease;\n}\n.bb-sectionHelp:hover {\n  background: rgba(255, 255, 255, 0.08);\n  color: #eef2ff;\n  transform: translateY(-0.5px);\n}\n.bb-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 10px;\n}\n.bb-presetGallery {\n  display: flex;\n  justify-items: center;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin-bottom: 14px;\n}\n.bb-presetSwatch {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 5px;\n  width: 64px;\n  padding: 6px 4px;\n  border-radius: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  background: rgba(148, 163, 184, 0.06);\n  cursor: pointer;\n  transition: border-color 0.15s, background 0.15s;\n}\n.bb-presetSwatch:hover:not(:disabled) {\n  border-color: rgba(148, 163, 184, 0.4);\n  background: rgba(148, 163, 184, 0.12);\n}\n.bb-presetSwatch:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.bb-presetSwatchColor {\n  width: 32px;\n  height: 32px;\n  border-radius: 999px;\n  border: 1px solid rgba(255, 255, 255, 0.18);\n}\n.bb-presetSwatchLabel {\n  font-size: 10px;\n  font-weight: 600;\n  color: #cbd5e1;\n  text-align: center;\n  line-height: 1.2;\n}\n.bb-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n.bb-field--full {\n  grid-column: 1 / -1;\n}\n.bb-label {\n  font-size: 12px;\n  font-weight: 700;\n  color: #d7dee9;\n}\n.bb-note {\n  font-size: 11px;\n  color: #8b97ab;\n}\n.bb-linkButton {\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  font-weight: 700;\n  text-decoration: underline;\n  cursor: pointer;\n}\n.bb-linkButton:hover {\n  color: #f8fafc;\n}\n.bb-tierLock {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 16px 14px;\n  border-radius: 7px;\n  background: rgba(251, 191, 36, 0.08);\n  border: 1px dashed rgba(251, 191, 36, 0.3);\n  color: #fcd34d;\n}\n.bb-tierLockMessage {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n}\n.bb-root--licenseChecking,\n.bb-root--licenseInvalid {\n  align-items: center;\n  justify-content: center;\n}\n.bb-readonly {\n  background: rgba(148, 163, 184, 0.08);\n  color: #9ca3af;\n}\n.bb-checkboxRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.bb-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 5px;\n  border-radius: 7px;\n  background: rgba(15, 23, 42, 0.22);\n  border: 1px solid rgba(148, 163, 184, 0.12);\n  font-size: 13px;\n  color: #d7dee9;\n}\n.bb-checkbox input {\n  accent-color: #f59e0b;\n}\n.bb-sliderField {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.bb-slider {\n  flex: 1 1 auto;\n  min-width: 0;\n  accent-color: #2aa8d8;\n}\n.bb-slider--unset {\n  opacity: 0.45;\n}\n.bb-fileField {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.bb-fileField-input {\n  width: 100%;\n  padding-right: 40px;\n}\n.bb-fileFieldButton {\n  position: absolute;\n  right: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: 5px;\n  background: transparent;\n  color: #aab4c5;\n  cursor: pointer;\n}\n.bb-fileFieldButton:hover {\n  background: rgba(255, 255, 255, 0.08);\n  color: #f8fafc;\n}\n.bb-materialPanel {\n  margin-top: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.14);\n  border-radius: 6px;\n  background: rgba(15, 23, 42, 0.28);\n  overflow: hidden;\n}\n.bb-materialPanel:first-of-type {\n  margin-top: 0;\n}\n.bb-materialPanelHeader {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border: none;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.03);\n  cursor: pointer;\n  text-align: left;\n  color: inherit;\n}\n.bb-materialPanelHeader:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n.bb-materialPanelTitleWrap {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  color: #dbe4f0;\n}\n.bb-materialPanelChevron {\n  flex-shrink: 0;\n  color: #8b97ab;\n  transform: rotate(-90deg);\n  transition: transform 0.18s ease;\n}\n.bb-materialPanelChevron--open {\n  transform: rotate(0deg);\n}\n.bb-materialPanelTitle {\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n.bb-materialPanelHelp {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  margin-left: 2px;\n  border-radius: 999px;\n  color: #b9c0ca;\n  cursor: help;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease,\n    transform 0.18s ease;\n}\n.bb-materialPanelHelp:hover {\n  background: rgba(255, 255, 255, 0.08);\n  color: #eef2ff;\n  transform: translateY(-0.5px);\n}\n.bb-materialPanelBody {\n  padding: 12px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.bb-actionList {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.bb-actionCard {\n  border: 1px solid rgba(148, 163, 184, 0.14);\n  border-radius: 9px;\n  padding: 14px;\n  background: rgba(15, 23, 42, 0.2);\n}\n.bb-actionCardHeader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  margin-bottom: 12px;\n}\n.bb-actionCardTitle {\n  font-size: 13px;\n  font-weight: 700;\n  color: #f8fafc;\n}\n.bb-actionCardMeta {\n  flex-shrink: 0;\n  padding: 5px 9px;\n  border-radius: 999px;\n  background: rgba(148, 163, 184, 0.12);\n  color: #94a3b8;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n.bb-actionGrid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 10px;\n}\n.bb-actionFooter {\n  margin-top: 12px;\n}\n.bb-actionRemove {\n  width: 100%;\n}\n.bb-previewShell {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 5px;\n  overflow: hidden;\n}\n.bb-previewHeader {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 0 4px 10px;\n}\n.bb-previewControls {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-end;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n.bb-previewTitle {\n  margin: 2px 0 0;\n  font-size: 20px;\n  line-height: 1.05;\n  letter-spacing: -0.03em;\n  color: #1f2937;\n}\n.bb-previewToggles {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n}\n.bb-checkbox--compact {\n  gap: 5px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 1;\n  color: #4b5563;\n}\n.bb-checkbox--compact:hover {\n  background: transparent;\n  transform: none;\n}\n.bb-checkbox--compact input[type=checkbox] {\n  width: 11px;\n  height: 11px;\n}\n.bb-previewMeta {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 8px;\n}\n.bb-removeModelButton {\n  background-color: rgb(174, 54, 54);\n  min-height: 34px;\n  padding: 0 14px;\n}\n.bb-removeModelButton:hover {\n  background-color: rgb(163, 20, 20);\n}\n.bb-previewMeta span {\n  display: inline-flex;\n  align-items: center;\n  min-height: 34px;\n  padding: 0 12px;\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.7);\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  color: #475569;\n  font-size: 12px;\n  font-weight: 700;\n}\n.bb-preview {\n  position: relative;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n  border-radius: 14px;\n  background:\n    radial-gradient(\n      circle at top left,\n      rgba(255, 255, 255, 0.92),\n      rgba(236, 240, 244, 0.82)),\n    #f8fafc;\n  border: 1px solid rgba(148, 163, 184, 0.24);\n  box-shadow: 0 24px 48px rgba(148, 163, 184, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);\n}\n.bb-loadingOverlay {\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  padding: 24px;\n  text-align: center;\n  border-radius: 14px;\n  background: rgba(248, 250, 252, 0.82);\n  backdrop-filter: blur(2px);\n}\n.bb-loadingSpinner {\n  width: 40px;\n  height: 40px;\n  border-radius: 999px;\n  border: 3px solid rgba(148, 163, 184, 0.3);\n  border-top-color: #2563eb;\n  animation: bb-spin 0.8s linear infinite;\n}\n@keyframes bb-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.bb-loadingMessage {\n  max-width: 320px;\n  color: #475569;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.5;\n}\n.bb-previewStatus {\n  max-width: 280px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bb-previewStatus--success {\n  background: rgba(34, 197, 94, 0.12) !important;\n  border-color: rgba(34, 197, 94, 0.3) !important;\n  color: #15803d !important;\n}\n.bb-previewStatus--error {\n  background: rgba(239, 68, 68, 0.12) !important;\n  border-color: rgba(239, 68, 68, 0.3) !important;\n  color: #b91c1c !important;\n}\n.bb-previewModelName {\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bb-previewPlaceholder {\n  position: relative;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  text-align: center;\n  color: #64748b;\n  font-size: 15px;\n  line-height: 1.7;\n  border-radius: 14px;\n  border: 2px dashed rgba(148, 163, 184, 0.24);\n  background:\n    radial-gradient(\n      circle at top,\n      rgba(251, 191, 36, 0.12),\n      transparent 30%),\n    linear-gradient(\n      180deg,\n      rgba(255, 255, 255, 0.82),\n      rgba(238, 242, 248, 0.9));\n  transition:\n    border-color 0.2s ease,\n    background 0.2s ease,\n    transform 0.2s ease,\n    box-shadow 0.2s ease;\n}\n.bb-previewPlaceholder > div {\n  max-width: 420px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 14px;\n}\n.bb-previewPlaceholderTitle {\n  font-size: 28px;\n  line-height: 1.05;\n  letter-spacing: -0.03em;\n  font-weight: 800;\n  color: #1f2937;\n}\n.bb-previewPlaceholderButton {\n  margin-top: 8px;\n  border: 0;\n  border-radius: 999px;\n  padding: 13px 22px;\n  background: #135bc0;\n  color: #ffffff;\n  font-size: 14px;\n  font-weight: 800;\n  cursor: pointer;\n  transition:\n    transform 0.18s ease,\n    box-shadow 0.18s ease,\n    opacity 0.18s ease;\n}\n.bb-previewPlaceholderButton:hover:not(:disabled) {\n  transform: translateY(-1px);\n  box-shadow: 0 14px 30px rgba(19, 91, 192, 0.28);\n}\n.bb-previewPlaceholderButton:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.bb-previewPlaceholder--dragActive {\n  border-color: rgba(245, 158, 11, 0.75);\n  background:\n    radial-gradient(\n      circle at top,\n      rgba(251, 191, 36, 0.22),\n      transparent 32%),\n    linear-gradient(\n      180deg,\n      rgba(255, 252, 245, 0.95),\n      rgba(255, 244, 230, 0.92));\n  transform: scale(0.995);\n  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.14);\n}\n.bb-sectionHeader {\n  cursor: pointer;\n  user-select: none;\n}\n.bb-iconButton {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--bb-sidebar-subtle-text);\n  transition: color 0.2s ease;\n  padding: 4px 8px;\n  border-radius: 4px;\n}\n.bb-iconButton:hover {\n  color: var(--bb-sidebar-text);\n  background: var(--bb-sidebar-surface-strong);\n}\n.bb-cameraLive,\n.bb-cameraSaved {\n  background: rgba(15, 23, 42, 0.44);\n  border-radius: 8px;\n  padding: 14px;\n  margin-bottom: 16px;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  transition: all 0.2s ease;\n}\n.bb-cameraLive:hover,\n.bb-cameraSaved:hover {\n  border-color: rgba(148, 163, 184, 0.25);\n  background: rgba(15, 23, 42, 0.52);\n}\n.bb-cameraLiveHeader,\n.bb-cameraSavedHeader {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.15);\n}\n.bb-cameraLiveBadge {\n  background:\n    linear-gradient(\n      135deg,\n      #10b981,\n      #059669);\n  color: white;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 3px 8px;\n  border-radius: 10px;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n}\n.bb-cameraSavedBadge {\n  background:\n    linear-gradient(\n      135deg,\n      #3b82f6,\n      #2563eb);\n  color: white;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 3px 8px;\n  border-radius: 10px;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n}\n.bb-cameraLiveLabel,\n.bb-cameraSavedLabel {\n  font-size: 12px;\n  font-weight: 600;\n  color: #cbd5e1;\n}\n.bb-cameraValues {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.bb-cameraRow {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 12px;\n  flex-wrap: wrap;\n}\n.bb-cameraLabel {\n  font-weight: 600;\n  color: #94a3b8;\n  min-width: 58px;\n  font-size: 11px;\n  letter-spacing: 0.02em;\n}\n.bb-cameraCode {\n  font-family:\n    "Monaco",\n    "Menlo",\n    "Ubuntu Mono",\n    "Consolas",\n    monospace;\n  font-size: 11px;\n  background: rgba(0, 0, 0, 0.3);\n  padding: 3px 8px;\n  border-radius: 4px;\n  color: #fcd34d;\n  letter-spacing: 0.02em;\n  word-break: break-all;\n}\n.bb-cameraPlaceholder {\n  color: #94a3b8;\n  font-size: 12px;\n  text-align: center;\n  padding: 16px;\n  font-style: italic;\n}\n.bb-cameraControls {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 14px;\n  flex-wrap: wrap;\n}\n.bb-button--primary {\n  background: #135bc0;\n  border-color: transparent;\n  color: #ffffff;\n}\n.bb-button--primary:hover:not(:disabled) {\n  background: #1a68d6;\n  transform: translateY(-1px);\n}\n.bb-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  transform: none;\n}\n.bb-cameraMessage {\n  padding: 10px 14px;\n  border-radius: 6px;\n  margin-bottom: 14px;\n  font-size: 12px;\n  font-weight: 500;\n  animation: slideIn 0.3s ease-out;\n}\n.bb-cameraMessage--success {\n  background: rgba(16, 185, 129, 0.15);\n  color: #6ee7b7;\n  border: 1px solid rgba(16, 185, 129, 0.3);\n}\n.bb-cameraMessage--error {\n  background: rgba(239, 68, 68, 0.15);\n  color: #ffe5e55c;\n  border: 1px solid rgba(255, 248, 248, 0.3);\n}\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.bb-readonly {\n  background: rgba(148, 163, 184, 0.08);\n  color: #9ca3af;\n  cursor: default;\n}\n@media (max-width: 1280px) {\n  .bb-cameraRow {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 4px;\n  }\n  .bb-cameraLabel {\n    min-width: auto;\n  }\n  .bb-cameraControls {\n    flex-direction: column;\n  }\n  .bb-cameraControls .bb-button {\n    width: 100%;\n  }\n}\n@media (max-width: 980px) {\n  .bb-sidebar--left {\n    width: 100%;\n    max-height: 42vh;\n  }\n  .bb-sidebar--collapsed {\n    width: 100%;\n  }\n  .bb-previewShell {\n    padding: 14px;\n  }\n  .bb-preview {\n    min-height: 44vh;\n  }\n  .bb-previewHeader {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .bb-previewControls {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .bb-previewMeta {\n    justify-content: flex-start;\n  }\n  .bb-grid,\n  .bb-actionGrid,\n  .bb-statRow {\n    grid-template-columns: 1fr;\n  }\n}\n.bb-annotationsInfo {\n  margin-top: 8px;\n}\n.bb-emptyAnnotations {\n  padding: 32px;\n  text-align: center;\n  background: #f5f5f5;\n  border-radius: 4px;\n  color: #666;\n  font-size: 14px;\n}\n.bb-annotationsList {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.bb-annotationCard {\n  background: #f9f9f9;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  padding: 12px;\n  transition: all 0.2s ease;\n}\n.bb-annotationCard:hover {\n  background: #ffffff;\n  border-color: #4caf50;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n.bb-annotationHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n.bb-annotationBadge {\n  background: #4caf50;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 2px;\n  font-size: 11px;\n  font-weight: 600;\n}\n.bb-annotationActions {\n  display: flex;\n  gap: 8px;\n}\n.bb-annotationEdit,\n.bb-annotationDelete {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 2px;\n  font-size: 14px;\n  transition: all 0.2s ease;\n}\n.bb-annotationEdit:hover {\n  background: #e8f5e9;\n  transform: scale(1.05);\n}\n.bb-annotationDelete:hover {\n  background: #ffebee;\n  transform: scale(1.05);\n}\n.bb-annotationTitle {\n  font-weight: 600;\n  font-size: 14px;\n  color: #333;\n  margin-bottom: 6px;\n}\n.bb-annotationDescription {\n  font-size: 13px;\n  color: #666;\n  margin-bottom: 8px;\n  line-height: 1.4;\n}\n.bb-annotationPosition {\n  font-size: 11px;\n  font-family: monospace;\n  color: #999;\n  background: #f0f0f0;\n  padding: 4px 6px;\n  border-radius: 2px;\n  display: inline-block;\n}\n.bb-modalOverlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n.bb-modal {\n  background: white;\n  border-radius: 6px;\n  width: 500px;\n  max-width: 90%;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n  animation: modalSlideIn 0.2s ease;\n}\n@keyframes modalSlideIn {\n  from {\n    transform: translateY(-20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n.bb-modalHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n}\n.bb-modalHeader h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n.bb-modalClose {\n  background: transparent;\n  border: none;\n  font-size: 20px;\n  cursor: pointer;\n  color: #999;\n  transition: color 0.2s ease;\n}\n.bb-modalClose:hover {\n  color: #333;\n}\n.bb-modalBody {\n  padding: 20px;\n}\n.bb-modalFooter {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n}\n.bb-annotationsInfo {\n  margin-top: 8px;\n}\n.bb-emptyAnnotations {\n  padding: 32px;\n  text-align: center;\n  background: rgba(15, 23, 42, 0.44);\n  border-radius: 10px;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  color: #94a3b8;\n  font-size: 14px;\n}\n.bb-annotationsList {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.bb-annotationCard {\n  background: rgba(15, 23, 42, 0.44);\n  border-left: 4px solid #22d3ee;\n  border-radius: 8px;\n  padding: 16px;\n  transition: all 0.2s ease;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);\n}\n.bb-annotationCard:hover {\n  transform: translateX(4px);\n  background: rgba(15, 23, 42, 0.6);\n  border-color: rgba(148, 163, 184, 0.25);\n  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);\n}\n.bb-annotationBadge {\n  display: inline-block;\n  background: #22d3ee;\n  color: #06343c;\n  padding: 2px 10px;\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  margin-bottom: 12px;\n  text-transform: uppercase;\n}\n.bb-annotationTitle {\n  font-weight: 700;\n  font-size: 15px;\n  color: #f8fafc;\n  margin-bottom: 8px;\n  line-height: 1.3;\n}\n.bb-annotationDescription {\n  font-size: 13px;\n  color: #cbd5e1;\n  margin-bottom: 12px;\n  line-height: 1.5;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n.bb-annotationPosition {\n  font-size: 11px;\n  font-family:\n    "Monaco",\n    "Menlo",\n    "Ubuntu Mono",\n    "Consolas",\n    monospace;\n  color: #94a3b8;\n  background: rgba(0, 0, 0, 0.3);\n  padding: 4px 8px;\n  border-radius: 4px;\n  display: inline-block;\n  margin-top: 4px;\n  letter-spacing: 0.02em;\n}\n.bb-annotationHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n.bb-annotationActions {\n  display: flex;\n  gap: 4px;\n}\n.bb-annotationAction {\n  background: none;\n  border: none;\n  color: #94a3b8;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 2px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n}\n.bb-annotationAction--edit:hover {\n  border-radius: 50%;\n  background: rgba(59, 130, 246, 0.2);\n  color: #3b82f6;\n}\n.bb-annotationAction--delete:hover {\n  border-radius: 50%;\n  background: rgba(239, 68, 68, 0.2);\n  color: #ef4444;\n}\n.bb-editSpotOverlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n.bb-editSpotPopup {\n  background:\n    linear-gradient(\n      180deg,\n      rgba(20, 27, 45, 0.98),\n      rgba(25, 34, 57, 0.95)),\n    #121826;\n  border-radius: 8px;\n  padding: 24px;\n  min-width: 400px;\n  max-width: 500px;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.3);\n}\n.bb-editSpotHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n}\n.bb-editSpotTitle {\n  color: #f8fafc;\n  font-size: 18px;\n  font-weight: 600;\n  margin: 0;\n}\n.bb-editSpotClose {\n  background: none;\n  border: none;\n  color: #94a3b8;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 0 4px;\n  transition: color 0.2s ease;\n}\n.bb-editSpotClose:hover {\n  color: #f8fafc;\n}\n.bb-editSpotBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.bb-editSpotBody .bb-input,\n.bb-editSpotBody .bb-textarea {\n  background: rgba(15, 23, 42, 0.4);\n  border-color: rgba(148, 163, 184, 0.2);\n  color: #f8fafc;\n}\n.bb-editSpotBody .bb-input:focus,\n.bb-editSpotBody .bb-textarea:focus {\n  border-color: rgba(251, 191, 36, 0.65);\n  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.12);\n}\n.bb-editSpotBody .bb-label {\n  color: #d7dee9;\n}\n.bb-editSpotActions {\n  display: flex;\n  gap: 8px;\n  margin-top: 8px;\n}\n.bb-editSpotActions .bb-button {\n  background: rgba(255, 255, 255, 0.04);\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  color: #e5edf7;\n}\n.bb-editSpotActions .bb-button:hover {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(148, 163, 184, 0.32);\n  transform: translateY(-1px);\n}\n.bb-button--danger {\n  background: #ef4444;\n  color: white;\n  border: none;\n  padding: 8px 16px;\n  border-radius: 7px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  transition: all 0.2s ease;\n}\n.bb-button--danger:hover {\n  background: #dc2626;\n  transform: translateY(-1px);\n  box-shadow: 0 10px 18px rgba(239, 68, 68, 0.25);\n}\n.bb-button--primary {\n  background: #135bc0;\n  border-color: transparent;\n  color: #ffffff;\n}\n.bb-button--primary:hover {\n  background: #1a68d6;\n}\n.bb-annotationCard {\n  background: rgba(15, 23, 42, 0.44);\n  border-left: 4px solid #22d3ee;\n  border-radius: 8px;\n  padding: 16px;\n  transition: all 0.2s ease;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);\n}\n.bb-annotationCard:hover {\n  transform: translateX(4px);\n  background: rgba(15, 23, 42, 0.6);\n  border-color: rgba(148, 163, 184, 0.25);\n  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);\n}\n.bb-annotationBadge {\n  display: inline-block;\n  background: #22d3ee;\n  color: #06343c;\n  padding: 2px 10px;\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  margin-bottom: 12px;\n  text-transform: uppercase;\n}\n.bb-annotationTitle {\n  font-weight: 700;\n  font-size: 15px;\n  color: #f8fafc;\n  margin-bottom: 8px;\n  line-height: 1.3;\n}\n.bb-annotationDescription {\n  font-size: 13px;\n  color: #cbd5e1;\n  margin-bottom: 12px;\n  line-height: 1.5;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n.bb-annotationPosition {\n  font-size: 11px;\n  font-family:\n    "Monaco",\n    "Menlo",\n    "Ubuntu Mono",\n    "Consolas",\n    monospace;\n  color: #94a3b8;\n  background: rgba(0, 0, 0, 0.3);\n  padding: 4px 8px;\n  border-radius: 4px;\n  display: inline-block;\n  margin-top: 4px;\n  letter-spacing: 0.02em;\n}\n.bb-emptyAnnotations {\n  padding: 32px;\n  text-align: center;\n  background: rgba(15, 23, 42, 0.44);\n  border-radius: 10px;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  color: #94a3b8;\n  font-size: 14px;\n}\n@media (max-width: 1280px) {\n  .bb-cameraRow {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 4px;\n  }\n  .bb-cameraLabel {\n    min-width: auto;\n  }\n  .bb-cameraControls {\n    flex-direction: column;\n  }\n  .bb-cameraControls .bb-button {\n    width: 100%;\n  }\n}\n@media (max-width: 1120px) {\n  .bb-sidebar--left {\n    width: 320px;\n  }\n  .bb-sidebar--right {\n    width: 220px;\n  }\n  .bb-grid {\n    grid-template-columns: 1fr;\n  }\n  .bb-statRow {\n    grid-template-columns: 1fr;\n  }\n}\n@media (max-width: 980px) {\n  .bb-root {\n    flex-direction: column;\n    height: auto;\n    min-height: 0;\n  }\n  .bb-sidebar--left {\n    width: 100% !important;\n    max-height: 45vh;\n    border-right: none;\n    border-bottom: 1px solid rgba(148, 163, 184, 0.18);\n    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);\n  }\n  .bb-sidebar--right {\n    width: 100% !important;\n    max-height: 45vh;\n    border-left: none;\n    border-top: 1px solid rgba(148, 163, 184, 0.18);\n    box-shadow: 0 -18px 42px rgba(15, 23, 42, 0.12);\n    order: 3;\n  }\n  .bb-sidebar--collapsed {\n    width: 100% !important;\n    max-height: 72px;\n    overflow: hidden;\n  }\n  .bb-sidebar--collapsed .bb-nodeList,\n  .bb-sidebar--collapsed .bb-tabRow,\n  .bb-sidebar--collapsed .bb-toolbar {\n    display: none;\n  }\n  .bb-previewShell {\n    flex: 1 1 auto;\n    min-height: 50vh;\n    padding: 14px;\n    order: 2;\n  }\n  .bb-preview {\n    min-height: 44vh;\n    border-radius: 10px;\n  }\n  .bb-previewHeader {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 12px;\n  }\n  .bb-previewControls {\n    width: 100%;\n    justify-content: flex-start;\n    flex-wrap: wrap;\n  }\n  .bb-previewMeta {\n    justify-content: flex-start;\n  }\n  .bb-previewMeta span {\n    font-size: 11px;\n    padding: 0 10px;\n    min-height: 30px;\n  }\n  .bb-grid,\n  .bb-actionGrid,\n  .bb-statRow {\n    grid-template-columns: 1fr;\n  }\n  .bb-editor {\n    padding: 12px 12px 20px;\n  }\n  .bb-editorHeader {\n    flex-direction: column;\n    align-items: stretch;\n    padding: 14px;\n  }\n  .bb-editorTitle {\n    font-size: 20px;\n  }\n  .bb-editorBadge {\n    align-self: flex-start;\n  }\n  .bb-toolbar {\n    flex-direction: column;\n    gap: 12px;\n    padding: 16px 20px 18px;\n  }\n  .bb-toolbarDivider {\n    width: 100%;\n    height: 1px;\n    margin: 0;\n  }\n  .bb-tabRow {\n    padding: 12px 16px 0;\n    gap: 6px;\n  }\n  .bb-tab {\n    font-size: 10px;\n    padding: 8px 10px;\n  }\n  .bb-header {\n    padding: 14px 16px 12px;\n  }\n  .bb-header--sidebar {\n    min-height: 60px;\n  }\n  .bb-title {\n    font-size: 17px;\n  }\n  .bb-subtitle {\n    font-size: 13px;\n  }\n  .bb-statChip {\n    padding: 10px 12px;\n  }\n  .bb-statChip strong {\n    font-size: 12px;\n  }\n  .bb-nodeButton {\n    padding: 10px 12px;\n  }\n  .bb-nodeName {\n    font-size: 12px;\n  }\n  .bb-nodeMeta {\n    font-size: 10px;\n  }\n  .bb-section {\n    padding: 14px;\n  }\n  .bb-sectionTitle {\n    font-size: 9px;\n  }\n  .bb-field {\n    gap: 4px;\n  }\n  .bb-label {\n    font-size: 11px;\n  }\n  .bb-input,\n  .bb-select,\n  .bb-textarea {\n    padding: 9px 11px;\n    font-size: 12px;\n  }\n  .bb-textarea {\n    min-height: 80px;\n  }\n  .bb-button,\n  .bb-fileLabel {\n    min-height: 36px;\n    padding: 0 14px;\n    font-size: 12px;\n  }\n  .bb-previewPlaceholderTitle {\n    font-size: 22px;\n  }\n  .bb-previewPlaceholderButton {\n    padding: 10px 18px;\n    font-size: 13px;\n  }\n  .bb-editSpotPopup {\n    min-width: 90%;\n    max-width: 90%;\n    padding: 20px;\n  }\n  .bb-modal {\n    width: 95%;\n    max-width: 95%;\n  }\n  .bb-annotationCard {\n    padding: 12px;\n  }\n  .bb-annotationTitle {\n    font-size: 14px;\n  }\n  .bb-annotationDescription {\n    font-size: 12px;\n  }\n}\n@media (max-width: 640px) {\n  .bb-root {\n    flex-direction: column;\n    height: auto;\n    min-height: 0;\n  }\n  .bb-sidebar--left {\n    max-height: 40vh;\n    width: 100% !important;\n  }\n  .bb-sidebar--right {\n    max-height: 40vh;\n    width: 100% !important;\n  }\n  .bb-previewShell {\n    min-height: 40vh;\n    padding: 10px;\n  }\n  .bb-preview {\n    min-height: 35vh;\n    border-radius: 8px;\n  }\n  .bb-previewHeader {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 0 0 12px;\n  }\n  .bb-previewTitle {\n    font-size: 17px;\n  }\n  .bb-previewControls {\n    gap: 6px;\n  }\n  .bb-previewMeta span {\n    font-size: 10px;\n    padding: 0 8px;\n    min-height: 26px;\n  }\n  .bb-editor {\n    padding: 10px 10px 16px;\n  }\n  .bb-editorHeader {\n    padding: 12px;\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .bb-editorTitle {\n    font-size: 18px;\n  }\n  .bb-editorMeta {\n    font-size: 11px;\n    gap: 6px 8px;\n  }\n  .bb-editorBadge {\n    font-size: 9px;\n    padding: 4px 10px;\n    align-self: flex-start;\n  }\n  .bb-section {\n    padding: 12px;\n    margin-bottom: 12px;\n  }\n  .bb-sectionTitle {\n    font-size: 9px;\n    margin-bottom: 10px;\n  }\n  .bb-grid {\n    gap: 8px;\n  }\n  .bb-field--full {\n    grid-column: 1 / -1;\n  }\n  .bb-label {\n    font-size: 11px;\n  }\n  .bb-input,\n  .bb-select,\n  .bb-textarea {\n    padding: 8px 10px;\n    font-size: 12px;\n    border-radius: 6px;\n  }\n  .bb-textarea {\n    min-height: 70px;\n  }\n  .bb-button,\n  .bb-fileLabel {\n    min-height: 34px;\n    padding: 0 12px;\n    font-size: 11px;\n    border-radius: 6px;\n  }\n  .bb-toolbar {\n    padding: 12px 14px 14px;\n    gap: 10px;\n  }\n  .bb-tabRow {\n    padding: 10px 12px 0;\n    gap: 4px;\n  }\n  .bb-tab {\n    font-size: 9px;\n    padding: 6px 8px;\n    border-radius: 4px;\n  }\n  .bb-header {\n    padding: 10px 12px 8px;\n  }\n  .bb-header--sidebar {\n    min-height: 52px;\n  }\n  .bb-title {\n    font-size: 15px;\n  }\n  .bb-subtitle {\n    font-size: 12px;\n  }\n  .bb-eyebrow {\n    font-size: 9px;\n    padding: 4px 8px;\n    margin-bottom: 8px;\n  }\n  .bb-statRow {\n    gap: 6px;\n    margin-top: 14px;\n  }\n  .bb-statChip {\n    padding: 8px 10px;\n    border-radius: 6px;\n  }\n  .bb-statChip strong {\n    font-size: 11px;\n  }\n  .bb-statLabel {\n    font-size: 9px;\n  }\n  .bb-sidebarToggle {\n    width: 30px;\n    height: 30px;\n    font-size: 14px;\n    border-radius: 5px;\n  }\n  .bb-nodeItems {\n    padding: 4px 6px;\n  }\n  .bb-nodeButton {\n    padding: 8px 10px;\n    border-radius: 6px;\n    margin-bottom: 4px;\n  }\n  .bb-nodeName {\n    font-size: 11px;\n  }\n  .bb-nodeMeta {\n    font-size: 10px;\n  }\n  .bb-search {\n    padding: 8px 10px;\n  }\n  .bb-statusCard {\n    padding: 10px 12px;\n    border-radius: 7px;\n  }\n  .bb-status {\n    font-size: 12px;\n  }\n  .bb-statusTitle {\n    font-size: 10px;\n  }\n  .bb-checkboxRow {\n    gap: 6px;\n  }\n  .bb-checkbox {\n    padding: 6px 10px;\n    font-size: 12px;\n    border-radius: 5px;\n  }\n  .bb-actionCard {\n    padding: 10px;\n    border-radius: 7px;\n  }\n  .bb-actionCardTitle {\n    font-size: 12px;\n  }\n  .bb-actionCardMeta {\n    font-size: 9px;\n    padding: 3px 7px;\n  }\n  .bb-previewPlaceholder {\n    padding: 24px;\n    border-radius: 8px;\n  }\n  .bb-previewPlaceholderTitle {\n    font-size: 18px;\n  }\n  .bb-previewPlaceholderButton {\n    padding: 8px 14px;\n    font-size: 12px;\n    border-radius: 999px;\n  }\n  .bb-editSpotPopup {\n    min-width: 95%;\n    max-width: 95%;\n    padding: 16px;\n    border-radius: 6px;\n  }\n  .bb-editSpotTitle {\n    font-size: 16px;\n  }\n  .bb-editSpotActions .bb-button {\n    padding: 8px 12px;\n    font-size: 12px;\n  }\n  .bb-modal {\n    width: 98%;\n    max-width: 98%;\n    border-radius: 5px;\n  }\n  .bb-modalHeader {\n    padding: 12px 16px;\n  }\n  .bb-modalHeader h3 {\n    font-size: 16px;\n  }\n  .bb-modalBody {\n    padding: 14px;\n  }\n  .bb-modalFooter {\n    padding: 12px 16px;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .bb-modalFooter .bb-button {\n    width: 100%;\n    justify-content: center;\n  }\n  .bb-annotationCard {\n    padding: 10px;\n    border-left-width: 3px;\n    border-radius: 6px;\n  }\n  .bb-annotationTitle {\n    font-size: 13px;\n  }\n  .bb-annotationDescription {\n    font-size: 11px;\n  }\n  .bb-annotationPosition {\n    font-size: 10px;\n    padding: 3px 6px;\n  }\n  .bb-annotationBadge {\n    font-size: 9px;\n    padding: 2px 8px;\n  }\n  .bb-emptyAnnotations {\n    padding: 20px;\n    font-size: 12px;\n    border-radius: 7px;\n  }\n  .bb-removeModelButton {\n    min-height: 30px;\n    padding: 0 10px;\n    font-size: 11px;\n  }\n  .bb-annotationsList {\n    gap: 8px;\n  }\n  .bb-cameraLive,\n  .bb-cameraSaved {\n    padding: 10px;\n    border-radius: 6px;\n  }\n  .bb-cameraLiveHeader,\n  .bb-cameraSavedHeader {\n    flex-wrap: wrap;\n  }\n  .bb-cameraLiveLabel,\n  .bb-cameraSavedLabel {\n    font-size: 11px;\n  }\n  .bb-cameraRow {\n    font-size: 11px;\n    gap: 4px;\n  }\n  .bb-cameraCode {\n    font-size: 10px;\n    padding: 2px 6px;\n  }\n  .bb-cameraControls {\n    flex-direction: column;\n    gap: 6px;\n  }\n  .bb-cameraControls .bb-button {\n    width: 100%;\n    justify-content: center;\n  }\n  .bb-cameraMessage {\n    font-size: 11px;\n    padding: 8px 12px;\n  }\n  .bb-readonly {\n    font-size: 11px;\n    padding: 6px 8px;\n  }\n}\n@media (max-width: 420px) {\n  .bb-sidebar--left {\n    max-height: 35vh;\n  }\n  .bb-sidebar--right {\n    max-height: 35vh;\n  }\n  .bb-previewShell {\n    min-height: 35vh;\n    padding: 6px;\n  }\n  .bb-preview {\n    min-height: 30vh;\n    border-radius: 6px;\n  }\n  .bb-previewTitle {\n    font-size: 15px;\n  }\n  .bb-previewMeta span {\n    font-size: 9px;\n    padding: 0 6px;\n    min-height: 22px;\n  }\n  .bb-editorTitle {\n    font-size: 16px;\n  }\n  .bb-title {\n    font-size: 13px;\n  }\n  .bb-tab {\n    font-size: 8px;\n    padding: 5px 6px;\n  }\n  .bb-button,\n  .bb-fileLabel {\n    font-size: 10px;\n    min-height: 30px;\n    padding: 0 10px;\n  }\n  .bb-input,\n  .bb-select,\n  .bb-textarea {\n    font-size: 11px;\n    padding: 6px 8px;\n  }\n  .bb-statChip {\n    padding: 6px 8px;\n  }\n  .bb-statChip strong {\n    font-size: 10px;\n  }\n  .bb-previewPlaceholderTitle {\n    font-size: 15px;\n  }\n  .bb-previewPlaceholderButton {\n    font-size: 11px;\n    padding: 6px 12px;\n  }\n  .bb-editSpotPopup {\n    padding: 14px;\n    border-radius: 5px;\n  }\n  .bb-editSpotTitle {\n    font-size: 14px;\n  }\n  .bb-editSpotBody .bb-input,\n  .bb-editSpotBody .bb-textarea {\n    font-size: 12px;\n    padding: 6px 8px;\n  }\n  .bb-modalHeader h3 {\n    font-size: 14px;\n  }\n  .bb-annotationTitle {\n    font-size: 12px;\n  }\n}\n@media (max-width: 980px) {\n  .bb-sidebar--collapsed .bb-header--sidebar {\n    min-height: 52px;\n  }\n  .bb-sidebar--collapsed .bb-title {\n    font-size: 14px;\n  }\n  .bb-sidebar--collapsed .bb-sidebarToggle {\n    width: 28px;\n    height: 28px;\n    font-size: 12px;\n  }\n}\n@media (hover: none) and (pointer: coarse) {\n  .bb-nodeButton:hover,\n  .bb-button:hover,\n  .bb-fileLabel:hover,\n  .bb-tab:hover,\n  .bb-sidebarToggle:hover,\n  .bb-annotationCard:hover {\n    transform: none;\n  }\n  .bb-nodeButton:active,\n  .bb-button:active,\n  .bb-fileLabel:active,\n  .bb-tab:active,\n  .bb-sidebarToggle:active {\n    transform: scale(0.97);\n    transition: transform 0.1s ease;\n  }\n}\n@media print {\n  .bb-root {\n    height: auto;\n    min-height: 0;\n    background: white;\n  }\n  .bb-sidebar--left,\n  .bb-sidebar--right {\n    width: 100% !important;\n    max-height: none !important;\n    background: white !important;\n    color: black !important;\n    border: 1px solid #ddd !important;\n    box-shadow: none !important;\n  }\n  .bb-previewShell {\n    min-height: auto !important;\n    padding: 10px !important;\n  }\n  .bb-preview {\n    min-height: auto !important;\n    border-radius: 4px !important;\n    border: 1px solid #ddd !important;\n    box-shadow: none !important;\n  }\n  .bb-button,\n  .bb-fileLabel,\n  .bb-sidebarToggle,\n  .bb-tab,\n  .bb-annotationAction,\n  .bb-iconButton {\n    display: none !important;\n  }\n  .bb-nodeList {\n    overflow: visible !important;\n  }\n  .bb-previewPlaceholderButton {\n    display: none !important;\n  }\n}\n.bb-checkboxRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  align-items: center;\n  padding: 4px 0;\n}\n.bb-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  border-radius: 7px;\n  font-weight: 600;\n  font-size: 13px;\n  color: #f3eeee;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n.bb-checkbox input[type=checkbox] {\n  width: 16px;\n  height: 16px;\n  accent-color: #f59e0b;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n.bb-editorDivider {\n  height: 1px;\n  background: rgba(148, 163, 184, 0.14);\n  margin: 4px 0 16px 0;\n  width: 100%;\n}\n.bb-preview {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.ri-viewer {\n  width: 100% !important;\n  height: 100% !important;\n  position: relative !important;\n}\n.ri-buttonContainer {\n  position: absolute !important;\n  bottom: 20px !important;\n  right: 20px !important;\n  z-index: 10000 !important;\n  display: flex !important;\n  gap: 10px !important;\n  pointer-events: auto !important;\n}\n.ri-downloadButton {\n  display: flex !important;\n  align-items: center !important;\n  gap: 6px !important;\n  padding: 10px 12px !important;\n  background: #2f302f74 !important;\n  color: white !important;\n  border: none !important;\n  border-radius: 6px !important;\n  cursor: pointer !important;\n  font-size: 12px !important;\n  font-weight: 500 !important;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n}\n.ri-downloadButton svg {\n  width: 14px !important;\n  height: 14px !important;\n}\n.ri-resetButton {\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  padding: 6px !important;\n  background: #2f302f74 !important;\n  border: none !important;\n  border-radius: 6px !important;\n  cursor: pointer !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n}\n.ri-resetButton svg {\n  width: 14px !important;\n  height: 14px !important;\n}\n.bb-reset-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  backdrop-filter: blur(4px);\n  animation: bb-fade-in 0.2s ease;\n}\n.bb-reset-dialog {\n  background: #1a1f2e;\n  border-radius: 12px;\n  max-width: 480px;\n  width: 90%;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);\n  animation: bb-slide-up 0.25s ease;\n}\n.bb-reset-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px 16px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n}\n.bb-reset-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: #f8fafc;\n}\n.bb-reset-title .bb-icon-warning {\n  color: #f59e0b;\n  flex-shrink: 0;\n}\n.bb-reset-close {\n  background: transparent;\n  border: none;\n  color: #94a3b8;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.bb-reset-close:hover {\n  color: #f8fafc;\n  background: rgba(255, 255, 255, 0.06);\n}\n.bb-reset-body {\n  padding: 20px 24px 24px;\n}\n.bb-reset-message {\n  margin: 0 0 12px 0;\n  font-size: 15px;\n  color: #e2e8f0;\n  line-height: 1.5;\n}\n.bb-reset-message strong {\n  color: #f8fafc;\n}\n.bb-reset-details {\n  color: #94a3b8;\n  text-align: center;\n  font-size: 13px;\n  line-height: 1.6;\n  margin: 0 0 12px 0;\n}\n.bb-reset-warning {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #f59e0b;\n  font-size: 13px;\n  font-weight: 600;\n  margin: 4px 0 0 0;\n  padding: 10px 12px;\n  background: rgba(245, 158, 11, 0.08);\n  border-radius: 6px;\n  border: 1px solid rgba(245, 158, 11, 0.15);\n}\n.bb-reset-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n  padding: 16px 24px 20px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n}\n.bb-reset-btn {\n  padding: 8px 20px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  background: rgba(255, 255, 255, 0.04);\n  color: #e2e8f0;\n}\n.bb-reset-btn:hover {\n  background: rgba(255, 255, 255, 0.08);\n  transform: translateY(-1px);\n}\n.bb-reset-btn-danger {\n  padding: 8px 20px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: none;\n  background: #dc2626;\n  color: white;\n}\n.bb-reset-btn-danger:hover {\n  background: #b91c1c;\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);\n}\n@keyframes bb-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes bb-slide-up {\n  from {\n    opacity: 0;\n    transform: translateY(20px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n');
 
 // src/hooks/useViewerCamera.ts
 var import_react23 = require("react");
@@ -11722,7 +11729,7 @@ function LightingTab({ config, onChange }) {
               {
                 className: "se-segmentedControl",
                 style: { gridAutoColumns: "1fr" },
-                children: ["shadowCatcher", "bakedAO"].map((m) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                children: ["shadowCatcher"].map((m) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "button",
                   {
                     type: "button",
@@ -14457,8 +14464,99 @@ function BasicsPanel({
   ] });
 }
 
+// src/components/BindingBuilder/components/ActionsPanel.tsx
+var import_react37 = require("react");
+
+// src/components/BindingBuilder/utils/actionCatalog.ts
+var ACTION_CATALOG = [
+  {
+    id: "change-color",
+    label: "Change Color",
+    handling: "viewer",
+    description: "Opens a color picker docked under the action and commits the result to style.material.baseColor."
+  },
+  {
+    id: "change-material",
+    label: "Change Material",
+    handling: "viewer",
+    description: "Opens the material picker so the viewer can swap the object's texture."
+  },
+  {
+    id: "toggle-visibility",
+    label: "Toggle Visibility",
+    handling: "viewer",
+    description: "Flips the binding's visible flag."
+  },
+  {
+    id: "toggle-light",
+    label: "Toggle Light",
+    handling: "host",
+    description: "Seeded on light bindings. Handle it in your onAction callback."
+  },
+  {
+    id: "change-light-color",
+    label: "Change Light Color",
+    handling: "host",
+    description: "Seeded on light bindings. Handle it in your onAction callback."
+  },
+  {
+    id: "set-brightness",
+    label: "Set Brightness",
+    handling: "host",
+    description: "Seeded on light bindings. Handle it in your onAction callback."
+  }
+];
+var CUSTOM_ACTION_ID = "__custom__";
+function findCatalogAction(id) {
+  return ACTION_CATALOG.find((entry) => entry.id === id);
+}
+var VIEWER_ACTION_IDS = ACTION_CATALOG.filter(
+  (entry) => entry.handling === "viewer"
+).map((entry) => entry.id);
+var AUTO_LABELS = /* @__PURE__ */ new Set([
+  "",
+  "New Action",
+  ...ACTION_CATALOG.map((entry) => entry.label)
+]);
+function isAutoFilledLabel(label) {
+  return AUTO_LABELS.has(label.trim());
+}
+function levenshtein(a, b) {
+  let previous = Array.from({ length: b.length + 1 }, (_, index) => index);
+  for (let i = 1; i <= a.length; i += 1) {
+    const current = [i];
+    for (let j = 1; j <= b.length; j += 1) {
+      const substitution = previous[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1);
+      current[j] = Math.min(current[j - 1] + 1, previous[j] + 1, substitution);
+    }
+    previous = current;
+  }
+  return previous[b.length];
+}
+function suggestActionId(id) {
+  if (findCatalogAction(id)) return null;
+  const candidate = id.trim().toLowerCase();
+  if (!candidate) return null;
+  const normalized = candidate.replace(/[^a-z0-9]/g, "");
+  let best = null;
+  for (const entry of ACTION_CATALOG) {
+    const distance = Math.min(
+      levenshtein(candidate, entry.id),
+      levenshtein(normalized, entry.id.replace(/[^a-z0-9]/g, ""))
+    );
+    if (!best || distance < best.distance) {
+      best = { id: entry.id, distance };
+    }
+  }
+  return best && best.distance <= 2 ? best.id : null;
+}
+
 // src/components/BindingBuilder/components/ActionsPanel.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
+var VIEWER_ACTIONS = ACTION_CATALOG.filter(
+  (entry) => entry.handling === "viewer"
+);
+var HOST_ACTIONS = ACTION_CATALOG.filter((entry) => entry.handling === "host");
 function ActionsPanel({
   selectedItem,
   selectedBinding,
@@ -14466,85 +14564,183 @@ function ActionsPanel({
   onToggle,
   updateBinding
 }) {
+  const [customRows, setCustomRows] = (0, import_react37.useState)(/* @__PURE__ */ new Set());
+  (0, import_react37.useEffect)(() => {
+    setCustomRows(/* @__PURE__ */ new Set());
+  }, [selectedItem]);
+  const actions = selectedBinding.actions ?? [];
+  const updateAction = (index, patch) => updateBinding(selectedItem, (binding) => ({
+    ...binding,
+    actions: (binding.actions ?? []).map(
+      (entry, entryIndex) => entryIndex === index ? patch(entry) : entry
+    )
+  }));
+  const removeAction = (index) => {
+    updateBinding(selectedItem, (binding) => ({
+      ...binding,
+      actions: (binding.actions ?? []).filter(
+        (_, entryIndex) => entryIndex !== index
+      )
+    }));
+    setCustomRows((previous) => {
+      const next = /* @__PURE__ */ new Set();
+      previous.forEach((row) => {
+        if (row < index) next.add(row);
+        else if (row > index) next.add(row - 1);
+      });
+      return next;
+    });
+  };
+  const setCustomRow = (index, custom) => setCustomRows((previous) => {
+    const next = new Set(previous);
+    if (custom) next.add(index);
+    else next.delete(index);
+    return next;
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(BBSection, { title: "Actions", open, onToggle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "bb-actionList", children: (selectedBinding.actions ?? []).map((action, index) => (
-      // Keyed by position, not action.id: the id is an editable field, so
-      // keying on it would remount the card on every keystroke and drop
-      // input focus.
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bb-actionCard", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bb-actionCardHeader", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bb-actionCardTitle", children: [
-            "Action ",
-            index + 1
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "bb-actionCardMeta", children: action.type })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bb-actionGrid", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bb-field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { className: "bb-label", children: "Action ID" }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-              "input",
-              {
-                className: "bb-input",
-                value: action.id,
-                onChange: (event) => updateBinding(selectedItem, (binding) => ({
-                  ...binding,
-                  actions: (binding.actions ?? []).map(
-                    (entry, entryIndex) => entryIndex === index ? { ...entry, id: event.target.value } : entry
-                  )
-                }))
-              }
-            )
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "bb-actionList", children: actions.map((action, index) => {
+      const catalogEntry = findCatalogAction(action.id);
+      const isCustom = customRows.has(index) || !catalogEntry;
+      const trimmedId = action.id.trim();
+      const suggestion = catalogEntry ? null : suggestActionId(action.id);
+      const isDuplicate = trimmedId.length > 0 && actions.some(
+        (other, otherIndex) => otherIndex !== index && other.id.trim() === trimmedId
+      );
+      return (
+        // Keyed by position, not action.id: the id is an editable field, so
+        // keying on it would remount the card on every keystroke and drop
+        // input focus.
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bb-actionCard", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bb-actionCardHeader", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bb-actionCardTitle", children: [
+              "Action ",
+              index + 1
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "bb-actionCardMeta", children: action.type })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bb-field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { className: "bb-label", children: "Label" }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-              "input",
-              {
-                className: "bb-input",
-                value: action.label,
-                onChange: (event) => updateBinding(selectedItem, (binding) => ({
-                  ...binding,
-                  actions: (binding.actions ?? []).map(
-                    (entry, entryIndex) => entryIndex === index ? { ...entry, label: event.target.value } : entry
-                  )
-                }))
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "bb-actionFooter", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "bb-button bb-button--ghost bb-actionRemove",
-            onClick: () => updateBinding(selectedItem, (binding) => ({
-              ...binding,
-              actions: (binding.actions ?? []).filter(
-                (_, entryIndex) => entryIndex !== index
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bb-actionGrid", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bb-field", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { className: "bb-label", children: "Action ID" }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                "select",
+                {
+                  className: "bb-select",
+                  value: isCustom ? CUSTOM_ACTION_ID : action.id,
+                  onChange: (event) => {
+                    const value = event.target.value;
+                    if (value === CUSTOM_ACTION_ID) {
+                      setCustomRow(index, true);
+                      return;
+                    }
+                    setCustomRow(index, false);
+                    const picked = findCatalogAction(value);
+                    updateAction(index, (current) => ({
+                      ...current,
+                      id: value,
+                      // Keep wording the author typed themselves.
+                      label: picked && isAutoFilledLabel(current.label) ? picked.label : current.label
+                    }));
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("optgroup", { label: "Handled by the viewer", children: VIEWER_ACTIONS.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("option", { value: entry.id, children: entry.id }, entry.id)) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("optgroup", { label: "Handled by your app", children: HOST_ACTIONS.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("option", { value: entry.id, children: entry.id }, entry.id)) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("option", { value: CUSTOM_ACTION_ID, children: "Custom\u2026" })
+                  ]
+                }
               )
-            })),
-            children: "Remove Action"
-          }
-        ) })
-      ] }, index)
-    )) }),
+            ] }),
+            isCustom ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bb-field", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { className: "bb-label", children: "Custom action ID" }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                "input",
+                {
+                  className: "bb-input",
+                  value: action.id,
+                  placeholder: "open-datasheet",
+                  onChange: (event) => {
+                    setCustomRow(index, true);
+                    updateAction(index, (entry) => ({
+                      ...entry,
+                      id: event.target.value
+                    }));
+                  }
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "bb-field", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { className: "bb-label", children: "Label" }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                "input",
+                {
+                  className: "bb-input",
+                  value: action.label,
+                  onChange: (event) => updateAction(index, (entry) => ({
+                    ...entry,
+                    label: event.target.value
+                  }))
+                }
+              )
+            ] }),
+            catalogEntry ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "bb-note", children: catalogEntry.description }) : trimmedId.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "bb-note", style: { color: "#fca5a5" }, children: "An action ID is required \u2014 the button renders but can never be identified in onAction." }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "bb-note", style: { color: "#fcd34d" }, children: [
+              "Unrecognised ID \u2014 the viewer has no built-in behaviour for it, so your app must handle it in onAction.",
+              suggestion ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+                " Did you mean ",
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "bb-linkButton",
+                    onClick: () => {
+                      setCustomRow(index, false);
+                      const picked = findCatalogAction(suggestion);
+                      updateAction(index, (current) => ({
+                        ...current,
+                        id: suggestion,
+                        label: picked && isAutoFilledLabel(current.label) ? picked.label : current.label
+                      }));
+                    },
+                    children: suggestion
+                  }
+                ),
+                "?"
+              ] }) : null
+            ] }),
+            isDuplicate ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "bb-note", style: { color: "#fcd34d" }, children: "Another action on this binding uses the same ID \u2014 they will render as two identical buttons." }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "bb-actionFooter", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "bb-button bb-button--ghost bb-actionRemove",
+              onClick: () => removeAction(index),
+              children: "Remove Action"
+            }
+          ) })
+        ] }, index)
+      );
+    }) }),
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "button",
       {
         type: "button",
         className: "bb-button",
-        onClick: () => updateBinding(selectedItem, (binding) => ({
-          ...binding,
-          actions: [
-            ...binding.actions ?? [],
-            {
-              id: "new-action",
-              label: "New Action",
-              type: "command"
-            }
-          ]
-        })),
+        onClick: () => {
+          const unused = VIEWER_ACTIONS.find(
+            (entry) => !actions.some((action) => action.id === entry.id)
+          );
+          updateBinding(selectedItem, (binding) => ({
+            ...binding,
+            actions: [
+              ...binding.actions ?? [],
+              {
+                id: unused?.id ?? "",
+                label: unused?.label ?? "New Action",
+                type: "command"
+              }
+            ]
+          }));
+          if (!unused) setCustomRow(actions.length, true);
+        },
         children: "Add Action"
       }
     ) })
@@ -14658,7 +14854,7 @@ function CameraPositionPanel({
 }
 
 // src/components/BindingBuilder/components/SceneNodesPanel.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/components/BindingBuilder/utils/bindingFactory.ts
 function slugify2(value) {
@@ -14747,9 +14943,9 @@ function SceneNodesPanel({
   isOpen = true,
   onToggle
 }) {
-  const [search, setSearch] = (0, import_react37.useState)("");
-  const nodeKeys = (0, import_react37.useMemo)(() => Object.keys(bindings), [bindings]);
-  const filteredNodeKeys = (0, import_react37.useMemo)(() => {
+  const [search, setSearch] = (0, import_react38.useState)("");
+  const nodeKeys = (0, import_react38.useMemo)(() => Object.keys(bindings), [bindings]);
+  const filteredNodeKeys = (0, import_react38.useMemo)(() => {
     const query = search.trim().toLowerCase();
     if (!query) return nodeKeys;
     return nodeKeys.filter((nodeKey) => {
@@ -14892,7 +15088,7 @@ function mergeAnimationConfig(sceneConfig, animationDetails) {
 }
 
 // src/components/BindingBuilder/hooks/useUndoableState.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 var MAX_HISTORY = 100;
 function historyReducer(state, action) {
   switch (action.type) {
@@ -14931,13 +15127,13 @@ function historyReducer(state, action) {
   }
 }
 function useUndoableState(initial, coalesceWindowMs = 600) {
-  const [state, dispatch] = (0, import_react38.useReducer)(historyReducer, {
+  const [state, dispatch] = (0, import_react39.useReducer)(historyReducer, {
     past: [],
     present: initial,
     future: []
   });
-  const lastSetAt = (0, import_react38.useRef)(0);
-  const setValue = (0, import_react38.useCallback)(
+  const lastSetAt = (0, import_react39.useRef)(0);
+  const setValue = (0, import_react39.useCallback)(
     (updater) => {
       const now = Date.now();
       const coalesce = now - lastSetAt.current < coalesceWindowMs;
@@ -14946,15 +15142,15 @@ function useUndoableState(initial, coalesceWindowMs = 600) {
     },
     [coalesceWindowMs]
   );
-  const undo = (0, import_react38.useCallback)(() => {
+  const undo = (0, import_react39.useCallback)(() => {
     lastSetAt.current = 0;
     dispatch({ type: "undo" });
   }, []);
-  const redo = (0, import_react38.useCallback)(() => {
+  const redo = (0, import_react39.useCallback)(() => {
     lastSetAt.current = 0;
     dispatch({ type: "redo" });
   }, []);
-  const reset = (0, import_react38.useCallback)((value) => {
+  const reset = (0, import_react39.useCallback)((value) => {
     lastSetAt.current = 0;
     dispatch({ type: "reset", value });
   }, []);
@@ -15200,39 +15396,39 @@ function mergeSceneConfigSection(current, incoming) {
   return next;
 }
 function BindingBuilder({ licenseKey }) {
-  const modelInputRef = (0, import_react39.useRef)(null);
-  const bindingsInputRef = (0, import_react39.useRef)(null);
-  const sceneConfigInputRef = (0, import_react39.useRef)(null);
-  const [modelUrl, setModelUrl] = (0, import_react39.useState)(null);
-  const [modelName, setModelName] = (0, import_react39.useState)("");
-  const [selectedItem, setSelectedItem] = (0, import_react39.useState)(null);
+  const modelInputRef = (0, import_react40.useRef)(null);
+  const bindingsInputRef = (0, import_react40.useRef)(null);
+  const sceneConfigInputRef = (0, import_react40.useRef)(null);
+  const [modelUrl, setModelUrl] = (0, import_react40.useState)(null);
+  const [modelName, setModelName] = (0, import_react40.useState)("");
+  const [selectedItem, setSelectedItem] = (0, import_react40.useState)(null);
   const bindingsHistory = useUndoableState({});
   const bindings = bindingsHistory.value;
   const setBindings = bindingsHistory.setValue;
-  const [loading, setLoading] = (0, import_react39.useState)(false);
-  const [isExporting, setIsExporting] = (0, import_react39.useState)(false);
-  const [statusMessage, setStatusMessage] = (0, import_react39.useState)(
+  const [loading, setLoading] = (0, import_react40.useState)(false);
+  const [isExporting, setIsExporting] = (0, import_react40.useState)(false);
+  const [statusMessage, setStatusMessage] = (0, import_react40.useState)(
     "Load the demo model or upload a GLB/GLTF model to generate bindings."
   );
-  const [statusTone, setStatusTone] = (0, import_react39.useState)("default");
-  const [statusBannerVisible, setStatusBannerVisible] = (0, import_react39.useState)(false);
-  const [metricsDraft, setMetricsDraft] = (0, import_react39.useState)("{}");
-  const [metadataDraft, setMetadataDraft] = (0, import_react39.useState)("{}");
-  const [metricsError, setMetricsError] = (0, import_react39.useState)(null);
-  const [metadataError, setMetadataError] = (0, import_react39.useState)(null);
-  const [isPreviewDragActive, setIsPreviewDragActive] = (0, import_react39.useState)(false);
-  const [isEditorCollapsed, setIsEditorCollapsed] = (0, import_react39.useState)(false);
-  const [isNodesCollapsed, setIsNodesCollapsed] = (0, import_react39.useState)(false);
-  const [openObjectSections, setOpenObjectSections] = (0, import_react39.useState)({
+  const [statusTone, setStatusTone] = (0, import_react40.useState)("default");
+  const [statusBannerVisible, setStatusBannerVisible] = (0, import_react40.useState)(false);
+  const [metricsDraft, setMetricsDraft] = (0, import_react40.useState)("{}");
+  const [metadataDraft, setMetadataDraft] = (0, import_react40.useState)("{}");
+  const [metricsError, setMetricsError] = (0, import_react40.useState)(null);
+  const [metadataError, setMetadataError] = (0, import_react40.useState)(null);
+  const [isPreviewDragActive, setIsPreviewDragActive] = (0, import_react40.useState)(false);
+  const [isEditorCollapsed, setIsEditorCollapsed] = (0, import_react40.useState)(false);
+  const [isNodesCollapsed, setIsNodesCollapsed] = (0, import_react40.useState)(false);
+  const [openObjectSections, setOpenObjectSections] = (0, import_react40.useState)({
     identity: true,
     basics: true,
-    material: true,
+    material: false,
     actions: false,
     camera: false,
     metrics: false,
     metadata: false
   });
-  const [openMaterialPanels, setOpenMaterialPanels] = (0, import_react39.useState)({
+  const [openMaterialPanels, setOpenMaterialPanels] = (0, import_react40.useState)({
     pbr: true,
     roughness: false,
     emission: false,
@@ -15248,27 +15444,27 @@ function BindingBuilder({ licenseKey }) {
   });
   const toggleObjectSection = (key) => setOpenObjectSections((prev) => ({ ...prev, [key]: !prev[key] }));
   const toggleMaterialPanel = (key) => setOpenMaterialPanels((prev) => ({ ...prev, [key]: !prev[key] }));
-  const [activeEditorTab, setActiveEditorTab] = (0, import_react39.useState)(
+  const [activeEditorTab, setActiveEditorTab] = (0, import_react40.useState)(
     "object"
   );
-  const [activeSubTab, setActiveSubTab] = (0, import_react39.useState)("General");
-  const [pbrWorkflow, setPbrWorkflow] = (0, import_react39.useState)("metalness");
-  const [materialPanelEnabled, setMaterialPanelEnabled] = (0, import_react39.useState)(createMaterialPanelEnabledState());
-  const materialPanelItemRef = (0, import_react39.useRef)(null);
-  const [zoomOnSelected, setZoomOnSelected] = (0, import_react39.useState)(false);
-  const [highlightOnHover, setHighlightOnHover] = (0, import_react39.useState)(true);
-  const [resetDialogOpen, setResetDialogOpen] = (0, import_react39.useState)(false);
-  const [resetTarget, setResetTarget] = (0, import_react39.useState)(
+  const [activeSubTab, setActiveSubTab] = (0, import_react40.useState)("General");
+  const [pbrWorkflow, setPbrWorkflow] = (0, import_react40.useState)("metalness");
+  const [materialPanelEnabled, setMaterialPanelEnabled] = (0, import_react40.useState)(createMaterialPanelEnabledState());
+  const materialPanelItemRef = (0, import_react40.useRef)(null);
+  const [zoomOnSelected, setZoomOnSelected] = (0, import_react40.useState)(false);
+  const [highlightOnHover, setHighlightOnHover] = (0, import_react40.useState)(true);
+  const [resetDialogOpen, setResetDialogOpen] = (0, import_react40.useState)(false);
+  const [resetTarget, setResetTarget] = (0, import_react40.useState)(
     null
   );
   const sceneConfigHistory = useUndoableState(DEFAULT_SCENE_CONFIG);
   const sceneConfig = sceneConfigHistory.value;
   const setSceneConfig = sceneConfigHistory.setValue;
-  const [activeAnnotation, setActiveAnnotation] = (0, import_react39.useState)(null);
-  const [panelHoveredBinding, setPanelHoveredBinding] = (0, import_react39.useState)(null);
+  const [activeAnnotation, setActiveAnnotation] = (0, import_react40.useState)(null);
+  const [panelHoveredBinding, setPanelHoveredBinding] = (0, import_react40.useState)(null);
   const license = useLicense(licenseKey);
   const tier = normalizeTier(license.tier);
-  const bindingBuilderContextValue = (0, import_react39.useMemo)(
+  const bindingBuilderContextValue = (0, import_react40.useMemo)(
     () => ({
       isInsideEditor: true,
       activeTab: activeEditorTab,
@@ -15277,11 +15473,11 @@ function BindingBuilder({ licenseKey }) {
     }),
     [activeEditorTab, activeSubTab, tier]
   );
-  const uploadedModelRef = (0, import_react39.useRef)(null);
-  const previewDragDepthRef = (0, import_react39.useRef)(0);
-  const loadRequestRef = (0, import_react39.useRef)(0);
-  const pendingLoadRef = (0, import_react39.useRef)(null);
-  const loadedSceneRef = (0, import_react39.useRef)(null);
+  const uploadedModelRef = (0, import_react40.useRef)(null);
+  const previewDragDepthRef = (0, import_react40.useRef)(0);
+  const loadRequestRef = (0, import_react40.useRef)(0);
+  const pendingLoadRef = (0, import_react40.useRef)(null);
+  const loadedSceneRef = (0, import_react40.useRef)(null);
   const {
     cameraState,
     resetView,
@@ -15291,7 +15487,7 @@ function BindingBuilder({ licenseKey }) {
     handleCameraChange,
     handleViewerReady
   } = useViewerCamera();
-  const handlePreviewWaypoint = (0, import_react39.useCallback)(
+  const handlePreviewWaypoint = (0, import_react40.useCallback)(
     (waypoint) => {
       setCameraState(
         {
@@ -15315,7 +15511,7 @@ function BindingBuilder({ licenseKey }) {
     position: formatVector3(cameraState.position),
     target: formatVector3(cameraState.target)
   } : null;
-  const handleAnnotationsChange = (0, import_react39.useCallback)(
+  const handleAnnotationsChange = (0, import_react40.useCallback)(
     (newAnnotations) => {
       setSceneConfig((prev) => {
         const currentIds = prev.annotations.map((a) => a.id).join(",");
@@ -15331,7 +15527,7 @@ function BindingBuilder({ licenseKey }) {
     },
     []
   );
-  const handleActiveAnnotationChange = (0, import_react39.useCallback)(
+  const handleActiveAnnotationChange = (0, import_react40.useCallback)(
     (annotation) => {
       setActiveAnnotation(
         annotation ? {
@@ -15341,7 +15537,7 @@ function BindingBuilder({ licenseKey }) {
     },
     []
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!selectedBinding) {
       setMetricsDraft("{}");
       setMetadataDraft("{}");
@@ -15354,7 +15550,7 @@ function BindingBuilder({ licenseKey }) {
     setMetricsError(null);
     setMetadataError(null);
   }, [selectedBinding]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const derived = createMaterialPanelEnabledState(selectedMaterial);
     if (materialPanelItemRef.current !== selectedItem) {
       materialPanelItemRef.current = selectedItem;
@@ -15373,12 +15569,12 @@ function BindingBuilder({ licenseKey }) {
       return changed ? next : prev;
     });
   }, [selectedItem, selectedMaterial]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     return () => {
       uploadedModelRef.current?.cleanup();
     };
   }, []);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const handleKeyDown = (event) => {
       if (event.key.toLowerCase() !== "z" || !(event.metaKey || event.ctrlKey)) {
         return;
@@ -15399,7 +15595,7 @@ function BindingBuilder({ licenseKey }) {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [activeEditorTab, bindingsHistory, sceneConfigHistory]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (loading || statusTone === "default" || statusTone === "success") return;
     setStatusBannerVisible(true);
     const timeout = window.setTimeout(
@@ -15408,8 +15604,8 @@ function BindingBuilder({ licenseKey }) {
     );
     return () => window.clearTimeout(timeout);
   }, [statusMessage, statusTone, loading]);
-  const nodeKeys = (0, import_react39.useMemo)(() => Object.keys(bindings), [bindings]);
-  const idError = (0, import_react39.useMemo)(() => {
+  const nodeKeys = (0, import_react40.useMemo)(() => Object.keys(bindings), [bindings]);
+  const idError = (0, import_react40.useMemo)(() => {
     if (!selectedItem || !selectedBinding) return null;
     const trimmed = selectedBinding.id.trim();
     if (!trimmed) return "ID is required.";
@@ -15452,7 +15648,7 @@ function BindingBuilder({ licenseKey }) {
       });
     }
   };
-  const applyBindingsFromScene = (0, import_react39.useCallback)(
+  const applyBindingsFromScene = (0, import_react40.useCallback)(
     (scene, nextModelName) => {
       const nodeNames = collectNodeNames(scene);
       bindingsHistory.reset(buildBindingsFromNodes(nodeNames));
@@ -15491,7 +15687,7 @@ function BindingBuilder({ licenseKey }) {
     bindingsHistory.reset({});
     setSelectedItem(null);
   };
-  const handleViewerModelLoaded = (0, import_react39.useCallback)(
+  const handleViewerModelLoaded = (0, import_react40.useCallback)(
     (scene) => {
       const pending = pendingLoadRef.current;
       if (!pending || pending.requestId !== loadRequestRef.current) return;
@@ -15501,7 +15697,7 @@ function BindingBuilder({ licenseKey }) {
     },
     [applyBindingsFromScene]
   );
-  const handleViewerLoadError = (0, import_react39.useCallback)((error) => {
+  const handleViewerLoadError = (0, import_react40.useCallback)((error) => {
     const pending = pendingLoadRef.current;
     if (!pending || pending.requestId !== loadRequestRef.current) return;
     pendingLoadRef.current = null;
@@ -15512,7 +15708,7 @@ function BindingBuilder({ licenseKey }) {
     setStatusTone("error");
     setLoading(false);
   }, []);
-  const handleAnimationsReady = (0, import_react39.useCallback)(
+  const handleAnimationsReady = (0, import_react40.useCallback)(
     (controls) => {
       viewerAnimations.handleAnimationsReady(controls);
       const details = controls.clipDetails ?? controls.clips.map((sourceName) => ({ sourceName, duration: 0 }));
@@ -15813,7 +16009,7 @@ function BindingBuilder({ licenseKey }) {
     }));
     setError(null);
   };
-  const handleViewerSelect = (0, import_react39.useCallback)(
+  const handleViewerSelect = (0, import_react40.useCallback)(
     (binding) => {
       if (!binding) {
         setSelectedItem(null);
@@ -15826,7 +16022,7 @@ function BindingBuilder({ licenseKey }) {
     },
     [bindings]
   );
-  const handleSceneNodeSelect = (0, import_react39.useCallback)(
+  const handleSceneNodeSelect = (0, import_react40.useCallback)(
     async (nodeKey) => {
       setSelectedItem(nodeKey);
       setPanelHoveredBinding(null);
@@ -15834,7 +16030,7 @@ function BindingBuilder({ licenseKey }) {
     },
     [focusObject]
   );
-  const saveCameraPositionForSelectedObject = (0, import_react39.useCallback)(() => {
+  const saveCameraPositionForSelectedObject = (0, import_react40.useCallback)(() => {
     if (!selectedItem || !cameraState) {
       return;
     }
@@ -15849,7 +16045,7 @@ function BindingBuilder({ licenseKey }) {
       cameraState: currentCameraState
     }));
   }, [selectedItem, cameraState]);
-  const goToSavedCameraPosition = (0, import_react39.useCallback)(() => {
+  const goToSavedCameraPosition = (0, import_react40.useCallback)(() => {
     if (!savedCameraPosition?.position || !savedCameraPosition?.target) return;
     setCameraState(
       {
@@ -15861,28 +16057,28 @@ function BindingBuilder({ licenseKey }) {
       true
     );
   }, [savedCameraPosition, setCameraState, cameraState]);
-  const clearSavedCameraPosition = (0, import_react39.useCallback)(() => {
+  const clearSavedCameraPosition = (0, import_react40.useCallback)(() => {
     if (!selectedItem) return;
     updateBinding(selectedItem, (binding) => ({
       ...binding,
       cameraState: void 0
     }));
   }, [selectedItem]);
-  const handleResetView = (0, import_react39.useCallback)(async () => {
+  const handleResetView = (0, import_react40.useCallback)(async () => {
     await resetView();
   }, [resetView]);
-  const handleFitScene = (0, import_react39.useCallback)(async () => {
+  const handleFitScene = (0, import_react40.useCallback)(async () => {
     await fitScene();
   }, [fitScene]);
-  const openResetDialog = (0, import_react39.useCallback)((target) => {
+  const openResetDialog = (0, import_react40.useCallback)((target) => {
     setResetTarget(target);
     setResetDialogOpen(true);
   }, []);
-  const closeResetDialog = (0, import_react39.useCallback)(() => {
+  const closeResetDialog = (0, import_react40.useCallback)(() => {
     setResetDialogOpen(false);
     setResetTarget(null);
   }, []);
-  const executeReset = (0, import_react39.useCallback)(() => {
+  const executeReset = (0, import_react40.useCallback)(() => {
     if (resetTarget === "bindings") {
       if (!nodeKeys.length) {
         closeResetDialog();
@@ -16440,7 +16636,7 @@ function BindingBuilder({ licenseKey }) {
 }
 
 // src/components/SimpleModelViewer/SimpleModelViewer.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_drei6 = require("@react-three/drei");
 var import_fiber12 = require("@react-three/fiber");
 var import_fiber13 = require("@react-three/fiber");
@@ -16480,7 +16676,7 @@ function applyClippingPlanes(scene, controls) {
   camera.updateProjectionMatrix();
   controls.maxDistance = size * 10;
 }
-var ModelErrorBoundary2 = class extends import_react40.Component {
+var ModelErrorBoundary2 = class extends import_react41.Component {
   constructor() {
     super(...arguments);
     this.state = { hasError: false };
@@ -16512,12 +16708,12 @@ function InnerModel({
     meshopt: true
   });
   const invalidate = (0, import_fiber12.useThree)((state) => state.invalidate);
-  const [hoveredKey, setHoveredKey] = (0, import_react40.useState)(null);
-  const scene = (0, import_react40.useMemo)(
+  const [hoveredKey, setHoveredKey] = (0, import_react41.useState)(null);
+  const scene = (0, import_react41.useMemo)(
     () => import_three_stdlib4.SkeletonUtils.clone(rawScene),
     [rawScene]
   );
-  const meshMap = (0, import_react40.useMemo)(() => {
+  const meshMap = (0, import_react41.useMemo)(() => {
     const map = {};
     scene.traverse((obj) => {
       if (!isMeshNode2(obj)) return;
@@ -16526,7 +16722,7 @@ function InnerModel({
     });
     return map;
   }, [scene]);
-  const perKeyMaterials = (0, import_react40.useMemo)(() => {
+  const perKeyMaterials = (0, import_react41.useMemo)(() => {
     const map = {};
     for (const [key, { ref }] of Object.entries(meshMap)) {
       const original = Array.isArray(ref.material) ? ref.material[0] : ref.material;
@@ -16542,14 +16738,14 @@ function InnerModel({
     }
     return map;
   }, [meshMap]);
-  (0, import_react40.useEffect)(
+  (0, import_react41.useEffect)(
     () => () => {
       Object.values(perKeyMaterials).forEach((m) => m.dispose());
     },
     [perKeyMaterials]
   );
-  const notifiedUrl = (0, import_react40.useRef)(null);
-  (0, import_react40.useEffect)(() => {
+  const notifiedUrl = (0, import_react41.useRef)(null);
+  (0, import_react41.useEffect)(() => {
     if (notifiedUrl.current === url) return;
     notifiedUrl.current = url;
     scene.updateWorldMatrix(true, true);
@@ -16557,7 +16753,7 @@ function InnerModel({
     onMeshesReady(meshMap);
     onModelLoaded(scene);
   }, [url, scene, meshMap, onMeshesReady, onModelLoaded]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const controller = new AbortController();
     void buildSceneBVH(scene, controller.signal);
     return () => {
@@ -16565,26 +16761,26 @@ function InnerModel({
       disposeSceneBVH(scene);
     };
   }, [scene]);
-  const pointerRaycastEnabled = (0, import_react40.useMemo)(
+  const pointerRaycastEnabled = (0, import_react41.useMemo)(
     () => !exceedsBvhBudget(scene),
     [scene]
   );
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     for (const [key, { ref }] of Object.entries(meshMap)) {
       nodeRefsOut.current[key] = ref;
     }
   }, [meshMap, nodeRefsOut]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!highlightOnHover && hoveredKey !== null) {
       setHoveredKey(null);
     }
   }, [highlightOnHover, hoveredKey]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     return () => {
       document.body.style.cursor = "default";
     };
   }, []);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     for (const [key, { ref }] of Object.entries(meshMap)) {
       ref.visible = !hiddenKeys.has(key);
       const mat = perKeyMaterials[key];
@@ -16654,11 +16850,11 @@ function CameraFitter({
   refitOnResize,
   onInitialFitComplete
 }) {
-  const fitted = (0, import_react40.useRef)(false);
+  const fitted = (0, import_react41.useRef)(false);
   const invalidate = (0, import_fiber12.useThree)((state) => state.invalidate);
   const size = (0, import_fiber12.useThree)((state) => state.size);
-  const resizeTimerRef = (0, import_react40.useRef)(null);
-  (0, import_react40.useEffect)(() => {
+  const resizeTimerRef = (0, import_react41.useRef)(null);
+  (0, import_react41.useEffect)(() => {
     fitted.current = false;
     invalidate();
   }, [invalidate, scene]);
@@ -16678,7 +16874,7 @@ function CameraFitter({
     }).catch(() => {
     }).finally(onInitialFitComplete);
   });
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!refitOnResize || !fitted.current || !scene || !controlsRef.current) {
       return;
     }
@@ -16706,7 +16902,7 @@ function CameraFitter({
 function ExposureController({ exposure }) {
   const gl = (0, import_fiber12.useThree)((state) => state.gl);
   const invalidate = (0, import_fiber12.useThree)((state) => state.invalidate);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     gl.toneMappingExposure = exposure;
     invalidate();
   }, [gl, exposure, invalidate]);
@@ -16814,7 +17010,7 @@ function EnvironmentSection({
   title,
   children
 }) {
-  const [collapsed, setCollapsed] = (0, import_react40.useState)(false);
+  const [collapsed, setCollapsed] = (0, import_react41.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "env-section", children: [
     /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
       "button",
@@ -16979,8 +17175,8 @@ function SceneObjectsPanel2({
   onHover,
   onToggleVisibility
 }) {
-  const [search, setSearch] = (0, import_react40.useState)("");
-  const [rowHovered, setRowHovered] = (0, import_react40.useState)(null);
+  const [search, setSearch] = (0, import_react41.useState)("");
+  const [rowHovered, setRowHovered] = (0, import_react41.useState)(null);
   const entries = Object.values(meshKeys).filter(
     (m) => m.label.toLowerCase().includes(search.toLowerCase())
   );
@@ -17104,35 +17300,35 @@ function SimpleModelViewer({
   onModelLoaded,
   onLoadError
 }) {
-  const cameraControlsRef = (0, import_react40.useRef)(null);
-  const nodeRefsOut = (0, import_react40.useRef)({});
-  const fileInputRef = (0, import_react40.useRef)(null);
-  const uploadedModelRef = (0, import_react40.useRef)(null);
-  const dragDepthRef = (0, import_react40.useRef)(0);
-  const [loadedScene, setLoadedScene] = (0, import_react40.useState)(null);
-  const [largeModelTriangles, setLargeModelTriangles] = (0, import_react40.useState)(
+  const cameraControlsRef = (0, import_react41.useRef)(null);
+  const nodeRefsOut = (0, import_react41.useRef)({});
+  const fileInputRef = (0, import_react41.useRef)(null);
+  const uploadedModelRef = (0, import_react41.useRef)(null);
+  const dragDepthRef = (0, import_react41.useRef)(0);
+  const [loadedScene, setLoadedScene] = (0, import_react41.useState)(null);
+  const [largeModelTriangles, setLargeModelTriangles] = (0, import_react41.useState)(
     null
   );
-  const [largeModelNoticeDismissed, setLargeModelNoticeDismissed] = (0, import_react40.useState)(false);
-  const [meshKeys, setMeshKeys] = (0, import_react40.useState)({});
-  const [hiddenKeys, setHiddenKeys] = (0, import_react40.useState)(/* @__PURE__ */ new Set());
-  const [selectedKey, setSelectedKey] = (0, import_react40.useState)(null);
-  const [panelHoveredKey, setPanelHoveredKey] = (0, import_react40.useState)(null);
-  const [uploadedModelUrl, setUploadedModelUrl] = (0, import_react40.useState)(null);
-  const [uploadedModelName, setUploadedModelName] = (0, import_react40.useState)(
+  const [largeModelNoticeDismissed, setLargeModelNoticeDismissed] = (0, import_react41.useState)(false);
+  const [meshKeys, setMeshKeys] = (0, import_react41.useState)({});
+  const [hiddenKeys, setHiddenKeys] = (0, import_react41.useState)(/* @__PURE__ */ new Set());
+  const [selectedKey, setSelectedKey] = (0, import_react41.useState)(null);
+  const [panelHoveredKey, setPanelHoveredKey] = (0, import_react41.useState)(null);
+  const [uploadedModelUrl, setUploadedModelUrl] = (0, import_react41.useState)(null);
+  const [uploadedModelName, setUploadedModelName] = (0, import_react41.useState)(
     null
   );
-  const [modelLoadFailed, setModelLoadFailed] = (0, import_react40.useState)(false);
-  const [isResolvingUpload, setIsResolvingUpload] = (0, import_react40.useState)(false);
-  const [initialFitComplete, setInitialFitComplete] = (0, import_react40.useState)(false);
-  const [isDragActive, setIsDragActive] = (0, import_react40.useState)(false);
-  const [isPanelOpen, setIsPanelOpen] = (0, import_react40.useState)(
+  const [modelLoadFailed, setModelLoadFailed] = (0, import_react41.useState)(false);
+  const [isResolvingUpload, setIsResolvingUpload] = (0, import_react41.useState)(false);
+  const [initialFitComplete, setInitialFitComplete] = (0, import_react41.useState)(false);
+  const [isDragActive, setIsDragActive] = (0, import_react41.useState)(false);
+  const [isPanelOpen, setIsPanelOpen] = (0, import_react41.useState)(
     () => typeof window === "undefined" ? true : window.innerWidth > 900
   );
-  const [isEnvPanelOpen, setIsEnvPanelOpen] = (0, import_react40.useState)(
+  const [isEnvPanelOpen, setIsEnvPanelOpen] = (0, import_react41.useState)(
     () => typeof window === "undefined" ? true : window.innerWidth > 900
   );
-  const [envSettings, setEnvSettings] = (0, import_react40.useState)({
+  const [envSettings, setEnvSettings] = (0, import_react41.useState)({
     backgroundEnabled,
     backgroundColor,
     autoRotate,
@@ -17144,7 +17340,7 @@ function SimpleModelViewer({
     directionalColor
   });
   const activeModelUrl = enableModelUpload ? uploadedModelUrl : modelUrl;
-  const resetModelState = (0, import_react40.useCallback)(() => {
+  const resetModelState = (0, import_react41.useCallback)(() => {
     setLoadedScene(null);
     setLargeModelTriangles(null);
     setLargeModelNoticeDismissed(false);
@@ -17155,11 +17351,11 @@ function SimpleModelViewer({
     setModelLoadFailed(false);
     setInitialFitComplete(false);
   }, []);
-  const revokeUploadedModelUrl = (0, import_react40.useCallback)(() => {
+  const revokeUploadedModelUrl = (0, import_react41.useCallback)(() => {
     uploadedModelRef.current?.cleanup();
     uploadedModelRef.current = null;
   }, []);
-  const clearUploadedModel = (0, import_react40.useCallback)(() => {
+  const clearUploadedModel = (0, import_react41.useCallback)(() => {
     revokeUploadedModelUrl();
     setUploadedModelUrl(null);
     setUploadedModelName(null);
@@ -17188,7 +17384,7 @@ function SimpleModelViewer({
     resetModelState,
     revokeUploadedModelUrl
   ]);
-  const handleUploadedModel = (0, import_react40.useCallback)(
+  const handleUploadedModel = (0, import_react41.useCallback)(
     async (file) => {
       setIsResolvingUpload(true);
       try {
@@ -17207,7 +17403,7 @@ function SimpleModelViewer({
     },
     [onLoadError, resetModelState, revokeUploadedModelUrl]
   );
-  const handleFileSelection = (0, import_react40.useCallback)(
+  const handleFileSelection = (0, import_react41.useCallback)(
     (files) => {
       const file = files?.[0];
       if (!file) return;
@@ -17215,29 +17411,29 @@ function SimpleModelViewer({
     },
     [handleUploadedModel]
   );
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     return () => {
       revokeUploadedModelUrl();
     };
   }, [revokeUploadedModelUrl]);
-  const handleEnvSettingChange = (0, import_react40.useCallback)(
+  const handleEnvSettingChange = (0, import_react41.useCallback)(
     (key, value) => {
       setEnvSettings((prev) => ({ ...prev, [key]: value }));
     },
     []
   );
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     setEnvSettings((prev) => ({ ...prev, backgroundColor }));
   }, [backgroundColor]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     resetModelState();
   }, [activeModelUrl, resetModelState]);
-  const handleMeshesReady = (0, import_react40.useCallback)((meshes) => {
+  const handleMeshesReady = (0, import_react41.useCallback)((meshes) => {
     setMeshKeys(meshes);
     setHiddenKeys(/* @__PURE__ */ new Set());
     setSelectedKey(null);
   }, []);
-  const handleModelLoaded = (0, import_react40.useCallback)(
+  const handleModelLoaded = (0, import_react41.useCallback)(
     (scene) => {
       setLoadedScene(scene);
       setModelLoadFailed(false);
@@ -17248,14 +17444,14 @@ function SimpleModelViewer({
     },
     [onModelLoaded]
   );
-  const handleLoadError = (0, import_react40.useCallback)(
+  const handleLoadError = (0, import_react41.useCallback)(
     (error) => {
       setModelLoadFailed(true);
       onLoadError?.(error);
     },
     [onLoadError]
   );
-  const focusMesh = (0, import_react40.useCallback)(
+  const focusMesh = (0, import_react41.useCallback)(
     (key) => {
       setSelectedKey(key);
       if (!zoomOnSelected) return;
@@ -17271,14 +17467,14 @@ function SimpleModelViewer({
     },
     [zoomOnSelected]
   );
-  const handleToggleVisibility = (0, import_react40.useCallback)((key) => {
+  const handleToggleVisibility = (0, import_react41.useCallback)((key) => {
     setHiddenKeys((prev) => {
       const next = new Set(prev);
       next.has(key) ? next.delete(key) : next.add(key);
       return next;
     });
   }, []);
-  const handleDragEnter = (0, import_react40.useCallback)(
+  const handleDragEnter = (0, import_react41.useCallback)(
     (event) => {
       if (!enableModelUpload || !supportsDraggedFiles(event.dataTransfer)) {
         return;
@@ -17290,7 +17486,7 @@ function SimpleModelViewer({
     },
     [enableModelUpload]
   );
-  const handleDragOver = (0, import_react40.useCallback)(
+  const handleDragOver = (0, import_react41.useCallback)(
     (event) => {
       if (!enableModelUpload || !supportsDraggedFiles(event.dataTransfer)) {
         return;
@@ -17302,7 +17498,7 @@ function SimpleModelViewer({
     },
     [enableModelUpload]
   );
-  const handleDragLeave = (0, import_react40.useCallback)(
+  const handleDragLeave = (0, import_react41.useCallback)(
     (event) => {
       if (!enableModelUpload || !supportsDraggedFiles(event.dataTransfer)) {
         return;
@@ -17316,7 +17512,7 @@ function SimpleModelViewer({
     },
     [enableModelUpload]
   );
-  const handleDrop = (0, import_react40.useCallback)(
+  const handleDrop = (0, import_react41.useCallback)(
     (event) => {
       if (!enableModelUpload || !supportsDraggedFiles(event.dataTransfer)) {
         return;
@@ -17409,7 +17605,7 @@ function SimpleModelViewer({
               raycaster: { firstHitOnly: true },
               style: { background: envSettings.backgroundColor },
               camera: { position: [0, 0, 5], fov: 45, near: 0.1, far: 1e3 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react40.Suspense, { fallback: null, children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react41.Suspense, { fallback: null, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                   "ambientLight",
                   {
@@ -17427,7 +17623,7 @@ function SimpleModelViewer({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("directionalLight", { position: [-5, 5, 5], intensity: 0.5 }),
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react40.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react41.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                   import_drei6.Environment,
                   {
                     preset: envSettings.envPreset,
@@ -17446,7 +17642,7 @@ function SimpleModelViewer({
                   ModelErrorBoundary2,
                   {
                     onLoadError: handleLoadError,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react40.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react41.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                       InnerModel,
                       {
                         url: activeModelUrl,
@@ -17545,18 +17741,18 @@ function SimpleModelViewer({
 }
 
 // src/hooks/useViewerSelection.ts
-var import_react41 = require("react");
+var import_react42 = require("react");
 function useViewerSelection(initialSelectedObjectBinding = null) {
-  const [selectedObjectBinding, setSelectedObjectBinding] = (0, import_react41.useState)(
+  const [selectedObjectBinding, setSelectedObjectBinding] = (0, import_react42.useState)(
     initialSelectedObjectBinding
   );
-  const handleObjectSelect = (0, import_react41.useCallback)(
+  const handleObjectSelect = (0, import_react42.useCallback)(
     (binding) => {
       setSelectedObjectBinding(binding);
     },
     [setSelectedObjectBinding]
   );
-  const clearSelection = (0, import_react41.useCallback)(() => {
+  const clearSelection = (0, import_react42.useCallback)(() => {
     setSelectedObjectBinding(null);
   }, []);
   return {
@@ -17568,9 +17764,9 @@ function useViewerSelection(initialSelectedObjectBinding = null) {
 }
 
 // src/hooks/useObjectBinding.ts
-var import_react42 = require("react");
+var import_react43 = require("react");
 function useObjectBinding(objectBindings, objectId) {
-  return (0, import_react42.useMemo)(() => {
+  return (0, import_react43.useMemo)(() => {
     if (!objectId) {
       return null;
     }
@@ -17585,26 +17781,23 @@ function useObjectBinding(objectBindings, objectId) {
 }
 
 // src/hooks/useObjectBindingIds.ts
-var import_react43 = require("react");
+var import_react44 = require("react");
 function useObjectBindingIds(objectBindings) {
-  return (0, import_react43.useMemo)(
+  return (0, import_react44.useMemo)(
     () => Object.values(objectBindings).map((binding) => binding.modelObjectId),
     [objectBindings]
   );
 }
 
 // src/hooks/useObjectBindings.ts
-var import_react44 = require("react");
+var import_react45 = require("react");
 
-// src/utils/patchBindings.ts
+// src/utils/deepMerge.ts
 function isPlainObject2(value) {
   if (typeof value !== "object" || value === null) return false;
   const prototype = Object.getPrototypeOf(value);
   return prototype === Object.prototype || prototype === null;
 }
-function isBindingEditArray(value) {
-  return Array.isArray(value) && value.length > 0 && typeof value[0] !== "string";
-}
 function deepMerge(base, patch) {
   if (!isPlainObject2(patch)) return patch;
   const target = isPlainObject2(base) ? { ...base } : {};
@@ -17614,6 +17807,11 @@ function deepMerge(base, patch) {
   }
   return target;
 }
+
+// src/utils/patchBindings.ts
+function isBindingEditArray(value) {
+  return Array.isArray(value) && value.length > 0 && typeof value[0] !== "string";
+}
 function patchBindings(bindings, objectIdOrEdits, patch) {
   const edits = isBindingEditArray(objectIdOrEdits) ? objectIdOrEdits : [{ ids: objectIdOrEdits, patch: patch ?? {} }];
   let next = bindings;
@@ -17642,8 +17840,8 @@ function getHiddenObjects(objectBindings) {
   );
 }
 function useObjectBindings(initialBindings) {
-  const [objectBindings, setObjectBindings] = (0, import_react44.useState)(initialBindings);
-  const patch = (0, import_react44.useCallback)(
+  const [objectBindings, setObjectBindings] = (0, import_react45.useState)(initialBindings);
+  const updateObjectBindings = (0, import_react45.useCallback)(
     (objectIdOrEdits, patchValue) => {
       setObjectBindings(
         (current) => patchValue === void 0 ? patchBindings(current, objectIdOrEdits) : patchBindings(
@@ -17655,34 +17853,34 @@ function useObjectBindings(initialBindings) {
     },
     []
   );
-  const setMaterial = (0, import_react44.useCallback)(
-    (objectId, value) => patch(objectId, material(value)),
-    [patch]
+  const setMaterial = (0, import_react45.useCallback)(
+    (objectId, value) => updateObjectBindings(objectId, material(value)),
+    [updateObjectBindings]
   );
-  const setBaseColor = (0, import_react44.useCallback)(
+  const setBaseColor = (0, import_react45.useCallback)(
     (objectId, color) => setMaterial(objectId, { baseColor: color }),
     [setMaterial]
   );
-  const resetMaterial = (0, import_react44.useCallback)(
-    (objectId) => patch(objectId, { style: { material: void 0 } }),
-    [patch]
+  const resetMaterial = (0, import_react45.useCallback)(
+    (objectId) => updateObjectBindings(objectId, { style: { material: void 0 } }),
+    [updateObjectBindings]
   );
-  const getMaterial = (0, import_react44.useCallback)(
+  const getMaterial = (0, import_react45.useCallback)(
     (objectId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       return bindingKey ? objectBindings[bindingKey]?.style?.material ?? null : null;
     },
     [objectBindings]
   );
-  const hideObject = (0, import_react44.useCallback)(
-    (objectId) => patch(objectId, { visible: false }),
-    [patch]
+  const hideObject = (0, import_react45.useCallback)(
+    (objectId) => updateObjectBindings(objectId, { visible: false }),
+    [updateObjectBindings]
   );
-  const showObject = (0, import_react44.useCallback)(
-    (objectId) => patch(objectId, { visible: true }),
-    [patch]
+  const showObject = (0, import_react45.useCallback)(
+    (objectId) => updateObjectBindings(objectId, { visible: true }),
+    [updateObjectBindings]
   );
-  const toggleObjectVisibility = (0, import_react44.useCallback)(
+  const toggleObjectVisibility = (0, import_react45.useCallback)(
     (objectId) => {
       setObjectBindings((current) => {
         const objectIds = Array.isArray(objectId) ? objectId : [objectId];
@@ -17701,22 +17899,22 @@ function useObjectBindings(initialBindings) {
     },
     [setObjectBindings]
   );
-  const clearHiddenObjects = (0, import_react44.useCallback)(() => {
+  const clearHiddenObjects = (0, import_react45.useCallback)(() => {
     setObjectBindings(
       (current) => patchBindings(current, Object.keys(current), { visible: true })
     );
   }, [setObjectBindings]);
-  const hiddenObjects = (0, import_react44.useMemo)(
+  const hiddenObjects = (0, import_react45.useMemo)(
     () => getHiddenObjects(objectBindings),
     [objectBindings]
   );
-  const hiddenObjectIds = (0, import_react44.useMemo)(
+  const hiddenObjectIds = (0, import_react45.useMemo)(
     () => Object.keys(hiddenObjects).map(
       (bindingKey) => objectBindings[bindingKey]?.id ?? bindingKey
     ),
     [hiddenObjects, objectBindings]
   );
-  const isObjectHidden = (0, import_react44.useCallback)(
+  const isObjectHidden = (0, import_react45.useCallback)(
     (objectId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       return bindingKey ? objectBindings[bindingKey]?.visible === false : false;
@@ -17726,7 +17924,7 @@ function useObjectBindings(initialBindings) {
   return {
     objectBindings,
     setObjectBindings,
-    patch,
+    updateObjectBindings,
     setMaterial,
     setBaseColor,
     resetMaterial,
@@ -17741,11 +17939,45 @@ function useObjectBindings(initialBindings) {
   };
 }
 
+// src/hooks/useSceneConfig.ts
+var import_react46 = require("react");
+
+// src/utils/patchSceneConfig.ts
+function patchSceneConfig(sceneConfig, patch) {
+  return deepMerge(sceneConfig, patch);
+}
+
+// src/hooks/useSceneConfig.ts
+function useSceneConfig(initialSceneConfig) {
+  const initialSceneConfigRef = (0, import_react46.useRef)(null);
+  const [sceneConfig, setSceneConfig] = (0, import_react46.useState)(() => {
+    const initial = typeof initialSceneConfig === "function" ? initialSceneConfig() : initialSceneConfig;
+    initialSceneConfigRef.current = initial;
+    return initial;
+  });
+  const updateSceneConfig = (0, import_react46.useCallback)((update) => {
+    setSceneConfig((current) => {
+      const patch = typeof update === "function" ? update(current) : update;
+      return patchSceneConfig(current, patch);
+    });
+  }, []);
+  const resetSceneConfig = (0, import_react46.useCallback)(() => {
+    const initial = initialSceneConfigRef.current;
+    if (initial) setSceneConfig(initial);
+  }, []);
+  return {
+    sceneConfig,
+    setSceneConfig,
+    updateSceneConfig,
+    resetSceneConfig
+  };
+}
+
 // src/hooks/useViewerHover.ts
-var import_react45 = require("react");
+var import_react47 = require("react");
 function useViewerHover() {
-  const [hoveredObjectBinding, setHoveredObjectBinding] = (0, import_react45.useState)(null);
-  const handleHoveredObject = (0, import_react45.useCallback)(
+  const [hoveredObjectBinding, setHoveredObjectBinding] = (0, import_react47.useState)(null);
+  const handleHoveredObject = (0, import_react47.useCallback)(
     (binding) => {
       setHoveredObjectBinding(binding);
     },
@@ -17758,18 +17990,18 @@ function useViewerHover() {
 }
 
 // src/hooks/useViewerModel.ts
-var import_react46 = require("react");
+var import_react48 = require("react");
 var import_three22 = require("three");
 function toTuple2(vector) {
   return [vector.x, vector.y, vector.z];
 }
 function useViewerModel() {
-  const [isLoading, setIsLoading] = (0, import_react46.useState)(true);
-  const [isReady, setIsReady] = (0, import_react46.useState)(false);
-  const [error, setError] = (0, import_react46.useState)(null);
-  const [bounds, setBounds] = (0, import_react46.useState)(null);
-  const [objectCount, setObjectCount] = (0, import_react46.useState)(0);
-  const handleModelLoaded = (0, import_react46.useCallback)((scene) => {
+  const [isLoading, setIsLoading] = (0, import_react48.useState)(true);
+  const [isReady, setIsReady] = (0, import_react48.useState)(false);
+  const [error, setError] = (0, import_react48.useState)(null);
+  const [bounds, setBounds] = (0, import_react48.useState)(null);
+  const [objectCount, setObjectCount] = (0, import_react48.useState)(0);
+  const handleModelLoaded = (0, import_react48.useCallback)((scene) => {
     const box = new import_three22.Box3().setFromObject(scene);
     const min = box.min.clone();
     const max = box.max.clone();
@@ -17794,14 +18026,14 @@ function useViewerModel() {
     setIsLoading(false);
     setIsReady(true);
   }, []);
-  const handleLoadError = (0, import_react46.useCallback)((nextError) => {
+  const handleLoadError = (0, import_react48.useCallback)((nextError) => {
     setError(nextError);
     setBounds(null);
     setObjectCount(0);
     setIsLoading(false);
     setIsReady(false);
   }, []);
-  const resetModelState = (0, import_react46.useCallback)(() => {
+  const resetModelState = (0, import_react48.useCallback)(() => {
     setIsLoading(true);
     setIsReady(false);
     setError(null);
@@ -17821,10 +18053,10 @@ function useViewerModel() {
 }
 
 // src/hooks/useViewerActions.ts
-var import_react47 = require("react");
+var import_react49 = require("react");
 function useViewerActions(objectBindings, options = {}) {
   const { onAction, onObjectBindingsChange } = options;
-  const getActionsForObject = (0, import_react47.useCallback)(
+  const getActionsForObject = (0, import_react49.useCallback)(
     (objectId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       if (!bindingKey) {
@@ -17834,7 +18066,7 @@ function useViewerActions(objectBindings, options = {}) {
     },
     [objectBindings]
   );
-  const runAction = (0, import_react47.useCallback)(
+  const runAction = (0, import_react49.useCallback)(
     (objectId, actionId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       if (!bindingKey) {
@@ -17876,7 +18108,7 @@ function useViewerActions(objectBindings, options = {}) {
 }
 
 // src/hooks/useShareableViewerState.ts
-var import_react48 = require("react");
+var import_react50 = require("react");
 function serializeState(cameraState, objectBindings, selectedObjectBinding) {
   const hidden = Object.values(objectBindings).filter((binding) => binding.visible === false).map((binding) => binding.id);
   return {
@@ -17896,8 +18128,8 @@ function useShareableViewerState({
   debounceMs = 400,
   autoSync = true
 }) {
-  const lastWrittenRawRef = (0, import_react48.useRef)(null);
-  const buildHash = (0, import_react48.useCallback)(() => {
+  const lastWrittenRawRef = (0, import_react50.useRef)(null);
+  const buildHash = (0, import_react50.useCallback)(() => {
     const state = serializeState(
       cameraState,
       objectBindings,
@@ -17905,12 +18137,12 @@ function useShareableViewerState({
     );
     return `${paramKey}=${encodeURIComponent(JSON.stringify(state))}`;
   }, [cameraState, objectBindings, selectedObjectBinding, paramKey]);
-  const getShareUrl = (0, import_react48.useCallback)(() => {
+  const getShareUrl = (0, import_react50.useCallback)(() => {
     const url = new URL(window.location.href);
     url.hash = buildHash();
     return url.toString();
   }, [buildHash]);
-  const syncUrl = (0, import_react48.useCallback)(() => {
+  const syncUrl = (0, import_react50.useCallback)(() => {
     const url = new URL(window.location.href);
     url.hash = buildHash();
     window.history.replaceState(null, "", url.toString());
@@ -17918,7 +18150,7 @@ function useShareableViewerState({
       paramKey
     );
   }, [buildHash, paramKey]);
-  const latestStateRef = (0, import_react48.useRef)({
+  const latestStateRef = (0, import_react50.useRef)({
     cameraState,
     objectBindings,
     selectedObjectBinding
@@ -17928,9 +18160,9 @@ function useShareableViewerState({
     objectBindings,
     selectedObjectBinding
   };
-  const [restoreAttempted, setRestoreAttempted] = (0, import_react48.useState)(false);
-  const lastSyncedHashRef = (0, import_react48.useRef)(null);
-  (0, import_react48.useEffect)(() => {
+  const [restoreAttempted, setRestoreAttempted] = (0, import_react50.useState)(false);
+  const lastSyncedHashRef = (0, import_react50.useRef)(null);
+  (0, import_react50.useEffect)(() => {
     if (!autoSync || !restoreAttempted) return;
     const tick = () => {
       const current = latestStateRef.current;
@@ -17952,9 +18184,9 @@ function useShareableViewerState({
     const id = window.setInterval(tick, debounceMs);
     return () => window.clearInterval(id);
   }, [autoSync, restoreAttempted, debounceMs, paramKey]);
-  const lastRestoredRawRef = (0, import_react48.useRef)(null);
-  const restoringRawRef = (0, import_react48.useRef)(null);
-  const restoreFromUrl = (0, import_react48.useCallback)(async () => {
+  const lastRestoredRawRef = (0, import_react50.useRef)(null);
+  const restoringRawRef = (0, import_react50.useRef)(null);
+  const restoreFromUrl = (0, import_react50.useCallback)(async () => {
     setRestoreAttempted(true);
     const rawHash = window.location.hash.startsWith("#") ? window.location.hash.slice(1) : window.location.hash;
     const raw = new URLSearchParams(rawHash).get(paramKey);
@@ -18007,7 +18239,7 @@ function useShareableViewerState({
     setCameraState,
     setSelectedObjectBinding
   ]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     const handleHashChange = () => {
       void restoreFromUrl();
     };
@@ -18027,9 +18259,11 @@ function useShareableViewerState({
   SimpleModelViewer,
   material,
   patchBindings,
+  patchSceneConfig,
   useObjectBinding,
   useObjectBindingIds,
   useObjectBindings,
+  useSceneConfig,
   useShareableViewerState,
   useViewerActions,
   useViewerAnimations,