From 4f11e8ca6cdd2adfa22a31d0b102418e28848096 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=A2=D1=80=D0=BE=D1=88?=
 =?UTF-8?q?=D0=B8=D0=BD?= <i@atroshin.ru>
Date: Tue, 25 Aug 2026 00:04:41 +0300
Subject: [PATCH] feat: bump UI chrome font scale (xs->sm, sm->base)

- text-sm -> text-base (14px -> 16px), then text-xs -> text-sm (12px -> 14px)
  across 75 usages in 8 UI files; nav dropdown links 0.875rem -> 1rem
- Liturgical content untouched (var-based size); verse-number superscripts
  and text-[10px] micro-labels intentionally kept
---
 src/main.ts             |  4 +--
 src/styles/main.css     |  2 +-
 src/ui/app.ts           |  8 +++---
 src/ui/bible-view.ts    | 20 +++++++-------
 src/ui/calendar-view.ts | 36 ++++++++++++-------------
 src/ui/menaion-view.ts  |  8 +++---
 src/ui/prayer-view.ts   |  6 ++---
 src/ui/service-view.ts  | 10 +++----
 src/ui/settings-view.ts | 58 ++++++++++++++++++++---------------------
 9 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 1df3a6a..b786f0c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -16,8 +16,8 @@ function showUpdateToast() {
   toast.id = 'pwa-update-toast';
   toast.className = 'fixed bottom-4 left-1/2 -translate-x-1/2 z-[60] bg-surface border border-gold/40 rounded-lg shadow-xl px-4 py-3 flex items-center gap-3 max-w-[calc(100vw-2rem)]';
   toast.innerHTML = `
-    <span class="text-sm text-navy whitespace-nowrap">${t.updateAvailable}</span>
-    <button id="pwa-update-btn" class="bg-gold text-navy rounded px-3 py-1 text-sm font-bold hover:bg-gold-dark transition-colors whitespace-nowrap">${t.updateReload}</button>
+    <span class="text-base text-navy whitespace-nowrap">${t.updateAvailable}</span>
+    <button id="pwa-update-btn" class="bg-gold text-navy rounded px-3 py-1 text-base font-bold hover:bg-gold-dark transition-colors whitespace-nowrap">${t.updateReload}</button>
     <button id="pwa-update-dismiss" class="text-navy-light hover:text-navy text-lg leading-none px-1" aria-label="✕">&times;</button>
   `;
   document.body.appendChild(toast);
diff --git a/src/styles/main.css b/src/styles/main.css
index 9324568..13e81b4 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -274,7 +274,7 @@ nav details.nav-group a.nav-link {
 }
 nav details.nav-group details a.nav-link {
   padding: 0.5rem 0.5rem 0.5rem 1rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
 }
 
 /* Mobile: top-level dropdown as fixed overlay; nested in-flow */
diff --git a/src/ui/app.ts b/src/ui/app.ts
index 4ff7171..a048345 100644
--- a/src/ui/app.ts
+++ b/src/ui/app.ts
@@ -190,11 +190,11 @@ export class App {
     overlay.innerHTML = `
       <div class="bg-surface rounded-xl shadow-2xl p-6 max-w-md mx-4">
         <h3 class="text-lg font-bold text-navy mb-2">${t.settings.offlineOfferTitle}</h3>
-        <p class="text-sm text-navy mb-4">${t.settings.offlineOfferText}</p>
+        <p class="text-base text-navy mb-4">${t.settings.offlineOfferText}</p>
         <div class="flex flex-col gap-2">
           <button id="offline-offer-all" class="w-full bg-navy text-parchment rounded-lg px-4 py-2 font-bold hover:bg-navy-light transition-colors">${t.settings.offlineOfferPreloadAll}</button>
           <button id="offline-offer-choose" class="w-full bg-gold text-navy rounded-lg px-4 py-2 font-bold hover:bg-gold-light transition-colors">${t.settings.offlineOfferChoose}</button>
-          <button id="offline-offer-skip" class="w-full text-sm text-navy-light underline hover:text-navy text-center cursor-pointer">${t.settings.offlineOfferSkip}</button>
+          <button id="offline-offer-skip" class="w-full text-base text-navy-light underline hover:text-navy text-center cursor-pointer">${t.settings.offlineOfferSkip}</button>
         </div>
       </div>
     `;
@@ -252,10 +252,10 @@ export class App {
             <img src="/icons/icon-192.png" class="w-6 h-6" alt="">
             ${t.nav.appTitle}
           </span>
-          <nav class="flex flex-wrap gap-4 text-sm mx-auto">
+          <nav class="flex flex-wrap gap-4 text-base mx-auto">
             <a href="#calendar" class="nav-link hover:text-gold transition-colors" data-view="calendar">${t.nav.calendar}</a>
             <details class="nav-group relative" data-nav="library">
-              <summary class="cursor-pointer list-none hover:text-gold transition-colors flex items-center gap-1">${t.nav.library} <span class="text-xs">▾</span></summary>
+              <summary class="cursor-pointer list-none hover:text-gold transition-colors flex items-center gap-1">${t.nav.library} <span class="text-sm">▾</span></summary>
               <div class="absolute left-0 top-full mt-1 z-50 min-w-56 rounded-lg bg-dropdown-bg shadow-xl p-2 flex flex-col gap-1">
                 <a href="#bible" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="bible"><span>📖</span> <span class="font-bold">${t.nav.bible}</span></a>
                 <a href="#prayer" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="prayer">${t.nav.prayer}</a>
diff --git a/src/ui/bible-view.ts b/src/ui/bible-view.ts
index aa2e04f..b47ee39 100644
--- a/src/ui/bible-view.ts
+++ b/src/ui/bible-view.ts
@@ -172,24 +172,24 @@ export class BibleView {
     this.container.innerHTML = `
       <div class="flex flex-col h-full">
         <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="appearance-none bg-surface text-navy border border-gold/20 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-base">
             ${this.versions.map(v =>
               `<option value="${v.id}" ${v.id === this.currentVersion ? 'selected' : ''}>${v.name}</option>`
             ).join('')}
           </select>
-          <select id="book-select" class="appearance-none bg-surface text-navy border border-gold/20 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-base">
             ${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-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="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-sm">
+            <button id="prev-chapter" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-base hover:bg-gold/20 disabled:opacity-40">◀</button>
+            <select id="chapter-select" class="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-base">
             </select>
-            <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>
+            <button id="next-chapter" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-base hover:bg-gold/20 disabled:opacity-40">▶</button>
           </div>
           <div class="relative ml-auto">
-            <button id="bookmark-btn" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-sm hover:bg-gold/20" title="${this.t.bible.bookmarkAdd}">🔖</button>
+            <button id="bookmark-btn" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-base hover:bg-gold/20" title="${this.t.bible.bookmarkAdd}">🔖</button>
             <div id="bookmark-panel" class="${this.bookmarksOpen ? 'flex flex-col' : 'hidden'} absolute right-0 top-full mt-1 z-50 min-w-64 rounded-lg bg-dropdown-bg shadow-xl p-2 gap-1 text-header-text"></div>
           </div>
         </div>
@@ -308,7 +308,7 @@ export class BibleView {
     const t = this.t.bible;
     const rows = [...this.bookmarks].sort((a, b) => b.created - a.created).map(b => `
       <div class="flex items-center rounded px-1 py-1 hover:bg-white/10">
-        <button class="bookmark-jump flex-1 min-w-0 text-left text-sm truncate cursor-pointer py-1 pr-2 rounded active:bg-white/15" data-id="${b.id}" title="${escapeHtml(b.name)}">${escapeHtml(b.name)}</button>
+        <button class="bookmark-jump flex-1 min-w-0 text-left text-base truncate cursor-pointer py-1 pr-2 rounded active:bg-white/15" data-id="${b.id}" title="${escapeHtml(b.name)}">${escapeHtml(b.name)}</button>
         <div class="shrink-0 flex items-center gap-1 border-l border-gold/25 pl-2 ml-1">
           <button class="bookmark-rename w-8 h-8 flex items-center justify-center text-base rounded-md bg-white/5 border border-white/15 active:bg-white/15 cursor-pointer" data-id="${b.id}">✏</button>
           <button class="bookmark-delete w-8 h-8 flex items-center justify-center text-base rounded-md bg-white/5 border border-white/15 active:bg-white/15 cursor-pointer" data-id="${b.id}">✕</button>
@@ -317,8 +317,8 @@ export class BibleView {
     `).join('');
 
     panel.innerHTML = `
-      <button id="bookmark-add" class="w-full text-left bg-white/10 border border-gold/40 rounded px-2 py-1.5 text-sm font-bold hover:bg-white/20 cursor-pointer">＋ ${t.bookmarkAdd}</button>
-      ${rows ? `<div class="border-t border-gold/20 my-1"></div>${rows}` : `<p class="text-xs italic opacity-70 px-2 py-1">${t.bookmarkEmpty}</p>`}
+      <button id="bookmark-add" class="w-full text-left bg-white/10 border border-gold/40 rounded px-2 py-1.5 text-base font-bold hover:bg-white/20 cursor-pointer">＋ ${t.bookmarkAdd}</button>
+      ${rows ? `<div class="border-t border-gold/20 my-1"></div>${rows}` : `<p class="text-sm italic opacity-70 px-2 py-1">${t.bookmarkEmpty}</p>`}
     `;
 
     document.getElementById('bookmark-add')?.addEventListener('click', () => {
@@ -506,7 +506,7 @@ export class BibleView {
       textEl.innerHTML = `
         <div class="text-center py-12">
           <p class="text-navy-light mb-4">${this.t.bible.notAvailableOffline}</p>
-          <p class="text-sm text-navy-light">
+          <p class="text-base text-navy-light">
             ${this.t.bible.ensureDataConverted}
           </p>
         </div>
diff --git a/src/ui/calendar-view.ts b/src/ui/calendar-view.ts
index 61d7501..0441d78 100644
--- a/src/ui/calendar-view.ts
+++ b/src/ui/calendar-view.ts
@@ -486,7 +486,7 @@ export class CalendarView {
     let col = 0;
 
     gridHtml += this.t.calendar.dayNames.map(d =>
-      `<div class="text-center text-xs font-bold text-red py-1">${d}</div>`
+      `<div class="text-center text-sm font-bold text-red py-1">${d}</div>`
     ).join('');
 
     for (let i = 0; i < firstDow; i++) {
@@ -516,7 +516,7 @@ export class CalendarView {
         isToday = date.equals(JDate.today());
       }
 
-      let classes = 'day-cell p-1 text-center text-sm cursor-pointer rounded transition-colors ';
+      let classes = 'day-cell p-1 text-center text-base cursor-pointer rounded transition-colors ';
       if (isSelected) classes += 'bg-navy text-parchment font-bold ';
       else if (isToday) classes += 'bg-gold/20 font-bold ';
       else if (dayRank >= 6) classes += 'bg-red/20 text-red font-bold ';
@@ -550,7 +550,7 @@ export class CalendarView {
             <button id="next-month" class="p-2 hover:bg-navy/10 rounded">▶</button>
           </div>
 
-          <div class="grid grid-cols-7 gap-0.5 text-xs">
+          <div class="grid grid-cols-7 gap-0.5 text-sm">
             ${gridHtml}
           </div>
 
@@ -560,33 +560,33 @@ export class CalendarView {
 
         <div class="flex-1 p-3 overflow-auto">
           <div class="max-w-2xl lg:max-w-3xl xl:max-w-4xl mx-auto">
-            <h2 class="text-sm font-bold text-red mb-1">
+            <h2 class="text-base font-bold text-red mb-1">
               ${julianStr}
             </h2>
 
             <div id="day-title" class="mb-2"></div>
 
-            <div class="text-sm text-navy-light mb-2">
+            <div class="text-base text-navy-light mb-2">
               ${this.t.calendar.gregorianDate[0].toLowerCase() + this.t.calendar.gregorianDate.slice(1)}: ${gregorianStr}
             </div>
 
-            <div id="astro-panel" class="mb-2 p-2 bg-surface/50 border border-gold/20 rounded-lg text-sm text-navy">
+            <div id="astro-panel" class="mb-2 p-2 bg-surface/50 border border-gold/20 rounded-lg text-base text-navy">
               <span class="text-navy-light italic">${this.t.loading}</span>
             </div>
 
             <div id="commemorations-panel" class="mb-2 p-2 bg-surface/50 border border-gold/20 rounded-lg ${fnClass}">
               <h3 class="font-bold text-red mb-2">${this.t.calendar.commemorations}</h3>
-              <p class="text-sm text-navy-light italic">${this.t.loading}</p>
+              <p class="text-base text-navy-light italic">${this.t.loading}</p>
             </div>
 
             <div id="fasting-panel" class="mb-2 p-2 bg-surface/50 border border-gold/20 rounded-lg ${fnClass}">
               <h3 class="font-bold text-red mb-2">${this.t.calendar.fastingRule}</h3>
-              <p class="text-sm italic text-navy-light">${this.t.loading}</p>
+              <p class="text-base italic text-navy-light">${this.t.loading}</p>
             </div>
 
             <div id="readings-panel" class="mb-2 p-2 bg-surface/50 border border-gold/20 rounded-lg ${fnClass}">
               <h3 class="font-bold text-red mb-2">${this.t.calendar.readings}</h3>
-              <p class="text-sm text-navy-light italic">${this.t.loading}</p>
+              <p class="text-base text-navy-light italic">${this.t.loading}</p>
             </div>
 
             <div id="services-panel" class="mb-2 border-t border-gold/20 pt-3"></div>
@@ -652,7 +652,7 @@ export class CalendarView {
     if (fastingPanel) {
       fastingPanel.innerHTML = `
         <h3 class="font-bold text-red mb-2">${this.t.calendar.fastingRule}</h3>
-        <p class="text-sm">${fastingResult.description || this.t.notAvailable}</p>
+        <p class="text-base">${fastingResult.description || this.t.notAvailable}</p>
       `;
     }
 
@@ -742,7 +742,7 @@ export class CalendarView {
         const toneSuffix = tone > 0 ? `; ${this.t.calendar.tone}${tone}` : '';
         const feastSuffix = feastName && feastCid !== periodCid ? `; ${feastName}` : '';
         const titleColor = feastName ? 'text-red-700' : 'text-navy';
-        titleEl.innerHTML = `<span class="text-sm font-semibold ${titleColor} italic">${periodName}${toneSuffix}${feastSuffix}</span>`;
+        titleEl.innerHTML = `<span class="text-base font-semibold ${titleColor} italic">${periodName}${toneSuffix}${feastSuffix}</span>`;
       }
 
       if (feastCid) this.skipCids.add(feastCid);
@@ -754,7 +754,7 @@ export class CalendarView {
       if (cids.length === 0) {
         commPanel.innerHTML = `
           <h3 class="font-bold text-red mb-2">${this.t.calendar.commemorations}</h3>
-          <p class="text-sm text-navy-light italic">${this.t.calendar.noCommemorations}</p>
+          <p class="text-base text-navy-light italic">${this.t.calendar.noCommemorations}</p>
         `;
       } else {
         const commHtmlParts: string[] = [];
@@ -783,11 +783,11 @@ export class CalendarView {
             const icon = this.t.calendar.rankIcons[rank] || '';
             const iconHtml = icon ? `<span class="font-slavonic text-lg mr-1">${icon}</span>` : '';
             const lifeHtml = lifeText
-              ? `<div class="life-text hidden mt-2 p-3 bg-surface border border-gold/20 rounded text-sm leading-relaxed max-h-60 overflow-y-auto">${lifeText}</div>`
+              ? `<div class="life-text hidden mt-2 p-3 bg-surface border border-gold/20 rounded text-base leading-relaxed max-h-60 overflow-y-auto">${lifeText}</div>`
               : '';
             commHtmlParts.push(
 `<div class="comm-item">
-                 <div class="text-sm font-medium ${lifeText ? 'text-blue-600 underline cursor-pointer hover:text-blue-800' : 'text-navy'}">${iconHtml}${name}${lifeText ? '<span class="comm-chevron text-xs align-middle ml-1 inline-block">▶</span>' : ''}</div>
+                 <div class="text-base font-medium ${lifeText ? 'text-blue-600 underline cursor-pointer hover:text-blue-800' : 'text-navy'}">${iconHtml}${name}${lifeText ? '<span class="comm-chevron text-sm align-middle ml-1 inline-block">▶</span>' : ''}</div>
                  ${lifeHtml}
                </div>`
             );
@@ -813,7 +813,7 @@ commPanel.addEventListener('click', (e) => {
         } else {
           commPanel.innerHTML = `
             <h3 class="font-bold text-red mb-2">${this.t.calendar.commemorations}</h3>
-            <p class="text-sm text-navy-light italic">${this.t.calendar.noCommemorations}</p>
+            <p class="text-base text-navy-light italic">${this.t.calendar.noCommemorations}</p>
           `;
         }
       }
@@ -897,7 +897,7 @@ commPanel.addEventListener('click', (e) => {
       if (readingsGroups.length === 0) {
         readingsPanel.innerHTML = `
           <h3 class="font-bold text-red mb-2">${this.t.calendar.readings}</h3>
-          <p class="text-sm text-navy-light italic">${this.t.calendar.noReadings}</p>
+          <p class="text-base text-navy-light italic">${this.t.calendar.noReadings}</p>
         `;
       } else {
         const sorted = [...readingsGroups].sort((a, b) => {
@@ -917,7 +917,7 @@ commPanel.addEventListener('click', (e) => {
               refs += item.purpose;
             }
           }
-          return `<div class="text-sm text-navy"><strong>${g.service}</strong>${this.t.calendar.colon}${refs}</div>`;
+          return `<div class="text-base text-navy"><strong>${g.service}</strong>${this.t.calendar.colon}${refs}</div>`;
         }).join('');
         readingsPanel.innerHTML = `
           <h3 class="font-bold text-red mb-2">${this.t.calendar.readings}</h3>
@@ -963,7 +963,7 @@ commPanel.addEventListener('click', (e) => {
         const svcView = new ServiceView(svcPanel, this.currentDate, this.language);
         await svcView.render(false);
       } catch {
-        svcPanel.innerHTML = `<p class="text-sm text-navy-light italic">${this.t.loading}</p>`;
+        svcPanel.innerHTML = `<p class="text-base text-navy-light italic">${this.t.loading}</p>`;
       }
     }
 
diff --git a/src/ui/menaion-view.ts b/src/ui/menaion-view.ts
index f1e97f3..e309679 100644
--- a/src/ui/menaion-view.ts
+++ b/src/ui/menaion-view.ts
@@ -70,7 +70,7 @@ export class MenaionView {
             { id: 'triodion', view: 'triodion', label: this.t.nav.triodion },
           ].map(item => `
             <button
-              class="sub-nav-chip text-sm transition-colors rounded-lg px-3 py-1
+              class="sub-nav-chip text-base transition-colors rounded-lg px-3 py-1
                 ${item.id === 'menaion'
                   ? 'border border-gold bg-gold/10 text-navy font-bold'
                   : 'border border-gold/20 bg-surface/50 text-navy hover:border-gold/50'}"
@@ -119,7 +119,7 @@ export class MenaionView {
       const key = `${mm}-${dd}`;
       const n = this.index[key];
       daysHtml += `
-        <button class="px-1.5 py-0.5 text-xs rounded border transition-colors
+        <button class="px-1.5 py-0.5 text-sm rounded border transition-colors
           ${n ? 'border-gold/40 bg-gold/10 text-navy hover:border-gold cursor-pointer' : 'border-transparent text-navy-light opacity-30 cursor-default'}"
           data-date="${key}" ${n ? '' : 'disabled'}>
           ${d}
@@ -129,9 +129,9 @@ export class MenaionView {
 
     calEl.innerHTML = `
       <div class="flex items-center justify-between mb-3">
-        <button id="menaion-prev" class="text-sm text-navy-light hover:text-navy px-2 py-1">◀</button>
+        <button id="menaion-prev" class="text-base text-navy-light hover:text-navy px-2 py-1">◀</button>
         <span class="text-base font-bold text-navy">${months[month - 1]}</span>
-        <button id="menaion-next" class="text-sm text-navy-light hover:text-navy px-2 py-1">▶</button>
+        <button id="menaion-next" class="text-base text-navy-light hover:text-navy px-2 py-1">▶</button>
       </div>
       <div class="grid gap-1 grid-cols-7 mb-2">
         ${daysHtml}
diff --git a/src/ui/prayer-view.ts b/src/ui/prayer-view.ts
index a89a761..6502347 100644
--- a/src/ui/prayer-view.ts
+++ b/src/ui/prayer-view.ts
@@ -221,7 +221,7 @@ export class PrayerView {
         <div class="flex flex-wrap gap-2 mb-2">
           ${subNavItems.map(item => `
             <button
-              class="sub-nav-chip text-sm transition-colors rounded-lg px-3 py-1
+              class="sub-nav-chip text-base transition-colors rounded-lg px-3 py-1
                 ${this.collection === item.id
                   ? 'border border-gold bg-gold/10 text-navy font-bold'
                   : 'border border-gold/20 bg-surface/50 text-navy hover:border-gold/50'}"
@@ -229,8 +229,8 @@ export class PrayerView {
             >${item.label}</button>
           `).join('')}
         </div>
-        <p class="text-navy-light text-sm mb-2">${subtitle}</p>
-        <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">
+        <p class="text-navy-light text-base mb-2">${subtitle}</p>
+        <select id="prayer-select" class="w-full appearance-none bg-surface text-navy border border-gold/20 rounded-lg px-3 py-2 text-base mb-3">
           ${sections.map(s => `
             <option value="${s.id}" ${this.activeSection === s.id ? 'selected' : ''}>${s.name}</option>
           `).join('')}
diff --git a/src/ui/service-view.ts b/src/ui/service-view.ts
index bc3279e..39279fc 100644
--- a/src/ui/service-view.ts
+++ b/src/ui/service-view.ts
@@ -93,7 +93,7 @@ export class ServiceView {
       <div class="flex flex-wrap gap-2 mb-3">
         ${availableServices.map(s => `
           <button
-            class="service-tab text-sm transition-colors
+            class="service-tab text-base transition-colors
               ${this.activeService === s.id
                 ? 'border border-gold bg-gold/10 text-navy font-bold rounded-lg px-3 py-1'
                 : 'border border-gold/20 bg-surface/50 text-navy hover:border-gold/50 rounded-lg px-3 py-1'}"
@@ -132,9 +132,9 @@ export class ServiceView {
           this.container.querySelectorAll('.service-tab').forEach(t => {
             const id = t.getAttribute('data-service');
             if (id === serviceId) {
-              t.className = 'service-tab text-sm transition-colors border border-gold bg-gold/10 text-navy font-bold rounded-lg px-3 py-1';
+              t.className = 'service-tab text-base transition-colors border border-gold bg-gold/10 text-navy font-bold rounded-lg px-3 py-1';
             } else {
-              t.className = 'service-tab text-sm transition-colors border border-gold/20 bg-surface/50 text-navy hover:border-gold/50 rounded-lg px-3 py-1';
+              t.className = 'service-tab text-base transition-colors border border-gold/20 bg-surface/50 text-navy hover:border-gold/50 rounded-lg px-3 py-1';
             }
           });
           this.loadService(service);
@@ -921,7 +921,7 @@ export class ServiceView {
         contentEl.innerHTML = `
           <div class="text-center py-8">
             <p class="text-navy-light mb-2">${this.t.services.serviceProducedNoOutput}</p>
-            <p class="text-xs text-navy-light">${nodes.length} ${this.t.services.nodesAssembled}</p>
+            <p class="text-sm text-navy-light">${nodes.length} ${this.t.services.nodesAssembled}</p>
           </div>
         `;
       }
@@ -929,7 +929,7 @@ export class ServiceView {
       contentEl.innerHTML = `
         <div class="text-center py-8">
           <p class="text-navy-light mb-2">${this.t.services.errorLoading}</p>
-          <p class="text-xs text-navy-light">${err instanceof Error ? err.message : this.t.error}</p>
+          <p class="text-sm text-navy-light">${err instanceof Error ? err.message : this.t.error}</p>
         </div>
       `;
     }
diff --git a/src/ui/settings-view.ts b/src/ui/settings-view.ts
index 3c0e418..c4608a7 100644
--- a/src/ui/settings-view.ts
+++ b/src/ui/settings-view.ts
@@ -134,7 +134,7 @@ export class SettingsView {
 
         <!-- Language -->
         <div class="mb-6">
-          <label class="block text-sm font-bold text-navy mb-2">${t.settings.language}</label>
+          <label class="block text-base font-bold text-navy mb-2">${t.settings.language}</label>
           <select id="language" class="w-full border border-gold/30 rounded p-2 bg-surface text-navy">
             ${LANGUAGES.map(l => `
               <option value="${l.code}" ${l.code === this.settings.language ? 'selected' : ''}>
@@ -172,7 +172,7 @@ export class SettingsView {
           </div>
 
           <div class="p-3 bg-parchment-dark rounded border border-gold/20">
-            <p class="text-sm text-navy mb-2">${t.settings.fontPreview}</p>
+            <p class="text-base text-navy mb-2">${t.settings.fontPreview}</p>
             <div id="font-preview" class="text-lg">
               Сохрани́ мѧ, гдⷭ҇и, ꙗ҆́кѡ на тѧ̀ ᲂу҆пова́хъ
             </div>
@@ -181,7 +181,7 @@ export class SettingsView {
 
         <!-- Font Size -->
         <div class="mb-6">
-          <label class="block text-sm font-bold text-navy mb-2">
+          <label class="block text-base font-bold text-navy mb-2">
             ${t.settings.fontSize} <span id="font-size-value">${this.settings.fontSize}px</span>
           </label>
           <input type="range" id="font-size" min="12" max="32" value="${this.settings.fontSize}"
@@ -195,12 +195,12 @@ export class SettingsView {
             <label class="flex items-center gap-2 cursor-pointer">
               <input type="radio" name="calendar-type" value="julian" ${this.settings.calendarType === 'julian' ? 'checked' : ''}
                 class="accent-gold">
-              <span class="text-sm text-navy">${t.settings.julian}</span>
+              <span class="text-base text-navy">${t.settings.julian}</span>
             </label>
             <label class="flex items-center gap-2 cursor-pointer">
               <input type="radio" name="calendar-type" value="gregorian" ${this.settings.calendarType === 'gregorian' ? 'checked' : ''}
                 class="accent-gold">
-              <span class="text-sm text-navy">${t.settings.gregorian}</span>
+              <span class="text-base text-navy">${t.settings.gregorian}</span>
             </label>
           </div>
         </div>
@@ -210,21 +210,21 @@ export class SettingsView {
           <h3 class="text-lg font-bold text-red mb-3">${t.settings.locationTitle}</h3>
           <div class="flex gap-2 mb-2">
             <div class="flex-1">
-              <label class="block text-xs font-bold text-navy mb-1">${t.settings.latitude}</label>
+              <label class="block text-sm font-bold text-navy mb-1">${t.settings.latitude}</label>
               <input type="number" id="latitude" step="0.0001" value="${this.settings.latitude}"
-                class="w-full border border-gold/30 rounded p-2 bg-surface text-navy text-sm">
+                class="w-full border border-gold/30 rounded p-2 bg-surface text-navy text-base">
             </div>
             <div class="flex-1">
-              <label class="block text-xs font-bold text-navy mb-1">${t.settings.longitude}</label>
+              <label class="block text-sm font-bold text-navy mb-1">${t.settings.longitude}</label>
               <input type="number" id="longitude" step="0.0001" value="${this.settings.longitude}"
-                class="w-full border border-gold/30 rounded p-2 bg-surface text-navy text-sm">
+                class="w-full border border-gold/30 rounded p-2 bg-surface text-navy text-base">
             </div>
           </div>
           <div class="flex items-center gap-2">
-            <button id="request-location" class="bg-navy text-parchment rounded px-3 py-1 text-sm hover:bg-navy-light transition-colors">
+            <button id="request-location" class="bg-navy text-parchment rounded px-3 py-1 text-base hover:bg-navy-light transition-colors">
               ${t.settings.requestLocation}
             </button>
-            <span class="text-xs text-navy-light">${t.settings.locationNote}</span>
+            <span class="text-sm text-navy-light">${t.settings.locationNote}</span>
           </div>
         </div>
 
@@ -233,7 +233,7 @@ export class SettingsView {
           <h3 class="text-lg font-bold text-red mb-3">${t.settings.bibleSettings}</h3>
 
           <div class="mb-3">
-            <label class="block text-sm font-bold text-navy mb-1">${t.settings.defaultTranslation}</label>
+            <label class="block text-base font-bold text-navy mb-1">${t.settings.defaultTranslation}</label>
             <select id="default-bible" class="w-full border border-gold/30 rounded p-2 bg-surface text-navy">
               <option value="">${t.settings.offlineCalculating}</option>
             </select>
@@ -242,13 +242,13 @@ export class SettingsView {
           <div class="flex items-center gap-3">
             <input type="checkbox" id="show-verses" ${this.settings.showVerseNumbers ? 'checked' : ''}
               class="w-4 h-4 accent-gold">
-            <label for="show-verses" class="text-sm text-navy">${t.settings.showVerseNumbers}</label>
+            <label for="show-verses" class="text-base text-navy">${t.settings.showVerseNumbers}</label>
           </div>
 
           <div class="flex items-center gap-3">
             <input type="checkbox" id="verse-newline" ${this.settings.verseNewLine ? 'checked' : ''}
               class="w-4 h-4 accent-gold">
-            <label for="verse-newline" class="text-sm text-navy">${t.settings.verseNewLine}</label>
+            <label for="verse-newline" class="text-base text-navy">${t.settings.verseNewLine}</label>
           </div>
         </div>
 
@@ -257,7 +257,7 @@ export class SettingsView {
           <button id="install-pwa" class="hidden w-full bg-navy text-parchment rounded p-3 font-bold hover:bg-navy-light transition-colors">
             ${t.settings.installPwa}
           </button>
-          <p id="install-hint" class="hidden text-sm text-navy-light mt-2"></p>
+          <p id="install-hint" class="hidden text-base text-navy-light mt-2"></p>
         </div>
 
         <!-- Offline Content -->
@@ -266,11 +266,11 @@ export class SettingsView {
 
           <!-- Language selection for offline -->
           <div class="mb-3">
-            <label class="block text-sm font-bold text-navy mb-2">${t.settings.offlineLangs}</label>
+            <label class="block text-base font-bold text-navy mb-2">${t.settings.offlineLangs}</label>
             <div id="offline-langs" class="flex flex-wrap gap-3">
               ${LANGUAGES.map(l => `
                 <label class="flex items-center gap-1 cursor-pointer">
-                  <input type="checkbox" value="${l.code}" class="offline-lang accent-gold"> <span class="text-sm">${l.local}</span>
+                  <input type="checkbox" value="${l.code}" class="offline-lang accent-gold"> <span class="text-base">${l.local}</span>
                 </label>
               `).join('')}
             </div>
@@ -278,14 +278,14 @@ export class SettingsView {
 
           <!-- Data type selection -->
           <div class="mb-3">
-            <label class="block text-sm font-bold text-navy mb-2">${t.settings.offlineDataTypes}</label>
+            <label class="block text-base font-bold text-navy mb-2">${t.settings.offlineDataTypes}</label>
             <div id="offline-types" class="flex flex-wrap gap-3">
               <label class="flex items-center gap-1 cursor-pointer">
-                <input type="checkbox" value="calendar" checked class="offline-type accent-gold"> <span class="text-sm">${t.settings.offlineCalendar}</span>
+                <input type="checkbox" value="calendar" checked class="offline-type accent-gold"> <span class="text-base">${t.settings.offlineCalendar}</span>
               </label>
               <div id="bible-row" class="flex items-center gap-1 cursor-pointer">
-                <span class="text-sm">${t.settings.offlineBible} <span id="bible-count" class="text-xs text-navy-light">(0/0)</span></span>
-                <span id="bible-chevron" class="text-xs text-navy-light hover:text-navy select-none">▶</span>
+                <span class="text-base">${t.settings.offlineBible} <span id="bible-count" class="text-sm text-navy-light">(0/0)</span></span>
+                <span id="bible-chevron" class="text-sm text-navy-light hover:text-navy select-none">▶</span>
               </div>
             </div>
             <div id="bible-translations" class="hidden ml-4 mt-1 space-y-1 border-l border-gold/20 pl-3"></div>
@@ -293,17 +293,17 @@ export class SettingsView {
 
           <!-- Storage info and controls -->
           <div class="flex items-center justify-between gap-3 mb-2">
-            <span id="offline-stats" class="text-sm text-navy-light">${t.settings.offlineCalculating}</span>
+            <span id="offline-stats" class="text-base text-navy-light">${t.settings.offlineCalculating}</span>
             <div class="flex gap-2">
-              <button id="offline-preload" class="bg-gold text-navy rounded px-3 py-1 text-sm font-bold hover:bg-gold-dark transition-colors">${t.settings.offlinePreload}</button>
-              <button id="offline-clear" class="bg-red text-parchment rounded px-3 py-1 text-sm hover:bg-red-dark transition-colors">${t.settings.offlineClearCache}</button>
+              <button id="offline-preload" class="bg-gold text-navy rounded px-3 py-1 text-base font-bold hover:bg-gold-dark transition-colors">${t.settings.offlinePreload}</button>
+              <button id="offline-clear" class="bg-red text-parchment rounded px-3 py-1 text-base hover:bg-red-dark transition-colors">${t.settings.offlineClearCache}</button>
             </div>
           </div>
           <div id="offline-progress" class="hidden">
             <div class="w-full bg-parchment-dark rounded-full h-2 mb-1">
               <div id="offline-progress-bar" class="bg-gold h-2 rounded-full" style="width: 0%"></div>
             </div>
-            <p id="offline-progress-text" class="text-xs text-navy-light">0 / 0 ${t.settings.offlineDataTypes}</p>
+            <p id="offline-progress-text" class="text-sm text-navy-light">0 / 0 ${t.settings.offlineDataTypes}</p>
           </div>
           <pre id="diag-log" class="text-[10px] font-mono text-navy-light whitespace-pre-wrap max-h-32 overflow-auto mt-1"></pre>
         </div>
@@ -311,10 +311,10 @@ export class SettingsView {
         <!-- About -->
         <div class="mt-8 pt-6 border-t border-gold/20">
           <h3 class="text-lg font-bold text-red mb-2">${t.settings.about}</h3>
-          <p class="text-sm text-navy-light">
+          <p class="text-base text-navy-light">
             <a href="https://github.com/anttro/ponomar-pwa" target="_blank" rel="noopener" class="underline hover:text-gold">${t.settings.aboutAppName}</a>${t.settings.aboutText}
           </p>
-          <p class="text-xs text-navy-light mt-2">
+          <p class="text-sm text-navy-light mt-2">
             <a href="https://github.com/typiconman/ponomar" target="_blank" rel="noopener" class="underline hover:text-gold">
               ${t.settings.aboutLicense}
             </a>
@@ -497,14 +497,14 @@ export class SettingsView {
               return `
                 <label class="flex items-center gap-1 cursor-pointer">
                   <input type="checkbox" value="${v.id}" class="bible-trans accent-gold" ${isCached ? 'checked' : ''}>
-                  <span class="text-xs text-navy">${v.name}</span>
+                  <span class="text-sm text-navy">${v.name}</span>
                   <span class="text-[10px] text-navy-light">(${OfflineManager.getBibleSize(v.id) || '?'})</span>
                 </label>
               `;
             }));
             container.innerHTML = `
               <div class="mb-1">
-                <button id="select-all-bible" class="text-xs text-blue-600 underline hover:text-blue-800 cursor-pointer">${t.settings.offlineSelectAll}</button>
+                <button id="select-all-bible" class="text-sm text-blue-600 underline hover:text-blue-800 cursor-pointer">${t.settings.offlineSelectAll}</button>
               </div>
             ` + html.join('');
             document.getElementById('select-all-bible')?.addEventListener('click', () => {