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/pages/SetupPage.jsx

@@ -32,7 +32,7 @@ function PassageForm({ setup, onField, onTitleChange, onLoad, loading, error, wi
         )}
       </div>
       <div className="flex items-center justify-between gap-3">
-        <p className="text-xs text-[var(--r-sub)]">{error ? <span className="text-red-600">{error}</span> : 'Text: Berean Standard Bible (BSB).'}</p>
+        <p className="text-xs text-[var(--r-sub)]">{error ? <span className="text-[var(--r-danger,#b42318)]">{error}</span> : 'Text: Berean Standard Bible (BSB).'}</p>
         <button type="button" onClick={onLoad} disabled={loading} className={primaryBtn}>{loading ? 'Loading…' : 'Load chapter'}</button>
       </div>
     </div>
@@ -180,7 +180,7 @@ export default function SetupPage() {
                         <div className="mt-2 flex items-center gap-1.5">
                           <button type="button" onClick={() => b.moveChunk(chunk.id, -1)} disabled={index === 0} aria-label="Move chunk up" className={smallBtn}>↑</button>
                           <button type="button" onClick={() => b.moveChunk(chunk.id, 1)} disabled={index === activeChapter.chunks.length - 1} aria-label="Move chunk down" className={smallBtn}>↓</button>
-                          <button type="button" onClick={() => b.deleteChunk(chunk.id)} className={`${smallBtn} ml-auto text-red-700`}>× Delete</button>
+                          <button type="button" onClick={() => b.deleteChunk(chunk.id)} className={`${smallBtn} ml-auto text-[var(--r-danger,#b42318)]`}>× Delete</button>
                         </div>
                       </div>
                     ))}