@layer components {
  .upload-progress-item {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
  }
  .upload-progress-thumb {
    width: 36px; height: 36px;
    border-radius: var(--r-sm);
    background: var(--ink-100);
    flex-shrink: 0;
    overflow: hidden;
  }
  .upload-progress-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .upload-progress-info { flex: 1; min-width: 0; }
  .upload-progress-name { font-size: 13px; font-weight: 500; color: var(--ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .upload-progress-detail { font-size: 11px; color: var(--ink-400); margin-top: 1px; }
  .upload-progress-bar { height: 3px; border-radius: 99px; background: var(--ink-100); margin-top: 5px; }
  .upload-progress-fill { height: 100%; border-radius: 99px; background: var(--forest-500); transition: width .3s ease; }
  .upload-progress-fill.complete { background: var(--success-500); }
  .upload-progress-fill.error { background: var(--danger-500); }
}