feat: 优化标题栏高度和垂直居中显示

- 调整 AppShell header 高度为 56px 并添加内联样式强制垂直居中
- 优化月份选择器按钮大小为 36px
- 更新 SPEC.md 添加端口配置说明 (前端 3500, 后端 3501)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/styles/globals.css

@@ -134,13 +134,14 @@ textarea:focus-visible {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding: 0;
+  padding: 4px 0;
 }
 
 .app-header--compact .app-header__inner {
-  min-height: 40px;
-  gap: 10px;
-  padding: 0;
+  min-height: 32px !important;
+  height: 32px !important;
+  gap: 4px !important;
+  padding: 0 !important;
 }
 
 .app-header__main,
@@ -153,6 +154,7 @@ textarea:focus-visible {
   display: flex;
   align-items: center;
   flex: 1;
+  height: 100%;
 }
 
 .app-header--actions-only .app-header__main {
@@ -430,14 +432,21 @@ textarea:focus-visible {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  gap: 8px;
+  gap: 4px;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.header-center-container > * {
+  display: flex;
+  align-items: center;
 }
 
 .header-left-actions,
 .header-right-actions {
   display: flex;
   align-items: center;
-  min-width: 40px;
+  min-width: 32px;
 }
 
 .header-spacer {
@@ -455,13 +464,13 @@ textarea:focus-visible {
 .month-switcher-container .icon-button {
   width: 36px;
   height: 36px;
-  border-radius: 12px;
+  border-radius: 10px;
 }
 
 .month-switcher-container .month-switcher__label {
   font-size: 1rem;
   font-weight: 700;
-  min-width: 100px;
+  min-width: 90px;
   text-align: center;
 }
 
@@ -1869,7 +1878,7 @@ textarea:focus-visible {
 
 @media (max-width: 768px) {
   :root {
-    --header-height: 42px;
+    --header-height: 32px;
     --bottom-nav-height: 82px;
   }
 
@@ -1879,10 +1888,10 @@ textarea:focus-visible {
 
   .app-header__inner,
   .app-header--compact .app-header__inner {
-    min-height: auto;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 0;
+    min-height: 32px;
+    align-items: stretch;
+    gap: 4px;
+    padding: 0;
   }
 
   .app-header__text h1 {