diff --git a/internal/handlers/collections.go b/internal/handlers/collections.go
index dee8431f..9523b8e9 100644
--- a/internal/handlers/collections.go
+++ b/internal/handlers/collections.go
@@ -5,6 +5,7 @@ import (
 	"bookhoard/internal/services"
 	wsync "bookhoard/internal/sync"
 	"bookhoard/internal/utils"
+	"context"
 	"encoding/json"
 	"errors"
 	"fmt"
@@ -77,6 +78,40 @@ type BookInfo struct {
 	HasConflict    bool   `json:"has_conflict"`
 	// Media-type identifier for card badges/hover icons (A2c)
 	FormatGroup string `json:"format_group"`
+	// Resolved cover-badge glyph: "audiobook" | "comic" | "manga" | "".
+	// comic vs manga rides the LIBRARY type (format_group only knows
+	// comic_archive — manga_type is unreliable across sources).
+	Badge string `json:"badge"`
+}
+
+// LibraryTypeMap builds libraryID→library-type-name for badge resolution
+// (one small query per request; libraries are few).
+func LibraryTypeMap(ctx context.Context, db *database.Queries) map[string]string {
+	m := map[string]string{}
+	libs, err := db.ListLibraries(ctx)
+	if err != nil {
+		return m
+	}
+	for _, l := range libs {
+		if l.ID.Valid {
+			m[uuid.UUID(l.ID.Bytes).String()] = l.TypeName
+		}
+	}
+	return m
+}
+
+// MediaBadgeKind resolves the badge glyph per media type from the row's
+// format group and its library's type name.
+func MediaBadgeKind(formatGroup, libraryTypeName string) string {
+	switch {
+	case formatGroup == "audiobook":
+		return "audiobook"
+	case formatGroup == "comic_archive" && libraryTypeName == "manga":
+		return "manga"
+	case formatGroup == "comic_archive":
+		return "comic"
+	}
+	return ""
 }
 
 type SectionData struct {
@@ -280,12 +315,14 @@ func (h *CollectionHandler) GetCollection(c *echo.Context) error {
 		bookList = make([]BookInfo, 0, len(matches))
 		for _, item := range matches {
 			itemUUID, _ := uuid.FromBytes(item.ID.Bytes[0:16])
+			libTypes := LibraryTypeMap(c.Request().Context(), h.db)
 			bookList = append(bookList, BookInfo{
 				MediaItemID:    itemUUID.String(),
 				Title:          item.Title,
 				Author:         textToString(item.Author),
 				CoverImagePath: utils.ResolveMediaURL(item.LibraryID, item.CoverImagePath),
 				FormatGroup:    item.FormatGroup,
+				Badge:          MediaBadgeKind(item.FormatGroup, libTypes[uuid.UUID(item.LibraryID.Bytes).String()]),
 			})
 		}
 	} else if collection.IsSystemCollection.Bool && collection.QueryType.Valid && collection.QueryType.String != "" && collection.QueryType.String != "filter" {
@@ -328,6 +365,7 @@ func (h *CollectionHandler) GetCollection(c *echo.Context) error {
 					validItems = append(validItems, item)
 				}
 			}
+			libTypes := LibraryTypeMap(c.Request().Context(), h.db)
 			bookCards := make([]BookInfo, len(validItems))
 			for i, item := range validItems {
 				itemUUID, _ := uuid.FromBytes(item.ID.Bytes[0:16])
@@ -337,6 +375,7 @@ func (h *CollectionHandler) GetCollection(c *echo.Context) error {
 					Author:         textToString(item.Author),
 					CoverImagePath: utils.ResolveMediaURL(item.LibraryID, item.CoverImagePath),
 					FormatGroup:    item.FormatGroup,
+					Badge:          MediaBadgeKind(item.FormatGroup, libTypes[uuid.UUID(item.LibraryID.Bytes).String()]),
 				}
 			}
 			bookList = bookCards
@@ -348,12 +387,14 @@ func (h *CollectionHandler) GetCollection(c *echo.Context) error {
 		}
 		bookList = make([]BookInfo, 0, len(books))
 		for _, book := range books {
+			libTypes := LibraryTypeMap(c.Request().Context(), h.db)
 			bookList = append(bookList, BookInfo{
 				MediaItemID:    uuid.UUID(book.MediaItemID.Bytes).String(),
 				Title:          book.Title,
 				Author:         textToString(book.Author),
 				CoverImagePath: utils.ResolveMediaURL(book.LibraryID, book.CoverImagePath),
 				FormatGroup:    book.FormatGroup,
+				Badge:          MediaBadgeKind(book.FormatGroup, libTypes[uuid.UUID(book.LibraryID.Bytes).String()]),
 			})
 		}
 	}
diff --git a/internal/handlers/dashboard.go b/internal/handlers/dashboard.go
index f361cb2f..81610b2f 100644
--- a/internal/handlers/dashboard.go
+++ b/internal/handlers/dashboard.go
@@ -73,8 +73,9 @@ func (h *DashboardHandler) GetSections(c *echo.Context) error {
 			}
 		}
 	}
+	libTypes := LibraryTypeMap(c.Request().Context(), h.db)
 
-	sectionData := BuildSections(sections, libraryID, libraryType)
+	sectionData := BuildSections(sections, libraryID, libraryType, libTypes)
 	sectionData = MarkActiveConflictsSections(c.Request().Context(), h.db, user.ID, sectionData)
 
 	return c.JSON(http.StatusOK, map[string]interface{}{"sections": sectionData})
@@ -182,7 +183,7 @@ func (h *DashboardHandler) RestoreSystemCollection(c *echo.Context) error {
 // active library is audiobooks, system-collection titles/descriptions
 // swap to the listening wording at display time — the stored names stay
 // generic so restores and settings keep working across library types.
-func BuildSections(sections []services.DashboardSection, currentLibraryID, libraryType string) []SectionData {
+func BuildSections(sections []services.DashboardSection, currentLibraryID, libraryType string, libTypes map[string]string) []SectionData {
 	var result []SectionData
 
 	audioScope := libraryType == "audiobooks"
@@ -208,6 +209,7 @@ func BuildSections(sections []services.DashboardSection, currentLibraryID, libra
 				Author:         textToString(item.Author),
 				CoverImagePath: utils.ResolveMediaURL(item.LibraryID, item.CoverImagePath),
 				FormatGroup:    item.FormatGroup,
+				Badge:          MediaBadgeKind(item.FormatGroup, libTypes[uuid.UUID(item.LibraryID.Bytes).String()]),
 			}
 		}
 
diff --git a/internal/handlers/series.go b/internal/handlers/series.go
index 0b820480..18a36dec 100644
--- a/internal/handlers/series.go
+++ b/internal/handlers/series.go
@@ -15,11 +15,13 @@ import (
 
 type SeriesHandler struct {
 	seriesService *services.SeriesService
+	db            *database.Queries
 }
 
 func NewSeriesHandler(db *database.Queries) *SeriesHandler {
 	return &SeriesHandler{
 		seriesService: services.NewSeriesService(db),
+		db:            db,
 	}
 }
 
@@ -154,12 +156,15 @@ func (h *SeriesHandler) GetSeriesBooks(c *echo.Context) error {
 	bookCards := make([]BookInfo, 0, len(books))
 	for _, item := range books {
 		itemUUID, _ := uuid.FromBytes(item.ID.Bytes[0:16])
+		libTypes := LibraryTypeMap(c.Request().Context(), h.db)
+		_ = libTypes
 		bookCards = append(bookCards, BookInfo{
 			MediaItemID:    itemUUID.String(),
 			Title:          item.Title,
 			Author:         textToString(item.Author),
 			CoverImagePath: utils.ResolveMediaURL(item.LibraryID, item.CoverImagePath),
 			FormatGroup:    item.FormatGroup,
+			Badge:          MediaBadgeKind(item.FormatGroup, libTypes[uuid.UUID(item.LibraryID.Bytes).String()]),
 		})
 	}
 
diff --git a/internal/router/frontend.go b/internal/router/frontend.go
index 784a2abb..e85bc709 100644
--- a/internal/router/frontend.go
+++ b/internal/router/frontend.go
@@ -482,9 +482,14 @@ func registerFrontendRoutes(cfg *Config) {
 			}
 		}
 
+		libTypes := map[string]string{}
+		for _, ld := range libRes.Libraries {
+			libTypes[ld.ID] = ld.TypeValue
+		}
+
 		userPgID := pgtype.UUID{Bytes: userUUID, Valid: true}
-		sectionData := handlers.MarkActiveConflictsSections(c.Request().Context(), cfg.Queries, userPgID, handlers.BuildSections(visibleSections, libraryID, activeLibType))
-		allSectionsData := handlers.BuildSections(allSections, libraryID, activeLibType)
+		sectionData := handlers.MarkActiveConflictsSections(c.Request().Context(), cfg.Queries, userPgID, handlers.BuildSections(visibleSections, libraryID, activeLibType, libTypes))
+		allSectionsData := handlers.BuildSections(allSections, libraryID, activeLibType, libTypes)
 
 		// "This week" widget: the user's rolling 7-day reading pulse for
 		// the CURRENTLY SELECTED library (the same resolution the sections
diff --git a/internal/router/search.go b/internal/router/search.go
index d3cd95e5..e40d3ad5 100644
--- a/internal/router/search.go
+++ b/internal/router/search.go
@@ -110,6 +110,8 @@ func handleSearchHTML(c *echo.Context, cfg *Config) error {
 			Title:          book.Title,
 			Author:         textToString(book.Author),
 			CoverImagePath: utils.ResolveMediaURL(pgtype.UUID{Bytes: bookLibUUID, Valid: true}, book.CoverImagePath),
+			FormatGroup:    book.FormatGroup,
+			Badge:          handlers.MediaBadgeKind(book.FormatGroup, book.LibraryTypeName),
 		}
 	}
 	// Stamp active conflict flags so cards route the play action correctly
diff --git a/templates/annotations_banner.templ b/templates/annotations_banner.templ
index a8d19ae8..736f99d2 100644
--- a/templates/annotations_banner.templ
+++ b/templates/annotations_banner.templ
@@ -29,7 +29,7 @@ templ AnnotationsBanner(book handlers.MediaDetail) {
 		aria-label="Annotations"
 	>
 		<div class="sticky top-0 px-4 py-3 flex items-center justify-between" style="background: var(--bg-primary); border-bottom: 1px solid var(--border);">
-			<h3 class="text-lg font-semibold" style="color: var(--text-primary);">Notes &amp; Highlights</h3>
+			<h3 class="text-lg font-semibold" style="color: var(--text-primary);">Notes, Highlights &amp; Bookmarks</h3>
 			<button
 				type="button"
 				@click="hideAnnotationsBanner()"
@@ -49,12 +49,12 @@ templ AnnotationsBanner(book handlers.MediaDetail) {
 				class="w-full py-2 mb-3 text-sm font-medium rounded-lg border transition-opacity hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
 				style="border-color: var(--border); color: var(--text-primary);"
 			>
-				Export all notes and highlights
+				Export all annotations
 			</button>
 			<p x-show="annotationsBannerLoading" class="text-sm py-4" style="color: var(--text-secondary);">Loading…</p>
 			<template x-if="!annotationsBannerLoading && bannerRows.length === 0">
 				<p class="text-sm py-4" style="color: var(--text-secondary);">
-					No notes or highlights on this book yet.
+					No notes, highlights or bookmarks on this book yet.
 				</p>
 			</template>
 			<!-- Notes first, then highlights — stable ledger order -->
@@ -64,6 +64,12 @@ templ AnnotationsBanner(book handlers.MediaDetail) {
 						<!-- Note indicator: a quiet stroke glyph in the card's
 						     upper-right corner (never left of text) — every
 						     note row, and highlights with an attached note. -->
+						<svg
+							x-show="row.kind === 'bookmark'"
+							class="absolute top-2 right-2 pointer-events-none reader-icon"
+							style="color: var(--text-secondary);"
+							width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"
+						><path d="M5 3h10v14l-5-3.5L5 17z"></path></svg>
 						<svg
 							x-show="row.kind === 'note' || (row.kind === 'highlight' && row.hasNote)"
 							class="absolute top-2 right-2 pointer-events-none reader-icon"
@@ -105,11 +111,11 @@ templ AnnotationsBanner(book handlers.MediaDetail) {
 									@click="startBannerEdit(row)"
 									class="text-xs px-2 py-1 rounded-lg hover:bg-surface-hover"
 									style="color: var(--text-secondary);"
-									x-text="row.kind === 'highlight' ? (row.hasNote ? 'Edit note' : 'Add note') : 'Edit'"
+									x-text="row.kind === 'note' ? 'Edit' : (row.hasNote ? 'Edit note' : 'Add note')"
 								></button>
 								<button
 									type="button"
-									@click="row.kind === 'note' ? deleteBannerNote(row) : deleteBannerHighlight(row)"
+									@click="row.kind === 'note' ? deleteBannerNote(row) : row.kind === 'bookmark' ? deleteBannerBookmark(row) : deleteBannerHighlight(row)"
 									class="text-xs px-2 py-1 rounded-lg hover:bg-surface-hover"
 									style="color: var(--status-danger);"
 								>✕ Delete</button>
diff --git a/templates/annotations_banner_templ.go b/templates/annotations_banner_templ.go
index 519789fd..8bbd0103 100644
--- a/templates/annotations_banner_templ.go
+++ b/templates/annotations_banner_templ.go
@@ -42,7 +42,7 @@ func AnnotationsBanner(book handlers.MediaDetail) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"annotations-banner\" x-cloak x-show=\"annotationsBannerOpen\" x-transition:enter=\"transition-transform duration-200 ease-out\" x-transition:enter-start=\"translate-x-full\" x-transition:enter-end=\"translate-x-0\" x-transition:leave=\"transition-transform duration-150 ease-in\" x-transition:leave-start=\"translate-x-0\" x-transition:leave-end=\"translate-x-full\" class=\"fixed right-0 top-0 bottom-0 w-full max-w-md z-50 shadow-2xl overflow-y-auto\" style=\"background: var(--bg-primary); border-left: 1px solid var(--border);\" role=\"dialog\" aria-label=\"Annotations\"><div class=\"sticky top-0 px-4 py-3 flex items-center justify-between\" style=\"background: var(--bg-primary); border-bottom: 1px solid var(--border);\"><h3 class=\"text-lg font-semibold\" style=\"color: var(--text-primary);\">Notes &amp; Highlights</h3><button type=\"button\" @click=\"hideAnnotationsBanner()\" class=\"p-2 rounded-lg hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Close annotations\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"annotations-banner\" x-cloak x-show=\"annotationsBannerOpen\" x-transition:enter=\"transition-transform duration-200 ease-out\" x-transition:enter-start=\"translate-x-full\" x-transition:enter-end=\"translate-x-0\" x-transition:leave=\"transition-transform duration-150 ease-in\" x-transition:leave-start=\"translate-x-0\" x-transition:leave-end=\"translate-x-full\" class=\"fixed right-0 top-0 bottom-0 w-full max-w-md z-50 shadow-2xl overflow-y-auto\" style=\"background: var(--bg-primary); border-left: 1px solid var(--border);\" role=\"dialog\" aria-label=\"Annotations\"><div class=\"sticky top-0 px-4 py-3 flex items-center justify-between\" style=\"background: var(--bg-primary); border-bottom: 1px solid var(--border);\"><h3 class=\"text-lg font-semibold\" style=\"color: var(--text-primary);\">Notes, Highlights &amp; Bookmarks</h3><button type=\"button\" @click=\"hideAnnotationsBanner()\" class=\"p-2 rounded-lg hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Close annotations\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -50,7 +50,7 @@ func AnnotationsBanner(book handlers.MediaDetail) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</button></div><div class=\"px-4 py-3\"><button type=\"button\" id=\"export-annotations-btn\" :disabled=\"annotationsBannerLoading || bannerRows.length === 0\" @click=\"showExportDialog()\" class=\"w-full py-2 mb-3 text-sm font-medium rounded-lg border transition-opacity hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed\" style=\"border-color: var(--border); color: var(--text-primary);\">Export all notes and highlights</button><p x-show=\"annotationsBannerLoading\" class=\"text-sm py-4\" style=\"color: var(--text-secondary);\">Loading…</p><template x-if=\"!annotationsBannerLoading && bannerRows.length === 0\"><p class=\"text-sm py-4\" style=\"color: var(--text-secondary);\">No notes or highlights on this book yet.</p></template><!-- Notes first, then highlights — stable ledger order --><div class=\"space-y-2\"><template x-for=\"row in bannerRows\" :key=\"row.key\"><div class=\"card p-0 overflow-hidden relative\"><!-- Note indicator: a quiet stroke glyph in the card's\n\t\t\t\t\t\t     upper-right corner (never left of text) — every\n\t\t\t\t\t\t     note row, and highlights with an attached note. --><svg x-show=\"row.kind === 'note' || (row.kind === 'highlight' && row.hasNote)\" class=\"absolute top-2 right-2 pointer-events-none reader-icon\" style=\"color: var(--text-secondary);\" width=\"13\" height=\"13\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M 4 13 L 4 16 L 7 16 L 14.5 8.5 L 11.5 5.5 L 4 13 M 12.5 4.5 L 15.5 7.5\"></path></svg> <button type=\"button\" class=\"w-full text-left px-4 py-3 flex items-start gap-3 hover:bg-surface-hover\" :class=\"(row.kind === 'note' || (row.kind === 'highlight' && row.hasNote)) ? 'pr-8' : ''\" @click=\"row.expanded = !row.expanded\"><span class=\"w-1.5 self-stretch rounded-full shrink-0\" :style=\"{ backgroundColor: row.kind === 'highlight' ? row.color : 'transparent' }\"></span> <span class=\"flex-1 min-w-0\"><span class=\"block text-sm\" x-text=\"row.preview\"></span> <span class=\"block text-xs mt-0.5\" style=\"color: var(--text-secondary);\" x-text=\"row.label\"></span></span></button><!-- Jump · edit (notes + attached highlight notes) · delete\n\t\t\t\t\t\t     (location notes) — objective 8a --><div class=\"flex items-center justify-between px-4 pb-3 pt-1\"><a x-show=\"row.loc\" :href=\"'/readers/' + bannerMediaId + '?loc=' + encodeURIComponent(row.loc)\" class=\"text-xs px-2 py-1 rounded-lg border hover:bg-surface-hover transition-colors\" style=\"border-color: var(--border); color: var(--accent);\">Open reader here ↗</a><div class=\"flex items-center gap-1\"><button type=\"button\" @click=\"startBannerEdit(row)\" class=\"text-xs px-2 py-1 rounded-lg hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" x-text=\"row.kind === 'highlight' ? (row.hasNote ? 'Edit note' : 'Add note') : 'Edit'\"></button> <button type=\"button\" @click=\"row.kind === 'note' ? deleteBannerNote(row) : deleteBannerHighlight(row)\" class=\"text-xs px-2 py-1 rounded-lg hover:bg-surface-hover\" style=\"color: var(--status-danger);\">✕ Delete</button></div></div><!-- Expanded rich body (markdown pipeline). Highlight\n\t\t\t\t\t\t     rows split at the highlight→note boundary: the\n\t\t\t\t\t\t     selection (bordered in the row color), a divider,\n\t\t\t\t\t\t     then the note markdown — the break reads on its\n\t\t\t\t\t\t     own, no label needed. --><div x-show=\"row.expanded\" class=\"px-4 pb-4\"><p x-show=\"row.kind === 'highlight'\" class=\"text-sm\" :style=\"row.kind === 'highlight' ? 'border-left: 3px solid ' + row.color + '; padding-left: .75rem; color: var(--text-secondary); margin: 0 0 ' + (row.hasNote ? '.75rem' : '0') + ';' : 'color: var(--text-secondary);'\" x-text=\"row.richSelection\"></p><div x-show=\"row.kind === 'highlight' && row.hasNote\" class=\"border-t mt-3 pt-3\" style=\"border-color: var(--border);\"></div><div class=\"note-rich text-sm\" x-html=\"row.richNote\"></div></div></div></template></div></div></div><!-- Note edit dialog (objective 8a): raw markdown source; for\n\t     highlight rows the dialog edits the note ATTACHED to the\n\t     highlight (never the highlight itself) --><div id=\"banner-note-dialog\" x-cloak x-show=\"bannerEditOpen\" class=\"fixed inset-0 z-[60] flex items-center justify-center p-4\" style=\"background: rgba(0,0,0,.6);\"><div class=\"max-w-md w-full card p-6\"><h4 class=\"text-lg font-semibold mb-1\" style=\"color: var(--text-primary);\" x-text=\"bannerEditRow && bannerEditRow.kind === 'highlight' ? (bannerEditRow.hasNote ? 'Edit highlight note' : 'Add note to highlight') : 'Edit note'\"></h4><p class=\"text-xs mb-3\" style=\"color: var(--text-secondary);\">Markdown supported</p><textarea x-model=\"bannerEditText\" rows=\"6\" class=\"input w-full text-sm\"></textarea><div class=\"flex gap-2 mt-4\"><button type=\"button\" @click=\"saveBannerNote()\" :disabled=\"!String(bannerEditText || '').trim()\" class=\"flex-1 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed\">Save</button> <button type=\"button\" @click=\"bannerEditOpen = false\" class=\"flex-1 py-2 text-sm border rounded hover:bg-surface-hover\" style=\"border-color: var(--border); color: var(--text-secondary);\">Cancel</button></div></div></div><!-- Export format dialog --><div id=\"annotations-export-dialog\" x-cloak x-show=\"annotationsExportOpen\" class=\"fixed inset-0 z-[60] flex items-center justify-center p-4\" style=\"background: rgba(0,0,0,.6);\"><div class=\"max-w-sm w-full card p-6\"><h4 class=\"text-lg font-semibold mb-1\" style=\"color: var(--text-primary);\">Export annotations</h4><p class=\"text-sm mb-4\" style=\"color: var(--text-secondary);\">Notes and highlights, as markdown files.</p><div class=\"space-y-2\"><button type=\"button\" @click=\"exportAnnotations('single')\" class=\"w-full py-2 px-4 text-sm text-left rounded-lg border hover:bg-surface-hover transition-colors\" style=\"border-color: var(--border); color: var(--text-primary);\">Single file — everything in one .md</button> <button type=\"button\" @click=\"exportAnnotations('multi')\" class=\"w-full py-2 px-4 text-sm text-left rounded-lg border hover:bg-surface-hover transition-colors\" style=\"border-color: var(--border); color: var(--text-primary);\">One file per item — zipped</button></div><button type=\"button\" @click=\"hideExportDialog()\" class=\"w-full py-2 mt-3 text-sm rounded-lg hover:bg-surface-hover\" style=\"color: var(--text-secondary);\">Cancel</button></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</button></div><div class=\"px-4 py-3\"><button type=\"button\" id=\"export-annotations-btn\" :disabled=\"annotationsBannerLoading || bannerRows.length === 0\" @click=\"showExportDialog()\" class=\"w-full py-2 mb-3 text-sm font-medium rounded-lg border transition-opacity hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed\" style=\"border-color: var(--border); color: var(--text-primary);\">Export all annotations</button><p x-show=\"annotationsBannerLoading\" class=\"text-sm py-4\" style=\"color: var(--text-secondary);\">Loading…</p><template x-if=\"!annotationsBannerLoading && bannerRows.length === 0\"><p class=\"text-sm py-4\" style=\"color: var(--text-secondary);\">No notes, highlights or bookmarks on this book yet.</p></template><!-- Notes first, then highlights — stable ledger order --><div class=\"space-y-2\"><template x-for=\"row in bannerRows\" :key=\"row.key\"><div class=\"card p-0 overflow-hidden relative\"><!-- Note indicator: a quiet stroke glyph in the card's\n\t\t\t\t\t\t     upper-right corner (never left of text) — every\n\t\t\t\t\t\t     note row, and highlights with an attached note. --><svg x-show=\"row.kind === 'bookmark'\" class=\"absolute top-2 right-2 pointer-events-none reader-icon\" style=\"color: var(--text-secondary);\" width=\"13\" height=\"13\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" aria-hidden=\"true\"><path d=\"M5 3h10v14l-5-3.5L5 17z\"></path></svg> <svg x-show=\"row.kind === 'note' || (row.kind === 'highlight' && row.hasNote)\" class=\"absolute top-2 right-2 pointer-events-none reader-icon\" style=\"color: var(--text-secondary);\" width=\"13\" height=\"13\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M 4 13 L 4 16 L 7 16 L 14.5 8.5 L 11.5 5.5 L 4 13 M 12.5 4.5 L 15.5 7.5\"></path></svg> <button type=\"button\" class=\"w-full text-left px-4 py-3 flex items-start gap-3 hover:bg-surface-hover\" :class=\"(row.kind === 'note' || (row.kind === 'highlight' && row.hasNote)) ? 'pr-8' : ''\" @click=\"row.expanded = !row.expanded\"><span class=\"w-1.5 self-stretch rounded-full shrink-0\" :style=\"{ backgroundColor: row.kind === 'highlight' ? row.color : 'transparent' }\"></span> <span class=\"flex-1 min-w-0\"><span class=\"block text-sm\" x-text=\"row.preview\"></span> <span class=\"block text-xs mt-0.5\" style=\"color: var(--text-secondary);\" x-text=\"row.label\"></span></span></button><!-- Jump · edit (notes + attached highlight notes) · delete\n\t\t\t\t\t\t     (location notes) — objective 8a --><div class=\"flex items-center justify-between px-4 pb-3 pt-1\"><a x-show=\"row.loc\" :href=\"'/readers/' + bannerMediaId + '?loc=' + encodeURIComponent(row.loc)\" class=\"text-xs px-2 py-1 rounded-lg border hover:bg-surface-hover transition-colors\" style=\"border-color: var(--border); color: var(--accent);\">Open reader here ↗</a><div class=\"flex items-center gap-1\"><button type=\"button\" @click=\"startBannerEdit(row)\" class=\"text-xs px-2 py-1 rounded-lg hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" x-text=\"row.kind === 'note' ? 'Edit' : (row.hasNote ? 'Edit note' : 'Add note')\"></button> <button type=\"button\" @click=\"row.kind === 'note' ? deleteBannerNote(row) : row.kind === 'bookmark' ? deleteBannerBookmark(row) : deleteBannerHighlight(row)\" class=\"text-xs px-2 py-1 rounded-lg hover:bg-surface-hover\" style=\"color: var(--status-danger);\">✕ Delete</button></div></div><!-- Expanded rich body (markdown pipeline). Highlight\n\t\t\t\t\t\t     rows split at the highlight→note boundary: the\n\t\t\t\t\t\t     selection (bordered in the row color), a divider,\n\t\t\t\t\t\t     then the note markdown — the break reads on its\n\t\t\t\t\t\t     own, no label needed. --><div x-show=\"row.expanded\" class=\"px-4 pb-4\"><p x-show=\"row.kind === 'highlight'\" class=\"text-sm\" :style=\"row.kind === 'highlight' ? 'border-left: 3px solid ' + row.color + '; padding-left: .75rem; color: var(--text-secondary); margin: 0 0 ' + (row.hasNote ? '.75rem' : '0') + ';' : 'color: var(--text-secondary);'\" x-text=\"row.richSelection\"></p><div x-show=\"row.kind === 'highlight' && row.hasNote\" class=\"border-t mt-3 pt-3\" style=\"border-color: var(--border);\"></div><div class=\"note-rich text-sm\" x-html=\"row.richNote\"></div></div></div></template></div></div></div><!-- Note edit dialog (objective 8a): raw markdown source; for\n\t     highlight rows the dialog edits the note ATTACHED to the\n\t     highlight (never the highlight itself) --><div id=\"banner-note-dialog\" x-cloak x-show=\"bannerEditOpen\" class=\"fixed inset-0 z-[60] flex items-center justify-center p-4\" style=\"background: rgba(0,0,0,.6);\"><div class=\"max-w-md w-full card p-6\"><h4 class=\"text-lg font-semibold mb-1\" style=\"color: var(--text-primary);\" x-text=\"bannerEditRow && bannerEditRow.kind === 'highlight' ? (bannerEditRow.hasNote ? 'Edit highlight note' : 'Add note to highlight') : 'Edit note'\"></h4><p class=\"text-xs mb-3\" style=\"color: var(--text-secondary);\">Markdown supported</p><textarea x-model=\"bannerEditText\" rows=\"6\" class=\"input w-full text-sm\"></textarea><div class=\"flex gap-2 mt-4\"><button type=\"button\" @click=\"saveBannerNote()\" :disabled=\"!String(bannerEditText || '').trim()\" class=\"flex-1 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed\">Save</button> <button type=\"button\" @click=\"bannerEditOpen = false\" class=\"flex-1 py-2 text-sm border rounded hover:bg-surface-hover\" style=\"border-color: var(--border); color: var(--text-secondary);\">Cancel</button></div></div></div><!-- Export format dialog --><div id=\"annotations-export-dialog\" x-cloak x-show=\"annotationsExportOpen\" class=\"fixed inset-0 z-[60] flex items-center justify-center p-4\" style=\"background: rgba(0,0,0,.6);\"><div class=\"max-w-sm w-full card p-6\"><h4 class=\"text-lg font-semibold mb-1\" style=\"color: var(--text-primary);\">Export annotations</h4><p class=\"text-sm mb-4\" style=\"color: var(--text-secondary);\">Notes and highlights, as markdown files.</p><div class=\"space-y-2\"><button type=\"button\" @click=\"exportAnnotations('single')\" class=\"w-full py-2 px-4 text-sm text-left rounded-lg border hover:bg-surface-hover transition-colors\" style=\"border-color: var(--border); color: var(--text-primary);\">Single file — everything in one .md</button> <button type=\"button\" @click=\"exportAnnotations('multi')\" class=\"w-full py-2 px-4 text-sm text-left rounded-lg border hover:bg-surface-hover transition-colors\" style=\"border-color: var(--border); color: var(--text-primary);\">One file per item — zipped</button></div><button type=\"button\" @click=\"hideExportDialog()\" class=\"w-full py-2 mt-3 text-sm rounded-lg hover:bg-surface-hover\" style=\"color: var(--text-secondary);\">Cancel</button></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/audio_reader.templ b/templates/audio_reader.templ
index a6996cb8..19d8ee17 100644
--- a/templates/audio_reader.templ
+++ b/templates/audio_reader.templ
@@ -314,7 +314,7 @@ templ AudioReader(user User, metadata ReaderMetadata) {
 					<div
 						x-show="volumeOpen"
 						x-cloak
-						class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg px-3 py-2.5 flex items-center gap-3"
+						class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg px-3 py-2.5 flex flex-col items-center gap-2"
 						style="background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;"
 					>
 						<button
diff --git a/templates/audio_reader_templ.go b/templates/audio_reader_templ.go
index c6918af0..7b16420e 100644
--- a/templates/audio_reader_templ.go
+++ b/templates/audio_reader_templ.go
@@ -172,7 +172,7 @@ func AudioReader(user User, metadata ReaderMetadata) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</h1><p class=\"text-sm mt-0.5 truncate\" style=\"color: var(--text-secondary);\" x-text=\"chapterTitle()\">—</p></div></div><!-- Scrubber + transports --><div class=\"w-full max-w-xl flex flex-col gap-2\"><div class=\"flex items-center gap-2 text-xs tabular-nums\" style=\"color: var(--text-secondary);\"><span x-text=\"fmtTime(currentTime)\">0:00</span> <input id=\"audio-scrub\" type=\"range\" min=\"0\" step=\"0.1\" :max=\"chaptersDuration() || 1\" :value=\"scrubbing ? scrubValue : currentTime\" class=\"flex-1 accent-current\" @input=\"scrubbing = true; scrubValue = Number($event.target.value)\" @pointerup=\"seekTo(scrubValue); scrubbing = false\" @change=\"seekTo(scrubValue); scrubbing = false\" style=\"z-index: 20;\"> <span x-text=\"fmtTime(chaptersDuration() || 1)\">0:00</span></div><div class=\"flex items-center justify-center gap-3 md:gap-5\"><button type=\"button\" @click=\"stepChapter(-1)\" class=\"rounded-full p-2.5 hover:bg-surface-hover transition-colors\" aria-label=\"Previous chapter\" title=\"Previous chapter\" style=\"color: var(--text-primary);\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M19 20 9 12l10-8v16z\"></path> <path d=\"M5 19V5\"></path></svg></button> <button type=\"button\" @click=\"skip(-1)\" class=\"relative rounded-full h-14 w-14 grid place-items-center hover:bg-surface-hover transition-colors\" :aria-label=\"'Skip back ' + skipSeconds + 's'\" :title=\"'Skip back ' + skipSeconds + 's'\" style=\"color: var(--text-primary);\"><svg width=\"52\" height=\"52\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"></path> <path d=\"M3 3v5h5\"></path></svg> <span class=\"absolute inset-0 grid place-items-center text-[11px] font-semibold pointer-events-none\"><span x-text=\"skipSeconds\">10</span></span></button> <button id=\"audio-play\" type=\"button\" @click=\"togglePlay()\" class=\"rounded-full h-16 w-16 grid place-items-center\" style=\"background-color: var(--accent); color: var(--bg-primary);\" aria-label=\"Play or pause\"><span x-show=\"!playing\" class=\"grid place-items-center\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" style=\"margin-left: 2px;\"><path d=\"M8 5.2v13.6L19.2 12z\"></path></svg></span> <span x-show=\"playing\" class=\"grid place-items-center\" x-cloak><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"6.2\" y=\"4.5\" width=\"4.2\" height=\"15\" rx=\"1.7\"></rect> <rect x=\"13.6\" y=\"4.5\" width=\"4.2\" height=\"15\" rx=\"1.7\"></rect></svg></span></button> <button type=\"button\" @click=\"skip(1)\" class=\"relative rounded-full h-14 w-14 grid place-items-center hover:bg-surface-hover transition-colors\" :aria-label=\"'Skip forward ' + skipSeconds + 's'\" :title=\"'Skip forward ' + skipSeconds + 's'\" style=\"color: var(--text-primary);\"><svg width=\"52\" height=\"52\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\"></path> <path d=\"M21 3v5h-5\"></path></svg> <span class=\"absolute inset-0 grid place-items-center text-[11px] font-semibold pointer-events-none\"><span x-text=\"skipSeconds\">10</span></span></button> <button type=\"button\" @click=\"stepChapter(1)\" class=\"rounded-full p-2.5 hover:bg-surface-hover transition-colors\" aria-label=\"Next chapter\" title=\"Next chapter\" style=\"color: var(--text-primary);\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 4l10 8-10 8V4z\"></path> <path d=\"M19 5v14\"></path></svg></button></div></div><!-- Settings strip: Skip ▾ · Speed ▾ · Bookmark · Volume ▾ --><div class=\"w-full max-w-xl flex items-center justify-center gap-2\"><div class=\"relative\" @click.outside=\"skipOpen = false\"><button type=\"button\" @click=\"skipOpen = !skipOpen\" class=\"text-xs px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors inline-flex items-center gap-1.5\" :aria-label=\"'Skip duration, currently ' + skipSeconds + ' seconds'\" style=\"color: var(--text-secondary);\"><span>Skip</span> <span class=\"font-semibold\" style=\"color: var(--text-primary);\" x-text=\"skipSeconds + 's'\">10s</span> <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg></button><div x-show=\"skipOpen\" x-cloak class=\"absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg p-1.5 flex flex-col min-w-[7.5rem]\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;\"><template x-for=\"secs in [1, 5, 10, 15, 30]\" :key=\"'skip' + secs\"><button type=\"button\" @click=\"setSkip(secs); skipOpen = false\" class=\"w-full text-left px-3 py-1.5 rounded-md text-sm\" :class=\"Number(skipSeconds) === secs ? 'font-semibold' : ''\" :style=\"Number(skipSeconds) === secs ? 'background-color: var(--accent-muted); color: var(--text-primary);' : 'color: var(--text-secondary);'\" x-text=\"secs + ' seconds'\"></button></template></div></div><div class=\"relative\" @click.outside=\"speedOpen = false\"><button type=\"button\" @click=\"speedOpen = !speedOpen\" class=\"text-xs px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors inline-flex items-center gap-1.5\" :aria-label=\"'Playback speed, currently ' + speed + ' times'\" style=\"color: var(--text-secondary);\"><span>Speed</span> <span class=\"font-semibold\" style=\"color: var(--text-primary);\" x-text=\"speed + '×'\">1×</span> <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg></button><div x-show=\"speedOpen\" x-cloak class=\"absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg p-1.5 flex flex-col min-w-[7rem]\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;\"><template x-for=\"rate in [0.75, 1, 1.25, 1.5, 2]\" :key=\"'speed' + rate\"><button type=\"button\" @click=\"setSpeed(rate); speedOpen = false\" class=\"w-full text-left px-3 py-1.5 rounded-md text-sm\" :class=\"Number(speed) === rate ? 'font-semibold' : ''\" :style=\"Number(speed) === rate ? 'background-color: var(--accent-muted); color: var(--text-primary);' : 'color: var(--text-secondary);'\" x-text=\"rate + '×'\"></button></template></div></div><button type=\"button\" @click=\"toggleBookmarkCapture()\" class=\"text-xs px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors inline-flex items-center gap-1.5\" :class=\"bookmarkCaptureOpen ? 'opacity-100' : 'opacity-70'\" aria-label=\"Add bookmark at current position\" style=\"color: var(--text-secondary);\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"></path> <path d=\"M12 7v6M9 10h6\"></path></svg> <span>Bookmark</span></button><div class=\"relative\" @click.outside=\"volumeOpen = false\"><button type=\"button\" @click=\"volumeOpen = !volumeOpen\" class=\"rounded-lg p-2 hover:bg-surface-hover transition-colors\" :aria-label=\"'Volume ' + Math.round(Number(volume) * 100) + '%'\" style=\"color: var(--text-secondary);\"><span x-show=\"volumeIcon() === 'muted'\" x-cloak><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"m17 9 4 6M21 9l-4 6\"></path></svg></span> <span x-show=\"volumeIcon() === 'low'\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M15.5 9.5a3.5 3.5 0 0 1 0 5\"></path></svg></span> <span x-show=\"volumeIcon() === 'mid'\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M14.5 8a5 5 0 0 1 0 8\"></path> <path d=\"M17.5 5.5a9 9 0 0 1 0 13\"></path></svg></span> <span x-show=\"volumeIcon() === 'high'\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M14.5 8a5 5 0 0 1 0 8\"></path> <path d=\"M17.5 5.5a9 9 0 0 1 0 13\"></path> <path d=\"M20.5 3a13 13 0 0 1 0 18\"></path></svg></span></button><div x-show=\"volumeOpen\" x-cloak class=\"absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg px-3 py-2.5 flex items-center gap-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;\"><button type=\"button\" @click=\"toggleMute()\" class=\"rounded-full p-1.5 hover:bg-surface-hover transition-colors\" :aria-label=\"muted ? 'Unmute' : 'Mute'\" style=\"color: var(--text-secondary);\"><span x-show=\"muted\" x-cloak class=\"block\" style=\"color: var(--text-primary);\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"m17 9 4 6M21 9l-4 6\"></path></svg></span> <span x-show=\"!muted\" class=\"block\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M14.5 8a5 5 0 0 1 0 8\"></path> <path d=\"M17.5 5.5a9 9 0 0 1 0 13\"></path></svg></span></button> <input type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" :value=\"muted ? 0 : volume\" @input=\"setVolume(Number($event.target.value))\" class=\"accent-current\" style=\"width: 7.5rem;\" aria-label=\"Volume\"></div></div></div><!-- Chapter drawer: slides top-to-bottom, floats above the page\n\t\t\t     (backdrop overlay — the page never shifts) --><div x-show=\"chaptersOpen\" x-cloak class=\"fixed inset-0 z-40\" style=\"background-color: color-mix(in srgb, black 32%, transparent);\" @click=\"chaptersOpen = false\"></div><div x-show=\"chaptersOpen\" x-cloak x-transition:enter=\"transition ease-out duration-200\" x-transition:enter-start=\"-translate-y-4 opacity-0\" x-transition:enter-end=\"translate-y-0 opacity-100\" x-transition:leave=\"transition ease-in duration-150\" x-transition:leave-start=\"translate-y-0 opacity-100\" x-transition:leave-end=\"-translate-y-4 opacity-0\" class=\"fixed top-0 right-0 z-50 w-full sm:w-96 max-h-[70vh] overflow-y-auto rounded-b-2xl shadow-2xl p-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); border-top-width: 0;\" @click.outside=\"chaptersOpen = false\"><div class=\"flex items-center justify-between mb-2 px-1\"><span class=\"text-sm font-semibold\" style=\"color: var(--text-primary);\">Chapters</span> <button type=\"button\" @click=\"chaptersOpen = false\" class=\"rounded-full p-1.5 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Close chapters\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></button></div><template x-for=\"ch in chapters\" :key=\"ch.index\"><button type=\"button\" @click=\"jumpToChapter(ch.index)\" class=\"w-full text-left px-3 py-2.5 rounded-lg text-sm flex justify-between gap-3 hover:bg-surface-hover transition-colors\" :class=\"currentChapter() === ch.index ? 'font-semibold' : ''\" :style=\"currentChapter() === ch.index ? 'background-color: var(--accent-muted); color: var(--text-primary);' : 'color: var(--text-secondary);'\"><span class=\"truncate\" x-text=\"ch.title || ('Chapter ' + (ch.index + 1))\"></span> <span class=\"shrink-0 text-xs tabular-nums\" x-text=\"fmtTime(ch.start)\"></span></button></template><p x-show=\"!chapters.length\" class=\"text-sm text-center py-4\" style=\"color: var(--text-secondary);\">No chapters detected for this audiobook.</p></div><!-- Bookmarks drawer: same slide-down panel shape as chapters;\n\t\t\t     note is the point (A2d) --><div x-show=\"bookmarksOpen\" x-cloak x-transition:enter=\"transition ease-out duration-200\" x-transition:enter-start=\"-translate-y-4 opacity-0\" x-transition:enter-end=\"translate-y-0 opacity-100\" x-transition:leave=\"transition ease-in duration-150\" x-transition:leave-start=\"translate-y-0 opacity-100\" x-transition:leave-end=\"-translate-y-4 opacity-0\" class=\"fixed top-0 right-0 z-50 w-full sm:w-96 max-h-[70vh] overflow-y-auto rounded-b-2xl shadow-2xl p-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); border-top-width: 0;\"><div class=\"flex items-center justify-between mb-2 px-1\"><span class=\"text-sm font-semibold\" style=\"color: var(--text-primary);\">Bookmarks</span> <button type=\"button\" @click=\"bookmarksOpen = false\" class=\"rounded-full p-1.5 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Close bookmarks\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></button></div><template x-for=\"b in bookmarks\" :key=\"String(b.id)\"><div class=\"px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors\"><div class=\"flex justify-between items-center gap-3\"><button type=\"button\" class=\"flex-1 text-left min-w-0\" @click=\"jumpToBookmark(b)\"><span class=\"text-sm font-medium truncate block\" style=\"color: var(--text-primary);\" x-text=\"b.title\"></span></button><div class=\"shrink-0 flex items-center gap-1\"><button type=\"button\" @click=\"startEditNote(b)\" class=\"rounded p-1 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Edit note\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"></path></svg></button> <button type=\"button\" @click=\"deleteBookmark(b)\" class=\"rounded p-1 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Delete bookmark\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6h18\"></path><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"></path><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path></svg></button></div></div><div class=\"note-rich text-xs mt-1\" x-show=\"b.notes && editingBookmarkId !== String(b.id)\" x-html=\"bookmarkNoteHtml(b)\"></div><div x-show=\"editingBookmarkId === String(b.id)\" x-cloak class=\"mt-1\"><textarea x-model=\"editingNote\" rows=\"3\" class=\"input text-sm resize-y\" placeholder=\"Note (markdown)\"></textarea><div class=\"flex justify-end gap-2 mt-1\"><button type=\"button\" @click=\"editingBookmarkId = ''\" class=\"btn btn-ghost text-xs px-2 py-1\">Cancel</button> <button type=\"button\" @click=\"saveNote()\" class=\"btn btn-primary text-xs px-2 py-1\">Save note</button></div></div></div></template><p x-show=\"!bookmarks.length\" class=\"text-sm text-center py-4\" style=\"color: var(--text-secondary);\">No bookmarks yet — tap the <span class=\"inline-flex align-middle\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"></path></svg></span> button to save your position.</p></div><!-- Bookmark capture pill: floats under the header while playing\n\t\t\t     position is live; optional note per the A2d spec --><div x-show=\"bookmarkCaptureOpen\" x-cloak x-transition class=\"fixed top-16 right-4 z-50 w-80 rounded-xl shadow-2xl p-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border);\"><p class=\"text-sm font-semibold mb-2\" style=\"color: var(--text-primary);\">Bookmark at <span class=\"tabular-nums\" x-text=\"fmtTime(currentTime)\">0:00</span></p><textarea x-model=\"bookmarkNote\" rows=\"3\" placeholder=\"Optional note — markdown welcome (e.g. **great quote**, list, [link](https://…))\" class=\"input mb-2 resize-y\"></textarea><div class=\"flex justify-end gap-2\"><button type=\"button\" @click=\"bookmarkCaptureOpen = false\" class=\"btn btn-ghost text-sm px-3 py-1.5\">Cancel</button> <button type=\"button\" @click=\"saveBookmark()\" class=\"btn btn-primary text-sm px-3 py-1.5\">Save</button></div></div><audio id=\"audio-element\" preload=\"auto\" class=\"hidden\"></audio></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</h1><p class=\"text-sm mt-0.5 truncate\" style=\"color: var(--text-secondary);\" x-text=\"chapterTitle()\">—</p></div></div><!-- Scrubber + transports --><div class=\"w-full max-w-xl flex flex-col gap-2\"><div class=\"flex items-center gap-2 text-xs tabular-nums\" style=\"color: var(--text-secondary);\"><span x-text=\"fmtTime(currentTime)\">0:00</span> <input id=\"audio-scrub\" type=\"range\" min=\"0\" step=\"0.1\" :max=\"chaptersDuration() || 1\" :value=\"scrubbing ? scrubValue : currentTime\" class=\"flex-1 accent-current\" @input=\"scrubbing = true; scrubValue = Number($event.target.value)\" @pointerup=\"seekTo(scrubValue); scrubbing = false\" @change=\"seekTo(scrubValue); scrubbing = false\" style=\"z-index: 20;\"> <span x-text=\"fmtTime(chaptersDuration() || 1)\">0:00</span></div><div class=\"flex items-center justify-center gap-3 md:gap-5\"><button type=\"button\" @click=\"stepChapter(-1)\" class=\"rounded-full p-2.5 hover:bg-surface-hover transition-colors\" aria-label=\"Previous chapter\" title=\"Previous chapter\" style=\"color: var(--text-primary);\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M19 20 9 12l10-8v16z\"></path> <path d=\"M5 19V5\"></path></svg></button> <button type=\"button\" @click=\"skip(-1)\" class=\"relative rounded-full h-14 w-14 grid place-items-center hover:bg-surface-hover transition-colors\" :aria-label=\"'Skip back ' + skipSeconds + 's'\" :title=\"'Skip back ' + skipSeconds + 's'\" style=\"color: var(--text-primary);\"><svg width=\"52\" height=\"52\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"></path> <path d=\"M3 3v5h5\"></path></svg> <span class=\"absolute inset-0 grid place-items-center text-[11px] font-semibold pointer-events-none\"><span x-text=\"skipSeconds\">10</span></span></button> <button id=\"audio-play\" type=\"button\" @click=\"togglePlay()\" class=\"rounded-full h-16 w-16 grid place-items-center\" style=\"background-color: var(--accent); color: var(--bg-primary);\" aria-label=\"Play or pause\"><span x-show=\"!playing\" class=\"grid place-items-center\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" style=\"margin-left: 2px;\"><path d=\"M8 5.2v13.6L19.2 12z\"></path></svg></span> <span x-show=\"playing\" class=\"grid place-items-center\" x-cloak><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"6.2\" y=\"4.5\" width=\"4.2\" height=\"15\" rx=\"1.7\"></rect> <rect x=\"13.6\" y=\"4.5\" width=\"4.2\" height=\"15\" rx=\"1.7\"></rect></svg></span></button> <button type=\"button\" @click=\"skip(1)\" class=\"relative rounded-full h-14 w-14 grid place-items-center hover:bg-surface-hover transition-colors\" :aria-label=\"'Skip forward ' + skipSeconds + 's'\" :title=\"'Skip forward ' + skipSeconds + 's'\" style=\"color: var(--text-primary);\"><svg width=\"52\" height=\"52\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\"></path> <path d=\"M21 3v5h-5\"></path></svg> <span class=\"absolute inset-0 grid place-items-center text-[11px] font-semibold pointer-events-none\"><span x-text=\"skipSeconds\">10</span></span></button> <button type=\"button\" @click=\"stepChapter(1)\" class=\"rounded-full p-2.5 hover:bg-surface-hover transition-colors\" aria-label=\"Next chapter\" title=\"Next chapter\" style=\"color: var(--text-primary);\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 4l10 8-10 8V4z\"></path> <path d=\"M19 5v14\"></path></svg></button></div></div><!-- Settings strip: Skip ▾ · Speed ▾ · Bookmark · Volume ▾ --><div class=\"w-full max-w-xl flex items-center justify-center gap-2\"><div class=\"relative\" @click.outside=\"skipOpen = false\"><button type=\"button\" @click=\"skipOpen = !skipOpen\" class=\"text-xs px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors inline-flex items-center gap-1.5\" :aria-label=\"'Skip duration, currently ' + skipSeconds + ' seconds'\" style=\"color: var(--text-secondary);\"><span>Skip</span> <span class=\"font-semibold\" style=\"color: var(--text-primary);\" x-text=\"skipSeconds + 's'\">10s</span> <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg></button><div x-show=\"skipOpen\" x-cloak class=\"absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg p-1.5 flex flex-col min-w-[7.5rem]\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;\"><template x-for=\"secs in [1, 5, 10, 15, 30]\" :key=\"'skip' + secs\"><button type=\"button\" @click=\"setSkip(secs); skipOpen = false\" class=\"w-full text-left px-3 py-1.5 rounded-md text-sm\" :class=\"Number(skipSeconds) === secs ? 'font-semibold' : ''\" :style=\"Number(skipSeconds) === secs ? 'background-color: var(--accent-muted); color: var(--text-primary);' : 'color: var(--text-secondary);'\" x-text=\"secs + ' seconds'\"></button></template></div></div><div class=\"relative\" @click.outside=\"speedOpen = false\"><button type=\"button\" @click=\"speedOpen = !speedOpen\" class=\"text-xs px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors inline-flex items-center gap-1.5\" :aria-label=\"'Playback speed, currently ' + speed + ' times'\" style=\"color: var(--text-secondary);\"><span>Speed</span> <span class=\"font-semibold\" style=\"color: var(--text-primary);\" x-text=\"speed + '×'\">1×</span> <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg></button><div x-show=\"speedOpen\" x-cloak class=\"absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg p-1.5 flex flex-col min-w-[7rem]\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;\"><template x-for=\"rate in [0.75, 1, 1.25, 1.5, 2]\" :key=\"'speed' + rate\"><button type=\"button\" @click=\"setSpeed(rate); speedOpen = false\" class=\"w-full text-left px-3 py-1.5 rounded-md text-sm\" :class=\"Number(speed) === rate ? 'font-semibold' : ''\" :style=\"Number(speed) === rate ? 'background-color: var(--accent-muted); color: var(--text-primary);' : 'color: var(--text-secondary);'\" x-text=\"rate + '×'\"></button></template></div></div><button type=\"button\" @click=\"toggleBookmarkCapture()\" class=\"text-xs px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors inline-flex items-center gap-1.5\" :class=\"bookmarkCaptureOpen ? 'opacity-100' : 'opacity-70'\" aria-label=\"Add bookmark at current position\" style=\"color: var(--text-secondary);\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"></path> <path d=\"M12 7v6M9 10h6\"></path></svg> <span>Bookmark</span></button><div class=\"relative\" @click.outside=\"volumeOpen = false\"><button type=\"button\" @click=\"volumeOpen = !volumeOpen\" class=\"rounded-lg p-2 hover:bg-surface-hover transition-colors\" :aria-label=\"'Volume ' + Math.round(Number(volume) * 100) + '%'\" style=\"color: var(--text-secondary);\"><span x-show=\"volumeIcon() === 'muted'\" x-cloak><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"m17 9 4 6M21 9l-4 6\"></path></svg></span> <span x-show=\"volumeIcon() === 'low'\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M15.5 9.5a3.5 3.5 0 0 1 0 5\"></path></svg></span> <span x-show=\"volumeIcon() === 'mid'\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M14.5 8a5 5 0 0 1 0 8\"></path> <path d=\"M17.5 5.5a9 9 0 0 1 0 13\"></path></svg></span> <span x-show=\"volumeIcon() === 'high'\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M14.5 8a5 5 0 0 1 0 8\"></path> <path d=\"M17.5 5.5a9 9 0 0 1 0 13\"></path> <path d=\"M20.5 3a13 13 0 0 1 0 18\"></path></svg></span></button><div x-show=\"volumeOpen\" x-cloak class=\"absolute bottom-full mb-2 left-1/2 -translate-x-1/2 rounded-xl shadow-lg px-3 py-2.5 flex flex-col items-center gap-2\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); z-index: 30;\"><button type=\"button\" @click=\"toggleMute()\" class=\"rounded-full p-1.5 hover:bg-surface-hover transition-colors\" :aria-label=\"muted ? 'Unmute' : 'Mute'\" style=\"color: var(--text-secondary);\"><span x-show=\"muted\" x-cloak class=\"block\" style=\"color: var(--text-primary);\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"m17 9 4 6M21 9l-4 6\"></path></svg></span> <span x-show=\"!muted\" class=\"block\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M11 5 6 9H2v6h4l5 4z\"></path> <path d=\"M14.5 8a5 5 0 0 1 0 8\"></path> <path d=\"M17.5 5.5a9 9 0 0 1 0 13\"></path></svg></span></button> <input type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" :value=\"muted ? 0 : volume\" @input=\"setVolume(Number($event.target.value))\" class=\"accent-current\" style=\"width: 7.5rem;\" aria-label=\"Volume\"></div></div></div><!-- Chapter drawer: slides top-to-bottom, floats above the page\n\t\t\t     (backdrop overlay — the page never shifts) --><div x-show=\"chaptersOpen\" x-cloak class=\"fixed inset-0 z-40\" style=\"background-color: color-mix(in srgb, black 32%, transparent);\" @click=\"chaptersOpen = false\"></div><div x-show=\"chaptersOpen\" x-cloak x-transition:enter=\"transition ease-out duration-200\" x-transition:enter-start=\"-translate-y-4 opacity-0\" x-transition:enter-end=\"translate-y-0 opacity-100\" x-transition:leave=\"transition ease-in duration-150\" x-transition:leave-start=\"translate-y-0 opacity-100\" x-transition:leave-end=\"-translate-y-4 opacity-0\" class=\"fixed top-0 right-0 z-50 w-full sm:w-96 max-h-[70vh] overflow-y-auto rounded-b-2xl shadow-2xl p-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); border-top-width: 0;\" @click.outside=\"chaptersOpen = false\"><div class=\"flex items-center justify-between mb-2 px-1\"><span class=\"text-sm font-semibold\" style=\"color: var(--text-primary);\">Chapters</span> <button type=\"button\" @click=\"chaptersOpen = false\" class=\"rounded-full p-1.5 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Close chapters\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></button></div><template x-for=\"ch in chapters\" :key=\"ch.index\"><button type=\"button\" @click=\"jumpToChapter(ch.index)\" class=\"w-full text-left px-3 py-2.5 rounded-lg text-sm flex justify-between gap-3 hover:bg-surface-hover transition-colors\" :class=\"currentChapter() === ch.index ? 'font-semibold' : ''\" :style=\"currentChapter() === ch.index ? 'background-color: var(--accent-muted); color: var(--text-primary);' : 'color: var(--text-secondary);'\"><span class=\"truncate\" x-text=\"ch.title || ('Chapter ' + (ch.index + 1))\"></span> <span class=\"shrink-0 text-xs tabular-nums\" x-text=\"fmtTime(ch.start)\"></span></button></template><p x-show=\"!chapters.length\" class=\"text-sm text-center py-4\" style=\"color: var(--text-secondary);\">No chapters detected for this audiobook.</p></div><!-- Bookmarks drawer: same slide-down panel shape as chapters;\n\t\t\t     note is the point (A2d) --><div x-show=\"bookmarksOpen\" x-cloak x-transition:enter=\"transition ease-out duration-200\" x-transition:enter-start=\"-translate-y-4 opacity-0\" x-transition:enter-end=\"translate-y-0 opacity-100\" x-transition:leave=\"transition ease-in duration-150\" x-transition:leave-start=\"translate-y-0 opacity-100\" x-transition:leave-end=\"-translate-y-4 opacity-0\" class=\"fixed top-0 right-0 z-50 w-full sm:w-96 max-h-[70vh] overflow-y-auto rounded-b-2xl shadow-2xl p-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); border-top-width: 0;\"><div class=\"flex items-center justify-between mb-2 px-1\"><span class=\"text-sm font-semibold\" style=\"color: var(--text-primary);\">Bookmarks</span> <button type=\"button\" @click=\"bookmarksOpen = false\" class=\"rounded-full p-1.5 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Close bookmarks\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></button></div><template x-for=\"b in bookmarks\" :key=\"String(b.id)\"><div class=\"px-3 py-2 rounded-lg hover:bg-surface-hover transition-colors\"><div class=\"flex justify-between items-center gap-3\"><button type=\"button\" class=\"flex-1 text-left min-w-0\" @click=\"jumpToBookmark(b)\"><span class=\"text-sm font-medium truncate block\" style=\"color: var(--text-primary);\" x-text=\"b.title\"></span></button><div class=\"shrink-0 flex items-center gap-1\"><button type=\"button\" @click=\"startEditNote(b)\" class=\"rounded p-1 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Edit note\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"></path></svg></button> <button type=\"button\" @click=\"deleteBookmark(b)\" class=\"rounded p-1 hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" aria-label=\"Delete bookmark\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6h18\"></path><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"></path><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path></svg></button></div></div><div class=\"note-rich text-xs mt-1\" x-show=\"b.notes && editingBookmarkId !== String(b.id)\" x-html=\"bookmarkNoteHtml(b)\"></div><div x-show=\"editingBookmarkId === String(b.id)\" x-cloak class=\"mt-1\"><textarea x-model=\"editingNote\" rows=\"3\" class=\"input text-sm resize-y\" placeholder=\"Note (markdown)\"></textarea><div class=\"flex justify-end gap-2 mt-1\"><button type=\"button\" @click=\"editingBookmarkId = ''\" class=\"btn btn-ghost text-xs px-2 py-1\">Cancel</button> <button type=\"button\" @click=\"saveNote()\" class=\"btn btn-primary text-xs px-2 py-1\">Save note</button></div></div></div></template><p x-show=\"!bookmarks.length\" class=\"text-sm text-center py-4\" style=\"color: var(--text-secondary);\">No bookmarks yet — tap the <span class=\"inline-flex align-middle\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"></path></svg></span> button to save your position.</p></div><!-- Bookmark capture pill: floats under the header while playing\n\t\t\t     position is live; optional note per the A2d spec --><div x-show=\"bookmarkCaptureOpen\" x-cloak x-transition class=\"fixed top-16 right-4 z-50 w-80 rounded-xl shadow-2xl p-3\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border);\"><p class=\"text-sm font-semibold mb-2\" style=\"color: var(--text-primary);\">Bookmark at <span class=\"tabular-nums\" x-text=\"fmtTime(currentTime)\">0:00</span></p><textarea x-model=\"bookmarkNote\" rows=\"3\" placeholder=\"Optional note — markdown welcome (e.g. **great quote**, list, [link](https://…))\" class=\"input mb-2 resize-y\"></textarea><div class=\"flex justify-end gap-2\"><button type=\"button\" @click=\"bookmarkCaptureOpen = false\" class=\"btn btn-ghost text-sm px-3 py-1.5\">Cancel</button> <button type=\"button\" @click=\"saveBookmark()\" class=\"btn btn-primary text-sm px-3 py-1.5\">Save</button></div></div><audio id=\"audio-element\" preload=\"auto\" class=\"hidden\"></audio></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/dashboard.templ b/templates/dashboard.templ
index 75bca395..da6e0565 100644
--- a/templates/dashboard.templ
+++ b/templates/dashboard.templ
@@ -3,7 +3,6 @@ package templates
 import (
 	"bookhoard/internal/handlers"
 	"fmt"
-	"strings"
 )
 
 templ Dashboard(user User, sections []handlers.SectionData, allSections []handlers.SectionData, libData []LibraryData, currentLibraryID string, hiddenCollections []string, itemsPerSection int, week *WeekStatsData, activeLibType string, errorMessage string) {
@@ -133,13 +132,13 @@ templ BookCard(item handlers.BookInfo) {
 				}
 				<!-- Media-type identifier (A2c): books stay unbadged — the
 				     shelf default already reads as a book -->
-				if MediaBadgeIcon(item.FormatGroup) != "" {
+				if MediaBadgeIcon(item.Badge) != "" {
 					<span
 						class="absolute top-2 right-2 z-10 flex items-center justify-center h-7 w-7 rounded-full shadow-sm"
 						style="background-color: color-mix(in srgb, var(--bg-primary) 78%, transparent); color: var(--text-primary); backdrop-filter: blur(3px);"
-						title={ strings.Title(item.FormatGroup) + " read" }
+						title={ badgeLabel(item.Badge) }
 					>
-						@Icon(MediaBadgeIcon(item.FormatGroup), "h-4 w-4")
+						@Icon(MediaBadgeIcon(item.Badge), "h-4 w-4")
 					</span>
 				}
 			</div>
diff --git a/templates/dashboard_templ.go b/templates/dashboard_templ.go
index d20a2a4a..1b232eff 100644
--- a/templates/dashboard_templ.go
+++ b/templates/dashboard_templ.go
@@ -11,7 +11,6 @@ import templruntime "github.com/a-h/templ/runtime"
 import (
 	"bookhoard/internal/handlers"
 	"fmt"
-	"strings"
 )
 
 func Dashboard(user User, sections []handlers.SectionData, allSections []handlers.SectionData, libData []LibraryData, currentLibraryID string, hiddenCollections []string, itemsPerSection int, week *WeekStatsData, activeLibType string, errorMessage string) templ.Component {
@@ -123,7 +122,7 @@ func CollectionCarousel(section handlers.SectionData) templ.Component {
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.ResolveAttributeValue(section.ID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 46, Col: 33}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 45, Col: 33}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var3)
 		if templ_7745c5c3_Err != nil {
@@ -136,7 +135,7 @@ func CollectionCarousel(section handlers.SectionData) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.ResolveAttributeValue(section.IsSystem)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 47, Col: 35}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 46, Col: 35}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var4)
 		if templ_7745c5c3_Err != nil {
@@ -149,7 +148,7 @@ func CollectionCarousel(section handlers.SectionData) templ.Component {
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(section.Icon)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 51, Col: 130}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 50, Col: 130}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -162,7 +161,7 @@ func CollectionCarousel(section handlers.SectionData) templ.Component {
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(section.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 53, Col: 100}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 52, Col: 100}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -180,7 +179,7 @@ func CollectionCarousel(section handlers.SectionData) templ.Component {
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(section.Description)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 55, Col: 83}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 54, Col: 83}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -203,7 +202,7 @@ func CollectionCarousel(section handlers.SectionData) templ.Component {
 			var templ_7745c5c3_Var8 templ.SafeURL
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinURLErrs(section.ViewAllURL)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 61, Col: 30}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 60, Col: 30}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -229,7 +228,7 @@ func CollectionCarousel(section handlers.SectionData) templ.Component {
 		var templ_7745c5c3_Var9 string
 		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.ResolveAttributeValue(section.ID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 74, Col: 35}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 73, Col: 35}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var9)
 		if templ_7745c5c3_Err != nil {
@@ -250,7 +249,7 @@ func CollectionCarousel(section handlers.SectionData) templ.Component {
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.ResolveAttributeValue("carousel-track-" + section.ID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 82, Col: 39}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 81, Col: 39}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var10)
 		if templ_7745c5c3_Err != nil {
@@ -268,7 +267,7 @@ func CollectionCarousel(section handlers.SectionData) templ.Component {
 			var templ_7745c5c3_Var11 string
 			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.ResolveAttributeValue(item.MediaItemID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 87, Col: 92}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 86, Col: 92}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var11)
 			if templ_7745c5c3_Err != nil {
@@ -308,7 +307,7 @@ func CollectionCarousel(section handlers.SectionData) templ.Component {
 		var templ_7745c5c3_Var12 string
 		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.ResolveAttributeValue(section.ID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 101, Col: 35}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 100, Col: 35}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var12)
 		if templ_7745c5c3_Err != nil {
@@ -358,7 +357,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 		var templ_7745c5c3_Var14 templ.SafeURL
 		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinURLErrs("/media/" + item.MediaItemID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 114, Col: 40}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 113, Col: 40}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 		if templ_7745c5c3_Err != nil {
@@ -376,7 +375,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 			var templ_7745c5c3_Var15 string
 			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.ResolveAttributeValue(item.CoverImagePath)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 121, Col: 31}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 120, Col: 31}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var15)
 			if templ_7745c5c3_Err != nil {
@@ -389,7 +388,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 			var templ_7745c5c3_Var16 string
 			templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.ResolveAttributeValue(item.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 122, Col: 22}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 121, Col: 22}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var16)
 			if templ_7745c5c3_Err != nil {
@@ -407,7 +406,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 			var templ_7745c5c3_Var17 string
 			templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.ResolveAttributeValue(item.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 130, Col: 22}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 129, Col: 22}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var17)
 			if templ_7745c5c3_Err != nil {
@@ -422,15 +421,15 @@ func BookCard(item handlers.BookInfo) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		if MediaBadgeIcon(item.FormatGroup) != "" {
+		if MediaBadgeIcon(item.Badge) != "" {
 			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<span class=\"absolute top-2 right-2 z-10 flex items-center justify-center h-7 w-7 rounded-full shadow-sm\" style=\"background-color: color-mix(in srgb, var(--bg-primary) 78%, transparent); color: var(--text-primary); backdrop-filter: blur(3px);\" title=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var18 string
-			templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.ResolveAttributeValue(strings.Title(item.FormatGroup) + " read")
+			templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.ResolveAttributeValue(badgeLabel(item.Badge))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 140, Col: 55}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 139, Col: 36}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var18)
 			if templ_7745c5c3_Err != nil {
@@ -440,7 +439,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = Icon(MediaBadgeIcon(item.FormatGroup), "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = Icon(MediaBadgeIcon(item.Badge), "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -456,7 +455,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 		var templ_7745c5c3_Var19 string
 		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.ResolveAttributeValue(item.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 147, Col: 117}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 146, Col: 117}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var19)
 		if templ_7745c5c3_Err != nil {
@@ -469,7 +468,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 		var templ_7745c5c3_Var20 string
 		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 148, Col: 17}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 147, Col: 17}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 		if templ_7745c5c3_Err != nil {
@@ -487,7 +486,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 			var templ_7745c5c3_Var21 string
 			templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.ResolveAttributeValue(item.Author)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 151, Col: 100}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 150, Col: 100}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var21)
 			if templ_7745c5c3_Err != nil {
@@ -500,7 +499,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 			var templ_7745c5c3_Var22 string
 			templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(item.Author)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 152, Col: 19}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 151, Col: 19}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 			if templ_7745c5c3_Err != nil {
@@ -523,7 +522,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 			var templ_7745c5c3_Var23 templ.SafeURL
 			templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinURLErrs("/media/" + item.MediaItemID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 160, Col: 40}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 159, Col: 40}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
 			if templ_7745c5c3_Err != nil {
@@ -536,7 +535,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 			var templ_7745c5c3_Var24 string
 			templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.ResolveAttributeValue("Resolve progress conflict for " + item.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 162, Col: 63}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 161, Col: 63}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var24)
 			if templ_7745c5c3_Err != nil {
@@ -562,7 +561,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 			var templ_7745c5c3_Var25 templ.SafeURL
 			templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinURLErrs("/readers/" + item.MediaItemID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 169, Col: 42}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 168, Col: 42}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
 			if templ_7745c5c3_Err != nil {
@@ -575,7 +574,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 			var templ_7745c5c3_Var26 string
 			templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.ResolveAttributeValue("Listen to " + item.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 171, Col: 43}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 170, Col: 43}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var26)
 			if templ_7745c5c3_Err != nil {
@@ -601,7 +600,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 			var templ_7745c5c3_Var27 templ.SafeURL
 			templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinURLErrs("/readers/" + item.MediaItemID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 178, Col: 42}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 177, Col: 42}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
 			if templ_7745c5c3_Err != nil {
@@ -614,7 +613,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 			var templ_7745c5c3_Var28 string
 			templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.ResolveAttributeValue("Read " + item.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 180, Col: 38}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 179, Col: 38}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var28)
 			if templ_7745c5c3_Err != nil {
@@ -682,7 +681,7 @@ func DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections [
 			var templ_7745c5c3_Var30 string
 			templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.ResolveAttributeValue(section.ID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 211, Col: 37}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 210, Col: 37}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var30)
 			if templ_7745c5c3_Err != nil {
@@ -695,7 +694,7 @@ func DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections [
 			var templ_7745c5c3_Var31 string
 			templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.ResolveAttributeValue(fmt.Sprintf("%v", section.IsSystem))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 212, Col: 58}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 211, Col: 58}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var31)
 			if templ_7745c5c3_Err != nil {
@@ -716,7 +715,7 @@ func DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections [
 			var templ_7745c5c3_Var32 string
 			templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(section.Icon)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 217, Col: 43}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 216, Col: 43}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
 			if templ_7745c5c3_Err != nil {
@@ -729,7 +728,7 @@ func DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections [
 			var templ_7745c5c3_Var33 string
 			templ_7745c5c3_Var33, templ_7745c5c3_Err = templ.JoinStringErrs(section.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 219, Col: 84}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 218, Col: 84}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var33))
 			if templ_7745c5c3_Err != nil {
@@ -757,7 +756,7 @@ func DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections [
 				var templ_7745c5c3_Var34 string
 				templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.ResolveAttributeValue(section.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 229, Col: 42}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 228, Col: 42}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var34)
 				if templ_7745c5c3_Err != nil {
@@ -790,7 +789,7 @@ func DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections [
 		var templ_7745c5c3_Var35 string
 		templ_7745c5c3_Var35, templ_7745c5c3_Err = templ.JoinStringErrs(itemsPerSection)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 255, Col: 128}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 254, Col: 128}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var35))
 		if templ_7745c5c3_Err != nil {
@@ -803,7 +802,7 @@ func DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections [
 		var templ_7745c5c3_Var36 string
 		templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.ResolveAttributeValue(itemsPerSection)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 262, Col: 28}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 261, Col: 28}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var36)
 		if templ_7745c5c3_Err != nil {
@@ -885,7 +884,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 		var templ_7745c5c3_Var38 string
 		templ_7745c5c3_Var38, templ_7745c5c3_Err = templ.JoinStringErrs(fmtReadingMinutes(week.WeekMinutes))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 325, Col: 111}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 324, Col: 111}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var38))
 		if templ_7745c5c3_Err != nil {
@@ -898,7 +897,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 		var templ_7745c5c3_Var39 string
 		templ_7745c5c3_Var39, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d pages", week.WeekPages))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 326, Col: 103}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 325, Col: 103}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var39))
 		if templ_7745c5c3_Err != nil {
@@ -911,7 +910,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 		var templ_7745c5c3_Var40 string
 		templ_7745c5c3_Var40, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d sessions", week.WeekSessions))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 327, Col: 109}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 326, Col: 109}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var40))
 		if templ_7745c5c3_Err != nil {
@@ -924,7 +923,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 		var templ_7745c5c3_Var41 string
 		templ_7745c5c3_Var41, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d books", week.WeekBooks))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 328, Col: 103}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 327, Col: 103}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var41))
 		if templ_7745c5c3_Err != nil {
@@ -942,7 +941,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 			var templ_7745c5c3_Var42 string
 			templ_7745c5c3_Var42, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", week.CurrentStreak))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 330, Col: 111}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 329, Col: 111}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var42))
 			if templ_7745c5c3_Err != nil {
@@ -973,7 +972,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 			var templ_7745c5c3_Var43 string
 			templ_7745c5c3_Var43, templ_7745c5c3_Err = templ.JoinStringErrs(fmtReadingMinutes(week.WeekMinutes))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 342, Col: 108}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 341, Col: 108}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var43))
 			if templ_7745c5c3_Err != nil {
@@ -986,7 +985,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 			var templ_7745c5c3_Var44 string
 			templ_7745c5c3_Var44, templ_7745c5c3_Err = templ.JoinStringErrs(weekVsPrevLabel(week.WeekMinutes, week.PrevMinutes))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 343, Col: 122}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 342, Col: 122}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var44))
 			if templ_7745c5c3_Err != nil {
@@ -999,7 +998,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 			var templ_7745c5c3_Var45 string
 			templ_7745c5c3_Var45, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", week.WeekSessions))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 347, Col: 109}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 346, Col: 109}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var45))
 			if templ_7745c5c3_Err != nil {
@@ -1012,7 +1011,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 			var templ_7745c5c3_Var46 string
 			templ_7745c5c3_Var46, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", week.WeekBooks))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 351, Col: 106}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 350, Col: 106}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var46))
 			if templ_7745c5c3_Err != nil {
@@ -1030,7 +1029,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 			var templ_7745c5c3_Var47 string
 			templ_7745c5c3_Var47, templ_7745c5c3_Err = templ.JoinStringErrs(fmtReadingMinutes(week.WeekMinutes))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 356, Col: 108}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 355, Col: 108}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var47))
 			if templ_7745c5c3_Err != nil {
@@ -1043,7 +1042,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 			var templ_7745c5c3_Var48 string
 			templ_7745c5c3_Var48, templ_7745c5c3_Err = templ.JoinStringErrs(weekVsPrevLabel(week.WeekMinutes, week.PrevMinutes))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 357, Col: 122}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 356, Col: 122}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var48))
 			if templ_7745c5c3_Err != nil {
@@ -1056,7 +1055,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 			var templ_7745c5c3_Var49 string
 			templ_7745c5c3_Var49, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", week.WeekPages))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 361, Col: 106}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 360, Col: 106}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var49))
 			if templ_7745c5c3_Err != nil {
@@ -1069,7 +1068,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 			var templ_7745c5c3_Var50 string
 			templ_7745c5c3_Var50, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", week.WeekSessions))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 365, Col: 109}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 364, Col: 109}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var50))
 			if templ_7745c5c3_Err != nil {
@@ -1082,7 +1081,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 			var templ_7745c5c3_Var51 string
 			templ_7745c5c3_Var51, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", week.WeekBooks))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 369, Col: 106}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 368, Col: 106}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var51))
 			if templ_7745c5c3_Err != nil {
@@ -1102,7 +1101,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 				var templ_7745c5c3_Var52 string
 				templ_7745c5c3_Var52, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf(" · 🔥 %d-day streak — keep it going today", week.CurrentStreak))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 377, Col: 89}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 376, Col: 89}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var52))
 				if templ_7745c5c3_Err != nil {
@@ -1112,7 +1111,7 @@ func DashboardWeekWidget(week WeekStatsData, activeLibType string) templ.Compone
 				var templ_7745c5c3_Var53 string
 				templ_7745c5c3_Var53, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf(" · 🔥 %d-day streak — read today to keep it", week.CurrentStreak))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 379, Col: 91}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `dashboard.templ`, Line: 378, Col: 91}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var53))
 				if templ_7745c5c3_Err != nil {
diff --git a/templates/header.templ b/templates/header.templ
index 1025eefd..bca54550 100644
--- a/templates/header.templ
+++ b/templates/header.templ
@@ -211,7 +211,9 @@ templ Header(user User, currentPath string) {
 				</div>
 			</div>
 		</header>
-		<script type="module" src="/static/main.js"></script>
+		<!-- module bundle; ?v=<commit-ish stamp> busts stale intermediate
+		     builds across app restarts (browser caches are keyed by URL) -->
+		<script type="module" src="/static/main.js?v=2c714dc"></script>
 	</div>
 }
 
diff --git a/templates/header_templ.go b/templates/header_templ.go
index 4c612839..ab2e389d 100644
--- a/templates/header_templ.go
+++ b/templates/header_templ.go
@@ -631,7 +631,7 @@ func Header(user User, currentPath string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "</span> <input type=\"text\" id=\"header-search\" placeholder=\"Search your library…\" class=\"input pl-10\" autocomplete=\"off\"></div></div></header><script type=\"module\" src=\"/static/main.js\"></script></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "</span> <input type=\"text\" id=\"header-search\" placeholder=\"Search your library…\" class=\"input pl-10\" autocomplete=\"off\"></div></div></header><!-- module bundle; ?v=<commit-ish stamp> busts stale intermediate\n\t\t     builds across app restarts (browser caches are keyed by URL) --><script type=\"module\" src=\"/static/main.js?v=2c714dc\"></script></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -676,7 +676,7 @@ func SidebarUserMenu(user User) templ.Component {
 		var templ_7745c5c3_Var37 string
 		templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `header.templ`, Line: 230, Col: 58}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `header.templ`, Line: 232, Col: 58}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var37))
 		if templ_7745c5c3_Err != nil {
@@ -760,7 +760,7 @@ func SidebarSignIn(currentPath string) templ.Component {
 		var templ_7745c5c3_Var39 string
 		templ_7745c5c3_Var39, templ_7745c5c3_Err = templ.ResolveAttributeValue(currentPath)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `header.templ`, Line: 278, Col: 60}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `header.templ`, Line: 280, Col: 60}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var39)
 		if templ_7745c5c3_Err != nil {
diff --git a/templates/utils.go b/templates/utils.go
index 7ae9cf36..41048522 100644
--- a/templates/utils.go
+++ b/templates/utils.go
@@ -62,11 +62,12 @@ func isUserVisible(userID string, visibility []UserVisibilityData) bool {
 
 // TotalMediaCount sums the MediaCount across the given libraries,
 // used to display the total next to the "All Libraries" option.
-// MediaBadgeIcon selects the cover-corner badge glyph per media group
-// (A2c): the per-type identifier on mixed grids. Books stay unbadged —
+// MediaBadgeIcon selects the cover-corner badge glyph from the RESOLVED
+// badge kind (handlers.MediaBadgeKind — format_group + library type;
+// comic vs manga rides the typed-library doctrine). Books stay unbadged:
 // the shelf's default reads as a book without a stamp.
-func MediaBadgeIcon(formatGroup string) string {
-	switch formatGroup {
+func MediaBadgeIcon(badge string) string {
+	switch badge {
 	case "audiobook":
 		return "headphones"
 	case "comic":
@@ -382,3 +383,16 @@ func fmtSecondsHMS(seconds float64) string {
 	}
 	return fmt.Sprintf("%d:%02d", m, sec)
 }
+
+// badgeLabel is the hover text for a cover badge.
+func badgeLabel(badge string) string {
+	switch badge {
+	case "audiobook":
+		return "Audiobook"
+	case "comic":
+		return "Comic"
+	case "manga":
+		return "Manga"
+	}
+	return ""
+}
diff --git a/web/src/annotations-banner.ts b/web/src/annotations-banner.ts
index cb211fac..60c26b82 100644
--- a/web/src/annotations-banner.ts
+++ b/web/src/annotations-banner.ts
@@ -13,8 +13,8 @@ import { renderNoteHtml, stripNote } from "./markdown";
 interface AnnotationRow {
   /** stable key for x-for */
   key: string;
-  /** note | highlight */
-  kind: "note" | "highlight";
+  /** note | highlight | bookmark */
+  kind: "note" | "highlight" | "bookmark";
   /** human location label (Section N / Page N / NN% / source words) */
   label: string;
   /** compact preview line: stripped markdown (note) or capped selection */
@@ -83,9 +83,32 @@ function pdfEnvelopePage(cfi: string): number | null {
   return null;
 }
 
+/** Bookmark position labels: audio:<s> renders H:MM:SS; page:N /
+ * comic:page:N renders Page N; chapter:N renders Chapter N (0-based in
+ * storage); else the bookmark title's own words. */
+function bookmarkLabel(position: string | null | undefined, title: string): string {
+  const raw = (position ?? "").trim();
+  if (raw.startsWith("audio:")) {
+    const sec = parseInt(raw.slice(6), 10);
+    if (Number.isFinite(sec) && sec >= 0) {
+      const h = Math.floor(sec / 3600);
+      const m = Math.floor((sec % 3600) / 60);
+      const sec2 = sec % 60;
+      const two = (n: number) => String(n).padStart(2, "0");
+      return h > 0 ? `${h}:${two(m)}:${two(sec2)}` : `${m}:${two(sec2)}`;
+    }
+  }
+  const pageM = /^(?:comic:)?page:(\d+)$/.exec(raw);
+  if (pageM) return `Page ${pageM[1]}`;
+  const chapM = /^chapter:(\d+)$/.exec(raw);
+  if (chapM) return `Chapter ${Number(chapM[1]) + 1}`;
+  return title || "Bookmark";
+}
+
 function buildAnnotationRows(
   notes: any[],
   highlights: any[],
+  bookmarks: any[] = [],
 ): { rows: AnnotationRow[]; sources: AnnotationSource[] } {
   const rows: AnnotationRow[] = [];
   const sources: AnnotationSource[] = [];
@@ -161,6 +184,32 @@ function buildAnnotationRows(
     sources.push({ row, source: note, highlightText: selection });
   }
 
+  for (const b of bookmarks) {
+    if (b.deleted) continue;
+    const notesrc = String(b.notes ?? "");
+    const title = String(b.title ?? "");
+    const label = bookmarkLabel(b.position, title);
+    const loc = String(b.position ?? "");
+    const row: AnnotationRow = {
+      key: `bookmark-${b.id}`,
+      kind: "bookmark",
+      label,
+      preview: title || label,
+      richSelection: "",
+      richNote: renderNoteHtml(notesrc),
+      loc,
+      color: "var(--accent)",
+      hasNote: notesrc.trim().length > 0,
+      expanded: false,
+    };
+    rows.push(row);
+    sources.push({
+      row,
+      source: notesrc,
+      highlightText: title || label,
+    });
+  }
+
   return { rows, sources };
 }
 
diff --git a/web/src/audio.ts b/web/src/audio.ts
index 49cdb415..b0bad562 100644
--- a/web/src/audio.ts
+++ b/web/src/audio.ts
@@ -217,13 +217,20 @@ Alpine.data("audioReader", () => ({
         const p = await progress.json();
         const chapter = Number(p.chapter ?? 0);
         const offset = Number(p.audio_offset_seconds ?? 0);
-        if (Number.isFinite(p.percentage) && this.bookDuration > 0) {
+        // Banner/deep-link jumps (?loc=audio:<seconds>) win over the
+        // stored position: the user explicitly asked for this spot.
+        const locParam = new URLSearchParams(window.location.search).get("loc") || "";
+        if (locParam.startsWith("audio:")) {
+          const at = Number(locParam.slice("audio:".length));
+          if (Number.isFinite(at)) this.seekTo(at);
+        } else if (Number.isFinite(p.percentage) && this.bookDuration > 0) {
           const at = Number(p.percentage) * this.bookDuration;
           this.seekTo(at);
         } else if (chapter > 0 && this.chapters[chapter]?.start != null) {
           this.seekTo(this.chapters[chapter].start + offset);
         }
         this.currentChapterIdx = Math.max(0, chapter);
+        this.tickChapter();
       }
     } catch {
       // Offline start: still playable; sync resumes when reachable.
diff --git a/web/src/book-detail.ts b/web/src/book-detail.ts
index f0a6783d..3686d5d4 100644
--- a/web/src/book-detail.ts
+++ b/web/src/book-detail.ts
@@ -230,29 +230,37 @@ Alpine.data("bookDetail", () => {
       const mediaId = getMediaId();
       this.annotationsBannerLoading = true;
       try {
-        const [noteResp, hlResp] = await Promise.all([
+        const [noteResp, hlResp, bmResp] = await Promise.all([
           fetch(`/api/media-items/${mediaId}/notes`, {
             headers: { Authorization: getAuthHeader() },
           }),
           fetch(`/api/media-items/${mediaId}/highlights`, {
             headers: { Authorization: getAuthHeader() },
           }),
+          fetch(`/api/media-items/${mediaId}/bookmarks`, {
+            headers: { Authorization: getAuthHeader() },
+          }),
         ]);
         // A partial failure must not read as "no annotations": a failed
         // endpoint used to be published as an empty list, silently wiping
         // that kind from the banner while the other kind stayed (found
         // auditing the app's fetch-wipe fix, bookhoard-app 07bbb4c).
         // Keep the previous rows; the next banner open retries.
-        if (!noteResp.ok || !hlResp.ok) {
+        if (!noteResp.ok || !hlResp.ok || !bmResp.ok) {
           console.warn(
             `banner annotation load failed ` +
-              `(notes ${noteResp.status}, highlights ${hlResp.status}) — keeping previous`,
+              `(notes ${noteResp.status}, highlights ${hlResp.status}, bookmarks ${bmResp.status}) — keeping previous`,
           );
           return;
         }
         const notes = await noteResp.json();
         const highlights = await hlResp.json();
-        const built = buildAnnotationRows(notes, highlights);
+        const bookmarks = await bmResp.json();
+        const built = buildAnnotationRows(
+          notes,
+          highlights,
+          Array.isArray(bookmarks) ? bookmarks : [],
+        );
         this.bannerRows = built.rows;
         this.bannerSources = built.sources;
         this.bannerLoaded = true;
@@ -282,7 +290,22 @@ Alpine.data("bookDetail", () => {
       if (!row || (!content && row.kind === "note")) return;
       const mediaId = getMediaId();
       try {
-        if (row.kind === "note") {
+        if (row.kind === "bookmark") {
+          // Full-replace PUT: title + position ride along from the row's
+          // stored values; the note is the editable part.
+          const bmId = row.key.slice("bookmark-".length);
+          const src = this.bannerSources.find(s => s.row.key === row.key);
+          const resp = await fetch(`/api/media-items/${mediaId}/bookmarks/${bmId}`, {
+            method: "PUT",
+            headers: { Authorization: getAuthHeader(), "Content-Type": "application/json" },
+            body: JSON.stringify({
+              title: String(src?.highlightText || "Bookmark"),
+              notes: content,
+              position: row.loc || "",
+            }),
+          });
+          if (!resp.ok) throw new Error(String(resp.status));
+        } else if (row.kind === "note") {
           const noteId = row.key.slice("note-".length);
           // The stored position rides along: the server's PUT hard-sets the
           // position column.
@@ -352,6 +375,23 @@ Alpine.data("bookDetail", () => {
         showToast("Could not delete the note", "error");
       }
     },
+    async deleteBannerBookmark(row: AnnotationRow) {
+      if (row.kind !== "bookmark") return;
+      const mediaId = getMediaId();
+      const bmId = row.key.slice("bookmark-".length);
+      try {
+        const resp = await fetch(`/api/media-items/${mediaId}/bookmarks/${bmId}`, {
+          method: "DELETE",
+          headers: { Authorization: getAuthHeader() },
+        });
+        if (!resp.ok) throw new Error(String(resp.status));
+        // Tombstoned server-side: restorable from the Deleted modal.
+        showToast("Bookmark deleted — restorable from Deleted", "success");
+        await this.fetchBannerAnnotations();
+      } catch (_e) {
+        showToast("Could not delete the bookmark", "error");
+      }
+    },
     async deleteBannerHighlight(row: AnnotationRow) {
       if (row.kind !== "highlight") return;
       const mediaId = getMediaId();
diff --git a/web/src/dashboard.ts b/web/src/dashboard.ts
index 52830b51..c671f925 100644
--- a/web/src/dashboard.ts
+++ b/web/src/dashboard.ts
@@ -302,11 +302,20 @@ const MANGA_ICON =
   '<path d="M4 4h16v13a3 3 0 0 1-3 3H4z"></path>' +
   '<path d="M4 4v16M10 4h10v8"></path>' +
   "</svg>";
-// Media-type identifier for mixed grids: '' for books (unbadged default)
-function badgeIconFor(formatGroup: string): string {
-  if (formatGroup === "audiobook") return HEADPHONES_ICON;
-  if (formatGroup === "comic") return COMIC_ICON;
-  if (formatGroup === "manga") return MANGA_ICON;
+// Media-type identifier for mixed grids, from the server-resolved badge
+// (format_group + library type — comic vs manga is a LIBRARY distinction):
+// '' for books (unbadged default)
+function badgeIconFor(badge: string): string {
+  if (badge === "audiobook") return HEADPHONES_ICON;
+  if (badge === "comic") return COMIC_ICON;
+  if (badge === "manga") return MANGA_ICON;
+  return "";
+}
+
+function badgeTitleFor(badge: string): string {
+  if (badge === "audiobook") return "Audiobook";
+  if (badge === "comic") return "Comic";
+  if (badge === "manga") return "Manga";
   return "";
 }
 
@@ -328,7 +337,7 @@ function renderBookCard(book: BookInfo): string {
       ? "Listen"
       : "Read";
   const actionIcon = isAudio ? HEADPHONES_ICON : BOOK_OPEN_ICON;
-  const badgeIcon = badgeIconFor(book.format_group || "");
+  const badgeIcon = badgeIconFor(book.badge || "");
 
   return `
         <div class="flex-shrink-0 w-36 sm:w-40 snap-start" data-media-item-id="${book.media_item_id}">
@@ -340,7 +349,7 @@ function renderBookCard(book: BookInfo): string {
                              class="w-full h-full object-cover"
                              loading="lazy"
                              onerror="this.src='/static/placeholder-book.svg'">
-                        ${badgeIcon ? `<span class="absolute top-2 right-2 z-10 flex items-center justify-center h-7 w-7 rounded-full shadow-sm" style="background-color: color-mix(in srgb, var(--bg-primary) 78%, transparent); color: var(--text-primary); backdrop-filter: blur(3px);" title="${isAudio ? "Audiobook" : book.format_group === "comic" ? "Comic" : "Manga"}">${badgeIcon}</span>` : ""}
+                        ${badgeIcon ? `<span class="absolute top-2 right-2 z-10 flex items-center justify-center h-7 w-7 rounded-full shadow-sm" style="background-color: color-mix(in srgb, var(--bg-primary) 78%, transparent); color: var(--text-primary); backdrop-filter: blur(3px);" title="${badgeTitleFor(book.badge || "")}">${badgeIcon}</span>` : ""}
                     </div>
                     <div class="book-card-meta">
                         <h3 class="font-semibold text-sm leading-snug line-clamp-2" style="color: var(--text-primary)" title="${book.title}">
diff --git a/web/src/types/api.d.ts b/web/src/types/api.d.ts
index fbb308fa..d2b178ea 100644
--- a/web/src/types/api.d.ts
+++ b/web/src/types/api.d.ts
@@ -103,6 +103,7 @@ interface BookInfo {
   cover_image_path: string;
   has_conflict: boolean;
   format_group: string;
+  badge: string;
 }
 
 // Dashboard type definitions