npm - @industry-theme/principal-view-panels - Versions diffs - 0.12.93 → 0.12.95 - Mend

@industry-theme/principal-view-panels 0.12.93 → 0.12.95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/demo/components/ReadingRoom/ReadingRoom.d.ts.map +1 -1
package/dist/demo/data/types.d.ts +2 -5
package/dist/demo/data/types.d.ts.map +1 -1
package/dist/mocks/vvfConfigs.d.ts.map +1 -1
package/dist/panels/DashboardPanel.d.ts.map +1 -1
package/dist/panels.bundle.js +586 -63
package/dist/panels.bundle.js.map +1 -1
package/package.json +4 -4

package/dist/panels.bundle.js CHANGED Viewed

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode('/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n}\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow__edges {\n  position: absolute;\n}\n.react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.center {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 4px;\n  height: 4px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  transform: translate(-50%, -50%);\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n.animated-resizable-layout{flex:1;min-height:0;height:100%;width:100%;position:relative;background-color:var(--panel-background)}.hybrid-panel{display:flex;flex-direction:column;overflow:hidden;height:100%;background-color:var(--panel-background)}.animated-resizable-layout .panel-content-wrapper{flex:1;min-width:0;min-height:0;width:100%;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;will-change:opacity}.resize-handle{width:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:col-resize;position:relative;transition:background-color .2s,opacity .3s,width .3s}.resize-handle.collapsed{opacity:0;pointer-events:none}.resize-handle:hover{background-color:var(--panel-handle-hover)}.resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.collapse-toggle{position:absolute;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.animated-vertical-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.vertical-panel{overflow:auto;width:100%;background-color:var(--panel-background)}.panel-content-wrapper{width:100%;height:100%;overflow:auto}.vertical-resize-handle{height:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:row-resize;position:relative;transition:background-color .2s,opacity .3s,height .3s}.vertical-resize-handle.collapsed{opacity:0;pointer-events:none}.vertical-resize-handle:hover{background-color:var(--panel-handle-hover)}.vertical-resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}.collapse-toggle{background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.collapse-toggle:hover:not(:disabled){background-color:var(--panel-button-hover);box-shadow:0 2px 6px #00000026}.collapse-toggle:active:not(:disabled){opacity:.8}.collapsible-split-pane{width:100%;height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--panel-background)}.csp-header{display:flex;align-items:center;gap:8px;padding:0 12px;background-color:var(--panel-handle);border-bottom:1px solid var(--panel-border, rgba(128, 128, 128, .2));-webkit-user-select:none;user-select:none;flex-shrink:0;transition:background-color .15s ease}.csp-header-collapsed{cursor:pointer}.csp-header-collapsed:hover{background-color:var(--panel-handle-hover)}.csp-header-collapsed:focus{outline:none;box-shadow:inset 0 0 0 2px var(--panel-focus-ring, rgba(59, 130, 246, .5))}.csp-header-icon{display:flex;align-items:center;justify-content:center;color:var(--panel-text-secondary, #888);font-size:14px}.csp-header-title{flex:1;font-size:12px;font-weight:500;color:var(--panel-text, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.csp-header-toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--panel-text-secondary, #888);cursor:pointer;border-radius:3px;transition:background-color .15s ease,color .15s ease}.csp-header-toggle:hover{background-color:var(--panel-button-hover, rgba(128, 128, 128, .2));color:var(--panel-text, #333)}.csp-content-area{flex:1;min-height:0;display:flex;flex-direction:column}.csp-primary-content-full{flex:1;min-height:0;overflow:hidden}.csp-secondary-panel,.csp-primary-panel{overflow:hidden;background-color:var(--panel-background)}.csp-panel-content{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.csp-secondary-body{width:100%;height:100%;overflow:auto}.csp-resize-handle{height:6px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:row-resize;position:relative;transition:background-color .15s ease;flex-shrink:0}.csp-resize-handle:hover{background-color:var(--panel-handle-hover)}.csp-resize-handle:active{background-color:var(--panel-handle-active)}.csp-resize-handle-bar{width:32px;height:3px;background-color:var(--panel-handle-bar, rgba(128, 128, 128, .4));border-radius:2px;transition:background-color .15s ease}.csp-resize-handle:hover .csp-resize-handle-bar{background-color:var(--panel-handle-bar-hover, rgba(128, 128, 128, .6))}.three-panel-layout{height:100%;width:100%;display:flex;flex-direction:column;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item{display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item[data-edit-mode=true]{background-color:var(--panel-accent-bg);border-radius:12px}.three-panel-layout [data-panel]{transition:flex-grow var(--panel-transition-duration, .3s) var(--panel-transition-easing, cubic-bezier(.4, 0, .2, 1))}.three-panel-layout.is-dragging [data-panel],.three-panel-layout.is-mounting [data-panel]{transition:none}.three-panel-item.collapsible-panel{will-change:flex}.three-panel-item.collapsible-panel.collapsed{flex:0!important;min-width:0!important;max-width:0!important;width:0!important;overflow:hidden!important;visibility:hidden}.panel-content-wrapper{flex:1;min-width:0;overflow-x:hidden;overflow-y:auto;will-change:opacity;box-sizing:border-box}.resize-handle{position:relative;display:flex;align-items:center;justify-content:center;width:1px!important;cursor:col-resize;background:var(--panel-border);overflow:visible!important}.resize-handle:before{content:"";position:absolute;inset:0 -10px;background:transparent}.resize-handle:after{content:"";position:absolute;inset:0 -10px;background:var(--panel-handle);opacity:0;transition:opacity .2s ease;z-index:-1}.resize-handle:hover:after{opacity:1}.resize-handle:hover{background:var(--panel-handle-hover)}.resize-handle:active:after{opacity:1;background:var(--panel-handle-active)}.resize-handle:active{background:var(--panel-handle-active)}.resize-handle.collapsed{width:0!important;visibility:hidden}.resize-handle.left-handle.collapsed{margin-right:-1px}.resize-handle.right-handle.collapsed{margin-left:-1px}.handle-bar{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2}.collapse-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:40px;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--panel-button-icon);transition:all .2s ease;z-index:10;padding:0;line-height:1}.collapse-toggle:hover{background:var(--panel-button-hover)}.collapse-toggle:active{opacity:.8}.collapse-toggle:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.resize-handle:before{left:-8px;right:-8px}.resize-handle:after{left:-8px;right:-8px}.collapse-toggle{width:24px;height:48px;font-size:14px}}@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(1deg)}50%{transform:rotate(0)}75%{transform:rotate(-1deg)}to{transform:rotate(0)}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 8px #3b82f600}}.editable-panel-layout{position:relative;width:100%;height:100%}.editable-panel-layout.edit-mode-active{background:#0000000d}[data-slot][data-edit-mode=true]{transform:scale(.95);transform-origin:center center;cursor:grab;will-change:transform;transition:transform .3s cubic-bezier(.4,0,.2,1)}[data-slot][data-edit-mode=true]:active{cursor:grabbing}[data-slot][data-dragging=true]{cursor:grabbing!important;transform:scale(.95)!important;transition:none!important}.edit-mode-active [data-slot][data-edit-mode=true]{transform-origin:center center}.slot-with-overlay{position:relative;width:100%;height:100%}.slot-with-overlay.dragging{opacity:0;pointer-events:none}.slot-edit-overlay{position:absolute;inset:0;background:transparent;border:none;pointer-events:auto;cursor:grab;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.slot-edit-overlay:hover{background:#3b82f608}.slot-edit-overlay:active{cursor:grabbing}.drag-indicator,.slot-position-label{display:none}.edit-mode-toggle{position:absolute;top:16px;right:16px;z-index:1000;padding:8px 16px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.edit-mode-toggle:hover{background:#f9fafb;box-shadow:0 4px 6px #0000001a}.edit-mode-toggle.active{background:#3b82f6;color:#fff;border-color:#2563eb}.edit-mode-overlay{position:fixed;inset:0;background:#0000004d;z-index:998;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.edit-mode-configurator{position:relative;z-index:999;padding:20px;animation:scaleIn .3s ease}.panel-slot{position:relative;min-height:120px;border:2px dashed transparent;border-radius:12px;transition:all .3s ease;padding:12px}.panel-slot.edit-mode{border-color:#d1d5db;background:#ffffff80}.panel-slot.drag-over{border-color:#3b82f6;background:#3b82f61a;box-shadow:0 0 0 4px #3b82f61a}.panel-slot.empty{display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:14px}.draggable-panel{position:relative;padding:12px 16px;margin:8px 0;border-radius:8px;background:#fff;border:1px solid #e5e7eb;cursor:grab;transition:all .2s ease;-webkit-user-select:none;user-select:none}.draggable-panel:hover{border-color:#3b82f6;box-shadow:0 2px 8px #0000001a}.draggable-panel.dragging{opacity:.5;cursor:grabbing}.draggable-panel.edit-mode{animation:wiggle .4s ease-in-out infinite;transform-origin:center}.draggable-panel.edit-mode:nth-child(odd){animation-delay:.1s}.draggable-panel.edit-mode:nth-child(2n){animation-delay:.2s}.remove-button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid white;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:700;opacity:0;transform:scale(0);transition:all .2s ease;z-index:10;box-shadow:0 2px 4px #0003}.draggable-panel.edit-mode .remove-button{opacity:1;transform:scale(1);animation:pulse 2s infinite}.remove-button:hover{background:#dc2626;transform:scale(1.1)}.panel-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#374151}.panel-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.drag-handle{display:none;width:24px;height:24px;opacity:.4;cursor:grab}.edit-mode .drag-handle{display:flex;align-items:center;justify-content:center}.drag-overlay{padding:12px 16px;border-radius:8px;background:#fff;border:2px solid #3b82f6;box-shadow:0 8px 16px #0003;cursor:grabbing;opacity:.9}.panel-group{border:2px solid #e5e7eb;border-radius:12px;padding:8px;background:#fff}.panel-group.edit-mode{animation:wiggle .5s ease-in-out infinite;border-color:#3b82f6}.panel-group-header{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #e5e7eb;margin-bottom:8px}.panel-group-title{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase}.available-panels{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 6px #0000001a}.available-panels-title{font-size:16px;font-weight:600;color:#374151;margin-bottom:12px}.available-panels-list{display:flex;flex-direction:column;gap:8px}.slot-label{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}.slot-indicator{width:8px;height:8px;border-radius:50%;background:#d1d5db}.slot-indicator.active{background:#3b82f6}.action-buttons{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:1001;display:flex;gap:12px;padding:12px 24px;background:#fff;border-radius:12px;box-shadow:0 8px 16px #00000026;animation:scaleIn .3s ease}.action-button{padding:10px 20px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.action-button:hover{background:#f9fafb}.action-button.primary{background:#3b82f6;color:#fff;border-color:#2563eb}.action-button.primary:hover{background:#2563eb}@media(max-width:768px){.edit-mode-toggle{top:8px;right:8px;padding:6px 12px;font-size:12px}.action-buttons{bottom:16px;padding:10px 16px}.action-button{padding:8px 16px;font-size:13px}}@media(prefers-color-scheme:dark){.edit-mode-toggle{background:#1f2937;color:#f9fafb;border-color:#374151}.edit-mode-toggle:hover{background:#374151}.draggable-panel{background:#1f2937;color:#f9fafb;border-color:#374151}.available-panels{background:#1f2937}.panel-label{color:#f9fafb}.action-buttons{background:#1f2937}.action-button{background:#1f2937;color:#f9fafb;border-color:#374151}.action-button:hover{background:#374151}}.panel-configurator{display:flex;flex-direction:column;gap:2rem;padding:1.5rem;background:var(--configurator-bg);border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.configurator-section{display:flex;flex-direction:column;gap:1rem}.section-title{margin:0;font-size:.875rem;font-weight:600;color:var(--configurator-title);text-transform:uppercase;letter-spacing:.05em;text-align:center}.slots-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:75%;margin:0 auto;align-items:start}.slot{position:relative;aspect-ratio:1 / 1.3;width:100%;padding:2.5rem 1rem 1rem;background:var(--slot-bg);border:2px solid var(--slot-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;box-sizing:border-box}.slot:hover{border-color:var(--slot-border-hover);box-shadow:0 2px 4px #0000000d}.slot.selected{border-color:var(--slot-border-selected);background:var(--slot-bg-selected);box-shadow:0 0 0 3px var(--slot-bg-selected)}.slot.empty{border-style:dashed}.slot-label{font-size:.75rem;font-weight:600;color:var(--slot-label);text-transform:capitalize;text-align:left}.slot[data-position=middle] .slot-label,.slot[data-position=middle] .slot-panel-name,.slot[data-position=middle] .slot-empty-state{text-align:center}.slot[data-position=right] .slot-label,.slot[data-position=right] .slot-panel-name,.slot[data-position=right] .slot-empty-state{text-align:right}.slot-content{flex:1;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;min-height:0}.slot-panel-name{font-weight:600;color:var(--slot-content-text);font-size:.875rem}.slot-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--slot-preview-bg);border-radius:4px;border:1px solid var(--slot-preview-border);font-size:.75rem;color:var(--slot-preview-text)}.slot-empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:var(--slot-empty-text);font-size:.875rem;font-style:italic;min-height:0}.slot-clear-btn{position:absolute;top:.25rem;right:.25rem;width:24px;height:24px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:4px;cursor:pointer;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.slot:hover .slot-clear-btn{opacity:1}.slot-clear-btn:hover{background:var(--clear-btn-hover);transform:scale(1.1)}.available-panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;width:75%;margin:0 auto}.available-panel{min-height:80px;padding:.75rem;background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem}.available-panel:hover{border-color:var(--panel-border-hover);box-shadow:0 2px 4px #0000000d;transform:translateY(-2px)}.available-panel.selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 3px var(--panel-bg-selected)}.available-panel.in-use{opacity:.5;border-style:dashed}.available-panel.in-use:hover{transform:translateY(0);opacity:.6}.panel-label{font-weight:600;color:var(--panel-label-text);font-size:.875rem}.panel-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--panel-preview-bg);border-radius:4px;font-size:.75rem;color:var(--panel-preview-text)}.selection-hint{padding:.75rem 1rem;background:var(--hint-bg);border:1px solid var(--hint-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.available-panel.multi-selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 2px var(--panel-bg-selected)}.multi-select-badge{margin-left:.5rem;padding:.25rem .5rem;background:var(--panel-border-selected);color:#fff;font-size:.75rem;border-radius:12px;font-weight:400}.multi-select-hint{background:var(--panel-bg-selected);border-color:var(--panel-border-selected)}.slot.tab-group{border-style:solid}.group-content{position:relative;overflow-y:auto;min-height:0}.group-badge{font-size:.75rem;font-weight:600;color:var(--panel-border-selected);margin-bottom:.5rem}.group-panels{display:flex;flex-direction:column;gap:.25rem;flex:1;overflow-y:auto;min-height:0}.group-panel-label{font-size:.75rem;color:var(--slot-content-text);padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.slot-panel-label{font-weight:600;color:var(--slot-content-text);font-size:.875rem;text-align:center}.create-tab-group-btn{margin-top:.5rem;padding:.5rem .75rem;background:var(--panel-border-selected);color:#fff;border:none;border-radius:4px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease}.create-tab-group-btn:hover{transform:scale(1.05);box-shadow:0 2px 4px #0000001a}.tab-mode-toggle{position:absolute;top:.5rem;left:.5rem;padding:.25rem .5rem;background:var(--slot-bg);border:1px solid var(--slot-border);border-radius:4px;font-size:.85rem;cursor:pointer;transition:all .2s ease;z-index:10;opacity:.7;color:var(--slot-content-text)}.tab-mode-toggle svg{display:block}.tab-mode-toggle:hover{opacity:1;border-color:var(--slot-border-hover);background:var(--slot-preview-bg)}.tab-mode-toggle.active{opacity:1;background:var(--panel-border-selected);color:#fff;border-color:var(--panel-border-selected)}.tab-config-controls{margin-bottom:.5rem}.tab-config-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--slot-label)}.tab-config-label select{padding:.25rem .5rem;border:1px solid var(--slot-border);border-radius:3px;background:var(--slot-bg);color:var(--slot-content-text);font-size:.7rem;cursor:pointer}.group-panel-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.group-panel-label{flex:1;font-size:.75rem;color:var(--slot-content-text);display:flex;align-items:center;gap:.25rem}.default-badge{color:var(--panel-border-selected);font-size:.9em}.remove-from-group-btn{width:18px;height:18px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:3px;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .2s ease}.remove-from-group-btn:hover{opacity:1;transform:scale(1.1)}.usage-hint{padding:.75rem 1rem;background:var(--slot-preview-bg);border:1px solid var(--slot-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.tab-group{display:flex;height:100%;width:100%;overflow:hidden}.tab-group.tab-position-top,.tab-group.tab-position-bottom{flex-direction:column}.tab-group.tab-position-left,.tab-group.tab-position-right{flex-direction:row}.tab-list{display:flex;background:var(--tab-list-bg, #f5f5f5);border-bottom:1px solid var(--tab-border, #ddd);gap:0;padding:0;flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.tab-list::-webkit-scrollbar{display:none}.tab-position-top .tab-list,.tab-position-bottom .tab-list{width:100%}.tab-list.centered{justify-content:flex-start}@media(min-width:0){.tab-list.centered{justify-content:center}.tab-list.centered:has(.tab-button:nth-child(n)){justify-content:flex-start}}.tab-position-bottom .tab-list{border-bottom:none;border-top:none}.tab-position-left .tab-list,.tab-position-right .tab-list{flex-direction:column;border-bottom:none;border-right:none;width:auto;min-width:120px}.tab-position-top .tab-button,.tab-position-bottom .tab-button{flex:1 1 0;min-width:40px;max-width:100%}.tab-button{background:var(--tab-bg, #fff);border:1px solid var(--tab-border, #ddd);border-radius:0;padding:8px 16px;cursor:pointer;font-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 14px);font-weight:var(--tab-font-weight, 500);color:var(--tab-text, #333);transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;height:39px;line-height:1;box-sizing:border-box;container-type:inline-size}.tab-position-top .tab-button{border-bottom:none;border-top:none;border-left:none}.tab-position-top .tab-button:last-child{border-right:none}.tab-position-bottom .tab-button{border-top:none;border-bottom:none;border-left:none}.tab-position-bottom .tab-button:last-child{border-right:none}.tab-position-left .tab-button{border-right:none;border-bottom:none}.tab-position-left .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-position-right .tab-button{border-left:none;border-bottom:none}.tab-position-right .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-icon{display:inline-flex;align-items:center;justify-content:center}.tab-label{display:none}@container (min-width: 100px){.tab-label{display:inline}.tab-icon{display:none}}.tab-button:hover{background:var(--tab-bg-hover, #f9f9f9)}.tab-button.active{background:var(--tab-bg-active, #007bff);color:var(--tab-text-active, #fff);border-color:var(--tab-border-active, #007bff)}.tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:2px}.tab-content{flex:1;overflow:auto;background:var(--tab-content-bg, #fff)}.tab-group-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--tab-empty-text, #999);font-style:italic}.snap-carousel-container{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:var(--snap-carousel-gap, 0px);padding:0;margin:0;width:100%;height:100%;background-color:var(--panel-background);box-sizing:border-box;position:relative;left:0;transform:none;container-type:inline-size;-ms-overflow-style:none;scrollbar-width:none}.snap-carousel-container::-webkit-scrollbar{display:none}.snap-carousel-container.swipe-disabled{touch-action:pan-y pinch-zoom;overscroll-behavior-x:none}.snap-carousel-panel{flex:0 0 auto;scroll-snap-align:start;scroll-snap-stop:always;width:var(--snap-carousel-panel-width, 33.33%);height:100%;box-sizing:border-box;overflow:hidden}@media(max-width:540px){.snap-carousel-panel{min-width:280px}}.mobile-tab-layout{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.mobile-tab-content{flex:1;overflow:hidden;min-height:0}.mobile-tab-nav{display:flex;background:var(--tab-list-bg, #f5f5f5);border-top:1px solid var(--tab-border, #ddd);flex-shrink:0;padding:0;margin:0}.mobile-tab-button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:transparent;border:none;padding:14px 4px;padding-bottom:calc(14px + min(12px,env(safe-area-inset-bottom,0px)));cursor:pointer;font-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 11px);font-weight:var(--tab-font-weight, 500);color:var(--tab-text, #666);transition:color .2s ease;min-width:0}.mobile-tab-button:hover{color:var(--tab-text-hover, #333)}.mobile-tab-button.active{color:var(--mobile-tab-text-active, #007bff)}.mobile-tab-button .tab-icon{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--tab-icon-color, #999);transition:color .2s ease}.mobile-tab-button.active .tab-icon{color:var(--mobile-tab-icon-active, #007bff)}.mobile-tab-button .tab-label{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2;color:inherit;opacity:1}.mobile-tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:-2px;z-index:1}:root{--panels-background: #ffffff;--panels-foreground: #000000;--panels-border: #e5e7eb;--panels-handle-bg: #f3f4f6;--panels-handle-hover: #e5e7eb;--panels-handle-active: #d1d5db;--panels-button-bg: #ffffff;--panels-button-hover: #f9fafb;--panels-button-active: #f3f4f6;--panels-shadow: rgba(0, 0, 0, .1);--panels-animation-duration: .3s;--panels-animation-easing: cubic-bezier(.4, 0, .2, 1)}@media(prefers-color-scheme:dark){:root{--panels-background: #1a1a1a;--panels-foreground: #ffffff;--panels-border: #404040;--panels-handle-bg: #2a2a2a;--panels-handle-hover: #333333;--panels-handle-active: #404040;--panels-button-bg: #2a2a2a;--panels-button-hover: #333333;--panels-button-active: #404040;--panels-shadow: rgba(0, 0, 0, .3)}}[data-theme=light]{--panels-background: #ffffff;--panels-foreground: #000000;--panels-border: #e5e7eb;--panels-handle-bg: #f3f4f6;--panels-handle-hover: #e5e7eb;--panels-handle-active: #d1d5db;--panels-button-bg: #ffffff;--panels-button-hover: #f9fafb;--panels-button-active: #f3f4f6;--panels-shadow: rgba(0, 0, 0, .1)}[data-theme=dark]{--panels-background: #1a1a1a;--panels-foreground: #ffffff;--panels-border: #404040;--panels-handle-bg: #2a2a2a;--panels-handle-hover: #333333;--panels-handle-active: #404040;--panels-button-bg: #2a2a2a;--panels-button-hover: #333333;--panels-button-active: #404040;--panels-shadow: rgba(0, 0, 0, .3)}.panels-container{width:100%;height:100%;display:flex;background-color:var(--panels-background);color:var(--panels-foreground);position:relative}.panels-panel{position:relative;overflow:auto;background-color:var(--panels-background)}.panels-handle{background-color:var(--panels-handle-bg);transition:background-color .15s ease;position:relative;z-index:10}.panels-handle:hover{background-color:var(--panels-handle-hover)}.panels-handle:active{background-color:var(--panels-handle-active)}.panels-handle-horizontal{width:8px;cursor:col-resize}.panels-handle-vertical{height:8px;cursor:row-resize}.panels-handle-collapsed{width:1px!important;min-width:1px!important;background-color:var(--panels-border)!important;cursor:default!important;pointer-events:none}.panels-handle-collapsed .panels-collapse-button{pointer-events:auto}.panels-collapse-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:4px;background-color:var(--panels-button-bg);border:1px solid var(--panels-border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;box-shadow:0 1px 3px var(--panels-shadow);z-index:20}.panels-collapse-button:hover{background-color:var(--panels-button-hover);transform:translate(-50%,-50%) scale(1.1)}.panels-collapse-button:active{background-color:var(--panels-button-active);transform:translate(-50%,-50%) scale(.95)}.panels-collapse-button-floating{position:absolute;left:-12px;z-index:30}.panels-collapse-icon{width:16px;height:16px;stroke:var(--panels-foreground);stroke-width:2;fill:none;transition:transform .15s ease}.panels-content-fade{transition:opacity var(--panels-animation-duration) var(--panels-animation-easing)}.panels-content-fading{opacity:.3}.panels-content-hidden{opacity:0}.panels-animating{pointer-events:none}@media(max-width:768px){.panels-handle-horizontal{width:4px}.panels-handle-vertical{height:4px}.panels-collapse-button{width:20px;height:20px}.panels-collapse-icon{width:12px;height:12px}}.panels-mobile-stack{display:flex;flex-direction:column;gap:1rem;padding:1rem}.panels-mobile-panel{border:1px solid var(--panels-border);border-radius:8px;padding:1rem}.panels-tabs-header{display:flex;border-bottom:1px solid var(--panels-border);background-color:var(--panels-handle-bg)}.panels-tab{flex:1;padding:.75rem 1rem;background:none;border:none;color:var(--panels-foreground);cursor:pointer;transition:background-color .15s ease;position:relative}.panels-tab:hover{background-color:var(--panels-handle-hover)}.panels-tab-active{background-color:var(--panels-background)}.panels-tab-active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--panels-foreground)}.panels-drawer-toggle{position:fixed;top:1rem;left:1rem;z-index:100;width:40px;height:40px;border-radius:8px;background-color:var(--panels-button-bg);border:1px solid var(--panels-border);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px var(--panels-shadow)}.panels-drawer-icon{width:24px;height:24px}.panels-drawer{position:fixed;top:0;left:0;bottom:0;width:300px;background-color:var(--panels-background);border-right:1px solid var(--panels-border);transform:translate(-100%);transition:transform var(--panels-animation-duration) var(--panels-animation-easing);z-index:90;overflow-y:auto}.panels-drawer-open{transform:translate(0)}.panels-drawer-panel,.panels-main-panel{padding:4rem 1rem 1rem}\n.animated-resizable-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.hybrid-panel{overflow:auto;height:100%;background-color:var(--panel-background)}.resize-handle{width:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:col-resize;position:relative;transition:background-color .2s,opacity .3s,width .3s}.resize-handle.collapsed{opacity:0;pointer-events:none}.resize-handle:hover{background-color:var(--panel-handle-hover)}.resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.collapse-toggle{position:absolute;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.animated-vertical-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.vertical-panel{overflow:auto;width:100%;background-color:var(--panel-background)}.panel-content-wrapper{width:100%;height:100%;overflow:auto}.vertical-resize-handle{height:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:row-resize;position:relative;transition:background-color .2s,opacity .3s,height .3s}.vertical-resize-handle.collapsed{opacity:0;pointer-events:none}.vertical-resize-handle:hover{background-color:var(--panel-handle-hover)}.vertical-resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}.collapse-toggle{background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.collapse-toggle:hover:not(:disabled){background-color:var(--panel-button-hover);box-shadow:0 2px 6px #00000026}.collapse-toggle:active:not(:disabled){opacity:.8}.tab-group{display:flex;height:100%;width:100%;overflow:hidden}.tab-group.tab-position-top,.tab-group.tab-position-bottom{flex-direction:column}.tab-group.tab-position-left,.tab-group.tab-position-right{flex-direction:row}.tab-list{display:flex;background:var(--tab-list-bg, #f5f5f5);border-bottom:1px solid var(--tab-border, #ddd);gap:0;padding:0;flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.tab-list::-webkit-scrollbar{display:none}.tab-position-top .tab-list,.tab-position-bottom .tab-list{width:100%}.tab-list.centered{justify-content:flex-start}@media (min-width: 0){.tab-list.centered{justify-content:center}.tab-list.centered:has(.tab-button:nth-child(n)){justify-content:flex-start}}.tab-position-bottom .tab-list{border-bottom:none;border-top:none}.tab-position-left .tab-list,.tab-position-right .tab-list{flex-direction:column;border-bottom:none;border-right:none;width:auto;min-width:120px}.tab-position-top .tab-button,.tab-position-bottom .tab-button{flex:1 1 0;min-width:40px;max-width:100%}.tab-button{background:var(--tab-bg, #fff);border:1px solid var(--tab-border, #ddd);border-radius:0;padding:8px 16px;cursor:pointer;font-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 14px);font-weight:var(--tab-font-weight, 500);color:var(--tab-text, #333);transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;height:39px;line-height:1;box-sizing:border-box;container-type:inline-size}.tab-position-top .tab-button{border-bottom:none;border-top:none;border-left:none}.tab-position-top .tab-button:last-child{border-right:none}.tab-position-bottom .tab-button{border-top:none;border-bottom:none;border-left:none}.tab-position-bottom .tab-button:last-child{border-right:none}.tab-position-left .tab-button{border-right:none;border-bottom:none}.tab-position-left .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-position-right .tab-button{border-left:none;border-bottom:none}.tab-position-right .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-icon{display:inline-flex;align-items:center;justify-content:center}.tab-label{display:none}@container (min-width: 100px){.tab-label{display:inline}.tab-icon{display:none}}.tab-button:hover{background:var(--tab-bg-hover, #f9f9f9)}.tab-button.active{background:var(--tab-bg-active, #007bff);color:var(--tab-text-active, #fff);border-color:var(--tab-border-active, #007bff)}.tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:2px}.tab-content{flex:1;overflow:auto;background:var(--tab-content-bg, #fff)}.tab-group-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--tab-empty-text, #999);font-style:italic}.three-panel-layout{height:100%;width:100%;display:flex;flex-direction:column;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item{display:flex;flex-direction:column;overflow:hidden;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item[data-edit-mode=true]{background-color:var(--panel-accent-bg);border-radius:12px}.three-panel-item.collapsible-panel{will-change:flex}.three-panel-item.collapsible-panel.animating{pointer-events:none}.three-panel-item.collapsible-panel.collapsed{flex:0!important;min-width:0!important;max-width:0!important;width:0!important;overflow:hidden!important;visibility:hidden}.three-panel-item.middle-panel{flex:1;min-width:200px}.panel-content-wrapper{flex:1;overflow-x:hidden;overflow-y:auto;will-change:opacity;box-sizing:border-box}.resize-handle{position:relative;display:flex;align-items:center;justify-content:center;width:1px!important;cursor:col-resize;background:var(--panel-border);overflow:visible!important}.resize-handle:before{content:"";position:absolute;top:0;right:-10px;bottom:0;left:-10px;background:transparent}.resize-handle:after{content:"";position:absolute;top:0;right:-10px;bottom:0;left:-10px;background:var(--panel-handle);opacity:0;transition:opacity .2s ease;z-index:-1}.resize-handle:hover:after{opacity:1}.resize-handle:hover{background:var(--panel-handle-hover)}.resize-handle:active:after{opacity:1;background:var(--panel-handle-active)}.resize-handle:active{background:var(--panel-handle-active)}.resize-handle.collapsed{width:0!important;visibility:hidden}.resize-handle.left-handle.collapsed{margin-right:-1px}.resize-handle.right-handle.collapsed{margin-left:-1px}.handle-bar{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2}.collapse-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:40px;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--panel-button-icon);transition:all .2s ease;z-index:10;padding:0;line-height:1}.collapse-toggle:hover{background:var(--panel-button-hover)}.collapse-toggle:active{opacity:.8}.collapse-toggle:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.resize-handle:before{left:-8px;right:-8px}.resize-handle:after{left:-8px;right:-8px}.collapse-toggle{width:24px;height:48px;font-size:14px}}.snap-carousel-container{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:var(--snap-carousel-gap, 0px);padding:0;margin:0;width:100%;height:100%;background-color:var(--panel-background);box-sizing:border-box;position:relative;left:0;transform:none;container-type:inline-size;-ms-overflow-style:none;scrollbar-width:none}.snap-carousel-container::-webkit-scrollbar{display:none}.snap-carousel-container.swipe-disabled{touch-action:pan-y pinch-zoom;overscroll-behavior-x:none}.snap-carousel-panel{flex:0 0 auto;scroll-snap-align:start;scroll-snap-stop:always;width:var(--snap-carousel-panel-width, 33.33%);height:100%;box-sizing:border-box;overflow:hidden}@media (max-width: 540px){.snap-carousel-panel{min-width:280px}}.mobile-tab-layout{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.mobile-tab-content{flex:1;overflow:hidden;min-height:0}.mobile-tab-nav{display:flex;background:var(--tab-list-bg, #f5f5f5);border-top:1px solid var(--tab-border, #ddd);flex-shrink:0;padding:0;margin:0}.mobile-tab-button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:transparent;border:none;padding:14px 4px;padding-bottom:calc(14px + min(12px,env(safe-area-inset-bottom,0px)));cursor:pointer;font-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 11px);font-weight:var(--tab-font-weight, 500);color:var(--tab-text, #666);transition:color .2s ease;min-width:0}.mobile-tab-button:hover{color:var(--tab-text-hover, #333)}.mobile-tab-button.active{color:var(--mobile-tab-text-active, #007bff)}.mobile-tab-button .tab-icon{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--tab-icon-color, #999);transition:color .2s ease}.mobile-tab-button.active .tab-icon{color:var(--mobile-tab-icon-active, #007bff)}.mobile-tab-button .tab-label{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2;color:inherit;opacity:1}.mobile-tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:-2px;z-index:1}@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(1deg)}50%{transform:rotate(0)}75%{transform:rotate(-1deg)}to{transform:rotate(0)}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 8px #3b82f600}}.editable-panel-layout{position:relative;width:100%;height:100%}.editable-panel-layout.edit-mode-active{background:#0000000d}[data-slot][data-edit-mode=true]{transform:scale(.95);transform-origin:center center;cursor:grab;will-change:transform;transition:transform .3s cubic-bezier(.4,0,.2,1)}[data-slot][data-edit-mode=true]:active{cursor:grabbing}[data-slot][data-dragging=true]{cursor:grabbing!important;transform:scale(.95)!important;transition:none!important}.edit-mode-active [data-slot][data-edit-mode=true]{transform-origin:center center}.slot-with-overlay{position:relative;width:100%;height:100%}.slot-with-overlay.dragging{opacity:0;pointer-events:none}.slot-edit-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:transparent;border:none;pointer-events:auto;cursor:grab;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.slot-edit-overlay:hover{background:#3b82f608}.slot-edit-overlay:active{cursor:grabbing}.drag-indicator,.slot-position-label{display:none}.edit-mode-toggle{position:absolute;top:16px;right:16px;z-index:1000;padding:8px 16px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.edit-mode-toggle:hover{background:#f9fafb;box-shadow:0 4px 6px #0000001a}.edit-mode-toggle.active{background:#3b82f6;color:#fff;border-color:#2563eb}.edit-mode-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:998;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.edit-mode-configurator{position:relative;z-index:999;padding:20px;animation:scaleIn .3s ease}.panel-slot{position:relative;min-height:120px;border:2px dashed transparent;border-radius:12px;transition:all .3s ease;padding:12px}.panel-slot.edit-mode{border-color:#d1d5db;background:#ffffff80}.panel-slot.drag-over{border-color:#3b82f6;background:#3b82f61a;box-shadow:0 0 0 4px #3b82f61a}.panel-slot.empty{display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:14px}.draggable-panel{position:relative;padding:12px 16px;margin:8px 0;border-radius:8px;background:#fff;border:1px solid #e5e7eb;cursor:grab;transition:all .2s ease;-webkit-user-select:none;user-select:none}.draggable-panel:hover{border-color:#3b82f6;box-shadow:0 2px 8px #0000001a}.draggable-panel.dragging{opacity:.5;cursor:grabbing}.draggable-panel.edit-mode{animation:wiggle .4s ease-in-out infinite;transform-origin:center}.draggable-panel.edit-mode:nth-child(odd){animation-delay:.1s}.draggable-panel.edit-mode:nth-child(2n){animation-delay:.2s}.remove-button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid white;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:700;opacity:0;transform:scale(0);transition:all .2s ease;z-index:10;box-shadow:0 2px 4px #0003}.draggable-panel.edit-mode .remove-button{opacity:1;transform:scale(1);animation:pulse 2s infinite}.remove-button:hover{background:#dc2626;transform:scale(1.1)}.panel-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#374151}.panel-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.drag-handle{display:none;width:24px;height:24px;opacity:.4;cursor:grab}.edit-mode .drag-handle{display:flex;align-items:center;justify-content:center}.drag-overlay{padding:12px 16px;border-radius:8px;background:#fff;border:2px solid #3b82f6;box-shadow:0 8px 16px #0003;cursor:grabbing;opacity:.9}.panel-group{border:2px solid #e5e7eb;border-radius:12px;padding:8px;background:#fff}.panel-group.edit-mode{animation:wiggle .5s ease-in-out infinite;border-color:#3b82f6}.panel-group-header{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #e5e7eb;margin-bottom:8px}.panel-group-title{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase}.available-panels{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 6px #0000001a}.available-panels-title{font-size:16px;font-weight:600;color:#374151;margin-bottom:12px}.available-panels-list{display:flex;flex-direction:column;gap:8px}.slot-label{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}.slot-indicator{width:8px;height:8px;border-radius:50%;background:#d1d5db}.slot-indicator.active{background:#3b82f6}.action-buttons{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:1001;display:flex;gap:12px;padding:12px 24px;background:#fff;border-radius:12px;box-shadow:0 8px 16px #00000026;animation:scaleIn .3s ease}.action-button{padding:10px 20px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.action-button:hover{background:#f9fafb}.action-button.primary{background:#3b82f6;color:#fff;border-color:#2563eb}.action-button.primary:hover{background:#2563eb}@media (max-width: 768px){.edit-mode-toggle{top:8px;right:8px;padding:6px 12px;font-size:12px}.action-buttons{bottom:16px;padding:10px 16px}.action-button{padding:8px 16px;font-size:13px}}@media (prefers-color-scheme: dark){.edit-mode-toggle{background:#1f2937;color:#f9fafb;border-color:#374151}.edit-mode-toggle:hover{background:#374151}.draggable-panel{background:#1f2937;color:#f9fafb;border-color:#374151}.available-panels{background:#1f2937}.panel-label{color:#f9fafb}.action-buttons{background:#1f2937}.action-button{background:#1f2937;color:#f9fafb;border-color:#374151}.action-button:hover{background:#374151}}.panel-configurator{display:flex;flex-direction:column;gap:2rem;padding:1.5rem;background:var(--configurator-bg);border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.configurator-section{display:flex;flex-direction:column;gap:1rem}.section-title{margin:0;font-size:.875rem;font-weight:600;color:var(--configurator-title);text-transform:uppercase;letter-spacing:.05em;text-align:center}.slots-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:75%;margin:0 auto;align-items:start}.slot{position:relative;aspect-ratio:1 / 1.3;width:100%;padding:2.5rem 1rem 1rem;background:var(--slot-bg);border:2px solid var(--slot-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;box-sizing:border-box}.slot:hover{border-color:var(--slot-border-hover);box-shadow:0 2px 4px #0000000d}.slot.selected{border-color:var(--slot-border-selected);background:var(--slot-bg-selected);box-shadow:0 0 0 3px var(--slot-bg-selected)}.slot.empty{border-style:dashed}.slot-label{font-size:.75rem;font-weight:600;color:var(--slot-label);text-transform:capitalize;text-align:left}.slot[data-position=middle] .slot-label,.slot[data-position=middle] .slot-panel-name,.slot[data-position=middle] .slot-empty-state{text-align:center}.slot[data-position=right] .slot-label,.slot[data-position=right] .slot-panel-name,.slot[data-position=right] .slot-empty-state{text-align:right}.slot-content{flex:1;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;min-height:0}.slot-panel-name{font-weight:600;color:var(--slot-content-text);font-size:.875rem}.slot-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--slot-preview-bg);border-radius:4px;border:1px solid var(--slot-preview-border);font-size:.75rem;color:var(--slot-preview-text)}.slot-empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:var(--slot-empty-text);font-size:.875rem;font-style:italic;min-height:0}.slot-clear-btn{position:absolute;top:.25rem;right:.25rem;width:24px;height:24px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:4px;cursor:pointer;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.slot:hover .slot-clear-btn{opacity:1}.slot-clear-btn:hover{background:var(--clear-btn-hover);transform:scale(1.1)}.available-panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;width:75%;margin:0 auto}.available-panel{min-height:80px;padding:.75rem;background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem}.available-panel:hover{border-color:var(--panel-border-hover);box-shadow:0 2px 4px #0000000d;transform:translateY(-2px)}.available-panel.selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 3px var(--panel-bg-selected)}.available-panel.in-use{opacity:.5;border-style:dashed}.available-panel.in-use:hover{transform:translateY(0);opacity:.6}.panel-label{font-weight:600;color:var(--panel-label-text);font-size:.875rem}.panel-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--panel-preview-bg);border-radius:4px;font-size:.75rem;color:var(--panel-preview-text)}.selection-hint{padding:.75rem 1rem;background:var(--hint-bg);border:1px solid var(--hint-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.available-panel.multi-selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 2px var(--panel-bg-selected)}.multi-select-badge{margin-left:.5rem;padding:.25rem .5rem;background:var(--panel-border-selected);color:#fff;font-size:.75rem;border-radius:12px;font-weight:400}.multi-select-hint{background:var(--panel-bg-selected);border-color:var(--panel-border-selected)}.slot.tab-group{border-style:solid}.group-content{position:relative;overflow-y:auto;min-height:0}.group-badge{font-size:.75rem;font-weight:600;color:var(--panel-border-selected);margin-bottom:.5rem}.group-panels{display:flex;flex-direction:column;gap:.25rem;flex:1;overflow-y:auto;min-height:0}.group-panel-label{font-size:.75rem;color:var(--slot-content-text);padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.slot-panel-label{font-weight:600;color:var(--slot-content-text);font-size:.875rem;text-align:center}.create-tab-group-btn{margin-top:.5rem;padding:.5rem .75rem;background:var(--panel-border-selected);color:#fff;border:none;border-radius:4px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease}.create-tab-group-btn:hover{transform:scale(1.05);box-shadow:0 2px 4px #0000001a}.tab-mode-toggle{position:absolute;top:.5rem;left:.5rem;padding:.25rem .5rem;background:var(--slot-bg);border:1px solid var(--slot-border);border-radius:4px;font-size:.85rem;cursor:pointer;transition:all .2s ease;z-index:10;opacity:.7;color:var(--slot-content-text)}.tab-mode-toggle svg{display:block}.tab-mode-toggle:hover{opacity:1;border-color:var(--slot-border-hover);background:var(--slot-preview-bg)}.tab-mode-toggle.active{opacity:1;background:var(--panel-border-selected);color:#fff;border-color:var(--panel-border-selected)}.tab-config-controls{margin-bottom:.5rem}.tab-config-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--slot-label)}.tab-config-label select{padding:.25rem .5rem;border:1px solid var(--slot-border);border-radius:3px;background:var(--slot-bg);color:var(--slot-content-text);font-size:.7rem;cursor:pointer}.group-panel-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.group-panel-label{flex:1;font-size:.75rem;color:var(--slot-content-text);display:flex;align-items:center;gap:.25rem}.default-badge{color:var(--panel-border-selected);font-size:.9em}.remove-from-group-btn{width:18px;height:18px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:3px;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .2s ease}.remove-from-group-btn:hover{opacity:1;transform:scale(1.1)}.usage-hint{padding:.75rem 1rem;background:var(--slot-preview-bg);border:1px solid var(--slot-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}\n.animated-resizable-layout{flex:1;min-height:0;width:100%;position:relative;background-color:var(--panel-background)}.hybrid-panel{display:flex;flex-direction:column;overflow:hidden;height:100%;background-color:var(--panel-background)}.animated-resizable-layout .panel-content-wrapper{flex:1;min-width:0;min-height:0;width:100%;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;will-change:opacity}.resize-handle{width:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:col-resize;position:relative;transition:background-color .2s,opacity .3s,width .3s}.resize-handle.collapsed{opacity:0;pointer-events:none}.resize-handle:hover{background-color:var(--panel-handle-hover)}.resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.collapse-toggle{position:absolute;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.animated-vertical-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.vertical-panel{overflow:auto;width:100%;background-color:var(--panel-background)}.panel-content-wrapper{width:100%;height:100%;overflow:auto}.vertical-resize-handle{height:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:row-resize;position:relative;transition:background-color .2s,opacity .3s,height .3s}.vertical-resize-handle.collapsed{opacity:0;pointer-events:none}.vertical-resize-handle:hover{background-color:var(--panel-handle-hover)}.vertical-resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}.collapse-toggle{background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.collapse-toggle:hover:not(:disabled){background-color:var(--panel-button-hover);box-shadow:0 2px 6px #00000026}.collapse-toggle:active:not(:disabled){opacity:.8}.collapsible-split-pane{width:100%;height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--panel-background)}.csp-header{display:flex;align-items:center;gap:8px;padding:0 12px;background-color:var(--panel-handle);border-bottom:1px solid var(--panel-border, rgba(128, 128, 128, .2));-webkit-user-select:none;user-select:none;flex-shrink:0;transition:background-color .15s ease}.csp-header-collapsed{cursor:pointer}.csp-header-collapsed:hover{background-color:var(--panel-handle-hover)}.csp-header-collapsed:focus{outline:none;box-shadow:inset 0 0 0 2px var(--panel-focus-ring, rgba(59, 130, 246, .5))}.csp-header-icon{display:flex;align-items:center;justify-content:center;color:var(--panel-text-secondary, #888);font-size:14px}.csp-header-title{flex:1;font-size:12px;font-weight:500;color:var(--panel-text, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.csp-header-toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--panel-text-secondary, #888);cursor:pointer;border-radius:3px;transition:background-color .15s ease,color .15s ease}.csp-header-toggle:hover{background-color:var(--panel-button-hover, rgba(128, 128, 128, .2));color:var(--panel-text, #333)}.csp-content-area{flex:1;min-height:0;display:flex;flex-direction:column}.csp-primary-content-full{flex:1;min-height:0;overflow:hidden}.csp-secondary-panel,.csp-primary-panel{overflow:hidden;background-color:var(--panel-background)}.csp-panel-content{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.csp-secondary-body{width:100%;height:100%;overflow:auto}.csp-resize-handle{height:6px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:row-resize;position:relative;transition:background-color .15s ease;flex-shrink:0}.csp-resize-handle:hover{background-color:var(--panel-handle-hover)}.csp-resize-handle:active{background-color:var(--panel-handle-active)}.csp-resize-handle-bar{width:32px;height:3px;background-color:var(--panel-handle-bar, rgba(128, 128, 128, .4));border-radius:2px;transition:background-color .15s ease}.csp-resize-handle:hover .csp-resize-handle-bar{background-color:var(--panel-handle-bar-hover, rgba(128, 128, 128, .6))}.three-panel-layout{height:100%;width:100%;display:flex;flex-direction:column;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item{display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item[data-edit-mode=true]{background-color:var(--panel-accent-bg);border-radius:12px}.three-panel-layout [data-panel]{transition:flex-grow var(--panel-transition-duration, .3s) var(--panel-transition-easing, cubic-bezier(.4, 0, .2, 1))}.three-panel-layout.is-dragging [data-panel],.three-panel-layout.is-mounting [data-panel]{transition:none}.three-panel-item.collapsible-panel{will-change:flex}.three-panel-item.collapsible-panel.collapsed{flex:0!important;min-width:0!important;max-width:0!important;width:0!important;overflow:hidden!important;visibility:hidden}.panel-content-wrapper{flex:1;min-width:0;overflow-x:hidden;overflow-y:auto;will-change:opacity;box-sizing:border-box}.resize-handle{position:relative;display:flex;align-items:center;justify-content:center;width:1px!important;cursor:col-resize;background:var(--panel-border);overflow:visible!important}.resize-handle:before{content:"";position:absolute;inset:0 -10px;background:transparent}.resize-handle:after{content:"";position:absolute;inset:0 -10px;background:var(--panel-handle);opacity:0;transition:opacity .2s ease;z-index:-1}.resize-handle:hover:after{opacity:1}.resize-handle:hover{background:var(--panel-handle-hover)}.resize-handle:active:after{opacity:1;background:var(--panel-handle-active)}.resize-handle:active{background:var(--panel-handle-active)}.resize-handle.collapsed{width:0!important;visibility:hidden}.resize-handle.left-handle.collapsed{margin-right:-1px}.resize-handle.right-handle.collapsed{margin-left:-1px}.handle-bar{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2}.collapse-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:40px;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--panel-button-icon);transition:all .2s ease;z-index:10;padding:0;line-height:1}.collapse-toggle:hover{background:var(--panel-button-hover)}.collapse-toggle:active{opacity:.8}.collapse-toggle:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.resize-handle:before{left:-8px;right:-8px}.resize-handle:after{left:-8px;right:-8px}.collapse-toggle{width:24px;height:48px;font-size:14px}}@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(1deg)}50%{transform:rotate(0)}75%{transform:rotate(-1deg)}to{transform:rotate(0)}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 8px #3b82f600}}.editable-panel-layout{position:relative;width:100%;height:100%}.editable-panel-layout.edit-mode-active{background:#0000000d}[data-slot][data-edit-mode=true]{transform:scale(.95);transform-origin:center center;cursor:grab;will-change:transform;transition:transform .3s cubic-bezier(.4,0,.2,1)}[data-slot][data-edit-mode=true]:active{cursor:grabbing}[data-slot][data-dragging=true]{cursor:grabbing!important;transform:scale(.95)!important;transition:none!important}.edit-mode-active [data-slot][data-edit-mode=true]{transform-origin:center center}.slot-with-overlay{position:relative;width:100%;height:100%}.slot-with-overlay.dragging{opacity:0;pointer-events:none}.slot-edit-overlay{position:absolute;inset:0;background:transparent;border:none;pointer-events:auto;cursor:grab;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.slot-edit-overlay:hover{background:#3b82f608}.slot-edit-overlay:active{cursor:grabbing}.drag-indicator,.slot-position-label{display:none}.edit-mode-toggle{position:absolute;top:16px;right:16px;z-index:1000;padding:8px 16px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.edit-mode-toggle:hover{background:#f9fafb;box-shadow:0 4px 6px #0000001a}.edit-mode-toggle.active{background:#3b82f6;color:#fff;border-color:#2563eb}.edit-mode-overlay{position:fixed;inset:0;background:#0000004d;z-index:998;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.edit-mode-configurator{position:relative;z-index:999;padding:20px;animation:scaleIn .3s ease}.panel-slot{position:relative;min-height:120px;border:2px dashed transparent;border-radius:12px;transition:all .3s ease;padding:12px}.panel-slot.edit-mode{border-color:#d1d5db;background:#ffffff80}.panel-slot.drag-over{border-color:#3b82f6;background:#3b82f61a;box-shadow:0 0 0 4px #3b82f61a}.panel-slot.empty{display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:14px}.draggable-panel{position:relative;padding:12px 16px;margin:8px 0;border-radius:8px;background:#fff;border:1px solid #e5e7eb;cursor:grab;transition:all .2s ease;-webkit-user-select:none;user-select:none}.draggable-panel:hover{border-color:#3b82f6;box-shadow:0 2px 8px #0000001a}.draggable-panel.dragging{opacity:.5;cursor:grabbing}.draggable-panel.edit-mode{animation:wiggle .4s ease-in-out infinite;transform-origin:center}.draggable-panel.edit-mode:nth-child(odd){animation-delay:.1s}.draggable-panel.edit-mode:nth-child(2n){animation-delay:.2s}.remove-button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid white;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:700;opacity:0;transform:scale(0);transition:all .2s ease;z-index:10;box-shadow:0 2px 4px #0003}.draggable-panel.edit-mode .remove-button{opacity:1;transform:scale(1);animation:pulse 2s infinite}.remove-button:hover{background:#dc2626;transform:scale(1.1)}.panel-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#374151}.panel-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.drag-handle{display:none;width:24px;height:24px;opacity:.4;cursor:grab}.edit-mode .drag-handle{display:flex;align-items:center;justify-content:center}.drag-overlay{padding:12px 16px;border-radius:8px;background:#fff;border:2px solid #3b82f6;box-shadow:0 8px 16px #0003;cursor:grabbing;opacity:.9}.panel-group{border:2px solid #e5e7eb;border-radius:12px;padding:8px;background:#fff}.panel-group.edit-mode{animation:wiggle .5s ease-in-out infinite;border-color:#3b82f6}.panel-group-header{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #e5e7eb;margin-bottom:8px}.panel-group-title{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase}.available-panels{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 6px #0000001a}.available-panels-title{font-size:16px;font-weight:600;color:#374151;margin-bottom:12px}.available-panels-list{display:flex;flex-direction:column;gap:8px}.slot-label{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}.slot-indicator{width:8px;height:8px;border-radius:50%;background:#d1d5db}.slot-indicator.active{background:#3b82f6}.action-buttons{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:1001;display:flex;gap:12px;padding:12px 24px;background:#fff;border-radius:12px;box-shadow:0 8px 16px #00000026;animation:scaleIn .3s ease}.action-button{padding:10px 20px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.action-button:hover{background:#f9fafb}.action-button.primary{background:#3b82f6;color:#fff;border-color:#2563eb}.action-button.primary:hover{background:#2563eb}@media(max-width:768px){.edit-mode-toggle{top:8px;right:8px;padding:6px 12px;font-size:12px}.action-buttons{bottom:16px;padding:10px 16px}.action-button{padding:8px 16px;font-size:13px}}@media(prefers-color-scheme:dark){.edit-mode-toggle{background:#1f2937;color:#f9fafb;border-color:#374151}.edit-mode-toggle:hover{background:#374151}.draggable-panel{background:#1f2937;color:#f9fafb;border-color:#374151}.available-panels{background:#1f2937}.panel-label{color:#f9fafb}.action-buttons{background:#1f2937}.action-button{background:#1f2937;color:#f9fafb;border-color:#374151}.action-button:hover{background:#374151}}.panel-configurator{display:flex;flex-direction:column;gap:2rem;padding:1.5rem;background:var(--configurator-bg);border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.configurator-section{display:flex;flex-direction:column;gap:1rem}.section-title{margin:0;font-size:.875rem;font-weight:600;color:var(--configurator-title);text-transform:uppercase;letter-spacing:.05em;text-align:center}.slots-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:75%;margin:0 auto;align-items:start}.slot{position:relative;aspect-ratio:1 / 1.3;width:100%;padding:2.5rem 1rem 1rem;background:var(--slot-bg);border:2px solid var(--slot-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;box-sizing:border-box}.slot:hover{border-color:var(--slot-border-hover);box-shadow:0 2px 4px #0000000d}.slot.selected{border-color:var(--slot-border-selected);background:var(--slot-bg-selected);box-shadow:0 0 0 3px var(--slot-bg-selected)}.slot.empty{border-style:dashed}.slot-label{font-size:.75rem;font-weight:600;color:var(--slot-label);text-transform:capitalize;text-align:left}.slot[data-position=middle] .slot-label,.slot[data-position=middle] .slot-panel-name,.slot[data-position=middle] .slot-empty-state{text-align:center}.slot[data-position=right] .slot-label,.slot[data-position=right] .slot-panel-name,.slot[data-position=right] .slot-empty-state{text-align:right}.slot-content{flex:1;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;min-height:0}.slot-panel-name{font-weight:600;color:var(--slot-content-text);font-size:.875rem}.slot-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--slot-preview-bg);border-radius:4px;border:1px solid var(--slot-preview-border);font-size:.75rem;color:var(--slot-preview-text)}.slot-empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:var(--slot-empty-text);font-size:.875rem;font-style:italic;min-height:0}.slot-clear-btn{position:absolute;top:.25rem;right:.25rem;width:24px;height:24px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:4px;cursor:pointer;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.slot:hover .slot-clear-btn{opacity:1}.slot-clear-btn:hover{background:var(--clear-btn-hover);transform:scale(1.1)}.available-panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;width:75%;margin:0 auto}.available-panel{min-height:80px;padding:.75rem;background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem}.available-panel:hover{border-color:var(--panel-border-hover);box-shadow:0 2px 4px #0000000d;transform:translateY(-2px)}.available-panel.selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 3px var(--panel-bg-selected)}.available-panel.in-use{opacity:.5;border-style:dashed}.available-panel.in-use:hover{transform:translateY(0);opacity:.6}.panel-label{font-weight:600;color:var(--panel-label-text);font-size:.875rem}.panel-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--panel-preview-bg);border-radius:4px;font-size:.75rem;color:var(--panel-preview-text)}.selection-hint{padding:.75rem 1rem;background:var(--hint-bg);border:1px solid var(--hint-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.available-panel.multi-selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 2px var(--panel-bg-selected)}.multi-select-badge{margin-left:.5rem;padding:.25rem .5rem;background:var(--panel-border-selected);color:#fff;font-size:.75rem;border-radius:12px;font-weight:400}.multi-select-hint{background:var(--panel-bg-selected);border-color:var(--panel-border-selected)}.slot.tab-group{border-style:solid}.group-content{position:relative;overflow-y:auto;min-height:0}.group-badge{font-size:.75rem;font-weight:600;color:var(--panel-border-selected);margin-bottom:.5rem}.group-panels{display:flex;flex-direction:column;gap:.25rem;flex:1;overflow-y:auto;min-height:0}.group-panel-label{font-size:.75rem;color:var(--slot-content-text);padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.slot-panel-label{font-weight:600;color:var(--slot-content-text);font-size:.875rem;text-align:center}.create-tab-group-btn{margin-top:.5rem;padding:.5rem .75rem;background:var(--panel-border-selected);color:#fff;border:none;border-radius:4px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease}.create-tab-group-btn:hover{transform:scale(1.05);box-shadow:0 2px 4px #0000001a}.tab-mode-toggle{position:absolute;top:.5rem;left:.5rem;padding:.25rem .5rem;background:var(--slot-bg);border:1px solid var(--slot-border);border-radius:4px;font-size:.85rem;cursor:pointer;transition:all .2s ease;z-index:10;opacity:.7;color:var(--slot-content-text)}.tab-mode-toggle svg{display:block}.tab-mode-toggle:hover{opacity:1;border-color:var(--slot-border-hover);background:var(--slot-preview-bg)}.tab-mode-toggle.active{opacity:1;background:var(--panel-border-selected);color:#fff;border-color:var(--panel-border-selected)}.tab-config-controls{margin-bottom:.5rem}.tab-config-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--slot-label)}.tab-config-label select{padding:.25rem .5rem;border:1px solid var(--slot-border);border-radius:3px;background:var(--slot-bg);color:var(--slot-content-text);font-size:.7rem;cursor:pointer}.group-panel-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.group-panel-label{flex:1;font-size:.75rem;color:var(--slot-content-text);display:flex;align-items:center;gap:.25rem}.default-badge{color:var(--panel-border-selected);font-size:.9em}.remove-from-group-btn{width:18px;height:18px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:3px;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .2s ease}.remove-from-group-btn:hover{opacity:1;transform:scale(1.1)}.usage-hint{padding:.75rem 1rem;background:var(--slot-preview-bg);border:1px solid var(--slot-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.tab-group{display:flex;height:100%;width:100%;overflow:hidden}.tab-group.tab-position-top,.tab-group.tab-position-bottom{flex-direction:column}.tab-group.tab-position-left,.tab-group.tab-position-right{flex-direction:row}.tab-list{display:flex;background:var(--tab-list-bg, #f5f5f5);border-bottom:1px solid var(--tab-border, #ddd);gap:0;padding:0;flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.tab-list::-webkit-scrollbar{display:none}.tab-position-top .tab-list,.tab-position-bottom .tab-list{width:100%}.tab-list.centered{justify-content:flex-start}@media(min-width:0){.tab-list.centered{justify-content:center}.tab-list.centered:has(.tab-button:nth-child(n)){justify-content:flex-start}}.tab-position-bottom .tab-list{border-bottom:none;border-top:none}.tab-position-left .tab-list,.tab-position-right .tab-list{flex-direction:column;border-bottom:none;border-right:none;width:auto;min-width:120px}.tab-position-top .tab-button,.tab-position-bottom .tab-button{flex:1 1 0;min-width:40px;max-width:100%}.tab-button{background:var(--tab-bg, #fff);border:1px solid var(--tab-border, #ddd);border-radius:0;padding:8px 16px;cursor:pointer;font-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 14px);font-weight:var(--tab-font-weight, 500);color:var(--tab-text, #333);transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;height:39px;line-height:1;box-sizing:border-box;container-type:inline-size}.tab-position-top .tab-button{border-bottom:none;border-top:none;border-left:none}.tab-position-top .tab-button:last-child{border-right:none}.tab-position-bottom .tab-button{border-top:none;border-bottom:none;border-left:none}.tab-position-bottom .tab-button:last-child{border-right:none}.tab-position-left .tab-button{border-right:none;border-bottom:none}.tab-position-left .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-position-right .tab-button{border-left:none;border-bottom:none}.tab-position-right .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-icon{display:inline-flex;align-items:center;justify-content:center}.tab-label{display:none}@container (min-width: 100px){.tab-label{display:inline}.tab-icon{display:none}}.tab-button:hover{background:var(--tab-bg-hover, #f9f9f9)}.tab-button.active{background:var(--tab-bg-active, #007bff);color:var(--tab-text-active, #fff);border-color:var(--tab-border-active, #007bff)}.tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:2px}.tab-content{flex:1;overflow:auto;background:var(--tab-content-bg, #fff)}.tab-group-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--tab-empty-text, #999);font-style:italic}.snap-carousel-container{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:var(--snap-carousel-gap, 0px);padding:0;margin:0;width:100%;height:100%;background-color:var(--panel-background);box-sizing:border-box;position:relative;left:0;transform:none;container-type:inline-size;-ms-overflow-style:none;scrollbar-width:none}.snap-carousel-container::-webkit-scrollbar{display:none}.snap-carousel-container.swipe-disabled{touch-action:pan-y pinch-zoom;overscroll-behavior-x:none}.snap-carousel-panel{flex:0 0 auto;scroll-snap-align:start;scroll-snap-stop:always;width:var(--snap-carousel-panel-width, 33.33%);height:100%;box-sizing:border-box;overflow:hidden}@media(max-width:540px){.snap-carousel-panel{min-width:280px}}.mobile-tab-layout{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.mobile-tab-content{flex:1;overflow:hidden;min-height:0}.mobile-tab-nav{display:flex;background:var(--tab-list-bg, #f5f5f5);border-top:1px solid var(--tab-border, #ddd);flex-shrink:0;padding:0;margin:0}.mobile-tab-button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:transparent;border:none;padding:14px 4px;padding-bottom:calc(14px + min(12px,env(safe-area-inset-bottom,0px)));cursor:pointer;font-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 11px);font-weight:var(--tab-font-weight, 500);color:var(--tab-text, #666);transition:color .2s ease;min-width:0}.mobile-tab-button:hover{color:var(--tab-text-hover, #333)}.mobile-tab-button.active{color:var(--mobile-tab-text-active, #007bff)}.mobile-tab-button .tab-icon{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--tab-icon-color, #999);transition:color .2s ease}.mobile-tab-button.active .tab-icon{color:var(--mobile-tab-icon-active, #007bff)}.mobile-tab-button .tab-label{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2;color:inherit;opacity:1}.mobile-tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:-2px;z-index:1}:root{--panels-background: #ffffff;--panels-foreground: #000000;--panels-border: #e5e7eb;--panels-handle-bg: #f3f4f6;--panels-handle-hover: #e5e7eb;--panels-handle-active: #d1d5db;--panels-button-bg: #ffffff;--panels-button-hover: #f9fafb;--panels-button-active: #f3f4f6;--panels-shadow: rgba(0, 0, 0, .1);--panels-animation-duration: .3s;--panels-animation-easing: cubic-bezier(.4, 0, .2, 1)}@media(prefers-color-scheme:dark){:root{--panels-background: #1a1a1a;--panels-foreground: #ffffff;--panels-border: #404040;--panels-handle-bg: #2a2a2a;--panels-handle-hover: #333333;--panels-handle-active: #404040;--panels-button-bg: #2a2a2a;--panels-button-hover: #333333;--panels-button-active: #404040;--panels-shadow: rgba(0, 0, 0, .3)}}[data-theme=light]{--panels-background: #ffffff;--panels-foreground: #000000;--panels-border: #e5e7eb;--panels-handle-bg: #f3f4f6;--panels-handle-hover: #e5e7eb;--panels-handle-active: #d1d5db;--panels-button-bg: #ffffff;--panels-button-hover: #f9fafb;--panels-button-active: #f3f4f6;--panels-shadow: rgba(0, 0, 0, .1)}[data-theme=dark]{--panels-background: #1a1a1a;--panels-foreground: #ffffff;--panels-border: #404040;--panels-handle-bg: #2a2a2a;--panels-handle-hover: #333333;--panels-handle-active: #404040;--panels-button-bg: #2a2a2a;--panels-button-hover: #333333;--panels-button-active: #404040;--panels-shadow: rgba(0, 0, 0, .3)}.panels-container{width:100%;height:100%;display:flex;background-color:var(--panels-background);color:var(--panels-foreground);position:relative}.panels-panel{position:relative;overflow:auto;background-color:var(--panels-background)}.panels-handle{background-color:var(--panels-handle-bg);transition:background-color .15s ease;position:relative;z-index:10}.panels-handle:hover{background-color:var(--panels-handle-hover)}.panels-handle:active{background-color:var(--panels-handle-active)}.panels-handle-horizontal{width:8px;cursor:col-resize}.panels-handle-vertical{height:8px;cursor:row-resize}.panels-handle-collapsed{width:1px!important;min-width:1px!important;background-color:var(--panels-border)!important;cursor:default!important;pointer-events:none}.panels-handle-collapsed .panels-collapse-button{pointer-events:auto}.panels-collapse-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:4px;background-color:var(--panels-button-bg);border:1px solid var(--panels-border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;box-shadow:0 1px 3px var(--panels-shadow);z-index:20}.panels-collapse-button:hover{background-color:var(--panels-button-hover);transform:translate(-50%,-50%) scale(1.1)}.panels-collapse-button:active{background-color:var(--panels-button-active);transform:translate(-50%,-50%) scale(.95)}.panels-collapse-button-floating{position:absolute;left:-12px;z-index:30}.panels-collapse-icon{width:16px;height:16px;stroke:var(--panels-foreground);stroke-width:2;fill:none;transition:transform .15s ease}.panels-content-fade{transition:opacity var(--panels-animation-duration) var(--panels-animation-easing)}.panels-content-fading{opacity:.3}.panels-content-hidden{opacity:0}.panels-animating{pointer-events:none}@media(max-width:768px){.panels-handle-horizontal{width:4px}.panels-handle-vertical{height:4px}.panels-collapse-button{width:20px;height:20px}.panels-collapse-icon{width:12px;height:12px}}.panels-mobile-stack{display:flex;flex-direction:column;gap:1rem;padding:1rem}.panels-mobile-panel{border:1px solid var(--panels-border);border-radius:8px;padding:1rem}.panels-tabs-header{display:flex;border-bottom:1px solid var(--panels-border);background-color:var(--panels-handle-bg)}.panels-tab{flex:1;padding:.75rem 1rem;background:none;border:none;color:var(--panels-foreground);cursor:pointer;transition:background-color .15s ease;position:relative}.panels-tab:hover{background-color:var(--panels-handle-hover)}.panels-tab-active{background-color:var(--panels-background)}.panels-tab-active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--panels-foreground)}.panels-drawer-toggle{position:fixed;top:1rem;left:1rem;z-index:100;width:40px;height:40px;border-radius:8px;background-color:var(--panels-button-bg);border:1px solid var(--panels-border);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px var(--panels-shadow)}.panels-drawer-icon{width:24px;height:24px}.panels-drawer{position:fixed;top:0;left:0;bottom:0;width:300px;background-color:var(--panels-background);border-right:1px solid var(--panels-border);transform:translate(-100%);transition:transform var(--panels-animation-duration) var(--panels-animation-easing);z-index:90;overflow-y:auto}.panels-drawer-open{transform:translate(0)}.panels-drawer-panel,.panels-main-panel{padding:4rem 1rem 1rem}'));
+      elementStyle.appendChild(document.createTextNode('.animated-resizable-layout{flex:1;min-height:0;height:100%;width:100%;position:relative;background-color:var(--panel-background)}.hybrid-panel{display:flex;flex-direction:column;overflow:hidden;height:100%;background-color:var(--panel-background)}.animated-resizable-layout .panel-content-wrapper{flex:1;min-width:0;min-height:0;width:100%;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;will-change:opacity}.resize-handle{width:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:col-resize;position:relative;transition:background-color .2s,opacity .3s,width .3s}.resize-handle.collapsed{opacity:0;pointer-events:none}.resize-handle:hover{background-color:var(--panel-handle-hover)}.resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.collapse-toggle{position:absolute;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.animated-vertical-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.vertical-panel{overflow:auto;width:100%;background-color:var(--panel-background)}.panel-content-wrapper{width:100%;height:100%;overflow:auto}.vertical-resize-handle{height:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:row-resize;position:relative;transition:background-color .2s,opacity .3s,height .3s}.vertical-resize-handle.collapsed{opacity:0;pointer-events:none}.vertical-resize-handle:hover{background-color:var(--panel-handle-hover)}.vertical-resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}.collapse-toggle{background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.collapse-toggle:hover:not(:disabled){background-color:var(--panel-button-hover);box-shadow:0 2px 6px #00000026}.collapse-toggle:active:not(:disabled){opacity:.8}.collapsible-split-pane{width:100%;height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--panel-background)}.csp-header{display:flex;align-items:center;gap:8px;padding:0 12px;background-color:var(--panel-handle);border-bottom:1px solid var(--panel-border, rgba(128, 128, 128, .2));-webkit-user-select:none;user-select:none;flex-shrink:0;transition:background-color .15s ease}.csp-header-collapsed{cursor:pointer}.csp-header-collapsed:hover{background-color:var(--panel-handle-hover)}.csp-header-collapsed:focus{outline:none;box-shadow:inset 0 0 0 2px var(--panel-focus-ring, rgba(59, 130, 246, .5))}.csp-header-icon{display:flex;align-items:center;justify-content:center;color:var(--panel-text-secondary, #888);font-size:14px}.csp-header-title{flex:1;font-size:12px;font-weight:500;color:var(--panel-text, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.csp-header-toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--panel-text-secondary, #888);cursor:pointer;border-radius:3px;transition:background-color .15s ease,color .15s ease}.csp-header-toggle:hover{background-color:var(--panel-button-hover, rgba(128, 128, 128, .2));color:var(--panel-text, #333)}.csp-content-area{flex:1;min-height:0;display:flex;flex-direction:column}.csp-primary-content-full{flex:1;min-height:0;overflow:hidden}.csp-secondary-panel,.csp-primary-panel{overflow:hidden;background-color:var(--panel-background)}.csp-panel-content{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.csp-secondary-body{width:100%;height:100%;overflow:auto}.csp-resize-handle{height:6px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:row-resize;position:relative;transition:background-color .15s ease;flex-shrink:0}.csp-resize-handle:hover{background-color:var(--panel-handle-hover)}.csp-resize-handle:active{background-color:var(--panel-handle-active)}.csp-resize-handle-bar{width:32px;height:3px;background-color:var(--panel-handle-bar, rgba(128, 128, 128, .4));border-radius:2px;transition:background-color .15s ease}.csp-resize-handle:hover .csp-resize-handle-bar{background-color:var(--panel-handle-bar-hover, rgba(128, 128, 128, .6))}.three-panel-layout{height:100%;width:100%;display:flex;flex-direction:column;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item{display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item[data-edit-mode=true]{background-color:var(--panel-accent-bg);border-radius:12px}.three-panel-layout [data-panel]{transition:flex-grow var(--panel-transition-duration, .3s) var(--panel-transition-easing, cubic-bezier(.4, 0, .2, 1))}.three-panel-layout.is-dragging [data-panel],.three-panel-layout.is-mounting [data-panel]{transition:none}.three-panel-item.collapsible-panel{will-change:flex}.three-panel-item.collapsible-panel.collapsed{flex:0!important;min-width:0!important;max-width:0!important;width:0!important;overflow:hidden!important;visibility:hidden}.panel-content-wrapper{flex:1;min-width:0;overflow-x:hidden;overflow-y:auto;will-change:opacity;box-sizing:border-box}.resize-handle{position:relative;display:flex;align-items:center;justify-content:center;width:1px!important;cursor:col-resize;background:var(--panel-border);overflow:visible!important}.resize-handle:before{content:"";position:absolute;inset:0 -10px;background:transparent}.resize-handle:after{content:"";position:absolute;inset:0 -10px;background:var(--panel-handle);opacity:0;transition:opacity .2s ease;z-index:-1}.resize-handle:hover:after{opacity:1}.resize-handle:hover{background:var(--panel-handle-hover)}.resize-handle:active:after{opacity:1;background:var(--panel-handle-active)}.resize-handle:active{background:var(--panel-handle-active)}.resize-handle.collapsed{width:0!important;visibility:hidden}.resize-handle.left-handle.collapsed{margin-right:-1px}.resize-handle.right-handle.collapsed{margin-left:-1px}.handle-bar{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2}.collapse-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:40px;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--panel-button-icon);transition:all .2s ease;z-index:10;padding:0;line-height:1}.collapse-toggle:hover{background:var(--panel-button-hover)}.collapse-toggle:active{opacity:.8}.collapse-toggle:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.resize-handle:before{left:-8px;right:-8px}.resize-handle:after{left:-8px;right:-8px}.collapse-toggle{width:24px;height:48px;font-size:14px}}@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(1deg)}50%{transform:rotate(0)}75%{transform:rotate(-1deg)}to{transform:rotate(0)}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 8px #3b82f600}}.editable-panel-layout{position:relative;width:100%;height:100%}.editable-panel-layout.edit-mode-active{background:#0000000d}[data-slot][data-edit-mode=true]{transform:scale(.95);transform-origin:center center;cursor:grab;will-change:transform;transition:transform .3s cubic-bezier(.4,0,.2,1)}[data-slot][data-edit-mode=true]:active{cursor:grabbing}[data-slot][data-dragging=true]{cursor:grabbing!important;transform:scale(.95)!important;transition:none!important}.edit-mode-active [data-slot][data-edit-mode=true]{transform-origin:center center}.slot-with-overlay{position:relative;width:100%;height:100%}.slot-with-overlay.dragging{opacity:0;pointer-events:none}.slot-edit-overlay{position:absolute;inset:0;background:transparent;border:none;pointer-events:auto;cursor:grab;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.slot-edit-overlay:hover{background:#3b82f608}.slot-edit-overlay:active{cursor:grabbing}.drag-indicator,.slot-position-label{display:none}.edit-mode-toggle{position:absolute;top:16px;right:16px;z-index:1000;padding:8px 16px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.edit-mode-toggle:hover{background:#f9fafb;box-shadow:0 4px 6px #0000001a}.edit-mode-toggle.active{background:#3b82f6;color:#fff;border-color:#2563eb}.edit-mode-overlay{position:fixed;inset:0;background:#0000004d;z-index:998;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.edit-mode-configurator{position:relative;z-index:999;padding:20px;animation:scaleIn .3s ease}.panel-slot{position:relative;min-height:120px;border:2px dashed transparent;border-radius:12px;transition:all .3s ease;padding:12px}.panel-slot.edit-mode{border-color:#d1d5db;background:#ffffff80}.panel-slot.drag-over{border-color:#3b82f6;background:#3b82f61a;box-shadow:0 0 0 4px #3b82f61a}.panel-slot.empty{display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:14px}.draggable-panel{position:relative;padding:12px 16px;margin:8px 0;border-radius:8px;background:#fff;border:1px solid #e5e7eb;cursor:grab;transition:all .2s ease;-webkit-user-select:none;user-select:none}.draggable-panel:hover{border-color:#3b82f6;box-shadow:0 2px 8px #0000001a}.draggable-panel.dragging{opacity:.5;cursor:grabbing}.draggable-panel.edit-mode{animation:wiggle .4s ease-in-out infinite;transform-origin:center}.draggable-panel.edit-mode:nth-child(odd){animation-delay:.1s}.draggable-panel.edit-mode:nth-child(2n){animation-delay:.2s}.remove-button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid white;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:700;opacity:0;transform:scale(0);transition:all .2s ease;z-index:10;box-shadow:0 2px 4px #0003}.draggable-panel.edit-mode .remove-button{opacity:1;transform:scale(1);animation:pulse 2s infinite}.remove-button:hover{background:#dc2626;transform:scale(1.1)}.panel-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#374151}.panel-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.drag-handle{display:none;width:24px;height:24px;opacity:.4;cursor:grab}.edit-mode .drag-handle{display:flex;align-items:center;justify-content:center}.drag-overlay{padding:12px 16px;border-radius:8px;background:#fff;border:2px solid #3b82f6;box-shadow:0 8px 16px #0003;cursor:grabbing;opacity:.9}.panel-group{border:2px solid #e5e7eb;border-radius:12px;padding:8px;background:#fff}.panel-group.edit-mode{animation:wiggle .5s ease-in-out infinite;border-color:#3b82f6}.panel-group-header{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #e5e7eb;margin-bottom:8px}.panel-group-title{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase}.available-panels{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 6px #0000001a}.available-panels-title{font-size:16px;font-weight:600;color:#374151;margin-bottom:12px}.available-panels-list{display:flex;flex-direction:column;gap:8px}.slot-label{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}.slot-indicator{width:8px;height:8px;border-radius:50%;background:#d1d5db}.slot-indicator.active{background:#3b82f6}.action-buttons{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:1001;display:flex;gap:12px;padding:12px 24px;background:#fff;border-radius:12px;box-shadow:0 8px 16px #00000026;animation:scaleIn .3s ease}.action-button{padding:10px 20px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.action-button:hover{background:#f9fafb}.action-button.primary{background:#3b82f6;color:#fff;border-color:#2563eb}.action-button.primary:hover{background:#2563eb}@media(max-width:768px){.edit-mode-toggle{top:8px;right:8px;padding:6px 12px;font-size:12px}.action-buttons{bottom:16px;padding:10px 16px}.action-button{padding:8px 16px;font-size:13px}}@media(prefers-color-scheme:dark){.edit-mode-toggle{background:#1f2937;color:#f9fafb;border-color:#374151}.edit-mode-toggle:hover{background:#374151}.draggable-panel{background:#1f2937;color:#f9fafb;border-color:#374151}.available-panels{background:#1f2937}.panel-label{color:#f9fafb}.action-buttons{background:#1f2937}.action-button{background:#1f2937;color:#f9fafb;border-color:#374151}.action-button:hover{background:#374151}}.panel-configurator{display:flex;flex-direction:column;gap:2rem;padding:1.5rem;background:var(--configurator-bg);border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.configurator-section{display:flex;flex-direction:column;gap:1rem}.section-title{margin:0;font-size:.875rem;font-weight:600;color:var(--configurator-title);text-transform:uppercase;letter-spacing:.05em;text-align:center}.slots-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:75%;margin:0 auto;align-items:start}.slot{position:relative;aspect-ratio:1 / 1.3;width:100%;padding:2.5rem 1rem 1rem;background:var(--slot-bg);border:2px solid var(--slot-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;box-sizing:border-box}.slot:hover{border-color:var(--slot-border-hover);box-shadow:0 2px 4px #0000000d}.slot.selected{border-color:var(--slot-border-selected);background:var(--slot-bg-selected);box-shadow:0 0 0 3px var(--slot-bg-selected)}.slot.empty{border-style:dashed}.slot-label{font-size:.75rem;font-weight:600;color:var(--slot-label);text-transform:capitalize;text-align:left}.slot[data-position=middle] .slot-label,.slot[data-position=middle] .slot-panel-name,.slot[data-position=middle] .slot-empty-state{text-align:center}.slot[data-position=right] .slot-label,.slot[data-position=right] .slot-panel-name,.slot[data-position=right] .slot-empty-state{text-align:right}.slot-content{flex:1;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;min-height:0}.slot-panel-name{font-weight:600;color:var(--slot-content-text);font-size:.875rem}.slot-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--slot-preview-bg);border-radius:4px;border:1px solid var(--slot-preview-border);font-size:.75rem;color:var(--slot-preview-text)}.slot-empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:var(--slot-empty-text);font-size:.875rem;font-style:italic;min-height:0}.slot-clear-btn{position:absolute;top:.25rem;right:.25rem;width:24px;height:24px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:4px;cursor:pointer;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.slot:hover .slot-clear-btn{opacity:1}.slot-clear-btn:hover{background:var(--clear-btn-hover);transform:scale(1.1)}.available-panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;width:75%;margin:0 auto}.available-panel{min-height:80px;padding:.75rem;background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem}.available-panel:hover{border-color:var(--panel-border-hover);box-shadow:0 2px 4px #0000000d;transform:translateY(-2px)}.available-panel.selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 3px var(--panel-bg-selected)}.available-panel.in-use{opacity:.5;border-style:dashed}.available-panel.in-use:hover{transform:translateY(0);opacity:.6}.panel-label{font-weight:600;color:var(--panel-label-text);font-size:.875rem}.panel-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--panel-preview-bg);border-radius:4px;font-size:.75rem;color:var(--panel-preview-text)}.selection-hint{padding:.75rem 1rem;background:var(--hint-bg);border:1px solid var(--hint-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.available-panel.multi-selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 2px var(--panel-bg-selected)}.multi-select-badge{margin-left:.5rem;padding:.25rem .5rem;background:var(--panel-border-selected);color:#fff;font-size:.75rem;border-radius:12px;font-weight:400}.multi-select-hint{background:var(--panel-bg-selected);border-color:var(--panel-border-selected)}.slot.tab-group{border-style:solid}.group-content{position:relative;overflow-y:auto;min-height:0}.group-badge{font-size:.75rem;font-weight:600;color:var(--panel-border-selected);margin-bottom:.5rem}.group-panels{display:flex;flex-direction:column;gap:.25rem;flex:1;overflow-y:auto;min-height:0}.group-panel-label{font-size:.75rem;color:var(--slot-content-text);padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.slot-panel-label{font-weight:600;color:var(--slot-content-text);font-size:.875rem;text-align:center}.create-tab-group-btn{margin-top:.5rem;padding:.5rem .75rem;background:var(--panel-border-selected);color:#fff;border:none;border-radius:4px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease}.create-tab-group-btn:hover{transform:scale(1.05);box-shadow:0 2px 4px #0000001a}.tab-mode-toggle{position:absolute;top:.5rem;left:.5rem;padding:.25rem .5rem;background:var(--slot-bg);border:1px solid var(--slot-border);border-radius:4px;font-size:.85rem;cursor:pointer;transition:all .2s ease;z-index:10;opacity:.7;color:var(--slot-content-text)}.tab-mode-toggle svg{display:block}.tab-mode-toggle:hover{opacity:1;border-color:var(--slot-border-hover);background:var(--slot-preview-bg)}.tab-mode-toggle.active{opacity:1;background:var(--panel-border-selected);color:#fff;border-color:var(--panel-border-selected)}.tab-config-controls{margin-bottom:.5rem}.tab-config-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--slot-label)}.tab-config-label select{padding:.25rem .5rem;border:1px solid var(--slot-border);border-radius:3px;background:var(--slot-bg);color:var(--slot-content-text);font-size:.7rem;cursor:pointer}.group-panel-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.group-panel-label{flex:1;font-size:.75rem;color:var(--slot-content-text);display:flex;align-items:center;gap:.25rem}.default-badge{color:var(--panel-border-selected);font-size:.9em}.remove-from-group-btn{width:18px;height:18px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:3px;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .2s ease}.remove-from-group-btn:hover{opacity:1;transform:scale(1.1)}.usage-hint{padding:.75rem 1rem;background:var(--slot-preview-bg);border:1px solid var(--slot-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.tab-group{display:flex;height:100%;width:100%;overflow:hidden}.tab-group.tab-position-top,.tab-group.tab-position-bottom{flex-direction:column}.tab-group.tab-position-left,.tab-group.tab-position-right{flex-direction:row}.tab-list{display:flex;background:var(--tab-list-bg, #f5f5f5);border-bottom:1px solid var(--tab-border, #ddd);gap:0;padding:0;flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.tab-list::-webkit-scrollbar{display:none}.tab-position-top .tab-list,.tab-position-bottom .tab-list{width:100%}.tab-list.centered{justify-content:flex-start}@media(min-width:0){.tab-list.centered{justify-content:center}.tab-list.centered:has(.tab-button:nth-child(n)){justify-content:flex-start}}.tab-position-bottom .tab-list{border-bottom:none;border-top:none}.tab-position-left .tab-list,.tab-position-right .tab-list{flex-direction:column;border-bottom:none;border-right:none;width:auto;min-width:120px}.tab-position-top .tab-button,.tab-position-bottom .tab-button{flex:1 1 0;min-width:40px;max-width:100%}.tab-button{background:var(--tab-bg, #fff);border:1px solid var(--tab-border, #ddd);border-radius:0;padding:8px 16px;cursor:pointer;font-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 14px);font-weight:var(--tab-font-weight, 500);color:var(--tab-text, #333);transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;height:39px;line-height:1;box-sizing:border-box;container-type:inline-size}.tab-position-top .tab-button{border-bottom:none;border-top:none;border-left:none}.tab-position-top .tab-button:last-child{border-right:none}.tab-position-bottom .tab-button{border-top:none;border-bottom:none;border-left:none}.tab-position-bottom .tab-button:last-child{border-right:none}.tab-position-left .tab-button{border-right:none;border-bottom:none}.tab-position-left .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-position-right .tab-button{border-left:none;border-bottom:none}.tab-position-right .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-icon{display:inline-flex;align-items:center;justify-content:center}.tab-label{display:none}@container (min-width: 100px){.tab-label{display:inline}.tab-icon{display:none}}.tab-button:hover{background:var(--tab-bg-hover, #f9f9f9)}.tab-button.active{background:var(--tab-bg-active, #007bff);color:var(--tab-text-active, #fff);border-color:var(--tab-border-active, #007bff)}.tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:2px}.tab-content{flex:1;overflow:auto;background:var(--tab-content-bg, #fff)}.tab-group-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--tab-empty-text, #999);font-style:italic}.snap-carousel-container{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:var(--snap-carousel-gap, 0px);padding:0;margin:0;width:100%;height:100%;background-color:var(--panel-background);box-sizing:border-box;position:relative;left:0;transform:none;container-type:inline-size;-ms-overflow-style:none;scrollbar-width:none}.snap-carousel-container::-webkit-scrollbar{display:none}.snap-carousel-container.swipe-disabled{touch-action:pan-y pinch-zoom;overscroll-behavior-x:none}.snap-carousel-panel{flex:0 0 auto;scroll-snap-align:start;scroll-snap-stop:always;width:var(--snap-carousel-panel-width, 33.33%);height:100%;box-sizing:border-box;overflow:hidden}@media(max-width:540px){.snap-carousel-panel{min-width:280px}}.mobile-tab-layout{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.mobile-tab-content{flex:1;overflow:hidden;min-height:0}.mobile-tab-nav{display:flex;background:var(--tab-list-bg, #f5f5f5);border-top:1px solid var(--tab-border, #ddd);flex-shrink:0;padding:0;margin:0}.mobile-tab-button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:transparent;border:none;padding:14px 4px;padding-bottom:calc(14px + min(12px,env(safe-area-inset-bottom,0px)));cursor:pointer;font-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 11px);font-weight:var(--tab-font-weight, 500);color:var(--tab-text, #666);transition:color .2s ease;min-width:0}.mobile-tab-button:hover{color:var(--tab-text-hover, #333)}.mobile-tab-button.active{color:var(--mobile-tab-text-active, #007bff)}.mobile-tab-button .tab-icon{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--tab-icon-color, #999);transition:color .2s ease}.mobile-tab-button.active .tab-icon{color:var(--mobile-tab-icon-active, #007bff)}.mobile-tab-button .tab-label{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2;color:inherit;opacity:1}.mobile-tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:-2px;z-index:1}:root{--panels-background: #ffffff;--panels-foreground: #000000;--panels-border: #e5e7eb;--panels-handle-bg: #f3f4f6;--panels-handle-hover: #e5e7eb;--panels-handle-active: #d1d5db;--panels-button-bg: #ffffff;--panels-button-hover: #f9fafb;--panels-button-active: #f3f4f6;--panels-shadow: rgba(0, 0, 0, .1);--panels-animation-duration: .3s;--panels-animation-easing: cubic-bezier(.4, 0, .2, 1)}@media(prefers-color-scheme:dark){:root{--panels-background: #1a1a1a;--panels-foreground: #ffffff;--panels-border: #404040;--panels-handle-bg: #2a2a2a;--panels-handle-hover: #333333;--panels-handle-active: #404040;--panels-button-bg: #2a2a2a;--panels-button-hover: #333333;--panels-button-active: #404040;--panels-shadow: rgba(0, 0, 0, .3)}}[data-theme=light]{--panels-background: #ffffff;--panels-foreground: #000000;--panels-border: #e5e7eb;--panels-handle-bg: #f3f4f6;--panels-handle-hover: #e5e7eb;--panels-handle-active: #d1d5db;--panels-button-bg: #ffffff;--panels-button-hover: #f9fafb;--panels-button-active: #f3f4f6;--panels-shadow: rgba(0, 0, 0, .1)}[data-theme=dark]{--panels-background: #1a1a1a;--panels-foreground: #ffffff;--panels-border: #404040;--panels-handle-bg: #2a2a2a;--panels-handle-hover: #333333;--panels-handle-active: #404040;--panels-button-bg: #2a2a2a;--panels-button-hover: #333333;--panels-button-active: #404040;--panels-shadow: rgba(0, 0, 0, .3)}.panels-container{width:100%;height:100%;display:flex;background-color:var(--panels-background);color:var(--panels-foreground);position:relative}.panels-panel{position:relative;overflow:auto;background-color:var(--panels-background)}.panels-handle{background-color:var(--panels-handle-bg);transition:background-color .15s ease;position:relative;z-index:10}.panels-handle:hover{background-color:var(--panels-handle-hover)}.panels-handle:active{background-color:var(--panels-handle-active)}.panels-handle-horizontal{width:8px;cursor:col-resize}.panels-handle-vertical{height:8px;cursor:row-resize}.panels-handle-collapsed{width:1px!important;min-width:1px!important;background-color:var(--panels-border)!important;cursor:default!important;pointer-events:none}.panels-handle-collapsed .panels-collapse-button{pointer-events:auto}.panels-collapse-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:4px;background-color:var(--panels-button-bg);border:1px solid var(--panels-border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;box-shadow:0 1px 3px var(--panels-shadow);z-index:20}.panels-collapse-button:hover{background-color:var(--panels-button-hover);transform:translate(-50%,-50%) scale(1.1)}.panels-collapse-button:active{background-color:var(--panels-button-active);transform:translate(-50%,-50%) scale(.95)}.panels-collapse-button-floating{position:absolute;left:-12px;z-index:30}.panels-collapse-icon{width:16px;height:16px;stroke:var(--panels-foreground);stroke-width:2;fill:none;transition:transform .15s ease}.panels-content-fade{transition:opacity var(--panels-animation-duration) var(--panels-animation-easing)}.panels-content-fading{opacity:.3}.panels-content-hidden{opacity:0}.panels-animating{pointer-events:none}@media(max-width:768px){.panels-handle-horizontal{width:4px}.panels-handle-vertical{height:4px}.panels-collapse-button{width:20px;height:20px}.panels-collapse-icon{width:12px;height:12px}}.panels-mobile-stack{display:flex;flex-direction:column;gap:1rem;padding:1rem}.panels-mobile-panel{border:1px solid var(--panels-border);border-radius:8px;padding:1rem}.panels-tabs-header{display:flex;border-bottom:1px solid var(--panels-border);background-color:var(--panels-handle-bg)}.panels-tab{flex:1;padding:.75rem 1rem;background:none;border:none;color:var(--panels-foreground);cursor:pointer;transition:background-color .15s ease;position:relative}.panels-tab:hover{background-color:var(--panels-handle-hover)}.panels-tab-active{background-color:var(--panels-background)}.panels-tab-active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--panels-foreground)}.panels-drawer-toggle{position:fixed;top:1rem;left:1rem;z-index:100;width:40px;height:40px;border-radius:8px;background-color:var(--panels-button-bg);border:1px solid var(--panels-border);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px var(--panels-shadow)}.panels-drawer-icon{width:24px;height:24px}.panels-drawer{position:fixed;top:0;left:0;bottom:0;width:300px;background-color:var(--panels-background);border-right:1px solid var(--panels-border);transform:translate(-100%);transition:transform var(--panels-animation-duration) var(--panels-animation-easing);z-index:90;overflow-y:auto}.panels-drawer-open{transform:translate(0)}.panels-drawer-panel,.panels-main-panel{padding:4rem 1rem 1rem}\n.animated-resizable-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.hybrid-panel{overflow:auto;height:100%;background-color:var(--panel-background)}.resize-handle{width:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:col-resize;position:relative;transition:background-color .2s,opacity .3s,width .3s}.resize-handle.collapsed{opacity:0;pointer-events:none}.resize-handle:hover{background-color:var(--panel-handle-hover)}.resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.collapse-toggle{position:absolute;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.animated-vertical-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.vertical-panel{overflow:auto;width:100%;background-color:var(--panel-background)}.panel-content-wrapper{width:100%;height:100%;overflow:auto}.vertical-resize-handle{height:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:row-resize;position:relative;transition:background-color .2s,opacity .3s,height .3s}.vertical-resize-handle.collapsed{opacity:0;pointer-events:none}.vertical-resize-handle:hover{background-color:var(--panel-handle-hover)}.vertical-resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}.collapse-toggle{background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.collapse-toggle:hover:not(:disabled){background-color:var(--panel-button-hover);box-shadow:0 2px 6px #00000026}.collapse-toggle:active:not(:disabled){opacity:.8}.tab-group{display:flex;height:100%;width:100%;overflow:hidden}.tab-group.tab-position-top,.tab-group.tab-position-bottom{flex-direction:column}.tab-group.tab-position-left,.tab-group.tab-position-right{flex-direction:row}.tab-list{display:flex;background:var(--tab-list-bg, #f5f5f5);border-bottom:1px solid var(--tab-border, #ddd);gap:0;padding:0;flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.tab-list::-webkit-scrollbar{display:none}.tab-position-top .tab-list,.tab-position-bottom .tab-list{width:100%}.tab-list.centered{justify-content:flex-start}@media (min-width: 0){.tab-list.centered{justify-content:center}.tab-list.centered:has(.tab-button:nth-child(n)){justify-content:flex-start}}.tab-position-bottom .tab-list{border-bottom:none;border-top:none}.tab-position-left .tab-list,.tab-position-right .tab-list{flex-direction:column;border-bottom:none;border-right:none;width:auto;min-width:120px}.tab-position-top .tab-button,.tab-position-bottom .tab-button{flex:1 1 0;min-width:40px;max-width:100%}.tab-button{background:var(--tab-bg, #fff);border:1px solid var(--tab-border, #ddd);border-radius:0;padding:8px 16px;cursor:pointer;font-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 14px);font-weight:var(--tab-font-weight, 500);color:var(--tab-text, #333);transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;height:39px;line-height:1;box-sizing:border-box;container-type:inline-size}.tab-position-top .tab-button{border-bottom:none;border-top:none;border-left:none}.tab-position-top .tab-button:last-child{border-right:none}.tab-position-bottom .tab-button{border-top:none;border-bottom:none;border-left:none}.tab-position-bottom .tab-button:last-child{border-right:none}.tab-position-left .tab-button{border-right:none;border-bottom:none}.tab-position-left .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-position-right .tab-button{border-left:none;border-bottom:none}.tab-position-right .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-icon{display:inline-flex;align-items:center;justify-content:center}.tab-label{display:none}@container (min-width: 100px){.tab-label{display:inline}.tab-icon{display:none}}.tab-button:hover{background:var(--tab-bg-hover, #f9f9f9)}.tab-button.active{background:var(--tab-bg-active, #007bff);color:var(--tab-text-active, #fff);border-color:var(--tab-border-active, #007bff)}.tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:2px}.tab-content{flex:1;overflow:auto;background:var(--tab-content-bg, #fff)}.tab-group-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--tab-empty-text, #999);font-style:italic}.three-panel-layout{height:100%;width:100%;display:flex;flex-direction:column;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item{display:flex;flex-direction:column;overflow:hidden;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item[data-edit-mode=true]{background-color:var(--panel-accent-bg);border-radius:12px}.three-panel-item.collapsible-panel{will-change:flex}.three-panel-item.collapsible-panel.animating{pointer-events:none}.three-panel-item.collapsible-panel.collapsed{flex:0!important;min-width:0!important;max-width:0!important;width:0!important;overflow:hidden!important;visibility:hidden}.three-panel-item.middle-panel{flex:1;min-width:200px}.panel-content-wrapper{flex:1;overflow-x:hidden;overflow-y:auto;will-change:opacity;box-sizing:border-box}.resize-handle{position:relative;display:flex;align-items:center;justify-content:center;width:1px!important;cursor:col-resize;background:var(--panel-border);overflow:visible!important}.resize-handle:before{content:"";position:absolute;top:0;right:-10px;bottom:0;left:-10px;background:transparent}.resize-handle:after{content:"";position:absolute;top:0;right:-10px;bottom:0;left:-10px;background:var(--panel-handle);opacity:0;transition:opacity .2s ease;z-index:-1}.resize-handle:hover:after{opacity:1}.resize-handle:hover{background:var(--panel-handle-hover)}.resize-handle:active:after{opacity:1;background:var(--panel-handle-active)}.resize-handle:active{background:var(--panel-handle-active)}.resize-handle.collapsed{width:0!important;visibility:hidden}.resize-handle.left-handle.collapsed{margin-right:-1px}.resize-handle.right-handle.collapsed{margin-left:-1px}.handle-bar{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2}.collapse-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:40px;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--panel-button-icon);transition:all .2s ease;z-index:10;padding:0;line-height:1}.collapse-toggle:hover{background:var(--panel-button-hover)}.collapse-toggle:active{opacity:.8}.collapse-toggle:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.resize-handle:before{left:-8px;right:-8px}.resize-handle:after{left:-8px;right:-8px}.collapse-toggle{width:24px;height:48px;font-size:14px}}.snap-carousel-container{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:var(--snap-carousel-gap, 0px);padding:0;margin:0;width:100%;height:100%;background-color:var(--panel-background);box-sizing:border-box;position:relative;left:0;transform:none;container-type:inline-size;-ms-overflow-style:none;scrollbar-width:none}.snap-carousel-container::-webkit-scrollbar{display:none}.snap-carousel-container.swipe-disabled{touch-action:pan-y pinch-zoom;overscroll-behavior-x:none}.snap-carousel-panel{flex:0 0 auto;scroll-snap-align:start;scroll-snap-stop:always;width:var(--snap-carousel-panel-width, 33.33%);height:100%;box-sizing:border-box;overflow:hidden}@media (max-width: 540px){.snap-carousel-panel{min-width:280px}}.mobile-tab-layout{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.mobile-tab-content{flex:1;overflow:hidden;min-height:0}.mobile-tab-nav{display:flex;background:var(--tab-list-bg, #f5f5f5);border-top:1px solid var(--tab-border, #ddd);flex-shrink:0;padding:0;margin:0}.mobile-tab-button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:transparent;border:none;padding:14px 4px;padding-bottom:calc(14px + min(12px,env(safe-area-inset-bottom,0px)));cursor:pointer;font-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 11px);font-weight:var(--tab-font-weight, 500);color:var(--tab-text, #666);transition:color .2s ease;min-width:0}.mobile-tab-button:hover{color:var(--tab-text-hover, #333)}.mobile-tab-button.active{color:var(--mobile-tab-text-active, #007bff)}.mobile-tab-button .tab-icon{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--tab-icon-color, #999);transition:color .2s ease}.mobile-tab-button.active .tab-icon{color:var(--mobile-tab-icon-active, #007bff)}.mobile-tab-button .tab-label{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2;color:inherit;opacity:1}.mobile-tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:-2px;z-index:1}@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(1deg)}50%{transform:rotate(0)}75%{transform:rotate(-1deg)}to{transform:rotate(0)}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 8px #3b82f600}}.editable-panel-layout{position:relative;width:100%;height:100%}.editable-panel-layout.edit-mode-active{background:#0000000d}[data-slot][data-edit-mode=true]{transform:scale(.95);transform-origin:center center;cursor:grab;will-change:transform;transition:transform .3s cubic-bezier(.4,0,.2,1)}[data-slot][data-edit-mode=true]:active{cursor:grabbing}[data-slot][data-dragging=true]{cursor:grabbing!important;transform:scale(.95)!important;transition:none!important}.edit-mode-active [data-slot][data-edit-mode=true]{transform-origin:center center}.slot-with-overlay{position:relative;width:100%;height:100%}.slot-with-overlay.dragging{opacity:0;pointer-events:none}.slot-edit-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:transparent;border:none;pointer-events:auto;cursor:grab;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.slot-edit-overlay:hover{background:#3b82f608}.slot-edit-overlay:active{cursor:grabbing}.drag-indicator,.slot-position-label{display:none}.edit-mode-toggle{position:absolute;top:16px;right:16px;z-index:1000;padding:8px 16px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.edit-mode-toggle:hover{background:#f9fafb;box-shadow:0 4px 6px #0000001a}.edit-mode-toggle.active{background:#3b82f6;color:#fff;border-color:#2563eb}.edit-mode-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:998;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.edit-mode-configurator{position:relative;z-index:999;padding:20px;animation:scaleIn .3s ease}.panel-slot{position:relative;min-height:120px;border:2px dashed transparent;border-radius:12px;transition:all .3s ease;padding:12px}.panel-slot.edit-mode{border-color:#d1d5db;background:#ffffff80}.panel-slot.drag-over{border-color:#3b82f6;background:#3b82f61a;box-shadow:0 0 0 4px #3b82f61a}.panel-slot.empty{display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:14px}.draggable-panel{position:relative;padding:12px 16px;margin:8px 0;border-radius:8px;background:#fff;border:1px solid #e5e7eb;cursor:grab;transition:all .2s ease;-webkit-user-select:none;user-select:none}.draggable-panel:hover{border-color:#3b82f6;box-shadow:0 2px 8px #0000001a}.draggable-panel.dragging{opacity:.5;cursor:grabbing}.draggable-panel.edit-mode{animation:wiggle .4s ease-in-out infinite;transform-origin:center}.draggable-panel.edit-mode:nth-child(odd){animation-delay:.1s}.draggable-panel.edit-mode:nth-child(2n){animation-delay:.2s}.remove-button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid white;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:700;opacity:0;transform:scale(0);transition:all .2s ease;z-index:10;box-shadow:0 2px 4px #0003}.draggable-panel.edit-mode .remove-button{opacity:1;transform:scale(1);animation:pulse 2s infinite}.remove-button:hover{background:#dc2626;transform:scale(1.1)}.panel-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#374151}.panel-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.drag-handle{display:none;width:24px;height:24px;opacity:.4;cursor:grab}.edit-mode .drag-handle{display:flex;align-items:center;justify-content:center}.drag-overlay{padding:12px 16px;border-radius:8px;background:#fff;border:2px solid #3b82f6;box-shadow:0 8px 16px #0003;cursor:grabbing;opacity:.9}.panel-group{border:2px solid #e5e7eb;border-radius:12px;padding:8px;background:#fff}.panel-group.edit-mode{animation:wiggle .5s ease-in-out infinite;border-color:#3b82f6}.panel-group-header{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #e5e7eb;margin-bottom:8px}.panel-group-title{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase}.available-panels{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 6px #0000001a}.available-panels-title{font-size:16px;font-weight:600;color:#374151;margin-bottom:12px}.available-panels-list{display:flex;flex-direction:column;gap:8px}.slot-label{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}.slot-indicator{width:8px;height:8px;border-radius:50%;background:#d1d5db}.slot-indicator.active{background:#3b82f6}.action-buttons{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:1001;display:flex;gap:12px;padding:12px 24px;background:#fff;border-radius:12px;box-shadow:0 8px 16px #00000026;animation:scaleIn .3s ease}.action-button{padding:10px 20px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.action-button:hover{background:#f9fafb}.action-button.primary{background:#3b82f6;color:#fff;border-color:#2563eb}.action-button.primary:hover{background:#2563eb}@media (max-width: 768px){.edit-mode-toggle{top:8px;right:8px;padding:6px 12px;font-size:12px}.action-buttons{bottom:16px;padding:10px 16px}.action-button{padding:8px 16px;font-size:13px}}@media (prefers-color-scheme: dark){.edit-mode-toggle{background:#1f2937;color:#f9fafb;border-color:#374151}.edit-mode-toggle:hover{background:#374151}.draggable-panel{background:#1f2937;color:#f9fafb;border-color:#374151}.available-panels{background:#1f2937}.panel-label{color:#f9fafb}.action-buttons{background:#1f2937}.action-button{background:#1f2937;color:#f9fafb;border-color:#374151}.action-button:hover{background:#374151}}.panel-configurator{display:flex;flex-direction:column;gap:2rem;padding:1.5rem;background:var(--configurator-bg);border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.configurator-section{display:flex;flex-direction:column;gap:1rem}.section-title{margin:0;font-size:.875rem;font-weight:600;color:var(--configurator-title);text-transform:uppercase;letter-spacing:.05em;text-align:center}.slots-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:75%;margin:0 auto;align-items:start}.slot{position:relative;aspect-ratio:1 / 1.3;width:100%;padding:2.5rem 1rem 1rem;background:var(--slot-bg);border:2px solid var(--slot-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;box-sizing:border-box}.slot:hover{border-color:var(--slot-border-hover);box-shadow:0 2px 4px #0000000d}.slot.selected{border-color:var(--slot-border-selected);background:var(--slot-bg-selected);box-shadow:0 0 0 3px var(--slot-bg-selected)}.slot.empty{border-style:dashed}.slot-label{font-size:.75rem;font-weight:600;color:var(--slot-label);text-transform:capitalize;text-align:left}.slot[data-position=middle] .slot-label,.slot[data-position=middle] .slot-panel-name,.slot[data-position=middle] .slot-empty-state{text-align:center}.slot[data-position=right] .slot-label,.slot[data-position=right] .slot-panel-name,.slot[data-position=right] .slot-empty-state{text-align:right}.slot-content{flex:1;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;min-height:0}.slot-panel-name{font-weight:600;color:var(--slot-content-text);font-size:.875rem}.slot-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--slot-preview-bg);border-radius:4px;border:1px solid var(--slot-preview-border);font-size:.75rem;color:var(--slot-preview-text)}.slot-empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:var(--slot-empty-text);font-size:.875rem;font-style:italic;min-height:0}.slot-clear-btn{position:absolute;top:.25rem;right:.25rem;width:24px;height:24px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:4px;cursor:pointer;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.slot:hover .slot-clear-btn{opacity:1}.slot-clear-btn:hover{background:var(--clear-btn-hover);transform:scale(1.1)}.available-panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;width:75%;margin:0 auto}.available-panel{min-height:80px;padding:.75rem;background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem}.available-panel:hover{border-color:var(--panel-border-hover);box-shadow:0 2px 4px #0000000d;transform:translateY(-2px)}.available-panel.selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 3px var(--panel-bg-selected)}.available-panel.in-use{opacity:.5;border-style:dashed}.available-panel.in-use:hover{transform:translateY(0);opacity:.6}.panel-label{font-weight:600;color:var(--panel-label-text);font-size:.875rem}.panel-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--panel-preview-bg);border-radius:4px;font-size:.75rem;color:var(--panel-preview-text)}.selection-hint{padding:.75rem 1rem;background:var(--hint-bg);border:1px solid var(--hint-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.available-panel.multi-selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 2px var(--panel-bg-selected)}.multi-select-badge{margin-left:.5rem;padding:.25rem .5rem;background:var(--panel-border-selected);color:#fff;font-size:.75rem;border-radius:12px;font-weight:400}.multi-select-hint{background:var(--panel-bg-selected);border-color:var(--panel-border-selected)}.slot.tab-group{border-style:solid}.group-content{position:relative;overflow-y:auto;min-height:0}.group-badge{font-size:.75rem;font-weight:600;color:var(--panel-border-selected);margin-bottom:.5rem}.group-panels{display:flex;flex-direction:column;gap:.25rem;flex:1;overflow-y:auto;min-height:0}.group-panel-label{font-size:.75rem;color:var(--slot-content-text);padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.slot-panel-label{font-weight:600;color:var(--slot-content-text);font-size:.875rem;text-align:center}.create-tab-group-btn{margin-top:.5rem;padding:.5rem .75rem;background:var(--panel-border-selected);color:#fff;border:none;border-radius:4px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease}.create-tab-group-btn:hover{transform:scale(1.05);box-shadow:0 2px 4px #0000001a}.tab-mode-toggle{position:absolute;top:.5rem;left:.5rem;padding:.25rem .5rem;background:var(--slot-bg);border:1px solid var(--slot-border);border-radius:4px;font-size:.85rem;cursor:pointer;transition:all .2s ease;z-index:10;opacity:.7;color:var(--slot-content-text)}.tab-mode-toggle svg{display:block}.tab-mode-toggle:hover{opacity:1;border-color:var(--slot-border-hover);background:var(--slot-preview-bg)}.tab-mode-toggle.active{opacity:1;background:var(--panel-border-selected);color:#fff;border-color:var(--panel-border-selected)}.tab-config-controls{margin-bottom:.5rem}.tab-config-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--slot-label)}.tab-config-label select{padding:.25rem .5rem;border:1px solid var(--slot-border);border-radius:3px;background:var(--slot-bg);color:var(--slot-content-text);font-size:.7rem;cursor:pointer}.group-panel-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.group-panel-label{flex:1;font-size:.75rem;color:var(--slot-content-text);display:flex;align-items:center;gap:.25rem}.default-badge{color:var(--panel-border-selected);font-size:.9em}.remove-from-group-btn{width:18px;height:18px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:3px;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .2s ease}.remove-from-group-btn:hover{opacity:1;transform:scale(1.1)}.usage-hint{padding:.75rem 1rem;background:var(--slot-preview-bg);border:1px solid var(--slot-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}\n.animated-resizable-layout{flex:1;min-height:0;width:100%;position:relative;background-color:var(--panel-background)}.hybrid-panel{display:flex;flex-direction:column;overflow:hidden;height:100%;background-color:var(--panel-background)}.animated-resizable-layout .panel-content-wrapper{flex:1;min-width:0;min-height:0;width:100%;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;will-change:opacity}.resize-handle{width:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:col-resize;position:relative;transition:background-color .2s,opacity .3s,width .3s}.resize-handle.collapsed{opacity:0;pointer-events:none}.resize-handle:hover{background-color:var(--panel-handle-hover)}.resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.collapse-toggle{position:absolute;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.animated-vertical-layout{width:100%;height:100%;position:relative;background-color:var(--panel-background)}.vertical-panel{overflow:auto;width:100%;background-color:var(--panel-background)}.panel-content-wrapper{width:100%;height:100%;overflow:auto}.vertical-resize-handle{height:8px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:row-resize;position:relative;transition:background-color .2s,opacity .3s,height .3s}.vertical-resize-handle.collapsed{opacity:0;pointer-events:none}.vertical-resize-handle:hover{background-color:var(--panel-handle-hover)}.vertical-resize-handle:active{background-color:var(--panel-handle-active)}.handle-bar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}.collapse-toggle{background:var(--panel-button-bg);border:1px solid var(--panel-button-border);padding:4px 8px;cursor:pointer;color:var(--panel-button-icon);font-size:14px;outline:none;display:flex;align-items:center;justify-content:center;border-radius:4px;z-index:10;transition:all .2s;box-shadow:0 2px 4px #0000001a}.collapse-toggle:hover:not(:disabled){background-color:var(--panel-button-hover);box-shadow:0 2px 6px #00000026}.collapse-toggle:active:not(:disabled){opacity:.8}.collapsible-split-pane{width:100%;height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--panel-background)}.csp-header{display:flex;align-items:center;gap:8px;padding:0 12px;background-color:var(--panel-handle);border-bottom:1px solid var(--panel-border, rgba(128, 128, 128, .2));-webkit-user-select:none;user-select:none;flex-shrink:0;transition:background-color .15s ease}.csp-header-collapsed{cursor:pointer}.csp-header-collapsed:hover{background-color:var(--panel-handle-hover)}.csp-header-collapsed:focus{outline:none;box-shadow:inset 0 0 0 2px var(--panel-focus-ring, rgba(59, 130, 246, .5))}.csp-header-icon{display:flex;align-items:center;justify-content:center;color:var(--panel-text-secondary, #888);font-size:14px}.csp-header-title{flex:1;font-size:12px;font-weight:500;color:var(--panel-text, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.csp-header-toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--panel-text-secondary, #888);cursor:pointer;border-radius:3px;transition:background-color .15s ease,color .15s ease}.csp-header-toggle:hover{background-color:var(--panel-button-hover, rgba(128, 128, 128, .2));color:var(--panel-text, #333)}.csp-content-area{flex:1;min-height:0;display:flex;flex-direction:column}.csp-primary-content-full{flex:1;min-height:0;overflow:hidden}.csp-secondary-panel,.csp-primary-panel{overflow:hidden;background-color:var(--panel-background)}.csp-panel-content{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.csp-secondary-body{width:100%;height:100%;overflow:auto}.csp-resize-handle{height:6px;background-color:var(--panel-handle);display:flex;justify-content:center;align-items:center;cursor:row-resize;position:relative;transition:background-color .15s ease;flex-shrink:0}.csp-resize-handle:hover{background-color:var(--panel-handle-hover)}.csp-resize-handle:active{background-color:var(--panel-handle-active)}.csp-resize-handle-bar{width:32px;height:3px;background-color:var(--panel-handle-bar, rgba(128, 128, 128, .4));border-radius:2px;transition:background-color .15s ease}.csp-resize-handle:hover .csp-resize-handle-bar{background-color:var(--panel-handle-bar-hover, rgba(128, 128, 128, .6))}.three-panel-layout{height:100%;width:100%;display:flex;flex-direction:column;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item{display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative;background-color:var(--panel-background);box-sizing:border-box}.three-panel-item[data-edit-mode=true]{background-color:var(--panel-accent-bg);border-radius:12px}.three-panel-layout [data-panel]{transition:flex-grow var(--panel-transition-duration, .3s) var(--panel-transition-easing, cubic-bezier(.4, 0, .2, 1))}.three-panel-layout.is-dragging [data-panel],.three-panel-layout.is-mounting [data-panel]{transition:none}.three-panel-item.collapsible-panel{will-change:flex}.three-panel-item.collapsible-panel.collapsed{flex:0!important;min-width:0!important;max-width:0!important;width:0!important;overflow:hidden!important;visibility:hidden}.panel-content-wrapper{flex:1;min-width:0;overflow-x:hidden;overflow-y:auto;will-change:opacity;box-sizing:border-box}.resize-handle{position:relative;display:flex;align-items:center;justify-content:center;width:1px!important;cursor:col-resize;background:var(--panel-border);overflow:visible!important}.resize-handle:before{content:"";position:absolute;inset:0 -10px;background:transparent}.resize-handle:after{content:"";position:absolute;inset:0 -10px;background:var(--panel-handle);opacity:0;transition:opacity .2s ease;z-index:-1}.resize-handle:hover:after{opacity:1}.resize-handle:hover{background:var(--panel-handle-hover)}.resize-handle:active:after{opacity:1;background:var(--panel-handle-active)}.resize-handle:active{background:var(--panel-handle-active)}.resize-handle.collapsed{width:0!important;visibility:hidden}.resize-handle.left-handle.collapsed{margin-right:-1px}.resize-handle.right-handle.collapsed{margin-left:-1px}.handle-bar{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2}.collapse-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:40px;background:var(--panel-button-bg);border:1px solid var(--panel-button-border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--panel-button-icon);transition:all .2s ease;z-index:10;padding:0;line-height:1}.collapse-toggle:hover{background:var(--panel-button-hover)}.collapse-toggle:active{opacity:.8}.collapse-toggle:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.resize-handle:before{left:-8px;right:-8px}.resize-handle:after{left:-8px;right:-8px}.collapse-toggle{width:24px;height:48px;font-size:14px}}@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(1deg)}50%{transform:rotate(0)}75%{transform:rotate(-1deg)}to{transform:rotate(0)}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 8px #3b82f600}}.editable-panel-layout{position:relative;width:100%;height:100%}.editable-panel-layout.edit-mode-active{background:#0000000d}[data-slot][data-edit-mode=true]{transform:scale(.95);transform-origin:center center;cursor:grab;will-change:transform;transition:transform .3s cubic-bezier(.4,0,.2,1)}[data-slot][data-edit-mode=true]:active{cursor:grabbing}[data-slot][data-dragging=true]{cursor:grabbing!important;transform:scale(.95)!important;transition:none!important}.edit-mode-active [data-slot][data-edit-mode=true]{transform-origin:center center}.slot-with-overlay{position:relative;width:100%;height:100%}.slot-with-overlay.dragging{opacity:0;pointer-events:none}.slot-edit-overlay{position:absolute;inset:0;background:transparent;border:none;pointer-events:auto;cursor:grab;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.slot-edit-overlay:hover{background:#3b82f608}.slot-edit-overlay:active{cursor:grabbing}.drag-indicator,.slot-position-label{display:none}.edit-mode-toggle{position:absolute;top:16px;right:16px;z-index:1000;padding:8px 16px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.edit-mode-toggle:hover{background:#f9fafb;box-shadow:0 4px 6px #0000001a}.edit-mode-toggle.active{background:#3b82f6;color:#fff;border-color:#2563eb}.edit-mode-overlay{position:fixed;inset:0;background:#0000004d;z-index:998;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.edit-mode-configurator{position:relative;z-index:999;padding:20px;animation:scaleIn .3s ease}.panel-slot{position:relative;min-height:120px;border:2px dashed transparent;border-radius:12px;transition:all .3s ease;padding:12px}.panel-slot.edit-mode{border-color:#d1d5db;background:#ffffff80}.panel-slot.drag-over{border-color:#3b82f6;background:#3b82f61a;box-shadow:0 0 0 4px #3b82f61a}.panel-slot.empty{display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:14px}.draggable-panel{position:relative;padding:12px 16px;margin:8px 0;border-radius:8px;background:#fff;border:1px solid #e5e7eb;cursor:grab;transition:all .2s ease;-webkit-user-select:none;user-select:none}.draggable-panel:hover{border-color:#3b82f6;box-shadow:0 2px 8px #0000001a}.draggable-panel.dragging{opacity:.5;cursor:grabbing}.draggable-panel.edit-mode{animation:wiggle .4s ease-in-out infinite;transform-origin:center}.draggable-panel.edit-mode:nth-child(odd){animation-delay:.1s}.draggable-panel.edit-mode:nth-child(2n){animation-delay:.2s}.remove-button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid white;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:700;opacity:0;transform:scale(0);transition:all .2s ease;z-index:10;box-shadow:0 2px 4px #0003}.draggable-panel.edit-mode .remove-button{opacity:1;transform:scale(1);animation:pulse 2s infinite}.remove-button:hover{background:#dc2626;transform:scale(1.1)}.panel-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#374151}.panel-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.drag-handle{display:none;width:24px;height:24px;opacity:.4;cursor:grab}.edit-mode .drag-handle{display:flex;align-items:center;justify-content:center}.drag-overlay{padding:12px 16px;border-radius:8px;background:#fff;border:2px solid #3b82f6;box-shadow:0 8px 16px #0003;cursor:grabbing;opacity:.9}.panel-group{border:2px solid #e5e7eb;border-radius:12px;padding:8px;background:#fff}.panel-group.edit-mode{animation:wiggle .5s ease-in-out infinite;border-color:#3b82f6}.panel-group-header{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #e5e7eb;margin-bottom:8px}.panel-group-title{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase}.available-panels{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 6px #0000001a}.available-panels-title{font-size:16px;font-weight:600;color:#374151;margin-bottom:12px}.available-panels-list{display:flex;flex-direction:column;gap:8px}.slot-label{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}.slot-indicator{width:8px;height:8px;border-radius:50%;background:#d1d5db}.slot-indicator.active{background:#3b82f6}.action-buttons{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:1001;display:flex;gap:12px;padding:12px 24px;background:#fff;border-radius:12px;box-shadow:0 8px 16px #00000026;animation:scaleIn .3s ease}.action-button{padding:10px 20px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.action-button:hover{background:#f9fafb}.action-button.primary{background:#3b82f6;color:#fff;border-color:#2563eb}.action-button.primary:hover{background:#2563eb}@media(max-width:768px){.edit-mode-toggle{top:8px;right:8px;padding:6px 12px;font-size:12px}.action-buttons{bottom:16px;padding:10px 16px}.action-button{padding:8px 16px;font-size:13px}}@media(prefers-color-scheme:dark){.edit-mode-toggle{background:#1f2937;color:#f9fafb;border-color:#374151}.edit-mode-toggle:hover{background:#374151}.draggable-panel{background:#1f2937;color:#f9fafb;border-color:#374151}.available-panels{background:#1f2937}.panel-label{color:#f9fafb}.action-buttons{background:#1f2937}.action-button{background:#1f2937;color:#f9fafb;border-color:#374151}.action-button:hover{background:#374151}}.panel-configurator{display:flex;flex-direction:column;gap:2rem;padding:1.5rem;background:var(--configurator-bg);border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.configurator-section{display:flex;flex-direction:column;gap:1rem}.section-title{margin:0;font-size:.875rem;font-weight:600;color:var(--configurator-title);text-transform:uppercase;letter-spacing:.05em;text-align:center}.slots-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:75%;margin:0 auto;align-items:start}.slot{position:relative;aspect-ratio:1 / 1.3;width:100%;padding:2.5rem 1rem 1rem;background:var(--slot-bg);border:2px solid var(--slot-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;box-sizing:border-box}.slot:hover{border-color:var(--slot-border-hover);box-shadow:0 2px 4px #0000000d}.slot.selected{border-color:var(--slot-border-selected);background:var(--slot-bg-selected);box-shadow:0 0 0 3px var(--slot-bg-selected)}.slot.empty{border-style:dashed}.slot-label{font-size:.75rem;font-weight:600;color:var(--slot-label);text-transform:capitalize;text-align:left}.slot[data-position=middle] .slot-label,.slot[data-position=middle] .slot-panel-name,.slot[data-position=middle] .slot-empty-state{text-align:center}.slot[data-position=right] .slot-label,.slot[data-position=right] .slot-panel-name,.slot[data-position=right] .slot-empty-state{text-align:right}.slot-content{flex:1;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;min-height:0}.slot-panel-name{font-weight:600;color:var(--slot-content-text);font-size:.875rem}.slot-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--slot-preview-bg);border-radius:4px;border:1px solid var(--slot-preview-border);font-size:.75rem;color:var(--slot-preview-text)}.slot-empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:var(--slot-empty-text);font-size:.875rem;font-style:italic;min-height:0}.slot-clear-btn{position:absolute;top:.25rem;right:.25rem;width:24px;height:24px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:4px;cursor:pointer;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.slot:hover .slot-clear-btn{opacity:1}.slot-clear-btn:hover{background:var(--clear-btn-hover);transform:scale(1.1)}.available-panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;width:75%;margin:0 auto}.available-panel{min-height:80px;padding:.75rem;background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.5rem}.available-panel:hover{border-color:var(--panel-border-hover);box-shadow:0 2px 4px #0000000d;transform:translateY(-2px)}.available-panel.selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 3px var(--panel-bg-selected)}.available-panel.in-use{opacity:.5;border-style:dashed}.available-panel.in-use:hover{transform:translateY(0);opacity:.6}.panel-label{font-weight:600;color:var(--panel-label-text);font-size:.875rem}.panel-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--panel-preview-bg);border-radius:4px;font-size:.75rem;color:var(--panel-preview-text)}.selection-hint{padding:.75rem 1rem;background:var(--hint-bg);border:1px solid var(--hint-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.available-panel.multi-selected{border-color:var(--panel-border-selected);background:var(--panel-bg-selected);box-shadow:0 0 0 2px var(--panel-bg-selected)}.multi-select-badge{margin-left:.5rem;padding:.25rem .5rem;background:var(--panel-border-selected);color:#fff;font-size:.75rem;border-radius:12px;font-weight:400}.multi-select-hint{background:var(--panel-bg-selected);border-color:var(--panel-border-selected)}.slot.tab-group{border-style:solid}.group-content{position:relative;overflow-y:auto;min-height:0}.group-badge{font-size:.75rem;font-weight:600;color:var(--panel-border-selected);margin-bottom:.5rem}.group-panels{display:flex;flex-direction:column;gap:.25rem;flex:1;overflow-y:auto;min-height:0}.group-panel-label{font-size:.75rem;color:var(--slot-content-text);padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.slot-panel-label{font-weight:600;color:var(--slot-content-text);font-size:.875rem;text-align:center}.create-tab-group-btn{margin-top:.5rem;padding:.5rem .75rem;background:var(--panel-border-selected);color:#fff;border:none;border-radius:4px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease}.create-tab-group-btn:hover{transform:scale(1.05);box-shadow:0 2px 4px #0000001a}.tab-mode-toggle{position:absolute;top:.5rem;left:.5rem;padding:.25rem .5rem;background:var(--slot-bg);border:1px solid var(--slot-border);border-radius:4px;font-size:.85rem;cursor:pointer;transition:all .2s ease;z-index:10;opacity:.7;color:var(--slot-content-text)}.tab-mode-toggle svg{display:block}.tab-mode-toggle:hover{opacity:1;border-color:var(--slot-border-hover);background:var(--slot-preview-bg)}.tab-mode-toggle.active{opacity:1;background:var(--panel-border-selected);color:#fff;border-color:var(--panel-border-selected)}.tab-config-controls{margin-bottom:.5rem}.tab-config-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--slot-label)}.tab-config-label select{padding:.25rem .5rem;border:1px solid var(--slot-border);border-radius:3px;background:var(--slot-bg);color:var(--slot-content-text);font-size:.7rem;cursor:pointer}.group-panel-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem .5rem;background:var(--slot-preview-bg);border-radius:3px;border-left:3px solid var(--panel-border-selected)}.group-panel-label{flex:1;font-size:.75rem;color:var(--slot-content-text);display:flex;align-items:center;gap:.25rem}.default-badge{color:var(--panel-border-selected);font-size:.9em}.remove-from-group-btn{width:18px;height:18px;padding:0;background:var(--clear-btn-bg);color:var(--clear-btn-text);border:none;border-radius:3px;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .2s ease}.remove-from-group-btn:hover{opacity:1;transform:scale(1.1)}.usage-hint{padding:.75rem 1rem;background:var(--slot-preview-bg);border:1px solid var(--slot-border);border-radius:6px;color:var(--hint-text);font-size:.875rem;text-align:center}.tab-group{display:flex;height:100%;width:100%;overflow:hidden}.tab-group.tab-position-top,.tab-group.tab-position-bottom{flex-direction:column}.tab-group.tab-position-left,.tab-group.tab-position-right{flex-direction:row}.tab-list{display:flex;background:var(--tab-list-bg, #f5f5f5);border-bottom:1px solid var(--tab-border, #ddd);gap:0;padding:0;flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.tab-list::-webkit-scrollbar{display:none}.tab-position-top .tab-list,.tab-position-bottom .tab-list{width:100%}.tab-list.centered{justify-content:flex-start}@media(min-width:0){.tab-list.centered{justify-content:center}.tab-list.centered:has(.tab-button:nth-child(n)){justify-content:flex-start}}.tab-position-bottom .tab-list{border-bottom:none;border-top:none}.tab-position-left .tab-list,.tab-position-right .tab-list{flex-direction:column;border-bottom:none;border-right:none;width:auto;min-width:120px}.tab-position-top .tab-button,.tab-position-bottom .tab-button{flex:1 1 0;min-width:40px;max-width:100%}.tab-button{background:var(--tab-bg, #fff);border:1px solid var(--tab-border, #ddd);border-radius:0;padding:8px 16px;cursor:pointer;font-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 14px);font-weight:var(--tab-font-weight, 500);color:var(--tab-text, #333);transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;height:39px;line-height:1;box-sizing:border-box;container-type:inline-size}.tab-position-top .tab-button{border-bottom:none;border-top:none;border-left:none}.tab-position-top .tab-button:last-child{border-right:none}.tab-position-bottom .tab-button{border-top:none;border-bottom:none;border-left:none}.tab-position-bottom .tab-button:last-child{border-right:none}.tab-position-left .tab-button{border-right:none;border-bottom:none}.tab-position-left .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-position-right .tab-button{border-left:none;border-bottom:none}.tab-position-right .tab-button:last-child{border-bottom:1px solid var(--tab-border, #ddd)}.tab-icon{display:inline-flex;align-items:center;justify-content:center}.tab-label{display:none}@container (min-width: 100px){.tab-label{display:inline}.tab-icon{display:none}}.tab-button:hover{background:var(--tab-bg-hover, #f9f9f9)}.tab-button.active{background:var(--tab-bg-active, #007bff);color:var(--tab-text-active, #fff);border-color:var(--tab-border-active, #007bff)}.tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:2px}.tab-content{flex:1;overflow:auto;background:var(--tab-content-bg, #fff)}.tab-group-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--tab-empty-text, #999);font-style:italic}.snap-carousel-container{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:var(--snap-carousel-gap, 0px);padding:0;margin:0;width:100%;height:100%;background-color:var(--panel-background);box-sizing:border-box;position:relative;left:0;transform:none;container-type:inline-size;-ms-overflow-style:none;scrollbar-width:none}.snap-carousel-container::-webkit-scrollbar{display:none}.snap-carousel-container.swipe-disabled{touch-action:pan-y pinch-zoom;overscroll-behavior-x:none}.snap-carousel-panel{flex:0 0 auto;scroll-snap-align:start;scroll-snap-stop:always;width:var(--snap-carousel-panel-width, 33.33%);height:100%;box-sizing:border-box;overflow:hidden}@media(max-width:540px){.snap-carousel-panel{min-width:280px}}.mobile-tab-layout{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.mobile-tab-content{flex:1;overflow:hidden;min-height:0}.mobile-tab-nav{display:flex;background:var(--tab-list-bg, #f5f5f5);border-top:1px solid var(--tab-border, #ddd);flex-shrink:0;padding:0;margin:0}.mobile-tab-button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:transparent;border:none;padding:14px 4px;padding-bottom:calc(14px + min(12px,env(safe-area-inset-bottom,0px)));cursor:pointer;font-family:var(--tab-font-family, inherit);font-size:var(--tab-font-size, 11px);font-weight:var(--tab-font-weight, 500);color:var(--tab-text, #666);transition:color .2s ease;min-width:0}.mobile-tab-button:hover{color:var(--tab-text-hover, #333)}.mobile-tab-button.active{color:var(--mobile-tab-text-active, #007bff)}.mobile-tab-button .tab-icon{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--tab-icon-color, #999);transition:color .2s ease}.mobile-tab-button.active .tab-icon{color:var(--mobile-tab-icon-active, #007bff)}.mobile-tab-button .tab-label{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2;color:inherit;opacity:1}.mobile-tab-button:focus-visible{outline:2px solid var(--tab-focus, #007bff);outline-offset:-2px;z-index:1}:root{--panels-background: #ffffff;--panels-foreground: #000000;--panels-border: #e5e7eb;--panels-handle-bg: #f3f4f6;--panels-handle-hover: #e5e7eb;--panels-handle-active: #d1d5db;--panels-button-bg: #ffffff;--panels-button-hover: #f9fafb;--panels-button-active: #f3f4f6;--panels-shadow: rgba(0, 0, 0, .1);--panels-animation-duration: .3s;--panels-animation-easing: cubic-bezier(.4, 0, .2, 1)}@media(prefers-color-scheme:dark){:root{--panels-background: #1a1a1a;--panels-foreground: #ffffff;--panels-border: #404040;--panels-handle-bg: #2a2a2a;--panels-handle-hover: #333333;--panels-handle-active: #404040;--panels-button-bg: #2a2a2a;--panels-button-hover: #333333;--panels-button-active: #404040;--panels-shadow: rgba(0, 0, 0, .3)}}[data-theme=light]{--panels-background: #ffffff;--panels-foreground: #000000;--panels-border: #e5e7eb;--panels-handle-bg: #f3f4f6;--panels-handle-hover: #e5e7eb;--panels-handle-active: #d1d5db;--panels-button-bg: #ffffff;--panels-button-hover: #f9fafb;--panels-button-active: #f3f4f6;--panels-shadow: rgba(0, 0, 0, .1)}[data-theme=dark]{--panels-background: #1a1a1a;--panels-foreground: #ffffff;--panels-border: #404040;--panels-handle-bg: #2a2a2a;--panels-handle-hover: #333333;--panels-handle-active: #404040;--panels-button-bg: #2a2a2a;--panels-button-hover: #333333;--panels-button-active: #404040;--panels-shadow: rgba(0, 0, 0, .3)}.panels-container{width:100%;height:100%;display:flex;background-color:var(--panels-background);color:var(--panels-foreground);position:relative}.panels-panel{position:relative;overflow:auto;background-color:var(--panels-background)}.panels-handle{background-color:var(--panels-handle-bg);transition:background-color .15s ease;position:relative;z-index:10}.panels-handle:hover{background-color:var(--panels-handle-hover)}.panels-handle:active{background-color:var(--panels-handle-active)}.panels-handle-horizontal{width:8px;cursor:col-resize}.panels-handle-vertical{height:8px;cursor:row-resize}.panels-handle-collapsed{width:1px!important;min-width:1px!important;background-color:var(--panels-border)!important;cursor:default!important;pointer-events:none}.panels-handle-collapsed .panels-collapse-button{pointer-events:auto}.panels-collapse-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:4px;background-color:var(--panels-button-bg);border:1px solid var(--panels-border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;box-shadow:0 1px 3px var(--panels-shadow);z-index:20}.panels-collapse-button:hover{background-color:var(--panels-button-hover);transform:translate(-50%,-50%) scale(1.1)}.panels-collapse-button:active{background-color:var(--panels-button-active);transform:translate(-50%,-50%) scale(.95)}.panels-collapse-button-floating{position:absolute;left:-12px;z-index:30}.panels-collapse-icon{width:16px;height:16px;stroke:var(--panels-foreground);stroke-width:2;fill:none;transition:transform .15s ease}.panels-content-fade{transition:opacity var(--panels-animation-duration) var(--panels-animation-easing)}.panels-content-fading{opacity:.3}.panels-content-hidden{opacity:0}.panels-animating{pointer-events:none}@media(max-width:768px){.panels-handle-horizontal{width:4px}.panels-handle-vertical{height:4px}.panels-collapse-button{width:20px;height:20px}.panels-collapse-icon{width:12px;height:12px}}.panels-mobile-stack{display:flex;flex-direction:column;gap:1rem;padding:1rem}.panels-mobile-panel{border:1px solid var(--panels-border);border-radius:8px;padding:1rem}.panels-tabs-header{display:flex;border-bottom:1px solid var(--panels-border);background-color:var(--panels-handle-bg)}.panels-tab{flex:1;padding:.75rem 1rem;background:none;border:none;color:var(--panels-foreground);cursor:pointer;transition:background-color .15s ease;position:relative}.panels-tab:hover{background-color:var(--panels-handle-hover)}.panels-tab-active{background-color:var(--panels-background)}.panels-tab-active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--panels-foreground)}.panels-drawer-toggle{position:fixed;top:1rem;left:1rem;z-index:100;width:40px;height:40px;border-radius:8px;background-color:var(--panels-button-bg);border:1px solid var(--panels-border);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px var(--panels-shadow)}.panels-drawer-icon{width:24px;height:24px}.panels-drawer{position:fixed;top:0;left:0;bottom:0;width:300px;background-color:var(--panels-background);border-right:1px solid var(--panels-border);transform:translate(-100%);transition:transform var(--panels-animation-duration) var(--panels-animation-easing);z-index:90;overflow-y:auto}.panels-drawer-open{transform:translate(0)}.panels-drawer-panel,.panels-main-panel{padding:4rem 1rem 1rem}'));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -181719,7 +181719,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
 };
 function useCanvasToLegacy(canvas, library, spansCanvas, workflowSpanPattern) {
   return useMemo(() => {
-    var _a2, _b2, _c, _d, _e4, _f, _g, _h, _i, _j, _k, _l;
+    var _a2, _b2, _c;
     if (!canvas)
       return null;
     const { nodes, edges } = CanvasConverter.canvasToGraph(canvas);
@@ -181768,8 +181768,8 @@ function useCanvasToLegacy(canvas, library, spansCanvas, workflowSpanPattern) {
         };
       }
     }
-    if ((_b2 = canvas.pv) == null ? void 0 : _b2.nodeTypes) {
-      for (const [id2, def] of Object.entries(canvas.pv.nodeTypes)) {
+    if (canvas.nodeTypes) {
+      for (const [id2, def] of Object.entries(canvas.nodeTypes)) {
         nodeTypes2[id2] = {
           description: def.description,
           shape: def.shape || "rectangle",
@@ -181783,7 +181783,7 @@ function useCanvasToLegacy(canvas, library, spansCanvas, workflowSpanPattern) {
       const vv = node2.pv;
       const nodeType = (vv == null ? void 0 : vv.nodeType) || node2.type;
       if (!nodeTypes2[nodeType]) {
-        const fillColor = (vv == null ? void 0 : vv.fill) || (typeof node2.color === "string" ? node2.color : void 0) || ((_d = (_c = vv == null ? void 0 : vv.states) == null ? void 0 : _c.idle) == null ? void 0 : _d.color);
+        const fillColor = (vv == null ? void 0 : vv.fill) || (typeof node2.color === "string" ? node2.color : void 0) || ((_c = (_b2 = vv == null ? void 0 : vv.states) == null ? void 0 : _b2.idle) == null ? void 0 : _c.color);
         let nodeDescription = `${nodeType} node`;
         if (node2.type === "text" && "text" in node2) {
           const lines = node2.text.split("\n");
@@ -181805,8 +181805,8 @@ function useCanvasToLegacy(canvas, library, spansCanvas, workflowSpanPattern) {
         };
       }
     }
-    if ((_e4 = canvas.pv) == null ? void 0 : _e4.edgeTypes) {
-      for (const [id2, def] of Object.entries(canvas.pv.edgeTypes)) {
+    if (canvas.edgeTypes) {
+      for (const [id2, def] of Object.entries(canvas.edgeTypes)) {
         edgeTypes2[id2] = {
           style: def.style || "solid",
           color: def.color,
@@ -181819,12 +181819,11 @@ function useCanvasToLegacy(canvas, library, spansCanvas, workflowSpanPattern) {
     }
     const allowedConnections = [];
     for (const edge of canvas.edges || []) {
-      const edgeType = ((_f = edge.pv) == null ? void 0 : _f.edgeType) || "default";
+      const edgeType = edge.edgeType || "default";
       if (!edgeTypes2[edgeType]) {
         edgeTypes2[edgeType] = {
-          style: ((_g = edge.pv) == null ? void 0 : _g.style) || "solid",
+          style: "solid",
           color: typeof edge.color === "string" ? edge.color : void 0,
-          width: (_h = edge.pv) == null ? void 0 : _h.width,
           directed: true
         };
       }
@@ -181834,16 +181833,15 @@ function useCanvasToLegacy(canvas, library, spansCanvas, workflowSpanPattern) {
         via: edgeType
       });
     }
-    const display = ((_i = canvas.pv) == null ? void 0 : _i.display) ? {
-      layout: canvas.pv.display.layout || "manual",
-      theme: canvas.pv.display.theme,
-      animations: canvas.pv.display.animations
+    const display = canvas.display ? {
+      layout: canvas.display.layout || "manual",
+      theme: canvas.display.theme,
+      animations: canvas.display.animations
     } : { layout: "manual" };
     const configuration = {
       metadata: {
-        name: ((_j = canvas.pv) == null ? void 0 : _j.name) || "Untitled",
-        version: ((_k = canvas.pv) == null ? void 0 : _k.version) || "1.0.0",
-        description: (_l = canvas.pv) == null ? void 0 : _l.description
+        name: canvas.name || "Untitled",
+        description: canvas.description
       },
       nodeTypes: nodeTypes2,
       edgeTypes: edgeTypes2,
@@ -181946,6 +181944,304 @@ const GraphRenderer = forwardRef((props, ref) => {
   return jsx("div", { ref: containerRef, className, style: { width, height, position: "relative" }, children: jsx(TooltipPortalContext.Provider, { value: portalTarget, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, resetVisualStateRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy, initialViewport, elkLayout, scenarioEdges, showSequenceLabels }) }) }) });
 });
 GraphRenderer.displayName = "GraphRenderer";
+function extractNamespace(name2, strategy) {
+  if (typeof strategy === "function") {
+    return strategy(name2);
+  }
+  const segments = name2.split(".");
+  if (segments.length <= 1) {
+    return name2;
+  }
+  if (strategy === "first") {
+    return segments[0];
+  }
+  if (strategy === "all-but-last") {
+    return segments.slice(0, -1).join(".");
+  }
+  if (typeof strategy === "number") {
+    return segments.slice(0, strategy).join(".");
+  }
+  return segments.slice(0, -1).join(".");
+}
+function getParentNamespace(namespace2) {
+  const segments = namespace2.split(".");
+  if (segments.length <= 1) {
+    return void 0;
+  }
+  return segments.slice(0, -1).join(".");
+}
+function useSequenceLayout(events, sequenceEdges, options = {}) {
+  const { namespaceStrategy = "all-but-last", laneWidth = 200, laneGap = 50, eventSpacing = 80, headerHeight = 60, collapsedNamespaces = [], nodeWidth = 14, nodeHeight = 14 } = options;
+  return useMemo(() => {
+    if (events.length === 0) {
+      return {
+        nodes: [],
+        edges: [],
+        swimlanes: [],
+        totalWidth: 0,
+        totalHeight: 0
+      };
+    }
+    const eventNamespaces = /* @__PURE__ */ new Map();
+    const namespaceEvents = /* @__PURE__ */ new Map();
+    for (const event of events) {
+      const namespace2 = extractNamespace(event.name, namespaceStrategy);
+      eventNamespaces.set(event.id, namespace2);
+      if (!namespaceEvents.has(namespace2)) {
+        namespaceEvents.set(namespace2, []);
+      }
+      namespaceEvents.get(namespace2).push(event.id);
+    }
+    const allNamespaces = Array.from(namespaceEvents.keys()).sort();
+    const collapsedSet = new Set(collapsedNamespaces);
+    const visibleNamespaces = [];
+    const namespaceToVisible = /* @__PURE__ */ new Map();
+    for (const ns of allNamespaces) {
+      let visibleNs = ns;
+      let current = ns;
+      while (current) {
+        if (collapsedSet.has(current)) {
+          visibleNs = current;
+        }
+        current = getParentNamespace(current);
+      }
+      namespaceToVisible.set(ns, visibleNs);
+      if (!visibleNamespaces.includes(visibleNs)) {
+        visibleNamespaces.push(visibleNs);
+      }
+    }
+    const swimlanes = visibleNamespaces.map((namespace2, index2) => {
+      const x = index2 * (laneWidth + laneGap) + laneWidth / 2;
+      const eventIds = [];
+      for (const [eventId, eventNs] of eventNamespaces) {
+        if (namespaceToVisible.get(eventNs) === namespace2) {
+          eventIds.push(eventId);
+        }
+      }
+      const children2 = allNamespaces.filter((ns) => getParentNamespace(ns) === namespace2);
+      return {
+        namespace: namespace2,
+        label: namespace2.split(".").pop() || namespace2,
+        x,
+        parentNamespace: getParentNamespace(namespace2),
+        isCollapsed: collapsedSet.has(namespace2),
+        children: children2,
+        eventIds
+      };
+    });
+    const swimlaneByNamespace = /* @__PURE__ */ new Map();
+    for (const lane of swimlanes) {
+      swimlaneByNamespace.set(lane.namespace, lane);
+    }
+    const nodes = [];
+    const eventById = new Map(events.map((e) => [e.id, e]));
+    for (let i = 0; i < events.length; i++) {
+      const event = events[i];
+      const originalNamespace = eventNamespaces.get(event.id);
+      const visibleNamespace = namespaceToVisible.get(originalNamespace);
+      const lane = swimlaneByNamespace.get(visibleNamespace);
+      const y = headerHeight + i * eventSpacing;
+      nodes.push({
+        id: event.id,
+        type: "sequenceMarker",
+        position: {
+          x: lane.x - nodeWidth / 2,
+          y: y - nodeHeight / 2
+          // Center vertically on the time layer
+        },
+        data: {
+          label: event.label || event.name.split(".").pop() || event.name,
+          fullName: event.name,
+          namespace: originalNamespace,
+          visibleNamespace,
+          timeLayer: i,
+          ...event.data
+        },
+        style: {
+          width: nodeWidth,
+          height: nodeHeight
+        }
+      });
+    }
+    const edges = sequenceEdges.map((edge) => {
+      const sourceNamespace = eventNamespaces.get(edge.fromEvent);
+      const targetNamespace = eventNamespaces.get(edge.toEvent);
+      const crossesLanes = namespaceToVisible.get(sourceNamespace) !== namespaceToVisible.get(targetNamespace);
+      const targetEvent = eventById.get(edge.toEvent);
+      const edgeLabel = edge.label || (targetEvent == null ? void 0 : targetEvent.label) || (targetEvent == null ? void 0 : targetEvent.name.split(".").pop()) || "";
+      return {
+        id: edge.id,
+        source: edge.fromEvent,
+        target: edge.toEvent,
+        type: "sequenceArrow",
+        label: edgeLabel,
+        labelStyle: { fontSize: 12, fontWeight: 500 },
+        labelBgStyle: { fill: "white", fillOpacity: 0.8 },
+        data: {
+          crossesLanes,
+          sourceNamespace,
+          targetNamespace
+        }
+      };
+    });
+    const totalWidth = swimlanes.length * (laneWidth + laneGap) - laneGap + laneWidth;
+    const totalHeight = headerHeight + events.length * eventSpacing + eventSpacing;
+    return {
+      nodes,
+      edges,
+      swimlanes,
+      totalWidth,
+      totalHeight
+    };
+  }, [
+    events,
+    sequenceEdges,
+    namespaceStrategy,
+    laneWidth,
+    laneGap,
+    eventSpacing,
+    headerHeight,
+    nodeWidth,
+    nodeHeight,
+    collapsedNamespaces
+  ]);
+}
+function SequenceMarkerNode({ data }) {
+  return jsxs("div", { style: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "var(--sequence-marker-bg, #6495ED)",
+    borderRadius: "50%",
+    border: "2px solid var(--sequence-marker-border, #4169E1)",
+    boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+  }, title: data.fullName, children: [jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }), jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })] });
+}
+function SequenceArrowEdge({ id: id2, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, data }) {
+  const isSameLane = !(data == null ? void 0 : data.crossesLanes);
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    curvature: isSameLane ? 0.5 : 0.25
+  });
+  return jsxs(Fragment, { children: [jsx(BaseEdge, { id: id2, path: edgePath, style: {
+    stroke: "var(--sequence-arrow-color, #4169E1)",
+    strokeWidth: 2
+  }, markerEnd: "url(#sequence-arrow)" }), label && jsx(EdgeLabelRenderer, { children: jsx("div", { style: {
+    position: "absolute",
+    transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+    background: "var(--sequence-label-bg, rgba(255, 255, 255, 0.95))",
+    padding: "2px 8px",
+    borderRadius: 4,
+    fontSize: 12,
+    fontWeight: 500,
+    color: "var(--sequence-label-text, #333)",
+    border: "1px solid var(--sequence-label-border, #ddd)",
+    pointerEvents: "all",
+    whiteSpace: "nowrap"
+  }, className: "nodrag nopan", children: label }) })] });
+}
+const defaultSequenceNodeTypes = {
+  sequenceMarker: SequenceMarkerNode
+};
+const defaultSequenceEdgeTypes = {
+  sequenceArrow: SequenceArrowEdge
+};
+function SwimlaneLayer({ swimlanes, laneWidth, headerHeight, totalHeight, onToggleCollapse }) {
+  const { x, y, zoom: zoom2 } = useViewport();
+  const extendedHeight = Math.max(totalHeight, 2e3);
+  return jsxs("div", { style: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    transformOrigin: "0 0",
+    transform: `translate(${x}px, ${y}px) scale(${zoom2})`,
+    pointerEvents: "none",
+    zIndex: -1
+  }, children: [swimlanes.map((lane, index2) => {
+    const isEven = index2 % 2 === 0;
+    return jsx("div", { style: {
+      position: "absolute",
+      left: lane.x - laneWidth / 2,
+      top: 0,
+      width: laneWidth,
+      height: extendedHeight,
+      backgroundColor: isEven ? "var(--sequence-lane-even, rgba(100, 149, 237, 0.08))" : "var(--sequence-lane-odd, rgba(100, 149, 237, 0.03))",
+      borderRight: "1px solid var(--sequence-lane-border, rgba(100, 149, 237, 0.2))"
+    } }, `bg-${lane.namespace}`);
+  }), swimlanes.map((lane) => {
+    const hasChildren = lane.children.length > 0;
+    return jsxs("div", { style: {
+      position: "absolute",
+      left: lane.x - laneWidth / 2,
+      top: 0,
+      width: laneWidth,
+      height: headerHeight,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "var(--sequence-header-bg, rgba(100, 149, 237, 0.15))",
+      borderBottom: "2px solid var(--sequence-header-border, rgba(100, 149, 237, 0.4))",
+      fontWeight: 600,
+      fontSize: 13,
+      color: "var(--sequence-header-text, #333)",
+      pointerEvents: "auto",
+      cursor: hasChildren ? "pointer" : "default",
+      userSelect: "none"
+    }, onClick: () => hasChildren && (onToggleCollapse == null ? void 0 : onToggleCollapse(lane.namespace)), children: [hasChildren && jsx("span", { style: { marginRight: 6, fontSize: 10 }, children: lane.isCollapsed ? "▶" : "▼" }), jsx("span", { children: lane.label }), lane.eventIds.length > 1 && jsxs("span", { style: { marginLeft: 6, fontSize: 11, opacity: 0.6 }, children: ["(", lane.eventIds.length, ")"] })] }, `header-${lane.namespace}`);
+  }), swimlanes.map((lane) => jsx("div", { style: {
+    position: "absolute",
+    left: lane.x,
+    top: headerHeight,
+    width: 2,
+    height: extendedHeight - headerHeight,
+    backgroundColor: "var(--sequence-lifeline, rgba(100, 149, 237, 0.3))",
+    transform: "translateX(-1px)"
+  } }, `lifeline-${lane.namespace}`))] });
+}
+function SequenceDiagramInner({
+  events,
+  edges: sequenceEdges,
+  layoutOptions = {},
+  nodeTypes: customNodeTypes,
+  edgeTypes: customEdgeTypes,
+  onToggleCollapse,
+  onNodeClick,
+  showControls = true,
+  showBackground = false
+  // Default to false since swimlanes provide visual structure
+}) {
+  const { laneWidth = 200, headerHeight = 60 } = layoutOptions;
+  const nodeTypes2 = useMemo(() => ({ ...defaultSequenceNodeTypes, ...customNodeTypes }), [customNodeTypes]);
+  const edgeTypes2 = useMemo(() => ({ ...defaultSequenceEdgeTypes, ...customEdgeTypes }), [customEdgeTypes]);
+  const { nodes, edges, swimlanes, totalHeight } = useSequenceLayout(events, sequenceEdges, layoutOptions);
+  const handleNodeClick2 = useCallback((_event, node2) => {
+    onNodeClick == null ? void 0 : onNodeClick(node2.id, _event);
+  }, [onNodeClick]);
+  return jsxs(index$2, { nodes, edges, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick: handleNodeClick2, fitView: true, fitViewOptions: {
+    padding: 0.2,
+    minZoom: 0.5,
+    maxZoom: 1.5
+  }, minZoom: 0.1, maxZoom: 2, nodesDraggable: false, nodesConnectable: false, elementsSelectable: true, panOnScroll: true, zoomOnScroll: true, children: [jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, children: jsx("defs", { children: jsx("marker", { id: "sequence-arrow", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "var(--sequence-arrow-color, #4169E1)" }) }) }) }), showBackground && jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 }), showControls && jsx(Controls, {}), jsx(SwimlaneLayer, { swimlanes, laneWidth, headerHeight, totalHeight, onToggleCollapse }), swimlanes.some((s2) => s2.children.length > 0) && jsx(Panel$1, { position: "top-right", children: jsx("div", { style: {
+    background: "var(--sequence-panel-bg, rgba(255, 255, 255, 0.95))",
+    border: "1px solid var(--sequence-panel-border, #ddd)",
+    borderRadius: 4,
+    padding: "6px 10px",
+    fontSize: 11,
+    color: "#666"
+  }, children: "Click lane headers to expand/collapse" }) })] });
+}
+function SequenceDiagramRenderer(props) {
+  const { className, width = "100%", height = 600 } = props;
+  return jsx("div", { className, style: {
+    width,
+    height,
+    position: "relative"
+  }, children: jsx(ReactFlowProvider, { children: jsx(SequenceDiagramInner, { ...props }) }) });
+}
 const DEFAULT_NODE_WIDTH = 200;
 const DEFAULT_NODE_HEIGHT = 100;
 const GROUP_PADDING = 40;
@@ -182017,12 +182313,9 @@ function mergeCanvases(placements, options = {}) {
     }
   }
   const mergedCanvas = {
+    name: "Multi-Canvas View",
     nodes: [...groupNodes, ...mergedNodes],
-    edges: mergedEdges,
-    pv: {
-      version: "1.0.0",
-      name: "Multi-Canvas View"
-    }
+    edges: mergedEdges
   };
   return mergedCanvas;
 }
@@ -190117,7 +190410,7 @@ const CanvasEditorPanel = ({
   spansCanvasPath,
   workflowSpanPattern
 }) => {
-  var _a2, _b2, _c, _d, _e4;
+  var _a2, _b2, _c, _d;
   const { theme: theme2 } = useTheme();
   const graphRef = useRef(null);
   const canvasContainerRef = useRef(null);
@@ -191227,7 +191520,7 @@ const CanvasEditorPanel = ({
                 color: theme2.colors.textMuted,
                 flexShrink: 0
               }, children: "Edges:" }),
-              ((_e4 = (_d = state.canvas) == null ? void 0 : _d.pv) == null ? void 0 : _e4.edgeTypes) && Object.keys(state.canvas.pv.edgeTypes).length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: theme2.space[4], flexWrap: "wrap" }, children: Object.entries(state.canvas.pv.edgeTypes).map(([typeName, edgeType]) => /* @__PURE__ */ jsxs(
+              ((_d = state.canvas) == null ? void 0 : _d.edgeTypes) && Object.keys(state.canvas.edgeTypes).length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: theme2.space[4], flexWrap: "wrap" }, children: Object.entries(state.canvas.edgeTypes).map(([typeName, edgeType]) => /* @__PURE__ */ jsxs(
                 "div",
                 {
                   style: {
@@ -206082,6 +206375,182 @@ class EmptyDataProvider {
     };
   }
 }
+function convertWorkflowToSequence(scenario) {
+  const templateEvents = scenario.template.events ?? {};
+  const eventNames = Object.keys(templateEvents);
+  const events = eventNames.map((name2, index2) => ({
+    id: `event-${index2}`,
+    name: name2,
+    label: name2.split(".").pop() ?? name2
+  }));
+  const edges = [];
+  for (let i = 0; i < events.length - 1; i++) {
+    edges.push({
+      id: `edge-${i}`,
+      fromEvent: events[i].id,
+      toEvent: events[i + 1].id
+    });
+  }
+  return { events, edges };
+}
+function SequenceDiagramModal({
+  sequence,
+  onClose,
+  onOpenCanvas,
+  theme: theme2
+}) {
+  const { events, edges } = useMemo(
+    () => convertWorkflowToSequence(sequence.scenario),
+    [sequence.scenario]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e3
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            backgroundColor: theme2.colors.background,
+            borderRadius: theme2.radii[2],
+            boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3)",
+            width: "90%",
+            maxWidth: 1200,
+            height: "80%",
+            maxHeight: 800,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: `${theme2.space[3]} ${theme2.space[4]}`,
+                  borderBottom: `1px solid ${theme2.colors.border}`,
+                  backgroundColor: theme2.colors.surface
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        style: {
+                          margin: 0,
+                          fontSize: theme2.fontSizes[4],
+                          fontWeight: 600,
+                          color: theme2.colors.text
+                        },
+                        children: sequence.workflow.name
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        style: {
+                          margin: `${theme2.space[1]} 0 0`,
+                          fontSize: theme2.fontSizes[1],
+                          color: theme2.colors.textSecondary
+                        },
+                        children: sequence.scenario.description
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: theme2.space[2] }, children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: onOpenCanvas,
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: theme2.space[1],
+                          padding: `${theme2.space[2]} ${theme2.space[3]}`,
+                          backgroundColor: theme2.colors.primary,
+                          color: theme2.colors.background,
+                          border: "none",
+                          borderRadius: theme2.radii[1],
+                          fontSize: theme2.fontSizes[1],
+                          fontWeight: 500,
+                          cursor: "pointer"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
+                          "Open in Canvas"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          width: 32,
+                          height: 32,
+                          backgroundColor: "transparent",
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: theme2.radii[1],
+                          cursor: "pointer",
+                          color: theme2.colors.textSecondary
+                        },
+                        children: /* @__PURE__ */ jsx(X$2, { size: 18 })
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0 }, children: events.length > 0 ? /* @__PURE__ */ jsx(
+              SequenceDiagramRenderer,
+              {
+                events,
+                edges,
+                height: "100%",
+                layoutOptions: {
+                  laneWidth: 220,
+                  laneGap: 60,
+                  eventSpacing: 100,
+                  namespaceStrategy: "all-but-last"
+                },
+                showControls: true
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: theme2.colors.textSecondary
+                },
+                children: "No events defined for this scenario"
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
 const DashboardPanel = ({
   context: context2,
   actions,
@@ -206100,6 +206569,7 @@ const DashboardPanel = ({
   const [error, setError] = useState(null);
   const [timeRange, setTimeRange] = useState({ preset: "last_1h" });
   const [refreshInterval, setRefreshInterval] = useState("off");
+  const [selectedSequence, setSelectedSequence] = useState(null);
   gt("dashboard", events, () => {
     var _a2;
     return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
@@ -206154,7 +206624,6 @@ const DashboardPanel = ({
         onSourceClick(source2);
         return;
       }
-      if (!(events == null ? void 0 : events.emit)) return;
       const matchingStoryboard = storyboards == null ? void 0 : storyboards.find(
         (sb) => sb.basename === source2.storyboard || sb.name === source2.storyboard
       );
@@ -206166,6 +206635,44 @@ const DashboardPanel = ({
           const fullWorkflow = workflows == null ? void 0 : workflows.find(
             (wf) => wf.file.path === matchingWorkflowMeta.path
           );
+          if (fullWorkflow == null ? void 0 : fullWorkflow.template) {
+            const scenario = fullWorkflow.template.scenarios.find(
+              (s2) => {
+                var _a2;
+                return s2.id === source2.event || ((_a2 = s2.template.events) == null ? void 0 : _a2[source2.event ?? ""]);
+              }
+            ) ?? fullWorkflow.template.scenarios[0];
+            if (scenario) {
+              setSelectedSequence({
+                storyboard: matchingStoryboard,
+                workflowMeta: matchingWorkflowMeta,
+                workflow: fullWorkflow.template,
+                scenario,
+                source: source2
+              });
+              return;
+            }
+          }
+          if (events == null ? void 0 : events.emit) {
+            events.emit({
+              type: "custom",
+              source: "dashboard-panel",
+              timestamp: Date.now(),
+              payload: {
+                action: "openCanvas",
+                canvasId: matchingStoryboard.canvas.id,
+                canvas: matchingStoryboard.canvas,
+                workflowId: matchingWorkflowMeta.id,
+                workflow: fullWorkflow == null ? void 0 : fullWorkflow.template,
+                openMode: "detail",
+                sourceNodes: source2.nodes,
+                sourceEvent: source2.event
+              }
+            });
+          }
+          return;
+        }
+        if (events == null ? void 0 : events.emit) {
           events.emit({
             type: "custom",
             source: "dashboard-panel",
@@ -206174,43 +206681,48 @@ const DashboardPanel = ({
               action: "openCanvas",
               canvasId: matchingStoryboard.canvas.id,
               canvas: matchingStoryboard.canvas,
-              workflowId: matchingWorkflowMeta.id,
-              workflow: fullWorkflow == null ? void 0 : fullWorkflow.template,
-              openMode: "detail",
-              // Include source info for potential node/event highlighting
-              sourceNodes: source2.nodes,
-              sourceEvent: source2.event
+              openMode: "editor"
             }
           });
-          return;
         }
+        return;
+      }
+      if (events == null ? void 0 : events.emit) {
         events.emit({
-          type: "custom",
+          type: "dashboard:source-click",
           source: "dashboard-panel",
           timestamp: Date.now(),
           payload: {
-            action: "openCanvas",
-            canvasId: matchingStoryboard.canvas.id,
-            canvas: matchingStoryboard.canvas,
-            openMode: "editor"
+            source: source2,
+            storyboard: source2.storyboard,
+            workflow: source2.workflow,
+            nodes: source2.nodes
           }
         });
-        return;
       }
-      events.emit({
-        type: "dashboard:source-click",
-        source: "dashboard-panel",
-        timestamp: Date.now(),
-        payload: {
-          source: source2,
-          storyboard: source2.storyboard,
-          workflow: source2.workflow,
-          nodes: source2.nodes
-        }
-      });
     },
     [onSourceClick, events, storyboards, workflows]
   );
+  const handleOpenCanvas = useCallback(() => {
+    if (!selectedSequence || !(events == null ? void 0 : events.emit)) return;
+    const { storyboard, workflowMeta, workflow, source: source2 } = selectedSequence;
+    events.emit({
+      type: "custom",
+      source: "dashboard-panel",
+      timestamp: Date.now(),
+      payload: {
+        action: "openCanvas",
+        canvasId: storyboard.canvas.id,
+        canvas: storyboard.canvas,
+        workflowId: workflowMeta.id,
+        workflow,
+        openMode: "detail",
+        sourceNodes: source2.nodes,
+        sourceEvent: source2.event
+      }
+    });
+    setSelectedSequence(null);
+  }, [selectedSequence, events]);
   const handleMetricClick = useCallback(
     (metricId) => {
       if (onMetricClick) {
@@ -206309,7 +206821,7 @@ const DashboardPanel = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: panelRef,
@@ -206320,19 +206832,30 @@ const DashboardPanel = ({
         overflow: "auto",
         outline: "none"
       },
-      children: /* @__PURE__ */ jsx(
-        DashboardRenderer,
-        {
-          dashboard,
-          dataProvider: effectiveDataProvider,
-          timeRange,
-          onTimeRangeChange: setTimeRange,
-          refreshInterval,
-          onRefreshIntervalChange: setRefreshInterval,
-          onMetricClick: handleMetricClick,
-          onSourceClick: handleSourceClick
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx(
+          DashboardRenderer,
+          {
+            dashboard,
+            dataProvider: effectiveDataProvider,
+            timeRange,
+            onTimeRangeChange: setTimeRange,
+            refreshInterval,
+            onRefreshIntervalChange: setRefreshInterval,
+            onMetricClick: handleMetricClick,
+            onSourceClick: handleSourceClick
+          }
+        ),
+        selectedSequence && /* @__PURE__ */ jsx(
+          SequenceDiagramModal,
+          {
+            sequence: selectedSequence,
+            onClose: () => setSelectedSequence(null),
+            onOpenCanvas: handleOpenCanvas,
+            theme: theme2
+          }
+        )
+      ]
     }
   );
 };