ปรับ look and feel

web/app/components/AuthGate.vue

@@ -4,25 +4,18 @@ const { ready, isAuthenticated, login } = useAuth()
 </script>
 
 <template>
-  <div v-if="!ready" class="flex items-center justify-center gap-3 py-16 text-sm text-slate-500 dark:text-slate-400">
-    <span class="h-4 w-4 animate-spin rounded-full border-2 border-slate-300 border-t-slate-600 dark:border-slate-600 dark:border-t-slate-300" />
+  <div v-if="!ready" class="flex items-center justify-center gap-3 py-16 text-sm text-muted">
+    <span class="spinner" />
     กำลังตรวจสอบสถานะการเข้าสู่ระบบ…
   </div>
 
-  <div
-    v-else-if="!isAuthenticated"
-    class="rounded-lg border border-slate-200 bg-white p-8 text-center dark:border-slate-700 dark:bg-slate-800"
-  >
-    <h2 class="text-lg font-semibold">ต้องเข้าสู่ระบบก่อนใช้งานหน้านี้</h2>
-    <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">
+  <div v-else-if="!isAuthenticated" class="card mx-auto max-w-md p-8 text-center">
+    <h2 class="text-section-title">ต้องเข้าสู่ระบบก่อนใช้งานหน้านี้</h2>
+    <p class="mt-2 text-body-lg text-muted">
       ระบบยืนยันตัวตนผ่าน Keycloak (realm <span class="font-mono">word-versioning</span>)
       — กดปุ่มด้านล่างเพื่อเปิดหน้าเข้าสู่ระบบ
     </p>
-    <button
-      type="button"
-      class="mt-4 rounded-md bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700"
-      @click="login()"
-    >
+    <button type="button" class="btn btn-primary mt-6 w-full sm:w-auto" @click="login()">
       เข้าสู่ระบบด้วย Keycloak
     </button>
   </div>