兼容低内核版本的浏览器

client/src/index.css

@@ -119,6 +119,8 @@
   html,
   body,
   #root {
+    width: 100%;
+    max-width: 100%;
     min-height: 100%;
   }
 
@@ -165,6 +167,60 @@
 }
 
 @layer components {
+  /* App shell: mobile full-bleed; desktop centered column with gutters (lg+). */
+  .x9-app-shell-outer {
+    min-height: 100dvh;
+    width: 100%;
+    min-width: 0;
+    display: flex;
+    justify-content: center;
+    background-color: #0d1117;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .x9-app-shell-column {
+    min-height: 100dvh;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
+
+  .x9-bottom-nav-outer {
+    pointer-events: none;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 50;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    justify-content: center;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .x9-bottom-nav-inner {
+    pointer-events: auto;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
+
+  @media (min-width: 1024px) {
+    .x9-app-shell-outer,
+    .x9-bottom-nav-outer {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
+
+    .x9-app-shell-column,
+    .x9-bottom-nav-inner {
+      max-width: 1180px;
+    }
+  }
+
   .container {
     width: 100%;
     margin-left: auto;
@@ -374,7 +430,7 @@
     padding: 16px 16px 8px;
     position: sticky;
     top: 0;
-    z-index: 10;
+    z-index: 50;
     background: rgba(0, 0, 0, 0.85);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);