diff --git a/kjvstudy_org/routes/misc.py b/kjvstudy_org/routes/misc.py
index 2c87388..ad9ac70 100644
--- a/kjvstudy_org/routes/misc.py
+++ b/kjvstudy_org/routes/misc.py
@@ -231,19 +231,19 @@ async def verse_of_the_day_page(request: Request):
     )
 
 
-@router.get("/bookmarks", response_class=HTMLResponse)
-async def bookmarks_page(request: Request):
-    """Bookmarks page - displays user's saved bookmarks from localStorage"""
+@router.get("/stars", response_class=HTMLResponse)
+async def stars_page(request: Request):
+    """Stars page - displays user's saved starred pages from localStorage"""
     books = bible.get_books()
 
     breadcrumbs = [
         {"text": "Home", "url": "/"},
-        {"text": "Bookmarks", "url": None}
+        {"text": "Stars", "url": None}
     ]
 
     return templates.TemplateResponse(
         request,
-        "bookmarks.html",
+        "stars.html",
         {
             "books": books,
             "breadcrumbs": breadcrumbs
diff --git a/kjvstudy_org/static/base.js b/kjvstudy_org/static/base.js
index 9aa85d1..79a489d 100644
--- a/kjvstudy_org/static/base.js
+++ b/kjvstudy_org/static/base.js
@@ -50,6 +50,49 @@ function isBookmarked(url) {
   return bookmarks.some(function(b) { return b.url === url; });
 }
 
+function getPageExcerpt() {
+  var article = document.querySelector('article');
+  if (!article) return '';
+
+  var clone = article.cloneNode(true);
+  clone.querySelectorAll('.breadcrumb, .breadcrumb-actions, .sidenote, .marginnote, .toc, script, style, nav, button, h1, h2, h3').forEach(function(el) {
+    el.remove();
+  });
+
+  var text = (clone.textContent || clone.innerText || '').trim();
+  // Get first meaningful chunk
+  text = text.replace(/\s+/g, ' ').substring(0, 300);
+  return text;
+}
+
+function getPageDescription() {
+  var meta = document.querySelector('meta[name="description"]');
+  return meta ? meta.getAttribute('content') : '';
+}
+
+function getPageBreadcrumbs() {
+  var breadcrumb = document.querySelector('.breadcrumb');
+  if (!breadcrumb) return [];
+
+  var crumbs = [];
+  breadcrumb.querySelectorAll('a, span:not(.breadcrumb-separator):not(.breadcrumb-actions)').forEach(function(el) {
+    if (el.classList.contains('breadcrumb-actions')) return;
+    if (el.closest('.breadcrumb-actions')) return;
+    var text = el.textContent.trim();
+    if (text && text !== '>' && text.length > 0) {
+      crumbs.push({
+        text: text,
+        url: el.tagName === 'A' ? el.getAttribute('href') : null
+      });
+    }
+  });
+  // Drop the last item (it's the current page title)
+  if (crumbs.length > 0) {
+    crumbs.pop();
+  }
+  return crumbs;
+}
+
 function toggleBookmark() {
   var btn = document.getElementById('bookmark-btn');
   var url = window.location.pathname;
@@ -62,29 +105,117 @@ function toggleBookmark() {
     // Remove bookmark
     bookmarks.splice(existingIndex, 1);
     if (btn) btn.classList.remove('bookmarked');
+    showBookmarkToast(false);
   } else {
-    // Add bookmark
+    // Add bookmark with description, breadcrumbs, and excerpt
     bookmarks.unshift({
       url: url,
       title: title,
+      description: getPageDescription(),
+      breadcrumbs: getPageBreadcrumbs(),
+      excerpt: getPageExcerpt(),
       date: new Date().toISOString()
     });
     if (btn) btn.classList.add('bookmarked');
+    showBookmarkToast(true);
   }
 
   saveBookmarks(bookmarks);
+  updateStarsBadge();
 }
 
-// Check bookmark state on page load
+function showBookmarkToast(added) {
+  var toast = document.getElementById('bookmark-toast');
+  if (!toast) return;
+
+  if (added) {
+    toast.innerHTML = 'Added to <a href="/stars">Starred Pages</a>';
+  } else {
+    toast.innerHTML = 'Removed from Starred Pages';
+  }
+
+  toast.classList.add('show');
+
+  // Hide after 3 seconds
+  setTimeout(function() {
+    toast.classList.remove('show');
+  }, 3000);
+}
+
+// Check bookmark state on page load and update nav badges
 (function() {
   document.addEventListener('DOMContentLoaded', function() {
     var btn = document.getElementById('bookmark-btn');
     if (btn && isBookmarked(window.location.pathname)) {
       btn.classList.add('bookmarked');
     }
+
+    // Update nav badges
+    updateStarsBadge();
+    updateReadingPlansBadge();
   });
 })();
 
+function updateStarsBadge() {
+  var badge = document.getElementById('stars-badge');
+  if (!badge) return;
+
+  var bookmarks = getBookmarks();
+  badge.textContent = bookmarks.length > 0 ? bookmarks.length : '';
+}
+
+// Reading plans progress badge
+function updateReadingPlansBadge() {
+  var badge = document.getElementById('reading-plans-badge');
+  if (!badge) return;
+
+  // Reading plan IDs and their total days
+  var planDays = {
+    'chronological': 365,
+    'one-year': 365,
+    'new-testament': 90,
+    'gospels-acts': 30,
+    'psalms-proverbs': 31,
+    'pentateuch': 40,
+    'prophets': 60,
+    'paul-epistles': 30,
+    'minor-prophets': 14,
+    'wisdom': 30,
+    'historical': 45,
+    'general-epistles': 14
+  };
+
+  var totalCompleted = 0;
+  var totalDays = 0;
+  var activePlans = 0;
+
+  // Check each plan
+  for (var planId in planDays) {
+    var storageKey = 'reading-plan-' + planId;
+    var saved = localStorage.getItem(storageKey);
+    if (saved) {
+      try {
+        var data = JSON.parse(saved);
+        if (data.completed && data.completed.length > 0) {
+          activePlans++;
+          totalCompleted += data.completed.length;
+          totalDays += planDays[planId];
+        }
+      } catch (e) {
+        // Invalid JSON, skip
+      }
+    }
+  }
+
+  if (activePlans === 0 || totalDays === 0) {
+    badge.textContent = '';
+    return;
+  }
+
+  var percent = Math.round((totalCompleted / totalDays) * 100);
+  badge.textContent = percent + '%';
+}
+
 // Page speech toggle (for breadcrumb button) - triggers spacebar speech
 function togglePageSpeech() {
   // Simulate spacebar press to use existing speech system
@@ -900,6 +1031,12 @@ document.addEventListener('keydown', function(e) {
     toggleDarkMode();
   }
 
+  // Cmd/Ctrl + S: Toggle star (overrides browser save)
+  if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+    e.preventDefault();
+    toggleBookmark();
+  }
+
   // Cmd/Ctrl + K or /: Focus search
   if (((e.metaKey || e.ctrlKey) && e.key === 'k') || e.key === '/') {
     e.preventDefault();
@@ -955,7 +1092,7 @@ document.addEventListener('keydown', function(e) {
         break;
       case 's':
         e.preventDefault();
-        window.location.href = '/stories';
+        window.location.href = '/stars';
         break;
       case '/':
         e.preventDefault();
@@ -1160,7 +1297,7 @@ function showKeyboardHelp() {
           '<div class="shortcut"><kbd>8</kbd><span>Proverbs</span></div>' +
           '<div class="shortcut"><kbd>9</kbd><span>Revelation</span></div>' +
           '<div class="shortcut"><kbd>b</kbd><span>Books</span></div>' +
-          '<div class="shortcut"><kbd>s</kbd><span>Stories</span></div>' +
+          '<div class="shortcut"><kbd>s</kbd><span>Stars</span></div>' +
           '<div class="shortcut"><kbd>r</kbd><span>Resources</span></div>' +
           '<div class="shortcut"><kbd>t</kbd><span>Topics</span></div>' +
           '<div class="shortcut"><kbd>p</kbd><span>PDF (when available)</span></div>' +
@@ -1184,6 +1321,7 @@ function showKeyboardHelp() {
           '<div class="shortcut"><kbd>n</kbd><span>Navigate sidebar</span></div>' +
           '<div class="shortcut"><kbd>⌘</kbd>+<kbd>D</kbd><span>Toggle dark mode</span></div>' +
           '<div class="shortcut"><kbd>R</kbd><span>Toggle red letters</span></div>' +
+          '<div class="shortcut"><kbd>⌘</kbd>+<kbd>S</kbd><span>Toggle star</span></div>' +
           '<div class="shortcut"><kbd>/</kbd><span>Search</span></div>' +
           '<div class="shortcut"><kbd>?</kbd><span>Show this help</span></div>' +
           '<div class="shortcut"><kbd>Esc</kbd><span>Close / Clear focus</span></div>' +
diff --git a/kjvstudy_org/templates/accessibility.html b/kjvstudy_org/templates/accessibility.html
index 4233f0b..13effd9 100644
--- a/kjvstudy_org/templates/accessibility.html
+++ b/kjvstudy_org/templates/accessibility.html
@@ -62,6 +62,10 @@
                     <td><kbd>?</kbd></td>
                     <td>Show keyboard shortcuts help</td>
                 </tr>
+                <tr>
+                    <td><kbd>⌘</kbd>+<kbd>S</kbd></td>
+                    <td>Toggle star (bookmark current page)</td>
+                </tr>
             </tbody>
         </table>
 
@@ -120,7 +124,7 @@
                 </tr>
                 <tr>
                     <td><kbd>s</kbd></td>
-                    <td>Stories</td>
+                    <td>Stars (your bookmarks)</td>
                 </tr>
                 <tr>
                     <td><kbd>c</kbd></td>
diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html
index 1ef3cdb..03da132 100644
--- a/kjvstudy_org/templates/base.html
+++ b/kjvstudy_org/templates/base.html
@@ -433,6 +433,44 @@
 
         .breadcrumb-action-btn.bookmark-btn.bookmarked::before {
             content: '★';
+            color: #eab308;
+        }
+
+        .bookmark-toast {
+            position: fixed;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%) translateY(100px);
+            background: var(--text-color);
+            color: var(--bg-color);
+            padding: 0.75rem 1.25rem;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: 1000;
+            pointer-events: none;
+        }
+
+        .bookmark-toast.show {
+            transform: translateX(-50%) translateY(0);
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .bookmark-toast a {
+            color: var(--bg-color) !important;
+            margin-left: 0.5rem;
+            text-decoration: underline;
+            border-bottom: none !important;
+        }
+
+        .bookmark-toast a:hover {
+            opacity: 0.8;
+        }
+
+        [data-theme="dark"] .bookmark-toast a {
+            color: var(--bg-color) !important;
         }
 
         /* Large font size */
@@ -719,6 +757,23 @@
             background: rgba(74, 124, 89, 0.08);
         }
 
+        /* Nav badge for counts */
+        .nav-badge {
+            display: inline-block;
+            font-size: 0.7rem;
+            font-weight: 500;
+            background: var(--code-bg);
+            color: var(--text-secondary);
+            padding: 0.1rem 0.4rem;
+            border-radius: 8px;
+            margin-left: 0.35rem;
+            vertical-align: middle;
+        }
+
+        .nav-badge:empty {
+            display: none;
+        }
+
         /* Sidebar search box */
         .sidebar-search {
             margin-bottom: 1rem;
@@ -1420,6 +1475,8 @@
     </p>
     {% endif %}
 
+    <div class="bookmark-toast" id="bookmark-toast"></div>
+
     <article role="main" id="main-content">
         {% if breadcrumbs %}
         <nav class="breadcrumb" aria-label="Breadcrumb" id="breadcrumb">
@@ -1456,20 +1513,9 @@
         <ul>
             <li><a href="/" {% if request.url.path == "/" %}class="current"{% endif %}>Home</a></li>
             <li><a href="/books" {% if request.url.path == "/books" or request.url.path.startswith("/book/") %}class="current"{% endif %}>Books</a></li>
-            <li><a href="/search">Search</a></li>
         </ul>
 
 
-        <!-- Daily Reading -->
-        <details class="resource-group" open aria-label="Daily reading resources">
-            <summary aria-expanded="true">Daily Reading</summary>
-            <ul>
-                <li><a href="/verse-of-the-day" {% if request.url.path == "/verse-of-the-day" %}class="current"{% endif %}>Verse of the Day</a></li>
-                <li><a href="/random-verse" {% if request.url.path == "/random-verse" %}class="current"{% endif %}>Random Verse</a></li>
-                <li><a href="/reading-plans" {% if request.url.path.startswith("/reading-plans") %}class="current"{% endif %}>Reading Plans</a></li>
-            </ul>
-        </details>
-
         <!-- Study Resources -->
         <details class="resource-group" open aria-label="Study resources">
             <summary aria-expanded="true">Study Resources</summary>
@@ -1478,6 +1524,7 @@
                 <li><a href="/stories" {% if request.url.path.startswith("/stories") %}class="current"{% endif %}>Bible Stories</a></li>
                 <li><a href="/topics" {% if request.url.path.startswith("/topics") %}class="current"{% endif %}>Topics</a></li>
                 <li><a href="/resources" {% if request.url.path == "/resources" or request.url.path.startswith("/biblical-") or request.url.path.startswith("/names-of-") or request.url.path.startswith("/parables") or request.url.path.startswith("/the-twelve-apostles") or request.url.path.startswith("/women-of-the-bible") or request.url.path.startswith("/fruits-of-the-spirit") or request.url.path.startswith("/miracles-of-jesus") or request.url.path.startswith("/prayers-of-the-bible") or request.url.path.startswith("/beatitudes") or request.url.path.startswith("/ten-commandments") or request.url.path.startswith("/armor-of-god") or request.url.path.startswith("/i-am-statements") or request.url.path.startswith("/trinity") or request.url.path.startswith("/christology") or request.url.path.startswith("/soteriology") or request.url.path.startswith("/pneumatology") or request.url.path.startswith("/eschatology") or request.url.path.startswith("/ecclesiology") or request.url.path.startswith("/types-and-shadows") or request.url.path.startswith("/messianic-prophecies") or request.url.path.startswith("/blood-in-scripture") or request.url.path.startswith("/kingdom-of-god") or request.url.path.startswith("/spirits-and-demons") or request.url.path.startswith("/personifications") or request.url.path.startswith("/bibliology") or request.url.path.startswith("/theology-proper") or request.url.path.startswith("/anthropology") or request.url.path.startswith("/hamartiology") or request.url.path.startswith("/providence") or request.url.path.startswith("/grace") or request.url.path.startswith("/justification") or request.url.path.startswith("/sanctification") or request.url.path.startswith("/law-and-gospel") or request.url.path.startswith("/worship") or request.url.path.startswith("/tetragrammaton") %}class="current"{% endif %}>Resources</a></li>
+                <li><a href="/random-verse" {% if request.url.path == "/random-verse" %}class="current"{% endif %}>Random Verse</a></li>
             </ul>
         </details>
 
@@ -1490,6 +1537,15 @@
             </ul>
         </details>
 
+        <!-- Your Library -->
+        <details class="resource-group" open aria-label="Your personal library">
+            <summary aria-expanded="true">Your Library</summary>
+            <ul>
+                <li><a href="/reading-plans" {% if request.url.path.startswith("/reading-plans") %}class="current"{% endif %}>Reading Plans <span class="nav-badge" id="reading-plans-badge"></span></a></li>
+                <li><a href="/stars" {% if request.url.path == "/stars" %}class="current"{% endif %}>Starred Pages <span class="nav-badge" id="stars-badge"></span></a></li>
+            </ul>
+        </details>
+
         <!-- About -->
         <div class="nav-footer">
             <a href="/about" {% if request.url.path == "/about" %}class="current"{% endif %}>About</a>
diff --git a/kjvstudy_org/templates/bookmarks.html b/kjvstudy_org/templates/bookmarks.html
deleted file mode 100644
index cfccfb2..0000000
--- a/kjvstudy_org/templates/bookmarks.html
+++ /dev/null
@@ -1,199 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Bookmarks - KJV Study{% endblock %}
-{% block description %}Your saved bookmarks from KJV Study.{% endblock %}
-
-{% block head %}
-<style>
-.bookmarks-container {
-    max-width: 700px;
-}
-
-.bookmarks-empty {
-    text-align: center;
-    padding: 3rem 1rem;
-    color: var(--text-secondary);
-}
-
-.bookmarks-empty p {
-    margin-bottom: 1rem;
-}
-
-.bookmark-list {
-    list-style: none;
-    padding: 0;
-    margin: 2rem 0;
-}
-
-.bookmark-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1rem;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    margin-bottom: 0.75rem;
-    background: var(--bg-color);
-    transition: all 0.15s;
-}
-
-.bookmark-item:hover {
-    border-color: var(--link-color);
-    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-}
-
-.bookmark-info {
-    flex: 1;
-}
-
-.bookmark-title {
-    font-size: 1.1rem;
-    font-weight: 500;
-    color: var(--text-color);
-    text-decoration: none;
-    border-bottom: none;
-}
-
-.bookmark-title:hover {
-    color: var(--link-color);
-}
-
-.bookmark-date {
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    margin-top: 0.25rem;
-}
-
-.bookmark-remove {
-    background: none;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    padding: 0.4rem 0.8rem;
-    cursor: pointer;
-    color: var(--text-secondary);
-    font-size: 0.85rem;
-    transition: all 0.15s;
-}
-
-.bookmark-remove:hover {
-    border-color: #c41e3a;
-    color: #c41e3a;
-    background: rgba(196, 30, 58, 0.05);
-}
-
-.clear-all-btn {
-    display: inline-block;
-    margin-top: 1rem;
-    padding: 0.5rem 1rem;
-    background: none;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    cursor: pointer;
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-    transition: all 0.15s;
-}
-
-.clear-all-btn:hover {
-    border-color: #c41e3a;
-    color: #c41e3a;
-}
-
-[data-theme="dark"] .bookmark-item {
-    background: #1a1a1a;
-    border-color: #333;
-}
-
-[data-theme="dark"] .bookmark-item:hover {
-    border-color: var(--link-color);
-}
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="bookmarks-container">
-    <h1>Bookmarks</h1>
-
-    <div id="bookmarks-content">
-        <!-- Populated by JavaScript -->
-    </div>
-</div>
-
-<script>
-(function() {
-    function getBookmarks() {
-        try {
-            return JSON.parse(localStorage.getItem('kjvBookmarks') || '[]');
-        } catch (e) {
-            return [];
-        }
-    }
-
-    function saveBookmarks(bookmarks) {
-        localStorage.setItem('kjvBookmarks', JSON.stringify(bookmarks));
-    }
-
-    function formatDate(dateStr) {
-        var date = new Date(dateStr);
-        return date.toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric'
-        });
-    }
-
-    function removeBookmark(url) {
-        var bookmarks = getBookmarks();
-        bookmarks = bookmarks.filter(function(b) { return b.url !== url; });
-        saveBookmarks(bookmarks);
-        renderBookmarks();
-    }
-
-    function clearAllBookmarks() {
-        if (confirm('Remove all bookmarks?')) {
-            localStorage.removeItem('kjvBookmarks');
-            renderBookmarks();
-        }
-    }
-
-    function renderBookmarks() {
-        var container = document.getElementById('bookmarks-content');
-        var bookmarks = getBookmarks();
-
-        if (bookmarks.length === 0) {
-            container.innerHTML =
-                '<div class="bookmarks-empty">' +
-                    '<p>No bookmarks yet.</p>' +
-                    '<p>Click the <strong>☆</strong> button on any page to save it here.</p>' +
-                '</div>';
-            return;
-        }
-
-        var html = '<ul class="bookmark-list">';
-        bookmarks.forEach(function(bookmark) {
-            html += '<li class="bookmark-item">' +
-                '<div class="bookmark-info">' +
-                    '<a href="' + bookmark.url + '" class="bookmark-title">' + bookmark.title + '</a>' +
-                    '<div class="bookmark-date">Saved ' + formatDate(bookmark.date) + '</div>' +
-                '</div>' +
-                '<button class="bookmark-remove" onclick="removeBookmark(\'' + bookmark.url + '\')" title="Remove bookmark">Remove</button>' +
-            '</li>';
-        });
-        html += '</ul>';
-
-        if (bookmarks.length > 1) {
-            html += '<button class="clear-all-btn" onclick="clearAllBookmarks()">Clear all bookmarks</button>';
-        }
-
-        container.innerHTML = html;
-    }
-
-    // Make functions global for onclick handlers
-    window.removeBookmark = removeBookmark;
-    window.clearAllBookmarks = clearAllBookmarks;
-
-    // Initial render
-    renderBookmarks();
-})();
-</script>
-{% endblock %}
diff --git a/kjvstudy_org/templates/stars.html b/kjvstudy_org/templates/stars.html
new file mode 100644
index 0000000..7aacb48
--- /dev/null
+++ b/kjvstudy_org/templates/stars.html
@@ -0,0 +1,1168 @@
+{% extends "base.html" %}
+
+{% block title %}Starred Passages & Pages - KJV Study{% endblock %}
+{% block description %}Your starred passages and pages from KJV Study.{% endblock %}
+
+{% block head %}
+<style>
+.stars-container {
+    max-width: 750px;
+}
+
+/* Header area */
+.stars-header {
+    margin-bottom: 2.5rem;
+}
+
+.stars-header h1 {
+    margin-bottom: 0.5rem;
+}
+
+.stars-subtitle {
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+    margin: 0;
+}
+
+.stars-count {
+    display: inline-block;
+    background: var(--code-bg);
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    padding: 0.2rem 0.6rem;
+    border-radius: 12px;
+    margin-left: 0.75rem;
+    vertical-align: middle;
+}
+
+/* Toolbar */
+.stars-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.stars-sort {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.stars-sort-label {
+    font-size: 0.8rem;
+    color: var(--text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+
+.stars-sort-select {
+    padding: 0.4rem 0.5rem;
+    font-size: 0.85rem;
+    font-family: inherit;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-color);
+    color: var(--text-color);
+    cursor: pointer;
+}
+
+/* Empty state */
+.stars-empty {
+    text-align: center;
+    padding: 4rem 2rem;
+}
+
+.stars-empty-icon {
+    font-size: 3rem;
+    margin-bottom: 1.5rem;
+    opacity: 0.3;
+}
+
+.stars-empty-title {
+    font-size: 1.4rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    color: var(--text-color);
+}
+
+.stars-empty-text {
+    color: var(--text-secondary);
+    line-height: 1.8;
+    margin-bottom: 0.75rem;
+    font-size: 1rem;
+    max-width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.stars-empty-hint {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 1.5rem;
+    padding: 0.75rem 1.25rem;
+    background: var(--code-bg);
+    border-radius: 6px;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
+.stars-empty-hint kbd {
+    display: inline-block;
+    padding: 0.15rem 0.4rem;
+    font-family: inherit;
+    font-size: 0.85rem;
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: 3px;
+}
+
+.stars-cta {
+    margin-top: 2.5rem;
+    padding-top: 2rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.stars-cta-title {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-tertiary);
+    margin-bottom: 0.75rem;
+}
+
+.stars-cta a {
+    font-weight: 500;
+    font-size: 1.05rem;
+}
+
+.stars-cta-desc {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    margin-top: 0.25rem;
+}
+
+.stars-empty-note {
+    font-size: 0.85rem;
+    color: var(--text-tertiary);
+    margin-top: 3rem;
+    max-width: 450px;
+    margin-left: auto;
+    margin-right: auto;
+    line-height: 1.6;
+}
+
+/* Groups */
+.stars-group {
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.stars-group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    background: var(--code-bg);
+    cursor: pointer;
+    user-select: none;
+    transition: background 0.15s;
+}
+
+.stars-group-header:hover {
+    background: var(--border-color);
+}
+
+.stars-group-toggle {
+    font-size: 0.65rem;
+    color: var(--text-tertiary);
+    transition: transform 0.2s ease;
+    margin-right: 0.5rem;
+}
+
+.stars-group.collapsed .stars-group-toggle {
+    transform: rotate(-90deg);
+}
+
+.stars-group-title {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.stars-group-title a {
+    color: var(--text-color);
+    border-bottom: none;
+}
+
+.stars-group-title a:hover {
+    color: var(--link-color);
+}
+
+.stars-group-count {
+    font-size: 0.7rem;
+    color: var(--text-tertiary);
+    font-weight: 400;
+    background: var(--bg-color);
+    padding: 0.15rem 0.5rem;
+    border-radius: 10px;
+}
+
+.stars-group-content {
+    padding: 0.5rem 0;
+}
+
+.stars-group.collapsed .stars-group-content {
+    display: none;
+}
+
+.stars-crumb-sep {
+    color: var(--text-tertiary);
+    margin: 0 0.35rem;
+    font-weight: 400;
+}
+
+/* List */
+.stars-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.stars-item {
+    position: relative;
+    margin-bottom: 2px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    background: transparent;
+}
+
+.stars-item:hover {
+    background: var(--code-bg);
+}
+
+.stars-item.expanded {
+    background: var(--code-bg);
+    margin-bottom: 0.75rem;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+}
+
+/* Item header */
+.stars-item-header {
+    display: flex;
+    align-items: flex-start;
+    padding: 0.875rem 1rem;
+    cursor: pointer;
+    gap: 0.75rem;
+}
+
+.stars-item-star {
+    color: #eab308;
+    font-size: 0.9rem;
+    flex-shrink: 0;
+}
+
+.stars-item-toggle {
+    color: var(--text-tertiary);
+    font-size: 0.55rem;
+    transition: transform 0.2s ease;
+    flex-shrink: 0;
+    margin-left: auto;
+    align-self: center;
+}
+
+.stars-item.expanded .stars-item-toggle {
+    transform: rotate(90deg);
+}
+
+.stars-item-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.stars-item-title {
+    font-size: 1.05rem;
+    font-weight: 600;
+    line-height: 1.4;
+    margin-bottom: 0.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.stars-item-title-text {
+    color: var(--text-color);
+    cursor: pointer;
+    transition: color 0.15s;
+}
+
+.stars-item-title-text:hover {
+    color: var(--link-color);
+}
+
+a.stars-item-title-link,
+a.stars-item-title-link:visited,
+a.stars-item-title-link:link {
+    font-size: 0.9rem;
+    font-weight: 400;
+    color: #eab308 !important;
+    text-decoration: none !important;
+    border-bottom: none !important;
+}
+
+a.stars-item-title-link:hover {
+    color: #facc15 !important;
+    text-decoration: none !important;
+    border-bottom: none !important;
+}
+
+[data-theme="dark"] a.stars-item-title-link,
+[data-theme="dark"] a.stars-item-title-link:visited,
+[data-theme="dark"] a.stars-item-title-link:link {
+    color: #fbbf24 !important;
+}
+
+[data-theme="dark"] a.stars-item-title-link:hover {
+    color: #fcd34d !important;
+}
+
+.stars-item-preview {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    font-style: italic;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.stars-item-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.stars-item-date {
+    display: inline-block;
+    font-size: 0.7rem;
+    color: var(--text-tertiary);
+    background: var(--code-bg);
+    padding: 0 0.35rem;
+    border-radius: 6px;
+    line-height: 1.4;
+}
+
+.stars-item-note-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.65rem;
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    color: #92600f;
+    background: #fef3c7;
+    padding: 0 0.35rem;
+    border-radius: 6px;
+    line-height: 1.4;
+}
+
+[data-theme="dark"] .stars-item-note-indicator {
+    color: #fbbf24;
+    background: rgba(251, 191, 36, 0.15);
+}
+
+/* Item actions */
+.stars-item-actions {
+    display: flex;
+    gap: 0.25rem;
+    opacity: 0;
+    transition: opacity 0.15s;
+    flex-shrink: 0;
+}
+
+.stars-item:hover .stars-item-actions,
+.stars-item.expanded .stars-item-actions {
+    opacity: 1;
+}
+
+.stars-action-btn {
+    font-size: 0.8rem;
+    color: var(--text-tertiary);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.35rem 0.6rem;
+    border-radius: 4px;
+    transition: all 0.15s;
+}
+
+.stars-action-btn:hover {
+    color: var(--text-color);
+    background: var(--border-color);
+}
+
+.stars-action-btn.danger:hover {
+    color: #c53030;
+    background: #fed7d7;
+}
+
+[data-theme="dark"] .stars-action-btn.danger:hover {
+    color: #fc8181;
+    background: rgba(252, 129, 129, 0.15);
+}
+
+/* Expanded detail */
+.stars-item-detail {
+    display: none;
+    padding: 0 1rem 1rem 1rem;
+}
+
+.stars-item.expanded .stars-item-detail {
+    display: block;
+}
+
+.stars-detail-section {
+    margin-bottom: 1rem;
+}
+
+.stars-detail-label {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-tertiary);
+    margin-bottom: 0.4rem;
+    font-weight: 500;
+}
+
+.stars-description {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    line-height: 1.7;
+}
+
+.stars-excerpt {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    line-height: 1.7;
+    font-style: italic;
+    border-left: 2px solid var(--border-color);
+    padding-left: 1rem;
+}
+
+/* Notes */
+.stars-note-display {
+    font-size: 0.85rem;
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    line-height: 1.6;
+    color: var(--text-secondary);
+    max-width: 650px;
+    white-space: pre-wrap;
+    margin-bottom: 0.5rem;
+}
+
+.stars-note-add,
+.stars-note-edit {
+    font-size: 0.8rem;
+    color: var(--text-tertiary);
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.stars-note-add:hover,
+.stars-note-edit:hover {
+    color: var(--link-color);
+}
+
+.stars-note {
+    width: 100%;
+    max-width: 650px;
+    min-height: 80px;
+    padding: 0.75rem;
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    font-size: 0.85rem;
+    line-height: 1.6;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--bg-color);
+    color: var(--text-color);
+    resize: vertical;
+    transition: border-color 0.15s, box-shadow 0.15s;
+    display: none;
+}
+
+.stars-note.editing {
+    display: block;
+}
+
+.stars-note:focus {
+    outline: none;
+    border-color: var(--border-color-darker);
+    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
+}
+
+.stars-note::placeholder {
+    color: var(--text-tertiary);
+}
+
+.stars-note-saved {
+    font-size: 0.75rem;
+    color: var(--text-tertiary);
+    margin-top: 0.35rem;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.stars-note-saved.visible {
+    opacity: 1;
+}
+
+/* Detail actions */
+.stars-detail-actions {
+    display: flex;
+    gap: 0.75rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.stars-detail-btn {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    background: none;
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    transition: all 0.15s;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.stars-detail-btn:hover {
+    border-color: var(--border-color-darker);
+    color: var(--text-color);
+}
+
+/* Footer */
+.stars-footer {
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.stars-footer-info {
+    font-size: 0.85rem;
+    color: var(--text-tertiary);
+}
+
+.stars-clear-btn {
+    font-size: 0.85rem;
+    color: var(--text-tertiary);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.4rem 0.75rem;
+    border-radius: 4px;
+    transition: all 0.15s;
+}
+
+.stars-clear-btn:hover {
+    color: #c53030;
+    background: #fed7d7;
+}
+
+[data-theme="dark"] .stars-clear-btn:hover {
+    color: #fc8181;
+    background: rgba(252, 129, 129, 0.15);
+}
+
+/* No results */
+.stars-no-results {
+    text-align: center;
+    padding: 3rem 2rem;
+    color: var(--text-secondary);
+}
+
+.stars-no-results-icon {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+    opacity: 0.3;
+}
+
+/* Keyboard shortcut hints */
+kbd {
+    display: inline-block;
+    padding: 0.15rem 0.4rem;
+    font-family: inherit;
+    font-size: 0.8em;
+    background: var(--code-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 3px;
+    box-shadow: 0 1px 0 var(--border-color);
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="stars-container">
+    <div class="stars-header">
+        <h1>Starred Passages & Pages<span class="stars-count" id="stars-count"></span></h1>
+        <p class="stars-subtitle">Your personal collection of Scripture and study resources</p>
+    </div>
+
+    <div id="stars-content">
+        <!-- Populated by JavaScript -->
+    </div>
+</div>
+
+<script>
+(function() {
+    var currentSearch = '';
+    var currentSort = 'recent';
+
+    function getBookmarks() {
+        try {
+            return JSON.parse(localStorage.getItem('kjvBookmarks') || '[]');
+        } catch (e) {
+            return [];
+        }
+    }
+
+    function saveBookmarks(bookmarks) {
+        localStorage.setItem('kjvBookmarks', JSON.stringify(bookmarks));
+    }
+
+    function formatDate(dateStr) {
+        var date = new Date(dateStr);
+        var now = new Date();
+        var diffMs = now - date;
+        var diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+        if (diffDays === 0) return 'Today';
+        if (diffDays === 1) return 'Yesterday';
+        if (diffDays < 7) return diffDays + ' days ago';
+        if (diffDays < 30) return Math.floor(diffDays / 7) + ' week' + (Math.floor(diffDays / 7) > 1 ? 's' : '') + ' ago';
+
+        var options = { month: 'short', day: 'numeric' };
+        if (date.getFullYear() !== now.getFullYear()) {
+            options.year = 'numeric';
+        }
+        return date.toLocaleDateString('en-US', options);
+    }
+
+    function escapeHtml(text) {
+        var div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    function removeBookmark(url, e) {
+        if (e) e.stopPropagation();
+        var bookmarks = getBookmarks();
+        bookmarks = bookmarks.filter(function(b) { return b.url !== url; });
+        saveBookmarks(bookmarks);
+        renderBookmarks();
+    }
+
+    function updateNote(url, note) {
+        var bookmarks = getBookmarks();
+        var bookmark = bookmarks.find(function(b) { return b.url === url; });
+        if (bookmark) {
+            bookmark.note = note;
+            saveBookmarks(bookmarks);
+        }
+    }
+
+    function editNote(url) {
+        var item = document.querySelector('[data-url="' + url + '"]');
+        if (!item) return;
+
+        var display = item.querySelector('.stars-note-display');
+        var addLink = item.querySelector('.stars-note-add');
+        var editLink = item.querySelector('.stars-note-edit');
+        var textarea = item.querySelector('.stars-note');
+
+        if (display) display.style.display = 'none';
+        if (addLink) addLink.style.display = 'none';
+        if (editLink) editLink.style.display = 'none';
+        if (textarea) {
+            textarea.classList.add('editing');
+            textarea.focus();
+        }
+    }
+
+    function saveAndCloseNote(url, note) {
+        updateNote(url, note);
+        // Re-render to show updated state, keeping this item expanded
+        var expandedUrl = url;
+        renderBookmarks();
+        // Re-expand the item
+        var item = document.querySelector('[data-url="' + expandedUrl + '"]');
+        if (item) {
+            item.classList.add('expanded');
+        }
+        // Show toast
+        showNoteSavedToast();
+    }
+
+    function showNoteSavedToast() {
+        var toast = document.getElementById('bookmark-toast');
+        if (!toast) return;
+
+        toast.innerHTML = 'Note saved';
+        toast.classList.add('show');
+
+        setTimeout(function() {
+            toast.classList.remove('show');
+        }, 2000);
+    }
+
+    function clearAllBookmarks() {
+        if (confirm('Remove all starred pages? This cannot be undone.')) {
+            localStorage.removeItem('kjvBookmarks');
+            renderBookmarks();
+        }
+    }
+
+    function toggleItem(url) {
+        var item = document.querySelector('[data-url="' + url + '"]');
+        if (item) {
+            var wasExpanded = item.classList.contains('expanded');
+            // Close others
+            document.querySelectorAll('.stars-item.expanded').forEach(function(el) {
+                el.classList.remove('expanded');
+            });
+            // Toggle this one
+            if (!wasExpanded) {
+                item.classList.add('expanded');
+            }
+        }
+    }
+
+    function copyLink(url, e) {
+        if (e) e.stopPropagation();
+        var fullUrl = window.location.origin + url;
+        navigator.clipboard.writeText(fullUrl).then(function() {
+            // Could show a toast here
+        });
+    }
+
+    function getCollapsedGroups() {
+        try {
+            return JSON.parse(localStorage.getItem('kjvStarsCollapsed') || '[]');
+        } catch (e) {
+            return [];
+        }
+    }
+
+    function saveCollapsedGroups(collapsed) {
+        localStorage.setItem('kjvStarsCollapsed', JSON.stringify(collapsed));
+    }
+
+    function toggleGroup(groupId) {
+        var group = document.getElementById(groupId);
+        if (!group) return;
+
+        var collapsed = getCollapsedGroups();
+        var groupKey = group.querySelector('.stars-group-title').textContent.trim();
+
+        if (group.classList.contains('collapsed')) {
+            group.classList.remove('collapsed');
+            collapsed = collapsed.filter(function(k) { return k !== groupKey; });
+        } else {
+            group.classList.add('collapsed');
+            if (collapsed.indexOf(groupKey) === -1) {
+                collapsed.push(groupKey);
+            }
+        }
+        saveCollapsedGroups(collapsed);
+    }
+
+    function restoreCollapsedGroups() {
+        var collapsed = getCollapsedGroups();
+        document.querySelectorAll('.stars-group').forEach(function(group) {
+            var title = group.querySelector('.stars-group-title');
+            if (title) {
+                var groupKey = title.textContent.trim();
+                if (collapsed.indexOf(groupKey) !== -1) {
+                    group.classList.add('collapsed');
+                }
+            }
+        });
+    }
+
+    function handleSearch(query) {
+        currentSearch = query.toLowerCase().trim();
+        renderBookmarks();
+    }
+
+    function handleSort(sort) {
+        currentSort = sort;
+        renderBookmarks();
+    }
+
+    function handleGlobalNoteKeydown(e) {
+        if (e.key === 'Enter') {
+            var input = e.target;
+            var note = input.value.trim();
+            if (note) {
+                addGlobalNote(note);
+                input.value = '';
+            }
+        }
+    }
+
+    function addGlobalNote(note) {
+        var notes = getGlobalNotes();
+        notes.unshift({
+            text: note,
+            date: new Date().toISOString()
+        });
+        saveGlobalNotes(notes);
+        renderBookmarks();
+    }
+
+    function getGlobalNotes() {
+        try {
+            return JSON.parse(localStorage.getItem('kjvStarsNotes') || '[]');
+        } catch (e) {
+            return [];
+        }
+    }
+
+    function saveGlobalNotes(notes) {
+        localStorage.setItem('kjvStarsNotes', JSON.stringify(notes));
+    }
+
+    function removeGlobalNote(index) {
+        var notes = getGlobalNotes();
+        notes.splice(index, 1);
+        saveGlobalNotes(notes);
+        renderBookmarks();
+    }
+
+    function getGroupBreadcrumbs(breadcrumbs) {
+        if (!breadcrumbs || breadcrumbs.length === 0) return [];
+        if (breadcrumbs.length <= 1) return breadcrumbs;
+        return breadcrumbs.slice(0, -1);
+    }
+
+    function getBreadcrumbKey(breadcrumbs) {
+        var groupCrumbs = getGroupBreadcrumbs(breadcrumbs);
+        if (groupCrumbs.length === 0) return '';
+        return groupCrumbs.map(function(c) { return c.text; }).join(' > ');
+    }
+
+    function renderBreadcrumbPath(breadcrumbs) {
+        if (!breadcrumbs || breadcrumbs.length === 0) return 'Other';
+        var filtered = breadcrumbs.filter(function(c) { return c.text !== 'Home'; });
+        if (filtered.length === 0) return 'Other';
+        var html = '';
+        filtered.forEach(function(crumb, i) {
+            if (i > 0) html += '<span class="stars-crumb-sep">/</span>';
+            if (crumb.url) {
+                html += '<a href="' + crumb.url + '">' + escapeHtml(crumb.text) + '</a>';
+            } else {
+                html += escapeHtml(crumb.text);
+            }
+        });
+        return html;
+    }
+
+    function filterBookmarks(bookmarks) {
+        if (!currentSearch) return bookmarks;
+        return bookmarks.filter(function(b) {
+            var searchStr = (b.title + ' ' + (b.description || '') + ' ' + (b.note || '')).toLowerCase();
+            return searchStr.indexOf(currentSearch) !== -1;
+        });
+    }
+
+    function sortBookmarks(bookmarks) {
+        var sorted = bookmarks.slice();
+        if (currentSort === 'recent') {
+            sorted.sort(function(a, b) { return new Date(b.date) - new Date(a.date); });
+        } else if (currentSort === 'oldest') {
+            sorted.sort(function(a, b) { return new Date(a.date) - new Date(b.date); });
+        } else if (currentSort === 'alpha') {
+            sorted.sort(function(a, b) { return a.title.localeCompare(b.title); });
+        }
+        return sorted;
+    }
+
+    function renderBookmarks() {
+        var container = document.getElementById('stars-content');
+        var countEl = document.getElementById('stars-count');
+        var allBookmarks = getBookmarks();
+
+        // Update count
+        if (countEl) {
+            countEl.textContent = allBookmarks.length;
+        }
+
+        if (allBookmarks.length === 0) {
+            container.innerHTML =
+                '<div class="stars-empty">' +
+                    '<div class="stars-empty-icon">★</div>' +
+                    '<p class="stars-empty-title">Start building your collection</p>' +
+                    '<p class="stars-empty-text">Star passages and pages as you study to create your own personal library of Scripture and resources.</p>' +
+                    '<div class="stars-empty-hint">' +
+                        'Press <kbd>⌘</kbd><kbd>S</kbd> or click ☆ to star any page' +
+                    '</div>' +
+                    '<div class="stars-cta">' +
+                        '<div class="stars-cta-title">Suggested starting point</div>' +
+                        '<a href="/book/1 Corinthians/chapter/13">1 Corinthians 13</a>' +
+                        '<p class="stars-cta-desc">The beloved chapter on the nature and supremacy of love</p>' +
+                    '</div>' +
+                    '<p class="stars-empty-note">Your starred pages are stored in this browser only. They won\'t sync across devices, and clearing browser data will remove them.</p>' +
+                '</div>';
+            return;
+        }
+
+        // Apply filters and sorting
+        var bookmarks = filterBookmarks(allBookmarks);
+        bookmarks = sortBookmarks(bookmarks);
+
+        var html = '';
+
+        // Toolbar - sort only
+        html += '<div class="stars-toolbar">';
+        html += '<div class="stars-sort">';
+        html += '<span class="stars-sort-label">Sort</span>';
+        html += '<select class="stars-sort-select" onchange="handleSort(this.value)">';
+        html += '<option value="recent"' + (currentSort === 'recent' ? ' selected' : '') + '>Recent</option>';
+        html += '<option value="oldest"' + (currentSort === 'oldest' ? ' selected' : '') + '>Oldest</option>';
+        html += '<option value="alpha"' + (currentSort === 'alpha' ? ' selected' : '') + '>A-Z</option>';
+        html += '</select>';
+        html += '</div>';
+        html += '</div>';
+
+        if (bookmarks.length === 0) {
+            html += '<div class="stars-no-results">';
+            html += '<div class="stars-no-results-icon">⌕</div>';
+            html += '<p>No starred pages match your search</p>';
+            html += '</div>';
+            container.innerHTML = html;
+            return;
+        }
+
+        // Group bookmarks
+        var groups = {};
+        var groupOrder = [];
+        bookmarks.forEach(function(bookmark) {
+            var key = getBreadcrumbKey(bookmark.breadcrumbs);
+            if (!groups[key]) {
+                groups[key] = {
+                    breadcrumbs: getGroupBreadcrumbs(bookmark.breadcrumbs),
+                    items: []
+                };
+                groupOrder.push(key);
+            }
+            groups[key].items.push(bookmark);
+        });
+
+        groupOrder.forEach(function(key, groupIndex) {
+            var group = groups[key];
+            var groupId = 'stars-group-' + groupIndex;
+            html += '<div class="stars-group" id="' + groupId + '">';
+            html += '<div class="stars-group-header" onclick="toggleGroup(\'' + groupId + '\')">';
+            html += '<h3 class="stars-group-title"><span class="stars-group-toggle">▼</span>' + renderBreadcrumbPath(group.breadcrumbs) + '</h3>';
+            html += '<span class="stars-group-count">' + group.items.length + '</span>';
+            html += '</div>';
+            html += '<div class="stars-group-content">';
+            html += '<ul class="stars-list">';
+
+            group.items.forEach(function(bookmark) {
+                var safeUrl = bookmark.url.replace(/'/g, "\\'");
+                var preview = bookmark.description || bookmark.excerpt || '';
+                if (preview.length > 120) preview = preview.substring(0, 120) + '...';
+
+                html += '<li class="stars-item" data-url="' + escapeHtml(bookmark.url) + '">';
+
+                // Header
+                html += '<div class="stars-item-header" onclick="toggleItem(\'' + safeUrl + '\')">';
+                html += '<div class="stars-item-content">';
+                html += '<div class="stars-item-title"><span class="stars-item-title-text" onclick="event.stopPropagation(); window.location.href=\'' + safeUrl + '\'">' + escapeHtml(bookmark.title) + '</span><a href="' + bookmark.url + '" class="stars-item-title-link" onclick="event.stopPropagation()">⤴</a></div>';
+                html += '<div class="stars-item-meta">';
+                html += '<span class="stars-item-date">' + formatDate(bookmark.date) + '</span>';
+                if (bookmark.note) {
+                    html += '<span class="stars-item-note-indicator">has notes</span>';
+                }
+                html += '</div>';
+                html += '</div>';
+                html += '<span class="stars-item-actions">';
+                html += '<button class="stars-action-btn" onclick="copyLink(\'' + safeUrl + '\', event)" title="Copy link">copy url</button>';
+                html += '</span>';
+                html += '<span class="stars-item-toggle">▶</span>';
+                html += '</div>';
+
+                // Detail
+                html += '<div class="stars-item-detail">';
+
+                if (bookmark.description) {
+                    html += '<div class="stars-detail-section">';
+                    html += '<div class="stars-detail-label">Description</div>';
+                    html += '<div class="stars-description">' + escapeHtml(bookmark.description) + '</div>';
+                    html += '</div>';
+                }
+
+                if (bookmark.excerpt && bookmark.excerpt !== bookmark.description) {
+                    html += '<div class="stars-detail-section">';
+                    html += '<div class="stars-detail-label">Excerpt</div>';
+                    html += '<div class="stars-excerpt">' + escapeHtml(bookmark.excerpt.substring(0, 300)) + (bookmark.excerpt.length > 300 ? '...' : '') + '</div>';
+                    html += '</div>';
+                }
+
+                html += '<div class="stars-detail-section">';
+                html += '<div class="stars-detail-label">Your Notes</div>';
+                if (bookmark.note) {
+                    html += '<div class="stars-note-display">' + escapeHtml(bookmark.note) + '</div>';
+                    html += '<span class="stars-note-edit" onclick="event.stopPropagation(); editNote(\'' + safeUrl + '\')">[edit note]</span>';
+                } else {
+                    html += '<span class="stars-note-add" onclick="event.stopPropagation(); editNote(\'' + safeUrl + '\')">[add note]</span>';
+                }
+                html += '<textarea class="stars-note" data-note-url="' + escapeHtml(bookmark.url) + '" placeholder="Add your thoughts, reflections, or study notes..." onblur="saveAndCloseNote(\'' + safeUrl + '\', this.value)" onclick="event.stopPropagation()">' + escapeHtml(bookmark.note || '') + '</textarea>';
+                html += '<div class="stars-note-saved"></div>';
+                html += '</div>';
+
+                // Actions in detail
+                html += '<div class="stars-detail-section">';
+                html += '<button class="stars-action-btn danger" onclick="removeBookmark(\'' + safeUrl + '\', event)" title="Remove">remove star</button>';
+                html += '</div>';
+
+                html += '</div>';
+                html += '</li>';
+            });
+
+            html += '</ul>';
+            html += '</div>'; // stars-group-content
+            html += '</div>'; // stars-group
+        });
+
+        // Footer
+        html += '<div class="stars-footer">';
+        html += '<span class="stars-footer-info">' + allBookmarks.length + ' starred page' + (allBookmarks.length !== 1 ? 's' : '') + '</span>';
+        html += '<button class="stars-clear-btn" onclick="clearAllBookmarks()">Clear all stars</button>';
+        html += '</div>';
+
+        container.innerHTML = html;
+
+        // Restore collapsed state
+        restoreCollapsedGroups();
+    }
+
+    // Make functions global
+    window.removeBookmark = removeBookmark;
+    window.clearAllBookmarks = clearAllBookmarks;
+    window.toggleItem = toggleItem;
+    window.updateNote = updateNote;
+    window.editNote = editNote;
+    window.saveAndCloseNote = saveAndCloseNote;
+    window.handleSort = handleSort;
+    window.copyLink = copyLink;
+    window.toggleGroup = toggleGroup;
+
+    // Initial render
+    renderBookmarks();
+
+    // Keyboard navigation
+    var selectedIndex = -1;
+
+    function getItems() {
+        return Array.from(document.querySelectorAll('.stars-item'));
+    }
+
+    function clearSelection() {
+        getItems().forEach(function(item) {
+            item.style.outline = '';
+            item.style.outlineOffset = '';
+        });
+    }
+
+    function selectItem(index) {
+        var items = getItems();
+        if (items.length === 0) return;
+
+        clearSelection();
+        selectedIndex = Math.max(0, Math.min(index, items.length - 1));
+        items[selectedIndex].style.outline = '2px solid #4a7c59';
+        items[selectedIndex].style.outlineOffset = '4px';
+
+        // Only scroll if item is out of view
+        var rect = items[selectedIndex].getBoundingClientRect();
+        if (rect.top < 0 || rect.bottom > window.innerHeight) {
+            items[selectedIndex].scrollIntoView({ behavior: 'auto', block: 'nearest' });
+        }
+    }
+
+    document.addEventListener('keydown', function(e) {
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+        if (window.KJVNav && window.KJVNav.sidebarActive) return;
+
+        var items = getItems();
+        if (items.length === 0) return;
+
+        if (e.key === 'ArrowDown' || e.key === 'j') {
+            e.preventDefault();
+            selectItem(selectedIndex < 0 ? 0 : selectedIndex + 1);
+        } else if (e.key === 'ArrowUp' || e.key === 'k') {
+            e.preventDefault();
+            selectItem(selectedIndex <= 0 ? 0 : selectedIndex - 1);
+        } else if (e.key === 'ArrowLeft' || e.key === 'h') {
+            e.preventDefault();
+            history.back();
+        } else if (e.key === 'ArrowRight' || e.key === 'l') {
+            // Expand selected item
+            if (selectedIndex >= 0 && items[selectedIndex]) {
+                var url = items[selectedIndex].getAttribute('data-url');
+                if (url) toggleItem(url);
+            }
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            if (selectedIndex >= 0 && items[selectedIndex]) {
+                var link = items[selectedIndex].querySelector('.stars-item-title-link');
+                if (link) window.location.href = link.href;
+            }
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            clearSelection();
+            selectedIndex = -1;
+            // Also collapse any expanded items
+            document.querySelectorAll('.stars-item.expanded').forEach(function(item) {
+                item.classList.remove('expanded');
+            });
+        } else if (e.key === 'x' || e.key === 'Delete' || e.key === 'Backspace') {
+            // Remove selected item
+            if (selectedIndex >= 0 && items[selectedIndex]) {
+                e.preventDefault();
+                var url = items[selectedIndex].getAttribute('data-url');
+                if (url) {
+                    removeBookmark(url);
+                    // Adjust selection after removal
+                    items = getItems();
+                    if (items.length > 0) {
+                        selectedIndex = Math.min(selectedIndex, items.length - 1);
+                        selectItem(selectedIndex);
+                    } else {
+                        selectedIndex = -1;
+                    }
+                }
+            }
+        }
+    });
+})();
+</script>
+{% endblock %}