diff --git a/css/history_detail/02-layout/layout.css b/css/history_detail/02-layout/layout.css
index f574ed47..e540ecbf 100644
--- a/css/history_detail/02-layout/layout.css
+++ b/css/history_detail/02-layout/layout.css
@@ -19,67 +19,56 @@ body {
 }
 
 /* ====================
- * 标签页导航样式
+ * 标签页导航样式（极简设计）
+ * 设计原则：黑白灰主色 + 蓝色重点色，与侧边栏保持一致
  * ==================== */
 .tabs-container {
-  border-bottom: 2px solid var(--color-slate-200);
-  margin-bottom: 24px; /* 增加间距 */
   display: flex;
-  gap: 4px;
+  gap: 0.25rem; /* 4px */
+  border-bottom: 1px solid #e2e8f0; /* slate-200 */
+  margin-bottom: 1.5rem; /* 24px */
 }
 
 .tab-btn {
-  padding: 10px 20px;
+  padding: 0.625rem 1rem; /* 10px 16px */
   background: transparent;
-  margin-right: 0;
-  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  border: none;
+  border-bottom: 2px solid transparent;
   cursor: pointer;
-  font-size: 0.95rem;
+  font-size: 0.875rem; /* 14px */
   font-weight: 500;
-  color: var(--text-secondary);
-  border: 2px solid transparent;
-  border-bottom: none;
-  position: relative;
-  bottom: -2px;
-  transition: all 0.2s ease;
+  color: #64748b; /* slate-500 */
+  transition: all 0.15s ease;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: auto; /* 移除强制最小宽度，让内容决定 */
-  text-align: center;
+  position: relative;
+}
+
+.tab-btn:hover:not(.active) {
+  color: #0f172a; /* slate-900 */
+  background: #f8fafc; /* slate-50 */
+}
+
+.tab-btn.active {
+  color: #2563eb; /* blue-600 */
+  font-weight: 600;
+  border-bottom-color: #2563eb; /* blue-600 */
 }
 
 /* 适应较小屏幕的标签页按钮 */
 @media (max-width: 768px) {
   .tab-btn {
-    padding: 8px 12px;
-    font-size: 0.9rem;
-    min-width: 60px;
+    padding: 0.5rem 0.75rem; /* 8px 12px */
+    font-size: 0.8125rem; /* 13px */
   }
 }
 
-.tab-btn:hover:not(.active) {
-  background: var(--color-slate-100);
-  color: var(--text-primary);
-}
-
-.tab-btn.active {
-  background: var(--panel-bg);
-  color: var(--color-primary-600);
-  border-color: var(--color-slate-200);
-  border-bottom: 2px solid var(--panel-bg);
-  font-weight: 600;
-}
-
 /* ====================
  * 标签页内容区域样式
  * ==================== */
 .tab-content {
   background: var(--panel-bg);
-  /* border-radius: var(--radius-md);  移除这里的圆角，因为它和上面的 tabs 是连体的 */
-  padding: 8px 0; /* 减少内边距，让内容自己控制 */
+  padding: 8px 0;
   min-height: 300px;
   margin-top: 0;
 }
 
-