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/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; }