/* File pickers share one visual language while keeping native keyboard access. */
.upload-label { display: block; flex: 1 1 260px; min-width: 0; max-width: 100%; }
.upload-zone { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; width: 100%; min-width: 0; min-height: 132px; padding: 22px; border: 1.5px dashed var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; transition: border-color .15s ease, background .15s ease; isolation: isolate; }
.upload-zone:hover, .upload-zone:focus-within, .upload-zone.is-dragging { border-color: var(--accent); background: var(--accent-tint); }
.upload-zone:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.upload-zone.is-dragging { border-style: solid; }
.upload-symbol { display: grid; flex: none; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 13px; color: var(--accent); background: var(--accent-tint); }
.upload-symbol svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.upload-copy { display: grid; gap: 4px; min-width: 0; }
.upload-copy strong { font-size: 14px; font-weight: 600; }
.upload-instruction { color: var(--accent); font-size: 13px; }
.upload-format { color: var(--ink-soft); font-size: 11px; }
.upload-status { flex: 1 1 100%; min-width: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.upload-status:empty { display: none; }
.upload-zone[data-state="success"] { border-style: solid; border-color: var(--accent); }
.upload-zone[data-state="success"] .upload-status { color: var(--accent); }
.upload-zone[data-state="error"] { border-color: var(--bad); background: var(--bad-tint); }
.upload-zone[data-state="error"] .upload-status { color: var(--bad); }
.upload-zone .upload-native { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.upload-zone:has(input:disabled) { opacity: .65; }
.upload-zone .upload-native:disabled { cursor: wait; }
.upload-activity { display: none; position: absolute; left: 20px; right: 20px; bottom: 8px; height: 3px; border-radius: 3px; overflow: hidden; background: var(--line); }
.upload-zone[data-state="busy"] .upload-activity { display: block; }
.upload-activity::after { content: ''; display: block; width: 35%; height: 100%; background: var(--accent); animation: upload-working 1.3s ease-in-out infinite alternate; }
@keyframes upload-working { to { transform: translateX(185%); } }
.ava-row .upload-zone { min-height: 104px; padding: 16px; }
.demo-qr-editor .upload-label { flex-basis: 100%; }
.xh-file-form .upload-zone { min-height: 110px; padding: 16px; }
@media (hover: none) { .upload-drag-hint { display: none; } }
@media (max-width: 599px) { .upload-zone { justify-content: start; min-height: 120px; padding: 18px; } .upload-copy { flex: 1 1 160px; } .upload-status { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .upload-zone { transition: none; } .upload-activity::after { animation: none; width: 100%; } }