.upload-progress-wrap {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: grid;
  width: min(390px, calc(100vw - 32px));
  gap: 10px;
  pointer-events: none;
}
.upload-progress-card {
  padding: 16px;
  border: 1px solid #c9d8ef;
  border-radius: 14px;
  color: #24324a;
  background: rgb(255 255 255 / 97%);
  box-shadow: 0 20px 58px rgb(25 48 94 / 24%);
  backdrop-filter: blur(18px);
}
.upload-progress-card__head,
.upload-progress-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.upload-progress-card__head strong {
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.upload-progress-card__head b { color: #1766d8; font-size: 13px; font-variant-numeric: tabular-nums; }
.upload-progress-card__track { height: 7px; margin: 11px 0 9px; overflow: hidden; border-radius: 999px; background: #e7edf7; }
.upload-progress-card__track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0aa6ed, #1766e8 58%, #7358ee); transition: width .18s ease; }
.upload-progress-card__meta { color: #687892; font-size: 11px; font-variant-numeric: tabular-nums; }
.upload-progress-card p { margin: 9px 0 0; color: #566780; font-size: 11px; line-height: 1.45; }
.upload-progress-card.is-complete { border-color: #a8dbc0; }
.upload-progress-card.is-complete .upload-progress-card__head b,
.upload-progress-card.is-complete p { color: #087457; }
.upload-progress-card.is-complete .upload-progress-card__track i { background: #15a56e; }
.upload-progress-card.is-error { border-color: #efb7bd; }
.upload-progress-card.is-error .upload-progress-card__head b,
.upload-progress-card.is-error p { color: #ad3441; }
.upload-progress-card.is-error .upload-progress-card__track i { background: #cf4b59; }

@media (max-width: 640px) {
  .upload-progress-wrap { right: 16px; bottom: 16px; left: 16px; width: auto; }
}