* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			html {
				scroll-behavior: smooth;
			}
			body {
				background-color: #ffffff;
				color: #111111;
				font-family: "Inter", "Helvetica Neue", Arial, "PingFang SC", "Microsoft Yahei", sans-serif;
				line-height: 1.6;
				overflow-x: hidden;
				-webkit-font-smoothing: antialiased;
			}
		/* 加载动画全屏遮罩 */
		.preloader {
			position: fixed;
			inset: 0;
			background: #f8f8f8;
			z-index: 9999;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			transition: opacity 0.6s ease, visibility 0.6s;
		}
		.preloader.hidden {
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
		}
		/* 主站↔论坛互相跳转：本会话已进入过站点则完全不渲染加载动画 */
		html.skip-loader .preloader {
			display: none;
		}
		.preloader-inner {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		/* 环形进度 */
		.preloader-ring {
			position: relative;
			width: 132px;
			height: 132px;
		}
		.preloader-ring svg {
			width: 100%;
			height: 100%;
			transform: rotate(-90deg);
		}
		.ring-track {
			fill: none;
			stroke: #e9e9e9;
			stroke-width: 5;
		}
		.ring-progress {
			fill: none;
			stroke: #111111;
			stroke-width: 5;
			stroke-linecap: round;
			filter: drop-shadow(0 0 5px rgba(17, 17, 17, 0.28));
		}
		.preloader-percent {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.45rem;
			font-weight: 800;
			color: #111111;
			font-variant-numeric: tabular-nums;
			letter-spacing: 0.02em;
		}
		/* 品牌名 + 灵动跳动圆点 */
		.preloader-brand {
			margin-top: 28px;
			font-size: 0.95rem;
			font-weight: 700;
			letter-spacing: 0.35em;
			text-indent: 0.35em;
			color: #111111;
		}
		.preloader-dots {
			display: flex;
			gap: 7px;
			margin-top: 14px;
		}
		.preloader-dots span {
			width: 7px;
			height: 7px;
			border-radius: 50%;
			background: #111111;
			opacity: 0.25;
			animation: dotBounce 1.2s ease-in-out infinite;
		}
		.preloader-dots span:nth-child(2) {
			animation-delay: 0.15s;
		}
		.preloader-dots span:nth-child(3) {
			animation-delay: 0.3s;
		}
		@keyframes dotBounce {
			0%, 60%, 100% { transform: translateY(0); opacity: 0.25; }
			30% { transform: translateY(-8px); opacity: 1; }
		}
		.progress-wrap {
			width: 280px;
			height: 4px;
			margin-top: 32px;
			background: #e9e9e9;
			border-radius: 99px;
			overflow: hidden;
		}
		.progress-bar {
			height: 100%;
			width: 0%;
			background: linear-gradient(90deg, #111 0%, #333 50%, #111 100%);
			background-size: 200% 100%;
			animation: progressShine 1.5s linear infinite;
			border-radius: inherit;
			transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
			position: relative;
			overflow: hidden;
		}
		.progress-bar::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
			animation: progressSweep 1s ease-in-out infinite;
		}
		@keyframes progressShine {
			0% { background-position: 200% 0; }
			100% { background-position: -200% 0; }
		}
		@keyframes progressSweep {
			0% { transform: translateX(-100%); }
			100% { transform: translateX(100%); }
		}
		.enter-btn {
			margin-top: 34px;
			padding: 14px 36px;
			border: 1px solid #111111;
			background: transparent;
			border-radius: 99px;
			font-size: 1rem;
			color: #111111;
			cursor: pointer;
			opacity: 0;
			transform: translateY(12px);
			transition: 0.4s ease;
		}
		.enter-btn.show {
			opacity: 1;
			transform: translateY(0);
		}
		.enter-btn:hover {
			background: #111111;
			color: #fff;
		}
			/* 导航栏 */
			header {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 90;
				padding: 20px 40px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: transparent;
				transition: background 0.4s ease, padding 0.4s ease;
			}
			header.scrolled {
				/* 不再有整条白色背景：滚动时只收紧留白，导航项各自是独立胶囊 */
				background: transparent;
				padding: 14px 40px;
			}
			.logo {
				font-size: 0.95rem;
				font-weight: 600;
				letter-spacing: 0.08em;
				color: #111111;
			}
			.nav-menu {
				display: flex;
				gap: 28px;
			}
			.nav-menu a {
				color: #111111;
				text-decoration: none;
				font-size: 0.9rem;
				font-weight: 500;
				opacity: 0.7;
				transition: opacity 0.3s ease;
			}
			.nav-menu a:hover {
				opacity: 1;
			}
			.menu-btn {
				display: none;
				background: none;
				border: none;
				font-size: 1.4rem;
				cursor: pointer;
				color: #111111;
			}
			/* 首屏 */
			.hero {
				position: relative;
				z-index: 10;
				height: 100vh;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				padding: 0 clamp(16px, 4vw, 24px);
				overflow: hidden;
			}
			/* 背景轮播层 */
			.hero-bg {
				position: absolute;
				inset: 0;
				z-index: 0;
				overflow: hidden;
			}
			/* 背景遮罩，让文字更清楚 */
			.hero-bg::after {
				content: "";
				position: absolute;
				inset: 0;
				background: rgba(0, 0, 0, 0.35);
				z-index: 2;
			}
			/* 所有背景图共用同一位置 */
			.hero-bg picture,
			.hero-bg img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				z-index: 1;
			}
			/* 轮播动画：5张图，总周期 20s，每张停留4秒，切换过渡2秒 */
			.hero-bg img {
				opacity: 0;
				animation: heroFade 20s infinite ease-in-out;
			}
			/* 5张图依次延迟，每张间隔4s */
			.hero-bg img:nth-child(1) {
				animation-delay: 0s;
			}
			.hero-bg img:nth-child(2) {
				animation-delay: 4s;
			}
			.hero-bg img:nth-child(3) {
				animation-delay: 8s;
			}
			.hero-bg img:nth-child(4) {
				animation-delay: 12s;
			}
			.hero-bg img:nth-child(5) {
				animation-delay: 16s;
			}
			@keyframes heroFade {
				0% {
					opacity: 0;
					transform: scale(1.05);
				}
				8% {
					opacity: 1;
					transform: scale(1);
				}
				20% {
					opacity: 1;
					transform: scale(1);
				}
				28% {
					opacity: 0;
					transform: scale(1.05);
				}
				100% {
					opacity: 0;
					transform: scale(1.05);
				}
			}
			/* 首屏文字保持在背景上方 */
			.hero h1 {
				position: relative;
				z-index: 3;
				color: #ffffff;
				font-size: clamp(48px, 6.6vw, 108px);
				font-weight: 900;
				letter-spacing: -0.04em;
				line-height: 0.95;
				margin-bottom: 18px;
				text-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
			}
			/* 减弱后的毛玻璃面板 */
			.announcement-card {
				position: relative;
				z-index: 3;
				width: min(52vw, 620px);
				max-width: 620px;
				min-height: 200px;
				padding: 36px 40px;
				border-radius: 28px;
				background: rgba(255, 255, 255, 0.05);
				backdrop-filter: blur(12px) saturate(120%);
				-webkit-backdrop-filter: blur(12px) saturate(120%);
				border: 1px solid rgba(255, 255, 255, 0.12);
				box-shadow:
					0 20px 50px rgba(0, 0, 0, 0.18),
					0 40px 90px rgba(0, 0, 0, 0.10),
					inset 0 1px 0 rgba(255, 255, 255, 0.18);
				text-align: left;
				color: #ffffff;
			}
			.announcement-label {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				padding: 6px 12px;
				border-radius: 999px;
				background: rgba(255, 255, 255, 0.06);
				border: 1px solid rgba(255, 255, 255, 0.12);
				font-size: 0.75rem;
				letter-spacing: 0.14em;
				margin-bottom: 14px;
			}
			.announcement-dot {
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: #7ee8fa;
				box-shadow: 0 0 12px #7ee8fa;
			}
			.announcement-card h3 {
				font-size: 1.6rem;
				font-weight: 800;
				margin-bottom: 14px;
				letter-spacing: 0.02em;
			}
			.announcement-card p {
				font-size: 1.05rem;
				line-height: 1.8;
				opacity: 0.92;
			}
			.announcement-tags {
				margin-top: 20px;
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
			}
			.announcement-tag {
				padding: 8px 14px;
				border-radius: 999px;
				background: rgba(255, 255, 255, 0.05);
				border: 1px solid rgba(255, 255, 255, 0.12);
				font-size: 0.85rem;
				color: #fff;
			}
			/* 站内用户数（实时同步） */
			.announcement-users {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				margin-top: 22px;
				padding: 9px 14px;
				border-radius: 12px;
				background: rgba(255, 255, 255, 0.06);
				border: 1px solid rgba(255, 255, 255, 0.12);
				color: rgba(255, 255, 255, 0.85);
				font-size: 0.85rem;
				letter-spacing: 0.04em;
			}
			.announcement-users-icon {
				display: inline-flex;
				width: 16px;
				height: 16px;
				color: #7ee8fa;
			}
			.announcement-users-icon svg {
				width: 100%;
				height: 100%;
				display: block;
			}
			.announcement-users-count {
				font-weight: 800;
				font-variant-numeric: tabular-nums;
				color: #ffffff;
				font-size: 1.05rem;
			}
			.announcement-users-count.pop {
				animation: userCountPop 0.5s ease;
			}
			@keyframes userCountPop {
				0% { transform: scale(1); }
				40% { transform: scale(1.35); color: #7ee8fa; }
				100% { transform: scale(1); }
			}
			/* 滚动渐入元素 */
			.scroll-element {
				opacity: 0;
				transform: translateY(40px);
				transition: opacity 0.9s ease, transform 0.9s ease;
				will-change: opacity, transform;
				backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
			}
			.scroll-element.active {
				opacity: 1;
				transform: translateY(0);
			}

		/* ========== 第二页：作品展示区 纯白背景 ========== */
		.works-section {
			padding: 140px 0 180px;
			position: relative;
			background: #ffffff;
		}
		.works-section > div,
		.works-section .coser-stage {
			position: relative;
			z-index: 2;
		}
			.section-label {
				font-size: 0.85rem;
				letter-spacing: 0.2em;
				color: #666;
				margin-bottom: 18px;
			}
			.section-title {
				font-size: 5vw;
				font-weight: 900;
				letter-spacing: -0.03em;
				margin-bottom: 80px;
				color: #111;
			}
			/* ---------- coser 全息卡片展台 ---------- */
			.coser-stage {
				--cw: 300px;
				--ch: 400px;
				position: relative;
				width: calc(100% - 120px);
				max-width: 1160px;
				height: 660px;
				margin: 0 auto;
				border-radius: 40px;
				display: grid;
				place-items: center;
				overflow: hidden;
				perspective: 1600px;
				perspective-origin: 50% 46%;
				background:
					radial-gradient(70% 58% at 50% -12%, rgba(120, 236, 255, 0.16), transparent 68%),
					radial-gradient(60% 60% at 88% 104%, rgba(112, 74, 255, 0.16), transparent 66%),
					linear-gradient(166deg, #080d13 0%, #0b121c 46%, #04070b 100%);
				box-shadow:
					0 34px 80px -46px rgba(17, 17, 17, 0.55),
					inset 0 0 0 1px rgba(255, 255, 255, 0.06);
			}

			.coser-stage::before {
				content: "";
				position: absolute;
				inset: 0;
				pointer-events: none;
				background: radial-gradient(48% 40% at 50% -6%, rgba(170, 245, 255, 0.16), transparent 72%);
			}

			.coser-deck {
				position: relative;
				width: var(--cw);
				height: var(--ch);
			}

			.coser-card {
				position: absolute;
				inset: 0;
				--bx: 0px;
				--by: 0px;
				--brz: 0deg;
				--lift: 0px;
				--zs: 1;
				--rz: var(--brz);
				--sc: 1;
				/* 透视放在卡片自身，face 的旋转才有近大远小；不再用 preserve-3d，避免子元素命中失效 */
				perspective: 1000px;
				perspective-origin: 50% 50%;
				transform:
					translate3d(var(--bx), calc(var(--by) + var(--lift)), 0)
					rotateZ(var(--rz))
					scale(calc(var(--sc) * var(--zs)));
				transition: transform 0.52s cubic-bezier(0.22, 0.9, 0.24, 1);
				will-change: transform;
				cursor: zoom-in;
			}

			@media (hover: hover) and (pointer: fine) {
				.coser-card:hover {
					--lift: -24px;
					--rz: 0deg;
					--sc: 1.06;
					z-index: 40 !important;
				}
			}

			/* 地面柔和投影 */
			.coser-card::before {
				content: "";
				position: absolute;
				left: 8%;
				right: 8%;
				bottom: -32px;
				height: 46px;
				border-radius: 50%;
				background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0) 70%);
				filter: blur(22px);
				pointer-events: none;
			}

			.coser-face {
				position: absolute;
				inset: 0;
				border-radius: 22px;
				overflow: hidden;
				background: rgba(12, 22, 32, 0.55);
				box-shadow:
					0 26px 56px -26px rgba(0, 0, 0, 0.9),
					0 0 32px -8px rgba(96, 226, 255, 0.36);
			}

			.coser-pic {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
				transform: scale(1.015);
				filter: saturate(1.06) contrast(1.02);
				user-select: none;
				-webkit-user-drag: none;
				cursor: zoom-in;
				background-size: cover;
				background-position: center;
			}

			/* 亚克力磨砂层（仅渐变着色，不再对图片做 blur，保持小窗清晰） */
			.coser-glass {
				position: absolute;
				inset: 0;
				border-radius: inherit;
				background:
					linear-gradient(148deg, rgba(210, 250, 255, 0.13) 0%, rgba(210, 250, 255, 0.03) 24%, transparent 40%),
					linear-gradient(0deg, rgba(3, 9, 15, 0.5) 0%, rgba(3, 9, 15, 0) 34%);
				pointer-events: none;
			}

			/* 全息虹彩雾 */
			.coser-holo {
				position: absolute;
				inset: 0;
				border-radius: inherit;
				background: conic-gradient(from calc(var(--ang, 0deg) + 40deg),
					rgba(120, 250, 255, 0) 0deg,
					rgba(120, 250, 255, 0.5) 46deg,
					rgba(96, 160, 255, 0.12) 96deg,
					rgba(200, 140, 255, 0.42) 156deg,
					rgba(120, 250, 255, 0) 214deg,
					rgba(96, 255, 222, 0.32) 292deg,
					rgba(120, 250, 255, 0) 360deg);
				mix-blend-mode: screen;
				opacity: 0.22;
				filter: blur(12px);
				pointer-events: none;
			}

			/* 跟随鼠标的动态高光 */
			.coser-glare {
				position: absolute;
				inset: -2px;
				border-radius: inherit;
				background: radial-gradient(260px 230px at var(--gx, 50%) var(--gy, 50%),
					rgba(255, 255, 255, 0.34) 0%,
					rgba(196, 246, 255, 0.16) 24%,
					rgba(150, 220, 255, 0.04) 48%,
					transparent 66%);
				mix-blend-mode: screen;
				opacity: 0.5;
				transition: opacity 0.45s ease;
				pointer-events: none;
			}

			@media (hover: hover) and (pointer: fine) {
				.coser-card:hover .coser-glare {
					opacity: 0.78;
				}
			}

			/* 青蓝霓虹全息描边 */
			.coser-rim {
				position: absolute;
				inset: 0;
				border-radius: inherit;
				padding: 1.2px;
				background: conic-gradient(from calc(var(--ang, 0deg) + 90deg),
					rgba(140, 252, 255, 0.92),
					rgba(70, 158, 255, 0.5) 20%,
					rgba(198, 146, 255, 0.86) 42%,
					rgba(110, 255, 236, 0.3) 62%,
					rgba(140, 252, 255, 0.92) 100%);
				-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
				mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
				-webkit-mask-composite: xor;
				mask-composite: exclude;
				opacity: 0.88;
				pointer-events: none;
			}

			/* 玻璃斜向反光条 */
			.coser-face::before {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: inherit;
				background: linear-gradient(116deg, transparent 26%, rgba(255, 255, 255, 0.11) 43%, rgba(210, 245, 255, 0.05) 49%, transparent 62%);
				mix-blend-mode: screen;
				opacity: 0.9;
				pointer-events: none;
				z-index: 5;
			}

			/* 玻璃边缘高光 */
			.coser-face::after {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: inherit;
				box-shadow:
					inset 0 1px 0 rgba(255, 255, 255, 0.42),
					inset 0 -1px 0 rgba(110, 230, 255, 0.18),
					inset 0 18px 28px -22px rgba(255, 255, 255, 0.5);
				pointer-events: none;
			}

			/* 地面倒影 */
			.coser-reflect {
				position: absolute;
				left: 5%;
				right: 5%;
				top: calc(100% + 3px);
				height: 46%;
				border-radius: 0 0 22px 22px;
				background-size: cover;
				background-position: center bottom;
				transform: scaleY(-1);
				transform-origin: top center;
				opacity: 0.24;
				filter: blur(3px) saturate(1.25) brightness(0.92);
				-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.25) 55%, transparent 84%);
				mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.25) 55%, transparent 84%);
				transition: opacity 0.5s ease, filter 0.5s ease;
				pointer-events: none;
			}

			@media (hover: hover) and (pointer: fine) {
				.coser-card:hover .coser-reflect {
					opacity: 0.13;
					filter: blur(4.5px) saturate(1.2) brightness(0.82);
				}
			}

			.coser-tip {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 22px;
				margin: 0;
				text-align: center;
				font-size: 11px;
				letter-spacing: 0.14em;
				color: rgba(200, 236, 255, 0.3);
				pointer-events: none;
				z-index: 2;
			}

			@media (max-width: 1100px) {
				.coser-stage {
					--cw: 250px;
					--ch: 333px;
					height: 540px;
					width: calc(100% - 80px);
					border-radius: 32px;
				}
			}

			@media (max-width: 900px) {
				.coser-stage {
					--cw: 186px;
					--ch: 248px;
					height: 430px;
					width: calc(100% - 40px);
					border-radius: 28px;
				}
			}

			@media (max-width: 560px) {
				.coser-stage {
					--cw: 140px;
					--ch: 187px;
					height: 368px;
					width: calc(100% - 28px);
					border-radius: 24px;
				}
				.coser-tip {
					font-size: 10px;
					bottom: 16px;
				}
			}

		/* ========== 第三页：简介区 黑白少女背景 + 毛玻璃内容框 ========== */
		.about-section {
			padding: 120px 0;
			position: relative;
			background: url("../img/opt/IMG_20261017_024611-1440.webp") center center / cover no-repeat;
			background-attachment: scroll;
			overflow: hidden;
		}
		/* 背景轻微遮罩，突出毛玻璃卡片 */
		.about-section::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.2);
			z-index: 1;
		}
		/* 背景闪卡流光：一层缓慢往返漂移的虹彩高光，像全息闪卡般流动 */
		.about-section::after {
			content: "";
			position: absolute;
			inset: -40% -60%;
			z-index: 1;
			background: linear-gradient(
				118deg,
				transparent 40%,
				rgba(255, 255, 255, 0.09) 46%,
				rgba(140, 235, 255, 0.16) 50%,
				rgba(255, 150, 225, 0.13) 54%,
				rgba(255, 255, 255, 0.09) 58%,
				transparent 64%
			);
			mix-blend-mode: screen;
			pointer-events: none;
			animation: aboutHolo 13s ease-in-out infinite;
		}
		@keyframes aboutHolo {
			0% { transform: translate3d(-8%, 0, 0); }
			50% { transform: translate3d(8%, 0, 0); }
			100% { transform: translate3d(-8%, 0, 0); }
		}
		/* 上下云层流动分割：与相邻纯白区块自然衔接 */
		.about-clouds {
			position: absolute;
			left: 0;
			right: 0;
			height: 112px;
			z-index: 3;
			pointer-events: none;
		}
		.about-clouds-top {
			top: -1px;
		}
		.about-clouds-bottom {
			bottom: -1px;
		}
		/* 顶部云带：云朵向下探入照片，顶端齐平（垂直翻转云形） */
		.about-clouds-top .cloud-band {
			top: 0;
			bottom: auto;
		}
		.about-clouds-top .cloud-band svg {
			transform: scaleY(-1);
		}
		/* 云带高度收窄，避免盖住毛玻璃内容卡片 */
		.about-clouds .cloud-band.b1 {
			height: 58px;
			animation-duration: 46s;
		}
		.about-clouds .cloud-band.b2 {
			height: 82px;
			animation-duration: 72s;
		}
		.about-clouds .cloud-band.b3 {
			height: 108px;
			animation-duration: 110s;
		}
		/* ✅ 关于我们 毛玻璃内容卡片，和首屏同款效果 */
		.about-inner {
			max-width: 900px;
			margin: 0 auto;
			padding: 40px 48px;
			position: relative;
			z-index: 4;
				border-radius: 28px;
				background: rgba(255, 255, 255, 0.05);
				backdrop-filter: blur(12px) saturate(120%);
				-webkit-backdrop-filter: blur(12px) saturate(120%);
				border: 1px solid rgba(255, 255, 255, 0.12);
				box-shadow:
					0 20px 50px rgba(0, 0, 0, 0.18),
					0 40px 90px rgba(0, 0, 0, 0.10),
					inset 0 1px 0 rgba(255, 255, 255, 0.18);
				color: #ffffff;
			}
			.about-inner h2 {
				font-size: 4vw;
				font-weight: 800;
				letter-spacing: -0.02em;
				margin-bottom: 32px;
			}
			.about-inner p {
				font-size: 1.1rem;
				color: #fff;
				line-height: 1.9;
				margin-bottom: 20px;
				opacity: 0.92;
			}

			/* 联系区 flex布局，文字和图标并排，垂直居中 */
			.contact-section {
				padding: 140px 0;
				position: relative;
				overflow: hidden;
				max-width: 1200px;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 60px;
			}
			.contact-text-wrap {
				text-align: center;
			}
			.contact-section h2 {
				font-size: 6vw;
				font-weight: 900;
				letter-spacing: -0.03em;
				margin-bottom: 24px;
			}
			.contact-section p {
				font-size: 1.1rem;
				color: #666666;
				margin-bottom: 12px;
			}
			.contact-btn {
				display: inline-block;
				margin-top: 40px;
				padding: 16px 42px;
				border: 1px solid #111111;
				color: #111111;
				text-decoration: none;
				border-radius: 99px;
				font-weight: 600;
				transition: all 0.4s ease;
			}
			.contact-btn:hover {
				background: #111111;
				color: #ffffff;
			}
			/* ✅ 方形社团标识 改为圆角 + 阴影立体感 */
			.contact-logo {
				width: 220px;
				height: 220px;
				flex-shrink: 0;
				border-radius: 20px;
				overflow: hidden;
				box-shadow:
					0 12px 32px rgba(0, 0, 0, 0.15),
					0 24px 60px rgba(0, 0, 0, 0.12);
				transition: transform 0.6s ease, box-shadow 0.6s ease;
			}
			.contact-logo:hover {
				transform: translateY(-4px);
				box-shadow:
					0 16px 40px rgba(0, 0, 0, 0.18),
					0 32px 70px rgba(0, 0, 0, 0.15);
			}
			.contact-logo img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}
			/* 页脚 */
			footer {
				padding: 40px 24px;
				text-align: center;
				color: #999999;
				font-size: 0.85rem;
				border-top: 1px solid #eeeeee;
			}
			/* 用户区域样式 */
			.user-area {
				display: flex;
				align-items: center;
				gap: 12px;
			}
			.auth-btn {
				padding: 8px 20px;
				border: 1px solid #111111;
				background: transparent;
				border-radius: 99px;
				font-size: 0.85rem;
				color: #111111;
				cursor: pointer;
				transition: all 0.3s ease;
				font-weight: 500;
			}
			.auth-btn:hover {
				background: #111111;
				color: #fff;
			}
			.auth-btn-primary {
				background: #111111;
				color: #fff;
			}
			.auth-btn-primary:hover {
				background: #333;
			}
			.user-menu {
				display: flex;
				align-items: center;
				gap: 12px;
			}
		.username {
			font-size: 0.9rem;
			font-weight: 500;
			color: #111;
		}
		/* 导航栏用户头像 */
		.nav-avatar {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			object-fit: cover;
			border: 1px solid #e5e5e5;
			background: #f5f5f5;
			flex-shrink: 0;
		}
		/* ========== 论坛用户头像（帖子/回复/管理后台共用） ========== */
		.forum-avatar {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			object-fit: cover;
			flex-shrink: 0;
			background: #f0f0f0;
			border: 1px solid #e8e8e8;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 0.9rem;
			font-weight: 600;
			color: #999;
			user-select: none;
		}
		.forum-avatar-default {
			background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
		}
			/* 管理员按钮 */
			.admin-btn {
				padding: 8px 16px;
				border: 1px solid #e5e5e5;
				background: transparent;
				border-radius: 99px;
				font-size: 0.85rem;
				color: #666;
				cursor: pointer;
				transition: all 0.3s ease;
				font-weight: 500;
				margin-left: 8px;
			}
		.admin-btn:hover {
			border-color: #111;
			color: #111;
			background: #f8f8f8;
		}
		/* 用户中心按钮 */
		.center-btn {
			padding: 8px 16px;
			border: 1px solid #e5e5e5;
			background: transparent;
			border-radius: 99px;
			font-size: 0.85rem;
			color: #666;
			cursor: pointer;
			transition: all 0.3s ease;
			font-weight: 500;
			margin-left: 8px;
		}
		.center-btn:hover {
			border-color: #111;
			color: #111;
			background: #f8f8f8;
		}
		/* UID徽章（帖子作者旁显示） */
		.uid-badge {
			display: inline-block;
			margin-left: 6px;
			padding: 1px 8px;
			border-radius: 99px;
			background: #f2f2f2;
			border: 1px solid #e8e8e8;
			font-size: 0.72rem;
			font-weight: 500;
			color: #888;
			letter-spacing: 0.5px;
			vertical-align: middle;
			white-space: nowrap;
		}
		/* ========== 用户中心（紧凑资料卡） ========== */
.user-center-modal .modal {
	width: min(468px, 94vw);
	max-width: 468px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 22px 26px 24px;
	border-radius: 22px;
	box-sizing: border-box;
}
.user-center-modal .modal-close {
	top: 14px;
	right: 14px;
	font-size: 1.35rem;
	width: 30px;
	height: 30px;
}
/* 顶栏：小标签，替代原来的大标题，节省纵向空间 */
.uc-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 22px;
	margin-bottom: 16px;
}
.uc-topbar-label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: #9a9a9a;
}
/* 头像 + 用户名横排 */
.uc-head {
	display: flex;
	align-items: center;
	gap: 14px;
}
.uc-avatar-wrap {
	position: relative;
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	margin: 0;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid #ececec;
	background: #f5f5f5;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.uc-avatar-wrap:hover {
	border-color: #d8d8d8;
	box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.05);
}
/* 右下角相机小角标：提示可点击换头像 */
.uc-avatar-wrap::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l1.5-2h7L17 8h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.2'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
	border: 2px solid #fff;
	pointer-events: none;
}
.uc-avatar-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.uc-avatar-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c6c6c6;
	background: linear-gradient(160deg, #f8f8f8, #ededed);
}
.uc-avatar-placeholder svg {
	width: 60%;
	height: 60%;
}
.uc-avatar-mask {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.68rem;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.uc-avatar-wrap:hover .uc-avatar-mask {
	opacity: 1;
}
.uc-avatar-wrap.uploading {
	pointer-events: none;
	opacity: 0.6;
}
.uc-avatar-wrap.uploading .uc-avatar-mask {
	opacity: 1;
}
.uc-headline {
	flex: 1;
	min-width: 0;
}
.uc-username {
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.2;
	color: #111111;
	margin-bottom: 7px;
	word-break: break-all;
}
.uc-tags {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.uc-uid-tag {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 99px;
	background: #111111;
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.5px;
	line-height: 1.5;
}
.uc-role-tag {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 99px;
	border: 1px solid #e0c97a;
	background: #fdf6e3;
	color: #a8842a;
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1.5;
}
.uc-tags .title-badge {
	margin-left: 0;
	font-size: 0.7rem;
}
/* 资料双列网格：用 1px 间隙做分隔线，比大段列表更紧凑 */
.uc-meta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin-top: 18px;
	background: #efefef;
	border: 1px solid #efefef;
	border-radius: 16px;
	overflow: hidden;
}
.uc-meta-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 10px 14px;
	background: #ffffff;
}
.uc-meta-label {
	font-size: 0.68rem;
	color: #9b9b9b;
	letter-spacing: 0.02em;
}
.uc-meta-value {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 0.86rem;
	font-weight: 600;
	color: #111111;
	min-height: 20px;
}
.uc-meta-value .account-status-badge,
.uc-meta-value .title-badge {
	margin-left: 0;
}
.uc-meta-value .club-status-badge {
	font-size: 0.72rem;
	padding: 2px 9px;
}
/* 操作区 */
.uc-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}
/* 进入我的主页：主按钮 */
.uc-home-btn {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 16px;
	border-radius: 14px;
	background: #111111;
	color: #ffffff;
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
	box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.65);
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.uc-home-btn:hover {
	background: #262626;
	transform: translateY(-1px);
	box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.7);
}
.uc-home-ico {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	opacity: 0.92;
}
.uc-home-txt {
	flex: 1;
}
.uc-home-arrow {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.25s ease;
}
.uc-home-btn:hover .uc-home-arrow {
	transform: translateX(3px);
}
/* 账号操作：轻量行式按钮 */
.uc-action-list {
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 14px;
	overflow: hidden;
}
.uc-action-list > .uc-action ~ .uc-action {
	border-top: 1px solid #f2f2f2;
}
.uc-action {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	background: #ffffff;
	border: 0;
	font-family: inherit;
	font-size: 0.87rem;
	font-weight: 500;
	color: #111111;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s ease;
}
.uc-action:hover {
	background: #fafafa;
}
.uc-action.is-open {
	background: #fafafa;
}
.uc-action.is-open .uc-action-ico {
	color: #111111;
}
.uc-action.is-open .uc-action-chev {
	transform: rotate(90deg);
	color: #111111;
}
.uc-action-ico {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	color: #8a8a8a;
}
.uc-action-label {
	flex: 1;
}
.uc-action-chev {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: #c8c8c8;
	transition: transform 0.25s ease, color 0.2s ease;
}
.uc-action:hover .uc-action-chev {
	transform: translateX(2px);
	color: #111111;
}
/* 展开的表单融入操作列表 */
.uc-rename-form {
	display: flex;
	gap: 8px;
	margin-top: 0;
	padding: 12px 14px;
	background: #fafafa;
	border-top: 1px solid #f2f2f2;
}
.uc-rename-form input {
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid #e2e2e2;
	border-radius: 9px;
	font-size: 0.86rem;
	font-family: inherit;
	outline: none;
	transition: border-color 0.25s ease;
}
.uc-rename-form input:focus {
	border-color: #111111;
	background: #ffffff;
}
.uc-password-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 0;
	padding: 12px 14px;
	background: #fafafa;
	border-top: 1px solid #f2f2f2;
}
.uc-password-form input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #e2e2e2;
	border-radius: 9px;
	font-size: 0.86rem;
	font-family: inherit;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.25s ease;
}
.uc-password-form input:focus {
	border-color: #111111;
	background: #ffffff;
}
.uc-rename-confirm {
	padding: 9px 16px;
	border: none;
	border-radius: 9px;
	background: #111111;
	color: #ffffff;
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.25s ease;
}
.uc-rename-confirm:hover {
	background: #333333;
}
.uc-rename-confirm:disabled {
	background: #cccccc;
	cursor: not-allowed;
}
.uc-action-list .form-error {
	margin-top: 0;
	padding: 0 14px 10px;
	background: #fafafa;
	font-size: 0.78rem;
}
/* 社团认证申请按钮（列表内小按钮） */
.uc-apply-btn {
	display: none;
	align-items: center;
	padding: 2px 9px;
	border-radius: 99px;
	border: 1px solid #dcdcdc;
	background: #ffffff;
	color: #111111;
	font-family: inherit;
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.uc-apply-btn:hover {
	background: #111111;
	border-color: #111111;
	color: #ffffff;
}
.uc-apply-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 管理后台UID操作 */
		.admin-uid-tag {
			display: inline-block;
			padding: 2px 10px;
			border-radius: 99px;
			background: #111111;
			color: #ffffff;
			font-size: 0.72rem;
			font-weight: 500;
			letter-spacing: 0.5px;
			margin-left: 8px;
			vertical-align: middle;
		}
		.admin-uid-tag.reserved {
			background: #a8842a;
		}
		.btn-uid {
			border-color: #e0c97a !important;
			color: #a8842a !important;
		}
		.btn-uid:hover {
			background: #fdf6e3 !important;
			border-color: #a8842a !important;
		}
		/* 管理员后台样式 */
			.admin-modal .modal {
				max-width: 900px;
				max-height: 85vh;
				overflow: hidden;
				display: flex;
				flex-direction: column;
			}
			.admin-tabs {
				display: flex;
				gap: 8px;
				margin-bottom: 24px;
				border-bottom: 1px solid #eee;
				padding-bottom: 16px;
			}
			.admin-tab {
				padding: 10px 24px;
				border: none;
				background: transparent;
				border-radius: 8px;
				font-size: 0.95rem;
				font-weight: 500;
				color: #666;
				cursor: pointer;
				transition: all 0.3s ease;
			}
			.admin-tab.active {
				background: #111;
				color: #fff;
			}
			.admin-tab:hover:not(.active) {
				background: #f5f5f5;
				color: #111;
			}
			.admin-content {
				overflow-y: auto;
				flex: 1;
				padding-right: 8px;
			}
			.admin-list {
				display: flex;
				flex-direction: column;
				gap: 12px;
			}
			.admin-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16px 20px;
				background: #f9f9f9;
				border-radius: 12px;
				border: 1px solid #f0f0f0;
			}
			.admin-item-info {
				flex: 1;
			}
		.admin-item-title {
			font-weight: 600;
			font-size: 1rem;
			color: #111;
			margin-bottom: 4px;
			display: flex;
			align-items: center;
			gap: 8px;
			flex-wrap: wrap;
		}
			.admin-item-meta {
				font-size: 0.85rem;
				color: #999;
				display: flex;
				gap: 16px;
			}
			.admin-item-actions {
				display: flex;
				gap: 8px;
			}
			.admin-action-btn {
				padding: 8px 16px;
				border: none;
				border-radius: 8px;
				font-size: 0.85rem;
				font-weight: 500;
				cursor: pointer;
				transition: all 0.3s ease;
			}
			.btn-pin {
				background: #fff3cd;
				color: #856404;
			}
			.btn-pin:hover {
				background: #ffeaa7;
			}
			.btn-pin.pinned {
				background: #ffeaa7;
			}
		.btn-delete {
			background: #f8d7da;
			color: #721c24;
		}
		.btn-delete:hover {
			background: #f5c6cb;
		}
		.btn-edit {
			background: #d1ecf1;
			color: #0c5460;
		}
		.btn-edit:hover {
			background: #b8dae2;
		}
		.btn-manage {
			background: #d6d8f5;
			color: #383d9e;
		}
		.btn-manage:hover {
			background: #c1c4ef;
		}
		.btn-approve {
			background: #d4edda;
			color: #155724;
		}
		.btn-approve:hover {
			background: #c3e6cb;
		}
		.btn-reject {
			background: #f8d7da;
			color: #721c24;
		}
		.btn-reject:hover {
			background: #f5c6cb;
		}
			.pinned-badge {
				display: inline-block;
				padding: 2px 8px;
				background: #ffc107;
				color: #fff;
				border-radius: 4px;
				font-size: 0.7rem;
				font-weight: 600;
				margin-left: 8px;
				vertical-align: middle;
			}
			.user-role-badge {
				display: inline-block;
				padding: 2px 8px;
				background: #111;
				color: #fff;
				border-radius: 4px;
				font-size: 0.7rem;
				font-weight: 600;
				margin-left: 8px;
				vertical-align: middle;
			}
			.empty-state {
				text-align: center;
				padding: 60px 20px;
				color: #999;
			}
			/* 模态框样式 */
			.modal-overlay {
				position: fixed;
				inset: 0;
				background: rgba(0, 0, 0, 0.5);
				backdrop-filter: blur(4px);
				z-index: 1000;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20px;
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
				transition: opacity 0.3s ease, visibility 0.3s ease;
			}
			.modal-overlay.active {
				opacity: 1;
				visibility: visible;
				pointer-events: auto;
			}
			.modal {
				background: #fff;
				border-radius: 24px;
				width: 100%;
				max-width: 420px;
				padding: 40px;
				box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
				transform: translateY(20px);
				transition: transform 0.3s ease;
			}
			.modal-overlay.active .modal {
				transform: translateY(0);
			}
			.modal-title {
				font-size: 1.8rem;
				font-weight: 800;
				margin-bottom: 8px;
				color: #111;
			}
			.modal-subtitle {
				font-size: 0.9rem;
				color: #666;
				margin-bottom: 32px;
			}
			.form-group {
				margin-bottom: 20px;
			}
			.form-label {
				display: block;
				font-size: 0.85rem;
				font-weight: 500;
				color: #333;
				margin-bottom: 8px;
			}
			.form-input {
				width: 100%;
				padding: 14px 18px;
				border: 1px solid #e5e5e5;
				border-radius: 12px;
				font-size: 1rem;
				transition: border-color 0.3s ease;
				font-family: inherit;
			}
			.form-input:focus {
				outline: none;
				border-color: #111;
			}
			.form-submit {
				width: 100%;
				padding: 14px;
				background: #111;
				color: #fff;
				border: none;
				border-radius: 12px;
				font-size: 1rem;
				font-weight: 600;
				cursor: pointer;
				transition: background 0.3s ease;
				margin-top: 8px;
			}
			.form-submit:hover {
				background: #333;
			}
			.form-switch {
				text-align: center;
				margin-top: 20px;
				font-size: 0.9rem;
				color: #666;
			}
			.form-switch a {
				color: #111;
				font-weight: 500;
				text-decoration: none;
				cursor: pointer;
			}
			.form-switch a:hover {
				text-decoration: underline;
			}
			.form-error {
				color: #e53e3e;
				font-size: 0.85rem;
				margin-top: 8px;
				display: none;
			}
			.form-error.show {
				display: block;
			}
			.modal-close {
				position: absolute;
				top: 20px;
				right: 20px;
				background: none;
				border: none;
				font-size: 1.5rem;
				cursor: pointer;
				color: #999;
				transition: color 0.3s ease;
				width: 32px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
			}
			.modal-close:hover {
				color: #111;
				background: #f5f5f5;
			}
			.modal-container {
				position: relative;
			}

			/* 论坛区域样式 */
			.forum-section {
				padding: 140px 0;
				background: #fafafa;
			}
			.forum-container {
				max-width: 1000px;
				margin: 0 auto;
				padding: 0 40px;
			}
			.forum-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40px;
			}
			.new-post-btn {
				padding: 12px 28px;
				background: #111;
				color: #fff;
				border: none;
				border-radius: 99px;
				font-size: 0.95rem;
				font-weight: 600;
				cursor: pointer;
				transition: all 0.3s ease;
			}
			.new-post-btn:hover {
				background: #333;
				transform: translateY(-2px);
			}
			.new-post-btn:disabled {
				background: #ccc;
				cursor: not-allowed;
				transform: none;
			}
			.post-list {
				display: flex;
				flex-direction: column;
				gap: 16px;
			}
			.post-card {
				background: #fff;
				border-radius: 16px;
				padding: 28px;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				cursor: pointer;
				border: 1px solid #f0f0f0;
			}
			.post-card:hover {
				transform: translateY(-2px);
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
			}
		.post-meta {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 12px;
		}
		.post-author {
			font-weight: 600;
			color: #111;
			font-size: 0.95rem;
		}
		.post-time {
			font-size: 0.85rem;
			color: #999;
			margin-left: auto;
		}
			.post-title {
				font-size: 1.25rem;
				font-weight: 700;
				color: #111;
				margin-bottom: 10px;
				line-height: 1.4;
			}
			.post-excerpt {
				font-size: 0.95rem;
				color: #666;
				line-height: 1.6;
				margin-bottom: 16px;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.post-footer {
				display: flex;
				gap: 24px;
				font-size: 0.85rem;
				color: #999;
			}
			.post-footer span {
				display: flex;
				align-items: center;
				gap: 6px;
			}
			/* 帖子详情模态框 */
			.post-detail-modal .modal {
				max-width: 700px;
				max-height: 80vh;
				overflow-y: auto;
			}
			.post-detail-title {
				font-size: 1.8rem;
				font-weight: 800;
				margin-bottom: 12px;
				line-height: 1.3;
			}
		.post-detail-meta {
			display: flex;
			align-items: center;
			gap: 12px;
			font-size: 0.9rem;
			color: #666;
			margin-bottom: 24px;
			padding-bottom: 20px;
			border-bottom: 1px solid #eee;
			flex-wrap: wrap;
		}
		.post-detail-author {
			font-weight: 600;
			color: #111;
		}
		/* 帖子详情内管理员编辑入口 */
		.detail-edit-btn {
			margin-left: auto;
			padding: 5px 14px;
			border: 1px solid #d1ecf1;
			background: #e3f4f8;
			color: #0c5460;
			border-radius: 99px;
			font-size: 0.8rem;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		.detail-edit-btn:hover {
			background: #d1ecf1;
			border-color: #0c5460;
		}
			.post-detail-content {
				font-size: 1rem;
				line-height: 1.8;
				color: #333;
				margin-bottom: 32px;
				white-space: pre-wrap;
			}
			.reply-section {
				border-top: 1px solid #eee;
				padding-top: 24px;
			}
			.reply-title {
				font-size: 1.1rem;
				font-weight: 600;
				margin-bottom: 20px;
			}
			.reply-list {
				display: flex;
				flex-direction: column;
				gap: 16px;
				margin-bottom: 24px;
			}
			.reply-item {
				padding: 16px;
				background: #f9f9f9;
				border-radius: 12px;
			}
		.reply-meta {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 8px;
		}
		.reply-author {
			font-weight: 600;
			font-size: 0.9rem;
			color: #111;
		}
		.reply-time {
			font-size: 0.8rem;
			color: #999;
			margin-left: auto;
		}
		/* 回复行内管理员编辑入口 */
		.reply-edit-btn {
			padding: 2px 10px;
			border: 1px solid #d1ecf1;
			background: #e3f4f8;
			color: #0c5460;
			border-radius: 99px;
			font-size: 0.75rem;
			cursor: pointer;
			transition: all 0.3s ease;
			flex-shrink: 0;
		}
		.reply-edit-btn:hover {
			background: #d1ecf1;
			border-color: #0c5460;
		}
		/* ========== 管理员编辑帖子模态框 ========== */
		.edit-post-modal .modal {
			max-width: 700px;
			max-height: 85vh;
			overflow-y: auto;
		}
		/* ========== 管理员编辑回复模态框 ========== */
		.edit-reply-modal .modal {
			max-width: 560px;
		}
		/* ========== 管理员回复管理模态框 ========== */
		.reply-manage-modal .modal {
			max-width: 760px;
			max-height: 85vh;
			display: flex;
			flex-direction: column;
		}
		.reply-manage-list {
			overflow-y: auto;
			flex: 1;
		}
		.reply-manage-item {
			align-items: flex-start;
		}
		.reply-manage-author {
			font-size: 0.9rem;
		}
		.reply-manage-content {
			font-size: 0.92rem;
			color: #444;
			line-height: 1.6;
			margin: 8px 0;
			word-break: break-word;
		}
			.reply-content {
				font-size: 0.95rem;
				color: #444;
				line-height: 1.6;
			}
			.reply-form textarea {
				width: 100%;
				padding: 14px;
				border: 1px solid #e5e5e5;
				border-radius: 12px;
				font-size: 0.95rem;
				resize: vertical;
				min-height: 100px;
				font-family: inherit;
				margin-bottom: 12px;
			}
			.reply-form textarea:focus {
				outline: none;
				border-color: #111;
			}
			.reply-submit {
				padding: 10px 24px;
				background: #111;
				color: #fff;
				border: none;
				border-radius: 8px;
				font-size: 0.9rem;
				font-weight: 600;
				cursor: pointer;
				transition: background 0.3s ease;
			}
			.reply-submit:hover {
				background: #333;
			}
			.reply-submit:disabled {
				background: #ccc;
				cursor: not-allowed;
			}
			.no-posts {
				text-align: center;
				padding: 60px 20px;
				color: #999;
				font-size: 1rem;
			}
			/* 发帖模态框 */
			.new-post-modal .modal {
				max-width: 600px;
			}
			.new-post-modal textarea {
				width: 100%;
				padding: 14px;
				border: 1px solid #e5e5e5;
				border-radius: 12px;
				font-size: 0.95rem;
				resize: vertical;
				min-height: 180px;
				font-family: inherit;
			}
			.new-post-modal textarea:focus {
				outline: none;
				border-color: #111;
			}

			/* 移动端适配 */
			@media (max-width: 900px) {
				header {
					padding: 16px 20px;
				}
				header.scrolled {
					padding: 12px 20px;
				}
				.nav-menu {
					position: absolute;
					top: 100%;
					left: 0;
					width: 100%;
					flex-direction: column;
					gap: 0;
					background: rgba(255, 255, 255, 0.95);
					backdrop-filter: blur(12px);
					border-bottom: 1px solid #eee;
					max-height: 0;
					overflow: hidden;
					transition: max-height 0.3s ease;
				}
				.nav-menu.open {
					max-height: 300px;
				}
				.nav-menu a {
					padding: 16px 20px;
					border-bottom: 1px solid #f5f5f5;
				}
				.user-area {
					margin-right: 50px;
				}
				.auth-btn {
					padding: 6px 14px;
					font-size: 0.8rem;
				}
				.username {
					display: none;
				}
				.menu-btn {
					display: block;
				}
				.hero h1 {
					font-size: 14vw;
				}
				.announcement-card {
					width: 90vw;
					padding: 24px 22px;
					border-radius: 24px;
				}
				.announcement-card h3 {
					font-size: 1.2rem;
				}
				.announcement-card p {
					font-size: 0.95rem;
				}
				.section-title {
					font-size: 10vw;
				}
				.about-inner h2 {
					font-size: 8vw;
				}
				.contact-section h2 {
					font-size: 10vw;
				}
				/* 移动端改为上下排列 */
				.contact-section {
					flex-direction: column;
					gap: 30px;
				}
				.contact-logo {
					width: 160px;
					height: 160px;
					border-radius: 16px;
				}
				/* coser 区已改为卡片展台，旧拼贴规则移除 */
				.item-1,
				.item-2,
				.item-3,
				.item-4 {
					width: 100%;
					height: 280px;
				}
				.forum-container {
					padding: 0 20px;
				}
				.forum-header {
					flex-direction: column;
					align-items: flex-start;
					gap: 20px;
				}
				.new-post-btn {
					width: 100%;
				}
				.post-card {
					padding: 20px;
				}
				.post-title {
					font-size: 1.1rem;
				}
				.modal {
					padding: 28px 24px;
				}
				.post-detail-title {
					font-size: 1.4rem;
				}
			.admin-btn {
				display: none !important;
			}
			.center-btn {
				padding: 6px 10px;
				font-size: 0.72rem;
				margin-left: 4px;
			}
			.user-menu {
				gap: 6px;
			}
			.user-center-modal .modal {
				width: min(468px, calc(100vw - 32px));
				max-width: calc(100vw - 32px);
				max-height: calc(100vh - 24px);
				padding: 18px 16px 20px;
				border-radius: 20px;
			}
			.uc-topbar {
				margin-bottom: 12px;
			}
			.uc-head {
				gap: 12px;
			}
			.uc-avatar-wrap {
				width: 56px;
				height: 56px;
			}
			.uc-avatar-wrap::after {
				width: 17px;
				height: 17px;
				background-size: 9px 9px;
			}
			.uc-username {
				font-size: 1.12rem;
				margin-bottom: 6px;
			}
			.uc-meta-grid {
				margin-top: 14px;
				border-radius: 14px;
			}
			.uc-meta-item {
				padding: 9px 11px;
			}
			.uc-meta-label {
				font-size: 0.64rem;
			}
			.uc-meta-value {
				font-size: 0.8rem;
				gap: 4px;
			}
			.uc-meta-value .club-status-badge {
				font-size: 0.66rem;
				padding: 1px 7px;
			}
			.uc-meta-value .club-status-badge .club-badge {
				width: 13px;
				height: 13px;
			}
			.uc-actions {
				gap: 8px;
				margin-top: 14px;
			}
			.uc-home-btn {
				padding: 11px 14px;
				font-size: 0.88rem;
				border-radius: 13px;
			}
			.uc-action {
				padding: 11px 12px;
				font-size: 0.84rem;
			}
			.uid-badge {
				font-size: 0.68rem;
				padding: 1px 6px;
			}
			.admin-modal .modal {
				max-height: 90vh;
			}
				.admin-tabs {
					overflow-x: auto;
					padding-bottom: 12px;
				}
				.admin-tab {
					padding: 8px 16px;
					font-size: 0.9rem;
					white-space: nowrap;
				}
				.admin-item {
					flex-direction: column;
					align-items: flex-start;
					gap: 12px;
				}
				.admin-item-actions {
					width: 100%;
					flex-wrap: wrap;
				}
				.admin-action-btn {
					flex: 1;
				}
			}

/* ========== 模块化拆分新增样式（论坛独立页 forum.html） ========== */
a.logo {
	color: #111111;
	text-decoration: none;
}
/* 当前页面导航高亮 */
.nav-menu a.active {
	opacity: 1;
}
.nav-menu a.active::after {
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	background: #111111;
	border-radius: 50%;
	margin: 5px auto 0;
}
/* 论坛独立页整体 */
.forum-page {
	min-height: 100vh;
	background: #fafafa;
}
.forum-hero {
	padding: 150px 40px 56px;
	background: #ffffff;
	border-bottom: 1px solid #f0f0f0;
}
.forum-hero-inner {
	max-width: 1000px;
	margin: 0 auto;
}
.back-home {
	display: inline-block;
	font-size: 0.88rem;
	color: #111111;
	text-decoration: none;
	opacity: 0.55;
	margin-bottom: 40px;
	transition: opacity 0.3s ease;
}
.back-home:hover {
	opacity: 1;
}
.forum-subtitle {
	color: #666666;
	font-size: 0.95rem;
	margin-top: 12px;
}
.forum-page .forum-section {
	padding: 56px 0 140px;
}
@media (max-width: 900px) {
	.forum-hero {
		padding: 108px 24px 40px;
	}
	.forum-page .forum-section {
		padding: 32px 0 90px;
	}
	.back-home {
		margin-bottom: 28px;
	}
}

/* ============================================================
   社团成员认证：小圆图标 / 认证弹窗 / 认证状态徽章
   ============================================================ */

/* 社团认证小圆图标（帖子/回复/用户列表的用户名旁） */
.club-badge {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	margin-left: 6px;
	vertical-align: middle;
	border: 1px solid rgba(0, 0, 0, 0.15);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	background: #fff;
}

/* 导航栏用户菜单中的认证图标（略小） */
.nav-club-badge {
	display: inline-flex;
	align-items: center;
}
.nav-club-badge .club-badge {
	width: 16px;
	height: 16px;
	margin-left: 2px;
	margin-right: 2px;
}

/* 管理后台用户列表中的认证图标与状态徽章 */
.admin-item-title .club-badge {
	width: 18px;
	height: 18px;
}

/* 社团认证弹窗：背景加强虚化 + 居中 */
.club-modal {
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.club-modal-box {
	max-width: 380px;
	text-align: center;
	padding: 48px 40px 36px;
}
.club-modal-icon {
	width: 88px;
	height: 88px;
	margin: 0 auto 20px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	background: #111;
}
.club-modal-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.club-modal .modal-subtitle {
	margin-bottom: 28px;
	line-height: 1.7;
}
.club-modal-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
}
.club-modal-btn {
	flex: 1;
	padding: 13px 20px;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	background: #fff;
	color: #333;
	font-size: 0.95rem;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.3s ease;
}
.club-modal-btn:hover {
	border-color: #bbb;
	background: #fafafa;
}
.club-modal-btn-primary {
	background: #111;
	border-color: #111;
	color: #fff;
}
.club-modal-btn-primary:hover {
	background: #333;
	border-color: #333;
}
.club-modal-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 社团认证状态徽章（用户中心/管理后台） */
.club-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 12px;
	border-radius: 99px;
	font-size: 0.78rem;
	font-weight: 600;
	vertical-align: middle;
}
.club-status-badge .club-badge {
	width: 15px;
	height: 15px;
	margin-left: 0;
}
.club-status-badge.verified {
	background: #e8f5e9;
	color: #1b5e20;
}
.club-status-badge.applied {
	background: #fff8e1;
	color: #8d6e00;
}
.club-status-badge.rejected {
	background: #fce4ec;
	color: #ad1457;
}
.club-status-badge.none {
	background: #f0f0f0;
	color: #777;
}

/* ============================================================
   用户称号：极简金属微标（发丝描边 · 单色 · 微菱形）
   ============================================================ */
.title-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 18px;
	padding: 0 7px 0 6px;
	margin-left: 7px;
	border: 1px solid #141414;
	border-radius: 4px;
	background: linear-gradient(180deg, #262626 0%, #111111 100%);
	color: #ffffff;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.title-badge::before {
	content: "";
	width: 3.5px;
	height: 3.5px;
	flex: 0 0 auto;
	background: linear-gradient(180deg, #ffffff 0%, #c9c9c9 100%);
	transform: rotate(45deg);
	opacity: 0.9;
}
/* 帖子/回复作者行的称号徽章（略大） */
.post-author .title-badge,
.post-detail-author .title-badge,
.reply-author .title-badge {
	height: 19px;
	padding: 0 8px 0 7px;
	font-size: 0.7rem;
}
/* 导航栏用户名旁称号 */
.nav-title-badge {
	display: inline-flex;
	align-items: center;
}
.nav-title-badge .title-badge {
	height: 17px;
	padding: 0 6px 0 5px;
	margin-left: 2px;
	font-size: 0.66rem;
	gap: 4px;
}
/* 管理后台「称号」操作按钮 */
.btn-title {
	background: #ffffff;
	color: #1f1f1f;
	border: 1px solid rgba(17, 17, 17, 0.14);
}
.btn-title:hover {
	background: #f5f5f5;
	border-color: rgba(17, 17, 17, 0.3);
}

/* 移动端适配：认证弹窗按钮纵向排列 */
@media (max-width: 480px) {
	.club-modal-actions {
		flex-direction: column;
	}
	.club-modal-box {
		padding: 40px 28px 30px;
	}
}

/* 社团认证答题区 */
.club-quiz {
	margin-bottom: 24px;
	text-align: center;
}
.club-quiz-question {
	font-size: 1rem;
	font-weight: 600;
	color: #111;
	margin-bottom: 14px;
}
.club-quiz-input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	font-size: 0.95rem;
	font-family: inherit;
	text-align: center;
	box-sizing: border-box;
	background: #fff;
	color: #111;
	transition: border-color 0.3s ease;
}
.club-quiz-input:focus {
	outline: none;
	border-color: #111;
}
.club-quiz .form-error {
	text-align: left;
	margin-top: 10px;
}

/* ============================================================
   图片灯箱：白色毛玻璃 + 3D 卡片（可移动 / 旋转 / 缩放）
   ============================================================ */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.58);
	backdrop-filter: blur(32px) saturate(150%);
	-webkit-backdrop-filter: blur(32px) saturate(150%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	transition: opacity 0.34s ease, visibility 0.34s ease;
}
/* 白色柔光罩：让虚化更有层次，不会糊成一片 */
.lightbox::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(58% 52% at 50% 44%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.12) 62%, rgba(255, 255, 255, 0.42) 100%);
	pointer-events: none;
}
.lightbox.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
/* 3D 舞台：透视点略高于中心，卡片转动时更自然 */
.lb-stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1500px;
	perspective-origin: 50% 46%;
	pointer-events: none;
}
.lb-card {
	pointer-events: auto;
	display: flex;
	max-width: 92vw;
	max-height: 78vh;
	padding: 8px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow:
		0 48px 96px -38px rgba(17, 17, 17, 0.52),
		0 16px 38px -20px rgba(17, 17, 17, 0.26),
		0 0 0 1px rgba(17, 17, 17, 0.05);
	transform-style: preserve-3d;
	will-change: transform;
	cursor: grab;
	touch-action: none;
	position: relative;
	z-index: 2;
}
.lb-card.is-grabbing {
	cursor: grabbing;
}
.lb-card.is-rotating {
	cursor: crosshair;
}
.lightbox-img {
	display: block;
	max-width: calc(92vw - 16px);
	max-height: calc(78vh - 16px);
	object-fit: contain;
	border-radius: 10px;
	background: #ffffff;
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}
/* 操作提示 */
.lb-hint {
	position: absolute;
	left: 50%;
	top: 24px;
	transform: translateX(-50%);
	padding: 5px 13px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.64);
	border: 1px solid rgba(17, 17, 17, 0.05);
	box-shadow: 0 6px 18px -12px rgba(17, 17, 17, 0.4);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #6d6d6d;
	font-size: 0.73rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
	pointer-events: none;
	z-index: 3;
}
/* 底部工具条 */
.lb-tools {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.76);
	border: 1px solid rgba(17, 17, 17, 0.07);
	box-shadow: 0 14px 34px -18px rgba(17, 17, 17, 0.42);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	z-index: 3;
}
.lb-tool {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #111111;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.lb-tool:hover {
	background: #111111;
	color: #ffffff;
}
.lb-tool:active {
	transform: scale(0.93);
}
.lb-tool-text {
	width: auto;
	padding: 0 14px;
	border-radius: 99px;
	font-size: 0.78rem;
	font-weight: 600;
}
/* 右上角关闭 */
.lightbox-close {
	position: absolute;
	top: 22px;
	right: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(17, 17, 17, 0.07);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 10px 24px -14px rgba(17, 17, 17, 0.45);
	color: #111111;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, transform 0.3s ease;
	z-index: 4;
}
.lightbox-close:hover {
	background: #111111;
	color: #ffffff;
	transform: rotate(90deg);
}

/* ============================================================
   论坛帖子配图
   ============================================================ */
.post-images {
	display: grid;
	gap: 10px;
	margin: 16px 0;
}
.post-images.single {
	grid-template-columns: 1fr;
	max-width: 520px;
}
.post-images.double {
	grid-template-columns: repeat(2, 1fr);
}
.post-images.triple {
	grid-template-columns: repeat(3, 1fr);
}
.post-image-item {
	border-radius: 14px;
	overflow: hidden;
	background: #f2f2f2;
	aspect-ratio: 4 / 3;
}
.post-image-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: zoom-in;
	transition: transform 0.5s ease;
}
.post-image-item img:hover {
	transform: scale(1.04);
}
/* 帖子列表中的配图缩略 */
.post-card-thumbs {
	display: flex;
	gap: 8px;
	margin: 12px 0 4px;
	flex-wrap: wrap;
}
.post-card-thumbs img {
	width: 120px;
	height: 90px;
	object-fit: cover;
	border-radius: 10px;
	cursor: zoom-in;
	border: 1px solid rgba(0, 0, 0, 0.06);
	transition: transform 0.4s ease;
}
.post-card-thumbs img:hover {
	transform: translateY(-2px);
}

/* ============================================================
   发帖图片上传（最多3张，上传前压缩）
   ============================================================ */
.post-image-upload {
	display: flex;
	align-items: center;
	gap: 12px;
}
.image-upload-btn {
	padding: 10px 20px;
	border: 1px dashed #bbb;
	border-radius: 12px;
	background: #fafafa;
	color: #333;
	font-size: 0.9rem;
	cursor: pointer;
	transition: border-color 0.3s ease, background 0.3s ease;
}
.image-upload-btn:hover:not(:disabled) {
	border-color: #111;
	background: #f2f2f2;
}
.image-upload-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.image-upload-tip {
	font-size: 0.8rem;
	color: #999;
}
.post-image-preview {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.post-image-preview:empty {
	display: none;
}
.image-preview-item {
	position: relative;
	width: 110px;
	height: 84px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #e5e5e5;
}
.image-preview-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.image-preview-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.image-preview-remove:hover {
	background: rgba(0, 0, 0, 0.8);
}

/* ============================================================
   论坛页顶部公告条
   ============================================================ */
.forum-announcement {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding: 12px 18px;
	background: rgba(17, 17, 17, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 14px;
	font-size: 0.9rem;
	flex-wrap: wrap;
}
.forum-announcement-label {
	flex-shrink: 0;
	padding: 2px 10px;
	border-radius: 99px;
	background: #111;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
}
.forum-announcement-title {
	font-weight: 700;
	color: #111;
}
.forum-announcement-content {
	color: #555;
	line-height: 1.6;
}

/* ============================================================
   用户主页
   ============================================================ */
.user-page {
	padding: 140px 0 80px;
	background: #fafafa;
	min-height: 70vh;
}
.user-page-inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 40px;
}
.user-profile-card {
	background: #ffffff;
	border-radius: 24px;
	padding: 40px;
	display: flex;
	align-items: center;
	gap: 28px;
	box-shadow: 0 2px 6px rgba(17, 17, 17, 0.05), 0 20px 50px -18px rgba(17, 17, 17, 0.14);
	margin-bottom: 48px;
	flex-wrap: wrap;
}
.user-profile-avatar .forum-avatar {
	width: 96px !important;
	height: 96px !important;
	font-size: 2.4rem;
}
.user-profile-info {
	flex: 1;
	min-width: 220px;
}
.user-profile-name {
	font-size: 1.5rem;
	font-weight: 800;
	color: #111;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
}
.user-profile-meta {
	display: flex;
	gap: 24px;
	margin-top: 12px;
	color: #666;
	font-size: 0.9rem;
	flex-wrap: wrap;
}
.user-posts-title {
	font-size: 1.3rem;
	font-weight: 800;
	color: #111;
	margin-bottom: 24px;
}

/* ============================================================
   账号状态徽章（禁言 / 封禁）
   ============================================================ */
.account-status-badge {
	display: inline-block;
	padding: 2px 10px;
	margin-left: 8px;
	border-radius: 99px;
	font-size: 0.72rem;
	font-weight: 600;
	vertical-align: middle;
	white-space: nowrap;
}
.account-status-badge.banned {
	background: #fde8e8;
	color: #c53030;
	border: 1px solid #f5b5b5;
}
.account-status-badge.muted {
	background: #fff4e0;
	color: #b7791f;
	border: 1px solid #f0d9a8;
}
.account-status-badge.normal {
	background: #f0f0f0;
	color: #666666;
	border: 1px solid #e0e0e0;
}
.nav-status-badge {
	display: inline-flex;
	align-items: center;
}
.nav-status-badge .account-status-badge {
	font-size: 0.68rem;
	padding: 1px 8px;
	margin-left: 2px;
}

/* ============================================================
   管理员后台：禁言/封禁/改密码按钮 + 公告编辑器
   ============================================================ */
.btn-mute {
	background: #fff4e0;
	color: #b7791f;
	border: 1px solid #f0d9a8;
}
.btn-mute:hover {
	background: #ffe9c7;
	border-color: #d9b06a;
}
.btn-unmute {
	background: #f0f0f0;
	color: #666666;
	border: 1px solid #dcdcdc;
}
.btn-unmute:hover {
	background: #e6e6e6;
	border-color: #bbb;
}
.btn-ban {
	background: #fde8e8;
	color: #c53030;
	border: 1px solid #f5b5b5;
}
.btn-ban:hover {
	background: #fbd5d5;
	border-color: #e08585;
}
.btn-unban {
	background: #e8f5e9;
	color: #2f7d32;
	border: 1px solid #bfe3c1;
}
.btn-unban:hover {
	background: #d7eed9;
	border-color: #93cc97;
}
.btn-password {
	background: #eef2ff;
	color: #3b5bdb;
	border: 1px solid #c7d2fe;
}
.btn-password:hover {
	background: #e0e7ff;
	border-color: #a5b8fc;
}
.announcement-editor {
	padding: 8px 0;
}
.announcement-editor-tip {
	font-size: 0.85rem;
	color: #999;
	margin-bottom: 16px;
}
.announcement-editor textarea {
	width: 100%;
	min-height: 140px;
	padding: 14px 18px;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	font-size: 1rem;
	font-family: inherit;
	resize: vertical;
	box-sizing: border-box;
}
.announcement-editor textarea:focus {
	outline: none;
	border-color: #111;
}

/* ============================================================
   用户中心修改密码表单
   ============================================================ */
.uc-password-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}
.uc-password-form input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	font-size: 0.9rem;
	outline: none;
	transition: border-color 0.3s ease;
	box-sizing: border-box;
}
.uc-password-form input:focus {
	border-color: #111;
}

/* ============================================================
   发帖人主页链接
   ============================================================ */
.user-link {
	color: #111;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px dashed transparent;
	transition: border-color 0.3s ease;
	cursor: pointer;
}
.user-link:hover {
	border-bottom-color: #111;
}

/* 移动端适配 */
@media (max-width: 640px) {
	.post-images.triple {
		grid-template-columns: repeat(2, 1fr);
	}
	.user-profile-card {
		padding: 28px;
		gap: 18px;
	}
	.user-page-inner {
		padding: 0 20px;
	}
	.forum-announcement {
		font-size: 0.85rem;
	}
}

/* ============================================================
   消息通知（铃铛 + 下拉面板）
   ============================================================ */
.nav-notify {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(17, 17, 17, 0.12);
	background: #ffffff;
	border-radius: 50%;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.nav-notify:hover {
	background: #f4f4f4;
	border-color: rgba(17, 17, 17, 0.28);
}
.nav-notify:active {
	transform: scale(0.94);
}
.notif-bell {
	font-size: 1.1rem;
	line-height: 1;
}
.notif-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 99px;
	background: #e23b3b;
	color: #ffffff;
	font-size: 0.68rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: 0 0 0 2px #ffffff;
	z-index: 2;
}
.notif-panel {
	position: fixed;
	top: 64px;
	right: 20px;
	width: 360px;
	max-width: calc(100vw - 32px);
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 16px;
	box-shadow: 0 14px 44px -14px rgba(0, 0, 0, 0.28);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	overflow: hidden;
}
.notif-panel.open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.notif-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid #f2f2f2;
	font-weight: 700;
	color: #111111;
	font-size: 0.95rem;
}
.notif-unread {
	font-size: 0.78rem;
	color: #e23b3b;
	font-weight: 600;
}
.notif-list {
	max-height: 380px;
	overflow-y: auto;
}
.notif-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 18px;
	border-bottom: 1px solid #f5f5f5;
	text-decoration: none;
	color: #222222;
	transition: background 0.2s ease;
}
.notif-item:hover {
	background: #fafafa;
}
.notif-item.unread {
	background: #fff8f6;
	box-shadow: inset 3px 0 0 #e23b3b;
}
.notif-icon {
	font-size: 1.1rem;
	line-height: 1.4;
	flex-shrink: 0;
}
.notif-text {
	flex: 1;
	font-size: 0.88rem;
	line-height: 1.5;
	word-break: break-word;
}
.notif-time {
	font-size: 0.72rem;
	color: #aaaaaa;
	flex-shrink: 0;
	white-space: nowrap;
	align-self: center;
}
.notif-empty {
	padding: 44px 18px;
	text-align: center;
	color: #aaaaaa;
	font-size: 0.9rem;
}
.notif-panel-foot {
	padding: 12px 18px;
	border-top: 1px solid #f2f2f2;
}
.notif-read-all {
	width: 100%;
	padding: 10px;
	border: 1px solid #eeeeee;
	background: #ffffff;
	border-radius: 10px;
	cursor: pointer;
	font-size: 0.85rem;
	color: #444444;
	transition: background 0.2s ease;
}
.notif-read-all:hover {
	background: #f6f6f6;
}

/* ============================================================
   点赞按钮（帖子 / 回复，事件委托）
   ============================================================ */
.like-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid rgba(17, 17, 17, 0.14);
	background: #ffffff;
	border-radius: 99px;
	padding: 5px 13px;
	cursor: pointer;
	font-size: 0.85rem;
	color: #555555;
	font-weight: 500;
	transition: all 0.25s ease;
	line-height: 1.2;
}
.like-btn:hover {
	border-color: #e23b3b;
	color: #e23b3b;
}
.like-btn[data-liked="true"] {
	border-color: #e23b3b;
	color: #e23b3b;
	background: #fff0f0;
}
.like-icon {
	font-size: 1rem;
	line-height: 1;
	transition: transform 0.2s ease;
}
.like-btn[data-liked="true"] .like-icon {
	transform: scale(1.15);
}
.like-count {
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   论坛头像链接（点击头像进入用户主页）
   ============================================================ */
a.forum-avatar-link {
	display: inline-flex;
	text-decoration: none;
	color: inherit;
}
a.forum-avatar-link .forum-avatar {
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.forum-avatar-link:hover .forum-avatar {
	transform: scale(1.05);
	box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.15);
}

/* ============================================================
   用户主页封面（背景图） + 更换背景按钮
   ============================================================ */
.user-profile-cover {
	position: relative;
	height: 240px;
	border-radius: 24px;
	margin-bottom: -56px;
	background: linear-gradient(135deg, #e9ecef 0%, #d6dbe1 100%);
	background-size: cover;
	background-position: center;
	box-shadow: 0 2px 6px rgba(17, 17, 17, 0.05), 0 20px 50px -18px rgba(17, 17, 17, 0.14);
	overflow: hidden;
	transition: background-image 0.4s ease;
}
.user-profile-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%);
	pointer-events: none;
}
.profile-bg-btn {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	padding: 8px 16px;
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	border: none;
	border-radius: 99px;
	font-size: 0.82rem;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background 0.25s ease;
}
.profile-bg-btn:hover {
	background: rgba(0, 0, 0, 0.78);
}

/* ============================================================
   关于网站（独立页）
   ============================================================ */
.about-page {
	padding: 140px 0 80px;
	background: #fafafa;
	min-height: 70vh;
}
.about-page-inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 40px;
	text-align: center;
}
.about-page-title {
	font-size: 2.6rem;
	font-weight: 800;
	color: #111111;
	margin: 8px 0 16px;
}
.about-page-intro {
	color: #666666;
	max-width: 680px;
	margin: 0 auto 48px;
	font-size: 1.05rem;
	line-height: 1.7;
}
.about-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 56px;
}
.stat-card {
	background: #ffffff;
	border-radius: 20px;
	padding: 38px 24px;
	box-shadow: 0 2px 6px rgba(17, 17, 17, 0.05), 0 20px 50px -18px rgba(17, 17, 17, 0.14);
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(17, 17, 17, 0.08), 0 30px 60px -18px rgba(17, 17, 17, 0.22);
}
.stat-icon {
	font-size: 2rem;
	margin-bottom: 12px;
}
.stat-label {
	color: #888888;
	font-size: 0.9rem;
	margin-bottom: 8px;
}
.stat-value {
	font-size: 1.5rem;
	font-weight: 800;
	color: #111111;
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}
.about-page-detail {
	max-width: 680px;
	margin: 0 auto;
	text-align: left;
	background: #ffffff;
	border-radius: 20px;
	padding: 32px;
	box-shadow: 0 2px 6px rgba(17, 17, 17, 0.05);
}
.about-page-detail h2 {
	font-size: 1.3rem;
	margin-bottom: 16px;
	color: #111111;
}
.about-page-detail ul {
	list-style: none;
}
.about-page-detail li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid #f2f2f2;
	color: #444444;
	font-size: 0.95rem;
}
.about-page-detail li:last-child {
	border-bottom: none;
}
.about-page-detail li span {
	color: #999999;
	flex-shrink: 0;
}
.about-back-btn {
	display: inline-block;
	padding: 12px 28px;
	border: 1px solid #111111;
	border-radius: 99px;
	color: #111111;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
}
.about-back-btn:hover {
	background: #111111;
	color: #ffffff;
}

/* ============================================================
   图片懒加载淡入（data-fade）
   ============================================================ */
img[data-fade] {
	opacity: 0;
	transition: opacity 0.6s ease;
}
img[data-fade].loaded {
	opacity: 1;
}

/* ============================================================
   移动端适配（新增组件）
   ============================================================ */
@media (max-width: 900px) {
	.nav-notify {
		width: 36px;
		height: 36px;
	}
	.notif-bell {
		font-size: 1rem;
	}
	.notif-panel {
		top: 60px;
		right: 16px;
		left: 16px;
		width: auto;
		max-width: none;
	}
	.user-profile-cover {
		height: 180px;
		margin-bottom: -48px;
	}
	.about-page {
		padding: 120px 0 64px;
	}
	.about-page-inner {
		padding: 0 22px;
	}
	.about-page-title {
		font-size: 2rem;
	}
	.about-stats {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.stat-card {
		padding: 28px 22px;
	}
	.about-page-detail {
		padding: 24px;
	}
}

@media (max-width: 480px) {
	.like-btn {
		padding: 4px 10px;
		font-size: 0.8rem;
	}
	.like-icon {
		font-size: 0.95rem;
	}
	.profile-bg-btn {
		top: 12px;
		right: 12px;
		padding: 7px 13px;
		font-size: 0.78rem;
	}
	.about-page-title {
		font-size: 1.7rem;
	}
	.about-page-intro {
		font-size: 0.95rem;
	}
	.notif-panel {
		top: 56px;
		right: 10px;
		left: 10px;
	}
	.notif-item {
		padding: 12px 14px;
	}
}

/* ============================================================
   用户主页：头像叠加在封面背景图之上（经典个人主页层次）
   ============================================================ */
.user-profile-cover {
	height: 260px;
	/* 负值让资料卡上移，使头像压在封面之上形成层次 */
	margin-bottom: -48px;
}
.user-profile-card {
	position: relative;
	display: block;
	/* 左侧留出头像所在列，文字不与头像重叠 */
	padding: 26px 32px 26px 152px;
}
.user-profile-avatar {
	position: absolute;
	left: 32px;
	top: -68px;
	z-index: 3;
	line-height: 0;
}
.user-profile-avatar .forum-avatar {
	width: 96px !important;
	height: 96px !important;
	font-size: 2.1rem;
	background: #f5f5f5;
	/* 白描边让头像在任意背景图上都能清晰立住 */
	box-shadow: 0 0 0 4px #ffffff, 0 12px 26px -10px rgba(0, 0, 0, 0.3);
}
.user-profile-avatar a.forum-avatar-link .forum-avatar {
	cursor: default;
}

/* ============================================================
   删除帖子：胶囊按钮 + 自定义确认弹窗 + 顶部提示（替代原生 UI）
   ============================================================ */
.post-del-btn {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 13px;
	border: 1px solid #ececec;
	background: #ffffff;
	border-radius: 99px;
	font-size: 0.8rem;
	font-weight: 500;
	color: #9a9a9a;
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease,
		background 0.25s ease, transform 0.2s ease;
}
.post-del-btn:hover {
	border-color: #f3b8b8;
	background: #fff4f4;
	color: #d93a3a;
}
.post-del-btn:active {
	transform: scale(0.96);
}
.post-del-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}
.post-del-btn .del-icon {
	font-size: 0.82rem;
	line-height: 1;
}

/* 自定义确认弹窗 */
.confirm-modal .modal {
	max-width: 420px;
	padding: 34px 32px 26px;
	text-align: center;
	border-radius: 26px;
}
.confirm-icon {
	width: 58px;
	height: 58px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #fff2f2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.45rem;
}
.confirm-title {
	font-size: 1.22rem;
	font-weight: 800;
	color: #111111;
	margin-bottom: 10px;
}
.confirm-body {
	font-size: 0.9rem;
	color: #666666;
	line-height: 1.65;
	margin-bottom: 22px;
}
.confirm-quote {
	background: #f7f7f7;
	border-radius: 10px;
	padding: 10px 14px;
	color: #333333;
	font-size: 0.88rem;
	margin-bottom: 12px;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.confirm-warn {
	color: #a33;
	font-size: 0.85rem;
	margin: 0;
}
.confirm-actions {
	display: flex;
	gap: 12px;
}
.confirm-cancel,
.confirm-ok {
	flex: 1;
	padding: 12px 10px;
	border-radius: 12px;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease,
		color 0.25s ease, transform 0.15s ease;
}
.confirm-cancel {
	border: 1px solid #e5e5e5;
	background: #ffffff;
	color: #555555;
}
.confirm-cancel:hover {
	background: #f6f6f6;
	border-color: #d8d8d8;
}
.confirm-ok {
	border: 1px solid #111111;
	background: #111111;
	color: #ffffff;
}
.confirm-ok:hover {
	background: #333333;
	border-color: #333333;
}
.confirm-ok.danger {
	background: #d93a3a;
	border-color: #d93a3a;
}
.confirm-ok.danger:hover {
	background: #b92c2c;
	border-color: #b92c2c;
}
.confirm-cancel:active,
.confirm-ok:active {
	transform: scale(0.98);
}

/* 顶部轻量提示 Toast */
.toast-wrap {
	position: fixed;
	top: 92px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10000;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	pointer-events: none;
}
.toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	background: rgba(17, 17, 17, 0.92);
	color: #ffffff;
	border-radius: 99px;
	font-size: 0.88rem;
	font-weight: 500;
	box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(8px);
	opacity: 0;
	transform: translateY(-14px) scale(0.96);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	white-space: nowrap;
}
.toast.show {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.toast-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 0.72rem;
	font-weight: 700;
	flex-shrink: 0;
}
.toast-success .toast-ico {
	background: rgba(74, 222, 128, 0.18);
	color: #6ee7a0;
}
.toast-error .toast-ico {
	background: rgba(248, 113, 113, 0.18);
	color: #f8a0a0;
}
.toast-info .toast-ico {
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff;
}

/* ============================================================
   全模块加载动效：环形加载器 + 骨架屏（灰度 shimmer，克制不抢戏）
   ============================================================ */
.mod-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 36px 12px;
	color: #aaaaaa;
	font-size: 0.88rem;
}
.mod-spinner {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #ececec;
	border-top-color: #111111;
	animation: modSpin 0.75s linear infinite;
	flex-shrink: 0;
}
.mod-spinner-sm {
	width: 14px;
	height: 14px;
	border-width: 2px;
}
@keyframes modSpin {
	to {
		transform: rotate(360deg);
	}
}

.skel {
	display: block;
	background: linear-gradient(90deg, #f1f1f1 25%, #e6e6e6 37%, #f1f1f1 63%);
	background-size: 400% 100%;
	animation: skelShine 1.4s ease infinite;
	border-radius: 8px;
}
@keyframes skelShine {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}
.skel-line {
	height: 14px;
	width: 100%;
}
.skel-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
}
.skel-inline {
	display: inline-block;
	vertical-align: middle;
	height: 0.7em;
	border-radius: 6px;
}
/* 宽度/高度工具类放在 .skel-line 之后以覆盖默认值 */
.w50 { width: 50px; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w85 { width: 85%; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w110 { width: 110px; }
.w120 { width: 120px; }
.w130 { width: 130px; }
.w140 { width: 140px; }
.w150 { width: 150px; }
.w160 { width: 160px; }
.w200 { width: 200px; }
.w220 { width: 220px; }
.h12 { height: 12px; }
.h20 { height: 20px; }
.h22 { height: 22px; }
.h26 { height: 26px; }

.skel-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.skel-row.gap {
	gap: 24px;
}
.skel-row.mt {
	margin-top: 16px;
	margin-bottom: 0;
}
.skel-card {
	cursor: default;
}
.skel-card:hover {
	transform: none;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.skel-card .skel-line {
	margin-bottom: 10px;
}
.skel-card .skel-row .skel-line {
	margin-bottom: 0;
}
.skel-profile .skel-line {
	margin-bottom: 12px;
}

/* ============================================================
   移动端适配（本轮新增组件）
   ============================================================ */
@media (max-width: 900px) {
	.user-profile-cover {
		height: 200px;
		margin-bottom: -44px;
	}
	.user-profile-card {
		padding: 24px 28px 24px 132px;
	}
	.user-profile-avatar {
		left: 28px;
		top: -58px;
	}
}

@media (max-width: 640px) {
	.user-profile-cover {
		height: 168px;
		margin-bottom: -40px;
	}
	.user-profile-card {
		display: block;
		padding: 58px 20px 24px;
		text-align: center;
	}
	.user-profile-avatar {
		left: 50%;
		margin-left: -36px;
		top: -52px;
	}
	.user-profile-avatar .forum-avatar {
		width: 72px !important;
		height: 72px !important;
		font-size: 1.7rem;
	}
	.user-profile-name {
		justify-content: center;
	}
	.user-profile-meta {
		justify-content: center;
		gap: 16px;
	}
	.profile-manage-hint {
		text-align: center;
	}
	.toast-wrap {
		top: 80px;
	}
	.toast {
		font-size: 0.84rem;
		padding: 10px 16px;
	}
	.confirm-modal .modal {
		padding: 28px 22px 22px;
	}
}

/* ============================================================
   一、导航栏统一改版（四页共用同一结构：logo / 胶囊导航 / 用户区）
   ============================================================ */
#header {
	padding: 14px clamp(16px, 3vw, 40px);
	gap: 20px;
	transition: background 0.35s ease, padding 0.35s ease,
		box-shadow 0.35s ease, border-color 0.35s ease;
}
/* 顶部不再保留整条白色背景：header 始终透明，
   可读性由每个模块自带的独立胶囊（半透明磨砂白）保证 */
#header.scrolled {
	padding: 10px clamp(16px, 3vw, 40px);
	background: transparent;
	border-bottom: none;
	box-shadow: none;
}

/* Logo：方块字标 + 字距文本，本身也是一个独立胶囊 */
#header .logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 4px 15px 4px 4px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.74);
	border: 1px solid rgba(17, 17, 17, 0.07);
	box-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #111111;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.25s ease, border-color 0.25s ease,
		box-shadow 0.25s ease, transform 0.25s ease;
}
#header.scrolled .logo {
	background: rgba(255, 255, 255, 0.9);
}
#header .logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: #111111;
	color: #ffffff;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
#header .logo:hover .logo-mark {
	transform: rotate(-8deg) scale(1.06);
}
#header .logo-text {
	opacity: 0.78;
}

/* 导航：容器完全透明，每一项各自一个独立胶囊 */
#header .nav-menu {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	border-radius: 0;
	background: transparent;
	border: 0;
	flex-shrink: 0;
	transition: none;
}
#header .nav-menu a {
	position: relative;
	padding: 8px 15px;
	border-radius: 99px;
	font-size: 0.85rem;
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
	color: #4f4f4f;
	opacity: 1;
	background: rgba(255, 255, 255, 0.74);
	border: 1px solid rgba(17, 17, 17, 0.07);
	box-shadow: 0 8px 20px -18px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	transition: color 0.25s ease, background 0.25s ease,
		border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
#header.scrolled .nav-menu a {
	background: rgba(255, 255, 255, 0.9);
}
#header .nav-menu a::after {
	display: none !important; /* 去掉旧版小圆点 */
}
#header .nav-menu a:hover {
	color: #111111;
	background: #ffffff;
	border-color: rgba(17, 17, 17, 0.12);
	box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.5);
	transform: translateY(-1px);
}
#header .nav-menu a.active {
	color: #ffffff;
	background: #111111;
	border-color: #111111;
	box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.85);
	transform: none;
}

/* 用户区：保留独立的用户胶囊 + 通知圆胶囊 */
#header .user-area {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
#header .user-menu {
	gap: 6px;
	padding: 4px 4px 4px 10px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.76);
	border: 1px solid rgba(17, 17, 17, 0.07);
	box-shadow: 0 8px 20px -18px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
}
#header.scrolled .user-menu {
	background: rgba(255, 255, 255, 0.9);
}
#header .user-menu .username {
	font-size: 0.85rem;
	font-weight: 600;
	color: #111111;
}
#header .nav-avatar {
	width: 28px;
	height: 28px;
	border: none;
	box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#header .center-btn,
#header .admin-btn {
	margin-left: 0;
	padding: 6px 12px;
	font-size: 0.8rem;
	border: 1px solid rgba(17, 17, 17, 0.1);
	background: rgba(17, 17, 17, 0.05);
	color: #4a4a4a;
}
#header .center-btn:hover {
	background: #111111;
	border-color: #111111;
	color: #ffffff;
}
#header .admin-btn {
	background: #111111;
	border-color: #111111;
	color: #ffffff;
}
#header .admin-btn:hover {
	background: #333333;
	border-color: #333333;
	color: #ffffff;
}
#header .auth-btn {
	padding: 7px 16px;
	font-size: 0.82rem;
	border-color: rgba(17, 17, 17, 0.12);
	background: rgba(255, 255, 255, 0.76);
	color: #333333;
	box-shadow: 0 8px 20px -18px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
}
/* 滚动态只加深普通按钮的不透明度，避免盖掉「注册」主按钮的黑底 */
#header.scrolled .auth-btn:not(.auth-btn-primary) {
	background: rgba(255, 255, 255, 0.9);
}
#header .auth-btn:hover {
	background: #111111;
	border-color: #111111;
	color: #ffffff;
}
#header .auth-btn-primary {
	background: #111111;
	border-color: #111111;
	color: #ffffff;
}
#header .auth-btn-primary:hover {
	background: #333333;
	border-color: #333333;
}
#header .auth-btn-logout {
	border-color: rgba(17, 17, 17, 0.14);
	color: #555555;
	padding: 6px 14px;
}
#header .auth-btn-logout:hover {
	background: #111111;
	border-color: #111111;
	color: #ffffff;
}
#header .nav-notify {
	width: 36px;
	height: 36px;
	border-color: rgba(17, 17, 17, 0.07);
	background: rgba(255, 255, 255, 0.76);
	box-shadow: 0 8px 20px -18px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
}
#header.scrolled .nav-notify {
	background: rgba(255, 255, 255, 0.9);
}
.notif-bell-svg {
	width: 17px;
	height: 17px;
	color: #1a1a1a;
	display: block;
}
.nav-notify:hover .notif-bell-svg {
	color: #000000;
	animation: bellSwing 0.5s ease;
}
@keyframes bellSwing {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-12deg); }
	60% { transform: rotate(9deg); }
	85% { transform: rotate(-4deg); }
}

/* 汉堡按钮：三条线 → 关闭时变 X */
#header .menu-btn {
	display: none;
	width: 40px;
	height: 40px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(17, 17, 17, 0.08);
	font-size: 0;
	line-height: 0;
}
#header .menu-btn span {
	display: block;
	width: 16px;
	height: 1.5px;
	background: #111111;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.2s ease;
}
#header .menu-btn.open span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
#header .menu-btn.open span:nth-child(2) {
	opacity: 0;
}
#header .menu-btn.open span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* ============================================================
   二、站内页面过渡（幕帘 + 内容淡入）
   ============================================================ */
.page-curtain {
	position: fixed;
	inset: 0;
	z-index: 9997;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8f8f8;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.26s ease, visibility 0.26s;
}
.page-curtain.show {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}
.page-curtain-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}
.page-curtain.show .page-curtain-inner {
	opacity: 1;
	transform: none;
}
.page-curtain-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #111111;
	color: #ffffff;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}
.page-curtain-text {
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	color: #8a8a8a;
}

/* 站内跳转后的内容淡入（不是每次首访都播，只有会话内跳转才加 page-enter） */
html.page-enter body > header,
html.page-enter body > main,
html.page-enter body > section {
	animation: pageEnter 0.44s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes pageEnter {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	html.page-enter body > header,
	html.page-enter body > main,
	html.page-enter body > section {
		animation: none;
	}
	.page-curtain,
	.page-curtain-inner {
		transition: none;
	}
}

/* ============================================================
   三、用户主页：个人简介（就地编辑）
   ============================================================ */
.profile-bio {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 18px;
	padding: 14px 16px;
	border-radius: 14px;
	background: #fafafa;
	border: 1px solid #f0f0f0;
}
.profile-bio-text {
	flex: 1;
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.7;
	color: #474747;
	white-space: pre-wrap;
	word-break: break-word;
}
.profile-bio-text.is-placeholder {
	color: #b3b3b3;
}
.profile-bio-edit {
	flex-shrink: 0;
	padding: 6px 14px;
	border: 1px solid #e6e6e6;
	background: #ffffff;
	border-radius: 99px;
	font-size: 0.78rem;
	font-weight: 500;
	color: #666666;
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.profile-bio-edit:hover {
	color: #111111;
	border-color: #111111;
	background: #ffffff;
}
.profile-bio.is-editing {
	display: block;
	background: #ffffff;
	border-color: #e6e6e6;
	padding: 14px;
}
.profile-bio-input {
	width: 100%;
	min-height: 64px;
	padding: 12px 14px;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	background: #fafafa;
	font-family: inherit;
	font-size: 0.92rem;
	line-height: 1.65;
	color: #222222;
	resize: vertical;
	box-sizing: border-box;
	transition: border-color 0.25s ease, background 0.25s ease;
}
.profile-bio-input:focus {
	outline: none;
	border-color: #111111;
	background: #ffffff;
}
.profile-bio-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}
.profile-bio-count {
	margin-right: auto;
	font-size: 0.75rem;
	color: #aaaaaa;
	font-variant-numeric: tabular-nums;
}
.bio-btn {
	padding: 7px 16px;
	border-radius: 99px;
	font-size: 0.8rem;
	font-weight: 500;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all 0.25s ease;
}
.bio-btn-ghost {
	background: #ffffff;
	border-color: #e6e6e6;
	color: #666666;
}
.bio-btn-ghost:hover {
	border-color: #111111;
	color: #111111;
}
.bio-btn-primary {
	background: #111111;
	color: #ffffff;
}
.bio-btn-primary:hover {
	background: #333333;
}
.bio-btn:disabled {
	background: #cccccc;
	border-color: #cccccc;
	color: #ffffff;
	cursor: not-allowed;
}
.profile-manage-hint {
	margin: 10px 0 0;
	font-size: 0.76rem;
	color: #b0b0b0;
	letter-spacing: 0.01em;
}

/* 头像可点击放大 */
.avatar-zoom {
	cursor: zoom-in;
}
.user-profile-avatar .avatar-zoom {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.user-profile-avatar .avatar-zoom:hover {
	transform: scale(1.03);
	box-shadow: 0 0 0 4px #ffffff, 0 18px 36px -14px rgba(0, 0, 0, 0.38);
}
#header .nav-avatar.avatar-zoom:hover {
	transform: scale(1.08);
	box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.1);
}

/* ============================================================
   四、管理后台：统一窗口尺寸与内部间距
   ============================================================ */
.admin-modal .modal {
	width: min(920px, 94vw);
	max-width: min(920px, 94vw);
	height: min(86vh, 780px);
	max-height: min(86vh, 780px);
	padding: 30px 30px 24px;
	display: flex;
	flex-direction: column;
	border-radius: 20px;
}
.admin-modal .modal-title {
	margin-bottom: 4px;
}
.admin-modal .modal-subtitle {
	margin-bottom: 18px;
}
.admin-tabs {
	flex-shrink: 0;
	gap: 6px;
	margin-bottom: 16px;
	padding-bottom: 0;
	border-bottom: none;
}
.admin-tab {
	padding: 8px 18px;
	font-size: 0.88rem;
	border-radius: 99px;
}
.admin-tab.active {
	background: #111111;
	color: #ffffff;
	box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.9);
}
.admin-content {
	flex: 1;
	min-height: 0;
	padding: 2px 6px 4px 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.admin-content::-webkit-scrollbar {
	width: 6px;
}
.admin-content::-webkit-scrollbar-thumb {
	background: #e2e2e2;
	border-radius: 99px;
}
.admin-content::-webkit-scrollbar-thumb:hover {
	background: #cfcfcf;
}
.admin-list {
	gap: 10px;
}
.admin-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	min-height: 74px;
	padding: 14px 18px;
	border-radius: 14px;
	background: #fafafa;
	border: 1px solid #f1f1f1;
	box-sizing: border-box;
}
/* 资料区至少 300px，空间不足时按钮整体换到下一行，绝不挤压文字 */
.admin-item-info {
	flex: 1 1 300px;
	min-width: 0;
}
.admin-item-title {
	line-height: 1.5;
}
.admin-item-meta {
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 4px;
}
.admin-item-meta > span {
	white-space: nowrap;
}
.admin-item-actions {
	flex: 0 0 auto;
	margin-left: auto;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.admin-action-btn {
	padding: 6px 12px;
	border-radius: 99px;
	font-size: 0.78rem;
	white-space: nowrap;
}
/* 回复管理窗口与管理后台保持同一尺寸语言 */
.reply-manage-modal .modal {
	width: min(920px, 94vw);
	max-width: min(920px, 94vw);
	height: min(86vh, 780px);
	max-height: min(86vh, 780px);
	padding: 30px;
	display: flex;
	flex-direction: column;
	border-radius: 20px;
}
.reply-manage-modal .reply-manage-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding-right: 6px;
}
.reply-manage-modal .reply-manage-list::-webkit-scrollbar {
	width: 6px;
}
.reply-manage-modal .reply-manage-list::-webkit-scrollbar-thumb {
	background: #e2e2e2;
	border-radius: 99px;
}
/* 编辑类弹窗统一宽度 */
.edit-post-modal .modal,
.edit-reply-modal .modal {
	width: min(620px, 94vw);
	max-width: min(620px, 94vw);
	padding: 30px;
}
/* 公告编辑器在固定高度内滚动 */
.announcement-editor {
	max-width: 100%;
}

/* ============================================================
   五、图片加载观感优化
   ============================================================ */
/* 首屏轮播：限制重绘范围，背景图先用 LQIP 色块占位，避免切换时白闪 */
.hero-bg {
	contain: paint;
}
.hero-bg img {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	backface-visibility: hidden;
}
/* coser 卡片用占位底色兜住加载空隙 */
.coser-face {
	background-color: #101820;
}
/* 懒加载图片：未加载完成时给中性底色，淡入时不出现白块 */
img[data-fade] {
	background-color: #f4f4f4;
}
/* 简介区背景在窄屏改用更小尺寸，减少移动流量 */
@media (max-width: 900px) {
	.about-section {
		background-image: url("../img/opt/IMG_20261017_024611-960.webp");
	}
}

/* ============================================================
   六、以上改版的响应式适配（放最后，确保覆盖旧断点）
   ============================================================ */
@media (max-width: 1100px) {
	#header .nav-menu a {
		padding: 7px 11px;
		font-size: 0.82rem;
	}
	#header .center-btn,
	#header .admin-btn {
		padding: 6px 10px;
		font-size: 0.76rem;
	}
}

@media (max-width: 900px) {
	#header {
		padding: 10px 16px;
		gap: 10px;
		flex-wrap: nowrap;
	}
	#header.scrolled {
		padding: 8px 16px;
	}
	#header .menu-btn {
		display: flex;
	}
	#header .nav-menu {
		position: absolute;
		top: calc(100% + 6px);
		left: 12px;
		right: 12px;
		width: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding: 8px;
		border-radius: 18px;
		background: rgba(255, 255, 255, 0.97);
		border: 1px solid rgba(17, 17, 17, 0.06);
		box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.32);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		overflow: hidden;
		transition: max-height 0.34s ease, opacity 0.24s ease,
			transform 0.24s ease, padding 0.24s ease, visibility 0.3s;
	}
	#header .nav-menu.open {
		max-height: 420px;
		padding-top: 8px;
		padding-bottom: 8px;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	/* 下拉里的每一项仍是独立胶囊 */
	#header .nav-menu a {
		padding: 12px 16px;
		border-radius: 99px;
		border-bottom: none;
		background: rgba(17, 17, 17, 0.045);
		border-color: transparent;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		font-size: 0.9rem;
	}
	#header .nav-menu a:hover {
		background: rgba(17, 17, 17, 0.09);
		transform: none;
		box-shadow: none;
	}
	#header .nav-menu a.active {
		background: #111111;
		border-color: #111111;
		box-shadow: none;
	}
	#header .user-area {
		margin-right: 0;
		gap: 6px;
		margin-left: auto;
	}
	#header .user-menu {
		padding: 3px 3px 3px 8px;
		gap: 5px;
	}
	#header .center-btn,
	#header .admin-btn {
		padding: 5px 9px;
		font-size: 0.72rem;
	}
	#header .auth-btn {
		padding: 6px 12px;
		font-size: 0.78rem;
	}
	#header .auth-btn-logout {
		padding: 5px 10px;
		font-size: 0.72rem;
	}
	#header .nav-notify {
		width: 34px;
		height: 34px;
	}
	#header .logo-text {
		display: none;
	}
	/* 管理后台 */
	.admin-modal .modal {
		width: calc(100vw - 24px);
		max-width: calc(100vw - 24px);
		height: 88vh;
		max-height: 88vh;
		padding: 24px 18px 18px;
	}
	.admin-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}
	.admin-tabs::-webkit-scrollbar {
		display: none;
	}
	.admin-item {
		min-height: 0;
		padding: 12px 14px;
	}
	.reply-manage-modal .modal {
		width: calc(100vw - 24px);
		max-width: calc(100vw - 24px);
		height: 88vh;
		max-height: 88vh;
		padding: 24px 18px 18px;
	}
	.edit-post-modal .modal,
	.edit-reply-modal .modal {
		width: calc(100vw - 24px);
		max-width: calc(100vw - 24px);
		padding: 24px 18px 18px;
	}
	/* 个人简介 */
	.profile-bio {
		margin-top: 14px;
		padding: 12px 14px;
		gap: 10px;
	}
}

@media (max-width: 640px) {
	#header .nav-title-badge,
	#header .nav-club-badge,
	#header .nav-status-badge {
		display: none;
	}
	#header .user-menu {
		padding: 3px;
	}
	#header .center-btn {
		display: inline-block;
		padding: 5px 8px;
		font-size: 0.7rem;
	}
	.profile-bio {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.profile-bio-edit {
		align-self: flex-start;
	}
	.profile-manage-hint {
		text-align: center;
	}
	.edit-post-modal .modal,
	.edit-reply-modal .modal {
		width: calc(100vw - 20px);
		max-width: calc(100vw - 20px);
	}
	/* 灯箱：移动端收紧留白，提示可换行 */
	.lb-card {
		max-width: 94vw;
		max-height: 78vh;
		padding: 6px;
		border-radius: 14px;
	}
	.lightbox-img {
		max-width: calc(94vw - 12px);
		max-height: calc(78vh - 12px);
		border-radius: 9px;
	}
	.lb-hint {
		top: 62px;
		max-width: 94vw;
		padding: 4px 10px;
		font-size: 0.62rem;
		line-height: 1.5;
		white-space: nowrap;
		text-align: center;
	}
	.lb-tools {
		bottom: 18px;
		padding: 5px;
		gap: 2px;
	}
	.lb-tool {
		width: 36px;
		height: 36px;
	}
	.lb-tool-text {
		width: auto;
		padding: 0 12px;
		font-size: 0.74rem;
		white-space: nowrap;
	}
	.lightbox-close {
		top: 14px;
		right: 14px;
		width: 38px;
		height: 38px;
		font-size: 1.25rem;
	}
}

@media (max-width: 420px) {
	#header .logo-mark {
		width: 26px;
		height: 26px;
		font-size: 0.7rem;
	}
	#header .nav-notify {
		width: 32px;
		height: 32px;
	}
	#header .nav-avatar {
		width: 24px;
		height: 24px;
	}
}

/* ============================================================
   用户中心 · 我的身份卡（入口条）
   ============================================================ */
.uc-idcard-entry {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 11px 14px;
	border: 0;
	border-radius: 0;
	background: #ffffff;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s ease;
}
.uc-idcard-entry:hover {
	background: #fafafa;
}
.uc-idcard-entry:active {
	background: #f5f5f5;
}
.uc-action-list > .uc-idcard-entry {
	border-bottom: 1px solid #f2f2f2;
}
.idc-entry-glyph {
	position: relative;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 9px;
	color: #ffffff;
	background: linear-gradient(152deg, #ffa855 0%, #fb7c15 48%, #e85c05 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 5px 11px -8px rgba(232, 92, 5, 0.95);
	overflow: hidden;
}
.idc-entry-glyph svg {
	position: relative;
	width: 16px;
	height: 16px;
	z-index: 1;
}
.idc-entry-glyph::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(118deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 46%);
	pointer-events: none;
}
.uc-idcard-entry-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.uc-idcard-entry-txt b {
	font-size: 0.87rem;
	font-weight: 600;
	color: #111111;
	line-height: 1.3;
	letter-spacing: -0.005em;
}
.uc-idcard-entry-txt i {
	font-style: normal;
	font-size: 0.6rem;
	font-weight: 500;
	color: #b0aca7;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
}
.uc-idcard-entry .uc-action-chev {
	color: #c9c5c0;
	transition: transform 0.26s ease, color 0.26s ease;
}
.uc-idcard-entry:hover .uc-action-chev {
	transform: translateX(2px);
	color: #fb7c15;
}

/* ============================================================
   身份卡 · 橙光通行证（单一款式）
   ============================================================ */
.idcard-modal {
	position: fixed;
	inset: 0;
	z-index: 2600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 26px;
	background:
		radial-gradient(64% 54% at 50% 42%, #ffffff 0%, #fbf9f6 54%, #f2efea 100%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.34s ease, visibility 0.34s ease;
	overflow: hidden;
}
.idcard-modal.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.idcard-modal::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.024;
	pointer-events: none;
}

.idcard-close {
	position: absolute;
	top: 22px;
	right: 22px;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(24, 18, 12, 0.1);
	background: rgba(255, 255, 255, 0.72);
	color: #4a433c;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 8px 22px -18px rgba(40, 26, 12, 0.7);
	transition: background 0.25s ease, transform 0.32s ease, border-color 0.25s ease, color 0.25s ease;
	z-index: 6;
}
.idcard-close:hover {
	background: #ffffff;
	border-color: rgba(24, 18, 12, 0.18);
	color: #111111;
	transform: rotate(90deg);
}
.idcard-close svg {
	width: 16px;
	height: 16px;
}

.idcard-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	opacity: 0;
	transform: translateY(22px) scale(0.925);
	transition: opacity 0.42s ease, transform 0.62s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.idcard-modal.active .idcard-wrap {
	opacity: 1;
	transform: none;
}

.idcard-stage {
	position: relative;
	width: min(560px, 84vw);
	aspect-ratio: 1.585;
	perspective: 1500px;
	perspective-origin: 50% 44%;
	container-type: inline-size;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
/* 地面投影 */
.idcard-stage::before {
	content: "";
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: -40px;
	height: 54px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(120, 62, 18, 0.42), rgba(120, 62, 18, 0.13) 48%, transparent 76%);
	filter: blur(16px);
	pointer-events: none;
	z-index: -1;
}

.idcard-sway,
.idcard-drift,
.idcard-tilt,
.idcard-flip {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	pointer-events: none;
}

/* 两层不同周期的轻微摇摆，叠加后不会出现明显规律 */
.idcard-sway {
	animation: idcSway 9s cubic-bezier(0.45, 0.06, 0.55, 0.94) infinite;
	will-change: transform;
}
.idcard-drift {
	animation: idcDrift 13s cubic-bezier(0.42, 0.08, 0.58, 0.92) infinite;
	will-change: transform;
}
.idcard-tilt {
	transform: rotateX(0deg) rotateY(0deg);
	will-change: transform;
}
.idcard-flip {
	transform: rotateY(0deg);
	transition: transform 0.9s cubic-bezier(0.3, 0.72, 0.24, 1);
	will-change: transform;
}

@keyframes idcSway {
	0% {
		transform: rotateX(-2.6deg) rotateY(-3.6deg);
	}
	24% {
		transform: rotateX(1.7deg) rotateY(1.2deg);
	}
	49% {
		transform: rotateX(3.1deg) rotateY(4deg);
	}
	73% {
		transform: rotateX(-1.1deg) rotateY(1.7deg);
	}
	100% {
		transform: rotateX(-2.6deg) rotateY(-3.6deg);
	}
}
@keyframes idcDrift {
	0% {
		transform: translateY(0) rotateZ(-0.8deg) rotateY(1.2deg);
	}
	33% {
		transform: translateY(-3.5px) rotateZ(0.55deg) rotateY(-1deg);
	}
	66% {
		transform: translateY(1.8px) rotateZ(1deg) rotateY(0.7deg);
	}
	100% {
		transform: translateY(0) rotateZ(-0.8deg) rotateY(1.2deg);
	}
}

/* ---------- 卡面 ---------- */
.idcard-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 5.2cqw 5.6cqw 4.4cqw;
	border-radius: 20px;
	overflow: hidden;
	box-sizing: border-box;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow:
		0 34px 58px -34px rgba(110, 52, 10, 0.62),
		0 2px 0 rgba(255, 255, 255, 0.3) inset,
		0 0 0 1px rgba(120, 54, 8, 0.07);
}
.idcard-front {
	background:
		radial-gradient(72% 62% at 16% -6%, #ffc07a 0%, #ff9d45 34%, rgba(255, 157, 69, 0) 72%),
		radial-gradient(78% 74% at 88% 108%, #d24c05 0%, rgba(210, 76, 5, 0) 62%),
		linear-gradient(146deg, #ff9a3d 0%, #fb8321 32%, #f5710d 62%, #e9600a 100%);
	color: #2a1305;
}
.idcard-back {
	transform: rotateY(180deg);
	background:
		radial-gradient(70% 60% at 82% -4%, #ffb166 0%, rgba(255, 177, 102, 0) 66%),
		radial-gradient(76% 70% at 8% 106%, #c74805 0%, rgba(199, 72, 5, 0) 64%),
		linear-gradient(156deg, #f98a2b 0%, #ef7311 40%, #dd5c07 74%, #c94e05 100%);
	color: #2a1305;
}

/* 光带绘制层 */
.idc-art {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
}
.idc-art svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.idc-art-back {
	opacity: 0.3;
	filter: saturate(0.9);
}

/* 内容层级 */
.idc-top,
.idc-center,
.idc-bottom,
.idc-back-center {
	position: relative;
	z-index: 2;
}

.idc-top {
	display: flex;
	align-items: center;
	gap: 2.1cqw;
	flex-shrink: 0;
}
.idc-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.9cqw;
	height: 4.9cqw;
	flex-shrink: 0;
	border-radius: 1.45cqw;
	background: #111111;
	color: #ffffff;
	font-size: 2.08cqw;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(60, 24, 0, 0.24);
}
.idc-logo-mark {
	display: block;
	transform: translateY(-0.03em);
}
.idc-brand {
	font-size: clamp(10px, 2.25cqw, 13px);
	font-weight: 600;
	letter-spacing: -0.005em;
	white-space: nowrap;
}
.idc-date {
	margin-left: auto;
	font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
	font-size: clamp(7px, 1.5cqw, 9px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.62;
	white-space: nowrap;
}

.idc-center {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 2cqw 0;
}
.idc-handle {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	font-size: clamp(26px, 12.8cqw, 72px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #2a1305;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}

.idc-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 3cqw;
	flex-shrink: 0;
}
.idc-meta {
	display: flex;
	flex-direction: column;
	gap: 0.7cqw;
	min-width: 0;
}
.idc-meta-r {
	align-items: flex-end;
	text-align: right;
}
.idc-meta-k {
	font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
	font-size: clamp(6px, 1.35cqw, 8px);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.6;
}
.idc-meta-v {
	font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
	font-size: clamp(6.5px, 1.45cqw, 8.5px);
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	opacity: 0.94;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 46cqw;
}

/* ---------- 背面 ---------- */
.idc-back-center {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.4cqw;
	min-height: 0;
	padding-left: 0.4cqw;
}
.idc-back-k {
	font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
	font-size: clamp(6px, 1.35cqw, 8px);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.55;
}
.idc-back-uid {
	font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
	font-size: clamp(20px, 7.6cqw, 44px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: 0.02em;
	color: #2a1305;
}
.idc-back-sub {
	font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
	font-size: clamp(6.5px, 1.45cqw, 8.5px);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.74;
}
.idc-note {
	font-size: clamp(8px, 1.55cqw, 9px);
	letter-spacing: 0.02em;
	opacity: 0.7;
	line-height: 1.5;
}
.idc-code {
	font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
	font-size: clamp(7.5px, 1.4cqw, 8px);
	font-weight: 600;
	letter-spacing: 0.18em;
	opacity: 0.68;
	white-space: nowrap;
	flex-shrink: 0;
}

.idcard-hint {
	margin: 0;
	font-size: 0.73rem;
	letter-spacing: 0.05em;
	color: rgba(58, 44, 32, 0.46);
	text-align: center;
	white-space: nowrap;
	transition: opacity 0.25s ease;
}

/* ---------- 移动端 ---------- */
@media (max-width: 560px) {
	.idcard-modal {
		padding: 24px 18px;
	}
	.idcard-close {
		top: 16px;
		right: 16px;
		width: 36px;
		height: 36px;
	}
	.idcard-wrap {
		gap: 24px;
	}
	.idcard-stage {
		width: min(560px, 92vw);
	}
	.idcard-face {
		border-radius: 16px;
	}
	.idcard-hint {
		font-size: 0.68rem;
		white-space: normal;
		max-width: 86vw;
		line-height: 1.5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.idcard-sway,
	.idcard-drift {
		animation: none;
	}
	.idcard-flip {
		transition-duration: 0.2s;
	}
}

/* ============================================================
   首屏 → COSER 区：流动云层分割
   ============================================================ */
.hero-clouds {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 210px;
	z-index: 3;
	pointer-events: none;
}
/* 照片下缘的雾化过渡，避免生硬切边 */
.hero-clouds::before {
	content: "";
	position: absolute;
	left: -12%;
	right: -12%;
	bottom: 38%;
	height: 260px;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.06) 38%,
		rgba(255, 255, 255, 0.28) 72%,
		rgba(255, 255, 255, 0.46) 100%
	);
	filter: blur(18px);
}
/* 内容始终压在云层之上，避免短屏/横屏时被云遮住 */
.hero > h1,
.hero > .announcement-card {
	position: relative;
	z-index: 4;
}

.cloud-band {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 200%;
	display: flex;
	will-change: transform;
	animation-name: cloudDrift;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.cloud-band svg {
	display: block;
	flex: 0 0 50%;
	width: 50%;
	height: 100%;
}
.cloud-band.b1 {
	height: 118px;
	animation-duration: 44s;
}
.cloud-band.b2 {
	height: 156px;
	animation-duration: 72s;
	animation-delay: -22s;
	animation-direction: reverse;
	opacity: 0.7;
	filter: blur(0.6px);
}
.cloud-band.b3 {
	height: 200px;
	animation-duration: 112s;
	animation-delay: -74s;
	opacity: 0.4;
	filter: blur(2px);
}
@keyframes cloudDrift {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (max-width: 768px) {
	.hero-clouds {
		height: 142px;
	}
	.hero-clouds::before {
		height: 210px;
		bottom: 42%;
		filter: blur(12px);
	}
	.cloud-band.b1 {
		height: 84px;
		animation-duration: 46s;
	}
	.cloud-band.b2 {
		height: 110px;
		animation-duration: 72s;
	}
	.cloud-band.b3 {
		height: 138px;
		animation-duration: 110s;
	}
}


/* 矮屏 / 横屏：云层收薄，避免喧宾夺主 */
@media (max-height: 780px) {
	.hero-clouds {
		height: 132px;
	}
	.hero-clouds::before {
		height: 170px;
	}
	.cloud-band.b1 {
		height: 74px;
	}
	.cloud-band.b2 {
		height: 98px;
	}
	.cloud-band.b3 {
		height: 124px;
	}
}
@media (max-height: 520px) and (orientation: landscape) {
	.hero-clouds {
		height: 74px;
	}
	.hero-clouds::before {
		height: 110px;
	}
	.cloud-band.b1 {
		height: 44px;
	}
	.cloud-band.b2 {
		height: 58px;
	}
	.cloud-band.b3 {
		height: 74px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cloud-band {
		animation: none;
	}
	.about-section::after {
		animation: none;
	}
}