/* Import component files first */
:root {
    --transition-duration: 0.2s;
    --animation-transition-duration: 0.2s;
}
/* Non-Tailwind additions for consistent card heights */
.project-card-desc {
    min-height: 3.75rem; /* ~3 lines at 1.25rem line-height */
}
/* Permission badge styles */
.permission-badge {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.permission-badge:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.permission-owner {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.permission-owner:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.permission-collab-modify {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.permission-collab-modify:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}
.permission-collab-read {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.permission-collab-read:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.btn-disabled, .duplicate-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}
/* Responsive auto-fit grid for projects to utilize available space */
#projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Workflow Section Styles */
.workflow-section.fullscreen {
    position: fixed;
    top: 4rem; /* Assuming header height */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    margin: 0;
    border-radius: 0;
}
.workflow-section.fullscreen .card-body {
    height: 100%;
    border-radius: 0;
}
.workflow-section.fullscreen .card-header {
    border-radius: 0;
}
.toolbar-btn {
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.toolbar-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.toolbar-btn:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.toolbar-btn {
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.toolbar-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.toolbar-btn:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.toolbar-btn {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
#workflow-settings-modal .toolbar-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.toolbar-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.toolbar-btn:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.toolbar-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.toolbar-btn:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.toolbar-btn {
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
#workflow-settings-modal .toolbar-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  background: #e5e7eb;
  color: #374151;
}
#workflow-settings-modal .toolbar-btn:hover {
  background: #d1d5db;
}
.dark #workflow-settings-modal .toolbar-btn {
  background: #4b5563;
  color: #e5e7eb;
}
.dark #workflow-settings-modal .toolbar-btn:hover {
  background: #555;
}
.toolbar-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.toolbar-btn svg {
    height: 1rem;
    width: 1rem;
}
.save-success-glow {
    border-radius: 9999px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity, 1));
}
.save-success-glow:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(21 128 61 / var(--tw-ring-opacity, 1));
}
/* Animation for spinning loading icons */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 1s linear infinite;
}
/* Loading state styles with dark mode support */
.loading-status {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.loading-status .spinner-container {
    flex-shrink: 0;
}
.loading-status .loading-text {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
/* Ensure spinner works in both light and dark modes */
.loading-status svg {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.loading-status svg:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
/* Error state styles */
.loading-error {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.retry-button {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.retry-button:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.retry-button:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* Processing status styles */
.processing-status {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
svg.collapsed {
    --tw-rotate: -90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
svg.expanded {
    --tw-rotate: 0deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Utility Classes and Miscellaneous Styles */
/* Search input styling specific to project search */
#project-search-input::placeholder {
    color: rgb(147, 197, 253); /* blue-200 equivalent */
}
/* Workflow Debugger Custom Styles */
/* Main overlay constraints */
.workflow-debugger {
    max-width: 95vw;
    max-height: 90vh;
    overflow: hidden;
}
/* Base overlay styling */
.workflow-debugger-base {
    position: fixed;
    z-index: 10000;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    background-color: rgb(17 24 39 / 0.95);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* Overlay with flex layout */
.workflow-debugger-flex {
    position: fixed;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    background-color: rgb(17 24 39 / 0.95);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* Debugger header */
.workflow-debugger .debugger-header {
    display: flex;
    cursor: move;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    padding: 0.75rem;
    flex-shrink: 0;
}
/* Event list container */
.workflow-debugger .event-list-container {
    flex: 1 1 0%;
    overflow-y: auto;
    min-height: 0;
    background: rgba(0, 0, 0, 0.3);
}
/* Custom scrollbar styling for better visibility */
.workflow-debugger .event-list-container::-webkit-scrollbar {
    width: 12px;
}
.workflow-debugger .event-list-container::-webkit-scrollbar-track {
    background: #1f2937;
    border-radius: 6px;
}
.workflow-debugger .event-list-container::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 6px;
    border: 2px solid #1f2937;
}
.workflow-debugger .event-list-container::-webkit-scrollbar-thumb:hover {
    background: #3b82f6;
}
/* Firefox scrollbar styling */
.workflow-debugger .event-list-container {
    scrollbar-width: auto;
    scrollbar-color: #4b5563 #1f2937;
}
/* Event stage-specific border colors */
.workflow-debugger .event.file-upload {
    border-left: 3px solid #22c55e;
}
.workflow-debugger .event.parse {
    border-left: 3px solid #3b82f6;
}
.workflow-debugger .event.dataset-create {
    border-left: 3px solid #a855f7;
}
.workflow-debugger .event.plot-create {
    border-left: 3px solid #f59e0b;
}
.workflow-debugger .event.spectrum-extract {
    border-left: 3px solid #06b6d4;
}
.workflow-debugger .event.error {
    border-left: 3px solid #ef4444;
}
/* Hover effect for event items */
.workflow-debugger .event:hover {
    background-color: rgba(59, 130, 246, 0.1);
}
/* Selected event highlight */
.workflow-debugger .event.selected {
    background-color: rgba(59, 130, 246, 0.2);
}
/* Header drag cursor */
.workflow-debugger .debugger-header {
    cursor: move;
    user-select: none;
}
/* Timing chart bars */
.workflow-debugger .timing-chart {
    display: flex;
    height: 2rem;
    border-radius: 0.25rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.workflow-debugger .timing-chart .bar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s;
}
.workflow-debugger .timing-chart .bar:hover {
    filter: brightness(1.1);
}
/* JSON viewer scrollbars */
.workflow-debugger .json-viewer {
    scrollbar-width: thin;
    scrollbar-color: #4b5563 #1f2937;
}
.workflow-debugger .json-viewer::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.workflow-debugger .json-viewer::-webkit-scrollbar-track {
    background: #1f2937;
}
.workflow-debugger .json-viewer::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}
.workflow-debugger .json-viewer::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}
/* JSON tree styles */
.workflow-debugger .json-tree {
    font-family: 'Courier New', monospace;
    line-height: 1.5;
}
.workflow-debugger .json-node {
    margin: 2px 0;
}
.workflow-debugger .json-item {
    margin: 2px 0;
    padding-left: 0;
}
.workflow-debugger .json-toggle {
    display: inline-block;
    width: 12px;
    user-select: none;
    font-size: 10px;
    transition: transform 0.2s ease;
}
.workflow-debugger .json-children {
    margin-left: 16px;
    border-left: 1px solid #374151;
    padding-left: 8px;
}
.workflow-debugger .json-tree::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.workflow-debugger .json-tree::-webkit-scrollbar-track {
    background: #1f2937;
}
.workflow-debugger .json-tree::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}
.workflow-debugger .json-tree::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}
/* Button hover effects */
.workflow-debugger button {
    transition: all 0.15s ease;
}
.workflow-debugger button:active {
    transform: scale(0.95);
}
/* Minimized badge pulse animation */
.workflow-debugger.minimized:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}
/* Event count badge */
.workflow-debugger .event-count {
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
}
/* Profiling table */
.workflow-debugger .profiling-steps {
    width: 100%;
    font-size: 0.75rem;
}
.workflow-debugger .profiling-steps td {
    padding: 0.25rem 0.5rem;
}
/* Metadata grid */
.workflow-debugger .metadata-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    font-size: 0.75rem;
}
/* Copy button positioning */
.workflow-debugger .copy-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}
/* Transitions for mode changes */
.workflow-debugger {
    transition: width 0.2s ease, height 0.2s ease, transform 0.2s ease;
}
/* Resize handles */
.workflow-debugger .resize-handle {
    position: absolute;
    background-color: transparent;
    z-index: 10;
    transition: background-color 0.2s ease;
}
.workflow-debugger .resize-handle-n {
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    cursor: n-resize;
}
.workflow-debugger .resize-handle-e {
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: e-resize;
}
.workflow-debugger .resize-handle-s {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    cursor: s-resize;
}
.workflow-debugger .resize-handle-w {
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    cursor: w-resize;
}
.workflow-debugger .resize-handle-n:hover,
.workflow-debugger .resize-handle-s:hover {
    background-color: rgba(59, 130, 246, 0.3);
}
.workflow-debugger .resize-handle-e:hover,
.workflow-debugger .resize-handle-w:hover {
    background-color: rgba(59, 130, 246, 0.3);
}
/* Workflow canvas styles with theme-aware classes and hover effects */
:root {
  --workflow-node-color: #e5e7eb;
  --workflow-node-text-color: #000000;
  --workflow-connector-inlet-color: #2196F3;
  --workflow-connector-outlet-color: #4CAF50;
  --workflow-connection-color: #000000;
  --workflow-grid-color: #dddddd;
  --workflow-node-hover-stroke-color: #007bff;
  --workflow-connector-hover-color: #ff6b6b;
  --workflow-connection-hover-color: #ff4444;
}
.dark {
  --workflow-node-color: #374151;
  --workflow-node-text-color: #e5e7eb;
  --workflow-connector-inlet-color: #60a5fa;
  --workflow-connector-outlet-color: #34d399;
  --workflow-connection-color: #e5e7eb;
  --workflow-grid-color: #555555;
  --workflow-node-hover-stroke-color: #60a5fa;
  --workflow-connector-hover-color: #f87171;
  --workflow-connection-hover-color: #ef4444;
}
/* Grid line styles */
.workflow-grid {
  stroke: var(--workflow-grid-color);
}
.workflow-grid-minor {
  stroke: var(--workflow-grid-color);
  opacity: 0.5;
}
.workflow-grid-major {
  stroke: var(--workflow-grid-color);
  opacity: 1;
}
/* Node styles */
.workflow-node .node-rect {
  fill: white;
  stroke: #666;
  stroke-width: 2;
  rx: 5;
  transition: fill var(--transition-duration) ease, stroke 0.2s ease;
}
.dark .workflow-node .node-rect {
  fill: var(--workflow-node-color);
  stroke: #999;
}
.workflow-node .node-text {
  fill: var(--workflow-node-text-color);
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: Arial;
  font-size: 14;
  transition: fill var(--transition-duration) ease;
}
.dark .workflow-node .node-text {
  fill: var(--workflow-node-text-color);
}
/* Node hover effects */
.workflow-node:hover .node-rect {
  stroke: var(--workflow-node-hover-stroke-color);
  stroke-width: 3;
}
.dark .workflow-node:hover .node-rect {
  stroke: var(--workflow-node-hover-stroke-color);
}
/* Node selection styles */
.node.selected .node-rect {
  stroke: #3b82f6;
  stroke-width: 3;
}
/* Selection rectangle styles */
.selection-rect {
  pointer-events: none;
}
/* Selection preview styles */
.node.selection-preview .node-rect {
  stroke: #60a5fa;
  stroke-width: 2;
  stroke-dasharray: 5,5;
}
/* Inspector panel styles */
.workflow-inspector {
  position: fixed;
  top: 100px;
  right: 20px;
  width: 300px;
  min-width: 250px;
  height: 300px;
  max-height: calc(100vh - 40px); /* keep panel inside viewport */
  min-height: 320px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  font-family: Arial, sans-serif;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  box-sizing: border-box;
  overflow: hidden; /* internal scrolling managed by .inspector-content */
}
.dark .workflow-inspector {
  background: #374151;
  border-color: #555;
  color: #e5e7eb;
}
.workflow-inspector .inspector-header {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  flex-shrink: 0;
}
.dark .workflow-inspector .inspector-header {
  border-bottom-color: #555;
}
.workflow-inspector .inspector-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.workflow-inspector .inspector-pin,
.workflow-inspector .inspector-dock,
.workflow-inspector .inspector-popout,
.workflow-inspector .inspector-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.workflow-inspector .inspector-pin:hover,
.workflow-inspector .inspector-dock:hover,
.workflow-inspector .inspector-popout:hover,
.workflow-inspector .inspector-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.dark .workflow-inspector .inspector-pin:hover,
.dark .workflow-inspector .inspector-dock:hover,
.dark .workflow-inspector .inspector-popout:hover,
.dark .workflow-inspector .inspector-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.workflow-inspector .inspector-pin.active {
  background-color: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}
.workflow-inspector .inspector-popout.active {
  background-color: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}
.workflow-inspector .inspector-pin svg,
.workflow-inspector .inspector-dock svg,
.workflow-inspector .inspector-popout svg {
  width: 16px;
  height: 16px;
}
/* Select option representing a stale/unavailable value */
.workflow-inspector select option.stale {
  color: #9ca3af; /* gray-400 */
}
/* Docked state */
.workflow-inspector.docked {
  left: 0;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  width: 350px;
  border-radius: 0;
  overflow: hidden; /* keep content scrolling internal to .inspector-content */
}
.workflow-inspector.docked .resize-handle.top,
.workflow-inspector.docked .resize-handle.bottom,
.workflow-inspector.docked .resize-handle.left {
  display: none !important;
}
.workflow-inspector.docked .resize-handle.top:hover,
.workflow-inspector.docked .resize-handle.bottom:hover,
.workflow-inspector.docked .resize-handle.left:hover {
  display: none !important;
}
.workflow-inspector .inspector-content {
  padding: 16px;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.workflow-inspector .inspector-content ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}
/* WebKit scrollbar styling for inspector content */
.workflow-inspector .inspector-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.workflow-inspector .inspector-content::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
}
.workflow-inspector .inspector-content::-webkit-scrollbar-thumb {
  background-color: rgba(75,85,99,0.4);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.workflow-inspector .inspector-content:hover::-webkit-scrollbar-thumb {
  background-color: rgba(75,85,99,0.6);
}
.dark .workflow-inspector .inspector-content::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.02);
}
.dark .workflow-inspector .inspector-content::-webkit-scrollbar-thumb {
  background-color: rgba(229,231,235,0.25);
}
.dark .workflow-inspector .inspector-content:hover::-webkit-scrollbar-thumb {
  background-color: rgba(229,231,235,0.4);
}
.workflow-inspector .inspector-content li {
  margin: 4px 0;
}
/* Node properties styles */
.node-properties {
  font-size: 14px;
}
.node-properties h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.dark .node-properties h4 {
  color: #e5e7eb;
}
.property-group {
  margin-bottom: 12px;
  /* Match padding/margin of file-drop-available state for consistency */
  padding: 0.5rem;
  margin: -0.5rem;
}
.property-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: #555;
}
.dark .property-group label {
  color: #ccc;
}
.file-dropdown,
.type-dropdown {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  color: #333;
  font-size: 14px;
  transition: border-color 0.2s ease;
}
.dark .file-dropdown,
.dark .type-dropdown {
  background: #4b5563;
  border-color: #6b7280;
  color: #e5e7eb;
}
.file-dropdown:focus,
.type-dropdown:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.dark .file-dropdown:focus,
.dark .type-dropdown:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}
/* Resize handles */
.workflow-inspector .resize-handle {
  position: absolute;
  background: transparent;
  z-index: 1001;
}
.workflow-inspector .resize-handle.top {
  top: -2px;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
}
.workflow-inspector .resize-handle.bottom {
  bottom: -2px;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
}
.workflow-inspector .resize-handle.left {
  top: 0;
  bottom: 0;
  left: -2px;
  width: 6px;
  cursor: ew-resize;
}
.workflow-inspector .resize-handle.right {
  top: 0;
  bottom: 0;
  right: -2px;
  width: 6px;
  cursor: ew-resize;
}
/* Connector styles */
.workflow-connector-inlet {
  fill: var(--workflow-connector-inlet-color);
  transition: fill var(--transition-duration) ease, r 0.2s ease;
}
.workflow-connector-outlet {
  fill: var(--workflow-connector-outlet-color);
  transition: fill var(--transition-duration) ease, r 0.2s ease;
}
/* Connector hover effects */
.workflow-connector-inlet:hover,
.workflow-connector-outlet:hover {
  r: 7;
  fill: var(--workflow-connector-hover-color);
}
.dark .workflow-connector-inlet:hover,
.dark .workflow-connector-outlet:hover {
  fill: var(--workflow-connector-hover-color);
}
/* Connection styles */
.workflow-connection {
  stroke: var(--workflow-connection-color);
  stroke-width: 2;
  fill: none;
  cursor: pointer;
  transition: stroke var(--transition-duration) ease, stroke-width 0.2s ease;
}
.dark .workflow-connection {
  stroke: var(--workflow-connection-color);
}
/* Connection hover effects */
.workflow-connection:hover {
  stroke: var(--workflow-connection-hover-color);
  stroke-width: 4;
}
.dark .workflow-connection:hover {
  stroke: var(--workflow-connection-hover-color);
}
/* Temporary connection styles */
.temp-connection {
  stroke: var(--workflow-connection-color);
  stroke-width: 2;
  fill: none;
  transition: stroke var(--transition-duration) ease;
}
.dark .temp-connection {
  stroke: var(--workflow-connection-color);
}
/* Grid styles */
.workflow-grid {
  stroke: var(--workflow-grid-color);
  stroke-width: 1;
  transition: stroke var(--transition-duration) ease;
}
.dark .workflow-grid {
  stroke: var(--workflow-grid-color);
}
/* File Node File Label Styles */
.node-file-label {
  fill: #6b7280;
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: Arial;
  font-size: 10px;
  font-style: italic;
}
.dark .node-file-label {
  fill: #9ca3af;
}
/* Execution Order Badge Styles */
.node-execution-order-badge {
  pointer-events: none;
}
.node-execution-order-circle {
  fill: #3b82f6;
  stroke: #1e40af;
  stroke-width: 1.5;
  transition: fill 0.2s ease;
}
.dark .node-execution-order-circle {
  fill: #60a5fa;
  stroke: #3b82f6;
}
.node-execution-order {
  fill: white;
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  pointer-events: none;
}
.dark .node-execution-order {
  fill: #1e293b;
}
/* File Node Drop Target Highlighting */
.workflow-node.file-drop-available .node-rect {
  stroke: #86efac;
  stroke-width: 2;
  stroke-dasharray: 4 2;
}
.dark .workflow-node.file-drop-available .node-rect {
  stroke: #4ade80;
}
.workflow-node.drag-over .node-rect {
  stroke: #22c55e;
  stroke-width: 3;
  stroke-dasharray: 4 2;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.5));
}
.dark .workflow-node.drag-over .node-rect {
  stroke: #4ade80;
  filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.5));
}
/* ==================== Execution State Styles ==================== */
/* Toolbar Execute Button Styles */
.toolbar-btn-primary {
  background-color: #3b82f6;
  color: white;
  border-radius: 4px;
}
.toolbar-btn-primary:hover {
  background-color: #2563eb;
}
.toolbar-btn-primary:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}
.toolbar-btn-primary.executing {
  background-color: #f59e0b;
  animation: pulse 1.5s ease-in-out infinite;
}
.toolbar-separator {
  width: 1px;
  height: 24px;
  background-color: #d1d5db;
  margin: 0 4px;
}
.dark .toolbar-separator {
  background-color: #4b5563;
}
/* Execute button glow effects */
.execute-success-glow {
  box-shadow: 0 0 12px 4px rgba(34, 197, 94, 0.6);
  transition: box-shadow 0.3s ease;
}
.execute-error-glow {
  box-shadow: 0 0 12px 4px rgba(239, 68, 68, 0.6);
  transition: box-shadow 0.3s ease;
}
/* Execution State Variables */
:root {
  --execution-pending-color: #9ca3af;
  --execution-running-color: #3b82f6;
  --execution-completed-color: #22c55e;
  --execution-error-color: #ef4444;
  --execution-warning-color: #f59e0b;
  --execution-skipped-color: #6b7280;
  --execution-waiting-for-input-color: #eab308; /* Yellow for user input needed */
}
/* Node Execution States */
.workflow-node.execution-pending .node-rect {
  stroke: var(--execution-pending-color);
  stroke-width: 2;
}
.workflow-node.execution-running .node-rect {
  stroke: var(--execution-running-color);
  stroke-width: 3;
  animation: execution-pulse 1s ease-in-out infinite;
}
.workflow-node.execution-completed .node-rect {
  stroke: var(--execution-completed-color);
  stroke-width: 3;
}
.workflow-node.execution-error .node-rect {
  stroke: var(--execution-error-color);
  stroke-width: 3;
}
.workflow-node.execution-warning .node-rect {
  stroke: var(--execution-warning-color);
  stroke-width: 3;
}
.workflow-node.execution-skipped .node-rect {
  stroke: var(--execution-skipped-color);
  stroke-width: 2;
  opacity: 0.6;
}
.workflow-node.execution-waiting_for_input .node-rect {
  stroke: var(--execution-waiting-for-input-color);
  stroke-width: 3;
  animation: execution-pulse 1.5s ease-in-out infinite;
}
/* Node Progress Bar */
.node-progress-bar {
  fill: #e5e7eb;
  opacity: 0.8;
}
.dark .node-progress-bar {
  fill: #4b5563;
}
.node-progress-fill {
  fill: var(--execution-running-color);
  transition: width 0.2s ease-out;
}
.workflow-node.execution-completed .node-progress-fill {
  fill: var(--execution-completed-color);
}
.workflow-node.execution-error .node-progress-fill {
  fill: var(--execution-error-color);
}
.workflow-node.execution-warning .node-progress-fill {
  fill: var(--execution-warning-color);
}
.workflow-node.execution-waiting_for_input .node-progress-fill {
  fill: var(--execution-waiting-for-input-color);
}
/* Warning Indicator */
.node-warning-indicator {
  fill: var(--execution-warning-color);
  stroke: white;
  stroke-width: 1;
}
.node-warning-count {
  fill: white;
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: Arial;
  font-size: 9px;
  font-weight: bold;
}
/* Error Indicator */
.node-error-indicator {
  fill: var(--execution-error-color);
  stroke: white;
  stroke-width: 1;
}
.node-error-icon {
  fill: white;
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
}
/* Execution Pulse Animation */
@keyframes execution-pulse {
  0%, 100% {
    stroke-opacity: 1;
    filter: none;
  }
  50% {
    stroke-opacity: 0.7;
    filter: drop-shadow(0 0 4px var(--execution-running-color));
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
/* Settings Modal Styles */
#workflow-settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#workflow-settings-modal.hidden {
  display: none;
}
#workflow-settings-modal .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
#workflow-settings-modal .modal-content {
  position: relative;
  background: white;
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1;
}
.dark #workflow-settings-modal .modal-content {
  background: #374151;
  border: 1px solid #4b5563;
}
#workflow-settings-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}
.dark #workflow-settings-modal .modal-header {
  border-bottom-color: #555;
}
#workflow-settings-modal .modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: #1f2937;
}
.dark #workflow-settings-modal .modal-title {
  color: #f3f4f6;
}
#workflow-settings-modal .modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#workflow-settings-modal .modal-close:hover {
  color: #1f2937;
}
.dark #workflow-settings-modal .modal-close {
  color: #d1d5db;
}
.dark #workflow-settings-modal .modal-close:hover {
  color: #f3f4f6;
}
/* Settings Content */
.settings-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.settings-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.settings-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}
.dark .settings-label {
  color: #e5e7eb;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}
.settings-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #3b82f6;
}
.settings-input-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.settings-slider {
  flex: 1;
  height: 0.5rem;
  cursor: pointer;
  appearance: none;
  background: #e5e7eb;
  border-radius: 0.25rem;
  outline: none;
}
.dark .settings-slider {
  background: #4b5563;
}
.settings-slider::-webkit-slider-thumb {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.settings-slider::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.settings-number-input {
  width: 60px;
  padding: 0.375rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  text-align: center;
  background: white;
  color: #1f2937;
}
.dark .settings-number-input {
  background: #4b5563;
  border-color: #555;
  color: #f3f4f6;
}
.settings-unit {
  font-size: 0.875rem;
  color: #6b7280;
  min-width: 30px;
  text-align: right;
}
.dark .settings-unit {
  color: #d1d5db;
}
.settings-help-text {
  font-size: 0.8125rem;
  color: #6b7280;
  margin: 0;
}
.dark .settings-help-text {
  color: #d1d5db;
}
/* Settings Footer */
.settings-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}
.dark .settings-footer {
  background: #2d3748;
  border-top-color: #555;
}
#workflow-settings-modal .btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
#workflow-settings-modal .btn-primary {
  background: #3b82f6;
  color: white;
}
#workflow-settings-modal .btn-primary:hover {
  background: #2563eb;
}
#workflow-settings-modal .btn-secondary {
  background: #e5e7eb;
  color: #374151;
}
#workflow-settings-modal .btn-secondary:hover {
  background: #d1d5db;
}
.dark #workflow-settings-modal .btn-secondary {
  background: #4b5563;
  color: #e5e7eb;
}
.dark #workflow-settings-modal .btn-secondary:hover {
  background: #555;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Inspector Section Styles (collapsible <details>) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.inspector-section {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
  background: white;
}
.dark .inspector-section {
  border-color: #4b5563;
  background: #1f2937;
}
.inspector-section-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  user-select: none;
  background: #f9fafb;
  transition: background 0.15s;
  list-style: none; /* remove default marker */
}
.inspector-section-header::-webkit-details-marker { display: none; }
.inspector-section-header:hover {
  background: #f3f4f6;
}
.dark .inspector-section-header {
  background: #111827;
  color: #e5e7eb;
}
.dark .inspector-section-header:hover {
  background: #1e293b;
}
.inspector-section-chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
.inspector-section[open] > .inspector-section-header .inspector-section-chevron {
  transform: rotate(0deg);
}
.inspector-section-body {
  padding: 0.5rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
/* ── Field label ───────────────────────────────────────────────────────── */
.inspector-field-label {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dark .inspector-field-label {
  color: #9ca3af;
}
/* ── Common controls ───────────────────────────────────────────────────── */
.inspector-input,
.inspector-select {
  width: 100%;
  padding: 0.3rem 0.5rem;
  font-size: 0.8125rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background: white;
  color: #1f2937;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.inspector-input:focus,
.inspector-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.dark .inspector-input,
.dark .inspector-select {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}
.dark .inspector-input:focus,
.dark .inspector-select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}
/* ── Checkbox ─────────────────────────────────────────────────────────── */
.inspector-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  cursor: pointer;
  user-select: none;
  color: #374151;
}
.dark .inspector-checkbox-label {
  color: #e5e7eb;
}
.inspector-checkbox-label input[type="checkbox"] {
  width: 0.875rem;
  height: 0.875rem;
  accent-color: #3b82f6;
  cursor: pointer;
}
/* ── Color row ────────────────────────────────────────────────────────── */
.inspector-color-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.inspector-color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}
.inspector-color-swatch input[type="color"] {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  cursor: pointer;
  background: none;
}
.dark .inspector-color-swatch input[type="color"] {
  border-color: #4b5563;
}
.inspector-color-label {
  font-size: 0.625rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* ── Row pair (two columns) ───────────────────────────────────────────── */
.inspector-row-pair {
  display: flex;
  gap: 0.5rem;
}
/* ── Range slider ─────────────────────────────────────────────────────── */
.inspector-range {
  -webkit-appearance: none;
  appearance: none;
  height: 0.375rem;
  background: #e5e7eb;
  border-radius: 0.25rem;
  cursor: pointer;
  outline: none;
}
.dark .inspector-range {
  background: #4b5563;
}
.inspector-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.inspector-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* ── Small buttons ────────────────────────────────────────────────────── */
.inspector-btn-sm {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background: white;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.inspector-btn-sm:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
.dark .inspector-btn-sm {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}
.dark .inspector-btn-sm:hover {
  background: #4b5563;
}
.inspector-btn-primary {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}
.inspector-btn-primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}
.dark .inspector-btn-primary {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}
.dark .inspector-btn-primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}
.inspector-btn-danger {
  color: #ef4444;
  border-color: #fca5a5;
}
.inspector-btn-danger:hover {
  background: #fef2f2;
  border-color: #ef4444;
}
.dark .inspector-btn-danger {
  color: #f87171;
  border-color: #7f1d1d;
}
.dark .inspector-btn-danger:hover {
  background: #450a0a;
  border-color: #f87171;
}
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
/* Default to light mode */
html {
        color-scheme: light;
    }
html.dark {
        color-scheme: dark;
    }
body {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
body:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
footer {
        margin-top: auto;
    }
/* Dark mode base styles */
.dark body {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
/* Smooth transitions for theme changes */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.\!container {
    width: 100% !important;
}
.container {
    width: 100%;
}
@media (min-width: 640px) {
    .\!container {
        max-width: 640px !important;
    }
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .\!container {
        max-width: 768px !important;
    }
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .\!container {
        max-width: 1024px !important;
    }
    .container {
        max-width: 1024px;
    }
}
@media (min-width: 1280px) {
    .\!container {
        max-width: 1280px !important;
    }
    .container {
        max-width: 1280px;
    }
}
@media (min-width: 1536px) {
    .\!container {
        max-width: 1536px !important;
    }
    .container {
        max-width: 1536px;
    }
}
/* Navigation Components */
.nav-btn {
    border-radius: 0.25rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.nav-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.nav-btn:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
/* Layout Components */
.page-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 72rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.page-container-narrow {
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.hero-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
/* Dark mode gradient variations */
.dark .hero-gradient {
        background: linear-gradient(135deg, #4c63d2 0%, #5b3d83 100%);
    }
/* Card Components */
.card {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.card-lg {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.card-lg:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.card-header {
    padding: 1.5rem;
}
.card-content {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-bottom: 1.5rem;
}
.card-footer {
    padding: 1.5rem;
    padding-top: 0px;
}
/* Card Header Actions */
.card-header-actions {
    display: flex;
    align-items: center;
}
.card-header-actions > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
/* Legacy Components - keeping for backward compatibility */
.content-card {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.content-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.content-card {
    padding: 2rem;
}
.feature-card {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.feature-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.feature-card {
    padding: 2rem;
    text-align: center;
}
.feature-card div {
    margin-bottom: 1rem;
    font-size: 3rem;
    line-height: 1;
}
.feature-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.feature-card h3:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.feature-card p {
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.feature-card p:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.pricing-card {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.pricing-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.pricing-card {
    position: relative;
    overflow: hidden;
}
.pricing-card.featured {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.pricing-card.featured:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.featured-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.featured-badge:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
/* Typography Components */
.page-header {
    margin-bottom: 2rem;
}
.page-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.page-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.page-subtitle {
    margin-top: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.page-subtitle:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.section-title {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.section-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.section-description {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.section-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.section-subtitle {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.section-subtitle:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.help-text {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.help-text:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* Form Components */
.form-group > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.form-field {
    margin-bottom: 1rem;
}
.form-label {
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.form-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.form-input {
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.form-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.form-input:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.form-textarea {
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.form-textarea:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.form-textarea:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.form-select {
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.form-select:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.form-select:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.form-select-compact {
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.form-select-compact:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.form-select-compact:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.form-radio {
    margin-top: 0.25rem;
    margin-right: 0.75rem;
    height: 1rem;
    width: 1rem;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.form-radio:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.form-radio:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.form-radio-group > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.form-radio-item {
    display: flex;
    align-items: flex-start;
}
.form-radio-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.form-radio-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.form-actions {
    display: flex;
    justify-content: space-between;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding-top: 1.5rem;
}
.form-actions:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
/* Form Controls */
.form-select {
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.form-select:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.form-select:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
    .form-select {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}
.form-input {
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.form-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.form-input:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
    .form-input {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}
/* Checkbox styling */
.form-checkbox {
    height: 1rem;
    width: 1rem;
    border-radius: 0.25rem;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.form-checkbox:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.form-checkbox:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
/* Form input color picker styling */
input[type="color"] {
    height: 2.5rem;
    width: 100%;
    cursor: pointer;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
input[type="color"]:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
input[type="color"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
        border: none;
        border-radius: 6px;
    }
input[type="color"]::-webkit-color-swatch {
        border: none;
        border-radius: 6px;
    }
input[type="color"]::-moz-color-swatch {
        border: none;
        border-radius: 6px;
    }
/* Password strength meter */
.pw-strength {
    margin-top: 0.5rem;
    display: flex;
    height: 1rem;
    align-items: center;
    gap: 0.5rem;
}
.pw-strength-bars {
    display: flex;
    flex: 1 1 0%;
    gap: 0.25rem;
}
.pw-strength-segment {
    height: 0.375rem;
    flex: 1 1 0%;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.pw-strength-segment:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.pw-strength-segment.filled.bad {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.pw-strength-segment.filled.bad:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.pw-strength-segment.filled.weak {
    --tw-bg-opacity: 1;
    background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.pw-strength-segment.filled.weak:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(253 186 116 / var(--tw-bg-opacity, 1));
}
.pw-strength-segment.filled.medium {
    --tw-bg-opacity: 1;
    background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.pw-strength-segment.filled.medium:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
}
.pw-strength-segment.filled.strong {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.pw-strength-segment.filled.strong:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.pw-strength-label {
    width: 3rem;
    text-align: right;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    line-height: 1;
}
.pw-strength-label.bad {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.pw-strength-label.bad:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.pw-strength-label.weak {
    --tw-text-opacity: 1;
    color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.pw-strength-label.weak:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.pw-strength-label.medium {
    --tw-text-opacity: 1;
    color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.pw-strength-label.medium:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.pw-strength-label.strong {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.pw-strength-label.strong:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
/* Button Components */
.btn {
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.btn-primary {
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-primary:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.btn-primary {
    border-width: 1px;
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
#workflow-settings-modal .btn-primary {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.btn-primary:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.btn-secondary {
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-secondary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-secondary:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.btn-secondary {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
#workflow-settings-modal .btn-secondary {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.btn-secondary:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.btn-secondary:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.btn-secondary:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.btn-action {
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-action:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-action:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.btn-action {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
#workflow-settings-modal .btn-action {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-action:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.btn-action-primary {
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-action-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-action-primary:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.btn-action-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
#workflow-settings-modal .btn-action-primary {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-action-primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.btn-action-secondary {
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-action-secondary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-action-secondary:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.btn-action-secondary {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
#workflow-settings-modal .btn-action-secondary {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-action-secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.btn-action-secondary:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.btn-action-secondary:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.btn-danger {
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-danger:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-danger:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.btn-danger {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
#workflow-settings-modal .btn-danger {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-danger:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.btn-danger:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.btn-remove {
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-remove:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.btn-remove:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.btn-remove {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
#workflow-settings-modal .btn-remove {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-remove:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.btn-icon {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    border-width: 1px;
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-icon:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.btn-small {
    display: inline-block;
    flex: 1 1 0%;
    cursor: pointer;
    border-radius: 0.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-view {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-view:hover {
    opacity: 0.9;
}
.btn-edit {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-edit:hover {
    opacity: 0.9;
}
.btn-delete {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-delete:hover {
    opacity: 0.9;
}
.btn-logout {
    margin-top: 1rem;
    cursor: pointer;
    border-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-logout:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.btn-icon-sm {
    border-radius: 0.375rem;
    padding: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-icon-sm:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.btn-icon-sm:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.btn-icon-sm:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.btn-icon-lg {
    border-radius: 0.375rem;
    padding: 0.75rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-icon-lg:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.btn-icon-lg:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.btn-icon-lg:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.add-dependent-btn,
    .remove-dependent-btn {
    border-radius: 0.375rem;
    padding: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.add-dependent-btn:hover,
    .remove-dependent-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.add-dependent-btn:is(.dark *),
    .remove-dependent-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.add-dependent-btn:hover:is(.dark *),
    .remove-dependent-btn:hover:is(.dark *) {
    background-color: rgb(30 58 138 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.remove-dependent-btn {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.remove-dependent-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.remove-dependent-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.remove-dependent-btn:hover:is(.dark *) {
    background-color: rgb(127 29 29 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
/* Status Badge Components */
.status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}
.status-badge-icon {
    margin-right: 0.375rem;
    height: 1rem;
    width: 1rem;
}
.status-active {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.status-active:is(.dark *) {
    background-color: rgb(20 83 45 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.status-archived {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.status-archived:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.status-completed {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.status-completed:is(.dark *) {
    background-color: rgb(30 58 138 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.status-paused {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-bg-opacity: 1;
    background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.status-paused:is(.dark *) {
    background-color: rgb(113 63 18 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.status-default {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-bg-opacity: 1;
    background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.status-default:is(.dark *) {
    background-color: rgb(113 63 18 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
/* Badge Components */
.admin-badge {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.admin-badge:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.user-badge {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.user-badge:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
/* Column Count Badge */
.column-count-badge {
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.column-count-badge:is(.dark *) {
    background-color: rgb(30 58 138 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
/* Tab Components */
.tab-nav {
    margin-bottom: -1px;
    display: flex;
}
.tab-nav > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.tab-nav {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.tab-active {
    white-space: nowrap;
    border-bottom-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.tab-active:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.tab-inactive {
    white-space: nowrap;
    border-bottom-width: 2px;
    border-color: transparent;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.tab-inactive:hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.tab-inactive:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.tab-inactive:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.tab-content {
    padding: 1.5rem;
}
/* Grid and Layout Components */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.stat-card {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding: 1rem;
}
.stat-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.stat-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.stat-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.stat-value {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.stat-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.metadata-grid {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.metadata-grid:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {
    .metadata-grid {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.metadata-item {
    display: flex;
}
.metadata-label {
    margin-right: 0.5rem;
    font-weight: 500;
}
/* Empty State Components */
.empty-state {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    text-align: center;
}
.empty-state-lg {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: center;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.empty-state-lg:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.empty-state-icon {
    margin-left: auto;
    margin-right: auto;
    height: 3rem;
    width: 3rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.empty-state-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.empty-state-title {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.empty-state-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.empty-state-description {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.empty-state-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.empty-state-action {
    margin-top: 1.5rem;
}
/* Empty State */
.projects-empty-state {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.projects-empty-state:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.projects-empty-state {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    text-align: center;
}
/* Template Card Components */
.template-card {
    cursor: pointer;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding: 1rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.template-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.template-card-header {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}
.template-card-icon {
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}
.template-card-title {
    margin-left: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.template-card-description {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
/* Icon Variants */
.icon-green {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.icon-blue {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.icon-purple {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.medium-icon {
    margin-left: auto;
    margin-right: auto;
    height: 3rem;
    width: 3rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.large-icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    height: 4rem;
    width: 4rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.file-icon {
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
}
.status-icon {
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
}
/* Project Components */
.project-card {
    overflow: hidden;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.project-card:hover {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.project-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.project-card {
    display: flex;
    height: 100%;
    flex-direction: column;
}
.project-dropdown {
    position: absolute;
    z-index: 50;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.project-dropdown:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.project-dropdown {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.project-dropdown:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.project-dropdown {
        top: 100%;
        left: 0;
        width: 400px;
        margin-top: 0.25rem;
        display: none;
    }
.project-select {
    position: relative;
}
.project-select .nav-btn {
        width: 400px;
        justify-content: space-between;
    }
/* Project Card Animations */
.project-card {
    transition-property: all;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.project-card:hover {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.project-card.filtered-out {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0.5;
}
#toggle-project-processing-location-btn.cloud {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
#toggle-project-processing-location-btn.cloud:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
#toggle-project-processing-location-btn.local {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
#toggle-project-processing-location-btn.local:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.view-toggle {
    border-radius: 0.25rem;
    padding: 0.375rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.view-toggle:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.view-toggle:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.view-toggle:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.view-toggle.active {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.view-toggle.active:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
/* Inline Editing Styles */
.inline-editable {
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-radius: 0.25rem;
    border-width: 2px;
    border-color: transparent;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.inline-editable:hover {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.inline-editable:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
    background-color: rgb(30 58 138 / 0.2);
}
.inline-editable.editing {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.inline-editable.editing:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.inline-editable.editing {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.inline-editable.editing:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.inline-editable[contenteditable="false"] {
    cursor: pointer;
}
.inline-editable[contenteditable="true"] {
    cursor: text;
}
/* Status Dropdown */
.status-dropdown {
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.status-dropdown:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.status-dropdown {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.status-dropdown:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.status-dropdown:focus {
    border-color: transparent;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.status-dropdown {
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.status-dropdown:hover {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.status-dropdown:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
/* Metadata Grid */
.metadata-item {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.metadata-item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.metadata-label {
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.metadata-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
/* Tag Styles */
.tag-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.tag-badge:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0.8;
}
.tag-badge .remove-btn {
    margin-left: 0.5rem;
    font-weight: 700;
    color: currentColor;
}
.tag-badge .remove-btn:hover {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
/* Collaborator List */
.collaborator-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.collaborator-item:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.collaborator-item {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.collaborator-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.collaborator-item:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.permission-badge {
    border-radius: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.permission-badge:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
/* File Validation Indicators */
.file-status-indicator {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.file-exists {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.file-exists:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.file-missing {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.file-missing:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.file-unknown {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.file-unknown:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
/* Owner Transfer Warning */
.transfer-warning {
    --tw-bg-opacity: 1;
    background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.transfer-warning:is(.dark *) {
    background-color: rgb(113 63 18 / 0.2);
}
.transfer-warning {
    border-left-width: 4px;
    --tw-border-opacity: 1;
    border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
    padding: 1rem;
}
/* Project Files Container */
#project-files-container .file-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
#project-files-container > div {
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
#project-files-container > div:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
#project-files-container > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
#project-files-container > div:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
#project-files-container > div:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
/* Tags Container */
#project-tags-container {
    min-height: 32px;
}
/* Modal Content Adjustments for Metadata */
#manage-tags-modal .modal-content,
    #add-collaborator-modal .modal-content,
    #transfer-owner-modal .modal-content {
    max-height: 90vh;
    overflow-y: auto;
}
/* Current Tags List in Modal */
#current-tags-list {
    display: flex;
    min-height: 60px;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border-width: 2px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding: 0.75rem;
}
#current-tags-list:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
#current-tags-list:empty::after {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
        content: "No tags assigned";
}
/* Available Tags List in Modal */
#available-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* Toggle Switch Styling */
#project-public-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
#project-public-toggle + div {
    position: relative;
    height: 1.5rem;
    width: 2.75rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.peer:focus ~ #project-public-toggle + div {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
}
#project-public-toggle + div:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.peer:focus ~ #project-public-toggle + div:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity, 1));
}
#project-public-toggle + div {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
#project-public-toggle:checked + div {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
#project-public-toggle + div::after {
    position: absolute;
    top: 2px;
    left: 2px;
    --tw-content: '';
    content: var(--tw-content);
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
#project-public-toggle:checked + div::after {
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
/* Dropdown Menu Components */
.dropdown-menu {
    position: absolute;
    right: 0px;
    z-index: 10;
    margin-top: 0.75rem;
    width: 10rem;
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.dropdown-menu:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dropdown-item {
    display: block;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.dropdown-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.dropdown-item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.dropdown-item:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
/* Search and Filter Enhancements */
.search-input-container {
    position: relative;
}
.search-loading .form-input {
    padding-right: 2.5rem;
}
.search-highlight {
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.search-highlight:is(.dark *) {
    background-color: rgb(133 77 14 / 0.5);
}
.filter-active {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.filter-active:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}
/* Search input styling */
#project-search-input::placeholder {
        color: rgb(147, 197, 253); /* blue-200 equivalent */
    }
.dark #project-search-input::placeholder {
        color: rgb(96, 165, 250); /* blue-400 equivalent for dark mode */
    }
/* Auth Components */
.auth-container {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.auth-container:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.auth-form {
    width: 100%;
    max-width: 28rem;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 2rem;
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.auth-form:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
/* Profile Components */
.profile-container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    max-width: 48rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.profile-header {
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 2rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.profile-header:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.profile-header h1,
    .profile-info h2 {
    margin-bottom: 0.5rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.profile-header h1:is(.dark *),
    .profile-info h2:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.profile-header > p {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.profile-header > p:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.profile-info {
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 2rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.profile-info:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
/* Message Components */
.text-error {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-error:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-success {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-success:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.message-toast {
    margin-bottom: 0.5rem;
}
.message-block {
    border-radius: 0.375rem;
    border-width: 1px;
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.message-block.success {
    --tw-border-opacity: 1;
    border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.message-block.success:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
    background-color: rgb(22 101 52 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}
.message-block.error {
    --tw-border-opacity: 1;
    border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.message-block.error:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
    background-color: rgb(153 27 27 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.message-block.hint {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.message-block.hint:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    background-color: rgb(31 41 55 / 0.5);
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* Message toast color variants */
.message-toast.success,
    .notification-toast.success {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.message-toast.success:is(.dark *),
    .notification-toast.success:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.message-toast.error,
    .notification-toast.error {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.message-toast.error:is(.dark *),
    .notification-toast.error:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.message-toast.warning,
    .notification-toast.warning {
    --tw-bg-opacity: 1;
    background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.message-toast.warning:is(.dark *),
    .notification-toast.warning:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.message-toast.info,
    .notification-toast.info {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.message-toast.info:is(.dark *),
    .notification-toast.info:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.status-message {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.status-message:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.status-details {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.status-details:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* Tooltip Components */
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip-text {
    visibility: hidden;
    position: absolute;
    z-index: 10;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    opacity: 0;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.tooltip-text:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.tooltip-text {
    bottom: 100%;
    left: 50%;
    margin-bottom: 0.5rem;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    white-space: nowrap;
}
.tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        --tw-translate-x: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        border: 4px solid transparent;
        border-top-color: #374151; /* gray-900 */
    }
.dark .tooltip-text::after {
        border-top-color: #374151; /* gray-700 in dark mode */
    }
/* Tooltip positioned below (for top navigation) */
.tooltip-bottom .tooltip-text {
    top: 100%;
    bottom: auto;
    margin-top: 0.5rem;
    margin-bottom: 0px;
}
.tooltip-bottom .tooltip-text::after {
    bottom: 100%;
    top: auto;
        border-top-color: transparent;
        border-bottom-color: #374151; /* gray-900 */
}
.dark .tooltip-bottom .tooltip-text::after {
        border-bottom-color: #374151; /* gray-700 in dark mode */
    }
.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
/* File Selector */
.file-selector-container {
    position: relative;
    display: flex;
    align-items: center;
}
.file-info-btn {
    margin-right: 0.5rem;
    flex-shrink: 0;
    border-radius: 0.375rem;
    padding: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.file-info-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.file-info-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.file-info-btn:hover:is(.dark *) {
    background-color: rgb(30 58 138 / 0.2);
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.file-info-btn {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.file-info-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.file-info-tooltip {
    visibility: hidden;
    position: absolute;
    z-index: 20;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    opacity: 0;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.file-info-tooltip:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.file-info-tooltip {
    top: 100%;
    left: 0px;
    margin-top: 0.5rem;
    width: 24rem;
    white-space: normal;
}
.file-info-tooltip::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 1rem;
        --tw-translate-x: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        border: 6px solid transparent;
        border-bottom-color: #F3F4F6; /* gray-100 */
    }
.dark .file-info-tooltip::after {
        border-bottom-color: #1F2937; /* gray-800 */
    }
.file-info-tooltip.show {
    visibility: visible;
    opacity: 1;
}
.file-info-card-header {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.file-info-card-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.file-info-card-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.file-info-card-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.file-info-card-content {
    padding: 1rem;
}
.file-info-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.file-info-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.file-selector-item {
    display: flex;
    align-items: center;
}
.file-selector-item > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.file-selector-item {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
}
.file-selector-item:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.file-selector-item:hover {
    cursor: pointer;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.file-selector-item:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.file-selector-text {
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.file-selector-text:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.file-selector-size {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.file-selector-size:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* Horizontal Scroll Components */
.horizontal-scroll-container {
    position: relative;
}
.horizontal-scroll-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.horizontal-scroll-arrow:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.horizontal-scroll-arrow:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.horizontal-scroll-arrow:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.horizontal-scroll-arrow:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.horizontal-scroll-arrow {
        transform: translateY(-50%);
    }
.horizontal-scroll-arrow-left {
    position: absolute;
    top: 50%;
    left: -3rem;
    z-index: 10;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.horizontal-scroll-arrow-left:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.horizontal-scroll-arrow-left:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.horizontal-scroll-arrow-left:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.horizontal-scroll-arrow-left:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.horizontal-scroll-arrow-left {
        transform: translateY(-50%);
    }
.horizontal-scroll-arrow-right {
    position: absolute;
    top: 50%;
    right: -3rem;
    z-index: 10;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.horizontal-scroll-arrow-right:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.horizontal-scroll-arrow-right:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.horizontal-scroll-arrow-right:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.horizontal-scroll-arrow-right:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.horizontal-scroll-arrow-right {
        transform: translateY(-50%);
    }
.horizontal-scroll-viewport {
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 1rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
}
.horizontal-scroll-viewport::-webkit-scrollbar {
        display: none;
    }
.horizontal-scroll-content {
    display: flex;
    min-width: max-content;
    gap: 1.5rem;
}
.horizontal-scroll-card {
    min-width: 24rem;
    flex: none;
        width: 60vw;
}
/* Settings Components */
.settings-section {
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.settings-section:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.settings-header {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.settings-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.settings-content {
    padding: 1.5rem;
}
.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.settings-item:last-child {
    border-bottom-width: 0px;
}
.settings-item:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.settings-label-group {
    display: flex;
    flex-direction: column;
}
.settings-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.settings-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.settings-description {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.settings-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* Notification Type Filtering */
.notification-types-grid {
    display: grid;
    min-width: 0px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.notification-type-item {
    display: flex;
    align-items: center;
}
.notification-type-checkbox {
    display: flex;
    cursor: pointer;
    align-items: center;
}
.notification-type-checkbox > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.checkbox-custom {
    position: relative;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    border-radius: 0.25rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.checkbox-custom:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.checkbox-custom {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.drop-overlay.notification-type-checkbox input[type="checkbox"] {
        display: none;
    }
.modal-backdrop.notification-type-checkbox input[type="checkbox"] {
        display: none;
    }
.notification-type-checkbox input[type="checkbox"] {
    display: none;
}
#workflow-settings-modal.notification-type-checkbox input[type="checkbox"] {
  display: none;
}
.notification-type-checkbox input[type="checkbox"]:checked + .checkbox-custom {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.notification-type-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
        content: '✓';
        position: absolute;
        inset: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 700;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    }
.notification-type-checkbox:hover .checkbox-custom {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.notification-type-checkbox:hover .checkbox-custom:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-flex;
    height: 1.5rem;
    width: 2.75rem;
    align-items: center;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.toggle-switch:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}
.toggle-switch:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.toggle-switch.enabled {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.toggle-switch.enabled:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.toggle-switch.disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.toggle-switch.disabled:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.toggle-slider {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.toggle-slider.enabled {
    --tw-translate-x: 1.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.toggle-slider.disabled {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* Global Settings Styles */
.setting-group > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.setting-label {
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.setting-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
/* Profile field styles for settings page */
.profile-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.profile-field:last-child {
    border-bottom-width: 0px;
}
.profile-field:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.field-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.field-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.field-value {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.field-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
/* File Upload Components */
.file-upload-area {
    margin-bottom: 1.5rem;
}
.drop-zone {
    border-radius: 0.5rem;
    border-width: 2px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding: 2rem;
    text-align: center;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.drop-zone:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.drop-zone-active:hover,
    .file-upload-area:hover .drop-zone {
    cursor: pointer;
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.drop-zone-active:hover:is(.dark *),
    .file-upload-area:hover .drop-zone:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
    background-color: rgb(30 58 138 / 0.2);
}
.drop-zone.drag-active {
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.drop-zone.drag-active:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
    background-color: rgb(20 83 45 / 0.2);
}
.drop-zone.drag-active.drag-over {
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.drop-zone.drag-active.drag-over:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
    background-color: rgb(20 83 45 / 0.2);
}
.dragging.drag-source {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
    --tw-ring-opacity: 0.75;
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.drop-zone.uploading {
    pointer-events: none;
    --tw-border-opacity: 1;
    border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
    opacity: 0.6;
}
.drop-zone-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.drop-zone-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.drop-zone-description {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.drop-zone-formats {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.drop-zone-formats:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.drop-zone-content {
    text-align: center;
}
.upload-progress {
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
}
.upload-alt-icon {
    margin-left: -0.25rem;
    margin-right: 0.5rem;
    height: 1.25rem;
    width: 1.25rem;
}
.progress-bar {
    margin-bottom: 0.5rem;
    height: 0.5rem;
    width: 100%;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.progress-fill {
    height: 0.5rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.progress-text {
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.file-list-container {
    margin-bottom: 1.5rem;
}
.file-list-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.file-list-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.file-list-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.file-count {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.file-count:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.file-list > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.file-item.dragging {
    opacity: 0.5;
}
.file-item-content {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: center;
}
.file-item-icon {
    margin-right: 0.75rem;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.file-item-details {
    min-width: 0px;
    flex: 1 1 0%;
}
.file-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.file-item-meta {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.file-item-actions {
    display: flex;
    align-items: center;
}
.file-item-actions > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.file-drag-handle {
    margin-right: 0.5rem;
    cursor: move;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.file-drag-handle:hover {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.file-remove-btn {
    padding: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.file-remove-btn:hover {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.file-list-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
}
.uploaded-files-list > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.uploaded-files-list {
    padding-bottom: 1rem;
}
.uploaded-files {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}
.uploaded-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uploaded-file-item:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.uploaded-file-content {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: center;
}
.uploaded-file-icon {
    margin-right: 0.75rem;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.uploaded-file-details {
    min-width: 0px;
    flex: 1 1 0%;
}
.uploaded-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.uploaded-file-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.uploaded-file-meta {
    display: flex;
    align-items: center;
}
.uploaded-file-meta > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.uploaded-file-meta {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.uploaded-file-actions {
    display: flex;
    align-items: center;
}
.uploaded-file-actions > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.save-btn {
    margin-left: -0.25rem;
    margin-right: 0.5rem;
    height: 1.25rem;
    width: 1.25rem;
}
.upload-btn {
    margin-left: -0.25rem;
    margin-right: 0.5rem;
    height: 1.25rem;
    width: 1.25rem;
}
.file-action-btn {
    padding: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.file-action-btn:hover {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.step-header {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding-bottom: 1.5rem;
    text-align: center;
}
.step-title {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.step-description {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding-top: 1.5rem;
}
/* File Selection Styles */
.selected-files-list {
    min-height: 200px;
}
.selected-files-grid {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 768px) {
    .selected-files-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .selected-files-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.selected-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.selected-file-item:hover {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.selected-file-content {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: center;
}
.selected-file-icon {
    margin-right: 0.75rem;
    flex-shrink: 0;
}
.selected-file-details {
    min-width: 0px;
    flex: 1 1 0%;
}
.selected-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.selected-file-meta {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.selected-file-remove {
    margin-left: 0.5rem;
    padding: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.selected-file-remove:hover {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.selected-files-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
    padding-top: 1rem;
}
/* File Management Components */
.selected-files-container {
    margin-bottom: 1.5rem;
}
.file-actions-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.file-copy-progress {
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
}
.file-copy-progress:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}
.file-upload-progress {
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
}
.file-upload-progress:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
    background-color: rgb(30 58 138 / 0.2);
}
.file-progress-header {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.file-progress-name {
    margin-right: 1rem;
    flex: 1 1 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.file-progress-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.file-progress-percent {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.file-progress-percent:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
/* OPFS File Item Enhancements */
.uploaded-file-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uploaded-file-item:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.file-download-btn:hover,
    .file-sync-btn:hover,
    .file-remove-btn:hover {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.file-download-btn:hover:is(.dark *),
    .file-sync-btn:hover:is(.dark *),
    .file-remove-btn:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.file-remove-btn:hover {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.file-remove-btn:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
/* Progress bar color variants */
.progress-fill-green {
        background-color: rgb(34 197 94);
    }
.progress-fill-red {
        background-color: rgb(239 68 68);
    }
.progress-fill-blue {
        background-color: rgb(59 130 246);
    }
/* Drag and Drop States */
.uploaded-file-item.dragging {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0.5;
}
.uploaded-file-item[draggable="true"] {
    cursor: move;
}
.uploaded-file-item[draggable="true"]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.uploaded-file-item[draggable="true"]:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.drop-overlay {
    position: fixed;
    inset: 0px;
    z-index: 50;
    align-items: center;
    justify-content: center;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.5;
        display: flex;
}
.drop-overlay.hidden {
        display: none !important;
    }
.drop-overlay .drop-zone-content {
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.drop-overlay .drop-zone-content:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
/* Workflow File Drop Target Styles */
.file-drop-target {
    border-radius: 0.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
        /* Ensure consistent border width to prevent layout shifts */
        border-width: 2px;
}
/* "Available" state - shown on ALL valid drop targets when dragging files */
.file-drop-available {
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}
.file-drop-available:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
/* "Drag over" state - shown on the specific target being hovered */
.file-drop-target.drag-over,
    .file-drop-available.drag-over {
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.file-drop-target.drag-over:is(.dark *),
    .file-drop-available.drag-over:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
    background-color: rgb(20 83 45 / 0.3);
}
.file-drop-target.drag-over,
    .file-drop-available.drag-over {
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
    }
/* Input Parameter Row Styles */
.input-param-row {
    border-radius: 0.5rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
}
.input-param-row:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.input-param-row.file-drop-available {
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}
.input-param-row.file-drop-available:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.input-param-row.drag-over {
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.input-param-row.drag-over:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
    background-color: rgb(20 83 45 / 0.2);
}
.input-param-row.drag-over {
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
    }
.input-param-header {
    margin-bottom: 0.5rem;
}
.input-param-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.input-param-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.input-param-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.input-param-file-select {
    flex: 1 1 0%;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.input-param-file-select:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.input-param-browse-btn {
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.input-param-browse-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.input-param-browse-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.input-param-browse-btn:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
/* Inspector File Drop Zone Styles */
#inspector-file-drop-zone {
    position: relative;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
        /* Ensure consistent border width to prevent layout shifts */
        border-width: 2px;
        /* Match visual parameters of drop-available state but with transparent border */
        margin: -0.5rem;
        border-radius: 0.5rem;
        border-style: dashed;
        border-color: transparent;
        padding: 0.5rem;
}
#inspector-file-drop-zone.file-drop-available {
    margin: -0.5rem;
    border-radius: 0.5rem;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
    padding: 0.5rem;
}
#inspector-file-drop-zone.file-drop-available:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}
#inspector-file-drop-zone.drag-over {
    margin: -0.5rem;
    border-radius: 0.5rem;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
    padding: 0.5rem;
}
#inspector-file-drop-zone.drag-over:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
    background-color: rgb(20 83 45 / 0.2);
}
#inspector-file-drop-zone.drag-over {
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
    }
.file-select-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.inspector-browse-btn {
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding: 0.375rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.inspector-browse-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.inspector-browse-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.inspector-browse-btn:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.inspector-drop-hint {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.inspector-drop-hint:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
/* Node Name Input Styles */
.node-name-input {
    width: 100%;
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.node-name-input:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.node-name-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}
/* Modal Styles */
.modal {
    position: fixed;
    inset: 0px;
    z-index: 50;
    overflow-y: auto;
}
.modal-overlay {
    position: fixed;
    inset: 0px;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.5;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.modal-content {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 56rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.modal-content:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.modal-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.modal-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.modal-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.modal-close {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.modal-close:hover {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.modal-close:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.modal-close:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.modal-body {
    max-height: 24rem;
    overflow-y: auto;
    padding: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
}
.modal-footer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.modal-footer {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding: 1.5rem;
}
.modal-footer:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.modal-icon {
    display: flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.modal-icon:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
}
.modal-query {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.modal-query:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.modal-description {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.modal-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.modal-detail {
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
}
.modal-detail:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.modal-file-name {
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.modal-file-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.modal-file-meta {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.modal-file-meta:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* File Browser Styles */
.file-browser-list > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.file-browser-item {
    overflow: hidden;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.file-browser-item:hover {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.file-browser-item:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.file-browser-item:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.file-browser-item.selected {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.file-browser-item.selected:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
    background-color: rgb(30 58 138 / 0.2);
}
.file-browser-label {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    padding: 1rem;
}
.file-browser-checkbox {
    margin-right: 1rem;
    height: 1rem;
    width: 1rem;
    border-radius: 0.25rem;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.file-browser-checkbox:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.file-browser-checkbox:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.file-browser-content {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: center;
}
.file-browser-icon {
    margin-right: 0.75rem;
    flex-shrink: 0;
}
.file-browser-details {
    min-width: 0px;
    flex: 1 1 0%;
}
.file-browser-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.file-browser-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.file-browser-meta {
    display: flex;
    align-items: center;
}
.file-browser-meta > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.file-browser-meta {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.file-browser-meta:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* Modal Components */
.modal-overlay {
    position: fixed;
    inset: 0px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.5;
}
.modal-content {
    margin-left: 1rem;
    margin-right: 1rem;
    width: 100%;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.modal-content:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding: 1.5rem;
}
.modal-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.modal-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.modal-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.modal-close {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.modal-close:hover {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.modal-close:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.modal-close:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding: 1.5rem;
}
.modal-footer:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
/* Fullscreen Modal Styles */
.fullscreen-modal {
    position: fixed;
    inset: 0px;
    z-index: 50;
    overflow: hidden;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.95;
}
.fullscreen-modal-content {
    display: flex;
    height: 100%;
    flex-direction: column;
}
.fullscreen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
}
.fullscreen-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.fullscreen-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.fullscreen-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.fullscreen-header-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.fullscreen-body {
    display: flex;
    flex: 1 1 0%;
    overflow: hidden;
}
.fullscreen-sidebar {
    width: 20rem;
}
.fullscreen-sidebar > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.fullscreen-sidebar {
    overflow-y: auto;
    border-right-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
}
.fullscreen-sidebar:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.sidebar-section > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.sidebar-section-title {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.sidebar-section-title:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.sidebar-form > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.sidebar-actions > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.sidebar-actions {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding-top: 1.5rem;
}
.sidebar-actions:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.fullscreen-plot-area {
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
}
.fullscreen-plot-area:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.fullscreen-plot-area {
        min-height: calc(100vh - 120px); /* Ensure minimum height accounting for header */
    }
.plot-canvas-container {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
        min-height: 600px; /* Minimum height for the canvas container */
}
.fullscreen-canvas {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.fullscreen-canvas:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.fullscreen-canvas {
        max-width: 100%;
        max-height: 100%;
        min-width: 800px;
        min-height: 600px;
    }
/* Generic Modal Backdrop and Container (for settings modals, etc) */
.modal-backdrop {
    position: fixed;
    inset: 0px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.5;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.modal-backdrop.hidden {
        display: none;
    }
.modal-container {
    margin-left: 1rem;
    margin-right: 1rem;
    width: 100%;
    max-width: 28rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.modal-container:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.modal-container .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding: 1.5rem;
}
.modal-container .modal-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.modal-container .modal-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.modal-container .modal-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.modal-container .modal-close {
    cursor: pointer;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.modal-container .modal-close:hover {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.modal-container .modal-close:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.modal-container .modal-close:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.modal-container .modal-body {
    max-height: 24rem;
    overflow-y: auto;
    padding: 1.5rem;
}
/* Use on a modal-body that should grow with its content instead of scrolling */
.modal-container .modal-body.auto-height {
        max-height: none;
        overflow: visible;
    }
.modal-container .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding: 1.5rem;
}
.modal-container .modal-footer:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
/* ───────────────────────────────────────────────────────────
       MS Explorer Modal — Full-screen MS data viewer
       ─────────────────────────────────────────────────────────── */
.ms-explorer-modal {
    position: fixed;
    inset: 0px;
    z-index: 50;
}
.ms-explorer-backdrop {
    position: absolute;
    inset: 0px;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.7;
}
.ms-explorer-container {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.ms-explorer-container:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
/* ─── Header & Toolbar ─── */
.ms-explorer-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.ms-explorer-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.ms-explorer-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ms-explorer-title {
    margin: 0px;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.ms-explorer-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.ms-explorer-subtitle {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.ms-explorer-subtitle:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.ms-explorer-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ms-explorer-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.ms-explorer-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.ms-explorer-btn:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.ms-explorer-btn:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
/* Ensure SVG icons inside toolbar buttons are uniformly sized */
.ms-explorer-btn svg,
    .ms-explorer-btn-icon svg {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
}
.ms-explorer-btn-active {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.ms-explorer-btn-active:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
    background-color: rgb(30 58 138 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.ms-explorer-btn-close {
    border-style: none;
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.ms-explorer-btn-close:hover {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.ms-explorer-btn-close:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.ms-explorer-btn-close:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.ms-explorer-btn-icon {
    cursor: pointer;
    border-radius: 0.25rem;
    border-style: none;
    background-color: transparent;
    padding: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.ms-explorer-btn-icon:hover {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.ms-explorer-btn-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.ms-explorer-btn-icon:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
/* ─── Dropdown menu ─── */
.ms-explorer-dropdown {
    position: relative;
}
.ms-explorer-dropdown-menu {
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: 10;
    margin-top: 0.25rem;
    width: 14rem;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ms-explorer-dropdown-menu:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.ms-explorer-dropdown-item {
    display: block;
    width: 100%;
    cursor: pointer;
    border-style: none;
    background-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.ms-explorer-dropdown-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.ms-explorer-dropdown-item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.ms-explorer-dropdown-item:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
/* ─── Body / Split panels ─── */
.ms-explorer-body {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    overflow: hidden;
}
/* Container that holds annotation panel alongside the body */
.ms-explorer-container.annotation-open .ms-explorer-body {
    margin-right: 20rem;
}
.ms-explorer-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ms-explorer-tic-panel {
        flex: 0 0 35%;
        border-bottom-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    }
.ms-explorer-tic-panel:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.ms-explorer-spectrum-panel {
        flex: 1 1 65%;
    }
.ms-explorer-panel-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.ms-explorer-panel-header:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.ms-explorer-panel-title {
    margin: 0px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.ms-explorer-panel-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.ms-explorer-panel-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ms-explorer-panel-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.ms-explorer-range-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.ms-explorer-range-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.ms-explorer-select {
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.ms-explorer-select:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.ms-explorer-input-sm {
    width: 3.5rem;
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.ms-explorer-input-sm:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
/* ─── Canvas area ─── */
.ms-explorer-canvas-wrapper {
    position: relative;
    flex: 1 1 0%;
    overflow: hidden;
}
.ms-explorer-canvas {
    display: block;
    height: 100%;
    width: 100%;
}
/* ─── Selection overlay (TIC) ─── */
.ms-explorer-selection-overlay {
    pointer-events: none;
    position: absolute;
    inset: 0px;
}
.ms-explorer-sel-highlight {
    position: absolute;
    top: 0px;
    bottom: 0px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-color: rgb(96 165 250 / 0.5);
    background-color: rgb(59 130 246 / 0.15);
}
.ms-explorer-sel-handle {
    pointer-events: auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 0.375rem;
    cursor: ew-resize;
}
.ms-explorer-sel-handle-left {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    background-color: rgb(59 130 246 / 0.6);
}
.ms-explorer-sel-handle-right {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    background-color: rgb(59 130 246 / 0.6);
}
.ms-explorer-sel-label {
    position: absolute;
    top: 0.25rem;
    left: 50%;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    white-space: nowrap;
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ms-explorer-cursor-line {
    pointer-events: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 1px;
    background-color: rgb(248 113 113 / 0.7);
}
/* ─── Peak labels overlay (spectrum) ─── */
.ms-explorer-peak-labels {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: hidden;
}
.ms-explorer-peak-label {
    position: absolute;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.ms-explorer-peak-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.ms-explorer-peak-label {
        transform: translate(-50%, -100%);
    }
.ms-explorer-peak-line {
    position: absolute;
    width: 1px;
    background-color: rgb(96 165 250 / 0.4);
}
/* ─── Annotation overlay (spectrum) ─── */
.ms-explorer-annotations {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: hidden;
}
.ms-explorer-annotation-marker {
    pointer-events: auto;
    position: absolute;
    height: 0.5rem;
    width: 0.5rem;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    cursor: pointer;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.ms-explorer-annotation-tooltip {
    position: absolute;
    z-index: 10;
    white-space: nowrap;
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(120 53 15 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ms-explorer-annotation-tooltip:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
    background-color: rgb(120 53 15 / 0.8);
    --tw-text-opacity: 1;
    color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.ms-explorer-annotation-tooltip {
        transform: translate(-50%, -100%);
        margin-top: -8px;
    }
/* ─── Spectrum info bar ─── */
.ms-explorer-spectrum-info {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.ms-explorer-spectrum-info:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.ms-explorer-info-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.ms-explorer-info-badge:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* Hide badges that have no content yet */
.ms-explorer-info-badge:empty {
        display: none;
    }
.ms-explorer-info-text {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.ms-explorer-info-text:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* ─── Annotation side panel ─── */
.ms-explorer-annotation-panel {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10;
    display: flex;
    width: 20rem;
    flex-direction: column;
    border-left-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ms-explorer-annotation-panel:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.ms-explorer-annotation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.ms-explorer-annotation-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.ms-explorer-annotation-header h3 {
    margin: 0px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.ms-explorer-annotation-header h3:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.ms-explorer-annotation-list {
    flex: 1 1 0%;
}
.ms-explorer-annotation-list > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.ms-explorer-annotation-list {
    overflow-y: auto;
    padding: 0.75rem;
}
.ms-explorer-annotation-item {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
}
.ms-explorer-annotation-item:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.ms-explorer-annotation-item-header {
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ms-explorer-annotation-mz {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.ms-explorer-annotation-mz:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.ms-explorer-annotation-delete {
    cursor: pointer;
    border-style: none;
    background-color: transparent;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.ms-explorer-annotation-delete:hover {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.ms-explorer-annotation-delete:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.ms-explorer-annotation-text {
    width: 100%;
    resize: none;
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.ms-explorer-annotation-text:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.ms-explorer-empty-text {
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.ms-explorer-empty-text:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
/* Notification system specific styles */
.notification-toast {
    min-width: 300px;
    max-width: 400px;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* Toast base styles with animation */
.notification-toast-base {
    pointer-events: auto;
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    opacity: 0;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
/* Toast visible state */
.notification-toast-visible {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1;
}
/* Toast hiding state */
.notification-toast-hiding {
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0;
}
.notification-close {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.notification-close:hover {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.notification-close:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.notification-close:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.notification-close:hover {
    opacity: 0.75;
}
/* Notification Log Icon */
.notification-log-icon {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.notification-log-icon:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* Notification Preview */
.notification-preview {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* Create a hover-friendly zone between icon and preview */
.notification-log-icon::after {
        content: '';
        pointer-events: none;
        position: absolute;
        top: 100%;
        right: 0px;
        z-index: 40;
        height: 0.5rem;
        width: 20rem;
    }
/* Arrow for preview tooltip */
.notification-preview::before {
        content: '';
        position: absolute;
        top: 0px;
        right: 1rem;
        height: 0px;
        width: 0px;
        --tw-translate-y: -100%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #fff;
    }
.dark .notification-preview::before {
        border-bottom-color: #1f2937;
    }
/* Notification Log Sidebar */
.notification-log-sidebar {
    transition-property: transform;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        max-height: 100vh;
        overflow-y: auto;
}
/* Notification Log Entry */
.notification-log-entry {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.notification-log-entry:hover {
    --tw-scale-x: 1.02;
    --tw-scale-y: 1.02;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* Enhanced hover effects for dark mode */
.notification-log-entry:hover {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark .notification-log-entry:hover {
    --tw-shadow-color: rgb(17 24 39 / 0.5);
    --tw-shadow: var(--tw-shadow-colored);
}
/* Type indicators */
.notification-type-indicator {
    flex-shrink: 0;
}
/* Scrollbar styling for webkit browsers */
.notification-preview-list::-webkit-scrollbar,
    .notification-log-list::-webkit-scrollbar {
    width: 0.5rem;
}
.notification-preview-list::-webkit-scrollbar-track,
    .notification-log-list::-webkit-scrollbar-track {
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.notification-preview-list:is(.dark *)::-webkit-scrollbar-track,
    .notification-log-list:is(.dark *)::-webkit-scrollbar-track {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.notification-preview-list::-webkit-scrollbar-thumb,
    .notification-log-list::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.notification-preview-list::-webkit-scrollbar-thumb:hover,
    .notification-log-list::-webkit-scrollbar-thumb:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.notification-preview-list:is(.dark *)::-webkit-scrollbar-thumb,
    .notification-log-list:is(.dark *)::-webkit-scrollbar-thumb {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.notification-preview-list:is(.dark *)::-webkit-scrollbar-thumb:hover,
    .notification-log-list:is(.dark *)::-webkit-scrollbar-thumb:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
/* Backdrop overlay for sidebar */
.notification-sidebar-backdrop {
    position: fixed;
    inset: 0px;
    z-index: 30;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.25;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.notification-sidebar-backdrop:is(.dark *) {
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.5;
}
/* Validation Error Styles */
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.validation-errors {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Toast type colors - improved for dark mode */
.notification-toast.success {
    --tw-border-opacity: 1;
    border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.notification-toast.error {
    --tw-border-opacity: 1;
    border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.notification-toast.warning {
    --tw-border-opacity: 1;
    border-color: rgb(202 138 4 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.notification-toast.info {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.notification-toast.navigation {
    --tw-border-opacity: 1;
    border-color: rgb(147 51 234 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Ensure proper text contrast in all modes */
.notification-toast .notification-close {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.notification-toast .notification-close:hover {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
/* Animation improvements */
.notification-log-sidebar {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark .notification-log-sidebar {
    --tw-shadow-color: rgb(0 0 0 / 0.5);
    --tw-shadow: var(--tw-shadow-colored);
}
/* Improved focus states for accessibility */
.notification-log-close:focus,
    .clear-log-btn:focus {
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: #3b82f6;
}
.notification-log-close:focus:is(.dark *),
    .clear-log-btn:focus:is(.dark *) {
    outline-color: #60a5fa;
}
/* Notification Badge Components - Enhanced for better dark mode visibility */
.notification-badge-success {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.notification-badge-success:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}
.notification-badge-error {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.notification-badge-error:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.notification-badge-warning {
    --tw-bg-opacity: 1;
    background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.notification-badge-warning:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(133 77 14 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}
.notification-badge-info {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.notification-badge-info:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.notification-badge-navigation {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.notification-badge-navigation:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(107 33 168 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}
/* Data Processing Components */
.data-dataset {
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-dataset:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
/* Draggable Handle */
.dataset-drag-handle {
    display: flex;
    cursor: grab;
    align-items: center;
}
.dataset-drag-handle > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.dataset-drag-handle {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.dataset-drag-handle:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
    background-color: rgb(30 58 138 / 0.3);
}
.dataset-drag-handle {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.dataset-drag-handle:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.dataset-drag-handle:hover:is(.dark *) {
    background-color: rgb(30 58 138 / 0.5);
}
.dataset-drag-handle {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem; /* Match the container's rounded corners */
}
.dataset-drag-handle:active {
    cursor: grabbing;
    --tw-bg-opacity: 1;
    background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.dataset-drag-handle:active:is(.dark *) {
    background-color: rgb(30 58 138 / 0.7);
}
.dataset-drag-handle.dragging {
    cursor: grabbing;
        /* Removed opacity change as it can interfere with drag operations */
}
.dataset-drag-handle[draggable="false"] {
    cursor: not-allowed;
}
.drag-handle-icon {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.drag-handle-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.drag-handle-text {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.drag-handle-text:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
/* Visual feedback during drag */
.data-dataset.drag-source {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
    --tw-ring-opacity: 0.75;
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.dataset-header {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding: 1rem;
}
.dataset-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dataset-icon {
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.dataset-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dataset-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dataset-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.dataset-name.editable-field {
    cursor: text;
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.dataset-name.editable-field:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dataset-name.editable-field:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.dataset-name.editable-field:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.dataset-name.editable-field:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.dataset-name.editable-field:focus:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dataset-name.editable-field {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
        min-width: 120px;
        display: inline-block;
}
.dataset-name.editable-field:empty::before {
        content: attr(data-placeholder);
        --tw-text-opacity: 1;
        color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    }
.dataset-name.editable-field:empty:is(.dark *)::before {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dataset-description {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.dataset-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dataset-parameters {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.dataset-parameters:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dataset-actions {
    display: flex;
    align-items: center;
}
.dataset-actions > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.dataset-content > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.dataset-content {
    padding: 1rem;
}
.remove-dataset {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.remove-dataset:hover {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.remove-dataset:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.remove-dataset:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
/* File Info */
.file-info {
    margin-top: 1rem;
}
.info-card {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.info-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.info-card-header {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.info-card-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.info-card-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.info-card-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.info-card-content {
    padding: 1rem;
}
.info-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.info-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.info-value {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.info-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
/* Column Selection */
.column-selection {
    height: 100%;
}
.columns-pane {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.columns-pane:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.columns-header {
    flex-shrink: 0;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.columns-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.columns-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.column-selection-controls {
    display: flex;
    align-items: center;
}
.column-selection-controls > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.btn-action-sm {
    border-radius: 0.25rem;
    border-width: 1px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.btn-action-sm:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.btn-action-sm:hover {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.btn-action-sm:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.btn-action-sm:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
    --tw-ring-opacity: 0.5;
}
.btn-action-sm {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
.columns-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.columns-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.columns-content {
    flex: 1 1 0%;
    overflow: hidden;
    padding: 0.75rem;
}
.columns-grid {
    height: 100%;
}
.columns-grid > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.columns-grid {
    overflow-y: auto;
}
.column-card {
    cursor: pointer;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding: 0.75rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.column-card:hover {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.column-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.column-card:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.column-card.selected {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.column-card.selected:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
    background-color: rgb(30 58 138 / 0.2);
}
.column-card-header {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.column-name {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.column-name:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.column-type {
    border-radius: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.column-type.string {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.column-type.integer {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.column-type.float {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.column-type.boolean {
    --tw-bg-opacity: 1;
    background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.column-type.date {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.column-stats {
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.column-stats:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.column-samples {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.column-samples:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* Data Preview */
.data-preview {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.preview-title {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.preview-table-container {
    overflow-x: auto;
}
.preview-table {
    min-width: 100%;
    font-size: 0.75rem;
    line-height: 1rem;
}
.preview-table th {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: left;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.preview-table td {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dependent-axes-container > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.dependent-axis-item {
    display: flex;
    align-items: center;
}
.dependent-axis-item > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.dependent-select {
    flex: 1 1 0%;
}
.info-card {
    display: flex;
    height: 100%;
    flex-direction: column;
}
.info-card-header {
    flex-shrink: 0;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.info-card-header:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.info-card-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.info-card-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.info-card-content {
    flex: 1 1 0%;
    overflow: hidden;
    padding: 1rem;
}
.data-preview-table-container {
    height: 100%;
    overflow: auto;
}
.data-preview-table > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
    --tw-divide-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}
.data-preview-table:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));
}
.data-preview-table {
        width: auto; /* Allow table to size based on content */
        min-width: 100%; /* Ensure table is at least as wide as container */
    }
.data-preview-table thead {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.data-preview-table thead:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.data-preview-table th {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.data-preview-table th:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.data-preview-table th {
        min-width: 100px; /* Minimum column width for readability */
    }
.data-preview-table td {
    white-space: nowrap;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.data-preview-table td:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.data-preview-table td {
        min-width: 100px; /* Match header minimum width */
    }
/* Virtual scrolling support for table body */
.data-preview-table tbody.virtual-scroll {
    position: relative;
    display: block;
    overflow: auto;
        max-height: 400px;
}
.data-preview-table tbody.virtual-scroll tr {
    display: table;
        width: auto; /* Allow row to size naturally */
        min-width: 100%; /* Ensure row is at least as wide as tbody */
}
/* When tbody is virtualized, thead must also be table with same layout */
.data-preview-table.virtual-table thead {
    display: table;
        width: auto; /* Allow header to size naturally */
        min-width: 100%; /* Ensure header is at least as wide as table */
}
.data-preview-table.virtual-table {
    display: table;
}
/* Processing Options */
.processing-options {
    margin-top: 1.5rem;
}
.processing-actions {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
/* Status Indicator */
.processing-status {
    margin-top: 1.5rem;
}
.status-indicator {
    display: flex;
    align-items: center;
}
.status-indicator > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.status-indicator {
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
}
.status-text {
    flex: 1 1 0%;
}
/* Resizable Table Layout */
.resizable-table {
    display: flex;
        height: 500px; /* Fixed height with reasonable max */
        max-height: 600px;
}
.resizable-column {
    display: flex;
    flex-direction: column;
        min-width: 100px;
        overflow: hidden; /* Prevent overflow */
        contain: layout style;
}
body.resizing .resizable-column {
        will-change: width; /* Hint to browser for optimization */
    }
.resizable-column:first-child {
        flex: 1 1 300px; /* Flexible width starting at 300px */
    }
.resizable-column:last-child {
        flex: 2 1 400px; /* Flexible width, takes more space, starting at 400px */
    }
.resizable-divider {
    cursor: col-resize;
    user-select: none;
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
        width: 4px;
        flex-shrink: 0;
        position: relative;
}
.resizable-divider:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.resizable-divider:active {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.resizable-divider::before {
        content: '';
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 50%;
        width: 0.25rem;
        --tw-translate-x: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-bg-opacity: 1;
        background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
        opacity: 0;
        transition: opacity var(--transition-duration);
    }
.resizable-divider:hover::before {
        opacity: 1;
    }
/* Resizing cursor and body state */
body.resizing {
    user-select: none;
        cursor: col-resize !important;
}
body.resizing * {
        cursor: col-resize !important;
    }
.empty-file-list {
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
/* Pricing specific styles */
.pricing-hero {
    margin-bottom: 3rem;
    text-align: center;
}
.pricing-seg-container {
    margin-top: 2rem;
    display: inline-flex;
    gap: 0.25rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
    padding: 0.25rem;
}
.pricing-seg-container:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.pricing-seg-btn {
    cursor: pointer;
    user-select: none;
    border-radius: 0.375rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.pricing-seg-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.pricing-seg-active {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.pricing-seg-active:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pricing-grid-wrapper {
    margin-bottom: 3rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}
.pricing-grid {
    display: flex;
    min-width: min-content;
    gap: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.pricing-card {
    position: relative;
    display: flex;
    width: 18rem;
    flex-shrink: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.pricing-card:focus-within {
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.pricing-card:hover {
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.pricing-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.pricing-card:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.pricing-card.featured {
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.pricing-card.featured:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.pricing-card-header {
    padding: 2rem;
    text-align: center;
}
.pricing-card-footer {
    margin-top: auto;
    padding: 2rem;
    text-align: center;
}
.pricing-plan-title {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.pricing-plan-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.pricing-price {
    margin-bottom: 0.5rem;
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.pricing-period {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.pricing-period:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.pricing-description {
    margin-top: 1rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.pricing-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.pricing-features {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
}
.pricing-feature-list > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.pricing-feature-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.pricing-feature-item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.pricing-feature-item.disabled {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.pricing-feature-item.disabled:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.pricing-btn-secondary {
    display: inline-block;
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.pricing-btn-secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.pricing-btn-secondary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}
.pricing-btn-secondary:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.pricing-btn-secondary:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.pricing-btn-secondary:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.pricing-btn-primary {
    display: inline-block;
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.pricing-btn-primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.pricing-btn-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}
.pricing-btn-primary:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.pricing-btn-contact {
    display: inline-block;
    width: 100%;
    border-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.pricing-btn-contact:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.pricing-faq {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 2rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.pricing-faq:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.pricing-faq-title {
    margin-bottom: 1rem;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.pricing-faq-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.pricing-faq-list > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.pricing-faq-item {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding-bottom: 1.5rem;
}
.pricing-faq-item:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.pricing-faq-item:last-child {
    border-bottom-width: 0px;
}
.pricing-faq-question {
    margin-bottom: 0.5rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.pricing-faq-question:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.pricing-faq-answer {
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.pricing-faq-answer:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
/* Features matrix page */
.features-matrix {
    overflow-x: auto;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.features-matrix:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.features-table {
    width: 100%;
    border-collapse: collapse;
}
.features-table th,
    .features-table td {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.features-table th:is(.dark *),
    .features-table td:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
/* Header row */
.features-table thead th {
    position: sticky;
    top: 0px;
    z-index: 10;
    white-space: nowrap;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    text-align: center;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.features-table thead th:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.features-table thead th:first-child {
    position: sticky;
    left: 0px;
    z-index: 20;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    text-align: left;
}
.features-table thead th:first-child:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
/* Feature name column */
.features-table td:first-child {
    position: sticky;
    left: 0px;
    z-index: 5;
    min-width: 16rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.features-table td:first-child:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
/* Value columns */
.features-table td:not(:first-child) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    text-align: center;
}
.features-table td:not(:first-child):is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
/* Alternating rows */
.features-table tbody tr:nth-child(even) td:not(.features-category-cell) {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.features-table tbody tr:nth-child(even) td:not(.features-category-cell):is(.dark *) {
    background-color: rgb(31 41 55 / 0.5);
}
.features-table tbody tr:nth-child(even) td:first-child {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.features-table tbody tr:nth-child(even) td:first-child:is(.dark *) {
    background-color: rgb(17 24 39 / 0.8);
}
/* Section category heading row */
.features-category-cell {
    border-top-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.features-category-cell:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
    background-color: rgb(30 58 138 / 0.3);
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.features-check {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.features-check:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.features-cross {
    font-size: 1.25rem;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.features-cross:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.features-value {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.features-value:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
/* Tooltip trigger */
.features-tooltip {
    position: relative;
    margin-left: 0.25rem;
    display: inline-flex;
    height: 1rem;
    width: 1rem;
    cursor: help;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    vertical-align: middle;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.features-tooltip:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.features-tooltip::after {
        content: attr(data-tip);
        pointer-events: none;
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-bottom: 0.5rem;
        width: 12rem;
        white-space: normal;
        border-radius: 0.375rem;
        --tw-bg-opacity: 1;
        background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 400;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        opacity: 0;
        --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        transition-property: opacity;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }
.features-tooltip:is(.dark *)::after {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.features-tooltip::after {
        transform: translateX(-50%);
        z-index: 50;
    }
.features-tooltip:hover::after {
    opacity: 1;
}
/* Resources specific styles */
.resources-hero {
    margin-bottom: 3rem;
    text-align: center;
}
.resources-search {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.resources-search:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.resources-search {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}
.resources-search-input {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    max-width: 32rem;
    gap: 0.5rem;
}
.resources-grid {
    margin-bottom: 3rem;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
}
@media (min-width: 1024px) {
    .resources-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.resources-card {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.resources-card:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.resources-card-header {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
    padding: 1.5rem;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.resources-card-icon {
    margin-bottom: 0.5rem;
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.resources-card-title {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}
.resources-card-subtitle {
    font-size: 0.875rem;
    line-height: 1.25rem;
    opacity: 0.9;
}
.resources-card-content {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-bottom: 1.5rem;
}
.resources-card-content > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.resources-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.resources-item:last-child {
    border-bottom-width: 0px;
}
.resources-item:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.resources-item-content {
    flex: 1 1 0%;
}
.resources-item-title {
    margin-bottom: 0.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.resources-item-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.resources-item-description {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.resources-item-description:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.resources-community {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.resources-community:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.resources-community {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-bottom: 1.5rem;
    text-align: center;
}
.resources-community-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.resources-community-link {
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.resources-community-link:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
}
.resources-community-link:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.resources-community-link {
    border-width: 1px;
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
#workflow-settings-modal .resources-community-link {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.resources-community-link:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.resources-community-link:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.resources-community-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#workflow-settings-modal .resources-community-link {
  background: #3b82f6;
  color: white;
}
#workflow-settings-modal .resources-community-link:hover {
  background: #2563eb;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.pointer-events-none {
    pointer-events: none;
}
.pointer-events-auto {
    pointer-events: auto;
}
.visible {
    visibility: visible;
}
.invisible {
    visibility: hidden;
}
.collapse {
    visibility: collapse;
}
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}
.inset-0 {
    inset: 0px;
}
.inset-4 {
    inset: 1rem;
}
.inset-y-0 {
    top: 0px;
    bottom: 0px;
}
.-right-1 {
    right: -0.25rem;
}
.-top-1 {
    top: -0.25rem;
}
.bottom-0 {
    bottom: 0px;
}
.bottom-5 {
    bottom: 1.25rem;
}
.bottom-auto {
    bottom: auto;
}
.bottom-full {
    bottom: 100%;
}
.left-0 {
    left: 0px;
}
.left-1 {
    left: 0.25rem;
}
.left-1\/2 {
    left: 50%;
}
.left-4 {
    left: 1rem;
}
.left-\[2px\] {
    left: 2px;
}
.right-0 {
    right: 0px;
}
.right-4 {
    right: 1rem;
}
.right-5 {
    right: 1.25rem;
}
.top-0 {
    top: 0px;
}
.top-1 {
    top: 0.25rem;
}
.top-1\/2 {
    top: 50%;
}
.top-20 {
    top: 5rem;
}
.top-4 {
    top: 1rem;
}
.top-\[2px\] {
    top: 2px;
}
.top-full {
    top: 100%;
}
.z-10 {
    z-index: 10;
}
.z-20 {
    z-index: 20;
}
.z-30 {
    z-index: 30;
}
.z-40 {
    z-index: 40;
}
.z-50 {
    z-index: 50;
}
.z-\[10000\] {
    z-index: 10000;
}
.z-\[5\] {
    z-index: 5;
}
.col-span-2 {
    grid-column: span 2 / span 2;
}
.col-span-full {
    grid-column: 1 / -1;
}
.m-8 {
    margin: 2rem;
}
.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.my-12 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.-mb-px {
    margin-bottom: -1px;
}
.-ml-1 {
    margin-left: -0.25rem;
}
.-mt-0 {
    margin-top: -0px;
}
.-mt-0\.5 {
    margin-top: -0.125rem;
}
.mb-0 {
    margin-bottom: 0px;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-12 {
    margin-bottom: 3rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.mb-8 {
    margin-bottom: 2rem;
}
.ml-0 {
    margin-left: 0px;
}
.ml-1 {
    margin-left: 0.25rem;
}
.ml-2 {
    margin-left: 0.5rem;
}
.ml-3 {
    margin-left: 0.75rem;
}
.ml-4 {
    margin-left: 1rem;
}
.ml-6 {
    margin-left: 1.5rem;
}
.ml-auto {
    margin-left: auto;
}
.mr-1 {
    margin-right: 0.25rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.mr-3 {
    margin-right: 0.75rem;
}
.mr-4 {
    margin-right: 1rem;
}
.ms-3 {
    margin-inline-start: 0.75rem;
}
.mt-0 {
    margin-top: 0px;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-12 {
    margin-top: 3rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-5 {
    margin-top: 1.25rem;
}
.mt-6 {
    margin-top: 1.5rem;
}
.mt-8 {
    margin-top: 2rem;
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.table {
    display: table;
}
.flow-root {
    display: flow-root;
}
.grid {
    display: grid;
}
.contents {
    display: contents;
}
.hidden {
    display: none;
}
.h-0 {
    height: 0px;
}
.h-0\.5 {
    height: 0.125rem;
}
.h-1 {
    height: 0.25rem;
}
.h-1\.5 {
    height: 0.375rem;
}
.h-10 {
    height: 2.5rem;
}
.h-12 {
    height: 3rem;
}
.h-16 {
    height: 4rem;
}
.h-2 {
    height: 0.5rem;
}
.h-3 {
    height: 0.75rem;
}
.h-4 {
    height: 1rem;
}
.h-5 {
    height: 1.25rem;
}
.h-6 {
    height: 1.5rem;
}
.h-8 {
    height: 2rem;
}
.h-full {
    height: 100%;
}
.max-h-32 {
    max-height: 8rem;
}
.max-h-40 {
    max-height: 10rem;
}
.max-h-48 {
    max-height: 12rem;
}
.max-h-64 {
    max-height: 16rem;
}
.max-h-96 {
    max-height: 24rem;
}
.max-h-\[90vh\] {
    max-height: 90vh;
}
.min-h-\[200px\] {
    min-height: 200px;
}
.min-h-\[32px\] {
    min-height: 32px;
}
.min-h-\[40px\] {
    min-height: 40px;
}
.min-h-\[60px\] {
    min-height: 60px;
}
.min-h-screen {
    min-height: 100vh;
}
.w-0 {
    width: 0px;
}
.w-1 {
    width: 0.25rem;
}
.w-1\.5 {
    width: 0.375rem;
}
.w-10 {
    width: 2.5rem;
}
.w-11 {
    width: 2.75rem;
}
.w-12 {
    width: 3rem;
}
.w-14 {
    width: 3.5rem;
}
.w-16 {
    width: 4rem;
}
.w-2 {
    width: 0.5rem;
}
.w-3 {
    width: 0.75rem;
}
.w-32 {
    width: 8rem;
}
.w-4 {
    width: 1rem;
}
.w-40 {
    width: 10rem;
}
.w-44 {
    width: 11rem;
}
.w-48 {
    width: 12rem;
}
.w-5 {
    width: 1.25rem;
}
.w-56 {
    width: 14rem;
}
.w-6 {
    width: 1.5rem;
}
.w-64 {
    width: 16rem;
}
.w-72 {
    width: 18rem;
}
.w-8 {
    width: 2rem;
}
.w-80 {
    width: 20rem;
}
.w-96 {
    width: 24rem;
}
.w-full {
    width: 100%;
}
.w-px {
    width: 1px;
}
.min-w-0 {
    min-width: 0px;
}
.min-w-40 {
    min-width: 10rem;
}
.min-w-48 {
    min-width: 12rem;
}
.min-w-\[16rem\] {
    min-width: 16rem;
}
.min-w-\[300px\] {
    min-width: 300px;
}
.min-w-full {
    min-width: 100%;
}
.min-w-min {
    min-width: min-content;
}
.max-w-2xl {
    max-width: 42rem;
}
.max-w-3xl {
    max-width: 48rem;
}
.max-w-4xl {
    max-width: 56rem;
}
.max-w-5xl {
    max-width: 64rem;
}
.max-w-6xl {
    max-width: 72rem;
}
.max-w-7xl {
    max-width: 80rem;
}
.max-w-\[400px\] {
    max-width: 400px;
}
.max-w-lg {
    max-width: 32rem;
}
.max-w-md {
    max-width: 28rem;
}
.flex-1 {
    flex: 1 1 0%;
}
.flex-none {
    flex: none;
}
.flex-shrink {
    flex-shrink: 1;
}
.flex-shrink-0 {
    flex-shrink: 0;
}
.flex-grow {
    flex-grow: 1;
}
.grow {
    flex-grow: 1;
}
.border-collapse {
    border-collapse: collapse;
}
.-translate-x-1 {
    --tw-translate-x: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1 {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-7 {
    --tw-translate-x: 1.75rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full {
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
    --tw-rotate: -90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-0 {
    --tw-rotate: 0deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[1\.02\] {
    --tw-scale-x: 1.02;
    --tw-scale-y: 1.02;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.animate-spin {
    animation: spin 1s linear infinite;
}
.cursor-col-resize {
    cursor: col-resize;
}
.cursor-ew-resize {
    cursor: ew-resize;
}
.cursor-grab {
    cursor: grab;
}
.cursor-grabbing {
    cursor: grabbing;
}
.cursor-help {
    cursor: help;
}
.cursor-move {
    cursor: move;
}
.cursor-not-allowed {
    cursor: not-allowed;
}
.cursor-pointer {
    cursor: pointer;
}
.select-none {
    user-select: none;
}
.resize {
    resize: both;
}
.list-inside {
    list-style-position: inside;
}
.list-disc {
    list-style-type: disc;
}
.appearance-none {
    appearance: none;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.flex-row {
    flex-direction: row;
}
.flex-col {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.items-start {
    align-items: flex-start;
}
.items-center {
    align-items: center;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.gap-1 {
    gap: 0.25rem;
}
.gap-1\.5 {
    gap: 0.375rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-3 {
    gap: 0.75rem;
}
.gap-4 {
    gap: 1rem;
}
.gap-6 {
    gap: 1.5rem;
}
.gap-8 {
    gap: 2rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}
.overflow-auto {
    overflow: auto;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-auto {
    overflow-y: auto;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.whitespace-nowrap {
    white-space: nowrap;
}
.whitespace-pre-wrap {
    white-space: pre-wrap;
}
.break-all {
    word-break: break-all;
}
.rounded {
    border-radius: 0.25rem;
}
.rounded-full {
    border-radius: 9999px;
}
.rounded-lg {
    border-radius: 0.5rem;
}
.rounded-md {
    border-radius: 0.375rem;
}
.border {
    border-width: 1px;
}
.border-2 {
    border-width: 2px;
}
.border-b {
    border-bottom-width: 1px;
}
.border-b-2 {
    border-bottom-width: 2px;
}
.border-l {
    border-left-width: 1px;
}
.border-l-4 {
    border-left-width: 4px;
}
.border-r {
    border-right-width: 1px;
}
.border-t {
    border-top-width: 1px;
}
.border-t-2 {
    border-top-width: 2px;
}
.border-solid {
    border-style: solid;
}
.border-dashed {
    border-style: dashed;
}
.border-none {
    border-style: none;
}
.border-amber-200 {
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-600 {
    --tw-border-opacity: 1;
    border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
}
.border-blue-200 {
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-300 {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.border-blue-400 {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-blue-500 {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-blue-600 {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-500 {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}
.border-gray-700 {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-green-300 {
    --tw-border-opacity: 1;
    border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}
.border-green-400 {
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}
.border-green-500 {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-green-600 {
    --tw-border-opacity: 1;
    border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}
.border-purple-500 {
    --tw-border-opacity: 1;
    border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-purple-600 {
    --tw-border-opacity: 1;
    border-color: rgb(147 51 234 / var(--tw-border-opacity, 1));
}
.border-red-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300 {
    --tw-border-opacity: 1;
    border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-400 {
    --tw-border-opacity: 1;
    border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-red-500 {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-red-600 {
    --tw-border-opacity: 1;
    border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-red-800 {
    --tw-border-opacity: 1;
    border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}
.border-transparent {
    border-color: transparent;
}
.border-yellow-400 {
    --tw-border-opacity: 1;
    border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}
.border-yellow-500 {
    --tw-border-opacity: 1;
    border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.border-yellow-600 {
    --tw-border-opacity: 1;
    border-color: rgb(202 138 4 / var(--tw-border-opacity, 1));
}
.bg-amber-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-amber-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(120 53 15 / var(--tw-bg-opacity, 1));
}
.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-blue-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-500\/15 {
    background-color: rgb(59 130 246 / 0.15);
}
.bg-blue-500\/60 {
    background-color: rgb(59 130 246 / 0.6);
}
.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-blue-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-gray-800\/50 {
    background-color: rgb(31 41 55 / 0.5);
}
.bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-gray-900\/95 {
    background-color: rgb(17 24 39 / 0.95);
}
.bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-green-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
}
.bg-green-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
}
.bg-indigo-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-orange-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-purple-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-purple-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(88 28 135 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-400\/70 {
    background-color: rgb(248 113 113 / 0.7);
}
.bg-red-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}
.bg-red-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
}
.bg-slate-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-teal-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
    background-color: transparent;
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-yellow-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
}
.bg-yellow-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-yellow-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.bg-yellow-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(133 77 14 / var(--tw-bg-opacity, 1));
}
.bg-yellow-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(113 63 18 / var(--tw-bg-opacity, 1));
}
.bg-opacity-25 {
    --tw-bg-opacity: 0.25;
}
.bg-opacity-50 {
    --tw-bg-opacity: 0.5;
}
.bg-opacity-75 {
    --tw-bg-opacity: 0.75;
}
.bg-opacity-95 {
    --tw-bg-opacity: 0.95;
}
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-blue-400 {
    --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500 {
    --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-blue-600 {
    --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}
.to-blue-700 {
    --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}
.fill-current {
    fill: currentColor;
}
.p-0 {
    padding: 0px;
}
.p-1 {
    padding: 0.25rem;
}
.p-1\.5 {
    padding: 0.375rem;
}
.p-16 {
    padding: 4rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-4 {
    padding: 1rem;
}
.p-6 {
    padding: 1.5rem;
}
.p-8 {
    padding: 2rem;
}
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}
.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.pb-4 {
    padding-bottom: 1rem;
}
.pb-6 {
    padding-bottom: 1.5rem;
}
.pl-5 {
    padding-left: 1.25rem;
}
.pl-6 {
    padding-left: 1.5rem;
}
.pr-6 {
    padding-right: 1.5rem;
}
.pt-4 {
    padding-top: 1rem;
}
.pt-6 {
    padding-top: 1.5rem;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.align-middle {
    vertical-align: middle;
}
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-5xl {
    font-size: 3rem;
    line-height: 1;
}
.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.font-bold {
    font-weight: 700;
}
.font-medium {
    font-weight: 500;
}
.font-normal {
    font-weight: 400;
}
.font-semibold {
    font-weight: 600;
}
.uppercase {
    text-transform: uppercase;
}
.italic {
    font-style: italic;
}
.leading-relaxed {
    line-height: 1.625;
}
.tracking-wide {
    letter-spacing: 0.025em;
}
.tracking-wider {
    letter-spacing: 0.05em;
}
.text-amber-600 {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
    --tw-text-opacity: 1;
    color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-100 {
    --tw-text-opacity: 1;
    color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.text-blue-300 {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-blue-900 {
    --tw-text-opacity: 1;
    color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-current {
    color: currentColor;
}
.text-emerald-500 {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-50 {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-300 {
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800 {
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-orange-500 {
    --tw-text-opacity: 1;
    color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-700 {
    --tw-text-opacity: 1;
    color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-purple-800 {
    --tw-text-opacity: 1;
    color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-red-900 {
    --tw-text-opacity: 1;
    color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-600 {
    --tw-text-opacity: 1;
    color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-700 {
    --tw-text-opacity: 1;
    color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-yellow-800 {
    --tw-text-opacity: 1;
    color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.underline {
    text-decoration-line: underline;
}
.no-underline {
    text-decoration-line: none;
}
.placeholder-blue-200::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(191 219 254 / var(--tw-placeholder-opacity, 1));
}
.opacity-0 {
    opacity: 0;
}
.opacity-25 {
    opacity: 0.25;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-60 {
    opacity: 0.6;
}
.opacity-75 {
    opacity: 0.75;
}
.opacity-80 {
    opacity: 0.8;
}
.opacity-90 {
    opacity: 0.9;
}
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.outline {
    outline-style: solid;
}
.outline-2 {
    outline-width: 2px;
}
.outline-blue-500 {
    outline-color: #3b82f6;
}
.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-blue-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
}
.ring-blue-400 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}
.ring-blue-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.ring-green-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity, 1));
}
.ring-green-400 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity, 1));
}
.ring-green-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}
.ring-opacity-50 {
    --tw-ring-opacity: 0.5;
}
.ring-opacity-75 {
    --tw-ring-opacity: 0.75;
}
.ring-offset-2 {
    --tw-ring-offset-width: 2px;
}
.ring-offset-white {
    --tw-ring-offset-color: #fff;
}
.drop-shadow {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-200 {
    transition-duration: 200ms;
}
.duration-300 {
    transition-duration: 300ms;
}
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.content-\[\'\'\] {
    --tw-content: '';
    content: var(--tw-content);
}
.file\:mr-4::file-selector-button {
    margin-right: 1rem;
}
.file\:rounded-lg::file-selector-button {
    border-radius: 0.5rem;
}
.file\:border-0::file-selector-button {
    border-width: 0px;
}
.file\:bg-blue-50::file-selector-button {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.file\:px-4::file-selector-button {
    padding-left: 1rem;
    padding-right: 1rem;
}
.file\:py-2::file-selector-button {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.file\:text-sm::file-selector-button {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.file\:font-semibold::file-selector-button {
    font-weight: 600;
}
.file\:text-blue-700::file-selector-button {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.after\:absolute::after {
    content: var(--tw-content);
    position: absolute;
}
.after\:start-\[2px\]::after {
    content: var(--tw-content);
    inset-inline-start: 2px;
}
.after\:top-\[2px\]::after {
    content: var(--tw-content);
    top: 2px;
}
.after\:h-5::after {
    content: var(--tw-content);
    height: 1.25rem;
}
.after\:w-5::after {
    content: var(--tw-content);
    width: 1.25rem;
}
.after\:rounded-full::after {
    content: var(--tw-content);
    border-radius: 9999px;
}
.after\:border::after {
    content: var(--tw-content);
    border-width: 1px;
}
.after\:border-gray-300::after {
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.after\:bg-white::after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.after\:transition-all::after {
    content: var(--tw-content);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.after\:content-\[\'\'\]::after {
    --tw-content: '';
    content: var(--tw-content);
}
.last\:rounded-b-md:last-child {
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}
.last\:border-b-0:last-child {
    border-bottom-width: 0px;
}
.focus-within\:border-2:focus-within {
    border-width: 2px;
}
.focus-within\:shadow-xl:focus-within {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:-translate-y-1:hover {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.02\]:hover {
    --tw-scale-x: 1.02;
    --tw-scale-y: 1.02;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-2:hover {
    border-width: 2px;
}
.hover\:border-blue-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.hover\:border-blue-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.hover\:border-red-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.hover\:bg-blue-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-500\/10:hover {
    background-color: rgb(59 130 246 / 0.1);
}
.hover\:bg-blue-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-teal-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(161 98 7 / var(--tw-bg-opacity, 1));
}
.hover\:text-blue-200:hover {
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-500:hover {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-600:hover {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-900:hover {
    --tw-text-opacity: 1;
    color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-200:hover {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.hover\:text-green-900:hover {
    --tw-text-opacity: 1;
    color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}
.hover\:text-red-500:hover {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.hover\:text-red-600:hover {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:text-red-700:hover {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.hover\:text-red-800:hover {
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.hover\:text-red-900:hover {
    --tw-text-opacity: 1;
    color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-900:hover {
    --tw-text-opacity: 1;
    color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
    text-decoration-line: underline;
}
.hover\:opacity-80:hover {
    opacity: 0.8;
}
.hover\:shadow-lg:hover {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-xl:hover {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:file\:bg-blue-100::file-selector-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.focus\:border-blue-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.focus\:bg-white:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.focus\:ring-1:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-blue-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-green-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}
.focus\:ring-red-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
}
.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
    opacity: 0.5;
}
.peer:checked ~ .peer-checked\:bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
    content: var(--tw-content);
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.peer:checked ~ .peer-checked\:after\:border-white::after {
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.peer:focus ~ .peer-focus\:outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.peer:focus ~ .peer-focus\:ring-4 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.peer:focus ~ .peer-focus\:ring-blue-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
}
.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));
}
.dark\:border-blue-400:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-600:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-700:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}
.dark\:border-blue-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-600:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-700:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}
.dark\:border-green-400:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}
.dark\:border-green-500:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.dark\:border-green-600:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}
.dark\:border-purple-400:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}
.dark\:border-red-400:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.dark\:border-red-600:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.dark\:border-red-800:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}
.dark\:border-yellow-400:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}
.dark\:bg-amber-900\/80:is(.dark *) {
    background-color: rgb(120 53 15 / 0.8);
}
.dark\:bg-black:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-500:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-600:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-800:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-900\/20:is(.dark *) {
    background-color: rgb(30 58 138 / 0.2);
}
.dark\:bg-blue-900\/30:is(.dark *) {
    background-color: rgb(30 58 138 / 0.3);
}
.dark\:bg-emerald-500:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-100:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-600:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-800:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-800\/50:is(.dark *) {
    background-color: rgb(31 41 55 / 0.5);
}
.dark\:bg-gray-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-800:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-800\/30:is(.dark *) {
    background-color: rgb(22 101 52 / 0.3);
}
.dark\:bg-green-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-900\/20:is(.dark *) {
    background-color: rgb(20 83 45 / 0.2);
}
.dark\:bg-green-900\/30:is(.dark *) {
    background-color: rgb(20 83 45 / 0.3);
}
.dark\:bg-indigo-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}
.dark\:bg-purple-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}
.dark\:bg-purple-800:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(107 33 168 / var(--tw-bg-opacity, 1));
}
.dark\:bg-purple-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(88 28 135 / var(--tw-bg-opacity, 1));
}
.dark\:bg-purple-900\/20:is(.dark *) {
    background-color: rgb(88 28 135 / 0.2);
}
.dark\:bg-red-500:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-600:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-800:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-800\/30:is(.dark *) {
    background-color: rgb(153 27 27 / 0.3);
}
.dark\:bg-red-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-900\/20:is(.dark *) {
    background-color: rgb(127 29 29 / 0.2);
}
.dark\:bg-teal-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1));
}
.dark\:bg-yellow-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(161 98 7 / var(--tw-bg-opacity, 1));
}
.dark\:bg-yellow-800:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(133 77 14 / var(--tw-bg-opacity, 1));
}
.dark\:bg-yellow-800\/50:is(.dark *) {
    background-color: rgb(133 77 14 / 0.5);
}
.dark\:bg-yellow-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(113 63 18 / var(--tw-bg-opacity, 1));
}
.dark\:bg-yellow-900\/20:is(.dark *) {
    background-color: rgb(113 63 18 / 0.2);
}
.dark\:bg-yellow-900\/30:is(.dark *) {
    background-color: rgb(113 63 18 / 0.3);
}
.dark\:bg-opacity-50:is(.dark *) {
    --tw-bg-opacity: 0.5;
}
.dark\:text-amber-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-500:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-100:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-500:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-600:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-900:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.dark\:text-green-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}
.dark\:text-green-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.dark\:text-green-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.dark\:text-red-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.dark\:text-red-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:text-red-500:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.dark\:text-white:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.dark\:placeholder-blue-300:is(.dark *)::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(147 197 253 / var(--tw-placeholder-opacity, 1));
}
.dark\:outline-blue-400:is(.dark *) {
    outline-color: #60a5fa;
}
.dark\:ring-blue-400:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}
.dark\:ring-green-700:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(21 128 61 / var(--tw-ring-opacity, 1));
}
.dark\:file\:bg-blue-900:is(.dark *)::file-selector-button {
    --tw-bg-opacity: 1;
    background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}
.dark\:file\:text-blue-300:is(.dark *)::file-selector-button {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.dark\:hover\:border-blue-400:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-blue-500:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-blue-600:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-gray-600:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-red-700:hover:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}
.dark\:hover\:bg-blue-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-blue-700:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-blue-800:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-blue-900\/20:hover:is(.dark *) {
    background-color: rgb(30 58 138 / 0.2);
}
.dark\:hover\:bg-blue-900\/50:hover:is(.dark *) {
    background-color: rgb(30 58 138 / 0.5);
}
.dark\:hover\:bg-gray-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-700:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-green-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-green-800:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-indigo-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-purple-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-red-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-red-800:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-red-900\/20:hover:is(.dark *) {
    background-color: rgb(127 29 29 / 0.2);
}
.dark\:hover\:bg-teal-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-yellow-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:text-blue-300:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-blue-400:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-gray-200:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-gray-300:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-green-300:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-red-300:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-red-400:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-yellow-300:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.dark\:hover\:file\:bg-blue-800:is(.dark *)::file-selector-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}
.dark\:focus\:bg-gray-800:focus:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dark\:focus\:ring-red-400:focus:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}
.dark\:focus\:ring-offset-gray-800:focus:is(.dark *) {
    --tw-ring-offset-color: #1f2937;
}
.peer:focus ~ .dark\:peer-focus\:ring-blue-800:is(.dark *) {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity, 1));
}
@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 768px) {
    .md\:w-64 {
        width: 16rem;
    }
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .md\:flex-row {
        flex-direction: row;
    }
    .md\:items-center {
        align-items: center;
    }
    .md\:justify-between {
        justify-content: space-between;
    }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
.peer:checked ~ .rtl\:peer-checked\:after\:-translate-x-full:where([dir="rtl"], [dir="rtl"] *)::after {
    content: var(--tw-content);
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}