@industry-theme/xterm-terminal-panel 0.5.14 → 0.5.16

package/dist/index.css

@@ -166,1933 +166,3 @@
 .terminal-working-overlay.closing {
   animation: blinds-up .3s ease-in forwards;
 }
-
-/* node_modules/@principal-ade/panels/dist/index.css */
-.animated-resizable-layout {
-  position: relative;
-  background-color: var(--panel-background);
-  width: 100%;
-  height: 100%;
-}
-
-.hybrid-panel {
-  overflow: auto;
-  background-color: var(--panel-background);
-  height: 100%;
-}
-
-.resize-handle {
-  background-color: var(--panel-handle);
-  display: flex;
-  cursor: col-resize;
-  position: relative;
-  justify-content: center;
-  align-items:  center;
-  width: 8px;
-  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 {
-  display: flex;
-  position: relative;
-  justify-content: center;
-  align-items:  center;
-  width: 100%;
-  height: 100%;
-}
-
-.collapse-toggle {
-  position: absolute;
-  background: var(--panel-button-bg);
-  border: 1px solid var(--panel-button-border);
-  cursor: pointer;
-  color: var(--panel-button-icon);
-  outline: none;
-  display: flex;
-  z-index: 10;
-  border-radius: 4px;
-  justify-content: center;
-  align-items:  center;
-  padding: 4px 8px;
-  transition: all .2s;
-  font-size: 14px;
-  box-shadow: 0 2px 4px #0000001a;
-}
-
-.animated-vertical-layout {
-  position: relative;
-  background-color: var(--panel-background);
-  width: 100%;
-  height: 100%;
-}
-
-.vertical-panel {
-  overflow: auto;
-  background-color: var(--panel-background);
-  width: 100%;
-}
-
-.panel-content-wrapper {
-  overflow: auto;
-  width: 100%;
-  height: 100%;
-}
-
-.vertical-resize-handle {
-  background-color: var(--panel-handle);
-  display: flex;
-  cursor: row-resize;
-  position: relative;
-  justify-content: center;
-  align-items:  center;
-  height: 8px;
-  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 {
-  display: flex;
-  position: relative;
-  justify-content: center;
-  align-items:  center;
-  gap: 8px;
-  width: 100%;
-  height: 100%;
-}
-
-.collapse-toggle {
-  background: var(--panel-button-bg);
-  border: 1px solid var(--panel-button-border);
-  cursor: pointer;
-  color: var(--panel-button-icon);
-  outline: none;
-  display: flex;
-  z-index: 10;
-  border-radius: 4px;
-  justify-content: center;
-  align-items:  center;
-  padding: 4px 8px;
-  transition: all .2s;
-  font-size: 14px;
-  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 {
-  position: relative;
-  display: flex;
-  background-color: var(--panel-background);
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-.csp-header {
-  display: flex;
-  background-color: var(--panel-handle);
-  border-bottom: 1px solid var(--panel-border, #80808033);
-  -webkit-user-select: none;
-  user-select: none;
-  flex-shrink: 0;
-  align-items:  center;
-  gap: 8px;
-  padding: 0 12px;
-  transition: background-color .15s;
-}
-
-.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, #3b82f680);
-}
-
-.csp-header-icon {
-  display: flex;
-  color: var(--panel-text-secondary, #888);
-  justify-content: center;
-  align-items:  center;
-  font-size: 14px;
-}
-
-.csp-header-title {
-  color: var(--panel-text, #333);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.csp-header-toggle {
-  display: flex;
-  color: var(--panel-text-secondary, #888);
-  cursor: pointer;
-  background: none;
-  border: none;
-  border-radius: 3px;
-  justify-content: center;
-  align-items:  center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  transition: background-color .15s, color .15s;
-}
-
-.csp-header-toggle:hover {
-  background-color: var(--panel-button-hover, #80808033);
-  color: var(--panel-text, #333);
-}
-
-.csp-content-area {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.csp-primary-content-full {
-  overflow: hidden;
-  flex: 1;
-  min-height: 0;
-}
-
-.csp-secondary-panel, .csp-primary-panel {
-  overflow: hidden;
-  background-color: var(--panel-background);
-}
-
-.csp-panel-content {
-  display: flex;
-  overflow: hidden;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-.csp-secondary-body {
-  overflow: auto;
-  width: 100%;
-  height: 100%;
-}
-
-.csp-resize-handle {
-  background-color: var(--panel-handle);
-  display: flex;
-  cursor: row-resize;
-  position: relative;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items:  center;
-  height: 6px;
-  transition: background-color .15s;
-}
-
-.csp-resize-handle:hover {
-  background-color: var(--panel-handle-hover);
-}
-
-.csp-resize-handle:active {
-  background-color: var(--panel-handle-active);
-}
-
-.csp-resize-handle-bar {
-  background-color: var(--panel-handle-bar, #80808066);
-  border-radius: 2px;
-  width: 32px;
-  height: 3px;
-  transition: background-color .15s;
-}
-
-.csp-resize-handle:hover .csp-resize-handle-bar {
-  background-color: var(--panel-handle-bar-hover, #80808099);
-}
-
-.three-panel-layout {
-  display: flex;
-  position: relative;
-  background-color: var(--panel-background);
-  box-sizing: border-box;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-.three-panel-item {
-  display: flex;
-  overflow: hidden;
-  position: relative;
-  background-color: var(--panel-background);
-  box-sizing: border-box;
-  flex-direction: column;
-}
-
-.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 {
-  visibility: hidden;
-  overflow: hidden !important;
-  flex: 0 !important;
-  width: 0 !important;
-  min-width: 0 !important;
-  max-width: 0 !important;
-}
-
-.three-panel-item.middle-panel {
-  flex: 1;
-  min-width: 200px;
-}
-
-.panel-content-wrapper {
-  overflow-x: hidden;
-  overflow-y: auto;
-  will-change: opacity;
-  box-sizing: border-box;
-  flex: 1;
-}
-
-.resize-handle {
-  position: relative;
-  display: flex;
-  cursor: col-resize;
-  background: var(--panel-border);
-  justify-content: center;
-  align-items:  center;
-  overflow: visible !important;
-  width: 1px !important;
-}
-
-.resize-handle:before {
-  content: "";
-  position: absolute;
-  background: none;
-  inset: 0 -10px;
-}
-
-.resize-handle:after {
-  content: "";
-  position: absolute;
-  background: var(--panel-handle);
-  opacity: 0;
-  z-index: -1;
-  transition: opacity .2s;
-  inset: 0 -10px;
-}
-
-.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 {
-  visibility: hidden;
-  width: 0 !important;
-}
-
-.resize-handle.left-handle.collapsed {
-  margin-right: -1px;
-}
-
-.resize-handle.right-handle.collapsed {
-  margin-left: -1px;
-}
-
-.handle-bar {
-  position: relative;
-  display: flex;
-  z-index: 2;
-  justify-content: center;
-  align-items:  center;
-  width: 100%;
-  height: 100%;
-}
-
-.collapse-toggle {
-  position: absolute;
-  background: var(--panel-button-bg);
-  border: 1px solid var(--panel-button-border);
-  display: flex;
-  cursor: pointer;
-  color: var(--panel-button-icon);
-  z-index: 10;
-  border-radius: 4px;
-  justify-content: center;
-  align-items:  center;
-  width: 20px;
-  height: 40px;
-  padding: 0;
-  transition: all .2s;
-  font-size: 12px;
-  line-height: 1;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.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, .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-origin: center center;
-  cursor: grab;
-  will-change: transform;
-  transition: transform .3s cubic-bezier(.4,0,.2,1);
-  transform: scale(.95);
-}
-
-[data-slot][data-edit-mode="true"]:active {
-  cursor: grabbing;
-}
-
-[data-slot][data-dragging="true"] {
-  cursor: grabbing !important;
-  transition: none !important;
-  transform: scale(.95) !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;
-  pointer-events: auto;
-  cursor: grab;
-  z-index: 100;
-  display: flex;
-  background: none;
-  border: none;
-  flex-direction: column;
-  justify-content: center;
-  align-items:  center;
-  inset: 0;
-}
-
-.slot-edit-overlay:hover {
-  background: #3b82f608;
-}
-
-.slot-edit-overlay:active {
-  cursor: grabbing;
-}
-
-.drag-indicator, .slot-position-label {
-  display: none;
-}
-
-.edit-mode-toggle {
-  position: absolute;
-  z-index: 1000;
-  color: #374151;
-  cursor: pointer;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 8px 16px;
-  transition: all .2s;
-  font-size: 14px;
-  font-weight: 500;
-  top: 16px;
-  right: 16px;
-  box-shadow: 0 2px 4px #0000001a;
-}
-
-.edit-mode-toggle:hover {
-  background: #f9fafb;
-  box-shadow: 0 4px 6px #0000001a;
-}
-
-.edit-mode-toggle.active {
-  color: #fff;
-  background: #3b82f6;
-  border-color: #2563eb;
-}
-
-.edit-mode-overlay {
-  position: fixed;
-  z-index: 998;
-  animation: fadeIn .2s ease;
-  background: #0000004d;
-  inset: 0;
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.edit-mode-configurator {
-  position: relative;
-  z-index: 999;
-  animation: scaleIn .3s ease;
-  padding: 20px;
-}
-
-.panel-slot {
-  position: relative;
-  border: 2px dashed #0000;
-  border-radius: 12px;
-  min-height: 120px;
-  padding: 12px;
-  transition: all .3s;
-}
-
-.panel-slot.edit-mode {
-  background: #ffffff80;
-  border-color: #d1d5db;
-}
-
-.panel-slot.drag-over {
-  background: #3b82f61a;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 4px #3b82f61a;
-}
-
-.panel-slot.empty {
-  display: flex;
-  color: #9ca3af;
-  justify-content: center;
-  align-items:  center;
-  font-size: 14px;
-}
-
-.draggable-panel {
-  position: relative;
-  cursor: grab;
-  -webkit-user-select: none;
-  user-select: none;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  margin: 8px 0;
-  padding: 12px 16px;
-  transition: all .2s;
-}
-
-.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;
-  color: #fff;
-  display: flex;
-  cursor: pointer;
-  opacity: 0;
-  z-index: 10;
-  background: #ef4444;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  justify-content: center;
-  align-items:  center;
-  width: 20px;
-  height: 20px;
-  transition: all .2s;
-  font-size: 12px;
-  font-weight: 700;
-  top: -6px;
-  right: -6px;
-  transform: scale(0);
-  box-shadow: 0 2px 4px #0003;
-}
-
-.draggable-panel.edit-mode .remove-button {
-  opacity: 1;
-  animation: pulse 2s infinite;
-  transform: scale(1);
-}
-
-.remove-button:hover {
-  background: #dc2626;
-  transform: scale(1.1);
-}
-
-.panel-label {
-  display: flex;
-  color: #374151;
-  align-items:  center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.panel-icon {
-  display: flex;
-  justify-content: center;
-  align-items:  center;
-  width: 20px;
-  height: 20px;
-}
-
-.drag-handle {
-  display: none;
-  opacity: .4;
-  cursor: grab;
-  width: 24px;
-  height: 24px;
-}
-
-.edit-mode .drag-handle {
-  display: flex;
-  justify-content: center;
-  align-items:  center;
-}
-
-.drag-overlay {
-  cursor: grabbing;
-  opacity: .9;
-  background: #fff;
-  border: 2px solid #3b82f6;
-  border-radius: 8px;
-  padding: 12px 16px;
-  box-shadow: 0 8px 16px #0003;
-}
-
-.panel-group {
-  background: #fff;
-  border: 2px solid #e5e7eb;
-  border-radius: 12px;
-  padding: 8px;
-}
-
-.panel-group.edit-mode {
-  animation: wiggle .5s ease-in-out infinite;
-  border-color: #3b82f6;
-}
-
-.panel-group-header {
-  display: flex;
-  border-bottom: 1px solid #e5e7eb;
-  justify-content: space-between;
-  align-items:  center;
-  margin-bottom: 8px;
-  padding: 8px;
-}
-
-.panel-group-title {
-  color: #6b7280;
-  text-transform: uppercase;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.available-panels {
-  background: #fff;
-  border-radius: 12px;
-  padding: 16px;
-  box-shadow: 0 4px 6px #0000001a;
-}
-
-.available-panels-title {
-  color: #374151;
-  margin-bottom: 12px;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.available-panels-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.slot-label {
-  color: #6b7280;
-  text-transform: uppercase;
-  display: flex;
-  align-items:  center;
-  gap: 8px;
-  margin-bottom: 8px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.slot-indicator {
-  background: #d1d5db;
-  border-radius: 50%;
-  width: 8px;
-  height: 8px;
-}
-
-.slot-indicator.active {
-  background: #3b82f6;
-}
-
-.action-buttons {
-  position: fixed;
-  z-index: 1001;
-  display: flex;
-  animation: scaleIn .3s ease;
-  background: #fff;
-  border-radius: 12px;
-  gap: 12px;
-  padding: 12px 24px;
-  bottom: 24px;
-  left: 50%;
-  transform: translate(-50%);
-  box-shadow: 0 8px 16px #00000026;
-}
-
-.action-button {
-  color: #374151;
-  cursor: pointer;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 10px 20px;
-  transition: all .2s;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.action-button:hover {
-  background: #f9fafb;
-}
-
-.action-button.primary {
-  color: #fff;
-  background: #3b82f6;
-  border-color: #2563eb;
-}
-
-.action-button.primary:hover {
-  background: #2563eb;
-}
-
-@media (max-width: 768px) {
-  .edit-mode-toggle {
-    padding: 6px 12px;
-    font-size: 12px;
-    top: 8px;
-    right: 8px;
-  }
-
-  .action-buttons {
-    padding: 10px 16px;
-    bottom: 16px;
-  }
-
-  .action-button {
-    padding: 8px 16px;
-    font-size: 13px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .edit-mode-toggle {
-    color: #f9fafb;
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .edit-mode-toggle:hover {
-    background: #374151;
-  }
-
-  .draggable-panel {
-    color: #f9fafb;
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .available-panels {
-    background: #1f2937;
-  }
-
-  .panel-label {
-    color: #f9fafb;
-  }
-
-  .action-buttons {
-    background: #1f2937;
-  }
-
-  .action-button {
-    color: #f9fafb;
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .action-button:hover {
-    background: #374151;
-  }
-}
-
-.panel-configurator {
-  display: flex;
-  background: var(--configurator-bg);
-  border-radius: 8px;
-  flex-direction: column;
-  gap: 2rem;
-  padding: 1.5rem;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
-}
-
-.configurator-section {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.section-title {
-  color: var(--configurator-title);
-  text-transform: uppercase;
-  letter-spacing: .05em;
-  text-align: center;
-  margin: 0;
-  font-size: .875rem;
-  font-weight: 600;
-}
-
-.slots-container {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  align-items:  start;
-  gap: 1rem;
-  width: 75%;
-  margin: 0 auto;
-}
-
-.slot {
-  position: relative;
-  aspect-ratio: 1 / 1.3;
-  background: var(--slot-bg);
-  border: 2px solid var(--slot-border);
-  cursor: pointer;
-  display: flex;
-  overflow: hidden;
-  box-sizing: border-box;
-  border-radius: 6px;
-  flex-direction: column;
-  gap: .5rem;
-  width: 100%;
-  padding: 2.5rem 1rem 1rem;
-  transition: all .2s;
-}
-
-.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 {
-  color: var(--slot-label);
-  text-transform: capitalize;
-  text-align: left;
-  font-size: .75rem;
-  font-weight: 600;
-}
-
-.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 {
-  display: flex;
-  overflow-y: auto;
-  flex-direction: column;
-  flex: 1;
-  gap: .5rem;
-  min-height: 0;
-}
-
-.slot-panel-name {
-  color: var(--slot-content-text);
-  font-size: .875rem;
-  font-weight: 600;
-}
-
-.slot-preview {
-  display: flex;
-  background: var(--slot-preview-bg);
-  border: 1px solid var(--slot-preview-border);
-  color: var(--slot-preview-text);
-  border-radius: 4px;
-  flex: 1;
-  justify-content: center;
-  align-items:  center;
-  padding: .5rem;
-  font-size: .75rem;
-}
-
-.slot-empty-state {
-  display: flex;
-  color: var(--slot-empty-text);
-  flex: 1;
-  justify-content: center;
-  align-items:  center;
-  min-height: 0;
-  font-size: .875rem;
-  font-style: italic;
-}
-
-.slot-clear-btn {
-  position: absolute;
-  background: var(--clear-btn-bg);
-  color: var(--clear-btn-text);
-  cursor: pointer;
-  display: flex;
-  opacity: 0;
-  border: none;
-  border-radius: 4px;
-  justify-content: center;
-  align-items:  center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  transition: opacity .2s;
-  font-size: 1.25rem;
-  line-height: 1;
-  top: .25rem;
-  right: .25rem;
-}
-
-.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 {
-  background: var(--panel-bg);
-  border: 2px solid var(--panel-border);
-  cursor: pointer;
-  display: flex;
-  border-radius: 6px;
-  flex-direction: column;
-  gap: .5rem;
-  min-height: 80px;
-  padding: .75rem;
-  transition: all .2s;
-}
-
-.available-panel:hover {
-  border-color: var(--panel-border-hover);
-  transform: translateY(-2px);
-  box-shadow: 0 2px 4px #0000000d;
-}
-
-.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 {
-  opacity: .6;
-  transform: translateY(0);
-}
-
-.panel-label {
-  color: var(--panel-label-text);
-  font-size: .875rem;
-  font-weight: 600;
-}
-
-.panel-preview {
-  display: flex;
-  background: var(--panel-preview-bg);
-  color: var(--panel-preview-text);
-  border-radius: 4px;
-  flex: 1;
-  justify-content: center;
-  align-items:  center;
-  padding: .5rem;
-  font-size: .75rem;
-}
-
-.selection-hint {
-  background: var(--hint-bg);
-  border: 1px solid var(--hint-border);
-  color: var(--hint-text);
-  text-align: center;
-  border-radius: 6px;
-  padding: .75rem 1rem;
-  font-size: .875rem;
-}
-
-.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 {
-  background: var(--panel-border-selected);
-  color: #fff;
-  border-radius: 12px;
-  margin-left: .5rem;
-  padding: .25rem .5rem;
-  font-size: .75rem;
-  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 {
-  color: var(--panel-border-selected);
-  margin-bottom: .5rem;
-  font-size: .75rem;
-  font-weight: 600;
-}
-
-.group-panels {
-  display: flex;
-  overflow-y: auto;
-  flex-direction: column;
-  flex: 1;
-  gap: .25rem;
-  min-height: 0;
-}
-
-.group-panel-label {
-  color: var(--slot-content-text);
-  background: var(--slot-preview-bg);
-  border-left: 3px solid var(--panel-border-selected);
-  border-radius: 3px;
-  padding: .25rem .5rem;
-  font-size: .75rem;
-}
-
-.slot-panel-label {
-  color: var(--slot-content-text);
-  text-align: center;
-  font-size: .875rem;
-  font-weight: 600;
-}
-
-.create-tab-group-btn {
-  background: var(--panel-border-selected);
-  color: #fff;
-  cursor: pointer;
-  border: none;
-  border-radius: 4px;
-  margin-top: .5rem;
-  padding: .5rem .75rem;
-  transition: all .2s;
-  font-size: .75rem;
-  font-weight: 600;
-}
-
-.create-tab-group-btn:hover {
-  transform: scale(1.05);
-  box-shadow: 0 2px 4px #0000001a;
-}
-
-.tab-mode-toggle {
-  position: absolute;
-  background: var(--slot-bg);
-  border: 1px solid var(--slot-border);
-  cursor: pointer;
-  z-index: 10;
-  opacity: .7;
-  color: var(--slot-content-text);
-  border-radius: 4px;
-  padding: .25rem .5rem;
-  transition: all .2s;
-  font-size: .85rem;
-  top: .5rem;
-  left: .5rem;
-}
-
-.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;
-  color: var(--slot-label);
-  align-items:  center;
-  gap: .5rem;
-  font-size: .75rem;
-}
-
-.tab-config-label select {
-  border: 1px solid var(--slot-border);
-  background: var(--slot-bg);
-  color: var(--slot-content-text);
-  cursor: pointer;
-  border-radius: 3px;
-  padding: .25rem .5rem;
-  font-size: .7rem;
-}
-
-.group-panel-item {
-  display: flex;
-  background: var(--slot-preview-bg);
-  border-left: 3px solid var(--panel-border-selected);
-  border-radius: 3px;
-  justify-content: space-between;
-  align-items:  center;
-  gap: .5rem;
-  padding: .25rem .5rem;
-}
-
-.group-panel-label {
-  color: var(--slot-content-text);
-  display: flex;
-  flex: 1;
-  align-items:  center;
-  gap: .25rem;
-  font-size: .75rem;
-}
-
-.default-badge {
-  color: var(--panel-border-selected);
-  font-size: .9em;
-}
-
-.remove-from-group-btn {
-  background: var(--clear-btn-bg);
-  color: var(--clear-btn-text);
-  cursor: pointer;
-  display: flex;
-  opacity: .7;
-  border: none;
-  border-radius: 3px;
-  justify-content: center;
-  align-items:  center;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  transition: all .2s;
-  font-size: 1rem;
-  line-height: 1;
-}
-
-.remove-from-group-btn:hover {
-  opacity: 1;
-  transform: scale(1.1);
-}
-
-.usage-hint {
-  background: var(--slot-preview-bg);
-  border: 1px solid var(--slot-border);
-  color: var(--hint-text);
-  text-align: center;
-  border-radius: 6px;
-  padding: .75rem 1rem;
-  font-size: .875rem;
-}
-
-.tab-group {
-  display: flex;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-}
-
-.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);
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  flex-shrink: 0;
-  gap: 0;
-  padding: 0;
-}
-
-.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-top: none;
-  border-bottom: none;
-}
-
-.tab-position-left .tab-list, .tab-position-right .tab-list {
-  border-bottom: none;
-  border-right: none;
-  flex-direction: column;
-  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);
-  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);
-  white-space: nowrap;
-  display: flex;
-  box-sizing: border-box;
-  container-type: inline-size;
-  border-radius: 0;
-  justify-content: center;
-  align-items:  center;
-  gap: 6px;
-  height: 39px;
-  padding: 8px 16px;
-  transition: all .2s;
-  line-height: 1;
-}
-
-.tab-position-top .tab-button {
-  border-top: none;
-  border-bottom: 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-bottom: none;
-  border-right: none;
-}
-
-.tab-position-left .tab-button:last-child {
-  border-bottom: 1px solid var(--tab-border, #ddd);
-}
-
-.tab-position-right .tab-button {
-  border-bottom: none;
-  border-left: none;
-}
-
-.tab-position-right .tab-button:last-child {
-  border-bottom: 1px solid var(--tab-border, #ddd);
-}
-
-.tab-icon {
-  display: inline-flex;
-  justify-content: center;
-  align-items:  center;
-}
-
-.tab-label {
-  display: none;
-}
-
-@container (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 {
-  overflow: auto;
-  background: var(--tab-content-bg, #fff);
-  flex: 1;
-}
-
-.tab-group-empty {
-  display: flex;
-  color: var(--tab-empty-text, #999);
-  justify-content: center;
-  align-items:  center;
-  height: 100%;
-  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);
-  background-color: var(--panel-background);
-  box-sizing: border-box;
-  position: relative;
-  container-type: inline-size;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  left: 0;
-  transform: 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 {
-  scroll-snap-align: start;
-  scroll-snap-stop: always;
-  width: var(--snap-carousel-panel-width, 33.33%);
-  box-sizing: border-box;
-  overflow: hidden;
-  flex: none;
-  height: 100%;
-}
-
-@media (max-width: 540px) {
-  .snap-carousel-panel {
-    min-width: 280px;
-  }
-}
-
-.mobile-tab-layout {
-  display: flex;
-  overflow: hidden;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-.mobile-tab-content {
-  overflow: hidden;
-  flex: 1;
-  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;
-  margin: 0;
-  padding: 0;
-}
-
-.mobile-tab-button {
-  display: flex;
-  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);
-  background: none;
-  border: none;
-  flex-direction: column;
-  flex: 1;
-  justify-content: center;
-  align-items:  center;
-  gap: 6px;
-  min-width: 0;
-  transition: color .2s;
-}
-
-.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;
-  color: var(--tab-icon-color, #999);
-  justify-content: center;
-  align-items:  center;
-  transition: color .2s;
-  font-size: 24px;
-}
-
-.mobile-tab-button.active .tab-icon {
-  color: var(--mobile-tab-icon-active, #007bff);
-}
-
-.mobile-tab-button .tab-label {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: inherit;
-  opacity: 1;
-  max-width: 100%;
-  font-size: 11px;
-  line-height: 1.2;
-}
-
-.mobile-tab-button:focus-visible {
-  outline: 2px solid var(--tab-focus, #007bff);
-  outline-offset: -2px;
-  z-index: 1;
-}
-
-:root {
-  --panels-background: #fff;
-  --panels-foreground: #000;
-  --panels-border: #e5e7eb;
-  --panels-handle-bg: #f3f4f6;
-  --panels-handle-hover: #e5e7eb;
-  --panels-handle-active: #d1d5db;
-  --panels-button-bg: #fff;
-  --panels-button-hover: #f9fafb;
-  --panels-button-active: #f3f4f6;
-  --panels-shadow: #0000001a;
-  --panels-animation-duration: .3s;
-  --panels-animation-easing: cubic-bezier(.4, 0, .2, 1);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --panels-background: #1a1a1a;
-    --panels-foreground: #fff;
-    --panels-border: #404040;
-    --panels-handle-bg: #2a2a2a;
-    --panels-handle-hover: #333;
-    --panels-handle-active: #404040;
-    --panels-button-bg: #2a2a2a;
-    --panels-button-hover: #333;
-    --panels-button-active: #404040;
-    --panels-shadow: #0000004d;
-  }
-}
-
-[data-theme="light"] {
-  --panels-background: #fff;
-  --panels-foreground: #000;
-  --panels-border: #e5e7eb;
-  --panels-handle-bg: #f3f4f6;
-  --panels-handle-hover: #e5e7eb;
-  --panels-handle-active: #d1d5db;
-  --panels-button-bg: #fff;
-  --panels-button-hover: #f9fafb;
-  --panels-button-active: #f3f4f6;
-  --panels-shadow: #0000001a;
-}
-
-[data-theme="dark"] {
-  --panels-background: #1a1a1a;
-  --panels-foreground: #fff;
-  --panels-border: #404040;
-  --panels-handle-bg: #2a2a2a;
-  --panels-handle-hover: #333;
-  --panels-handle-active: #404040;
-  --panels-button-bg: #2a2a2a;
-  --panels-button-hover: #333;
-  --panels-button-active: #404040;
-  --panels-shadow: #0000004d;
-}
-
-.panels-container {
-  display: flex;
-  background-color: var(--panels-background);
-  color: var(--panels-foreground);
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.panels-panel {
-  position: relative;
-  overflow: auto;
-  background-color: var(--panels-background);
-}
-
-.panels-handle {
-  background-color: var(--panels-handle-bg);
-  position: relative;
-  z-index: 10;
-  transition: background-color .15s;
-}
-
-.panels-handle:hover {
-  background-color: var(--panels-handle-hover);
-}
-
-.panels-handle:active {
-  background-color: var(--panels-handle-active);
-}
-
-.panels-handle-horizontal {
-  cursor: col-resize;
-  width: 8px;
-}
-
-.panels-handle-vertical {
-  cursor: row-resize;
-  height: 8px;
-}
-
-.panels-handle-collapsed {
-  pointer-events: none;
-  background-color: var(--panels-border) !important;
-  cursor: default !important;
-  width: 1px !important;
-  min-width: 1px !important;
-}
-
-.panels-handle-collapsed .panels-collapse-button {
-  pointer-events: auto;
-}
-
-.panels-collapse-button {
-  position: absolute;
-  background-color: var(--panels-button-bg);
-  border: 1px solid var(--panels-border);
-  display: flex;
-  cursor: pointer;
-  box-shadow: 0 1px 3px var(--panels-shadow);
-  z-index: 20;
-  border-radius: 4px;
-  justify-content: center;
-  align-items:  center;
-  width: 24px;
-  height: 24px;
-  transition: all .15s;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.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;
-  z-index: 30;
-  left: -12px;
-}
-
-.panels-collapse-icon {
-  stroke: var(--panels-foreground);
-  stroke-width: 2;
-  fill: none;
-  width: 16px;
-  height: 16px;
-  transition: transform .15s;
-}
-
-.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 {
-  color: var(--panels-foreground);
-  cursor: pointer;
-  position: relative;
-  background: none;
-  border: none;
-  flex: 1;
-  padding: .75rem 1rem;
-  transition: background-color .15s;
-}
-
-.panels-tab:hover {
-  background-color: var(--panels-handle-hover);
-}
-
-.panels-tab-active {
-  background-color: var(--panels-background);
-}
-
-.panels-tab-active:after {
-  content: "";
-  position: absolute;
-  background-color: var(--panels-foreground);
-  height: 2px;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-}
-
-.panels-drawer-toggle {
-  position: fixed;
-  z-index: 100;
-  background-color: var(--panels-button-bg);
-  border: 1px solid var(--panels-border);
-  display: flex;
-  cursor: pointer;
-  box-shadow: 0 2px 8px var(--panels-shadow);
-  border-radius: 8px;
-  justify-content: center;
-  align-items:  center;
-  width: 40px;
-  height: 40px;
-  top: 1rem;
-  left: 1rem;
-}
-
-.panels-drawer-icon {
-  width: 24px;
-  height: 24px;
-}
-
-.panels-drawer {
-  position: fixed;
-  background-color: var(--panels-background);
-  border-right: 1px solid var(--panels-border);
-  transition: transform var(--panels-animation-duration) var(--panels-animation-easing);
-  z-index: 90;
-  overflow-y: auto;
-  width: 300px;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  transform: translate(-100%);
-}
-
-.panels-drawer-open {
-  transform: translate(0);
-}
-
-.panels-drawer-panel, .panels-main-panel {
-  padding: 4rem 1rem 1rem;
-}