File Upload Base

<div class="ws-file-upload mx-auto max-w-lg">
  <!-- Dropzone -->
  <div class="rounded-xl border-2 border-dashed border-[var(--ws-file-upload-border)] bg-[var(--ws-file-upload-bg)] p-8 text-center transition hover:border-[var(--ws-file-upload-accent)]">
    <div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-file-upload-accent)]/10 text-[var(--ws-file-upload-accent)]">
      <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.338-2.32 3.75 3.75 0 013.572 5.345A3.75 3.75 0 0118 19.5H6.75z"/></svg>
    </div>
    <p class="text-sm font-medium text-[var(--ws-file-upload-text)]">Drag &amp; drop files here</p>
    <p class="mt-1 text-sm text-[var(--ws-file-upload-text-soft)]">or <a href="#" class="font-medium text-[var(--ws-file-upload-accent)] underline underline-offset-2">browse</a></p>
    <p class="mt-3 text-xs text-[var(--ws-file-upload-text-soft)]">PNG, JPG, PDF up to 10 MB</p>
  </div>

  <!-- Uploaded files -->
  <ul class="mt-4 space-y-3" role="list">
    <li class="flex items-center gap-3 rounded-lg border border-[var(--ws-file-upload-border)] bg-[var(--ws-file-upload-bg)] px-4 py-3">
      <svg class="h-5 w-5 flex-shrink-0 text-[var(--ws-file-upload-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
      <div class="min-w-0 flex-1">
        <p class="truncate text-sm font-medium text-[var(--ws-file-upload-text)]">project-brief.pdf</p>
        <p class="text-xs text-[var(--ws-file-upload-text-soft)]">2.4 MB</p>
        <div class="mt-1.5 h-1.5 w-full rounded-full bg-[var(--ws-file-upload-border)]">
          <div class="h-1.5 w-full rounded-full bg-[var(--ws-file-upload-accent)]"></div>
        </div>
      </div>
      <button type="button" class="flex-shrink-0 rounded-lg p-1 text-[var(--ws-file-upload-text-soft)] transition hover:text-red-500" aria-label="Remove project-brief.pdf">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
      </button>
    </li>
    <li class="flex items-center gap-3 rounded-lg border border-[var(--ws-file-upload-border)] bg-[var(--ws-file-upload-bg)] px-4 py-3">
      <svg class="h-5 w-5 flex-shrink-0 text-[var(--ws-file-upload-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
      <div class="min-w-0 flex-1">
        <p class="truncate text-sm font-medium text-[var(--ws-file-upload-text)]">screenshot.png</p>
        <p class="text-xs text-[var(--ws-file-upload-text-soft)]">840 KB</p>
        <div class="mt-1.5 h-1.5 w-full rounded-full bg-[var(--ws-file-upload-border)]">
          <div class="h-1.5 w-3/4 rounded-full bg-[var(--ws-file-upload-accent)]"></div>
        </div>
      </div>
      <button type="button" class="flex-shrink-0 rounded-lg p-1 text-[var(--ws-file-upload-text-soft)] transition hover:text-red-500" aria-label="Remove screenshot.png">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
      </button>
    </li>
  </ul>
</div>