标题导航与总览同列对齐卡片，顶栏间距按实例铺满并在带鱼屏锁 1800。

Co-authored-by: Cursor <cursoragent@cursor.com>

static/hub.css

@@ -48,42 +48,6 @@ body > * { position: relative; z-index: 1; }
 a { color: var(--accent-2); text-decoration: none; }
 a:hover { color: #7dd3fc; }
 
-.topbar {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-start;
-  gap: 0;
-  min-height: 0;
-  padding: 14px 0 12px;
-  border-bottom: 1px solid var(--line);
-  background: rgba(8, 14, 26, 0.75);
-  backdrop-filter: blur(12px);
-}
-.topbar-shell {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 16px;
-}
-body.page-dashboard .topbar-shell {
-  max-width: 1800px;
-  padding: 0 clamp(16px, 3vw, 48px);
-}
-body.page-instances .topbar-shell {
-  max-width: none;
-  padding: 0 clamp(12px, 2vw, 28px);
-}
-@media (min-aspect-ratio: 21/9) {
-  body.page-instances .topbar-shell {
-    max-width: 1800px;
-  }
-}
-body.page-desk .topbar-shell {
-  max-width: none;
-  padding: 0 12px;
-}
 .topbar-brand {
   display: block;
   margin: 0 auto 12px;
@@ -104,7 +68,7 @@ body.page-desk .topbar-shell {
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
   gap: 10px 12px;
-  margin-bottom: 0;
+  margin: 0 0 12px;
 }
 .topbar-nav {
   grid-column: 2;
@@ -199,9 +163,10 @@ body.page-desk .topbar-shell {
 .nav-spot--flat .nav-spot-chg,
 .nav-spot--flat .nav-spot-pct { color: #9aa3bf; }
 .topbar-logout {
-  position: absolute;
+  position: fixed;
   top: 16px;
   right: 22px;
+  z-index: 20;
   color: var(--muted);
   font-size: 0.82rem;
   letter-spacing: 0.04em;
@@ -221,17 +186,10 @@ body.page-desk .topbar-shell {
   }
 }
 @media (max-width: 720px) {
-  .topbar {
-    min-height: 0;
-    padding: 8px 0 12px;
-  }
   .topbar-brand {
     margin-bottom: 12px;
     font-size: 1rem;
   }
-  .topbar-shell {
-    padding: 0 10px;
-  }
   .topbar-nav a {
     padding: 8px 12px;
     font-size: 0.78rem;
@@ -242,13 +200,25 @@ body.page-desk .topbar-shell {
   }
 }
 
-.main { padding: 16px; max-width: 1200px; margin: 0 auto; }
+.main {
-/* 总览保持 1800;工作台外壳全屏(内嵌客户端带鱼屏自锁 1800) */
+  width: 100%;
-body.page-dashboard .main {
+  max-width: 1200px;
-  max-width: 1800px;
+  margin: 0 auto;
+  padding: 14px clamp(6px, 1vw, 14px) 16px;
+}
+/* 总览/实例与客户端一致: 铺满,带鱼屏锁 1800 */
+body.page-dashboard .main,
+body.page-instances .main {
+  max-width: none;
   width: 100%;
   margin: 0 auto;
-  padding: 12px clamp(16px, 3vw, 48px) 20px;
+  padding: 14px clamp(6px, 1vw, 14px) 16px;
+}
+@media (min-aspect-ratio: 21/9) {
+  body.page-dashboard .main,
+  body.page-instances .main {
+    max-width: min(1800px, calc(100vw - 24px));
+  }
 }
 body.page-desk .main {
   max-width: none;
@@ -256,18 +226,6 @@ body.page-desk .main {
   margin: 0;
   padding: 10px 12px 14px;
 }
-/* 实例页主区:随屏宽;带鱼屏上限 1800 */
-body.page-instances .main {
-  max-width: none;
-  width: 100%;
-  margin: 0 auto;
-  padding: 12px clamp(12px, 2vw, 28px) 20px;
-}
-@media (min-aspect-ratio: 21/9) {
-  body.page-instances .main {
-    max-width: 1800px;
-  }
-}
 body.page-login {
   min-height: 100vh;
 }
@@ -1438,11 +1396,6 @@ input.readonly {
   .desk-side-toggle--bar { display: none !important; }
 }
 @media (min-width: 2000px) {
-  body.page-dashboard .main {
-    max-width: 1800px;
-    padding-left: clamp(32px, 6vw, 96px);
-    padding-right: clamp(32px, 6vw, 96px);
-  }
   body.page-desk .main {
     max-width: none;
     padding-left: 12px;

templates/base.html

@@ -4,12 +4,14 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}加密货币｜OKX 期权中控{% endblock %}</title>
-  <link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=26">
+  <link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=27">
 </head>
 <body class="{% if request.path.startswith('/login') %}page-login{% elif request.path.startswith('/desk') %}page-desk{% elif request.path.startswith('/stats') %}page-stats{% elif request.path.startswith('/instances') %}page-instances{% elif request.path == '/' %}page-dashboard{% endif %}">
   {% if session.get('logged_in') %}
-  <header class="topbar">
+  <a href="/logout" class="topbar-logout">退出</a>
-    <div class="topbar-shell">
+  {% endif %}
+  <main class="main">
+    {% if session.get('logged_in') %}
     <a href="/" class="topbar-brand">加密货币｜OKX 期权中控</a>
     <div class="topbar-row">
       <nav class="topbar-nav">
@@ -39,11 +41,7 @@
         </div>
       </div>
     </div>
-    </div>
-    <a href="/logout" class="topbar-logout">退出</a>
-  </header>
     {% endif %}
-  <main class="main">
     {% with messages = get_flashed_messages() %}
       {% if messages %}<div class="flash">{{ messages[0] }}</div>{% endif %}
     {% endwith %}