@geenius/adapters 0.1.0

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

@@ -0,0 +1,1576 @@
+/* ============================================================================
+   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 */