Persistent sidebar, nav & flat theme overhaul

Introduce a persistent left sidebar, update navigation to support regions, and convert the UI to a flat/no-blur visual style.

Key changes:
- index.html: add a persistent sidebar markup with nav items, user area and main app layout.
- src/core/nav.js: improve candidate scoring to use element bounding centers and overlap penalty; include extra focus roots; add region metadata handling, helpers for resolving default content/sidebar indices, and special-case movements between sidebar and content; respect contract.useNebulaNavigation flag.
- src/main.js: manage sidebar visibility for full-screen flows (lock/onboarding), update sidebar active state on view changes, include sidebar as an extraFocusRoot when appropriate, and handle sidebar item activation on accept to navigate views.
- src/styles/*: major visual/theme updates to remove blur/glow effects (Zero-Blur policy), add flat sidebar styles, update components to solid borders and simpler focus styling, adjust theme variables (palette, spacing, durations), and redesign the home view layout and controls.

Rationale: provide a persistent, keyboard/controller-friendly sidebar for quick navigation while simplifying visuals to a flat, performance-friendly theme and refining focus/navigation behavior across sidebar and content regions.

src/index.html

@@ -24,13 +24,54 @@
       <div class="nebula-layer fog"></div>
       <div class="nebula-layer vignette"></div>
     </div>
-    <div class="shell-chrome" aria-hidden="true">
-      <div class="shell-depth-blur"></div>
+
+    <div class="app-layout">
+
+      <!-- Persistent left sidebar — hidden for lock/onboarding via JS class -->
+      <nav class="sidebar" id="sidebar" aria-label="Main navigation">
+        <div class="sidebar-logo">
+          <span class="sidebar-logo-icon" aria-hidden="true">✦</span>
+          <span class="sidebar-logo-text">Nebula OS</span>
+        </div>
+
+        <ul class="sidebar-nav" role="list">
+          <li class="sidebar-nav-item is-active focusable" data-sidebar-nav="home" data-target="home" data-nav-region="sidebar" data-focusable="true" data-row="0" data-col="-1" data-focus-key="sidebar-home" role="listitem" aria-current="page">
+            <span class="sidebar-nav-icon" aria-hidden="true">⌂</span>
+            <span class="sidebar-nav-label">Home</span>
+          </li>
+          <li class="sidebar-nav-item focusable" data-sidebar-nav="library" data-target="library" data-nav-region="sidebar" data-focusable="true" data-row="1" data-col="-1" data-focus-key="sidebar-library" role="listitem">
+            <span class="sidebar-nav-icon" aria-hidden="true">⊟</span>
+            <span class="sidebar-nav-label">Library</span>
+          </li>
+          <li class="sidebar-nav-item focusable" data-sidebar-nav="media" data-nav-region="sidebar" data-focusable="true" data-row="2" data-col="-1" data-focus-key="sidebar-media" data-disabled="true" role="listitem" aria-disabled="true">
+            <span class="sidebar-nav-icon" aria-hidden="true">▶</span>
+            <span class="sidebar-nav-label">Media</span>
+          </li>
+          <li class="sidebar-nav-item focusable" data-sidebar-nav="store" data-nav-region="sidebar" data-focusable="true" data-row="3" data-col="-1" data-focus-key="sidebar-store" data-disabled="true" role="listitem" aria-disabled="true">
+            <span class="sidebar-nav-icon" aria-hidden="true">⊞</span>
+            <span class="sidebar-nav-label">Store</span>
+          </li>
+          <li class="sidebar-nav-item focusable" data-sidebar-nav="settings" data-target="settings" data-nav-region="sidebar" data-focusable="true" data-row="4" data-col="-1" data-focus-key="sidebar-settings" role="listitem">
+            <span class="sidebar-nav-icon" aria-hidden="true">⚙</span>
+            <span class="sidebar-nav-label">Settings</span>
+          </li>
+        </ul>
+
+        <div class="sidebar-user">
+          <div class="sidebar-user-avatar" aria-hidden="true"></div>
+        </div>
+      </nav>
+
+      <!-- Main content area -->
+      <div class="app-main-area">
+        <main id="app" class="app-shell"></main>
+        <footer class="app-footer" id="app-footer"></footer>
+      </div>
+
     </div>
-    <main id="app" class="app-shell"></main>
+
     <div id="overlay-root"></div>
     <div id="keyboard-root"></div>
-    <footer class="app-footer" id="app-footer"></footer>
 
     <template id="global-hints-template">
       <div class="hint-row">