fix: opaque fallback for mobile header/sidebar background

--component-header-background and --component-sidebar-background
resolve to an empty string in some themes. An unresolved CSS custom
property makes the whole background declaration invalid, so the
browser falls back to transparent -- the mobile hamburger menu then
renders with a see-through sidebar and page text bleeds through
behind the nav items, even though the click-to-close backdrop overlay
itself is fully opaque and working correctly.

Add --background-base as an explicit fallback in both var() calls so
the sidebar and mobile header always paint an opaque background, with
themes still free to override via the component tokens.

web/src/App.tsx

@@ -532,7 +532,8 @@ export default function App() {
           "bg-background-base",
         )}
         style={{
-          background: "var(--component-header-background)",
+          background:
+            "var(--component-header-background, var(--background-base))",
           borderImage: "var(--component-header-border-image)",
           clipPath: "var(--component-header-clip-path)",
         }}
@@ -591,7 +592,8 @@ export default function App() {
               collapsed && "lg:w-14",
             )}
             style={{
-              background: "var(--component-sidebar-background)",
+              background:
+                "var(--component-sidebar-background, var(--background-base))",
               clipPath: "var(--component-sidebar-clip-path)",
               borderImage: "var(--component-sidebar-border-image)",
             }}