diff --git a/docs/更新说明.md b/docs/更新说明.md
index 081b60e..649f346 100644
--- a/docs/更新说明.md
+++ b/docs/更新说明.md
@@ -5,6 +5,16 @@
 
 ---
 
+## 2026-07-29 — 顶栏对齐 crypto_monitor：标题在上、资金卡同宽
+
+### 变更
+
+1. 「比特骆驼自动化对冲系统」移到导航上方（参照 OKX 实例页：标题 → top-nav → 资金卡）。  
+2. 页面统一 `max-width: min(1440px, 94vw)`，资金卡片与下方内容同宽对齐。  
+3. 资金条改为圆角边框卡片样式（`.funds-bar-inner`）。
+
+---
+
 ## 2026-07-29 — 资金条与内容区同宽；规则说明折叠
 
 ### 变更
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index db8b329..7785d05 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -24,48 +24,53 @@ function Shell({ children }: { children: ReactNode }) {
   const user = getUsername();
   return (
     <div className="app-shell">
-      <header className="topnav">
-        <div className="topnav-side left">
-          <div className="brand">
-            <img
-              className="brand-mark"
-              src="/icons/brand.png"
-              alt=""
-              width={28}
-              height={28}
-            />
-            <span className="brand-full">比特骆驼自动化对冲系统</span>
-            <span className="brand-short">比特骆驼</span>
+      <div className="app-container">
+        <header className="app-header-block">
+          <div className="brand-row">
+            <div className="brand">
+              <img
+                className="brand-mark"
+                src="/icons/brand.png"
+                alt=""
+                width={28}
+                height={28}
+              />
+              <span className="brand-full">比特骆驼自动化对冲系统</span>
+              <span className="brand-short">比特骆驼</span>
+            </div>
+            <div className="brand-actions">
+              <span className="meta mono topnav-user">{user}</span>
+              <button
+                className="btn ghost topnav-logout"
+                type="button"
+                onClick={() => {
+                  clearSession();
+                  window.location.href = "/login";
+                }}
+              >
+                退出
+              </button>
+            </div>
           </div>
-        </div>
-        <nav className="topnav-center" aria-label="主导航">
-          {NAV.map((item) => (
-            <NavLink
-              key={item.to}
-              to={item.to}
-              className={({ isActive }) => (isActive ? "active" : "")}
-            >
-              <span className="nav-label-full">{item.full}</span>
-              <span className="nav-label-short">{item.label}</span>
-            </NavLink>
-          ))}
-        </nav>
-        <div className="topnav-side right">
-          <span className="meta mono topnav-user">{user}</span>
-          <button
-            className="btn ghost topnav-logout"
-            type="button"
-            onClick={() => {
-              clearSession();
-              window.location.href = "/login";
-            }}
-          >
-            退出
-          </button>
-        </div>
-      </header>
-      <FundsBar />
-      <main className="page">{children}</main>
+          <nav className="top-nav" aria-label="主导航">
+            {NAV.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                className={({ isActive }) => (isActive ? "active" : "")}
+              >
+                <span className="nav-label-full">{item.full}</span>
+                <span className="nav-label-short">{item.label}</span>
+              </NavLink>
+            ))}
+          </nav>
+        </header>
+
+        <FundsBar />
+
+        <main className="page">{children}</main>
+      </div>
+
       <nav className="bottom-nav" aria-label="手机导航">
         {NAV.map((item) => (
           <NavLink
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index 50ddb37..df267f3 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -80,48 +80,137 @@ input {
 .app-shell {
   min-height: 100vh;
   display: grid;
-  grid-template-rows: auto auto 1fr;
+  grid-template-rows: 1fr;
+}
+
+/* 与 crypto_monitor .container 同口径：标题 / 导航 / 资金卡 / 内容同宽 */
+.app-container {
+  width: 100%;
+  max-width: min(1440px, 94vw);
+  margin: 0 auto;
+  padding: 0 clamp(8px, 1.5vw, 20px) 28px;
+  box-sizing: border-box;
+}
+
+.app-header-block {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+  padding: 14px 0 8px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: linear-gradient(
+    180deg,
+    rgba(11, 14, 17, 0.98) 70%,
+    rgba(11, 14, 17, 0.88)
+  );
+  backdrop-filter: blur(8px);
+}
+
+.brand-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--accent);
+  white-space: nowrap;
+  min-width: 0;
+  font-size: clamp(16px, 1.35vw, 20px);
+}
+
+.brand-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  min-width: 0;
+}
+
+.brand-actions .meta {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.top-nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.top-nav a {
+  padding: 6px 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg-elev);
+  color: var(--muted);
+  text-decoration: none;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.top-nav a:hover {
+  color: var(--text);
+  border-color: rgba(240, 185, 11, 0.35);
+}
+
+.top-nav a.active {
+  background: rgba(240, 185, 11, 0.12);
+  border-color: rgba(240, 185, 11, 0.45);
+  color: var(--accent);
 }
 
 .funds-bar-shell {
-  border-bottom: 1px solid var(--line);
-  background: rgba(18, 22, 28, 0.96);
+  border: none;
+  background: transparent;
+  margin: 0 0 12px;
 }
 
 .funds-bar-inner {
   width: 100%;
-  max-width: min(1680px, 100%);
-  margin: 0 auto;
-  padding: 0 20px;
+  max-width: none;
+  margin: 0;
+  padding: 10px 14px;
   box-sizing: border-box;
-}
-
-@media (min-width: 1800px) {
-  .funds-bar-inner {
-    max-width: 1760px;
-    padding-left: 28px;
-    padding-right: 28px;
-  }
+  background: var(--bg-panel);
+  border: 1px solid var(--line);
+  border-radius: 10px;
 }
 
 .funds-bar {
   display: flex;
-  flex-wrap: wrap;
-  gap: 2px 0;
-  padding: 8px 0 4px;
+  flex-wrap: nowrap;
+  gap: 0;
+  padding: 2px 0 4px;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
 }
 
 .funds-item {
-  flex: 1 1 auto;
-  min-width: 88px;
+  flex: 1 1 0;
+  min-width: 72px;
   padding: 4px 10px;
   border-right: 1px solid var(--line);
 }
 
+.funds-item:first-child {
+  padding-left: 0;
+}
+
 .funds-item:last-child {
   border-right: none;
+  padding-right: 0;
 }
 
 .funds-item--primary .funds-value {
@@ -148,8 +237,9 @@ input {
 }
 
 .funds-rules {
-  padding: 2px 10px 8px;
+  padding: 6px 0 0;
   border-top: 1px solid rgba(30, 38, 48, 0.85);
+  margin-top: 6px;
 }
 
 .funds-rules-toggle {
@@ -182,48 +272,7 @@ input {
 }
 
 .topnav {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--line);
-  background: rgba(11, 14, 17, 0.92);
-  backdrop-filter: blur(8px);
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-.topnav-side {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.topnav-side.right {
-  justify-content: flex-end;
-}
-
-.topnav-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-
-.brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  color: var(--accent);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
+  display: none;
 }
 
 .brand-mark,
@@ -238,27 +287,6 @@ input {
   border-radius: 10px;
 }
 
-@media (max-width: 900px) {
-  .topnav-side.left .brand span {
-    max-width: 9em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-.topnav a {
-  color: var(--muted);
-  text-decoration: none;
-  padding: 8px 12px;
-  border-radius: 6px;
-  white-space: nowrap;
-}
-
-.topnav a.active {
-  color: var(--text);
-  background: var(--bg-panel);
-}
-
 .tabs {
   display: flex;
   gap: 4px;
@@ -302,20 +330,12 @@ input {
 }
 
 .page {
-  padding: 16px 20px 28px;
-  max-width: min(1680px, 100%);
-  margin: 0 auto;
+  padding: 4px 0 0;
+  max-width: none;
+  margin: 0;
   width: 100%;
 }
 
-@media (min-width: 1800px) {
-  .page {
-    max-width: 1760px;
-    padding-left: 28px;
-    padding-right: 28px;
-  }
-}
-
 .brand-short {
   display: none;
 }
@@ -340,25 +360,12 @@ input {
 }
 
 @media (max-width: 900px) {
-  .page {
-    padding: 12px 14px calc(72px + env(safe-area-inset-bottom, 0px));
+  .app-container {
+    padding: 0 12px calc(72px + env(safe-area-inset-bottom, 0px));
   }
 
-  .topnav {
-    grid-template-columns: 1fr auto;
-    gap: 8px;
-  }
-
-  .topnav-center {
-    display: none;
-  }
-
-  .topnav-side.left {
-    min-width: 0;
-  }
-
-  .topnav-side.right {
-    justify-content: flex-end;
+  .app-header-block {
+    padding-top: 10px;
   }
 
   .brand-full {
@@ -369,6 +376,10 @@ input {
     display: inline;
   }
 
+  .top-nav {
+    display: none;
+  }
+
   .nav-label-full {
     display: none;
   }
@@ -377,6 +388,10 @@ input {
     display: inline;
   }
 
+  .page {
+    padding: 4px 0 0;
+  }
+
   .bottom-nav {
     display: grid;
     grid-template-columns: repeat(4, 1fr);