/* --- 颜色规范 (参考设计图) --- */
		:root {
			--primary-red: #FF3B30;
			--title-black: #222222;
			--text-grey: #666666;
			--bg-grey: #F5F5F5;
			--border-grey: #EEEEEE;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			-webkit-tap-highlight-color: transparent;
		}

		/* 文章主图样式 */
		.main-featured-image img {
			width: 100%;
			max-height: 500px;
			/* 防止长图过长 */
			object-fit: cover;
			/* 保持比例裁剪 */
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
			/* 增加一点质感 */
		}

		body {
			font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
			background: #fff;
			color: var(--title-black);
			line-height: 1.6;
		}

		a {
			text-decoration: none;
			color: inherit;
		}

		/* --- 头部导航 --- */
.header {
    position: fixed;        /* 关键：固定定位 */
    top: 0;                /* 贴紧顶部 */
    left: 0;
    right: 0;
    z-index: 1001;         /* 确保层级高于底部交互栏(1000) */
    
    background: rgba(255, 255, 255, 0.98); /* 稍微透明一点更有高级感 */
    backdrop-filter: blur(8px);            /* 磨砂玻璃效果 */
    
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-grey);
    box-shadow: 0 1px 5px rgba(0,0,0,0.05); /* 添加微弱阴影增强识别度 */
}

		.logo {
			width: 24px;
			/* 根据设计图，返回键通常在 24px - 30px 之间 */
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* 设置图片填充容器 */
		.logo img {
			width: 100%;
			height: auto;
			display: block;
			/* 如果你想微调位置（比如稍微靠左一点），可以使用 object-fit 或 margin */
			object-fit: contain;
		}

		.search-bar {
			flex: 1;
			margin: 0 15px;
		}

		.search-bar input {
			width: 100%;
			padding: 8px 15px;
			border-radius: 20px;
			border: none;
			background: var(--bg-grey);
			outline: none;
			font-size: 14px;
		}

		/* --- 主体布局 --- */
		.main-wrapper {
			max-width: 1200px;
			/* margin: 0 auto; */
			margin-top: 50px;
			display: flex;
			flex-direction: column;
			/* padding-bottom: 80px; */
		}

		/* 头像 */
		.author-avatar {
    width: 36px;            /* 保持你之前设置的大小 */
    height: 36px;           /* 必须设置高度，且与宽度相等，才能形成正圆 */
    border-radius: 50%;     /* 关键：设置为 50% 变为圆形 */
    overflow: hidden;       /* 关键：裁剪掉超出圆形的图片角 */
    background: #eee;       /* 占位背景色 */
    
    /* 增加一点精致感（可选） */
    border: 1px solid rgba(0,0,0,0.05); /* 微弱的边框 */
    display: flex;          /* 确保图片居中 */
    align-items: center;
    justify-content: center;
}

/* 优化容器内的图片样式 */
.author-avatar img {
    width: 100%;
    height: 100%;           /* 让图片充满容器高度 */
    display: block;
    object-fit: cover;      /* 关键：保持图片比例，充满容器，多余部分自动裁剪 */
    object-position: center; /* 居中显示图片核心区域 */
}

		@media (min-width: 992px) {
			.main-wrapper {
				flex-direction: row;
				padding: 20px 15px;
				gap: 30px;
			}

			.content-area {
				flex: 2;
			}

			.sidebar {
				flex: 1;
				max-width: 350px;
			}
		}

		/* --- 文章正文样式 (参考图0cc237) --- */
		.article-container {
			padding: 20px 15px;
			background: #fff;
		}

		.post-title {
			font-size: 24px;
			font-weight: bold;
			line-height: 1.4;
			color: var(--title-black);
			margin-bottom: 15px;
		}

		.author-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20px;
		}

		.author-meta {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.author-avatar {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: #eee;
		}

		.author-detail .name {
			font-size: 14px;
			font-weight: 600;
		}

		.author-detail .time {
			font-size: 12px;
			color: #999;
		}

		.follow-btn {
			border: 1px solid var(--primary-red);
			color: var(--primary-red);
			padding: 2px 12px;
			border-radius: 15px;
			font-size: 13px;
			font-weight: 600;
		}

		.article-body p {
			font-size: 17px;
			color: #333;
			margin-bottom: 1.5em;
			text-align: justify;
		}

		.article-body img {
			width: 100%;
			border-radius: 8px;
			margin: 10px 0;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		}

		.section-sub-title {
			font-size: 20px;
			font-weight: bold;
			margin: 25px 0 15px;
			border-left: 4px solid var(--primary-red);
			padding-left: 12px;
		}

		/* --- 交互栏 (底部) --- */
		.interaction-bar {
			position: fixed;
			/* 关键：固定定位 */
			bottom: 0;
			/* 紧贴底部 */
			left: 0;
			right: 0;
			z-index: 1000;
			/* 确保在最上层 */

			display: flex;
			align-items: center;
			justify-content: space-around;

			padding: 12px 0;
			background: rgba(255, 255, 255, 0.95);
			/* 半透明白色背景 */
			backdrop-filter: blur(10px);
			/* 毛玻璃效果，更高级 */

			border-top: 1px solid var(--border-grey);
			box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
			/* 顶部的微弱投影 */
		}

		.inter-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: var(--text-grey);
			font-size: 12px;
			cursor: pointer;
		}

		.inter-item span {
			margin-top: 4px;
		}

		/* --- 相关阅读卡片 --- */
		.related-box h3 {
			font-size: 18px;
			margin-bottom: 15px;
		}

		.related-card {
			display: flex;
			gap: 12px;
			padding: 12px;
			background: var(--bg-grey);
			border-radius: 8px;
			margin-bottom: 12px;
		}

		.related-card img {
			width: 100px;
			height: 70px;
			border-radius: 6px;
			object-fit: cover;
		}

		.related-card h4 {
			font-size: 14px;
			font-weight: 600;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		/* --- 侧边栏 --- */
		.sidebar-card {
			background: #fff;
			border-radius: 12px;
			padding: 20px;
			border: 1px solid var(--border-grey);
		}

		.sidebar-card h3 {
			font-size: 16px;
			margin-bottom: 15px;
			padding-bottom: 10px;
			border-bottom: 1px solid var(--border-grey);
		}

		.side-item {
			display: flex;
			gap: 10px;
			margin-bottom: 15px;
		}

		.side-item img {
			width: 70px;
			height: 50px;
			border-radius: 4px;
			object-fit: cover;
		}

		.side-item h4 {
			font-size: 13px;
			line-height: 1.4;
		}