@geenius/adapters 0.1.0 → 0.3.0

package/packages/solidjs-css/src/adapters.css

@@ -1,1576 +0,0 @@
-/* ============================================================================
-   GEENIUS ADAPTERS - COMPREHENSIVE CSS
-   Component: Adapter Cards, Connectors, API Management
-   Colors: OKLCH, Dark Mode Support, Animations
-   ============================================================================ */
-
-:root {
-  /* Base Colors - OKLCH */
-  --adapters-bg: oklch(0.10 0.01 250);
-  --adapters-surface: oklch(0.13 0.01 250);
-  --adapters-surface-2: oklch(0.16 0.01 250);
-  --adapters-surface-3: oklch(0.19 0.01 250);
-  --adapters-border: oklch(0.22 0.01 250);
-  --adapters-border-light: oklch(0.26 0.01 250);
-  --adapters-border-focus: oklch(0.65 0.22 265);
-  --adapters-text: oklch(0.95 0.01 250);
-  --adapters-text-secondary: oklch(0.75 0.01 250);
-  --adapters-text-muted: oklch(0.65 0.01 250);
-  --adapters-text-disabled: oklch(0.45 0.01 250);
-
-  /* Semantic Colors - OKLCH */
-  --adapters-accent: oklch(0.65 0.22 265);
-  --adapters-accent-light: oklch(0.75 0.18 265);
-  --adapters-accent-dark: oklch(0.55 0.24 265);
-  --adapters-success: oklch(0.72 0.20 145);
-  --adapters-success-light: oklch(0.82 0.15 145);
-  --adapters-success-dark: oklch(0.62 0.22 145);
-  --adapters-warning: oklch(0.78 0.18 75);
-  --adapters-warning-light: oklch(0.88 0.13 75);
-  --adapters-warning-dark: oklch(0.68 0.20 75);
-  --adapters-error: oklch(0.60 0.25 25);
-  --adapters-error-light: oklch(0.70 0.20 25);
-  --adapters-error-dark: oklch(0.50 0.28 25);
-  --adapters-info: oklch(0.65 0.20 265);
-  --adapters-active: oklch(0.72 0.20 145);
-  --adapters-inactive: oklch(0.45 0.01 250);
-
-  /* Spacing & Layout */
-  --adapters-radius: 0.75rem;
-  --adapters-radius-sm: 0.375rem;
-  --adapters-radius-lg: 1.25rem;
-  --adapters-spacing-xs: 0.375rem;
-  --adapters-spacing-sm: 0.5rem;
-  --adapters-spacing-md: 0.75rem;
-  --adapters-spacing-lg: 1rem;
-  --adapters-spacing-xl: 1.5rem;
-  --adapters-spacing-2xl: 2rem;
-
-  /* Effects */
-  --adapters-shadow: 0 4px 24px oklch(0 0 0 / 0.4);
-  --adapters-shadow-sm: 0 2px 8px oklch(0 0 0 / 0.2);
-  --adapters-shadow-lg: 0 12px 48px oklch(0 0 0 / 0.5);
-  --adapters-shadow-focus: 0 0 0 3px oklch(0.65 0.22 265 / 0.15);
-  --adapters-transition: 200ms ease;
-  --adapters-transition-slow: 300ms ease;
-  --adapters-transition-fast: 100ms ease;
-  --adapters-backdrop: oklch(0 0 0 / 0.7);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --adapters-bg: oklch(0.10 0.01 250);
-    --adapters-surface: oklch(0.13 0.01 250);
-    --adapters-surface-2: oklch(0.16 0.01 250);
-    --adapters-text: oklch(0.95 0.01 250);
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    --adapters-bg: oklch(0.98 0.01 250);
-    --adapters-surface: oklch(0.96 0.01 250);
-    --adapters-surface-2: oklch(0.92 0.01 250);
-    --adapters-surface-3: oklch(0.88 0.01 250);
-    --adapters-border: oklch(0.80 0.02 250);
-    --adapters-text: oklch(0.15 0.01 250);
-    --adapters-text-secondary: oklch(0.35 0.01 250);
-    --adapters-text-muted: oklch(0.50 0.01 250);
-    --adapters-text-disabled: oklch(0.70 0.01 250);
-  }
-}
-
-/* ============================================================================
-   MAIN CONTAINER & LAYOUT
-   ============================================================================ */
-
-.adapters__container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adapters-spacing-xl);
-  padding: var(--adapters-spacing-xl);
-  background: var(--adapters-bg);
-  min-height: 100vh;
-}
-
-.adapters__wrapper {
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-}
-
-.adapters__page {
-  padding: var(--adapters-spacing-xl);
-  background: var(--adapters-bg);
-  min-height: 100vh;
-}
-
-.adapters__section {
-  margin-bottom: var(--adapters-spacing-2xl);
-}
-
-.adapters__section-title {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--adapters-text);
-  margin: 0 0 var(--adapters-spacing-lg);
-}
-
-.adapters__section-subtitle {
-  font-size: 0.875rem;
-  color: var(--adapters-text-muted);
-  margin: 0 0 var(--adapters-spacing-md);
-}
-
-/* ============================================================================
-   HEADER & TITLE
-   ============================================================================ */
-
-.adapters__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--adapters-spacing-lg);
-  flex-wrap: wrap;
-  gap: var(--adapters-spacing-md);
-}
-
-.adapters__title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--adapters-text);
-  margin: 0;
-  line-height: 1.2;
-}
-
-.adapters__subtitle {
-  font-size: 0.875rem;
-  color: var(--adapters-text-muted);
-  margin: 0.25rem 0 0;
-  font-weight: 400;
-}
-
-.adapters__page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--adapters-spacing-xl);
-  padding-bottom: var(--adapters-spacing-lg);
-  border-bottom: 1px solid var(--adapters-border);
-  flex-wrap: wrap;
-  gap: var(--adapters-spacing-md);
-}
-
-/* ============================================================================
-   BREADCRUMBS & NAVIGATION
-   ============================================================================ */
-
-.adapters__breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: var(--adapters-spacing-sm);
-  font-size: 0.875rem;
-  color: var(--adapters-text-muted);
-  margin-bottom: var(--adapters-spacing-md);
-}
-
-.adapters__breadcrumb-link {
-  color: var(--adapters-accent);
-  text-decoration: none;
-  transition: color var(--adapters-transition);
-}
-
-.adapters__breadcrumb-link:hover {
-  color: var(--adapters-accent-light);
-  text-decoration: underline;
-}
-
-.adapters__breadcrumb-sep {
-  opacity: 0.4;
-}
-
-.adapters__tabs {
-  display: flex;
-  gap: 0;
-  border-bottom: 1px solid var(--adapters-border);
-  margin-bottom: var(--adapters-spacing-xl);
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.adapters__tab {
-  padding: var(--adapters-spacing-sm) var(--adapters-spacing-lg);
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--adapters-text-muted);
-  cursor: pointer;
-  border: none;
-  background: none;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  transition: color var(--adapters-transition);
-  white-space: nowrap;
-}
-
-.adapters__tab:hover {
-  color: var(--adapters-text);
-}
-
-.adapters__tab--active {
-  color: var(--adapters-accent);
-  border-bottom-color: var(--adapters-accent);
-}
-
-/* ============================================================================
-   GRID & LAYOUT COMPONENTS
-   ============================================================================ */
-
-.adapters__grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: var(--adapters-spacing-xl);
-}
-
-.adapters__grid--2col {
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-}
-
-.adapters__grid--3col {
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-}
-
-.adapters__row {
-  display: flex;
-  gap: var(--adapters-spacing-lg);
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.adapters__col {
-  flex: 1;
-  min-width: 0;
-}
-
-.adapters__col--half {
-  flex: 0 1 calc(50% - var(--adapters-spacing-sm));
-}
-
-.adapters__col--third {
-  flex: 0 1 calc(33.333% - var(--adapters-spacing-sm));
-}
-
-.adapters__spacer {
-  height: var(--adapters-spacing-xl);
-}
-
-.adapters__divider {
-  height: 1px;
-  background: var(--adapters-border);
-  margin: var(--adapters-spacing-lg) 0;
-}
-
-/* ============================================================================
-   CARDS & SURFACES
-   ============================================================================ */
-
-.adapters__card {
-  background: var(--adapters-surface);
-  border: 1px solid var(--adapters-border);
-  border-radius: var(--adapters-radius);
-  padding: var(--adapters-spacing-xl);
-  transition: all var(--adapters-transition);
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.adapters__card:hover {
-  border-color: var(--adapters-accent);
-  box-shadow: var(--adapters-shadow);
-  transform: translateY(-2px);
-}
-
-.adapters__card:focus-within {
-  border-color: var(--adapters-border-focus);
-  box-shadow: var(--adapters-shadow-focus);
-}
-
-.adapters__card--active {
-  border-color: var(--adapters-active);
-  background: oklch(0.15 0.02 145);
-}
-
-.adapters__card--inactive {
-  opacity: 0.65;
-}
-
-.adapters__card--error {
-  border-color: var(--adapters-error);
-  background: oklch(0.15 0.03 25);
-}
-
-.adapters__card--warning {
-  border-color: var(--adapters-warning);
-  background: oklch(0.16 0.03 75);
-}
-
-.adapters__card--success {
-  border-color: var(--adapters-success);
-  background: oklch(0.15 0.03 145);
-}
-
-.adapters__card--disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.adapters__card--loading {
-  opacity: 0.75;
-}
-
-.adapters__card-header {
-  display: flex;
-  align-items: center;
-  gap: var(--adapters-spacing-md);
-  margin-bottom: var(--adapters-spacing-md);
-  flex-wrap: wrap;
-}
-
-.adapters__card-icon {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: var(--adapters-radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  background: var(--adapters-surface-2);
-  flex-shrink: 0;
-  transition: background var(--adapters-transition);
-}
-
-.adapters__card:hover .adapters__card-icon {
-  background: var(--adapters-surface-3);
-}
-
-.adapters__card-title {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  flex: 1;
-}
-
-.adapters__card-name {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--adapters-text);
-  margin: 0;
-}
-
-.adapters__card-type {
-  font-size: 0.75rem;
-  color: var(--adapters-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: 500;
-}
-
-.adapters__card-desc {
-  font-size: 0.875rem;
-  color: var(--adapters-text-muted);
-  line-height: 1.5;
-  margin: var(--adapters-spacing-md) 0;
-  flex-grow: 1;
-}
-
-.adapters__card-meta {
-  display: flex;
-  gap: var(--adapters-spacing-md);
-  flex-wrap: wrap;
-  margin: var(--adapters-spacing-md) 0;
-  font-size: 0.8125rem;
-}
-
-.adapters__card-meta-item {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  color: var(--adapters-text-muted);
-}
-
-.adapters__card-meta-label {
-  font-weight: 500;
-}
-
-.adapters__card-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: var(--adapters-spacing-md);
-  padding-top: var(--adapters-spacing-md);
-  border-top: 1px solid var(--adapters-border);
-  flex-wrap: wrap;
-  gap: var(--adapters-spacing-sm);
-}
-
-.adapters__card-actions {
-  display: flex;
-  gap: var(--adapters-spacing-sm);
-}
-
-/* ============================================================================
-   STATUS BADGES & INDICATORS
-   ============================================================================ */
-
-.adapters__status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--adapters-spacing-xs);
-  padding: var(--adapters-spacing-xs) var(--adapters-spacing-md);
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  transition: all var(--adapters-transition);
-}
-
-.adapters__status-badge::before {
-  content: '';
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background: currentColor;
-  animation: adapters-pulse 2s ease-in-out infinite;
-}
-
-.adapters__status-badge--active {
-  color: var(--adapters-active);
-  background: oklch(0.72 0.20 145 / 0.15);
-}
-
-.adapters__status-badge--inactive {
-  color: var(--adapters-inactive);
-  background: oklch(0.45 0.01 250 / 0.15);
-}
-
-.adapters__status-badge--error {
-  color: var(--adapters-error);
-  background: oklch(0.60 0.25 25 / 0.15);
-}
-
-.adapters__status-badge--warning {
-  color: var(--adapters-warning);
-  background: oklch(0.78 0.18 75 / 0.15);
-}
-
-.adapters__status-badge--success {
-  color: var(--adapters-success);
-  background: oklch(0.72 0.20 145 / 0.15);
-}
-
-.adapters__status-badge--pending {
-  color: var(--adapters-info);
-  background: oklch(0.65 0.20 265 / 0.15);
-}
-
-.adapters__status-indicator {
-  display: inline-block;
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background: var(--adapters-active);
-  animation: adapters-pulse 2s ease-in-out infinite;
-}
-
-.adapters__status-indicator--error {
-  background: var(--adapters-error);
-  animation: adapters-pulse-error 1s ease-in-out infinite;
-}
-
-.adapters__type-badge {
-  display: inline-flex;
-  padding: 0.125rem var(--adapters-spacing-sm);
-  border-radius: var(--adapters-radius-sm);
-  font-size: 0.75rem;
-  font-weight: 500;
-  background: var(--adapters-surface-2);
-  color: var(--adapters-text-muted);
-  border: 1px solid var(--adapters-border);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  white-space: nowrap;
-}
-
-.adapters__type-badge--email {
-  color: oklch(0.65 0.20 265);
-  background: oklch(0.65 0.20 265 / 0.1);
-  border-color: oklch(0.65 0.20 265 / 0.2);
-}
-
-.adapters__type-badge--sms {
-  color: oklch(0.72 0.18 75);
-  background: oklch(0.72 0.18 75 / 0.1);
-  border-color: oklch(0.72 0.18 75 / 0.2);
-}
-
-.adapters__type-badge--push {
-  color: oklch(0.72 0.20 145);
-  background: oklch(0.72 0.20 145 / 0.1);
-  border-color: oklch(0.72 0.20 145 / 0.2);
-}
-
-.adapters__type-badge--webhook {
-  color: oklch(0.78 0.18 60);
-  background: oklch(0.78 0.18 60 / 0.1);
-  border-color: oklch(0.78 0.18 60 / 0.2);
-}
-
-.adapters__type-badge--api {
-  color: oklch(0.65 0.20 240);
-  background: oklch(0.65 0.20 240 / 0.1);
-  border-color: oklch(0.65 0.20 240 / 0.2);
-}
-
-/* ============================================================================
-   FORMS & INPUTS
-   ============================================================================ */
-
-.adapters__config-form {
-  background: var(--adapters-surface);
-  border: 1px solid var(--adapters-border);
-  border-radius: var(--adapters-radius);
-  padding: var(--adapters-spacing-xl);
-}
-
-.adapters__config-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--adapters-text);
-  margin: 0 0 var(--adapters-spacing-xl);
-}
-
-.adapters__form-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adapters-spacing-xs);
-  margin-bottom: var(--adapters-spacing-lg);
-}
-
-.adapters__form-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--adapters-text);
-}
-
-.adapters__form-label--required::after {
-  content: ' *';
-  color: var(--adapters-error);
-}
-
-.adapters__form-input,
-.adapters__form-select,
-.adapters__form-textarea {
-  background: var(--adapters-surface-2);
-  border: 1px solid var(--adapters-border);
-  border-radius: var(--adapters-radius-sm);
-  padding: var(--adapters-spacing-sm) var(--adapters-spacing-md);
-  color: var(--adapters-text);
-  font-size: 0.875rem;
-  transition: all var(--adapters-transition);
-  outline: none;
-  width: 100%;
-  box-sizing: border-box;
-  font-family: inherit;
-}
-
-.adapters__form-input:focus,
-.adapters__form-select:focus,
-.adapters__form-textarea:focus {
-  border-color: var(--adapters-border-focus);
-  box-shadow: var(--adapters-shadow-focus);
-}
-
-.adapters__form-input::placeholder {
-  color: var(--adapters-text-disabled);
-}
-
-.adapters__form-input--error {
-  border-color: var(--adapters-error);
-}
-
-.adapters__form-input--error:focus {
-  box-shadow: 0 0 0 3px oklch(0.60 0.25 25 / 0.15);
-}
-
-.adapters__form-input:disabled {
-  background: var(--adapters-surface-3);
-  color: var(--adapters-text-disabled);
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.adapters__form-textarea {
-  resize: vertical;
-  min-height: 100px;
-}
-
-.adapters__form-hint {
-  font-size: 0.75rem;
-  color: var(--adapters-text-muted);
-  margin-top: var(--adapters-spacing-xs);
-}
-
-.adapters__form-error {
-  font-size: 0.75rem;
-  color: var(--adapters-error);
-  margin-top: var(--adapters-spacing-xs);
-}
-
-.adapters__form-group--inline {
-  flex-direction: row;
-  align-items: center;
-  gap: var(--adapters-spacing-md);
-}
-
-.adapters__form-group--inline .adapters__form-label {
-  margin: 0;
-  flex-shrink: 0;
-}
-
-.adapters__checkbox,
-.adapters__radio {
-  display: flex;
-  align-items: center;
-  gap: var(--adapters-spacing-sm);
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: var(--adapters-text);
-}
-
-.adapters__checkbox input[type="checkbox"],
-.adapters__radio input[type="radio"] {
-  cursor: pointer;
-  accent-color: var(--adapters-accent);
-}
-
-/* ============================================================================
-   BUTTONS & ACTIONS
-   ============================================================================ */
-
-.adapters__btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--adapters-spacing-sm);
-  padding: var(--adapters-spacing-sm) var(--adapters-spacing-lg);
-  border-radius: var(--adapters-radius-sm);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  border: none;
-  transition: all var(--adapters-transition);
-  text-decoration: none;
-  white-space: nowrap;
-  user-select: none;
-}
-
-.adapters__btn:active {
-  transform: scale(0.98);
-}
-
-.adapters__btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.adapters__btn--primary {
-  background: var(--adapters-accent);
-  color: oklch(1 0 0);
-  box-shadow: var(--adapters-shadow-sm);
-}
-
-.adapters__btn--primary:hover:not(:disabled) {
-  background: var(--adapters-accent-light);
-  box-shadow: var(--adapters-shadow);
-  transform: translateY(-1px);
-}
-
-.adapters__btn--secondary {
-  background: var(--adapters-surface-2);
-  color: var(--adapters-text);
-  border: 1px solid var(--adapters-border);
-}
-
-.adapters__btn--secondary:hover:not(:disabled) {
-  border-color: var(--adapters-accent);
-  color: var(--adapters-accent);
-  background: var(--adapters-surface-3);
-}
-
-.adapters__btn--tertiary {
-  background: transparent;
-  color: var(--adapters-accent);
-  border: 1px solid var(--adapters-border);
-}
-
-.adapters__btn--tertiary:hover:not(:disabled) {
-  background: var(--adapters-surface-2);
-  border-color: var(--adapters-accent);
-}
-
-.adapters__btn--danger {
-  background: var(--adapters-error);
-  color: oklch(1 0 0);
-}
-
-.adapters__btn--danger:hover:not(:disabled) {
-  background: var(--adapters-error-light);
-}
-
-.adapters__btn--success {
-  background: var(--adapters-success);
-  color: oklch(1 0 0);
-}
-
-.adapters__btn--success:hover:not(:disabled) {
-  background: var(--adapters-success-light);
-}
-
-.adapters__btn--warning {
-  background: var(--adapters-warning);
-  color: oklch(1 0 0);
-}
-
-.adapters__btn--warning:hover:not(:disabled) {
-  background: var(--adapters-warning-light);
-}
-
-.adapters__btn--sm {
-  padding: var(--adapters-spacing-xs) var(--adapters-spacing-sm);
-  font-size: 0.8125rem;
-}
-
-.adapters__btn--lg {
-  padding: var(--adapters-spacing-md) var(--adapters-spacing-xl);
-  font-size: 1rem;
-}
-
-.adapters__btn--block {
-  width: 100%;
-}
-
-.adapters__btn--loading {
-  pointer-events: none;
-  opacity: 0.75;
-}
-
-.adapters__btn--loading::after {
-  content: '';
-  display: inline-block;
-  width: 0.875rem;
-  height: 0.875rem;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: adapters-spin 600ms linear infinite;
-}
-
-.adapters__actions {
-  display: flex;
-  gap: var(--adapters-spacing-md);
-  flex-wrap: wrap;
-}
-
-.adapters__action-group {
-  display: flex;
-  gap: 0;
-  border-radius: var(--adapters-radius-sm);
-  overflow: hidden;
-}
-
-.adapters__action-group .adapters__btn {
-  border-radius: 0;
-  border-right: 1px solid var(--adapters-border);
-}
-
-.adapters__action-group .adapters__btn:last-child {
-  border-right: none;
-}
-
-/* ============================================================================
-   TABLES & DATA DISPLAY
-   ============================================================================ */
-
-.adapters__table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.adapters__table-header {
-  background: var(--adapters-surface-2);
-}
-
-.adapters__table-th {
-  padding: var(--adapters-spacing-md) var(--adapters-spacing-lg);
-  text-align: left;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--adapters-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border-bottom: 1px solid var(--adapters-border);
-}
-
-.adapters__table-row {
-  border-bottom: 1px solid var(--adapters-border);
-  transition: background-color var(--adapters-transition);
-}
-
-.adapters__table-row:hover {
-  background: var(--adapters-surface-2);
-}
-
-.adapters__table-row--active {
-  background: oklch(0.15 0.02 145 / 0.3);
-}
-
-.adapters__table-td {
-  padding: var(--adapters-spacing-lg);
-  font-size: 0.875rem;
-  color: var(--adapters-text);
-}
-
-.adapters__table-td--numeric {
-  text-align: right;
-  font-family: 'JetBrains Mono', monospace;
-}
-
-.adapters__table-td--status {
-  text-align: center;
-}
-
-/* ============================================================================
-   STATS & METRICS
-   ============================================================================ */
-
-.adapters__stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: var(--adapters-spacing-lg);
-  margin-bottom: var(--adapters-spacing-xl);
-}
-
-.adapters__stat {
-  background: var(--adapters-surface);
-  border: 1px solid var(--adapters-border);
-  border-radius: var(--adapters-radius);
-  padding: var(--adapters-spacing-lg);
-  text-align: center;
-  transition: all var(--adapters-transition);
-}
-
-.adapters__stat:hover {
-  border-color: var(--adapters-accent);
-  box-shadow: var(--adapters-shadow-sm);
-  transform: translateY(-1px);
-}
-
-.adapters__stat-value {
-  font-size: 1.75rem;
-  font-weight: 700;
-  color: var(--adapters-accent);
-  line-height: 1;
-}
-
-.adapters__stat-label {
-  font-size: 0.8125rem;
-  color: var(--adapters-text-muted);
-  margin-top: var(--adapters-spacing-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: 500;
-}
-
-.adapters__stat-change {
-  font-size: 0.75rem;
-  margin-top: var(--adapters-spacing-xs);
-  font-weight: 500;
-}
-
-.adapters__stat-change--positive {
-  color: var(--adapters-success);
-}
-
-.adapters__stat-change--negative {
-  color: var(--adapters-error);
-}
-
-/* ============================================================================
-   FILTERS & CONTROLS
-   ============================================================================ */
-
-.adapters__filter-bar {
-  display: flex;
-  gap: var(--adapters-spacing-md);
-  flex-wrap: wrap;
-  margin-bottom: var(--adapters-spacing-lg);
-  align-items: center;
-}
-
-.adapters__filter-select {
-  background: var(--adapters-surface);
-  border: 1px solid var(--adapters-border);
-  border-radius: var(--adapters-radius-sm);
-  padding: var(--adapters-spacing-sm) var(--adapters-spacing-md);
-  color: var(--adapters-text);
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all var(--adapters-transition);
-}
-
-.adapters__filter-select:focus {
-  border-color: var(--adapters-border-focus);
-  outline: none;
-}
-
-.adapters__filter-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--adapters-spacing-xs);
-  padding: var(--adapters-spacing-xs) var(--adapters-spacing-md);
-  background: var(--adapters-surface-2);
-  border: 1px solid var(--adapters-border);
-  border-radius: 9999px;
-  font-size: 0.8125rem;
-  color: var(--adapters-text);
-}
-
-.adapters__filter-chip--removable {
-  cursor: pointer;
-  padding-right: var(--adapters-spacing-sm);
-}
-
-.adapters__pagination {
-  display: flex;
-  gap: var(--adapters-spacing-sm);
-  align-items: center;
-  justify-content: center;
-  margin-top: var(--adapters-spacing-xl);
-}
-
-.adapters__pagination-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border: 1px solid var(--adapters-border);
-  border-radius: var(--adapters-radius-sm);
-  background: var(--adapters-surface);
-  color: var(--adapters-text);
-  cursor: pointer;
-  transition: all var(--adapters-transition);
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.adapters__pagination-item:hover:not(:disabled) {
-  border-color: var(--adapters-accent);
-  color: var(--adapters-accent);
-}
-
-.adapters__pagination-item--active {
-  background: var(--adapters-accent);
-  border-color: var(--adapters-accent);
-  color: oklch(1 0 0);
-}
-
-/* ============================================================================
-   LOGS & CODE DISPLAY
-   ============================================================================ */
-
-.adapters__log {
-  background: oklch(0.08 0.01 250);
-  border: 1px solid var(--adapters-border);
-  border-radius: var(--adapters-radius);
-  padding: var(--adapters-spacing-lg);
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.8125rem;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.adapters__log-entry {
-  display: flex;
-  gap: var(--adapters-spacing-md);
-  padding: var(--adapters-spacing-xs) 0;
-  border-bottom: 1px solid oklch(0.15 0 0);
-}
-
-.adapters__log-entry:last-child {
-  border-bottom: none;
-}
-
-.adapters__log-time {
-  color: var(--adapters-text-muted);
-  flex-shrink: 0;
-  min-width: 10rem;
-}
-
-.adapters__log-level {
-  font-weight: 600;
-  flex-shrink: 0;
-  width: 4rem;
-  text-align: center;
-}
-
-.adapters__log-level--info {
-  color: var(--adapters-accent);
-}
-
-.adapters__log-level--error {
-  color: var(--adapters-error);
-  animation: adapters-pulse-error 1s ease-in-out infinite;
-}
-
-.adapters__log-level--warn {
-  color: var(--adapters-warning);
-}
-
-.adapters__log-level--success {
-  color: var(--adapters-success);
-}
-
-.adapters__log-msg {
-  color: var(--adapters-text);
-  word-break: break-word;
-  flex-grow: 1;
-}
-
-/* ============================================================================
-   MODALS & OVERLAYS
-   ============================================================================ */
-
-.adapters__modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--adapters-backdrop);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 50;
-  backdrop-filter: blur(4px);
-  animation: adapters-fade-in var(--adapters-transition);
-}
-
-.adapters__modal {
-  background: var(--adapters-surface);
-  border: 1px solid var(--adapters-border);
-  border-radius: calc(var(--adapters-radius) * 1.5);
-  padding: var(--adapters-spacing-xl);
-  min-width: 24rem;
-  max-width: 90vw;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: var(--adapters-shadow-lg);
-  animation: adapters-slide-up var(--adapters-transition);
-}
-
-.adapters__modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--adapters-spacing-xl);
-}
-
-.adapters__modal-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--adapters-text);
-  margin: 0;
-}
-
-.adapters__modal-close {
-  background: none;
-  border: none;
-  color: var(--adapters-text-muted);
-  cursor: pointer;
-  padding: var(--adapters-spacing-xs);
-  border-radius: var(--adapters-radius-sm);
-  font-size: 1.25rem;
-  line-height: 1;
-  transition: all var(--adapters-transition);
-  flex-shrink: 0;
-}
-
-.adapters__modal-close:hover {
-  color: var(--adapters-text);
-  background: var(--adapters-surface-2);
-}
-
-.adapters__modal-content {
-  margin-bottom: var(--adapters-spacing-xl);
-}
-
-.adapters__modal-footer {
-  display: flex;
-  gap: var(--adapters-spacing-md);
-  justify-content: flex-end;
-  margin-top: var(--adapters-spacing-xl);
-  padding-top: var(--adapters-spacing-lg);
-  border-top: 1px solid var(--adapters-border);
-  flex-wrap: wrap;
-}
-
-/* ============================================================================
-   ALERTS & NOTIFICATIONS
-   ============================================================================ */
-
-.adapters__alert {
-  padding: var(--adapters-spacing-md) var(--adapters-spacing-lg);
-  border-radius: var(--adapters-radius-sm);
-  font-size: 0.875rem;
-  display: flex;
-  gap: var(--adapters-spacing-md);
-  align-items: flex-start;
-  margin-bottom: var(--adapters-spacing-lg);
-  animation: adapters-slide-down var(--adapters-transition);
-}
-
-.adapters__alert-icon {
-  flex-shrink: 0;
-  font-size: 1rem;
-  line-height: 1.4;
-}
-
-.adapters__alert-content {
-  flex-grow: 1;
-}
-
-.adapters__alert-title {
-  font-weight: 600;
-  margin-bottom: var(--adapters-spacing-xs);
-}
-
-.adapters__alert--info {
-  background: oklch(0.65 0.20 265 / 0.1);
-  border: 1px solid oklch(0.65 0.20 265 / 0.3);
-  color: oklch(0.80 0.15 265);
-}
-
-.adapters__alert--success {
-  background: oklch(0.72 0.20 145 / 0.1);
-  border: 1px solid oklch(0.72 0.20 145 / 0.3);
-  color: oklch(0.80 0.15 145);
-}
-
-.adapters__alert--error {
-  background: oklch(0.60 0.25 25 / 0.1);
-  border: 1px solid oklch(0.60 0.25 25 / 0.3);
-  color: oklch(0.75 0.20 25);
-}
-
-.adapters__alert--warning {
-  background: oklch(0.78 0.18 75 / 0.1);
-  border: 1px solid oklch(0.78 0.18 75 / 0.3);
-  color: oklch(0.85 0.14 75);
-}
-
-.adapters__toast {
-  position: fixed;
-  bottom: var(--adapters-spacing-lg);
-  right: var(--adapters-spacing-lg);
-  max-width: 24rem;
-  animation: adapters-slide-in-right var(--adapters-transition);
-  z-index: 100;
-}
-
-/* ============================================================================
-   EMPTY STATE
-   ============================================================================ */
-
-.adapters__empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem var(--adapters-spacing-lg);
-  text-align: center;
-  color: var(--adapters-text-muted);
-}
-
-.adapters__empty-icon {
-  font-size: 3rem;
-  margin-bottom: var(--adapters-spacing-lg);
-  opacity: 0.5;
-}
-
-.adapters__empty-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--adapters-text);
-  margin: 0 0 var(--adapters-spacing-sm);
-}
-
-.adapters__empty-desc {
-  font-size: 0.875rem;
-  max-width: 24rem;
-  line-height: 1.6;
-}
-
-.adapters__empty-action {
-  margin-top: var(--adapters-spacing-lg);
-}
-
-/* ============================================================================
-   SKELETON & LOADING
-   ============================================================================ */
-
-.adapters__skeleton {
-  background: linear-gradient(
-    90deg,
-    var(--adapters-surface) 25%,
-    var(--adapters-surface-2) 50%,
-    var(--adapters-surface) 75%
-  );
-  background-size: 200% 100%;
-  animation: adapters-shimmer 1.5s infinite;
-  border-radius: var(--adapters-radius-sm);
-}
-
-.adapters__skeleton--text {
-  height: 1rem;
-  margin-bottom: var(--adapters-spacing-sm);
-}
-
-.adapters__skeleton--title {
-  height: 1.5rem;
-  width: 40%;
-  margin-bottom: var(--adapters-spacing-lg);
-}
-
-.adapters__skeleton--card {
-  height: 8rem;
-}
-
-.adapters__skeleton--avatar {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 50%;
-}
-
-.adapters__spinner {
-  display: inline-block;
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid var(--adapters-surface-2);
-  border-top-color: var(--adapters-accent);
-  border-radius: 50%;
-  animation: adapters-spin 600ms linear infinite;
-}
-
-/* ============================================================================
-   TOOLTIPS
-   ============================================================================ */
-
-.adapters__tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.adapters__tooltip-trigger {
-  cursor: help;
-  text-decoration: underline dotted;
-  text-decoration-color: var(--adapters-text-muted);
-}
-
-.adapters__tooltip-content {
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  background: oklch(0.15 0.01 250);
-  color: var(--adapters-text);
-  padding: var(--adapters-spacing-sm) var(--adapters-spacing-md);
-  border-radius: var(--adapters-radius-sm);
-  font-size: 0.8125rem;
-  white-space: nowrap;
-  margin-bottom: var(--adapters-spacing-sm);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--adapters-transition);
-  z-index: 10;
-  box-shadow: var(--adapters-shadow-sm);
-}
-
-.adapters__tooltip:hover .adapters__tooltip-content {
-  opacity: 1;
-}
-
-/* ============================================================================
-   HELPERS & UTILITIES
-   ============================================================================ */
-
-.adapters__text--muted {
-  color: var(--adapters-text-muted);
-}
-
-.adapters__text--success {
-  color: var(--adapters-success);
-}
-
-.adapters__text--error {
-  color: var(--adapters-error);
-}
-
-.adapters__text--warning {
-  color: var(--adapters-warning);
-}
-
-.adapters__text--accent {
-  color: var(--adapters-accent);
-}
-
-.adapters__text--bold {
-  font-weight: 600;
-}
-
-.adapters__text--sm {
-  font-size: 0.8125rem;
-}
-
-.adapters__text--lg {
-  font-size: 1.125rem;
-}
-
-.adapters__badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--adapters-spacing-xs);
-  padding: var(--adapters-spacing-xs) var(--adapters-spacing-md);
-  background: var(--adapters-surface-2);
-  border: 1px solid var(--adapters-border);
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--adapters-text-muted);
-}
-
-/* ============================================================================
-   ANIMATIONS
-   ============================================================================ */
-
-@keyframes adapters-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-@keyframes adapters-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes adapters-pulse-error {
-  0%, 100% {
-    opacity: 1;
-    box-shadow: 0 0 0 0 currentColor;
-  }
-  50% {
-    opacity: 0.8;
-  }
-}
-
-@keyframes adapters-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes adapters-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes adapters-slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(1rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes adapters-slide-down {
-  from {
-    opacity: 0;
-    transform: translateY(-1rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes adapters-slide-in-right {
-  from {
-    opacity: 0;
-    transform: translateX(1rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-/* ============================================================================
-   RESPONSIVE DESIGN
-   ============================================================================ */
-
-@media (max-width: 1024px) {
-  .adapters__grid {
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  }
-
-  .adapters__grid--2col {
-    grid-template-columns: 1fr;
-  }
-
-  .adapters__modal {
-    min-width: 90vw;
-  }
-}
-
-@media (max-width: 768px) {
-  .adapters__container {
-    gap: var(--adapters-spacing-lg);
-    padding: var(--adapters-spacing-lg);
-  }
-
-  .adapters__grid {
-    grid-template-columns: 1fr;
-  }
-
-  .adapters__stats {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .adapters__filter-bar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .adapters__page {
-    padding: var(--adapters-spacing-lg);
-  }
-
-  .adapters__modal {
-    min-width: unset;
-    width: calc(100vw - 2rem);
-    max-height: calc(100vh - 2rem);
-  }
-
-  .adapters__modal-footer {
-    flex-direction: column-reverse;
-  }
-
-  .adapters__modal-footer .adapters__btn {
-    width: 100%;
-  }
-
-  .adapters__toast {
-    right: var(--adapters-spacing-sm);
-    left: var(--adapters-spacing-sm);
-    bottom: var(--adapters-spacing-sm);
-    max-width: none;
-  }
-
-  .adapters__col--half,
-  .adapters__col--third {
-    flex: 0 1 100%;
-  }
-}
-
-@media (max-width: 480px) {
-  .adapters__stats {
-    grid-template-columns: 1fr;
-  }
-
-  .adapters__actions {
-    flex-direction: column;
-  }
-
-  .adapters__actions .adapters__btn {
-    width: 100%;
-  }
-
-  .adapters__title {
-    font-size: 1.25rem;
-  }
-
-  .adapters__header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .adapters__tabs {
-    margin-bottom: var(--adapters-spacing-lg);
-  }
-
-  .adapters__table {
-    font-size: 0.75rem;
-  }
-
-  .adapters__table-th,
-  .adapters__table-td {
-    padding: var(--adapters-spacing-sm);
-  }
-
-  .adapters__modal {
-    border-radius: var(--adapters-radius);
-  }
-}
-
-/* ============================================================================
-   DARK MODE (explicit override)
-   ============================================================================ */
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --adapters-bg: oklch(0.10 0.01 250);
-    --adapters-surface: oklch(0.13 0.01 250);
-    --adapters-surface-2: oklch(0.16 0.01 250);
-    --adapters-text: oklch(0.95 0.01 250);
-    --adapters-text-muted: oklch(0.65 0.01 250);
-  }
-}
-
-/* ============================================================================
-   LIGHT MODE (explicit override)
-   ============================================================================ */
-
-@media (prefers-color-scheme: light) {
-  :root {
-    --adapters-bg: oklch(0.98 0.01 250);
-    --adapters-surface: oklch(0.96 0.01 250);
-    --adapters-surface-2: oklch(0.92 0.01 250);
-    --adapters-text: oklch(0.15 0.01 250);
-    --adapters-text-muted: oklch(0.50 0.01 250);
-  }
-}
-
-/* End of adapters.css */