fix(frontend): unbreak single post layout cascade

Disable the global 2-col .content-layout grid on single pages (it was
tiling breadcrumb/article/author/related/comments left-right), add the
missing Zibll utility bridge used by the author/meta bar, and replace
nonstandard <name>/<item>/<badge> tags in the single surface.

assets/css/frontend/single-post.css

@@ -1,3 +1,4 @@
+@import url("zibll-utilities.css");
 @import url("single-post/shell.css");
 @import url("single-post/content.css");
 @import url("single-post/code-blocks.css");

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

@@ -98,6 +98,12 @@
 }
 
 /* ===== Action Buttons Card ===== */
+.post-actions-wrap {
+    position: relative;
+    text-align: center;
+    margin-bottom: 16px;
+}
+
 .post-actions-card,
 .post-actions {
     position: relative;
@@ -105,6 +111,10 @@
     margin-bottom: 16px;
 }
 
+.post-actions-wrap > .post-actions {
+    margin-bottom: 0;
+}
+
 .post-actions-card__hint {
     font-size: 13px;
     color: var(--color-ink-4, var(--color-ink-4));
@@ -482,9 +492,13 @@ html.dark .post-drop-meta__item:hover {
   gap: 0;
 }
 
-.single-metabox .post-metas item {
+.single-metabox .post-metas item,
+.single-metabox .post-metas .item {
   margin: 0 6px;
   font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .single-metabox .post-drop-meta {

assets/css/frontend/single-post/shell.css

@@ -9,6 +9,26 @@ body.single .content-wrap {
   width: 100%;
 }
 
+/*
+ * Global layout.css turns .content-layout into a 2-col grid that expects
+ * .content-layout__primary + .content-layout__aside children.
+ * Single posts put breadcrumb / article / author / related / comments as
+ * direct children and float the sidebar outside — so the grid must be
+ * disabled here or those sections tile left/right and look "broken".
+ */
+body.single main.container .content-layout {
+  display: block;
+  grid-template-columns: none;
+  gap: 0;
+  width: 100%;
+  min-width: 0;
+}
+
+body.single main.container .content-layout > * {
+  min-width: 0;
+  max-width: 100%;
+}
+
 /* Clear floats after main dual-column shell */
 body.single main.container::after {
   content: "";

assets/css/frontend/zibll-utilities.css

@@ -0,0 +1,116 @@
+/**
+ * Zibll utility class bridge
+ *
+ * Single / author / meta markup still uses Zibll utility class names
+ * (.flex / .ac / .jsb / .abs-right / .muted-2-color / …). Without these
+ * helpers the author bar and meta row collapse into a vertical mess.
+ *
+ * Keep this file tiny and pure utility — domain styles stay in single-post/*.
+ */
+
+/* Layout helpers */
+.relative { position: relative; }
+.flex { display: flex; }
+.flex.ac,
+.ac { align-items: center; }
+.flex.jc,
+.jc { justify-content: center; }
+.flex.jsb,
+.jsb { justify-content: space-between; }
+.flex.at,
+.at { align-items: flex-start; }
+.flex.ae,
+.ae { align-items: flex-end; }
+.flex0 { flex: 0 0 auto; }
+.flex1 { flex: 1 1 auto; min-width: 0; }
+.flex.column { flex-direction: column; }
+.flex.wrap { flex-wrap: wrap; }
+
+.clearfix::before,
+.clearfix::after {
+  content: "";
+  display: table;
+}
+
+.clearfix::after {
+  clear: both;
+}
+
+.abs-right {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.abs-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* Typography / color helpers */
+.muted-color { color: var(--muted-color, var(--color-ink-3)); }
+.muted-2-color { color: var(--muted-2-color, var(--color-ink-4)); }
+.muted-3-color { color: var(--muted-3-color, #b1b1b1); }
+.muted-4-color { color: var(--muted-4-color, #d2d2d2); }
+.text-center { text-align: center; }
+.em09 { font-size: 0.9em; }
+.em12 { font-size: 1.2em; }
+.px12-sm { font-size: 12px; }
+.ml3 { margin-left: 3px; }
+.ml6 { margin-left: 6px; }
+.ml10 { margin-left: 10px; }
+.mr3 { margin-right: 3px; }
+.mr6 { margin-right: 6px; }
+.mt10 { margin-top: 10px; }
+.mt20 { margin-top: 20px; }
+.mb10 { margin-bottom: 10px; }
+.mb20 { margin-bottom: 20px; }
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.text-ellipsis-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+}
+
+/* Surfaces used by single article shell */
+.main-bg {
+  background-color: var(--main-bg-color, var(--surface-1));
+}
+
+.separator {
+  position: relative;
+  letter-spacing: 0.08em;
+}
+
+/* Compact inline separators inside meta/time rows */
+.icon-circle + .icon-circle::before {
+  content: "·";
+  display: inline-block;
+  margin: 0 0.45em;
+  opacity: 0.55;
+}
+
+/* Author name row (was a non-standard <name> element) */
+.article-avatar name,
+.article-avatar .name,
+.user-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.pull-right { float: right; }
+.pull-left { float: left; }