.image-feedback{padding:18px;margin:4px 0 18px;background:var(--surface-soft);border:1px solid var(--brand-border);border-radius:var(--r-md);overflow-wrap:anywhere}
.image-feedback-heading{display:flex;align-items:center;gap:10px;color:var(--brand-deep)}
#task-state{font-size:var(--font-lg,18px);line-height:1.5;font-weight:700}
#task-detail{font-size:var(--font-sm);color:var(--sub);line-height:1.7;margin:10px 0 14px}
.image-feedback-icon{display:grid;place-items:center;flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--tint);font-size:18px;font-weight:700}
.image-feedback[data-stage=prepare] .image-feedback-icon,.image-feedback[data-stage=upload] .image-feedback-icon,.image-feedback[data-stage=processing] .image-feedback-icon{width:20px;height:20px;background:transparent;border:3px solid var(--brand-border);border-top-color:var(--brand);animation:image-spin 1s linear infinite}
#task-progress{display:block;appearance:none;width:100%;height:7px;border:0;border-radius:var(--r-pill);overflow:hidden;background:var(--line);accent-color:var(--brand)}
#task-progress::-webkit-progress-bar{background:var(--line);border-radius:var(--r-pill)}
#task-progress::-webkit-progress-value{background:var(--brand);border-radius:var(--r-pill);transition:width .2s}
#task-progress::-moz-progress-bar{background:var(--brand)}
#task-progress:indeterminate{background:linear-gradient(90deg,var(--line),var(--brand-border),var(--line));background-size:200% 100%;animation:image-wait 1.8s ease-in-out infinite}
#task-progress:indeterminate::-webkit-progress-bar{background:transparent}
.image-stages{display:flex;gap:8px;list-style:none;padding:0;margin:16px 0 0;font-size:var(--font-xs);color:var(--sub)}
.image-stages li{flex:1;border-top:3px solid var(--line);padding-top:8px;text-align:center}
.image-stages .is-current{color:var(--brand-deep);font-weight:700;border-color:var(--brand)}
.image-stages .is-done{border-color:var(--brand-soft);color:var(--brand-deep)}
.image-feedback[data-stage=success]{background:var(--tint)}
.image-feedback[data-stage=error]{background:var(--danger-soft);border-color:var(--danger-line)}
.image-feedback[data-stage=error] .image-feedback-heading{color:var(--danger)}
.image-feedback[data-stage=warning] .image-feedback-heading{color:var(--warning)}
#task-result-link{display:flex;margin-top:16px;justify-content:center;text-decoration:none}
@keyframes image-spin{to{transform:rotate(360deg)}}
@keyframes image-wait{to{background-position:200% 0}}
@media(prefers-reduced-motion:reduce){.image-feedback .image-feedback-icon,#task-progress{animation:none!important;transition:none!important}}
.image-feedback [hidden]{display:none!important}