diff --git a/resources/views/coming-soon.blade.php b/resources/views/coming-soon.blade.php
index dfb3d5b..9ac0f6a 100644
--- a/resources/views/coming-soon.blade.php
+++ b/resources/views/coming-soon.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -7,18 +7,36 @@
     <meta name="robots" content="noindex, nofollow, noarchive">
     <title>{{ config('app.name') }}</title>
     <link rel="icon" href="/favicon.svg" type="image/svg+xml">
-    @vite(['resources/css/app.css'])
+    {{-- Self-contained on purpose: this page is shown while the application is
+         mid-deploy or freshly installed, which is exactly when the Vite
+         manifest may not exist. Pulling it in through @vite would throw an
+         exception instead of rendering the reassurance the visitor came for. --}}
+    <style>
+        :root { color-scheme: light dark; --bg: #f6f7f9; --fg: #0f172a; --muted: #64748b; --accent: #f97316; --card: #ffffff; --line: #e2e8f0; }
+        @media (prefers-color-scheme: dark) { :root { --bg: #0b0f19; --fg: #e2e8f0; --muted: #94a3b8; --card: #111827; --line: #1f2937; } }
+        * { box-sizing: border-box; }
+        body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 4rem 1.5rem; text-align: center;
+               background: var(--bg); color: var(--fg);
+               font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
+        main { max-width: 30rem; }
+        .mark { width: 2.5rem; height: 2.5rem; margin: 0 auto; border-radius: 0.75rem; background: var(--accent); }
+        h1 { margin: 1.75rem 0 0; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; }
+        p { margin: 0.75rem 0 0; font-size: 0.9rem; line-height: 1.65; color: var(--muted); }
+        .badge { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; padding: 0.25rem 0.75rem;
+                 border: 1px solid var(--line); border-radius: 9999px; background: var(--card);
+                 font-size: 0.72rem; font-weight: 600; color: var(--accent); }
+        .dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
+        @keyframes pulse { 50% { opacity: 0.35; } }
+        @media (prefers-reduced-motion: reduce) { .dot { animation: none; } }
+        .foot { margin-top: 2rem; font-size: 0.75rem; color: var(--muted); }
+    </style>
 </head>
-<body class="grid min-h-full place-items-center bg-canvas px-6 py-16 text-center">
-    <main class="max-w-md">
-        <div class="mx-auto w-fit">
-            <x-ui.logo class="h-9" />
-        </div>
-
-        <h1 class="mt-8 text-2xl font-semibold tracking-tight text-ink">{{ __('coming_soon.title') }}</h1>
-        <p class="mt-3 text-sm leading-relaxed text-muted">{{ __('coming_soon.body') }}</p>
-
-        <p class="mt-8 text-xs text-faint">{{ __('coming_soon.contact') }}</p>
+<body>
+    <main>
+        <div class="mark"></div>
+        <h1>{{ __('coming_soon.title') }}</h1>
+        <p>{{ __('coming_soon.body') }}</p>
+        <p class="foot">{{ __('coming_soon.contact') }}</p>
     </main>
 </body>
 </html>
diff --git a/resources/views/errors/503.blade.php b/resources/views/errors/503.blade.php
index 02b74b7..80fcda2 100644
--- a/resources/views/errors/503.blade.php
+++ b/resources/views/errors/503.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -9,22 +9,37 @@
     <meta http-equiv="refresh" content="20">
     <title>{{ config('app.name') }}</title>
     <link rel="icon" href="/favicon.svg" type="image/svg+xml">
-    @vite(['resources/css/app.css'])
+    {{-- Self-contained on purpose: this page is shown while the application is
+         mid-deploy or freshly installed, which is exactly when the Vite
+         manifest may not exist. Pulling it in through @vite would throw an
+         exception instead of rendering the reassurance the visitor came for. --}}
+    <style>
+        :root { color-scheme: light dark; --bg: #f6f7f9; --fg: #0f172a; --muted: #64748b; --accent: #f97316; --card: #ffffff; --line: #e2e8f0; }
+        @media (prefers-color-scheme: dark) { :root { --bg: #0b0f19; --fg: #e2e8f0; --muted: #94a3b8; --card: #111827; --line: #1f2937; } }
+        * { box-sizing: border-box; }
+        body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 4rem 1.5rem; text-align: center;
+               background: var(--bg); color: var(--fg);
+               font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
+        main { max-width: 30rem; }
+        .mark { width: 2.5rem; height: 2.5rem; margin: 0 auto; border-radius: 0.75rem; background: var(--accent); }
+        h1 { margin: 1.75rem 0 0; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; }
+        p { margin: 0.75rem 0 0; font-size: 0.9rem; line-height: 1.65; color: var(--muted); }
+        .badge { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; padding: 0.25rem 0.75rem;
+                 border: 1px solid var(--line); border-radius: 9999px; background: var(--card);
+                 font-size: 0.72rem; font-weight: 600; color: var(--accent); }
+        .dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
+        @keyframes pulse { 50% { opacity: 0.35; } }
+        @media (prefers-reduced-motion: reduce) { .dot { animation: none; } }
+        .foot { margin-top: 2rem; font-size: 0.75rem; color: var(--muted); }
+    </style>
 </head>
-<body class="grid min-h-full place-items-center bg-canvas px-6 py-16 text-center">
-    <main class="max-w-md">
-        <div class="mx-auto w-fit">
-            <x-ui.logo class="h-9" />
-        </div>
-
-        <div class="mx-auto mt-8 flex w-fit items-center gap-2 rounded-pill border border-accent-border bg-accent-bg px-3 py-1">
-            <span class="size-2 animate-pulse rounded-pill bg-accent" aria-hidden="true"></span>
-            <span class="text-xs font-semibold text-accent-text">{{ __('updating.badge') }}</span>
-        </div>
-
-        <h1 class="mt-5 text-2xl font-semibold tracking-tight text-ink">{{ __('updating.title') }}</h1>
-        <p class="mt-3 text-sm leading-relaxed text-muted">{{ __('updating.body') }}</p>
-        <p class="mt-8 text-xs text-faint">{{ __('updating.auto') }}</p>
+<body>
+    <main>
+        <div class="mark"></div>
+        <div class="badge"><span class="dot"></span>{{ __('updating.badge') }}</div>
+        <h1>{{ __('updating.title') }}</h1>
+        <p>{{ __('updating.body') }}</p>
+        <p class="foot">{{ __('updating.auto') }}</p>
     </main>
 </body>
 </html>
