.admin-layout > aside nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-layout > aside nav a {
  color: #bdc5c9;
}

.admin-layout > aside nav a:hover,
.admin-layout > aside nav a:focus-visible {
  color: #fff;
}

.learner-search {
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 22px;
  padding: 18px 20px;
}

.learner-search label {
  margin: 0 0 8px;
}

.learner-search > div {
  align-items: center;
  display: flex;
  gap: 10px;
}

.learner-search input { max-width: 480px; }
.learner-search a { color: var(--accent); font-size: 0.85rem; font-weight: 600; }

.learner-list {
  display: grid;
  gap: 12px;
}

.learner-list > article {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(220px, 1.3fr) minmax(260px, 1fr) auto;
  padding: 19px 20px;
}

.learner-identity {
  align-items: center;
  display: flex;
  gap: 13px;
  min-width: 0;
}

.learner-avatar {
  align-items: center;
  background: #e8f2ee;
  color: var(--accent);
  display: flex;
  flex: 0 0 auto;
  font: 600 1rem "IBM Plex Mono";
  height: 40px;
  justify-content: center;
  width: 40px;
}

.learner-identity h2 {
  font-size: 1rem;
  margin: 0 0 4px;
}

.learner-identity a {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learner-list-metrics {
  display: flex;
  gap: 22px;
}

.learner-list-metrics span {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 0.67rem;
}

.learner-list-metrics strong {
  color: var(--accent2);
  font: 500 0.9rem "IBM Plex Mono";
  margin-bottom: 3px;
}

.learner-list-status {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.learner-detail-head {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 28px;
}

.learner-detail-head h1 { font-size: 3rem; }

.learner-enrollments-head {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin: 48px 0 18px;
}

.learner-enrollments-head h2 { margin: 0; }
.learner-enrollments-head span { color: var(--muted); font-size: 0.8rem; }

.learner-enrollments {
  display: grid;
  gap: 12px;
}

.learner-enrollments article {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.65fr) auto;
  padding: 20px;
}

.learner-enrollments h3 {
  font-size: 1rem;
  margin: 9px 0 0;
}

.learner-enrollment-progress {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto;
}

.learner-enrollment-progress > div {
  background: #e4e9e7;
  height: 6px;
  overflow: hidden;
}

.learner-enrollment-progress > div span {
  background: var(--accent);
  display: block;
  height: 100%;
}

.learner-enrollment-progress strong {
  color: var(--accent);
  font: 500 0.75rem "IBM Plex Mono";
}

.learner-enrollments .row-actions span {
  color: var(--muted);
  font-size: 0.72rem;
}

.danger-zone {
  align-items: center;
  background: #fff8f7;
  border: 1px solid #dfb9b4;
  display: flex;
  gap: 30px;
  justify-content: space-between;
  margin-top: 55px;
  padding: 22px;
}

.danger-zone h2 { color: var(--danger); font-size: 1.1rem; margin-bottom: 4px; }
.danger-zone p { font-size: 0.8rem; margin: 0; }
.danger-zone form { flex: 0 0 auto; }
.danger-zone .danger-link { font-weight: 600; }

@media (max-width: 950px) {
  .learner-list > article { grid-template-columns: 1fr auto; }
  .learner-list-metrics { grid-column: 1 / -1; grid-row: 2; }
  .learner-enrollments article { grid-template-columns: 1fr 1fr; }
  .learner-enrollments .row-actions { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .admin-layout > aside nav { flex-direction: row; gap: 16px; }
  .learner-search > div { align-items: stretch; flex-direction: column; }
  .learner-search .button { width: 100%; }
  .learner-list > article { align-items: stretch; grid-template-columns: 1fr; }
  .learner-list-metrics { grid-column: auto; grid-row: auto; justify-content: space-between; }
  .learner-list-status { align-items: flex-start; }
  .learner-list-status .button { width: 100%; }
  .learner-detail-head { flex-direction: column; }
  .learner-detail-head h1 { font-size: 2.25rem; overflow-wrap: anywhere; }
  .learner-enrollments article { grid-template-columns: 1fr; }
  .learner-enrollments .row-actions { grid-column: auto; }
  .danger-zone { align-items: flex-start; flex-direction: column; }
}