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

@@ -78,7 +78,7 @@ export default function StudyPage() {
 
   return (
     <StudioShell stage="study" fixedHeight>
-      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto lg:grid lg:grid-cols-[16rem_minmax(0,1fr)_27rem] lg:overflow-hidden xl:grid-cols-[17rem_minmax(0,1fr)_29rem]">
+      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto lg:grid lg:grid-cols-[15rem_minmax(0,1fr)_28rem] lg:overflow-hidden xl:grid-cols-[16rem_minmax(0,1fr)_32rem]">
         <aside className="hidden min-h-0 border-r border-[var(--r-line)] bg-[var(--r-bar)] lg:block">
           <OutlineRail project={project} selectedId={selectedChunk?.id} onSelect={select} onEditOutline={() => setCurrentPage('setup')} />
         </aside>
@@ -107,21 +107,30 @@ export default function StudyPage() {
                 interlinear={resources.interlinearData} interlinearLoading={resources.interlinearLoading}
                 addedStrongs={addedStrongs} onPickWord={pickWord}
               />
-              <NotesPane chunk={selectedChunk} updateChunk={updateChunk} allTags={allTags} />
             </div>
           ) : (
             <p className="p-8 text-center text-sm text-[var(--r-sub)]">Add a chunk in the Outline stage to start studying.</p>
           )}
         </main>
 
-        <aside className="min-h-0 border-t border-[var(--r-line)] bg-[var(--r-bar)] lg:border-l lg:border-t-0">
+        <aside className="flex min-h-0 flex-col gap-3 border-t border-[var(--r-line)] bg-[var(--r-bar)] p-3 lg:border-l lg:border-t-0">
           {selectedChunk && chapter && (
-            <ResourcePane
-              tab={tab} setTab={setTab} chunk={selectedChunk} chapter={chapter} chapterIndex={chapterIndex} project={project}
-              updateChunk={updateChunk} notify={notify}
-              resources={resources} wordStudy={wordStudy} crossRefs={crossRefs}
-              openWordId={openWordId} setOpenWordId={setOpenWordId}
-            />
+            <>
+              <section aria-label="Notes" className="flex min-h-[22rem] flex-col overflow-hidden rounded-2xl border border-[var(--r-line)] bg-[var(--r-bg)] lg:min-h-0 lg:flex-[11]">
+                <h2 className="shrink-0 border-b border-[var(--r-line)] px-4 py-2.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Your notes</h2>
+                <div className="min-h-0 flex-1 overflow-y-auto p-3">
+                  <NotesPane chunk={selectedChunk} updateChunk={updateChunk} allTags={allTags} />
+                </div>
+              </section>
+              <section aria-label="Resources" className="flex min-h-[24rem] flex-col overflow-hidden rounded-2xl border border-[var(--r-line)] bg-[var(--r-bg)] lg:min-h-0 lg:flex-[10]">
+                <ResourcePane
+                  tab={tab} setTab={setTab} chunk={selectedChunk} chapter={chapter} chapterIndex={chapterIndex} project={project}
+                  updateChunk={updateChunk} notify={notify}
+                  resources={resources} wordStudy={wordStudy} crossRefs={crossRefs}
+                  openWordId={openWordId} setOpenWordId={setOpenWordId}
+                />
+              </section>
+            </>
           )}
         </aside>
       </div>