/*! ZhaoUI 0.1.0 · css upload · generated by packages/ui/scripts/build.mjs, do not edit by hand */
/* ---- 34-upload ---- */
.zh-upload { position: relative; }

.zh-upload [hidden] { display: none !important; }

.zh-upload-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 20px; text-align: center;
  border: 1.5px dashed var(--zh-border-strong); border-radius: var(--zh-radius-lg); background: var(--zh-bg-subtle); color: var(--zh-text-secondary); cursor: pointer;
  transition: border-color var(--zh-dur-fast) var(--zh-ease-standard), background var(--zh-dur-fast) var(--zh-ease-standard);
}

.zh-upload-drop .ico { color: var(--zh-text-tertiary); transition: transform var(--zh-dur-base) var(--zh-ease-spring), color var(--zh-dur-fast); }

.zh-upload-drop:hover,
.zh-upload-drop:focus-visible { border-color: var(--zh-color-primary); background: var(--zh-color-primary-subtle); }

.zh-upload-drop:focus-visible { outline: none; box-shadow: var(--zh-focus-ring); }

.zh-upload-drop.is-over { border-style: solid; border-color: var(--zh-color-primary); background: var(--zh-color-primary-subtle); }

.zh-upload-drop.is-over .ico { transform: translateY(-4px) scale(1.1); color: var(--zh-color-primary); }

.zh-upload-title { color: var(--zh-text); font-weight: 500; }

.zh-upload-link { color: var(--zh-color-primary-text); font-weight: 600; }

.zh-upload-hint { font-size: .85em; color: var(--zh-text-tertiary); max-width: 60ch; }

.zh-upload.is-disabled .zh-upload-drop { opacity: var(--zh-opacity-disabled); cursor: not-allowed; }

.zh-upload.is-disabled .zh-upload-drop:hover { border-color: var(--zh-border-strong); background: var(--zh-bg-subtle); }

.zh-upload-errors:empty { display: none; }

.zh-upload-errors { margin-top: 10px; display: grid; gap: 4px; }

.zh-upload-err { display: flex; gap: 8px; align-items: flex-start; font-size: .88em; color: var(--zh-text-danger); line-height: 1.45; }

.zh-upload-err .ico { flex: none; margin-top: 2px; }

.zh-upload-err .zh-upload-errx { margin-inline-start: auto; flex: none; }

.zh-upload-foot { margin-top: 10px; }

.zh-upload-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }

.zh-upload-list:empty { display: none; }

.zh-upload-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--zh-border); border-radius: var(--zh-radius-md); background: var(--zh-bg-elevated); animation: zh-upload-in var(--zh-dur-base) var(--zh-ease-enter);
}

@keyframes zh-upload-in { from { opacity: 0; transform: translateY(6px); } }

.zh-upload-ico { width: 36px; height: 36px; border-radius: var(--zh-radius-md); background: var(--zh-bg-subtle); color: var(--zh-text-secondary); display: grid; place-items: center; transition: background var(--zh-dur-base), color var(--zh-dur-base); }

.zh-upload-item.is-done .zh-upload-ico { background: var(--zh-success-bg); color: var(--zh-text-success); }

.zh-upload-item.is-error .zh-upload-ico { background: var(--zh-danger-bg); color: var(--zh-text-danger); }

.zh-upload-item.is-error { border-color: var(--zh-danger-border); }

.zh-upload-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.zh-upload-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .82em; color: var(--zh-text-tertiary); font-variant-numeric: tabular-nums; }

.zh-upload-item.is-done .zh-upload-status { color: var(--zh-text-success); }

.zh-upload-item.is-error .zh-upload-status { color: var(--zh-text-danger); }

.zh-upload-bar { height: 4px; border-radius: 2px; background: var(--zh-meter-track); margin-top: 6px; overflow: hidden; }

.zh-upload-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--zh-color-primary); transition: width var(--zh-dur-fast) linear, background var(--zh-dur-base); }

.zh-upload-item.is-error .zh-upload-bar i { background: var(--zh-danger); }

.zh-upload-item.is-done .zh-upload-bar,
.zh-upload-item.is-queued .zh-upload-bar { display: none; }

.zh-upload-actions { display: flex; gap: 2px; }

@media (max-width: 767px) {
.zh-upload-drop { padding: 22px 12px; }
.zh-upload-item { gap: 10px; padding: 10px; }
}