<div class="upload-zone" id="dropZone">
  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
    <polyline points="17 8 12 3 7 8"/>
    <line x1="12" y1="3" x2="12" y2="15"/>
  </svg>
  <p class="upload-label">Drop files here or <label for="fileInput" class="upload-link">browse</label></p>
  <p class="input-hint">PNG, JPG, PDF — max 10MB</p>
  <input id="fileInput" type="file" hidden accept="image/*,.pdf" />
</div>

<style>
.upload-zone {
  border: 2px dashed var(--border); border-radius: 0.875rem;
  padding: 2.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
  color: var(--muted);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--accent); background: var(--accent-dim);
  color: var(--accent);
}
.upload-label { font-size: 0.9375rem; font-weight: 500; color: var(--text); }
.upload-link { color: var(--accent); cursor: pointer; text-decoration: underline; }
</style>

<script>
const zone = document.getElementById('dropZone');
zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('drag-over'); });
zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
zone.addEventListener('drop', e => { e.preventDefault(); zone.classList.remove('drag-over'); });
zone.addEventListener('click', () => document.getElementById('fileInput').click());
</script>