:root {
	--toast-bg: rgba(0, 0, 0, 0.75);
	--primary-light: #4ade80;
	--primary-dark: #16a34a;
	--secondary: #0ea5e9;
	--secondary-light: #38bdf8;
	--bg: #ffffff;
	--bg-secondary: #f8fafc;
	--bg-tertiary: #f1f5f9;
	--text: #465264;
	--text-light: #64748b;
	--text-lighter: #94a3b8;
	--border: #e2e8f0;
	--radius: 8px;
	--radius-md: 10px;
	--radius-lg: 12px;
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
	--transition: all 0.2s ease;
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
}

.index1 {
	display: inline-block;
	padding: 3px 12px;
	background-color: #e8f5e8;
	color: #2e7d32;
	text-decoration: none;
	border-radius: 15px;
	font-size: 11px;
	font-weight: 600;
	transition: all 0.3s ease;
	line-height: 1.4;
	margin-right: 6px;
	vertical-align: middle;
}

.index1:hover {
	filter: alpha(opacity:90);
	opacity: 0.9;
	background-color: #c8e6c9;
}

.yhzxcss {
	background: #e3f2fd;
	border-radius: 15px;
	display: inline-flex;
	transition: all 0.3s ease;
	padding: 0 12px;

	vertical-align: middle;
	height: 23px;
	align-items: center;
}

.yhzxcss a {
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	color: #1565c0;
	text-align: center;
	line-height: 1;
}

.yhzxcss:hover {
	filter: alpha(opacity:90);
	opacity: 0.9;
	background-color: #bbdefb;
}

#toast-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

.toast {
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 12px 24px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	max-width: 400px;
	white-space: normal;
	text-align: center;
	line-height: 1.5;
	opacity: 0;
	transform: translateX(100%);
	transition: opacity 0.3s ease, transform 0.3s ease;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.toast.toast-visible {
	opacity: 1;
	transform: translateX(0);
}

.toast.toast-error {
	background-color: rgba(255, 69, 0, 0.85);
}

.nav-user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	background-color: var(--bg-tertiary);
	border: 2px solid transparent;
	transition: all 0.2s ease;
	border: 3px solid #fff;
}

.nav-user-avatar:hover {
	border: 3px solid var(--primary);
}

.nav-user-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.user-dropdown-menu {
	position: absolute;
	top: calc(100% + 5px);
	right: 10px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	z-index: 9999;
	display: none;
	width: 300px;
	overflow: hidden;
	font-size: 14px;
	transition: all 0.2s ease;
	padding: 0;
}

.user-dropdown-menu.show {
	display: block;
}

.user-menu-item {
	display: flex;
	align-items: center;
	padding: 12px 20px;
	color: #6c7684;
	cursor: pointer;
	transition: all 0.2s ease;
	background: transparent;
	border: none;
	text-align: left;
	font-size: 14px;
	line-height: 1.5;
}

.user-menu-item .menu-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--text-secondary);
	margin-right: 12px;
	transition: color 0.2s ease;
}

.menu-value {
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 400;
	text-align: right;
	flex-shrink: 0;
	margin-left: auto;
}

.user-menu-item.user-logout {
	color: #ef4444;
	padding-bottom: 20px;
	border-top: 1px solid var(--border-color);
}

.user-menu-item.user-logout:hover {
	background-color: #fef2f2;
}

.user-menu-item.user-logout:hover .menu-icon {
	color: #dc2626;
}

.points-recharge-btn {
	display: inline-block;
	padding: 0 12px;
	background-color: #f3e5f5;
	color: #7b1fa2;
	text-decoration: none;
	border-radius: 15px;
	font-size: 11px;
	font-weight: 600;
	transition: all 0.3s ease;
	line-height: 23px;
	margin-left: 0px;
	vertical-align: middle;
	height: 23px;
}

.points-recharge-btn:hover {
	filter: alpha(opacity:90);
	opacity: 0.9;
	background-color: #e1bee7;
}

.user-level-badge {
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: all 0.2s ease;
}

.user-level-badge.游客 {
	background-color: #e0f2fe;
	color: #0369a1;
	float: left;
}

.user-level-badge.VIP会员 {
	background-color: #fef3c7;
	color: #b45309;
	float: left;
}

.user-level-badge.管理员 {
	background-color: #fee2e2;
	color: #b91c1c;
	float: left;
}

.user-level-badge svg {
	width: 12px;
	height: 12px;
}

.user-profile-section {
	padding: 20px;
	background-color: var(--primary);
	border-bottom: 1px solid var(--border-color);
}

.user-profile-header {
	display: flex;
	align-items: center;
	gap: 16px;
}

.user-profile-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 600;
	font-size: 18px;
	border: 0px solid white;
	box-shadow: var(--shadow-sm);
}

.user-profile-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.user-profile-name {
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 12px;
}

.admin-btn {
	display: inline-block;
	margin-top: 8px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background-color: #ef4444;
	border: none;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.admin-btn:hover {
	background-color: #dc2626;
	transform: translateY(-1px);
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	line-height: 1.6;
	color: var(--text-primary);
	background-color: var(--bg-secondary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
}

.content-container {
	box-sizing: border-box;
}

.full-width-container {
	width: 100%;
}

.header {
	background-color: var(--bg);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	border-bottom: 1px solid var(--border);
	width: 100%;
	min-height: 70px;
	box-sizing: border-box;
}

.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 70px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	width: 100%;
	box-sizing: border-box;
}

.page-load-progress-container {
	background-color: var(--bg-secondary);
	border-radius: 12px;
	height: 4px;
	width: 100%;
	box-shadow: none;
}

.icon {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.search-button .icon {
	width: 20px;
	height: 20px;
}

#user-actions-template {
	display: none;
}

.sidebar-post-btn {
	width: 120px;
	padding: 10px 15px;
	margin-top: 10px;
	text-align: center;
	text-decoration: none;
	color: white;
	background-color: var(--primary-color, #1890ff);
	border-radius: 50px;
	transition: all 0.3s ease;
	display: none;
}

.sidebar-post-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

.trending-item {
	margin-top: 20px;
}
}

.page-load-progress-bar {
	background: linear-gradient(90deg, #3b82f6, #60a5fa);
	height: 100%;
	width: 0;
	transition: width 0.1s ease;
	border-radius: 12px;
	box-shadow: none;
}

.site-top-loading-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 3px;
	background: var(--primary);
	z-index: 9999;
	opacity: 1;
	transition: width 0.3s ease, opacity 0.5s ease;
	box-shadow: none;
}

.logo {
	text-decoration: none;
	color: var(--primary);
	font-size: 1.5rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	position: relative;
}

.logo::after {
	content: attr(data-text);
	position: absolute;
	top: calc(100% - 12px);
	left: 0;
	font-size: 1.5rem;
	font-weight: 700;
	transform: scaleY(-1);
	background: linear-gradient(to top, transparent 0%, var(--primary) 10%, rgba(255, 255, 255, 0.01) 60%, transparent 100%);
	opacity: 0.18;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	pointer-events: none;
	white-space: nowrap;
}

.logo svg {
	display: inline-block;
	vertical-align: middle;
}

.nav-links {
	display: flex;
	list-style: none;
	gap: var(--spacing-lg);
}

.nav-links a {
	text-decoration: none;
	color: var(--text-light);
	font-weight: 500;
	padding: var(--spacing-sm) 0;
	position: relative;
	transition: var(--transition);
	font-size: 0.95rem;
}

.nav-links a:hover,
.nav-links a.active {
	color: var(--primary);
}

.nav-links a.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--primary);
	border-radius: 1px;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

/* 用户操作容器 - 控制登录注册按钮和头像的布局 */
.user-actions-container {
	display: flex;
	align-items: center;
	position: relative;
	/* 确保容器有足够宽度容纳头像 */
	width: fit-content;
}

/* 登录注册按钮组样式 */
.login-register-buttons {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 调整用户头像位置 - 与注册按钮左侧对齐并垂直居中 */
.nav-user-avatar {
	/* 使用绝对定位确保用户头像始终在同一位置，减少闪烁 */
	position: absolute;
	right: 0;
	/* 修改为0，确保头像左侧与注册按钮左侧对齐 */
	top: 50%;
	transform: translateY(-50%);
	/* 保留原有样式 */
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: var(--bg-tertiary);
	border: 3px solid #fff;
	transition: all 0.2s ease;
	/* 确保头像和按钮不重叠显示 */
	visibility: hidden;
	opacity: 0;
}

/* 当用户登录时显示头像 */
.nav-user-avatar.has-user {
	visibility: visible;
	opacity: 1;
}

/* 当显示登录注册按钮时，隐藏头像容器 */
.login-register-buttons:not(.hidden)+.nav-user-avatar {
	display: none;
}

/* 当隐藏登录注册按钮时，显示头像 */
.login-register-buttons.hidden+.nav-user-avatar {
	display: flex;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45rem 0.9rem;
	border: none;
	border-radius: 50px;
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition);
}

.btn-primary {
	background-color: var(--primary);
	color: white;
	/* 移除margin-left，由.user-actions的gap属性统一控制间距 */
}

.btn-primary:hover {
	opacity: 0.8;
}

.btn-outline {
	background-color: transparent;
	color: var(--text);
	border: 1px solid var(--border);
}

.btn-outline:hover {
	background-color: var(--primary-opacity-10);
	border-color: var(--primary);
}

.btn-icon {
	background: none;
	border: none;
	color: var(--text-light);
	cursor: pointer;
	padding: var(--spacing-sm);
	border-radius: var(--radius);
	transition: var(--transition);
}

.btn-icon:hover {
	background-color: var(--bg-tertiary);
	color: var(--primary);
}

.mobile-menu-btn {
	display: none;
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 10px 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	color: var(--text-primary);
	width: 40px;
	height: 40px;
	text-align: center;
	align-items: center;
	justify-content: center;
}

.mobile-menu-btn:hover {
	background-color: var(--bg-tertiary);
	border-color: var(--primary);
	color: var(--primary);
}

.mobile-menu-btn:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5);
}

.mobile-menu-btn svg {
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

.search-container {
	padding: var(--spacing-lg) 0;
	width: 100%;
	box-sizing: border-box;
	border-bottom: 0px solid var(--border);
	margin-top: 90px;
	position: relative;
	z-index: 99;
	display: block;
	background-color: var(--bg-secondary);
	clear: both;
}

.search-wrapper {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	padding: 0 30px;
	box-sizing: border-box;
	width: 90%;
}

.search-input {
	width: 100%;
	padding: 0.7rem 1.2rem;
	border: 1px solid var(--border);
	border-radius: 400px;
	font-size: 1rem;
	outline: none;
	transition: var(--transition);
	background-color: var(--bg-tertiary);
}

.search-input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-opacity-10);
}

.search-button {
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--text-lighter);
	cursor: pointer;
	padding: var(--spacing-sm);
	border-radius: var(--radius);
	transition: var(--transition);
}

.search-button:hover {
	background-color: var(--bg-tertiary);
	color: var(--primary);
}

.main-content {
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 0px;
	margin-top: 20px;
}

.content-layout {
	display: grid;
	grid-template-columns: 1fr 310px;
	gap: 20px;
	align-items: start;
	margin: 0 auto;
	width: 1200px;
}

.main-column {
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.sidebar {
	width: 310px;
	box-sizing: border-box;
}

.welcome-banner-container-full {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 0;
	background: linear-gradient(to right, var(--primary, #9333ea), #8b5cf6);
	min-height: 340px;
	overflow: hidden;
	position: relative;
	margin-top: -1px;
}

@keyframes glowLine {

	0%,
	100% {
		opacity: 0;
		transform: translateY(0);
	}

	50% {
		opacity: 1;
		transform: translateY(10px);
	}
}

@keyframes glowLineHorizontal {

	0%,
	100% {
		opacity: 0;
		transform: translateX(0);
	}
}

@keyframes scanLight {
	0% {
		left: -100%;
		opacity: 0;
	}

	20% {
		opacity: 0.5;
	}

	80% {
		opacity: 0.5;
	}

	100% {
		left: 100%;
		opacity: 0;
	}
}

@keyframes glowLineHorizontal {
	50% {
		opacity: 1;
		transform: translateX(10px);
	}
}

.welcome-banner-container-full .particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.digital-rain {
	position: absolute;
	top: 0;
	right: 0;
	width: 30%;
	height: 100%;
	opacity: 0;
	display: none;
	pointer-events: none;
	z-index: 1;
	font-family: 'Courier New', monospace;
	font-size: 16px;
	color: #00ff00;
	flex-wrap: wrap;
}

.digital-rain span {
	display: inline-block;
	animation: fall linear infinite;
	white-space: nowrap;
	opacity: 0;
	text-shadow: 0 0 10px #00ff00, 0 0 20px rgba(0, 255, 0, 0.5);
}

@keyframes fall {
	0% {
		transform: translateY(-20px);
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		transform: translateY(400px);
		opacity: 0;
	}
}

@keyframes particleFloat {
	0% {
		transform: translateY(0) translateX(0);
		opacity: 0.7;
	}

	50% {
		transform: translateY(-20px) translateX(10px);
		opacity: 0.3;
	}

	100% {
		transform: translateY(0) translateX(0);
		opacity: 0.7;
	}
}

@keyframes waveMove {
	0% {
		background-position: 0% 0%, 0% 0%, center, 0% 0%;
		opacity: 0.5;
	}

	50% {
		background-position: 0% 0%, 0% 0%, center, 100% 100%;
		opacity: 0.8;
	}

	100% {
		background-position: 0% 0%, 0% 0%, center, 0% 0%;
		opacity: 0.5;
	}
}

@keyframes gridMove {
	0% {
		background-position: 0 0, 0 0;
	}

	100% {
		background-position: 50px 50px, 50px 50px;
	}
}

@keyframes waveMove {
	0% {
		background-position: 0% 0%, 0% 0%, center, 0% 0%;
	}

	50% {
		background-position: 0% 0%, 0% 0%, center, 100% 100%;
	}

	100% {
		background-position: 0% 0%, 0% 0%, center, 0% 0%;
	}
}

@keyframes glowPulse {

	0%,
	100% {
		filter: brightness(1) saturate(1);
	}

	50% {
		filter: brightness(1.1) saturate(1.2);
	}
}

/* 水蒸气动画 */
@keyframes steamEffect {
	0% {
		transform: scale(0.8) translateY(0) rotate(0deg);
		opacity: 0.8;
	}

	50% {
		transform: scale(2.5) translateY(-50px) rotate(180deg);
		opacity: 0.4;
	}

	100% {
		transform: scale(5) translateY(-100px) rotate(360deg);
		opacity: 0;
	}
}

/* 水蒸气容器样式 */
.welcome-banner-container-full .water-wave {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	overflow: hidden;
}

/* 水蒸气粒子样式 */
.wave-particle {
	position: absolute;
	bottom: 0;
	width: 30px;
	height: 30px;
	background: radial-gradient(ellipse, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 40%, transparent 80%);
	border-radius: 60% 40% 80% 20% / 50% 70% 30% 50%;
	animation: steamEffect 5s ease-out infinite;
	box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
	filter: blur(3px);
}

/* 生成多个水波纹粒子并设置不同的位置和延迟 */
.wave-particle:nth-child(1) {
	left: 5%;
	animation-delay: 0s;
}

.wave-particle:nth-child(2) {
	left: 15%;
	animation-delay: 0.3s;
}

.wave-particle:nth-child(3) {
	left: 25%;
	animation-delay: 0.6s;
}

.wave-particle:nth-child(4) {
	left: 35%;
	animation-delay: 0.9s;
}

.wave-particle:nth-child(5) {
	left: 45%;
	animation-delay: 1.2s;
}

.wave-particle:nth-child(6) {
	left: 55%;
	animation-delay: 1.5s;
}

.wave-particle:nth-child(7) {
	left: 65%;
	animation-delay: 1.8s;
}

.wave-particle:nth-child(8) {
	left: 75%;
	animation-delay: 2.1s;
}

.wave-particle:nth-child(9) {
	left: 85%;
	animation-delay: 2.4s;
}

.wave-particle:nth-child(10) {
	left: 95%;
	animation-delay: 2.7s;
}

.wave-particle:nth-child(11) {
	left: 0%;
	animation-delay: 0.5s;
}

.wave-particle:nth-child(12) {
	left: 10%;
	animation-delay: 1.0s;
}

.wave-particle:nth-child(13) {
	left: 20%;
	animation-delay: 1.5s;
}

.wave-particle:nth-child(14) {
	left: 30%;
	animation-delay: 2.0s;
}

.wave-particle:nth-child(15) {
	left: 40%;
	animation-delay: 2.5s;
}

.wave-particle:nth-child(16) {
	left: 50%;
	animation-delay: 0.2s;
}

.wave-particle:nth-child(17) {
	left: 60%;
	animation-delay: 0.7s;
}

.wave-particle:nth-child(18) {
	left: 70%;
	animation-delay: 1.2s;
}

.wave-particle:nth-child(19) {
	left: 80%;
	animation-delay: 1.7s;
}

.wave-particle:nth-child(20) {
	left: 90%;
	animation-delay: 2.2s;
}

.welcome-banner-inner {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

.welcome-banner-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 25px;
	width: 100%;
	box-sizing: border-box;
}

.welcome-banner {
	color: white;
	padding: 40px 0;
	position: relative;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 200px;
	z-index: 3;
}

.welcome-content {
	position: relative;
	flex: 1;
	max-width: 550px;
	white-space: normal;
	padding-left: 25px;
}

.welcome-banner h1 {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: var(--spacing-sm);
	line-height: 2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-ligatures: common-ligatures;
	letter-spacing: -0.01em;
}

.welcome-banner p {
	font-size: 18px;
	margin-bottom: var(--spacing-lg);
	opacity: 0.9;
	line-height: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-ligatures: common-ligatures;
}

.welcome-banner .btn {
	background-color: rgba(255, 255, 255, 0.8);
	border-color: rgba(255, 255, 255, 0.8);
	color: var(--primary);
	transition: var(--transition);
	padding: 8px 40px;
	border-radius: 20px;
	margin-top: 30px;
	font-size: 16px;
	margin-left: 10px
}

.welcome-banner .btn:hover {
	background-color: rgba(255, 255, 255, 1);
	border-color: rgba(255, 255, 255, 1);
	color: var(--primary);
}

.banner-stats-container {
	display: flex;
	gap: 15px;
	flex-shrink: 0;
	margin-right: 25px;
}

.banner-stat-card {
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(2px);
	border-radius: 15px;
	padding: 20px 20px;
	min-width: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	margin-top: 20px;
	position: relative;
	overflow: hidden;
}

/* 横幅统计卡片扫光效果 */
.banner-stat-card::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
	transform: rotate(45deg);
	animation: scanLight 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 依次扫光效果 - 为每个卡片添加不同的动画延迟 */
.banner-stat-card:nth-child(1)::before {
	animation-delay: 0s;
}

.banner-stat-card:nth-child(2)::before {
	animation-delay: 0.2s;
}

.banner-stat-card:nth-child(3)::before {
	animation-delay: 0.4s;
}

.banner-stat-card:nth-child(4)::before {
	animation-delay: 0.6s;
}

.banner-stat-card:hover {
	background-color: rgba(255, 255, 255, 0.4);
	transform: translateY(-2px);
}

.banner-stat-number {
	font-size: 1.8rem;
	font-weight: 700;
	color: white;
	margin-bottom: 4px;
}

.banner-stat-label {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.9);
	text-align: center;
}

.community-overview {
	background-color: var(--bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	padding: var(--spacing-lg);
	margin-bottom: 20px;
	box-shadow: var(--shadow);
}

.overview-title {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--border);
}

.stats-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	gap: 20px;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
}

.stat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-lg);
	background-color: var(--bg-secondary);
	border-radius: var(--radius-md);
	transition: var(--transition);
	width: 100%;
	min-width: 120px;
	min-height: 150px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

/* 扫光效果 */
.stat-card::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
	transform: rotate(45deg);
	animation: scanLight 3s ease-in-out infinite;
}

@keyframes scanLight {
	0% {
		transform: translateX(-100%) translateY(-100%) rotate(45deg);
	}

	100% {
		transform: translateX(100%) translateY(100%) rotate(45deg);
	}
}

.stat-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.stat-icon {
	width: 48px;
	height: 48px;
	background-color: var(--primary-opacity-10);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);
	font-size: 1.1rem;
	margin-bottom: var(--spacing-sm);
}

.stat-number {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: var(--spacing-xs);
}

.stat-label {
	font-size: 0.85rem;
	color: var(--text-light);
	text-align: center;
}

.categories-section {
	background-color: var(--bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	padding: var(--spacing-lg) var(--spacing-lg) 25px;
	margin-bottom: 20px;
	box-shadow: var(--shadow);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.section-title {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--text);
	margin-top: 5px
}

.section-link {
	color: var(--primary);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	transition: var(--transition);
}

.section-link:hover {
	text-decoration: none;
	filter: alpha(opacity:80);
	opacity: 0.8;
}

.categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--spacing-md);
}

.category-item {
	display: flex;
	align-items: center;
	padding: var(--spacing-md);
	background-color: var(--bg-secondary);
	border-radius: var(--radius);
	transition: var(--transition);
	text-decoration: none;
	color: var(--text);
}

.category-item:hover {
	background-color: var(--primary-opacity-10);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.category-icon-small {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--spacing-md);
	flex-shrink: 0;
}

.category-icon-small img {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 50%
}

.category-info {
	flex: 1;
	min-width: 0;
}

.category-name {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text);
	margin-bottom: var(--spacing-xs);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.category-meta {
	font-size: 0.8rem;
	color: var(--text-lighter);
}

.pagination {
	padding: 20px;
	text-align: center;
	padding-bottom: 0px;
	color: #777;
}

.topics-section {
	background-color: var(--bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	overflow: hidden;
	box-shadow: var(--shadow);
	margin-bottom: 20px;
	padding-bottom: 25px;
}

.topics-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-lg);
	border-bottom: 1px solid var(--border);
	background-color: var(--bg-secondary);
}

.topics-title {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--text);
}

.topics-filter {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.custom-tag1 {
	padding: 3px 8px;
	background-color: #e0f2fe;
	color: #0369a1;
	font-size: 0.75rem;
	border-radius: 4px;
	font-weight: 500;
	text-decoration: none;
	display: inline-block;
	padding: 5px 10px;
	background-color: var(--primary-opacity-10);
	color: var(--primary);
	font-size: 0.75rem;
	border-radius: 50px;
	font-weight: 500;
	text-decoration: none;
}

.custom-tag1 a {
	color: var(--primary);
	text-decoration: none;
}

.filter-btn {
	background-color: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: 0.85rem;
	color: var(--text-light);
	cursor: pointer;
	transition: var(--transition);
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	width: 82px;
	height: 34px;
	padding-left: 13px;
	border-radius: 400px;
}

.filter-btn.active,
.filter-btn:hover {
	background-color: var(--primary);
	color: white;
	border-color: var(--primary);
}

.filter-btn.active .icon,
.tab-item.active .icon,
.filter-btn:hover .icon,
.tab-item:hover .icon {
	background-color: white;
}

.topic-item {
	display: flex;
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom: 1px solid var(--border);
	position: relative;
	transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	gap: var(--spacing-md);
	height: auto;
	min-height: 100px;
	box-sizing: border-box;
}

.topic-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: var(--primary);
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.topic-item:hover {
	background-color: var(--bg-secondary);
}

.topic-item:hover::before {
	opacity: 1;
}

.topic-item:last-child {
	border-bottom: none;
}

.topic-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	margin-top: 5px;
}

.topic-content {
	flex: 1;
	min-width: 0;
}

.topic-content p {
	font-size: 14px;
	color: var(--text-lighter);
	line-height: 26px;
}

.topic-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-xs);
}

.topic-meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.topic-author {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--text);
	text-decoration: none;
}

.topic-author:hover {
	color: var(--primary);
}

.topic-time {
	font-size: 0.8rem;
	color: var(--text-lighter);
}

.topic-tags {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.topic-tags a {
	text-decoration: none;
	color: var(--primary);
}

.topic-tag {
	padding: 5px 10px;
	background-color: var(--primary-opacity-10);
	color: var(--primary);
	font-size: 0.75rem;
	border-radius: 50px;
	font-weight: 500;
	text-decoration: none;
}

.topic-tag:hover {
	background-color: var(--primary-opacity-20);
}

.topic-title {
	font-size: 15px;
	font-weight: 500;
	color: var(--text);
	text-decoration: none;
	margin-bottom: var(--spacing-sm);
	display: block;
	line-height: 1.4;
	transition: color 0.2s ease;
	line-height: 28px;
	text-shadow: 0 1px 1px rgba(102, 126, 234, 0.2);
}

.topic-title:hover {
	color: var(--primary);
}

.topic-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.topic-stats {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.topic-stat {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-size: 0.8rem;
	color: var(--text-lighter);
}

.sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.user-profile {
	background-color: var(--bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	padding: var(--spacing-lg) var(--spacing-lg) 25px;
	text-align: center;
	box-shadow: var(--shadow);
}

.user-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto var(--spacing-sm);
	border: 3px solid var(--primary);
	margin-top: 0px;
	margin-bottom: 25px
}

.user-name {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: var(--spacing-xs);
	margin-top: 10px
}

.user-role {
	font-size: 0.85rem;
	color: var(--text-light);
	margin-bottom: var(--spacing-md);
}

.user-actions {
	display: flex;
	gap: var(--spacing-sm);
	justify-content: center;
	align-items: center;
	/* 添加垂直居中对齐 */
}

.tags-cloud-section {
	background-color: var(--bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	padding: 20px 20px 25px;
	box-shadow: var(--shadow);
}

.tags-header {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: var(--spacing-md);
	margin-top: 5px
}

.tags-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

.tag {
	padding: 0.35rem 0.75rem;
	background-color: var(--bg-secondary);
	color: var(--text-light);
	font-size: 0.8rem;
	border-radius: 16px;
	text-decoration: none;
	transition: var(--transition);
	border: 1px solid transparent;
	margin-bottom: 8px;
}

.tag:hover {
	background-color: var(--primary-opacity-10);
	color: var(--primary);
	border-color: var(--primary-opacity-10);
}

.tag2 {
	display: inline-block;
	background-color: #f0f0f0;
	padding: 5px 5px 5px 10px;
	color: var(--text-light);
	font-size: 0.8rem;
	border-radius: 50px;
	text-decoration: none;
	transition: var(--transition);
	border: 1px solid transparent;
	margin: 5px;
}

.tag2:hover {
	background-color: var(--primary-opacity-10);
	color: var(--primary);
	border-color: var(--primary-opacity-10);
}

.sidebar-post-btn {
	width: 50%;
	padding: 10px 15px;
	margin-top: 10px;
	text-align: center;
	text-decoration: none;
	color: white;
	background-color: var(--primary-color, #1890ff);
	border-radius: 500px;
	transition: 0.3s;
	opacity: 1;
	transform: translateY(0px);
}

.trending-topics {
	background-color: var(--bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	padding: var(--spacing-lg) var(--spacing-lg) 25px;
	box-shadow: var(--shadow);
}

.trending-header {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: var(--spacing-md);
	margin-top: 5px
}

.trending-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.trending-item {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-md);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--border);
	text-decoration: none;
	color: var(--text);
	transition: var(--transition);
}

.trending-item:hover {
	color: var(--primary);
}

.trending-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.trending-rank {
	width: 24px;
	height: 24px;
	background-color: var(--primary);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 600;
	flex-shrink: 0;
	margin-top: 2px;
}

.trending-rank.warm {
	background-color: #f59e0b;
}

.trending-rank.rank-1-2 {
	background-color: #FF6B6B;
}

.trending-rank.rank-3-4 {
	background-color: #f59e0b;
}

.trending-rank.rank-5-6 {
	background-color: #2ED573
}

.tags-cloud .tag {
	font-weight: 500;
	transition: all 0.2s ease;
	padding: 4px 4px 4px 12px;
	border-radius: 16px;
}

.trending-content {
	flex: 1;
}

.trending-title {
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: var(--spacing-xs);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.4;
	display: inline-block;
	white-space: nowrap;
	width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.trending-meta {
	font-size: 0.75rem;
	color: var(--text-lighter);
}

.events-section {
	background-color: var(--bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	padding: var(--spacing-lg) var(--spacing-lg) 25px;
	box-shadow: var(--shadow);
}

.events-header {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: var(--spacing-md);
	margin-top: 5px
}

.event-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding-bottom: var(--spacing-md);
	margin-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--border);
	text-decoration: none;
	color: var(--text);
	transition: var(--transition);
	width: 270px
}

.event-item:hover {
	color: var(--primary);
}

.event-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.event-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background-color: var(--primary-opacity-10);
	border-radius: var(--radius);
	flex-shrink: 0;
	padding-bottom: 5px;
}

.event-month {
	font-size: 0.75rem;
	color: var(--primary);
	font-weight: 500;
	padding-top: 5px
}

.event-day {
	font-size: 1.2rem;
	color: var(--text);
	font-weight: 700;
}

.event-info {
	flex: 1;
	min-width: 0;
}

.event-title {
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: var(--spacing-xs);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.event-location {
	font-size: 0.75rem;
	color: var(--text-lighter);
}

.load-more {
	text-align: center;
	padding: var(--spacing-lg);
	background-color: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.load-more-btn {
	padding: 0.5rem 1.2rem;
	background-color: transparent;
	color: var(--primary);
	border: 1px solid var(--primary);
	border-radius: var(--radius);
	font-size: 0.9rem;
	cursor: pointer;
	font-weight: 500;
	transition: var(--transition);
}

.load-more-btn:hover {
	background-color: var(--primary);
	color: white;
	border: 1px solid var(--primary);
}

.footer-bottom {
	text-align: center;
	padding: 10px;
	border-top: 0px solid var(--border);
	color: var(--text-lighter);
	font-size: 0.85rem;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding-top: 30px;
}

.footer1 {
	overflow: hidden;
	width: 1200px;
	margin: 0 auto;
	border-bottom: 1px solid var(--border);
	padding-bottom: 25px;
	line-height: 30px;
}

.footer1 img {
	width: 20px;
	height: 20px;
	border-radius: 400px;
	margin-right: 5px;
	margin-bottom: -5px;
}

.footer1 span {
	margin-right: 20px
}

.footer-bottom a {
	color: var(--text-light);
	text-decoration: none
}

.fade-in {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}

.fas,
.far,
.fa {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto;
}

.fa-spin {
	animation: fa-spin 2s linear infinite;
}

@keyframes fa-spin {
	0% {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(1turn);
	}
}

.fa-leaf:before {
	content: "\f06c";
}

.fa-bars:before {
	content: "\f0c9";
}

.fa-search:before {
	content: "\f002";
}

.fa-users:before {
	content: "\f0c0";
}

.fa-comments:before {
	content: "\f086";
}

.fa-reply:before {
	content: "\f3e5";
}

.fa-tags:before {
	content: "\f02c";
}

.fa-clock:before {
	content: "\f017";
}

.fa-fire:before {
	content: "\f06d";
}

.fa-thumbs-up:before {
	content: "\f164";
}

.fa-eye:before {
	content: "\f06e";
}

.fa-comment:before {
	content: "\f075";
}

.fa-spinner:before {
	content: "\f110";
}






::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}




::-webkit-scrollbar-track {
	background: var(--bg-secondary);
	border-radius: 12px;
}

::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 12px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--primary);
}

.text-right {
	text-align: right;
}

.inline-block-middle-relative {
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

.login-btn {
	margin-right: 5px;
	vertical-align: middle;
}

.register-btn {
	position: relative;
	z-index: 1;
	vertical-align: middle;
}

.nav>* {
	box-sizing: border-box;
}

body,
html {
	overflow-x: hidden;
}

.container,
.content-container,
.main-content {
	/* width: 100%; */
	/* box-sizing: border-box; */
	/* padding-left: 10px; */
	/* padding-right: 10px; */
}

.header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 1000 !important;
	background-color: var(--bg) !important;
	width: 100% !important;
	height: auto !important;
	min-height: 70px;
	transition: all 0.3s ease !important;
}

.user-avatar-hidden {
	display: inline-block;
	right: 0;
	top: 0;
	z-index: 2;
	visibility: hidden;
	opacity: 0;
	width: 38px;
	height: 38px;
}

.avatar-circle {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	cursor: pointer;
}

.profile-info-left {
	text-align: left;
}

.level-badge-text {
	display: inline-block;
	position: relative;
}

.menu-item-left {
	text-align: left;
}

.menu-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: #555;
	margin-right: 8px;
	display: inline-block;
	vertical-align: middle;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	position: relative;
}

.menu-icon::before {
	content: attr(data-icon);
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.user-level-badge .menu-icon {
	width: 12px;
	height: 12px;
	margin-right: 0px;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

.members-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	text-align: center
}

/* 板块头部区域样式 */
.category-header-section {
	margin-bottom: 20px;
	padding: 30px;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	border: 1px solid var(--border);
}

.category-header-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.category-info {
	flex: 1;
}

/* 板块标题容器 */
.category-title-container {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 15px;
}

.category-title {
	font-size: 28px;
	font-weight: 700;
	color: #333;
	margin: 0;
	line-height: 1.3;
	max-width: 630px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 话题数量 */
.category-meta {
	display: flex;
	align-items: center;
	gap: 15px;
}

.topic-count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	background-color: #f5f7fa;
	color: #666;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 500;
}

/* 关键词标签区域 */
.category-keywords {
	margin-bottom: 20px;
	white-space: nowrap;
	overflow: hidden;
}

.category-keywords a {
	display: inline-block;
	padding: 6px 14px;
	margin-right: 10px;
	margin-bottom: 10px;
	background-color: #e8f4ff;
	color: var(--primary);
	border-radius: 20px;
	text-decoration: none;
	font-size: 13px;
	transition: all 0.2s ease;
}

/* 关键词标签样式 */
.custom-tag1 {
	display: inline-block;
}

/* 版块页面关键词样式 - 独特的绿色系设计 */
.category-tag {
	display: inline-block;
}

.category-tag a {
	display: inline-block;
	padding: 4px 10px;
	margin-right: 8px;
	background-color: #e8f5e8;
	color: #4caf50;
	border-radius: 15px;
	text-decoration: none;
	font-size: 12px;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.category-tag a:hover {
	background-color: #4caf50;
	color: #fff;
	transform: translateY(-1px);
}

.category-keywords a:hover {
	background-color: var(--primary);
	color: #fff;
	transform: translateY(-1px);
}

/* 描述和缩略图区域 */
.category-details {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.category-thumbnail {
	flex-shrink: 0;
}

.category-thumbnail img {
	width: 160px;
	height: 100px;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-description {
	flex: 1;
}

.category-description p {
	margin: 0;
	color: #666;
	line-height: 1.7;
	font-size: 15px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 图标样式扩展 */
.icon.topic::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='16' height='16'%3E%3Cpath fill='%23666' d='M448 0H64C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm-42 400H104c-6.6 0-12-5.4-12-12s5.4-12 12-12h302c6.6 0 12 5.4 12 12s-5.4 12-12 12zm0-96H104c-6.6 0-12-5.4-12-12s5.4-12 12-12h302c6.6 0 12 5.4 12 12s-5.4 12-12 12zm0-96H104c-6.6 0-12-5.4-12-12s5.4-12 12-12h302c6.6 0 12 5.4 12 12s-5.4 12-12 12zm0-96H104c-6.6 0-12-5.4-12-12s5.4-12 12-12h302c6.6 0 12 5.4 12 12s-5.4 12-12 12z'/%3E%3C/svg%3E");
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* 响应式设计 */
@media (max-width: 768px) {
	.category-header-content {
		flex-direction: column;
	}

	.category-title-container {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.category-title {
		font-size: 24px;
		width: 100%
	}

	.post02 {
		display: none;
	}

	.category-details {
		flex-direction: column;
	}

	.category-info {
		width: 100%;
	}

	.category-thumbnail img {
		width: 100%;
		height: 100%;
	}

	.custom-tag1 {
		visibility: hidden;
	}
}

.members-grid img {
	border-radius: 50%;
	width: 50px;
	height: 50px;
	margin: 0 auto;
	transition: all 0.3s ease;
	transform-origin: center;
}

.members-grid .member-link:hover img {
	transform: scale(1.15);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.members-grid .member-link:hover .member-name {
	color: var(--primary);
	transition: color 0.3s ease;
}

.member-name {
	margin-top: 10px;
	font-size: 14px;
	color: var(--text);
	display: inline-block;
	white-space: nowrap;
	width: 70px;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 5px
}

.list1 {
	margin: 12px 0 0 0;
	color: var(--text-lighter);
	line-height: 1.6;
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	float: left
}

.list2 {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.list2 img {
	width: 120px;
	height: 80px;
	border-radius: 10px;
	object-fit: cover;
	margin-top: 17px;
}

.list3 {
	width: 500px;
	font-size: 20px;
	display: inline-block;
	margin: 0;
	line-height: 32px;
	margin-bottom: 20px;
	margin-right: 45px;
	margin-left: 120px
}

.list4 {
	width: 120px;
	float: right;
	margin: 0;
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.icon-user::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='16' height='16'%3E%3Cpath fill='%23555' d='M224 248a120 120 0 1 0 0-240 120 120 0 1 0 0 240zm-29.7 56C95.8 304 16 383.8 16 482.3 16 498.7 29.3 512 45.7 512l251.5 0C261 469.4 240 414.5 240 356.4l0-31.1c0-7.3 1-14.5 2.9-21.3l-48.6 0zm251 184.5l-13.3 6.3 0-188.1 96 32 0 19.6c0 55.8-32.2 106.5-82.7 130.3zM421.9 259.5l-112 37.3c-13.1 4.4-21.9 16.6-21.9 30.4l0 31.1c0 74.4 43 142.1 110.2 173.7l18.5 8.7c4.8 2.2 10 3.4 15.2 3.4s10.5-1.2 15.2-3.4l18.5-8.7C533 500.3 576 432.6 576 358.2l0-31.1c0-13.8-8.8-26-21.9-30.4l-112-37.3c-6.6-2.2-13.7-2.2-20.2 0z'/%3E%3C/svg%3E") !important;
	display: inline-block !important;
	width: 16px !important;
	height: 16px !important;
	vertical-align: middle !important;
}

.icon-level::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='85 43 342 426'%3E%3Cpath fill='%23555' d='M256 43L85 107L85 237Q85 277 98 315Q111 353 134 384.50Q157 416 188 438Q219 460 256 469Q293 460 324 438Q355 416 378 384.50Q401 353 414 315Q427 277 427 237L427 107ZM233 332L158 256L188 226L233 271L324 181L354 211Z'/%3E%3C/svg%3E") !important;
	display: inline-block !important;
	width: 16px !important;
	height: 16px !important;
	vertical-align: middle !important;
}

.icon-calendar::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='64 43 384 426'%3E%3Cpath fill='%23555' d='M405 85L384 85L384 43L341 43L341 85L171 85L171 43L128 43L128 85L107 85Q89 85 76.50 97.50Q64 110 64 128L64 427Q64 444 76.50 456.50Q89 469 107 469L405 469Q423 469 435.50 456.50Q448 444 448 427L448 128Q448 110 435.50 97.50Q423 85 405 85ZM405 427L107 427L107 213L405 213ZM192 299L149 299L149 256L192 256ZM277 299L235 299L235 256L277 256ZM363 299L320 299L320 256L363 256ZM192 384L149 384L149 341L192 341ZM277 384L235 384L235 341L277 341ZM363 384L320 384L320 341L363 341Z'/%3E%3C/svg%3E") !important;
	display: inline-block !important;
	width: 16px !important;
	height: 16px !important;
	vertical-align: middle !important;
}

.icon-logout::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='16' height='16'%3E%3Cpath fill='red' d='M505 273c9.4-9.4 9.4-24.6 0-33.9L361 95c-6.9-6.9-17.2-8.9-26.2-5.2S320 102.3 320 112l0 80-112 0c-26.5 0-48 21.5-48 48l0 32c0 26.5 21.5 48 48 48l112 0 0 80c0 9.7 5.8 18.5 14.8 22.2s19.3 1.7 26.2-5.2L505 273zM160 96c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 32C43 32 0 75 0 128L0 384c0 53 43 96 96 96l64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l64 0z'/%3E%3C/svg%3E") !important;
	display: inline-block !important;
	width: 16px !important;
	height: 16px !important;
	vertical-align: middle !important;
}

.icon.search {
	background-color: var(--text-lighter, #999);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.icon.search:hover {
	background-color: var(--primary)
}

.icon.clock {
	background-color: var(--text-lighter, #999);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 -128 1536 1536'%3E%3Cpath d='M1475 342Q1536 484 1536 640Q1536 796 1475 938Q1414 1080 1311 1183Q1208 1286 1066 1347Q924 1408 768 1408Q596 1408 441 1335.50Q286 1263 177 1131Q170 1121 170.50 1108.50Q171 1096 179 1088L316 950Q326 941 341 941Q357 943 364 953Q437 1048 543 1100Q649 1152 768 1152Q872 1152 966.50 1111.50Q1061 1071 1130 1002Q1199 933 1239.50 838.50Q1280 744 1280 640Q1280 536 1239.50 441.50Q1199 347 1130 278Q1061 209 966.50 168.50Q872 128 768 128Q670 128 580 163.50Q490 199 420 265L557 403Q588 433 571 472Q554 512 512 512L64 512Q38 512 19 493Q0 474 0 448L0 0Q0-42 40-59Q79-76 109-45L239 84Q346-17 483.50-72.50Q621-128 768-128Q924-128 1066-67Q1208-6 1311 97Q1414 200 1475 342ZM896 352L896 800Q896 814 887 823Q878 832 864 832L544 832Q530 832 521 823Q512 814 512 800L512 736Q512 722 521 713Q530 704 544 704L768 704L768 352Q768 338 777 329Q786 320 800 320L864 320Q878 320 887 329Q896 338 896 352Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: 6px;
	width: 15px;
	height: 15px;
	transform: translateZ(0)
}

.icon.comment {
	background-color: var(--text-lighter, #999);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='85.63636363636364 42.2142857142857 341.4405594405596 437.51298701298697'%3E%3Cpath d='M314 385.94Q309 390.94 301.50 394.94Q294 398.94 288 400.94Q270 406.94 252.50 401.44Q235 395.94 223 385.94Q221 383.94 221.50 381.94Q222 379.94 224 378.94Q243 372.94 254 359.94Q265 346.94 269 331.94Q272 317.94 268 304.94Q264 291.94 262 277.94Q260 266.94 260.50 256.44Q261 245.94 265 235.94Q265 233.94 267 233.94Q269 233.94 270 234.94Q276 247.94 285.50 257.94Q295 267.94 305.50 276.94Q316 285.94 324.50 296.44Q333 306.94 335 320.94Q336 326.94 336 331.94Q337 346.94 331 361.94Q325 376.94 314 385.94ZM374 214.94Q362 203.94 349 194.94Q336 185.94 324 173.94Q300 149.94 292.50 117.94Q285 85.94 295 52.94Q297 47.94 293.50 44.44Q290 40.94 285 42.94Q273 47.94 262.50 54.94Q252 61.94 242 68.94Q211 94.94 193 130.44Q175 165.94 172.50 206.44Q170 246.94 185 285.94Q185 287.94 185.50 289.94Q186 291.94 186 293.94Q186 302.94 178 306.94Q170 310.94 162 303.94Q160 300.94 159 298.94Q143 278.94 137.50 253.44Q132 227.94 136 202.94Q137 196.94 131.50 193.94Q126 190.94 122 195.94Q102 221.94 93 253.44Q84 284.94 86 316.94Q86 325.94 87.50 335.44Q89 344.94 92 353.94Q99 377.94 111 397.94Q130 429.94 162 451.44Q194 472.94 231 477.94Q270 482.94 309.50 473.94Q349 464.94 379 437.94Q401 416.94 413.50 389.44Q426 361.94 427 331.94Q428 301.94 416 273.94Q415 271.94 414.50 270.44Q414 268.94 413 266.94Q404 249.94 393 235.94Q389 229.94 384.50 224.94Q380 219.94 374 214.94Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: 0px;
	width: 16px;
	height: 16px
}

.icon.topic {
	background-color: var(--text-lighter, #999);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M493.7 .9l-194.2 74.7 2.3-29.3c1-12.8-12.8-21.5-24-15.1L101.3 133.4C38.6 169.7 0 236.6 0 309 0 421.1 90.9 512 203 512 275.4 512 342.3 473.4 378.6 410.7L480.8 234.3c6.5-11.1-2.2-25-15.1-24l-29.3 2.3 74.7-194.2c.6-1.5 .9-3.2 .9-4.8 0-7.5-6-13.5-13.5-13.5-1.7 0-3.3 .3-4.8 .9zM192 192a128 128 0 1 1 0 256 128 128 0 1 1 0-256zm0 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm16 96a16 16 0 1 0 0-32 16 16 0 1 0 0 32z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M493.7 .9l-194.2 74.7 2.3-29.3c1-12.8-12.8-21.5-24-15.1L101.3 133.4C38.6 169.7 0 236.6 0 309 0 421.1 90.9 512 203 512 275.4 512 342.3 473.4 378.6 410.7L480.8 234.3c6.5-11.1-2.2-25-15.1-24l-29.3 2.3 74.7-194.2c.6-1.5 .9-3.2 .9-4.8 0-7.5-6-13.5-13.5-13.5-1.7 0-3.3 .3-4.8 .9zM192 192a128 128 0 1 1 0 256 128 128 0 1 1 0-256zm0 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm16 96a16 16 0 1 0 0-32 16 16 0 1 0 0 32z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: 6px;
	width: 16px;
	height: 16px;
}

.icon.fire {
	background-color: var(--text-lighter, #999);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='15' height='15' stroke='none' fill='black'%3E%3Cpath d='M1,21h4V9H1V21z M23,10c0-1.1-0.9-2-2-2h-6.31l0.95-4.57l0.03-0.32c0-0.41-0.17-0.79-0.44-1.06L14.17,1L7.59,7.59C7.22,7.95,7,8.45,7,9v10c0,1.1,0.9,2,2,2h9c0.83,0,1.54-0.5,1.84-1.22l3.02-7.05C23.94,12.9,23.68,11.1,23,10z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='15' height='15' stroke='none' fill='black'%3E%3Cpath d='M1,21h4V9H1V21z M23,10c0-1.1-0.9-2-2-2h-6.31l0.95-4.57l0.03-0.32c0-0.41-0.17-0.79-0.44-1.06L14.17,1L7.59,7.59C7.22,7.95,7,8.45,7,9v10c0,1.1,0.9,2,2,2h9c0.83,0,1.54-0.5,1.84-1.22l3.02-7.05C23.94,12.9,23.68,11.1,23,10z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: 6px;
	width: 16px;
	height: 16px
}

.icon.view {
	background-color: var(--text-lighter, #999);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: 2px;
	width: 18px;
	height: 18px;
}

.icon.message {
	background-color: var(--text-lighter);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 -128.1111111111111 1792 1408.111111111111'%3E%3Cpath d='M990 51.89Q857-0.11 704-0.11Q551-0.11 418 51.89Q285 103.89 206.50 192.89Q128 281.89 128 383.89Q128 465.89 181 541.89Q234 617.89 330 673.89L427 729.89L392 813.89Q426 793.89 454 774.89L498 743.89L551 753.89Q629 767.89 704 767.89Q857 767.89 990 715.89Q1123 663.89 1201.50 574.89Q1280 485.89 1280 383.89Q1280 281.89 1201.50 192.89Q1123 103.89 990 51.89ZM350.50-59.61Q513-128.11 704-128.11Q895-128.11 1057.50-59.61Q1220 8.89 1314 126.89Q1408 244.89 1408 383.89Q1408 522.89 1314 640.89Q1220 758.89 1057.50 827.39Q895 895.89 704 895.89Q618 895.89 528 879.89Q404 967.89 250 1007.89Q214 1016.89 164 1023.89L161 1023.89Q150 1023.89 140.50 1015.89Q131 1007.89 129 994.89Q128 991.89 128 988.39Q128 984.89 128.50 981.89Q129 978.89 130.50 975.89Q132 972.89 133 970.89Q134 968.89 136.50 965.39Q139 961.89 140.50 960.39Q142 958.89 145 955.39Q148 951.89 149 950.89Q154 944.89 172 925.89Q190 906.89 198 896.39Q206 885.89 220.50 867.39Q235 848.89 245.50 828.89Q256 808.89 266 784.89Q142 712.89 71 607.89Q0 502.89 0 383.89Q0 244.89 94 126.89Q188 8.89 350.50-59.61ZM1526 1040.89Q1536 1064.89 1546.50 1084.89Q1557 1104.89 1571.50 1123.39Q1586 1141.89 1594 1152.39Q1602 1162.89 1620 1181.89Q1638 1200.89 1643 1206.89Q1644 1207.89 1647 1211.39Q1650 1214.89 1651.50 1216.39Q1653 1217.89 1655.50 1221.39Q1658 1224.89 1659 1226.89Q1660 1228.89 1661.50 1231.89Q1663 1234.89 1663.50 1237.89Q1664 1240.89 1664 1244.39Q1664 1247.89 1663 1250.89Q1660 1264.89 1650 1272.89Q1640 1280.89 1628 1279.89Q1578 1272.89 1542 1263.89Q1388 1223.89 1264 1135.89Q1174 1151.89 1088 1151.89Q817 1151.89 616 1019.89Q674 1023.89 704 1023.89Q865 1023.89 1013 978.89Q1161 933.89 1277 849.89Q1402 757.89 1469 637.89Q1536 517.89 1536 383.89Q1536 306.89 1513 231.89Q1642 302.89 1717 409.89Q1792 516.89 1792 639.89Q1792 759.89 1721 864.39Q1650 968.89 1526 1040.89Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: 3px;
	width: 18px;
	height: 18px;
	margin-top: 2px
}

.icon.like {
	background-color: var(--text-lighter, #999);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 -128 1536 1664'%3E%3Cpath d='M237 1261Q256 1242 256 1216Q256 1190 237 1171Q218 1152 192 1152Q166 1152 147 1171Q128 1190 128 1216Q128 1242 147 1261Q166 1280 192 1280Q218 1280 237 1261ZM1408 640Q1408 589 1369 550.50Q1330 512 1280 512L928 512Q928 454 976 352.50Q1024 251 1024 192Q1024 94 992 47Q960 0 864 0Q838 26 826 85Q814 144 795.50 210.50Q777 277 736 320Q714 343 659 411Q655 416 636 441Q617 466 604.50 482Q592 498 570 524.50Q548 551 530 568.50Q512 586 491.50 604Q471 622 451.50 631Q432 640 416 640L384 640L384 1280L416 1280Q429 1280 447.50 1283Q466 1286 480.50 1289.50Q495 1293 518.50 1300.50Q542 1308 553.50 1312Q565 1316 589 1324.50Q613 1333 618 1335Q829 1408 960 1408L1081 1408Q1273 1408 1273 1241Q1273 1215 1268 1185Q1298 1169 1315.50 1132.50Q1333 1096 1333 1059Q1333 1022 1315 990Q1368 940 1368 871Q1368 846 1358 815.50Q1348 785 1333 768Q1365 767 1386.50 721Q1408 675 1408 640ZM1536 639Q1536 728 1487 802Q1496 835 1496 871Q1496 948 1458 1015Q1461 1036 1461 1058Q1461 1159 1401 1236Q1402 1375 1316 1455.50Q1230 1536 1089 1536L1053 1536L960 1536Q864 1536 770.50 1513.50Q677 1491 554 1448Q438 1408 416 1408L128 1408Q75 1408 37.50 1370.50Q0 1333 0 1280L0 640Q0 587 37.50 549.50Q75 512 128 512L402 512Q438 488 539 357Q597 282 646 229Q670 204 681.50 143.50Q693 83 712 17Q731-49 774-91Q813-128 864-128Q948-128 1015-95.50Q1082-63 1117 6Q1152 75 1152 192Q1152 285 1104 384L1280 384Q1384 384 1460 460Q1536 536 1536 639Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: 3px;
	width: 15px;
	height: 15px;
}

.icon.forum {
	background-color: var(--text-lighter, #999);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M401.2 39.1L549.4 189.4c27.7 28.1 27.7 73.1 0 101.2L393 448.9c-9.3 9.4-24.5 9.5-33.9 .2s-9.5-24.5-.2-33.9L515.3 256.8c9.2-9.3 9.2-24.4 0-33.7L367 72.9c-9.3-9.4-9.2-24.6 .2-33.9s24.6-9.2 33.9 .2zM32.1 229.5L32.1 96c0-35.3 28.7-64 64-64l133.5 0c17 0 33.3 6.7 45.3 18.7l144 144c25 25 25 65.5 0 90.5L285.4 418.7c-25 25-65.5 25-90.5 0l-144-144c-12-12-18.7-28.3-18.7-45.3zm144-85.5a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M401.2 39.1L549.4 189.4c27.7 28.1 27.7 73.1 0 101.2L393 448.9c-9.3 9.4-24.5 9.5-33.9 .2s-9.5-24.5-.2-33.9L515.3 256.8c9.2-9.3 9.2-24.4 0-33.7L367 72.9c-9.3-9.4-9.2-24.6 .2-33.9s24.6-9.2 33.9 .2zM32.1 229.5L32.1 96c0-35.3 28.7-64 64-64l133.5 0c17 0 33.3 6.7 45.3 18.7l144 144c25 25 25 65.5 0 90.5L285.4 418.7c-25 25-65.5 25-90.5 0l-144-144c-12-12-18.7-28.3-18.7-45.3zm144-85.5a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: 6px;
	width: 18px;
	height: 18px;
	margin-top: -3px;
}

.icon.shop {
	background-color: var(--text-lighter, #999);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2zM1 2v2h2l3.6 7.59l-1.35 2.45c-.16.28-.25.61-.25.96a2 2 0 0 0 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12l.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48V5c0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2zM1 2v2h2l3.6 7.59l-1.35 2.45c-.16.28-.25.61-.25.96a2 2 0 0 0 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12l.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48V5c0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: 6px;
	width: 18px;
	height: 18px;
}

.back-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--primary);
	color: white;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
	transition: all 0.3s ease;
	opacity: 0;
	visibility: hidden;
	z-index: 1000;
}

.back-to-top:hover {

	transform: translateY(-4px);
	box-shadow: 0 6px 16px var(--primary);
}

.back-to-top.visible {
	opacity: 1;
	visibility: visible;
}

.footer {
	background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
	color: #4a5568;

	font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
	position: relative;
	overflow: hidden;
	border-top: 1px solid #e2e8f0;
	box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.03);
}

.footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(ellipse at 20% 30%, rgba(80, 180, 150, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(100, 150, 200, 0.08) 0%, transparent 50%);
	z-index: 0;
	animation: backgroundShift 15s ease-in-out infinite;
}

.footer::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
	background-size: 40px 40px;
	opacity: 0.5;
	pointer-events: none;
	z-index: 1;
	animation: gridMove 25s linear infinite;
}

@keyframes backgroundShift {

	0%,
	100% {
		background-position: 20% 30%, 80% 70%;
		opacity: 0.6;
	}

	50% {
		background-position: 30% 40%, 70% 60%;
		opacity: 0.8;
	}
}

@keyframes gridMove {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(50px, 50px);
	}
}

.footer-container {
	max-width: 1150px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	padding: 25px;
	padding-bottom: 10px
}

.footer-content {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.5fr;
	gap: 4rem;
	padding-bottom: 20px;
}

.footer-brand {
	display: flex;
	flex-direction: column;
}

.brand-title {
	font-size: 24px;
	font-weight: 600;
	background: linear-gradient(135deg, var(--primary) 0%, #4299e1 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin: 13px 0 0.8rem;
}

.brand-description {
	line-height: 1.7;
	color: var(--text-light);
	margin-bottom: 1.7rem;
	font-size: 14px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.social-links {
	display: flex;
	gap: 1rem;
	margin-top: 0;
	animation: socialLinksSlideIn 1s ease-out 0.5s both;
}

.social-link {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(72, 187, 120, 0.08);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: all 0.35s ease;
	cursor: pointer;
	border: 1px solid rgba(72, 187, 120, 0.15);
}

.social-link img {
	width: 22px;
	height: 22px;
	transition: all 0.35s ease;
	z-index: 2;
}

/* 社交链接悬停效果 */
.social-link:hover {
	transform: translateY(-3px) scale(1.08);
	box-shadow: 0 8px 25px var(--primary-opacity-20);
	border-color: transparent;
}

.social-link:hover img {
	transform: scale(1.1);
}

/* 社交链接悬停时popup的样式 */
.social-link:hover .popup {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(-10px) scale(1);
}

@keyframes socialLinksSlideIn {
	from {
		transform: translateX(-30px);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.popup {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) scale(0.8);
	background: #fff;
	backdrop-filter: blur(20px);
	border-radius: 10px;
	padding: 0.8rem;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.35s ease;
	border: 1px solid #e2e8f0;
}

.popup::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 8px;
	border-style: solid;
	border-color: #fff transparent transparent transparent;
}

.qr-code {
	width: 120px;
	height: 120px;
	display: block;
	border-radius: 6px;
}

.popup img {
	width: 120px;
	height: 120px
}

.phone-number {
	color: var(--primary);
	font-size: 1.2rem;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	text-shadow: 0 2px 8px rgba(100, 126, 255, 0.2);
}

.footer-column h3 {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 1.5rem;
	position: relative;
	padding-bottom: 0.6rem;
	animation: headerSlideIn 0.8s ease-out 0.2s both;
}

.footer-column h3::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 30px;
	height: 2px;
	background: linear-gradient(90deg, var(--primary) 0%, #4299e1 100%);
	animation: lineGrow 1s ease-out 0.5s both;
}

@keyframes headerSlideIn {
	from {
		transform: translateY(-20px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes lineGrow {
	from {
		width: 0;
		opacity: 0;
	}

	to {
		width: 30px;
		opacity: 1;
	}
}

.footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
	animation: menuSlideUp 1s ease-out;
}

.footer-links li {
	margin-bottom: 0;
	opacity: 1;
	animation: menuFadeIn 0.6s ease forwards;
}

.footer-links li:nth-child(1) {
	animation-delay: 0.1s;
}

.footer-links li:nth-child(2) {
	animation-delay: 0.2s;
}

.footer-links li:nth-child(3) {
	animation-delay: 0.3s;
}

.footer-links li:nth-child(4) {
	animation-delay: 0.4s;
}

.footer-links a {
	color: var(--text-light);
	text-decoration: none;
	font-size: 0.95rem;
	transition: all 0.3s ease;
	display: inline-block;
	position: relative;
	overflow: hidden;
	padding: 0.2rem 0;
}

.footer-links a::before {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1.5px;
	background: linear-gradient(90deg, var(--primary) 0%, #4299e1 100%);
	transition: width 0.3s ease;
}

.footer-links a:hover {
	color: var(--primary);
}

.footer-links a:hover::before {
	width: 100%;
}

/* 友情链接轮播容器 */
.friendlink-carousel {
	position: relative;
	overflow: hidden;
	max-height: 150px;
	/* 与JavaScript中设置的高度一致 */
}

/* 友情链接3D旋转动画 */
.friendlink-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 5px;
	/* 水平间距10px，垂直间距5px */
	perspective: 1000px;
	padding: 12px 0;
	width: 100%;
	transition: transform 0.5s ease-in-out;
}

.friendlink-item {
	color: var(--text-light);
	text-decoration: none;
	font-size: 0.9rem;
	padding: 5px 15px;
	/* 上下内边距5px */
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(72, 187, 120, 0.15);
	transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform-style: preserve-3d;
	position: relative;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

	display: block;
	text-align: center;
	overflow: hidden;
	width: 80px;

}

.friendlink-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--primary) 0%, #4299e1 100%);
	border-radius: 8px;
	transform: rotateX(90deg) scale(0.8);
	transform-origin: bottom;
	opacity: 0;
	transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	z-index: -1;
}

.friendlink-item:hover {
	transform: rotateX(-20deg) translateY(-5px) scale(1.1);
	box-shadow: 0 8px 25px rgba(100, 126, 255, 0.4);
	color: white;
	border-color: transparent;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.friendlink-item:hover::before {
	transform: rotateX(0deg) scale(1);
	opacity: 1;
}

/* 友情链接逐个动画 */
.friendlink-item {
	animation: friendlinkFadeIn 0.8s ease forwards;
	opacity: 0;
}

.friendlink-item:nth-child(1) {
	animation-delay: 0.1s;
}

.friendlink-item:nth-child(2) {
	animation-delay: 0.2s;
}

.friendlink-item:nth-child(3) {
	animation-delay: 0.3s;
}

.friendlink-item:nth-child(4) {
	animation-delay: 0.4s;
}

.friendlink-item:nth-child(5) {
	animation-delay: 0.5s;
}

@keyframes friendlinkFadeIn {
	from {
		opacity: 0;
		transform: translateY(20px) rotateX(10deg);
	}

	to {
		opacity: 1;
		transform: translateY(0) rotateX(0deg);
	}
}

@keyframes menuSlideUp {
	from {
		transform: translateY(30px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes menuFadeIn {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.comment-list {
	position: relative;
	height: auto;
	min-height: 150px;
	width: 100%;
}

.comment-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0.5s ease;
	box-sizing: border-box;
	word-wrap: break-word;
}

.comment-item.active {
	position: relative;
	opacity: 1;
	visibility: visible;
	animation: commentSlideIn 0.5s ease-out;
}

@keyframes commentSlideIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.comment-item {
	padding: 18px;
	border-radius: 10px;
	border: 1px solid #e2e8f0;
	transition: all 0.3s ease;
	margin-bottom: 1rem;
	padding-bottom: 15px
}

.comment-item:hover {
	background: #f8fafc;
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.comment-header {
	display: flex;
	align-items: center;
	margin-bottom: 0rem;
}

.comment-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	margin-right: 0.8rem;
	object-fit: cover;
	border: 2px solid var(--primary-opacity-10);
}

.comment-meta {
	flex: 1;
}

.comment-author {
	font-weight: 500;
	color: var(--text);
	font-size: 0.9rem;
	display: block;
	display: inline-block;
	white-space: nowrap;
	width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.comment-date {
	font-size: 0.8rem;
	color: var(--text-light);
	margin-top: 0.2rem;
}

.comment-date a {
	color: var(--text-light);
}

.comment-date a:hover {
	text-decoration: underline;
}

.comment-content {
	color: var(--text-light);
	margin-bottom: 0.5rem;
	height: 40px;
	font-size: 14px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.footer-bottom {
	text-align: center;
	padding-top: 25px;
	border-top: 1px solid #e2e8f0;
	color: var(--text-light);
	font-size: 13px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 25px;
	flex-wrap: wrap;
	position: relative;
}

.footer-bottom::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
	animation: bottomLine 3s ease-in-out infinite;
}

@keyframes bottomLine {

	0%,
	100% {
		width: 0;
		left: 0;
	}

	50% {
		width: 100%;
		left: 0;
	}
}

.visit-counter {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text-light);
	font-size: 14px;
}

.counter-icon {
	width: 24px;
	height: 16px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	position: relative;
	margin-top: -5px;
}

.counter-icon .column {
	width: 3px;
	background-color: var(--primary);
	border-radius: 1px;
	animation: columnWave 1.5s ease-in-out infinite;
}

.counter-icon .column:nth-child(1) {
	animation-delay: 0s;
}

.counter-icon .column:nth-child(2) {
	animation-delay: 0.2s;
}

.counter-icon .column:nth-child(3) {
	animation-delay: 0.4s;
}

.counter-icon .column:nth-child(4) {
	animation-delay: 0.6s;
}

.counter-icon .column:nth-child(5) {
	animation-delay: 0.8s;
}

@keyframes columnWave {

	0%,
	100% {
		height: 4px;
		opacity: 0.6;
	}

	50% {
		height: 16px;
		opacity: 1;
	}
}

/* 添加数字增长动画 */
@keyframes countUp {
	0% {
		opacity: 0;
		transform: translateY(10px) scale(0.8);
	}

	50% {
		opacity: 0.8;
		transform: translateY(-5px) scale(1.05);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.visit-number {
	color: var(--primary);
	font-weight: 600;
	animation: countUp 1.5s ease-out forwards;
	display: inline-block;
}

@media (max-width: 768px) {
	.footer {
		padding: 35px 20px 25px;
		background: #fff;
		margin-top: 15px;
		height: 200px;
	}

	.footer::after {
		background-size: 30px 30px;
	}

	.footer-content {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer-brand {
		text-align: center;
	}

	.brand-title {
		font-size: 20px;
		margin-bottom: 0.6rem;
	}

	.brand-description {
		font-size: 13px;
		line-height: 1.6;
		margin-bottom: 1.3rem;
	}

	.social-links {
		justify-content: center;
		gap: 0.8rem;
	}

	.social-link {
		width: 40px;
		height: 40px;
	}

	.social-link img {
		width: 21px;
		height: 21px;
	}

	/* 优化社交链接的popup在手机上的显示 */
	.social-link .popup {
		left: 50%;
		transform: translateX(-50%) translateY(5px) scale(0.9);
	}

	.social-link:hover .popup {
		transform: translateX(-50%) translateY(5px) scale(1);
	}

	/* 反转popup箭头方向 */
	.social-link .popup::after {
		top: auto;
		bottom: 100%;
		border-color: transparent transparent #fff transparent;
	}

	.footer-column h3 {
		font-size: 1rem;
		font-weight: 600;
		margin-bottom: 1.2rem;
		padding-bottom: 0.5rem;
		text-align: center;
	}

	.footer-column h3::after {
		left: 50%;
		transform: translateX(-50%);
		width: 25px;
	}

	.footer-links ul {
		text-align: center;
	}

	.footer-links a {
		font-size: 0.9rem;
		padding: 0.35rem 0;
		display: block;
	}

	.comment-list {
		min-height: 120px;
	}

	.comment-item {
		padding: 12px;
		margin-bottom: 0.8rem;

	}

	.comment-header {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 0.8rem;
	}

	.comment-avatar {
		width: 32px;
		height: 32px;
		margin-right: 0;
	}

	.comment-author {
		font-size: 0.85rem;
	}

	.comment-date {
		font-size: 0.75rem;
	}

	.comment-content {
		font-size: 0.85rem;
		height: 36px;
		line-height: 1.5;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 12px;
		text-align: center;
		padding-top: 20px;
	}

	.footer-bottom::after {
		display: none;
	}

	.copyright {
		font-size: 0.85rem;
	}

	.visit-counter {
		justify-content: center;
		font-size: 0.85rem;
		gap: 4px;
	}

	.counter-icon {
		width: 14px;
		height: 14px;
	}

	.main-content {
		padding: 0 15px;
		box-sizing: border-box;
	}

	.content-layout {
		grid-template-columns: 1fr;
		width: 100%;
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.main-column {
		width: 100%;
	}

	.sidebar {
		width: 100%;
	}

	.container,
	.content-container,
	.main-content {
		.content-container {
			padding: clamp(1rem, 5vw, 1.25rem);
		}

		.content-layout {
			padding: 0 0px;
		}

		.nav {
			padding: 20px 15px;
			background-color: #ffffff;
			justify-content: space-between;
		}

		.nav-links {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			transform: translateY(-2px);
			background-color: #eef2f7;
			padding: var(--spacing-lg);
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
			z-index: 1000;
			display: flex;
			flex-direction: column;
			gap: var(--spacing-md);
			align-items: center;
			opacity: 0;
			pointer-events: none;
			transition: all 0.3s ease;
		}

		.nav-links.show {
			opacity: 1;
			pointer-events: auto;
			margin-top: 0px;
			z-index: 999;
		}

		.nav-links a {
			text-align: center;
			width: 100%;
			padding: var(--spacing-sm) 0;
			min-height: 48px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.nav-actions {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-left: auto;
			order: 2;
		}

		.nav-actions .login-btn,
		.nav-actions .register-btn {
			margin: 0;
			margin-left: 5px;
			padding: 4px 8px;
			font-size: 0.8rem;
			border-radius: 400px;
		}


		.welcome-banner {
			padding: var(--spacing-lg) 0;
			flex-direction: column;
			align-items: flex-start;
			text-align: center;
		}

		.welcome-content {
			padding-left: 0;
			max-width: 100%;
			margin-bottom: clamp(1rem, 5vw, 1.25rem);
			width: 100%;
			max-width: 300px;
			margin: 0 auto;
		}

		.banner-stats-container {
			flex-direction: row;
			justify-content: center;
			width: 100%;
			margin-right: 0;
			margin-bottom: 15px;
		}

		.banner-stat-card {
			padding: clamp(0.75rem, 4vw, 0.9375rem);
			min-width: 60px;
			margin-top: 0;
			min-height: 48px;
		}

		.banner-stat-number {
			font-size: clamp(1.2rem, 6vw, 1.5rem);
		}

		.banner-stat-label {
			font-size: clamp(0.7rem, 3vw, 0.8rem);
		}

		.welcome-banner .btn {
			margin-left: 0;
			margin-top: clamp(0.5rem, 2vw, 0.625rem);
			padding: clamp(0.5rem, 2vw, 0.625rem) clamp(2rem, 10vw, 3.125rem);
			margin-bottom: clamp(2rem, 8vw, 3.125rem);
			min-width: 120px;
		}

		.footer-bottom {
			padding: 30px 0;
		}

		.welcome-banner-container {
			padding: 0 clamp(0.75rem, 3vw, 0.9375rem);
		}

		.welcome-banner h1 {
			font-size: clamp(1.1rem, 5vw, 1.3rem);
			line-height: 1.5;
		}

		.section-title,
		.topics-title {
			font-size: clamp(1rem, 4vw, 1.1rem);
		}

		.stats-container {
			grid-template-columns: repeat(2, 1fr);
			gap: clamp(1rem, 5vw, 1.25rem);
			padding: 0 clamp(1rem, 5vw, 1.5625rem);
		}

		.stat-card {
			padding: var(--spacing-md);
			max-width: 100%;
			min-height: 48px;
		}

		.categories-grid {
			grid-template-columns: 1fr;
		}

		.mobile-menu-btn {
			display: flex;
			margin-left: auto;
			margin-right: 20px;
			width: 30px;
			height: 30px;
		}

		.menu-icon {
			margin-right: 0px;
		}

		.content-layout {
			grid-template-columns: 1fr;
			gap: 20px;
			padding: 0;
			box-sizing: border-box;
		}

		.welcome-banner {
			padding: clamp(1.5rem, 6vw, var(--spacing-lg)) 0;
		}

		.welcome-banner h1 {
			font-size: clamp(1.3rem, 5vw, 1.5rem);
		}

		.stats-container {
			flex-wrap: wrap;
			gap: clamp(1rem, 4vw, 1.25rem);
			padding: 0 clamp(1rem, 5vw, 1.5625rem);
			justify-content: center;
		}

		.categories-grid {
			grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 25vw, 160px), 1fr));
			gap: clamp(0.8rem, 4vw, 4rem);
		}

		.topic-item {
			padding: var(--spacing-md);
			height: auto;
			min-height: 100px;
		}

		/* 在手机自适应下移除左侧竖线 */
		.topic-item::before {
			display: none;
		}

		.search-button {
			right: 30px;
		}

		.welcome-banner p {
			line-height: 2
		}

		.main-content {
			padding: 20px
		}

		.topics-section {
			margin-bottom: 20px;
		}

		body {
			touch-action: none;
			touch-action: pan-y;
		}

		.nav-user-avatar {
			margin-right: 0px;
			width: 26px;
			height: 26px;
		}

		.welcome-banner-container-full {
			margin-bottom: 15px
		}

		.topic-tag {
			background-color: rgb(248 250 252);
			font-size: 0px;
		}

		.filter-btn.active,
		.filter-btn:hover {
			/* 修复：移除错误的display:none样式，确保按钮在手机端正常显示 */
			background-color: var(--primary);
			color: white;
			border-color: var(--primary);
		}

		/* 为首页topics-header添加响应式设计 */
		.topics-header {
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			gap: 10px;
			flex-wrap: wrap;
			padding: var(--spacing-md);
		}

		.topics-filter {
			display: flex;
			align-items: center;
			gap: 5px;
			flex-wrap: wrap;
		}

		.filter-btn {
			font-size: 12px;
			padding: 6px 0px;
			width: auto;
			height: auto;
			flex: 1;
			min-width: 70px;
			justify-content: center;
			border-radius: 400px;
		}

		.list3 {
			margin-bottom: -10px
		}
	}