.student-directory-wrapper {
  margin: 0;
}

#student-search {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
    border-radius: 20px;
}

#student-directory-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.student-card {
  display: flex;
  gap: 12px;
  background: #f3f3f3;
  border-radius: 14px;
  padding: 14px;
  align-items: center;
}

.student-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.student-info {
  font-size: 13px;
}

.student-info ul {
  margin: 6px 0;
  padding-left: 16px;
}

.student-info li {
  font-size: 12px;
}

#student-load-more {
  margin: 30px auto;
  display: block;
}

/* Placeholder animation */
.student-card.placeholder {
    background-color: #f0f0f0;
    animation: pulse 1.2s infinite ease-in-out;
}

.student-card.placeholder .student-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ddd;
    flex-shrink: 0;
}

.student-card.placeholder .student-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.placeholder-text {
    height: 14px;
    background-color: #ddd;
    border-radius: 10px; /* fully rounded corners */
}

/* Different widths for variety */
.placeholder-text.name {
    width: 10%;
    height: 16px;
}

.placeholder-text.meta {
    width: 30%;
    height: 14px;
}

/* Pulse animation */
.student-card.placeholder {
    animation: pulse 1.2s infinite ease-in-out;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}