phase-4: scss upgrade

ui/src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script>
   import { page, navigating } from '$app/stores';
-  import '../app.css';
+  import '../styles/app.scss';
   let { children } = $props();
 
   // Label shown under the nav progress bar while loading a page
@@ -43,90 +43,4 @@
   </main>
 </div>
 
-<style>
-  .shell { min-height: 100vh; display: flex; flex-direction: column; }
-
-  nav {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-    padding: 14px 32px;
-    border-bottom: 1px solid #1e293b;
-    background: #0f1117;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-  }
-
-  .brand { font-size: 15px; font-weight: 700; color: #f1f5f9; }
-
-  .links { display: flex; gap: 4px; margin-left: auto; }
-
-  .links a {
-    color: #64748b;
-    text-decoration: none;
-    padding: 6px 14px;
-    border-radius: 6px;
-    font-weight: 500;
-    transition: color 0.15s, background 0.15s;
-  }
-  .links a:hover { color: #e2e8f0; background: #1e293b; }
-  .links a.active { color: #e2e8f0; background: #1e293b; }
-
-  main { flex: 1; padding: 28px 32px; }
-
-  /* ── Navigation progress ─────────────────────────────────────────── */
-  .nav-progress {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    z-index: 100;
-    background: #1e293b;
-    overflow: hidden;
-  }
-
-  .nav-bar {
-    height: 100%;
-    background: #3b82f6;
-    animation: progress 1.5s ease-in-out infinite;
-    transform-origin: left;
-  }
-
-  @keyframes progress {
-    0%   { transform: translateX(-100%) scaleX(0.3); }
-    50%  { transform: translateX(0%)    scaleX(0.7); }
-    100% { transform: translateX(100%)  scaleX(0.3); }
-  }
-
-  /* Centered spinner + label in the page body */
-  .nav-overlay {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 14px;
-    padding: 100px 0;
-    flex: 1;
-  }
-
-  .nav-spinner {
-    width: 40px;
-    height: 40px;
-    border: 3px solid #1e293b;
-    border-top-color: #3b82f6;
-    border-radius: 50%;
-    animation: spin 0.7s linear infinite;
-  }
-
-  .nav-label {
-    font-size: 12px;
-    color: #475569;
-    letter-spacing: 0.02em;
-  }
-
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-</style>
+<!-- All layout styles live in src/styles/_layout.css (global) -->