.db-upload-previews { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.db-upload-previews:empty { display: none; }
.db-upload-card { position: relative; width: 180px; max-width: 100%; border: 1px solid #dbe2ea; border-radius: 10px; background: #fff; overflow: hidden; animation: db-upload-appear .2s ease-out; }
.db-upload-media { display: flex; align-items: center; justify-content: center; min-height: 120px; background: #f8fafc; }
.db-upload-media img, .db-upload-media video { display: block; width: 100%; height: 120px; object-fit: contain; }
.db-upload-name { padding: 8px 10px; overflow-wrap: anywhere; font-size: 13px; color: #334155; }
.db-upload-status { padding: 0 10px 10px; font-size: 12px; color: #475569; }
.db-upload-status[data-error] { color: #b91c1c; }
.db-upload-remove { position: absolute; right: 6px; top: 6px; border: 0; border-radius: 6px; padding: 5px 9px; background: #b91c1c; color: white; cursor: pointer; z-index: 1; }
.db-upload-remove:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.db-upload-spinner { width: 24px; height: 24px; border: 3px solid #dbe2ea; border-top-color: #2563eb; border-radius: 50%; animation: db-upload-spin .8s linear infinite; }
.db-upload-progress { width: calc(100% - 20px); margin: 0 10px 10px; }
@keyframes db-upload-spin { to { transform: rotate(360deg); } }
@keyframes db-upload-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .db-upload-spinner, .db-upload-card { animation: none; } }