<div class="dropzone" id="dropzone">
  <input type="file" id="fileInput" class="dropzone-input" multiple accept="image/*,.pdf" />
  <label for="fileInput" class="dropzone-label">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="32" height="32">
      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
    </svg>
    <span>Drag files or <u>select</u></span>
    <small>PNG, JPG, PDF — max 10MB</small>
  </label>
</div>

<style>
.dropzone { position: relative; }
.dropzone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone-label {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 2.5rem; border: 2px dashed var(--border); border-radius: 0.75rem;
  color: var(--muted); cursor: pointer; transition: all 0.15s;
}
.dropzone:focus-within .dropzone-label,
.dropzone-label:hover { border-color: var(--accent); background: var(--accent-dim); }
</style>