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/ReadingPlansPage.jsx

@@ -113,11 +113,11 @@ export default function ReadingPlansPage() {
       <main className="mx-auto max-w-3xl px-4 pt-5 font-sans">
         {readingPlanSyncStatus === 'error' && (
           <div className="mb-4 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-red-300 px-4 py-3 text-sm">
-            <span className="text-red-700">
+            <span className="text-[var(--r-danger,#b42318)]">
               Couldn’t sync your reading plans to the server. Changes are only saved on this device until this is fixed.
               {readingPlanSyncError && <span className="block text-xs">{readingPlanSyncError}</span>}
             </span>
-            <button type="button" onClick={retryReadingPlanSync} className="shrink-0 rounded-lg border border-red-300 px-3 py-1.5 font-medium text-red-700 hover:bg-red-50">Retry</button>
+            <button type="button" onClick={retryReadingPlanSync} className="shrink-0 rounded-lg border border-red-300 px-3 py-1.5 font-medium text-[var(--r-danger,#b42318)] hover:bg-red-50">Retry</button>
           </div>
         )}
 
@@ -217,7 +217,7 @@ export default function ReadingPlansPage() {
                     </div>
                     <div className="flex shrink-0 items-center gap-3 text-xs">
                       <button type="button" onClick={() => restartPlan(p.id)} className="font-medium hover:underline">Start again</button>
-                      <button type="button" onClick={() => { if (window.confirm('Remove this from your history?')) removePlanProgress(p.id); }} className="text-red-600 hover:underline">Remove</button>
+                      <button type="button" onClick={() => { if (window.confirm('Remove this from your history?')) removePlanProgress(p.id); }} className="text-[var(--r-danger,#b42318)] hover:underline">Remove</button>
                     </div>
                   </div>
                 );