.upload-box {
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}

.upload-box b {
  margin-bottom: 7px;
}

.upload-box .upload-instruction {
  display: block;
  color: #555b66;
  font-weight: 700;
  margin-bottom: 5px;
}

.upload-box small {
  display: block;
  color: #9297a1;
  font-size: 10px;
}

.upload-box.dragging {
  border-color: var(--violet);
  background: var(--violet-soft);
  box-shadow: 0 0 0 4px rgba(109, 93, 252, .1);
  transform: translateY(-1px);
}

.upload-box.dragging .upload-instruction,
.upload-box.uploading .upload-instruction {
  color: var(--violet);
}

.upload-box.uploading {
  pointer-events: none;
  opacity: .72;
}

.upload-progress {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #dedfe5;
  border-radius: 10px;
  background: #fff;
}

.upload-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

.upload-progress-head strong {
  color: #3f444d;
}

.upload-progress-head span {
  color: var(--violet);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.upload-progress-track {
  height: 7px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 99px;
  background: #ececf1;
}

.upload-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), #9589ff);
  transition: width .22s ease;
}

.upload-progress p {
  margin: 8px 0 0;
  color: #777d88;
  font-size: 10px;
  line-height: 1.55;
}

.upload-progress.success {
  border-color: #bfe3d1;
  background: #f4fbf7;
}

.upload-progress.success .upload-progress-track i {
  background: #2b9367;
}

.upload-progress.success .upload-progress-head span {
  color: #257a55;
}

.upload-progress.failed {
  border-color: #efc7cd;
  background: #fff7f8;
}

.upload-progress.failed .upload-progress-track i {
  background: var(--red);
}

.upload-progress.failed .upload-progress-head strong,
.upload-progress.failed .upload-progress-head span {
  color: var(--red);
}

.upload-error {
  margin-top: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #fbe5e8;
  color: #9f2f3d;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
  word-break: break-word;
}