@liveroom-tech/react-immersive 2.0.0 → 2.1.1

package/dist/index.mjs

@@ -5531,32 +5531,37 @@ function ObjectBindingDataPanel({
         /* @__PURE__ */ jsx15("hr", { className: "left-panel__divider" }),
         objectToRender.actions && objectToRender.actions.length > 0 && /* @__PURE__ */ jsxs11(Fragment6, { children: [
           /* @__PURE__ */ jsx15("div", { className: "left-panel__actions-label", children: "Actions" }),
-          /* @__PURE__ */ jsx15("div", { className: "left-panel__actions-list", children: objectToRender.actions.map((action) => {
+          /* @__PURE__ */ jsx15("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__ */ jsxs11(Fragment5, { children: [
-              /* @__PURE__ */ jsx15(
-                "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__ */ jsx15(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__ */ jsxs11(Fragment5, { children: [
+                /* @__PURE__ */ jsx15(
+                  "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__ */ jsx15(ActionExtra, { content: extra })
+              ] }, index)
+            );
           }) })
         ] })
       ] })
@@ -8284,7 +8289,7 @@ function ModelViewer({
 }
 
 // src/components/BindingBuilder/BindingBuilder.tsx
-import { useCallback as useCallback9, useEffect as useEffect20, useMemo as useMemo16, useRef as useRef18, useState as useState25 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect21, useMemo as useMemo16, useRef as useRef18, useState as useState26 } from "react";
 import {
   Redo2,
   Undo2,
@@ -8295,7 +8300,7 @@ import {
 } from "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
 import { useCallback as useCallback5, useRef as useRef12, useState as useState11 } from "react";
@@ -11795,7 +11800,7 @@ function LightingTab({ config, onChange }) {
               {
                 className: "se-segmentedControl",
                 style: { gridAutoColumns: "1fr" },
-                children: ["shadowCatcher", "bakedAO"].map((m) => /* @__PURE__ */ jsx28(
+                children: ["shadowCatcher"].map((m) => /* @__PURE__ */ jsx28(
                   "button",
                   {
                     type: "button",
@@ -14538,7 +14543,98 @@ function BasicsPanel({
 }
 
 // src/components/BindingBuilder/components/ActionsPanel.tsx
-import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useEffect as useEffect20, useState as useState24 } from "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
+import { Fragment as Fragment12, jsx as jsx41, jsxs as jsxs36 } from "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,
@@ -14546,85 +14642,183 @@ function ActionsPanel({
   onToggle,
   updateBinding
 }) {
+  const [customRows, setCustomRows] = useState24(/* @__PURE__ */ new Set());
+  useEffect20(() => {
+    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__ */ jsxs36(BBSection, { title: "Actions", open, onToggle, children: [
-    /* @__PURE__ */ jsx41("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__ */ jsxs36("div", { className: "bb-actionCard", children: [
-        /* @__PURE__ */ jsxs36("div", { className: "bb-actionCardHeader", children: [
-          /* @__PURE__ */ jsxs36("div", { className: "bb-actionCardTitle", children: [
-            "Action ",
-            index + 1
-          ] }),
-          /* @__PURE__ */ jsx41("div", { className: "bb-actionCardMeta", children: action.type })
-        ] }),
-        /* @__PURE__ */ jsxs36("div", { className: "bb-actionGrid", children: [
-          /* @__PURE__ */ jsxs36("div", { className: "bb-field", children: [
-            /* @__PURE__ */ jsx41("label", { className: "bb-label", children: "Action ID" }),
-            /* @__PURE__ */ jsx41(
-              "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__ */ jsx41("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__ */ jsxs36("div", { className: "bb-actionCard", children: [
+          /* @__PURE__ */ jsxs36("div", { className: "bb-actionCardHeader", children: [
+            /* @__PURE__ */ jsxs36("div", { className: "bb-actionCardTitle", children: [
+              "Action ",
+              index + 1
+            ] }),
+            /* @__PURE__ */ jsx41("div", { className: "bb-actionCardMeta", children: action.type })
           ] }),
-          /* @__PURE__ */ jsxs36("div", { className: "bb-field", children: [
-            /* @__PURE__ */ jsx41("label", { className: "bb-label", children: "Label" }),
-            /* @__PURE__ */ jsx41(
-              "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__ */ jsx41("div", { className: "bb-actionFooter", children: /* @__PURE__ */ jsx41(
-          "button",
-          {
-            type: "button",
-            className: "bb-button bb-button--ghost bb-actionRemove",
-            onClick: () => updateBinding(selectedItem, (binding) => ({
-              ...binding,
-              actions: (binding.actions ?? []).filter(
-                (_, entryIndex) => entryIndex !== index
+          /* @__PURE__ */ jsxs36("div", { className: "bb-actionGrid", children: [
+            /* @__PURE__ */ jsxs36("div", { className: "bb-field", children: [
+              /* @__PURE__ */ jsx41("label", { className: "bb-label", children: "Action ID" }),
+              /* @__PURE__ */ jsxs36(
+                "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__ */ jsx41("optgroup", { label: "Handled by the viewer", children: VIEWER_ACTIONS.map((entry) => /* @__PURE__ */ jsx41("option", { value: entry.id, children: entry.id }, entry.id)) }),
+                    /* @__PURE__ */ jsx41("optgroup", { label: "Handled by your app", children: HOST_ACTIONS.map((entry) => /* @__PURE__ */ jsx41("option", { value: entry.id, children: entry.id }, entry.id)) }),
+                    /* @__PURE__ */ jsx41("option", { value: CUSTOM_ACTION_ID, children: "Custom\u2026" })
+                  ]
+                }
               )
-            })),
-            children: "Remove Action"
-          }
-        ) })
-      ] }, index)
-    )) }),
+            ] }),
+            isCustom ? /* @__PURE__ */ jsxs36("div", { className: "bb-field", children: [
+              /* @__PURE__ */ jsx41("label", { className: "bb-label", children: "Custom action ID" }),
+              /* @__PURE__ */ jsx41(
+                "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__ */ jsxs36("div", { className: "bb-field", children: [
+              /* @__PURE__ */ jsx41("label", { className: "bb-label", children: "Label" }),
+              /* @__PURE__ */ jsx41(
+                "input",
+                {
+                  className: "bb-input",
+                  value: action.label,
+                  onChange: (event) => updateAction(index, (entry) => ({
+                    ...entry,
+                    label: event.target.value
+                  }))
+                }
+              )
+            ] }),
+            catalogEntry ? /* @__PURE__ */ jsx41("span", { className: "bb-note", children: catalogEntry.description }) : trimmedId.length === 0 ? /* @__PURE__ */ jsx41("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__ */ jsxs36("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__ */ jsxs36(Fragment12, { children: [
+                " Did you mean ",
+                /* @__PURE__ */ jsx41(
+                  "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__ */ jsx41("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__ */ jsx41("div", { className: "bb-actionFooter", children: /* @__PURE__ */ jsx41(
+            "button",
+            {
+              type: "button",
+              className: "bb-button bb-button--ghost bb-actionRemove",
+              onClick: () => removeAction(index),
+              children: "Remove Action"
+            }
+          ) })
+        ] }, index)
+      );
+    }) }),
     /* @__PURE__ */ jsx41("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ jsx41(
       "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"
       }
     ) })
@@ -14633,7 +14827,7 @@ function ActionsPanel({
 
 // src/components/BindingBuilder/components/CameraPositionPanel.tsx
 import { MapPin as MapPin3, Trash2 as Trash25 } from "lucide-react";
-import { Fragment as Fragment12, jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
 function CameraPositionPanel({
   selectedBinding,
   open,
@@ -14652,7 +14846,7 @@ function CameraPositionPanel({
       /* @__PURE__ */ jsx42("span", { className: "bb-cameraLiveBadge", children: "LIVE" }),
       /* @__PURE__ */ jsxs37("div", { className: "se-waypointBody", children: [
         /* @__PURE__ */ jsx42("div", { className: "bb-cameraWaypointLabel", children: "Current view" }),
-        cameraState ? /* @__PURE__ */ jsxs37(Fragment12, { children: [
+        cameraState ? /* @__PURE__ */ jsxs37(Fragment13, { children: [
           /* @__PURE__ */ jsxs37("div", { className: "se-waypointCoords", children: [
             "pos ",
             formattedCameraState?.position
@@ -14738,7 +14932,7 @@ function CameraPositionPanel({
 }
 
 // src/components/BindingBuilder/components/SceneNodesPanel.tsx
-import { useMemo as useMemo15, useState as useState24 } from "react";
+import { useMemo as useMemo15, useState as useState25 } from "react";
 
 // src/components/BindingBuilder/utils/bindingFactory.ts
 function slugify2(value) {
@@ -14818,7 +15012,7 @@ function collectNodeNames(scene) {
 }
 
 // src/components/BindingBuilder/components/SceneNodesPanel.tsx
-import { Fragment as Fragment13, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
 function SceneNodesPanel({
   bindings,
   selectedItem,
@@ -14827,7 +15021,7 @@ function SceneNodesPanel({
   isOpen = true,
   onToggle
 }) {
-  const [search, setSearch] = useState24("");
+  const [search, setSearch] = useState25("");
   const nodeKeys = useMemo15(() => Object.keys(bindings), [bindings]);
   const filteredNodeKeys = useMemo15(() => {
     const query = search.trim().toLowerCase();
@@ -14854,7 +15048,7 @@ function SceneNodesPanel({
               children: "\u2190"
             }
           ),
-          isOpen && /* @__PURE__ */ jsxs38(Fragment13, { children: [
+          isOpen && /* @__PURE__ */ jsxs38(Fragment14, { children: [
             /* @__PURE__ */ jsxs38("div", { children: [
               /* @__PURE__ */ jsx43("div", { className: "bb-sectionKicker", children: "Scene Nodes" }),
               /* @__PURE__ */ jsxs38("div", { className: "bb-sectionHeading", children: [
@@ -15263,7 +15457,7 @@ function removeMaterialPanelFields(material2, panel) {
 }
 
 // src/components/BindingBuilder/BindingBuilder.tsx
-import { Fragment as Fragment14, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
 var DEMO_MODEL_URL = "/room.glb";
 function isPlainObject(value) {
   return value !== null && typeof value === "object" && !Array.isArray(value);
@@ -15283,36 +15477,36 @@ function BindingBuilder({ licenseKey }) {
   const modelInputRef = useRef18(null);
   const bindingsInputRef = useRef18(null);
   const sceneConfigInputRef = useRef18(null);
-  const [modelUrl, setModelUrl] = useState25(null);
-  const [modelName, setModelName] = useState25("");
-  const [selectedItem, setSelectedItem] = useState25(null);
+  const [modelUrl, setModelUrl] = useState26(null);
+  const [modelName, setModelName] = useState26("");
+  const [selectedItem, setSelectedItem] = useState26(null);
   const bindingsHistory = useUndoableState({});
   const bindings = bindingsHistory.value;
   const setBindings = bindingsHistory.setValue;
-  const [loading, setLoading] = useState25(false);
-  const [isExporting, setIsExporting] = useState25(false);
-  const [statusMessage, setStatusMessage] = useState25(
+  const [loading, setLoading] = useState26(false);
+  const [isExporting, setIsExporting] = useState26(false);
+  const [statusMessage, setStatusMessage] = useState26(
     "Load the demo model or upload a GLB/GLTF model to generate bindings."
   );
-  const [statusTone, setStatusTone] = useState25("default");
-  const [statusBannerVisible, setStatusBannerVisible] = useState25(false);
-  const [metricsDraft, setMetricsDraft] = useState25("{}");
-  const [metadataDraft, setMetadataDraft] = useState25("{}");
-  const [metricsError, setMetricsError] = useState25(null);
-  const [metadataError, setMetadataError] = useState25(null);
-  const [isPreviewDragActive, setIsPreviewDragActive] = useState25(false);
-  const [isEditorCollapsed, setIsEditorCollapsed] = useState25(false);
-  const [isNodesCollapsed, setIsNodesCollapsed] = useState25(false);
-  const [openObjectSections, setOpenObjectSections] = useState25({
+  const [statusTone, setStatusTone] = useState26("default");
+  const [statusBannerVisible, setStatusBannerVisible] = useState26(false);
+  const [metricsDraft, setMetricsDraft] = useState26("{}");
+  const [metadataDraft, setMetadataDraft] = useState26("{}");
+  const [metricsError, setMetricsError] = useState26(null);
+  const [metadataError, setMetadataError] = useState26(null);
+  const [isPreviewDragActive, setIsPreviewDragActive] = useState26(false);
+  const [isEditorCollapsed, setIsEditorCollapsed] = useState26(false);
+  const [isNodesCollapsed, setIsNodesCollapsed] = useState26(false);
+  const [openObjectSections, setOpenObjectSections] = useState26({
     identity: true,
     basics: true,
-    material: true,
+    material: false,
     actions: false,
     camera: false,
     metrics: false,
     metadata: false
   });
-  const [openMaterialPanels, setOpenMaterialPanels] = useState25({
+  const [openMaterialPanels, setOpenMaterialPanels] = useState26({
     pbr: true,
     roughness: false,
     emission: false,
@@ -15328,24 +15522,24 @@ function BindingBuilder({ licenseKey }) {
   });
   const toggleObjectSection = (key) => setOpenObjectSections((prev) => ({ ...prev, [key]: !prev[key] }));
   const toggleMaterialPanel = (key) => setOpenMaterialPanels((prev) => ({ ...prev, [key]: !prev[key] }));
-  const [activeEditorTab, setActiveEditorTab] = useState25(
+  const [activeEditorTab, setActiveEditorTab] = useState26(
     "object"
   );
-  const [activeSubTab, setActiveSubTab] = useState25("General");
-  const [pbrWorkflow, setPbrWorkflow] = useState25("metalness");
-  const [materialPanelEnabled, setMaterialPanelEnabled] = useState25(createMaterialPanelEnabledState());
+  const [activeSubTab, setActiveSubTab] = useState26("General");
+  const [pbrWorkflow, setPbrWorkflow] = useState26("metalness");
+  const [materialPanelEnabled, setMaterialPanelEnabled] = useState26(createMaterialPanelEnabledState());
   const materialPanelItemRef = useRef18(null);
-  const [zoomOnSelected, setZoomOnSelected] = useState25(false);
-  const [highlightOnHover, setHighlightOnHover] = useState25(true);
-  const [resetDialogOpen, setResetDialogOpen] = useState25(false);
-  const [resetTarget, setResetTarget] = useState25(
+  const [zoomOnSelected, setZoomOnSelected] = useState26(false);
+  const [highlightOnHover, setHighlightOnHover] = useState26(true);
+  const [resetDialogOpen, setResetDialogOpen] = useState26(false);
+  const [resetTarget, setResetTarget] = useState26(
     null
   );
   const sceneConfigHistory = useUndoableState(DEFAULT_SCENE_CONFIG);
   const sceneConfig = sceneConfigHistory.value;
   const setSceneConfig = sceneConfigHistory.setValue;
-  const [activeAnnotation, setActiveAnnotation] = useState25(null);
-  const [panelHoveredBinding, setPanelHoveredBinding] = useState25(null);
+  const [activeAnnotation, setActiveAnnotation] = useState26(null);
+  const [panelHoveredBinding, setPanelHoveredBinding] = useState26(null);
   const license = useLicense(licenseKey);
   const tier = normalizeTier(license.tier);
   const bindingBuilderContextValue = useMemo16(
@@ -15421,7 +15615,7 @@ function BindingBuilder({ licenseKey }) {
     },
     []
   );
-  useEffect20(() => {
+  useEffect21(() => {
     if (!selectedBinding) {
       setMetricsDraft("{}");
       setMetadataDraft("{}");
@@ -15434,7 +15628,7 @@ function BindingBuilder({ licenseKey }) {
     setMetricsError(null);
     setMetadataError(null);
   }, [selectedBinding]);
-  useEffect20(() => {
+  useEffect21(() => {
     const derived = createMaterialPanelEnabledState(selectedMaterial);
     if (materialPanelItemRef.current !== selectedItem) {
       materialPanelItemRef.current = selectedItem;
@@ -15453,12 +15647,12 @@ function BindingBuilder({ licenseKey }) {
       return changed ? next : prev;
     });
   }, [selectedItem, selectedMaterial]);
-  useEffect20(() => {
+  useEffect21(() => {
     return () => {
       uploadedModelRef.current?.cleanup();
     };
   }, []);
-  useEffect20(() => {
+  useEffect21(() => {
     const handleKeyDown = (event) => {
       if (event.key.toLowerCase() !== "z" || !(event.metaKey || event.ctrlKey)) {
         return;
@@ -15479,7 +15673,7 @@ function BindingBuilder({ licenseKey }) {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [activeEditorTab, bindingsHistory, sceneConfigHistory]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (loading || statusTone === "default" || statusTone === "success") return;
     setStatusBannerVisible(true);
     const timeout = window.setTimeout(
@@ -16059,7 +16253,7 @@ function BindingBuilder({ licenseKey }) {
                 }
               )
             ] }),
-            !isEditorCollapsed && /* @__PURE__ */ jsxs40(Fragment14, { children: [
+            !isEditorCollapsed && /* @__PURE__ */ jsxs40(Fragment15, { children: [
               /* @__PURE__ */ jsxs40("div", { className: "bb-tabRow", children: [
                 /* @__PURE__ */ jsx45(
                   "button",
@@ -16080,7 +16274,7 @@ function BindingBuilder({ licenseKey }) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx45("section", { className: "bb-editor", children: activeEditorTab === "scene" ? /* @__PURE__ */ jsx45(Fragment14, { children: modelUrl ? /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx45("section", { className: "bb-editor", children: activeEditorTab === "scene" ? /* @__PURE__ */ jsx45(Fragment15, { children: modelUrl ? /* @__PURE__ */ jsx45(
                 SceneSettingsTab,
                 {
                   config: sceneConfig,
@@ -16102,7 +16296,7 @@ function BindingBuilder({ licenseKey }) {
                   animationClipDetails: viewerAnimations.clipDetails,
                   animationPlayback: viewerAnimations
                 }
-              ) : /* @__PURE__ */ jsx45("div", { className: "bb-emptyEditor", children: "Upload a model to edit its scene settings." }) }) : !selectedBinding || !selectedItem ? /* @__PURE__ */ jsx45("div", { className: "bb-emptyEditor", children: "Select a generated node binding to edit its values." }) : /* @__PURE__ */ jsxs40(Fragment14, { children: [
+              ) : /* @__PURE__ */ jsx45("div", { className: "bb-emptyEditor", children: "Upload a model to edit its scene settings." }) }) : !selectedBinding || !selectedItem ? /* @__PURE__ */ jsx45("div", { className: "bb-emptyEditor", children: "Select a generated node binding to edit its values." }) : /* @__PURE__ */ jsxs40(Fragment15, { children: [
                 /* @__PURE__ */ jsx45("div", { className: "bb-editorHeader", children: /* @__PURE__ */ jsxs40("div", { children: [
                   /* @__PURE__ */ jsx45("div", { className: "bb-sectionKicker", children: "Editing Binding" }),
                   /* @__PURE__ */ jsx45("h2", { className: "bb-editorTitle", children: selectedBinding.label || selectedItem }),
@@ -16522,9 +16716,9 @@ function BindingBuilder({ licenseKey }) {
 // src/components/SimpleModelViewer/SimpleModelViewer.tsx
 import {
   useRef as useRef19,
-  useState as useState26,
+  useState as useState27,
   useCallback as useCallback10,
-  useEffect as useEffect21,
+  useEffect as useEffect22,
   useMemo as useMemo17,
   Component as Component3,
   Suspense as Suspense3
@@ -16553,7 +16747,7 @@ import {
   Upload as Upload2,
   AlertTriangle as AlertTriangle4
 } from "lucide-react";
-import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
 var HIGHLIGHT2 = { color: "#93c5fd", intensity: 0.05 };
 var ENV_PRESETS = [
   "apartment",
@@ -16613,7 +16807,7 @@ function InnerModel({
     meshopt: true
   });
   const invalidate = useThree11((state) => state.invalidate);
-  const [hoveredKey, setHoveredKey] = useState26(null);
+  const [hoveredKey, setHoveredKey] = useState27(null);
   const scene = useMemo17(
     () => SkeletonUtils2.clone(rawScene),
     [rawScene]
@@ -16643,14 +16837,14 @@ function InnerModel({
     }
     return map;
   }, [meshMap]);
-  useEffect21(
+  useEffect22(
     () => () => {
       Object.values(perKeyMaterials).forEach((m) => m.dispose());
     },
     [perKeyMaterials]
   );
   const notifiedUrl = useRef19(null);
-  useEffect21(() => {
+  useEffect22(() => {
     if (notifiedUrl.current === url) return;
     notifiedUrl.current = url;
     scene.updateWorldMatrix(true, true);
@@ -16658,7 +16852,7 @@ function InnerModel({
     onMeshesReady(meshMap);
     onModelLoaded(scene);
   }, [url, scene, meshMap, onMeshesReady, onModelLoaded]);
-  useEffect21(() => {
+  useEffect22(() => {
     const controller = new AbortController();
     void buildSceneBVH(scene, controller.signal);
     return () => {
@@ -16670,22 +16864,22 @@ function InnerModel({
     () => !exceedsBvhBudget(scene),
     [scene]
   );
-  useEffect21(() => {
+  useEffect22(() => {
     for (const [key, { ref }] of Object.entries(meshMap)) {
       nodeRefsOut.current[key] = ref;
     }
   }, [meshMap, nodeRefsOut]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!highlightOnHover && hoveredKey !== null) {
       setHoveredKey(null);
     }
   }, [highlightOnHover, hoveredKey]);
-  useEffect21(() => {
+  useEffect22(() => {
     return () => {
       document.body.style.cursor = "default";
     };
   }, []);
-  useEffect21(() => {
+  useEffect22(() => {
     for (const [key, { ref }] of Object.entries(meshMap)) {
       ref.visible = !hiddenKeys.has(key);
       const mat = perKeyMaterials[key];
@@ -16759,7 +16953,7 @@ function CameraFitter({
   const invalidate = useThree11((state) => state.invalidate);
   const size = useThree11((state) => state.size);
   const resizeTimerRef = useRef19(null);
-  useEffect21(() => {
+  useEffect22(() => {
     fitted.current = false;
     invalidate();
   }, [invalidate, scene]);
@@ -16779,7 +16973,7 @@ function CameraFitter({
     }).catch(() => {
     }).finally(onInitialFitComplete);
   });
-  useEffect21(() => {
+  useEffect22(() => {
     if (!refitOnResize || !fitted.current || !scene || !controlsRef.current) {
       return;
     }
@@ -16807,7 +17001,7 @@ function CameraFitter({
 function ExposureController({ exposure }) {
   const gl = useThree11((state) => state.gl);
   const invalidate = useThree11((state) => state.invalidate);
-  useEffect21(() => {
+  useEffect22(() => {
     gl.toneMappingExposure = exposure;
     invalidate();
   }, [gl, exposure, invalidate]);
@@ -16915,7 +17109,7 @@ function EnvironmentSection({
   title,
   children
 }) {
-  const [collapsed, setCollapsed] = useState26(false);
+  const [collapsed, setCollapsed] = useState27(false);
   return /* @__PURE__ */ jsxs41("div", { className: "env-section", children: [
     /* @__PURE__ */ jsxs41(
       "button",
@@ -17080,8 +17274,8 @@ function SceneObjectsPanel2({
   onHover,
   onToggleVisibility
 }) {
-  const [search, setSearch] = useState26("");
-  const [rowHovered, setRowHovered] = useState26(null);
+  const [search, setSearch] = useState27("");
+  const [rowHovered, setRowHovered] = useState27(null);
   const entries = Object.values(meshKeys).filter(
     (m) => m.label.toLowerCase().includes(search.toLowerCase())
   );
@@ -17210,30 +17404,30 @@ function SimpleModelViewer({
   const fileInputRef = useRef19(null);
   const uploadedModelRef = useRef19(null);
   const dragDepthRef = useRef19(0);
-  const [loadedScene, setLoadedScene] = useState26(null);
-  const [largeModelTriangles, setLargeModelTriangles] = useState26(
+  const [loadedScene, setLoadedScene] = useState27(null);
+  const [largeModelTriangles, setLargeModelTriangles] = useState27(
     null
   );
-  const [largeModelNoticeDismissed, setLargeModelNoticeDismissed] = useState26(false);
-  const [meshKeys, setMeshKeys] = useState26({});
-  const [hiddenKeys, setHiddenKeys] = useState26(/* @__PURE__ */ new Set());
-  const [selectedKey, setSelectedKey] = useState26(null);
-  const [panelHoveredKey, setPanelHoveredKey] = useState26(null);
-  const [uploadedModelUrl, setUploadedModelUrl] = useState26(null);
-  const [uploadedModelName, setUploadedModelName] = useState26(
+  const [largeModelNoticeDismissed, setLargeModelNoticeDismissed] = useState27(false);
+  const [meshKeys, setMeshKeys] = useState27({});
+  const [hiddenKeys, setHiddenKeys] = useState27(/* @__PURE__ */ new Set());
+  const [selectedKey, setSelectedKey] = useState27(null);
+  const [panelHoveredKey, setPanelHoveredKey] = useState27(null);
+  const [uploadedModelUrl, setUploadedModelUrl] = useState27(null);
+  const [uploadedModelName, setUploadedModelName] = useState27(
     null
   );
-  const [modelLoadFailed, setModelLoadFailed] = useState26(false);
-  const [isResolvingUpload, setIsResolvingUpload] = useState26(false);
-  const [initialFitComplete, setInitialFitComplete] = useState26(false);
-  const [isDragActive, setIsDragActive] = useState26(false);
-  const [isPanelOpen, setIsPanelOpen] = useState26(
+  const [modelLoadFailed, setModelLoadFailed] = useState27(false);
+  const [isResolvingUpload, setIsResolvingUpload] = useState27(false);
+  const [initialFitComplete, setInitialFitComplete] = useState27(false);
+  const [isDragActive, setIsDragActive] = useState27(false);
+  const [isPanelOpen, setIsPanelOpen] = useState27(
     () => typeof window === "undefined" ? true : window.innerWidth > 900
   );
-  const [isEnvPanelOpen, setIsEnvPanelOpen] = useState26(
+  const [isEnvPanelOpen, setIsEnvPanelOpen] = useState27(
     () => typeof window === "undefined" ? true : window.innerWidth > 900
   );
-  const [envSettings, setEnvSettings] = useState26({
+  const [envSettings, setEnvSettings] = useState27({
     backgroundEnabled,
     backgroundColor,
     autoRotate,
@@ -17316,7 +17510,7 @@ function SimpleModelViewer({
     },
     [handleUploadedModel]
   );
-  useEffect21(() => {
+  useEffect22(() => {
     return () => {
       revokeUploadedModelUrl();
     };
@@ -17327,10 +17521,10 @@ function SimpleModelViewer({
     },
     []
   );
-  useEffect21(() => {
+  useEffect22(() => {
     setEnvSettings((prev) => ({ ...prev, backgroundColor }));
   }, [backgroundColor]);
-  useEffect21(() => {
+  useEffect22(() => {
     resetModelState();
   }, [activeModelUrl, resetModelState]);
   const handleMeshesReady = useCallback10((meshes) => {
@@ -17471,7 +17665,7 @@ function SimpleModelViewer({
               }
             )
           ] }),
-          enableModelUpload ? /* @__PURE__ */ jsxs41(Fragment15, { children: [
+          enableModelUpload ? /* @__PURE__ */ jsxs41(Fragment16, { children: [
             /* @__PURE__ */ jsx46(
               "input",
               {
@@ -17485,7 +17679,7 @@ function SimpleModelViewer({
                 }
               }
             ),
-            activeModelUrl ? /* @__PURE__ */ jsx46("div", { className: "smv-upload-toolbar", children: /* @__PURE__ */ jsxs41(Fragment15, { children: [
+            activeModelUrl ? /* @__PURE__ */ jsx46("div", { className: "smv-upload-toolbar", children: /* @__PURE__ */ jsxs41(Fragment16, { children: [
               /* @__PURE__ */ jsx46("span", { className: "smv-upload-toolbar__name", children: uploadedModelName ?? "Uploaded model" }),
               /* @__PURE__ */ jsxs41(
                 "button",
@@ -17646,9 +17840,9 @@ function SimpleModelViewer({
 }
 
 // src/hooks/useViewerSelection.ts
-import { useCallback as useCallback11, useState as useState27 } from "react";
+import { useCallback as useCallback11, useState as useState28 } from "react";
 function useViewerSelection(initialSelectedObjectBinding = null) {
-  const [selectedObjectBinding, setSelectedObjectBinding] = useState27(
+  const [selectedObjectBinding, setSelectedObjectBinding] = useState28(
     initialSelectedObjectBinding
   );
   const handleObjectSelect = useCallback11(
@@ -17695,17 +17889,14 @@ function useObjectBindingIds(objectBindings) {
 }
 
 // src/hooks/useObjectBindings.ts
-import { useCallback as useCallback12, useMemo as useMemo20, useState as useState28 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo20, useState as useState29 } from "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 } : {};
@@ -17715,6 +17906,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;
@@ -17743,8 +17939,8 @@ function getHiddenObjects(objectBindings) {
   );
 }
 function useObjectBindings(initialBindings) {
-  const [objectBindings, setObjectBindings] = useState28(initialBindings);
-  const patch = useCallback12(
+  const [objectBindings, setObjectBindings] = useState29(initialBindings);
+  const updateObjectBindings = useCallback12(
     (objectIdOrEdits, patchValue) => {
       setObjectBindings(
         (current) => patchValue === void 0 ? patchBindings(current, objectIdOrEdits) : patchBindings(
@@ -17757,16 +17953,16 @@ function useObjectBindings(initialBindings) {
     []
   );
   const setMaterial = useCallback12(
-    (objectId, value) => patch(objectId, material(value)),
-    [patch]
+    (objectId, value) => updateObjectBindings(objectId, material(value)),
+    [updateObjectBindings]
   );
   const setBaseColor = useCallback12(
     (objectId, color) => setMaterial(objectId, { baseColor: color }),
     [setMaterial]
   );
   const resetMaterial = useCallback12(
-    (objectId) => patch(objectId, { style: { material: void 0 } }),
-    [patch]
+    (objectId) => updateObjectBindings(objectId, { style: { material: void 0 } }),
+    [updateObjectBindings]
   );
   const getMaterial = useCallback12(
     (objectId) => {
@@ -17776,12 +17972,12 @@ function useObjectBindings(initialBindings) {
     [objectBindings]
   );
   const hideObject = useCallback12(
-    (objectId) => patch(objectId, { visible: false }),
-    [patch]
+    (objectId) => updateObjectBindings(objectId, { visible: false }),
+    [updateObjectBindings]
   );
   const showObject = useCallback12(
-    (objectId) => patch(objectId, { visible: true }),
-    [patch]
+    (objectId) => updateObjectBindings(objectId, { visible: true }),
+    [updateObjectBindings]
   );
   const toggleObjectVisibility = useCallback12(
     (objectId) => {
@@ -17827,7 +18023,7 @@ function useObjectBindings(initialBindings) {
   return {
     objectBindings,
     setObjectBindings,
-    patch,
+    updateObjectBindings,
     setMaterial,
     setBaseColor,
     resetMaterial,
@@ -17842,11 +18038,45 @@ function useObjectBindings(initialBindings) {
   };
 }
 
+// src/hooks/useSceneConfig.ts
+import { useCallback as useCallback13, useRef as useRef20, useState as useState30 } from "react";
+
+// src/utils/patchSceneConfig.ts
+function patchSceneConfig(sceneConfig, patch) {
+  return deepMerge(sceneConfig, patch);
+}
+
+// src/hooks/useSceneConfig.ts
+function useSceneConfig(initialSceneConfig) {
+  const initialSceneConfigRef = useRef20(null);
+  const [sceneConfig, setSceneConfig] = useState30(() => {
+    const initial = typeof initialSceneConfig === "function" ? initialSceneConfig() : initialSceneConfig;
+    initialSceneConfigRef.current = initial;
+    return initial;
+  });
+  const updateSceneConfig = useCallback13((update) => {
+    setSceneConfig((current) => {
+      const patch = typeof update === "function" ? update(current) : update;
+      return patchSceneConfig(current, patch);
+    });
+  }, []);
+  const resetSceneConfig = useCallback13(() => {
+    const initial = initialSceneConfigRef.current;
+    if (initial) setSceneConfig(initial);
+  }, []);
+  return {
+    sceneConfig,
+    setSceneConfig,
+    updateSceneConfig,
+    resetSceneConfig
+  };
+}
+
 // src/hooks/useViewerHover.ts
-import { useCallback as useCallback13, useState as useState29 } from "react";
+import { useCallback as useCallback14, useState as useState31 } from "react";
 function useViewerHover() {
-  const [hoveredObjectBinding, setHoveredObjectBinding] = useState29(null);
-  const handleHoveredObject = useCallback13(
+  const [hoveredObjectBinding, setHoveredObjectBinding] = useState31(null);
+  const handleHoveredObject = useCallback14(
     (binding) => {
       setHoveredObjectBinding(binding);
     },
@@ -17859,18 +18089,18 @@ function useViewerHover() {
 }
 
 // src/hooks/useViewerModel.ts
-import { useCallback as useCallback14, useState as useState30 } from "react";
+import { useCallback as useCallback15, useState as useState32 } from "react";
 import { Box3 as Box36, Vector3 as Vector310 } from "three";
 function toTuple2(vector) {
   return [vector.x, vector.y, vector.z];
 }
 function useViewerModel() {
-  const [isLoading, setIsLoading] = useState30(true);
-  const [isReady, setIsReady] = useState30(false);
-  const [error, setError] = useState30(null);
-  const [bounds, setBounds] = useState30(null);
-  const [objectCount, setObjectCount] = useState30(0);
-  const handleModelLoaded = useCallback14((scene) => {
+  const [isLoading, setIsLoading] = useState32(true);
+  const [isReady, setIsReady] = useState32(false);
+  const [error, setError] = useState32(null);
+  const [bounds, setBounds] = useState32(null);
+  const [objectCount, setObjectCount] = useState32(0);
+  const handleModelLoaded = useCallback15((scene) => {
     const box = new Box36().setFromObject(scene);
     const min = box.min.clone();
     const max = box.max.clone();
@@ -17895,14 +18125,14 @@ function useViewerModel() {
     setIsLoading(false);
     setIsReady(true);
   }, []);
-  const handleLoadError = useCallback14((nextError) => {
+  const handleLoadError = useCallback15((nextError) => {
     setError(nextError);
     setBounds(null);
     setObjectCount(0);
     setIsLoading(false);
     setIsReady(false);
   }, []);
-  const resetModelState = useCallback14(() => {
+  const resetModelState = useCallback15(() => {
     setIsLoading(true);
     setIsReady(false);
     setError(null);
@@ -17922,10 +18152,10 @@ function useViewerModel() {
 }
 
 // src/hooks/useViewerActions.ts
-import { useCallback as useCallback15 } from "react";
+import { useCallback as useCallback16 } from "react";
 function useViewerActions(objectBindings, options = {}) {
   const { onAction, onObjectBindingsChange } = options;
-  const getActionsForObject = useCallback15(
+  const getActionsForObject = useCallback16(
     (objectId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       if (!bindingKey) {
@@ -17935,7 +18165,7 @@ function useViewerActions(objectBindings, options = {}) {
     },
     [objectBindings]
   );
-  const runAction = useCallback15(
+  const runAction = useCallback16(
     (objectId, actionId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       if (!bindingKey) {
@@ -17977,7 +18207,7 @@ function useViewerActions(objectBindings, options = {}) {
 }
 
 // src/hooks/useShareableViewerState.ts
-import { useCallback as useCallback16, useEffect as useEffect22, useRef as useRef20, useState as useState31 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect23, useRef as useRef21, useState as useState33 } from "react";
 function serializeState(cameraState, objectBindings, selectedObjectBinding) {
   const hidden = Object.values(objectBindings).filter((binding) => binding.visible === false).map((binding) => binding.id);
   return {
@@ -17997,8 +18227,8 @@ function useShareableViewerState({
   debounceMs = 400,
   autoSync = true
 }) {
-  const lastWrittenRawRef = useRef20(null);
-  const buildHash = useCallback16(() => {
+  const lastWrittenRawRef = useRef21(null);
+  const buildHash = useCallback17(() => {
     const state = serializeState(
       cameraState,
       objectBindings,
@@ -18006,12 +18236,12 @@ function useShareableViewerState({
     );
     return `${paramKey}=${encodeURIComponent(JSON.stringify(state))}`;
   }, [cameraState, objectBindings, selectedObjectBinding, paramKey]);
-  const getShareUrl = useCallback16(() => {
+  const getShareUrl = useCallback17(() => {
     const url = new URL(window.location.href);
     url.hash = buildHash();
     return url.toString();
   }, [buildHash]);
-  const syncUrl = useCallback16(() => {
+  const syncUrl = useCallback17(() => {
     const url = new URL(window.location.href);
     url.hash = buildHash();
     window.history.replaceState(null, "", url.toString());
@@ -18019,7 +18249,7 @@ function useShareableViewerState({
       paramKey
     );
   }, [buildHash, paramKey]);
-  const latestStateRef = useRef20({
+  const latestStateRef = useRef21({
     cameraState,
     objectBindings,
     selectedObjectBinding
@@ -18029,9 +18259,9 @@ function useShareableViewerState({
     objectBindings,
     selectedObjectBinding
   };
-  const [restoreAttempted, setRestoreAttempted] = useState31(false);
-  const lastSyncedHashRef = useRef20(null);
-  useEffect22(() => {
+  const [restoreAttempted, setRestoreAttempted] = useState33(false);
+  const lastSyncedHashRef = useRef21(null);
+  useEffect23(() => {
     if (!autoSync || !restoreAttempted) return;
     const tick = () => {
       const current = latestStateRef.current;
@@ -18053,9 +18283,9 @@ function useShareableViewerState({
     const id = window.setInterval(tick, debounceMs);
     return () => window.clearInterval(id);
   }, [autoSync, restoreAttempted, debounceMs, paramKey]);
-  const lastRestoredRawRef = useRef20(null);
-  const restoringRawRef = useRef20(null);
-  const restoreFromUrl = useCallback16(async () => {
+  const lastRestoredRawRef = useRef21(null);
+  const restoringRawRef = useRef21(null);
+  const restoreFromUrl = useCallback17(async () => {
     setRestoreAttempted(true);
     const rawHash = window.location.hash.startsWith("#") ? window.location.hash.slice(1) : window.location.hash;
     const raw = new URLSearchParams(rawHash).get(paramKey);
@@ -18108,7 +18338,7 @@ function useShareableViewerState({
     setCameraState,
     setSelectedObjectBinding
   ]);
-  useEffect22(() => {
+  useEffect23(() => {
     const handleHashChange = () => {
       void restoreFromUrl();
     };
@@ -18127,9 +18357,11 @@ export {
   SimpleModelViewer,
   material,
   patchBindings,
+  patchSceneConfig,
   useObjectBinding,
   useObjectBindingIds,
   useObjectBindings,
+  useSceneConfig,
   useShareableViewerState,
   useViewerActions,
   useViewerAnimations,