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

inc/helpers/aksrt-single-components.php

@@ -73,13 +73,13 @@ if (!function_exists('aksrt_get_posts_meta_items_html')) :
 				? 'javascript:(typeof scrollTopTo===\'function\'?scrollTopTo(\'#comments\'):void(0));'
 				: get_comments_link($post_id);
 			$count = (int) get_comments_number($post_id);
-			$html .= '<item class="meta-comm"><a rel="nofollow" href="' . esc_attr($href) . '" title="' . esc_attr__('去评论', 'aksrt') . '">'
+			$html .= '<span class="item meta-comm"><a rel="nofollow" href="' . esc_attr($href) . '" title="' . esc_attr__('去评论', 'aksrt') . '">'
-				. '<i class="fa fa-comment-o" aria-hidden="true"></i> ' . esc_html((string) $count) . '</a></item>';
+				. '<i class="fa fa-comment-o" aria-hidden="true"></i> ' . esc_html((string) $count) . '</a></span>';
 		}
 
 		$views = function_exists('aksrt_get_post_views') ? (int) aksrt_get_post_views($post_id) : 0;
 		$views_label = function_exists('aksrt_format_number') ? aksrt_format_number($views) : number_format_i18n($views);
-		$html .= '<item class="meta-view"><i class="fa fa-eye" aria-hidden="true"></i> ' . esc_html((string) $views_label) . '</item>';
+		$html .= '<span class="item meta-view"><i class="fa fa-eye" aria-hidden="true"></i> ' . esc_html((string) $views_label) . '</span>';
 
 		$like_on = true;
 		if (class_exists('AKSRT_Settings')) {
@@ -88,7 +88,7 @@ if (!function_exists('aksrt_get_posts_meta_items_html')) :
 		}
 		if ($like_on && $post->post_type === 'post') {
 			$likes = function_exists('aksrt_get_post_likes') ? (int) aksrt_get_post_likes($post_id) : 0;
-			$html .= '<item class="meta-like"><i class="fa fa-heart-o" aria-hidden="true"></i> ' . esc_html((string) $likes) . '</item>';
+			$html .= '<span class="item meta-like"><i class="fa fa-heart-o" aria-hidden="true"></i> ' . esc_html((string) $likes) . '</span>';
 		}
 
 		return $html;
@@ -154,8 +154,8 @@ if (!function_exists('aksrt_get_post_status_badge')) :
 		if (!isset($map[$status])) {
 			return '';
 		}
-		return '<badge class="img-badge right ' . esc_attr($map[$status]['class']) . '">'
+		return '<span class="badge img-badge right ' . esc_attr($map[$status]['class']) . '">'
-			. esc_html($map[$status]['label']) . '</badge>';
+			. esc_html($map[$status]['label']) . '</span>';
 	}
 endif;
 
@@ -504,8 +504,8 @@ if (!function_exists('aksrt_render_related_graphic_card')) :
 		$html .= '<img ' . $img_attrs . ' alt="' . esc_attr($title) . '">';
 		$html .= '<div class="abs-center left-bottom graphic-text">';
 		$html .= '<div class="text1 text-ellipsis">' . esc_html($title) . '</div>';
-		$html .= '<div class="text3 muted-2-color em09"><item>' . esc_html($time) . '</item>';
+		$html .= '<div class="text3 muted-2-color em09"><span class="item">' . esc_html($time) . '</span>';
-		$html .= '<item class="pull-right"><i class="fa fa-eye" aria-hidden="true"></i> ' . esc_html((string) $views_label) . '</item></div>';
+		$html .= '<span class="item pull-right"><i class="fa fa-eye" aria-hidden="true"></i> ' . esc_html((string) $views_label) . '</span></div>';
 		$html .= '</div></div></a></div></div>';
 		return $html;
 	}

inc/helpers/aksrt-single.php

@@ -363,7 +363,8 @@ if (!function_exists('aksrt_single_render_actions')) :
 		$is_favorited = !empty($ctx['is_favorited']);
 		?>
 		<div class="text-center muted-3-color box-body em09"><?php echo esc_html($settings['button_toptext'] ?? __('喜欢就支持一下吧', 'aksrt')); ?></div>
-		<div class="text-center post-actions">
+		<div class="post-actions-wrap relative">
+			<div class="text-center post-actions">
 			<?php if (!empty($settings['like_enabled'])) : ?>
 				<button type="button" class="action action-like<?php echo $is_liked ? ' is-active' : ''; ?>" id="action-like" data-post-id="<?php echo esc_attr((string) $post_id); ?>" data-initial-active="<?php echo $is_liked ? '1' : '0'; ?>">
 					<i class="<?php echo $is_liked ? 'fas' : 'far'; ?> fa-heart" aria-hidden="true"></i>
@@ -391,9 +392,9 @@ if (!function_exists('aksrt_single_render_actions')) :
 					<span class="action-btn__count" data-stat-count="favorites" data-base-count="<?php echo esc_attr((string) $favorite_count); ?>"><?php echo esc_html((string) $favorite_count); ?></span>
 				</button>
 			<?php endif; ?>
-		</div>
+			</div>
 
-		<?php if (!empty($settings['share_enabled'])) : ?>
+			<?php if (!empty($settings['share_enabled'])) : ?>
 			<div class="share-dropdown" id="share-dropdown" aria-hidden="true">
 				<div class="share-dropdown__grid">
 					<button type="button" class="share-item" data-platform="qq"><i class="fab fa-qq"></i><span>QQ</span></button>
@@ -404,7 +405,8 @@ if (!function_exists('aksrt_single_render_actions')) :
 				</div>
 				<div id="share-qrcode-box" aria-hidden="true"><img id="share-qrcode-image" src="" alt="QR Code"></div>
 			</div>
-		<?php endif; ?>
+			<?php endif; ?>
+		</div>
 
 		<?php if (!empty($settings['rewards_enabled']) && !empty($settings['rewards_image'])) : ?>
 			<div class="reward-modal" id="reward-modal" aria-hidden="true">

templates/parts/single-author-bar.php

@@ -69,7 +69,7 @@ if (class_exists('AKSRT_User_Home')) {
 		<?php endif; ?>
 		<div class="user-right flex flex1 ac jsb ml10">
 			<div class="flex1">
-				<name class="flex ac flex1">
+				<span class="name flex ac flex1">
 					<a class="display-name text-ellipsis" href="<?php echo esc_url($author_url); ?>"><?php echo esc_html($author_name); ?></a>
 					<?php if ($vip_badge !== '') : ?>
 						<?php echo $vip_badge; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
@@ -80,7 +80,7 @@ if (class_exists('AKSRT_User_Home')) {
 							<?php echo esc_html((string) ($signal['label'] ?? '')); ?>
 						</span>
 					<?php endforeach; ?>
-				</name>
+				</span>
 				<div class="px12-sm muted-2-color text-ellipsis">
 					<?php if ($show_time) : ?>
 						<span class="icon-circle" title="<?php echo esc_attr($abs_fmt); ?>" data-toggle="tooltip"><?php echo esc_html($time_text); ?></span>
@@ -132,7 +132,7 @@ if (class_exists('AKSRT_User_Home')) {
 								continue;
 							}
 							?>
-							<item class="meta-view"><?php if ($meta_icon !== '') : ?><i class="<?php echo esc_attr($meta_icon); ?>" aria-hidden="true"></i> <?php endif; ?><?php echo esc_html($meta_text); ?></item>
+							<span class="item meta-view"><?php if ($meta_icon !== '') : ?><i class="<?php echo esc_attr($meta_icon); ?>" aria-hidden="true"></i> <?php endif; ?><?php echo esc_html($meta_text); ?></span>
 						<?php endforeach; ?>
 					</div>
 				</div>