feat(11-05): visual consistency pass — typography, focus-visible, hover/active states, skeleton cleanup

- Normalize page titles to text-2xl font-semibold (was font-bold in TopicsView, DocumentView, SharedView)
- Normalize section titles to text-lg font-semibold (was text-xl in SettingsPreferencesTab, SettingsAiTab, SettingsCloudTab, BackupCodesDisplay, CloudCredentialModal)
- Normalize panel headings to text-sm font-semibold (SettingsAccountTab, DocumentView)
- Normalize AdminOverviewView page title from text-xl to text-2xl font-semibold
- Replace decorative sidebar skeleton inline styles with static Tailwind width classes (w-12/w-16/w-20)
- Add focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 to all interactive buttons across the app
- Add active:bg-* states to primary and secondary buttons for coherent press feedback
- Update nav-link scoped CSS in AppSidebar and AdminSidebar to include active:bg-gray-200 and focus-visible ring
- Add 7 new tests: VISUAL-01 skeleton class invariant, VISUAL-04 focus-visible invariant, VISUAL-03 typography invariant (36 test files, 270 tests pass)

frontend/src/views/DocumentView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="p-8 max-w-4xl mx-auto">
     <!-- Back -->
-    <button @click="$router.back()" class="text-sm text-indigo-600 hover:underline mb-6 flex items-center gap-1">
+    <button @click="$router.back()" class="text-sm text-indigo-600 hover:underline mb-6 flex items-center gap-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 rounded">
       ← Back
     </button>
 
@@ -12,7 +12,7 @@
       <!-- Header -->
       <div class="flex items-start justify-between gap-4 mb-6">
         <div>
-          <h2 class="text-2xl font-bold text-gray-900 break-all">{{ doc.original_name }}</h2>
+          <h2 class="text-2xl font-semibold text-gray-900 break-all">{{ doc.original_name }}</h2>
           <p class="text-sm text-gray-400 mt-1">
             Uploaded {{ formatDate(doc.created_at) }} · {{ formatSize(doc.size_bytes) }} · {{ doc.mime_type }}
           </p>
@@ -22,13 +22,13 @@
           <button
             v-if="isPdf"
             @click="openPdf"
-            class="text-sm px-3 py-1.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
+            class="text-sm px-3 py-1.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 active:bg-indigo-800 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
           >
             {{ pdfOpenMode === 'in_app' ? 'Preview' : 'Open' }}
           </button>
           <button
             @click="confirmDelete"
-            class="text-sm text-red-500 hover:text-red-700"
+            class="text-sm text-red-500 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-1 rounded"
           >Delete</button>
         </div>
       </div>
@@ -36,19 +36,19 @@
       <!-- Topics -->
       <div class="bg-white border border-gray-200 rounded-xl p-5 mb-5">
         <div class="flex items-center justify-between mb-3">
-          <h3 class="font-semibold text-gray-800">Topics</h3>
+          <h3 class="text-sm font-semibold text-gray-800">Topics</h3>
           <div class="flex gap-2">
             <button
               @click="reclassify"
               :disabled="classifying"
-              class="text-xs px-3 py-1.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50"
+              class="text-xs px-3 py-1.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 active:bg-indigo-800 transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
             >
               {{ classifying ? 'Classifying…' : 'Re-classify' }}
             </button>
             <button
               @click="suggestTopics"
               :disabled="suggesting"
-              class="text-xs px-3 py-1.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
+              class="text-xs px-3 py-1.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 active:bg-gray-100 transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
             >
               {{ suggesting ? 'Suggesting…' : 'Suggest Topics' }}
             </button>
@@ -97,7 +97,7 @@
 
       <!-- Extracted text -->
       <div class="bg-white border border-gray-200 rounded-xl p-5">
-        <h3 class="font-semibold text-gray-800 mb-3">Extracted Text</h3>
+        <h3 class="text-sm font-semibold text-gray-800 mb-3">Extracted Text</h3>
         <pre class="text-xs text-gray-600 whitespace-pre-wrap font-mono bg-gray-50 rounded-lg p-4 max-h-96 overflow-y-auto">{{ doc.extracted_text || '(no text extracted)' }}</pre>
       </div>
     </template>
@@ -132,11 +132,11 @@
         <div class="flex gap-2 justify-end">
           <button
             @click="cancelCloudDeleteWarning"
-            class="border border-gray-300 text-gray-700 text-sm px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors"
+            class="border border-gray-300 text-gray-700 text-sm px-4 py-2 rounded-lg hover:bg-gray-50 active:bg-gray-100 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
           >Cancel</button>
           <button
             @click="confirmRemoveOnly"
-            class="bg-red-600 hover:bg-red-700 text-white text-sm px-4 py-2 rounded-lg transition-colors"
+            class="bg-red-600 hover:bg-red-700 active:bg-red-800 text-white text-sm px-4 py-2 rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-1"
           >Remove from app</button>
         </div>
       </div>