顶栏与总览同宽使报价对齐刷新，标题导航字体间距对齐实例。

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

static/hub.css

@@ -56,17 +56,40 @@ a:hover { color: #7dd3fc; }
   justify-content: flex-start;
   gap: 0;
   min-height: 0;
-  padding: 40px 0 18px;
+  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 {
-  align-self: center;
-  margin-bottom: 32px;
-  font-family: var(--font);
+  display: block;
+  margin: 0 auto 12px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1.75rem;
-  font-weight: 600;
+  font-weight: 700;
   letter-spacing: 0;
   text-indent: 0;
   color: #dbe4ff;
@@ -76,17 +99,12 @@ a:hover { color: #7dd3fc; }
 .topbar-brand:hover {
   color: #ffffff;
 }
-.topbar-inner {
-  width: 100%;
-  max-width: 1800px;
-  margin: 0 auto;
-  padding: 0 clamp(16px, 3vw, 48px);
-}
 .topbar-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
   gap: 10px 12px;
+  margin-bottom: 0;
 }
 .topbar-nav {
   grid-column: 2;
@@ -94,11 +112,12 @@ a:hover { color: #7dd3fc; }
   justify-content: center;
   flex-wrap: wrap;
   gap: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .topbar-nav a {
   color: #8fc8ff;
-  font-size: 0.92rem;
-  font-weight: 500;
+  font-size: 1rem;
+  font-weight: 400;
   letter-spacing: 0;
   padding: 6px 10px;
   border: 1px solid #304164;
@@ -181,7 +200,7 @@ a:hover { color: #7dd3fc; }
 .nav-spot--flat .nav-spot-pct { color: #9aa3bf; }
 .topbar-logout {
   position: absolute;
-  top: 28px;
+  top: 16px;
   right: 22px;
   color: var(--muted);
   font-size: 0.82rem;
@@ -204,17 +223,21 @@ a:hover { color: #7dd3fc; }
 @media (max-width: 720px) {
   .topbar {
     min-height: 0;
-    padding: 28px 0 12px;
+    padding: 8px 0 12px;
   }
   .topbar-brand {
-    margin-bottom: 18px;
-    font-size: 1.35rem;
+    margin-bottom: 12px;
+    font-size: 1rem;
   }
-  .topbar-inner {
-    padding: 0 16px;
+  .topbar-shell {
+    padding: 0 10px;
+  }
+  .topbar-nav a {
+    padding: 8px 12px;
+    font-size: 0.78rem;
   }
   .topbar-logout {
-    top: 12px;
+    top: 10px;
     right: 14px;
   }
 }

templates/base.html

@@ -4,13 +4,13 @@
   <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=25">
+  <link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=26">
 </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">
+    <div class="topbar-shell">
       <a href="/" class="topbar-brand">加密货币｜OKX 期权中控</a>
-    <div class="topbar-inner">
       <div class="topbar-row">
         <nav class="topbar-nav">
           <a href="/" class="{% if request.path == '/' %}active{% endif %}">总览</a>