.upload { min-width: 0; }
.upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.upload .upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 168px; margin: 0; padding: 26px 20px;
  border: 1px dashed var(--rule-hard, #c9beac); background: var(--paper-hi, #fbf7ee);
  color: var(--ink, #141210); text-align: center; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
  text-transform: none; letter-spacing: normal;
}
.upload .upload-zone:hover, .upload.is-dragging .upload-zone, .upload-input:focus-visible + .upload-zone {
  border-color: var(--accent, #d6141c); background: #fffaf2;
}
.upload-input:focus-visible + .upload-zone { outline: 2px solid var(--accent, #d6141c); outline-offset: 3px; }
.upload-glyph { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 2px; border: 1px solid var(--rule-hard, #c9beac); border-radius: 50%; color: var(--accent-ink, #a11118); font: 24px/1 Georgia, serif; }
.upload-title { color: var(--ink, #141210); font: 18px/1.3 var(--serif, Georgia, serif); }
.upload-title em { color: var(--accent-ink, #a11118); font-style: normal; text-decoration: underline; text-underline-offset: 4px; }
.upload-hint { color: var(--ink-soft, var(--soft, #6b6157)); font: 11px/1.5 var(--mono, ui-monospace, monospace); }
.upload-count { color: var(--ink-soft, var(--soft, #6b6157)); font: 11px/1.5 var(--mono, ui-monospace, monospace); }
.upload.has-files .upload-zone { min-height: 132px; }
.upload.has-error .upload-zone { border-color: var(--accent, #d6141c); }
.upload-list { list-style: none; margin: 10px 0 0; padding: 0; }
.upload-list:empty { display: none; }
.upload-file { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--rule, #e3dcd0); }
.upload-thumb { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; background: var(--paper-hi, #fbf7ee); color: var(--ink-soft, var(--soft, #6b6157)); font: 20px/1 var(--mono, ui-monospace, monospace); }
.upload-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.upload-thumb img[hidden] { display: none; }
.upload-file-info { display: grid; min-width: 0; gap: 2px; }
.upload-file-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink, #141210); font: 12px/1.4 var(--mono, ui-monospace, monospace); }
.upload-file-size { color: var(--ink-soft, var(--soft, #6b6157)); font: 11px/1.4 var(--mono, ui-monospace, monospace); }
.upload .upload-remove { margin: 0; padding: 7px 4px; border: 0; background: transparent; color: var(--accent-ink, #a11118); cursor: pointer; font: 11px/1.4 var(--mono, ui-monospace, monospace); }
.upload .upload-remove:hover { text-decoration: underline; text-underline-offset: 3px; }
.upload .upload-remove:focus-visible { outline: 2px solid var(--accent, #d6141c); outline-offset: 2px; }
.upload-error { min-height: 0; margin: 8px 0 0; color: var(--accent-ink, #a11118); font: 12px/1.5 var(--mono, ui-monospace, monospace); }
.upload-error:empty { display: none; }
@media (max-width: 480px) { .upload .upload-zone { min-height: 150px; padding: 20px 12px; } .upload-file { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; padding: 8px 4px; } .upload-thumb { width: 40px; height: 40px; } }