.avatar-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
  padding: 22px 24px;
  background:
    radial-gradient(circle at 88% 18%, rgba(85, 228, 154, 0.18), transparent 26rem),
    linear-gradient(135deg, rgba(31, 39, 78, 0.9), rgba(20, 28, 58, 0.78));
  border: 1px solid rgba(85, 228, 154, 0.18);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.avatar-hero h1,
.avatar-hero p {
  margin: 0;
}

.avatar-hero h1 {
  font-size: 32px;
}

.avatar-hero > div > p:last-child {
  margin-top: 8px;
  color: var(--muted);
}

.avatar-hero > span {
  padding: 10px 14px;
  color: #ddffec;
  background: rgba(85, 228, 154, 0.12);
  border: 1px solid rgba(85, 228, 154, 0.24);
  border-radius: 999px;
  font-weight: 900;
}

.avatar-search {
  margin: 16px 0;
  grid-template-columns: 1fr;
}

.avatar-grid {
  align-items: start;
}

.avatar-frame-media img {
  object-fit: contain;
}

.preview-action-bar.single-action {
  grid-template-columns: 1fr;
}