declare const _default: "\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\");\n\n:root {\n  /* Primary brand colors (consistent across themes) */\n  --color-primary: #6366f1;\n  --color-primary-dark: #4f46e5;\n  --color-primary-light: #818cf8;\n  --color-secondary: #06b6d4;\n  --color-accent: #f59e0b;\n\n  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  --gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);\n  --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n\n  /* Legacy color mappings for backward compatibility */\n  --color-warning: #ffe066;\n  --color-warning-text: #7c3aed;\n  --color-danger: #ffd6d6;\n  --color-danger-text: #c92a2a;\n  --color-state-border: #e9ecef;\n}\n\n/* Dark theme (default) */\n:root, [data-theme=\"dark\"] {\n  --color-bg-primary: #0f0f23;\n  --color-bg-secondary: #1a1a2e;\n  --color-bg-card: #16213e;\n  --color-bg-glass: rgba(255, 255, 255, 0.05);\n\n  --color-text-primary: #ffffff;\n  --color-text-secondary: #b4b4b8;\n  --color-text-muted: #acacb9;\n\n  --color-border: rgba(255, 255, 255, 0.1);\n  --color-border-hover: rgba(255, 255, 255, 0.2);\n\n  --gradient-card: rgba(255,255,255,0.03); /* Simplified from gradient */\n\n  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);\n\n  /* Dark theme text inverse (for buttons, etc) */\n  --color-text-inverse: #ffffff;\n}\n\n/* Light theme */\n[data-theme=\"light\"] {\n  --color-bg-primary: #ffffff;\n  --color-bg-secondary: #f8fafc;\n  --color-bg-card: #ffffff;\n  --color-bg-glass: rgba(255, 255, 255, 0.8);\n\n  --color-text-primary: #1e293b;\n  --color-text-secondary: #475569;  /* Improved contrast from #64748b */\n  --color-text-muted: #64748b;      /* Improved contrast from #94a3b8 */\n\n  --color-border: rgba(0, 0, 0, 0.1);\n  --color-border-hover: rgba(0, 0, 0, 0.15);\n\n  --gradient-card: rgba(0,0,0,0.02); /* Simplified from gradient */\n\n  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.2);\n\n  /* Light theme text inverse (for buttons, etc) */\n  --color-text-inverse: #ffffff;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  @view-transition {\n    navigation: auto;\n  }\n}\n\nbody {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n  background: var(--color-bg-primary);\n  color: var(--color-text-primary);\n  line-height: 1.6;\n  min-height: 100vh;\n  overflow-x: hidden;\n}\n\n/* Animated background - Dark theme */\nbody::before {\n  content: '';\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background:\n    radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),\n    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),\n    radial-gradient(circle at 40% 40%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);\n  z-index: -1;\n  transition: opacity 0.3s ease;\n}\n\n/* Animated background - Light theme */\n[data-theme=\"light\"] body::before {\n  background:\n    radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.03) 0%, transparent 50%),\n    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.03) 0%, transparent 50%),\n    radial-gradient(circle at 40% 40%, rgba(6, 182, 212, 0.02) 0%, transparent 50%);\n}\n\n.container {\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: 0 2rem;\n}\n\n/* Header */\n.header {\n  background: var(--color-bg-glass);\n  backdrop-filter: blur(20px);\n  border-bottom: 1px solid var(--color-border);\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 0;\n}\n\n.logo {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  text-decoration: none;\n  color: var(--color-text-primary);\n  font-weight: 700;\n  font-size: 1.25rem;\n  transition: all 0.3s ease;\n}\n\n.logo:hover {\n  color: var(--color-primary-light);\n  transform: translateY(-1px);\n}\n\n.logo-icon {\n  color: #fff;\n  width: 32px;\n  height: 32px;\n  background: var(--gradient-primary);\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: bold;\n  font-size: 1.1rem;\n}\n\n.logo img {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n}\n\n/* Theme Toggle Button */\n.theme-toggle {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  background: var(--color-bg-glass);\n  border: 1px solid var(--color-border);\n  border-radius: 8px;\n  color: var(--color-text-primary);\n  font-size: 0.875rem;\n  font-weight: 500;\n  transition: all 0.3s ease;\n  cursor: pointer;\n  backdrop-filter: blur(10px);\n}\n\n.theme-toggle:hover {\n  border-color: var(--color-border-hover);\n  background: var(--color-bg-card);\n  transform: translateY(-1px);\n}\n\n.theme-toggle-icon {\n  font-size: 1.1rem;\n  transition: transform 0.3s ease;\n}\n\n.theme-toggle:hover .theme-toggle-icon {\n  transform: rotate(180deg);\n}\n\nh1, h2, h3 {\n  color: var(--color-text-primary);\n  font-weight: 600;\n  margin-bottom: 0.5em;\n}\n\nh1 {\n  font-size: 3.5rem;\n  font-weight: 700;\n  background: var(--gradient-primary);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 1rem;\n  text-align: center;\n}\n\nh2 {\n  font-size: 1.5rem;      /* Increased from 1.25rem */\n  font-weight: 600;\n  color: var(--color-text-primary);\n  margin-bottom: 0.75em;\n}\n\nh3 {\n  font-size: 1.25rem;     /* Increased from 1.1rem */\n  font-weight: 600;\n}\n\n/* Focus styles for accessibility */\n*:focus {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n*:focus:not(:focus-visible) {\n  outline: none;\n}\n\n*:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\na {\n  color: var(--color-text-primary);\n  text-decoration: none;\n  transition: color 0.3s ease;\n  border-radius: 4px; /* For better focus outline */\n}\na:hover {\n  color: var(--color-primary);\n  text-decoration: underline;\n}\na:focus {\n  color: var(--color-primary);\n}\n\n#components-list a:hover {\n  text-decoration: none;\n}\n\np {\n  margin-top: 0;\n}\n\n.logo {\n  margin-top: 10px;\n}\n\n.back {\n  width: 100%;\n  margin-top: -20px;\n  margin-bottom: 1.5em;\n  display: block;\n  color: var(--color-text-muted);\n  font-size: 0.95em;\n}\n\n/* Content Sections */\n.content-section {\n  background: var(--color-bg-card);\n  border-radius: 16px;\n  border: 1px solid var(--color-border);\n  overflow: hidden;\n  transition: all 0.3s ease;\n  margin-bottom: 2rem;\n}\n\n.content-section:hover {\n  border-color: var(--color-border-hover);\n  box-shadow: var(--shadow-lg);\n}\n\n.section-header {\n  padding: 1.5rem 2rem;\n  background: var(--gradient-card);\n  border-bottom: 1px solid var(--color-border);\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.section-title {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--color-text-primary);\n}\n\n.section-icon {\n  font-size: 1.25rem;\n  /* Removed gradient background, border-radius, and container styling */\n  /* Now just using emoji directly for better accessibility */\n}\n\n.section-content {\n  padding: 2rem;\n}\n\n.code,\n.preview {\n  width: 100%;\n  background: var(--color-bg-card);\n  border-radius: 16px;\n  box-shadow: var(--shadow-md);\n  margin-bottom: 1.5em;\n  border: 1px solid var(--color-border);\n}\n\n.preview {\n  height: 500px;\n}\n\n.preview iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n  background: white;\n  border-radius: 0 0 16px 16px;\n}\n\n.table {\n  width: 100%;\n}\n\n.w-100 {\n  width: 100%;\n}\n\n.row {\n  background: var(--color-bg-card);\n  border: 1px solid var(--color-border);\n  border-radius: 12px;\n  width: 100%;\n  display: flex;\n  padding: 14px 0px;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  align-items: center;\n  box-shadow: var(--shadow-md);\n  transition: all 0.3s ease;\n}\n\n.row.header {\n  background: var(--gradient-card);\n  border: 1px solid var(--color-border) !important;\n  font-size: 1.1em;\n  font-weight: 600;\n  border-radius: 12px 12px 0 0;\n  box-shadow: none;\n  color: var(--color-text-primary);\n}\n\n.row.header div {\n  font-weight: bold;\n  margin: 0;\n  align-self: flex-start;\n}\n\n.row.double {\n  min-height: 60px;\n}\n\n.row div {\n  word-wrap: break-word;\n}\n\n.row span {\n  padding-right: 10px;\n}\n\n.componentRow {\n  transition:\n    box-shadow 0.2s,\n    background 0.2s;\n}\n\n.componentRow:hover {\n  background: var(--color-bg-glass);\n  box-shadow: var(--shadow-lg);\n  border-color: var(--color-primary);\n  transform: translateY(-2px);\n}\n\n.componentRow .title .name {\n  font-weight: bold;\n  font-size: 1.15rem;\n  margin: 0;\n  width: 100%;\n  color: var(--color-text-default);\n}\n\n.componentRow .release {\n  font-size: 1rem;\n  margin: 0;\n  width: 100%;\n  color: var(--color-text-default);\n}\n\n.componentRow .title .description {\n  padding: 0;\n  font-size: 0.98rem;\n  color: var(--color-text-muted);\n}\n\n.social {\n  width: 100%;\n  margin-top: 20px;\n  text-align: center;\n}\n\n.field {\n  width: 100%;\n  margin-bottom: 1em;\n}\n\n.field p,\n.field span,\n.field a {\n  margin: 0;\n  font-weight: 500;\n}\n\n.field p {\n  color: var(--color-primary);\n  font-weight: bold;\n  margin-right: 10px;\n}\n\ninput[type=\"text\"],\ntextarea,\nselect {\n  background: var(--color-bg-card);\n  border: 1px solid var(--color-border);\n  color: var(--color-text-primary);\n  padding: 0.75rem 1rem;\n  border-radius: 8px;\n  font-family: inherit;\n  font-size: 1rem;\n  transition: all 0.3s ease;\n  margin-bottom: 10px;\n  box-sizing: border-box;\n}\n\ninput[type=\"text\"]:focus,\ntextarea:focus,\nselect:focus {\n  outline: none;\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  border-radius: 8px;\n  font-size: 0.875rem;\n  font-weight: 500;\n  text-decoration: none;\n  transition: all 0.3s ease;\n  border: none;\n  cursor: pointer;\n  font-family: inherit;\n}\n\n.btn-primary {\n  background: var(--gradient-primary);\n  color: white;\n}\n\n.btn-primary:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--shadow-glow);\n}\n\n.btn-secondary {\n  background: var(--color-bg-glass);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border);\n}\n\n.btn-secondary:hover {\n  border-color: var(--color-border-hover);\n  background: var(--color-bg-secondary);\n}\n\n.filters {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  gap: 1em;\n  margin-bottom: 0.5em;\n}\n\n.row > * {\n  flex: 0 1 8%;\n  padding: 0px 5px;\n  align-self: center;\n}\n\n.row > *:last-child {\n  padding-right: 10px;\n}\n\n.row > *:first-child {\n  padding-left: 10px;\n}\n\n.release,\n.title,\n.filters > * {\n  flex: 1 0;\n}\n\n.title {\n  display: flex;\n  flex-direction: column;\n}\n\n.filters input {\n  color: #0f0f23;\n  background-color: #eee;\n}\n\n#author-filter {\n  flex: 0 1 30%;\n}\n\n@media (min-width: 1024px) {\n  margin-left: 15px;\n}\n\n.parameter {\n  flex: 1 0;\n  max-width: 25%;\n  align-self: flex-start;\n}\n\n.parameter-description {\n  flex: 1 0;\n  max-width: 70%;\n}\n\n.author {\n  flex: 0 1 15%;\n  word-break: break-all;\n  color: var(--color-info);\n}\n\n#href {\n  height: 60px;\n}\n\n.states {\n  width: 100%;\n  margin-bottom: 30px;\n  display: flex;\n  align-items: center;\n  gap: 1.5rem;\n  flex-wrap: wrap;\n}\n\n.states > span {\n  color: var(--color-text-secondary);\n  font-weight: 500;\n  font-size: 0.875rem;\n}\n\n.states input {\n  margin-right: 6px;\n}\n\n/* Custom Checkbox Styling */\n.checkbox-wrapper {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.75rem;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.checkbox-wrapper:hover {\n  transform: translateY(-1px);\n}\n\n.checkbox-input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.checkbox-custom {\n  position: relative;\n  width: 20px;\n  height: 20px;\n  background: var(--color-bg-card);\n  border: 2px solid var(--color-border);\n  border-radius: 6px;\n  transition: all 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.checkbox-input:checked + .checkbox-custom {\n  background: var(--gradient-primary);\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.checkbox-input:focus + .checkbox-custom {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.checkbox-icon {\n  width: 12px;\n  height: 12px;\n  stroke: white;\n  stroke-width: 2;\n  fill: none;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0;\n  transform: scale(0.8);\n  transition: all 0.2s ease;\n}\n\n.checkbox-input:checked + .checkbox-custom .checkbox-icon {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.checkbox-wrapper:hover .checkbox-custom {\n  border-color: var(--color-border-hover);\n  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);\n}\n\n.checkbox-wrapper:hover .checkbox-input:checked + .checkbox-custom {\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n/* Removed old details-state styling - now using state-badge class */\n\n#versions {\n  margin-left: 10px;\n}\n\n/* Updated state styling to use modern badge design */\n.state {\n  display: inline-flex;\n  align-items: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  padding: 0.375rem 0.75rem;\n  border-radius: 12px;\n  white-space: nowrap;\n  transition: all 0.3s ease;\n  border: 1px solid transparent;\n  backdrop-filter: blur(10px);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  margin-right: 10px;\n}\n\n.table .state {\n  /* Remove the old background and height - now using component-state classes */\n}\n\n/* Enhanced State Badge Styling - moved to component state section */\n\n/* Component State Badge Styling */\n.state-badge {\n  display: inline-flex;\n  align-items: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  padding: 0.375rem 0.75rem;\n  border-radius: 12px;\n  white-space: nowrap;\n  transition: all 0.3s ease;\n  border: 1px solid transparent;\n  backdrop-filter: blur(10px);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  margin-left: 0.75rem;\n}\n\n/* Mobile compact view - hidden on desktop */\n.mobile-compact {\n  display: none;\n}\n\n.state-badge:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n/* Experimental state - warm orange/yellow like in the image */\n.component-state-experimental {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #92400e;\n  border: 1px solid rgba(245, 158, 11, 0.3);\n  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);\n}\n\n.component-state-experimental:hover {\n  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);\n}\n\n/* Deprecated state - red */\n.component-state-deprecated {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #991b1b;\n  border: 1px solid rgba(239, 68, 68, 0.3);\n  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);\n}\n\n.component-state-deprecated:hover {\n  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);\n}\n\n/* Stable state - green */\n.component-state-stable {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #064e3b;\n  border: 1px solid rgba(16, 185, 129, 0.3);\n  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);\n}\n\n.component-state-stable:hover {\n  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);\n}\n\n/* Beta state - blue */\n.component-state-beta {\n  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n  color: #1e3a8a;\n  border: 1px solid rgba(59, 130, 246, 0.3);\n  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);\n}\n\n.component-state-beta:hover {\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);\n}\n\n/* Alpha state - purple */\n.component-state-alpha {\n  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n  color: #4c1d95;\n  border: 1px solid rgba(139, 92, 246, 0.3);\n  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);\n}\n\n.component-state-alpha:hover {\n  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);\n}\n\na.tab-link {\n  color: var(--color-primary-light);\n  font-weight: 500;\n  padding: 0.5rem 1rem;\n  border-radius: 8px;\n  transition: all 0.3s ease;\n  font-size: 1rem;\n  line-height: 1.2;\n  vertical-align: middle;\n  display: inline-block;\n  border: 1px solid transparent;\n}\n\na.tab-link:hover {\n  background: var(--color-bg-glass);\n  border-color: var(--color-border);\n}\n\na.tab-link.selected {\n  background: var(--gradient-primary);\n  color: white;\n  text-decoration: none;\n  border-color: var(--color-primary);\n}\n\n.bold {\n  font-weight: bold;\n}\n\n.hide {\n  display: none !important;\n}\n\n.box {\n  background: var(--color-bg-card);\n  border-radius: 12px; /* Reduced from 16px */\n  border: 1px solid var(--color-border);\n  padding: 1.5em 2em;\n  margin-bottom: 2em;\n  transition: all 0.3s ease;\n  /* Removed default shadow */\n}\n\n.box:hover {\n  border-color: var(--color-border-hover);\n  box-shadow: var(--shadow-md); /* Only on hover */\n  transform: translateY(-1px); /* Reduced from -2px */\n}\n\n/* Hero Section */\n.hero {\n  padding: 3rem 0;\n  text-align: center;\n  position: relative;\n}\n\n/* Info Cards */\n.info-card {\n  background: var(--color-bg-card);\n  border: 1px solid var(--color-border);\n  border-radius: 12px; /* Reduced from 16px */\n  padding: 1.5rem;\n  transition: all 0.3s ease;\n  margin-bottom: 1.5rem;\n  /* Removed default shadow */\n}\n\n.info-card:hover {\n  border-color: var(--color-border-hover);\n  transform: translateY(-1px); /* Reduced from -2px */\n  box-shadow: var(--shadow-md); /* Reduced from shadow-lg */\n}\n\n.info-item {\n  display: flow;\n  align-items: start;\n  padding: 0.75rem 0;\n  border-bottom: 1px solid var(--color-border);\n}\n\n.info-item:last-child {\n  border-bottom: none;\n}\n\n.info-label {\n  font-weight: 500;\n  color: var(--color-text-secondary);\n  min-width: 100px;\n}\n\n.info-value {\n  color: var(--color-text-primary);\n  text-align: right;\n  flex: 1;\n  margin-left: 1rem;\n}\n\n/* Animations */\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes float {\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-10px); }\n}\n\n/* Custom scrollbar */\n::-webkit-scrollbar {\n  width: 8px;\n}\n\n::-webkit-scrollbar-track {\n  background: var(--color-bg-secondary);\n}\n\n::-webkit-scrollbar-thumb {\n  background: var(--gradient-primary);\n  border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background: var(--gradient-secondary);\n}\n\n/* Main Content Layout */\n.main-content {\n  display: grid;\n  grid-template-columns: 1fr 350px;\n  gap: 2rem;\n  padding: 2rem 0;\n}\n\n.sidebar {\n  display: grid;\n  gap: 1.5rem;\n  align-content: start;\n}\n\n/* Collapsible Sections */\n.collapsible-section {\n  transition: all 0.3s ease;\n}\n\n.collapsible-header {\n  cursor: pointer;\n  user-select: none;\n  position: relative;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--color-bg-glass);\n}\n\n.collapse-toggle {\n  position: absolute;\n  right: 1.5rem;\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: none;\n  color: var(--color-text-secondary);\n  font-size: 1rem;\n  cursor: pointer;\n  padding: 0.5rem;\n  border-radius: 4px;\n  transition: all 0.3s ease;\n}\n\n.collapse-toggle:hover {\n  background: var(--color-bg-glass);\n  color: var(--color-text-primary);\n}\n\n.collapse-icon {\n  transition: transform 0.3s ease;\n  display: inline-block;\n}\n\n.collapsible-content {\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.collapsible-content.collapsed {\n  max-height: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  opacity: 0;\n}\n\n.collapsible-content.expanded {\n  max-height: 2000px;\n  opacity: 1;\n}\n\n.collapsible-header.collapsed .collapse-icon {\n  transform: rotate(-90deg);\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n\n  .info-item {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .container {\n    padding: 0 1rem;\n  }\n\n  h1 {\n    font-size: 2.5rem;\n  }\n\n  .main-content {\n    grid-template-columns: 1fr;\n    gap: 1.5rem;\n  }\n\n  .sidebar {\n    order: -1;\n  }\n\n  /* Mobile collapsible sections - collapsed by default */\n  .collapsible-content {\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    opacity: 0;\n  }\n\n  .collapsible-header.collapsed .collapse-icon {\n    transform: rotate(-90deg);\n  }\n}\n\n@media (max-width: 900px) {\n  .container {\n    padding: 0 1rem;\n  }\n\n  .main-content {\n    padding: 1rem 0;\n    gap: 1rem;\n  }\n\n  .filters {\n    flex-direction: column;\n    gap: 0.5em;\n  }\n\n  /* Mobile responsive components list */\n  .row.header {\n    display: none; /* Hide desktop table header on mobile */\n  }\n\n  .componentRow {\n    flex-direction: column !important;\n    align-items: center !important;\n    padding: 1rem !important;\n    gap: 0.75rem !important;\n    text-align: center !important;\n  }\n\n  /* Hide desktop table columns on mobile */\n  .componentRow > .author,\n  .componentRow > .date,\n  .componentRow > .activity,\n  .componentRow > div:not(.title):not(.state):not(.mobile-compact) {\n    display: none !important;\n  }\n\n  /* Show mobile compact view */\n  .mobile-compact {\n    display: block !important;\n    width: 100%;\n  }\n\n  .mobile-meta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.75rem;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.875rem;\n    color: var(--color-text-secondary);\n    width: 100%;\n  }\n\n  .mobile-meta span {\n    background: var(--color-bg-glass);\n    padding: 0.25rem 0.5rem;\n    border-radius: 6px;\n    border: 1px solid var(--color-border);\n    font-size: 0.8rem;\n    font-weight: 500;\n  }\n\n  .mobile-author {\n    color: var(--color-primary) !important;\n  }\n\n  .mobile-version {\n    color: var(--color-text-primary) !important;\n    font-weight: 600;\n  }\n\n  .mobile-date {\n    color: var(--color-text-muted) !important;\n  }\n\n  .mobile-activity {\n    color: var(--color-accent) !important;\n  }\n\n  .mobile-size {\n    color: var(--color-secondary) !important;\n  }\n\n  /* Center the title section on mobile */\n  .componentRow .title {\n    text-align: center !important;\n    width: 100%;\n  }\n\n  .componentRow .title .name {\n    text-align: center !important;\n  }\n\n  .componentRow .title .description {\n    text-align: center !important;\n  }\n\n  .box, .info-card, .section-content {\n    padding: 1.5rem 1rem;\n  }\n\n  .sidebar .info-card {\n    padding: 1rem;\n  }\n\n  .sidebar .info-item {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.5rem;\n  }\n\n  .sidebar .info-label {\n    min-width: auto;\n    font-weight: 600;\n  }\n\n  .sidebar .info-value {\n    text-align: left;\n    margin-left: 0;\n  }\n\n  h1 {\n    font-size: 2rem;\n  }\n}\n\n/* Loading states */\n.loader {\n  text-align: center;\n  padding: 2em;\n  color: var(--color-text-muted);\n}\n\n.loader p {\n  margin: 0;\n  font-style: italic;\n}\n\n.loader::before {\n  content: '';\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--color-border);\n  border-top: 2px solid var(--color-primary);\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n  margin-right: 0.5em;\n  vertical-align: middle;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n.loading-more {\n  text-align: center;\n  padding: 1em 2em;\n  color: var(--color-text-muted);\n  font-style: italic;\n  font-size: 0.9em;\n  border-top: 1px solid var(--color-border);\n  margin-top: 1em;\n}\n\n.loading-more::before {\n  content: '';\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  border: 2px solid var(--color-border);\n  border-top: 2px solid var(--color-primary);\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n  margin-right: 0.5em;\n  vertical-align: middle;\n}\n\n#history-error {\n  text-align: center;\n  padding: 2em;\n  color: var(--color-danger-text);\n  background-color: var(--color-danger);\n  border: 1px solid var(--color-state-border);\n  border-radius: 6px;\n  margin: 1em 0;\n}\n\n#history-error p {\n  margin: 0;\n}\n\n/* Breadcrumb */\n.breadcrumb {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--color-text-secondary);\n  font-size: 0.875rem;\n}\n\n.breadcrumb a {\n  color: var(--color-primary-light);\n  text-decoration: none;\n  transition: color 0.3s ease;\n}\n\n.breadcrumb a:hover {\n  color: var(--color-primary);\n}\n\n/* Parameters */\n.parameter-grid {\n  display: grid;\n  gap: 1.5rem;\n}\n\n.parameter-item {\n  background: var(--color-bg-glass);\n  border: 1px solid var(--color-border);\n  border-radius: 12px;\n  padding: 1.5rem;\n  transition: all 0.3s ease;\n}\n\n.parameter-item:hover {\n  border-color: var(--color-primary);\n  box-shadow: 0 0 20px rgba(99, 102, 241, 0.1);\n}\n\n.parameter-header {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin-bottom: 1rem;\n}\n\n.parameter-name {\n  font-weight: 600;\n  color: var(--color-text-primary);\n}\n\n.parameter-type {\n  background: var(--color-secondary);\n  color: white;\n  padding: 0.25rem 0.75rem;\n  border-radius: 12px; /* Reduced from 20px */\n  font-size: 0.75rem;\n  font-weight: 500;\n}\n\n.parameter-required {\n  background: var(--color-accent);\n}\n\n.parameter-description {\n  color: var(--color-text-secondary);\n  margin-bottom: 1rem;\n  line-height: 1.5;\n}\n\n.parameter-input {\n  width: 100%;\n  background: var(--color-bg-secondary);\n  border: 1px solid var(--color-border);\n  color: var(--color-text-primary);\n  padding: 0.75rem 1rem;\n  border-radius: 8px;\n  font-family: inherit;\n  transition: all 0.3s ease;\n}\n\n.parameter-input:focus {\n  outline: none;\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n/* Preview Section */\n.preview-section {\n  background: var(--color-bg-card);\n  border-radius: 16px;\n  border: 1px solid var(--color-border);\n  overflow: hidden;\n  margin-top: 2rem;\n}\n\n.preview-controls {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 2rem;\n  background: var(--color-bg-glass);\n  border-bottom: 1px solid var(--color-border);\n}\n\n.preview-buttons {\n  display: flex;\n  gap: 0.75rem;\n}\n\n.preview-iframe {\n  width: 100%;\n  height: 500px;\n  border: none;\n  background: white;\n}\n\n.back {\n  width: 100%;\n  margin-top: -20px;\n  margin-bottom: 1.5em;\n  display: block;\n  color: var(--color-text-muted);\n  font-size: 0.95em;\n}\n\n/* Stats Badge */\n.stats-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.75rem;\n  background: var(--color-bg-card);\n  border: 1px solid var(--color-border);\n  border-radius: 12px;\n  padding: 0.75rem 1.25rem;\n  margin: 1.5rem auto 0;\n  box-shadow: var(--shadow-md);\n  transition: all 0.3s ease;\n  max-width: fit-content;\n}\n\n.stats-badge:hover {\n  border-color: var(--color-border-hover);\n  box-shadow: var(--shadow-lg);\n  transform: translateY(-1px);\n}\n\n.stats-badge .chart-icon {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.stats-badge .chart-bar {\n  width: 4px;\n  border-radius: 2px;\n  background: var(--gradient-primary);\n}\n\n.stats-badge .chart-bar:nth-child(1) {\n  height: 12px;\n  background: #10b981; /* green */\n}\n\n.stats-badge .chart-bar:nth-child(2) {\n  height: 16px;\n  background: #ef4444; /* red */\n}\n\n.stats-badge .chart-bar:nth-child(3) {\n  height: 20px;\n  background: #3b82f6; /* blue */\n}\n\n.stats-badge .badge-text {\n  color: var(--color-text-primary);\n  font-size: 0.875rem;\n  font-weight: 500;\n  white-space: nowrap;\n}\n  ";
export default _default;