fix: Bible reader toolbar & select dark theme; service tab scroll jump

- Bible reader toolbar: bg-navy->bg-surface/50, selects: appearance-none bg-surface
- Prayer view select: appearance-none bg-surface (match settings style)
- Service view: preserve content height before loading to prevent scroll jump

src/ui/bible-view.ts

@@ -131,22 +131,22 @@ export class BibleView {
 
     this.container.innerHTML = `
       <div class="flex flex-col h-full">
-        <div class="bg-navy text-parchment p-3 flex items-center gap-4 flex-wrap">
+        <div class="bg-surface/50 border border-gold/20 rounded-lg p-3 flex items-center gap-4 flex-wrap">
-          <select id="version-select" class="bg-navy-light text-parchment border border-gold/30 rounded px-2 py-1 text-sm">
+          <select id="version-select" class="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-sm">
             ${this.versions.map(v =>
               `<option value="${v.id}" ${v.id === this.currentVersion ? 'selected' : ''}>${v.name}</option>`
             ).join('')}
           </select>
-          <select id="book-select" class="bg-navy-light text-parchment border border-gold/30 rounded px-2 py-1 text-sm">
+          <select id="book-select" class="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-sm">
             ${this.getBooksForVersion().map(b =>
               `<option value="${b.id}" ${b.id === this.currentBook ? 'selected' : ''}>${b.name}</option>`
             ).join('')}
           </select>
           <div class="flex items-center gap-1">
-            <button id="prev-chapter" class="bg-navy-light text-parchment border border-gold/30 rounded px-2 py-1 text-sm hover:bg-gold/20 disabled:opacity-40">◀</button>
+            <button id="prev-chapter" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-sm hover:bg-gold/20 disabled:opacity-40">◀</button>
-            <select id="chapter-select" class="bg-navy-light text-parchment border border-gold/30 rounded px-2 py-1 text-sm">
+            <select id="chapter-select" class="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-sm">
             </select>
-            <button id="next-chapter" class="bg-navy-light text-parchment border border-gold/30 rounded px-2 py-1 text-sm hover:bg-gold/20 disabled:opacity-40">▶</button>
+            <button id="next-chapter" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-sm hover:bg-gold/20 disabled:opacity-40">▶</button>
           </div>
         </div>
 

src/ui/prayer-view.ts

@@ -226,7 +226,7 @@ export class PrayerView {
           `).join('')}
         </div>
         <p class="text-navy-light text-sm mb-2">${subtitle}</p>
-        <select id="prayer-select" class="w-full border border-gold/20 bg-surface/50 text-navy rounded-lg px-3 py-2 text-sm mb-3">
+        <select id="prayer-select" class="w-full appearance-none bg-surface text-navy border border-gold/20 rounded-lg px-3 py-2 text-sm mb-3">
           ${sections.map(s => `
             <option value="${s.id}" ${this.activeSection === s.id ? 'selected' : ''}>${s.name}</option>
           `).join('')}

src/ui/service-view.ts

@@ -791,6 +791,10 @@ export class ServiceView {
     const contentEl = document.getElementById('service-content');
     if (!contentEl) return;
 
+    const prevHeight = contentEl.offsetHeight;
+    if (prevHeight > 0) {
+      contentEl.style.minHeight = prevHeight + 'px';
+    }
     contentEl.innerHTML = `<p class="text-navy-light italic">${this.t.loading}</p>`;
 
     try {