neon_sakura 0.1.4

data/app/assets/stylesheets/components.css

@@ -0,0 +1,1652 @@
+/*
+ * Component styles
+ * This file contains styling for reusable UI components like navigation, cards, badges, etc.
+ */
+
+/* SVG Icon Sizing - Ensure icons respect width/height classes */
+svg {
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+/* Default link styling - theme-aware */
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+  transition: color 150ms ease;
+}
+
+a:hover {
+  color: var(--color-notification);
+  text-decoration: underline;
+}
+
+a:visited {
+  color: color-mix(in srgb, var(--color-accent) 80%, var(--color-text-muted) 20%);
+}
+
+a:active {
+  color: var(--color-accent);
+}
+
+/* Button-styled links maintain their text color in all states */
+a.bg-accent,
+a[style*="background"],
+a[class*="bg-"] {
+  color: var(--color-white);
+}
+
+a.bg-accent:hover,
+a[style*="background"]:hover,
+a[class*="bg-"]:hover {
+  color: var(--color-white);
+  text-decoration: none;
+}
+
+a.bg-accent:active,
+a[style*="background"]:active,
+a[class*="bg-"]:active {
+  color: var(--color-white);
+  opacity: 0.9;
+}
+
+a.bg-accent:visited,
+a[style*="background"]:visited,
+a[class*="bg-"]:visited {
+  color: var(--color-white);
+}
+
+/* Navigation bar */
+nav {
+  /* Base navigation styles are handled by utility classes */
+}
+
+/* Navigation links - theme-aware colors (dark for light mode, light for dark mode) */
+nav a {
+  color: var(--navbar-link-color);
+}
+
+nav a:visited {
+  color: var(--navbar-link-color);
+}
+
+nav a:hover {
+  color: var(--navbar-link-hover);
+  text-decoration: none;
+}
+
+nav a:active {
+  color: var(--navbar-link-color);
+}
+
+/* Navigation buttons (logout) - same styling as links */
+nav button {
+  color: var(--navbar-link-color);
+}
+
+nav button:hover {
+  color: var(--navbar-link-hover);
+}
+
+/* Navigation links with icons */
+nav a,
+nav button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Dropdown menu */
+.nav-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.nav-dropdown-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--navbar-link-color);
+  transition: color 150ms;
+  font-size: 0.875rem;
+  text-decoration: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+.nav-dropdown-toggle svg {
+  flex-shrink: 0;
+}
+
+.nav-dropdown-toggle:hover {
+  color: var(--navbar-link-hover);
+}
+
+.nav-dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.5rem;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+  min-width: 10rem;
+  z-index: 50;
+}
+
+.nav-dropdown.open .nav-dropdown-menu {
+  display: block;
+}
+
+.nav-dropdown-menu a {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  color: var(--color-text-primary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: all 150ms;
+}
+
+.nav-dropdown-menu a:hover {
+  background-color: var(--color-border);
+  color: var(--color-accent);
+}
+
+.nav-dropdown-menu a:first-child {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
+.nav-dropdown-menu a:last-child {
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+/* Dropdown divider */
+.nav-dropdown-divider {
+  height: 1px;
+  background-color: var(--color-border);
+  margin: 0.5rem 0;
+}
+
+/* Nested submenu */
+.nav-dropdown-submenu {
+  position: relative;
+}
+
+.nav-dropdown-submenu-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  color: var(--color-text-primary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: all 150ms;
+  cursor: pointer;
+  width: 100%;
+}
+
+.nav-dropdown-submenu-toggle:hover {
+  background-color: var(--color-border);
+  color: var(--color-accent);
+}
+
+.nav-dropdown-submenu-items {
+  display: none;
+  position: absolute;
+  left: 100%;
+  top: 0;
+  margin-left: 0.25rem;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+  min-width: 10rem;
+  z-index: 51;
+}
+
+.nav-dropdown-submenu:hover .nav-dropdown-submenu-items {
+  display: block;
+}
+
+.nav-dropdown-submenu-items a {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  color: var(--color-text-primary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: all 150ms;
+  white-space: nowrap;
+}
+
+.nav-dropdown-submenu-items a:hover {
+  background-color: var(--color-border);
+  color: var(--color-accent);
+}
+
+.nav-dropdown-submenu-items a:first-child {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
+.nav-dropdown-submenu-items a:last-child {
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+/* Active navigation link */
+nav a.nav-active {
+  color: var(--navbar-link-color) !important;
+  font-weight: 600;
+  border-bottom: 2px solid var(--navbar-link-color);
+  padding-bottom: 0.25rem;
+  text-decoration: none;
+}
+
+nav a.nav-active:hover {
+  color: var(--navbar-link-hover) !important;
+  text-decoration: none;
+}
+
+/* Navbar buttons - match navbar link colors instead of button defaults */
+.navbar-button,
+button.navbar-button,
+.navbar-button[type="submit"] {
+  color: var(--navbar-link-color);
+  background: none !important;
+  background-image: none !important;
+  border: none !important;
+  padding: 0 !important;
+  cursor: pointer;
+  transform: none !important;
+  box-shadow: none !important;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  transition: color 150ms;
+}
+
+.navbar-button:hover,
+button.navbar-button:hover,
+.navbar-button[type="submit"]:hover {
+  color: var(--navbar-link-hover);
+  background: none !important;
+  background-image: none !important;
+  transform: none !important;
+  box-shadow: none !important;
+  text-decoration: none;
+}
+
+.navbar-button:focus,
+button.navbar-button:focus,
+.navbar-button[type="submit"]:focus {
+  background: none !important;
+  background-image: none !important;
+  box-shadow: none !important;
+  outline: none;
+}
+
+/* Legacy class alias for backwards compatibility */
+.nav-logout-button,
+.nav-logout-button[type="submit"] {
+  color: var(--navbar-link-color);
+  background: none !important;
+  background-image: none !important;
+  border: none !important;
+  padding: 0 !important;
+  cursor: pointer;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+.nav-logout-button:hover,
+.nav-logout-button[type="submit"]:hover {
+  color: var(--navbar-link-hover);
+  background: none !important;
+  background-image: none !important;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+.nav-logout-button:focus,
+.nav-logout-button[type="submit"]:focus {
+  background: none !important;
+  background-image: none !important;
+  box-shadow: none !important;
+  outline: none;
+}
+
+/* Feature cards */
+.feature-card {
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  text-align: center;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.feature-card:hover {
+  border-color: color-mix(in srgb, var(--color-border) 80%, var(--color-text-muted) 20%);
+  transform: translateY(-2px);
+}
+
+/* Result cards */
+.result-card {
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.result-card:hover {
+  border-color: color-mix(in srgb, var(--color-border) 80%, var(--color-text-muted) 20%);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+}
+
+/* Filter badges */
+.filter-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+}
+
+.filter-badge-active {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.filter-badge-inactive {
+  background-color: var(--color-border);
+  color: var(--color-text-primary);
+  border: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-text-muted) 20%);
+}
+
+.filter-badge-inactive:hover {
+  background-color: color-mix(in srgb, var(--color-border) 80%, var(--color-text-muted) 20%);
+}
+
+/* Download button */
+.download-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: linear-gradient(to right, var(--gradient-from), var(--gradient-to));
+  color: var(--color-text-primary);
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.download-button:hover {
+  background: linear-gradient(to right, var(--gradient-from-hover), var(--gradient-to-hover));
+  color: var(--color-text-primary);
+  transform: scale(1.05);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+}
+
+.download-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px color-mix(in srgb, var(--color-accent) 50%, transparent);
+}
+
+/* Download link item (for multiple downloads in accordion) */
+.download-link-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background-color: var(--color-border);
+  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text-primary) 15%);
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-text-muted) 20%);
+}
+
+.download-link-item:hover {
+  background-color: color-mix(in srgb, var(--color-border) 80%, var(--color-text-muted) 20%);
+  color: color-mix(in srgb, var(--color-accent) 70%, var(--color-text-primary) 30%);
+  transform: translateX(4px);
+  border-color: var(--color-accent);
+}
+
+.download-link-item:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-border), 0 0 0 4px color-mix(in srgb, var(--color-accent) 50%, transparent);
+}
+
+/* VirusTotal scan button */
+.virus-total-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: linear-gradient(to right, var(--color-notification), color-mix(in srgb, var(--color-notification) 85%, var(--color-background) 15%));
+  color: color-mix(in srgb, var(--color-notification) 30%, var(--color-text-primary) 70%);
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.virus-total-button:hover {
+  background: linear-gradient(to right, color-mix(in srgb, var(--color-notification) 85%, var(--color-background) 15%), color-mix(in srgb, var(--color-notification) 70%, var(--color-background) 30%));
+  color: color-mix(in srgb, var(--color-notification) 10%, var(--color-text-primary) 90%);
+  transform: scale(1.05);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+}
+
+.virus-total-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px color-mix(in srgb, var(--color-notification) 50%, transparent);
+}
+
+/* VirusTotal link item (for multiple scans in accordion) */
+.virus-total-link-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: linear-gradient(to right, var(--color-notification), color-mix(in srgb, var(--color-notification) 85%, var(--color-background) 15%));
+  color: color-mix(in srgb, var(--color-notification) 30%, var(--color-text-primary) 70%);
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid color-mix(in srgb, var(--color-notification) 85%, var(--color-background) 15%);
+}
+
+.virus-total-link-item:hover {
+  background: linear-gradient(to right, color-mix(in srgb, var(--color-notification) 85%, var(--color-background) 15%), color-mix(in srgb, var(--color-notification) 70%, var(--color-background) 30%));
+  color: color-mix(in srgb, var(--color-notification) 10%, var(--color-text-primary) 90%);
+  transform: translateX(4px);
+  border-color: color-mix(in srgb, var(--color-notification) 70%, var(--color-background) 30%);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.virus-total-link-item:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-border), 0 0 0 4px color-mix(in srgb, var(--color-notification) 50%, transparent);
+}
+
+/* Info badge */
+.info-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  background-color: color-mix(in srgb, var(--color-surface) 50%, transparent);
+  border: 1px solid var(--color-border);
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+/* Stat card */
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  background-color: color-mix(in srgb, var(--color-surface) 30%, transparent);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  padding: 0.75rem 1rem;
+}
+
+.stat-card-label {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+.stat-card-value {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text-primary) 15%);
+}
+
+/* Alert/notification styles */
+.alert {
+  padding: 1rem 1.5rem;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.alert-info {
+  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
+  border: 1px solid var(--color-accent);
+  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text-primary) 15%);
+}
+
+.alert-success {
+  background-color: color-mix(in srgb, var(--color-notification) 10%, transparent);
+  border: 1px solid var(--color-notification);
+  color: color-mix(in srgb, var(--color-notification) 50%, var(--color-text-primary) 50%);
+}
+
+.alert-warning {
+  background-color: color-mix(in srgb, var(--color-warning) 10%, transparent);
+  border: 1px solid var(--color-warning);
+  color: color-mix(in srgb, var(--color-warning) 90%, var(--color-text-primary) 10%);
+}
+
+.alert-error {
+  background-color: color-mix(in srgb, var(--color-alert) 10%, transparent);
+  border: 1px solid var(--color-alert);
+  color: color-mix(in srgb, var(--color-alert) 70%, var(--color-text-primary) 30%);
+}
+
+/* Loading spinner */
+.spinner {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
+  border-top-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text-primary) 15%);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Table styles */
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+table thead {
+  background-color: var(--color-surface);
+  border-bottom: 2px solid var(--color-border);
+}
+
+table th {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+table td {
+  padding: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+table tbody tr {
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+table tbody tr:hover {
+  background-color: color-mix(in srgb, var(--color-surface) 50%, transparent);
+}
+
+/* Mobile-responsive table improvements */
+@media (width <= 768px) {
+  table th,
+  table td {
+    padding: 0.5rem;
+    font-size: 0.75rem;
+  }
+
+  table th {
+    font-size: 0.625rem;
+    padding: 0.5rem;
+  }
+
+  /* Make table scrollable horizontally on small screens */
+  .overflow-x-auto {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Compact table layout on mobile */
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+}
+
+/* Code block styling */
+code {
+  background-color: var(--color-surface);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-family: 'Courier New', monospace;
+  font-size: 0.875em;
+  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text-primary) 15%);
+}
+
+pre {
+  background-color: var(--color-surface);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
+/* Divider */
+.divider {
+  height: 1px;
+  background-color: var(--color-border);
+  margin: 1.5rem 0;
+}
+
+/* Pagination with gradient buttons */
+.pagy-nav {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 1.0rem;
+}
+
+.pagy-nav .page {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  text-decoration: none;
+}
+
+.pagy-nav .page:not(.disabled) {
+  background: linear-gradient(to right, var(--gradient-from), var(--gradient-to));
+  color: var(--color-text-primary);
+  border: none;
+}
+
+.pagy-nav .page:not(.disabled):hover {
+  background: linear-gradient(to right, var(--gradient-from-hover), var(--gradient-to-hover));
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+}
+
+.pagy-nav .page.active {
+  background: linear-gradient(to right, var(--color-accent), color-mix(in srgb, var(--color-accent) 90%, var(--color-text-primary) 10%)) !important;
+  color: var(--color-text-primary) !important;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent);
+  font-weight: 700;
+  transform: scale(1.1);
+}
+
+.pagy-nav .page.disabled {
+  background: var(--color-border);
+  color: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-border) 30%);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Legacy pagy class support */
+.pagy {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.pagy a:not([role="separator"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.5rem;
+  padding: 0.5rem 1rem;
+  background: linear-gradient(to right, var(--gradient-from), var(--gradient-to)) !important;
+  color: var(--color-text-primary) !important;
+  border: none !important;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.pagy a[href]:hover {
+  background: linear-gradient(to right, var(--gradient-from-hover), var(--gradient-to-hover)) !important;
+  color: var(--color-text-primary) !important;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+}
+
+.pagy a[aria-current] {
+  background: linear-gradient(to right, var(--color-accent), color-mix(in srgb, var(--color-accent) 90%, var(--color-text-primary) 10%)) !important;
+  color: var(--color-text-primary) !important;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent) !important;
+  font-weight: 700;
+  transform: scale(1.1);
+}
+
+.pagy a[role="link"]:not([aria-current]) {
+  opacity: 0.85;
+}
+
+/* Empty state */
+.empty-state {
+  text-align: center;
+  padding: 3rem 1.5rem;
+  color: var(--color-text-muted);
+}
+
+.empty-state-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.empty-state-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+.empty-state-description {
+  font-size: 0.875rem;
+}
+
+.text-box {
+  padding: 1.0rem;
+}
+
+.box-no-top {
+  padding-top: 0.25rem;
+  padding-left: 1.0rem;
+  padding-right: 1.0rem;
+  padding-bottom: 1.0rem;
+}
+
+.button-spacing {
+  margin-top: 1.5rem;
+}
+
+/* Login form responsive margins */
+.login-form {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+@media (width >= 768px) {
+  .login-form {
+    margin-left: 4rem;
+    margin-right: 4rem;
+  }
+}
+
+@media (width >= 1024px) {
+  .login-form {
+    margin-left: 8rem;
+    margin-right: 8rem;
+  }
+}
+
+@media (width >= 1280px) {
+  .login-form {
+    margin-left: 12rem;
+    margin-right: 12rem;
+  }
+}
+
+.login-inner-form {
+  padding: 2rem;
+}
+
+/* Image accordion for search results */
+.image-accordion-summary {
+  cursor: pointer;
+  user-select: none;
+}
+
+.image-accordion-summary .chevron {
+  display: inline-block;
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+details[open] .image-accordion-summary .chevron {
+  transform: rotate(180deg);
+}
+
+/* Grid layout for additional images */
+.additional-images-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+@media (width <= 640px) {
+  .additional-images-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Meta-Database Search Modal */
+.meta-database-modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.meta-database-modal.active {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.meta-database-modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.75);
+  cursor: pointer;
+}
+
+.meta-database-modal-content {
+  position: relative;
+  width: 90%;
+  max-width: 60rem;
+  max-height: 90vh;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  overflow-y: auto;
+  z-index: 1001;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+.meta-database-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.meta-database-modal-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: transparent;
+  color: var(--color-text-muted);
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.meta-database-modal-close:hover {
+  background-color: var(--color-border);
+  color: var(--color-text-primary);
+}
+
+.meta-database-modal-close:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px color-mix(in srgb, var(--color-accent) 50%, transparent);
+}
+
+.meta-database-modal-footer {
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--color-border);
+}
+
+/* Meta-database search states */
+.meta-search-loading,
+.meta-search-error,
+.meta-search-results {
+  display: none;
+}
+
+.meta-search-loading.active,
+.meta-search-error.active,
+.meta-search-results.active {
+  display: block;
+}
+
+/* Database result sections */
+.meta-database-section {
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  background-color: color-mix(in srgb, var(--color-surface) 30%, transparent);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+}
+
+.meta-database-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.meta-database-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text-primary) 15%);
+}
+
+.meta-database-count {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+/* Result items with checkboxes */
+.meta-result-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background-color: var(--color-border);
+  border: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-text-muted) 20%);
+  border-radius: 0.375rem;
+  margin-bottom: 0.5rem;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+}
+
+.meta-result-item:hover {
+  background-color: color-mix(in srgb, var(--color-border) 80%, var(--color-text-muted) 20%);
+  border-color: var(--color-accent);
+}
+
+.meta-result-item:last-child {
+  margin-bottom: 0;
+}
+
+.meta-result-checkbox {
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  background-color: var(--color-surface);
+  border: 2px solid color-mix(in srgb, var(--color-border) 80%, var(--color-text-muted) 20%);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.meta-result-checkbox:checked {
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+
+.meta-result-checkbox:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px color-mix(in srgb, var(--color-accent) 50%, transparent);
+}
+
+.meta-result-info {
+  flex: 1;
+}
+
+.meta-result-title {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: 0.25rem;
+}
+
+.meta-result-meta {
+  display: flex;
+  gap: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+.meta-result-badge {
+  display: inline-flex;
+  padding: 0.125rem 0.5rem;
+  background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
+  border: 1px solid var(--color-accent);
+  border-radius: 9999px;
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text-primary) 15%);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.meta-result-episodes {
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--color-border);
+  font-size: 0.75rem;
+}
+
+/* Footer */
+.footer-container {
+  margin-top: auto;
+  padding: 1.5rem 0;
+  border-top: 1px solid var(--color-border);
+  background-color: var(--color-background);
+}
+
+.footer-content {
+  max-width: 80rem;
+  margin: 0 auto;
+  padding: 0 1rem;
+  text-align: center;
+}
+
+.footer-text {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+}
+
+.footer-version {
+  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text-primary) 15%);
+  font-weight: 500;
+}
+
+/* API Documentation Modal */
+.api-doc-modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.api-doc-modal.active {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.api-doc-modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.75);
+  cursor: pointer;
+}
+
+.api-doc-modal-content {
+  position: relative;
+  width: 90%;
+  max-width: 60rem;
+  max-height: 90vh;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  overflow-y: auto;
+  z-index: 1001;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+.api-doc-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.api-doc-modal-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: transparent;
+  color: var(--color-text-muted);
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.api-doc-modal-close:hover {
+  background-color: var(--color-border);
+  color: var(--color-text-primary);
+}
+
+.api-doc-modal-close:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px color-mix(in srgb, var(--color-accent) 50%, transparent);
+}
+
+/* API endpoint documentation sections */
+.api-doc-section {
+  margin-bottom: 1.5rem;
+}
+
+.api-doc-section h4 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text-primary) 15%);
+  margin-bottom: 0.75rem;
+}
+
+.api-doc-section h5 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  margin-bottom: 0.5rem;
+  margin-top: 1rem;
+}
+
+.api-doc-section ul {
+  list-style-type: disc;
+  list-style-position: inside;
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+}
+
+.api-doc-section li {
+  margin-bottom: 0.25rem;
+  padding-left: 0.5rem;
+}
+
+/* Code examples tabs */
+.api-doc-tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.api-doc-tab {
+  padding: 0.5rem 1rem;
+  background-color: transparent;
+  color: var(--color-text-muted);
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.api-doc-tab:hover {
+  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text-primary) 15%);
+}
+
+.api-doc-tab.active {
+  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text-primary) 15%);
+  border-bottom-color: var(--color-accent);
+}
+
+.api-doc-tab-content {
+  display: none;
+}
+
+.api-doc-tab-content.active {
+  display: block;
+}
+
+/* Endpoint clickable items */
+.api-endpoint-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background-color: color-mix(in srgb, var(--color-surface) 30%, transparent);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  margin-bottom: 0.5rem;
+  cursor: pointer;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.api-endpoint-item:hover {
+  background-color: var(--color-border);
+  border-color: var(--color-accent);
+}
+
+.api-endpoint-code {
+  font-family: 'Courier New', monospace;
+  font-size: 0.875rem;
+}
+
+.api-endpoint-description {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  margin-left: 1rem;
+}
+
+/* HTTP method badges */
+.http-method-badge {
+  display: inline-flex;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-right: 0.5rem;
+}
+
+.http-method-badge.get {
+  background-color: color-mix(in srgb, var(--color-notification) 15%, transparent);
+  color: var(--color-notification);
+  border: 1px solid var(--color-notification);
+}
+
+.http-method-badge.post {
+  background-color: color-mix(in srgb, var(--gradient-from) 15%, transparent);
+  color: var(--gradient-from);
+  border: 1px solid var(--gradient-from);
+}
+
+.http-method-badge.delete {
+  background-color: color-mix(in srgb, var(--color-alert) 15%, transparent);
+  color: var(--color-alert);
+  border: 1px solid var(--color-alert);
+}
+
+/* Progress Bar Component */
+.progress-bar-container {
+  width: 100%;
+  background-color: var(--color-border);
+  border-radius: 9999px;
+  height: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.progress-bar {
+  background: linear-gradient(to right, var(--gradient-from), var(--gradient-to));
+  height: 0.5rem;
+  border-radius: 9999px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  width: var(--progress-width, 0%);
+}
+
+/* Modal Component */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+}
+
+.modal-overlay.modal-open {
+  display: flex;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-background);
+  opacity: 0.95;
+}
+
+.modal-container {
+  position: relative;
+  z-index: 10;
+  max-width: 90vw;
+  max-height: 90vh;
+  padding: 2rem;
+  overflow-y: auto;
+}
+
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.modal-close-button {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: var(--color-surface);
+  border: 2px solid var(--color-border);
+  color: var(--color-text-primary);
+  transition: border-color 0.15s ease;
+  cursor: pointer;
+  z-index: 20;
+}
+
+.modal-close-button:hover {
+  border-color: var(--color-accent);
+}
+
+.modal-close-button:focus {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+/* Zoom Controls */
+.zoom-controls {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+
+.zoom-control-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  background-color: transparent;
+  color: var(--navbar-link-color);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 150ms;
+}
+
+.zoom-control-button:hover {
+  background-color: var(--color-border);
+  color: var(--navbar-link-hover);
+  border-color: var(--navbar-link-color);
+}
+
+.zoom-control-button:focus {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.zoom-control-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.zoom-level-text {
+  min-width: 3rem;
+  text-align: center;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+/* Zoomable content wrapper */
+.zoomable-wrapper {
+  position: relative;
+  overflow: hidden;
+  cursor: grab;
+  user-select: none;
+  min-height: 400px;
+  max-height: 70vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.zoomable-wrapper.dragging {
+  cursor: grabbing;
+}
+
+.zoomable-content {
+  transition: transform 0.2s ease-out;
+  transform-origin: center center;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* File Upload Component */
+.file-upload-container {
+  width: 100%;
+}
+
+.file-upload-zone {
+  border: 2px dashed var(--color-border);
+  background: var(--color-surface);
+  padding: 2rem;
+  text-align: center;
+  border-radius: 0.5rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.file-upload-zone:hover {
+  border-color: var(--color-accent);
+  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
+}
+
+.file-upload-zone.drag-over {
+  border-color: var(--color-accent);
+  background: color-mix(in srgb, var(--color-accent) 15%, var(--color-surface));
+  transform: scale(1.02);
+}
+
+.file-upload-input {
+  display: none;
+}
+
+.file-upload-prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.file-upload-prompt p {
+  margin: 0;
+}
+
+.file-upload-preview-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.file-upload-preview-container.hidden {
+  display: none;
+}
+
+.file-upload-preview {
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
+  object-fit: cover;
+}
+
+.file-upload-status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.file-upload-status.hidden {
+  display: none;
+}
+
+.file-upload-error {
+  margin-top: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: color-mix(in srgb, var(--color-alert) 10%, transparent);
+  border: 1px solid var(--color-alert);
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+}
+
+.file-upload-error.hidden {
+  display: none;
+}
+
+/* Profile Image Selector Component */
+.profile-image-selector {
+  width: 100%;
+}
+
+.profile-image-options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 1rem;
+  margin-top: 0.75rem;
+}
+
+.profile-image-option {
+  cursor: pointer;
+  display: block;
+  margin: 0;
+}
+
+.profile-image-option.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.profile-image-radio {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.profile-image-card {
+  transition: all 0.2s ease;
+  position: relative;
+  border: 2px solid var(--color-border);
+  background-color: var(--color-surface);
+  border-radius: 0.5rem;
+  height: 100%;
+}
+
+.profile-image-card:hover:not(.disabled) {
+  border-color: var(--color-accent);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+}
+
+.profile-image-card.selected {
+  border-color: var(--color-accent) !important;
+  border-width: 2px !important;
+  background-color: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
+}
+
+.profile-image-card.disabled {
+  border-color: var(--color-border);
+  background-color: var(--color-surface);
+}
+
+.profile-image-card-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.5rem 1rem;
+  text-align: center;
+}
+
+.profile-image-preview {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  margin-bottom: 0.75rem;
+  object-fit: cover;
+}
+
+.profile-image-card-title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: 0.25rem;
+}
+
+.profile-image-card-text {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+.profile-image-selection-indicator {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.profile-image-card.selected .profile-image-selection-indicator {
+  opacity: 1;
+}
+
+.profile-image-card.disabled .profile-image-selection-indicator {
+  opacity: 0.3;
+}
+
+.profile-picture-upload {
+  margin-top: 1rem;
+}