/*
// 功能：首页样式文件
// 作者：启肯科技
// Q Q：328493711
// 微信：13738373177（同手机）
// 官网：http://www.qiken.com
// 说明：QKCMS-轻量级AI智能内容管理建站系统
// 版权：© 2025 温州启肯网络有限公司 保留所有权利，盗版必究。
*/

: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;
	text-decoration: none;
	color: #1565c0;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.yhzxcss:hover {
	filter: alpha(opacity:90);
	opacity: 0.9;
	background-color: #bbdefb;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

#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: opacity 0.18s ease, visibility 0.18s 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%;
}

.dropdown-arrow-mobile {
	display: none;
}

.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-flex;
	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: 1;
	margin-left: 5px;
	vertical-align: middle;
	height: 23px;
	align-items: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.points-recharge-btn:hover {
	filter: alpha(opacity:90);
	opacity: 0.9;
	background-color: #e1bee7;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.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: #f1f5f9;
	color: #64748b;
	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-badge-actions {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.user-profile-section .user-badge-actions {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 5px;
	white-space: nowrap;
}

.user-profile-section .user-level-badge,
.user-profile-section .user-center-btn,
.user-profile-section .points-recharge-btn {
	float: none;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 650;
	line-height: 1;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.32);
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transform: translateY(0);
	transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	margin: 0;
}

.user-profile-section .user-center-btn,
.user-profile-section .points-recharge-btn {
	text-decoration: none;
}

.user-profile-section .user-level-badge.游客 {
	background: linear-gradient(180deg, rgba(148, 163, 184, 0.22), rgba(148, 163, 184, 0.12));
	border-color: rgba(226, 232, 240, 0.42);
}

.user-profile-section .user-level-badge.VIP会员 {
	background: linear-gradient(180deg, rgba(34, 197, 94, 0.22), rgba(34, 197, 94, 0.12));
	border-color: rgba(134, 239, 172, 0.42);
}

.user-profile-section .user-level-badge.管理员 {
	background: linear-gradient(180deg, rgba(239, 68, 68, 0.24), rgba(239, 68, 68, 0.12));
	border-color: rgba(254, 202, 202, 0.45);
}

.user-profile-section .user-center-btn {
	background: linear-gradient(180deg, rgba(59, 130, 246, 0.24), rgba(6, 182, 212, 0.12));
	border-color: rgba(191, 219, 254, 0.45);
}

.user-profile-section .points-recharge-btn {
	background: linear-gradient(180deg, rgba(168, 85, 247, 0.24), rgba(219, 39, 119, 0.12));
	border-color: rgba(233, 213, 255, 0.45);
}

.user-profile-section .user-level-badge:hover,
.user-profile-section .user-center-btn:hover,
.user-profile-section .points-recharge-btn:hover {
	filter: brightness(1.06) saturate(1.08);
	transform: translateY(-1px);
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.22);
}

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

.qk-dropdown-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 600;
	font-size: 18px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
	overflow: hidden;
	flex-shrink: 0;
}

.qk-dropdown-avatar img,
.qk-dropdown-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.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;
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-md);
	width: 100%;
	min-height: 80px;
	box-sizing: border-box;
}

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

.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: inline-block;
}

.sidebar-post-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.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: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	position: relative;
	min-height: 40px;
}

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

.site-logo-text {
	display: inline-block;
	position: relative;
	overflow: hidden;
}

.site-logo-text::before {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
	transform: skewX(-20deg);
	animation: siteLogoSweep 2.6s linear infinite;
	pointer-events: none;
}

.qk-logo-link[data-logo]:not([data-logo=""]) .site-logo-text::before {
	content: none;
}

.site-logo-image-wrap {
	display: none;
	position: relative;
	width: 120px;
	height: 40px;
	border-radius: 8px;
	overflow: hidden;
}

.site-logo-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.qk-logo-link[data-logo]:not([data-logo=""]) .site-logo-text {
	display: none;
}

.qk-logo-link[data-logo]:not([data-logo=""]) .site-logo-image-wrap {
	display: inline-block;
}

.qk-logo-link[data-logo]:not([data-logo=""])::after {
	content: none;
}

.qk-logo-link[data-logo]:not([data-logo=""]) .site-logo-image-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
	transform: skewX(-20deg);
	animation: siteLogoSweep 2.6s linear infinite;
	pointer-events: none;
}

.logo.has-logo .site-logo-text {
	display: none;
}

.logo.has-logo .site-logo-image-wrap {
	display: inline-block;
}

.logo.has-logo::after {
	content: none;
}

.logo.has-logo .site-logo-image-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
	transform: skewX(-20deg);
	animation: siteLogoSweep 2.6s linear infinite;
	pointer-events: none;
}

@keyframes siteLogoSweep {
	0% {
		left: -60%;
	}

	100% {
		left: 130%;
	}
}

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

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

.nav-links>.nav-item>a {
	text-decoration: none;
	color: var(--text);
	font-weight: 500;
	padding: 0;
	position: relative;
	transition: color 0.15s ease;
	font-size: 16px;
	line-height: 1.2;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'liga' 1, 'kern' 1;
	letter-spacing: 0.1px;
	display: flex;
	align-items: center;
	height: 80px;
}

.nav-links>.nav-item>a:hover {
	color: var(--primary);
}

.nav-links>.nav-item>a.active {
	color: var(--primary);
}

.nav-item {
	position: relative;
}

.nav-item::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 2px;
	background: transparent;
}

.article-tag {
	display: inline-block;
	background: var(--primary-opacity-10);
	color: var(--primary);
	padding: 3px 10px;
	border-radius: 32px;
	font-size: 12px;
	margin-right: 5px;
	margin-bottom: 5px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.article-tag:hover {
	background: var(--primary);
	color: white;
}



.sub-nav {
	position: absolute;
	top: calc(100% - 2px);
	left: 50%;
	transform: translateX(-50%);
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
		0 4px 12px rgba(0, 0, 0, 0.1);
	padding: 6px 0;
	min-width: 120px;
	max-width: 150px;
	display: none;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
}

.tag-count-label {
	font-size: 14px;
	color: var(--text-lighter);
}

.sub-nav::before {
	content: '';
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 12px solid var(--primary);
	z-index: 2;
}

.sub-nav::after {
	content: '';
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-bottom: 11px solid #ffffff;
	z-index: 3;
}

.sub-nav-top-line {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 0;
	pointer-events: none;
}

.sub-nav-top-line::before,
.sub-nav-top-line::after {
	content: '';
	position: absolute;
	top: -1px;
	height: 2px;
	background: var(--primary);
}

.sub-nav-top-line::before {
	left: 0;
	width: calc(50% - 10px);
}

.sub-nav-top-line::after {
	right: 0;
	width: calc(50% - 10px);
}

.nav-item:hover .sub-nav {
	display: block;
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.nav-item-virtual .sub-nav {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.sub-nav li {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.sub-nav li:not(:last-child)::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.06), transparent);
}

.sub-nav li a {
	display: flex;
	align-items: center;
	padding: 12px 20px;
	color: #4b5563;
	text-decoration: none;
	transition: all 0.2s ease;
	font-size: 14px;
	font-weight: 500;
	position: relative;
	gap: 8px;
}

.sub-nav li a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	background: var(--primary);
	border-radius: 0 3px 3px 0;
	transition: height 0.2s ease;
}

.sub-nav li a:hover {
	color: var(--primary);
	background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, transparent 100%);
	padding-left: 24px;
}

.sub-nav li a:hover::before {
	height: 20px;
}

.article-property {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 3px 12px 4px 10px !important;
	border-radius: 12px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	margin-left: 12px !important;
	vertical-align: middle !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	color: var(--property-color, #999) !important;
	background: color-mix(in srgb, var(--property-color, #999) 12%, #fff) !important;
	border: 1px solid color-mix(in srgb, var(--property-color, #999) 25%, transparent) !important;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease !important;
}
.article-property .dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: currentColor !important;
	opacity: .9 !important;
	flex-shrink: 0 !important;
}
.article-property::before {
	content: '' !important;
	position: absolute !important;
	left: 6px !important;
	top: 0 !important;
	bottom: 0 !important;
	width: 10px !important;
	background: currentColor !important;
	opacity: .15 !important;
	filter: blur(6px) !important;
	border-radius: 0 !important;
}
.article-property::after {
	content: '' !important;
	position: absolute !important;
	left: -6px !important;
	top: 0 !important;
	bottom: 0 !important;
	width: 12px !important;
	background: color-mix(in srgb, var(--property-color, #999) 15%, transparent) !important;
	transform: skewX(-20deg) !important;
	border-top-left-radius: 10px !important;
	border-bottom-left-radius: 10px !important;
}
a .article-property {
	text-decoration: none !important;
}
a .article-property:hover {
	transform: translateY(-1px) !important;
}

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

.user-actions-container {
	display: flex;
	align-items: center;
	position: relative;
	width: 152px;
	justify-content: flex-end;
}

.login-register-buttons {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 152px;
	justify-content: flex-end;
}

.nav-user-avatar {
	position: absolute;
	right: 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;
	visibility: hidden;
	opacity: 0;
}

.login-register-buttons.hidden+.nav-user-avatar {
	display: flex;
	visibility: visible;
	opacity: 1;
}

html.qk-prelogged .login-register-buttons:not(.hidden)+.nav-user-avatar,
body.logged-in .login-register-buttons:not(.hidden)+.nav-user-avatar {
	display: flex;
	visibility: visible;
	opacity: 1;
}

html.qk-prelogged .login-register-buttons {
	display: none;
}

html.qk-prelogged .nav-user-avatar {
	display: flex;
	visibility: visible;
	opacity: 1;
}

body.logged-in .login-register-buttons {
	display: none;
}

body.logged-in .nav-user-avatar {
	display: flex;
	visibility: visible;
	opacity: 1;
}

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

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

@keyframes float-up-down-1 {

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

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

@keyframes float-up-down-2 {

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

	50% {
		transform: translateY(-8px);
	}
}

.banner-round-actions {
	position: absolute;
	left: 57%;
	top: 0;
	height: 100%;
	transform: translateX(-50%);
	display: flex;
	align-items: flex-start;
	gap: 30px;
	z-index: 20;
}

.banner-round-btn-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

.banner-round-btn-wrapper:nth-child(1) {
	animation: float-up-down-1 4s ease-in-out infinite;
}

.banner-round-btn-wrapper:nth-child(2) {
	animation: float-up-down-2 3.5s ease-in-out infinite 1s;
}

.banner-btn-line {
	width: 2px;
	height: 170px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6));
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.banner-round-btn-wrapper:nth-child(2) .banner-btn-line {
	height: 130px;
}

.banner-round-btn {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	transition: all 0.28s ease;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	position: relative;
	overflow: hidden;
	/* iOS 安全的 backdrop-filter 降级方案 */
	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	/* 确保在 iOS 上有可见的背景 */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.banner-round-btn::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
	z-index: 2;
}

.banner-round-btn::after {
	content: '';
	position: absolute;
	top: 12px;
	left: 18px;
	width: 34px;
	height: 24px;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0) 72%);
	opacity: 0.72;
	pointer-events: none;
}

.banner-round-btn-install {
	--banner-install-primary: var(--primary, #00D287);
	--banner-install-primary-light: var(--banner-install-primary);
	--banner-install-primary-dark: var(--banner-install-primary);
	--banner-install-shadow-accent-1: rgba(7, 125, 88, 0.28);
	--banner-install-shadow-accent-2: rgba(16, 185, 129, 0.2);
	--banner-install-shadow-accent-1-hover: rgba(7, 125, 88, 0.24);
	--banner-install-shadow-accent-2-hover: rgba(16, 185, 129, 0.22);
	--banner-install-shadow-accent-1-active: rgba(127, 182, 159, 0.4);
	--banner-install-shadow-accent-2-active: rgba(16, 185, 129, 0.12);
	/* iOS 安全的降级背景 */
	background-color: var(--primary, #00D287);
	background: linear-gradient(180deg, var(--banner-install-primary-light) 0%, var(--banner-install-primary) 52%, var(--banner-install-primary-dark) 100%);
	color: #fff;
	text-shadow: 0 1px 2px rgba(6, 78, 59, 0.22);
	border: none;
	box-shadow: 0 4px 0 var(--banner-install-shadow-accent-1), 0 14px 30px rgba(15, 23, 42, 0.14), 0 8px 18px var(--banner-install-shadow-accent-2), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -10px 18px rgba(0, 0, 0, 0.08);
}

@supports (background: color-mix(in oklab, #000 0%, #fff 100%)) {
	.banner-round-btn-install {
		--banner-install-primary-light: color-mix(in oklab, var(--banner-install-primary) 78%, #ffffff);
		--banner-install-primary-dark: color-mix(in oklab, var(--banner-install-primary) 76%, #000000);
		--banner-install-shadow-accent-1: color-mix(in oklab, var(--banner-install-primary) 46%, transparent);
		--banner-install-shadow-accent-2: color-mix(in oklab, var(--banner-install-primary) 26%, transparent);
		--banner-install-shadow-accent-1-hover: color-mix(in oklab, var(--banner-install-primary) 40%, transparent);
		--banner-install-shadow-accent-2-hover: color-mix(in oklab, var(--banner-install-primary) 30%, transparent);
		--banner-install-shadow-accent-1-active: color-mix(in oklab, var(--banner-install-primary) 34%, transparent);
		--banner-install-shadow-accent-2-active: color-mix(in oklab, var(--banner-install-primary) 18%, transparent);
	}
}

.banner-round-btn-install::after {
	content: '';
	position: absolute;
	top: 16px;
	left: 50%;
	width: 56px;
	height: 56px;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	background:
		radial-gradient(circle, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.82) 60%, rgba(255, 255, 255, 0) 62%),
		radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 62%),
		radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.72) 60%, rgba(255, 255, 255, 0) 62%),
		radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.22) 60%, rgba(255, 255, 255, 0) 62%);
	background-repeat: no-repeat;
	background-size: 6px 6px, 4px 4px, 5px 5px, 24px 24px;
	background-position: 18px 44px, 30px 48px, 42px 42px, 18px 28px;
	animation: qk-banner-bubble-up 3.9s ease-in-out infinite;
}

.banner-round-btn-install:hover {
	background: linear-gradient(180deg, var(--banner-install-primary-light) 0%, var(--banner-install-primary) 52%, var(--banner-install-primary-dark) 100%);
	color: #fff;
	box-shadow: 0 4px 0 var(--banner-install-shadow-accent-1-hover), 0 18px 34px rgba(15, 23, 42, 0.15), 0 10px 20px var(--banner-install-shadow-accent-2-hover), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -10px 18px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.banner-round-btn-install:active {
	transform: translateY(0) scale(0.985);
	filter: saturate(0.98);
	box-shadow: 0 2px 0 var(--banner-install-shadow-accent-1-active), 0 8px 18px rgba(15, 23, 42, 0.11), 0 4px 12px var(--banner-install-shadow-accent-2-active), inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -8px 14px rgba(70, 145, 114, 0.07);
}

.banner-round-btn-video {
	width: 90px;
	height: 90px;
	--banner-video-primary: var(--primary, #00D287);
	/* iOS 兼容的颜色降级方案 */
	background: linear-gradient(180deg, #ffffff 0%, #f6fff9 52%, #e6fff0 100%);
	background: linear-gradient(180deg, color-mix(in oklab, #ffffff 96%, var(--banner-video-primary)) 0%, color-mix(in oklab, #ffffff 92%, var(--banner-video-primary)) 52%, color-mix(in oklab, #ffffff 85%, var(--banner-video-primary)) 100%);
	color: var(--primary, #00D287);
	text-shadow: none;
	border: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 4px 0 rgba(191, 197, 204, 0.52), 0 12px 28px rgba(15, 23, 42, 0.11), 0 6px 16px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -10px 18px rgba(148, 163, 184, 0.08);
	/* iOS 上确保有可见的白色背景 */
	background-color: #ffffff;
}

.banner-round-btn-video:hover {
	background: linear-gradient(180deg, #f8fffb 0%, #f0fff4 52%, #e0ffe8 100%);
	
	box-shadow: 0 4px 0 rgba(191, 197, 204, 0.46), 0 16px 32px rgba(15, 23, 42, 0.12), 0 8px 18px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -10px 18px rgba(148, 163, 184, 0.07);
	transform: translateY(-2px);
}

.banner-round-btn-video:active {
	transform: translateY(0) scale(0.985);
	box-shadow: 0 2px 0 rgba(191, 197, 204, 0.44), 0 8px 18px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.76), inset 0 -8px 14px rgba(148, 163, 184, 0.07);
}

.banner-round-btn svg,
.banner-round-btn span {
	position: relative;
	z-index: 2;
}

@keyframes qk-banner-bubble-up {
	0% {
		transform: translateX(-50%) translateY(10px) scale(0.92);
		opacity: 0;
		filter: blur(0px);
	}

	18% {
		opacity: 0.92;
	}

	100% {
		transform: translateX(-50%) translateY(-16px) scale(1.05);
		opacity: 0;
		filter: blur(0.2px);
	}
}

.banner-round-btn svg {
	width: 28px;
	height: 28px;
	margin-bottom: 8px;
	transition: transform 0.3s ease;
}

.banner-round-btn:hover svg {
	transform: none;
}

.banner-round-btn-video svg {
	width: 26px;
	height: 26px;
}

.banner-round-btn-video span {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
}

.video-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.video-modal-overlay.active {
	display: flex;
	opacity: 1;
}

.video-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.video-modal-content {
	position: relative;
	z-index: 10000;
	transform: scale(0.95);
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	border: 3px solid var(--primary, #00E595);
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	background: transparent;
	display: inline-flex;
	line-height: 0;
	overflow: visible;
}

.video-modal-overlay.active .video-modal-content {
	transform: scale(1);
}

.video-modal-close-circle {
	position: absolute;
	top: -16px;
	right: -16px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	border: none;
	color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	padding: 0;
}

.video-modal-close-circle:hover {
	background: var(--primary, #00E595);
	color: #fff;
	transform: rotate(90deg) scale(1.1);
}

.video-modal-content video {
	width: 80vw;
	max-width: 800px;
	height: auto;
	max-height: 80vh;
	object-fit: fill;
	outline: none;
	display: block;
	border-radius: 9px;
}

.video-modal-content iframe {
	width: min(760px, calc(100vw - 88px));
	height: auto;
	aspect-ratio: 16 / 9;
	max-height: calc(100vh - 180px);
	display: block;
	border: 0;
	border-radius: 9px;
	background: #000;
}

.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: 100px;
	position: relative;
	z-index: 9;
	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: 70px;
}

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

.main-column {
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	transition: all 0.3s ease;
}

.sidebar {
	width: 310px;
	box-sizing: border-box;
	transition: all 0.3s ease;
}

.welcome-banner-container-full {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 0;
	background: none;
	min-height: 450px;
	overflow: hidden;
	position: relative;
	margin-top: -1px;
	isolation: isolate;
	--banner-image-position: center center;
	content-visibility: auto;
	contain-intrinsic-size: 450px;
}

.home-hero-copy {
	position: absolute;
	left: calc(clamp(216px, 18vw, 330px) + 50px);
	top: calc(clamp(-30px, 2vw, 20px) + 20px);
	z-index: 12;
	width: min(520px, calc(100% - 260px));
	transform: scale(0.85);
	transform-origin: left top;
	color: #1f2937;
	padding: 10px 0;
}
.hero-decor-line {
	width: 60px;
	height: 4px;
	background: linear-gradient(90deg, var(--primary, #10b981), transparent);
	margin-bottom: 10px;
}
.hero-decor-dots {
	display: flex;
	gap: 6px;
	margin-top: 12px;
}
.hero-decor-dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--primary, #10b981);
}
.hero-decor-dots span:nth-child(1) {
	opacity: 1;
}
.hero-decor-dots span:nth-child(2) {
	opacity: 0.6;
}
.hero-decor-dots span:nth-child(3) {
	opacity: 0.3;
}

.home-hero-copy {
	perspective: 1000px;
}

.home-hero-title {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin: 0 0 6px;
	font-size: clamp(1.8rem, 2.6vw, 3rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-shadow: none;
	animation: heroTitle3DRotate 6s ease-in-out infinite;
	transform-origin: center center;
}

@keyframes heroTitle3DRotate {
	0%, 100% {
		transform: rotateY(0deg) rotateX(0deg);
	}
	25% {
		transform: rotateY(3deg) rotateX(1deg);
	}
	50% {
		transform: rotateY(-2deg) rotateX(-1deg);
	}
	75% {
		transform: rotateY(2deg) rotateX(0.5deg);
	}
}

.home-hero-brand {
	color: var(--primary, var(--primary-color, #10b981));
	font-family: "Montserrat", "Poppins", "Raleway", "Segoe UI", sans-serif;
	font-weight: 800;
	font-style: italic;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.home-hero-title-text {
	color: #1f2937;
	font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
	font-weight: 900;
	font-style: italic;
	font-size: clamp(1.6rem, 2.4vw, 2.6rem);
	transform: translateY(-5px);
	letter-spacing: 0.05em;
}

.home-hero-desc {
	margin: 0 0 12px 0;
	padding-left: 60px;
	font-size: clamp(0.95rem, 1.3vw, 1.25rem);
	font-weight: 600;
	color: #4b5563;
	text-shadow: none;
	font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
	letter-spacing: 3px;
	font-style: italic;
	display: inline-flex;
	align-items: center;
}

.home-hero-desc::before {
	content: '';
	width: 24px;
	height: 2px;
	background: var(--primary, #10b981);
	margin-right: 12px;
	margin-left: -36px;
}

.welcome-banner-container-full::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('http://www.djy.qiken.cn/2026img/qkcms.jpg') var(--banner-image-position) / cover no-repeat;
	pointer-events: none;
	z-index: 0;
}

.welcome-banner-bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--banner-image-position);
	filter: saturate(1.06) contrast(1.04) brightness(1);
	pointer-events: none;
	z-index: 0;
}

.banner-video-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.welcome-banner-container-full::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--primary-color, #10b981);
	mix-blend-mode: soft-light;
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}

/* iOS 设备兼容性处理 */
@supports (-webkit-touch-callout: none) {
	/* 对 iOS 设备启用降级方案 */
	.banner-color-overlay {
		display: none !important;
		opacity: 0 !important;
	}
	
	.banner-color-overlay-ios-fallback {
		display: block !important;
	}
	
	/* 确保按钮背景在 iOS 上可见 */
	.banner-round-btn {
		background-color: rgba(255, 255, 255, 0.95) !important;
		backdrop-filter: blur(8px) saturate(120%) !important;
		-webkit-backdrop-filter: blur(8px) saturate(120%) !important;
	}
	
	.banner-round-btn-video {
		background: linear-gradient(180deg, #ffffff 0%, #f6fff9 52%, #e6fff0 100%) !important;
		background-color: #ffffff !important;
	}
}

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

.welcome-banner-container-full .water-wave {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 78px;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
}

.home-hero-waves {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-bottom: -1px;
}

.home-parallax>use {
	animation: home-wave-move 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.home-parallax>use:nth-child(1) {
	animation-delay: -2s;
	animation-duration: 7s;
}

.home-parallax>use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: 10s;
}

.home-parallax>use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 13s;
}

.home-parallax>use:nth-child(4) {
	animation-delay: -5s;
	animation-duration: 20s;
}

.home-wave-a {
	fill: rgba(124, 58, 237, 0.35);
	fill: color-mix(in srgb, var(--primary-color), white 62%);
}

.home-wave-b {
	fill: rgba(255, 255, 255, 0.58);
}

.home-wave-c {
	fill: rgba(255, 255, 255, 0.38);
}

.home-wave-d {
	fill: rgba(255, 255, 255, 0.2);
}

@keyframes home-wave-move {
	0% {
		transform: translate3d(-90px, 0, 0);
	}

	100% {
		transform: translate3d(85px, 0, 0);
	}
}

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

.banner-right-copy {
	position: absolute;
	right: var(--banner-copy-right, 14%);
	top: var(--banner-copy-top, 54%);
	transform: translateY(-50%) rotate(var(--banner-copy-tilt, -8deg));
	max-width: 460px;
	width: min(460px, 40vw);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	z-index: 3;
	pointer-events: none;
}

.banner-right-title {
	font-size: clamp(38px, 5.2vw, 62px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: 1.5px;
	background: linear-gradient(135deg, #fff8ea 0%, #ffdba6 45%, #ffb868 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 8px 20px rgba(64, 32, 8, 0.38);
	animation: qkBannerTitlePulse 3.6s ease-in-out infinite;
}

.banner-right-subtitle {
	font-size: clamp(14px, 1.5vw, 18px);
	font-weight: 700;
	line-height: 1.5;
	color: #fff4de;
	text-align: left;
	max-width: 100%;
	padding: 9px 16px;
	border-radius: 12px;
	background: linear-gradient(90deg, rgba(15, 23, 42, 0.52) 0%, rgba(30, 41, 59, 0.44) 100%);
	border: 1px solid rgba(255, 211, 152, 0.45);
	backdrop-filter: blur(6px);
	animation: qkBannerSubtitleFlow 4.2s linear infinite;
}

@keyframes qkBannerTitlePulse {

	0%,
	100% {
		transform: translateY(0);
		filter: drop-shadow(0 0 0 rgba(255, 184, 104, 0.12));
	}

	50% {
		transform: translateY(-3px);
		filter: drop-shadow(0 8px 16px rgba(255, 184, 104, 0.32));
	}
}

@keyframes qkBannerSubtitleFlow {
	0% {
		box-shadow: 0 0 0 rgba(255, 184, 104, 0.2);
	}

	50% {
		box-shadow: 0 10px 24px rgba(255, 184, 104, 0.26);
	}

	100% {
		box-shadow: 0 0 0 rgba(255, 184, 104, 0.2);
	}
}

@media (max-width: 768px) {
	.welcome-banner {
		flex-direction: column;
		align-items: center;
		padding: 30px 0;
		min-height: auto;
	}


	.welcome-content {
		max-width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		margin-bottom: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}


	.welcome-banner h1 {
		font-size: 1.5rem;
		line-height: 1.4;
		margin-bottom: 10px;
		text-align: center;
	}

	.welcome-banner p {
		font-size: 14px;
		line-height: 1.5;
		margin-bottom: 15px;
		max-width: 230px;
		text-align: center;
	}

	.welcome-banner .btn {
		margin-top: 15px;
		margin-left: 0;
		padding: 10px 40px;
		font-size: 14px;
		width: 250px;
		text-align: center;
	}

	.banner-stats-container {
		flex-wrap: wrap;
		gap: 10px;
		margin-right: 20px;
		margin-left: 20px;
		width: calc(100% - 40px);
	}

	.banner-stat-card {
		flex: 1;
		min-width: calc(50% - 5px);
		padding: 15px 10px;
		margin-top: 0;
	}

	.banner-stat-number {
		font-size: 1.4rem;
	}

	.banner-stat-label {
		font-size: 0.75rem;
	}

	.banner-right-copy {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		transform: none;
		margin: 0 20px 10px;
		max-width: calc(100% - 40px);
		width: calc(100% - 40px);
		align-items: center;
		pointer-events: auto;
	}

	.banner-right-title {
		text-align: center;
	}

	.banner-right-subtitle {
		text-align: center;
		max-width: 100%;
	}

	.welcome-banner-container-full {
		min-height: 300px;
		--banner-image-position: -550px center;
	}

	.topics-header {
		flex-direction: column;
		align-items: center;
		gap: 15px;
		padding: var(--spacing-md);
	}

	.topics-title {
		width: 100%;
		text-align: center;

	}

	.topics-filter {
		width: 100%;
		justify-content: center;
		gap: 10px;
	}

	.filter-btn {
		flex: 1;
		min-width: 80px;
		padding: 8px 12px;
		text-align: center;
	}

}

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

.category-meta1 {
	font-weight: 700;
	border: 2px solid var(--primary);
	border-radius: 400px;
	line-height: 34px;
	padding: 0px 20px;
	color: var(--primary);
	font-size: 14px;
}

.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;
	font-size: 16px;
}

.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(250px, 1fr));
	gap: 14px;
}

.category-item {
	display: flex;
	align-items: flex-start;
	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: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--spacing-md);
	flex-shrink: 0;
	font-style: normal;
}

.category-icon-small img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 200px;
	font-style: normal !important;
	transform: none !important;
}

.category-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.category-name {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.category-title {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.category-count {
	flex-shrink: 0;
	font-size: 12px;
	line-height: 1;
	color: var(--primary);
	background: var(--primary-opacity-10);
	border: 1px solid var(--primary-opacity-20);
	border-radius: 999px;
	padding: 5px 8px;
}

.home-category-item {

	padding: 15px;
	border-radius: 18px;
	background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	border: 1px solid #e8eef5;
	box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
	position: relative;
	overflow: hidden;
}

.home-category-item:hover {
	background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
	border-color: #dce6f1;
	box-shadow: 0 18px 32px rgba(15, 23, 42, 0.09);
	transform: translateY(-2px);
}

.home-category-item .category-icon-small {
	--category-icon-accent: #879bb2;
	--category-icon-shadow-rgb: 135, 155, 178;
	width: 42px;
	height: 42px;
	margin-right: 12px;
	border-radius: 50%;
	padding: 0;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border: 2.5px solid var(--category-icon-accent);
	box-shadow: 0 9px 18px rgba(var(--category-icon-shadow-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -2px 4px rgba(var(--category-icon-shadow-rgb), 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--category-icon-accent);
}

.home-category-item .category-icon-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	color: inherit;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

.categories-grid .home-category-item:nth-child(50n+1) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+1) {
	--category-icon-accent: #F58A3D;
	--category-icon-shadow-rgb: 245, 138, 61;
}

.categories-grid .home-category-item:nth-child(50n+2) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+2) {
	--category-icon-accent: #76cf2d;
	--category-icon-shadow-rgb: 139, 92, 246;
}

.categories-grid .home-category-item:nth-child(50n+3) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+3) {
	--category-icon-accent: #F2B63D;
	--category-icon-shadow-rgb: 242, 182, 61;
}

.categories-grid .home-category-item:nth-child(50n+4) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+4) {
	--category-icon-accent: #e95353;
	--category-icon-shadow-rgb: 245, 108, 108;
}

.categories-grid .home-category-item:nth-child(50n+5) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+5) {
	--category-icon-accent: #F56FA1;
	--category-icon-shadow-rgb: 245, 111, 161;
}

.categories-grid .home-category-item:nth-child(50n+6) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+6) {
	--category-icon-accent: #E96BE8;
	--category-icon-shadow-rgb: 233, 107, 232;
}

.categories-grid .home-category-item:nth-child(50n+7) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+7) {
	--category-icon-accent: #B97AF7;
	--category-icon-shadow-rgb: 185, 122, 247;
}

.categories-grid .home-category-item:nth-child(50n+8) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+8) {
	--category-icon-accent: #9B87F5;
	--category-icon-shadow-rgb: 155, 135, 245;
}

.categories-grid .home-category-item:nth-child(50n+9) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+9) {
	--category-icon-accent: #7388F6;
	--category-icon-shadow-rgb: 115, 136, 246;
}

.categories-grid .home-category-item:nth-child(50n+10) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+10) {
	--category-icon-accent: #5D8EF2;
	--category-icon-shadow-rgb: 93, 142, 242;
}

.categories-grid .home-category-item:nth-child(50n+11) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+11) {
	--category-icon-accent: #3FA7E8;
	--category-icon-shadow-rgb: 63, 167, 232;
}

.categories-grid .home-category-item:nth-child(50n+12) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+12) {
	--category-icon-accent: #41C2D4;
	--category-icon-shadow-rgb: 65, 194, 212;
}

.categories-grid .home-category-item:nth-child(50n+13) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+13) {
	--category-icon-accent: #31C7B2;
	--category-icon-shadow-rgb: 49, 199, 178;
}

.categories-grid .home-category-item:nth-child(50n+14) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+14) {
	--category-icon-accent: #36C98D;
	--category-icon-shadow-rgb: 54, 201, 141;
}

.categories-grid .home-category-item:nth-child(50n+15) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+15) {
	--category-icon-accent: #54CC73;
	--category-icon-shadow-rgb: 84, 204, 115;
}

.categories-grid .home-category-item:nth-child(50n+16) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+16) {
	--category-icon-accent: #9BCB47;
	--category-icon-shadow-rgb: 155, 203, 71;
}

.categories-grid .home-category-item:nth-child(50n+17) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+17) {
	--category-icon-accent: #F26D82;
	--category-icon-shadow-rgb: 242, 109, 130;
}

.categories-grid .home-category-item:nth-child(50n+18) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+18) {
	--category-icon-accent: #F5819A;
	--category-icon-shadow-rgb: 245, 129, 154;
}

.categories-grid .home-category-item:nth-child(50n+19) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+19) {
	--category-icon-accent: #E85B7A;
	--category-icon-shadow-rgb: 232, 91, 122;
}

.categories-grid .home-category-item:nth-child(50n+20) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+20) {
	--category-icon-accent: #E45E99;
	--category-icon-shadow-rgb: 228, 94, 153;
}

.categories-grid .home-category-item:nth-child(50n+21) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+21) {
	--category-icon-accent: #C96BE8;
	--category-icon-shadow-rgb: 201, 107, 232;
}

.categories-grid .home-category-item:nth-child(50n+22) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+22) {
	--category-icon-accent: #AE78F2;
	--category-icon-shadow-rgb: 174, 120, 242;
}

.categories-grid .home-category-item:nth-child(50n+23) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+23) {
	--category-icon-accent: #907FF2;
	--category-icon-shadow-rgb: 144, 127, 242;
}

.categories-grid .home-category-item:nth-child(50n+24) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+24) {
	--category-icon-accent: #6F84F0;
	--category-icon-shadow-rgb: 111, 132, 240;
}

.categories-grid .home-category-item:nth-child(50n+25) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+25) {
	--category-icon-accent: #4E91F0;
	--category-icon-shadow-rgb: 78, 145, 240;
}

.categories-grid .home-category-item:nth-child(50n+26) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+26) {
	--category-icon-accent: #3E9FE5;
	--category-icon-shadow-rgb: 62, 159, 229;
}

.categories-grid .home-category-item:nth-child(50n+27) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+27) {
	--category-icon-accent: #38B8CC;
	--category-icon-shadow-rgb: 56, 184, 204;
}

.categories-grid .home-category-item:nth-child(50n+28) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+28) {
	--category-icon-accent: #31BFAE;
	--category-icon-shadow-rgb: 49, 191, 174;
}

.categories-grid .home-category-item:nth-child(50n+29) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+29) {
	--category-icon-accent: #33BE86;
	--category-icon-shadow-rgb: 51, 190, 134;
}

.categories-grid .home-category-item:nth-child(50n+30) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+30) {
	--category-icon-accent: #57BE57;
	--category-icon-shadow-rgb: 87, 190, 87;
}

.categories-grid .home-category-item:nth-child(50n+31) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+31) {
	--category-icon-accent: #96C13F;
	--category-icon-shadow-rgb: 150, 193, 63;
}

.categories-grid .home-category-item:nth-child(50n+32) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+32) {
	--category-icon-accent: #E9AE3C;
	--category-icon-shadow-rgb: 233, 174, 60;
}

.categories-grid .home-category-item:nth-child(50n+33) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+33) {
	--category-icon-accent: #F08A45;
	--category-icon-shadow-rgb: 240, 138, 69;
}

.categories-grid .home-category-item:nth-child(50n+34) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+34) {
	--category-icon-accent: #F26F5A;
	--category-icon-shadow-rgb: 242, 111, 90;
}

.categories-grid .home-category-item:nth-child(50n+35) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+35) {
	--category-icon-accent: #E85D76;
	--category-icon-shadow-rgb: 232, 93, 118;
}

.categories-grid .home-category-item:nth-child(50n+36) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+36) {
	--category-icon-accent: #D968BE;
	--category-icon-shadow-rgb: 217, 104, 190;
}

.categories-grid .home-category-item:nth-child(50n+37) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+37) {
	--category-icon-accent: #B978F0;
	--category-icon-shadow-rgb: 185, 120, 240;
}

.categories-grid .home-category-item:nth-child(50n+38) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+38) {
	--category-icon-accent: #9385F0;
	--category-icon-shadow-rgb: 147, 133, 240;
}

.categories-grid .home-category-item:nth-child(50n+39) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+39) {
	--category-icon-accent: #728AF0;
	--category-icon-shadow-rgb: 114, 138, 240;
}

.categories-grid .home-category-item:nth-child(50n+40) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+40) {
	--category-icon-accent: #56A0F0;
	--category-icon-shadow-rgb: 86, 160, 240;
}

.categories-grid .home-category-item:nth-child(50n+41) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+41) {
	--category-icon-accent: #40AFE8;
	--category-icon-shadow-rgb: 64, 175, 232;
}

.categories-grid .home-category-item:nth-child(50n+42) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+42) {
	--category-icon-accent: #3ABFDD;
	--category-icon-shadow-rgb: 58, 191, 221;
}

.categories-grid .home-category-item:nth-child(50n+43) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+43) {
	--category-icon-accent: #36C7B8;
	--category-icon-shadow-rgb: 54, 199, 184;
}

.categories-grid .home-category-item:nth-child(50n+44) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+44) {
	--category-icon-accent: #39C58F;
	--category-icon-shadow-rgb: 57, 197, 143;
}

.categories-grid .home-category-item:nth-child(50n+45) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+45) {
	--category-icon-accent: #58CA6F;
	--category-icon-shadow-rgb: 88, 202, 111;
}

.categories-grid .home-category-item:nth-child(50n+46) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+46) {
	--category-icon-accent: #9FCC52;
	--category-icon-shadow-rgb: 159, 204, 82;
}

.categories-grid .home-category-item:nth-child(50n+47) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+47) {
	--category-icon-accent: #F0B04A;
	--category-icon-shadow-rgb: 240, 176, 74;
}

.categories-grid .home-category-item:nth-child(50n+48) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+48) {
	--category-icon-accent: #F29D4C;
	--category-icon-shadow-rgb: 242, 157, 76;
}

.categories-grid .home-category-item:nth-child(50n+49) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n+49) {
	--category-icon-accent: #F0785E;
	--category-icon-shadow-rgb: 240, 120, 94;
}

.categories-grid .home-category-item:nth-child(50n) .category-icon-small,
.home-tags-cloud .tag:nth-child(50n) {
	--category-icon-accent: #DE6690;
	--category-icon-shadow-rgb: 222, 102, 144;
}

.home-category-item .category-info {
	flex: 1;
	min-width: 0;
	justify-content: center;
	gap: 10px;
}

.home-category-item .category-name {
	font-size: 15px;
	font-weight: 500;
	align-items: center;
	gap: 8px;
	line-height: 1.2;
}

.home-category-item .category-title {
	color: var(--text);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.12px;
}

.home-category-item .category-count {
	display: inline-block;
	padding: 0;
	height: auto;
	line-height: 1.2;
	border-radius: 0;
	color: #8fa0b3;
	background: none;
	border: 0;
	box-shadow: none;
	font-size: 12px;
	vertical-align: middle;
	text-align: center;
	box-sizing: border-box;
	font-weight: 600;
	letter-spacing: 0.2px;
}

.home-category-item .category-meta {
	font-size: 12px;
	line-height: 1.45;
	color: #8c99ab;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
}

.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: 0px;
}

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

.custom-tag1 a:hover {
	background-color: var(--primary);
	color: #fff;
}

.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);
	padding: 0px 15px;
	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: 10px;
}

.article-thumbnail-container {
	width: 140px;
	height: 90px;
	overflow: hidden;
	border-radius: 10px;
	margin-top: 10px;
	position: relative;
	flex-shrink: 0;
}

.article-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.article-thumbnail-container img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 0 !important;
}

.article-thumbnail:hover {
	transform: scale(1.1);
}

.article-thumbnail-container.qk-home-smart-thumb {
	--home-thumb-accent: var(--category-icon-accent, var(--primary));
	--home-thumb-shadow-rgb: var(--category-icon-shadow-rgb, 0, 0, 0);
	background:
		radial-gradient(circle at 24% 28%, rgba(var(--home-thumb-shadow-rgb), 0.12) 0%, rgba(var(--home-thumb-shadow-rgb), 0) 54%),
		radial-gradient(circle at 78% 74%, rgba(var(--home-thumb-shadow-rgb), 0.08) 0%, rgba(var(--home-thumb-shadow-rgb), 0) 56%),
		linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	border: 1px solid #e8eef5;
	color: var(--home-thumb-accent);
	box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
}

.article-thumbnail-container.qk-home-smart-thumb::before,
.article-thumbnail-container.qk-home-smart-thumb::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.article-thumbnail-container.qk-home-smart-thumb::before {
	top: -32px;
	right: -26px;
	width: 122px;
	height: 122px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--home-thumb-shadow-rgb), 0.18) 0%, rgba(var(--home-thumb-shadow-rgb), 0.08) 38%, rgba(var(--home-thumb-shadow-rgb), 0) 72%);
}

.article-thumbnail-container.qk-home-smart-thumb::after {
	left: -42px;
	bottom: -36px;
	width: 220px;
	height: 82px;
	border-radius: 999px;
	background:
		linear-gradient(90deg, rgba(var(--home-thumb-shadow-rgb), 0.16) 0%, rgba(var(--home-thumb-shadow-rgb), 0.02) 100%),
		repeating-linear-gradient(135deg, rgba(var(--home-thumb-shadow-rgb), 0.10) 0px, rgba(var(--home-thumb-shadow-rgb), 0.10) 2px, rgba(var(--home-thumb-shadow-rgb), 0) 2px, rgba(var(--home-thumb-shadow-rgb), 0) 10px);
	transform: rotate(-12deg);
}

.article-thumbnail-container.qk-home-smart-thumb.has-thumb-image {
	background: transparent;
	border: none;
	box-shadow: none;
}

.article-thumbnail-container.qk-home-smart-thumb.has-thumb-image::before,
.article-thumbnail-container.qk-home-smart-thumb.has-thumb-image::after {
	display: none;
}

.article-thumb-fallback {
	width: 114px;
	height: 62px;
	max-width: calc(100% - 14px);
	max-height: calc(100% - 14px);
	border-radius: 16px;
	background:
		radial-gradient(circle at 18% 22%, rgba(var(--home-thumb-shadow-rgb), 0.10) 0%, rgba(var(--home-thumb-shadow-rgb), 0) 58%),
		linear-gradient(135deg, rgba(var(--home-thumb-shadow-rgb), 0.10) 0%, rgba(var(--home-thumb-shadow-rgb), 0) 52%),
		linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border: 2.5px solid var(--home-thumb-accent);
	box-shadow: 0 9px 18px rgba(var(--home-thumb-shadow-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -2px 4px rgba(var(--home-thumb-shadow-rgb), 0.08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	color: inherit;
}

.article-thumb-fallback::before,
.article-thumb-fallback::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.article-thumb-fallback::before {
	top: 9px;
	left: 10px;
	width: 22px;
	height: 22px;
	border-radius: 9px;
	border: 1px solid rgba(var(--home-thumb-shadow-rgb), 0.28);
	background: rgba(var(--home-thumb-shadow-rgb), 0.06);
	transform: rotate(16deg);
}

.article-thumb-fallback::after {
	right: 10px;
	bottom: 9px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px dashed rgba(var(--home-thumb-shadow-rgb), 0.38);
	opacity: 0.7;
}

.article-thumb-fallback svg {
	width: 30px;
	height: 30px;
	display: block;
	flex-shrink: 0;
	color: inherit;
	position: relative;
	z-index: 1;
}

.article-thumb-fallback.article-thumb-text {
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

@keyframes pulse-border {
	0% {
		box-shadow: 0 0 0 0 var(--primary);
	}

	70% {
		box-shadow: 0 0 0 10px var(--primary-opacity-10);
	}

	100% {
		box-shadow: 0 0 0 0 var(--primary-opacity-10);
	}
}

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

.topic-content p {
	font-size: 14px;
	color: var(--text-lighter);
	line-height: 26px;
	width: 95%;
	height: 50px;
	padding: 0px;
	font-size: 14px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

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

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

.topic-author {
	display: inline-flex;
	align-items: flex-end;
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1;
	color: var(--text);
	text-decoration: none;
}

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

.topic-time {
	font-size: 0.8rem;
	line-height: 1;
	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: 15px
}

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

.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;
	height: 40px;
	min-height: 40px;
}

.user-actions .btn {
	width: 80px;
	height: 40px;
	padding: 0 12px;
	box-sizing: border-box;
	transition: none;
}

.user-actions .sidebar-post-btn {
	margin-top: 0;
	height: 40px;
	width: 150px;
	flex: 0 0 150px;
	padding: 0 16px;
	display: none;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.user-actions.is-logged .sidebar-post-btn,
html.qk-prelogged .user-actions .sidebar-post-btn,
body.logged-in .user-actions .sidebar-post-btn {
	display: inline-flex;
}

.user-actions.is-logged .btn-primary,
.user-actions.is-logged .btn-outline,
html.qk-prelogged .user-actions .btn-primary,
html.qk-prelogged .user-actions .btn-outline,
body.logged-in .user-actions .btn-primary,
body.logged-in .user-actions .btn-outline {
	display: none;
}

.tags-cloud-section {
	background-color: var(--bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	padding: 20px 20px 15px;
	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: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spacing-sm);
}

.home-tags-cloud-section {
	padding: 14px 18px 8px;
	overflow: hidden;
}

.home-tags-cloud {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 1.05 / 1;
	margin-top: 0;
	perspective: 1250px;
	transform-style: preserve-3d;
	overflow: hidden;
}

.home-tags-cloud-section .home-tags-cloud {
	margin-top: -20px;
}

.tag-cloud-panel {
	padding: 10px 20px 14px !important;
}

.tag-archive-cloud {
	max-width: 760px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
}

.home-tags-cloud::before {
	content: "";
	position: absolute;
	inset: 0 6px 6px;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.92) 50%, rgba(244, 247, 251, 0.2) 68%, rgba(244, 247, 251, 0) 76%);
	box-shadow: inset 0 14px 32px rgba(255, 255, 255, 0.5), inset 0 -10px 22px rgba(148, 163, 184, 0.06);
	pointer-events: none;
}

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

.tag3 {
	display: inline-block;
	background: var(--primary-opacity-10);
	color: var(--primary);
	padding: 4px 12px;
	border-radius: 5px;
	font-size: 12px;
	margin-right: 4px;
	margin-bottom: 4px;
	transition: all 0.3s ease;
	cursor: pointer;
	text-decoration: none
}

.tag3:hover {
	background: var(--primary);
	color: white;
}

.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: none;
	opacity: 1;
	transform: none;
	width: 150px;
	animation: none;
}

.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);
	padding-bottom: 30px;
}

.trending-header {
	font-size: 17px;
	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: #768ce5
}

.tags-cloud .tag {
	display: block;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	font-weight: 500;
	transition: all 0.2s ease;
	padding: 4px 4px 4px 12px;
	border-radius: 16px;
	margin-bottom: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.home-tags-cloud .tag {
	--category-icon-accent: #d97b73;
	--category-icon-shadow-rgb: 217, 123, 115;
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-block;
	width: auto;
	max-width: 180px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--category-icon-accent);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: translate3d(-50%, -50%, 0);
	transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform, opacity;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 4px 2px 12px rgba(var(--category-icon-shadow-rgb), 0.12), 10px 4px 18px rgba(var(--category-icon-shadow-rgb), 0.08);
	transition: color 0.25s ease, text-shadow 0.25s ease;
	z-index: 1;
}

.home-tags-cloud .tag:hover {
	color: var(--category-icon-accent);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 5px 3px 14px rgba(var(--category-icon-shadow-rgb), 0.16), 12px 6px 22px rgba(var(--category-icon-shadow-rgb), 0.1);
}

.home-tags-cloud .tag-text {
	display: inline-block;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

.special-collection-section {
	padding-bottom: 24px;
}

.special-collection-grid:empty {
	display: none;
}

.special-collection-section:has(.special-collection-grid:empty) {
	display: none;
}

/* 双重保障，确保在所有设备上都能隐藏 */
.special-collection-section.hidden {
	display: none !important;
}

.special-collection-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.special-collection-card:only-child {
	grid-column: 1 / -1;
	gap: 20px;
}

.special-collection-card:first-child:nth-last-child(2),
.special-collection-card:first-child:nth-last-child(2) + .special-collection-card {
	grid-column: 1 / -1;
	gap: 20px;
}

.special-collection-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: var(--text);
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: linear-gradient(180deg, var(--bg) 0%, var(--bg-secondary) 100%);
	box-shadow: 0 10px 12px -10px rgba(15, 23, 42, 0.16);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.special-collection-card:hover {
	transform: translateY(-2px);
	border-color: var(--primary-opacity-20);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
	color: var(--primary);
}

.special-collection-thumb-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	overflow: hidden;
	background: var(--bg-secondary);
}

.special-collection-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.special-collection-card:hover .special-collection-thumb {
	transform: scale(1.05);
}

.special-collection-card:hover .special-collection-title {
	color: var(--text);
}

.special-collection-id {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.68);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	backdrop-filter: blur(6px);
}

.special-collection-title {
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: var(--spacing-xs);
	color: var(--text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
	min-height: calc(1.4em * 2);
}

.events-section {
	background-color: var(--bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	padding: var(--spacing-lg) var(--spacing-lg) 10px;
	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: 15px;
}

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

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

.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 {}

.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: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 15px;
}

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

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

.custom-tag1 {
	display: inline-block;
}

.category-tag a {
	display: inline-block;
	padding: 3px 10px;
	background-color: var(--primary-opacity-10);
	color: var(--primary);
	font-size: 0.75rem;
	border-radius: 5px;
	font-weight: 500;
	text-decoration: none;
}

.category-keywords.tags-wrapper a {
	display: inline-block;
	padding: 3px 10px;
	background-color: var(--primary-opacity-10);
	color: var(--primary);
	font-size: 0.75rem;
	border-radius: 5px;
	font-weight: 500;
	text-decoration: none;
	margin-right: 5px;
}

.category-tag a:hover {
	background-color: var(--primary);
	color: #fff;
}

.category-keywords.tags-wrapper a:hover {
	background-color: var(--primary);
	color: #fff;
}

.category-details {
	display: flex;
	gap: 40px;
	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);
	margin-left: 10px;
}

.category-description {
	flex: 1;
}

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

.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;
		padding: 0 0px;
	}

	.article-thumbnail-container {
		width: 100%;
	}

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

	.category-title {

		max-width: 100%;

		overflow-wrap: break-word;
		white-space: normal;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		margin-bottom: 0px;
	}

	.post02 {
		display: none;
	}

	.category-details {
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.category-info {
		width: 100%;
	}

	.category-thumbnail {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.category-thumbnail img {
		width: 100%;
		max-width: 100%;
		height: 120px;
		margin-left: 0;
	}

	.category-description {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.category-description p {
		margin-right: 0;
		text-align: center;
		-webkit-line-clamp: 3;
	}

	.category-keywords {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		white-space: normal;
		width: 100%;
	}

	.category-keywords.tags-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}

	.category-keywords.tags-wrapper a {
		margin-right: 0;
		margin-bottom: 0;
	}

	.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 3px 6px var(--primary);
	transition: all 0.3s ease;
	opacity: 0;
	visibility: hidden;
	z-index: 9;
}

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

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

.friendlink-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 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;
	border-radius: 5px;
	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: var(--primary);
	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;
	border-radius: 5px;
}

.friendlink-item:hover {
	transform: rotateX(-20deg) translateY(-5px) scale(1.1);
	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-container {
		padding-top: 0px;
	}

	.footer {
		padding: 35px 20px 25px;
		background: #fff;
		margin-top: 5px;
		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;
	}

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

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

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

	body.sidebar-collapsed .content-layout {
		grid-template-columns: 1fr;
	}

	.main-column {
		width: 100%;
	}

	.sidebar {
		width: 100%;
		margin-top: -20px;
	}

	.container,
	.content-container,
	.main-content {
		padding: 0 10px;
		box-sizing: border-box;
	}

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

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

	.nav {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 15px !important;
		background-color: #ffffff !important;
		position: relative !important;
	}

	.nav-links {
		display: none !important;
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		background-color: #fff !important;
		padding: var(--spacing-lg) !important;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
		z-index: 1000 !important;
		flex-direction: column !important;
		gap: var(--spacing-md) !important;
		align-items: center !important;
		margin-top: 0 !important;
		height: 600px;
	}

	.nav-links.show {
		display: flex !important;
	}

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

	.mobile-menu-btn {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 36px !important;
		height: 36px !important;
		padding: 0 !important;
		border: 1px solid #d6dde7 !important;
		border-radius: 999px !important;
		background: #f8fafc !important;
		box-shadow: none !important;
		color: #64748b !important;
		margin: 0 !important;
		margin-left: 10px !important;
		flex-shrink: 0 !important;
		order: 3 !important;
	}

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

	.user-actions-container {
		order: 2 !important;
		display: flex !important;
		align-items: center !important;
		gap: 6px !important;
		margin-left: auto !important;
	}

	.nav-user-avatar {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		height: 36px !important;
		padding: 2px 7px 2px 2px !important;
		border: 1px solid #d6dde7 !important;
		border-radius: 999px !important;
		background: #f8fafc !important;
		box-shadow: none !important;
		gap: 6px !important;
		box-sizing: border-box !important;
		cursor: pointer !important;
		width: 60px !important;
	}

	.nav-user-avatar img {
		width: 28px !important;
		height: 28px !important;
		border-radius: 50% !important;
		object-fit: cover !important;
		border: none !important;
		padding: 0 !important;
		margin: 0 0 0 1px !important;
		background-color: transparent !important;
		flex-shrink: 0 !important;

	}

	.nav-user-avatar .qk-dropdown-avatar,
	.nav-user-avatar .qk-dropdown-avatar img {
		width: 56px !important;
		height: 56px !important;
	}

	.dropdown-arrow-mobile {
		display: block !important;
		color: #94a3b8 !important;
		width: 14px !important;
		height: 14px !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
	}

	.nav-actions .login-btn,
	.nav-actions .register-btn {
		margin: 0 !important;
		padding: 0 10px !important;
		height: 34px !important;
		border-radius: 40px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 10px !important;
		flex-shrink: 0 !important;
		border: 1px solid var(--border) !important;
		font-size: 14px !important;
	}

	.nav-actions .login-btn {
		background: var(--bg-secondary) !important;
		color: var(--text) !important;
	}

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

	.register-btn {
		background-color: var(--primary) !important;
		color: white !important;
		border-color: var(--primary) !important;
	}

	.welcome-banner-container-full {
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.welcome-banner-inner {
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.welcome-banner-container {
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
	}

	.container {
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.main-content {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 70px 0 0 !important;
	}

	.welcome-content {
		max-width: 100%;
		margin-bottom: 30px !important;
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
		text-align: center !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}

	.welcome-banner h1 {
		text-align: center !important;
		width: 100% !important;
		margin: 0 0 20px 0 !important;
	}

	.welcome-banner p {
		text-align: center !important;
		width: 100% !important;
		margin: 0 0 30px 0 !important;
	}

	.welcome-banner .btn {
		margin-top: 0 !important;
		padding: 8px 40px !important;
		margin-bottom: 0px !important;
		max-width: 200px !important;
		display: block !important;
		text-align: center !important;
		border-radius: 60px !important;
	}

	.banner-stats-container {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		margin-bottom: 20px !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.banner-stat-card {
		width: 240px;
		max-width: 240px !important;
		margin-bottom: 10px !important;
		padding: 5px 20px !important;
		margin-top: 0 !important;
		min-height: 50px !important;
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		background-color: transparent !important;
		border-radius: 8px !important;
		border: 1px solid rgba(255, 255, 255, 0.3) !important;
		backdrop-filter: blur(10px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
		position: relative !important;
		left: 0 !important;
		right: 0 !important;
	}

	.banner-stat-card {
		flex-direction: row-reverse !important;
	}

	.banner-stat-number {
		font-size: 1rem !important;
		font-weight: 600 !important;
		color: white !important;
	}

	.banner-stat-label {
		font-size: 0.8rem !important;
		color: rgba(255, 255, 255, 0.8) !important;
	}

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

	.welcome-banner-container {
		padding: 0 !important;
	}

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

	.section-header {
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100% !important;
	}

	.section-title {
		margin-bottom: 0 !important;
		text-align: left !important;
		flex: 1 !important;
		display: block !important;
	}

	.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 {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 15px !important;
	}

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

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

	.welcome-banner {
		margin-top: 10px;
	}

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

	.topic-item {
		padding: var(--spacing-md);
		height: auto;
		min-height: 100px;
		flex-direction: row;
		align-items: flex-start;
		gap: 12px;
	}

	.topic-item::before {
		display: none;
	}

	.topic-item>a.topic-title {
		flex: 0 0 auto;
		display: block;
	}

	.topic-item .article-thumbnail-container {
		width: 126px;
		height: 90px;
		overflow: hidden;
		border-radius: 10px;
		margin-top: 0;
		flex-shrink: 0;
	}

	.article-thumbnail {
		width: 100%;
		height: 100%;
		border-radius: 10px;
		object-fit: cover;
		flex-shrink: 0;
		display: block !important;
		margin-top: 0;
	}

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

	.topic-content .topic-title {
		font-size: 14px;
		line-height: 1.4;
		margin-bottom: 6px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.topic-content p {
		font-size: 12px;
		line-height: 24px;
		color: var(--text-light);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: 8px;
		width: 95%;
	}

	.topic-stats {
		display: flex;
		gap: 12px;
		font-size: 11px;
		color: var(--text-lighter);
	}

	.topic-stat {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.search-button {
		right: 30px;
		top: 50% !important;
		transform: translateY(-50%) !important;
		margin-top: 0px;
	}

	.search-wrapper {
		padding: 0 20px !important;
		width: 95% !important;
	}

	.search-input {
		padding: 0.6rem 1rem !important;
		font-size: 0.9rem !important;
	}

	.search-container {
		margin-top: 85px !important;
		padding: 40px 0 !important;
	}

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

	.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;
		--banner-image-position: -550px center;
		min-height: 300px !important;
	}

	.home-hero-copy {
		display: none;
	}

	.home-hero-title {
		gap: 2px;
		margin-bottom: 6px;
		font-size: 1.55rem;
		line-height: 1.3;
	}

	.home-hero-desc {
		max-width: 100%;
		padding-left: 2px;
		font-size: 1rem;
		line-height: 1.5;
	}

	.banner-round-actions {
		left: 30%;
		transform: translateX(-50%) scale(0.7);
		transform-origin: top center;
	}

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

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

	.topics-header {
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		gap: 10px !important;
		flex-wrap: wrap !important;
		padding: var(--spacing-md) !important;

	}

	.topics-title {
		margin-bottom: 0 !important;
		text-align: left !important;
		flex: 1 !important;
		display: block !important;
	}

	.topics-filter {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 10px !important;
		flex-wrap: nowrap !important;
		width: 92% !important;
		margin-top: 10px !important;
	}

	.filter-btn {
		font-size: 13px !important;
		padding: 8px 0 !important;
		width: auto !important;
		height: auto !important;
		flex: 1 !important;
		min-width: 80px !important;
		justify-content: center !important;
		border-radius: 400px !important;
		text-align: center !important;
	}

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

@media (max-width: 1100px) and (min-width: 769px) {
	.content-layout {
		width: 100%;
		grid-template-columns: 1fr;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.sidebar {
		display: none;
	}

	.nav-links>.nav-item:nth-child(n+7) {
		display: none;
	}
}

.category-page-summary {
	min-width: 125px;
	justify-content: center;
}

@media (max-width: 768px) {
	.category-page-main {
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.category-page-section .topics-header {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
	}

	.category-page-section .topics-title {
		flex: 1 !important;
		display: flex !important;
		align-items: center !important;
		align-self: center !important;
		min-height: 36px;
		line-height: 1 !important;
		margin: 0 !important;
	}

	.category-page-section .topics-filter {
		width: auto !important;
		margin-top: 0 !important;
		justify-content: flex-start !important;
		flex: none !important;
		display: flex !important;
		align-items: center !important;
		min-height: 36px;
	}


	.category-page-grid {
		padding: 12px !important;
		gap: 12px !important;
	}

	.category-page-summary {
		width: auto !important;
		min-width: 0 !important;
		flex: none !important;
		padding: 8px 14px !important;
	}

}