UX: Clarify document/library creation flow

- Replace direct 'New Document' with modal wizard that asks for library first
- Separate 'New Document' (📄) and 'New Library' (📁) buttons in header
- Update sidebar quick links to show both options with clear icons
- Add modal for library creation with name input
- Add CSS for form-control and modal-close button styling
- Minor improvements to document.js (type=button, event.stopPropagation)
- Keyboard shortcut Ctrl+N now opens document creation modal

public/js/views/document.js

@@ -23,11 +23,11 @@ export async function renderDocument(app) {
 
     appEl.innerHTML = `
       <header class="app-header">
-        <button class="btn btn-ghost" onclick="window.app.navigate('dashboard')">← Back</button>
+        <button type="button" class="btn btn-ghost" onclick="window.app.navigate('dashboard')">← Back</button>
         <div class="header-actions">
-          <button class="btn btn-ghost" onclick="window.app.navigate('editor', {id: '${doc.id}'})">✏️ Edit</button>
-          <button class="btn btn-ghost" onclick="exportDoc()">📥 Export</button>
-          <button class="btn btn-ghost danger" onclick="deleteDoc()">🗑️ Delete</button>
+          <button type="button" class="btn btn-ghost" onclick="window.app.navigate('editor', {id: '${doc.id}'})">✏️ Edit</button>
+          <button type="button" class="btn btn-ghost" onclick="exportDoc()">📥 Export</button>
+          <button type="button" class="btn btn-ghost danger" onclick="deleteDoc()">🗑️ Delete</button>
         </div>
       </header>
       <main class="main-content">
@@ -70,7 +70,7 @@ export async function renderDocument(app) {
                 <div class="meta-section">
                   <div class="meta-header">Tags</div>
                   <div class="meta-body doc-tags">
-                    ${doc.tags.map(t => `<span class="tag-pill" onclick="filterByTag('${escapeHtml(t)}')">${escapeHtml(t)}</span>`).join('')}
+                    ${doc.tags.map(t => `<span class="tag-pill" onclick="filterByTag('${escapeHtml(t)}'); event.stopPropagation();">${escapeHtml(t)}</span>`).join('')}
                   </div>
                 </div>
               ` : ''}