.upload-chip {
  --upload-progress: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  min-height: 64px; padding: 12px; border: 1px solid var(--hair);
  border-radius: 16px; background: var(--s1); color: var(--tx);
  transition: border-color .3s, background .3s;
}
.upload-chip-fill { position: absolute; z-index: -1; inset: 0 auto 0 0; width: var(--upload-progress); background: currentColor; opacity: .055; transition: width .25s linear, background .35s, opacity .35s; }
.upload-chip-icon { display: grid; place-items: center; flex: 0 0 24px; height: 24px; }
.upload-chip-icon > * { width: 20px; height: 20px; animation: upload-icon-in .35s cubic-bezier(.2,.8,.2,1) both; }
.upload-chip-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.upload-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; line-height: 18px; }
.upload-chip-status { font-size: 12px; line-height: 16px; color: var(--tx-2); }
.upload-chip-numbers { display: flex; flex: 0 0 39px; flex-direction: column; align-items: end; gap: 3px; font-variant-numeric: tabular-nums; }
.upload-chip-percent { font-size: 12px; font-weight: 500; line-height: 18px; min-height: 18px; }
.upload-chip-time { font-size: 11px; line-height: 16px; color: var(--tx-2); }
.upload-chip[data-state="processing"] .upload-chip-fill { animation: upload-breathe 1.5s ease-in-out infinite; }
.upload-chip[data-state="processing"] .upload-chip-icon .spin { animation: spin .8s linear infinite; }
.upload-chip[data-state="done"] { border-color: rgba(26,158,85,.2); }
.upload-chip[data-state="done"] .upload-chip-fill { background: #1a9e55; opacity: .09; }
.upload-chip[data-state="done"] .upload-chip-icon { color: #19834b; }
.upload-chip[data-state="error"] { border-color: rgba(210,60,60,.25); animation: upload-shake .38s ease-out; }
.upload-chip[data-state="error"] .upload-chip-fill { width: 100%; background: #d23c3c; opacity: .07; }
.upload-chip[data-state="error"] .upload-chip-icon { color: #d23c3c; }
[data-theme="dark"] .upload-chip[data-state="done"] .upload-chip-icon { color: #6bd69a; }
[data-theme="dark"] .upload-chip[data-state="error"] .upload-chip-icon { color: #ff8b8b; }
.upload-demo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; }
.upload-demo > [data-upload-demo] { width: 100%; max-width: 300px; }
.upload-demo-replay { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 12px; font: inherit; font-size: 11px; color: var(--tx-2); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.upload-demo-replay:hover { color: var(--tx); background: var(--s1); }
.upload-demo-replay:disabled { opacity: .45; cursor: default; }
.upload-demo-replay:focus-visible { outline: 2px solid var(--tx); outline-offset: 2px; }
.upload-demo-replay .ico { width: 13px; height: 13px; }
.upload-feedback[hidden] { display: none; }
.upload-note { font-size: 12px; line-height: 1.5; color: var(--tx-2); margin: 8px 2px 0; }
.drop[aria-disabled="true"] { opacity: .65; pointer-events: none; }
.drop [data-fname] { max-width: 100%; overflow-wrap: anywhere; }
@keyframes upload-icon-in { from { opacity: 0; transform: translateY(7px) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes upload-breathe { 50% { opacity: .025; } }
@keyframes upload-shake { 20%,60% { transform: translateX(-3px); } 40%,80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .upload-chip, .upload-chip-fill, .upload-chip-icon > * { animation: none !important; transition: none !important; }
}