DRY pass #2, batch 5, F14: the web's repeated class lists become component classes (#5372)

style.css gains the classes the views spelled out in full: .section-label
(17 sites), .hint (20), .form-error (13), .alert-error (5), .row-card (5),
.list-empty (5), .field (5), .page-shell (3), and the small row action
.btn-sm (4) / .btn-sm-danger (3). Only exact runs moved, so nothing renders
differently; spacing a site adds beyond a run stays a utility beside it.

Kept: the Reminders and Timeline small buttons. They carry no text colour
and inherit it, so putting them on .btn-sm would recolour them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/views/AccountView.vue

@@ -142,11 +142,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="mx-auto min-h-full max-w-2xl px-4 py-8">
+  <div class="page-shell">
     <PageHeader title="Account" />
 
-    <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-neutral-400">Linked devices</h2>
-    <p class="mb-6 max-w-xl text-sm text-neutral-500 dark:text-neutral-400">
+    <h2 class="mb-2 section-label">Linked devices</h2>
+    <p class="mb-6 max-w-xl hint">
       Link the Inkwell desktop or mobile app to sync your notes. Create a device token here, then
       paste it into the app when it asks to connect. You can revoke a device at any time.
     </p>
@@ -199,7 +199,7 @@ onMounted(() => {
       <BaseButton type="submit" :loading="creating">Create token</BaseButton>
     </form>
 
-    <p v-if="error" class="mb-4 text-sm text-red-600 dark:text-red-400">{{ error }}</p>
+    <p v-if="error" class="mb-4 form-error">{{ error }}</p>
 
     <!-- Device list -->
     <div v-if="devices.loading" class="py-10 text-center text-sm text-neutral-400">Loading…</div>
@@ -207,13 +207,13 @@ onMounted(() => {
       v-else-if="!devices.items.length"
       class="rounded-xl border border-dashed border-neutral-300 py-10 text-center dark:border-neutral-700"
     >
-      <p class="text-sm text-neutral-500 dark:text-neutral-400">No devices linked yet.</p>
+      <p class="hint">No devices linked yet.</p>
     </div>
     <ul v-else class="flex flex-col gap-2">
       <li
         v-for="d in devices.items"
         :key="d.id"
-        class="flex items-center justify-between gap-4 rounded-xl border border-neutral-200 px-4 py-3 dark:border-neutral-800"
+        class="row-card"
       >
         <div class="flex min-w-0 items-center gap-3">
           <span class="text-neutral-400"><Icon name="device" /></span>
@@ -226,7 +226,7 @@ onMounted(() => {
         </div>
         <button
           type="button"
-          class="shrink-0 rounded-md border border-neutral-300 px-2.5 py-1 text-xs text-red-600 hover:bg-red-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:text-red-400 dark:hover:bg-red-950/40"
+          class="shrink-0 btn-sm-danger"
           @click="revoke(d.id, d.name)"
         >
           Revoke
@@ -235,9 +235,9 @@ onMounted(() => {
     </ul>
 
     <template v-if="storage">
-      <h2 class="mb-2 mt-10 text-xs font-semibold uppercase tracking-wide text-neutral-400">Storage</h2>
+      <h2 class="mb-2 mt-10 section-label">Storage</h2>
       <div
-        class="flex items-center justify-between gap-4 rounded-xl border border-neutral-200 px-4 py-3 dark:border-neutral-800"
+        class="row-card"
       >
         <div class="min-w-0">
           <p class="text-sm font-medium text-neutral-800 dark:text-neutral-100">Attachments</p>
@@ -247,8 +247,8 @@ onMounted(() => {
       </div>
     </template>
 
-    <h2 class="mb-2 mt-10 text-xs font-semibold uppercase tracking-wide text-neutral-400">Password</h2>
-    <p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">Changing it signs you out everywhere else.</p>
+    <h2 class="mb-2 mt-10 section-label">Password</h2>
+    <p class="mb-4 hint">Changing it signs you out everywhere else.</p>
     <form class="flex max-w-sm flex-col gap-3" @submit.prevent="changePassword">
       <BaseInput
         id="current-password"
@@ -273,9 +273,9 @@ onMounted(() => {
       </div>
     </form>
 
-    <h2 class="mb-2 mt-10 text-xs font-semibold uppercase tracking-wide text-neutral-400">Sessions</h2>
+    <h2 class="mb-2 mt-10 section-label">Sessions</h2>
     <div
-      class="flex items-center justify-between gap-4 rounded-xl border border-neutral-200 px-4 py-3 dark:border-neutral-800"
+      class="row-card"
     >
       <div class="min-w-0">
         <p class="text-sm font-medium text-neutral-800 dark:text-neutral-100">Sign out everywhere else</p>