.ai-api-control-room,
.analytics-page {



  --ar-admin-border: var(--ar-ds-color-border, #e5ebf3);

  --ar-admin-brand: var(--ar-ds-color-brand, #003986);

  --ar-admin-muted: var(--ar-ds-color-muted, #667794);
  --ar-admin-ink: var(--ar-ds-color-ink, #16244a);
  --ar-admin-shadow: var(--ar-ds-shadow-card, 0 18px 42px rgba(18, 51, 88, 0.08));
  --ar-admin-radius-lg: var(--ar-ds-radius-lg, 18px);
  --ar-admin-radius-md: var(--ar-ds-radius-md, 12px);
  --ar-admin-radius-pill: var(--ar-ds-radius-pill, 999px);
  color: var(--ar-admin-ink);
  font-family: var(--ar-ds-font-sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.ai-api-control-room .dashboard-panel,
.analytics-page .dashboard-panel {
  border-color: var(--ar-admin-border);
  border-radius: var(--ar-admin-radius-lg);
  box-shadow: var(--ar-admin-shadow);
}

.ai-api-control-room .ai-api-hero {
  border-color: var(--ar-admin-border);
  border-radius: var(--ar-admin-radius-lg);
}

.ai-api-control-room .ai-api-kicker {
  color: var(--ar-admin-brand);
  letter-spacing: .08em;
}

.ai-api-control-room .ai-api-primary-action,
.ai-api-control-room .ai-api-secondary-action,
.ai-api-control-room .ai-api-inline-button,
.analytics-page .btn {
  border-radius: var(--ar-admin-radius-pill);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.ai-api-control-room .ai-api-primary-action:focus-visible,
.ai-api-control-room .ai-api-secondary-action:focus-visible,
.ai-api-control-room .ai-api-inline-button:focus-visible,
.analytics-page .btn:focus-visible,
.analytics-page a:focus-visible {
  box-shadow: var(--ar-ds-focus-ring, 0 0 0 3px rgba(0, 57, 134, 0.14));
  outline: 0;
}

.ai-api-control-room .ai-api-table-wrap,
.analytics-page .table-responsive {
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ar-admin-radius-md);
  overflow-x: auto;
}

.ai-api-control-room .ai-api-table,
.analytics-page .table {
  vertical-align: middle;
}

.ai-api-control-room .ai-api-table th,
.analytics-page .table th {
  color: var(--ar-admin-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ai-api-control-room .ai-api-chip,
.analytics-page .badge {
  border-radius: var(--ar-admin-radius-pill);
  font-weight: 750;
}

.ai-api-control-room input:not([type="checkbox"]):not([type="radio"]),
.ai-api-control-room select,
.ai-api-control-room textarea,
.analytics-page input:not([type="checkbox"]):not([type="radio"]),
.analytics-page select,
.analytics-page textarea {
  border-color: var(--ar-admin-border);
  border-radius: var(--ar-admin-radius-md);
}

.ai-api-control-room input:not([type="checkbox"]):not([type="radio"]):focus,
.ai-api-control-room select:focus,
.ai-api-control-room textarea:focus,
.analytics-page input:not([type="checkbox"]):not([type="radio"]):focus,
.analytics-page select:focus,
.analytics-page textarea:focus {
  border-color: var(--ar-admin-brand);
  box-shadow: var(--ar-ds-focus-ring, 0 0 0 3px rgba(0, 57, 134, 0.14));
  outline: 0;
}

.ai-api-control-room code,
.analytics-page code {
  border-radius: var(--ar-ds-radius-xs, 6px);
  word-break: break-word;
}

.ai-api-control-room .ai-api-subtext {
  color: var(--ar-admin-muted);
}

@media (max-width: 991.98px) {
.ai-api-control-room .ai-api-hero {
    gap: var(--ar-ds-space-4, 16px);
}

.ai-api-control-room .ai-api-metrics {
    row-gap: var(--ar-ds-space-4, 16px);
}
}

@media (max-width: 640px) {
.ai-api-control-room,
.analytics-page {
    overflow-x: clip;
}

.ai-api-control-room .ai-api-hero,
.ai-api-control-room .ai-api-card {
    border-radius: var(--ar-admin-radius-md);
}
}