@layer components {

  .page-container {
      max-width: 840px;
      margin-left: auto;
      margin-right: auto;
      padding: 32px 20px 80px 20px;
  }

  .page-title {
      @apply text-center font-semibold text-2xl tracking-tight text-gray-900 mt-0 mb-2;
  }

  .page-subtitle {
      @apply text-center text-base text-gray-500 mb-8 leading-relaxed;
  }

  .section-title {
      @apply text-lg font-semibold text-gray-900 mt-6 mb-2;
  }

  .empty-state {
      @apply text-center my-10 leading-relaxed;
  }

  .empty-state-title {
      @apply text-lg font-medium text-gray-700 mb-1;
  }

  .empty-state-subtitle {
      @apply text-sm text-gray-500;
  }

  .mm-btn-primary {
      @apply inline-block bg-blue-500 text-white px-6 py-3 rounded-full font-medium text-center transition hover:bg-blue-600;
  }

  .mm-btn-secondary {
      @apply inline-block bg-white border border-blue-200 text-blue-600 px-4 py-2 rounded-full transition hover:bg-blue-50;
  }

  .btn-row {
      @apply flex justify-center gap-3 mt-5;
  }

  .mm-card {
      @apply bg-white rounded-xl p-6 shadow-md;
  }

} /* end @layer components */