style: align UI to the BASTION reference (atmosphere + depth)

From clusev-template/reference: void background with a fine dot-grid + orange top
vignette, panel elevation (shadow-panel token), tonal scrollbars, a left accent
bar + accent icon on the active nav item, status-dot + brandmark glows, and a
motion-safe ping. @theme/tokens only — no inline styles.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

resources/css/app.css

@@ -51,6 +51,10 @@
     --radius-sm: 6px;
     --radius-md: 8px;
     --radius-lg: 10px;
+
+    /* elevation → shadow-panel / shadow-pop */
+    --shadow-panel: inset 0 1px 0 rgb(255 255 255 / 0.03), 0 1px 2px rgb(0 0 0 / 0.4), 0 14px 30px -18px rgb(0 0 0 / 0.85);
+    --shadow-pop: 0 10px 34px -10px rgb(0 0 0 / 0.75);
 }
 
 /* ── base layer ───────────────────────────────────────────────────────── */
@@ -81,13 +85,33 @@
     }
 
     body {
-        background-color: var(--color-base);
+        background-color: var(--color-void);
         color: var(--color-ink);
         font-family: var(--font-sans);
         -webkit-font-smoothing: antialiased;
         text-rendering: optimizeLegibility;
     }
 
+    /* atmospheric void: fine dot-grid + orange top vignette + bottom sink */
+    body::before {
+        content: '';
+        position: fixed;
+        inset: 0;
+        z-index: 0;
+        pointer-events: none;
+        background:
+            radial-gradient(120% 70% at 50% -8%, rgb(255 107 44 / 0.07), transparent 55%),
+            radial-gradient(100% 60% at 50% 112%, rgb(0 0 0 / 0.55), transparent 50%),
+            radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.028) 1px, transparent 0);
+        background-size: auto, auto, 22px 22px;
+    }
+
+    /* thin dark scrollbars */
+    ::-webkit-scrollbar { width: 10px; height: 10px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: var(--color-raised); border-radius: 9px; border: 2px solid var(--color-base); }
+    ::-webkit-scrollbar-thumb:hover { background: var(--color-line-strong); }
+
     /* numbers/IPs/paths render mono */
     .tabular {
         font-variant-numeric: tabular-nums;

resources/views/components/kpi.blade.php

@@ -9,7 +9,7 @@
         'offline' => 'bg-offline', 'accent' => 'bg-accent', 'cyan' => 'bg-cyan',
     ][$tone] ?? 'bg-accent';
 @endphp
-<div {{ $attributes->merge(['class' => 'rounded-lg border border-line bg-surface p-4']) }}>
+<div {{ $attributes->merge(['class' => 'rounded-lg border border-line bg-surface p-4 shadow-panel']) }}>
     <div class="flex items-center justify-between gap-2">
         <p class="font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ $label }}</p>
         @if ($icon)

resources/views/components/nav-item.blade.php

@@ -2,10 +2,10 @@
 <a href="{{ $href }}"
    @class([
        'group flex min-h-11 items-center gap-3 rounded-md border px-3 py-2 text-sm transition-colors',
-       'border-accent/25 bg-accent/10 text-accent-text' => $active,
+       'border-accent/25 bg-accent/10 text-ink shadow-[inset_2px_0_0_var(--color-accent)]' => $active,
        'border-transparent text-ink-2 hover:bg-raised hover:text-ink' => ! $active,
    ])
    @if ($active) aria-current="page" @endif>
-    <x-icon :name="$icon" class="h-[18px] w-[18px] shrink-0" />
+    <x-icon :name="$icon" @class(['h-[18px] w-[18px] shrink-0', 'text-accent' => $active]) />
     <span class="truncate">{{ $slot }}</span>
 </a>

resources/views/components/panel.blade.php

@@ -1,5 +1,5 @@
 @props(['title' => null, 'subtitle' => null, 'padded' => true])
-<section {{ $attributes->merge(['class' => 'overflow-hidden rounded-lg border border-line bg-surface']) }}>
+<section {{ $attributes->merge(['class' => 'overflow-hidden rounded-lg border border-line bg-surface shadow-panel']) }}>
     @if ($title)
         <div class="flex items-center gap-3 border-b border-line px-4 py-3 sm:px-5">
             <div class="min-w-0">

resources/views/components/sidebar.blade.php

@@ -5,7 +5,7 @@
        aria-label="Seitennavigation">
     {{-- Brand --}}
     <div class="flex h-14 shrink-0 items-center gap-2.5 border-b border-line px-4">
-        <span class="grid h-7 w-7 place-items-center rounded-sm bg-accent/15 text-accent">
+        <span class="grid h-8 w-8 place-items-center rounded-md border border-accent/25 bg-accent/10 text-accent shadow-[0_0_18px_-2px_var(--color-accent)]">
             <x-icon name="server" class="h-4 w-4" />
         </span>
         <span class="font-display text-lg font-semibold tracking-wide text-ink">Clus<span class="text-accent">e</span>v</span>

resources/views/components/status-dot.blade.php

@@ -1,10 +1,11 @@
 @props(['status' => 'offline', 'ping' => false])
 @php
     $c = ['online' => 'bg-online', 'warning' => 'bg-warning', 'offline' => 'bg-offline'][$status] ?? 'bg-ink-4';
+    $glow = ['online' => 'shadow-[0_0_6px_var(--color-online)]', 'warning' => 'shadow-[0_0_5px_var(--color-warning)]'][$status] ?? '';
 @endphp
 <span {{ $attributes->merge(['class' => 'relative inline-flex h-2 w-2 shrink-0']) }}>
     @if ($ping)
-        <span class="absolute inline-flex h-full w-full rounded-full {{ $c }} opacity-60 animate-ping"></span>
+        <span class="absolute inline-flex h-full w-full rounded-full {{ $c }} opacity-60 motion-safe:animate-ping"></span>
     @endif
-    <span class="relative inline-flex h-2 w-2 rounded-full {{ $c }}"></span>
+    <span class="relative inline-flex h-2 w-2 rounded-full {{ $c }} {{ $glow }}"></span>
 </span>

resources/views/layouts/app.blade.php

@@ -8,7 +8,7 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @livewireStyles
 </head>
-<body class="min-h-screen overflow-x-clip bg-base font-sans text-ink antialiased selection:bg-accent/25">
+<body class="min-h-screen overflow-x-clip bg-void font-sans text-ink antialiased selection:bg-accent/25">
     <div x-data="{ nav: false, desktop: window.matchMedia('(min-width: 1024px)').matches }"
          @resize.window.debounce.200ms="desktop = window.matchMedia('(min-width: 1024px)').matches">
         {{-- mobile/tablet backdrop --}}
@@ -18,7 +18,7 @@
 
         <x-sidebar />
 
-        <div class="lg:pl-[272px]">
+        <div class="relative z-10 lg:pl-[272px]">
             <x-topbar />
             <main class="mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
                 {{ $slot }}