diff --git a/src/routes/posts/[slug]/+page.svelte b/src/routes/posts/[slug]/+page.svelte
index db19b92..bc45742 100644
--- a/src/routes/posts/[slug]/+page.svelte
+++ b/src/routes/posts/[slug]/+page.svelte
@@ -188,100 +188,100 @@
 </main>
 
 <style>
+	/* ===== 系列导航 - 完全对齐 DoIt _series.scss + _details.scss ===== */
 	.series-nav {
 		margin: 0.8rem 0;
-		border-radius: 4px;
-		overflow: hidden;
 	}
 
+	/* .series-title — 对应 DoIt .series-title */
 	.series-nav .series-title {
-		font-size: 1.15rem;
+		font-size: 1.2rem;
 		font-weight: bold;
 		display: flex;
 		justify-content: space-between;
-		align-items: center;
 		line-height: 2em;
 		padding: 0 0.75rem;
-		background-color: rgba(0, 0, 0, 0.05);
+		background: #e6e6e6;
 		cursor: pointer;
 		list-style: none;
-		user-select: none;
-		transition: background-color 0.3s;
-	}
-
-	.series-nav[open] .series-title {
-		background-color: rgba(0, 0, 0, 0.08);
 	}
 
 	.series-nav .series-title::-webkit-details-marker {
 		display: none;
 	}
 
+	/* .details-icon — 对应 DoIt .details .details-icon > svg */
 	.series-nav .details-icon {
-		transition: transform 0.3s;
 		display: flex;
 		align-items: center;
+		color: #4d4d4d;
 	}
 
-	.series-nav[open] .details-icon {
+	.series-nav .details-icon > :global(svg) {
+		transition: transform 0.2s ease;
+	}
+
+	.series-nav[open] .details-icon > :global(svg) {
 		transform: rotate(90deg);
 	}
 
-	.series-nav .series-title a,
-	.series-nav li a,
-	.series-nav .series-prev-next a {
-		color: var(--text-color);
-		text-decoration: none;
-	}
-
-	.series-nav .series-title a:hover,
-	.series-nav li a:hover,
-	.series-nav .series-prev-next a:hover {
-		color: var(--accent-color, #419b38);
-	}
-
+	/* .series-content — 对应 DoIt .series-content */
 	.series-nav .series-content {
 		font-size: 1rem;
-		background-color: rgba(0, 0, 0, 0.02);
+		background-color: #f5f5f5;
 	}
 
 	.series-nav .series-content > nav > ul {
 		margin: 0;
 		padding: 0.4rem 1rem 0.4rem 1.8rem;
-		list-style: none;
+	}
+
+	.series-nav .series-content ul {
 		text-indent: -0.85rem;
-	}
-
-	.series-nav li {
-		padding: 0;
-		line-height: 1.8;
 		padding-left: 0.8rem;
+		list-style: none;
 	}
 
-	.series-nav li a::before {
+	/* "|" 竖线 — 对应 DoIt ul a:first-child::before */
+	.series-nav li a:first-child::before {
 		content: '|';
 		font-weight: bolder;
 		margin-right: 0.5rem;
-		color: var(--text-color);
-		opacity: 0.6;
+		color: #2d809a;
 	}
 
+	/* 当前文章高亮 — 对应 DoIt span.active */
 	.series-nav li span.active {
 		font-weight: bolder;
-		color: var(--text-color);
+		color: #2d809a;
 	}
 
 	.series-nav li span.active::before {
 		content: '|';
-		font-weight: bolder;
 		margin-right: 0.5rem;
+		color: #ef3982;
+	}
+
+	/* 链接 hover */
+	.series-nav .series-title a {
+		color: var(--text-color);
+		text-decoration: none;
+	}
+
+	.series-nav .series-title a:hover {
 		color: var(--accent-color, #419b38);
 	}
 
-	.series-nav li a:hover::before {
+	.series-nav li a {
+		color: var(--text-color);
+		text-decoration: none;
+	}
+
+	.series-nav li a:hover {
 		color: var(--accent-color, #419b38);
 	}
 
+	/* 系列前后导航 — BlogFlare 自有功能 */
 	.series-nav .series-prev-next {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
@@ -291,6 +291,15 @@
 		font-size: 0.9em;
 	}
 
+	.series-nav .series-prev-next a {
+		color: var(--text-color);
+		text-decoration: none;
+	}
+
+	.series-nav .series-prev-next a:hover {
+		color: var(--accent-color, #419b38);
+	}
+
 	.series-nav .series-prev-next a:last-child {
 		text-align: right;
 	}