.academy-cover-field {
  gap: 10px;
}

.academy-cover-preview {
  position: relative;
  width: 100%;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid var(--aidc-border-subtle);
  border-radius: var(--aidc-radius-control);
  background: var(--aidc-bg-page);
}

.academy-cover-preview img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.academy-cover-preview.is-error {
  border-color: #e45c6b;
}

.academy-cover-placeholder {
  min-height: 220px;
  display: grid;
  place-content: center;
  gap: 7px;
  padding: 24px;
  color: var(--aidc-text-secondary);
  text-align: center;
}

.academy-cover-placeholder strong {
  color: var(--aidc-text-primary);
  font-size: 15px;
}

.academy-cover-placeholder span {
  max-width: 440px;
  font-size: 12px;
  font-weight: 400;
}

.academy-cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.academy-cover-button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--aidc-border-subtle);
  border-radius: var(--aidc-radius-control);
  background: color-mix(in srgb, var(--aidc-bg-page) 86%, transparent);
  color: var(--aidc-text-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.academy-cover-button:hover:not(:disabled) {
  border-color: var(--aidc-pink-500);
  background: color-mix(in srgb, var(--aidc-pink-500) 10%, var(--aidc-bg-page));
}

.academy-cover-button--primary {
  border-color: var(--aidc-pink-500);
  background: var(--aidc-pink-500);
  color: #fff;
}

.academy-cover-button--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--aidc-pink-500) 84%, #fff);
}

.academy-cover-button:disabled {
  opacity: .55;
  cursor: wait;
}

.academy-cover-url-wrap {
  display: none;
}

.academy-cover-url-wrap.is-open {
  display: block;
}

.academy-cover-url-input {
  width: 100%;
}

.academy-cover-status,
.academy-cover-hint {
  display: block;
  color: var(--aidc-text-secondary);
  font-size: 12px;
  font-weight: 400;
}

.academy-cover-status.is-error {
  color: #e45c6b;
}

@media (max-width: 640px) {
  .academy-cover-preview,
  .academy-cover-preview img,
  .academy-cover-placeholder {
    min-height: 180px;
    height: 180px;
  }

  .academy-cover-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .academy-cover-button {
    width: 100%;
  }
}