fix(single): close remaining live gaps vs Zibll demo

Align runtime --sidebar-width (300→311), --main-radius, and
body.nav-fixed 88px reserve; enqueue single-post CSS parts directly;
match Zibll action buttons and author avatar DOM; tighten dual-column
tokens after comparing blog.rutua.cn with demo.zibll.com.

assets/css/frontend/base.css

@@ -133,12 +133,13 @@ main.container,
   }
 }
 
-/* Soft pad only when the float dual-column is collapsed */
+/* Soft pad only when the float dual-column is collapsed.
+ * Match Zibll bootstrap container pad (15px) rather than 10px. */
 @media (max-width: 991.98px) {
   .container,
   main.container {
-    padding-right: 10px;
-    padding-left: 10px;
+    padding-right: 15px;
+    padding-left: 15px;
   }
 }
 
@@ -147,8 +148,8 @@ main.container,
   main.container {
     width: 100%;
     max-width: 100%;
-    padding-right: 10px;
-    padding-left: 10px;
+    padding-right: 15px;
+    padding-left: 15px;
   }
 }
 

assets/css/frontend/layout.css

@@ -120,7 +120,7 @@ body.site-layout-1 .content-layout--no-sidebar {
   margin-right: 0 !important;
 }
 
-/* Sidebar RIGHT (layout 2) — Zibll main.css 1:1 */
+/* Sidebar RIGHT (layout 2) — hard 311px like Zibll main.css (runtime var must match) */
 body.site-layout-2 .content-layout {
   margin-right: calc(var(--sidebar-width, 311px) + 15px);
   margin-left: 0;
@@ -130,11 +130,10 @@ body.site-layout-2 .sidebar {
   float: left;
   width: var(--sidebar-width, 311px);
   margin-left: calc(0px - var(--sidebar-width, 311px));
-  /* Zibll uses position:unset so sticky children aren't trapped */
   position: unset;
 }
 
-/* Sidebar LEFT (layout 3) — Zibll main.css 1:1 */
+/* Sidebar LEFT (layout 3) */
 body.site-layout-3 .content-layout {
   margin-left: calc(var(--sidebar-width, 311px) + 15px);
   margin-right: unset;

assets/css/frontend/nav/base.css

@@ -1,6 +1,19 @@
-/* Zibll body.nav-fixed: reserve header space then pull hero under nav */
+/* Zibll body.nav-fixed: hard 88px reserve (main.css), not bare --nav-height.
+ * Nav bar itself is ~60px; extra space matches zibll chrome/shadow gap. */
 body.nav-fixed {
-  padding-top: var(--nav-height, 60px);
+  padding-top: 88px;
+}
+
+@media (max-width: 768px) {
+  body.nav-fixed {
+    padding-top: 72px;
+  }
+}
+
+@media (max-width: 640px) {
+  body.nav-fixed {
+    padding-top: 60px;
+  }
 }
 
 /* Fixed nav without hero overlay: take header out of flow.

assets/css/frontend/single-post/author-actions.css

@@ -104,11 +104,14 @@
     margin-bottom: 16px;
 }
 
+/* Zibll .post-actions — text/icon column buttons, not pill chips */
 .post-actions-card,
 .post-actions {
     position: relative;
     text-align: center;
     margin-bottom: 16px;
+    padding-bottom: 15px;
+    display: block;
 }
 
 .post-actions-wrap > .post-actions {
@@ -121,16 +124,65 @@
     margin-bottom: 12px;
 }
 
-.post-actions-card__buttons,
-.post-actions {
+/* Legacy card-buttons flex only for non-zibll card variant */
+.post-actions-card__buttons {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-bottom: 12px;
 }
 
-.action-btn,
-.action {
+/* Zibll: .article .action { width:80px; padding:10px 0; inline-block; opacity:.7 } */
+.article .action,
+.post-actions .action {
+    width: 80px;
+    padding: 10px 0;
+    display: inline-block;
+    opacity: 0.7;
+    vertical-align: top;
+    min-width: 0;
+    height: auto;
+    border-radius: 0;
+    border: 0;
+    background: transparent;
+    color: var(--muted-color, #777);
+    cursor: pointer;
+    font-size: 14px;
+    transition: opacity 0.15s ease, color 0.15s ease;
+    gap: 0;
+    text-align: center;
+}
+
+.article .action:hover,
+.post-actions .action:hover,
+.article .action.is-active,
+.post-actions .action.is-active {
+    color: inherit;
+    opacity: 1;
+    background: transparent;
+    border-color: transparent;
+}
+
+.article .action i,
+.post-actions .action i {
+    font-size: 20px;
+    display: block;
+    margin: 0 auto 4px;
+    line-height: 1;
+}
+
+.post-actions .action .action-btn__count,
+.post-actions .action .action-btn__label,
+.action-btn__count,
+.action-btn__label {
+    display: block;
+    font-size: 12px;
+    line-height: 1.2;
+    font-weight: 500;
+}
+
+/* Keep pill style for non-article .action-btn if used elsewhere */
+.action-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
@@ -144,23 +196,18 @@
     transition: all 0.15s ease;
 }
 
-.action-btn:hover,
-.action:hover {
+.action-btn:hover {
     background: var(--color-primary-soft);
     color: var(--color-primary);
 }
 
-.action-btn.is-active,
-.action.is-active {
+.action-btn.is-active {
     border-color: var(--color-primary);
     color: var(--color-primary);
     background: var(--color-primary-soft, rgba(240, 68, 148, 0.08));
 }
 
-.action-btn i,
-.action i { font-size: 1.2em; }
-.action-btn__count { font-weight: 600; }
-.action-btn__label { font-size: 13px; }
+.action-btn i { font-size: 1.2em; }
 
 /* ===== 分享下拉面板 ===== */
 
@@ -525,41 +572,6 @@ html.dark .post-drop-meta__item:hover {
   display: block;
 }
 
-.post-actions {
-  padding-bottom: 15px;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.post-actions .action {
-  min-width: 3.2em;
-  height: 3.2em;
-  border-radius: 100px;
-  border: 0;
-  background: var(--muted-bg-color, #f2f2f2);
-  color: var(--muted-color, #777);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 0 14px;
-  cursor: pointer;
-  transition: .15s;
-}
-
-.post-actions .action:hover,
-.post-actions .action.is-active {
-  color: var(--focus-color, #f04494);
-  background: var(--focus-color-opacity1, rgba(240,68,148,.1));
-}
-
-.post-actions .action i {
-  font-size: 16px;
-}
-
-
 .article-tags br { flex-basis: 100%; width: 100%; content: ""; display: block; height: 0; }
 .article-tags .but.c-blue { color: #2196f3; }
 .article-tags .but.c-yellow { color: #f0ad4e; }