diff --git a/app/db.py b/app/db.py
index ded9473..b5eeed3 100644
--- a/app/db.py
+++ b/app/db.py
@@ -152,6 +152,12 @@ def init_db():
             conn.execute("ALTER TABLE pages ADD COLUMN sort_order INTEGER NOT NULL DEFAULT 0")
         except sqlite3.OperationalError:
             pass
+        # Migration: add content_format for Notion-style block editor (v1.2.0+)
+        # 'markdown' = legacy textarea, 'blocks' = JSON array of block objects
+        try:
+            conn.execute("ALTER TABLE pages ADD COLUMN content_format TEXT NOT NULL DEFAULT 'markdown'")
+        except sqlite3.OperationalError:
+            pass
         conn.commit()
 
 
diff --git a/app/routers/board.py b/app/routers/board.py
index 8175286..b1a560d 100644
--- a/app/routers/board.py
+++ b/app/routers/board.py
@@ -129,7 +129,7 @@ def _build_page_tree(conn, parent_id: int | None, ws_key: str, depth: int = 0, m
         items.append({
             "id": f"page/{row['id']}",
             "db_id": row["id"],
-            "name": row["title"],
+            "name": row["title"] or "New page",
             "icon": "📄",
             "url": f"/pages/{row['id']}",
             "active": False,
@@ -459,7 +459,7 @@ async def extract_ai_keywords(owner: str, repo: str):
 # ═══════════ Pages Markdown ═══════════
 
 @router.post("/api/pages")
-async def create_page(request: Request, title: str = Query(default="New page"),
+async def create_page(request: Request, title: str = Query(default=""),
                        section: str = Query(default="Private"),
                        project: str = Query(default=""),
                        parent_id: int = Query(default=0)):
@@ -496,18 +496,41 @@ async def get_page(page_id: int):
 
 
 @router.put("/api/pages/{page_id}")
-async def update_page(page_id: int, title: str = Query(default=""),
-                       content: str = Query(default="")):
-    """Update a page's title and/or content."""
+async def update_page(request: Request, page_id: int, title: str = Query(default=""),
+                       content: str = Query(default=""),
+                       content_format: str = Query(default="")):
+    """Update a page's title and/or content. Accepts JSON body for blocks."""
     with get_conn() as conn:
         if title:
             conn.execute("UPDATE pages SET title=?, updated_at=CURRENT_TIMESTAMP WHERE id=?", (title, page_id))
         if content:
             conn.execute("UPDATE pages SET content=?, updated_at=CURRENT_TIMESTAMP WHERE id=?", (content, page_id))
+        if content_format:
+            conn.execute("UPDATE pages SET content_format=?, updated_at=CURRENT_TIMESTAMP WHERE id=?", (content_format, page_id))
         conn.commit()
     return {"status": "ok"}
 
 
+@router.post("/api/pages/{page_id}/blocks")
+async def save_page_blocks(request: Request, page_id: int):
+    """Save blocks JSON content (Notion-style block editor)."""
+    try:
+        body = await request.json()
+    except Exception:
+        raise HTTPException(400, "Invalid JSON body")
+    blocks_json = json.dumps(body.get("blocks", []))
+    title = body.get("title", "")
+    with get_conn() as conn:
+        if title:
+            conn.execute("UPDATE pages SET title=?, updated_at=CURRENT_TIMESTAMP WHERE id=?", (title, page_id))
+        conn.execute(
+            "UPDATE pages SET content=?, content_format='blocks', updated_at=CURRENT_TIMESTAMP WHERE id=?",
+            (blocks_json, page_id),
+        )
+        conn.commit()
+    return {"status": "ok", "id": page_id}
+
+
 @router.put("/api/pages/{page_id}/move")
 async def move_page(request: Request, page_id: int,
                      new_parent_id: int = Query(default=0),
@@ -547,6 +570,25 @@ async def move_page(request: Request, page_id: int,
     return {"status": "ok", "id": page_id, "parent_id": new_parent_id, "order": new_order}
 
 
+@router.delete("/api/pages/{page_id}")
+async def delete_page(request: Request, page_id: int):
+    """Move a page to trash (soft delete) or permanently delete."""
+    with get_conn() as conn:
+        row = conn.execute("SELECT id, title FROM pages WHERE id=?", (page_id,)).fetchone()
+        if not row:
+            raise HTTPException(404, "Page not found")
+        # Soft delete: set deleted_at timestamp
+        # For now, hard delete since we have no trash view yet
+        # If sub-pages exist, move them to root level
+        conn.execute(
+            "UPDATE pages SET parent_id=NULL, sort_order=0 WHERE parent_id=?",
+            (page_id,),
+        )
+        conn.execute("DELETE FROM pages WHERE id=?", (page_id,))
+        conn.commit()
+    return {"status": "ok", "deleted": page_id, "title": row["title"]}
+
+
 @router.get("/pages/{page_id}", response_class=HTMLResponse)
 async def view_page(request: Request, page_id: int):
     """Render a page as HTML."""
diff --git a/app/templates/base.html b/app/templates/base.html
index d1366e5..e12faba 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -389,6 +389,7 @@
       // ── Drag & drop tree ──
       treeSortables: [],
       initTreeSortable() {
+        if (typeof Sortable === 'undefined') return;
         // Initialize SortableJS on every .sidebar-items list
         const self = this;
         document.querySelectorAll('.sidebar-items').forEach(function(el) {
@@ -475,8 +476,29 @@
             alert(`Moved to ${section}`);
             break;
           case 'delete':
-            if (!confirm(`Delete "${pageName}"?`)) break;
-            alert('Delete not yet implemented (pages go to Trash in DB)');
+            if (!confirm(`Move "${pageName}" to trash?`)) break;
+            const delNum = pageId.replace('page/', '');
+            fetch(`/board/api/pages/${delNum}`, {
+              method: 'DELETE', headers: { 'X-CSRF-Token': csrf }
+            })
+            .then(r => { if (!r.ok) throw new Error('Delete failed'); return r.json(); })
+            .then(data => {
+              // Remove from ALL sidebar sections (Recents, Private, etc.)
+              const items = document.querySelectorAll(`.sidebar-item[data-page-id="${pageId}"]`);
+              items.forEach(item => {
+                const next = item.nextElementSibling;
+                if (next && next.classList.contains('tree-children-wrapper')) {
+                  next.remove();
+                }
+                item.remove();
+              });
+              // Redirect if viewing deleted page — stay in project context
+              if (window.location.pathname.includes(`/pages/${delNum}`)) {
+                const wk = this.workspaceKey;
+                window.location.href = wk && wk.includes('/') ? `/board/${wk}` : '/';
+              }
+            })
+            .catch(e => alert('Delete failed: ' + e.message));
             break;
           case 'openTab':
             window.open('/' + pageId, '_blank');
@@ -501,7 +523,7 @@
       },
       newPage(section) {
         const project = this.workspaceKey || '';
-        fetch(`/board/api/pages?title=New%20page&section=${encodeURIComponent(section)}&project=${encodeURIComponent(project)}`, {
+        fetch(`/board/api/pages?section=${encodeURIComponent(section)}&project=${encodeURIComponent(project)}`, {
           method: 'POST',
           headers: { 'X-CSRF-Token': this.getCsrfToken() }
         })
@@ -512,7 +534,7 @@
       newSubPage(parentId) {
         const project = this.workspaceKey || '';
         const pid = parentId.replace('page/', '');
-        fetch(`/board/api/pages?title=New%20sub-page&section=Private&project=${encodeURIComponent(project)}&parent_id=${pid}`, {
+        fetch(`/board/api/pages?section=Private&project=${encodeURIComponent(project)}&parent_id=${pid}`, {
           method: 'POST',
           headers: { 'X-CSRF-Token': this.getCsrfToken() }
         })
diff --git a/app/templates/page_editor.html b/app/templates/page_editor.html
index 9548642..95b4f5c 100644
--- a/app/templates/page_editor.html
+++ b/app/templates/page_editor.html
@@ -3,229 +3,380 @@
 {% block page_title %}{{ page.title }}{% endblock %}
 
 {% block content %}
-<div class="page-title-area">
-  <div class="page-title">
-    <span class="page-icon-lg">📄</span>
-    <h1 contenteditable="true"
-        @blur="saveTitle($event.target.textContent)"
-        x-data>{{ page.title }}</h1>
-  </div>
-</div>
+<div class="page-editor-wrapper" x-data="editor('{{ page.id }}', '{{ page.title|e }}', '{{ page.content_format }}', '{{ page.content|e }}')" x-init="init()">
 
-<div x-data="pageEditor('{{ page.content|e }}')" style="padding: 0 24px 48px; max-width: 900px;">
-  <!-- Toolbar -->
-  <div style="display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap;">
-    <button class="toolbar-btn" @click="insertMd('**', '**')" title="Bold">B</button>
-    <button class="toolbar-btn" @click="insertMd('*', '*')" title="Italic"><i>I</i></button>
-    <button class="toolbar-btn" @click="insertMd('# ', '')" title="Heading 1">H1</button>
-    <button class="toolbar-btn" @click="insertMd('## ', '')" title="Heading 2">H2</button>
-    <button class="toolbar-btn" @click="insertMd('- ', '')" title="Bullet list">•</button>
-    <button class="toolbar-btn" @click="insertMd('1. ', '')" title="Numbered list">1.</button>
-    <button class="toolbar-btn" @click="insertMd('> ', '')" title="Quote">"</button>
-    <button class="toolbar-btn" @click="insertMd('`', '`')" title="Code">&lt;/&gt;</button>
-    <button class="toolbar-btn" @click="insertMd('```\n', '\n```')" title="Code block">```</button>
-    <button class="toolbar-btn" @click="insertMd('---\n', '')" title="Divider">—</button>
-    <button class="toolbar-btn" @click="insertMd('[', '](url)')" title="Link">🔗</button>
-    <button class="toolbar-btn" @click="insertMd('- [ ] ', '')" title="Todo">☐</button>
-  </div>
-
-  <!-- Editor -->
-  <div style="display:flex; gap:0; min-height:400px; border:1px solid var(--border); border-radius:8px; overflow:hidden;">
-    <!-- Markdown source -->
-    <div style="flex:1; display:flex; flex-direction:column;">
-      <div style="padding:4px 12px; background:var(--bg-tertiary); font-size:12px; color:var(--text-dim);">Markdown</div>
-      <textarea x-ref="editor" x-model="content"
-                @input="autoSave()"
-                @keydown="handleSlash($event)"
-                style="flex:1; width:100%; min-height:400px; background:var(--bg-secondary);
-                       border:none; padding:12px; color:var(--text-primary); font-family:var(--font-mono);
-                       font-size:13px; line-height:1.6; resize:none; outline:none; tab-size:2;"
-                placeholder="Type '/' for commands, or start writing in Markdown..."></textarea>
-    </div>
-    <!-- Preview -->
-    <div style="flex:1; border-left:1px solid var(--border); display:flex; flex-direction:column;">
-      <div style="padding:4px 12px; background:var(--bg-tertiary); font-size:12px; color:var(--text-dim);">Preview</div>
-      <div style="flex:1; padding:12px; overflow-y:auto; font-size:14px; line-height:1.7; color:var(--text-primary);"
-           x-html="renderedContent()"></div>
+  <div class="page-cover-area">
+    <div class="page-title-block">
+      <span class="page-icon-emoji">📄</span>
+      <div class="page-title-input" contenteditable="true" id="_titleEl"
+           @paste.prevent="pastePlain($event)"
+           @input="dirty=true;autoSave()"
+           @keydown.enter.prevent="focusBlock()"
+           spellcheck="false">{{ page.title }}</div>
     </div>
   </div>
 
-  <!-- Status -->
-  <div style="display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12px; color:var(--text-dim);">
-    <span x-show="saved">✓ Saved</span>
-    <span x-show="dirty && !saving">● Unsaved</span>
-    <span x-text="wordCount + ' words'"></span>
-    <span style="margin-left:auto;" x-text="'Last edited: ' + lastSaved"></span>
+  <div class="blocks-container" id="_blocksCt" @click="onCtClick($event)">
+
+    <template x-for="idx in blocks.length" :key="'b'+idx">
+      <div class="block-wrapper" :data-bid="blocks[idx-1].id"
+           @mouseenter="hoverBid=blocks[idx-1].id" @mouseleave="hoverBid=null">
+
+        <div class="block-handle" :class="{visible:hoverBid===blocks[idx-1].id}">
+          <svg viewBox="0 0 16 16" width="14" height="14">
+            <circle cx="4" cy="3" r="1.3"/><circle cx="11" cy="3" r="1.3"/>
+            <circle cx="4" cy="8" r="1.3"/><circle cx="11" cy="8" r="1.3"/>
+            <circle cx="4" cy="13" r="1.3"/><circle cx="11" cy="13" r="1.3"/>
+          </svg>
+        </div>
+        <div class="block-actions" :class="{visible:hoverBid===blocks[idx-1].id}">
+          <button class="block-add-btn" @click="addAfter(idx-1)">+</button>
+        </div>
+
+        <div x-show="blocks[idx-1].type==='paragraph'" class="block-content" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Type '/' for commands..." spellcheck="false"></div>
+        <h1 x-show="blocks[idx-1].type==='heading_1'" class="block-content block-h1" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Heading 1" spellcheck="false"></h1>
+        <h2 x-show="blocks[idx-1].type==='heading_2'" class="block-content block-h2" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Heading 2" spellcheck="false"></h2>
+        <h3 x-show="blocks[idx-1].type==='heading_3'" class="block-content block-h3" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Heading 3" spellcheck="false"></h3>
+        <div x-show="blocks[idx-1].type==='bulleted_list'" class="block-content block-bullet" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="List" spellcheck="false"></div>
+        <div x-show="blocks[idx-1].type==='numbered_list'" class="block-content block-numbered" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="List" spellcheck="false"></div>
+        <div x-show="blocks[idx-1].type==='to_do'" class="block-content block-todo">
+          <input type="checkbox" class="todo-checkbox" :checked="blocks[idx-1].checked" @change="blocks[idx-1].checked=$event.target.checked;dirty=true;autoSave()">
+          <div :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="To-do" spellcheck="false"></div>
+        </div>
+        <div x-show="blocks[idx-1].type==='toggle'" class="block-content block-toggle">
+          <button class="toggle-chevron" :class="{open:blocks[idx-1].expanded}" @click="blocks[idx-1].expanded=!blocks[idx-1].expanded;autoSave()">▶</button>
+          <div :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Toggle" spellcheck="false"></div>
+        </div>
+        <blockquote x-show="blocks[idx-1].type==='quote'" class="block-content block-quote" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Quote" spellcheck="false"></blockquote>
+        <div x-show="blocks[idx-1].type==='code'" class="block-content block-code">
+          <div class="code-lang-label" x-text="blocks[idx-1].language||'Plain Text'"></div>
+          <pre><code :data-bid="blocks[idx-1].id" contenteditable="true" spellcheck="false"></code></pre>
+        </div>
+        <hr x-show="blocks[idx-1].type==='divider'" class="block-divider">
+        <div x-show="blocks[idx-1].type==='callout'" class="block-content block-callout" :style="{background:(blocks[idx-1].style&&blocks[idx-1].style.bgColor)||'var(--blue-bg)'}">
+          <span class="callout-icon" x-text="blocks[idx-1].icon||'💡'">💡</span>
+          <div :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Type something..." spellcheck="false"></div>
+        </div>
+        <div x-show="blocks[idx-1].type==='image'" class="block-content block-image-wrapper">
+          <img :src="blocks[idx-1].src" style="max-width:100%;border-radius:4px" x-show="blocks[idx-1].src">
+          <div class="image-placeholder" x-show="!blocks[idx-1].src" @click="imgInputs[blocks[idx-1].id]?.click()" @drop.prevent="dropImg($event,idx-1)" @dragover.prevent>
+            <span>🖼 Click or drop image</span>
+            <input type="file" accept="image/*" style="display:none" :ref="el=>{if(el)imgInputs[blocks[idx-1].id]=el}" @change="uploadImg(idx-1,$event)">
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div class="blocks-empty" x-show="blocks.length===0" @click="addAt(0)">Press '/' for commands, or just start typing...</div>
   </div>
 
-  <!-- Get started block (shown for empty pages) -->
-  <div x-show="!content.trim()" style="margin-top:48px; text-align:center; color:var(--text-dim);">
-    <div style="font-size:48px; margin-bottom:16px;">📝</div>
-    <h3 style="color:var(--text-secondary); margin-bottom:8px;">Get started with</h3>
-    <div style="display:flex; gap:12px; justify-content:center; flex-wrap:wrap;">
-      <button class="sidebar-new-chat" style="width:auto; padding:8px 16px;" @click="insertMd('# ', '')">📄 Empty page</button>
-      <button class="sidebar-new-chat" style="width:auto; padding:8px 16px;" @click="insertMd('- [ ] Task 1\n- [ ] Task 2\n', '')">✅ To-do list</button>
-      <button class="sidebar-new-chat" style="width:auto; padding:8px 16px;" @click="insertMd('| Col 1 | Col 2 |\n|-------|-------|\n| | |\n', '')">📊 Table</button>
-      <button class="sidebar-new-chat" style="width:auto; padding:8px 16px;" @click="insertMd('# Meeting Notes\n\n**Date:** \n**Attendees:** \n\n## Agenda\n\n- \n\n## Notes\n\n- \n\n## Action Items\n\n- [ ] \n', '')">🎤 Meeting Notes</button>
-    </div>
+  <!-- Slash menu: built in vanilla JS, not Alpine -->
+  <div id="_slashMenu" class="slash-menu" style="display:none;position:fixed;z-index:999"></div>
+
+  <!-- Format Toolbar: Alpine for show/hide only -->
+  <div class="format-toolbar" x-show="fmt.open" :style="{top:fmt.top+'px',left:fmt.left+'px'}" @mousedown.prevent>
+    <button @click="fmtApply('bold')"><strong>B</strong></button>
+    <button @click="fmtApply('italic')"><em>I</em></button>
+    <button @click="fmtApply('underline')"><u>U</u></button>
+    <button @click="fmtApply('strikeThrough')"><s>S</s></button>
+    <button @click="fmtLink()">🔗</button>
   </div>
 
-  <!-- Sub-pages -->
-  <div style="margin-top:32px; border-top:1px solid var(--border); padding-top:16px;">
-    <h3 style="font-size:14px; font-weight:600; margin-bottom:12px;">Sub-pages</h3>
-    {% for sub in sub_pages %}
-    <a href="/pages/{{ sub.id }}" style="display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; text-decoration:none; color:var(--text-primary); font-size:13px;"
-       onmouseover="this.style.background='var(--bg-hover)'" onmouseout="this.style.background='transparent'">
-      <span>📄</span> {{ sub.title }}
-    </a>
-    {% endfor %}
-    <button class="kanban-new-card" style="margin-top:8px;"
-            @click="createSubPage()">+ New sub-page</button>
+  <div class="editor-statusbar">
+    <span x-show="saving">Saving...</span>
+    <span x-show="!saving&&dirty">Unsaved</span>
+    <span x-show="!saving&&!dirty&&lastSaved">Saved <span x-text="lastSaved"></span></span>
+    <span class="statusbar-right" x-text="blocks.length+' blocks'"></span>
   </div>
+
 </div>
 {% endblock %}
 
 {% block scripts %}
 <script>
-  function createSubPage() {
-    const csrf = document.cookie.match(/csrf_token=([^;]+)/);
-    const token = csrf ? csrf[1] : '';
-    const project = document.querySelector('[x-data]')?.__x?.$data?.workspaceKey || '';
-    fetch(`/board/api/pages?title=New%20sub-page&section=Private&project=${encodeURIComponent(project)}&parent_id={{ page.id }}`, {
-      method: 'POST',
-      headers: { 'X-CSRF-Token': token }
-    })
-      .then(r => r.json())
-      .then(data => { window.location.href = `/pages/${data.id}`; })
-      .catch(err => { alert('Failed: ' + err.message); });
-  }
-  // Simple Markdown-to-HTML renderer
-  function renderMarkdown(md) {
-    let html = md
-      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-      // Headers
-      .replace(/^### (.+)$/gm, '<h3 style="font-size:16px; margin:12px 0 4px;">$1</h3>')
-      .replace(/^## (.+)$/gm, '<h2 style="font-size:18px; margin:16px 0 4px;">$1</h2>')
-      .replace(/^# (.+)$/gm, '<h1 style="font-size:22px; margin:20px 0 6px;">$1</h1>')
-      // Bold/italic
-      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-      .replace(/\*(.+?)\*/g, '<em>$1</em>')
-      // Inline code
-      .replace(/`([^`]+)`/g, '<code style="background:var(--bg-tertiary); padding:1px 4px; border-radius:3px; font-size:12px;">$1</code>')
-      // Code blocks
-      .replace(/```[\s\S]*?```/g, (m) => '<pre style="background:var(--bg-tertiary); padding:12px; border-radius:4px; overflow-x:auto; font-size:12px;"><code>' + m.slice(3, -3).trim() + '</code></pre>')
-      // Links
-      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="color:var(--blue);">$1</a>')
-      // Horizontal rules
-      .replace(/^---$/gm, '<hr style="border:none; border-top:1px solid var(--border); margin:16px 0;">')
-      // Blockquotes
-      .replace(/^> (.+)$/gm, '<blockquote style="border-left:2px solid var(--blue); padding-left:12px; margin:8px 0; color:var(--text-secondary);">$1</blockquote>')
-      // Lists
-      .replace(/^- (.+)$/gm, '<li style="margin-left:20px;">$1</li>')
-      .replace(/^\d+\. (.+)$/gm, '<li style="margin-left:20px;">$1</li>')
-      // Checkboxes
-      .replace(/^- \[ \] (.+)$/gm, '<div style="display:flex; align-items:center; gap:8px; margin:2px 0;"><input type="checkbox" style="accent-color:var(--blue);">$1</div>')
-      .replace(/^- \[x\] (.+)$/gm, '<div style="display:flex; align-items:center; gap:8px; margin:2px 0;"><input type="checkbox" checked style="accent-color:var(--blue);"><span style="text-decoration:line-through; color:var(--text-dim);">$1</span></div>')
-      // Paragraphs
-      .replace(/\n\n/g, '<br><br>');
-    return html;
-  }
+// ═══════════════════════════════════════════
+// FlowDeck Block Editor — Notion Clone v4
+// Slash menu: pure vanilla JS (zero Alpine)
+// Blocks: Alpine x-for + vanilla JS keydown
+// ═══════════════════════════════════════════
 
-  function pageEditor(initialContent) {
-    return {
-      content: initialContent || '',
-      saved: true,
-      dirty: false,
-      saving: false,
-      lastSaved: 'now',
-      saveTimeout: null,
-      renderedContent() { return renderMarkdown(this.content); },
-      get wordCount() { return this.content.trim() ? this.content.trim().split(/\s+/).length : 0; },
-      insertMd(before, after) {
-        const el = this.$refs.editor;
-        const start = el.selectionStart;
-        const end = el.selectionEnd;
-        const selected = this.content.substring(start, end);
-        const replacement = before + selected + after;
-        this.content = this.content.substring(0, start) + replacement + this.content.substring(end);
-        this.autoSave();
-        el.focus();
-        el.setSelectionRange(start + before.length, start + before.length + selected.length);
-      },
-      autoSave() {
-        this.dirty = true;
-        this.saved = false;
-        clearTimeout(this.saveTimeout);
-        this.saveTimeout = setTimeout(() => this.save(), 1500);
-      },
-      save() {
-        this.saving = true;
-        const title = document.querySelector('.page-title h1')?.textContent || 'New page';
-        const csrf = document.cookie.match(/csrf_token=([^;]+)/);
-        const token = csrf ? csrf[1] : '';
-        const pageId = '{{ page.id }}';
-        fetch(`/board/api/pages/${pageId}?title=${encodeURIComponent(title)}&content=${encodeURIComponent(this.content)}`, {
-          method: 'PUT',
-          headers: { 'X-CSRF-Token': token }
-        })
-          .then(() => {
-            this.saved = true;
-            this.dirty = false;
-            this.saving = false;
-            this.lastSaved = new Date().toLocaleTimeString();
-            // Update sidebar title without reloading
-            const sidebarItem = document.querySelector(`.sidebar-item[data-page-id="page/${pageId}"]`);
-            if (sidebarItem) {
-              const nameEl = sidebarItem.querySelector('.page-name');
-              if (nameEl) nameEl.textContent = title;
-            }
-          });
-      },
-      saveTitle(newTitle) {
-        const csrf = document.cookie.match(/csrf_token=([^;]+)/);
-        const token = csrf ? csrf[1] : '';
-        fetch(`/board/api/pages/{{ page.id }}?title=${encodeURIComponent(newTitle)}`, {
-          method: 'PUT',
-          headers: { 'X-CSRF-Token': token }
-        }).then(() => { location.reload(); });
-      },
-      handleSlash(e) {
-        if (e.key === '/' && !e.ctrlKey && !e.metaKey) {
-          const el = this.$refs.editor;
-          const cursor = el.selectionStart;
-          const lineStart = this.content.lastIndexOf('\n', cursor - 1) + 1;
-          const charsBefore = this.content.substring(lineStart, cursor);
-          // Only trigger at start of line or after whitespace
-          if (charsBefore.trim() === '') {
-            e.preventDefault();
-            this.content = this.content.substring(0, cursor) + '/';
-            // Simple menu: insert template after short delay
-            const cmd = prompt('Slash command:\n  /h1 - Heading 1\n  /h2 - Heading 2\n  /h3 - Heading 3\n  /bold - Bold\n  /list - Bullet list\n  /num - Numbered list\n  /code - Code block\n  /quote - Quote\n  /todo - To-do list\n  /table - Table\n  /divider - Divider\n  /link - Link\n  /img - Image\n  /date - Date');
-            if (!cmd) { this.content = this.content.substring(0, cursor); return; }
-            const templates = {
-              h1: '# ',
-              h2: '## ',
-              h3: '### ',
-              bold: '**bold text**',
-              list: '- ',
-              num: '1. ',
-              code: '```\ncode\n```',
-              quote: '> ',
-              todo: '- [ ] ',
-              table: '| Col 1 | Col 2 |\n|-------|-------|\n| | |',
-              divider: '---\n',
-              link: '[text](url)',
-              img: '![alt](url)',
-              date: new Date().toISOString().slice(0, 10),
-            };
-            const insert = templates[cmd.replace('/','')] || '';
-            const before = this.content.substring(0, cursor);
-            this.content = before + insert + this.content.substring(cursor + 1);
-            setTimeout(() => { el.focus(); el.selectionStart = el.selectionEnd = before.length + insert.length; }, 50);
-          }
+let _bid=0;
+function genId(){return 'b'+(++_bid)+'_'+Date.now().toString(36);}
+
+// Slash commands data
+const SLASH_GROUPS=[
+  {name:'BASIC',items:[
+    {id:'paragraph',name:'Text',icon:'¶'},
+    {id:'heading_1',name:'Heading 1',icon:'H1'},
+    {id:'heading_2',name:'Heading 2',icon:'H2'},
+    {id:'heading_3',name:'Heading 3',icon:'H3'},
+    {id:'bulleted_list',name:'Bulleted list',icon:'•'},
+    {id:'numbered_list',name:'Numbered list',icon:'1.'},
+    {id:'to_do',name:'To-do',icon:'☐'},
+    {id:'toggle',name:'Toggle',icon:'▶'},
+    {id:'quote',name:'Quote',icon:'❝'},
+    {id:'callout',name:'Callout',icon:'💡'},
+    {id:'divider',name:'Divider',icon:'—'},
+    {id:'code',name:'Code block',icon:'<>'},
+  ]},
+  {name:'MEDIA',items:[
+    {id:'image',name:'Image',icon:'🖼'},
+  ]},
+];
+
+// ── Slash Menu (100% vanilla JS, no Alpine) ──
+const SlashMenu={
+  _open:false,_idx:-1,_sel:0,_q:'',_items:[],
+  _el:null,_inp:null,_list:null,
+
+  init(){
+    this._el=document.getElementById('_slashMenu');
+    if(!this._el)return;
+    this._inp=document.createElement('input');
+    this._inp.type='text';this._inp.placeholder='Filter...';
+    this._inp.style.cssText='width:100%;padding:6px 10px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:14px;outline:none;box-sizing:border-box';
+    this._inp.oninput=()=>this.filter();
+    this._inp.onkeydown=e=>this._onKey(e);
+    const hdr=document.createElement('div');
+    hdr.style.cssText='padding:8px;border-bottom:1px solid var(--border)';
+    hdr.appendChild(this._inp);
+    this._list=document.createElement('div');
+    this._list.style.cssText='overflow-y:auto;max-height:340px';
+    this._el.appendChild(hdr);
+    this._el.appendChild(this._list);
+    document.addEventListener('mousedown',e=>{if(!this._el.contains(e.target))this.close();});
+  },
+
+  open(idx,el){
+    if(!this._el)this.init();
+    this._idx=idx;this._q='';this._sel=0;this._inp.value='';
+    this.filter();
+    const r=el.getBoundingClientRect();
+    this._el.style.display='block';
+    const mh=this._el.offsetHeight||400;
+    this._el.style.top=Math.max(0,(r.bottom+4+mh>window.innerHeight)?r.top-mh-4:r.bottom+4)+'px';
+    this._el.style.left=Math.min(r.left,window.innerWidth-330)+'px';
+    this._inp.focus();this._open=true;
+  },
+
+  close(){
+    this._el.style.display='none';this._open=false;
+    this._inp.value='';this._q='';
+  },
+
+  filter(){
+    const q=(this._inp.value||'').toLowerCase();this._q=q;
+    let html='';
+    for(const g of SLASH_GROUPS){
+      let items=g.items;
+      if(q)items=items.filter(c=>c.name.toLowerCase().includes(q)||c.id.includes(q));
+      if(!items.length)continue;
+      html+=`<div style="padding:6px 12px 4px;font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px">${g.name}</div>`;
+      items.forEach((c,i)=>{
+        const sel=(this._items.length===this._sel);
+        if(sel)this._selItem=c.id;
+        this._items.push(c);
+        html+=`<div class="slash-item${sel?' selected':''}" data-sid="${c.id}" style="display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:14px;color:var(--text-primary);cursor:pointer;transition:background .1s"
+                onmousedown="event.preventDefault()" onclick="SlashMenu.select('${c.id}')" onmouseenter="this.classList.add('selected')" onmouseleave="this.classList.remove('selected')">
+          <span style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--bg-secondary);border-radius:4px;flex-shrink:0">${c.icon}</span>
+          <span style="flex:1;font-weight:500">${c.name}</span>
+        </div>`;
+      });
+    }
+    this._list.innerHTML=html;
+    if(this._items.length)this._selItem=this._items[0].id;
+  },
+
+  _onKey(e){
+    if(e.key==='ArrowDown'){e.preventDefault();this._sel=Math.min(this._sel+1,this._items.length-1);this._renderSel();}
+    else if(e.key==='ArrowUp'){e.preventDefault();this._sel=Math.max(this._sel-1,0);this._renderSel();}
+    else if(e.key==='Enter'){e.preventDefault();const c=this._items[this._sel];if(c)this.select(c.id);}
+    else if(e.key==='Escape'){e.preventDefault();this.close();}
+  },
+
+  _renderSel(){
+    const items=this._list.querySelectorAll('.slash-item');
+    items.forEach((el,i)=>{el.classList.toggle('selected',i===this._sel);});
+  },
+
+  select(id){
+    const ed=document.querySelector('.page-editor-wrapper');
+    if(!ed?.__x)return;
+    ed.__x.$data.applySlash(id);
+    this.close();
+  },
+
+  get isOpen(){return this._open;},
+};
+
+// ── Cursor helpers ──
+function curPos(el){const s=window.getSelection();if(!s.rangeCount)return 0;const r=s.getRangeAt(0).cloneRange();r.selectNodeContents(el);r.setEnd(s.getRangeAt(0).endContainer,s.getRangeAt(0).endOffset);return r.toString().length;}
+function curEnd(el){const r=document.createRange();r.selectNodeContents(el);r.collapse(false);const s=window.getSelection();s.removeAllRanges();s.addRange(r);}
+function curStart(el){const r=document.createRange();r.selectNodeContents(el);r.collapse(true);const s=window.getSelection();s.removeAllRanges();s.addRange(r);}
+
+// ── Editor component ──
+function editor(pid,title,fmt,raw){
+  const self={
+    pid,pageTitle:title,blocks:[],hoverBid:null,
+    dirty:false,saving:false,lastSaved:'',st:null,
+    imgInputs:{},
+    fmt:{open:false,top:0,left:0,idx:-1},
+
+    init(){
+      _bid=Math.floor(Math.random()*10000);
+      if(fmt==='blocks'&&raw){try{this.blocks=JSON.parse(raw);this.blocks.forEach(b=>{if(!b.id)b.id=genId()});}catch(e){this.blocks=[];}}
+      else if(raw&&raw.trim())this.blocks=this.md2b(raw);
+      if(!this.blocks.length)this.blocks=[this.mkB('paragraph','')];
+
+      SlashMenu.init();
+
+      // Poll until DOM ready, then setup
+      let n=0;
+      const setup=()=>{
+        const ct=document.getElementById('_blocksCt');
+        if(!ct||!ct.querySelector('[data-bid]')){if(++n<60)requestAnimationFrame(setup);return;}
+
+        // Fill content
+        for(const b of this.blocks){
+          const el=ct.querySelector(`[data-bid="${b.id}"]:not(button):not(input)`);
+          if(el&&b.type!=='divider')el.textContent=b.content||'';
         }
-      },
-    };
-  }
+        const b0=this.blocks[0];
+        if(b0){const f=ct.querySelector(`[data-bid="${b0.id}"]:not(button):not(input)`);if(f){f.focus();curEnd(f);}}
+
+        // === KEYDOWN (vanilla JS) ===
+        ct.addEventListener('keydown',e=>this.onKd(e,ct));
+        ct.addEventListener('paste',e=>{e.preventDefault();document.execCommand('insertText',false,(e.clipboardData||window.clipboardData).getData('text/plain'));this.dirty=true;this.autoSave();});
+
+        // SortableJS
+        if(typeof Sortable!=='undefined')Sortable.create(ct,{draggable:'.block-wrapper',handle:'.block-handle',animation:150,ghostClass:'sortable-ghost',dragClass:'sortable-drag',onEnd:evt=>{if(evt.oldIndex===evt.newIndex)return;const[item]=this.blocks.splice(evt.oldIndex,1);this.blocks.splice(evt.newIndex,0,item);this.dirty=true;this.autoSave();}});
+      };
+      requestAnimationFrame(setup);
+    },
+
+    mkB(type,content,extras){const b={id:genId(),type,content:content||'',...(extras||{})};if(type==='toggle')b.expanded=true;if(type==='to_do')b.checked=false;return b;},
+
+    focusFirstBlock(){const b=this.blocks[0];if(b){const el=this.getEl(b.id);if(el){el.focus();curEnd(el);}}},
+    focusBlock(){this.focusFirstBlock();},
+    onCtClick(e){
+      if(e.target===document.getElementById('_blocksCt')||e.target.classList.contains('blocks-empty')){
+        if(!this.blocks.length)this.addAt(0);
+        else{const b=this.blocks[this.blocks.length-1];const el=b&&this.getEl(b.id);if(el){el.focus();curEnd(el);}}
+      }
+    },
+    getEl(bid){const ct=document.getElementById('_blocksCt');return ct?ct.querySelector(`[data-bid="${bid}"]:not(button):not(input)`):null;},
+    getIdx(bid){return this.blocks.findIndex(b=>b.id===bid);},
+
+    addAt(idx,type,content){const b=this.mkB(type||'paragraph',content||'');this.blocks.splice(idx,0,b);this.dirty=true;this.autoSave();requestAnimationFrame(()=>{const el=this.getEl(b.id);if(el&&type!=='divider'){el.focus();curEnd(el);}});return b;},
+    addAfter(idx,type){return this.addAt(idx+1,type);},
+
+    removeBlock(idx){
+      if(this.blocks.length<=1){const b=this.blocks[0];b.type='paragraph';b.content='';const el=this.getEl(b.id);if(el)el.textContent='';this.dirty=true;this.autoSave();requestAnimationFrame(()=>{if(el)el.focus();});return;}
+      this.blocks.splice(idx,1);const fi=Math.max(0,idx-1);this.dirty=true;this.autoSave();
+      requestAnimationFrame(()=>{const el=this.getEl(this.blocks[fi]?.id);if(el){el.focus();curEnd(el);}});
+    },
+
+    // ── THE KEY HANDLER ──
+    onKd(e,ct){
+      const el=document.activeElement;
+      if(!el||!el.hasAttribute('data-bid'))return;
+      const bid=el.dataset.bid,idx=this.getIdx(bid);
+      if(idx<0)return;
+      const block=this.blocks[idx];
+
+      // Slash menu open
+      if(SlashMenu.isOpen){
+        if(e.key==='Escape'){e.preventDefault();SlashMenu.close();return;}
+        if(e.key==='ArrowDown'||e.key==='ArrowUp'||e.key==='Enter'){e.preventDefault();SlashMenu._inp.dispatchEvent(new KeyboardEvent('keydown',{key:e.key,bubbles:true}));return;}
+        if(e.key==='Backspace'&&!SlashMenu._q&&(el.textContent||'').trim()==='/'){e.preventDefault();SlashMenu.close();return;}
+        return;
+      }
+
+      // After content keys, check for slash
+      if(e.key.length===1||e.key==='Backspace'||e.key==='Delete'){
+        const b2=bid;setTimeout(()=>{const e2=this.getEl(b2);if(e2&&e2.textContent?.trim()==='/'&&!SlashMenu.isOpen)SlashMenu.open(this.getIdx(b2),e2);},15);
+      }
+
+      // ENTER
+      if(e.key==='Enter'){
+        if(e.shiftKey){this.dirty=true;this.autoSave();return;}
+        e.preventDefault();
+        const text=el.textContent||'',pos=curPos(el),before=text.substring(0,pos),after=text.substring(pos);
+        if(!before.trim()&&!after.trim()){const nt=(block.type==='bulleted_list'||block.type==='numbered_list'||block.type==='to_do')?block.type:'paragraph';this.addAt(idx+1,nt);return;}
+        el.textContent=before;block.content=before;
+        const nt=(block.type==='bulleted_list'||block.type==='numbered_list'||block.type==='to_do')?block.type:'paragraph';
+        const nb=this.addAt(idx+1,nt,after);this.dirty=true;this.autoSave();
+        requestAnimationFrame(()=>{const nel=this.getEl(nb.id);if(nel){nel.textContent=after;nel.focus();curStart(nel);}});
+        return;
+      }
+
+      // ARROW UP
+      if(e.key==='ArrowUp'){const pos=curPos(el);if(pos===0&&idx>0){e.preventDefault();const prev=this.getEl(this.blocks[idx-1]?.id);if(prev){prev.focus();curEnd(prev);}}return;}
+      // ARROW DOWN
+      if(e.key==='ArrowDown'){const pos=curPos(el),len=(el.textContent||'').length;if(pos>=len&&idx<this.blocks.length-1){e.preventDefault();const next=this.getEl(this.blocks[idx+1]?.id);if(next){next.focus();curStart(next);}}return;}
+
+      // BACKSPACE
+      if(e.key==='Backspace'){const text=el.textContent||'';if(!text.trim()){if(block.type!=='paragraph'){e.preventDefault();block.type='paragraph';block.content='';el.textContent='';this.dirty=true;this.autoSave();requestAnimationFrame(()=>el.focus());}else if(this.blocks.length>1){e.preventDefault();this.removeBlock(idx);}}return;}
+
+      // SPACE: check markdown
+      if(e.key===' '){const b2=bid;setTimeout(()=>this.checkMd(b2),10);}
+
+      // Ctrl shortcuts
+      if((e.ctrlKey||e.metaKey)&&!e.altKey){const m={b:'bold',i:'italic',u:'underline'};if(m[e.key]){e.preventDefault();document.execCommand(m[e.key]);this.dirty=true;this.autoSave();}}
+      if(e.key==='Tab'&&block.type==='code'){e.preventDefault();document.execCommand('insertText',false,'  ');}
+      this.dirty=true;this.autoSave();
+    },
+
+    checkMd(bid){
+      const idx=this.getIdx(bid);if(idx<0)return;
+      const block=this.blocks[idx],el=this.getEl(bid);if(!el)return;
+      const text=el.textContent||'';
+      const sc={'# ':'heading_1','## ':'heading_2','### ':'heading_3','- ':'bulleted_list','* ':'bulleted_list','+ ':'bulleted_list','1. ':'numbered_list','[] ':'to_do','[ ] ':'to_do','> ':'quote'};
+      for(const[pfx,type] of Object.entries(sc)){if(text===pfx||text.startsWith(pfx)){block.type=type;block.content='';if(type==='toggle')block.expanded=true;if(type==='to_do')block.checked=false;this.dirty=true;this.autoSave();requestAnimationFrame(()=>{const nel=this.getEl(bid);if(nel){nel.textContent='';if(type!=='divider')nel.focus();}});return;}}
+      if(text==='---'){block.type='divider';block.content='';this.addAfter(idx,'paragraph');this.dirty=true;this.autoSave();}
+      if(text==='```'){block.type='code';block.content='';block.language='Plain Text';this.dirty=true;this.autoSave();requestAnimationFrame(()=>{const nel=this.getEl(bid);if(nel){nel.textContent='';nel.focus();}});}
+    },
+
+    // ── Slash apply (called from SlashMenu.select) ──
+    applySlash(id){
+      const idx=SlashMenu._idx;
+      if(idx<0||idx>=this.blocks.length)return;
+      const block=this.blocks[idx],el=this.getEl(block.id);
+      if(el)el.textContent='';block.content='';
+      if(id==='divider'){block.type='divider';block.content='';this.addAfter(idx,'paragraph');}
+      else{block.type=id;if(id==='toggle')block.expanded=true;if(id==='to_do')block.checked=false;if(id==='code')block.language='Plain Text';
+        requestAnimationFrame(()=>{const nel=this.getEl(block.id);if(nel){nel.textContent='';nel.focus();}});}
+      this.dirty=true;this.autoSave();
+    },
+
+    // ── Format toolbar ──
+    showFmt(idx){const s=window.getSelection();if(!s.rangeCount||s.isCollapsed){this.fmt.open=false;return;}const r=s.getRangeAt(0).getBoundingClientRect();this.fmt.open=true;this.fmt.idx=idx;this.fmt.top=Math.max(r.top-44,0);this.fmt.left=Math.min(r.left+r.width/2-120,window.innerWidth-260);this._sel={range:s.getRangeAt(0).cloneRange(),idx};},
+    fmtApply(f){this.fmt.open=false;if(!this._sel)return;const s=window.getSelection();s.removeAllRanges();s.addRange(this._sel.range);document.execCommand(f==='strikeThrough'?'strikeThrough':f);this._sel=null;this.dirty=true;this.autoSave();},
+    fmtLink(){this.fmt.open=false;const u=prompt('URL:');if(u){document.execCommand('createLink',false,u);this.dirty=true;this.autoSave();}},
+
+    dropImg(e,idx){const f=e.dataTransfer.files[0];if(f?.type?.startsWith('image/'))this.upFile(idx,f);},
+    uploadImg(idx,e){if(e.target.files[0])this.upFile(idx,e.target.files[0]);},
+    upFile(idx,file){const b=this.blocks[idx];const r=new FileReader();r.onload=ev=>{b.src=ev.target.result;this.dirty=true;this.autoSave();};r.readAsDataURL(file);},
+    pastePlain(e){e.preventDefault();document.execCommand('insertText',false,(e.clipboardData||window.clipboardData).getData('text/plain'));this.dirty=true;this.autoSave();},
+
+    autoSave(){clearTimeout(this.st);this.st=setTimeout(()=>this.save(),1500);},
+    save(){
+      if(this.saving)return;
+      const ct=document.getElementById('_blocksCt');
+      for(const b of this.blocks){if(b.type==='divider')continue;const el=ct?ct.querySelector(`[data-bid="${b.id}"]:not(button):not(input)`):null;if(el)b.content=el.textContent||'';}
+      const t=document.getElementById('_titleEl');if(t)this.pageTitle=t.textContent?.trim()||'Untitled';
+      this.saving=true;
+      const csrf=document.cookie.match(/csrf_token=([^;]+)/);
+      fetch(`/board/api/pages/${this.pid}/blocks`,{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-Token':csrf?csrf[1]:''},body:JSON.stringify({title:this.pageTitle,blocks:this.blocks.map(b=>{const c={id:b.id,type:b.type,content:b.content};['checked','expanded','language','icon','src','alt','style'].forEach(k=>{if(b[k]!=null)c[k]=b[k];});return c;})})})
+      .then(r=>r.json()).then(()=>{this.saving=false;this.dirty=false;this.lastSaved=new Date().toLocaleTimeString();}).catch(()=>{this.saving=false;});
+    },
+
+    md2b(md){const bl=[];let cb=null;for(const line of md.split('\n')){if(cb){if(line.trim()==='```'){bl.push(cb);cb=null;}else cb.content+=(cb.content?'\n':'')+line;continue;}const t=line.trim();if(!t)continue;if(t.startsWith('```')){cb=this.mkB('code','',{language:t.substring(3).trim()||'Plain Text'});continue;}if(t.startsWith('# ')&&!t.startsWith('## '))bl.push(this.mkB('heading_1',t.substring(2)));else if(t.startsWith('## ')&&!t.startsWith('### '))bl.push(this.mkB('heading_2',t.substring(3)));else if(t.startsWith('### '))bl.push(this.mkB('heading_3',t.substring(4)));else if(t==='---'||t==='***')bl.push(this.mkB('divider',''));else if(/^[-*+] /.test(t))bl.push(this.mkB('bulleted_list',t.substring(2)));else if(/^\d+\. /.test(t))bl.push(this.mkB('numbered_list',t.replace(/^\d+\. /,'')));else if(t.startsWith('- [ ] ')||t.startsWith('* [ ] '))bl.push(this.mkB('to_do',t.substring(6)));else if(t.startsWith('- [x] ')||t.startsWith('* [x] '))bl.push(this.mkB('to_do',t.substring(6),{checked:true}));else if(t.startsWith('> '))bl.push(this.mkB('quote',t.substring(2)));else bl.push(this.mkB('paragraph',t));}if(cb)bl.push(cb);return bl;},
+  };
+  return self;
+}
+
+// ── Global: selection → toolbar ──
+document.addEventListener('mouseup',()=>{setTimeout(()=>{const s=window.getSelection();if(!s||s.isCollapsed)return;const ed=document.querySelector('.page-editor-wrapper');if(!ed?.__x)return;const d=ed.__x.$data;const ct=document.getElementById('_blocksCt');if(!ct?.contains(s.anchorNode))return;const bel=s.anchorNode.parentElement?.closest('[data-bid]');if(bel){const idx=d.getIdx(bel.dataset.bid);if(idx>=0)d.showFmt(idx);}},80);});
 </script>
 {% endblock %}
diff --git a/static/css/app.css b/static/css/app.css
index 99960b2..1cf9c65 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -1500,3 +1500,574 @@ input, select, textarea { font-family: inherit; color: inherit; }
 /* Sortable ghost */
 .sortable-ghost { opacity: 0.4; }
 .sortable-drag { box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; }
+
+/* ═══════════════════════════════════════════════════════════
+   NOTION-STYLE BLOCK EDITOR
+   ═══════════════════════════════════════════════════════════ */
+
+/* Editor wrapper */
+.page-editor-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+  min-height: 100%;
+}
+
+/* Page title area */
+.page-cover-area {
+  padding: 48px 64px 12px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.page-title-block {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.page-icon-emoji {
+  font-size: 36px;
+  cursor: pointer;
+  flex-shrink: 0;
+  padding-top: 2px;
+  user-select: none;
+}
+
+.page-title-input {
+  flex: 1;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--text-primary);
+  outline: none;
+  min-height: 50px;
+  padding: 0;
+  border: none;
+  word-break: break-word;
+}
+.page-title-input:empty::before {
+  content: 'New page';
+  color: var(--text-dim);
+  pointer-events: none;
+}
+
+/* Blocks container */
+.blocks-container {
+  padding: 8px 64px 96px;
+  max-width: 900px;
+  margin: 0 auto;
+  min-height: 300px;
+}
+
+.blocks-empty {
+  padding: 40px 0;
+  text-align: center;
+}
+
+.blocks-empty-hint {
+  color: var(--text-dim);
+  font-size: 15px;
+}
+
+/* Block wrapper */
+.block-wrapper {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 2px 0;
+  margin: 1px 0;
+  border-radius: 4px;
+  transition: background 0.1s ease;
+}
+.block-wrapper:hover {
+  background: rgba(255,255,255,0.02);
+}
+
+/* 6-dot drag handle */
+.block-handle {
+  position: absolute;
+  left: -40px;
+  top: 4px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  border-radius: 3px;
+  fill: var(--text-dim);
+}
+.block-handle.visible {
+  opacity: 1;
+}
+.block-handle:hover {
+  background: var(--bg-hover);
+  fill: var(--text-secondary);
+}
+.block-handle:active {
+  cursor: grabbing;
+}
+
+/* Block actions (+ button) */
+.block-actions {
+  position: absolute;
+  right: -60px;
+  top: 2px;
+  display: flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.block-actions.visible {
+  opacity: 1;
+}
+
+.block-add-btn {
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-dim);
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.block-add-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.block-drag-btn {
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-dim);
+  font-size: 11px;
+  cursor: grab;
+  transition: background 0.1s;
+}
+.block-drag-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+/* Block content (base) */
+.block-content {
+  flex: 1;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--text-primary);
+  outline: none;
+  padding: 3px 2px;
+  min-height: 28px;
+  word-break: break-word;
+}
+.block-content:empty::before {
+  content: attr(data-placeholder);
+  color: #9B9A97;
+  pointer-events: none;
+}
+
+/* Headings */
+.block-h1 {
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1.2;
+  padding: 8px 2px 4px;
+}
+.block-h2 {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.3;
+  padding: 6px 2px 3px;
+}
+.block-h3 {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.3;
+  padding: 4px 2px 2px;
+}
+
+/* Bulleted list */
+.block-bullet {
+  padding-left: 18px;
+  position: relative;
+}
+.block-bullet::before {
+  content: '\2022';
+  position: absolute;
+  left: 2px;
+  top: 3px;
+  color: var(--text-primary);
+  font-size: 16px;
+}
+
+/* Numbered list */
+.block-numbered {
+  padding-left: 22px;
+  position: relative;
+}
+
+/* To-do */
+.block-todo {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 2px 2px;
+}
+.block-todo .todo-checkbox {
+  margin-top: 5px;
+  width: 16px;
+  height: 16px;
+  accent-color: var(--blue);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.block-todo div {
+  flex: 1;
+  outline: none;
+  font-size: 16px;
+  line-height: 1.6;
+  min-height: 26px;
+  word-break: break-word;
+}
+.block-todo div:empty::before {
+  content: attr(data-placeholder);
+  color: #9B9A97;
+  pointer-events: none;
+}
+
+/* Toggle */
+.block-toggle {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+}
+.toggle-chevron {
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-primary);
+  font-size: 10px;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-top: 4px;
+  transition: transform 0.2s ease;
+}
+.toggle-chevron.open {
+  transform: rotate(90deg);
+}
+.toggle-chevron:hover {
+  background: var(--bg-hover);
+}
+.block-toggle div {
+  flex: 1;
+  outline: none;
+  font-size: 16px;
+  line-height: 1.6;
+  min-height: 26px;
+  word-break: break-word;
+}
+.block-toggle div:empty::before {
+  content: attr(data-placeholder);
+  color: #9B9A97;
+  pointer-events: none;
+}
+
+/* Quote */
+.block-quote {
+  border-left: 3px solid var(--text-primary);
+  padding: 4px 14px;
+  margin: 4px 0;
+}
+
+/* Code block */
+.block-code {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  margin: 8px 0;
+  overflow: hidden;
+}
+.code-lang-label {
+  padding: 4px 12px;
+  font-size: 12px;
+  color: var(--text-dim);
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border);
+}
+.block-code pre {
+  margin: 0;
+  padding: 12px 16px;
+  overflow-x: auto;
+}
+.block-code code {
+  outline: none;
+  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  display: block;
+  min-height: 28px;
+}
+.block-code code:empty::before {
+  content: 'Type code...';
+  color: #9B9A97;
+}
+
+/* Divider */
+.block-divider {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 8px 0;
+  width: 100%;
+}
+
+/* Callout */
+.block-callout {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 14px 16px;
+  border-radius: 4px;
+  margin: 4px 0;
+}
+.block-callout .callout-icon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+.block-callout div {
+  flex: 1;
+  outline: none;
+  font-size: 16px;
+  line-height: 1.6;
+  min-height: 24px;
+}
+.block-callout div:empty::before {
+  content: attr(data-placeholder);
+  color: #9B9A97;
+  pointer-events: none;
+}
+
+/* Image block */
+.block-image-wrapper {
+  margin: 8px 0;
+}
+.image-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  background: var(--bg-secondary);
+  border: 1px dashed var(--border);
+  border-radius: 4px;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.image-placeholder:hover {
+  background: var(--bg-hover);
+}
+
+/* SLASH COMMAND MENU */
+.slash-menu {
+  position: fixed;
+  z-index: 999;
+  background: var(--bg-modal);
+  border: 1px solid var(--border-light);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+  width: 320px;
+  max-height: 400px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.slash-search {
+  padding: 8px;
+  border-bottom: 1px solid var(--border);
+}
+.slash-search input {
+  width: 100%;
+  padding: 6px 10px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 14px;
+  outline: none;
+}
+.slash-search input:focus {
+  border-color: var(--blue);
+}
+
+.slash-groups {
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.slash-group {
+  padding: 0;
+}
+.slash-group + .slash-group {
+  border-top: 1px solid var(--border);
+}
+
+.slash-group-label {
+  padding: 6px 12px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.slash-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: var(--text-primary);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.1s;
+  border-radius: 0;
+}
+.slash-item:hover,
+.slash-item.selected {
+  background: var(--bg-hover);
+}
+
+.slash-item-icon {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  background: var(--bg-secondary);
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.slash-item-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.slash-item-name {
+  font-weight: 500;
+  font-size: 14px;
+}
+.slash-item-desc {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.slash-item-shortcut {
+  font-size: 12px;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  flex-shrink: 0;
+}
+
+/* FORMAT TOOLBAR (FLOATING) */
+.format-toolbar {
+  position: fixed;
+  z-index: 998;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--bg-modal);
+  border: 1px solid var(--border-light);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+  padding: 4px 6px;
+}
+
+.format-toolbar button {
+  width: 30px;
+  height: 28px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-primary);
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.format-toolbar button:hover {
+  background: var(--bg-hover);
+}
+
+.format-separator {
+  width: 1px;
+  height: 18px;
+  background: var(--border);
+  margin: 0 4px;
+}
+
+/* EDITOR STATUSBAR */
+.editor-statusbar {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: var(--sidebar-width);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 16px;
+  background: var(--bg-primary);
+  border-top: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-dim);
+  z-index: 50;
+  height: 28px;
+}
+.statusbar-right {
+  display: flex;
+  gap: 16px;
+}
+
+/* Inline formatting inside blocks */
+.block-content strong { font-weight: 700; }
+.block-content em { font-style: italic; }
+.block-content code {
+  background: var(--bg-tertiary);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 0.9em;
+  font-family: var(--font-mono);
+  color: var(--pink);
+}
+.block-content s { text-decoration: line-through; }
+.block-content u { text-decoration: underline; }
+.block-content a { color: var(--blue); text-decoration: underline; }
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .page-cover-area { padding: 32px 16px 8px; }
+  .page-title-input { font-size: 28px; }
+  .blocks-container { padding: 8px 16px 96px; }
+  .block-handle { display: none; }
+  .block-actions { display: none; }
+  .editor-statusbar { left: 0; }
+}