@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');/**
 * UniversalDocumentViewer Styles
 * Day 146: Platform-aligned Design System
 *
 * Uses Inter font and CSS variables from Analytics AI platform
 * Detection overlays maintain distinct colors for visibility
 */

/**
 * Adaptrix Theme Integration
 * Uses global CSS variables from /src/styles/theme.css
 * Detection overlays use theme-aware colors for light/dark mode
 */

/* Detection overlay colors - theme aware */
[data-theme='dark'] {
  --detection-cyan: #00ffff;
  --detection-magenta: #ff00ff;
  --detection-amber: #fbbf24;
  --detection-active: rgb(var(--color-primary));
  --glow-cyan: 0 0 20px rgba(0, 255, 255, 0.3);
  --glow-magenta: 0 0 20px rgba(255, 0, 255, 0.3);
  --glow-amber: 0 0 20px rgba(251, 191, 36, 0.3);
  --glow-active: 0 0 30px rgba(var(--color-primary), 0.4);
}

[data-theme='light'] {
  --detection-cyan: #0891b2; /* cyan-600 */
  --detection-magenta: #c026d3; /* fuchsia-600 */
  --detection-amber: #d97706; /* amber-600 */
  --detection-active: rgb(var(--color-primary));
  --glow-cyan: 0 0 20px rgba(8, 145, 178, 0.3);
  --glow-magenta: 0 0 20px rgba(192, 38, 211, 0.3);
  --glow-amber: 0 0 20px rgba(217, 119, 6, 0.3);
  --glow-active: 0 0 30px rgba(var(--color-primary), 0.4);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.forensic-viewer {
  width: 100%;
  height: 80vh; /* Fixed height that works in modals */
  min-height: 500px;
  background: rgb(var(--color-background));
  color: rgb(var(--color-text-primary));
  font-family: var(--font-body, 'Inter', sans-serif);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}

/* Adaptrix Full-Screen Mode - absolute full-screen with z-index 9999 */
.forensic-viewer.fullscreen-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 9999 !important;
  border-radius: 0 !important;
  background: rgb(var(--color-background));
  animation: fullscreenIn 0.3s var(--ease-in-out);
}

.fullscreen-modal .viewer-content {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Full-screen animation */
@keyframes fullscreenIn {
  from {
    opacity: 0.9;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Error State */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
  padding: 40px;
}

.error-icon {
  font-size: 72px;
  color: rgb(var(--color-error));
  animation: pulse 2s ease-in-out infinite;
}

.error-state h2 {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 24px;
  letter-spacing: 2px;
  color: rgb(var(--color-text-primary));
}

.error-state p {
  font-size: 14px;
  color: rgb(var(--color-text-secondary));
  text-align: center;
  max-width: 500px;
}

/* Scanning Overlay */
.scanning-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 14, 20, 0.95);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.scan-line {
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--detection-active) 50%,
      transparent 100%);
  animation: scan 2s ease-in-out infinite;
  box-shadow: var(--glow-active);
}

@keyframes scan {

  0%,
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.scan-text {
  margin-top: 30px;
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--detection-active);
  text-shadow: var(--glow-active);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

/* Control Panel - Day 145: Platform purple gradient */
.control-panel {
  background: linear-gradient(to right, #7c3aed, #6366f1); /* purple-600 to indigo-500 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  flex-wrap: wrap; /* Allow wrapping on narrow screens */
  min-height: 60px;
}

/* Day 145: Maximized mode - slightly darker header */
.forensic-viewer.maximized .control-panel {
  background: linear-gradient(to right, #6d28d9, #4f46e5); /* purple-700 to indigo-600 */
}

.panel-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.viewer-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-text-primary);
  text-transform: uppercase;
  white-space: nowrap; /* Prevent title from wrapping vertically */
}

.file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 11px;
}

.file-type-badge {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--color-active);
  font-weight: 600;
  letter-spacing: 1px;
}

.page-counter {
  color: var(--color-text-secondary);
  letter-spacing: 1px;
}

/* SOTA Enhancement (Phase 1.1): Page Navigation */
.page-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-nav-btn {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: var(--color-text-primary);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  line-height: 1;
}

.page-nav-btn:hover:not(:disabled) {
  background: var(--color-border);
  color: var(--color-active);
  box-shadow: var(--glow-active);
  transform: translateX(0) scale(1.05);
}

.page-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Layer Controls */
.layer-controls {
  display: flex;
  gap: 8px;
}

.layer-toggle {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.layer-toggle:hover {
  background: var(--color-border);
  transform: translateY(-1px);
}

.layer-toggle.active.tables {
  background: rgba(0, 229, 255, 0.1);
  border-color: var(--detection-cyan);
  color: var(--detection-cyan);
  box-shadow: var(--glow-cyan);
}

.layer-toggle.active.charts {
  background: rgba(255, 0, 170, 0.1);
  border-color: var(--detection-magenta);
  color: var(--detection-magenta);
  box-shadow: var(--glow-magenta);
}

.layer-toggle.active.entities {
  background: rgba(255, 171, 0, 0.1);
  border-color: var(--detection-amber);
  color: var(--detection-amber);
  box-shadow: var(--glow-amber);
}

.layer-icon {
  font-size: 14px;
}

.layer-count {
  background: var(--color-base);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  min-width: 20px;
  text-align: center;
}

/* Zoom Controls */
.zoom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
}

.zoom-btn {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  color: var(--color-text-primary);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoom-btn:hover:not(:disabled) {
  background: var(--color-border);
  color: var(--color-active);
  box-shadow: var(--glow-active);
}

.zoom-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Day 145: Fullscreen button active state */
.zoom-btn.fullscreen-btn.active {
  background: var(--color-active);
  color: white;
  box-shadow: var(--glow-active);
}

.zoom-btn.fullscreen-btn.active:hover {
  background: #9333ea; /* purple-600 */
}

.zoom-level {
  min-width: 50px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-secondary);
  letter-spacing: 1px;
}

/* SOTA Enhancement (Phase 2.3): Filter Controls */
.filter-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--color-border);
}

.filter-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-icon {
  font-size: 12px;
}

.confidence-slider-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.confidence-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 120px;
  height: 4px;
  background: var(--color-surface-elevated);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.confidence-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--color-active);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--glow-active);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.confidence-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--color-active);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--glow-active);
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.confidence-slider:hover::-webkit-slider-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 40px rgba(57, 255, 20, 0.6);
}

.confidence-slider:hover::-moz-range-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 40px rgba(57, 255, 20, 0.6);
}

.confidence-value {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--color-active);
  min-width: 40px;
  text-align: right;
}

/* Main Content */
.viewer-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.document-pane {
  flex: 1;
  overflow: auto;
  scroll-behavior: smooth;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Match React Flow canvas background - theme aware */
[data-theme='dark'] .document-pane {
  background-color: #374151; /* gray-600 - matches React Flow dark */
}

[data-theme='light'] .document-pane {
  background-color: #E5E7EB; /* gray-200 - matches React Flow light */
}

/* Optional: Add subtle grid pattern like React Flow */
.document-pane::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle, rgba(var(--color-text-tertiary), 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/* Full-screen mode - more padding */
.forensic-viewer.fullscreen-modal .document-pane {
  padding: 60px;
}

.canvas-container {
  position: relative;
  z-index: 1; /* Above grid pattern */
  box-shadow: var(--shadow-lg, 0 10px 50px rgba(0, 0, 0, 0.5));
  border: 1px solid rgb(var(--color-surface-elevated));
  transition: transform var(--transition-base);
}

.pdf-canvas {
  display: block;
  background: white;
}

.detection-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.detection-box {
  cursor: pointer;
  pointer-events: all;
  transition: all 0.2s ease;
}

.detection-box:hover {
  filter: brightness(1.3);
}

.detection-label {
  pointer-events: none;
  font-weight: 700;
  text-shadow: 0 0 10px currentColor;
}

/* Page Navigation */
.page-nav {
  margin-top: 24px;
  display: flex;
  gap: 12px;
}

.nav-btn {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  padding: 10px 20px;
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-btn:hover:not(:disabled) {
  background: var(--color-border);
  color: var(--color-active);
  box-shadow: var(--glow-active);
  transform: translateY(-2px);
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Detection Sidebar */
.detection-sidebar {
  width: 400px;
  background: var(--color-surface-elevated);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.sidebar-header h2 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-text-primary);
}

.detection-count {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--color-text-muted);
  background: var(--color-base);
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 1px;
}

.detection-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 20px;
  color: var(--color-text-muted);
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  opacity: 0.3;
}

.detection-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.detection-item:hover {
  border-color: var(--color-active);
  box-shadow: 0 4px 20px rgba(57, 255, 20, 0.2);
  transform: translateX(-4px);
}

.detection-item.selected {
  border-color: var(--color-active);
  box-shadow: var(--glow-active);
  background: rgba(57, 255, 20, 0.05);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.item-type {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 8px;
  border-radius: 4px;
}

.item-type.tables {
  background: rgba(0, 229, 255, 0.15);
  color: var(--detection-cyan);
  border: 1px solid var(--detection-cyan);
}

.item-type.charts {
  background: rgba(255, 0, 170, 0.15);
  color: var(--detection-magenta);
  border: 1px solid var(--detection-magenta);
}

.item-type.entities {
  background: rgba(255, 171, 0, 0.15);
  color: var(--detection-amber);
  border: 1px solid var(--detection-amber);
}

.item-confidence {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 1px;
}

.item-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-family: var(--font-display);
}

.meta-label {
  color: var(--color-text-muted);
  letter-spacing: 1px;
}

.meta-value {
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
}

.item-preview {
  margin-top: 12px;
  padding: 10px;
  background: var(--color-base);
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-display);
  color: var(--color-text-secondary);
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}

/* Day 146: Modal styles removed - now using Card components with Tailwind
 * DetectionModal uses: Card, CardHeader, CardTitle, CardContent, CardFooter
 * Button, Badge components from ./ui/ directory
 * All styling via Tailwind utility classes for Adaptrix consistency
 */

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-base);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-active);
  box-shadow: var(--glow-active);
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  cursor: grab;
}
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow .react-flow__edges {
  pointer-events: none;
  overflow: visible;
}
.react-flow__edge-path,
.react-flow__connection-path {
  stroke: #b1b1b7;
  stroke-width: 1;
  fill: none;
}
.react-flow__edge {
  pointer-events: visibleStroke;
  cursor: pointer;
}
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge:focus .react-flow__edge-path,
  .react-flow__edge:focus-visible .react-flow__edge-path {
    stroke: #555;
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge-textbg {
    fill: white;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__connectionline {
  z-index: 1001;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: grab;
}
.react-flow__node.dragging {
    cursor: grabbing;
  }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background: #1a192b;
  border: 1px solid white;
  border-radius: 100%;
}
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-top {
    left: 50%;
    top: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-left {
    top: 50%;
    left: -4px;
    transform: translate(0, -50%);
  }
.react-flow__handle-right {
    right: -4px;
    top: 50%;
    transform: translate(0, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.center {
    left: 50%;
    transform: translateX(-50%);
  }
.react-flow__attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.5);
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: 3px;
  width: 150px;
  font-size: 12px;
  color: #222;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #1a192b;
  background-color: white;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
    }
.react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: 0 0 0 0.5px #1a192b;
    }
.react-flow__node-group {
  background-color: rgba(240, 240, 240, 0.25);
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: rgba(0, 89, 220, 0.08);
  border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__controls-button {
    border: none;
    background: #fefefe;
    border-bottom: 1px solid #eee;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    padding: 5px;
  }
.react-flow__controls-button:hover {
      background: #f4f4f4;
    }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__minimap {
  background-color: #fff;
}
.react-flow__minimap svg {
  display: block;
}
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: #3367d9;
  transform: translate(-50%, -50%);
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: #3367d9;
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
/* Connector Viewer Styles - GDPR-Compliant Database Viewers */

.connector-viewer {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.viewer-header {
  padding: 1rem;
  background: white;
  border-bottom: 2px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.viewer-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
}

.connector-icon {
  font-size: 1.8rem;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.connection-info {
  font-size: 0.9rem;
  color: #666;
}

.viewer-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Schema Browser (Left Panel) */
.schema-browser {
  width: 300px;
  background: white;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.schema-browser h3 {
  padding: 1rem;
  margin: 0;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  font-size: 1rem;
}

.tree-section {
  margin: 1rem 0;
}

.tree-header {
  padding: 0.5rem 1rem;
  font-weight: 600;
  color: #333;
  background: #f9f9f9;
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.tree-items {
  padding: 0.5rem 0;
}

.tree-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.2s;
}

.tree-item:hover {
  background: #f0f0f0;
}

.tree-item.selected {
  background: #e3f2fd;
  color: #0d47a1;
  font-weight: 500;
}

.tree-icon {
  font-size: 1.2rem;
}

.row-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: #666;
}

/* Query Panel (Right Panel) */
.query-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1rem;
  gap: 1rem;
}

/* Table Info */
.table-info {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.table-info h4 {
  margin: 0 0 1rem 0;
  color: #333;
}

.columns-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.column-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  background: #f9f9f9;
  border-radius: 4px;
}

.col-name {
  font-weight: 500;
  color: #333;
  min-width: 150px;
}

.col-type {
  color: #666;
  font-size: 0.9rem;
  font-family: 'Courier New', monospace;
}

.sensitivity-badge {
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.sensitivity-badge.level-1 {
  background: #ffebee;
  color: #c62828;
}

.sensitivity-badge.level-2 {
  background: #fff3e0;
  color: #8c3400;
}

.sensitivity-badge.level-3 {
  background: #fff9c4;
  color: #9d4a00;
}

.sensitivity-badge.level-4 {
  background: #e8f5e9;
  color: #2e7d32;
}

.sensitivity-badge.level-5 {
  background: #e3f2fd;
  color: #1565c0;
}

/* SQL Editor */
.sql-editor {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  overflow: hidden;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.editor-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-execute {
  padding: 0.5rem 1rem;
  background: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.btn-execute:hover:not(:disabled) {
  background: #1565c0;
}

.btn-execute:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.sql-textarea {
  width: 100%;
  padding: 1rem;
  border: none;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  resize: vertical;
  outline: none;
}

/* GDPR Warning */
.gdpr-warning {
  padding: 1rem;
  background: #fff3e0;
  border-left: 4px solid #ff9800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.warning-icon {
  font-size: 1.2rem;
}

/* Results Section */
.results-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  overflow: hidden;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.exec-time {
  color: #666;
  font-size: 0.85rem;
}

.results-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.anonymized-badge {
  padding: 0.25rem 0.75rem;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
}

.btn-export {
  padding: 0.5rem 1rem;
  background: #1b5e20;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.btn-export:hover {
  background: #388e3c;
}

/* Results Table */
.results-table-container {
  max-height: 400px;
  overflow: auto;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.results-table th {
  position: sticky;
  top: 0;
  background: #f5f5f5;
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #e0e0e0;
  z-index: 1;
}

.results-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #f0f0f0;
}

.results-table tr:hover {
  background: #f9f9f9;
}

/* Results Metadata */
.results-metadata {
  padding: 1rem;
  background: #f9f9f9;
  border-top: 1px solid #e0e0e0;
}

.results-metadata h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  color: #666;
}

.metadata-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}

.metadata-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.metadata-item strong {
  color: #666;
}

.eu-badge {
  padding: 0.25rem 0.5rem;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 4px;
  font-weight: 500;
}

.non-eu-badge {
  padding: 0.25rem 0.5rem;
  background: #ffebee;
  color: #c62828;
  border-radius: 4px;
  font-weight: 500;
}

/* Query History */
.query-history {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.query-history h4 {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  color: #666;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.history-item {
  padding: 0.75rem;
  background: #f9f9f9;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.history-item:hover {
  background: #e0e0e0;
}

.history-query {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.history-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: #999;
}

.pii-badge {
  padding: 0.125rem 0.5rem;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 4px;
  font-weight: 500;
}

/* Loading & Error States */
.loading {
  padding: 2rem;
  text-align: center;
  color: #666;
}

.error-message {
  padding: 1rem;
  margin: 1rem;
  background: #ffebee;
  border-left: 4px solid #c62828;
  color: #c62828;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 4px;
}

.error-icon {
  font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 768px) {
  .viewer-layout {
    flex-direction: column;
  }

  .schema-browser {
    width: 100%;
    max-height: 300px;
  }

  .metadata-grid {
    grid-template-columns: 1fr;
  }
}
._3_ygE {
  display: table;
  border-bottom: #e6e4e4 1px solid;
  border-top: #e6e4e4 1px solid;
  border-left: #e6e4e4 1px solid;
}

._1nBOt {
  display: table-row;
  list-style: none;
}

._2eZzQ {
  border-right: 1px solid rgb(196, 196, 196);
  opacity: 1;
  margin-left: -2px;
}

._WuQ0f {
  display: table-cell;
  vertical-align: -webkit-baseline-middle;
  vertical-align: middle;
}

._3ZbQT {
  display: table;
  border-bottom: #e6e4e4 1px solid;
  border-left: #e6e4e4 1px solid;
}

._34SS0 {
  display: table-row;
  text-overflow: ellipsis;
}

._34SS0:nth-of-type(even) {
  background-color: #f5f5f5;
}

._3lLk3 {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._nI1Xw {
  display: flex;
}

._2QjE6 {
  color: rgb(86 86 86);
  font-size: 0.6rem;
  padding: 0.15rem 0.2rem 0rem 0.2rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}
._2TfEi {
  font-size: 0.6rem;
  padding-left: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

._3T42e {
  background: #fff;
  padding: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

._29NTg {
  font-size: 12px;
  margin-bottom: 6px;
  color: #666;
}

._25P-K {
  position: absolute;
  display: flex;
  flex-shrink: 0;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

._3gVAq {
  visibility: hidden;
  position: absolute;
  display: flex;
  pointer-events: none;
}

._1eT-t {
  overflow: hidden auto;
  width: 1rem;
  flex-shrink: 0;
  /*firefox*/
  scrollbar-width: thin;
}
._1eT-t::-webkit-scrollbar {
  width: 1.1rem;
  height: 1.1rem;
}
._1eT-t::-webkit-scrollbar-corner {
  background: transparent;
}
._1eT-t::-webkit-scrollbar-thumb {
  border: 6px solid transparent;
  background: rgba(0, 0, 0, 0.2);
  background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
  border-radius: 10px;
  background-clip: padding-box;
}
._1eT-t::-webkit-scrollbar-thumb:hover {
  border: 4px solid transparent;
  background: rgba(0, 0, 0, 0.3);
  background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
  background-clip: padding-box;
}

._2dZTy {
  fill: #fff;
}

._2dZTy:nth-child(even) {
  fill: #f5f5f5;
}

._3rUKi {
  stroke: #ebeff2;
}

._RuwuK {
  stroke: #e6e4e4;
}

._9w8d5 {
  text-anchor: middle;
  fill: #333;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}

._1rLuZ {
  stroke: #e6e4e4;
}

._2q1Kt {
  text-anchor: middle;
  fill: #555;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}

._35nLX {
  fill: #ffffff;
  stroke: #e0e0e0;
  stroke-width: 1.4;
}

._KxSXS {
  cursor: pointer;
  outline: none;
}

._KxSXS:hover ._3w_5u {
  visibility: visible;
  opacity: 1;
}

._3w_5u {
  fill: #ddd;
  cursor: ew-resize;
  opacity: 0;
  visibility: hidden;
}

._31ERP {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  stroke-width: 0;
}

._RRr13 {
  cursor: pointer;
  outline: none;
}

._2P2B1 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

._1KJ6x {
  cursor: pointer;
  outline: none;
}

._2RbVy {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0.6;
}

._2pZMF {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

._3zRJQ {
  fill: #fff;
  text-anchor: middle;
  font-weight: lighter;
  dominant-baseline: central;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}

._3KcaM {
  fill: #555;
  text-anchor: start;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}

._CZjuD {
  overflow: hidden;
  font-size: 0;
  margin: 0;
  padding: 0;
}

._2B2zv {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

._3eULf {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  outline: none;
  position: relative;
}

._2k9Ys {
  overflow: auto;
  max-width: 100%;
  /*firefox*/
  scrollbar-width: thin;
  /*iPad*/
  height: 1.2rem;
}
._2k9Ys::-webkit-scrollbar {
  width: 1.1rem;
  height: 1.1rem;
}
._2k9Ys::-webkit-scrollbar-corner {
  background: transparent;
}
._2k9Ys::-webkit-scrollbar-thumb {
  border: 6px solid transparent;
  background: rgba(0, 0, 0, 0.2);
  background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
  border-radius: 10px;
  background-clip: padding-box;
}
._2k9Ys::-webkit-scrollbar-thumb:hover {
  border: 4px solid transparent;
  background: rgba(0, 0, 0, 0.3);
  background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
  background-clip: padding-box;
}
@media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
}
._19jgW {
  height: 1px;
}
/* ===================================
   ADAPTRIX DIRECTOR CHAT STYLES
   Uses theme variables for light/dark support

   REFACTOR NOTE (2025-11-20):
   - Header controls now use Button component (ui/button.jsx)
   - Right sidebar now uses Card components (ui/card.jsx)
   - Connection status now uses Badge component (ui/badge.jsx)
   - Tip banner uses Alert component (ui/alert.jsx)
   - Many custom CSS classes deprecated in favor of components
   =================================== */

/* Header */
.director-chat-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface));
}

.director-chat-header-icon {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: rgb(var(--color-surface-elevated));
  border: 1px solid rgb(var(--color-border));
}

.director-chat-header-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #10B981; /* Adaptrix green */
}

.director-chat-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(var(--color-text-primary));
}

.director-chat-subtitle {
  font-size: 0.8125rem;
  color: rgb(var(--color-text-secondary));
  font-weight: 400;
}

/* Action Buttons */
.director-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.director-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.director-action-btn-primary {
  background: #047857; /* Adaptrix green */
  color: white;
  border: none;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}

.director-action-btn-primary:hover {
  background: #047857; /* Adaptrix green hover */
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
}

.director-action-btn-secondary {
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-text-primary));
  border: 1.5px solid rgb(var(--color-border));
}

.director-action-btn-secondary:hover {
  border-color: #1E3A8A; /* Adaptrix blue */
  color: #1E3A8A;
  background-color: rgb(var(--color-surface-elevated));
}

/* Message Layout - Claude.ai style */
.director-message-container {
  padding: 1rem 1.5rem;
}

.director-message-content {
  color: rgb(var(--color-text-primary));
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* User message bubble */
.director-user-bubble {
  background: rgb(var(--color-surface-elevated));
  border: 1px solid rgb(var(--color-border));
  border-radius: 1rem;
  padding: 0.75rem 1rem;
}

.director-message-text {
  color: rgb(var(--color-text-primary));
  font-size: 0.9375rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}

/* Markdown rendering inside message bubbles */
.message-text p {
  margin: 0 0 0.5em 0;
}
.message-text p:last-child {
  margin-bottom: 0;
}
.message-text ul,
.message-text ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}
.message-text li {
  margin-bottom: 0.25em;
}
.message-text code {
  background: rgba(var(--color-surface-elevated), 0.5);
  padding: 0.1em 0.3em;
  border-radius: 0.25em;
  font-size: 0.875em;
}
.message-text pre {
  background: rgb(var(--color-surface-elevated));
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  margin: 0.5em 0;
}
.message-text pre code {
  background: none;
  padding: 0;
}
.message-text strong {
  font-weight: 600;
}
.message-text em {
  font-style: italic;
}
.message-text blockquote {
  border-left: 3px solid #10B981;
  padding-left: 1rem;
  margin: 0.5em 0;
  color: rgb(var(--color-text-secondary));
}
.message-text table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5em 0;
}
.message-text th,
.message-text td {
  border: 1px solid rgb(var(--color-border));
  padding: 0.375rem 0.75rem;
  text-align: left;
}
.message-text th {
  background: rgb(var(--color-surface-elevated));
  font-weight: 600;
}
.message-text a {
  color: #10B981;
  text-decoration: underline;
}

.director-message-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: rgb(var(--color-text-tertiary));
}

/* Agent Badge */
.director-agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: #d1fae5; /* Adaptrix green tint */
  border: 1px solid #6ee7b7;
  font-size: 0.75rem;
  font-weight: 600;
  color: #065f46; /* Adaptrix green dark */
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.1);
}

/* Input Area */
.director-input-container {
  position: sticky;
  bottom: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface));
  z-index: var(--z-sticky); /* Use theme variable (1020) instead of hardcoded 50 */
}

.director-input {
  flex: 1;
  background-color: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: rgb(var(--color-text-primary));
  font-size: 0.9375rem;
  transition: all 0.15s ease;
}

.director-input:focus {
  outline: none;
  border-color: #10B981; /* Adaptrix green */
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.director-input::-moz-placeholder {
  color: rgb(var(--color-text-tertiary));
}

.director-input::placeholder {
  color: rgb(var(--color-text-tertiary));
}

.director-input:disabled {
  background-color: rgb(var(--color-surface-elevated));
  cursor: not-allowed;
  opacity: 0.6;
}

.director-send-btn {
  padding: 0.75rem 1rem;
  background: #047857; /* Adaptrix green */
  border: none;
  border-radius: 0.75rem;
  color: white;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}

.director-send-btn:hover:not(:disabled) {
  background: #047857; /* Adaptrix green hover */
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
}

.director-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgb(var(--color-border));
}

.director-input-hint {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: rgb(var(--color-text-tertiary));
  text-align: center;
}

/* Connection Status */
.director-status-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.director-status-connected {
  background: linear-gradient(135deg, rgb(220, 252, 231) 0%, rgb(187, 247, 208) 100%);
  color: rgb(5, 102, 25);
  border: 1px solid rgb(187, 247, 208);
}

.director-status-connecting {
  background: linear-gradient(135deg, rgb(254, 249, 195) 0%, rgb(254, 240, 138) 100%);
  color: rgb(120, 70, 5);
  border: 1px solid rgb(254, 240, 138);
}

.director-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
}

.director-status-dot-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Thinking Process */
.director-thinking-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, rgb(249, 250, 251) 0%, rgb(243, 244, 246) 100%);
  border: 1px solid rgb(229, 231, 235);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(71, 85, 105);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.director-thinking-icon {
  width: 0.875rem;
  height: 0.875rem;
  animation: sparkle 1.5s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.95) rotate(180deg);
  }
}

/* Feedback Button */
.director-feedback-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: white;
  border: 1.5px solid rgb(199, 210, 254);
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(67, 56, 202);
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.08);
}

.director-feedback-btn:hover {
  background: linear-gradient(135deg, rgb(238, 242, 255) 0%, rgb(224, 231, 255) 100%);
  border-color: rgb(165, 180, 252);
  box-shadow: 0 3px 8px rgba(99, 102, 241, 0.15);
  transform: translateY(-1px);
}

/* Sidebar - DEPRECATED (2025-11-20)
 * These classes are no longer used. Right sidebar now uses:
 * - Card components for visual structure (ui/card.jsx)
 * - Tailwind utility classes for layout
 * - See DirectorChat.jsx lines ~2956-3063 for new implementation
 * Keeping these for backwards compatibility only
 */
.director-sidebar {
  /* Deprecated - sidebar now uses flex layout with Card components */
}

.director-sidebar-header {
  /* Deprecated - header now uses flex layout inline */
}

.director-sidebar-title {
  /* Deprecated - title now uses standard Tailwind classes */
}

.director-sidebar-content {
  /* Deprecated - content area now uses Card components with built-in padding */
}

/* Messages Area */
.director-messages-area {
  position: relative; /* Establece contexto de posicionamiento para modales */
  flex: 1;
  overflow-y: auto;
  background: white;
  padding: 1rem 0;
}

/* Loading Spinner */
.director-loader {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Scrollbar Styling */
.director-messages-area::-webkit-scrollbar {
  width: 8px;
}

.director-messages-area::-webkit-scrollbar-track {
  background: transparent;
}

.director-messages-area::-webkit-scrollbar-thumb {
  background: rgb(209, 213, 219);
  border-radius: 4px;
}

.director-messages-area::-webkit-scrollbar-thumb:hover {
  background: rgb(156, 163, 175);
}

/* ========== DIRECTOR-SCOPED MODALS ========== */

/* Modal Portal Container */
#director-modal-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

/* Modal Backdrop */
.director-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 40;
  pointer-events: auto;
  animation: fadeIn 0.2s ease-out;
}

/* Modal Panel - Drawer Style (slides from right) */
.director-modal-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background: white;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  z-index: 50;
  pointer-events: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.director-modal-panel.open {
  transform: translateX(0);
}

/* Modal Panel - Centered Style */
.director-modal-panel-centered {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: auto;
  padding: 1rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Subtle animations for better UX */
@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.director-message-bubble {
  animation: slideInFromBottom 0.3s ease-out;
}

/* Hover effects for better interactivity */
.director-action-btn,
.director-send-btn,
.director-feedback-btn {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.director-action-btn:active {
  transform: translateY(0);
}

/* Card style for special elements */
.director-card {
  background: white;
  border: 1.5px solid rgb(226, 232, 240);
  border-radius: 0.875rem;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.director-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* ===================================================================
   DAY 83: SuperDirector UI Actions Styles
   =================================================================== */

/* Highlight animation for SuperDirector element highlighting */
.superdirector-highlight {
  animation: superdirector-pulse 2s ease-in-out;
  outline: 3px solid #3b82f6;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
}

@keyframes superdirector-pulse {
  0%, 100% {
    outline-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
  }
  50% {
    outline-color: #60a5fa;
    box-shadow: 0 0 0 8px rgba(96, 165, 250, 0.3);
  }
}

/* SuperDirector workflow badge */
.superdirector-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #5145cd 0%, #5a3a7c 100%);
  color: white;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.superdirector-badge::before {
  content: '⚡';
  font-size: 14px;
}

/* ===================================================================
   DAY 146: Z-index Management for UniversalDocumentViewer
   When the viewer is maximized, hide DirectorChat to prevent overlap
   =================================================================== */

body.viewer-maximized .director-chat-header,
body.viewer-maximized .director-input-container,
body.viewer-maximized [class*="director-"] {
  visibility: hidden;
  pointer-events: none;
}

/* Ensure the viewer's maximized state stays on top */
body.viewer-maximized .forensic-viewer.maximized {
  z-index: 10000;
}

/* ===================================================================
   DAY 145: Zero-Latency Semantic Autocomplete
   Popup that appears above the chat input while typing
   =================================================================== */

.autocomplete-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgb(15, 23, 42, 0.98);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(16, 185, 129, 0.1);
  z-index: 1000;
  max-height: 280px;
  overflow: hidden;
  animation: autocomplete-slide-up 0.15s ease-out;
}

@keyframes autocomplete-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.autocomplete-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.2);
}

.autocomplete-hint {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.7);
}

.autocomplete-hint kbd {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 2px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-family: inherit;
  font-size: 9px;
  color: rgba(203, 213, 225, 0.8);
}

.autocomplete-badge {
  font-size: 9px;
  color: rgba(16, 185, 129, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.autocomplete-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 220px;
  overflow-y: auto;
}

.autocomplete-list::-webkit-scrollbar {
  width: 6px;
}

.autocomplete-list::-webkit-scrollbar-track {
  background: transparent;
}

.autocomplete-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.autocomplete-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.1s ease;
  border-left: 2px solid transparent;
}

.autocomplete-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.autocomplete-item-selected {
  background: rgba(16, 185, 129, 0.12);
  border-left-color: #10B981;
}

.autocomplete-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
  flex-shrink: 0;
  min-width: 60px;
  justify-content: center;
  /* Default style for unknown types (general, type, etc.) */
  background: #f1f5f9;
  color: #334155;
  border-color: #94a3b8;
}

.autocomplete-type-table {
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}

.autocomplete-type-column {
  background: #dcfce7;
  color: #14532d;
  border-color: #86efac;
}

.autocomplete-type-value {
  background: #ede9fe;
  color: #4c1d95;
  border-color: #c4b5fd;
}

.autocomplete-type-entity {
  background: #ffedd5;
  color: #78350f;
  border-color: #fdba74;
}

/* Additional types from entity_embeddings */
.autocomplete-type-general {
  background: #ede9fe;
  color: #4c1d95;
  border-color: #c4b5fd;
}

.autocomplete-type-branch {
  background: #fce7f3;
  color: #831843;
  border-color: #f9a8d4;
}

.autocomplete-type-value_mapping {
  background: #ccfbf1;
  color: #134e4a;
  border-color: #5eead4;
}

.autocomplete-item-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #F1F5F9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete-item-qualified {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.5);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete-item-score {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: #10B981;
  font-weight: 500;
}

/* ===================================================================
   2026-02-07: Refactor Parity Styles (DirectorChat.jsx split components)
   These classes are used by src/components/director/*.
   =================================================================== */

/* Journey touchpoint highlight (legacy ui_action highlight_touchpoints) */
.journey-highlight {
  outline: 2px solid rgba(245, 158, 11, 0.9);
  outline-offset: 2px;
  background: rgba(245, 158, 11, 0.10);
  transition: outline-color 0.2s ease, background-color 0.2s ease;
}

/* History drawer (left) */
.director-modal-panel-left {
  left: 0;
  right: auto;
  width: 22rem;
  transform: translateX(-100%);
}

.director-modal-panel-left.open {
  transform: translateX(0);
}

/* Header (refactored) */
.director-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface));
}

.director-header .header-left,
.director-header .header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.director-header .connection-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.director-header .status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: rgb(156, 163, 175);
}

.director-header .status-indicator.connected {
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.director-header .status-indicator.disconnected {
  background: rgb(239, 68, 68);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.director-header .header-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(var(--color-text-primary));
  white-space: nowrap;
}

.director-header .session-info {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: rgb(var(--color-text-tertiary));
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-elevated));
}

/* Messages (refactored) */
.message-list {
  height: 100%;
}

.messages-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.message-wrapper {
  padding: 0 1.25rem;
}

.message-bubble {
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.875rem;
  background: rgb(var(--color-surface));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 0.75rem 0.9rem;
}

.message-bubble.user {
  background: rgb(var(--color-surface-elevated));
}

.message-bubble.error {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.06);
}

.message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.message-role {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(var(--color-text-primary));
}

.message-time {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: rgb(var(--color-text-tertiary));
}

.message-content {
  color: rgb(var(--color-text-primary));
}

.thinking-section {
  margin-top: 0.5rem;
  border-top: 1px solid rgb(var(--color-border));
  padding-top: 0.5rem;
}

.thinking-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgb(var(--color-text-secondary));
  background: transparent;
  border: 0;
  padding: 0.25rem 0;
  cursor: pointer;
}

.message-feedback {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.feedback-btn {
  width: 30px;
  height: 30px;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-elevated));
  color: rgb(var(--color-text-secondary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.feedback-btn:hover {
  background: rgb(var(--color-surface));
  border-color: rgba(16, 185, 129, 0.35);
  color: rgb(var(--color-text-primary));
}

.feedback-btn.active.positive {
  border-color: rgba(16, 185, 129, 0.5);
  background: #ecfdf5;
  color: #064e3b;
}

.feedback-btn.active.negative {
  border-color: rgba(239, 68, 68, 0.5);
  background: #fef2f2;
  color: #7f1d1d;
}

/* Input (refactored) */
.chat-input-area {
  position: sticky;
  bottom: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface));
  z-index: var(--z-sticky);
}

.chat-input-area .input-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-input-area .input-container.drag-over {
  outline: 2px dashed rgba(16, 185, 129, 0.6);
  outline-offset: 6px;
  border-radius: 0.75rem;
}

.chat-input-area .input-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.chat-textarea {
  flex: 1;
  background-color: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: rgb(var(--color-text-primary));
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: none;
  min-height: 42px;
}

.chat-textarea:focus {
  outline: none;
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.file-button,
.analysis-button {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-elevated));
  color: rgb(var(--color-text-primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.file-button:hover,
.analysis-button:hover {
  background: rgb(var(--color-surface));
  border-color: rgba(16, 185, 129, 0.35);
}

.send-button {
  padding: 0.75rem 1rem;
  background: #047857;
  border: none;
  border-radius: 0.75rem;
  color: white;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.send-button:hover:not(:disabled) {
  background: #059669;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgb(var(--color-border));
}

.attached-file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.75rem;
  background: rgb(var(--color-surface-elevated));
}

.attached-file .file-name {
  font-size: 0.8125rem;
  color: rgb(var(--color-text-primary));
}

.attached-file .file-size {
  font-size: 0.75rem;
  color: rgb(var(--color-text-tertiary));
}

.attached-file .remove-file {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface));
  cursor: pointer;
}

.autocomplete-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  max-height: 260px;
  overflow: auto;
  z-index: 1000;
}

.autocomplete-dropdown .autocomplete-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
}

.autocomplete-dropdown .autocomplete-item.selected {
  background: rgba(16, 185, 129, 0.08);
}

.autocomplete-description {
  grid-column: 2 / -1;
  font-size: 0.75rem;
  color: rgb(var(--color-text-tertiary));
}

/* Advanced panel (refactored) */
.advanced-features-panel {
  border-left: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface));
  padding: 0.75rem;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.panel-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.tab-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-elevated));
  padding: 0.35rem 0.55rem;
  border-radius: 0.625rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.tab-button.active {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}
/**
 * HITL Iterative Modification - CSS Styles
 * Day 93+ Phase 4 - Frontend styling for approval modification flow
 *
 * Components styled:
 * - ApprovalModal (tabbed interface)
 * - SQLEditor
 * - ValidationFeedback
 * - ModificationHistory
 */

/* ============================================
   APPROVAL MODAL - TABBED INTERFACE
   ============================================ */

.approval-modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-color, #e5e7eb);
  margin-bottom: 1.5rem;
}

.approval-modal-tab {
  flex: 1;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.approval-modal-tab:hover {
  color: var(--text-primary, #111827);
  background: var(--hover-bg, rgba(59, 130, 246, 0.05));
}

.approval-modal-tab.active {
  color: var(--primary-color, #3b82f6);
  border-bottom-color: var(--primary-color, #3b82f6);
  background: var(--active-tab-bg, rgba(59, 130, 246, 0.1));
}

.approval-modal-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.5rem;
  padding: 0 0.375rem;
  background: var(--badge-bg, #b91c1c);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
}

.approval-modal-tab.active .approval-modal-tab-badge {
  background: var(--primary-color, #1e40af);
}

/* Tab Content Areas */
.approval-modal-tab-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   SQL EDITOR COMPONENT
   ============================================ */

.sql-editor-container {
  margin: 1rem 0;
}

.sql-editor-container label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
}

.sql-editor-container .original-sql-section {
  margin-bottom: 1rem;
}

.sql-editor-container .modified-sql-section {
  position: relative;
}

.sql-editor-container .border {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.sql-editor-container .border:focus-within {
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.editor-help-text {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  font-style: italic;
}

/* ============================================
   VALIDATION FEEDBACK COMPONENT
   ============================================ */

.validation-feedback {
  margin: 1.5rem 0;
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--validation-bg, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
}

.validation-feedback-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-secondary, #6b7280);
}

.validation-feedback-empty svg {
  margin: 0 auto 0.5rem;
  opacity: 0.4;
}

/* Risk Change Alert */
.validation-risk-change {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
}

.validation-risk-change.risk-increased {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #7f1d1d;
}

.validation-risk-change.risk-decreased {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #14532d;
}

.validation-risk-arrow {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Validation Messages */
.validation-messages {
  margin-bottom: 1rem;
}

.validation-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem;
  margin-bottom: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.validation-message:last-child {
  margin-bottom: 0;
}

.validation-message.info {
  background: #dbeafe;
  color: #1e3a8a;
}

.validation-message.warning {
  background: #fef3c7;
  color: #78350f;
}

.validation-message.error {
  background: #fee2e2;
  color: #7f1d1d;
}

.validation-message.success {
  background: #dcfce7;
  color: #14532d;
}

/* Validation Stats */
.validation-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.validation-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--badge-bg, #f3f4f6);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Validation Banners */
.validation-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
}

.validation-banner.auto-execute {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #14532d;
}

.validation-banner.requires-reapproval {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #78350f;
}

/* ============================================
   MODIFICATION HISTORY COMPONENT
   ============================================ */

.modification-history {
  margin: 1rem 0;
}

.modification-history-loading,
.modification-history-empty {
  padding: 2rem 1rem;
}

.modification-history-error {
  padding: 1rem;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 0.5rem;
  color: #7f1d1d;
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 0;
}

.timeline-item {
  position: relative;
  padding-left: 3rem;
  padding-bottom: 1.5rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

/* Timeline marker */
.timeline-item > div:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--timeline-marker-bg, #f3f4f6);
  border: 2px solid var(--border-color, #e5e7eb);
  color: var(--text-secondary, #6b7280);
  z-index: 1;
}

.timeline-item > div:first-child.latest {
  background: var(--primary-color, #1e40af);
  border-color: var(--primary-color, #1e40af);
  color: white;
}

/* Timeline vertical line */
.timeline::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color, #e5e7eb);
}

/* Modification Card */
.modification-card {
  padding: 1rem;
  background: var(--card-bg, white);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.modification-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.modification-card.latest {
  border-color: var(--primary-color, #3b82f6);
  background: rgba(59, 130, 246, 0.02);
}

.modification-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.modification-card-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modification-card-timestamp {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
}

/* Modification Metadata Badges */
.modification-metadata {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.modification-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.modification-badge.diff {
  background: #dbeafe;
  color: #1e3a8a;
}

.modification-badge.type {
  background: #ede9fe;
  color: #4c1d95;
}

.modification-badge.reapproval-required {
  background: #fef3c7;
  color: #78350f;
}

.modification-badge.auto-approved {
  background: #dcfce7;
  color: #14532d;
}

/* ============================================
   APPROVAL MODAL ACTIONS
   ============================================ */

.approval-modal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
}

.approval-modal-actions button {
  flex: 1;
  padding: 0.625rem 1rem;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.2s ease;
}

.approval-modal-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.approval-modal-actions button.primary {
  background: var(--primary-color, #1e40af);
  border-color: var(--primary-color, #1e40af);
  color: white;
}

.approval-modal-actions button.primary:hover:not(:disabled) {
  background: #2563eb;
  border-color: #2563eb;
}

.approval-modal-actions button.secondary {
  background: white;
  border-color: var(--border-color, #e5e7eb);
  color: var(--text-primary, #111827);
}

.approval-modal-actions button.secondary:hover:not(:disabled) {
  background: var(--hover-bg, #f9fafb);
}

.approval-modal-actions button.danger {
  background: #dc2626;
  border-color: #dc2626;
  color: white;
}

.approval-modal-actions button.danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

.approval-modal-actions button.success {
  background: #15803d;
  border-color: #15803d;
  color: white;
}

.approval-modal-actions button.success:hover:not(:disabled) {
  background: #15803d;
  border-color: #15803d;
}

/* ============================================
   CRITICAL OPERATION CONFIRMATION
   ============================================ */

.critical-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  margin: 1rem 0;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.5rem;
}

.critical-confirmation input[type="checkbox"] {
  margin-top: 0.125rem;
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
}

.critical-confirmation label {
  flex: 1;
  font-size: 0.875rem;
  color: #dc2626;
  font-weight: 500;
  cursor: pointer;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  .approval-modal-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .approval-modal-tab {
    flex: 0 0 auto;
    min-width: 120px;
  }

  .approval-modal-actions {
    flex-direction: column;
  }

  .approval-modal-actions button {
    width: 100%;
  }

  .validation-stats {
    flex-direction: column;
  }

  .timeline-item {
    padding-left: 2.5rem;
  }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
  .approval-modal-tabs {
    border-bottom-color: #374151;
  }

  .approval-modal-tab {
    color: #9ca3af;
  }

  .approval-modal-tab:hover {
    color: #e5e7eb;
    background: #1e3a5f;
  }

  .approval-modal-tab.active {
    color: #93c5fd;
    background: #1e3a8a;
  }

  .sql-editor-container .border {
    border-color: #374151;
  }

  .validation-feedback {
    background: #1f2937;
    border-color: #374151;
  }

  .modification-card {
    background: #1f2937;
    border-color: #374151;
  }

  .modification-card.latest {
    background: rgba(59, 130, 246, 0.1);
  }

  .timeline::before {
    background: #374151;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus indicators */
.approval-modal-tab:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--primary-color, #3b82f6);
  outline-offset: 2px;
}

/* Screen reader only content */
.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;
}

/* Loading animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}
/**
 * Notification Panel Styles
 * Sistema de notificaciones para procesamiento de documentos
 */

/* ============================
   Container
   ============================ */
.notification-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ============================
   Bell Button
   ============================ */
.notification-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #6b7280);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notification-bell:hover {
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
  color: var(--accent, #8b5cf6);
}

.notification-bell.active {
  background: var(--bg-secondary, rgba(255, 255, 255, 0.08));
  color: var(--accent, #8b5cf6);
}

.notification-bell.has-processing {
  animation: bell-pulse 2s ease-in-out infinite;
}

@keyframes bell-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ============================
   Badge
   ============================ */
.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--red-500, #b91c1c);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Processing indicator (small dot) */
.notification-processing-indicator {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: var(--blue-500, #3b82f6);
  border-radius: 50%;
  animation: processing-pulse 1.5s ease-in-out infinite;
}

@keyframes processing-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* ============================
   Dropdown Panel
   ============================ */
.notification-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  max-height: 450px;
  background: var(--bg-primary, #1a1a2e);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  z-index: 1000;
  animation: panel-slide-up 0.2s ease-out;
}

@keyframes panel-slide-up {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================
   Header
   ============================ */
.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: var(--bg-secondary, rgba(255, 255, 255, 0.02));
}

.notification-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #ffffff);
}

.notification-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--accent, #6d28d9);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
}

.notification-clear-btn {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-tertiary, #9ca3af);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.notification-clear-btn:hover {
  color: var(--text-primary, #ffffff);
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
}

/* ============================
   List
   ============================ */
.notification-list {
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border, rgba(255, 255, 255, 0.1)) transparent;
}

.notification-list::-webkit-scrollbar {
  width: 6px;
}

.notification-list::-webkit-scrollbar-track {
  background: transparent;
}

.notification-list::-webkit-scrollbar-thumb {
  background: var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 3px;
}

/* ============================
   Empty State
   ============================ */
.notification-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  color: var(--text-tertiary, #6b7280);
  font-size: 14px;
}

/* ============================
   Notification Item
   ============================ */
.notification-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.05));
  transition: background 0.2s;
  cursor: default;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
}

.notification-item.unread {
  background: rgba(139, 92, 246, 0.05);
  border-left: 3px solid var(--accent, #8b5cf6);
  padding-left: 13px;
}

.notification-item.status-completed.unread {
  background: rgba(34, 197, 94, 0.05);
  border-left-color: var(--green-500, #22c55e);
}

.notification-item.status-error.unread {
  background: rgba(239, 68, 68, 0.05);
  border-left-color: var(--red-500, #ef4444);
}

/* ============================
   Item Icon
   ============================ */
.notification-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
  border-radius: 8px;
}

/* ============================
   Item Content
   ============================ */
.notification-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notification-filename {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-primary, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Type badge (UPLOAD / PROFILING) */
.notification-type-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
  color: var(--text-tertiary, #9ca3af);
  border-radius: 4px;
  flex-shrink: 0;
}

.notification-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary, #9ca3af);
}

.notification-status.queued {
  color: var(--text-tertiary, #6b7280);
}

.notification-status.processing {
  color: var(--blue-500, #3b82f6);
}

.notification-status.completed {
  color: var(--green-500, #22c55e);
}

.notification-status.error {
  color: var(--red-500, #ef4444);
}

/* Status text (for profiling jobs without progress bar) */
.notification-status-text {
  font-size: 12px;
  color: var(--blue-500, #3b82f6);
  font-style: italic;
}

/* Progress Bar */
.notification-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
  border-radius: 2px;
  overflow: hidden;
}

.notification-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #8b5cf6), var(--blue-500, #3b82f6));
  border-radius: 2px;
  transition: width 0.3s ease;
}

.notification-time {
  font-size: 11px;
  color: var(--text-tertiary, #6b7280);
}

/* ============================
   Item Actions
   ============================ */
.notification-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.notification-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--accent, #6d28d9);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.notification-view-btn:hover {
  background: var(--accent-hover, #7c3aed);
  transform: translateX(2px);
}

.notification-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-tertiary, #6b7280);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0;
}

.notification-item:hover .notification-dismiss {
  opacity: 1;
}

.notification-dismiss:hover {
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
  color: var(--red-500, #ef4444);
}

/* ============================
   Footer
   ============================ */
.notification-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.02));
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  font-size: 12px;
  color: var(--text-secondary, #9ca3af);
}

/* ============================
   Attachment Preview (for DirectorChat)
   ============================ */
.attachment-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 14px;
}

.attachment-preview .file-icon {
  color: var(--accent, #8b5cf6);
}

.attachment-preview .file-name {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-preview .file-size {
  font-size: 12px;
  color: var(--text-tertiary, #6b7280);
}

.attachment-preview .remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-tertiary, #6b7280);
  cursor: pointer;
  transition: all 0.2s;
}

.attachment-preview .remove-btn:hover {
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
  color: var(--red-500, #ef4444);
}

/* ============================
   Action Buttons (Clip, Bell)
   ============================ */
.director-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  transition: all 0.2s ease;
}

.director-action-btn:hover {
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
  color: var(--accent, #8b5cf6);
}

.director-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================
   Drag & Drop Overlay
   ============================ */
.director-messages.drag-over {
  position: relative;
}

.director-messages.drag-over::after {
  content: '';
  position: absolute;
  inset: 8px;
  background: rgba(139, 92, 246, 0.1);
  border: 2px dashed var(--accent, #8b5cf6);
  border-radius: 12px;
  pointer-events: none;
  z-index: 10;
}

.drag-overlay {
  position: absolute;
  inset: 8px;
  background: rgba(139, 92, 246, 0.15);
  border: 2px dashed var(--accent, #8b5cf6);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 20;
}

.drag-overlay span {
  font-size: 16px;
  font-weight: 500;
  color: var(--accent, #8b5cf6);
}

/* ============================
   Message with Attachment
   ============================ */
.message-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  margin-top: 8px;
  font-size: 13px;
}

.message-attachment .attachment-icon {
  color: var(--accent, #8b5cf6);
}

.message-attachment .attachment-name {
  font-weight: 500;
  color: var(--text-primary, #ffffff);
}

.message-attachment .attachment-size {
  font-size: 11px;
  color: var(--text-tertiary, #6b7280);
}

/* ============================
   Responsive
   ============================ */
@media (max-width: 480px) {
  .notification-panel {
    width: calc(100vw - 32px);
    left: auto;
    right: -8px;
    transform: none;
  }

  .notification-item {
    padding: 12px;
  }

  .notification-view-btn {
    padding: 5px 8px;
    font-size: 11px;
  }
}
.analytics-container {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 20px 0;
}

/* Header */
.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #dee2e6;
}

.analytics-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.5rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.last-updated {
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
}

.refresh-button {
  padding: 8px 16px;
  background: #0056b3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}

.refresh-button:hover:not(:disabled) {
  background: #004085;
}

.refresh-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Overview Cards Grid */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}

.analytics-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  transition: all 0.2s;
}

.analytics-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.analytics-card.highlight {
  border: 2px solid #007bff;
  background: linear-gradient(135deg, #ffffff 0%, #e7f3ff 100%);
}

.card-icon {
  font-size: 2rem;
  line-height: 1;
}

.card-content {
  flex: 1;
}

.card-label {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 5px;
  font-weight: 500;
}

.card-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

/* Analytics Sections */
.analytics-section {
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.analytics-section h4 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
  font-size: 1.2rem;
  padding-bottom: 10px;
  border-bottom: 2px solid #dee2e6;
}

/* Role Distribution */
.role-distribution {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.role-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.role-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.role-emoji {
  font-size: 1.2rem;
}

.role-name {
  flex: 1;
  color: #555;
  text-transform: capitalize;
}

.role-count {
  color: #333;
  font-weight: 600;
}

.role-bar-container {
  width: 100%;
  height: 12px;
  background: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
}

.role-bar {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 6px;
}

.role-bar.role-user {
  background: linear-gradient(90deg, #007bff, #0056b3);
}

.role-bar.role-assistant {
  background: linear-gradient(90deg, #28a745, #218838);
}

.role-bar.role-system {
  background: linear-gradient(90deg, #6c757d, #545b62);
}

.role-percentage {
  text-align: right;
  font-size: 0.85rem;
  color: #666;
  font-weight: 600;
}

/* Token Stats */
.token-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.token-stat-item {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #007bff;
}

.token-stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.token-stat-value {
  font-weight: 700;
  color: #007bff;
}

.token-stat-avg {
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
}

/* Timeline */
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.timeline-item {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.timeline-label {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 8px;
  font-weight: 500;
}

.timeline-value {
  font-size: 1rem;
  color: #333;
  font-weight: 600;
}

/* Metadata */
.metadata-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.metadata-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
}

.metadata-label {
  font-weight: 500;
  color: #555;
  min-width: 120px;
}

.metadata-value {
  color: #333;
}

.metadata-value.monospace {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  background: white;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-badge {
  padding: 4px 12px;
  background: #0056b3;
  color: white;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Footer */
.analytics-footer {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #dee2e6;
}

.analytics-note {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

/* Placeholder States */
.analytics-placeholder,
.analytics-loading,
.analytics-error {
  padding: 60px 20px;
  text-align: center;
  background: white;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.analytics-placeholder p {
  margin: 0;
  font-size: 1.1rem;
  color: #666;
}

.analytics-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.analytics-loading p {
  margin: 0;
  color: #666;
  font-size: 1.1rem;
}

.analytics-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.retry-button {
  padding: 10px 20px;
  background: #0056b3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.retry-button:hover {
  background: #004085;
}

/* Responsive Design */
@media (max-width: 768px) {
  .analytics-container {
    padding: 15px;
  }

  .analytics-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .analytics-card {
    padding: 15px;
  }

  .card-value {
    font-size: 1.5rem;
  }

  .token-stats {
    grid-template-columns: 1fr;
  }

  .timeline-grid {
    grid-template-columns: 1fr;
  }

  .metadata-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .metadata-label {
    min-width: auto;
  }
}

/* Print Styles */
@media print {
  .analytics-container {
    background: white;
  }

  .refresh-button,
  .header-actions {
    display: none;
  }

  .analytics-card {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .analytics-section {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
}

/* Accessibility */
.refresh-button:focus-visible,
.retry-button:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
  .analytics-container {
    background: #1a1a1a;
  }

  .analytics-card,
  .analytics-section {
    background: #2d2d2d;
    border-color: #404040;
  }

  .analytics-header h3,
  .card-value,
  .role-name,
  .timeline-value,
  .metadata-value {
    color: #e0e0e0;
  }

  .card-label,
  .timeline-label,
  .metadata-label,
  .analytics-note {
    color: #b0b0b0;
  }

  .analytics-card.highlight {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a3a52 100%);
    border-color: #0d6efd;
  }
}
.compression-control {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 20px 0;
}

.compression-control h3 {
  margin-top: 0;
  color: #333;
  font-size: 1.5rem;
}

.compression-description {
  color: #666;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-weight: 500;
}

.strategy-select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  background: white;
  cursor: pointer;
}

.strategy-select:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
}

.strategy-description {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

.token-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #ddd;
  outline: none;
  cursor: pointer;
}

.token-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #007bff;
  cursor: pointer;
}

.token-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #007bff;
  cursor: pointer;
  border: none;
}

.token-slider:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 0.85rem;
  color: #666;
}

.compress-button {
  width: 100%;
  padding: 12px;
  background: #0056b3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.compress-button:hover:not(:disabled) {
  background: #0056b3;
}

.compress-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.error-message {
  margin-top: 15px;
  padding: 12px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  color: #721c24;
}

.compression-results {
  margin-top: 25px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.compression-results h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}

.compression-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.stat-item {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-item.highlight {
  background: #e7f3ff;
  border: 2px solid #007bff;
}

.stat-label {
  font-size: 0.9rem;
  color: #666;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.stat-value.compressed {
  color: #28a745;
}

.compressed-text-container {
  margin-top: 20px;
}

.compressed-text-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.compressed-text-header h5 {
  margin: 0;
  color: #555;
}

.copy-button {
  padding: 6px 12px;
  background: #1e7e34;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}

.copy-button:hover {
  background: #155724;
}

.compressed-text {
  padding: 15px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.strategy-info {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #dee2e6;
  color: #666;
}

/* Responsive design */
@media (max-width: 768px) {
  .compression-stats {
    grid-template-columns: 1fr;
  }

  .compression-control {
    padding: 15px;
  }
}
.semantic-search {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 20px 0;
}

.semantic-search h3 {
  margin-top: 0;
  color: #333;
  font-size: 1.5rem;
}

.search-description {
  color: #666;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

/* Search Input Section */
.search-input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  background: white;
}

.search-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.search-input:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
}

.search-button {
  padding: 12px 24px;
  background: #0056b3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.search-button:hover:not(:disabled) {
  background: #004085;
}

.search-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Limit Selector */
.limit-group {
  margin-bottom: 20px;
}

.limit-group label {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-weight: 500;
}

.limit-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #ddd;
  outline: none;
  cursor: pointer;
}

.limit-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #007bff;
  cursor: pointer;
}

.limit-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #007bff;
  cursor: pointer;
  border: none;
}

.limit-slider:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 0.85rem;
  color: #666;
}

/* Error Message */
.error-message {
  margin-top: 15px;
  padding: 12px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  color: #721c24;
}

.error-message strong {
  font-weight: 600;
}

/* Search Results Section */
.search-results {
  margin-top: 25px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #dee2e6;
}

.results-header h4 {
  margin: 0;
  color: #333;
  font-size: 1.2rem;
}

.search-time {
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

/* No Results */
.no-results {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.no-results p:first-child {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 10px;
}

.no-results-hint {
  font-size: 0.9rem;
  color: #999;
  font-style: italic;
}

/* Results List */
.results-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.result-item {
  padding: 15px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.result-item:hover {
  background: #e9ecef;
  border-color: #007bff;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
  transform: translateY(-2px);
}

/* Result Header */
.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.result-role {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  padding: 4px 8px;
  background: white;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.similarity-score {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 4px 10px;
  background: white;
  border-radius: 12px;
  border: 2px solid currentColor;
}

/* Result Content */
.result-content {
  margin: 10px 0;
  padding: 12px;
  background: white;
  border-left: 3px solid #007bff;
  border-radius: 4px;
  line-height: 1.6;
  color: #333;
  font-size: 0.95rem;
}

/* Result Footer */
.result-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #dee2e6;
  font-size: 0.85rem;
  color: #999;
}

.result-timestamp {
  display: flex;
  align-items: center;
  gap: 4px;
}

.result-id {
  font-family: 'Courier New', monospace;
  background: white;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #dee2e6;
  cursor: help;
}

/* Search Hints */
.search-hints {
  margin-top: 25px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.search-hints h5 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  font-size: 1.1rem;
}

.search-hints ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-hints li {
  padding: 10px;
  margin-bottom: 8px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #007bff;
  line-height: 1.5;
  color: #555;
}

.search-hints li:last-child {
  margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .semantic-search {
    padding: 15px;
  }

  .search-input-group {
    flex-direction: column;
  }

  .search-button {
    width: 100%;
  }

  .results-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .result-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .search-hints {
    padding: 15px;
  }
}

/* Loading State */
.search-input:disabled,
.search-button:disabled {
  opacity: 0.6;
}

/* Accessibility */
.search-input:focus-visible,
.search-button:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.result-item:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}
.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}

/* Override default control style */
.mapbox-gl-draw_ctrl-bottom-left,
.mapbox-gl-draw_ctrl-top-left {
  margin-left:0;
  border-radius:0 4px 4px 0;
}
.mapbox-gl-draw_ctrl-top-right,
.mapbox-gl-draw_ctrl-bottom-right {
  margin-right:0;
  border-radius:4px 0 0 4px;
}

.mapbox-gl-draw_ctrl-draw-btn {
  border-color:rgba(0,0,0,0.9);
  color:rgba(255,255,255,0.5);
  width:30px;
  height:30px;
}

.mapbox-gl-draw_ctrl-draw-btn.active,
.mapbox-gl-draw_ctrl-draw-btn.active:hover {
  background-color:rgb(0 0 0/5%);
}
.mapbox-gl-draw_ctrl-draw-btn {
  background-repeat: no-repeat;
  background-position: center;
}

.mapbox-gl-draw_point {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m10 2c-3.3 0-6 2.7-6 6s6 9 6 9 6-5.7 6-9-2.7-6-6-6zm0 2c2.1 0 3.8 1.7 3.8 3.8 0 1.5-1.8 3.9-2.9 5.2h-1.7c-1.1-1.4-2.9-3.8-2.9-5.2-.1-2.1 1.6-3.8 3.7-3.8z"/>%3C/svg>');
}
.mapbox-gl-draw_polygon {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m15 12.3v-4.6c.6-.3 1-1 1-1.7 0-1.1-.9-2-2-2-.7 0-1.4.4-1.7 1h-4.6c-.3-.6-1-1-1.7-1-1.1 0-2 .9-2 2 0 .7.4 1.4 1 1.7v4.6c-.6.3-1 1-1 1.7 0 1.1.9 2 2 2 .7 0 1.4-.4 1.7-1h4.6c.3.6 1 1 1.7 1 1.1 0 2-.9 2-2 0-.7-.4-1.4-1-1.7zm-8-.3v-4l1-1h4l1 1v4l-1 1h-4z"/>%3C/svg>');
}
.mapbox-gl-draw_line {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m13.5 3.5c-1.4 0-2.5 1.1-2.5 2.5 0 .3 0 .6.2.9l-3.8 3.8c-.3-.1-.6-.2-.9-.2-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5c0-.3 0-.6-.2-.9l3.8-3.8c.3.1.6.2.9.2 1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5z"/>%3C/svg>');
}
.mapbox-gl-draw_trash {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M10,3.4 c-0.8,0-1.5,0.5-1.8,1.2H5l-1,1v1h12v-1l-1-1h-3.2C11.5,3.9,10.8,3.4,10,3.4z M5,8v7c0,1,1,2,2,2h6c1,0,2-1,2-2V8h-2v5.5h-1.5V8h-3 v5.5H7V8H5z"/>%3C/svg>');
}
.mapbox-gl-draw_uncombine {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m12 2c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm4 4c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm-7 1c-1 0-1 1-.5 1.5.3.3 1 1 1 1l-1 1s-.5.5 0 1 1 0 1 0l1-1 1 1c.5.5 1.5.5 1.5-.5v-4zm-5 3c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l4.9 4.9c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-4.9-4.9c-.1-.2-.4-.3-.7-.3z"/>%3C/svg>');
}
.mapbox-gl-draw_combine {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M12.1,2c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l4.9,4.9c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-4.9-4.9C12.6,2.1,12.3,2,12.1,2z M8,8C7,8,7,9,7.5,9.5c0.3,0.3,1,1,1,1l-1,1c0,0-0.5,0.5,0,1s1,0,1,0l1-1l1,1 C11,13,12,13,12,12V8H8z M4,10c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1c0.4-0.4,0.4-1,0-1.4 l-1-1C4.5,10.1,4.3,10,4,10z M8,14c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-1-1C8.5,14.1,8.3,14,8,14z"/>%3C/svg>');
}
.mapbox-gl-draw_srmode {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 418.54 418.54" style="enable-background:new 0 0 418.54 418.54;" xml:space="preserve" width="20" height="20">%3Cpath d="M365.566,162.496c0.016-6.432-5.2-11.648-11.648-11.648c-0.912,0-1.792,0.096-2.608,0.304 c-11.952,2.72-22.64,8.752-31.008,17.104c-11.568,11.568-18.72,27.552-18.72,45.2l0.016,16.016l-32.416-32.416 c29.424-49.152,23.136-113.728-19.216-156.08c-49.984-49.984-131.04-49.984-181.024,0V0h-16v68.288h68.192v-16h-40.88 c43.664-43.664,114.72-43.664,158.4,0c35.968,35.968,41.904,90.336,18.624,132.848l-74.416-74.416 c-12.448-12.448-32.816-12.448-45.248,0c-12.448,12.448-12.448,32.816,0,45.248l60.88,60.88c-9.2-0.944-18.72,1.984-25.776,9.024 c-4.864,4.864-7.744,10.928-8.8,17.232c-30.144,1.2-60.688-9.472-83.648-32.432L68.942,222c25.04,25.04,57.856,37.264,90.672,37.2 l-16.272,61.008c-2.816,10.64-0.096,22.432,8.224,30.768l37.216,37.216c40.464,40.464,106.032,40.464,146.496,0 c19.6-19.6,29.6-45.088,30.208-70.752l0.112,0.096v-2.512c0-0.048,0-0.096,0-0.112L365.566,162.496z"/>%3C/svg>');
}


.maplibregl-map.mouse-pointer .maplibregl-canvas-container.maplibregl-interactive {
  cursor: pointer;
}
.maplibregl-map.mouse-move .maplibregl-canvas-container.maplibregl-interactive {
  cursor: move;
}
.maplibregl-map.mouse-add .maplibregl-canvas-container.maplibregl-interactive {
  cursor: crosshair;
}
.maplibregl-map.mouse-move.mode-direct_select .maplibregl-canvas-container.maplibregl-interactive {
  cursor: grab;
  cursor: -webkit-grab;
}
.maplibregl-map.mode-direct_select.feature-vertex.mouse-move .maplibregl-canvas-container.maplibregl-interactive {
  cursor: move;
}
.maplibregl-map.mode-direct_select.feature-midpoint.mouse-pointer .maplibregl-canvas-container.maplibregl-interactive {
  cursor: cell;
}
.maplibregl-map.mode-direct_select.feature-feature.mouse-move .maplibregl-canvas-container.maplibregl-interactive {
  cursor: move;
}
.maplibregl-map.mode-static.mouse-pointer  .maplibregl-canvas-container.maplibregl-interactive {
  cursor: grab;
  cursor: -webkit-grab;
}

.mapbox-gl-draw_boxselect {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: rgba(0,0,0,.1);
    border: 2px dotted #fff;
    opacity: 0.5;
}
.map-container {
 position: relative;
 width: 100%;
 height: 100vh;
 background: rgb(var(--color-background)); /* Theme-aware background */
} 
 
.map { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 /* Remove all decorative properties that might interfere */ 
} 
 
/* Map Controls Panel */
.map-controls {
 position: absolute;
 top: 80px; /* Moved down to avoid navigation overlap */
 left: 20px;
 background: rgba(var(--color-surface-elevated), 0.95);
 backdrop-filter: blur(20px);
 border-radius: 16px;
 border: 1px solid rgb(var(--color-border-muted));
 box-shadow: var(--shadow-lg);
 padding: 16px;
 min-width: 200px;
 max-width: 250px;
 z-index: 999; /* Lower z-index to avoid conflicts */
} 
 
.control-group { 
 margin-bottom: 16px; 
} 
 
.control-group h3 {
 margin: 0 0 12px 0;
 font-size: 14px;
 font-weight: 600;
 color: rgb(var(--color-text-primary));
 display: flex;
 align-items: center;
 gap: 6px;
} 
 
.control-item { 
 display: flex; 
 align-items: center; 
 margin-bottom: 8px; 
 cursor: pointer; 
} 
 
.control-item label {
 display: flex;
 align-items: center;
 cursor: pointer;
 font-size: 13px;
 color: rgb(var(--color-text-secondary));
} 
 
.control-item input[type="checkbox"] { 
 margin-right: 8px; 
 cursor: pointer; 
} 
 
.layer-icon {
 display: inline-flex;
 margin-right: 6px;
 color: rgb(var(--color-text-tertiary));
} 
 
.control-divider {
 height: 1px;
 background: rgb(var(--color-border-muted));
 margin: 12px 0;
} 
 
.control-button {
 display: flex;
 align-items: center;
 gap: 6px;
 width: 100%;
 padding: 8px 12px;
 margin-bottom: 8px;
 background: rgba(var(--color-surface), 0.8);
 border: 1px solid rgb(var(--color-border));
 border-radius: 8px;
 font-size: 13px;
 color: rgb(var(--color-text-secondary));
 cursor: pointer;
 transition: all 0.2s;
 backdrop-filter: blur(10px);
} 
 
.control-button:hover {
 background: rgba(var(--color-surface-hover), 0.9);
 border-color: rgb(var(--color-border-hover));
 color: rgb(var(--color-text-primary));
} 
 
.control-button.active {
 background: rgba(var(--color-primary), 0.8);
 color: white;
 border-color: rgb(var(--color-primary));
 box-shadow: 0 0 12px rgba(var(--color-primary), 0.4);
} 
 
/* AOI Manager Panel */ 
.aoi-manager { 
 position: absolute; 
 top: 80px; /* Moved down to avoid navigation overlap */ 
 right: 20px; 
 background: rgba(15, 23, 42, 0.95); 
 backdrop-filter: blur(20px); 
 border-radius: 16px; 
 border: 1px solid rgba(255, 255, 255, 0.1); 
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); 
 padding: 16px; 
 width: 300px; 
 max-height: 500px; 
 overflow-y: auto; 
 z-index: 999; /* Lower z-index to avoid conflicts */ 
} 
 
.aoi-manager.empty { 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: center; 
 padding: 24px; 
 color: rgba(255, 255, 255, 0.6); 
 text-align: center; 
} 
 
.aoi-manager h3 { 
 margin: 0 0 16px 0; 
 font-size: 16px; 
 font-weight: 600; 
 color: rgba(255, 255, 255, 0.9); 
} 
 
.aoi-stats { 
 background: rgba(255, 255, 255, 0.05); 
 border-radius: 8px; 
 border: 1px solid rgba(255, 255, 255, 0.1); 
 padding: 12px; 
 margin-bottom: 16px; 
} 
 
.stat-item { 
 display: flex; 
 justify-content: space-between; 
 align-items: center; 
 margin-bottom: 8px; 
 font-size: 13px; 
} 
 
.stat-item:last-child { 
 margin-bottom: 0; 
} 
 
.stat-item label { 
 color: rgba(255, 255, 255, 0.7); 
 font-weight: 500; 
} 
 
.stat-item span { 
 color: rgba(255, 255, 255, 0.9); 
 font-weight: 600; 
} 
 
.time-range { 
 font-size: 11px; 
} 
 
.stat-item.categories { 
 flex-direction: column; 
 align-items: flex-start; 
} 
 
.category-tags { 
 display: flex; 
 flex-wrap: wrap; 
 gap: 4px; 
 margin-top: 4px; 
} 
 
.category-tag {
 background: rgb(var(--color-primary-light));
 color: rgb(var(--color-primary));
 padding: 2px 8px;
 border-radius: 12px;
 font-size: 11px;
} 
 
.aoi-actions { 
 display: flex; 
 flex-direction: column; 
 gap: 12px; 
} 
 
.aoi-input,
.aoi-textarea {
 width: 100%;
 padding: 8px 12px;
 border: 1px solid rgba(255, 255, 255, 0.3);
 border-radius: 8px;
 font-size: 13px;
 background: rgba(0, 0, 0, 0.7);
 color: rgba(255, 255, 255, 1);
 backdrop-filter: blur(10px);
} 
 
.aoi-input::-moz-placeholder, .aoi-textarea::-moz-placeholder { 
 color: rgba(255, 255, 255, 0.5); 
} 
 
.aoi-input::placeholder, 
.aoi-textarea::placeholder { 
 color: rgba(255, 255, 255, 0.5); 
} 
 
.aoi-textarea { 
 resize: vertical; 
 min-height: 50px; 
} 
 
.aoi-buttons { 
 display: flex; 
 gap: 8px; 
} 
 
.btn { 
 display: flex; 
 align-items: center; 
 gap: 4px; 
 padding: 8px 12px; 
 border: 1px solid rgba(255, 255, 255, 0.2); 
 border-radius: 8px; 
 font-size: 13px; 
 cursor: pointer; 
 transition: all 0.2s; 
 backdrop-filter: blur(10px); 
} 
 
.btn-primary { 
 background: rgba(var(--color-info), 0.8); 
 color: white; 
} 
 
.btn-primary:hover { 
 background: rgba(var(--color-info), 0.9); 
 box-shadow: 0 0 12px rgba(var(--color-info), 0.4); 
} 
 
.btn-secondary { 
 background: rgba(107, 114, 128, 0.8); 
 color: white; 
} 
 
.btn-secondary:hover { 
 background: rgba(107, 114, 128, 0.9); 
 box-shadow: 0 0 12px rgba(107, 114, 128, 0.4); 
} 
 
.btn-danger { 
 background: rgba(var(--color-error), 0.8); 
 color: white; 
} 
 
.btn-danger:hover { 
 background: rgba(var(--color-error), 0.9); 
 box-shadow: 0 0 12px rgba(var(--color-error), 0.4); 
} 
 
.btn:disabled { 
 opacity: 0.5; 
 cursor: not-allowed; 
} 
 
/* Choropleth Legend */ 
.choropleth-legend { 
 position: absolute; 
 bottom: 20px; 
 left: 20px; 
 background: rgba(15, 23, 42, 0.95); 
 backdrop-filter: blur(20px); 
 border-radius: 12px; 
 border: 1px solid rgba(255, 255, 255, 0.1); 
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); 
 padding: 12px; 
 z-index: 1000; 
} 
 
.choropleth-legend h4 { 
 margin: 0 0 8px 0; 
 font-size: 13px; 
 font-weight: 600; 
 color: rgba(255, 255, 255, 0.9); 
} 
 
.legend-item { 
 display: flex; 
 align-items: center; 
 gap: 8px; 
 margin-bottom: 4px; 
 font-size: 12px; 
} 
 
.legend-color { 
 width: 20px; 
 height: 12px; 
 border: 1px solid rgb(var(--color-border)); 
 border-radius: 2px; 
} 
 
.legend-label { 
 color: rgba(255, 255, 255, 0.7); 
} 
 
/* MapLibre overrides */ 
.maplibregl-popup-content { 
 padding: 8px 12px; 
 font-size: 12px; 
 min-width: 120px; 
} 
 
.maplibregl-popup-content strong { 
 display: block; 
 margin-bottom: 4px; 
 color: rgb(var(--color-surface)); 
} 
 
.maplibregl-ctrl-group { 
 background: white; 
 border-radius: 4px; 
} 
 
/* Draw controls style */ 
.mapbox-gl-draw_ctrl-draw-btn { 
 background-color: white; 
 border: none; 
} 
 
.mapbox-gl-draw_ctrl-draw-btn.active { 
 background-color: rgb(var(--color-info)); 
} 
 
/* Loading spinner styles */ 
.map-loading { 
 position: absolute; 
 top: 50%; 
 left: 50%; 
 transform: translate(-50%, -50%); 
 text-align: center; 
 color: rgba(255, 255, 255, 0.9); 
 z-index: 10000; 
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
} 
 
.loading-spinner { 
 width: 40px; 
 height: 40px; 
 border: 3px solid rgba(255, 255, 255, 0.3); 
 border-top: 3px solid rgb(var(--color-info)); 
 border-radius: 50%; 
 animation: spin 1s linear infinite; 
 margin: 0 auto 16px auto; 
} 
 
@keyframes spin { 
 0% { transform: rotate(0deg); } 
 100% { transform: rotate(360deg); } 
} 
 
/* Responsive adjustments */ 
@media (max-width: 768px) { 
 .map-controls { 
 top: 10px; 
 left: 10px; 
 min-width: 160px; 
 } 
 
 .aoi-manager { 
 width: 250px; 
 top: auto; 
 bottom: 20px; 
 right: 10px; 
 } 
 
 .choropleth-legend { 
 bottom: auto; 
 top: 10px; 
 right: 10px; 
 left: auto; 
 } 
}/*
 * react-circular-progressbar styles
 * All of the styles in this file are configurable!
 */

.CircularProgressbar {
  /*
   * This fixes an issue where the CircularProgressbar svg has
   * 0 width inside a "display: flex" container, and thus not visible.
   */
  width: 100%;
  /*
   * This fixes a centering issue with CircularProgressbarWithChildren:
   * https://github.com/kevinsqi/react-circular-progressbar/issues/94
   */
  vertical-align: middle;
}

.CircularProgressbar .CircularProgressbar-path {
  stroke: #3e98c7;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease 0s;
}

.CircularProgressbar .CircularProgressbar-trail {
  stroke: #d6d6d6;
  /* Used when trail is not full diameter, i.e. when props.circleRatio is set */
  stroke-linecap: round;
}

.CircularProgressbar .CircularProgressbar-text {
  fill: #3e98c7;
  font-size: 20px;
  dominant-baseline: middle;
  text-anchor: middle;
}

.CircularProgressbar .CircularProgressbar-background {
  fill: #d6d6d6;
}

/*
 * Sample background styles. Use these with e.g.:
 *
 *   <CircularProgressbar
 *     className="CircularProgressbar-inverted"
 *     background
 *     percentage={50}
 *   />
 */
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
  fill: #3e98c7;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
  fill: #fff;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
  stroke: #fff;
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
  stroke: transparent;
}
/* Security Components Styles */

/* SecurityBadgeBar */
.security-badge-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 0;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  min-width: 120px;
}

.badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.badge-green {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  color: white;
}

.badge-blue {
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
  color: white;
}

.badge-orange {
  background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
  color: white;
}

.badge-red {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
  color: white;
}

.badge-label {
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.badge-status {
  font-size: 0.75rem;
  opacity: 0.9;
}

/* SecurityScoreWidget */
.security-score-widget {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 400px;
}

.widget-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #1f2937;
}

.circular-score {
  width: 200px;
  height: 200px;
  margin: 0 auto 2rem;
}

.compliance-breakdown {
  margin-bottom: 2rem;
}

.breakdown-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #374151;
}

.compliance-bar {
  margin-bottom: 1rem;
}

.compliance-bar-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.compliance-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563;
}

.compliance-percentage {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
}

.compliance-bar-track {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.compliance-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.security-status {
  border-top: 1px solid #e5e7eb;
  padding-top: 1rem;
}

.status-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: #4b5563;
}

.status-icon {
  margin-right: 0.5rem;
  font-size: 1.25rem;
}

/* TrustCenter */
.trust-center {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.trust-center-header {
  text-align: center;
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.page-subtitle {
  font-size: 1.125rem;
  color: #6b7280;
}

.trust-center-tabs {
  display: flex;
  gap: 1rem;
  margin: 2rem 0;
  border-bottom: 2px solid #e5e7eb;
  overflow-x: auto;
}

.tab-button {
  padding: 0.75rem 1.5rem;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}

.tab-button:hover {
  color: #3b82f6;
}

.tab-button.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}

.trust-center-content {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  min-height: 500px;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: #6b7280;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.markdown-content {
  line-height: 1.75;
  color: #374151;
}

.markdown-content h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
  color: #1f2937;
}

.markdown-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
  color: #1f2937;
}

.markdown-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
  color: #374151;
}

.markdown-content p {
  margin-bottom: 1rem;
}

.markdown-content ul, .markdown-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.markdown-content code {
  background: #f3f4f6;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.trust-center-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  padding: 2rem;
  background: #f9fafb;
  border-radius: 0.75rem;
}

.footer-section h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.footer-section p {
  font-size: 0.875rem;
  color: #6b7280;
}

.footer-section a {
  color: #3b82f6;
  text-decoration: none;
}

.footer-section a:hover {
  text-decoration: underline;
}

/* ComplianceProgressCard */
.compliance-progress-card {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #1f2937;
}

.certifications-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.certification-item {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1.25rem;
  transition: box-shadow 0.2s;
}

.certification-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cert-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.cert-name-wrapper {
  flex: 1;
}

.cert-name {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.cert-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-green {
  background: #d1fae5;
  color: #065f46;
}

.status-blue {
  background: #dbeafe;
  color: #1e40af;
}

.status-orange {
  background: #fed7aa;
  color: #92400e;
}

.cert-percentage {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
}

.progress-bar-wrapper {
  margin-bottom: 0.75rem;
}

.progress-bar-track {
  height: 12px;
  background: #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
  position: relative;
}

.progress-green {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.progress-blue {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}

.progress-orange {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.progress-bar-label {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: white;
  font-weight: 600;
}

.cert-details {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: #6b7280;
}

.detail-item {
  display: flex;
  align-items: center;
}

.card-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.footer-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stat-icon {
  font-size: 2rem;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
}

.stat-label {
  font-size: 0.75rem;
  color: #6b7280;
}

/* GDPRPortal */
.gdpr-portal {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.portal-header {
  text-align: center;
  margin-bottom: 2rem;
}

.gdpr-info-banner {
  display: flex;
  gap: 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.banner-icon {
  font-size: 2rem;
}

.banner-content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1e40af;
}

.banner-content p {
  font-size: 0.875rem;
  color: #1e40af;
  line-height: 1.5;
}

.data-rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.data-right-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s;
}

.data-right-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.right-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.right-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #1f2937;
}

.right-description {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.right-action-button {
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.right-action-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.right-action-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.status-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.status-loading {
  background: #eff6ff;
  border: 1px solid #3b82f6;
}

.status-success {
  background: #d1fae5;
  border: 1px solid #10b981;
}

.status-error {
  background: #fee2e2;
  border: 1px solid #ef4444;
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.notification-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #bfdbfe;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.notification-icon {
  font-size: 1.25rem;
}

.gdpr-compliance-info {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.gdpr-compliance-info h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #1f2937;
}

.compliance-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
}

.features-list {
  margin-top: 2rem;
}

.features-list h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #1f2937;
}

.features-list ul {
  list-style: none;
  padding: 0;
}

.features-list li {
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: #374151;
}

.contact-section {
  background: #f9fafb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
}

.contact-section h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #1f2937;
}

.contact-section p {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.contact-section a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}

.contact-section a:hover {
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
  .security-badge-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .badge {
    min-width: auto;
  }

  .trust-center {
    padding: 1rem;
  }

  .page-title {
    font-size: 2rem;
  }

  .trust-center-tabs {
    flex-direction: column;
    border-bottom: none;
  }

  .tab-button {
    border-bottom: none;
    border-left: 3px solid transparent;
  }

  .tab-button.active {
    border-left-color: #3b82f6;
    border-bottom-color: transparent;
  }

  .data-rights-grid {
    grid-template-columns: 1fr;
  }

  .card-footer {
    grid-template-columns: 1fr;
  }

  .compliance-stats {
    grid-template-columns: 1fr 1fr;
  }

  .trust-center-footer {
    grid-template-columns: 1fr;
  }

  .status-notification {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
}

/* Loading and Error States */
.security-score-widget.loading,
.compliance-progress-card.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.security-score-widget.error {
  background: #fee2e2;
  border: 1px solid #ef4444;
  color: #991b1b;
  text-align: center;
}



/* Import Google Fonts */
/* V3 Design System - Premium Glassmorphism UI */
/* V3 Base Styles - Placeholder */
/* This file was missing and causing Storybook to fail */
/* Add V3 base styles here if needed */
/* Button reset for S6819 accessibility compliance */
/* Button Reset - Makes <button> behave like <div> for accessibility compliance
 *
 * Purpose: Fix SonarQube S6819 violations by replacing role="button" with native <button>
 * while preserving exact visual appearance and layout behavior.
 *
 * This reset removes browser default button styles that would otherwise break
 * the existing Tailwind-based designs.
 */
*, ::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.19 | 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 */
  -o-tab-size: 4;
     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]) {
  -webkit-text-decoration: underline dotted;
          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::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
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;
}
button {
    /* Remove all browser default styling */
    background: none;
    border: none;
    padding: 0;
    margin: 0;

    /* Inherit typography from parent */
    font: inherit;
    color: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: inherit;

    /* Layout behavior like div */
    display: inline-flex;
    align-items: center;

    /* Interaction states */
    cursor: pointer;
    outline: inherit;

    /* Remove native appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
/* Accessibility: visible focus indicator */
button:focus-visible {
    outline: 2px solid hsl(var(--accent));
    outline-offset: 2px;
  }
/* Disabled state (if ever used) */
button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
html{
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth; /* Adaptrix website - smooth scrolling */
}
body {
    font-family: var(--font-professional); /* Use Inter font from Adaptrix website */ --tw-bg-opacity: 1; background-color: rgb(var(--color-background) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--color-text-primary) / var(--tw-text-opacity, 1));
    font-weight: 400;
    letter-spacing: 0.01em; /* Slightly tighter for Inter */
    overflow-x: hidden;
    font-feature-settings: "rlig" 1, "calt" 1; /* Professional font features */
  }
.\!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;
  }
}
/* KPI Dashboard unified input/select styles */
/* Text styles */
/* Adaptrix website gradient text - Blue to Green */
/* Container - Adaptrix website pattern */
.\!container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 80rem !important; /* 1280px */
  }
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 80rem; /* 1280px */
  }
@media (min-width: 640px) {
    .\!container {
      padding-left: 1.5rem !important;
      padding-right: 1.5rem !important;
    }
    .container {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }
@media (min-width: 1024px) {
    .\!container {
      padding-left: 2rem !important;
      padding-right: 2rem !important;
    }
    .container {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }
/* Section spacing - Adaptrix website pattern */
.section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
@media (min-width: 768px) {
    .section {
      padding-top: 6rem;
      padding-bottom: 6rem;
    }
  }
.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 !important;
}
.visible{
  visibility: visible;
}
.invisible{
  visibility: hidden;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.-inset-1{
  inset: calc(var(--space-1) * -1);
}
.inset-0{
  inset: 0px;
}
.inset-8{
  inset: var(--space-8);
}
.inset-y-0{
  top: 0px;
  bottom: 0px;
}
.-left-\[7px\]{
  left: -7px;
}
.-right-1{
  right: calc(var(--space-1) * -1);
}
.-top-1{
  top: calc(var(--space-1) * -1);
}
.-top-2{
  top: calc(var(--space-2) * -1);
}
.-top-3{
  top: calc(var(--space-3) * -1);
}
.-top-8{
  top: calc(var(--space-8) * -1);
}
.bottom-0{
  bottom: 0px;
}
.bottom-1\/4{
  bottom: 25%;
}
.bottom-2{
  bottom: var(--space-2);
}
.bottom-3{
  bottom: var(--space-3);
}
.bottom-32{
  bottom: 8rem;
}
.bottom-4{
  bottom: var(--space-4);
}
.bottom-6{
  bottom: var(--space-6);
}
.bottom-8{
  bottom: var(--space-8);
}
.bottom-\[-10\%\]{
  bottom: -10%;
}
.bottom-full{
  bottom: 100%;
}
.left-0{
  left: 0px;
}
.left-0\.5{
  left: 0.125rem;
}
.left-1\/2{
  left: 50%;
}
.left-1\/4{
  left: 25%;
}
.left-2{
  left: var(--space-2);
}
.left-3{
  left: var(--space-3);
}
.left-4{
  left: var(--space-4);
}
.left-\[-10\%\]{
  left: -10%;
}
.left-\[20\%\]{
  left: 20%;
}
.left-\[5px\]{
  left: 5px;
}
.left-full{
  left: 100%;
}
.right-0{
  right: 0px;
}
.right-1\/4{
  right: 25%;
}
.right-2{
  right: var(--space-2);
}
.right-3{
  right: var(--space-3);
}
.right-4{
  right: var(--space-4);
}
.right-6{
  right: var(--space-6);
}
.right-8{
  right: var(--space-8);
}
.right-\[-10\%\]{
  right: -10%;
}
.right-full{
  right: 100%;
}
.top-0{
  top: 0px;
}
.top-0\.5{
  top: 0.125rem;
}
.top-1{
  top: var(--space-1);
}
.top-1\.5{
  top: 0.375rem;
}
.top-1\/2{
  top: 50%;
}
.top-1\/4{
  top: 25%;
}
.top-10{
  top: var(--space-10);
}
.top-16{
  top: var(--space-16);
}
.top-2{
  top: var(--space-2);
}
.top-2\.5{
  top: 0.625rem;
}
.top-20{
  top: 5rem;
}
.top-3{
  top: var(--space-3);
}
.top-4{
  top: var(--space-4);
}
.top-\[-10\%\]{
  top: -10%;
}
.top-\[20\%\]{
  top: 20%;
}
.top-full{
  top: 100%;
}
.-z-dropdown{
  z-index: calc(var(--z-dropdown) * -1);
}
.-z-fixed{
  z-index: calc(var(--z-fixed) * -1);
}
.-z-modal{
  z-index: calc(var(--z-modal) * -1);
}
.-z-modal-backdrop{
  z-index: calc(var(--z-modal-backdrop) * -1);
}
.-z-popover{
  z-index: calc(var(--z-popover) * -1);
}
.-z-sticky{
  z-index: calc(var(--z-sticky) * -1);
}
.-z-tooltip{
  z-index: calc(var(--z-tooltip) * -1);
}
.z-0{
  z-index: 0;
}
.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-\[100\]{
  z-index: 100;
}
.z-\[101\]{
  z-index: 101;
}
.z-\[200\]{
  z-index: 200;
}
.z-\[90\]{
  z-index: 90;
}
.z-\[9998\]{
  z-index: 9998;
}
.z-\[9999\]{
  z-index: 9999;
}
.col-span-12{
  grid-column: span 12 / span 12;
}
.col-span-2{
  grid-column: span 2 / span 2;
}
.col-span-3{
  grid-column: span 3 / span 3;
}
.col-span-4{
  grid-column: span 4 / span 4;
}
.col-span-9{
  grid-column: span 9 / span 9;
}
.m-0{
  margin: 0px;
}
.m-4{
  margin: var(--space-4);
}
.m-6{
  margin: var(--space-6);
}
.-mx-4{
  margin-left: calc(var(--space-4) * -1);
  margin-right: calc(var(--space-4) * -1);
}
.mx-0\.5{
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1{
  margin-left: var(--space-1);
  margin-right: var(--space-1);
}
.mx-2{
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}
.mx-4{
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}
.mx-6{
  margin-left: var(--space-6);
  margin-right: var(--space-6);
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-1{
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}
.my-12{
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
}
.my-3{
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}
.my-4{
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}
.-mb-1{
  margin-bottom: calc(var(--space-1) * -1);
}
.-ml-0\.5{
  margin-left: -0.125rem;
}
.-mt-1{
  margin-top: calc(var(--space-1) * -1);
}
.-mt-2{
  margin-top: calc(var(--space-2) * -1);
}
.mb-1{
  margin-bottom: var(--space-1);
}
.mb-1\.5{
  margin-bottom: 0.375rem;
}
.mb-10{
  margin-bottom: var(--space-10);
}
.mb-12{
  margin-bottom: var(--space-12);
}
.mb-2{
  margin-bottom: var(--space-2);
}
.mb-3{
  margin-bottom: var(--space-3);
}
.mb-4{
  margin-bottom: var(--space-4);
}
.mb-5{
  margin-bottom: var(--space-5);
}
.mb-6{
  margin-bottom: var(--space-6);
}
.mb-8{
  margin-bottom: var(--space-8);
}
.ml-0\.5{
  margin-left: 0.125rem;
}
.ml-1{
  margin-left: var(--space-1);
}
.ml-1\.5{
  margin-left: 0.375rem;
}
.ml-12{
  margin-left: var(--space-12);
}
.ml-16{
  margin-left: var(--space-16);
}
.ml-2{
  margin-left: var(--space-2);
}
.ml-3{
  margin-left: var(--space-3);
}
.ml-4{
  margin-left: var(--space-4);
}
.ml-5{
  margin-left: var(--space-5);
}
.ml-6{
  margin-left: var(--space-6);
}
.ml-7{
  margin-left: 1.75rem;
}
.ml-8{
  margin-left: var(--space-8);
}
.ml-9{
  margin-left: 2.25rem;
}
.ml-auto{
  margin-left: auto;
}
.mr-1{
  margin-right: var(--space-1);
}
.mr-2{
  margin-right: var(--space-2);
}
.mr-3{
  margin-right: var(--space-3);
}
.mr-4{
  margin-right: var(--space-4);
}
.mt-0{
  margin-top: 0px;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: var(--space-1);
}
.mt-1\.5{
  margin-top: 0.375rem;
}
.mt-12{
  margin-top: var(--space-12);
}
.mt-2{
  margin-top: var(--space-2);
}
.mt-3{
  margin-top: var(--space-3);
}
.mt-4{
  margin-top: var(--space-4);
}
.mt-5{
  margin-top: var(--space-5);
}
.mt-6{
  margin-top: var(--space-6);
}
.mt-8{
  margin-top: var(--space-8);
}
.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.\!inline{
  display: inline !important;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.\!table{
  display: table !important;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.contents{
  display: contents;
}
.hidden{
  display: none;
}
.aspect-video{
  aspect-ratio: 16 / 9;
}
.h-0\.5{
  height: 0.125rem;
}
.h-1{
  height: var(--space-1);
}
.h-1\.5{
  height: 0.375rem;
}
.h-10{
  height: var(--space-10);
}
.h-12{
  height: var(--space-12);
}
.h-14{
  height: 3.5rem;
}
.h-16{
  height: var(--space-16);
}
.h-2{
  height: var(--space-2);
}
.h-2\.5{
  height: 0.625rem;
}
.h-20{
  height: 5rem;
}
.h-24{
  height: 6rem;
}
.h-3{
  height: var(--space-3);
}
.h-3\.5{
  height: 0.875rem;
}
.h-32{
  height: 8rem;
}
.h-4{
  height: var(--space-4);
}
.h-40{
  height: 10rem;
}
.h-48{
  height: 12rem;
}
.h-5{
  height: var(--space-5);
}
.h-56{
  height: 14rem;
}
.h-6{
  height: var(--space-6);
}
.h-64{
  height: 16rem;
}
.h-7{
  height: 1.75rem;
}
.h-8{
  height: var(--space-8);
}
.h-9{
  height: 2.25rem;
}
.h-96{
  height: 24rem;
}
.h-\[180px\]{
  height: 180px;
}
.h-\[18px\]{
  height: 18px;
}
.h-\[1px\]{
  height: 1px;
}
.h-\[250px\]{
  height: 250px;
}
.h-\[2px\]{
  height: 2px;
}
.h-\[420px\]{
  height: 420px;
}
.h-\[50\%\]{
  height: 50%;
}
.h-\[500px\]{
  height: 500px;
}
.h-\[540px\]{
  height: 540px;
}
.h-\[60\%\]{
  height: 60%;
}
.h-\[600px\]{
  height: 600px;
}
.h-\[650px\]{
  height: 650px;
}
.h-\[800px\]{
  height: 800px;
}
.h-\[90vh\]{
  height: 90vh;
}
.h-\[calc\(100\%-3rem\)\]{
  height: calc(100% - 3rem);
}
.h-\[calc\(100\%-4rem\)\]{
  height: calc(100% - 4rem);
}
.h-\[calc\(100\%-5rem\)\]{
  height: calc(100% - 5rem);
}
.h-\[calc\(100\%-6rem\)\]{
  height: calc(100% - 6rem);
}
.h-\[calc\(100\%-80px\)\]{
  height: calc(100% - 80px);
}
.h-\[calc\(100vh-12rem\)\]{
  height: calc(100vh - 12rem);
}
.h-\[calc\(100vh-80px\)\]{
  height: calc(100vh - 80px);
}
.h-\[calc\(100vh-8rem\)\]{
  height: calc(100vh - 8rem);
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.h-screen{
  height: 100vh;
}
.max-h-20{
  max-height: 5rem;
}
.max-h-32{
  max-height: 8rem;
}
.max-h-40{
  max-height: 10rem;
}
.max-h-48{
  max-height: 12rem;
}
.max-h-60{
  max-height: 15rem;
}
.max-h-64{
  max-height: 16rem;
}
.max-h-80{
  max-height: 20rem;
}
.max-h-96{
  max-height: 24rem;
}
.max-h-\[250px\]{
  max-height: 250px;
}
.max-h-\[300px\]{
  max-height: 300px;
}
.max-h-\[500px\]{
  max-height: 500px;
}
.max-h-\[550px\]{
  max-height: 550px;
}
.max-h-\[60vh\]{
  max-height: 60vh;
}
.max-h-\[70vh\]{
  max-height: 70vh;
}
.max-h-\[80vh\]{
  max-height: 80vh;
}
.max-h-\[85vh\]{
  max-height: 85vh;
}
.max-h-\[90vh\]{
  max-height: 90vh;
}
.max-h-\[calc\(100vh-300px\)\]{
  max-height: calc(100vh - 300px);
}
.max-h-\[calc\(80vh-120px\)\]{
  max-height: calc(80vh - 120px);
}
.max-h-\[calc\(80vh-80px\)\]{
  max-height: calc(80vh - 80px);
}
.max-h-\[calc\(90vh-100px\)\]{
  max-height: calc(90vh - 100px);
}
.max-h-full{
  max-height: 100%;
}
.min-h-0{
  min-height: 0px;
}
.min-h-\[120px\]{
  min-height: 120px;
}
.min-h-\[2\.25rem\]{
  min-height: 2.25rem;
}
.min-h-\[2\.75rem\]{
  min-height: 2.75rem;
}
.min-h-\[200px\]{
  min-height: 200px;
}
.min-h-\[3\.25rem\]{
  min-height: 3.25rem;
}
.min-h-\[300px\]{
  min-height: 300px;
}
.min-h-\[400px\]{
  min-height: 400px;
}
.min-h-\[420px\]{
  min-height: 420px;
}
.min-h-\[450px\]{
  min-height: 450px;
}
.min-h-\[500px\]{
  min-height: 500px;
}
.min-h-\[600px\]{
  min-height: 600px;
}
.min-h-\[80px\]{
  min-height: 80px;
}
.min-h-full{
  min-height: 100%;
}
.min-h-screen{
  min-height: 100vh;
}
.w-0\.5{
  width: 0.125rem;
}
.w-1{
  width: var(--space-1);
}
.w-1\.5{
  width: 0.375rem;
}
.w-1\/2{
  width: 50%;
}
.w-1\/3{
  width: 33.333333%;
}
.w-1\/4{
  width: 25%;
}
.w-1\/6{
  width: 16.666667%;
}
.w-10{
  width: var(--space-10);
}
.w-11{
  width: 2.75rem;
}
.w-12{
  width: var(--space-12);
}
.w-14{
  width: 3.5rem;
}
.w-16{
  width: var(--space-16);
}
.w-2{
  width: var(--space-2);
}
.w-2\.5{
  width: 0.625rem;
}
.w-2\/5{
  width: 40%;
}
.w-20{
  width: 5rem;
}
.w-24{
  width: 6rem;
}
.w-3{
  width: var(--space-3);
}
.w-3\.5{
  width: 0.875rem;
}
.w-32{
  width: 8rem;
}
.w-36{
  width: 9rem;
}
.w-4{
  width: var(--space-4);
}
.w-40{
  width: 10rem;
}
.w-48{
  width: 12rem;
}
.w-5{
  width: var(--space-5);
}
.w-56{
  width: 14rem;
}
.w-6{
  width: var(--space-6);
}
.w-64{
  width: 16rem;
}
.w-7{
  width: 1.75rem;
}
.w-72{
  width: 18rem;
}
.w-8{
  width: var(--space-8);
}
.w-80{
  width: 20rem;
}
.w-9{
  width: 2.25rem;
}
.w-96{
  width: 24rem;
}
.w-\[1px\]{
  width: 1px;
}
.w-\[480px\]{
  width: 480px;
}
.w-\[50\%\]{
  width: 50%;
}
.w-\[500px\]{
  width: 500px;
}
.w-\[60\%\]{
  width: 60%;
}
.w-\[800px\]{
  width: 800px;
}
.w-\[90\%\]{
  width: 90%;
}
.w-auto{
  width: auto;
}
.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}
.w-full{
  width: 100%;
}
.w-px{
  width: 1px;
}
.w-screen{
  width: 100vw;
}
.min-w-0{
  min-width: 0px;
}
.min-w-64{
  min-width: 16rem;
}
.min-w-\[100px\]{
  min-width: 100px;
}
.min-w-\[120px\]{
  min-width: 120px;
}
.min-w-\[140px\]{
  min-width: 140px;
}
.min-w-\[160px\]{
  min-width: 160px;
}
.min-w-\[180px\]{
  min-width: 180px;
}
.min-w-\[18px\]{
  min-width: 18px;
}
.min-w-\[190px\]{
  min-width: 190px;
}
.min-w-\[200px\]{
  min-width: 200px;
}
.min-w-\[220px\]{
  min-width: 220px;
}
.min-w-\[280px\]{
  min-width: 280px;
}
.min-w-\[28px\]{
  min-width: 28px;
}
.min-w-\[2rem\]{
  min-width: 2rem;
}
.min-w-\[3rem\]{
  min-width: 3rem;
}
.min-w-\[4rem\]{
  min-width: 4rem;
}
.min-w-full{
  min-width: 100%;
}
.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-\[1800px\]{
  max-width: 1800px;
}
.max-w-\[1920px\]{
  max-width: 1920px;
}
.max-w-\[200px\]{
  max-width: 200px;
}
.max-w-\[280px\]{
  max-width: 280px;
}
.max-w-\[360px\]{
  max-width: 360px;
}
.max-w-\[80\%\]{
  max-width: 80%;
}
.max-w-\[90\%\]{
  max-width: 90%;
}
.max-w-full{
  max-width: 100%;
}
.max-w-lg{
  max-width: 32rem;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-none{
  max-width: none;
}
.max-w-sm{
  max-width: 24rem;
}
.max-w-xs{
  max-width: 20rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-\[2\]{
  flex: 2;
}
.flex-\[3\]{
  flex: 3;
}
.flex-shrink{
  flex-shrink: 1;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.shrink-0{
  flex-shrink: 0;
}
.flex-grow{
  flex-grow: 1;
}
.border-collapse{
  border-collapse: collapse;
}
.-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-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));
}
.-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-1{
  --tw-translate-x: var(--space-1);
  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-x-5{
  --tw-translate-x: var(--space-5);
  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-6{
  --tw-translate-x: var(--space-6);
  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-8{
  --tw-translate-x: var(--space-8);
  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));
}
.translate-y-4{
  --tw-translate-y: var(--space-4);
  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-180{
  --tw-rotate: 180deg;
  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-45{
  --tw-rotate: 45deg;
  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));
}
.scale-105{
  --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));
}
.scale-110{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  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 bounce{
  0%, 100%{
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50%{
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce{
  animation: bounce 1s infinite;
}
@keyframes fadeIn{
  from{
    opacity: 0;
    transform: translateY(-10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fadeIn{
  animation: fadeIn 0.3s ease-out;
}
@keyframes ping{
  75%, 100%{
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping{
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse{
  50%{
    opacity: .5;
  }
}
.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}
.animate-spin{
  animation: spin 1s linear infinite;
}
.cursor-default{
  cursor: default;
}
.cursor-grab{
  cursor: grab;
}
.cursor-help{
  cursor: help;
}
.cursor-not-allowed{
  cursor: not-allowed;
}
.cursor-pointer{
  cursor: pointer;
}
.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none{
  resize: none;
}
.resize{
  resize: both;
}
.list-inside{
  list-style-position: inside;
}
.list-disc{
  list-style-type: disc;
}
.list-none{
  list-style-type: none;
}
.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12{
  grid-template-columns: repeat(12, 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));
}
.grid-cols-6{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.flex-row{
  flex-direction: row;
}
.flex-row-reverse{
  flex-direction: row-reverse;
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.justify-start{
  justify-content: flex-start;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-0\.5{
  gap: 0.125rem;
}
.gap-1{
  gap: var(--space-1);
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-2{
  gap: var(--space-2);
}
.gap-3{
  gap: var(--space-3);
}
.gap-4{
  gap: var(--space-4);
}
.gap-6{
  gap: var(--space-6);
}
.gap-8{
  gap: var(--space-8);
}
.-space-x-px > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(-1px * var(--tw-space-x-reverse));
  margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(var(--space-1) * var(--tw-space-x-reverse));
  margin-left: calc(var(--space-1) * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(var(--space-2) * var(--tw-space-x-reverse));
  margin-left: calc(var(--space-2) * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(var(--space-3) * var(--tw-space-x-reverse));
  margin-left: calc(var(--space-3) * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(var(--space-4) * var(--tw-space-x-reverse));
  margin-left: calc(var(--space-4) * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(var(--space-6) * var(--tw-space-x-reverse));
  margin-left: calc(var(--space-6) * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(var(--space-8) * var(--tw-space-x-reverse));
  margin-left: calc(var(--space-8) * calc(1 - var(--tw-space-x-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(var(--space-1) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--space-1) * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--space-2) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--space-2) * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--space-3) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--space-3) * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--space-4) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--space-4) * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--space-6) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--space-6) * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--space-8) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--space-8) * 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-border > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-divide-opacity, 1));
}
.divide-border\/50 > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(var(--color-border) / 0.5);
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}
.divide-indigo-50 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(238 242 255 / var(--tw-divide-opacity, 1));
}
.divide-slate-700 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));
}
.divide-slate-800 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(30 41 59 / var(--tw-divide-opacity, 1));
}
.self-start{
  align-self: flex-start;
}
.self-end{
  align-self: flex-end;
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-visible{
  overflow: visible;
}
.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;
}
.text-wrap{
  text-wrap: wrap;
}
.break-words{
  overflow-wrap: break-word;
}
.break-all{
  word-break: break-all;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: var(--radius-2xl);
}
.rounded-3xl{
  border-radius: 1.5rem;
}
.rounded-\[2\.5rem\]{
  border-radius: 2.5rem;
}
.rounded-\[2rem\]{
  border-radius: 2rem;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: var(--radius-lg);
}
.rounded-md{
  border-radius: var(--radius-md);
}
.rounded-none{
  border-radius: 0px;
}
.rounded-sm{
  border-radius: var(--radius-sm);
}
.rounded-xl{
  border-radius: var(--radius-xl);
}
.rounded-b-lg{
  border-bottom-right-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}
.rounded-l-md{
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.rounded-r-md{
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.rounded-t{
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-t-2xl{
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
}
.rounded-t-lg{
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.rounded-t-xl{
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}
.rounded-tl-sm{
  border-top-left-radius: var(--radius-sm);
}
.rounded-tr-sm{
  border-top-right-radius: var(--radius-sm);
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-2{
  border-width: 2px;
}
.border-4{
  border-width: 4px;
}
.border-x{
  border-left-width: 1px;
  border-right-width: 1px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-l{
  border-left-width: 1px;
}
.border-l-2{
  border-left-width: 2px;
}
.border-l-4{
  border-left-width: 4px;
}
.border-r{
  border-right-width: 1px;
}
.border-r-2{
  border-right-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-2{
  border-top-width: 2px;
}
.border-dashed{
  border-style: dashed;
}
.border-dotted{
  border-style: dotted;
}
.border-none{
  border-style: none;
}
.border-\[\#10B981\]\/30{
  border-color: rgb(16 185 129 / 0.3);
}
.border-\[\#1E3A8A\]{
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
}
.border-\[\#1E3A8A\]\/30{
  border-color: rgb(30 58 138 / 0.3);
}
.border-\[var\(--color-border\)\]{
  border-color: var(--color-border);
}
.border-accent{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent) / var(--tw-border-opacity, 1));
}
.border-accent\/20{
  border-color: rgb(var(--color-accent) / 0.2);
}
.border-accent\/30{
  border-color: rgb(var(--color-accent) / 0.3);
}
.border-accent\/50{
  border-color: rgb(var(--color-accent) / 0.5);
}
.border-amber-100{
  --tw-border-opacity: 1;
  border-color: rgb(254 243 199 / var(--tw-border-opacity, 1));
}
.border-amber-200{
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300{
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-400{
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-amber-400\/20{
  border-color: rgb(251 191 36 / 0.2);
}
.border-amber-500\/20{
  border-color: rgb(245 158 11 / 0.2);
}
.border-amber-500\/30{
  border-color: rgb(245 158 11 / 0.3);
}
.border-blue-100{
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / 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-500\/20{
  border-color: rgb(59 130 246 / 0.2);
}
.border-blue-500\/30{
  border-color: rgb(59 130 246 / 0.3);
}
.border-blue-500\/50{
  border-color: rgb(59 130 246 / 0.5);
}
.border-blue-600{
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-border{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
}
.border-border\/20{
  border-color: rgb(var(--color-border) / 0.2);
}
.border-border\/30{
  border-color: rgb(var(--color-border) / 0.3);
}
.border-border\/50{
  border-color: rgb(var(--color-border) / 0.5);
}
.border-brand{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity, 1));
}
.border-brand\/30{
  border-color: rgb(var(--color-primary) / 0.3);
}
.border-current{
  border-color: currentColor;
}
.border-cyan-200{
  --tw-border-opacity: 1;
  border-color: rgb(165 243 252 / var(--tw-border-opacity, 1));
}
.border-cyan-400{
  --tw-border-opacity: 1;
  border-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}
.border-cyan-500{
  --tw-border-opacity: 1;
  border-color: rgb(6 182 212 / var(--tw-border-opacity, 1));
}
.border-cyan-500\/10{
  border-color: rgb(6 182 212 / 0.1);
}
.border-cyan-500\/20{
  border-color: rgb(6 182 212 / 0.2);
}
.border-cyan-500\/30{
  border-color: rgb(6 182 212 / 0.3);
}
.border-cyan-500\/50{
  border-color: rgb(6 182 212 / 0.5);
}
.border-emerald-100{
  --tw-border-opacity: 1;
  border-color: rgb(209 250 229 / var(--tw-border-opacity, 1));
}
.border-emerald-200{
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-400\/20{
  border-color: rgb(52 211 153 / 0.2);
}
.border-emerald-400\/30{
  border-color: rgb(52 211 153 / 0.3);
}
.border-emerald-500{
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-emerald-500\/20{
  border-color: rgb(16 185 129 / 0.2);
}
.border-emerald-500\/30{
  border-color: rgb(16 185 129 / 0.3);
}
.border-error{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-error) / var(--tw-border-opacity, 1));
}
.border-error-light{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-error-light) / var(--tw-border-opacity, 1));
}
.border-error\/20{
  border-color: rgb(var(--color-error) / 0.2);
}
.border-error\/25{
  border-color: rgb(var(--color-error) / 0.25);
}
.border-error\/30{
  border-color: rgb(var(--color-error) / 0.3);
}
.border-error\/40{
  border-color: rgb(var(--color-error) / 0.4);
}
.border-error\/50{
  border-color: rgb(var(--color-error) / 0.5);
}
.border-error\/70{
  border-color: rgb(var(--color-error) / 0.7);
}
.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-400{
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.border-gray-400\/30{
  border-color: rgb(156 163 175 / 0.3);
}
.border-gray-500\/20{
  border-color: rgb(107 114 128 / 0.2);
}
.border-gray-600{
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.border-gray-700{
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-gray-800{
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}
.border-green-200{
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / 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-500\/30{
  border-color: rgb(34 197 94 / 0.3);
}
.border-green-500\/50{
  border-color: rgb(34 197 94 / 0.5);
}
.border-green-600{
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}
.border-indigo-100{
  --tw-border-opacity: 1;
  border-color: rgb(224 231 255 / var(--tw-border-opacity, 1));
}
.border-indigo-100\/50{
  border-color: rgb(224 231 255 / 0.5);
}
.border-indigo-200{
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-indigo-200\/30{
  border-color: rgb(199 210 254 / 0.3);
}
.border-indigo-200\/50{
  border-color: rgb(199 210 254 / 0.5);
}
.border-indigo-300{
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.border-indigo-400{
  --tw-border-opacity: 1;
  border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.border-indigo-500{
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}
.border-info{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info) / var(--tw-border-opacity, 1));
}
.border-info\/20{
  border-color: rgb(var(--color-info) / 0.2);
}
.border-info\/30{
  border-color: rgb(var(--color-info) / 0.3);
}
.border-info\/50{
  border-color: rgb(var(--color-info) / 0.5);
}
.border-info\/70{
  border-color: rgb(var(--color-info) / 0.7);
}
.border-orange-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.border-orange-300{
  --tw-border-opacity: 1;
  border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));
}
.border-orange-400{
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
}
.border-orange-500{
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}
.border-orange-500\/20{
  border-color: rgb(249 115 22 / 0.2);
}
.border-orange-500\/30{
  border-color: rgb(249 115 22 / 0.3);
}
.border-orange-500\/50{
  border-color: rgb(249 115 22 / 0.5);
}
.border-orange-700{
  --tw-border-opacity: 1;
  border-color: rgb(194 65 12 / var(--tw-border-opacity, 1));
}
.border-pink-300{
  --tw-border-opacity: 1;
  border-color: rgb(249 168 212 / var(--tw-border-opacity, 1));
}
.border-pink-400{
  --tw-border-opacity: 1;
  border-color: rgb(244 114 182 / var(--tw-border-opacity, 1));
}
.border-purple-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 232 255 / var(--tw-border-opacity, 1));
}
.border-purple-100\/50{
  border-color: rgb(243 232 255 / 0.5);
}
.border-purple-200{
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-purple-200\/20{
  border-color: rgb(233 213 255 / 0.2);
}
.border-purple-300{
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}
.border-purple-400{
  --tw-border-opacity: 1;
  border-color: rgb(192 132 252 / 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-500\/30{
  border-color: rgb(168 85 247 / 0.3);
}
.border-purple-500\/50{
  border-color: rgb(168 85 247 / 0.5);
}
.border-red-100{
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / 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-400\/30{
  border-color: rgb(248 113 113 / 0.3);
}
.border-red-500{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-red-500\/20{
  border-color: rgb(239 68 68 / 0.2);
}
.border-red-500\/30{
  border-color: rgb(239 68 68 / 0.3);
}
.border-red-500\/50{
  border-color: rgb(239 68 68 / 0.5);
}
.border-red-700{
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}
.border-rose-400{
  --tw-border-opacity: 1;
  border-color: rgb(251 113 133 / var(--tw-border-opacity, 1));
}
.border-slate-100{
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-slate-200{
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-200\/50{
  border-color: rgb(226 232 240 / 0.5);
}
.border-slate-300{
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-slate-600{
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.border-slate-700{
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.border-success{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success) / var(--tw-border-opacity, 1));
}
.border-success\/20{
  border-color: rgb(var(--color-success) / 0.2);
}
.border-success\/25{
  border-color: rgb(var(--color-success) / 0.25);
}
.border-success\/30{
  border-color: rgb(var(--color-success) / 0.3);
}
.border-success\/40{
  border-color: rgb(var(--color-success) / 0.4);
}
.border-success\/50{
  border-color: rgb(var(--color-success) / 0.5);
}
.border-success\/70{
  border-color: rgb(var(--color-success) / 0.7);
}
.border-surface{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface) / var(--tw-border-opacity, 1));
}
.border-surface-elevated{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-elevated) / var(--tw-border-opacity, 1));
}
.border-teal-400{
  --tw-border-opacity: 1;
  border-color: rgb(45 212 191 / var(--tw-border-opacity, 1));
}
.border-tertiary{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-tertiary) / var(--tw-border-opacity, 1));
}
.border-tertiary\/20{
  border-color: rgb(var(--color-tertiary) / 0.2);
}
.border-tertiary\/30{
  border-color: rgb(var(--color-tertiary) / 0.3);
}
.border-tertiary\/40{
  border-color: rgb(var(--color-tertiary) / 0.4);
}
.border-tertiary\/50{
  border-color: rgb(var(--color-tertiary) / 0.5);
}
.border-tertiary\/70{
  border-color: rgb(var(--color-tertiary) / 0.7);
}
.border-transparent{
  border-color: transparent;
}
.border-warning{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity, 1));
}
.border-warning\/20{
  border-color: rgb(var(--color-warning) / 0.2);
}
.border-warning\/25{
  border-color: rgb(var(--color-warning) / 0.25);
}
.border-warning\/30{
  border-color: rgb(var(--color-warning) / 0.3);
}
.border-warning\/40{
  border-color: rgb(var(--color-warning) / 0.4);
}
.border-warning\/50{
  border-color: rgb(var(--color-warning) / 0.5);
}
.border-warning\/70{
  border-color: rgb(var(--color-warning) / 0.7);
}
.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/10{
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/20{
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/30{
  border-color: rgb(255 255 255 / 0.3);
}
.border-white\/40{
  border-color: rgb(255 255 255 / 0.4);
}
.border-white\/5{
  border-color: rgb(255 255 255 / 0.05);
}
.border-white\/50{
  border-color: rgb(255 255 255 / 0.5);
}
.border-white\/60{
  border-color: rgb(255 255 255 / 0.6);
}
.border-white\/80{
  border-color: rgb(255 255 255 / 0.8);
}
.border-yellow-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-yellow-300{
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
}
.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-500\/30{
  border-color: rgb(234 179 8 / 0.3);
}
.border-yellow-500\/50{
  border-color: rgb(234 179 8 / 0.5);
}
.border-b-purple-400{
  --tw-border-opacity: 1;
  border-bottom-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}
.border-l-error{
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-error) / var(--tw-border-opacity, 1));
}
.border-l-info{
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-info) / var(--tw-border-opacity, 1));
}
.border-l-red-500{
  --tw-border-opacity: 1;
  border-left-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-l-success{
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-success) / var(--tw-border-opacity, 1));
}
.border-l-warning{
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-warning) / var(--tw-border-opacity, 1));
}
.border-t-accent{
  --tw-border-opacity: 1;
  border-top-color: rgb(var(--color-accent) / var(--tw-border-opacity, 1));
}
.border-t-gray-900{
  --tw-border-opacity: 1;
  border-top-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
}
.border-t-indigo-400{
  --tw-border-opacity: 1;
  border-top-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.border-t-transparent{
  border-top-color: transparent;
}
.border-t-white{
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-opacity-20{
  --tw-border-opacity: 0.2;
}
.\!bg-gray-400{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-gray-500{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[\#0a0e15\]{
  --tw-bg-opacity: 1;
  background-color: rgb(10 14 21 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0a0e15\]\/50{
  background-color: rgb(10 14 21 / 0.5);
}
.bg-\[\#0d1117\]{
  --tw-bg-opacity: 1;
  background-color: rgb(13 17 23 / var(--tw-bg-opacity, 1));
}
.bg-\[\#10B981\]{
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-\[\#10B981\]\/10{
  background-color: rgb(16 185 129 / 0.1);
}
.bg-\[\#161b22\]{
  --tw-bg-opacity: 1;
  background-color: rgb(22 27 34 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1E3A8A\]\/10{
  background-color: rgb(30 58 138 / 0.1);
}
.bg-\[\#F0F2FF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(240 242 255 / var(--tw-bg-opacity, 1));
}
.bg-\[var\(--color-background\)\]{
  background-color: var(--color-background);
}
.bg-\[var\(--color-brand\)\]{
  background-color: var(--color-brand);
}
.bg-\[var\(--color-surface\)\]{
  background-color: var(--color-surface);
}
.bg-\[var\(--color-surface-elevated\)\]{
  background-color: var(--color-surface-elevated);
}
.bg-accent{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent) / var(--tw-bg-opacity, 1));
}
.bg-accent\/10{
  background-color: rgb(var(--color-accent) / 0.1);
}
.bg-accent\/15{
  background-color: rgb(var(--color-accent) / 0.15);
}
.bg-accent\/20{
  background-color: rgb(var(--color-accent) / 0.2);
}
.bg-accent\/30{
  background-color: rgb(var(--color-accent) / 0.3);
}
.bg-accent\/5{
  background-color: rgb(var(--color-accent) / 0.05);
}
.bg-amber-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-200{
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}
.bg-amber-400\/10{
  background-color: rgb(251 191 36 / 0.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-500\/10{
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/20{
  background-color: rgb(245 158 11 / 0.2);
}
.bg-amber-500\/5{
  background-color: rgb(245 158 11 / 0.05);
}
.bg-background{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity, 1));
}
.bg-background\/20{
  background-color: rgb(var(--color-background) / 0.2);
}
.bg-background\/30{
  background-color: rgb(var(--color-background) / 0.3);
}
.bg-background\/40{
  background-color: rgb(var(--color-background) / 0.4);
}
.bg-background\/50{
  background-color: rgb(var(--color-background) / 0.5);
}
.bg-background\/80{
  background-color: rgb(var(--color-background) / 0.8);
}
.bg-background\/90{
  background-color: rgb(var(--color-background) / 0.9);
}
.bg-background\/95{
  background-color: rgb(var(--color-background) / 0.95);
}
.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/20{
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/30{
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40{
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60{
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/70{
  background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/80{
  background-color: rgb(0 0 0 / 0.8);
}
.bg-black\/90{
  background-color: rgb(0 0 0 / 0.9);
}
.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-200\/20{
  background-color: rgb(191 219 254 / 0.2);
}
.bg-blue-400{
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.bg-blue-400\/30{
  background-color: rgb(96 165 250 / 0.3);
}
.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\/10{
  background-color: rgb(59 130 246 / 0.1);
}
.bg-blue-500\/20{
  background-color: rgb(59 130 246 / 0.2);
}
.bg-blue-500\/5{
  background-color: rgb(59 130 246 / 0.05);
}
.bg-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-blue-600\/20{
  background-color: rgb(37 99 235 / 0.2);
}
.bg-blue-900{
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}
.bg-border{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-border) / var(--tw-bg-opacity, 1));
}
.bg-brand{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary) / var(--tw-bg-opacity, 1));
}
.bg-brand-dark{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-dark) / var(--tw-bg-opacity, 1));
}
.bg-brand\/10{
  background-color: rgb(var(--color-primary) / 0.1);
}
.bg-brand\/20{
  background-color: rgb(var(--color-primary) / 0.2);
}
.bg-brand\/30{
  background-color: rgb(var(--color-primary) / 0.3);
}
.bg-brand\/80{
  background-color: rgb(var(--color-primary) / 0.8);
}
.bg-current{
  background-color: currentColor;
}
.bg-cyan-100{
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}
.bg-cyan-500{
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}
.bg-cyan-500\/10{
  background-color: rgb(6 182 212 / 0.1);
}
.bg-cyan-500\/20{
  background-color: rgb(6 182 212 / 0.2);
}
.bg-cyan-600{
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
}
.bg-emerald-100{
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400{
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400\/10{
  background-color: rgb(52 211 153 / 0.1);
}
.bg-emerald-50{
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / 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-500\/10{
  background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/20{
  background-color: rgb(16 185 129 / 0.2);
}
.bg-emerald-500\/5{
  background-color: rgb(16 185 129 / 0.05);
}
.bg-error{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error) / var(--tw-bg-opacity, 1));
}
.bg-error-dark{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-dark) / var(--tw-bg-opacity, 1));
}
.bg-error\/10{
  background-color: rgb(var(--color-error) / 0.1);
}
.bg-error\/15{
  background-color: rgb(var(--color-error) / 0.15);
}
.bg-error\/20{
  background-color: rgb(var(--color-error) / 0.2);
}
.bg-error\/30{
  background-color: rgb(var(--color-error) / 0.3);
}
.bg-error\/5{
  background-color: rgb(var(--color-error) / 0.05);
}
.bg-error\/50{
  background-color: rgb(var(--color-error) / 0.5);
}
.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-400{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-400\/20{
  background-color: rgb(156 163 175 / 0.2);
}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-500{
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-500\/10{
  background-color: rgb(107 114 128 / 0.1);
}
.bg-gray-600{
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.bg-gray-600\/20{
  background-color: rgb(75 85 99 / 0.2);
}
.bg-gray-700{
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / 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-900{
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-gray-950{
  --tw-bg-opacity: 1;
  background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
}
.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-200{
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / 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-500\/10{
  background-color: rgb(34 197 94 / 0.1);
}
.bg-green-500\/20{
  background-color: rgb(34 197 94 / 0.2);
}
.bg-green-600{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-green-600\/20{
  background-color: rgb(22 163 74 / 0.2);
}
.bg-green-900{
  --tw-bg-opacity: 1;
  background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
}
.bg-indigo-100{
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-200\/50{
  background-color: rgb(199 210 254 / 0.5);
}
.bg-indigo-300{
  --tw-bg-opacity: 1;
  background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1));
}
.bg-indigo-300\/20{
  background-color: rgb(165 180 252 / 0.2);
}
.bg-indigo-400{
  --tw-bg-opacity: 1;
  background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1));
}
.bg-indigo-400\/50{
  background-color: rgb(129 140 248 / 0.5);
}
.bg-indigo-50{
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-500{
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.bg-indigo-500\/5{
  background-color: rgb(99 102 241 / 0.05);
}
.bg-indigo-600{
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-info{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info) / var(--tw-bg-opacity, 1));
}
.bg-info\/10{
  background-color: rgb(var(--color-info) / 0.1);
}
.bg-info\/20{
  background-color: rgb(var(--color-info) / 0.2);
}
.bg-info\/30{
  background-color: rgb(var(--color-info) / 0.3);
}
.bg-info\/5{
  background-color: rgb(var(--color-info) / 0.05);
}
.bg-neutral{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-neutral) / var(--tw-bg-opacity, 1));
}
.bg-neutral\/20{
  background-color: rgb(var(--color-neutral) / 0.2);
}
.bg-neutral\/50{
  background-color: rgb(var(--color-neutral) / 0.5);
}
.bg-orange-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-orange-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-orange-500{
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-orange-500\/10{
  background-color: rgb(249 115 22 / 0.1);
}
.bg-orange-500\/20{
  background-color: rgb(249 115 22 / 0.2);
}
.bg-orange-600{
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.bg-orange-900{
  --tw-bg-opacity: 1;
  background-color: rgb(124 45 18 / var(--tw-bg-opacity, 1));
}
.bg-orange-900\/30{
  background-color: rgb(124 45 18 / 0.3);
}
.bg-pink-100{
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}
.bg-pink-400{
  --tw-bg-opacity: 1;
  background-color: rgb(244 114 182 / var(--tw-bg-opacity, 1));
}
.bg-pink-500{
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}
.bg-pink-500\/20{
  background-color: rgb(236 72 153 / 0.2);
}
.bg-pink-600\/20{
  background-color: rgb(219 39 119 / 0.2);
}
.bg-purple-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-200{
  --tw-bg-opacity: 1;
  background-color: rgb(233 213 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-300\/20{
  background-color: rgb(216 180 254 / 0.2);
}
.bg-purple-400{
  --tw-bg-opacity: 1;
  background-color: rgb(192 132 252 / var(--tw-bg-opacity, 1));
}
.bg-purple-400\/50{
  background-color: rgb(192 132 252 / 0.5);
}
.bg-purple-50{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-50\/50{
  background-color: rgb(250 245 255 / 0.5);
}
.bg-purple-500{
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-500\/20{
  background-color: rgb(168 85 247 / 0.2);
}
.bg-purple-500\/30{
  background-color: rgb(168 85 247 / 0.3);
}
.bg-purple-500\/80{
  background-color: rgb(168 85 247 / 0.8);
}
.bg-purple-600{
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-purple-600\/20{
  background-color: rgb(147 51 234 / 0.2);
}
.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-200{
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / 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-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-500\/10{
  background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/20{
  background-color: rgb(239 68 68 / 0.2);
}
.bg-red-500\/5{
  background-color: rgb(239 68 68 / 0.05);
}
.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-900{
  --tw-bg-opacity: 1;
  background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
}
.bg-red-900\/50{
  background-color: rgb(127 29 29 / 0.5);
}
.bg-rose-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-rose-400{
  --tw-bg-opacity: 1;
  background-color: rgb(251 113 133 / var(--tw-bg-opacity, 1));
}
.bg-rose-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-slate-100{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-200{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.bg-slate-200\/50{
  background-color: rgb(226 232 240 / 0.5);
}
.bg-slate-300{
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.bg-slate-400{
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-slate-50{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-slate-50\/50{
  background-color: rgb(248 250 252 / 0.5);
}
.bg-slate-700{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.bg-slate-700\/50{
  background-color: rgb(51 65 85 / 0.5);
}
.bg-slate-800{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-slate-800\/30{
  background-color: rgb(30 41 59 / 0.3);
}
.bg-slate-800\/50{
  background-color: rgb(30 41 59 / 0.5);
}
.bg-slate-800\/95{
  background-color: rgb(30 41 59 / 0.95);
}
.bg-slate-900{
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/40{
  background-color: rgb(15 23 42 / 0.4);
}
.bg-slate-900\/50{
  background-color: rgb(15 23 42 / 0.5);
}
.bg-slate-900\/80{
  background-color: rgb(15 23 42 / 0.8);
}
.bg-slate-900\/95{
  background-color: rgb(15 23 42 / 0.95);
}
.bg-slate-950{
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
.bg-success{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success) / var(--tw-bg-opacity, 1));
}
.bg-success-dark{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-dark) / var(--tw-bg-opacity, 1));
}
.bg-success\/10{
  background-color: rgb(var(--color-success) / 0.1);
}
.bg-success\/15{
  background-color: rgb(var(--color-success) / 0.15);
}
.bg-success\/20{
  background-color: rgb(var(--color-success) / 0.2);
}
.bg-success\/30{
  background-color: rgb(var(--color-success) / 0.3);
}
.bg-success\/5{
  background-color: rgb(var(--color-success) / 0.05);
}
.bg-surface{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}
.bg-surface-elevated{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-elevated) / var(--tw-bg-opacity, 1));
}
.bg-surface-elevated\/30{
  background-color: rgb(var(--color-surface-elevated) / 0.3);
}
.bg-surface-elevated\/50{
  background-color: rgb(var(--color-surface-elevated) / 0.5);
}
.bg-surface-hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
}
.bg-surface\/30{
  background-color: rgb(var(--color-surface) / 0.3);
}
.bg-surface\/40{
  background-color: rgb(var(--color-surface) / 0.4);
}
.bg-surface\/50{
  background-color: rgb(var(--color-surface) / 0.5);
}
.bg-surface\/70{
  background-color: rgb(var(--color-surface) / 0.7);
}
.bg-surface\/80{
  background-color: rgb(var(--color-surface) / 0.8);
}
.bg-teal-100{
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}
.bg-teal-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1));
}
.bg-tertiary{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-tertiary) / var(--tw-bg-opacity, 1));
}
.bg-tertiary\/10{
  background-color: rgb(var(--color-tertiary) / 0.1);
}
.bg-tertiary\/20{
  background-color: rgb(var(--color-tertiary) / 0.2);
}
.bg-tertiary\/30{
  background-color: rgb(var(--color-tertiary) / 0.3);
}
.bg-tertiary\/5{
  background-color: rgb(var(--color-tertiary) / 0.05);
}
.bg-transparent{
  background-color: transparent;
}
.bg-violet-500{
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
.bg-violet-600\/20{
  background-color: rgb(124 58 237 / 0.2);
}
.bg-warning{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning) / var(--tw-bg-opacity, 1));
}
.bg-warning\/10{
  background-color: rgb(var(--color-warning) / 0.1);
}
.bg-warning\/15{
  background-color: rgb(var(--color-warning) / 0.15);
}
.bg-warning\/20{
  background-color: rgb(var(--color-warning) / 0.2);
}
.bg-warning\/30{
  background-color: rgb(var(--color-warning) / 0.3);
}
.bg-warning\/5{
  background-color: rgb(var(--color-warning) / 0.05);
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10{
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/20{
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/30{
  background-color: rgb(255 255 255 / 0.3);
}
.bg-white\/40{
  background-color: rgb(255 255 255 / 0.4);
}
.bg-white\/5{
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/50{
  background-color: rgb(255 255 255 / 0.5);
}
.bg-white\/60{
  background-color: rgb(255 255 255 / 0.6);
}
.bg-white\/70{
  background-color: rgb(255 255 255 / 0.7);
}
.bg-white\/80{
  background-color: rgb(255 255 255 / 0.8);
}
.bg-white\/90{
  background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/95{
  background-color: rgb(255 255 255 / 0.95);
}
.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-500\/10{
  background-color: rgb(234 179 8 / 0.1);
}
.bg-yellow-500\/20{
  background-color: rgb(234 179 8 / 0.2);
}
.bg-yellow-500\/5{
  background-color: rgb(234 179 8 / 0.05);
}
.bg-yellow-600{
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.bg-opacity-10{
  --tw-bg-opacity: 0.1;
}
.bg-opacity-100{
  --tw-bg-opacity: 1;
}
.bg-opacity-20{
  --tw-bg-opacity: 0.2;
}
.bg-opacity-50{
  --tw-bg-opacity: 0.5;
}
.bg-\[linear-gradient\(rgba\(139\2c 92\2c 246\2c 0\.3\)_1px\2c transparent_1px\)\2c linear-gradient\(90deg\2c rgba\(139\2c 92\2c 246\2c 0\.3\)_1px\2c transparent_1px\)\]{
  background-image: linear-gradient(rgba(139,92,246,0.3) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,0.3) 1px,transparent 1px);
}
.bg-\[radial-gradient\(\#4F46E5_1px\2c transparent_1px\)\]{
  background-image: radial-gradient(#4F46E5 1px,transparent 1px);
}
.bg-\[url\(\'https\:\/\/grainy-gradients\.vercel\.app\/noise\.svg\'\)\]{
  background-image: url('https://grainy-gradients.vercel.app/noise.svg');
}
.bg-gradient-to-b{
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l{
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t{
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-\[\#0d1117\]{
  --tw-gradient-from: #0d1117 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(13 17 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#2D2B55\]{
  --tw-gradient-from: #2D2B55 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(45 43 85 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#F0F2FF\]{
  --tw-gradient-from: #F0F2FF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 242 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#F8FAFC\]{
  --tw-gradient-from: #F8FAFC var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[rgb\(var\(--color-primary\)\)\]{
  --tw-gradient-from: rgb(var(--color-primary)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent{
  --tw-gradient-from: rgb(var(--color-accent) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-accent) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-400{
  --tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-50{
  --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500\/5{
  --tw-gradient-from: rgb(245 158 11 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/10{
  --tw-gradient-from: rgb(0 0 0 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.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-50{
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 246 255 / 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);
}
.from-blue-500\/5{
  --tw-gradient-from: rgb(59 130 246 / 0.05) 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);
}
.from-blue-600{
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-50{
  --tw-gradient-from: #ecfeff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 254 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-500{
  --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-500\/10{
  --tw-gradient-from: rgb(6 182 212 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-500\/20{
  --tw-gradient-from: rgb(6 182 212 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500{
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-900\/50{
  --tw-gradient-from: rgb(6 78 59 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 78 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-100{
  --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-50{
  --tw-gradient-from: #f0fdf4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-500{
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-600{
  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-100{
  --tw-gradient-from: #e0e7ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(224 231 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-300{
  --tw-gradient-from: #a5b4fc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(165 180 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-400{
  --tw-gradient-from: #818cf8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(129 140 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-50{
  --tw-gradient-from: #eef2ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-50\/50{
  --tw-gradient-from: rgb(238 242 255 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-500{
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-600{
  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-50{
  --tw-gradient-from: #fff7ed var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 247 237 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500{
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500\/10{
  --tw-gradient-from: rgb(249 115 22 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-400{
  --tw-gradient-from: #f472b6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-400{
  --tw-gradient-from: #c084fc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-400\/30{
  --tw-gradient-from: rgb(192 132 252 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-50{
  --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-50\/30{
  --tw-gradient-from: rgb(250 245 255 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-50\/50{
  --tw-gradient-from: rgb(250 245 255 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500{
  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500\/10{
  --tw-gradient-from: rgb(168 85 247 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500\/20{
  --tw-gradient-from: rgb(168 85 247 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500\/30{
  --tw-gradient-from: rgb(168 85 247 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-600{
  --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-900\/20{
  --tw-gradient-from: rgb(88 28 135 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-900\/50{
  --tw-gradient-from: rgb(88 28 135 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-50{
  --tw-gradient-from: #fef2f2 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 242 242 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500\/5{
  --tw-gradient-from: rgb(239 68 68 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-600{
  --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-900\/20{
  --tw-gradient-from: rgb(127 29 29 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(127 29 29 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-rose-100{
  --tw-gradient-from: #ffe4e6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 228 230 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-rose-400{
  --tw-gradient-from: #fb7185 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 113 133 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-rose-50{
  --tw-gradient-from: #fff1f2 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 241 242 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-50{
  --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-50\/80{
  --tw-gradient-from: rgb(248 250 252 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-800{
  --tw-gradient-from: #1e293b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-900{
  --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-900\/5{
  --tw-gradient-from: rgb(15 23 42 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-success{
  --tw-gradient-from: rgb(var(--color-success) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-success) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent{
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-500{
  --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#F0F2FF\]{
  --tw-gradient-to: rgb(240 242 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #F0F2FF var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-blue-50{
  --tw-gradient-to: rgb(239 246 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #eff6ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-emerald-500{
  --tw-gradient-to: rgb(16 185 129 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #10b981 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-indigo-50\/20{
  --tw-gradient-to: rgb(238 242 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(238 242 255 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-indigo-50\/30{
  --tw-gradient-to: rgb(238 242 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(238 242 255 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-purple-900\/30{
  --tw-gradient-to: rgb(88 28 135 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(88 28 135 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-purple-900\/90{
  --tw-gradient-to: rgb(88 28 135 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(88 28 135 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-slate-800\/30{
  --tw-gradient-to: rgb(30 41 59 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(30 41 59 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-transparent{
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/10{
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/20{
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#161b22\]{
  --tw-gradient-to: #161b22 var(--tw-gradient-to-position);
}
.to-\[\#1E1E2E\]{
  --tw-gradient-to: #1E1E2E var(--tw-gradient-to-position);
}
.to-\[\#EFF6FF\]{
  --tw-gradient-to: #EFF6FF var(--tw-gradient-to-position);
}
.to-\[rgb\(var\(--color-accent\)\)\]{
  --tw-gradient-to: rgb(var(--color-accent)) var(--tw-gradient-to-position);
}
.to-accent{
  --tw-gradient-to: rgb(var(--color-accent) / 1) var(--tw-gradient-to-position);
}
.to-amber-500{
  --tw-gradient-to: #f59e0b var(--tw-gradient-to-position);
}
.to-amber-500\/10{
  --tw-gradient-to: rgb(245 158 11 / 0.1) var(--tw-gradient-to-position);
}
.to-amber-600{
  --tw-gradient-to: #d97706 var(--tw-gradient-to-position);
}
.to-black\/5{
  --tw-gradient-to: rgb(0 0 0 / 0.05) var(--tw-gradient-to-position);
}
.to-blue-100{
  --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
}
.to-blue-50{
  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}
.to-blue-500{
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}
.to-blue-500\/10{
  --tw-gradient-to: rgb(59 130 246 / 0.1) var(--tw-gradient-to-position);
}
.to-blue-500\/20{
  --tw-gradient-to: rgb(59 130 246 / 0.2) var(--tw-gradient-to-position);
}
.to-blue-600{
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}
.to-blue-700{
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}
.to-blue-900\/20{
  --tw-gradient-to: rgb(30 58 138 / 0.2) var(--tw-gradient-to-position);
}
.to-cyan-400{
  --tw-gradient-to: #22d3ee var(--tw-gradient-to-position);
}
.to-emerald-600{
  --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}
.to-gray-200{
  --tw-gradient-to: #e5e7eb var(--tw-gradient-to-position);
}
.to-green-100{
  --tw-gradient-to: #dcfce7 var(--tw-gradient-to-position);
}
.to-green-600{
  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
}
.to-indigo-200{
  --tw-gradient-to: #c7d2fe var(--tw-gradient-to-position);
}
.to-indigo-50{
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}
.to-indigo-50\/30{
  --tw-gradient-to: rgb(238 242 255 / 0.3) var(--tw-gradient-to-position);
}
.to-indigo-50\/50{
  --tw-gradient-to: rgb(238 242 255 / 0.5) var(--tw-gradient-to-position);
}
.to-indigo-500{
  --tw-gradient-to: #6366f1 var(--tw-gradient-to-position);
}
.to-indigo-600{
  --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}
.to-indigo-900\/50{
  --tw-gradient-to: rgb(49 46 129 / 0.5) var(--tw-gradient-to-position);
}
.to-orange-100{
  --tw-gradient-to: #ffedd5 var(--tw-gradient-to-position);
}
.to-orange-50{
  --tw-gradient-to: #fff7ed var(--tw-gradient-to-position);
}
.to-orange-500{
  --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
}
.to-pink-100{
  --tw-gradient-to: #fce7f3 var(--tw-gradient-to-position);
}
.to-pink-400\/30{
  --tw-gradient-to: rgb(244 114 182 / 0.3) var(--tw-gradient-to-position);
}
.to-pink-50{
  --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position);
}
.to-pink-500{
  --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
}
.to-pink-500\/10{
  --tw-gradient-to: rgb(236 72 153 / 0.1) var(--tw-gradient-to-position);
}
.to-pink-500\/30{
  --tw-gradient-to: rgb(236 72 153 / 0.3) var(--tw-gradient-to-position);
}
.to-pink-600{
  --tw-gradient-to: #db2777 var(--tw-gradient-to-position);
}
.to-pink-900\/20{
  --tw-gradient-to: rgb(131 24 67 / 0.2) var(--tw-gradient-to-position);
}
.to-purple-100{
  --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);
}
.to-purple-400{
  --tw-gradient-to: #c084fc var(--tw-gradient-to-position);
}
.to-purple-50{
  --tw-gradient-to: #faf5ff var(--tw-gradient-to-position);
}
.to-purple-50\/50{
  --tw-gradient-to: rgb(250 245 255 / 0.5) var(--tw-gradient-to-position);
}
.to-purple-500{
  --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}
.to-purple-600{
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}
.to-purple-900\/10{
  --tw-gradient-to: rgb(88 28 135 / 0.1) var(--tw-gradient-to-position);
}
.to-red-500{
  --tw-gradient-to: #ef4444 var(--tw-gradient-to-position);
}
.to-rose-400{
  --tw-gradient-to: #fb7185 var(--tw-gradient-to-position);
}
.to-rose-50{
  --tw-gradient-to: #fff1f2 var(--tw-gradient-to-position);
}
.to-rose-600{
  --tw-gradient-to: #e11d48 var(--tw-gradient-to-position);
}
.to-slate-100{
  --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position);
}
.to-slate-200{
  --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position);
}
.to-slate-50\/30{
  --tw-gradient-to: rgb(248 250 252 / 0.3) var(--tw-gradient-to-position);
}
.to-slate-50\/50{
  --tw-gradient-to: rgb(248 250 252 / 0.5) var(--tw-gradient-to-position);
}
.to-slate-600{
  --tw-gradient-to: #475569 var(--tw-gradient-to-position);
}
.to-slate-900{
  --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}
.to-success\/80{
  --tw-gradient-to: rgb(var(--color-success) / 0.8) var(--tw-gradient-to-position);
}
.to-teal-600{
  --tw-gradient-to: #0d9488 var(--tw-gradient-to-position);
}
.to-teal-900\/50{
  --tw-gradient-to: rgb(19 78 74 / 0.5) var(--tw-gradient-to-position);
}
.to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.bg-\[size\:20px_20px\]{
  background-size: 20px 20px;
}
.bg-clip-text{
  -webkit-background-clip: text;
          background-clip: text;
}
.fill-tertiary{
  fill: rgb(var(--color-tertiary) / 1);
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0{
  padding: 0px;
}
.p-0\.5{
  padding: 0.125rem;
}
.p-1{
  padding: var(--space-1);
}
.p-1\.5{
  padding: 0.375rem;
}
.p-10{
  padding: var(--space-10);
}
.p-12{
  padding: var(--space-12);
}
.p-2{
  padding: var(--space-2);
}
.p-2\.5{
  padding: 0.625rem;
}
.p-3{
  padding: var(--space-3);
}
.p-4{
  padding: var(--space-4);
}
.p-5{
  padding: var(--space-5);
}
.p-6{
  padding: var(--space-6);
}
.p-8{
  padding: var(--space-8);
}
.px-1{
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2{
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
.px-4{
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.px-5{
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}
.px-6{
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
.px-8{
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-12{
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}
.py-16{
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.py-2{
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3{
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.py-4{
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.py-6{
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.py-8{
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.pb-0{
  padding-bottom: 0px;
}
.pb-12{
  padding-bottom: var(--space-12);
}
.pb-2{
  padding-bottom: var(--space-2);
}
.pb-3{
  padding-bottom: var(--space-3);
}
.pb-4{
  padding-bottom: var(--space-4);
}
.pb-40{
  padding-bottom: 10rem;
}
.pb-6{
  padding-bottom: var(--space-6);
}
.pl-0{
  padding-left: 0px;
}
.pl-10{
  padding-left: var(--space-10);
}
.pl-12{
  padding-left: var(--space-12);
}
.pl-14{
  padding-left: 3.5rem;
}
.pl-2{
  padding-left: var(--space-2);
}
.pl-3{
  padding-left: var(--space-3);
}
.pl-4{
  padding-left: var(--space-4);
}
.pl-7{
  padding-left: 1.75rem;
}
.pl-8{
  padding-left: var(--space-8);
}
.pl-9{
  padding-left: 2.25rem;
}
.pr-1{
  padding-right: var(--space-1);
}
.pr-10{
  padding-right: var(--space-10);
}
.pr-12{
  padding-right: var(--space-12);
}
.pr-2{
  padding-right: var(--space-2);
}
.pr-3{
  padding-right: var(--space-3);
}
.pr-4{
  padding-right: var(--space-4);
}
.pr-8{
  padding-right: var(--space-8);
}
.pt-0{
  padding-top: 0px;
}
.pt-1{
  padding-top: var(--space-1);
}
.pt-16{
  padding-top: var(--space-16);
}
.pt-2{
  padding-top: var(--space-2);
}
.pt-3{
  padding-top: var(--space-3);
}
.pt-4{
  padding-top: var(--space-4);
}
.pt-6{
  padding-top: var(--space-6);
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans{
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl{
  font-size: var(--text-2xl);
}
.text-3xl{
  font-size: var(--text-3xl);
}
.text-4xl{
  font-size: var(--text-4xl);
}
.text-5xl{
  font-size: 3rem;
  line-height: 1;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-\[13px\]{
  font-size: 13px;
}
.text-\[9px\]{
  font-size: 9px;
}
.text-base{
  font-size: var(--text-base);
}
.text-lg{
  font-size: var(--text-lg);
}
.text-sm{
  font-size: var(--text-sm);
}
.text-xl{
  font-size: var(--text-xl);
}
.text-xs{
  font-size: var(--text-xs);
}
.font-bold{
  font-weight: var(--font-bold);
}
.font-extrabold{
  font-weight: 800;
}
.font-medium{
  font-weight: var(--font-medium);
}
.font-normal{
  font-weight: var(--font-normal);
}
.font-semibold{
  font-weight: var(--font-semibold);
}
.uppercase{
  text-transform: uppercase;
}
.capitalize{
  text-transform: capitalize;
}
.italic{
  font-style: italic;
}
.leading-none{
  line-height: 1;
}
.leading-relaxed{
  line-height: 1.625;
}
.leading-snug{
  line-height: 1.375;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-tight{
  letter-spacing: -0.025em;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.tracking-widest{
  letter-spacing: 0.1em;
}
.text-\[\#10B981\]{
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-\[\#1E3A8A\]{
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-\[var\(--color-brand\)\]{
  color: var(--color-brand);
}
.text-\[var\(--color-text-primary\)\]{
  color: var(--color-text-primary);
}
.text-\[var\(--color-text-secondary\)\]{
  color: var(--color-text-secondary);
}
.text-accent{
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent) / var(--tw-text-opacity, 1));
}
.text-accent-light{
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-light) / var(--tw-text-opacity, 1));
}
.text-amber-400{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-500{
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900{
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-amber-900\/70{
  color: rgb(120 53 15 / 0.7);
}
.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-brand{
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity, 1));
}
.text-cyan-400{
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-cyan-50{
  --tw-text-opacity: 1;
  color: rgb(236 254 255 / var(--tw-text-opacity, 1));
}
.text-cyan-600{
  --tw-text-opacity: 1;
  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
}
.text-cyan-700{
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}
.text-cyan-800{
  --tw-text-opacity: 1;
  color: rgb(21 94 117 / var(--tw-text-opacity, 1));
}
.text-emerald-300{
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-emerald-400{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.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-emerald-700{
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800{
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-error{
  --tw-text-opacity: 1;
  color: rgb(var(--color-error) / var(--tw-text-opacity, 1));
}
.text-error-light{
  --tw-text-opacity: 1;
  color: rgb(var(--color-error-light) / var(--tw-text-opacity, 1));
}
.text-error\/60{
  color: rgb(var(--color-error) / 0.6);
}
.text-error\/80{
  color: rgb(var(--color-error) / 0.8);
}
.text-error\/90{
  color: rgb(var(--color-error) / 0.9);
}
.text-gray-200{
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / 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-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-400{
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / 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-green-900{
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}
.text-indigo-100{
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity, 1));
}
.text-indigo-200{
  --tw-text-opacity: 1;
  color: rgb(199 210 254 / var(--tw-text-opacity, 1));
}
.text-indigo-300{
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.text-indigo-400{
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.text-indigo-500{
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-indigo-600{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-indigo-700{
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-indigo-800{
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.text-indigo-900{
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}
.text-info{
  --tw-text-opacity: 1;
  color: rgb(var(--color-info) / var(--tw-text-opacity, 1));
}
.text-info-light{
  --tw-text-opacity: 1;
  color: rgb(var(--color-info-light) / var(--tw-text-opacity, 1));
}
.text-info\/60{
  color: rgb(var(--color-info) / 0.6);
}
.text-info\/80{
  color: rgb(var(--color-info) / 0.8);
}
.text-orange-400{
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / 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-orange-700{
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-orange-800{
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-orange-900{
  --tw-text-opacity: 1;
  color: rgb(124 45 18 / var(--tw-text-opacity, 1));
}
.text-pink-400{
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / var(--tw-text-opacity, 1));
}
.text-pink-600{
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}
.text-pink-800{
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / var(--tw-text-opacity, 1));
}
.text-purple-100{
  --tw-text-opacity: 1;
  color: rgb(243 232 255 / var(--tw-text-opacity, 1));
}
.text-purple-200\/70{
  color: rgb(233 213 255 / 0.7);
}
.text-purple-300{
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.text-purple-400{
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-purple-500{
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / 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-purple-900{
  --tw-text-opacity: 1;
  color: rgb(88 28 135 / var(--tw-text-opacity, 1));
}
.text-red-200{
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-300\/70{
  color: rgb(252 165 165 / 0.7);
}
.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-rose-500{
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-rose-600{
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-800{
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}
.text-slate-100{
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.text-slate-200{
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.text-slate-300{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800{
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-slate-900{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-success{
  --tw-text-opacity: 1;
  color: rgb(var(--color-success) / var(--tw-text-opacity, 1));
}
.text-success-light{
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-light) / var(--tw-text-opacity, 1));
}
.text-success\/60{
  color: rgb(var(--color-success) / 0.6);
}
.text-success\/80{
  color: rgb(var(--color-success) / 0.8);
}
.text-teal-600{
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.text-teal-700{
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}
.text-teal-800{
  --tw-text-opacity: 1;
  color: rgb(17 94 89 / var(--tw-text-opacity, 1));
}
.text-tertiary{
  --tw-text-opacity: 1;
  color: rgb(var(--color-tertiary) / var(--tw-text-opacity, 1));
}
.text-tertiary\/70{
  color: rgb(var(--color-tertiary) / 0.7);
}
.text-tertiary\/80{
  color: rgb(var(--color-tertiary) / 0.8);
}
.text-text-primary{
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity, 1));
}
.text-text-secondary{
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-secondary) / var(--tw-text-opacity, 1));
}
.text-text-tertiary{
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-tertiary) / var(--tw-text-opacity, 1));
}
.text-transparent{
  color: transparent;
}
.text-violet-400{
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.text-warning{
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning) / var(--tw-text-opacity, 1));
}
.text-warning-light{
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-light) / var(--tw-text-opacity, 1));
}
.text-warning\/60{
  color: rgb(var(--color-warning) / 0.6);
}
.text-warning\/80{
  color: rgb(var(--color-warning) / 0.8);
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/20{
  color: rgb(255 255 255 / 0.2);
}
.text-white\/30{
  color: rgb(255 255 255 / 0.3);
}
.text-white\/40{
  color: rgb(255 255 255 / 0.4);
}
.text-white\/50{
  color: rgb(255 255 255 / 0.5);
}
.text-white\/60{
  color: rgb(255 255 255 / 0.6);
}
.text-white\/70{
  color: rgb(255 255 255 / 0.7);
}
.text-white\/80{
  color: rgb(255 255 255 / 0.8);
}
.text-white\/90{
  color: rgb(255 255 255 / 0.9);
}
.text-yellow-300\/80{
  color: rgb(253 224 71 / 0.8);
}
.text-yellow-400{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-500{
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / 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));
}
.text-yellow-900{
  --tw-text-opacity: 1;
  color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.overline{
  text-decoration-line: overline;
}
.line-through{
  text-decoration-line: line-through;
}
.underline-offset-4{
  text-underline-offset: 4px;
}
.placeholder-cyan-700::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(14 116 144 / var(--tw-placeholder-opacity, 1));
}
.placeholder-cyan-700::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(14 116 144 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-400::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-400::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-400::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-400::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-500::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-500::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1));
}
.placeholder-tertiary::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(var(--color-tertiary) / var(--tw-placeholder-opacity, 1));
}
.placeholder-tertiary::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(var(--color-tertiary) / var(--tw-placeholder-opacity, 1));
}
.accent-\[\#10B981\]{
  accent-color: #10B981;
}
.accent-blue-500{
  accent-color: #3b82f6;
}
.accent-error{
  accent-color: rgb(var(--color-error) / 1);
}
.opacity-0{
  opacity: 0;
}
.opacity-10{
  opacity: 0.1;
}
.opacity-100{
  opacity: 1;
}
.opacity-20{
  opacity: 0.2;
}
.opacity-25{
  opacity: 0.25;
}
.opacity-30{
  opacity: 0.3;
}
.opacity-40{
  opacity: 0.4;
}
.opacity-5{
  opacity: 0.05;
}
.opacity-50{
  opacity: 0.5;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-70{
  opacity: 0.7;
}
.opacity-75{
  opacity: 0.75;
}
.opacity-80{
  opacity: 0.8;
}
.opacity-90{
  opacity: 0.9;
}
.opacity-\[0\.03\]{
  opacity: 0.03;
}
.opacity-\[0\.05\]{
  opacity: 0.05;
}
.mix-blend-multiply{
  mix-blend-mode: multiply;
}
.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-\[0_0_20px_rgba\(168\2c 85\2c 247\2c 0\.4\)\]{
  --tw-shadow: 0 0 20px rgba(168,85,247,0.4);
  --tw-shadow-colored: 0 0 20px 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-\[0_0_20px_rgba\(239\2c 68\2c 68\2c 0\.1\)\]{
  --tw-shadow: 0 0 20px rgba(239,68,68,0.1);
  --tw-shadow-colored: 0 0 20px 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-\[0_0_20px_rgba\(245\2c 158\2c 11\2c 0\.1\)\]{
  --tw-shadow: 0 0 20px rgba(245,158,11,0.1);
  --tw-shadow-colored: 0 0 20px 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-\[0_0_20px_rgba\(251\2c 146\2c 60\2c 0\.3\)\]{
  --tw-shadow: 0 0 20px rgba(251,146,60,0.3);
  --tw-shadow-colored: 0 0 20px 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-\[0_0_20px_rgba\(59\2c 130\2c 246\2c 0\.1\)\]{
  --tw-shadow: 0 0 20px rgba(59,130,246,0.1);
  --tw-shadow-colored: 0 0 20px 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-\[0_4px_24px_rgba\(0\2c 0\2c 0\2c 0\.2\)\]{
  --tw-shadow: 0 4px 24px rgba(0,0,0,0.2);
  --tw-shadow-colored: 0 4px 24px 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-\[0_8px_32px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{
  --tw-shadow: 0 8px 32px rgba(0,0,0,0.3);
  --tw-shadow-colored: 0 8px 32px 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-inner{
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 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-lg{
  --tw-shadow: var(--shadow-lg);
  --tw-shadow-colored: var(--shadow-lg);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md{
  --tw-shadow: var(--shadow-md);
  --tw-shadow-colored: var(--shadow-md);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: var(--shadow-sm);
  --tw-shadow-colored: var(--shadow-sm);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl{
  --tw-shadow: var(--shadow-xl);
  --tw-shadow-colored: var(--shadow-xl);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-accent\/20{
  --tw-shadow-color: rgb(var(--color-accent) / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-amber-500\/20{
  --tw-shadow-color: rgb(245 158 11 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-cyan-500\/30{
  --tw-shadow-color: rgb(6 182 212 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-emerald-500\/20{
  --tw-shadow-color: rgb(16 185 129 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-indigo-100\/10{
  --tw-shadow-color: rgb(224 231 255 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-indigo-100\/40{
  --tw-shadow-color: rgb(224 231 255 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-indigo-500\/20{
  --tw-shadow-color: rgb(99 102 241 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-indigo-500\/30{
  --tw-shadow-color: rgb(99 102 241 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-indigo-900\/10{
  --tw-shadow-color: rgb(49 46 129 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/20{
  --tw-shadow-color: rgb(168 85 247 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/30{
  --tw-shadow-color: rgb(168 85 247 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-red-500\/20{
  --tw-shadow-color: rgb(239 68 68 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-success\/30{
  --tw-shadow-color: rgb(var(--color-success) / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline{
  outline-style: solid;
}
.ring-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);
}
.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-accent{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-accent) / var(--tw-ring-opacity, 1));
}
.ring-accent\/50{
  --tw-ring-color: rgb(var(--color-accent) / 0.5);
}
.ring-blue-400{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}
.ring-blue-400\/50{
  --tw-ring-color: rgb(96 165 250 / 0.5);
}
.ring-blue-500{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.ring-cyan-500\/30{
  --tw-ring-color: rgb(6 182 212 / 0.3);
}
.ring-emerald-50{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(236 253 245 / var(--tw-ring-opacity, 1));
}
.ring-emerald-500{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(16 185 129 / 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-indigo-50{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(238 242 255 / var(--tw-ring-opacity, 1));
}
.ring-white{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.ring-white\/20{
  --tw-ring-color: rgb(255 255 255 / 0.2);
}
.ring-white\/30{
  --tw-ring-color: rgb(255 255 255 / 0.3);
}
.ring-white\/50{
  --tw-ring-color: rgb(255 255 255 / 0.5);
}
.ring-yellow-400{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(250 204 21 / var(--tw-ring-opacity, 1));
}
.ring-offset-1{
  --tw-ring-offset-width: 1px;
}
.ring-offset-2{
  --tw-ring-offset-width: 2px;
}
.ring-offset-\[\#F0F2FF\]{
  --tw-ring-offset-color: #F0F2FF;
}
.ring-offset-background{
  --tw-ring-offset-color: rgb(var(--color-background) / 1);
}
.ring-offset-surface{
  --tw-ring-offset-color: rgb(var(--color-surface) / 1);
}
.ring-offset-white{
  --tw-ring-offset-color: #fff;
}
.blur{
  --tw-blur: blur(8px);
  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);
}
.blur-3xl{
  --tw-blur: blur(64px);
  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);
}
.blur-\[100px\]{
  --tw-blur: blur(100px);
  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);
}
.blur-\[120px\]{
  --tw-blur: blur(120px);
  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);
}
.blur-lg{
  --tw-blur: blur(16px);
  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);
}
.blur-sm{
  --tw-blur: blur(4px);
  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);
}
.blur-xl{
  --tw-blur: blur(24px);
  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);
}
.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);
}
.backdrop-blur{
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-2xl{
  --tw-backdrop-blur: blur(40px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-md{
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm{
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl{
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.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;
}
.delay-75{
  transition-delay: 75ms;
}
.duration-100{
  transition-duration: 100ms;
}
.duration-1000{
  transition-duration: 1000ms;
}
.duration-150{
  transition-duration: 150ms;
}
.duration-200{
  transition-duration: 200ms;
}
.duration-300{
  transition-duration: 300ms;
}
.duration-500{
  transition-duration: 500ms;
}
.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.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);
}
/* ========================================
   ADAPTRIX RESPONSIVE UTILITIES
   Prevent text overflow and button overlap
   ======================================== */
/* Safe text wrapping */
.text-safe {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
/* Safe button sizing */
.btn-safe {
    min-height: 2.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
/* Safe input constraints */
.input-safe {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
/* Responsive container */
/* Button group with wrapping */
/* Responsive card */
.card-responsive {
    padding: 1rem;
  }
@media (min-width: 640px) {
    .card-responsive {
      padding: 1.5rem;
    }
  }
@media (min-width: 1024px) {
    .card-responsive {
      padding: 2rem;
    }
  }
/* Adaptrix website animation delays */
.\[background-size\:16px_16px\]{
  background-size: 16px 16px;
}
.\[file\:\.\.\.\]{
  file: ...;
}
.\[file\:memory_client\.py\]{
  file: memory client.py;
}
.\[mask-image\:radial-gradient\(ellipse_50\%_50\%_at_50\%_50\%\2c black\2c transparent\)\]{
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,black,transparent);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,black,transparent);
}
.\[r\:PURCHASED\]{
  r: PURCHASED;
}
.\[r\:TYPE\]{
  r: TYPE;
}
/* CSS Variables */
:root {
  /* Accent colors for effects */
  --accent-blue: 79, 172, 254; /* Apple blue */
  --accent-purple: 191, 90, 242; /* Apple purple */
  --accent-green: 52, 199, 89; /* Apple green */
  --accent-orange: 255, 159, 10; /* Apple orange */
  --accent-red: 255, 59, 48; /* Apple red */

  /* Professional font stack (Adaptrix website) */
  --font-professional: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rounded font stack (legacy) */
  --font-rounded: 'Comfortaa', 'Segoe UI Emoji', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  --font-ui: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Base styles */
/* Component styles */
/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
/* Typography utilities */
.font-professional {
  font-family: var(--font-professional);
}
.font-rounded {
  font-family: var(--font-rounded);
}
.font-ui {
  font-family: var(--font-ui);
}
/* Disable text selection on UI elements */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* Focus styles */
*:focus-visible {
  outline: 2px solid rgba(var(--accent-blue), 0.5);
  outline-offset: 2px;
}
/* Responsive Utilities */
.file\:mr-4::file-selector-button{
  margin-right: var(--space-4);
}
.file\:rounded-lg::file-selector-button{
  border-radius: var(--radius-lg);
}
.file\:border-0::file-selector-button{
  border-width: 0px;
}
.file\:bg-brand\/20::file-selector-button{
  background-color: rgb(var(--color-primary) / 0.2);
}
.file\:bg-transparent::file-selector-button{
  background-color: transparent;
}
.file\:px-4::file-selector-button{
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.file\:py-2::file-selector-button{
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.file\:text-sm::file-selector-button{
  font-size: var(--text-sm);
}
.file\:font-medium::file-selector-button{
  font-weight: var(--font-medium);
}
.file\:font-semibold::file-selector-button{
  font-weight: var(--font-semibold);
}
.file\:text-accent::file-selector-button{
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent) / var(--tw-text-opacity, 1));
}
.placeholder\:text-tertiary::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(var(--color-tertiary) / var(--tw-text-opacity, 1));
}
.placeholder\:text-tertiary::placeholder{
  --tw-text-opacity: 1;
  color: rgb(var(--color-tertiary) / var(--tw-text-opacity, 1));
}
.first\:rounded-t-lg:first-child{
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.first\:rounded-t-md:first-child{
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.last\:rounded-b-lg:last-child{
  border-bottom-right-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}
.last\:rounded-b-md:last-child{
  border-bottom-right-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.last\:border-0:last-child{
  border-width: 0px;
}
.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}
.last\:pb-0:last-child{
  padding-bottom: 0px;
}
.checked\:border-blue-600:checked{
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.checked\:border-cyan-500:checked{
  --tw-border-opacity: 1;
  border-color: rgb(6 182 212 / var(--tw-border-opacity, 1));
}
.checked\:border-red-500:checked{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.checked\:bg-blue-600:checked{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.checked\:bg-cyan-500:checked{
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}
.checked\:bg-red-500:checked{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.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-110:hover{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  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-accent:hover{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent) / var(--tw-border-opacity, 1));
}
.hover\:border-accent\/50:hover{
  border-color: rgb(var(--color-accent) / 0.5);
}
.hover\:border-blue-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.hover\:border-blue-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.hover\:border-border:hover{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
}
.hover\:border-border-hover:hover{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border-hover) / var(--tw-border-opacity, 1));
}
.hover\:border-border\/50:hover{
  border-color: rgb(var(--color-border) / 0.5);
}
.hover\:border-brand\/30:hover{
  border-color: rgb(var(--color-primary) / 0.3);
}
.hover\:border-cyan-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}
.hover\:border-error\/30:hover{
  border-color: rgb(var(--color-error) / 0.3);
}
.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-indigo-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.hover\:border-indigo-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.hover\:border-info\/30:hover{
  border-color: rgb(var(--color-info) / 0.3);
}
.hover\:border-info\/50:hover{
  border-color: rgb(var(--color-info) / 0.5);
}
.hover\:border-orange-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));
}
.hover\:border-slate-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.hover\:border-success\/50:hover{
  border-color: rgb(var(--color-success) / 0.5);
}
.hover\:border-tertiary\/50:hover{
  border-color: rgb(var(--color-tertiary) / 0.5);
}
.hover\:border-warning\/50:hover{
  border-color: rgb(var(--color-warning) / 0.5);
}
.hover\:border-white\/10:hover{
  border-color: rgb(255 255 255 / 0.1);
}
.hover\:border-white\/20:hover{
  border-color: rgb(255 255 255 / 0.2);
}
.hover\:border-white\/40:hover{
  border-color: rgb(255 255 255 / 0.4);
}
.hover\:bg-\[\#059669\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#10B981\]\/20:hover{
  background-color: rgb(16 185 129 / 0.2);
}
.hover\:bg-\[\#1E3A8A\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#1E3A8A\]\/20:hover{
  background-color: rgb(30 58 138 / 0.2);
}
.hover\:bg-accent:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent) / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent-hover:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-hover) / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent\/10:hover{
  background-color: rgb(var(--color-accent) / 0.1);
}
.hover\:bg-accent\/20:hover{
  background-color: rgb(var(--color-accent) / 0.2);
}
.hover\:bg-accent\/30:hover{
  background-color: rgb(var(--color-accent) / 0.3);
}
.hover\:bg-accent\/80:hover{
  background-color: rgb(var(--color-accent) / 0.8);
}
.hover\:bg-accent\/90:hover{
  background-color: rgb(var(--color-accent) / 0.9);
}
.hover\:bg-amber-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.hover\:bg-background:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-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-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-500\/20:hover{
  background-color: rgb(59 130 246 / 0.2);
}
.hover\:bg-blue-500\/30:hover{
  background-color: rgb(59 130 246 / 0.3);
}
.hover\:bg-blue-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-dark:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-dark) / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand\/20:hover{
  background-color: rgb(var(--color-primary) / 0.2);
}
.hover\:bg-brand\/30:hover{
  background-color: rgb(var(--color-primary) / 0.3);
}
.hover\:bg-brand\/80:hover{
  background-color: rgb(var(--color-primary) / 0.8);
}
.hover\:bg-cyan-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(34 211 238 / var(--tw-bg-opacity, 1));
}
.hover\:bg-cyan-500\/10:hover{
  background-color: rgb(6 182 212 / 0.1);
}
.hover\:bg-cyan-500\/20:hover{
  background-color: rgb(6 182 212 / 0.2);
}
.hover\:bg-cyan-500\/5:hover{
  background-color: rgb(6 182 212 / 0.05);
}
.hover\:bg-cyan-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
}
.hover\:bg-cyan-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(14 116 144 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-500\/30:hover{
  background-color: rgb(16 185 129 / 0.3);
}
.hover\:bg-emerald-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.hover\:bg-error-dark:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-dark) / var(--tw-bg-opacity, 1));
}
.hover\:bg-error-light:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-error-light) / var(--tw-bg-opacity, 1));
}
.hover\:bg-error\/10:hover{
  background-color: rgb(var(--color-error) / 0.1);
}
.hover\:bg-error\/20:hover{
  background-color: rgb(var(--color-error) / 0.2);
}
.hover\:bg-error\/30:hover{
  background-color: rgb(var(--color-error) / 0.3);
}
.hover\:bg-error\/90:hover{
  background-color: rgb(var(--color-error) / 0.9);
}
.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-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-500\/20:hover{
  background-color: rgb(107 114 128 / 0.2);
}
.hover\:bg-gray-600\/50:hover{
  background-color: rgb(75 85 99 / 0.5);
}
.hover\:bg-gray-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-950:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / 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-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / 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-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / 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-info-light:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-light) / var(--tw-bg-opacity, 1));
}
.hover\:bg-info\/20:hover{
  background-color: rgb(var(--color-info) / 0.2);
}
.hover\:bg-info\/30:hover{
  background-color: rgb(var(--color-info) / 0.3);
}
.hover\:bg-info\/80:hover{
  background-color: rgb(var(--color-info) / 0.8);
}
.hover\:bg-info\/90:hover{
  background-color: rgb(var(--color-info) / 0.9);
}
.hover\:bg-orange-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(192 132 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-50\/80:hover{
  background-color: rgb(250 245 255 / 0.8);
}
.hover\:bg-purple-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-500\/30:hover{
  background-color: rgb(168 85 247 / 0.3);
}
.hover\:bg-purple-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / 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-500\/20:hover{
  background-color: rgb(239 68 68 / 0.2);
}
.hover\:bg-red-500\/30:hover{
  background-color: rgb(239 68 68 / 0.3);
}
.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-slate-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-100\/50:hover{
  background-color: rgb(241 245 249 / 0.5);
}
.hover\:bg-slate-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-700\/30:hover{
  background-color: rgb(51 65 85 / 0.3);
}
.hover\:bg-slate-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.hover\:bg-success-dark:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-dark) / var(--tw-bg-opacity, 1));
}
.hover\:bg-success-dark\/20:hover{
  background-color: rgb(var(--color-success-dark) / 0.2);
}
.hover\:bg-success-light:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-light) / var(--tw-bg-opacity, 1));
}
.hover\:bg-success\/20:hover{
  background-color: rgb(var(--color-success) / 0.2);
}
.hover\:bg-success\/30:hover{
  background-color: rgb(var(--color-success) / 0.3);
}
.hover\:bg-success\/90:hover{
  background-color: rgb(var(--color-success) / 0.9);
}
.hover\:bg-surface:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}
.hover\:bg-surface-elevated:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-elevated) / var(--tw-bg-opacity, 1));
}
.hover\:bg-surface-elevated\/80:hover{
  background-color: rgb(var(--color-surface-elevated) / 0.8);
}
.hover\:bg-surface-hover:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
}
.hover\:bg-surface\/20:hover{
  background-color: rgb(var(--color-surface) / 0.2);
}
.hover\:bg-surface\/30:hover{
  background-color: rgb(var(--color-surface) / 0.3);
}
.hover\:bg-surface\/50:hover{
  background-color: rgb(var(--color-surface) / 0.5);
}
.hover\:bg-surface\/60:hover{
  background-color: rgb(var(--color-surface) / 0.6);
}
.hover\:bg-surface\/80:hover{
  background-color: rgb(var(--color-surface) / 0.8);
}
.hover\:bg-teal-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}
.hover\:bg-tertiary:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-tertiary) / var(--tw-bg-opacity, 1));
}
.hover\:bg-tertiary\/30:hover{
  background-color: rgb(var(--color-tertiary) / 0.3);
}
.hover\:bg-tertiary\/90:hover{
  background-color: rgb(var(--color-tertiary) / 0.9);
}
.hover\:bg-warning\/30:hover{
  background-color: rgb(var(--color-warning) / 0.3);
}
.hover\:bg-white\/10:hover{
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/15:hover{
  background-color: rgb(255 255 255 / 0.15);
}
.hover\:bg-white\/20:hover{
  background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-white\/30:hover{
  background-color: rgb(255 255 255 / 0.3);
}
.hover\:bg-white\/40:hover{
  background-color: rgb(255 255 255 / 0.4);
}
.hover\:bg-white\/5:hover{
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-white\/50:hover{
  background-color: rgb(255 255 255 / 0.5);
}
.hover\:bg-yellow-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-500\/20:hover{
  background-color: rgb(234 179 8 / 0.2);
}
.hover\:bg-opacity-30:hover{
  --tw-bg-opacity: 0.3;
}
.hover\:from-blue-600:hover{
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-blue-700:hover{
  --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-cyan-400:hover{
  --tw-gradient-from: #22d3ee var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-green-700:hover{
  --tw-gradient-from: #15803d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(21 128 61 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-orange-600:hover{
  --tw-gradient-from: #ea580c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 88 12 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-purple-500\/30:hover{
  --tw-gradient-from: rgb(168 85 247 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-purple-600:hover{
  --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-red-700:hover{
  --tw-gradient-from: #b91c1c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(185 28 28 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-amber-700:hover{
  --tw-gradient-to: #b45309 var(--tw-gradient-to-position);
}
.hover\:to-blue-500\/30:hover{
  --tw-gradient-to: rgb(59 130 246 / 0.3) var(--tw-gradient-to-position);
}
.hover\:to-blue-600:hover{
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}
.hover\:to-blue-700:hover{
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}
.hover\:to-cyan-300:hover{
  --tw-gradient-to: #67e8f9 var(--tw-gradient-to-position);
}
.hover\:to-emerald-700:hover{
  --tw-gradient-to: #047857 var(--tw-gradient-to-position);
}
.hover\:to-indigo-700:hover{
  --tw-gradient-to: #4338ca var(--tw-gradient-to-position);
}
.hover\:to-rose-700:hover{
  --tw-gradient-to: #be123c var(--tw-gradient-to-position);
}
.hover\:text-\[\#1E3A8A\]:hover{
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.hover\:text-accent-hover:hover{
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-hover) / var(--tw-text-opacity, 1));
}
.hover\:text-accent-light:hover{
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-light) / var(--tw-text-opacity, 1));
}
.hover\:text-blue-300:hover{
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / 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-700:hover{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / 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-cyan-300:hover{
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.hover\:text-cyan-400:hover{
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-500:hover{
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.hover\:text-error:hover{
  --tw-text-opacity: 1;
  color: rgb(var(--color-error) / var(--tw-text-opacity, 1));
}
.hover\:text-error\/80:hover{
  color: rgb(var(--color-error) / 0.8);
}
.hover\:text-gray-500:hover{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / 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-gray-900:hover{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.hover\:text-indigo-500:hover{
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.hover\:text-indigo-600:hover{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.hover\:text-indigo-700:hover{
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.hover\:text-info\/80:hover{
  color: rgb(var(--color-info) / 0.8);
}
.hover\:text-info\/90:hover{
  color: rgb(var(--color-info) / 0.9);
}
.hover\:text-red-300:hover{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 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-slate-600:hover{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-700:hover{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-900:hover{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.hover\:text-success\/80:hover{
  color: rgb(var(--color-success) / 0.8);
}
.hover\:text-tertiary:hover{
  --tw-text-opacity: 1;
  color: rgb(var(--color-tertiary) / var(--tw-text-opacity, 1));
}
.hover\:text-tertiary\/80:hover{
  color: rgb(var(--color-tertiary) / 0.8);
}
.hover\:text-text-primary:hover{
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity, 1));
}
.hover\:text-warning\/80:hover{
  color: rgb(var(--color-warning) / 0.8);
}
.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
.hover\:no-underline:hover{
  text-decoration-line: none;
}
.hover\:opacity-100:hover{
  opacity: 1;
}
.hover\:opacity-80:hover{
  opacity: 0.8;
}
.hover\:opacity-90:hover{
  opacity: 0.9;
}
.hover\:shadow-lg:hover{
  --tw-shadow: var(--shadow-lg);
  --tw-shadow-colored: var(--shadow-lg);
  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: var(--shadow-md);
  --tw-shadow-colored: var(--shadow-md);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-sm:hover{
  --tw-shadow: var(--shadow-sm);
  --tw-shadow-colored: var(--shadow-sm);
  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: var(--shadow-xl);
  --tw-shadow-colored: var(--shadow-xl);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:brightness-110:hover{
  --tw-brightness: brightness(1.1);
  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);
}
.hover\:file\:bg-brand\/30::file-selector-button:hover{
  background-color: rgb(var(--color-primary) / 0.3);
}
.focus\:border-accent:focus{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent) / var(--tw-border-opacity, 1));
}
.focus\:border-blue-400:focus{
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.focus\:border-blue-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.focus\:border-brand\/50:focus{
  border-color: rgb(var(--color-primary) / 0.5);
}
.focus\:border-cyan-400:focus{
  --tw-border-opacity: 1;
  border-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}
.focus\:border-cyan-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(6 182 212 / var(--tw-border-opacity, 1));
}
.focus\:border-error-light:focus{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-error-light) / var(--tw-border-opacity, 1));
}
.focus\:border-info:focus{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info) / var(--tw-border-opacity, 1));
}
.focus\:border-info\/50:focus{
  border-color: rgb(var(--color-info) / 0.5);
}
.focus\:border-purple-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.focus\:border-red-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.focus\:border-tertiary:focus{
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-tertiary) / var(--tw-border-opacity, 1));
}
.focus\:border-transparent:focus{
  border-color: transparent;
}
.focus\:bg-surface:focus{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}
.focus\:bg-surface-elevated:focus{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-elevated) / 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-accent:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-accent) / var(--tw-ring-opacity, 1));
}
.focus\:ring-accent\/50:focus{
  --tw-ring-color: rgb(var(--color-accent) / 0.5);
}
.focus\:ring-blue-300:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
}
.focus\:ring-blue-400\/50:focus{
  --tw-ring-color: rgb(96 165 250 / 0.5);
}
.focus\:ring-blue-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-blue-500\/30:focus{
  --tw-ring-color: rgb(59 130 246 / 0.3);
}
.focus\:ring-brand:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-primary) / var(--tw-ring-opacity, 1));
}
.focus\:ring-cyan-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(6 182 212 / var(--tw-ring-opacity, 1));
}
.focus\:ring-cyan-500\/30:focus{
  --tw-ring-color: rgb(6 182 212 / 0.3);
}
.focus\:ring-gray-400\/50:focus{
  --tw-ring-color: rgb(156 163 175 / 0.5);
}
.focus\:ring-gray-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));
}
.focus\:ring-indigo-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}
.focus\:ring-indigo-500\/20:focus{
  --tw-ring-color: rgb(99 102 241 / 0.2);
}
.focus\:ring-info:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-info) / var(--tw-ring-opacity, 1));
}
.focus\:ring-orange-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity, 1));
}
.focus\:ring-pink-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(236 72 153 / var(--tw-ring-opacity, 1));
}
.focus\:ring-purple-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / 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-tertiary:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-tertiary) / var(--tw-ring-opacity, 1));
}
.focus\:ring-white\/20:focus{
  --tw-ring-color: rgb(255 255 255 / 0.2);
}
.focus\:ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}
.focus-visible\:outline-none:focus-visible{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible{
  --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-visible\:ring-\[\#10B981\]:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-\[\#10B981\]\/50:focus-visible{
  --tw-ring-color: rgb(16 185 129 / 0.5);
}
.focus-visible\:ring-\[\#1E3A8A\]:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 58 138 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-accent:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-accent) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-accent\/50:focus-visible{
  --tw-ring-color: rgb(var(--color-accent) / 0.5);
}
.focus-visible\:ring-border:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-border) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-white\/50:focus-visible{
  --tw-ring-color: rgb(255 255 255 / 0.5);
}
.focus-visible\:ring-offset-2:focus-visible{
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible{
  --tw-ring-offset-color: rgb(var(--color-background) / 1);
}
.active\:cursor-grabbing:active{
  cursor: grabbing;
}
.disabled\:pointer-events-none:disabled{
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:bg-accent\/50:disabled{
  background-color: rgb(var(--color-accent) / 0.5);
}
.disabled\:bg-gray-100:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-gray-400:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-slate-600:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-surface:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}
.disabled\:opacity-30:disabled{
  opacity: 0.3;
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.group:hover .group-hover\:visible{
  visibility: visible;
}
.group:hover .group-hover\:translate-x-1{
  --tw-translate-x: var(--space-1);
  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));
}
.group:hover .group-hover\: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));
}
.group:hover .group-hover\:translate-y-0{
  --tw-translate-y: 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));
}
.group:hover .group-hover\:scale-110{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  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));
}
.group:hover .group-hover\:border-brand\/50{
  border-color: rgb(var(--color-primary) / 0.5);
}
.group:hover .group-hover\:text-accent{
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent) / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-info{
  --tw-text-opacity: 1;
  color: rgb(var(--color-info) / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-purple-200{
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-slate-800{
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-yellow-400{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:\!opacity-100{
  opacity: 1 !important;
}
.group:hover .group-hover\:opacity-100{
  opacity: 1;
}
.group:hover .group-hover\:opacity-40{
  opacity: 0.4;
}
.group:hover .group-hover\:opacity-60{
  opacity: 0.6;
}
.group:hover .group-hover\:shadow-lg{
  --tw-shadow: var(--shadow-lg);
  --tw-shadow-colored: var(--shadow-lg);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed{
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-70{
  opacity: 0.7;
}
.dark\:border-blue-800:is([data-theme="dark"] *){
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}
.dark\:border-border:is([data-theme="dark"] *){
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
}
.dark\:border-emerald-800:is([data-theme="dark"] *){
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-600:is([data-theme="dark"] *){
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-700:is([data-theme="dark"] *){
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dark\:border-green-800:is([data-theme="dark"] *){
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}
.dark\:border-orange-800:is([data-theme="dark"] *){
  --tw-border-opacity: 1;
  border-color: rgb(154 52 18 / var(--tw-border-opacity, 1));
}
.dark\:border-purple-800:is([data-theme="dark"] *){
  --tw-border-opacity: 1;
  border-color: rgb(107 33 168 / var(--tw-border-opacity, 1));
}
.dark\:border-red-800:is([data-theme="dark"] *){
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}
.dark\:border-yellow-800:is([data-theme="dark"] *){
  --tw-border-opacity: 1;
  border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
}
.dark\:bg-amber-900\/20:is([data-theme="dark"] *){
  background-color: rgb(120 53 15 / 0.2);
}
.dark\:bg-blue-800:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}
.dark\:bg-blue-900\/20:is([data-theme="dark"] *){
  background-color: rgb(30 58 138 / 0.2);
}
.dark\:bg-blue-900\/30:is([data-theme="dark"] *){
  background-color: rgb(30 58 138 / 0.3);
}
.dark\:bg-emerald-950\/30:is([data-theme="dark"] *){
  background-color: rgb(2 44 34 / 0.3);
}
.dark\:bg-gray-700:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-800:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-900:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-800:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-900\/20:is([data-theme="dark"] *){
  background-color: rgb(20 83 45 / 0.2);
}
.dark\:bg-green-900\/30:is([data-theme="dark"] *){
  background-color: rgb(20 83 45 / 0.3);
}
.dark\:bg-info:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info) / var(--tw-bg-opacity, 1));
}
.dark\:bg-info\/10:is([data-theme="dark"] *){
  background-color: rgb(var(--color-info) / 0.1);
}
.dark\:bg-info\/20:is([data-theme="dark"] *){
  background-color: rgb(var(--color-info) / 0.2);
}
.dark\:bg-neutral-800:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.dark\:bg-neutral-900\/90:is([data-theme="dark"] *){
  background-color: rgb(23 23 23 / 0.9);
}
.dark\:bg-orange-900\/20:is([data-theme="dark"] *){
  background-color: rgb(124 45 18 / 0.2);
}
.dark\:bg-purple-900\/20:is([data-theme="dark"] *){
  background-color: rgb(88 28 135 / 0.2);
}
.dark\:bg-red-900\/20:is([data-theme="dark"] *){
  background-color: rgb(127 29 29 / 0.2);
}
.dark\:bg-red-950:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));
}
.dark\:bg-surface:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}
.dark\:bg-surface-elevated:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-elevated) / var(--tw-bg-opacity, 1));
}
.dark\:bg-warning:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning) / var(--tw-bg-opacity, 1));
}
.dark\:bg-warning\/10:is([data-theme="dark"] *){
  background-color: rgb(var(--color-warning) / 0.1);
}
.dark\:bg-yellow-900\/20:is([data-theme="dark"] *){
  background-color: rgb(113 63 18 / 0.2);
}
.dark\:from-blue-950\/30:is([data-theme="dark"] *){
  --tw-gradient-from: rgb(23 37 84 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(23 37 84 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-purple-950\/30:is([data-theme="dark"] *){
  --tw-gradient-from: rgb(59 7 100 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 7 100 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:to-indigo-950\/30:is([data-theme="dark"] *){
  --tw-gradient-to: rgb(30 27 75 / 0.3) var(--tw-gradient-to-position);
}
.dark\:to-transparent:is([data-theme="dark"] *){
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.dark\:text-amber-300:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-100:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-200:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-400:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-500:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-200:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-300:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-400:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-100:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-200:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-300:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dark\:text-green-100:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}
.dark\:text-green-200:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}
.dark\:text-green-300:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.dark\:text-green-400:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.dark\:text-green-500:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.dark\:text-info:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(var(--color-info) / var(--tw-text-opacity, 1));
}
.dark\:text-orange-100:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(255 237 213 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-200:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-400:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-500:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-400:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-500:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.dark\:text-red-100:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}
.dark\:text-red-200:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.dark\:text-red-300:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:text-red-500:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.dark\:text-tertiary:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(var(--color-tertiary) / var(--tw-text-opacity, 1));
}
.dark\:text-warning-light:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-light) / var(--tw-text-opacity, 1));
}
.dark\:text-white:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-100:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(254 249 195 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-400:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-500:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.dark\:ring-blue-500:is([data-theme="dark"] *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.dark\:hover\:border-info:hover:is([data-theme="dark"] *){
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info) / var(--tw-border-opacity, 1));
}
.dark\:hover\:bg-black\/20:hover:is([data-theme="dark"] *){
  background-color: rgb(0 0 0 / 0.2);
}
.dark\:hover\:bg-blue-900\/20:hover:is([data-theme="dark"] *){
  background-color: rgb(30 58 138 / 0.2);
}
.dark\:hover\:bg-emerald-900\/20:hover:is([data-theme="dark"] *){
  background-color: rgb(6 78 59 / 0.2);
}
.dark\:hover\:bg-gray-600:hover:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-700:hover:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-800:hover:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-indigo-900\/20:hover:is([data-theme="dark"] *){
  background-color: rgb(49 46 129 / 0.2);
}
.dark\:hover\:bg-info\/20:hover:is([data-theme="dark"] *){
  background-color: rgb(var(--color-info) / 0.2);
}
.dark\:hover\:bg-neutral-800:hover:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-purple-900\/20:hover:is([data-theme="dark"] *){
  background-color: rgb(88 28 135 / 0.2);
}
.dark\:hover\:bg-surface:hover:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-surface-elevated:hover:is([data-theme="dark"] *){
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-elevated) / var(--tw-bg-opacity, 1));
}
.dark\:hover\:text-gray-200:hover:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-gray-300:hover:is([data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px){
  .sm\:block{
    display: block;
  }
  .sm\:inline{
    display: inline;
  }
  .sm\:flex{
    display: flex;
  }
  .sm\:inline-flex{
    display: inline-flex;
  }
  .sm\:hidden{
    display: none;
  }
  .sm\:w-\[80\%\]{
    width: 80%;
  }
  .sm\:flex-1{
    flex: 1 1 0%;
  }
  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:flex-row{
    flex-direction: row;
  }
  .sm\:items-center{
    align-items: center;
  }
  .sm\:justify-between{
    justify-content: space-between;
  }
  .sm\:p-6{
    padding: var(--space-6);
  }
  .sm\:px-6{
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .sm\:text-2xl{
    font-size: var(--text-2xl);
  }
}
@media (min-width: 768px){
  .md\:right-12{
    right: var(--space-12);
  }
  .md\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .md\:inline{
    display: inline;
  }
  .md\:flex{
    display: flex;
  }
  .md\:table-cell{
    display: table-cell;
  }
  .md\:hidden{
    display: none;
  }
  .md\:w-64{
    width: 16rem;
  }
  .md\:w-\[75\%\]{
    width: 75%;
  }
  .md\:w-\[88\%\]{
    width: 88%;
  }
  .md\:max-w-4xl{
    max-width: 56rem;
  }
  .md\:max-w-6xl{
    max-width: 72rem;
  }
  .md\:max-w-\[80\%\]{
    max-width: 80%;
  }
  .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\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:grid-cols-8{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .md\:flex-row{
    flex-direction: row;
  }
  .md\:p-6{
    padding: var(--space-6);
  }
  .md\:px-6{
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}
@media (min-width: 1024px){
  .lg\:col-span-1{
    grid-column: span 1 / span 1;
  }
  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }
  .lg\:col-span-6{
    grid-column: span 6 / span 6;
  }
  .lg\:-mx-6{
    margin-left: calc(var(--space-6) * -1);
    margin-right: calc(var(--space-6) * -1);
  }
  .lg\:mb-6{
    margin-bottom: var(--space-6);
  }
  .lg\:inline{
    display: inline;
  }
  .lg\:hidden{
    display: none;
  }
  .lg\:h-6{
    height: var(--space-6);
  }
  .lg\:w-6{
    width: var(--space-6);
  }
  .lg\:w-\[70\%\]{
    width: 70%;
  }
  .lg\:max-w-\[70\%\]{
    max-width: 70%;
  }
  .lg\: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));
  }
  .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\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:grid-cols-8{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .lg\:p-6{
    padding: var(--space-6);
  }
  .lg\:p-7{
    padding: 1.75rem;
  }
  .lg\:px-6{
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .lg\:px-8{
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .lg\:pl-64{
    padding-left: 16rem;
  }
  .lg\:text-2xl{
    font-size: var(--text-2xl);
  }
  .lg\:text-base{
    font-size: var(--text-base);
  }
}
@media (min-width: 1280px){
  .xl\:w-\[65\%\]{
    width: 65%;
  }
  .xl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.\[\&_p\]\:leading-relaxed p{
  line-height: 1.625;
}
/* ========================================
 ANALYTICS AI - ADAPTRIX DESIGN SYSTEM
 Dark Professional Theme - Enterprise Data Intelligence Platform

 Based on REAL Adaptrix website (adaptrix.ai):
 - Primary Background: Dark Blue (#1E3A8A) - main sections
 - Secondary Background: Dark Gray (#1F2937) - cards and surfaces
 - Surface: Near Black (#111827) - deep backgrounds
 - Text: White (#FFFFFF) primary, Gray-300 (#D1D5DB) secondary
 - Typography: Sans-serif system fonts, clean and modern
 - Spacing: Generous responsive whitespace (px-4 sm:px-6 lg:px-8)
 - Radius: rounded-xl for cards (12px)
 - Shadows: Subtle dark overlays for depth
 - Responsive: Mobile-first with proper text wrapping
 ======================================== */

/* ========================================
 ROOT VARIABLES - ADAPTRIX DARK THEME (DEFAULT)
 ======================================== */
:root {
  /* ===== ADAPTRIX BRAND COLORS (from real site) ===== */
  --brand-blue-dark: 30, 58, 138; /* #1E3A8A - Primary dark blue */
  --brand-blue-hover: 37, 99, 235; /* #2563EB - Hover state (blue-600) */
  --brand-gray-dark: 31, 41, 55; /* #1F2937 - Dark gray surfaces */
  --brand-gray-darker: 17, 24, 39; /* #111827 - Near black */
  --brand-gray-border: 55, 65, 81; /* #374151 - Border gray-700 */
  --brand-accent: 96, 165, 250; /* #60A5FA - Accent blue-400 */

  /* Adaptrix uses dark blue backgrounds */
  --gradient-brand: linear-gradient(135deg, rgb(var(--brand-blue-dark)), rgb(var(--brand-gray-dark)));

  /* Primary Colors - Dark blue palette */
  --color-primary: 30, 58, 138; /* #1E3A8A - Brand blue */
  --color-primary-hover: 37, 99, 235; /* #2563EB - Blue-600 hover */
  --color-primary-light: 219, 234, 254; /* #DBEAFE - Blue-100 for light accents */

  /* Secondary Color - Neutral slate for balance */
  --color-secondary: 100, 116, 139; /* #64748B - Slate-500 */

  /* Accent Colors - Bright blue for CTAs and highlights */
  --color-accent: 96, 165, 250; /* #60A5FA - Blue-400 for accents */
  --color-accent-hover: 59, 130, 246; /* #3B82F6 - Blue-500 hover */
  --color-accent-light: 30, 58, 138; /* #1E3A8A - Dark blue backgrounds */
  --color-accent-gradient-start: 96, 165, 250; /* Blue-400 */
  --color-accent-gradient-end: 59, 130, 246; /* Blue-500 */

  /* ===== ADAPTRIX GRAY SCALE (Neutral) ===== */
  --gray-950: 11, 15, 20; /* #0B0F14 */
  --gray-900: 17, 24, 39; /* #111827 */
  --gray-800: 31, 41, 55; /* #1F2937 */
  --gray-700: 55, 65, 81; /* #374151 */
  --gray-600: 75, 85, 99; /* #4B5563 */
  --gray-500: 107, 114, 128; /* #6B7280 */
  --gray-400: 156, 163, 175; /* #9CA3AF */
  --gray-300: 209, 213, 219; /* #D1D5DB */
  --gray-200: 229, 231, 235; /* #E5E7EB */
  --gray-100: 243, 244, 246; /* #F3F4F6 */
  --gray-50: 249, 250, 251; /* #F9FAFB */

  /* Neutral Colors - Dark theme backgrounds (Improved contrast) */
  --color-background: 15, 23, 42; /* #0F172A - Slate-900 - Main dark background */
  --color-background-secondary: 30, 41, 59; /* #1E293B - Slate-800 - Secondary bg */
  --color-surface: 30, 41, 59; /* #1E293B - Slate-800 - Card surfaces */
  --color-surface-elevated: 51, 65, 85; /* #334155 - Slate-700 - Elevated cards */
  --color-surface-hover: 71, 85, 105; /* #475569 - Slate-600 - Hover states */
  --color-surface-pressed: 100, 116, 139; /* #64748B - Slate-500 - Pressed states */

  /* Border Colors - Improved visibility for WCAG compliance */
  --color-border: 71, 85, 105; /* #475569 - Slate-600 - Visible borders (3:1 contrast) */
  --color-border-hover: 100, 116, 139; /* #64748B - Slate-500 - Interactive borders */
  --color-border-focus: 96, 165, 250; /* #60A5FA - Blue-400 - Focus states */
  --color-border-muted: 51, 65, 85; /* #334155 - Slate-700 - Subtle borders */

  /* Text Colors - Better hierarchy differentiation */
  --color-text-primary: 255, 255, 255; /* #FFFFFF - White - Primary text */
  --color-text-secondary: 226, 232, 240; /* #E2E8F0 - Slate-200 - Secondary text (improved contrast) */
  --color-text-tertiary: 148, 163, 184; /* #94A3B8 - Slate-400 - Muted text (better separation) */
  --color-text-quaternary: 100, 116, 139; /* #64748B - Slate-500 - Placeholder */
  --color-text-disabled: 71, 85, 105; /* #475569 - Slate-600 - Disabled text */
  --color-text-inverse: 15, 23, 42; /* #0F172A - Dark for light backgrounds */

  /* Additional semantic text colors */
  --color-tertiary: 107, 114, 128; /* Gray-500 - Same as text-tertiary */

  /* Extended neutral palette */
  --color-neutral: 156, 163, 175; /* Gray-400 */
  --color-neutral-light: 209, 213, 219; /* Gray-300 */
  --color-neutral-dark: 75, 85, 99; /* Gray-600 */

  /* Extended surface variants - dark theme */
  --color-surface-dark: 17, 24, 39; /* #111827 - Gray-900 - Darker surface */

  /* Extended primary variants */
  --color-primary-dark: 30, 58, 138; /* #1E3A8A - Brand blue */

  /* Extended semantic color variants - brighter for dark theme */
  --color-success-dark: 34, 197, 94; /* #22C55E - Green-500 */
  --color-warning-dark: 245, 158, 11; /* #F59E0B - Amber-500 */
  --color-error-dark: 239, 68, 68; /* #EF4444 - Red-500 */
  --color-info-dark: 59, 130, 246; /* #3B82F6- Blue-500 */

  /* Semantic Colors - Modern and accessible */
  --color-success: 5, 150, 105; /* Emerald-600 - Professional green */
  --color-success-light: 16, 185, 129; /* Emerald-500 */
  --color-success-bg: 236, 253, 245; /* Emerald-50 */
  --color-warning: 217, 119, 6; /* Amber-600 - Professional orange */
  --color-warning-light: 245, 158, 11; /* Amber-500 */
  --color-warning-bg: 255, 251, 235; /* Amber-50 */
  --color-error: 220, 38, 38; /* Red-600 - Clear error */
  --color-error-light: 239, 68, 68; /* Red-500 */
  --color-error-bg: 254, 242, 242; /* Red-50 */
  --color-info: 28, 100, 242; /* Blue-700 - Professional info */
  --color-info-light: 59, 130, 246; /* Blue-500 */
  --color-info-bg: 239, 246, 255; /* Blue-50 */

  /* Dark Theme Shadows - Deeper and more prominent */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

  /* Interactive Shadows - For dark theme hover states */
  --shadow-hover: 0 6px 20px 0 rgba(96, 165, 250, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.3);

  /* Gradient Shadows - Modern depth for dark theme */
  --shadow-gradient: 0 8px 30px rgba(96, 165, 250, 0.15), 0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-dropdown: 0 10px 25px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.4);

  /* Smooth Transitions - Modern easing curves */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-smooth: 250ms cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Animation Curves */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);

  /* Border Radius - Adaptrix style (rounded-xl for cards) */
  --radius-sm: 0.375rem; /* 6px - Slightly rounded */
  --radius-md: 0.5rem; /* 8px - Standard buttons */
  --radius-lg: 0.75rem; /* 12px - Large buttons, inputs */
  --radius-xl: 0.75rem; /* 12px - Cards (Adaptrix rounded-xl = 0.75rem) */
  --radius-2xl: 1rem; /* 16px - Modals and large elements */
  --radius-full: 9999px; /* Pills and circles */

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ======================================== 
 DARK THEME 
 ======================================== */
/* Dark theme - Adaptrix-style dark mode */
[data-theme='dark'] {
  /* Primary Colors - Light colors for dark backgrounds */
  --color-primary: 203, 213, 225; /* Slate-300 - Light on dark */
  --color-primary-hover: 226, 232, 240; /* Slate-200 - Brighter hover */
  --color-primary-light: 51, 65, 85; /* Slate-700 - Dark variant */

  /* Secondary Color - Lighter slate for dark theme */
  --color-secondary: 148, 163, 184; /* #94A3B8 - Slate-400 */

  /* Accent Colors - Vibrant in dark mode */
  --color-accent: 129, 140, 248; /* Indigo-400 - Bright accent */
  --color-accent-hover: 165, 180, 252; /* Indigo-300 - Brighter hover */
  --color-accent-light: 30, 41, 59; /* Slate-800 - Dark backgrounds */

  /* Neutral Colors - True dark theme */
  --color-background: 15, 23, 42; /* Slate-900 - Main dark bg */
  --color-background-secondary: 20, 25, 36; /* Slightly lighter dark bg */
  --color-surface: 30, 41, 59; /* Slate-800 - Card surfaces */
  --color-surface-elevated: 51, 65, 85; /* Slate-700 - Elevated cards */
  --color-surface-hover: 71, 85, 105; /* Slate-600 - Hover states */
  --color-surface-pressed: 82, 97, 120; /* Slate-500 - Pressed states */
  --color-border: 51, 65, 85; /* Slate-700 - Subtle borders */
  --color-border-hover: 71, 85, 105; /* Slate-600 - Visible borders */
  --color-border-muted: 30, 41, 59; /* Slate-800 - Very subtle borders */

  /* Text Colors */
  --color-text-primary: 243, 244, 246; /* Gray-100 */
  --color-text-secondary: 209, 213, 219; /* Gray-300 */
  --color-text-tertiary: 156, 163, 175; /* Gray-400 */
  --color-text-disabled: 107, 114, 128; /* Gray-500 */

  /* Additional semantic text colors */
  --color-tertiary: 156, 163, 175; /* Gray-400 - Same as text-tertiary */

  /* Extended neutral palette */
  --color-neutral: 107, 114, 128; /* Gray-500 */
  --color-neutral-light: 156, 163, 175; /* Gray-400 */
  --color-neutral-dark: 75, 85, 99; /* Gray-600 */

  /* Extended surface variants */
  --color-surface-dark: 15, 23, 42; /* Slate-900 - Darker surface */

  /* Extended primary variants */
  --color-primary-dark: 241, 245, 249; /* Light for dark theme */

  /* Extended semantic color variants */
  --color-success-dark: 34, 197, 94; /* Green-500 */
  --color-warning-dark: 245, 158, 11; /* Amber-500 */
  --color-error-dark: 239, 68, 68; /* Red-500 */
  --color-info-dark: 59, 130, 246; /* Blue-500 */

  /* Semantic Colors */
  --color-success: 74, 222, 128; /* Green-400 */
  --color-warning: 251, 191, 36; /* Amber-400 */
  --color-error: 248, 113, 113; /* Red-400 */
  --color-info: 96, 165, 250; /* Blue-400 */

  /* Shadows (darker for dark theme) */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* ========================================
 LIGHT THEME - ADAPTRIX WEBSITE STYLE
 ======================================== */
/* Professional light theme based on Adaptrix website (adaptrix.ai) */
[data-theme='light'] {
  /* Primary Colors - Adaptrix Blue */
  --color-primary: 30, 58, 138;        /* #1E3A8A - Blue-800 */
  --color-primary-hover: 37, 99, 235;  /* #2563EB - Blue-600 */
  --color-primary-light: 59, 130, 246; /* #3B82F6 - Blue-500 */
  --color-primary-dark: 30, 58, 138;   /* #1E3A8A - Same as primary */

  /* Secondary Color - Neutral slate for light theme */
  --color-secondary: 100, 116, 139;    /* #64748B - Slate-500 */

  /* Accent Colors - Adaptrix Green */
  --color-accent: 16, 185, 129;        /* #10B981 - Emerald-500 */
  --color-accent-hover: 5, 150, 105;   /* #059669 - Emerald-600 */
  --color-accent-light: 52, 211, 153;  /* #34D399 - Emerald-400 */

  /* Backgrounds - Clean White */
  --color-background: 255, 255, 255;           /* #FFFFFF - White */
  --color-background-secondary: 243, 244, 246; /* #F3F4F6 - Gray-100 */
  --color-surface: 255, 255, 255;              /* #FFFFFF - White */
  --color-surface-elevated: 249, 250, 251;     /* #F9FAFB - Gray-50 */
  --color-surface-hover: 243, 244, 246;        /* #F3F4F6 - Gray-100 */
  --color-surface-pressed: 229, 231, 235;      /* #E5E7EB - Gray-200 */
  --color-surface-dark: 249, 250, 251;         /* #F9FAFB - Gray-50 */

  /* Borders - Visible on Light */
  --color-border: 229, 231, 235;       /* #E5E7EB - Gray-200 */
  --color-border-hover: 209, 213, 219; /* #D1D5DB - Gray-300 */
  --color-border-muted: 243, 244, 246; /* #F3F4F6 - Gray-100 */
  --color-border-focus: 96, 165, 250;  /* #60A5FA - Blue-400 */

  /* Text Colors - Dark on Light */
  --color-text-primary: 31, 41, 55;      /* #1F2937 - Gray-800 */
  --color-text-secondary: 75, 85, 99;    /* #4B5563 - Gray-600 */
  --color-text-tertiary: 107, 114, 128;  /* #6B7280 - Gray-500 */
  --color-text-quaternary: 156, 163, 175; /* #9CA3AF - Gray-400 */
  --color-text-disabled: 156, 163, 175;  /* #9CA3AF - Gray-400 */
  --color-text-inverse: 255, 255, 255;   /* #FFFFFF - White for dark backgrounds */

  /* Additional semantic text colors */
  --color-tertiary: 107, 114, 128; /* Gray-500 */

  /* Extended neutral palette */
  --color-neutral: 156, 163, 175;   /* Gray-400 */
  --color-neutral-light: 209, 213, 219; /* Gray-300 */
  --color-neutral-dark: 75, 85, 99;     /* Gray-600 */

  /* Semantic Colors - Professional */
  --color-success: 5, 150, 105;          /* #059669 - Emerald-600 */
  --color-success-light: 16, 185, 129;   /* #10B981 - Emerald-500 */
  --color-success-dark: 4, 120, 87;      /* #047857 - Emerald-700 */
  --color-success-bg: 236, 253, 245;     /* #ECFDF5 - Emerald-50 */

  --color-warning: 217, 119, 6;          /* #D97706 - Amber-600 */
  --color-warning-light: 245, 158, 11;   /* #F59E0B - Amber-500 */
  --color-warning-dark: 180, 83, 9;      /* #B45309 - Amber-700 */
  --color-warning-bg: 255, 251, 235;     /* #FFFBEB - Amber-50 */

  --color-error: 220, 38, 38;            /* #DC2626 - Red-600 */
  --color-error-light: 239, 68, 68;      /* #EF4444 - Red-500 */
  --color-error-dark: 185, 28, 28;       /* #B91C1C - Red-700 */
  --color-error-bg: 254, 242, 242;       /* #FEF2F2 - Red-50 */

  --color-info: 28, 100, 242;            /* #1C64F2 - Blue-700 */
  --color-info-light: 59, 130, 246;      /* #3B82F6 - Blue-500 */
  --color-info-dark: 30, 58, 138;        /* #1E3A8A - Blue-800 */
  --color-info-bg: 239, 246, 255;        /* #EFF6FF - Blue-50 */

  /* Light Theme Shadows - Adaptrix Website Style */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Interactive Shadows */
  --shadow-hover: 0 6px 20px 0 rgba(16, 185, 129, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.2);

  /* Card Shadow - Adaptrix Website */
  --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-dropdown: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Default to Light Theme (Adaptrix Website Style) */
:root:not([data-theme]) {
  /* Primary Colors - Adaptrix Blue */
  --color-primary: 30, 58, 138;        /* #1E3A8A */
  --color-primary-hover: 37, 99, 235;  /* #2563EB */
  --color-primary-light: 59, 130, 246; /* #3B82F6*/

  /* Secondary Color */
  --color-secondary: 100, 116, 139;    /* #64748B - Slate-500 */

  /* Accent Colors - Adaptrix Green */
  --color-accent: 16, 185, 129;        /* #10B981 */
  --color-accent-hover: 5, 150, 105;   /* #059669 */

  /* Backgrounds */
  --color-background: 255, 255, 255;
  --color-background-secondary: 243, 244, 246;
  --color-surface: 255, 255, 255;
  --color-surface-elevated: 249, 250, 251;

  /* Text */
  --color-text-primary: 31, 41, 55;
  --color-text-secondary: 75, 85, 99;
  --color-text-tertiary: 107, 114, 128;

  /* Borders */
  --color-border: 229, 231, 235;
  --color-border-hover: 209, 213, 219;

  /* Shadows */
  --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ========================================
 GLOBAL UTILITY CLASSES
 ======================================== */

/* Background Classes */
.bg-background {
  background-color: rgb(var(--color-background));
}
.bg-surface {
  background-color: rgb(var(--color-surface));
}
.bg-surface-hover {
  background-color: rgb(var(--color-surface-hover));
}
.bg-surface-elevated {
  background-color: rgb(var(--color-surface-elevated));
}
.bg-brand {
  background-color: rgb(var(--color-primary));
}
.bg-brand-light {
  background-color: rgb(var(--color-primary-light));
}
.bg-accent {
  background-color: rgb(var(--color-accent));
}
.bg-accent-light {
  background-color: rgb(var(--color-accent-light));
}
.bg-success {
  background-color: rgb(var(--color-success));
}
.bg-success-light {
  background-color: rgb(var(--color-success-light));
}
.bg-success-bg {
  background-color: rgb(var(--color-success-bg));
}
.bg-warning {
  background-color: rgb(var(--color-warning));
}
.bg-warning-light {
  background-color: rgb(var(--color-warning-light));
}
.bg-warning-bg {
  background-color: rgb(var(--color-warning-bg));
}
.bg-error {
  background-color: rgb(var(--color-error));
}
.bg-error-light {
  background-color: rgb(var(--color-error-light));
}
.bg-error-bg {
  background-color: rgb(var(--color-error-bg));
}
.bg-info {
  background-color: rgb(var(--color-info));
}
.bg-info-light {
  background-color: rgb(var(--color-info-light));
}
.bg-info-bg {
  background-color: rgb(var(--color-info-bg));
}

/* Text Color Classes - !important ensures these override Tailwind's generated classes */
.text-primary {
  color: rgb(var(--color-text-primary)) !important;
}
.text-secondary {
  color: rgb(var(--color-text-secondary)) !important;
}
.text-tertiary {
  color: rgb(var(--color-text-tertiary)) !important;
}
.text-disabled {
  color: rgb(var(--color-text-disabled)) !important;
}
.text-brand {
  color: rgb(var(--color-primary));
}
.text-accent {
  color: rgb(var(--color-accent));
}
.text-success {
  color: rgb(var(--color-success));
}
.text-warning {
  color: rgb(var(--color-warning));
}
.text-error {
  color: rgb(var(--color-error));
}
.text-info {
  color: rgb(var(--color-info));
}

/* Border Classes */
.border-default {
  border-color: rgb(var(--color-border));
}
.border-hover {
  border-color: rgb(var(--color-border-hover));
}
.border-brand {
  border-color: rgb(var(--color-primary));
}
.border-accent {
  border-color: rgb(var(--color-accent));
}
.border-success {
  border-color: rgb(var(--color-success));
}
.border-warning {
  border-color: rgb(var(--color-warning));
}
.border-error {
  border-color: rgb(var(--color-error));
}

/* Shadow Classes */
.shadow-xs {
  box-shadow: var(--shadow-xs);
}
.shadow-sm {
  box-shadow: var(--shadow-sm);
}
.shadow-md {
  box-shadow: var(--shadow-md);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}
.shadow-xl {
  box-shadow: var(--shadow-xl);
}

/* Radius Classes */
.rounded-sm {
  border-radius: var(--radius-sm);
}
.rounded-md {
  border-radius: var(--radius-md);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-xl {
  border-radius: var(--radius-xl);
}
.rounded-2xl {
  border-radius: var(--radius-2xl);
}
.rounded-full {
  border-radius: var(--radius-full);
}

/* Transition Classes */
.transition-fast {
  transition: all var(--transition-fast);
}
.transition-base {
  transition: all var(--transition-base);
}
.transition-slow {
  transition: all var(--transition-slow);
}

/* ======================================== 
 TYPOGRAPHY 
 ======================================== */

/* Headings */
.heading-1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: rgb(var(--color-text-primary));
  letter-spacing: -0.02em;
}

.heading-2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: rgb(var(--color-text-primary));
  letter-spacing: -0.01em;
}

.heading-3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: rgb(var(--color-text-primary));
}

.heading-4 {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: rgb(var(--color-text-primary));
}

.text-muted {
  color: rgb(var(--color-text-tertiary));
}

/* ======================================== 
 COMPONENT STYLES 
 ======================================== */

/* Cards */
.card {
  background-color: rgb(var(--color-background));
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgb(var(--color-border-hover));
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgb(var(--color-border));
}

.card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: rgb(var(--color-text-primary));
}

.card-content {
  color: rgb(var(--color-text-secondary));
}

/* Panels */
.panel {
  background-color: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-base);
}

.panel-header {
  padding: var(--space-4) var(--space-6);
  background-color: rgb(var(--color-background));
  border-bottom: 1px solid rgb(var(--color-border));
  font-weight: var(--font-semibold);
  color: rgb(var(--color-text-primary));
}

.panel-body {
  padding: var(--space-6);
  color: rgb(var(--color-text-secondary));
}

/* Surface (subtle backgrounds) */
.surface {
  background-color: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border) / 0.5);
  transition: all var(--transition-base);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
  outline: none;
  border: 1px solid transparent;
}

/* ADAPTRIX PRIMARY BUTTON - Bright blue accent for dark theme */
.btn-primary {
  background-color: rgb(var(--color-accent)); /* Blue-400 #60A5FA */
  color: white;
  border-radius: var(--radius-lg); /* 12px rounded */
  font-weight: 600;
  padding: 0.625rem 1.5rem; /* py-2.5 px-6 - prevents text overflow */
  min-height: 2.75rem; /* Prevents button collapse */
  white-space: nowrap; /* Prevents text wrapping in button */
  transition: all 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* Space between icon and text */
}

.btn-primary:hover {
  background-color: rgb(var(--color-accent-hover)); /* Blue-500 #3B82F6 */
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.3);
}

/* ADAPTRIX SECONDARY BUTTON - Bordered with subtle background */
.btn-secondary {
  background-color: transparent;
  color: rgb(var(--color-text-primary)); /* White text */
  border: 2px solid rgb(var(--color-border)); /* Gray-700 border */
  border-radius: var(--radius-lg); /* 12px rounded */
  font-weight: 600;
  padding: 0.625rem 1.5rem; /* Consistent padding */
  min-height: 2.75rem;
  white-space: nowrap;
  transition: all 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-secondary:hover {
  background-color: rgb(var(--color-surface-hover)); /* Gray-600 */
  border-color: rgb(var(--color-border-hover)); /* Gray-600 */
}

/* ADAPTRIX GHOST BUTTON - Text only, minimal style for dark theme */
.btn-ghost {
  background-color: transparent;
  color: rgb(var(--color-text-secondary)); /* Gray-300 */
  border-radius: var(--radius-md); /* 8px */
  padding: 0.5rem 1rem;
  min-height: 2.5rem;
  white-space: nowrap;
  transition: all 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-ghost:hover {
  background-color: rgb(var(--color-surface)); /* Gray-800 */
  color: rgb(var(--color-text-primary)); /* White */
}

.btn-danger {
  background-color: rgb(var(--color-error));
  color: white;
}

.btn-danger:hover {
  background-color: rgb(var(--color-error) / 0.9);
}

.btn-success {
  background-color: rgb(var(--color-success));
  color: white;
}

.btn-success:hover {
  background-color: rgb(var(--color-success) / 0.9);
}

.btn-icon {
  padding: var(--space-2);
  background-color: transparent;
  color: rgb(var(--color-text-secondary));
}

.btn-icon:hover {
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-text-primary));
}

/* Forms */
.input,
.select,
.textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background-color: rgb(var(--color-background));
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: rgb(var(--color-text-primary));
  transition: all var(--transition-fast);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: rgb(var(--color-primary));
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.1);
}

/* Checkbox and Radio */
.checkbox,
.radio {
  width: var(--space-4);
  height: var(--space-4);
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.radio {
  border-radius: var(--radius-full);
}

.checkbox:checked,
.radio:checked {
  background-color: rgb(var(--color-primary));
  border-color: rgb(var(--color-primary));
}

.checkbox-label,
.radio-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: rgb(var(--color-text-primary));
  font-size: var(--text-sm);
}

/* Tables */
.table {
  width: 100%;
  background-color: rgb(var(--color-background));
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgb(var(--color-border));
}

.table th {
  padding: var(--space-3) var(--space-4);
  background-color: rgb(var(--color-surface));
  font-weight: var(--font-medium);
  text-align: left;
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgb(var(--color-border));
}

.table td {
  padding: var(--space-3) var(--space-4);
  color: rgb(var(--color-text-primary));
  border-bottom: 1px solid rgb(var(--color-border));
}

.table tr:hover td {
  background-color: rgb(var(--color-surface));
}

/* Modals */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: var(--z-modal-backdrop);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(var(--color-background));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  z-index: var(--z-modal);
  border: 1px solid rgb(var(--color-border));
}

.modal-header {
  padding: var(--space-6);
  border-bottom: 1px solid rgb(var(--color-border));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: rgb(var(--color-text-primary));
}

.modal-body {
  padding: var(--space-6);
  color: rgb(var(--color-text-secondary));
}

.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid rgb(var(--color-border));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  background-color: rgb(var(--color-surface));
}

/* Tooltips */
.tooltip {
  position: absolute;
  background-color: rgb(var(--color-text-primary));
  color: rgb(var(--color-background));
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  white-space: nowrap;
  z-index: var(--z-tooltip);
  pointer-events: none;
}

/* Navigation */
.nav {
  background-color: rgb(var(--color-background));
  border-bottom: 1px solid rgb(var(--color-border));
  padding: var(--space-4);
}

.nav-brand {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: rgb(var(--color-primary));
}

.nav-menu {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.nav-item {
  padding: var(--space-2) var(--space-3);
  color: rgb(var(--color-text-secondary));
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.nav-item:hover {
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-text-primary));
}

.nav-item.active {
  background-color: rgb(var(--color-primary) / 0.1);
  color: rgb(var(--color-primary));
}

/* Sidebar */
.sidebar {
  background-color: rgb(var(--color-surface));
  border-right: 1px solid rgb(var(--color-border));
  min-height: 100vh;
  width: 250px;
  transition: all var(--transition-base);
}

.sidebar-header {
  padding: var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: rgb(var(--color-text-primary));
  border-bottom: 1px solid rgb(var(--color-border));
}

.sidebar-content {
  padding: var(--space-2);
}

.sidebar-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: rgb(var(--color-text-secondary));
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
}

.sidebar-item:hover {
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-text-primary));
}

.sidebar-item.active {
  background-color: rgb(var(--color-primary) / 0.1);
  color: rgb(var(--color-primary));
  font-weight: var(--font-medium);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-text-secondary));
  border: 1px solid rgb(var(--color-border));
}

.badge-primary {
  background-color: rgb(var(--color-primary) / 0.1);
  color: rgb(var(--color-primary));
  border-color: rgb(var(--color-primary) / 0.2);
}

.badge-success {
  background-color: rgb(var(--color-success) / 0.1);
  color: rgb(var(--color-success));
  border-color: rgb(var(--color-success) / 0.2);
}

.badge-warning {
  background-color: rgb(var(--color-warning) / 0.1);
  color: rgb(var(--color-warning));
  border-color: rgb(var(--color-warning) / 0.2);
}

.badge-error {
  background-color: rgb(var(--color-error) / 0.1);
  color: rgb(var(--color-error));
  border-color: rgb(var(--color-error) / 0.2);
}

/* ========================================
 MODERN GRADIENT & EFFECTS CLASSES
 ======================================== */

/* Gradient Backgrounds - Professional & Modern */
.bg-gradient-primary {
  background: linear-gradient(135deg, rgb(var(--color-accent-gradient-start)), rgb(var(--color-accent-gradient-end)));
}

.bg-gradient-subtle {
  background: linear-gradient(135deg, rgb(var(--color-background)), rgb(var(--color-surface)));
}

.bg-gradient-card {
  background: linear-gradient(135deg, rgb(var(--color-surface-elevated)), rgb(var(--color-background-secondary)));
}

.bg-gradient-header {
  background: linear-gradient(135deg, rgb(var(--color-primary-light)), rgb(var(--color-background)));
}

/* Solid Surface Classes */
.glass {
  background: rgb(var(--color-surface-elevated));
  border: 1px solid rgb(var(--color-border-muted));
}

.glass-subtle {
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border-muted));
  border-radius: 0.5rem;
}

/* Enhanced Shadow Classes */
.shadow-card {
  box-shadow: var(--shadow-card);
}

.shadow-hover {
  box-shadow: var(--shadow-hover);
}

.shadow-focus {
  box-shadow: var(--shadow-focus);
}

.shadow-gradient {
  box-shadow: var(--shadow-gradient);
}

.shadow-dropdown {
  box-shadow: var(--shadow-dropdown);
}

.shadow-2xl {
  box-shadow: var(--shadow-2xl);
}

/* Enhanced Interactive States */
.interactive {
  transition: all var(--transition-smooth);
  cursor: pointer;
}

.interactive:hover {
  box-shadow: var(--shadow-hover);
}

.interactive:active {
  opacity: 0.95;
}

/* Focus Ring - Modern accessibility */
.focus-ring {
  transition: box-shadow var(--transition-fast);
}

.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Elevated Surface - For important cards */
.surface-elevated {
  background: rgb(var(--color-surface-elevated));
  border: 1px solid rgb(var(--color-border-muted));
  box-shadow: var(--shadow-card);
  transition: all var(--transition-smooth);
}

.surface-elevated:hover {
  box-shadow: var(--shadow-hover);
  border-color: rgb(var(--color-border-hover));
}

/* Modern Button Styles */
.btn-gradient {
  background: linear-gradient(135deg, rgb(var(--color-accent-gradient-start)), rgb(var(--color-accent-gradient-end)));
  color: rgb(var(--color-text-inverse));
  border: none;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-smooth);
}

.btn-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgb(var(--color-accent-gradient-end)), rgb(var(--color-accent-gradient-start)));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.btn-gradient:hover::before {
  opacity: 1;
}

.btn-gradient:hover {
  box-shadow: var(--shadow-gradient);
}

.btn-modern {
  background: rgb(var(--color-surface-elevated));
  border: 1px solid rgb(var(--color-border));
  color: rgb(var(--color-text-primary));
  transition: all var(--transition-smooth);
  position: relative;
}

.btn-modern:hover {
  background: rgb(var(--color-surface-hover));
  border-color: rgb(var(--color-border-hover));
  box-shadow: var(--shadow-card);
}

/* Premium Card Variants */
.card-premium {
  background: rgb(var(--color-surface-elevated));
  border: 1px solid rgb(var(--color-border-muted));
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgb(var(--color-accent-gradient-start)), rgb(var(--color-accent-gradient-end)));
}

.card-premium:hover {
  box-shadow: var(--shadow-hover);
  border-color: rgb(var(--color-border-hover));
}

.card-glass {
  background: rgb(var(--color-surface-elevated));
  border: 1px solid rgb(var(--color-border-muted));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

/* Glass Card - Solid background (no glassmorphism) */
.glass-card {
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.glass-card-sm {
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Modern Navigation Styles */
.nav-modern {
  background: rgb(var(--color-surface-elevated));
  border-bottom: 1px solid rgb(var(--color-border-muted));
  box-shadow: var(--shadow-sm);
}

.nav-item-modern {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-smooth);
  color: rgb(var(--color-text-secondary));
}

.nav-item-modern:hover {
  background: rgb(var(--color-surface));
  color: rgb(var(--color-text-primary));
}

.nav-item-modern.active {
  background: linear-gradient(135deg, rgb(var(--color-accent) / 0.1), rgb(var(--color-accent-light)));
  color: rgb(var(--color-accent));
  box-shadow: var(--shadow-card);
}

/* Loading States */
.skeleton {
  background: linear-gradient(
    90deg,
    rgb(var(--color-surface)) 25%,
    rgb(var(--color-surface-hover)) 50%,
    rgb(var(--color-surface)) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--color-surface));
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--color-border));
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-border-hover));
}

/* Focus Visible */
:focus-visible {
  outline: 2px solid rgb(var(--color-primary));
  outline-offset: 2px;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Base Body Styles */
body {
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-text-primary));
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
  line-height: var(--leading-normal);
  transition:
    background-color var(--transition-slow),
    color var(--transition-slow);
}

/* Theme-aware transitions for interactive elements only */
button, a, input, select, textarea, [role="button"] {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
 TEXT SELECTION STYLES - HIGH CONTRAST
 ======================================== */

/* Light theme - Blue highlight with dark text */
::-moz-selection {
  background-color: rgba(var(--color-accent), 0.3);
  color: rgb(var(--color-text-primary));
}
::selection {
  background-color: rgba(var(--color-accent), 0.3);
  color: rgb(var(--color-text-primary));
}

::-moz-selection {
  background-color: rgba(var(--color-accent), 0.3);
  color: rgb(var(--color-text-primary));
}

/* Dark theme - Brighter blue highlight with light text */
[data-theme="dark"] ::-moz-selection {
  background-color: rgba(var(--color-accent), 0.4);
  color: rgb(var(--color-text-primary));
}
[data-theme="dark"] ::selection {
  background-color: rgba(var(--color-accent), 0.4);
  color: rgb(var(--color-text-primary));
}

[data-theme="dark"] ::-moz-selection {
  background-color: rgba(var(--color-accent), 0.4);
  color: rgb(var(--color-text-primary));
}

/* ========================================
 RESPONSIVE UTILITIES - PREVENT OVERFLOW
 ======================================== */

/* Prevent text overflow in all text elements */
.text-safe,
h1, h2, h3, h4, h5, h6, p, span, div {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Prevent button text overflow and overlap */
.btn-safe,
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost {
  min-height: 2.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Button groups that wrap properly */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 8px gap between buttons */
  align-items: center;
}

/* Responsive container with max-width */
.container-safe {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* 16px on mobile */
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-safe {
    padding-left: 1.5rem; /* 24px on tablet */
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-safe {
    padding-left: 2rem; /* 32px on desktop */
    padding-right: 2rem;
  }
}

/* Responsive grid that prevents overflow */
.grid-safe {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Flex container that wraps properly */
.flex-safe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}

/* Card with responsive padding */
.card-responsive {
  padding: 1rem; /* 16px on mobile */
  background-color: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
}

@media (min-width: 640px) {
  .card-responsive {
    padding: 1.5rem; /* 24px on tablet */
  }
}

@media (min-width: 1024px) {
  .card-responsive {
    padding: 2rem; /* 32px on desktop */
  }
}

/* Input fields that don't overflow */
.input-safe {
  width: 100%;
  max-width: 100%;
  min-width: 0; /* Prevents flex/grid overflow */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Prevent flex item overflow */
.flex-child-safe {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Responsive typography - scales with viewport */
.text-responsive-sm {
  font-size: clamp(0.75rem, 2vw, 0.875rem); /* 12px to 14px */
}

.text-responsive-base {
  font-size: clamp(0.875rem, 2.5vw, 1rem); /* 14px to 16px */
}

.text-responsive-lg {
  font-size: clamp(1rem, 3vw, 1.125rem); /* 16px to 18px */
}

.text-responsive-xl {
  font-size: clamp(1.125rem, 4vw, 1.25rem); /* 18px to 20px */
}

.text-responsive-2xl {
  font-size: clamp(1.25rem, 5vw, 1.5rem); /* 20px to 24px */
}

/* Ensure images don't overflow containers */
img {
  max-width: 100%;
  height: auto;
}

/* Stack elements on mobile, row on desktop */
@media (max-width: 767px) {
  .responsive-stack {
    flex-direction: column !important;
  }

  .responsive-stack > * {
    width: 100%;
  }
}
/* App.css - Modern Adaptrix-style application styles */
.app {
  min-height: 100vh;
  background: rgb(var(--color-background));
  background-image:
    radial-gradient(circle at 20% 20%, rgb(var(--color-accent) / 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgb(var(--color-primary) / 0.02) 0%, transparent 50%);
  color: rgb(var(--color-text-primary));
  transition: all var(--transition-base);
}

.app-header {
  background: rgba(var(--color-surface-elevated), 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(var(--color-border-muted));
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-6);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  transition: all var(--transition-smooth);
}

.app-main {
  padding: var(--space-6);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
  .app-header {
    padding: var(--space-3) var(--space-4);
  }

  .app-main {
    padding: var(--space-4);
  }
}

/* Global Animation Classes */
.fade-in {
  animation: fadeIn 0.5s ease-out;
}

.slide-up {
  animation: slideUp 0.5s var(--ease-out-quint);
}

.scale-in {
  animation: scaleIn 0.3s var(--ease-out-back);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}