Rework app bar, notes layout, Settings/Admin/login restyle

App bar: brand, Studies / Read Bible / Reading Plans, and one account menu
(theme, Settings, Admin, Log out). Study stage: notes get their own box above
the resources in the right column. Settings, Admin and the login page use the
reader themes; add a theme-aware danger colour.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/reader/BookmarksSheet.jsx

@@ -12,7 +12,7 @@ export default function BookmarksSheet({ open, onClose, entries, onJump, onRemov
           <button type="button" onClick={() => onJump(e.bookAbbrev, e.chapter, e.verse)} className="flex-1 truncate text-left text-sm">
             {e.bookName} {e.chapter}:{e.verse}
           </button>
-          <button type="button" onClick={() => onRemove(e.key)} aria-label="Remove bookmark" className="rounded p-1 text-[var(--r-sub)] hover:text-red-600"><CloseIcon /></button>
+          <button type="button" onClick={() => onRemove(e.key)} aria-label="Remove bookmark" className="rounded p-1 text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]"><CloseIcon /></button>
         </div>
       ))}
     </Sheet>

src/components/reader/ReaderText.jsx

@@ -48,7 +48,7 @@ export default function ReaderText({
       </header>
 
       {loading && <p className="text-center font-sans text-sm text-[var(--r-sub)]">Loading…</p>}
-      {error && <p className="text-center font-sans text-sm text-red-600">{error}</p>}
+      {error && <p className="text-center font-sans text-sm text-[var(--r-danger,#b42318)]">{error}</p>}
 
       {!loading && !error && (
         <div

src/components/reader/SearchSheet.jsx

@@ -68,7 +68,7 @@ export default function SearchSheet({
       {scope === 'bible' && isLocal && (
         <>
           {indexStatus === 'loading' && note('Loading the full Bible for search. This happens once per visit (about 7 MB).')}
-          {indexStatus === 'error' && <p className="text-sm text-red-600">Couldn’t load the full Bible. <button type="button" onClick={onLoadIndex} className="underline">Try again</button></p>}
+          {indexStatus === 'error' && <p className="text-sm text-[var(--r-danger,#b42318)]">Couldn’t load the full Bible. <button type="button" onClick={onLoadIndex} className="underline">Try again</button></p>}
           {indexStatus === 'ready' && (!deferredBibleQuery
             ? note('Type a word to search all 66 books.')
             : bibleMatches.length === 0
@@ -87,7 +87,7 @@ export default function SearchSheet({
       {scope === 'bible' && !isLocal && (
         <>
           {remote.tooShort && note('Type at least two letters. Use quotes for an exact phrase, like “good shepherd”.')}
-          {!remote.tooShort && remote.error && <p className="text-sm text-red-600">{remote.error}</p>}
+          {!remote.tooShort && remote.error && <p className="text-sm text-[var(--r-danger,#b42318)]">{remote.error}</p>}
           {!remote.tooShort && !remote.error && remote.loading && remote.results.length === 0 && note('Searching…')}
           {!remote.tooShort && !remote.error && !remote.loading && remote.total === 0 && remote.page > 0 && note(`No verses match “${query}”.`)}
           {remote.results.length > 0 && (

src/components/reader/readerThemes.js

@@ -3,15 +3,15 @@
 export const READER_THEMES = {
   paper: {
     label: 'Paper',
-    vars: { '--r-bg': '#faf7f0', '--r-text': '#2b2620', '--r-sub': '#7d7466', '--r-accent': '#b4532a', '--r-bar': '#f1ece0', '--r-line': '#e0d8c6', '--r-hl': '#f6e7a8', '--r-on': '#ffffff' },
+    vars: { '--r-bg': '#faf7f0', '--r-text': '#2b2620', '--r-sub': '#7d7466', '--r-accent': '#b4532a', '--r-bar': '#f1ece0', '--r-line': '#e0d8c6', '--r-hl': '#f6e7a8', '--r-on': '#ffffff', '--r-danger': '#b42318' },
   },
   sepia: {
     label: 'Sepia',
-    vars: { '--r-bg': '#f1e4c8', '--r-text': '#3b2f1c', '--r-sub': '#7d6b48', '--r-accent': '#9a4a1e', '--r-bar': '#e8d8b6', '--r-line': '#d5c197', '--r-hl': '#e9cf85', '--r-on': '#ffffff' },
+    vars: { '--r-bg': '#f1e4c8', '--r-text': '#3b2f1c', '--r-sub': '#7d6b48', '--r-accent': '#9a4a1e', '--r-bar': '#e8d8b6', '--r-line': '#d5c197', '--r-hl': '#e9cf85', '--r-on': '#ffffff', '--r-danger': '#a1281d' },
   },
   dark: {
     label: 'Dark',
-    vars: { '--r-bg': '#1c1b19', '--r-text': '#e6e1d6', '--r-sub': '#9a9385', '--r-accent': '#e0895c', '--r-bar': '#262421', '--r-line': '#3a3733', '--r-hl': '#4a4224', '--r-on': '#1c1b19' },
+    vars: { '--r-bg': '#1c1b19', '--r-text': '#e6e1d6', '--r-sub': '#9a9385', '--r-accent': '#e0895c', '--r-bar': '#262421', '--r-line': '#3a3733', '--r-hl': '#4a4224', '--r-on': '#1c1b19', '--r-danger': '#f0857a' },
   },
 };