.music-tool-runner {
  gap: 14px;
}

.music-prompt-field,
.music-duration-field {
  display: grid;
  gap: 7px;
  color: #d7d0c2;
  font-size: 12px;
}

.music-prompt-field {
  position: relative;
}

.music-prompt-field textarea {
  min-height: 150px;
  padding: 13px 14px 28px;
  border-radius: 8px;
}

.music-prompt-field small {
  position: absolute;
  right: 12px;
  bottom: 9px;
  color: #77736b;
  font-size: 10px;
}

.music-duration-field select {
  border-radius: 8px;
}

.music-usage-guide {
  padding: 12px 14px;
  border: 1px solid #2d3032;
  border-radius: 8px;
  background: #111315;
}

.music-usage-guide p {
  margin: 0;
  color: #8f8b83;
  font-size: 11px;
  line-height: 1.75;
}

.music-usage-guide p + p {
  margin-top: 3px;
}

.music-voice-picker {
  display: grid;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #2d3032;
  border-radius: 8px;
  background: #0e1012;
}

.music-voice-picker > header,
.music-reference-upload > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.music-voice-picker header strong,
.music-reference-upload strong {
  color: #d8d1c5;
  font-size: 12px;
}

.music-voice-picker header span,
.music-reference-upload > div:first-child span {
  color: #8f7d57;
  font-size: 10px;
}

.music-voice-picker > div > span {
  display: block;
  margin-bottom: 7px;
  color: #77746d;
  font-size: 10px;
}

.music-voice-picker > div > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.music-voice-picker button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #2e3133;
  border-radius: 7px;
  background: #181a1c;
  color: #d6d0c5;
  font-size: 11px;
  transition: .18s ease;
}

.music-voice-picker button:hover {
  border-color: #6e5b38;
  color: #edd18c;
}

.music-voice-picker button.selected {
  border-color: #b58d42;
  background: #2b2418;
  color: #f1d38d;
  box-shadow: inset 0 0 0 1px rgba(213, 174, 84, .18);
}

.music-reference-upload {
  display: grid;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #2d3032;
  border-radius: 8px;
  background: #101214;
}

.music-reference-upload > label {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed #5a503a;
  border-radius: 7px;
  color: #d0b470;
  cursor: pointer;
  font-size: 11px;
}

.music-reference-list {
  display: grid;
  gap: 6px;
}

.music-reference-list > span {
  display: grid;
  min-height: 34px;
  padding: 0 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid #292c2e;
  border-radius: 6px;
  background: #17191b;
  color: #bca66f;
}

.music-reference-list em {
  overflow: hidden;
  color: #b8b3aa;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-reference-list button {
  display: grid;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: transparent;
  color: #777;
  place-items: center;
}

.music-price {
  display: flex;
  min-height: 62px;
  padding: 12px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(213, 174, 84, .34);
  border-radius: 8px;
  background: rgba(213, 174, 84, .055);
  color: #8e887e;
  font-size: 11px;
}

.music-price strong {
  color: #f0d28f;
  font: 500 24px/1 Georgia, serif;
}

.music-result {
  grid-template-columns: auto minmax(0, 1fr);
}

.music-result audio {
  width: 100%;
  min-width: 0;
  grid-column: 1 / -1;
  margin-top: 6px;
}

.music-result > a {
  width: fit-content;
  grid-column: 1 / -1;
}

@media (max-width: 620px) {
  .music-price {
    align-items: flex-start;
    flex-direction: column;
  }
}