feat: enhance theme handling and layout components for Telegram Mini App

- Updated theme resolution logic to utilize a shared inline script for consistent theme application across routes.
- Introduced `AppShell` and `ReadyGate` components to manage app readiness and theme synchronization, improving user experience.
- Enhanced `GlobalError` and `NotFound` pages with a unified full-screen layout for better accessibility and visual consistency.
- Refactored CSS to implement safe area insets for sticky headers and content safety, ensuring proper layout on various devices.
- Added unit tests for new functionality and improved existing tests for better coverage and reliability.

webapp-next/src/components/providers/TelegramProvider.tsx

@@ -10,7 +10,7 @@ import {
   bindViewportCssVars,
   unmountViewport,
 } from "@telegram-apps/sdk-react";
-import { fixSurfaceContrast } from "@/hooks/use-telegram-theme";
+import { fixSurfaceContrast, useTelegramTheme } from "@/hooks/use-telegram-theme";
 import { applyAndroidPerformanceClass } from "@/lib/telegram-android-perf";
 import { useAppStore } from "@/store/app-store";
 import { getLang } from "@/i18n/messages";
@@ -42,6 +42,15 @@ export function useTelegramSdkReady(): TelegramSdkContextValue {
  * useTelegramTheme() in the app handles ongoing theme changes.
  * Syncs lang from window.__DT_LANG on mount and when config.js fires dt-config-loaded.
  */
+/**
+ * Live theme sync: provider-owned so every route (/, /admin, not-found, error) gets
+ * data-theme and Mini App chrome color updates when Telegram theme changes.
+ */
+function ThemeSync() {
+  useTelegramTheme();
+  return null;
+}
+
 export function TelegramProvider({
   children,
 }: {
@@ -111,6 +120,7 @@ export function TelegramProvider({
 
   return (
     <TelegramSdkContext.Provider value={{ sdkReady }}>
+      <ThemeSync />
       {children}
     </TelegramSdkContext.Provider>
   );