/* =========================================
   CSS 重置与基础样式
   重置浏览器默认样式，设置全局基础排版与盒模型
========================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
	font-weight: 300 800;
	background: var(--color-bg-body);
	color: var(--color-text);
	line-height: 1.6;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	/* 全局防溢出安全网：任意模板中渲染的长链接/长单词自动断行，避免横向溢出容器（2026年08月18日） */
	overflow-wrap: break-word;
}

img {
	max-width: 100%;
	display: block;
}

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

ul {
	list-style: none;
}

button {
	cursor: pointer;
	border: none;
	outline: none;
	font-family: inherit;
}

input {
	font-family: inherit;
	outline: none;
}

/* =========================================
   CSS 变量 — 浅色主题（默认）
   定义浅色模式下的颜色、阴影、圆角、过渡等设计令牌
========================================= */
:root {
	--color-primary: #4CAF7D;
	--color-primary-dark: #2E7D52;
	--color-primary-hover: #3d9e6e;
	--color-primary-light: #e8f7ef;
	--color-primary-pale: #f2fbf6;
	--color-text: #1a2233;
	--color-text-secondary: #5a6a7e;
	--color-text-muted: #8a97a8;
	--color-white: #ffffff;
	--color-bg-body: #ffffff;
	--color-bg-section: #f8fafc;
	--color-bg-card: #ffffff;
	--color-border: #e8edf3;
	--color-bg-overlay: rgba(0, 0, 0, 0.45);
	--color-bg-modal: #ffffff;
	--color-bg-input: #f8fafc;
	--color-bg-tag: #f0f4f8;
	--color-bg-code: #f6f8fa;
	--color-fill-icon: none;
	--shadow-card: 0 2px 12px rgba(26, 34, 51, 0.06), 0 1px 3px rgba(26, 34, 51, 0.04);
	--shadow-card-hover: 0 8px 28px rgba(26, 34, 51, 0.10), 0 2px 6px rgba(26, 34, 51, 0.06);
	--shadow-modal: 0 24px 64px rgba(26, 34, 51, 0.20);
	--radius-sm: 6px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-xl: 28px;
	--radius-full: 9999px;
	--transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
	--hero-bg: radial-gradient(ellipse 90% 60% at 50% -10%, #d6eeff 0%, #eaf6f0 40%, #f8fbff 70%, #ffffff 100%);
	--compare-pain-bg: #fefbfb;
	--compare-pain-border: #f0e8e6;
	--compare-solution-bg: #f8fcfa;
	--compare-solution-border: #dceee4;
	--footer-bg: #111827;
	--footer-text: rgba(255, 255, 255, 0.65);
}

/* =========================================
   CSS 变量 — 深色主题
   定义深色模式下的颜色、阴影、圆角等覆盖值
========================================= */
[data-theme="dark"] {
	--color-primary: #5DC48A;
	--color-primary-dark: #3D8C5E;
	--color-primary-hover: #6ED498;
	--color-primary-light: #1a3326;
	--color-primary-pale: #132218;
	--color-text: #e8edf3;
	--color-text-secondary: #a0aab8;
	--color-text-muted: #6b7588;
	--color-white: #151a22;
	--color-bg-body: #11161e;
	--color-bg-section: #151a22;
	--color-bg-card: #1a202a;
	--color-border: #262d38;
	--color-bg-overlay: rgba(0, 0, 0, 0.7);
	--color-bg-modal: #1a202a;
	--color-bg-input: #222833;
	--color-bg-tag: #1e2630;
	--color-bg-code: #0d1117;
	--color-fill-icon: none;
	--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.15);
	--shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.20);
	--shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.50);
	--hero-bg: radial-gradient(ellipse 90% 60% at 50% -10%, #1c2d3a 0%, #1a2824 40%, #151a22 70%, #11161e 100%);
	--compare-pain-bg: #1c1a1a;
	--compare-pain-border: #2d2423;
	--compare-solution-bg: #151f19;
	--compare-solution-border: #1e3326;
	--footer-bg: #0a0d12;
	--footer-text: rgba(255, 255, 255, 0.5);
}

/* =========================================
   布局工具类
   容器宽度限制与水平居中
========================================= */
.container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}

.container-wide {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}

/* =========================================
   导航栏样式
   固定顶部导航，包含 Logo、菜单、下拉、图标按钮与移动端汉堡菜单
========================================= */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: var(--color-bg-body);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--color-border);
	transition: box-shadow var(--transition), background var(--transition);
}

.nav.scrolled {
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

.nav-inner {
	display: flex;
	align-items: center;
	height: 64px;
	gap: 0;
}

.nav-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 18px;
	color: var(--color-text);
	margin-right: 36px;
	flex-shrink: 0;
}

.nav-logo-icon {
	width: 32px;
	height: 32px;
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-logo-icon svg {
	width: 18px;
	height: 18px;
}

/* 修复时间：2026年07月31日 移除 overflow:hidden
   原因：nav-menu 的 overflow:hidden 会裁剪超出容器的内容,而 nav-dropdown 子菜单
         使用 position:absolute 定位在 nav-item 底部(实际位置在 nav-menu 外部),
         导致下拉菜单完全被遮挡不可见
   修复：移除 overflow:hidden, nav-menu 在 <=1024px 时 display:none 由响应式处理,
         >1024px 时视口宽度足够,无需额外隐藏溢出内容 */
.nav-menu {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1;
	min-width: 0;
}

.nav-item {
	position: relative;
}

.nav-link {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-secondary);
	border-radius: var(--radius-sm);
	transition: color var(--transition), background var(--transition);
	white-space: nowrap;
}

.nav-link:hover {
	color: var(--color-text);
	background: var(--color-bg-section);
}

.nav-link svg {
	width: 12px;
	height: 12px;
	transition: transform var(--transition);
}

/* 时间戳: 2026年10月26日18时05分00秒 修复英文态导航右侧溢出
 * 问题现象: 切英文后栏目标签由 2~3 个汉字变为 Answers/Downloads/Products 等长词，
 *           .nav-menu 实测 scrollWidth 857px 而容器只有 751px，末项 Contact 压到
 *           搜索按钮上并与登录区重叠（1440 与 1920 视口均复现，因 .container-wide
 *           有宽度上限，放大视口无法解决）。
 * 方案: 英文态按实际缺口收紧菜单项间距与左右内边距（gap 20→12 省 64px、
 *       padding 12→9 省 54px，合计 118px > 缺口 106px，实测剩余 12px 余量）。
 *       用 html[lang="en"] 限定，中文态视觉与改造前完全一致；
 *       lang 由 i18n 模块切换时同步（zh-CN ⇄ en），样式随语言自动恢复。
 * 影响面: 仅 .nav-menu 的 gap 与 .nav-link 的水平内边距，不动字号、颜色、高度。
 */
html[lang="en"] .nav-menu {
	gap: 12px;
}

html[lang="en"] .nav-link {
	padding: 6px 9px;
}

/* 时间戳: 2026年10月26日18时15分00秒 英文态窄屏二次收紧
 * 问题: 容器宽度 = min(1328, 视口-64)，1265~1279 区间英文菜单仍差 3px，
 *       Contact 会压住搜索按钮 3px（实测 1265px：末项右 915 / 搜索左 912）。
 * 方案: 在 ≤1300px 时把英文态 gap 收到 10px、内边距收到 8px，
 *       再省 34px，实测余量 31px；中文态与断点均不受影响（1264px 仍切汉堡）。
 */
@media (max-width: 1300px) {
	html[lang="en"] .nav-menu {
		gap: 10px;
	}

	html[lang="en"] .nav-link {
		padding: 6px 8px;
	}
}

.nav-item:hover .nav-link svg {
	transform: rotate(180deg);
}

/* JS 延长的悬停状态，确保鼠标移向下拉菜单时交互流畅 */
.nav-item.hover-persist .nav-link svg {
	transform: rotate(180deg);
}

.nav-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	background: var(--color-bg-modal);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	padding: 8px;
	min-width: 200px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.nav-item:hover .nav-dropdown,
.nav-item.hover-persist .nav-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition-delay: 0s;
}

/* 在导航链接与下拉菜单之间添加桥接区域，防止鼠标移动时意外关闭 */
.nav-dropdown::before {
	content: '';
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

.nav-dropdown-item {
	display: block;
	padding: 10px 14px;
	font-size: 14px;
	color: var(--color-text-secondary);
	border-radius: var(--radius-sm);
	transition: background var(--transition), color var(--transition);
}

.nav-dropdown-item:hover {
	background: var(--color-primary-pale);
	color: var(--color-primary);
}

/* 激活态样式 */
.nav-dropdown-item.active {
	background: var(--color-primary-pale);
	color: var(--color-primary);
	font-weight: 500;
}

.nav-dropdown-label {
	display: block;
	padding: 4px 14px 2px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

.nav-dropdown-divider {
	height: 1px;
	background: var(--color-border);
	margin: 6px 4px;
}

/* 时间戳: 2026年09月23日20时20分00秒 新增三级导航样式
   背景：站点1栏目为三层结构（顶级→二级→三级），原导航仅渲染一层下拉，
         三级栏目无法展示；现按「二级项 hover 右侧弹出子面板」形式展开。
   设计语言：完全复用既有下拉的令牌与视觉——var(--color-bg-modal) 背景、
             var(--color-border) 边框、var(--radius-sm) 圆角、
             var(--transition) 过渡、var(--color-primary-pale) 悬停底色，
             不引入任何新配色或新风格。
   定位说明：子面板相对 .nav-dropdown-group 定位在右侧（left:100%），
             顶部与被悬停的二级项对齐（top:0），避免遮挡触发项。 */
.nav-dropdown-group {
	position: relative;
}

/* 二级项在有下级时需左文右箭头对齐：仅作用于本组内的二级项（.nav-dropdown-group 为本次新增类，
   其他模板/其他下拉项不受影响），用 flex 两端对齐替代 float，避免长名称换行时箭头错位 */
.nav-dropdown-group > .nav-dropdown-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* 二级项箭头：有下级时显示右向箭头，与顶级下向箭头呼应 */
.nav-dropdown-item .nav-caret-right {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	color: var(--color-text-muted);
	transition: transform var(--transition), color var(--transition);
}

.nav-dropdown-group:hover .nav-caret-right {
	color: var(--color-primary);
	transform: translateX(2px);
}

/* 三级子面板：默认隐藏，父级二级项悬停或 JS 保持态时显示
   定位说明：相对 .nav-dropdown-group（即二级项本身）定位，top:0 使面板顶边与
             被悬停的二级项顶边对齐，明确「该面板属于此项」的从属关系；
             left:100% 贴在下拉面板右缘外，横移有 ::before 桥接区兜底。 */
.nav-subdropdown {
	position: absolute;
	top: 0;
	left: 100%;
	margin-left: 4px;
	background: var(--color-bg-modal);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	padding: 8px;
	min-width: 190px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	transform: translateX(-6px);
}

.nav-dropdown-group:hover .nav-subdropdown,
.nav-dropdown-group.hover-persist .nav-subdropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
	transition-delay: 0s;
}

/* 在二级项与三级子面板之间添加桥接区域，防止鼠标横移时意外关闭 */
.nav-subdropdown::before {
	content: '';
	position: absolute;
	top: 0;
	left: -6px;
	width: 6px;
	height: 100%;
}

/* 三级项：字号与缩进略收，形成层级感，仍复用既有下拉项视觉 */
.nav-subdropdown .nav-dropdown-item {
	padding-left: 14px;
	font-size: 13px;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex-shrink: 0;
}

/* 时间戳: 2026年07月30日20时35分00秒 修复窄屏下登录/注册按钮换行溢出的问题
 * 问题原因: #userActions 默认 display:block,在中等宽度(768-900px)下被父级 .nav-right 压缩,
 *          宽度不足时两个 inline-flex 按钮换行,y 坐标不同,溢出导航栏
 * 修复方案: display:flex + flex-wrap:nowrap 强制不换行, flex-shrink:0 阻止被压缩
 * 性能影响: 纯CSS,零JS,零布局抖动
 */
#userActions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
	flex-shrink: 0;
	/* 时间戳: 2026年10月13日10时30分00秒 方案A优化:默认隐藏容器,避免"未登录闪烁" */
	/* 设计说明: 已登录用户访问页面时,原流程"先渲染登录/注册→JS拉到用户数据→替换为头像/昵称"造成视觉闪烁;
	          现改为默认 visibility:hidden,JS完成状态判断与渲染后一次性visibility:visible,
	          无论已登录还是未登录都避免内容跳变(占位空间仍保留,不影响导航栏布局稳定性) */
	visibility: hidden;
	/* 时间戳: 2026年10月13日12时00分00秒 锁定最小宽度,消除登录态切换的nav-right左右位移
	 * 问题根因: #userActions 在HTML静态渲染时(登录+注册按钮)宽度约132px,
	 *           而JS拉到数据后内容宽度会变化(早前仅头像约36px),导致 .nav-right 重新左移,
	 *           造成"先左后右"的视觉位移闪烁(用户实测确认)
	 * 修复方案: 用 min-width 锁定到"登录+注册按钮"的实测宽度132px,
	 *           两态下 nav-right 总宽度一致,零位移
	 * 配合说明: 已登录内容为"头像+用户名文字"(见 .nav-user-name-text),
	 *           其内容宽度贴合132px锁定值,既不产生空白也不撑破锁定宽度
	 * 宽度来源: 实测 登录按钮60px + gap8px + 注册按钮64px = 132px(2026年10月13日 Playwright 实测)
	 * 维护说明: 若按钮文案/内边距/font-size 变更导致实测宽度变化,需同步更新此值与 头部css.html 内联规则 */
	min-width: 132px;
	justify-content: flex-end;
}

.nav-icon-btn {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-text-secondary);
	transition: background var(--transition), color var(--transition);
}

.nav-icon-btn:hover {
	background: var(--color-bg-section);
	color: var(--color-text);
}

.nav-icon-btn[title] {
	position: relative;
}

.nav-icon-btn[title]::after {
	content: attr(title);
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 8px;
	padding: 6px 12px;
	background: var(--color-bg-card);
	color: var(--color-text);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	border-radius: var(--radius-sm);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s, visibility 0.2s;
	z-index: 100;
}

.nav-icon-btn[title]:hover::after {
	opacity: 1;
	visibility: visible;
}

/* =========================================
   导航栏用户头像菜单 时间戳：2026年07月27日15时55分00秒
   用于 #userActions 已登录状态：圆形头像 + hover 弹出菜单
   设计说明：复用 .user-avatar 圆形渐变风格，hover 触发下拉菜单
   ========================================= */
.nav-user-wrap {
	position: relative;
	display: flex;
	align-items: center;
	/* 时间戳: 2026年10月13日11时50分00秒 思路3:头像与用户名文字之间间距6px(原margin-left:4px为单头像时的左侧间距) */
	gap: 6px;
	margin-left: 0;
}

.nav-user-avatar {
	width: 34px;
	height: 34px;
	border-radius: var(--radius-full);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-section);
	color: var(--color-text-secondary);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	flex-shrink: 0;
	border: 2px solid var(--color-border);
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
	cursor: pointer;
}

.nav-user-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 无头像时的首字回退样式（渐变背景，与 .user-avatar 风格统一） */
.nav-user-avatar-fallback {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 2px 8px rgba(76, 175, 125, 0.25);
}

.nav-user-avatar:hover {
	border-color: var(--color-primary);
	box-shadow: 0 2px 8px rgba(76, 175, 125, 0.30);
	transform: scale(1.05);
}

/* 时间戳: 2026年10月13日11时50分00秒 思路3:已登录时头像右侧显示用户名文字
 * 功能描述: 已登录状态下在圆形头像旁显示用户昵称/用户名,撑满 #userActions 的132px锁定宽度,消除空白
 * 设计说明:
 *   - #userActions 锁定 min-width:132px 保证"登录/注册"与"已登录"两态零位移;
 *   - 已登录内容 = 头像(34px) + 间距(6px) + 用户名文字(约90px),合计约130px,自然贴合132px,无空白;
 *   - 用户名过长时用 text-overflow:ellipsis 省略号截断,配合 max-width 严格约束宽度,
 *     确保内容不会撑破132px导致位移(超出部分显示...,完整名通过 title 属性提示)
 *   - 颜色/字号与导航链接风格统一,不影响其他区域
 * 安全说明: 文字内容由JS侧 H_导航转义HTML 转义后插入,防DOM XSS
 * 响应式: 窄屏(≤1024px)导航菜单隐藏,由 .nav-hamburger 接管,#userActions 仍可正常显示 */
.nav-user-name-text {
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	line-height: 1.2;
	transition: color var(--transition);
}

.nav-user-name-text:hover {
	color: var(--color-primary);
}

/* 弹出菜单容器 */
/* 时间戳: 2026年10月13日12时20分00秒 方案A:改为相对 .nav-user-wrap 水平严格居中
 * 原实现: right: -85px 硬编码偏移(按"仅头像34px"时代估算),wrap改为"头像+用户名"后偏移失准
 * 现实现: left:50% + translateX(-50%) 让菜单相对 wrap 严格水平居中,随 wrap 宽度自适应,无魔法值
 * 注意事项: 菜单 min-width:200px 宽于 wrap(约110px),居中后左右各超出约45px;
 *          在1280视口下右边缘约1293px略超出视口13px(导航container-wide右侧padding 32px可缓冲),
 *          属用户选定的"严格居中"方案预期行为
 * 动画说明: transform 需同时包含 translateX(-50%)(水平居中)与 translateY(纵向入场)两个分量 */
.nav-user-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	min-width: 200px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -6px);
	transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
	z-index: 200;
	pointer-events: none;
}

/* 透明桥接区域 时间戳：2026年07月27日16时20分00秒
   修复：头像与菜单之间的 8px 间隙导致鼠标穿过时 hover 中断，菜单闪烁隐藏
   原理：::before 向上延伸覆盖间隙，鼠标穿过时仍在 .nav-user-menu 的命中区域内，hover 连续不中断 */
.nav-user-menu::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
	/* 透明无背景，仅用于扩展 hover 命中区域，不影响视觉 */
}

.nav-user-wrap:hover .nav-user-menu,
.nav-user-wrap:focus-within .nav-user-menu {
	opacity: 1;
	visibility: visible;
	/* 时间戳: 2026年10月13日12时20分00秒 方案A:展开态保留 translateX(-50%) 水平居中,纵向归位 translateY(0) */
	transform: translate(-50%, 0);
	pointer-events: auto;
}

/* 时间戳: 2026年10月13日12时35分00秒 方案A:视口边界翻转(右对齐)
 * 功能描述: 菜单默认相对 .nav-user-wrap 水平居中(left:50%+translateX(-50%)),
 *           当居中会导致右边缘超出视口时(如wrap靠近屏幕右侧),由 main.js 动态添加本类,
 *           改为相对 wrap 右对齐(left:auto; right:0),确保菜单始终完整显示在视口内
 * 触发条件: main.js 在菜单打开时计算 wrapCenter + menuWidth/2 + 边距 > 视口宽度,则添加此class
 * 设计说明: 与业界 popover "flip/shift" 策略一致(Radix/Floating UI/Bootstrap同思路),
 *           空间足够时保持居中(美观),不足时右对齐贴边(防溢出)
 * 注意: 需同时覆盖初始态与展开态的 transform,避免 translateX(-50%) 残留导致错位 */
.nav-user-menu.is-flip-right {
	left: auto;
	right: 0;
	transform: translate(0, -6px);
}

.nav-user-wrap:hover .nav-user-menu.is-flip-right,
.nav-user-wrap:focus-within .nav-user-menu.is-flip-right {
	transform: translate(0, 0);
}

/* 用户信息头部（昵称 + 提示） */
.nav-user-header {
	padding: 10px 12px 12px;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 6px;
}

.nav-user-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

.nav-user-sub {
	font-size: 12px;
	color: var(--color-text-muted);
	margin-top: 2px;
}

/* 菜单项 */
.nav-user-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-secondary);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: background var(--transition), color var(--transition);
	cursor: pointer;
}

.nav-user-menu-item svg {
	color: var(--color-text-muted);
	flex-shrink: 0;
	transition: color var(--transition);
}

.nav-user-menu-item:hover {
	background: var(--color-bg-section);
	color: var(--color-text);
}

.nav-user-menu-item:hover svg {
	color: var(--color-primary);
}

.nav-user-menu-divider {
	height: 1px;
	background: var(--color-border);
	margin: 6px 0;
}

/* 退出登录项：hover 红色危险色 */
.nav-user-menu-logout:hover {
	background: rgba(220, 53, 69, 0.08);
	color: #dc3545;
}

.nav-user-menu-logout:hover svg {
	color: #dc3545;
}

.theme-toggle svg {
	width: 17px;
	height: 17px;
}

.theme-toggle .icon-sun {
	display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
	display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
	display: none;
}

.btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: transparent;
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: background var(--transition), color var(--transition);
}

.btn-ghost:hover {
	background: var(--color-bg-section);
	color: var(--color-text);
}

.btn-primary-sm {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 18px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: background var(--transition), box-shadow var(--transition);
}

.btn-primary-sm:hover {
	background: var(--color-primary-hover);
	box-shadow: 0 2px 8px rgba(76, 175, 125, 0.30);
}

.nav-hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: transparent;
	padding: 6px;
	border-radius: var(--radius-sm);
	margin-left: auto;
}

.nav-hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
	transition: var(--transition);
}

/* =========================================
   主视觉轮播区域
   首屏英雄区域，包含背景粒子、光晕、数据线条、轮播幻灯片与行动按钮
========================================= */
.hero {
	padding-top: 140px;
	padding-bottom: 80px;
	background: var(--hero-bg);
	overflow: hidden;
	position: relative;
	isolation: isolate;
}

/* ── 第 0 层：点阵网格 + 顶部中心光晕 ── */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: radial-gradient(ellipse 80% 60% at 50% 14%, rgba(76, 175, 125, 0.08) 0%, transparent 60%),
	radial-gradient(circle, rgba(76, 175, 125, 0.10) 1px, transparent 1px),
	radial-gradient(circle, rgba(100, 180, 255, 0.07) 0.8px, transparent 0.8px);
	background-position: 0 0, 0 0, 24px 24px;
	background-size: 100% 100%, 44px 44px, 44px 44px;
	pointer-events: none;
	animation: dotPulse 8s ease-in-out infinite;
}

/* ── 第 1 层：静态光晕斑点 ── */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(ellipse 600px 260px at 24% 36%, rgba(76, 175, 125, 0.09) 0%, transparent 70%),
	radial-gradient(ellipse 500px 320px at 76% 56%, rgba(100, 180, 255, 0.07) 0%, transparent 70%),
	radial-gradient(ellipse 420px 240px at 50% 90%, rgba(76, 175, 125, 0.06) 0%, transparent 70%);
	pointer-events: none;
}

/* ── 氛围容器（粒子 + 光晕球 + 数据线条） ── */
.hero-ambient {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}

/* ── 光晕球：大尺寸模糊圆形，缓慢漂移与脉冲效果 ── */
.ambient-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.35;
}

.ambient-orb--1 {
	width: 340px;
	height: 340px;
	background: rgba(76, 175, 125, 0.18);
	top: 15%;
	left: 8%;
	animation: orbDrift1 18s ease-in-out infinite;
}

.ambient-orb--2 {
	width: 280px;
	height: 280px;
	background: rgba(100, 180, 255, 0.12);
	top: 50%;
	right: 10%;
	animation: orbDrift2 22s ease-in-out infinite;
}

.ambient-orb--3 {
	width: 220px;
	height: 220px;
	background: rgba(76, 175, 125, 0.14);
	bottom: 10%;
	left: 50%;
	animation: orbDrift3 20s ease-in-out infinite;
}

/* ── 数据线条：对角线移动的细发光条纹 ── */
.data-line {
	position: absolute;
	height: 1px;
	width: 280px;
	background: linear-gradient(90deg, transparent, rgba(76, 175, 125, 0.25), rgba(100, 180, 255, 0.20), transparent);
}

.data-line--1 {
	top: 28%;
	left: -280px;
	transform: rotate(-18deg);
	animation: dataFlow1 14s linear infinite;
}

.data-line--2 {
	top: 62%;
	left: 120%;
	transform: rotate(14deg);
	background: linear-gradient(90deg, transparent, rgba(100, 180, 255, 0.18), rgba(76, 175, 125, 0.15), transparent);
	animation: dataFlow2 16s linear infinite 5s;
}

/* ── 浮动粒子 ── */
.hero-particles {
	position: absolute;
	inset: 0;
}

.particle {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background: rgba(76, 175, 125, 0.35);
	box-shadow: 0 0 6px rgba(76, 175, 125, 0.25);
	animation: particleDrift var(--d) ease-in-out infinite var(--delay);
}

.particle:nth-child(2n) {
	background: rgba(100, 180, 255, 0.30);
	box-shadow: 0 0 5px rgba(100, 180, 255, 0.20);
}

.particle:nth-child(3n) {
	background: rgba(76, 175, 125, 0.22);
	box-shadow: 0 0 4px rgba(76, 175, 125, 0.15);
}

.particle:nth-child(5n) {
	background: rgba(130, 200, 160, 0.28);
	box-shadow: 0 0 5px rgba(130, 200, 160, 0.18);
}

/* ── 主视觉内部布局 ── */
.hero-inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 670px;
}

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

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	background: var(--color-primary-light);
	border-radius: var(--radius-full);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-primary-hover);
	margin-bottom: 36px;
	position: relative;
  /*border-top: 2px solid rgba(76,175,125,0.35);*/
}

.hero-badge::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-full);
	border: 1px solid rgba(76, 175, 125, 0.25);
	animation: badgePulse 3s ease-in-out infinite;
	pointer-events: none;
}

.hero-badge span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
	display: inline-block;
	animation: dotLive 2s ease-in-out infinite;
}

.hero-title {
	font-size: clamp(44px, 6.5vw, 72px);
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -0.04em;
	color: var(--color-text);
	margin-bottom: 28px;
	text-align: center;
}

/* 可见状态下行距更充裕，两行之间呼吸感增强 */
.hero-title.reveal.visible {
	line-height: 1.32;
	transition: line-height 0.45s ease 0.12s;
}

.hero-title .highlight {
	color: var(--color-primary);
	background: linear-gradient(135deg, var(--color-primary), #6dd5a0, var(--color-primary-hover));
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: gradientShift 4s ease-in-out infinite;
}

.hero-sub {
	font-size: clamp(17px, 2.3vw, 21px);
	font-weight: 400;
	color: var(--color-text-secondary);
	line-height: 1.75;
	margin-bottom: 48px;
	max-width: 620px;
	text-align: center;
}

.hero-ctas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}

.btn-hero-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	font-size: 16.5px;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	border-radius: var(--radius-full);
	position: relative;
	overflow: hidden;
	transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
	box-shadow: 0 4px 18px rgba(76, 175, 125, 0.32);
}

.btn-hero-primary::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
	border-radius: var(--radius-full);
	pointer-events: none;
}

.btn-hero-primary:hover {
	background: var(--color-primary-hover);
	box-shadow: 0 8px 28px rgba(76, 175, 125, 0.42);
	transform: translateY(-2px);
}

.btn-hero-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	font-size: 16.5px;
	font-weight: 500;
	color: var(--color-text);
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-hero-secondary:hover {
	border-color: rgba(76, 175, 125, 0.35);
	box-shadow: 0 4px 16px rgba(76, 175, 125, 0.10);
	transform: translateY(-2px);
}

.btn-platform-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.hero-trust {
	margin-top: 36px;
	font-size: 13px;
	color: var(--color-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.hero-trust-dots {
	display: flex;
	align-items: center;
}

.hero-trust-dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid var(--color-bg-card);
	background: linear-gradient(135deg, var(--color-primary-light), #d4edf8);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	color: var(--color-primary-hover);
	margin-right: -8px;
	flex-shrink: 0;
}

/* ── 主视觉轮播 ── */
.hero-slides-viewport {
	overflow: hidden;
	width: 100%;
}

.hero-slides {
	display: flex;
	width: 100%;
  /* 明确设置宽度，确保 flex-basis 100% 正确计算 */
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.hero-slide {
	flex: 0 0 100%;
	min-width: 0;
  /* 防止 flex 子元素撑破容器 */
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.hero-slide.active {
	opacity: 1;
}

.hero-slide .hero-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* 轮播导航箭头 — 默认隐藏，悬停时显示 */
.hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	color: var(--color-text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), box-shadow var(--transition), opacity var(--transition);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	opacity: 0;
	pointer-events: none;
}

.hero-inner:hover .hero-arrow {
	opacity: 1;
	pointer-events: auto;
}

.hero-arrow:hover {
	background: var(--color-bg-section);
	color: var(--color-text);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.hero-arrow:active {
	transform: translateY(-50%) scale(0.95);
}

.hero-arrow svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.hero-arrow--left {
	left: 16px;
}

.hero-arrow--right {
	right: 16px;
}

.hero-arrow[aria-disabled="true"] {
	pointer-events: none;
	cursor: default;
}

.hero-inner:hover .hero-arrow[aria-disabled="true"] {
	opacity: 1;
}

.hero-arrow[title]::after {
	content: attr(title);
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 12px;
	padding: 6px 12px;
	background: var(--color-bg-card);
	color: var(--color-text);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	border-radius: var(--radius-sm);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s, visibility 0.2s;
	z-index: 100;
}

.hero-arrow[title]:hover::after {
	opacity: 1;
	visibility: visible;
}

/* 轮播指示器（小圆点） */
.hero-indicators {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 32px;
	position: relative;
	z-index: 5;
}

.hero-indicator {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-border);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background var(--transition), width var(--transition);
}

.hero-indicator.active {
	background: var(--color-primary);
	width: 28px;
	border-radius: 5px;
}

.hero-indicator:hover:not(.active) {
	background: var(--color-text-muted);
}

/* 徽章颜色变体 */
.hero-badge--blue {
	background: rgba(100, 180, 255, 0.12);
	color: #3b82f6;
	border-top-color: rgba(59, 130, 246, 0.35);
}

.hero-badge--blue::after {
	border-color: rgba(100, 180, 255, 0.25);
}

.hero-badge--blue span {
	background: #3b82f6;
}

.hero-badge--accent {
	background: rgba(139, 92, 246, 0.10);
	color: #8b5cf6;
	border-top-color: rgba(139, 92, 246, 0.35);
}

.hero-badge--accent::after {
	border-color: rgba(139, 92, 246, 0.25);
}

.hero-badge--accent span {
	background: #8b5cf6;
}

.hero-badge--dark {
	background: rgba(26, 34, 51, 0.06);
	color: var(--color-text);
	border-top-color: rgba(26, 34, 51, 0.2);
}

.hero-badge--dark::after {
	border-color: rgba(26, 34, 51, 0.15);
}

.hero-badge--dark span {
	background: var(--color-text);
}

/* ── 轮播区域响应式适配 ── */
@media (max-width: 768px) {
	.hero-arrow {
		width: 40px;
		height: 40px;
	}

	.hero-arrow svg {
		width: 16px;
		height: 16px;
	}

	.hero-arrow--left {
		left: 4px;
	}

	.hero-arrow--right {
		right: 4px;
	}

	.hero-indicators {
		margin-top: 24px;
		gap: 8px;
	}

	.hero-indicator {
		width: 8px;
		height: 8px;
	}

	.hero-indicator.active {
		width: 22px;
	}
}

/* ── 主视觉区域关键帧动画 ── */
@keyframes dotPulse {

	0%,
  100% {
		opacity: 1;
	}

	50% {
		opacity: 0.75;
	}
}

@keyframes orbDrift1 {

	0%,
  100% {
		transform: translate(0, 0) scale(1);
	}

	25% {
		transform: translate(40px, -20px) scale(1.12);
	}

	50% {
		transform: translate(-15px, 30px) scale(0.92);
	}

	75% {
		transform: translate(-30px, -15px) scale(1.06);
	}
}

@keyframes orbDrift2 {

	0%,
  100% {
		transform: translate(0, 0) scale(1);
	}

	33% {
		transform: translate(-35px, 25px) scale(1.10);
	}

	66% {
		transform: translate(20px, -15px) scale(0.90);
	}
}

@keyframes orbDrift3 {

	0%,
  100% {
		transform: translate(0, 0) scale(1);
	}

	30% {
		transform: translate(25px, -35px) scale(1.08);
	}

	60% {
		transform: translate(-20px, 15px) scale(0.93);
	}
}

@keyframes dataFlow1 {
	0% {
		left: -300px;
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

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

@keyframes dataFlow2 {
	0% {
		left: 120%;
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		left: -300px;
		opacity: 0;
	}
}

@keyframes particleDrift {

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

	20% {
		transform: translate(18px, -12px);
		opacity: 0.7;
	}

	40% {
		transform: translate(-10px, 15px);
		opacity: 0.25;
	}

	60% {
		transform: translate(-20px, -8px);
		opacity: 0.6;
	}

	80% {
		transform: translate(12px, 10px);
		opacity: 0.30;
	}
}

@keyframes badgePulse {

	0%,
  100% {
		border-color: rgba(76, 175, 125, 0.20);
	}

	50% {
		border-color: rgba(76, 175, 125, 0.45);
	}
}

@keyframes dotLive {

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

	50% {
		opacity: 0.5;
		transform: scale(0.7);
	}
}

@keyframes gradientShift {

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

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

/* =========================================
   公告通知栏
   可横向滚动的公告通知区域，支持多条公告轮播与详情弹窗
========================================= */
:root {
	--ann-bg: #f8fafb;
	--ann-item-bg: #fff;
	--ann-item-border: #eef2f6;
	--ann-text: var(--color-text);
	--ann-muted: var(--color-text-muted);
	--ann-icon-color: var(--color-primary);
	--ann-sep: #e8edf1;
	--ann-arrow-bg: rgba(255, 255, 255, 0.92);
	--ann-arrow-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] {
	--ann-bg: #161c22;
	--ann-item-bg: #1c232b;
	--ann-item-border: #2a323c;
	--ann-text: #e0e6ed;
	--ann-muted: #8899aa;
	--ann-sep: #2a323c;
	--ann-arrow-bg: rgba(28, 35, 43, 0.94);
	--ann-arrow-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .hero-badge--dark {
	background: rgba(255, 255, 255, 0.08);
	color: #d0d5dd;
	border-top-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .hero-badge--dark::after {
	border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .hero-badge--dark span {
	background: #d0d5dd;
}

[data-theme="dark"] .hero-badge--blue {
	background: rgba(100, 180, 255, 0.10);
}

[data-theme="dark"] .hero-badge--accent {
	background: rgba(139, 92, 246, 0.10);
}

.announce-bar {
	background: var(--ann-bg);
	border-bottom: 1px solid var(--ann-item-border);
	position: relative;
	z-index: 2;
}

.ann-bar-inner {
	display: flex;
	align-items: center;
	gap: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
}

/* 公告栏左右箭头 */
.ann-arrow {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	background: var(--ann-arrow-bg);
	box-shadow: var(--ann-arrow-shadow);
	color: var(--ann-text);
	cursor: pointer;
	border: 1px solid var(--ann-item-border);
	transition: background var(--transition), color var(--transition), box-shadow var(--transition), opacity var(--transition);
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
}

.ann-arrow[title]::after {
	content: attr(title);
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 12px;
	padding: 6px 12px;
	background: var(--color-bg-card);
	color: var(--color-text);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	border-radius: var(--radius-sm);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s, visibility 0.2s;
	z-index: 100;
}

.announce-bar:hover .ann-arrow[title]:hover::after {
	opacity: 1;
	visibility: visible;
}

.ann-arrow:hover {
	color: var(--color-primary);
	box-shadow: 0 2px 10px rgba(76, 175, 125, 0.16);
}

.ann-arrow--left {
	left: 0;
}

.ann-arrow--right {
	right: 0;
}

.announce-bar:hover .ann-arrow {
	opacity: 1;
	pointer-events: auto;
}

/* 公告滚动轨道 */
.ann-track {
	flex: 1;
	overflow-x: auto;
	overflow-y: hidden;
	display: flex;
	align-items: stretch;
	gap: 0;
	scroll-behavior: smooth;
	scrollbar-width: none;
  /* Firefox 隐藏滚动条 */
	-ms-overflow-style: none;
  /* IE/Edge 隐藏滚动条 */
	-webkit-overflow-scrolling: touch;
	padding: 0 2px;
	position: relative;
	z-index: 1;
}

.ann-track::-webkit-scrollbar {
	display: none;
}

/* 公告条目 */
.ann-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	cursor: pointer;
	white-space: nowrap;
	border-radius: var(--radius-sm);
	transition: background var(--transition), color var(--transition);
	position: relative;
	color: var(--ann-text);
}

.ann-item:hover {
	background: var(--ann-item-bg);
}

.ann-item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 18%;
	height: 64%;
	width: 1px;
	background: var(--ann-sep);
}

.ann-item-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	background: var(--color-primary-light);
	color: var(--ann-icon-color);
}

.ann-item-icon svg {
	width: 14px;
	height: 14px;
}

.ann-item-text {
	font-size: 14px;
	font-weight: 500;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.ann-item-time {
	font-size: 12px;
	font-weight: 400;
	color: var(--ann-muted);
	flex-shrink: 0;
}

/* 空状态（保留备用） */
.ann-empty {
	flex: 1;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 0;
	color: var(--ann-muted);
	font-size: 14px;
}

/* 公告详情弹窗 */
.ann-detail-modal {
	background: var(--color-bg-card);
	border-radius: var(--radius-sm);
	padding: 36px 40px;
	width: 90vw;
	max-width: 560px;
	max-height: 80vh;
	overflow-y: auto;
	position: relative;
	z-index: 1001;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.ann-detail-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	background: var(--color-primary-light);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.ann-detail-icon svg {
	width: 22px;
	height: 22px;
}

.ann-detail-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 6px;
}

.ann-detail-time {
	font-size: 13px;
	color: var(--color-text-muted);
}

.ann-detail-divider {
	height: 1px;
	background: var(--color-border);
	margin: 16px 0;
}

.ann-detail-body {
	display: inline;
	font-size: 15.5px;
	color: var(--color-text-secondary);
	line-height: 1.75;
}

/* 公告详情弹窗“查看详情”文字按钮：紧跟正文同行显示，跳转至公告详细链接（无链接时隐藏） */
.ann-detail-more {
	display: none;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	cursor: pointer;
}

.ann-detail-more:hover {
	text-decoration: underline;
}

/* 公告栏响应式适配 */
@media (max-width: 768px) {
	.ann-arrow {
		display: none;
	}

	.ann-item {
		padding: 8px 14px;
	}

	.ann-item-text {
		max-width: 200px;
		font-size: 13px;
	}

	.ann-item-icon {
		width: 24px;
		height: 24px;
	}

	.ann-item-icon svg {
		width: 12px;
		height: 12px;
	}

	.ann-item-time {
		font-size: 11px;
	}

	.ann-detail-modal {
		padding: 28px 22px;
	}
}

@media (max-width: 480px) {
	.ann-item {
		padding: 8px 10px;
	}

	.ann-item-text {
		max-width: 160px;
		font-size: 12.5px;
	}
}

/* =========================================
   通用区块样式
   页面各区块的通用排版样式：内边距、标题、副标题、分隔线
========================================= */
.section {
	padding: 80px 0;
}

.section-alt {
	background: var(--color-bg-section);
}

.section-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 14px;
}

.section-label::before {
	content: '';
	display: block;
	width: 14px;
	height: 2px;
	background: var(--color-primary);
	border-radius: 1px;
}

.section-title {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: var(--color-text);
	margin-bottom: 16px;
}

.section-sub {
	font-size: 17px;
	color: var(--color-text-secondary);
	line-height: 1.65;
	max-width: 888px;
}

.section-header {
	margin-bottom: 48px;
}

.section-header.center {
	text-align: center;
}

.section-header.center .section-label {
	justify-content: center;
}

.section-header.center .section-sub {
	margin: 0 auto;
}

.divider {
	height: 1px;
	background: var(--color-border);
	margin: 0;
}

/* =========================================
   痛点与解决方案
   对比展示用户痛点与产品解决方案的双栏卡片
========================================= */
/* 时间戳: 2026年10月26日16时25分00秒 修复中英双语下高度差被放大的问题
 * 问题现象: 中文态左右卡片高度差约 24px、英文态差 43px（英文文案更长，差异更明显），
 *           两栏底部边框错位，视觉上像排版错误。
 * 根因: align-items: start 使子项高度等于自身内容高度，9 条 vs 8 条必然不等高。
 * 修复: 改回 grid 默认的 stretch，子项拉伸到同一行最高者，两侧底部边框严格对齐，
 *       条目数少的一侧自然留出底部留白（比边框错位更整洁）。
 * 影响面: 仅 .compare-grid 一行属性；移动端 768px 以下为单列，stretch 无副作用。
 */
.compare-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

.compare-card {
	border-radius: var(--radius-sm);
	padding: 28px 28px;
	position: relative;
	overflow: hidden;
}

.compare-card.pain {
	background: var(--compare-pain-bg);
	border: 1px solid var(--compare-pain-border);
}

.compare-card.solution {
	background: var(--compare-solution-bg);
	border: 1px solid var(--compare-solution-border);
}

.compare-card-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.compare-card.pain .compare-card-icon {
	background: #faf0ee;
	color: #bf6a5c;
}

.compare-card.solution .compare-card-icon {
	background: var(--color-primary-pale);
	color: #3d9e6e;
}

.compare-card-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 18px;
}

.compare-card-title svg {
	flex-shrink: 0;
}

.compare-card.pain .compare-card-title {
	color: #bf6a5c;
}

.compare-card.solution .compare-card-title {
	color: #3d9e6e;
}

.compare-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.compare-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.55;
}

.compare-item .ci-icon {
	flex-shrink: 0;
	margin-top: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.compare-card.pain .ci-icon {
	background: #faf0ee;
	color: #bf6a5c;
}

.compare-card.solution .ci-icon {
	background: var(--color-primary-pale);
	color: #3d9e6e;
}

/* =========================================
   核心功能展示
   三列网格展示产品核心功能，带悬停动效
========================================= */
.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.feature-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 32px 28px;
	transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
	position: relative;
	overflow: hidden;
}

.feature-card:hover {
	box-shadow: var(--shadow-card-hover);
	border-color: rgba(76, 175, 125, 0.25);
	transform: translateY(-3px);
}

.feature-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--color-primary-pale) 0%, transparent 60%);
	opacity: 0;
	transition: opacity var(--transition);
	pointer-events: none;
}

.feature-card:hover::before {
	opacity: 1;
}

.feature-icon-wrap {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.feature-icon-wrap svg {
	width: 22px;
	height: 22px;
	stroke: var(--color-primary);
	stroke-width: 1.8;
	fill: var(--color-fill-icon);
}

.feature-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 10px;
}

.feature-desc {
	font-size: 14.5px;
	color: var(--color-text-secondary);
	line-height: 1.65;
}

/* =========================================
   核心功能 - 查看更多折叠交互
   默认隐藏第7张及之后的卡片，点击按钮展开
========================================= */
.feature-card-more {
	display: none;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.features-grid.expanded .feature-card-more {
	display: block;
	animation: featureCardFadeIn 0.5s ease forwards;
}

@keyframes featureCardFadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.features-grid.expanded .feature-card-more:nth-child(7) { animation-delay: 0.05s; }
.features-grid.expanded .feature-card-more:nth-child(8) { animation-delay: 0.10s; }
.features-grid.expanded .feature-card-more:nth-child(9) { animation-delay: 0.15s; }
.features-grid.expanded .feature-card-more:nth-child(10) { animation-delay: 0.20s; }
.features-grid.expanded .feature-card-more:nth-child(11) { animation-delay: 0.25s; }
.features-grid.expanded .feature-card-more:nth-child(12) { animation-delay: 0.30s; }
/* 第 13~18 张折叠卡片（2026年09月23日 追加）：折叠区补齐至 12 张，与 6 张常显合计 18 张、
   3 列 × 6 行恰好整列，避免尾行只余一两张卡片造成布局突兀；进渐显节奏沿用同一 0.05s 档差递进。 */
.features-grid.expanded .feature-card-more:nth-child(13) { animation-delay: 0.35s; }
.features-grid.expanded .feature-card-more:nth-child(14) { animation-delay: 0.40s; }
.features-grid.expanded .feature-card-more:nth-child(15) { animation-delay: 0.45s; }
.features-grid.expanded .feature-card-more:nth-child(16) { animation-delay: 0.50s; }
.features-grid.expanded .feature-card-more:nth-child(17) { animation-delay: 0.55s; }
.features-grid.expanded .feature-card-more:nth-child(18) { animation-delay: 0.60s; }

.features-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

.features-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition);
	font-family: inherit;
}

.features-more-btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: var(--color-primary-pale);
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
}

.features-more-btn[aria-expanded="true"] .features-more-icon {
	transform: rotate(180deg);
}

.features-more-icon {
	transition: transform var(--transition);
}

/* =========================================
   服务方案
   展示服务套餐与方案卡片，含图标、描述与特性标签
========================================= */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.service-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 40px 32px;
	text-align: center;
	transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.service-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-4px);
	border-color: rgba(76, 175, 125, 0.25);
}

.service-icon-circle {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-primary-pale);
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-icon-circle svg {
	width: 28px;
	height: 28px;
	stroke: var(--color-primary);
	stroke-width: 1.8;
	fill: none;
}

.service-card-title {
	font-size: 19px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 12px;
}

.service-card-desc {
	font-size: 14.5px;
	color: var(--color-text-secondary);
	line-height: 1.7;
	margin-bottom: 24px;
}

.service-features-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.service-feature-tag {
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-primary-hover);
	background: var(--color-primary-light);
	border-radius: var(--radius-full);
}

.service-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary);
	transition: gap var(--transition);
}

.service-cta:hover {
	gap: 10px;
}

.service-cta svg {
	width: 14px;
	height: 14px;
}

/* =========================================
   文章与教程
   文章列表区域，支持分类标签切换与卡片展示
========================================= */
.articles-tabs {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-bottom: 40px;
}

.articles-tab {
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 600;
	background: transparent;
	color: var(--color-text-secondary);
	border-radius: var(--radius-full);
	transition: all var(--transition);
}

.articles-tab:hover {
	color: var(--color-text);
	background: var(--color-bg-section);
}

.articles-tab.active {
	background: var(--color-primary);
	color: #fff;
}

.articles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

.article-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
	display: flex;
	flex-direction: column;
	height: 370px;
}

.article-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.article-thumb {
	height: 180px;
	overflow: hidden;
	position: relative;
}

.article-thumb-bg {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 42px;
	color: rgba(255, 255, 255, 0.6);
}

.article-thumb-bg.color1 {
	background: linear-gradient(135deg, #5DC48A, #3d9e6e);
}

.article-thumb-bg.color2 {
	background: linear-gradient(135deg, #6baed6, #4a8fbb);
}

.article-thumb-bg.color3 {
	background: linear-gradient(135deg, #f0c75e, #daa520);
}

.article-thumb-bg.color4 {
	background: linear-gradient(135deg, #a68ad4, #7e5fc4);
}

.article-thumb-bg.color5 {
	background: linear-gradient(135deg, #f09090, #d44a4a);
}

.article-thumb-bg.color6 {
	background: linear-gradient(135deg, #6cc4a1, #4ea07e);
}

.article-thumb-bg a {
	width: 100%;
	height: 100%;
	display: block;
}

.article-thumb-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.article-thumb-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	/* 父容器只负责排版，去掉背景与圆角 */
	display: flex;
	gap: 6px; /* 标签之间空隙 */
	flex-wrap: wrap;
}

.article-thumb-badge a {
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(6px);
	border-radius: var(--radius-full);
	text-decoration: none;
}

.article-body {
	padding: 22px 20px 24px;
	display: flex;
	flex-direction: column;
	height: 190px;
	overflow: hidden;
}

.article-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	color: var(--color-text-muted);
	margin-bottom: 12px;
}

.article-category {
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 600;
	background: var(--color-bg-tag);
	color: var(--color-text-secondary);
	border-radius: var(--radius-full);
}

.article-card-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 10px;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.article-summary {
	font-size: 13.5px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-read-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: auto;
	padding-top: 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	transition: gap var(--transition);
	white-space: nowrap;
}

.article-read-more:hover {
	gap: 8px;
}

.article-read-more svg {
	width: 12px;
	height: 12px;
}

/* =========================================
   页脚区域
   深色背景页脚，包含品牌信息、导航链接、社交媒体与版权声明
========================================= */
.footer {
	background: var(--footer-bg);
	color: var(--footer-text);
	padding: 72px 0 0;
	position: relative;
	overflow: hidden;
}

.footer::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(76, 175, 125, 0.6), transparent);
}

.footer-bg-shape {
	position: absolute;
	pointer-events: none;
}

.footer-bg-shape-1 {
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(76, 175, 125, 0.07) 0%, transparent 70%);
	top: -100px;
	right: -80px;
}

.footer-bg-shape-2 {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(100, 160, 255, 0.05) 0%, transparent 70%);
	bottom: 40px;
	left: -60px;
}

.footer-inner {
	position: relative;
	z-index: 1;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 56px;
}

.footer-logo-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	margin-bottom: 16px;
}

.footer-tagline {
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 24px;
	color: rgba(255, 255, 255, 0.55);
}

.footer-social {
	display: flex;
	gap: 10px;
}

.footer-social-btn {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.09);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.6);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.footer-social-btn:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* ===== 页脚社交按钮二维码弹层 ===== */
/* 时间戳：2026年09月03日18时00分00秒 悬停/聚焦弹出二维码图片(JS交互见 main.js) */
/* 2026年09月03日21时00分00秒 加宽至150px并新增账号行(二维码图片下方显示账号,可点击复制) */
.footer-social-qr {
	position: fixed;
	z-index: 1000;
	width: 150px;
	padding: 10px 10px 12px;
	background: #fff;
	border-radius: var(--radius-sm);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	text-align: center;
	pointer-events: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.footer-social-qr.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.footer-social-qr-title {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #333;
	margin-bottom: 8px;
}

.footer-social-qr-img {
	display: block;
	width: 110px;
	height: 110px;
	margin: 0 auto;
	border-radius: 4px;
	background: #f5f5f5;
	object-fit: contain;
}

/* 账号行:二维码图片下方显示平台账号,点击复制 */
.footer-social-qr-account {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	margin-top: 8px;
	padding: 4px 6px;
	font-size: 12px;
	color: #333;
	background: #f4f8f5;
	border: 1px dashed #cfe0d4;
	border-radius: var(--radius-sm);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.footer-social-qr-account:hover {
	background: #e8f1ea;
	border-color: var(--color-primary);
}

.footer-social-qr-copy-icon {
	flex-shrink: 0;
	color: var(--color-primary);
}

.footer-col-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 18px;
}

.footer-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-link {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.5);
	transition: color var(--transition);
}

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

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	padding: 20px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.35);
}

.footer-bottom-links {
	display: flex;
	gap: 20px;
}

.footer-bottom-link {
	color: rgba(255, 255, 255, 0.35);
	transition: color var(--transition);
}

.footer-bottom-link:hover {
	color: rgba(255, 255, 255, 0.7);
}

/* =========================================
   弹窗系统
   通用弹窗覆盖层与模态框基础样式，用于搜索、登录、注册等场景
========================================= */
.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: var(--color-bg-overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.open {
	opacity: 1;
	visibility: visible;
}

.modal {
	background: var(--color-bg-modal);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-modal);
	width: 100%;
	position: relative;
	transform: translateY(12px) scale(0.97);
	transition: transform 0.25s ease;
}

.modal-overlay.open .modal {
	transform: translateY(0) scale(1);
}

.modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-bg-section);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-secondary);
	transition: background var(--transition), color var(--transition);
}

.modal-close:hover {
	background: var(--color-border);
	color: var(--color-text);
}

.modal-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 6px;
}

.modal-sub {
	font-size: 14px;
	color: var(--color-text-muted);
	margin-bottom: 28px;
}

/* =========================================
   showConfirm 动态确认弹窗（使用 modal-show/modal-hide 类切换显示）
   与 .modal-overlay.open 系统并存，互不影响
========================================= */
.modal-overlay.modal-show {
	opacity: 1;
	visibility: visible;
}

.modal-overlay.modal-hide {
	opacity: 0;
	visibility: hidden;
}

.modal-dialog {
	background: var(--color-bg-modal);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-modal);
	width: 100%;
	max-width: 420px;
	padding: 36px 32px 28px;
	position: relative;
	text-align: center;
	transform: translateY(16px) scale(0.96);
	transition: transform 0.25s ease;
}

.modal-overlay.modal-show .modal-dialog {
	transform: translateY(0) scale(1);
}

.modal-overlay.modal-hide .modal-dialog {
	transform: translateY(8px) scale(0.98);
}

.modal-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.modal-icon-wrap {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
}

.modal-icon {
	width: 28px;
	height: 28px;
}

.modal-info .modal-icon-wrap {
	background: rgba(76, 175, 125, 0.12);
	color: var(--color-primary);
}

.modal-success .modal-icon-wrap {
	background: rgba(76, 175, 125, 0.12);
	color: var(--color-primary);
}

.modal-warning .modal-icon-wrap {
	background: rgba(245, 158, 11, 0.12);
	color: #f59e0b;
}

.modal-danger .modal-icon-wrap {
	background: rgba(239, 68, 68, 0.12);
	color: #ef4444;
}

.modal-dialog .modal-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
	margin: 4px 0 2px;
	text-align: center;
}

.modal-message {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0 0 4px;
	text-align: center;
	word-break: break-word;
	max-width: 320px;
}

.modal-password-block {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
	padding: 10px 14px;
	background: var(--color-bg-section);
	border-radius: var(--radius-sm);
	font-size: 13px;
}

.modal-password-label {
	color: var(--color-text-muted);
	font-weight: 500;
}

.modal-password-value {
	color: var(--color-text);
	font-weight: 700;
	font-family: ui-monospace, "SF Mono", Consolas, monospace;
	letter-spacing: 0.05em;
}

.modal-copy-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--transition);
}

.modal-copy-btn:hover {
	background: var(--color-primary-hover);
}

.modal-copy-btn.copied {
	background: var(--color-primary);
}

.modal-copy-btn svg {
	width: 12px;
	height: 12px;
}

.modal-footer {
	display: flex;
	gap: 10px;
	margin-top: 22px;
	justify-content: center;
}

.modal-footer-single {
	justify-content: center;
}

.modal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--radius-sm);
	border: none;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), opacity var(--transition);
	min-width: 100px;
}

.modal-btn svg {
	width: 14px;
	height: 14px;
}

.modal-btn-cancel {
	background: var(--color-bg-section);
	color: var(--color-text-secondary);
}

.modal-btn-cancel:hover {
	background: var(--color-border);
	color: var(--color-text);
}

.modal-btn-confirm {
	background: var(--color-primary);
	color: #fff;
}

.modal-btn-confirm:hover {
	background: var(--color-primary-hover);
}

.modal-btn-confirm:disabled,
.modal-btn.is-loading {
	opacity: 0.7;
	cursor: not-allowed;
}

.modal-btn-text {
	line-height: 1;
}

/* 余额不足模式样式（2026年06月30日21时30分00秒新增） */
/* 设计说明：配合 main.js showConfirm 的 balanceSufficient=false 模式 */
/*          - 消息文字红色高亮提醒用户余额不足 */
/*          - 确认按钮视觉置灰（保留 disabled 阻止点击） */
.modal-message-insufficient {
	color: #ef4444;
	font-weight: 600;
}

.modal-btn-confirm.is-insufficient {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--color-border);
}

/* 类型变体（按钮颜色） */
.modal-warning .modal-btn-confirm {
	background: #f59e0b;
}

.modal-warning .modal-btn-confirm:hover {
	background: #d97706;
}

.modal-danger .modal-btn-confirm {
	background: #ef4444;
}

.modal-danger .modal-btn-confirm:hover {
	background: #dc2626;
}

.modal-info .modal-btn-confirm,
.modal-success .modal-btn-confirm {
	background: var(--color-primary);
}

.modal-info .modal-btn-confirm:hover,
.modal-success .modal-btn-confirm:hover {
	background: var(--color-primary-hover);
}

/* 搜索弹窗 */
.search-modal {
	max-width: 600px;
	padding: 48px 40px 40px;
}

.search-input-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: var(--color-bg-input);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition);
}

.search-input-wrap:focus-within {
	border-color: var(--color-primary);
}

.search-input-wrap svg {
	width: 18px;
	height: 18px;
	color: var(--color-text-muted);
	flex-shrink: 0;
}

.search-input {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 16px;
	color: var(--color-text);
}

.search-input::placeholder {
	color: var(--color-text-muted);
}

.search-results-empty {
	margin-top: 24px;
	text-align: center;
	font-size: 14px;
	color: var(--color-text-muted);
	padding: 32px 0;
}

.search-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.search-tag {
	padding: 5px 13px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: var(--color-bg-section);
	border-radius: var(--radius-full);
	transition: background var(--transition), color var(--transition);
}

.search-tag:hover {
	background: var(--color-primary-light);
	color: var(--color-primary-hover);
}

.search-tags-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
	margin-bottom: 10px;
}

/* 认证弹窗（登录/注册） */
.auth-modal {
	max-width: 420px;
	padding: 44px 38px 40px;
}

.form-group {
	margin-bottom: 18px;
}

.form-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 6px;
}

.form-input {
	width: 100%;
	padding: 11px 16px;
	font-size: 15px;
	color: var(--color-text);
	background: var(--color-bg-input);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition);
}

.form-input:focus {
	border-color: var(--color-primary);
}

.form-input::placeholder {
	color: var(--color-text-muted);
}

/* 自定义 select 下拉框样式，隐藏浏览器默认箭头，使用 icons.svg 中的 chevron-down 图标 */
/* 设计说明：form-select-wrap 作为相对定位容器，select 设置 appearance:none 隐藏原生箭头 */
/*           form-select-arrow 绝对定位在容器右侧，pointer-events:none 避免遮挡 select 点击 */
.form-select-wrap {
	position: relative;
}

.form-select-wrap select.form-input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 36px;
	cursor: pointer;
	background-image: none;
}

.form-select-arrow {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-muted);
	pointer-events: none;
	transition: color var(--transition);
}

.form-select-wrap select.form-input:hover + .form-select-arrow,
.form-select-wrap select.form-input:focus + .form-select-arrow {
	color: var(--color-primary);
}

.form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	margin-top: -4px;
	margin-bottom: 20px;
}

.form-check {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--color-text-secondary);
}

.form-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--color-primary);
}

.form-link {
	font-size: 13px;
	color: var(--color-primary);
	font-weight: 500;
}

.form-link:hover {
	text-decoration: underline;
}

.btn-block {
	width: 100%;
	padding: 12px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	border-radius: var(--radius-sm);
	transition: background var(--transition), box-shadow var(--transition);
}

.btn-block:hover {
	background: var(--color-primary-hover);
	box-shadow: 0 2px 8px rgba(76, 175, 125, 0.30);
}

.auth-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 24px 0;
	font-size: 12px;
	color: var(--color-text-muted);
}

.auth-divider::before,
.auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

.auth-social {
	display: flex;
	gap: 12px;
}

.auth-social-btn {
	flex: 1;
	padding: 10px;
	border-radius: var(--radius-sm);
	background: var(--color-bg-input);
	border: 1.5px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-secondary);
	transition: background var(--transition), border-color var(--transition);
}

.auth-social-btn:hover {
	background: var(--color-bg-section);
	border-color: var(--color-text-muted);
}

.auth-social-btn svg {
	width: 16px;
	height: 16px;
}

.auth-switch {
	text-align: center;
	margin-top: 22px;
	font-size: 13.5px;
	color: var(--color-text-muted);
}

.auth-switch button {
	background: none;
	color: var(--color-primary);
	font-weight: 600;
	font-size: 13.5px;
}

/* =========================================
   滚动显示动画
   元素进入视口时的渐显上移动画，支持多级延迟
========================================= */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
	opacity: 1;
	transform: none;
}

.reveal-delay-1 {
	transition-delay: 0.08s;
}

.reveal-delay-2 {
	transition-delay: 0.16s;
}

.reveal-delay-3 {
	transition-delay: 0.24s;
}

.reveal-delay-4 {
	transition-delay: 0.32s;
}

.reveal-delay-5 {
	transition-delay: 0.40s;
}

.reveal-delay-6 {
	transition-delay: 0.48s;
}

/* =========================================
   响应式适配
   针对不同屏幕宽度的媒体查询断点适配
========================================= */
@media (max-width: 1024px) {
	.features-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.articles-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}
}

/* 时间戳: 2026年07月30日20时45分00秒 修复窄屏下登录/注册按钮被菜单挤出视口的问题
 * 问题原因: .nav-menu 有 flex:1 但 min-width:auto 不收缩(内容宽760px),
 *           视口<约1120px 时 .nav-right(含登录/注册按钮)被挤出视口右侧不可见
 * 修复方案: 提前在 1024px 切换为汉堡菜单,隐藏桌面菜单和按钮区,与 768px 以下行为一致
 * 性能影响: 纯CSS,零JS,零布局抖动
 *
 * 时间戳: 2026年10月15日16时05分00秒 断点由 1024px 提升至 1280px（修复 1025~1280px 区间导航重叠）
 * 问题复现: 视口约 1055px 时"关于悉思"被搜索按钮遮挡、"联系我们"与"登录"按钮重叠
 * 根因分析: 桌面菜单完整显示所需视口宽度超出容器可用宽度,
 *           原 1024px 断点使得 1025~1244px 区间菜单溢出容器(菜单项 white-space:nowrap 不换行),
 *           溢出内容叠加在 .nav-right 之上形成视觉重叠。
 *
 * 时间戳: 2026年10月15日16时45分00秒 断点由 1280px 收紧至 1264px（Playwright 实测校准）
 * 实测数据(视口1300px): Logo=108px + 菜单=852px + nav-right=220px = 1180px 内容需求,
 *           叠加 .container-wide 左右 padding(64px) 后最小视口需求 = 1244px;
 *           在此基础上预留 20px 余量(覆盖垂直滚动条约15px 与字体渲染差异),断点定为 1264px。
 *           原 1280px 比实测需求多留 36px,导致 1245~1280px 本可显示桌面菜单却被切换为汉堡菜单(观感偏宽)。
 * 性能影响: 纯CSS 断点调整,零JS,零布局抖动,不影响 QPS
 */
@media (max-width: 1264px) {

	.nav-menu,
  .nav-right {
		display: none;
	}

	.nav-hamburger {
		display: flex;
	}
}

@media (max-width: 768px) {

	.hero-inner {
		min-height: 520px;
	}

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

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

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

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

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

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

	.section {
		padding: 60px 0;
	}

	.modal {
		margin: 0 8px;
	}

	.search-modal {
		padding: 36px 24px 32px;
	}

	.auth-modal {
		padding: 36px 24px 32px;
	}

	.ambient-orb--1 {
		width: 200px;
		height: 200px;
	}

	.ambient-orb--2 {
		width: 160px;
		height: 160px;
	}

	.ambient-orb--3 {
		width: 120px;
		height: 120px;
	}

	.data-line--1,
  .data-line--2 {
		width: 180px;
	}

	.particle:nth-child(n+7) {
		display: none;
	}
}

@media (max-width: 480px) {

	.container,
  .container-wide {
		padding: 0 16px;
	}

	.hero {
		padding-top: 80px;
		padding-bottom: 60px;
	}

	.feature-card {
		padding: 24px 20px;
	}

	.compare-card {
		padding: 24px 18px;
	}

	.service-card {
		padding: 32px 22px;
	}

	.article-body {
		padding: 18px 16px 20px;
	}

	.articles-tabs {
		gap: 2px;
	}

	.articles-tab {
		padding: 7px 14px;
		font-size: 13px;
	}
}

/* 移动端导航抽屉菜单 */
.nav-mobile {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999;
}

.nav-mobile.open {
	display: block;
}

.nav-mobile-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
}

.nav-mobile-panel {
	position: relative;
	z-index: 1;
	background: var(--color-bg-modal);
	width: 280px;
	height: 100%;
	padding: 72px 24px 32px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow-y: auto;
	margin-left: auto;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
}

.nav-mobile-link {
	display: block;
	padding: 11px 14px;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text);
	border-radius: var(--radius-sm);
	transition: background var(--transition);
}

.nav-mobile-link:hover {
	background: var(--color-bg-section);
}

.nav-mobile-sub {
	padding-left: 14px;
}

.nav-mobile-sub .nav-mobile-link {
	font-size: 14px;
	color: var(--color-text-secondary);
	padding: 8px 14px;
}

/* 时间戳: 2026年09月23日20时20分00秒 新增移动端三级导航缩进
   背景：移动端抽屉原仅展开一层子栏目，三级栏目需要再缩进一层以体现层级。
   设计说明：复用 .nav-mobile-sub 的缩进节奏（每级 +14px），三级项字号再收一档、
         颜色降一级，纯缩进分组，不引入新的交互控件（避免与现有汉堡菜单 JS 冲突）。 */
.nav-mobile-sub2 {
	padding-left: 14px;
}

.nav-mobile-sub2 .nav-mobile-link {
	font-size: 13px;
	color: var(--color-text-muted);
	padding: 7px 14px;
}

.nav-mobile-divider {
	height: 1px;
	background: var(--color-border);
	margin: 8px 0;
}

.nav-mobile-actions {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 20px;
}

/* 时间戳: 2026年07月30日21时05分00秒 修复移动端登录/注册按钮无间隔的问题
 * 问题原因: .nav-mobile-actions 的 gap 仅作用于直接子元素 #userActionsMobile,
 *           内部两个 a 按钮紧挨(display:block), 父容器无 gap 设置
 * 修复方案: 给 #userActionsMobile 加 flex 纵向布局 + gap:10px, 与 .nav-mobile-actions 间距保持一致
 */
#userActionsMobile {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* 时间戳: 2026年10月13日10时30分00秒 方案A优化:与桌面端 #userActions 同步默认隐藏,避免闪烁 */
	visibility: hidden;
}

.nav-mobile-actions .btn-primary-sm {
	text-align: center;
	display: block;
	padding: 11px 16px;
	font-size: 15px;
	border-radius: var(--radius-sm);
}

.nav-mobile-actions .btn-ghost {
	text-align: center;
	display: block;
	padding: 11px 16px;
	font-size: 15px;
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--color-border);
}

/* 移动端导航内嵌主题切换按钮 */
.nav-mobile-theme-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	margin: 8px 0;
}

.nav-mobile-theme-row span {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
}

.nav-mobile-theme-row button {
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	background: var(--color-bg-section);
	color: var(--color-text-secondary);
	border-radius: var(--radius-sm);
}

/* =========================================
   返回顶部按钮
   纯色圆形按钮，含进度环 + 内联 SVG 箭头
   由 main.js 动态创建，无需 HTML 硬编码
========================================= */
.back-to-top {
	position: fixed;
	bottom: 32px;
	right: 32px;
	z-index: 900;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.28s ease,
	visibility 0.28s ease,
	transform 0.28s ease,
	background var(--transition),
	box-shadow var(--transition);
	box-shadow: 0 4px 14px rgba(76, 175, 125, 0.35);
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.back-to-top:focus-visible {
	box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.4), 0 4px 14px rgba(76, 175, 125, 0.35);
}

.back-to-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	background: var(--color-primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(76, 175, 125, 0.45);
}

.back-to-top:active {
	transform: scale(0.94);
}

/* 箭头图标 */
.back-to-top .btp-icon {
	width: 20px;
	height: 20px;
	position: relative;
	z-index: 2;
	pointer-events: none;
}

/* 圆形进度环 SVG */
.back-to-top .progress-ring {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.back-to-top .progress-ring circle {
	fill: none;
	stroke: rgba(255, 255, 255, 0.22);
	stroke-width: 3;
}

.back-to-top .progress-ring circle.progress {
	stroke: rgba(255, 255, 255, 0.75);
	stroke-linecap: round;
	transition: stroke-dashoffset 0.12s linear;
	transform: rotate(-90deg);
	transform-origin: center;
}

/* ── 移动端适配 ── */
@media (max-width: 768px) {
	.back-to-top {
		width: 42px;
		height: 42px;
		bottom: 24px;
		right: 20px;
		box-shadow: 0 3px 10px rgba(76, 175, 125, 0.30);
	}

	.back-to-top:hover {
		box-shadow: 0 5px 16px rgba(76, 175, 125, 0.40);
	}

	.back-to-top .btp-icon {
		width: 18px;
		height: 18px;
	}
}

/* =========================================
   扩展变量 — 语义色与强调色
   补充定义强调色、状态色、页面头部背景等语义化变量
========================================= */
:root {
	--color-accent: #6baed6;
	--color-accent-hover: #4a8fbb;
	--color-danger: #e74c3c;
	--color-success: #27ae60;
	--color-warning: #f39c12;
	--color-info: #3498db;
	--transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	--page-header-bg: linear-gradient(180deg, #eef6ff 0%, #f0f9f4 50%, #f8fbff 100%);
}

[data-theme="dark"] {
	--page-header-bg: linear-gradient(180deg, #1c2d3a 0%, #1a2824 50%, #151a22 100%);
}

/* =========================================
   布局工具类 — 扩展
   补充窄容器等布局辅助类
========================================= */
.container-narrow {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 24px;
}

/* =========================================
   导航栏 — 激活状态
   当前页面导航项的高亮样式
========================================= */
.nav-link.active {
	color: var(--color-primary);
	font-weight: 600;
}

.nav-mobile-link.active {
	color: var(--color-primary);
	font-weight: 600;
}

/* =========================================
   按钮 — 扩展变体
   主要、次要、轮廓等多种按钮样式与悬停效果
========================================= */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	font-size: 16.5px;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	border-radius: var(--radius-full);
	transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
	box-shadow: 0 4px 18px rgba(76, 175, 125, 0.32);
}

.btn-primary:hover {
	background: var(--color-primary-hover);
	box-shadow: 0 8px 28px rgba(76, 175, 125, 0.42);
	transform: translateY(-2px);
}

.btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	font-size: 16.5px;
	font-weight: 500;
	color: var(--color-text);
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-secondary:hover {
	border-color: rgba(76, 175, 125, 0.35);
	box-shadow: 0 4px 16px rgba(76, 175, 125, 0.10);
	transform: translateY(-2px);
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary);
	background: transparent;
	border: 1.5px solid var(--color-primary);
	border-radius: var(--radius-full);
	transition: all var(--transition);
}

.btn-outline:hover {
	background: var(--color-primary);
	color: #fff;
}

/* =========================================
   表单 — 扩展
   文本域、错误提示、成功消息等扩展表单样式
========================================= */
.form-textarea {
	width: 100%;
	padding: 11px 16px;
	font-size: 15px;
	color: var(--color-text);
	background: var(--color-bg-input);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition);
	resize: vertical;
	min-height: 120px;
}

.form-textarea:focus {
	border-color: var(--color-primary);
}

.form-error {
	font-size: 12px;
	color: var(--color-danger);
	margin-top: 4px;
	display: none;
}

.form-error.visible {
	display: block;
}

.form-input.error {
	border-color: var(--color-danger);
}

.form-success-msg {
	text-align: center;
	padding: 40px 20px;
	color: var(--color-success);
}

.form-success-msg svg {
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
}

/* =========================================
   页面头部 — 子页面主视觉
   子页面顶部的标题区域，含徽章、面包屑与点阵背景
========================================= */
.page-header {
	padding-top: 140px;
	padding-bottom: 60px;
	background: var(--page-header-bg);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.page-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(76, 175, 125, 0.06) 1px, transparent 1px);
	background-size: 40px 40px;
	pointer-events: none;
}

.page-header-inner {
	position: relative;
	z-index: 1;
}

.page-header-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	background: var(--color-primary-light);
	border-radius: var(--radius-full);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary-hover);
	margin-bottom: 20px;
}

.page-header-badge span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
	display: inline-block;
}

.page-header-title {
	font-size: clamp(32px, 5vw, 52px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: var(--color-text);
	margin-bottom: 16px;
}

.page-header-sub {
	font-size: clamp(16px, 2.2vw, 19px);
	color: var(--color-text-secondary);
	line-height: 1.65;
	max-width: 800px;
	margin: 0 auto;
}

.page-header-breadcrumb {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 24px;
}

.page-header-breadcrumb a {
	color: var(--color-text-secondary);
	transition: color var(--transition);
}

.page-header-breadcrumb a:hover {
	color: var(--color-primary);
}

.page-header-breadcrumb .sep {
	color: var(--color-border);
}

/* =========================================
   卡片 — 通用
   通用卡片组件样式，含图标、标题、描述与悬停效果
========================================= */
.card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 32px 28px;
	transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.card:hover {
	box-shadow: var(--shadow-card-hover);
	border-color: rgba(76, 175, 125, 0.25);
	transform: translateY(-3px);
}

.card-icon-wrap {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	color: var(--color-primary);
	font-size: 22px;
}

.card-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 10px;
}

.card-desc {
	font-size: 14.5px;
	color: var(--color-text-secondary);
	line-height: 1.65;
}

/* =========================================
   徽章 / 标签
   多种颜色的状态徽章与标签样式
========================================= */
.badge {
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	border-radius: var(--radius-full);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.badge-primary {
	background: var(--color-primary-light);
	color: var(--color-primary-hover);
}

.badge-accent {
	background: rgba(107, 174, 214, 0.12);
	color: var(--color-accent-hover);
}

.badge-warning {
	background: rgba(243, 156, 18, 0.12);
	color: #d68910;
}

.badge-danger {
	background: rgba(231, 76, 60, 0.10);
	color: var(--color-danger);
}

/* =========================================
   骨架屏加载
   内容加载前的占位骨架动画效果
========================================= */
.skeleton {
	background: linear-gradient(90deg, var(--color-bg-section) 25%, var(--color-border) 50%, var(--color-bg-section) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s ease-in-out infinite;
	border-radius: var(--radius-sm);
}

@keyframes shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* =========================================
   消息提示
   轻量级全局消息提示条，支持成功、错误、信息三种状态
========================================= */
.toast {
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	z-index: 3000;
	padding: 12px 24px;
	border-radius: var(--radius-full);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	white-space: nowrap;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.toast.show {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.toast-success {
	background: var(--color-success);
}

.toast-error {
	background: var(--color-danger);
}

.toast-info {
	background: var(--color-info);
}

/* =========================================
   showMessage 动态 Toast 弹窗（使用 toast-container/toast-message/toast-show/toast-hide 类）
   与单数 .toast 系统并存，互不影响
   类型：info(蓝)/success(绿)/warning(橙)/danger(红)
========================================= */
.toast-container {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 4000;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: calc(100vw - 48px);
	pointer-events: none;
}

.toast-message {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 280px;
	max-width: 380px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--color-text);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
	border-left: 4px solid var(--color-info);
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	visibility: hidden;
	transform: translateX(120%);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
	pointer-events: auto;
}

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

.toast-message.toast-hide {
	opacity: 0;
	visibility: hidden;
	transform: translateX(120%);
}

.toast-message.toast-info {
	border-left-color: var(--color-info);
}

.toast-message.toast-info .toast-icon {
	color: var(--color-info);
}

.toast-message.toast-success {
	border-left-color: var(--color-success);
}

.toast-message.toast-success .toast-icon {
	color: var(--color-success);
}

.toast-message.toast-warning {
	border-left-color: #f59e0b;
}

.toast-message.toast-warning .toast-icon {
	color: #f59e0b;
}

.toast-message.toast-danger {
	border-left-color: var(--color-danger);
}

.toast-message.toast-danger .toast-icon {
	color: var(--color-danger);
}

.toast-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.toast-icon svg {
	width: 20px;
	height: 20px;
}

.toast-content {
	flex: 1 1 auto;
	line-height: 1.5;
	word-break: break-word;
}

.toast-close {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text-secondary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.15s ease, color 0.15s ease;
}

.toast-close:hover {
	background: rgba(0, 0, 0, 0.06);
	color: var(--color-text);
}

[data-theme="dark"] .toast-message {
	background: var(--color-bg-modal);
	color: var(--color-text);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .toast-close {
	color: var(--color-text-secondary);
}

[data-theme="dark"] .toast-close:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-text);
}

@media (max-width: 480px) {
	.toast-container {
		top: 12px;
		right: 12px;
		left: 12px;
		max-width: none;
	}

	.toast-message {
		min-width: 0;
		max-width: none;
		width: 100%;
	}
}

/* =========================================
   响应式适配 — 扩展
   子页面头部与窄容器的移动端适配
========================================= */
@media (max-width: 768px) {
	.page-header {
		padding-top: 110px;
		padding-bottom: 48px;
	}
}

@media (max-width: 480px) {
	.container-narrow {
		padding: 0 16px;
	}

	.page-header {
		padding-top: 96px;
		padding-bottom: 40px;
	}
}

/* =========================================
   案例展示页面
   案例卡片网格、筛选按钮与案例详情样式
========================================= */
.cases-filter {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.cases-filter-btn {
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-secondary);
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	transition: all var(--transition);
}

.cases-filter-btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.cases-filter-btn.active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.cases-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

.case-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--transition), transform var(--transition);
	height: 370px;
}

.case-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-4px);
}

.case-card-image {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	position: relative;
}

.case-card-image.ci1 {
	background: linear-gradient(135deg, #e8f7ef, #d4f0e0);
}

.case-card-image.ci2 {
	background: linear-gradient(135deg, #e3f0fa, #d0e4f5);
}

.case-card-image.ci3 {
	background: linear-gradient(135deg, #fef6e4, #faecc8);
}

.case-card-image.ci4 {
	background: linear-gradient(135deg, #f0e8fa, #e3d4f5);
}

.case-card-image.ci5 {
	background: linear-gradient(135deg, #fde8e8, #fad0d0);
}

.case-card-image.ci6 {
	background: linear-gradient(135deg, #e6f5f0, #cfe8dd);
}

.case-card-image .case-industry-tag {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.85);
	border-radius: var(--radius-full);
	color: var(--color-text-secondary);
	backdrop-filter: blur(4px);
}

/* 新增：控制内部a链接与图片 */
.case-card-image a {
	width: 100%;
	height: 100%;
	display: block;
}

.case-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.case-card-body {
	padding: 24px 22px 28px;
	display: flex;
	flex-direction: column;
	height: 190px;
	overflow: hidden;
}

.case-card-body h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.case-card-body p {
	font-size: 13.5px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin-bottom: 14px;
}

.case-results {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.case-result {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--color-primary);
	padding: 4px 12px;
	background: var(--color-primary-pale);
	border-radius: var(--radius-full);
}

.case-results a {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--color-primary);
	padding: 4px 12px;
	background: var(--color-primary-pale);
	border-radius: var(--radius-full);
	text-decoration: none;
}


.case-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: auto;
	padding-top: 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	transition: gap var(--transition);
}

.case-card-cta:hover {
	gap: 8px;
}

/* 案例详情内联区块 */
.case-detail-section {
	padding: 60px 0;
}

.case-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-primary);
	margin-bottom: 28px;
	transition: gap var(--transition);
}

.case-back-link:hover {
	gap: 10px;
}

.case-back-link svg {
	transform: rotate(180deg);
}

.case-detail-hero {
	height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 80px;
	border-radius: var(--radius-sm);
	margin-bottom: 0;
}

.case-detail-hero.ch1 {
	background: linear-gradient(135deg, #e8f7ef, #d4f0e0);
}

.case-detail-hero.ch2 {
	background: linear-gradient(135deg, #e3f0fa, #d0e4f5);
}

.case-detail-hero.ch3 {
	background: linear-gradient(135deg, #fef6e4, #faecc8);
}

.case-detail-hero.ch4 {
	background: linear-gradient(135deg, #f0e8fa, #e3d4f5);
}

.case-detail-hero.ch5 {
	background: linear-gradient(135deg, #fde8e8, #fad0d0);
}

.case-detail-hero.ch6 {
	background: linear-gradient(135deg, #e6f5f0, #cfe8dd);
}

.case-detail-content {
	padding: 36px 0 0;
}

.case-detail-content h2 {
	font-size: 26px;
	font-weight: 800;
	margin-bottom: 8px;
	color: var(--color-text);
}

.case-detail-meta {
	display: flex;
	gap: 16px;
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.case-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 24px 0;
}

.case-metric {
	text-align: center;
	padding: 20px 16px;
	background: var(--color-primary-pale);
	border-radius: var(--radius-sm);
}

.case-metric .val {
	font-size: 28px;
	font-weight: 800;
	color: var(--color-primary);
}

.case-metric .lbl {
	font-size: 12px;
	color: var(--color-text-secondary);
	margin-top: 4px;
}

.case-detail-body {
	font-size: 15.5px;
	color: var(--color-text-secondary);
	line-height: 1.8;
}

.case-detail-body h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
	margin: 24px 0 10px;
}

.case-testimonial {
	background: var(--color-bg-section);
	padding: 24px;
	border-radius: var(--radius-sm);
	margin-top: 24px;
}

.case-testimonial blockquote {
	font-size: 14.5px;
	font-style: italic;
	color: var(--color-text-secondary);
	line-height: 1.7;
	margin-bottom: 12px;
}

.case-testimonial .cite {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
}

@media (max-width: 1024px) {
	.cases-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.cases-grid {
		grid-template-columns: 1fr;
	}

	.case-metrics {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}

	.case-metric {
		padding: 14px 10px;
	}

	.case-metric .val {
		font-size: 22px;
	}

	.case-detail-content {
		padding: 24px 0 0;
	}

	.case-detail-hero {
		height: 180px;
		font-size: 56px;
	}
}

/* =========================================
   文章列表页面
   文章筛选栏、搜索框、卡片网格与分页组件
========================================= */
.articles-filter-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 36px;
	/* 筛选栏整体单行排布：标签区溢出由“更多”下拉收纳，避免把搜索框挤到下一行 */
	flex-wrap: nowrap;
}

/* 标签区：单行不换行，可用宽度不足时由 JS 把放不下的标签收进“更多”面板；
   保留横向滚动作为 JS 未生效时的兜底（隐藏滚动条，视觉上仍是单行） */
.articles-filter-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: nowrap;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.articles-filter-tabs::-webkit-scrollbar {
	display: none;
}

.articles-filter-tab {
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 600;
	background: transparent;
	color: var(--color-text-secondary);
	border-radius: var(--radius-full);
	border: 1px solid transparent;
	transition: all var(--transition);
	/* 标签保持自身内容宽度，避免被压缩时文字换行导致单行测量失真 */
	white-space: nowrap;
	flex-shrink: 0;
}

.articles-filter-tab:hover {
	color: var(--color-text);
	background: var(--color-bg-section);
	border-color: var(--color-border);
}

.articles-filter-tab.active {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

/* =========================================
   文章筛选标签溢出收纳（“更多”下拉）
   标签过多放不下一行时，JS 把溢出标签移入 #filterMorePanel，
   复用导航下拉的既有令牌（bg-modal/边框/圆角/阴影），不引入新配色
========================================= */
.articles-filter-more {
	position: relative;
	/* 不参与压缩，保证“更多”按钮始终完整可见 */
	flex: 0 0 auto;
}

.articles-filter-more[hidden] {
	display: none;
}

.articles-filter-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.articles-filter-more-btn svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	transition: transform var(--transition);
}

/* 展开时箭头翻转，与导航下拉的箭头动效语言一致 */
.articles-filter-more.open .articles-filter-more-btn svg {
	transform: rotate(180deg);
}

.articles-filter-more-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	min-width: 168px;
	max-width: 240px;
	padding: 8px;
	background: var(--color-bg-modal);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.articles-filter-more.open .articles-filter-more-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* 面板内标签：纵向排列、整行可点、左对齐，与筛选标签同视觉但弱化为列表项 */
.articles-filter-more-panel .articles-filter-tab {
	display: block;
	width: 100%;
	padding: 10px 14px;
	text-align: left;
	font-weight: 500;
	border-radius: var(--radius-sm);
}

.articles-filter-more-panel .articles-filter-tab a {
	display: block;
}

.articles-search-wrap {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--color-bg-input);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	transition: border-color var(--transition);
	min-width: 240px;
}

.articles-search-wrap:focus-within {
	border-color: var(--color-primary);
}

.articles-search-wrap svg {
	width: 16px;
	height: 16px;
	color: var(--color-text-muted);
	flex-shrink: 0;
}

.articles-search-wrap input {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 14px;
	color: var(--color-text);
}

.articles-search-wrap input::placeholder {
	color: var(--color-text-muted);
}

/* 文章缩略图渐变色变体（短类名） */
.article-thumb-bg.c1 {
	background: linear-gradient(135deg, #5DC48A, #3d9e6e);
}

.article-thumb-bg.c2 {
	background: linear-gradient(135deg, #6baed6, #4a8fbb);
}

.article-thumb-bg.c3 {
	background: linear-gradient(135deg, #f0c75e, #daa520);
}

.article-thumb-bg.c4 {
	background: linear-gradient(135deg, #a68ad4, #7e5fc4);
}

.article-thumb-bg.c5 {
	background: linear-gradient(135deg, #f09090, #d44a4a);
}

.article-thumb-bg.c6 {
	background: linear-gradient(135deg, #6cc4a1, #4ea07e);
}

/* 分页组件 */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 48px;
}

.pagination-btn {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-secondary);
	background: transparent;
	border: 1.5px solid var(--color-border);
	transition: all var(--transition);
}

.pagination-btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.pagination-btn.active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.pagination-btn:disabled {
	opacity: 0.4;
	pointer-events: none;
}

@media (max-width: 768px) {
	/* 移动端混合策略：不做“更多”收纳，改为标签横滑 + 两端渐隐（触屏原生横滑手感、无点击折损），
	   搜索框独占下一行；桌面端仍由“更多”下拉收纳（见上方 .articles-filter-more 规则） */
	.articles-filter-bar {
		flex-wrap: wrap;
	}

	.articles-filter-tabs {
		flex: 1 1 0;
		-webkit-overflow-scrolling: touch;
	}

	/* 仅在标签确实溢出时（由 main.js 添加 is-overflow 类）才做两端渐隐，提示左右还有标签；
	   起点只隐右侧、末端只隐左侧、中间两端渐隐（is-start / is-end 由 main.js 随滚动维护） */
	.articles-filter-tabs.is-overflow {
		--filter-fade-left: 40px;
		--filter-fade-right: 40px;
		mask-image: linear-gradient(90deg, transparent 0, #000 var(--filter-fade-left), #000 calc(100% - var(--filter-fade-right)), transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--filter-fade-left), #000 calc(100% - var(--filter-fade-right)), transparent 100%);
	}

	.articles-filter-tabs.is-overflow.is-start {
		--filter-fade-left: 0px;
	}

	.articles-filter-tabs.is-overflow.is-end {
		--filter-fade-right: 0px;
	}

	/* “更多”按钮仅用于桌面端收纳，移动端隐藏，避免与横滑手势重复 */
	.articles-filter-more {
		display: none;
	}

	.articles-search-wrap {
		flex: 1 1 100%;
		margin-left: 0;
		min-width: auto;
	}
}

/* =========================================
   产品列表页面
   产品分类筛选、产品卡片网格与特性高亮
========================================= */
.product-categories {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.product-cat-btn {
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-secondary);
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	transition: all var(--transition);
}

.product-cat-btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.product-cat-btn.active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

.product-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0;
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
	display: flex;
	flex-direction: column;
	height: 370px;
}

.product-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-4px);
}

.product-card-header {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 56px;
	position: relative;
	overflow: hidden;
}

.product-card-header.h1 {
	background: linear-gradient(135deg, #e8f7ef, #d4f0e0);
}

.product-card-header.h2 {
	background: linear-gradient(135deg, #e3f0fa, #d0e4f5);
}

.product-card-header.h3 {
	background: linear-gradient(135deg, #fef6e4, #faecc8);
}

.product-card-header.h4 {
	background: linear-gradient(135deg, #f0e8fa, #e3d4f5);
}

.product-card-header.h5 {
	background: linear-gradient(135deg, #fde8e8, #fad0d0);
}

.product-card-header.h6 {
	background: linear-gradient(135deg, #e6f5f0, #cfe8dd);
}

.product-card-header .prod-header-tag {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.85);
	border-radius: var(--radius-full);
	color: var(--color-text-secondary);
	backdrop-filter: blur(4px);
}

.product-card-header a {
	width: 100%;
	height: 100%;
	display: block;
}

.product-card-header img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


.product-card-body {
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	height: 190px;
	overflow: hidden;
}

.product-card-title {
	font-size: 19px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 10px;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 0;
}

.product-card-desc {
	font-size: 14.5px;
	color: var(--color-text-secondary);
	line-height: 1.65;
	margin-bottom: 16px;
	flex-shrink: 0;
}

.product-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.product-spec {
	padding: 4px 10px;
	font-size: 11.5px;
	background: var(--color-bg-tag);
	color: var(--color-text-secondary);
	border-radius: var(--radius-sm);
}

/* 标签链接样式，完全继承 .product-spec 外观 */
.product-specs a {
	padding: 4px 10px;
	font-size: 11.5px;
	background: var(--color-bg-tag);
	color: var(--color-text-secondary);
	border-radius: var(--radius-sm);
	text-decoration: none; /* 去除链接下划线 */
	transition: opacity 0.2s; /* 可选：hover过渡效果 */
}

.product-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: auto;
	padding-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary);
	transition: gap var(--transition);
}

.product-card-cta:hover {
	gap: 8px;
}

/* 特性高亮区块 */
.feature-highlight {
	padding: 60px 0;
	background: var(--color-bg-section);
}

.feature-highlight-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.feature-hl-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 28px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	transition: box-shadow var(--transition);
}

.feature-hl-card:hover {
	box-shadow: var(--shadow-card-hover);
}

.feature-hl-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 24px;
}

.feature-hl-text h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 6px;
}

.feature-hl-text p {
	font-size: 13.5px;
	color: var(--color-text-secondary);
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {

	.products-grid,
  .feature-highlight-grid {
		grid-template-columns: 1fr;
	}

	.product-categories {
		gap: 4px;
	}

	.product-cat-btn {
		padding: 8px 16px;
		font-size: 13px;
	}
}

/* =========================================
   加入我们页面
   职位列表、福利待遇介绍与职位筛选
========================================= */
.join-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	margin-bottom: 60px;
}

.join-intro-image {
	height: 340px;
	border-radius: var(--radius-sm);
	background: linear-gradient(135deg, #f0e8fa, #e3d4f5, #d4c4f0);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 90px;
}

.join-intro-text h2 {
	font-size: 30px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 16px;
}

.join-intro-text p {
	font-size: 15.5px;
	color: var(--color-text-secondary);
	line-height: 1.75;
	margin-bottom: 24px;
}

.join-benefits {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.join-benefit {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var(--color-bg-section);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
}

.jobs-filter {
	display: flex;
	gap: 8px;
	margin-bottom: 36px;
	flex-wrap: wrap;
}

.jobs-filter-btn {
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-secondary);
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	transition: all var(--transition);
}

.jobs-filter-btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.jobs-filter-btn.active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.jobs-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* 手风琴项：单个岗位容器，收起/展开状态切换 */
.job-accordion-item {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: box-shadow var(--transition), border-color var(--transition);
}

.job-accordion-item:hover {
	border-color: rgba(76, 175, 125, 0.25);
}

.job-accordion-item.active {
	border-color: rgba(76, 175, 125, 0.4);
	box-shadow: var(--shadow-card-hover);
}

/* 手风琴头部：可点击按钮，包含岗位标题、meta、展开图标 */
.job-accordion-header {
	width: 100%;
	background: transparent;
	border: none;
	padding: 24px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	transition: background var(--transition);
}

.job-accordion-header:hover {
	background: var(--color-primary-pale);
}

.job-accordion-header:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

.job-info h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 6px;
}

.job-meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--color-text-muted);
}

.job-meta span {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* 展开图标：收起时向下箭头，展开时旋转 180° 并高亮主色 */
.job-accordion-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	background: var(--color-bg-section);
	color: var(--color-text-secondary);
	flex-shrink: 0;
	transition: transform var(--transition), background var(--transition), color var(--transition);
}

.job-accordion-item.active .job-accordion-toggle {
	transform: rotate(180deg);
	background: var(--color-primary);
	color: #fff;
}

/* 手风琴内容区：max-height 0→1200px 实现高度过渡，配合 opacity 渐入 */
.job-accordion-body {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0 32px;
	border-top: 1px solid transparent;
	transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity var(--transition), padding var(--transition), border-top-color var(--transition);
}

.job-accordion-item.active .job-accordion-body {
	max-height: 1200px;
	opacity: 1;
	padding: 24px 32px 28px;
	border-top-color: var(--color-border);
}

/* 职位详情内联区块 */
.job-detail-section {
	margin-bottom: 24px;
}

.job-detail-section:last-of-type {
	margin-bottom: 0;
}

.job-detail-section h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 10px;
}

.job-detail-section ul {
	padding-left: 20px;
}

.job-detail-section li {
	font-size: 14.5px;
	color: var(--color-text-secondary);
	line-height: 1.7;
	margin-bottom: 6px;
}

.job-detail-section li::marker {
	color: var(--color-primary);
}

/* 职位申请表单 */
.apply-form {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px dashed var(--color-border);
}

.apply-form h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 16px;
}

@media (max-width: 768px) {
	.join-intro {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.join-intro-image {
		height: 220px;
		font-size: 64px;
	}

	.join-benefits {
		grid-template-columns: 1fr;
	}

	.job-accordion-header {
		padding: 18px 20px;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.job-accordion-toggle {
		align-self: flex-end;
	}

	.job-accordion-body {
		padding: 0 20px;
	}

	.job-accordion-item.active .job-accordion-body {
		padding: 20px 20px 24px;
	}

	.job-meta {
		gap: 12px;
	}
}

/* ==================== 服务方案页面 ==================== */
/* 服务卡片三卡拖拽切换容器：相对定位+overflow隐藏，鼠标拖拽切换中间featured卡片 */
/* grid 宽度延伸至 container padding 区域，为 far 卡片留出露出空间 */
.services-hero-grid {
	position: relative;
	height: 600px;
	overflow: hidden;
	perspective: 1400px;
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
	touch-action: pan-y;
	width: calc(100% + 200px);
	margin-left: -100px;
}

.services-hero-grid.dragging {
	cursor: grabbing;
}

/* 卡片绝对定位，通过位置类控制位置
 * transform-origin: left center 确保 scale 从左侧中心缩放：
 *   - 水平：left 边缘不受 scale 影响，left 定位精确
 *   - 垂直：以中心缩放，配合 top:50% + translateY(-50%) 实现垂直居中
 * 位置由 JS H_布局计算精确像素值设置到 --pos-x 变量，确保完全对称
 */
.service-hero-card {
	position: absolute;
	top: 50%;
	left: var(--pos-x, 33.333%);
	width: calc((100% - 200px) / 3 - 24px);
	margin: 0 12px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 40px 32px;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translate(0, -50%) scale(0.7);
	transform-origin: left center;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, box-shadow var(--transition), border-color var(--transition);
	z-index: 1;
}

/* 拖拽进行中禁用过渡，让鼠标拖动跟手 */
.services-hero-grid.dragging .service-hero-card {
	transition: none;
}

/* 左侧卡片：缩小并降低不透明度 */
.service-hero-card.pos-left {
	opacity: 0.85;
	transform: translate(0, -50%) scale(0.88);
	pointer-events: auto;
	z-index: 2;
}

/* 中间卡片：原尺寸全显示，始终为 featured 高亮 */
.service-hero-card.pos-center {
	opacity: 1;
	transform: translate(0, -50%) scale(1);
	pointer-events: auto;
	z-index: 3;
}

/* 右侧卡片：缩小并降低不透明度 */
.service-hero-card.pos-right {
	opacity: 0.85;
	transform: translate(0, -50%) scale(0.88);
	pointer-events: auto;
	z-index: 2;
}

/* 远端左侧卡片：露出右边缘一小部分，高度更小，层次靠后，透明度更低形成层次感 */
.service-hero-card.pos-far-left {
	opacity: 0.65;
	transform: translate(0, -50%) scale(0.72);
	pointer-events: auto;
	z-index: 0;
}

/* 远端右侧卡片：露出左边缘一小部分，高度更小，层次靠后，透明度更低形成层次感 */
.service-hero-card.pos-far-right {
	opacity: 0.65;
	transform: translate(0, -50%) scale(0.72);
	pointer-events: auto;
	z-index: 0;
}

/* 隐藏卡片：移出视野，不可交互 */
.service-hero-card.pos-hidden {
	opacity: 0;
	transform: translate(0, -50%) scale(0.6);
	pointer-events: none;
}

.service-hero-card.pos-center:hover {
	box-shadow: var(--shadow-card-hover);
	border-color: rgba(76, 175, 125, 0.25);
}

.service-hero-card.pos-left:hover,
.service-hero-card.pos-right:hover {
	opacity: 0.95;
	transform: translate(0, -50%) scale(0.92);
	border-color: rgba(76, 175, 125, 0.25);
}

.service-hero-card.pos-far-left:hover,
.service-hero-card.pos-far-right:hover {
	opacity: 0.85;
	transform: translate(0, -50%) scale(0.8);
	border-color: rgba(76, 175, 125, 0.25);
}

.service-hero-card.featured {
	border-color: var(--color-primary);
	background: var(--color-primary-pale);
}

.service-icon-circle {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--color-primary-pale);
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
}

.service-hero-card.featured .service-icon-circle {
	background: var(--color-primary);
	font-size: 36px;
}

.service-card-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 8px;
}

.service-price {
	font-size: 32px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 4px;
}

.service-price span {
	font-size: 16px;
	font-weight: 500;
	color: var(--color-text-muted);
}

.service-price-note {
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 24px;
}

.service-feature-list {
	text-align: center;
	margin-bottom: 28px;
}

.service-feature-item {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	padding: 8px 0;
	font-size: 14px;
	color: var(--color-text-secondary);
}

.service-feature-item svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--color-primary);
}

.service-feature-item .na {
	color: var(--color-text-muted);
}

.service-plan-btn {
	width: 100%;
	padding: 12px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--radius-sm);
	transition: all var(--transition);
}

.service-plan-btn.primary {
	background: var(--color-primary);
	color: #fff;
}

.service-plan-btn.primary:hover {
	background: var(--color-primary-hover);
}

.service-plan-btn.outline {
	background: transparent;
	color: var(--color-primary);
	border: 1.5px solid var(--color-primary);
}

.service-plan-btn.outline:hover {
	background: var(--color-primary);
	color: #fff;
}

/* 服务详情区块 */
.service-detail-section {
	padding: 48px 0;
}

.service-detail-section:nth-child(odd) {
	background: var(--color-bg-section);
}

.service-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.service-detail-grid.reverse .service-detail-image {
	order: -1;
}

.service-detail-image {
	height: 320px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 80px;
}

.service-detail-image.sd1 {
	background: linear-gradient(135deg, #e8f7ef, #d4f0e0);
}

.service-detail-image.sd2 {
	background: linear-gradient(135deg, #e3f0fa, #d0e4f5);
}

.service-detail-image.sd3 {
	background: linear-gradient(135deg, #fef6e4, #faecc8);
}

.service-detail-image.sd4 {
	background: linear-gradient(135deg, #f3e8f7, #e9d6f0);
}

.service-detail-image.sd5 {
	background: linear-gradient(135deg, #fdeee0, #f9dcc0);
}

.service-detail-image.sd6 {
	background: linear-gradient(135deg, #e0f4f3, #c8e8e6);
}

.service-detail-image.sd7 {
	background: linear-gradient(135deg, #e8edf2, #d4dce6);
}

.service-detail-text h2 {
	font-size: 28px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 16px;
}

.service-detail-text p {
	font-size: 15.5px;
	color: var(--color-text-secondary);
	line-height: 1.75;
	margin-bottom: 20px;
}

.service-detail-features {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
}

.service-detail-features .sdf {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
}

.service-detail-features .sdf::before {
	content: '✓';
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-primary-light);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
}

.service-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-primary);
	transition: gap var(--transition);
}

.service-cta-link:hover {
	gap: 12px;
}

/* 常见问题（手风琴折叠） */
.faq-list {
	max-width: 760px;
	margin: 0 auto;
}

.faq-item {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	margin-bottom: 12px;
	overflow: hidden;
}

.faq-q {
	padding: 18px 24px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--color-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: color var(--transition);
}

.faq-q:hover {
	color: var(--color-primary);
}

.faq-q svg {
	width: 18px;
	height: 18px;
	transition: transform var(--transition);
	flex-shrink: 0;
}

.faq-item.open .faq-q svg {
	transform: rotate(45deg);
}

.faq-a {
	padding: 0 24px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.open .faq-a {
	max-height: 200px;
	padding: 0 24px 20px;
}

.faq-a p {
	font-size: 14.5px;
	color: var(--color-text-secondary);
	line-height: 1.7;
}

/* 平板端：保持三卡布局，缩小卡片间距与字号 */
@media (max-width: 1024px) {
	.services-hero-grid {
		height: 560px;
	}

	.service-hero-card {
		padding: 32px 22px;
	}

	.service-hero-card.pos-left,
	.service-hero-card.pos-right {
		opacity: 0.8;
	}

	.service-hero-card.pos-far-left,
	.service-hero-card.pos-far-right {
		opacity: 0.6;
	}
}

/* 移动端：单卡显示，左右卡片隐藏，仅中间 featured 卡片可见，仍支持拖拽切换 */
@media (max-width: 768px) {
	.services-hero-grid {
		height: 580px;
		width: 100%;
		margin-left: 0;
	}

	.service-hero-card {
		width: calc(100% - 32px);
		margin: 0 16px;
		padding: 32px 24px;
	}

	.service-hero-card.pos-left,
	.service-hero-card.pos-right,
	.service-hero-card.pos-far-left,
	.service-hero-card.pos-far-right {
		opacity: 0;
		pointer-events: none;
		transform: translateX(0) scale(0.7);
	}

	.service-hero-card.pos-center {
		--pos-x: 0px;
	}

	.service-detail-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.service-detail-grid.reverse .service-detail-image {
		order: 0;
	}

	.service-detail-image {
		height: 220px;
		font-size: 60px;
	}
}

/* ==================== 关于我们页面样式 ==================== */
.about-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.about-intro-image {
	height: 380px;
	border-radius: var(--radius-sm);
	background: linear-gradient(135deg, #e8f7ef, #d4f0e0, #b8e6cc);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 100px;
}

.about-intro-text h2 {
	font-size: 32px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 20px;
}

.about-intro-text p {
	font-size: 16px;
	color: var(--color-text-secondary);
	line-height: 1.8;
	margin-bottom: 16px;
}

.about-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 32px;
}

.about-stat {
	text-align: center;
	padding: 16px;
}

.about-stat .num {
	font-size: 26px;
	font-weight: 800;
	color: var(--color-primary);
}

.about-stat .lbl {
	font-size: 13px;
	color: var(--color-text-muted);
	margin-top: 4px;
}

/* 发展历程时间线 */
.timeline {
	position: relative;
	padding: 40px 0;
}

.timeline::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--color-border);
	transform: translateX(-50%);
}

.timeline-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 48px;
	position: relative;
}

.timeline-item:nth-child(odd) {
	justify-content: flex-start;
}

.timeline-item:nth-child(even) {
	justify-content: flex-end;
}

.timeline-dot {
	position: absolute;
	left: 50%;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-primary);
	border: 3px solid var(--color-bg-body);
	transform: translateX(-50%);
	z-index: 1;
}

.timeline-content {
	width: 44%;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 24px;
}

.timeline-content .year {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

.timeline-content h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 8px;
}

.timeline-content p {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.65;
}

/* 企业文化区域 */
.culture-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.culture-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 36px 28px;
	text-align: center;
	transition: box-shadow var(--transition), transform var(--transition);
}

.culture-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.culture-icon {
	font-size: 44px;
	margin-bottom: 18px;
}

.culture-card h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 10px;
}

.culture-card p {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.65;
}

/* 核心团队区域 */
.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.team-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 28px 20px;
	text-align: center;
	transition: box-shadow var(--transition), transform var(--transition);
}

.team-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.team-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	margin: 0 auto 16px;
	background: var(--color-primary-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 700;
	color: var(--color-primary);
}

.team-card h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 4px;
}

.team-card .role {
	font-size: 13px;
	color: var(--color-primary);
	font-weight: 600;
	margin-bottom: 10px;
}

.team-card .bio {
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.5;
}

@media (max-width: 768px) {
	.about-intro {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.about-intro-image {
		height: 240px;
		font-size: 70px;
	}

	.about-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.timeline::before {
		left: 20px;
	}

	.timeline-item,
  .timeline-item:nth-child(even) {
		justify-content: flex-start;
	}

	.timeline-dot {
		left: 20px;
	}

	.timeline-content {
		width: calc(100% - 50px);
		margin-left: 50px;
	}

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

	.team-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.team-grid {
		grid-template-columns: 1fr;
	}
}

/* ==================== 九大核心能力模块 3 列布局（about.html 专用修饰类） ==================== */
/* 说明：team-grid 默认 4 列，9 个卡片在 4 列下排成 4+4+1 末行单卡不美观；
   通过叠加 team-grid-9 修饰类改为 3 列布局，3+3+3 完美排列，
   不影响其他页面使用 team-grid 的场景。 */
.team-grid.team-grid-9 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 992px) {
	.team-grid.team-grid-9 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.team-grid.team-grid-9 {
		grid-template-columns: 1fr;
	}
}

/* ==================== 联系我们页面样式 ==================== */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 48px;
}

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

.contact-info-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 24px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	transition: box-shadow var(--transition);
}

.contact-info-card:hover {
	box-shadow: var(--shadow-card-hover);
}

.contact-info-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.contact-info-text h4 {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 4px;
}

.contact-info-text p {
	font-size: 13.5px;
	color: var(--color-text-secondary);
	line-height: 1.6;
}

.contact-form-wrap {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 36px 32px;
}

.contact-form-wrap h3 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 24px;
}

.contact-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

.contact-form-grid .form-group:last-of-type {
	grid-column: span 2;
}

.form-message {
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	margin-top: 16px;
	display: none;
}

.form-message.success {
	display: block;
	background: var(--color-primary-light);
	color: var(--color-primary-hover);
	border: 1px solid rgba(76, 175, 125, 0.2);
}

.form-message.error {
	display: block;
	background: rgba(231, 76, 60, 0.08);
	color: var(--color-danger);
	border: 1px solid rgba(231, 76, 60, 0.2);
}

/* 地图占位区域 */
.map-section {
	margin-top: 60px;
}

.map-placeholder {
	width: 100%;
	height: 360px;
	border-radius: var(--radius-sm);
	background: linear-gradient(135deg, #e8f7ef, #d4f0e0);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--color-primary);
}

.map-placeholder .map-icon {
	font-size: 48px;
}

.map-placeholder p {
	font-size: 15px;
	font-weight: 600;
}

/* 社交媒体区域 */
.social-section {
	margin-top: 48px;
	text-align: center;
}

.social-section h3 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 16px;
}

.social-links {
	display: flex;
	justify-content: center;
	gap: 16px;
}

.social-link-large {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	transition: all var(--transition);
}

.social-link-large:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
}

@media (max-width: 768px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}

	.contact-form-grid {
		grid-template-columns: 1fr;
	}

	.contact-form-grid .form-group:last-of-type {
		grid-column: span 1;
	}

	.map-placeholder {
		height: 260px;
	}
}

/* ==================== 认证页面 — 登录与注册共用样式 ==================== */

/* ── 全宽分栏布局，无卡片容器 ── */
.auth-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
  /* 确保两列拉伸至全高 */
}

.auth-layout>* {
	min-height: 100vh;
}

/* ── 左侧：品牌视觉展示面板 ── */
.auth-decor {
	background: linear-gradient(160deg, #1e5a3a 0%, #2d7a52 25%, #3d9e6e 55%, #4CAF7D 80%, #5DC48A 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px 64px;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.auth-decor::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -100px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.03);
}

.auth-decor::after {
	content: '';
	position: absolute;
	bottom: 40px;
	left: -60px;
	width: 260px;
	height: 260px;
	border: 2px solid rgba(255, 255, 255, 0.05);
	border-radius: 50%;
}

/* 几何圆环装饰 */
.auth-geo-ring {
	position: absolute;
	border: 1.5px solid rgba(255, 255, 255, 0.07);
	border-radius: 50%;
}

.auth-geo-ring-1 {
	width: 320px;
	height: 320px;
	bottom: -90px;
	right: -90px;
}

.auth-geo-ring-2 {
	width: 200px;
	height: 200px;
	top: 80px;
	right: 30px;
}

.auth-geo-ring-3 {
	width: 110px;
	height: 110px;
	bottom: 160px;
	left: 50px;
	border-width: 1px;
}

/* 点阵图案覆盖层 */
.auth-dots {
	position: absolute;
	inset: 0;
	opacity: 0.05;
	background-image: radial-gradient(circle, #fff 1.5px, transparent 1.5px);
	background-size: 24px 24px;
}

/* 视觉内部内容 */
.auth-decor-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	max-width: 380px;
	width: 100%;
	min-height: inherit;
}

.auth-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	padding: 8px 20px;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 48px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #fff;
	text-decoration: none;
}

.auth-logo-link svg {
	width: 20px;
	height: 20px;
}

.auth-decor-inner h2 {
	font-size: 3rem;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 16px;
	letter-spacing: -0.02em;
}

.auth-decor-inner>p {
	font-size: 15px;
	opacity: 0.82;
	line-height: 1.7;
	margin-bottom: 48px;
}

/* 功能列表 */
.auth-features {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: left;
	list-style: none;
	padding: 0;
	margin: 0;
}

.auth-features li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	opacity: 0.9;
}

.auth-features li svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.8);
}

/* ── 右侧：表单面板 ── */
.auth-form-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 80px 64px;
	background: var(--color-bg-card);
}

.auth-form-wrap>* {
	max-width: 420px;
	width: 100%;
}

.auth-form-wrap h2 {
	font-size: 28px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 8px;
	letter-spacing: -0.01em;
	text-align: center;
}

.auth-form-wrap>p {
	font-size: 14px;
	color: var(--color-text-muted);
	margin-bottom: 36px;
	text-align: center;
}

/* ── 表单控件 ── */
.form-group {
	margin-bottom: 20px;
}

.form-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-secondary);
	margin-bottom: 6px;
}

.form-input {
	width: 100%;
	padding: 12px 16px;
	font-size: 15px;
	color: var(--color-text);
	background: var(--color-bg-section);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: all 0.2s ease;
	outline: none;
}

.form-input:hover {
	border-color: #c0cdd8;
}

.form-input:focus {
	border-color: var(--color-primary);
	background: var(--color-bg-card);
	box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.08);
}

.form-input::placeholder {
	color: var(--color-text-muted);
	font-size: 14px;
}

.form-input.error {
	border-color: #e74c3c;
	box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.06);
}

/* 验证码行 */
.captcha-row {
	display: flex;
	gap: 10px;
}

.captcha-row .form-input {
	flex: 1;
}

.captcha-btn {
	flex-shrink: 0;
	padding: 0 18px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	background: transparent;
	border: 1.5px solid var(--color-primary);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.captcha-btn:hover {
	background: var(--color-primary);
	color: #fff;
}

.captcha-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* 记住我行（登录页） */
.form-remember-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	margin: -4px 0 24px;
}

.form-remember-row .link {
	font-size: 13px;
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: none;
}

.form-remember-row .link:hover {
	text-decoration: underline;
}

/* 复选框 */
.checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-text-secondary);
	cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--color-primary);
	cursor: pointer;
	flex-shrink: 0;
}

.checkbox-label a {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: none;
}

.checkbox-label a:hover {
	text-decoration: underline;
}

.form-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-text-secondary);
	cursor: pointer;
}

.form-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--color-primary);
	cursor: pointer;
}

/* 链接 */
.form-link {
	font-size: 13px;
	color: var(--color-primary);
	font-weight: 500;
}

.form-link:hover {
	text-decoration: underline;
}

/* 提交按钮 */
.btn-block {
	width: 100%;
	padding: 14px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #4CAF7D 0%, #3d9e6e 100%);
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.25s ease;
	letter-spacing: 0.01em;
	margin-top: 4px;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-block:hover {
	background: linear-gradient(135deg, #3d9e6e 0%, #2d7a52 100%);
	box-shadow: 0 8px 28px rgba(76, 175, 125, 0.32);
	transform: translateY(-1px);
}

.btn-block:active {
	transform: translateY(0);
}

.btn-block:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

/* 消息提示横幅 */
.form-message {
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 13px;
	margin-bottom: 20px;
	display: none;
}

.form-message.success {
	display: block;
	background: rgba(76, 175, 125, 0.08);
	color: #2d7a52;
	border: 1px solid rgba(76, 175, 125, 0.15);
}

.form-message.error {
	display: block;
	background: rgba(231, 76, 60, 0.06);
	color: #d63031;
	border: 1px solid rgba(231, 76, 60, 0.12);
}

/* 错误文字 */
.form-error {
	font-size: 12px;
	color: #e74c3c;
	margin-top: 5px;
	display: none;
}

.form-error.visible {
	display: block;
}

/* 密码强度指示条 */
.password-strength {
	height: 5px;
	border-radius: 3px;
	margin-top: 8px;
	background: var(--color-border);
	overflow: hidden;
}

.password-strength-bar {
	height: 100%;
	border-radius: 3px;
	width: 0;
	transition: width 0.3s ease, background 0.3s ease;
}

.password-strength-text {
	font-size: 11px;
	color: var(--color-text-muted);
	margin-top: 5px;
}

/* 分隔线 */
.divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: /*28px 0;*/font-size: 12px;
	color: var(--color-text-muted);
}

.divider::before,
.divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

.divider span {
	flex-shrink: 0;
}

.auth-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 28px 0;
	font-size: 12px;
	color: var(--color-text-muted);
}

.auth-divider::before,
.auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

/* 社交登录按钮 */
.social-login {
	display: flex;
	gap: 12px;
}

.social-login .social-btn {
	flex: 1;
	padding: 11px;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.auth-social-row {
	display: flex;
	gap: 12px;
}

.auth-social-btn {
	flex: 1;
	padding: 11px;
	border-radius: 10px;
	cursor: pointer;
	background: var(--color-bg-section);
	border: 1.5px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-secondary);
	transition: all 0.2s ease;
}

.auth-social-btn:hover {
	background: var(--color-bg-card);
	border-color: var(--color-text-muted);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.auth-social-btn svg {
	width: 16px;
	height: 16px;
}

/* 页脚链接 */
.auth-footer-link {
	text-align: center;
	margin-top: 28px;
	font-size: 14px;
	color: var(--color-text-muted);
}

.auth-footer-link a {
	color: var(--color-primary);
	font-weight: 600;
	margin-left: 4px;
	text-decoration: none;
}

.auth-footer-link a:hover {
	text-decoration: underline;
}

.auth-switch {
	text-align: center;
	margin-top: 28px;
	font-size: 14px;
	color: var(--color-text-muted);
}

.auth-switch a {
	color: var(--color-primary);
	font-weight: 600;
	margin-left: 4px;
}

.auth-switch a:hover {
	text-decoration: underline;
}

/* ── 忘记密码页：两段式步骤条与显隐 ── */
/* 新增时间：2026年10月15日11时05分00秒 */
/* 模块归属：前台忘记密码页（user/forgot-password.html） */
/* 设计说明：复用现有 .auth-* 与 .form-* 变量，保持与登录/注册页视觉一致 */
.auth-hidden {
	display: none !important;
}

.auth-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 28px;
}

.auth-step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-muted);
	transition: color 0.2s ease;
}

.auth-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-text-muted);
	background: var(--color-bg-section);
	border: 1.5px solid var(--color-border);
	transition: all 0.2s ease;
}

.auth-step.active {
	color: var(--color-primary);
}

.auth-step.active .auth-step-num {
	color: #fff;
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.auth-step.done .auth-step-num {
	color: #fff;
	background: var(--color-primary);
	border-color: var(--color-primary);
	opacity: 0.65;
}

.auth-step.done {
	color: var(--color-primary);
	opacity: 0.8;
}

.auth-step-line {
	width: 36px;
	height: 2px;
	border-radius: 2px;
	background: var(--color-border);
}

/* 深色模式下步骤条保持对比度 */
[data-theme="dark"] .auth-step-num {
	background: var(--color-bg-input);
}

/* ── 深色模式适配 ── */
[data-theme="dark"] .auth-decor {
	background: linear-gradient(160deg, #0d1a12 0%, #142618 25%, #1a3326 55%, #1e3d2e 80%, #234635 100%);
}

[data-theme="dark"] .form-input {
	background: var(--color-bg-input);
}

[data-theme="dark"] .form-input:focus {
	background: var(--color-bg-card);
	box-shadow: 0 0 0 3px rgba(93, 196, 138, 0.1);
}

[data-theme="dark"] .form-input:hover {
	border-color: #3d4a5c;
}

[data-theme="dark"] .form-select-arrow {
	color: #6b7b8d;
}

[data-theme="dark"] .form-select-wrap select.form-input:hover + .form-select-arrow,
[data-theme="dark"] .form-select-wrap select.form-input:focus + .form-select-arrow {
	color: #5DC48A;
}

[data-theme="dark"] .btn-block {
	background: linear-gradient(135deg, #5DC48A 0%, #4CAF7D 100%);
}

[data-theme="dark"] .btn-block:hover {
	background: linear-gradient(135deg, #4CAF7D 0%, #3d9e6e 100%);
	box-shadow: 0 8px 28px rgba(93, 196, 138, 0.25);
}

[data-theme="dark"] .auth-social-btn:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ── 响应式适配 ── */
@media (max-width: 768px) {
	.auth-layout {
		grid-template-columns: 1fr;
	}

	.auth-layout>* {
		min-height: auto;
	}

	.auth-decor {
		padding: 48px 32px;
		min-height: auto;
	}

	.auth-decor-inner {
		max-width: 360px;
		min-height: auto;
	}

	.auth-decor-inner h2 {
		font-size: 2rem;
	}

	.auth-form-wrap {
		padding: 48px 32px;
	}

	.auth-form-wrap>* {
		max-width: 360px;
	}
}

/* ==================== 文章详情页面样式 ==================== */
.article-detail-hero {
	height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 64px;
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
}

.article-hero-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.article-detail-hero.c1 {
	background: linear-gradient(135deg, #5DC48A, #3d9e6e);
}

.article-detail-hero.c2 {
	background: linear-gradient(135deg, #6baed6, #4a8fbb);
}

.article-detail-hero.c3 {
	background: linear-gradient(135deg, #f0c75e, #daa520);
}

.article-detail-hero.c4 {
	background: linear-gradient(135deg, #a68ad4, #7e5fc4);
}

.article-detail-hero.c5 {
	background: linear-gradient(135deg, #f09090, #d44a4a);
}

.article-detail-hero.c6 {
	background: linear-gradient(135deg, #6cc4a1, #4ea07e);
}

.article-detail-header {
	padding-top: 140px;
	padding-bottom: 60px;
	background: linear-gradient(135deg, #5DC48A, #3d9e6e);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.article-detail-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(76, 175, 125, 0.06) 1px, transparent 1px);
	background-size: 40px 40px;
	pointer-events: none;
}

.article-detail-header-inner {
	position: relative;
	z-index: 1;
}

.article-detail-header-breadcrumb {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 24px;
}

.article-detail-header-breadcrumb a {
	color: var(--color-text-secondary);
	transition: color var(--transition);
}

.article-detail-header-breadcrumb a:hover {
	color: var(--color-primary);
}

.article-detail-header-breadcrumb .sep {
	color: var(--color-border);
}


.article-detail-wrapper {
	max-width: 780px;
	margin: 0 auto;
	padding: 48px 0 60px;
}

.article-detail-category-tag {
	display: inline-flex;
	padding: 5px 14px;
	font-size: 12.5px;
	font-weight: 600;
	background: var(--color-primary-light);
	color: var(--color-primary-hover);
	border-radius: var(--radius-full);
	margin-bottom: 18px;
}

.article-detail-title {
	font-size: 34px;
	font-weight: 800;
	color: var(--color-text);
	line-height: 1.25;
	margin-bottom: 20px;
}

.article-detail-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 14px;
	color: var(--color-text-muted);
	margin-bottom: 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--color-border);
	flex-wrap: wrap;
}

.article-detail-meta .meta-author-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.article-detail-meta .meta-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-primary-light);
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
}

.article-detail-meta .meta-avatar-img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.article-detail-meta .meta-sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-text-muted);
}

.article-detail-body {
	font-size: 16.5px;
	color: var(--color-text-secondary);
	line-height: 1.9;
}

.article-detail-body h2 {
	font-size: 24px;
	font-weight: 700;
	color: var(--color-text);
	margin: 36px 0 16px;
}

.article-detail-body h3 {
	font-size: 19px;
	font-weight: 700;
	color: var(--color-text);
	margin: 28px 0 12px;
}

.article-detail-body p {
	margin-bottom: 18px;
}

/* =========================================
   正文列表排版修复（时间戳：2026年09月10日10时47分35秒）
   问题：文件顶部全局重置 *{margin:0;padding:0} 清空了 ol 浏览器默认的
        padding-inline-start，而正文容器 article-detail-body 未定义任何列表样式，
        导致有序列表的序号标记（list-style-position:outside）整个悬挂在正文栏
        左边界之外约 16px，比周围段落文字更靠左；无序列表则因全局
        ul{list-style:none} 丢失了项目符号且没有任何缩进。
   方案：在正文作用域内还原列表缩进与项目符号，序号标记回到正文栏内部并与
        左右边界对齐；列表块下间距与段落 18px 的行间节奏保持一致，
        列表项间距沿用文档页 .doc-article li 的 8px 约定。
   排除说明：文档页 <article class="doc-article article-detail-body"> 内部有
        .doc-steps（编号圆点步骤卡）与 .doc-faq 等自带样式的列表，其样式由
        .doc-article 段规则维护，故此处以 :not(.doc-article) 排除整个文档页，
        避免本规则覆盖 .doc-steps 的 padding:0 / list-style:none。
   性能说明：纯 CSS 规则，仅作用于 .article-detail-body，无 JS 参与，不影响渲染性能。
   ========================================= */
.article-detail-body:not(.doc-article) ol,
.article-detail-body:not(.doc-article) ul {
	margin: 0 0 18px;
	padding-left: 1.5em;
}

.article-detail-body:not(.doc-article) ol {
	list-style: decimal;
}

.article-detail-body:not(.doc-article) ul {
	list-style: disc;
}

.article-detail-body:not(.doc-article) li {
	margin-bottom: 8px;
}

.article-detail-body:not(.doc-article) li:last-child {
	margin-bottom: 0;
}

.article-detail-body code {
	background: var(--color-bg-tag);
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.9em;
	color: var(--color-primary-hover);
}

.article-detail-body blockquote {
	border-left: 3px solid var(--color-primary);
	padding: 16px 24px;
	margin: 24px 0;
	background: var(--color-primary-pale);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-style: italic;
	color: var(--color-text-secondary);
}

/* =========================================
   正文内容防溢出修复（时间戳：2026年08月18日21时40分00秒）
   问题：富文本正文中的长行（如 Nginx log_format 配置）在 <pre> 默认
        white-space:pre 下不换行，横向溢出 article-detail-body 容器。
   方案：正文整体开启长词断行；pre 代码块改用 pre-wrap 自动换行并补充
         主题风格代码块样式；表格限制最大宽度并允许单元格内断词防溢出。
   性能说明：纯 CSS 规则，无 JS 参与，不影响渲染性能。
   ========================================= */
.article-detail-body {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* 代码块卡片容器（由 main.js 将 pre 包装为 .code-block，含语言标签头部与复制按钮） */
.article-detail-body .code-block {
	position: relative;
	margin: 24px 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-bg-code);
}

/* 代码块头部：左侧语言标识 + 右侧复制按钮 */
.article-detail-body .code-block-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 16px;
	background: var(--color-bg-tag);
	border-bottom: 1px solid var(--color-border);
}

.article-detail-body .code-block-lang {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.article-detail-body .code-block-lang::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-primary);
	flex-shrink: 0;
}

.article-detail-body .code-block-copy {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all var(--transition);
	line-height: 1.4;
}

.article-detail-body .code-block-copy:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
	background: var(--color-primary-pale);
}

.article-detail-body .code-block-copy.copied {
	color: var(--color-primary);
	border-color: var(--color-primary);
	background: var(--color-primary-pale);
}

.article-detail-body .code-block-copy svg {
	flex-shrink: 0;
}

/* 代码块内 pre：行号化后每行独立成块（.code-line），长行在行内容内自动换行，超高横向滚动兜底 */
.article-detail-body .code-block pre {
	white-space: normal;
	background: var(--color-bg-code);
	border: none;
	border-radius: 0;
	padding: 14px 0 16px;
	margin: 0;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--color-text);
	overflow-x: auto;
	max-width: 100%;
}

.article-detail-body .code-block pre code {
	background: none;
	padding: 0;
	border-radius: 0;
	color: inherit;
	font-size: inherit;
	white-space: inherit;
	font-family: inherit;
}

/* 行结构：左侧行号列 + 右侧代码列 */
.article-detail-body .code-line {
	display: flex;
	align-items: flex-start;
}

.article-detail-body .code-line-num {
	flex: 0 0 60px;
	text-align: right;
	padding: 0 16px 0 20px;
	color: var(--color-text-muted);
	font-size: 12.5px;
	line-height: inherit;
	opacity: 0.75;
	/* 行号禁止折行：全局 box-sizing:border-box 下 60px 含 padding(左20+右16)，
	   内容宽 24px 可容纳三位数字；nowrap 兜底防极端超宽折行 */
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
}

.article-detail-body .code-line-content {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 20px;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* 行 hover 高亮，便于对照行号定位代码 */
.article-detail-body .code-line:hover {
	background: rgba(127, 127, 127, 0.06);
}

.article-detail-body .code-block pre code .code-line:first-child {
	margin-top: 0;
}

/* 未包装的裸 pre 兜底样式（高亮库加载失败或 JS 未运行时仍可读） */
.article-detail-body pre {
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-break: break-word;
	background: var(--color-bg-tag);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 18px 20px;
	margin: 24px 0;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--color-text);
	overflow-x: auto;
	max-width: 100%;
}

.article-detail-body pre code {
	background: none;
	padding: 0;
	border-radius: 0;
	color: inherit;
	font-size: inherit;
	white-space: inherit;
}

/* 移动端代码块适配 */
@media (max-width: 768px) {
	.article-detail-body .code-block-header {
		padding: 8px 12px;
	}

	.article-detail-body .code-block pre {
		padding: 12px 0 14px;
		font-size: 12.5px;
	}

	.article-detail-body .code-line-num {
		flex-basis: 52px;
		padding: 0 10px 0 12px;
		font-size: 11.5px;
	}

	.article-detail-body .code-line-content {
		padding-right: 14px;
	}
}

.article-detail-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.article-detail-body table {
	max-width: 100%;
	border-collapse: collapse;
}

/* 标签与分享 */
.article-detail-footer-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--color-border);
}

.article-tag {
	padding: 5px 14px;
	font-size: 12.5px;
	background: var(--color-bg-tag);
	color: var(--color-text-secondary);
	border-radius: var(--radius-full);
	font-weight: 500;
	text-decoration: none;
	display: inline-block;
	transition: background var(--transition), color var(--transition);
}

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

.article-share-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	font-size: 13px;
	color: var(--color-text-muted);
}

.article-share-btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1.5px solid var(--color-border);
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all var(--transition);
}

.article-share-btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: var(--color-primary-pale);
}

/* =========================================
   文章互动工具栏：点赞 | 收藏 | 分享
   时间戳：2026年07月21日22时30分00秒
   设计说明：响应式 + 深色主题兼容
========================================= */
.article-action-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding-top: 28px;
	border-top: 1px solid var(--color-border);
	/*padding: 16px 20px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg-section);
	border-radius: var(--radius-md);*/
}

.article-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all var(--transition);
	user-select: none;
	line-height: 1;
}

.article-action-btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: var(--color-primary-pale);
	transform: translateY(-1px);
}

.article-action-btn:active {
	transform: translateY(0);
}

.article-action-btn.active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.article-action-btn.active:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

.article-action-btn.loading {
	opacity: 0.6;
	pointer-events: none;
}

.article-action-label {
	white-space: nowrap;
}

.article-action-count {
	min-width: 16px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	font-weight: 600;
}

.article-action-divider {
	width: 1px;
	height: 22px;
	background: var(--color-border);
	margin: 0 4px;
}

.article-share-label {
	font-size: 13px;
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* 互动工具栏中的分享按钮（覆盖原 .article-share-btn 圆形按钮，尺寸更紧凑） */
.article-action-bar .article-share-btn {
	width: 32px;
	height: 32px;
}

/* 响应式：移动端紧凑布局 */
/* =========================================
   文章互动工具栏窄屏（≤640px）规整两行布局
   时间戳：2026年10月16日01时00分00秒
   问题：工具栏用 flex-wrap:wrap 自动断行，断点随容器宽度浮动，结果不稳定——
        390px 下被拆成 3 行（点赞/收藏/微信 一行，X/复制 又一行），分享图标
        被拆散且行尾留白明显；320px 下却恰好 2 行。高度 97px 浪费明显。
   方案：复用模板中已有的 .article-action-divider（点赞收藏与分享组之间的语义
        分隔元素），在窄屏下将其由 display:none 改为「零高度、占满整行」的
        flex 断行锚点，强制在「点赞+收藏」与「三个分享按钮」之间换行，形成
        稳定且规整的两行布局：第一行点赞/收藏，第二行微信/X/复制。
        纯 CSS 实现，无需改动模板结构与 main.js，桌面端不受影响。
   性能说明：仅新增少量媒体查询声明，零 JS、零新增请求，不影响 QPS。
   ========================================= */
@media (max-width: 640px) {
	.article-action-bar {
		padding: 12px 14px;
		gap: 8px;
	}

	.article-action-btn {
		padding: 7px 12px;
		font-size: 13px;
	}

	/* 分隔符改为整行断行锚点：隐藏原竖线视觉，仅保留换行控制能力；
	   用负 margin 抵消它自身占用的一个 flex 行间距，避免两行之间空隙过大 */
	.article-action-divider {
		display: block;
		width: 100%;
		height: 0;
		margin: -4px 0;
		background: none;
	}

	.article-share-label {
		display: none;
	}
}

/* 相关文章推荐 */
.related-section {
	background: var(--color-bg-section);
	padding: 60px 0;
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.related-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 24px;
	transition: box-shadow var(--transition), transform var(--transition);
	cursor: pointer;
	text-decoration: none;
	display: block;
}

.related-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.related-card .rel-category {
	display: inline-block;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 600;
	background: var(--color-bg-tag);
	color: var(--color-text-secondary);
	border-radius: var(--radius-full);
	margin-bottom: 12px;
}

.related-card .rel-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.4;
	margin-bottom: 8px;
}

.related-card .rel-date {
	font-size: 12.5px;
	color: var(--color-text-muted);
}

/* 面包屑导航（共用） */
.breadcrumb-bar {
	/*margin-top: 64px;*/
	padding: 16px 0;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--color-text-muted);
	max-width: 860px;
    margin: 0 auto;
}

.article-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--color-text-muted);
	max-width: 780px;
    margin: 0 auto;
}

.article-breadcrumb .bc-current {
	color: var(--color-text);
	font-weight: 600;
}

.breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition);
}

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

.breadcrumb .bc-sep {
	color: var(--color-border);
}

.breadcrumb .bc-current {
	color: var(--color-text);
	font-weight: 600;
}




@media (max-width: 768px) {
	.article-detail-title {
		font-size: 26px;
	}

	.article-detail-hero {
		height: 180px;
		font-size: 48px;
	}

	.article-detail-wrapper {
		padding: 32px 20px 40px;
	}

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

	.article-detail-body {
		font-size: 15.5px;
	}
}

/* =========================================
   文章详情页窄屏（≤768px）面包屑与元信息排版优化
   时间戳：2026年10月16日00时00分00秒
   问题：
     1）面包屑 .article-breadcrumb 为 flex 单行（nowrap），长路径（多级栏目+长标题）
        无法换行，"当前位置："等前导项被挤压成竖排并溢出容器；
     2）元信息 .article-detail-meta 用独立的 .meta-sep 圆点作 flex 子项分隔，
        窄屏换行后会出现行首/行尾孤立圆点，且各项长短不齐显得杂乱。
   方案：
     1）面包屑允许换行（flex-wrap:wrap），行高与项间距收紧，长标题可正常折行；
     2）元信息改为按"作者行 + 其余信息"两段式布局：作者行独占一行（含头像），
        其余信息以行内分隔符统一样式，圆点改用 ::before 伪元素绘制，
        由 flex 换行改为正常文本流换行，彻底消除孤立圆点；
     3）仅作用于 .article-detail-wrapper 内的元信息，不影响其他页面复用。
   性能说明：纯 CSS 媒体查询规则，仅在窄屏命中，无 JS 参与，不影响 QPS 与桌面端渲染。
   ========================================= */
@media (max-width: 768px) {
	/* 面包屑：允许换行，避免长路径把前导文字挤压成竖排 */
	.article-breadcrumb {
		flex-wrap: wrap;
		row-gap: 4px;
		column-gap: 6px;
		line-height: 1.5;
		padding: 0 20px;
	}

	/* 元信息：作者行独占一行，其余信息为一段可自动换行的文本流 */
	.article-detail-meta {
		gap: 10px 0;
		font-size: 13px;
	}

	.article-detail-meta .meta-author-row {
		flex: 0 0 100%;
		margin-bottom: 2px;
	}

	/* 圆点分隔符改为行内伪元素，跟随文本流，不与文字分离 */
	.article-detail-meta .meta-sep {
		width: auto;
		height: auto;
		border-radius: 0;
		background: none;
		margin: 0 8px;
		vertical-align: middle;
	}

	.article-detail-meta .meta-sep::before {
		content: "·";
		font-size: 14px;
		line-height: 1;
		color: var(--color-text-muted);
	}

	/* 作者行后的首个分隔符在独占一行时不需要，隐藏以保持左对齐整洁 */
	.article-detail-meta .meta-author-row + .meta-sep {
		display: none;
	}
}

/* 超窄屏（≤480px）：进一步收紧元信息字号与间距 */
@media (max-width: 480px) {
	.article-detail-meta {
		font-size: 12.5px;
	}

	.article-detail-meta .meta-sep {
		margin: 0 6px;
	}
}

/* =========================================
   全站窄屏（≤768px）面包屑与元信息统一治理
   时间戳：2026年10月16日00时30分00秒
   背景：文章详情页修复后，排查发现其他模板存在同类问题，一并治理：
     1）.breadcrumb（产品详情/案例详情共用）：flex + justify-content:center 且
        nowrap，实测 375px 下"当前位置："被挤压成竖排、长标题拆行错乱；
     2）.page-header-breadcrumb（关于/文档/案例/产品/搜索/用户中心等页共用）：
        flex + justify-content:center 且 nowrap，多级栏目长路径存在溢出隐患；
     3）.case-detail-meta-bar 内的 .meta-sep：模板中已写入分隔圆点元素，但
        CSS 从未定义样式，实测宽高均为 0（圆点完全不显示），同时窄屏换行时
        会作为空 flex 子项占位，破坏排版。
   方案：
     1）面包屑类统一放开换行（flex-wrap:wrap）并收紧行距，长文本正常折行，
        同时由居中改为左对齐起排，避免换行后各行首尾参差不齐；
     2）为 .case-detail-meta-bar .meta-sep 补齐圆点样式（行内伪元素绘制），
        并隐藏换行时可能落到行首的孤立分隔符；
     3）仅命中 ≤768px，桌面端样式完全不变。
   性能说明：纯 CSS 媒体查询，零 JS、零新增请求，仅在窄屏生效，不影响 QPS。
   ========================================= */
@media (max-width: 768px) {

	/* 面包屑（产品详情/案例详情共用）：允许换行并左对齐起排 */
	.breadcrumb {
		flex-wrap: wrap;
		justify-content: flex-start;
		row-gap: 4px;
		column-gap: 6px;
		line-height: 1.5;
		padding: 0 20px;
	}

	/* 页头面包屑（关于/文档/案例/产品/搜索/用户中心等页共用）：同上 */
	.page-header-breadcrumb {
		flex-wrap: wrap;
		row-gap: 4px;
		column-gap: 6px;
		line-height: 1.5;
		padding: 0 20px;
	}

	/* 案例详情元信息条：补齐分隔圆点样式，避免空元素占位 */
	.case-detail-meta-bar .meta-sep {
		display: inline-block;
		width: auto;
		height: auto;
		margin: 0 2px;
		vertical-align: middle;
		pointer-events: none;
	}

	.case-detail-meta-bar .meta-sep::before {
		content: "·";
		font-size: 14px;
		line-height: 1;
		color: var(--color-text-muted);
	}
}

/* ==================== 产品详情页面样式 ==================== */
.prod-detail-hero {
	height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 88px;
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
}

.prod-detail-hero.dh1 {
	background: linear-gradient(135deg, #e8f7ef, #d4f0e0);
}

.prod-detail-hero.dh2 {
	background: linear-gradient(135deg, #e3f0fa, #d0e4f5);
}

.prod-detail-hero.dh3 {
	background: linear-gradient(135deg, #fef6e4, #faecc8);
}

.prod-detail-hero.dh4 {
	background: linear-gradient(135deg, #f0e8fa, #e3d4f5);
}

.prod-detail-hero.dh5 {
	background: linear-gradient(135deg, #fde8e8, #fad0d0);
}

.prod-detail-hero.dh6 {
	background: linear-gradient(135deg, #e6f5f0, #cfe8dd);
}

/* 详情内容 */
.prod-detail-content {
	max-width: 860px;
	margin: 0 auto;
	padding: 48px 0 60px;
}

.prod-detail-content h2 {
	font-size: 32px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 12px;
}

.prod-tag-row {
	display: flex;
	gap: 8px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.prod-tag-row span {
	padding: 5px 14px;
	font-size: 12.5px;
	background: var(--color-primary-light);
	color: var(--color-primary-hover);
	border-radius: var(--radius-full);
	font-weight: 600;
}

.prod-detail-desc {
	font-size: 16px;
	color: var(--color-text-secondary);
	line-height: 1.8;
	margin-bottom: 36px;
}

/* 规格参数表 */
.prod-specs-section {
	background: var(--color-bg-section);
	border-radius: var(--radius-sm);
	padding: 32px 36px;
	margin-bottom: 36px;
}

/* 分享按钮组下方紧接技术规格区时补足间距（中间隔着隐藏的 input 与购买面板，故用通用兄弟选择器）
   时间戳：2026年10月17日12时30分00秒 */
.article-share-row ~ .prod-specs-section {
	margin-top: 32px;
}

.prod-specs-section h3 {
	font-size: 19px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 20px;
}

.prod-specs-table {
	width: 100%;
	border-collapse: collapse;
}

.prod-specs-table th,
.prod-specs-table td {
	padding: 14px 18px;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	font-size: 14.5px;
}

.prod-specs-table th {
	color: var(--color-text-muted);
	font-weight: 600;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	width: 28%;
}

.prod-specs-table td {
	color: var(--color-text);
	font-weight: 500;
}

.prod-specs-table tr:last-child th,
.prod-specs-table tr:last-child td {
	border-bottom: none;
}

/* 行动号召按钮 */
.prod-cta-row {
	display: flex;
	gap: 14px;
	margin-bottom: 48px;
}

/* 功能亮点区域 */
.prod-features-section {
	background: var(--color-bg-section);
	padding: 60px 0;
}

.prod-features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.prod-feature-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 32px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	transition: box-shadow var(--transition);
}

.prod-feature-card:hover {
	box-shadow: var(--shadow-card-hover);
}

.prod-feature-icon {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 26px;
}

.prod-feature-text h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 6px;
}

.prod-feature-text p {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.65;
}

/* 相关产品推荐 */
.prod-related-section {
	padding: 60px 0;
	background: var(--color-bg-section);
}

.related-prod-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* 时间戳: 2026年10月26日18时45分00秒 相关卡片循环输出的配色与空摘要处理
 * 背景: 「相关产品 / 相关资源」改为 {xiis:相关内容} 循环渲染后，模板内只有一个固定 class，
 *       无法像静态卡片那样逐条写 rh1/rh3/rh4，改由 nth-child 按位置轮换三种渐变，
 *       保留原有彩色卡片区的视觉层次。
 * 空摘要: 内容无摘要时 [内容:摘要] 输出空字符串，段落会留下内边距形成多余空白，
 *         用 :empty 收起，避免卡片底部出现无意义的留白。
 * 影响面: 仅 .related-prod-grid 的直接子卡片，其他用到 .related-prod-img 的位置不受影响。 */
.related-prod-grid > .related-prod-card:nth-child(3n+1) .related-prod-img {
	background: linear-gradient(135deg, #e8f7ef, #d4f0e0);
}

.related-prod-grid > .related-prod-card:nth-child(3n+2) .related-prod-img {
	background: linear-gradient(135deg, #e3f0fa, #d0e4f5);
}

.related-prod-grid > .related-prod-card:nth-child(3n+3) .related-prod-img {
	background: linear-gradient(135deg, #fef6e4, #faecc8);
}

.related-prod-body p:empty {
	display: none;
}

/* 时间戳: 2026年10月26日18时55分00秒 相关卡片副信息（栏目名）
 * 背景: 「相关内容」标签的查询不含摘要字段，卡片副信息改显示栏目名称。
 *       用小字 + 次要色呈现，避免与标题争夺视觉权重。 */
.related-prod-body .rel-prod-meta {
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-muted);
	margin-top: 6px;
}

.related-prod-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
	text-decoration: none;
	display: block;
}

.related-prod-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-4px);
}

.related-prod-img {
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
}

.related-prod-img.rh1 {
	background: linear-gradient(135deg, #e8f7ef, #d4f0e0);
}

.related-prod-img.rh2 {
	background: linear-gradient(135deg, #e3f0fa, #d0e4f5);
}

.related-prod-img.rh3 {
	background: linear-gradient(135deg, #fef6e4, #faecc8);
}

.related-prod-img.rh4 {
	background: linear-gradient(135deg, #f0e8fa, #e3d4f5);
}

.related-prod-img.rh5 {
	background: linear-gradient(135deg, #fde8e8, #fad0d0);
}

.related-prod-img.rh6 {
	background: linear-gradient(135deg, #e6f5f0, #cfe8dd);
}

.related-prod-body {
	padding: 22px 20px 24px;
}

.related-prod-body h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 6px;
}

.related-prod-body p {
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.5;
}

@media (max-width: 768px) {
	.prod-detail-hero {
		height: 200px;
		font-size: 64px;
	}

	.prod-detail-content {
		padding: 32px 20px 40px;
	}

	.prod-detail-content h2 {
		font-size: 26px;
	}

	.prod-specs-section {
		padding: 24px 20px;
	}

	.prod-specs-table th,
  .prod-specs-table td {
		padding: 12px;
		font-size: 13px;
	}

	.prod-features-grid {
		grid-template-columns: 1fr;
	}

	.related-prod-grid {
		grid-template-columns: 1fr;
	}

	.prod-cta-row {
		flex-direction: column;
	}
}

/* =========================================
CASES PAGE — CTA & STATS
========================================= */
.cases-cta-section {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	text-align: center;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.cases-cta-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
	radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
	pointer-events: none;
}

.cases-cta-section .section-label {
	color: rgba(255, 255, 255, 0.75);
}

.cases-cta-section .section-title {
	color: #fff;
}

.cases-cta-section .section-sub {
	color: rgba(255, 255, 255, 0.8);
}

.cases-cta-buttons {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-top: 32px;
	flex-wrap: wrap;
}

.cases-cta-btn-white {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-primary);
	background: #fff;
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: transform var(--transition), box-shadow var(--transition);
}

.cases-cta-btn-white:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.cases-cta-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: background var(--transition), border-color var(--transition);
}

.cases-cta-btn-outline:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
}

/* 数据统计高亮条 */
.cases-stats-bar {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
	padding: 48px 0;
	text-align: center;
}

.cases-stat-item {
	padding: 20px;
}

.cases-stat-num {
	font-size: 36px;
	font-weight: 800;
	color: var(--color-primary);
}

.cases-stat-label {
	font-size: 14px;
	color: var(--color-text-secondary);
	margin-top: 6px;
}

@media (max-width: 768px) {
	.cases-stats-bar {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		padding: 32px 0;
	}

	.cases-stat-num {
		font-size: 28px;
	}

	.cases-cta-section {
		padding: 56px 0;
	}
}

/* =========================================
文章详情 — 上下篇导航
========================================= */
.article-nav-section {
	padding: 32px 0 60px 0;
}

.article-nav-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 780px;
	margin: 0 auto;
}

.article-nav-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 24px;
	text-decoration: none;
	background: var(--color-bg-section);
	border-radius: var(--radius-sm);
	transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.article-nav-link:hover {
	background: var(--color-primary-pale);
	transform: translateY(-2px);
	box-shadow: var(--shadow-card);
}

.article-nav-link.prev {
	align-items: flex-start;
	text-align: left;
	border-left: 3px solid var(--color-primary);
	padding-left: 21px;
}

.article-nav-link.next {
	align-items: flex-end;
	text-align: right;
	border-right: 3px solid var(--color-primary);
	padding-right: 21px;
}

.article-nav-hint {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text-muted);
	letter-spacing: 0.3px;
}

.article-nav-text {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.5;
}

@media (max-width: 640px) {
	.article-nav-row {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.article-nav-link.next {
		align-items: flex-start;
		text-align: left;
	}
}

/* =========================================
文章详情 — 评论区
========================================= */
.comment-section {
	padding: 0 0 80px 0;
}

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

.comment-section-header {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 28px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--color-primary);
}

.comment-section-header h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text);
}

.comment-count {
	font-size: 14px;
	color: var(--color-text-muted);
}

/* 评论表单 */
.comment-form-wrap {
	display: flex;
	gap: 12px;
	margin-bottom: 32px;
}

.comment-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

.comment-input-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.comment-textarea {
	width: 100%;
	min-height: 80px;
	padding: 12px 14px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	resize: vertical;
	transition: border-color var(--transition);
	outline: none;
}

.comment-textarea:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.12);
}

.comment-textarea::placeholder {
	color: var(--color-text-muted);
}

.comment-submit-row {
	display: flex;
	justify-content: flex-end;
}

.comment-submit-btn {
	padding: 8px 22px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--transition);
}

.comment-submit-btn:hover {
	background: var(--color-primary-hover);
}

/* 评论回复表单（嵌套在评论项内的二级表单，由 main.js 动态创建插入） */
/* 时间戳：2026年07月01日00时00分00秒 新增：复用主题变量，保证 light/dark 双主题风格一致；样式参考 .comment-form-wrap / .comment-textarea / .comment-submit-btn 保持视觉统一 */
.comment-reply-form {
	margin-top: 12px;
	padding: 12px;
	background: var(--color-bg-section);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.comment-reply-textarea {
	width: 100%;
	min-height: 64px;
	padding: 8px 12px;
	font-size: 13px;
	font-family: inherit;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	resize: vertical;
	transition: border-color var(--transition), box-shadow var(--transition);
	outline: none;
	box-sizing: border-box;
}

.comment-reply-textarea:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.12);
}

.comment-reply-textarea::placeholder {
	color: var(--color-text-muted);
}

/* 回复表单滑块验证码容器（go-captcha v2 内嵌方案）
   时间戳：2026年07月04日22时30分00秒
   设计说明：验证码组件内部样式由 main.js 工厂函数注入，此处仅设置容器间距 */
.comment-reply-captcha-container {
	margin-top: 8px;
}

.comment-reply-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 8px;
}

/* ============================================================
 * 滑块验证码弹窗（modal-overlay 模式）
 * 时间戳：2026年07月05日00时10分00秒
 * 模块归属：前台通用验证码弹窗（评论/附件购买等场景复用）
 * 设计说明：复用 .modal-overlay 基础遮罩样式，新增弹窗专属类名
 *           弹窗宽度适配验证码主图（640x360 按比例缩放后约 320px 宽）
 *           弹窗内验证码组件复用 .captcha-trigger/.captcha-wrap 样式
 * ============================================================ */

/* 验证码弹窗遮罩：重置 padding 让弹窗紧贴视口边缘（小屏适配） */
.captcha-modal-overlay {
	padding: 16px;
}

/* 验证码弹窗对话框：左对齐文本（标题栏需要左对齐），固定宽度 */
.captcha-modal-dialog {
	max-width: 380px;
	width: 100%;
	padding: 0;
	text-align: left;
	overflow: hidden;
}

/* 弹窗头部：标题 + 关闭按钮（flex 布局） */
.captcha-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--color-border, #e8e8e8);
}

.captcha-modal-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text, #333);
	margin: 0;
	line-height: 1.4;
}

.captcha-modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--color-text-secondary, #999);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.captcha-modal-close:hover {
	background: var(--color-bg-muted, #f5f5f5);
	color: var(--color-text, #333);
}

.captcha-modal-close svg {
	display: block;
}

/* 弹窗主体：验证码容器（内部由 H_创建滑块验证码 工厂函数渲染） */
.captcha-modal-body {
	padding: 20px;
}

/* 弹窗内验证码触发按钮：去除下边距（弹窗内已有 padding） */
.captcha-modal-body .captcha-trigger {
	margin-bottom: 12px;
}

/* 弹窗内验证码主图：宽度100%自适应弹窗容器 */
.captcha-modal-body .captcha-master-img {
	width: 100%;
	height: auto;
}

/* ============================================================
 * 滑块验证码组件（go-captcha v2 内嵌方案）
 * 时间戳：2026年07月04日23时50分00秒
 * 模块归属：前台通用滑块验证码组件（login/register/comment 场景复用）
 * 设计说明：与前台主题变量协调，圆角+边框+阴影
 *           初始显示"点击验证"触发按钮，点击后展开验证码区域
 *           验证成功绿色✓，验证失败红色✗+抖动动画+自动还原
 * ============================================================ */

/* 验证码触发按钮（初始显示，点击后展开验证码区域） */
.captcha-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	margin: 0 0 16px 0;
	padding: 0 16px;
	background: var(--color-bg-card, #fff);
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-sm);
	font-size: 14px;
	color: var(--color-text-secondary, #666);
	cursor: pointer;
	user-select: none;
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.captcha-trigger:hover {
	border-color: var(--color-accent, #4caf7a);
	background: var(--color-bg-muted, #f9f9f9);
}

.captcha-trigger.verified {
	border-color: var(--color-success, #5fb878);
	color: var(--color-success, #5fb878);
	background: rgba(95, 184, 120, 0.06);
	cursor: default;
}

.captcha-trigger.error {
	border-color: var(--color-danger, #ff5722);
	color: var(--color-danger, #ff5722);
	background: rgba(255, 87, 34, 0.06);
	animation: captcha-shake 0.4s ease;
}

.captcha-trigger.loading {
	border-color: var(--color-accent, #4caf7a);
	color: var(--color-accent, #4caf7a);
	cursor: default;
	opacity: 0.7;
}

@keyframes captcha-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-4px); }
	40%, 80% { transform: translateX(4px); }
}

.captcha-trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	line-height: 1;
}

.captcha-trigger-icon svg {
	display: block;
	width: 14px;
	height: 14px;
}

/* 加载图标旋转动画 时间戳：2026年07月04日23时55分00秒 */
.captcha-icon-spin {
	animation: captcha-spin 0.8s linear infinite;
}

@keyframes captcha-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* 验证码区域（点击触发按钮后展开） */
.captcha-wrap {
	margin: 0 0 16px 0;
	padding: 14px;
	background: var(--color-bg-card, #fff);
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-sm);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.captcha-wrap.hidden {
	display: none;
}

.captcha-title {
	font-size: 13px;
	color: var(--color-text-secondary, #666);
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 500;
}

.captcha-refresh {
	cursor: pointer;
	color: var(--color-accent, #4caf7a);
	font-size: 12px;
	user-select: none;
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	transition: background 0.2s;
}

.captcha-refresh:hover {
	background: var(--color-bg-muted, #f5f5f5);
	opacity: 0.85;
}

.captcha-master-wrap {
	position: relative;
	width: 100%;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-bg-muted, #f5f5f5);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.captcha-master-img {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
}

.captcha-tile-img {
	position: absolute;
	left: 0;
	top: 0;
	user-select: none;
	-webkit-user-drag: none;
	cursor: default;
	filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.35));
}

.captcha-slider-track {
	position: relative;
	height: 44px;
	margin-top: 12px;
	background: var(--color-bg-muted, #f0f0f0);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.captcha-slider-progress {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--color-success, #5fb878), var(--color-accent, #4caf7a));
	width: 0;
	border-radius: 1px;
	opacity: 0.5;
}

/* 时间戳：2026年07月05日01时50分00秒
 * 修复说明：手柄尺寸从 44px 改为 40px 并 top:2px 居中
 *           避免手柄圆形上下切线与轨道上下边线重叠产生锯齿
 *           手柄略小于轨道高度，端点处圆形弧线不再与轨道半圆边线碰撞 */
.captcha-slider-handle {
	position: absolute;
	left: 0;
	top: 0px;
	height: 44px;
	width: 44px;
	background: #fff;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	user-select: none;
	color: var(--color-text-secondary, #999);
	z-index: 2;
}

.captcha-slider-handle svg {
	display: block;
	width: 14px;
	height: 14px;
}

.captcha-slider-handle:active {
	cursor: grabbing;
}

.captcha-slider-handle.dragging {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.captcha-slider-handle.success {
	color: #fff;
	background: var(--color-success, #5fb878);
}

.captcha-slider-handle.error {
	color: #fff;
	background: var(--color-danger, #ff5722);
}

.captcha-slider-tip {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: var(--color-text-muted, #999);
	pointer-events: none;
	z-index: 1;
}

.captcha-status {
	font-size: 12px;
	text-align: center;
	margin-top: 8px;
	color: var(--color-text-muted, #999);
	min-height: 18px;
}

.captcha-status.success {
	color: var(--color-success, #5fb878);
}

.captcha-status.error {
	color: var(--color-danger, #ff5722);
}

.comment-reply-cancel {
	padding: 6px 16px;
	font-size: 13px;
	font-family: inherit;
	color: var(--color-text-secondary);
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.comment-reply-cancel:hover {
	color: var(--color-text);
	background: var(--color-bg-tag);
	border-color: var(--color-text-muted);
}

.comment-reply-submit {
	padding: 6px 16px;
	font-size: 13px;
	font-family: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--transition);
}

.comment-reply-submit:hover {
	background: var(--color-primary-hover);
}

.comment-reply-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 评论列表 */
.comment-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.comment-item {
	display: flex;
	gap: 12px;
	padding: 18px;
	background: var(--color-bg-card);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
}

.comment-item-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-bg-tag);
	color: var(--color-text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
}

.comment-item-body {
	flex: 1;
}

.comment-item-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.comment-author {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
}

.comment-time {
	font-size: 12px;
	color: var(--color-text-muted);
}

/* 待审核标签：评论 status=0 时显示，仅发布者本人可见 */
/* 时间戳：2026年07月04日20时30分00秒 */
.comment-pending-tag {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 4px;
	background: rgba(245, 158, 11, 0.12);
	color: #d97706;
	border: 1px solid rgba(245, 158, 11, 0.3);
	white-space: nowrap;
}

.comment-item-text {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.65;
}

.comment-item-actions {
	margin-top: 8px;
}

.comment-reply-btn {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	font-size: 12px;
	line-height: 1.45;
	color: var(--color-text-muted);
	cursor: pointer;
	background: none;
	border: none;
	padding: 2px 4px;
	transition: color var(--transition);
}

.comment-reply-btn:hover {
	color: var(--color-primary);
}

/* 点赞/反对按钮：与回复按钮同尺寸，激活态变色 */
/* 时间戳：2026年07月04日21时30分00秒 */
.comment-like-btn,
.comment-dislike-btn {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	vertical-align: middle;
	font-size: 12px;
	line-height: 1.45;
	color: var(--color-text-muted);
	cursor: pointer;
	background: none;
	border: none;
	padding: 2px 4px;
	transition: color var(--transition);
}

.comment-like-btn:hover {
	color: #10b981;
}

.comment-dislike-btn:hover {
	color: #ef4444;
}

.comment-like-btn.active {
	color: #10b981;
}

.comment-dislike-btn.active {
	color: #ef4444;
}

.comment-like-count,
.comment-dislike-count {
	font-variant-numeric: tabular-nums;
	min-width: 12px;
	text-align: center;
}

.comment-empty {
	display: none;
	text-align: center;
	padding: 32px 0;
	color: var(--color-text-muted);
	font-size: 13px;
}

.comment-load-more-wrap {
	display: none;
	text-align: center;
	padding: 16px 0;
}

.comment-load-more-btn {
	padding: 8px 24px;
	border: 1px solid var(--color-border);
	border-radius: 20px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-size: 13px;
}

.comment-empty-icon {
	font-size: 36px;
	margin-bottom: 10px;
}

/* ── 评论回复列表（楼中楼） ── */
.comment-replies {
	margin-top: 14px;
	padding-left: 44px;
	border-left: 2px solid var(--color-border-light);
}

.comment-reply-item {
	display: flex;
	gap: 10px;
	padding: 12px 0;
}

.comment-reply-item+.comment-reply-item {
	border-top: 1px solid var(--color-border-light);
}

.comment-reply-item-avatar {
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	background: var(--color-primary-light);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
}

/* ── 评论头像图片与首字符占位fallback ── */
/* 时间戳：2026年06月30日23时55分00秒 */
/* 设计说明：
   - .has-avatar：有头像URL时，img填满容器，文本占位隐藏
   - .avatar-fallback：无头像URL或img加载失败时，显示首字符占位文本
   - JS通过onerror在img加载失败时为父容器添加.avatar-fallback类
*/
.comment-item-avatar,
.comment-reply-item-avatar {
	overflow: hidden;
	position: relative;
}

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

.comment-avatar-text {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	line-height: 1;
}

/* 有头像时隐藏首字符占位文本 */
.comment-item-avatar.has-avatar .comment-avatar-text,
.comment-reply-item-avatar.has-avatar .comment-avatar-text {
	display: none;
}

/* 加载失败回退到首字符占位：隐藏img，显示文本 */
.comment-item-avatar.avatar-fallback .comment-avatar-img,
.comment-reply-item-avatar.avatar-fallback .comment-avatar-img {
	display: none;
}

.comment-item-avatar.avatar-fallback .comment-avatar-text,
.comment-reply-item-avatar.avatar-fallback .comment-avatar-text {
	display: flex;
}

.comment-reply-item-body {
	flex: 1;
	min-width: 0;
}

.comment-reply-item-header {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
	flex-wrap: wrap;
}

.comment-reply-author {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
}

.comment-author-badge {
	display: inline-block;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	border-radius: 3px;
}

.comment-reply-time {
	font-size: 11.5px;
	color: var(--color-text-muted);
}

.comment-reply-text {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--color-text-secondary);
}

@media (max-width: 640px) {
	.comment-replies {
		padding-left: 28px;
	}

	.comment-reply-item-avatar {
		width: 24px;
		height: 24px;
		font-size: 10px;
	}

	.comment-reply-author {
		font-size: 12.5px;
	}

	.comment-reply-text {
		font-size: 13px;
	}
}

@media (max-width: 640px) {
	.comment-item {
		flex-direction: column;
	}

	.comment-item-avatar {
		width: 32px;
		height: 32px;
		font-size: 12px;
	}

	.comment-form-wrap {
		flex-direction: column;
	}

	.comment-avatar {
		width: 32px;
		height: 32px;
		font-size: 12px;
	}
}

/* ── 回复示例面板 ── */
.comment-examples-toggle {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	gap: 5px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--color-text-muted);
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px 6px;
	/*margin-top: -8px;*/
	border-radius: 4px;
	transition: color var(--transition), background var(--transition);
}

.comment-examples-toggle:hover {
	color: var(--color-primary);
	background: var(--color-primary-light);
}

.comment-examples-toggle.active {
	color: var(--color-primary);
	background: var(--color-primary-light);
}

.comment-examples-toggle .comment-examples-chevron {
	width: 10px;
	height: 10px;
	transition: transform 0.2s ease;
}

.comment-examples-toggle.active .comment-examples-chevron {
	transform: rotate(180deg);
}

.comment-examples-panel {
	display: none;
	margin-top: 12px;
	padding: 14px 16px;
	background: var(--color-bg-page);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	animation: examplesFadeIn 0.2s ease;
}

.comment-examples-panel.open {
	display: block;
}

@keyframes examplesFadeIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

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

.comment-examples-label {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin-bottom: 10px;
}

.comment-examples-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.comment-example-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--color-text-secondary);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all var(--transition);
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.comment-example-chip:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
	background: var(--color-primary-light);
	box-shadow: 0 2px 8px rgba(76, 175, 125, 0.15);
	transform: translateY(-1px);
}

.comment-example-chip:active {
	transform: scale(0.97);
}

.comment-example-chip .chip-emoji {
	font-size: 14px;
	line-height: 1;
}

.comment-example-chip svg {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	color: currentColor;
	stroke: currentColor;
}

/* 选中填入动画 */
.comment-example-chip.flash {
	animation: chipFlash 0.45s ease;
}

@keyframes chipFlash {
	0% {
		background: var(--color-primary);
		color: #fff;
		border-color: var(--color-primary);
	}

	100% {
		background: var(--color-bg-card);
		color: var(--color-text-secondary);
		border-color: var(--color-border);
	}
}

@media (max-width: 640px) {
	.comment-examples-list {
		gap: 6px;
	}

	.comment-example-chip {
		padding: 5px 10px;
		font-size: 12px;
	}

	.comment-examples-panel {
		padding: 12px 14px;
	}
}

/* ==================== 案例详情页面样式 ==================== */
/* 主视觉横幅 */
.case-detail-hero-banner {
	height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 96px;
	position: relative;
	overflow: hidden;
}

.case-detail-hero-banner.ch1 {
	background: linear-gradient(135deg, #e8f7ef, #d4f0e0);
}

.case-detail-hero-banner.ch2 {
	background: linear-gradient(135deg, #e3f0fa, #d0e4f5);
}

.case-detail-hero-banner.ch3 {
	background: linear-gradient(135deg, #fef6e4, #faecc8);
}

.case-detail-hero-banner.ch4 {
	background: linear-gradient(135deg, #f0e8fa, #e3d4f5);
}

.case-detail-hero-banner.ch5 {
	background: linear-gradient(135deg, #fde8e8, #fad0d0);
}

.case-detail-hero-banner.ch6 {
	background: linear-gradient(135deg, #e6f5f0, #cfe8dd);
}

/* 内容包装容器 */
.case-detail-page-wrapper {
	max-width: 860px;
	margin: 0 auto;
	padding: 40px 0 60px;
}

/* 行业标签徽章（inline，嵌于标题上方元信息条内） */
.case-detail-industry-badge {
	display: inline-block;
	padding: 3px 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-primary);
	background: var(--color-primary-pale);
	border: 1px solid var(--color-primary-light);
	border-radius: var(--radius-full);
	letter-spacing: 0.04em;
}

/* 页面标题 */
.case-detail-page-title {
	font-size: clamp(28px, 4vw, 36px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.25;
	color: var(--color-text);
	margin-bottom: 10px;
}

/* 页面副标题 */
.case-detail-page-subtitle {
	font-size: 16px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin-bottom: 32px;
	max-width: 640px;
}

/* 案例标签区（置于正文末尾） */
.case-detail-tag-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 40px;
}

/* 客户信息卡：结构化展示行业/客户/规模/周期/服务范围（来自 content_meta）；
   最小列宽 240px，6 项在桌面端自动折成两行（如 4+2 / 3+3），避免窄格文字密集折行 */
.case-detail-factbar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-bottom: 32px;
}

.case-fact-item {
	background: var(--color-bg-card);
	padding: 18px 20px;
	/* 用内描边产生分隔线，避免 grid 尾格留白露出底色（移动端奇数项时更明显） */
	box-shadow: 0 0 0 0.5px var(--color-border);
}

.case-fact-label {
	font-size: 12px;
	color: var(--color-text-muted);
	margin-bottom: 6px;
	letter-spacing: 0.03em;
}

.case-fact-value {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.45;
}

/* 目标网址链接：主色文字 + 外链箭头，超长自动换行不溢出 */
.case-fact-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--color-primary);
	font-size: 14px;
	word-break: break-all;
	transition: color var(--transition);
}

.case-fact-link:hover {
	color: var(--color-primary-hover);
}

.case-fact-link-icon {
	flex-shrink: 0;
	transform: rotate(-45deg);
}

/* 数据指标行：自适应列数，支持 2~4 项成效指标；大数字突出案例成果 */
.case-detail-metrics-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
	margin-bottom: 40px;
}

.case-detail-metric-card {
	position: relative;
	background: linear-gradient(160deg, var(--color-primary-pale) 0%, var(--color-bg-card) 60%);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 24px 20px;
	text-align: center;
	overflow: hidden;
}

.case-detail-metric-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--color-primary);
}

.case-metric-val {
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-primary);
	margin-bottom: 8px;
	letter-spacing: -0.02em;
}

.case-metric-lbl {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-secondary);
}

/* 案例分节标题（图片画廊等区块使用） */
.case-detail-section-title {
	font-size: 20px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 18px;
	padding-left: 14px;
	border-left: 4px solid var(--color-primary);
	line-height: 1.3;
}

/* 项目图片画廊：响应式网格，图片等比裁切 + 底部说明文字；
   同时复用 .download-screenshot-item 使图片可点击打开大图查看器，
   此处覆盖其默认 aspect-ratio 与位移动画，保持案例画廊自身布局 */
.case-detail-gallery-section {
	margin-bottom: 40px;
}

.case-detail-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.case-gallery-item {
	margin: 0;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-bg-card);
	aspect-ratio: auto;
	cursor: zoom-in;
}

.case-gallery-item:hover {
	transform: none;
	box-shadow: var(--shadow-card-hover);
}

.case-gallery-item img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
	transition: transform var(--transition);
}

.case-gallery-item:hover img {
	transform: scale(1.04);
}

.case-gallery-caption {
	padding: 12px 16px;
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.5;
	border-top: 1px solid var(--color-border);
}

/* 正文内容块 */
.case-detail-page-body {
	margin-bottom: 40px;
}

.case-detail-block {
	margin-bottom: 32px;
}

.case-detail-block h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 10px;
	padding-left: 14px;
	border-left: 3px solid var(--color-primary);
}

.case-detail-block p {
	font-size: 15px;
	color: var(--color-text-secondary);
	line-height: 1.85;
}

/* 客户评价卡片（案例化：顶部引号 + 左侧色条） */
.case-detail-testimonial-card {
	position: relative;
	background: var(--color-bg-section);
	border-radius: var(--radius-sm);
	border-left: 4px solid var(--color-primary);
	padding: 32px 32px 28px;
	margin: 40px 0 32px;
}

.case-detail-testimonial-card::before {
	content: "\201C";
	position: absolute;
	top: 10px;
	right: 24px;
	font-size: 64px;
	line-height: 1;
	font-family: Georgia, "Times New Roman", serif;
	color: var(--color-primary);
	opacity: 0.18;
	pointer-events: none;
}

.case-detail-testimonial-card blockquote {
	font-size: 16px;
	color: var(--color-text);
	line-height: 1.75;
	font-style: italic;
	margin: 0 0 14px;
	padding: 0;
	border: none;
	quotes: none;
}

.case-testimonial-author {
	font-size: 13px;
	color: var(--color-text-muted);
}

.case-testimonial-author::before {
	content: "— ";
}

.case-testimonial-author strong {
	color: var(--color-text);
}

/* 相关案例区域 */
.related-cases-section {
	background: var(--color-bg-section);
	padding: 60px 0;
}

.related-cases-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.related-case-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 28px 22px;
	text-decoration: none;
	display: block;
	transition: box-shadow var(--transition), transform var(--transition);
}

.related-case-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.related-case-icon {
	font-size: 36px;
	display: block;
	margin-bottom: 14px;
}

.related-case-card .rel-category {
	display: inline-block;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 600;
	background: var(--color-bg-tag);
	color: var(--color-text-secondary);
	border-radius: var(--radius-full);
	margin-bottom: 10px;
}

.related-case-card .rel-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.4;
}

/* 案例上下篇导航 */
.case-nav-section {
	padding: 32px 0 60px;
}

.case-nav-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 860px;
	margin: 0 auto;
}

.case-nav-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 24px;
	text-decoration: none;
	background: var(--color-bg-section);
	border-radius: var(--radius-sm);
	transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.case-nav-link:hover {
	background: var(--color-primary-pale);
	transform: translateY(-2px);
	box-shadow: var(--shadow-card);
}

.case-nav-link.prev {
	text-align: left;
	align-items: flex-start;
	border-left: 3px solid var(--color-primary);
	padding-left: 21px;
}

.case-nav-link.next {
	text-align: right;
	align-items: flex-end;
	border-right: 3px solid var(--color-primary);
	padding-right: 21px;
}

.case-nav-hint {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text-muted);
	letter-spacing: 0.3px;
}

.case-nav-text {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.5;
}

@media (max-width: 768px) {
	.case-detail-hero-banner {
		height: 180px;
		font-size: 56px;
	}

	.case-detail-page-wrapper {
		padding: 28px 20px 40px;
	}

	.case-detail-page-title {
		font-size: 24px;
	}

	.case-detail-metrics-row {
		grid-template-columns: 1fr;
	}

	.case-detail-factbar {
		grid-template-columns: repeat(2, 1fr);
	}

	.case-detail-gallery {
		grid-template-columns: 1fr;
	}

	.case-gallery-item img {
		height: 200px;
	}

	.related-cases-grid {
		grid-template-columns: 1fr;
	}

	.case-nav-row {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.case-nav-link.next {
		align-items: flex-start;
		text-align: left;
	}
}

/* =========================================
USER CENTER — 用户中心专属样式
设计规范：复用主站 CSS 变量、圆角、阴影、过渡
2025年06月24日
========================================= */

/* ── 用户中心整体布局 ── */
.user-layout {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 32px 80px;
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 32px;
	align-items: start;
}

/* ── 左侧侧边栏 ── */
.user-sidebar {
	position: sticky;
	top: 88px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 24px 20px;
	box-shadow: var(--shadow-card);
}

/* 用户卡片头部 */
.user-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 20px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--color-border);
}

.user-avatar {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-full);
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(76, 175, 125, 0.25);
}

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

.user-card-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.user-card-email {
	font-size: 12px;
	color: var(--color-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 侧边栏导航 */
.user-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.user-nav-section-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
	padding: 12px 12px 6px;
}

.user-nav-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-secondary);
	border-radius: var(--radius-sm);
	transition: background var(--transition), color var(--transition);
	text-decoration: none;
	position: relative;
}

.user-nav-link svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-text-muted);
	transition: color var(--transition);
}

.user-nav-link:hover {
	background: var(--color-bg-section);
	color: var(--color-text);
}

.user-nav-link:hover svg {
	color: var(--color-text-secondary);
}

.user-nav-link.active {
	background: var(--color-primary-pale);
	color: var(--color-primary-hover);
	font-weight: 600;
}

.user-nav-link.active svg {
	color: var(--color-primary);
}

.user-nav-link.active::before {
	content: '';
	position: absolute;
	left: -20px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 18px;
	background: var(--color-primary);
	border-radius: 0 2px 2px 0;
}

.user-nav-badge {
	margin-left: auto;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	background: var(--color-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
}

.user-nav-link.active .user-nav-badge {
	background: var(--color-primary);
}

/* 侧边栏底部退出 */
.user-nav-logout {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}

.user-nav-logout .user-nav-link {
	color: var(--color-danger);
}

.user-nav-logout .user-nav-link svg {
	color: var(--color-danger);
}

.user-nav-logout .user-nav-link:hover {
	background: rgba(231, 76, 60, 0.06);
}

/* ── 右侧主内容区 ── */
.user-content {
	min-width: 0;
}

/* 内容区头部 */
.user-content-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.user-content-title {
	font-size: 26px;
	font-weight: 800;
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin-bottom: 4px;
}

.user-content-sub {
	font-size: 14px;
	color: var(--color-text-secondary);
}

.user-content-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ── 统计卡片网格 ── */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 28px;
}

.stat-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 22px 22px 20px;
	transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
	position: relative;
	overflow: hidden;
}

.stat-card:hover {
	box-shadow: var(--shadow-card-hover);
	border-color: rgba(76, 175, 125, 0.25);
	transform: translateY(-2px);
}

.stat-card-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.stat-card-icon svg {
	width: 20px;
	height: 20px;
}

.stat-card-icon.accent {
	background: rgba(107, 174, 214, 0.12);
	color: var(--color-accent);
}

.stat-card-icon.warning {
	background: rgba(243, 156, 18, 0.12);
	color: #d68910;
}

.stat-card-icon.danger {
	background: rgba(231, 76, 60, 0.10);
	color: var(--color-danger);
}

.stat-card-label {
	font-size: 13px;
	color: var(--color-text-secondary);
	margin-bottom: 6px;
}

.stat-card-value {
	font-size: 28px;
	font-weight: 800;
	color: var(--color-text);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.stat-card-trend {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	margin-top: 8px;
}

.stat-card-trend.up {
	color: var(--color-success);
}

.stat-card-trend.down {
	color: var(--color-danger);
}

.stat-card-trend svg {
	width: 12px;
	height: 12px;
}

/* ── 通用面板卡片 ── */
.user-panel {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 28px;
	margin-bottom: 20px;
}

.user-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border);
}

.user-panel-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: 10px;
}

.user-panel-title svg {
	width: 18px;
	height: 18px;
	color: var(--color-primary);
}

.user-panel-sub {
	font-size: 13px;
	color: var(--color-text-muted);
	font-weight: 400;
	margin-left: 8px;
}

/* ── 快捷入口网格 ── */
.quick-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.quick-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 18px;
	background: var(--color-bg-section);
	border: 1.5px solid transparent;
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: inherit;
	transition: all var(--transition);
}

.quick-item:hover {
	background: var(--color-bg-card);
	border-color: rgba(76, 175, 125, 0.25);
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
}

.quick-item-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.quick-item-icon svg {
	width: 18px;
	height: 18px;
}

.quick-item-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
}

.quick-item-hint {
	font-size: 12px;
	color: var(--color-text-muted);
}

/* ── 活动时间线 ── */
.activity-list {
	display: flex;
	flex-direction: column;
}

.activity-item {
	display: flex;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--color-border);
}

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

.activity-dot {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: var(--color-primary-pale);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.activity-dot svg {
	width: 16px;
	height: 16px;
}

.activity-dot.accent {
	background: rgba(107, 174, 214, 0.12);
	color: var(--color-accent);
}

.activity-dot.warning {
	background: rgba(243, 156, 18, 0.12);
	color: #d68910;
}

.activity-dot.danger {
	background: rgba(231, 76, 60, 0.10);
	color: var(--color-danger);
}

.activity-body {
	flex: 1;
	min-width: 0;
}

.activity-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 2px;
}

.activity-desc {
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.5;
	margin-bottom: 4px;
}

.activity-time {
	font-size: 12px;
	color: var(--color-text-muted);
}

/* ── 表单行（横向） ── */
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 20px;
}

.form-row .form-group {
	margin-bottom: 0;
}

/* 2026年07月23日09时30分00秒 新增：三列布局修饰类(个人资料页使用) */
.form-row.cols-3 {
	grid-template-columns: 1fr 1fr 1fr;
}

/* 头像上传区 */
.avatar-upload {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	background: var(--color-bg-section);
	border-radius: var(--radius-sm);
	margin-bottom: 24px;
}

.avatar-upload .user-avatar {
	width: 80px;
	height: 80px;
	font-size: 30px;
}

.avatar-upload-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.avatar-upload-btns {
	display: flex;
	flex-direction: row;
	gap: 8px;
	flex-wrap: wrap;
}

.avatar-upload-btns .btn-outline {
	padding: 7px 18px;
	font-size: 13px;
}

.avatar-upload-btns .btn-ghost {
	padding: 7px 16px;
	font-size: 13px;
	border: 1.5px solid var(--color-border);
	color: var(--color-text-secondary);
}

.avatar-upload-btns .btn-ghost:hover {
	border-color: var(--color-danger);
	color: var(--color-danger);
	background: rgba(231, 76, 60, 0.06);
}

.avatar-upload-hint {
	font-size: 12px;
	color: var(--color-text-muted);
	margin-top: 4px;
}

/* ── 安全项列表 ── */
.security-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-border);
}

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

.security-item:first-child {
	padding-top: 0;
}

.security-item-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.security-item-icon svg {
	width: 22px;
	height: 22px;
}

.security-item-icon.danger {
	background: rgba(231, 76, 60, 0.10);
	color: var(--color-danger);
}

.security-item-icon.warning {
	background: rgba(243, 156, 18, 0.12);
	color: #d68910;
}

.security-item-body {
	flex: 1;
	min-width: 0;
}

.security-item-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.security-item-desc {
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.5;
}

.security-item-action {
	flex-shrink: 0;
}

/* ── 开关组件 ── */
.switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.switch-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: var(--color-border);
	border-radius: var(--radius-full);
	transition: background var(--transition);
}

.switch-slider::before {
	content: '';
	position: absolute;
	height: 18px;
	width: 18px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform var(--transition);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch input:checked+.switch-slider {
	background: var(--color-primary);
}

.switch input:checked+.switch-slider::before {
	transform: translateX(20px);
}

/* ── 数据表格 ── */
.data-table-wrap {
	overflow-x: auto;
	margin: 0 -28px -28px;
	padding: 0 28px 28px;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.data-table thead th {
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-border);
	white-space: nowrap;
}

.data-table tbody td {
	padding: 16px;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
	vertical-align: middle;
}

.data-table tbody tr:last-child td {
	border-bottom: none;
}

.data-table tbody tr {
	transition: background var(--transition);
}

.data-table tbody tr:hover {
	background: var(--color-bg-section);
}

.data-table .col-id {
	font-weight: 600;
	color: var(--color-text);
}

.data-table .col-amount {
	font-weight: 700;
	color: var(--color-text);
}

/* 修复时间：2026年07月31日 修复 col-actions 使用 display:flex 破坏 td 表格布局的问题
   原因：<td> 设置 display:flex 会丢失默认的 table-cell 显示模式,导致该单元格脱离行基线对齐,
         与同行的其他单元格不在同一水平线上,并干扰表格列宽分配算法
   修复：保留 td 默认 table-cell 显示,改用 white-space:nowrap 防止操作链接换行,
         多链接间距通过 a + a 的 margin-left 实现,与原 gap:8px 视觉效果一致 */
.data-table .col-actions {
	white-space: nowrap;
}

.data-table .col-actions a {
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	transition: background var(--transition);
}

.data-table .col-actions a + a {
	margin-left: 8px;
}

.data-table .col-actions a:hover {
	background: var(--color-primary-pale);
}

.data-table .col-actions a.danger {
	color: var(--color-danger);
}

.data-table .col-actions a.danger:hover {
	background: rgba(231, 76, 60, 0.06);
}

/* 订单状态徽章 */
/* 修复时间：2026年07月31日 增加 white-space:nowrap
   原因：当状态列宽不足时,inline-flex 容器会被压缩,导致内部文字(匿名 flex 项)换行,
         破坏胶囊状徽章的圆角形状,出现"两行文字 + 形状奇怪"的视觉问题
   修复：禁止文字换行,确保 ::before 圆点与状态文本始终在同一行 */
.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 600;
	border-radius: var(--radius-full);
	white-space: nowrap;
}

.status-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.status-success {
	background: rgba(39, 174, 96, 0.10);
	color: var(--color-success);
}

.status-pending {
	background: rgba(243, 156, 18, 0.12);
	color: #d68910;
}

.status-failed {
	background: rgba(231, 76, 60, 0.10);
	color: var(--color-danger);
}

.status-info {
	background: rgba(52, 152, 219, 0.10);
	color: var(--color-info);
}

.status-default {
	background: var(--color-bg-tag);
	color: var(--color-text-secondary);
}

/* ── 法律文档排版 ── */
.legal-content {
	max-width: 800px;
	margin: 0 auto;
	padding: 48px 0 32px;
}

.legal-content h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text);
	margin: 36px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1.5px solid var(--color-border);
}

.legal-content h2:first-child {
	margin-top: 0;
}

.legal-content h3 {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text);
	margin: 24px 0 8px;
}

.legal-content p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--color-text-secondary);
	margin: 0 0 14px;
}

.legal-content ul,
.legal-content ol {
	margin: 0 0 14px;
	padding-left: 24px;
}

.legal-content li {
	font-size: 15px;
	line-height: 1.75;
	color: var(--color-text-secondary);
	margin-bottom: 6px;
}

.legal-content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.legal-content a:hover {
	opacity: 0.8;
}

.legal-content strong {
	color: var(--color-text);
	font-weight: 600;
}

.legal-content code {
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 13px;
	padding: 2px 6px;
	background: var(--color-bg-tag);
	border-radius: 4px;
	color: var(--color-primary);
}

.legal-updated {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
	padding: 10px 16px;
	font-size: 13px;
	color: var(--color-text-secondary);
	background: var(--color-bg-tag);
	border-radius: var(--radius-sm);
}

.legal-updated::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
}

/* ── 收藏卡片网格 ── */
.fav-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.fav-card {
	display: flex;
	gap: 14px;
	padding: 18px;
	background: var(--color-bg-section);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: all var(--transition);
	text-decoration: none;
	color: inherit;
}

.fav-card:hover {
	background: var(--color-bg-card);
	border-color: rgba(76, 175, 125, 0.25);
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
}

.fav-card-thumb {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 24px;
}

.fav-card-thumb svg {
	width: 28px;
	height: 28px;
}

.fav-card-body {
	flex: 1;
	min-width: 0;
}

.fav-card-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 4px;
	line-height: 1.4;
}

.fav-card-desc {
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.5;
	margin-bottom: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fav-card-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--color-text-muted);
}

.fav-card-action {
	flex-shrink: 0;
	align-self: flex-start;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transition);
	border: none;
	cursor: pointer;
}

.fav-card-action:hover {
	background: rgba(231, 76, 60, 0.08);
	color: var(--color-danger);
}

.fav-card-action svg {
	width: 16px;
	height: 16px;
}

/* ── 通知列表 ── */
.notice-list {
	display: flex;
	flex-direction: column;
}

.notice-item {
	display: flex;
	gap: 14px;
	padding: 18px 20px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	margin-bottom: 10px;
	background: var(--color-bg-card);
	transition: all var(--transition);
	position: relative;
}

.notice-item:hover {
	border-color: rgba(76, 175, 125, 0.25);
	box-shadow: var(--shadow-card);
}

.notice-item.unread {
	background: var(--color-primary-pale);
	border-color: rgba(76, 175, 125, 0.20);
}

.notice-item.unread::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
}

.notice-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background: var(--color-primary-pale);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.notice-icon svg {
	width: 18px;
	height: 18px;
}

.notice-icon.accent {
	background: rgba(107, 174, 214, 0.12);
	color: var(--color-accent);
}

.notice-icon.warning {
	background: rgba(243, 156, 18, 0.12);
	color: #d68910;
}

.notice-icon.danger {
	background: rgba(231, 76, 60, 0.10);
	color: var(--color-danger);
}

.notice-body {
	flex: 1;
	min-width: 0;
}

.notice-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.notice-desc {
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.55;
	margin-bottom: 6px;
}

.notice-time {
	font-size: 12px;
	color: var(--color-text-muted);
}

/* 通知项元信息行(时间+操作按钮同行)
 * 新增时间:2026年07月24日20时05分00秒
 * 功能:包裹notice-time和notice-actions,实现时间与操作按钮在同一行两端对齐 */
.notice-actions-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.notice-actions {
	display: flex;
	flex-direction: row;
	gap: 4px;
	align-items: center;
	flex-shrink: 0;
}

.notice-action-link {
	font-size: 12px;
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	transition: background var(--transition);
	white-space: nowrap;
}

.notice-action-link:hover {
	background: var(--color-primary-pale);
}

.notice-action-link.muted {
	color: var(--color-text-muted);
}

.notice-action-link.muted:hover {
	background: var(--color-bg-section);
}

/* ── 筛选标签栏 ── */
.filter-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.filter-chip {
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all var(--transition);
}

.filter-chip:hover {
	border-color: rgba(76, 175, 125, 0.35);
	color: var(--color-text);
}

.filter-chip.active {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

.filter-chip .count {
	margin-left: 6px;
	font-size: 11px;
	opacity: 0.8;
}

/* ── 空状态 ── */
.empty-state {
	text-align: center;
	padding: 60px 20px;
}

.empty-state-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	border-radius: var(--radius-full);
	background: var(--color-bg-section);
	color: var(--color-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
}

.empty-state-icon svg {
	width: 32px;
	height: 32px;
}

.empty-state-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 6px;
}

.empty-state-desc {
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 20px;
}

/* ── 分页 ── */
.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	max-width: 100%;
	margin-top: 28px;
}

.pagination a,
.pagination span {
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: all var(--transition);
}

.pagination a:hover {
	border-color: rgba(76, 175, 125, 0.35);
	color: var(--color-primary);
}

.pagination .current {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

.pagination .disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* 分页响应式：移动端避免横向溢出主界面区域，保持全部可点击 */
@media (max-width: 768px) {
	.pagination {
		gap: 5px;
		margin-top: 22px;
	}

	.pagination a,
	.pagination span {
		min-width: 32px;
		height: 32px;
		padding: 0 9px;
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.pagination {
		gap: 4px;
	}

	.pagination a,
	.pagination span {
		min-width: 30px;
		height: 30px;
		padding: 0 7px;
		font-size: 12px;
	}

	/* 超小屏将统计信息独占一行，精简导航行但保留可读与可操作 */
	.pagination .info {
		flex-basis: 100%;
		order: 99;
		margin-top: 2px;
	}
}

/* ── 用户中心响应式 ── */
@media (max-width: 1024px) {
	.user-layout {
		grid-template-columns: 220px 1fr;
		gap: 24px;
		padding: 32px 24px 60px;
	}

	.stat-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.quick-grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

@media (max-width: 768px) {
	.user-layout {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 24px 16px 48px;
	}

	.user-sidebar {
		position: static;
		top: auto;
	}

	.user-nav {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.user-nav-section-label {
		width: 100%;
	}

	.user-nav-link {
		flex: 1 1 auto;
		justify-content: center;
		padding: 10px 14px;
	}

	.user-nav-link.active::before {
		display: none;
	}

	.user-nav-logout {
		width: 100%;
		border-top: none;
		padding-top: 0;
		margin-top: 8px;
	}

	.user-content-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.stat-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.stat-card {
		padding: 18px;
	}

	.stat-card-value {
		font-size: 24px;
	}

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

	.form-row {
		grid-template-columns: 1fr;
	}

	/* 2026年07月23日09时30分00秒 响应式：三列布局在小屏幕下也变为单列 */
	.form-row.cols-3 {
		grid-template-columns: 1fr;
	}

	.user-panel {
		padding: 20px;
	}

	.data-table-wrap {
		margin: 0 -20px -20px;
		padding: 0 20px 20px;
	}

	.security-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.security-item-action {
		align-self: flex-end;
	}

	.legal-content {
		padding: 32px 0 24px;
	}

	.legal-content h2 {
		font-size: 18px;
		margin: 28px 0 10px;
	}

	.legal-content p,
  .legal-content li {
		font-size: 14px;
	}

	.avatar-upload {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.notice-item {
		flex-direction: column;
	}

	.notice-actions-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

@media (max-width: 480px) {
	.stat-grid {
		grid-template-columns: 1fr;
	}

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

	.user-content-title {
		font-size: 22px;
	}

	.user-panel {
		padding: 18px;
	}

	.data-table {
		font-size: 13px;
	}

	.data-table thead th,
  .data-table tbody td {
		padding: 12px 10px;
	}

	.legal-content h2 {
		font-size: 16px;
	}

	.legal-content h3 {
		font-size: 15px;
	}
}

/* =========================================
SVG Icon 替代 Emoji — 尺寸与颜色适配
注意：使用外部 icons.svg 引用时，color 不会级联到 SVG 内部，
必须使用 fill 和 stroke 属性。
========================================= */
.article-thumb-bg>svg {
	width: 42px;
	height: 42px;
	fill: none;
	stroke: rgba(255, 255, 255, 0.6);
}

.prod-detail-hero>svg {
	width: 80px;
	height: 80px;
	fill: none;
	stroke: rgba(0, 0, 0, 0.12);
}

.article-detail-hero>svg {
	width: 80px;
	height: 80px;
	fill: none;
	stroke: rgba(255, 255, 255, 0.6);
}

.case-detail-hero-banner>svg {
	width: 96px;
	height: 96px;
	fill: none;
	stroke: rgba(0, 0, 0, 0.12);
}

.prod-feature-icon>svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
}

.related-prod-img>svg {
	width: 48px;
	height: 48px;
	fill: none;
	stroke: rgba(0, 0, 0, 0.15);
}

.related-case-icon>svg {
	width: 36px;
	height: 36px;
	fill: none;
	stroke: currentColor;
}

.btn-primary svg,
.btn-outline svg {
	width: 1em;
	height: 1em;
	vertical-align: middle;
	margin-right: 2px;
	fill: none;
	stroke: currentColor;
}

@media (max-width: 768px) {
	.prod-detail-hero>svg {
		width: 64px;
		height: 64px;
	}

	.article-detail-hero>svg {
		width: 48px;
		height: 48px;
	}

	.case-detail-hero-banner>svg {
		width: 56px;
		height: 56px;
	}
}

/* ==================== 标签云页面样式 ==================== */

/* 标签统计概览卡片网格 */
.tags-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 56px;
}

.tags-stats-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 28px 24px;
	text-align: center;
	transition: box-shadow var(--transition), transform var(--transition);
}

.tags-stats-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.tags-stats-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
	color: var(--color-primary);
}

.tags-stats-num {
	font-size: 32px;
	font-weight: 800;
	color: var(--color-primary);
	line-height: 1;
	margin-bottom: 4px;
}

.tags-stats-label {
	font-size: 13px;
	color: var(--color-text-muted);
}

/* 标签分类区块 */
.tags-category-section {
	margin-bottom: 40px;
}

.tags-category-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 32px;
}

.tags-category-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 20px;
	padding-left: 14px;
	border-left: 3px solid var(--color-primary);
	display: flex;
	align-items: center;
	gap: 10px;
}

.tags-category-count {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-muted);
	background: var(--color-bg-tag);
	padding: 2px 10px;
	border-radius: var(--radius-full);
}

/* 标签云容器 */
.tags-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* 标签云项 */
.tag-cloud-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: var(--color-bg-section);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: all var(--transition);
	position: relative;
}

.tag-cloud-item:hover {
	background: var(--color-primary-pale);
	color: var(--color-primary);
	border-color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(76, 175, 125, 0.12);
}

.tag-cloud-item.size-lg {
	font-size: 15px;
	font-weight: 600;
	padding: 10px 22px;
}

.tag-cloud-item.size-sm {
	font-size: 12px;
	padding: 6px 14px;
}

.tag-cloud-count {
	font-size: 11px;
	font-weight: 700;
	color: var(--color-text-muted);
	background: var(--color-bg-tag);
	padding: 1px 7px;
	border-radius: var(--radius-full);
	min-width: 20px;
	text-align: center;
}

/* ── 充值套餐卡片网格 ── */
.package-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.package-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 24px 20px 20px;
	cursor: pointer;
	transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
	position: relative;
	overflow: hidden;
	text-align: center;
}

.package-card:hover {
	box-shadow: var(--shadow-card-hover);
	border-color: rgba(76, 175, 125, 0.35);
	transform: translateY(-2px);
}

.package-card.selected {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.15), var(--shadow-card-hover);
}

.package-card.selected::after {
	content: '✓';
	position: absolute;
	top: 10px;
	right: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.package-card-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-secondary);
	margin-bottom: 10px;
}

/* 2026年07月03日23时00分00秒 套餐卡片布局调整：¥ 提到套餐名称下方、金额上方，加粗 */
.package-card-currency {
	font-size: 18px;
	font-weight: 800;
	color: var(--color-text);
	line-height: 1;
	margin-bottom: 4px;
}

.package-card-amount {
	font-size: 32px;
	font-weight: 800;
	color: var(--color-text);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 6px;
}

.package-card-amount .currency {
	font-size: 16px;
	font-weight: 600;
	vertical-align: top;
	margin-right: 2px;
	color: var(--color-text-secondary);
}

.package-card-give {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-success);
	background: rgba(76, 175, 125, 0.10);
	padding: 4px 10px;
	border-radius: var(--radius-full);
	margin-bottom: 12px;
}

.package-card-desc {
	font-size: 12px;
	color: var(--color-text-muted);
	line-height: 1.5;
	min-height: 18px;
}

/* ── 支付方式选择区 ── */
.payment-methods {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.payment-method {
	flex: 1;
	min-width: 140px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition);
}

.payment-method:hover {
	border-color: rgba(76, 175, 125, 0.35);
	box-shadow: var(--shadow-card-hover);
}

.payment-method.selected {
	border-color: var(--color-primary);
	background: var(--color-primary-pale);
}

.payment-method-icon {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
}

.payment-method-icon.alipay {
	background: #1677ff;
}

.payment-method-icon.wechat {
	background: #07c160;
}

.payment-method-icon.balance {
	background: var(--color-primary);
}

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

.payment-method-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 2px;
}

.payment-method-desc {
	font-size: 12px;
	color: var(--color-text-muted);
}

/* ── 充值提交栏 ── */
.recharge-submit-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	background: var(--color-bg-section);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.recharge-submit-summary {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.recharge-submit-summary .label {
	font-size: 13px;
	color: var(--color-text-secondary);
}

.recharge-submit-summary .value {
	font-size: 22px;
	font-weight: 800;
	color: var(--color-primary);
	letter-spacing: -0.02em;
}

.recharge-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 28px;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition);
}

.recharge-submit-btn:hover:not(:disabled) {
	background: var(--color-primary-dark, #3da76a);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(76, 175, 125, 0.25);
}

.recharge-submit-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── 充值提示消息 ── */
.recharge-msg {
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	margin-bottom: 16px;
	display: none;
}

.recharge-msg.show {
	display: block;
}

.recharge-msg.success {
	background: rgba(76, 175, 125, 0.10);
	color: var(--color-success);
	border: 1px solid rgba(76, 175, 125, 0.25);
}

.recharge-msg.error {
	background: rgba(231, 76, 60, 0.08);
	color: var(--color-danger);
	border: 1px solid rgba(231, 76, 60, 0.20);
}

@media (max-width: 768px) {
	.package-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.package-card {
		padding: 18px 14px 14px;
	}

	.package-card-amount {
		font-size: 26px;
	}

	.payment-methods {
		flex-direction: column;
	}

	.payment-method {
		min-width: 0;
	}

	.recharge-submit-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.recharge-submit-btn {
		width: 100%;
	}
}

.tag-cloud-item:hover .tag-cloud-count {
	background: var(--color-primary-light);
	color: var(--color-primary);
}

/* 标签页响应式 */
@media (max-width: 768px) {
	.tags-stats-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.tags-category-card {
		padding: 20px;
	}

	.tags-cloud {
		gap: 8px;
	}

	.tag-cloud-item {
		padding: 6px 14px;
		font-size: 12.5px;
	}

	.tag-cloud-item.size-lg {
		padding: 8px 18px;
		font-size: 13.5px;
	}
}

/* ==================== 搜索页面样式 ==================== */

/* 搜索页大号输入框容器 */
.search-page-input-wrap {
	max-width: 680px;
	margin: 0 auto 48px;
	text-align: center;
}

.search-page-input-bar {
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 6px 6px 6px 20px;
	box-shadow: var(--shadow-card);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.search-page-input-bar:focus-within {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(76, 175, 125, 0.08), var(--shadow-card);
}

.search-page-input-bar svg {
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.search-page-input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 16px;
	color: var(--color-text);
	padding: 12px 14px;
	font-family: inherit;
}

.search-page-input::placeholder {
	color: var(--color-text-muted);
}

.search-page-btn {
	flex-shrink: 0;
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--transition), box-shadow var(--transition);
}

.search-page-btn:hover {
	background: var(--color-primary-hover);
	box-shadow: 0 4px 14px rgba(76, 175, 125, 0.25);
}

/* 热门搜索标签 */
.search-page-hot-tags {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 20px;
}

.search-page-hot-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-muted);
	margin-right: 4px;
}

.search-page-hot-tag {
	padding: 5px 14px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: var(--color-bg-section);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: all var(--transition);
}

.search-page-hot-tag:hover {
	background: var(--color-primary-pale);
	color: var(--color-primary);
	border-color: var(--color-primary);
}

/* 搜索结果统计栏 */
.search-results-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--color-border);
}

.search-results-count {
	font-size: 14px;
	color: var(--color-text-secondary);
}

.search-results-count strong {
	color: var(--color-primary);
	font-weight: 700;
}

.search-results-tabs {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.search-results-tab {
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all var(--transition);
}

.search-results-tab:hover {
	background: var(--color-bg-section);
	color: var(--color-text);
}

.search-results-tab.active {
	background: var(--color-primary-pale);
	color: var(--color-primary);
	border-color: var(--color-primary);
	font-weight: 600;
}

/* 搜索结果列表 */
.search-results-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* 搜索结果卡片 */
.search-result-card {
	display: flex;
	align-items: stretch;
	gap: 20px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 20px 24px;
	text-decoration: none;
	transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.search-result-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
	border-color: var(--color-primary);
}

.search-result-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.search-result-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--color-text-muted);
}

.search-result-category {
	display: inline-block;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 600;
	background: var(--color-bg-tag);
	color: var(--color-text-secondary);
	border-radius: var(--radius-full);
}

.search-result-category.cat-tech {
	background: rgba(76, 175, 125, 0.1);
	color: var(--color-primary);
}

.search-result-category.cat-product {
	background: rgba(100, 180, 255, 0.1);
	color: #4a9eff;
}

.search-result-category.cat-case {
	background: rgba(139, 92, 246, 0.1);
	color: #8b5cf6;
}

.search-result-category.cat-service {
	background: rgba(245, 158, 11, 0.1);
	color: #d97706;
}

.search-result-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.search-result-card:hover .search-result-title {
	color: var(--color-primary);
}

.search-result-summary {
	font-size: 13.5px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.search-result-thumb {
	flex-shrink: 0;
	width: 130px;
	height: 100px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	overflow: hidden;
}

.search-result-thumb.st1 {
	background: linear-gradient(135deg, #e8f7ef, #d4f0e0);
}

.search-result-thumb.st2 {
	background: linear-gradient(135deg, #e3f0fa, #d0e4f5);
}

.search-result-thumb.st3 {
	background: linear-gradient(135deg, #fef6e4, #faecc8);
}

.search-result-thumb.st4 {
	background: linear-gradient(135deg, #f0e8fa, #e3d4f5);
}

.search-result-thumb.st5 {
	background: linear-gradient(135deg, #fde8e8, #fad0d0);
}

.search-result-thumb.st6 {
	background: linear-gradient(135deg, #e6f5f0, #cfe8dd);
}

/* 时间戳: 2026年07月28日10时40分00秒 修复搜索结果缩略图样式问题
 * 问题原因: 原 .search-result-thumb 容器为 100x80(移动端100%x120),设计用于显示字符图标(font-size:36px)
 *          改为 <img> 后缺少图片样式约束,导致图片按原比例缩放显示(如100x52),容器下方露出渐变背景
 * 修复方案: 给 img 添加 width/height:100% + object-fit:cover,填满容器并保持比例裁剪
 * 复用说明: 与项目内 .article-hero-cover / .prod-gallery-main-view > img 保持一致的对象填充模式
 * 响应式: PC填满100x80,移动端填满100%x120(随容器尺寸自适应)
 * 性能影响: 纯CSS,零JS,零布局抖动,不触发重排
 */
.search-result-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* 搜索空状态 */
.search-empty-state {
	text-align: center;
	padding: 60px 20px;
	display: none;
}

.search-empty-state.visible {
	display: block;
}

.search-empty-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--color-bg-section);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	color: var(--color-text-muted);
}

.search-empty-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 6px;
}

.search-empty-desc {
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 20px;
}

/* 搜索页响应式 */
@media (max-width: 768px) {
	.search-page-input-bar {
		padding: 4px 4px 4px 14px;
	}

	.search-page-input {
		font-size: 15px;
		padding: 10px 10px;
	}

	.search-page-btn {
		padding: 8px 16px;
		font-size: 13px;
	}

	.search-results-bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.search-result-card {
		flex-direction: column;
	}

	.search-result-thumb {
		width: 100%;
		height: 120px;
	}
}

/* ==================== 标签详情页样式 ==================== */

/* 标签信息卡片 */
.tag-detail-info-card {
	display: flex;
	gap: 24px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 28px 32px;
	margin-bottom: 40px;
}

.tag-detail-info-icon {
	flex-shrink: 0;
	width: 178px;
	height: 110px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
}

.tag-detail-info-body {
	flex: 1;
	min-width: 0;
}

.tag-detail-info-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.tag-detail-info-name {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text);
}

.tag-detail-info-count {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-primary);
	background: var(--color-primary-pale);
	padding: 3px 12px;
	border-radius: var(--radius-full);
}

.tag-detail-info-desc {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.7;
	margin-bottom: 14px;
}

.tag-detail-info-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tag-detail-related-tag {
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: var(--color-bg-section);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: all var(--transition);
}

.tag-detail-related-tag:hover {
	background: var(--color-primary-pale);
	color: var(--color-primary);
	border-color: var(--color-primary);
}

/* 标签详情页响应式 */
@media (max-width: 768px) {
	.tag-detail-info-card {
		flex-direction: column;
		padding: 20px;
		gap: 16px;
	}

	.tag-detail-info-icon {
		width: 48px;
		height: 48px;
	}

	.tag-detail-info-name {
		font-size: 18px;
	}
}

/* =========================================
   常见问题 (FAQ) 折叠面板
   与页面整体风格统一：卡片阴影、主色强调、平滑过渡
========================================= */

/* FAQ 列表容器 */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 800px;
	margin: 0 auto;
}

/* 单条 FAQ 条目 */
.faq-item {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: box-shadow var(--transition), border-color var(--transition);
}

.faq-item:hover {
	box-shadow: var(--shadow-card-hover);
	border-color: var(--color-primary-light);
}

/* 展开状态的条目高亮边框 */
.faq-item.open {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-card-hover);
}

/* ════════════════════════════════════════
模块：下载中心专属样式
时间戳：2026年07月06日22时00分00秒
设计说明：针对下载内容定制的差异化布局
  - downloads.html：双栏布局（左主列表 + 右侧边栏），表格行式列表
  - download-detail.html：双栏布局（左主内容 + 右粘性下载卡片），含更新日志时间线
  - 复用现有 .attachment-item-icon / .attachment-list / .attachment-item 等附件样式
  - 复用现有 CSS 变量（--color-primary / --color-bg-card / --radius-* / --shadow-* 等）
  - 复用现有 .reveal / .breadcrumb-bar / .article-share-btn / .article-nav-* 等公共样式
════════════════════════════════════════ */

/* ── 1. 下载列表页：双栏主网格 ── */
.download-page-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	align-items: start;
}

/* 主内容列：允许收缩到容器宽度，避免内部横滑标签把整页撑出横向滚动条 */
.download-main {
	min-width: 0;
}

/* ── 2. 筛选栏 ── */
.download-filter-bar {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 18px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	margin-bottom: 20px;
}

.download-cat-tabs {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.download-cat-tab {
	padding: 6px 16px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all var(--transition);
}

.download-cat-tab:hover {
	color: var(--color-primary-hover);
	background: var(--color-primary-pale);
}

.download-cat-tab.active {
	color: #fff;
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.download-sort-box {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--color-text-muted);
}

.download-sort-label {
	margin-right: 4px;
}

.download-sort-btn {
	padding: 4px 12px;
	font-size: 13px;
	color: var(--color-text-secondary);
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all var(--transition);
}

.download-sort-btn:hover {
	color: var(--color-primary-hover);
	border-color: var(--color-primary);
}

.download-sort-btn.active {
	color: var(--color-primary);
	background: var(--color-primary-pale);
	border-color: var(--color-primary);
}

/* ── 3. 下载行列表（区别于 products 网格卡片） ── */
.download-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* 下载行卡片：三栏网格（缩略图 / 信息 / 操作区），缩略图为 102×102 正方形 */
.download-row {
	display: grid;
	grid-template-columns: 102px minmax(0, 1fr) 168px;
	gap: 22px;
	align-items: center;
	padding: 18px 24px;
	min-height: 168px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	transition: all var(--transition);
	position: relative;
	overflow: hidden;
}

.download-row::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--color-primary) 0%, rgba(76, 175, 125, 0.4) 40%, transparent 100%);
	opacity: 0;
	transition: opacity var(--transition);
}

.download-row:hover {
	border-color: rgba(76, 175, 125, 0.4);
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
	background: var(--color-bg-card);
}

.download-row:hover::before {
	opacity: 1;
}

/* 行内文件类型图标（兜底图标尺寸与缩略图一致，102×102 正方形） */
.download-row-icon {
	width: 102px;
	height: 102px;
	border-radius: var(--radius-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex-shrink: 0;
	font-family: var(--font-mono, "SF Mono", Consolas, "Microsoft YaHei", monospace);
	font-weight: 700;
	letter-spacing: 0.5px;
	user-select: none;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: transform var(--transition), box-shadow var(--transition);
}

.download-row:hover .download-row-icon {
	transform: scale(1.05);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.download-row-icon::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}

.download-row-icon::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.download-row-icon-deco {
	opacity: 0.9;
	flex-shrink: 0;
	transition: opacity var(--transition);
	width: 34px;
	height: 34px;
}

.download-row:hover .download-row-icon-deco {
	opacity: 1;
}

.download-row-icon .attachment-item-icon-text {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.download-row-icon-size {
	position: absolute;
	bottom: 6px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 9px;
	font-weight: 600;
	opacity: 0.85;
	letter-spacing: 0.5px;
}

.download-row-icon.zip {
	background: linear-gradient(145deg, #60a5fa, #3b82f6);
	color: #ffffff;
}

.download-row-icon.pdf {
	background: linear-gradient(145deg, #f87171, #ef4444);
	color: #ffffff;
}

.download-row-icon.doc {
	background: linear-gradient(145deg, #34d399, #10b981);
	color: #ffffff;
}

.download-row-icon.mp4 {
	background: linear-gradient(145deg, #c084fc, #a855f7);
	color: #ffffff;
}

.download-row-icon.default {
	background: linear-gradient(145deg, #94a3b8, #64748b);
	color: #ffffff;
}

/* 行内缩略图样式：优先展示内容封面图，封面图缺失/加载失败时兜底显示文件类型图标
   宽高一致 102×102 正方形，高度略高于右侧信息区 */
.download-row-thumb {
	width: 102px;
	height: 102px;
	flex-shrink: 0;
	position: relative;
}

.download-row-thumb-cover {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 1;
}

/* 图片缩放交给内层 img，链接容器与缩略图严格同尺寸，避免悬停时描边与图片尺寸不一致 */
.download-row-thumb-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition);
}

.download-row:hover .download-row-thumb-cover img {
	transform: scale(1.05);
}

/* 兜底图标：被封面图(z-index:1)覆盖，封面图缺失/加载失败时可见 */
.download-row-thumb .download-row-icon {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* 行内信息（标题行+描述+元数据），整体左对齐 */
.download-row-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

/* 标题行：标题与版本标签同行，元信息独占下一行，均靠左排列 */
.download-row-head {
	margin-bottom: 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	width: 100%;
}

.download-row-title {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 17px;
	font-weight: 650;
	color: var(--color-text);
	margin: 0;
	line-height: 1.45;
	transition: color var(--transition);
}

.download-row-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

.download-row-title a:hover {
	color: var(--color-primary-hover);
}

.download-row-ver {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 700;
	color: var(--color-primary);
	background: var(--color-primary-pale);
	border-radius: var(--radius-full);
	letter-spacing: 0.04em;
	box-shadow: 0 1px 2px rgba(76, 175, 125, 0.15);
}

.download-row-platform {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--color-text-muted);
}

.download-row-platform svg {
	opacity: 0.7;
}

.download-row-desc {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0;
	/* 左对齐并铺满信息区宽度，保证摘要起始位置与标题文字对齐 */
	align-self: stretch;
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 400;
	letter-spacing: 0.01em;
}

.download-row-tags {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.download-tag {
	font-size: 12px;
	font-weight: 500;
	padding: 3px 11px;
	color: var(--color-text-secondary);
	background: var(--color-bg-tag, #f3f5f8);
	border-radius: var(--radius-full);
	letter-spacing: 0.02em;
	transition: all var(--transition);
	border: 1px solid transparent;
}

.download-tag:hover {
	background: var(--color-primary-pale);
	color: var(--color-primary);
	border-color: rgba(76, 175, 125, 0.2);
}

.download-tag-free,
.download-tag-points,
.download-tag-paid,
.download-tag-vip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: var(--radius-full);
	letter-spacing: 0.02em;
}

.download-tag-free {
	color: #16a34a;
	background: #dcfce7;
}

.download-tag-points {
	color: #7c3aed;
	background: #ede9fe;
}

.download-tag-paid {
	color: #ea580c;
	background: #ffedd5;
}

.download-tag-vip {
	color: #b45309;
	background: #fef3c7;
}

[data-theme="dark"] .download-tag-free {
	color: #4ade80;
	background: #142a1d;
}

[data-theme="dark"] .download-tag-points {
	color: #a78bfa;
	background: #221c3a;
}

[data-theme="dark"] .download-tag-paid {
	color: #fb923c;
	background: #3a2310;
}

[data-theme="dark"] .download-tag-vip {
	color: #fcd34d;
	background: #3a2e10;
}

[data-theme="dark"] .download-tag {
	color: #a0aab8;
	background: #262d38;
}

[data-theme="dark"] .download-row-icon {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .download-row-icon::after {
	background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .download-row-icon.zip {
	background: linear-gradient(145deg, #1e40af, #1e3a8a);
}

[data-theme="dark"] .download-row-icon.pdf {
	background: linear-gradient(145deg, #991b1b, #7f1d1d);
}

[data-theme="dark"] .download-row-icon.doc {
	background: linear-gradient(145deg, #047857, #065f46);
}

[data-theme="dark"] .download-row-icon.mp4 {
	background: linear-gradient(145deg, #6b21a8, #581c87);
}

[data-theme="dark"] .download-row-icon.default {
	background: linear-gradient(145deg, #475569, #334155);
}

[data-theme="dark"] .download-row::before {
	background: linear-gradient(90deg, var(--color-primary) 0%, rgba(93, 196, 138, 0.3) 40%, transparent 100%);
}

[data-theme="dark"] .download-btn-primary {
	box-shadow: 0 2px 8px rgba(76, 175, 125, 0.2);
}

[data-theme="dark"] .download-btn-primary:hover {
	box-shadow: 0 6px 20px rgba(76, 175, 125, 0.3);
}

/* 行内元信息（横排带圆点分隔符，位于标题行下方并左对齐） */
.download-row-meta {
	display: flex;
	align-items: center;
	gap: 0;
}

.download-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	padding: 0 14px;
	position: relative;
	white-space: nowrap;
}

.download-meta-item:first-child {
	padding-left: 0;
}

/* 元信息分隔符：小圆点（与参考图一致） */
.download-meta-item:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-text-muted);
	opacity: 0.55;
}

.download-meta-label {
	color: var(--color-text-muted);
	font-size: 12.5px;
	font-weight: 400;
}

.download-meta-value {
	color: var(--color-text-secondary);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-size: 13px;
}

/* 行内下载按钮区（三行布局：标签+平台图标+按钮）
   信息区与操作区之间保留竖向分割条（此前被注释导致分隔线消失，现恢复） */
.download-row-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	justify-content: center;
	min-width: 168px;
	align-self: stretch;
	padding-left: 22px;
	border-left: 1px solid var(--color-border);
	/* 分割条略微加深，保证浅色卡片上清晰可辨 */
	box-shadow: inset 1px 0 0 rgba(26, 34, 51, 0.04);
}

/* 付费标签（第一行） */
.download-action-top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	width: 100%;
}

/* 平台图标组（第二行） */
.download-row-platforms {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--color-text-muted);
	width: 100%;
}

.download-row-platforms svg {
	width: 20px;
	height: 20px;
	opacity: 0.7;
	/* 平台图标为 currentColor 填充，参考图呈深灰单色 */
	color: var(--color-text-secondary);
	fill: currentColor;
	transition: opacity var(--transition), transform var(--transition);
}

.download-row:hover .download-row-platforms svg {
	opacity: 0.9;
}

.download-row-platforms svg:hover {
	transform: scale(1.2);
	opacity: 1;
	color: var(--color-primary);
}

/* 下载按钮（第三行） */
.download-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: all var(--transition);
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(76, 175, 125, 0.25);
	position: relative;
	overflow: hidden;
}

.download-btn-primary::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.4s ease;
}

.download-btn-primary:hover {
	background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
	box-shadow: 0 6px 20px rgba(76, 175, 125, 0.4);
	transform: translateY(-2px);
}

.download-btn-primary:hover::before {
	left: 100%;
}

.download-btn-primary svg {
	fill: none;
	stroke: currentColor;
}

/* 按钮上方付费提示标签 */
.download-action-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: var(--radius-full);
	letter-spacing: 0.04em;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.download-action-tag.tag-free {
	color: #15803d;
	background: linear-gradient(135deg, #dcfce7, #bbf7d0);
}

.download-action-tag.tag-points {
	color: #6d28d9;
	background: linear-gradient(135deg, #ede9fe, #ddd6fe);
}

.download-action-tag.tag-paid {
	color: #c2410c;
	background: #ffedd5;
}

.download-action-tag.tag-vip {
	color: #b45309;
	background: #fef3c7;
}

[data-theme="dark"] .download-action-tag.tag-free {
	color: #4ade80;
	background: #142a1d;
}

[data-theme="dark"] .download-action-tag.tag-points {
	color: #a78bfa;
	background: #221c3a;
}

[data-theme="dark"] .download-action-tag.tag-paid {
	color: #fb923c;
	background: #3a2310;
}

[data-theme="dark"] .download-action-tag.tag-vip {
	color: #fcd34d;
	background: #3a2e10;
}

/* ── 响应式布局：下载行适配移动端（手机端卡片式重构）
   时间戳：2026年10月17日10时45分00秒
   设计说明：参考手机端设计稿，自上而下顺序——
     1. 顶部横向：左侧方形圆角应用图标；右侧依次为加粗应用名、浅绿圆角版本标签、浅灰圆角描述框
     2. 信息模块：描边圆角块，第一行“大小/下载”左右两栏+中间竖分隔线，第二行“更新”
     3. 操作行：左侧浅绿“免费”标签，右侧横向平台图标组
     4. 底部：通栏绿色渐变“立即下载”按钮
   PC 端三栏网格布局保持不变，仅在此断点内覆盖。 */
@media (max-width: 768px) {
	/* 行容器：改为两列 Grid——前 3 行为“缩略图 + 标题/版本/描述”顶部区，第 4 行为信息模块
	   顶部区三行行高合计 100px，与缩略图正方形边长严格一致 */
	.download-row {
		display: grid;
		grid-template-columns: 118px minmax(0, 1fr);
		/* 顶部三行：标题 24 + 版本 20 + 描述 56 = 100px，与缩略图正方形边长严格一致 */
		grid-template-rows: 24px 20px 56px auto auto;
		grid-auto-flow: row;
		column-gap: 14px;
		row-gap: 0;
		align-items: stretch;
		padding: 16px;
		min-height: 0;
	}

	/* 应用图标：固定 100×100 正方形，纵向跨顶部三行，与右侧文字区上下齐平 */
	.download-row-thumb {
		position: relative;
		grid-column: 1;
		grid-row: 1 / 4;
		align-self: start;
		justify-self: start;
		width: 100px;
		height: 100px;
		max-height: 100px;
		margin: 0;
		z-index: 1;
	}

	/* 缩略图封面与兜底图标：跟随缩略图容器高度，保持圆角方形裁切 */
	.download-row-thumb-cover {
		width: 100%;
		height: 100%;
		border-radius: var(--radius-sm);
	}

	/* 信息区扁平化：标题行/描述框直接成为卡片 Grid 项；
	   标题行内部再纵向排列“应用名 → 版本标签” */
	.download-row-info {
		display: contents;
	}

	/* 标题行：占第 1~2 行第 2 列（24+20=44px），内部纵向排列“应用名 → 版本标签”，两者间隔 6px */
	.download-row-head {
		grid-column: 2;
		grid-row: 1 / 3;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: center;
		gap: 6px;
		width: 100%;
		min-width: 0;
		height: 44px;
		margin-bottom: 0;
		overflow: hidden;
	}

	/* 应用名：单行显示并超出省略 */
	.download-row-title {
		display: block;
		width: 100%;
		font-size: 17px;
		font-weight: 700;
		line-height: 22px;
		margin: 0;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 版本标签：浅绿圆角胶囊，左对齐，单行省略 */
	.download-row-ver {
		align-self: flex-start;
		max-width: 100%;
		padding: 2px 10px;
		font-size: 11.5px;
		font-weight: 600;
		line-height: 14px;
		border-radius: var(--radius-full);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 描述框：占满第 3 行（56px，内含 8px 上间距），底边与缩略图底边严格齐平 */
	.download-row-desc {
		grid-column: 2;
		grid-row: 3;
		align-self: stretch;
		display: flex;
		align-items: center;
		height: auto;
		margin-top: 8px;
		padding: 6px 10px;
		font-size: 12.5px;
		line-height: 1.5;
		color: var(--color-text-secondary);
		background: var(--color-bg-soft, #f7f8fa);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		overflow: hidden;
	}

	/* 信息模块：整行通栏显示（由卡片 Grid 单独占第 4 行），与顶部区保持 14px 间距 */
	.download-row-meta {
		grid-column: 1 / -1;
		grid-row: 4;
		width: 100%;
		align-self: stretch;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 0;
		row-gap: 0;
		margin-top: 14px;
		padding: 0;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		background: transparent;
	}

	/* 信息项：垂直居中，左右内边距一致（覆盖 PC 端首项 padding-left:0，保证“大小”与边框有间隔） */
	.download-meta-item,
	.download-meta-item:first-child {
		padding: 12px 16px;
		gap: 8px;
		font-size: 13px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 取消 PC 端圆点分隔符，手机端改为模块内两栏排布 */
	.download-meta-item:not(:first-child)::before {
		display: none;
	}

	/* 第一行右栏（下载量）左侧加竖分隔线，与参考图一致 */
	.download-meta-item:nth-child(2) {
		border-left: 1px solid var(--color-border);
	}

	.download-meta-label {
		font-size: 13px;
		font-weight: 500;
	}

	.download-meta-value {
		font-size: 14px;
		font-weight: 700;
		color: var(--color-text);
	}

	/* 更新时间项：跨两列，独占第二行，顶部细线分隔 */
	.download-meta-item:last-child {
		grid-column: 1 / -1;
		padding-top: 12px;
		border-top: 1px solid var(--color-border);
	}

	/* 操作区：通栏占满第 5 行，去掉竖分隔条，改为“免费标签（左）+ 平台图标（右）”一行 + 通栏按钮 */
	.download-row-action {
		grid-column: 1 / -1;
		grid-row: 5;
		align-items: stretch;
		align-self: auto;
		padding-left: 0;
		padding-top: 0;
		margin-top: 14px;
		min-width: 0;
		border-left: none;
		box-shadow: none;
		gap: 12px;
	}

	.download-action-top {
		justify-content: space-between;
		width: 100%;
	}

	.download-row-platforms {
		width: auto;
		justify-content: flex-end;
		gap: 12px;
	}

	.download-row-platforms svg {
		width: 20px;
		height: 20px;
		opacity: 0.85;
	}

	/* 免费标签：放大为参考图的胶囊形态 */
	.download-action-tag {
		font-size: 13px;
		font-weight: 700;
		padding: 5px 16px;
	}

	.download-btn-primary {
		width: 100%;
		padding: 14px 24px;
		font-size: 16px;
		gap: 10px;
		border-radius: var(--radius-sm);
	}

	.download-btn-primary svg {
		width: 18px;
		height: 18px;
	}

	/* 缩略图兜底图标与移动端缩略图尺寸保持一致 */
	.download-row-thumb .download-row-icon {
		width: 100%;
		height: 100%;
	}

	.download-row-icon .download-row-icon-deco {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 480px) {
	.download-row {
		grid-template-columns: 100px minmax(0, 1fr);
		/* 顶部三行紧排（无行间距），保持三行合计 100px 与缩略图等高 */
		grid-template-rows: 24px 20px 56px auto auto;
		column-gap: 12px;
		row-gap: 0;
		padding: 14px;
	}

	/* 小屏缩略图同样严格 1:1 正方形（边长 = 左列 100px） */
	.download-row-thumb {
		width: 100%;
		height: 100%;
	}

	.download-row-title {
		font-size: 17px;
	}

	/* 信息项左右内边距同步收敛，避免小屏文字挤压 */
	.download-meta-item,
	.download-meta-item:first-child {
		padding: 10px 12px;
	}

	.download-row-ver {
		font-size: 11px;
		padding: 3px 10px;
	}

	.download-row-desc {
		font-size: 12.5px;
		line-height: 1.6;
	}

	.download-meta-item {
		font-size: 12.5px;
	}

	.download-meta-value {
		font-size: 13px;
	}

	.download-row-platforms svg {
		width: 18px;
		height: 18px;
	}

	.download-btn-primary {
		padding: 13px 20px;
		font-size: 15px;
	}

	.download-row-icon .download-row-icon-deco {
		width: 24px;
		height: 24px;
	}
}

/* ── 4. 分页 ── */
.download-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
	flex-wrap: wrap;
}

.download-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	font-size: 13px;
	color: var(--color-text-secondary);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: all var(--transition);
}

.download-page-btn:hover:not(.disabled):not(.active) {
	color: var(--color-primary-hover);
	border-color: var(--color-primary);
}

.download-page-btn.active {
	color: #fff;
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.download-page-btn.disabled {
	color: var(--color-text-muted);
	background: var(--color-bg-card);
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.download-page-ellipsis {
	padding: 0 8px;
	color: var(--color-text-muted);
}

/* ── 5. 右侧侧边栏卡片 ── */
.download-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 100px;
}

.download-side-card {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 20px 22px;
}

.download-side-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border);
}

.download-side-header svg {
	color: var(--color-primary);
}

/* 热门下载 Top 列表 */
.download-top-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.download-top-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px;
	border-radius: var(--radius-sm);
	transition: background var(--transition);
}

.download-top-item:hover {
	background: var(--color-primary-pale);
}

.download-top-rank {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-text-muted);
	background: var(--color-bg-tag, #f3f5f8);
	border-radius: 4px;
	font-variant-numeric: tabular-nums;
}

.download-top-rank.rank-1 {
	color: #fff;
	background: #f59e0b;
}

.download-top-rank.rank-2 {
	color: #fff;
	background: #94a3b8;
}

.download-top-rank.rank-3 {
	color: #fff;
	background: #b45309;
}

.download-top-name {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	color: var(--color-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color var(--transition);
}

.download-top-name:hover {
	color: var(--color-primary-hover);
}

.download-top-count {
	flex-shrink: 0;
	font-size: 11.5px;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .download-top-rank {
	background: #262d38;
}

[data-theme="dark"] .download-top-item:hover {
	background: #132218;
}

/* 标签云 */
.download-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.download-cloud-tag {
	font-size: 12.5px;
	padding: 4px 11px;
	color: var(--color-text-secondary);
	background: var(--color-bg-tag, #f3f5f8);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: all var(--transition);
}

.download-cloud-tag:hover {
	color: var(--color-primary-hover);
	background: var(--color-primary-pale);
}

[data-theme="dark"] .download-cloud-tag {
	background: #262d38;
}

[data-theme="dark"] .download-cloud-tag:hover {
	background: #132218;
}

/* 下载须知 */
.download-side-notice {
	background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-bg-card) 100%);
	border-color: rgba(76, 175, 125, 0.2);
}

.download-notice-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.download-notice-list li {
	position: relative;
	padding-left: 16px;
	font-size: 12.5px;
	color: var(--color-text-secondary);
	line-height: 1.6;
}

.download-notice-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-primary);
}

/* ── 6. 统计栏 ── */
.download-stats-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	padding: 32px 28px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.download-stat-item {
	text-align: center;
}

.download-stat-num {
	font-size: clamp(28px, 3.5vw, 38px);
	font-weight: 800;
	color: var(--color-primary);
	line-height: 1.1;
	margin-bottom: 6px;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.download-stat-label {
	font-size: 13px;
	color: var(--color-text-muted);
	letter-spacing: 0.05em;
}

/* ════════════════════════════════════════
   下载详情页样式
════════════════════════════════════════ */

/* ── 7. 详情页头部封面（居中大图标，与 prod-detail-hero 风格一致） ── */
.download-detail-hero {
	height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 96px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #e8f7ef, #d4f0e0);
}

.download-detail-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(76, 175, 125, 0.06) 1px, transparent 1px);
	background-size: 40px 40px;
	pointer-events: none;
}

.download-detail-hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* main 内部资源标题信息区（从原 hero 移入） */
.download-detail-header {
	padding: 24px 28px;
	background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-bg-card) 100%);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	margin-bottom: 32px;
}

.download-detail-hero-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.download-badge-cat,
.download-badge-ver,
.download-badge-platform {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	font-size: 12.5px;
	font-weight: 600;
	border-radius: var(--radius-full);
	letter-spacing: 0.02em;
}

.download-badge-cat {
	color: #fff;
	background: var(--color-primary);
}

.download-badge-ver {
	color: var(--color-primary-hover);
	background: var(--color-primary-pale);
	border: 1px solid rgba(76, 175, 125, 0.25);
}

.download-badge-platform {
	color: var(--color-text-secondary);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
}

.download-detail-hero-title {
	font-size: clamp(24px, 3.2vw, 32px);
	font-weight: 800;
	color: var(--color-text);
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0 0 12px 0;
}

.download-detail-hero-desc {
	font-size: 15px;
	color: var(--color-text-secondary);
	line-height: 1.7;
	max-width: 720px;
	margin: 0;
}

/* ── 7. 下载详情页面包屑导航（独立样式，宽度适配详情页主体） ── */
.download-detail-breadcrumb-bar {
	padding: 16px 0;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.download-detail-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--color-text-muted);
	max-width: 1160px;
	margin: 0 auto;

}

.download-detail-breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition);
}

.download-detail-breadcrumb a:hover {
	color: var(--color-primary);
}

.download-detail-breadcrumb .bc-sep {
	color: var(--color-border);
}

.download-detail-breadcrumb .bc-current {
	color: var(--color-text);
	font-weight: 600;
}

/* ── 8. 详情页主体网格 ── */
.download-detail-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 36px;
	align-items: start;
}

.download-detail-main {
	min-width: 0;
}

/* 区块标题统一 */
.download-block-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 20px 0;
	letter-spacing: -0.01em;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-border);
}

.download-block-title svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.download-block-sub {
	font-size: 13.5px;
	color: var(--color-text-muted);
	margin: -10px 0 18px 0;
}

/* 区块间距与卡片样式 */
.download-screenshot-block,
.download-intro-block,
.download-changelog-block,
.download-req-block,
.download-attachments-block {
	margin-bottom: 28px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 24px 28px;
	box-shadow: var(--shadow-card);
}

/* ── 9. 截图预览 ── */
.download-screenshot-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.download-screenshot-item {
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: var(--color-bg-card);
	transition: transform var(--transition), box-shadow var(--transition);
}

.download-screenshot-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
}

.download-screenshot-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-bg-card) 100%);
	color: var(--color-primary);
	padding: 0 0 10px 0;
	box-sizing: border-box;
}

.download-screenshot-placeholder img {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	flex: 1 1 0;
	min-height: 0;
	align-self: stretch;
}

.download-screenshot-placeholder span {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-secondary);
	flex-shrink: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	text-align: center;
}

/* ── 10. 介绍正文 ── */
.download-intro-body {
	font-size: 14.5px;
	color: var(--color-text-secondary);
	line-height: 1.75;
}

.download-intro-body p {
	margin: 0 0 14px 0;
}

.download-intro-body h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
	margin: 22px 0 12px 0;
}

.download-feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 20px;
}

.download-feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13.5px;
	color: var(--color-text-secondary);
	line-height: 1.6;
}

.download-feature-list li svg {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--color-primary);
}

.download-feature-list li strong {
	color: var(--color-text);
	font-weight: 600;
}

/* ── 11. 更新日志时间线 ── */
.download-changelog-timeline {
	position: relative;
	padding-left: 24px;
}

.download-changelog-timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-border) 100%);
}

.download-changelog-item {
	position: relative;
	padding-bottom: 24px;
}

.download-changelog-item:last-child {
	padding-bottom: 0;
}

.download-changelog-dot {
	position: absolute;
	left: -22px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-bg-card);
	border: 2px solid var(--color-text-muted);
}

.download-changelog-item.latest .download-changelog-dot {
	background: var(--color-primary);
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(76, 175, 125, 0.18);
}

.download-changelog-content {
	background: var(--color-bg-section);
	border-radius: var(--radius-sm);
	padding: 16px 18px;
	transition: background var(--transition);
}

.download-changelog-item:hover .download-changelog-content {
	background: var(--color-primary-pale);
}

.download-changelog-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.download-changelog-ver {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
}

.download-changelog-date {
	font-size: 12.5px;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

.download-changelog-tag {
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--color-primary);
	padding: 2px 8px;
	border-radius: var(--radius-full);
	letter-spacing: 0.03em;
}

.download-changelog-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.download-changelog-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.6;
}

.cl-type {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	padding: 1px 6px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 3px;
	letter-spacing: 0.03em;
}

.cl-add {
	color: #16a34a;
	background: #dcfce7;
}

.cl-opt {
	color: #2563eb;
	background: #dbeafe;
}

.cl-fix {
	color: #ea580c;
	background: #ffedd5;
}

.cl-del {
	color: #dc2626;
	background: #fee2e2;
}

[data-theme="dark"] .cl-add {
	color: #4ade80;
	background: #142a1d;
}

[data-theme="dark"] .cl-opt {
	color: #60a5fa;
	background: #1e2a44;
}

[data-theme="dark"] .cl-fix {
	color: #fb923c;
	background: #3a2310;
}

[data-theme="dark"] .cl-del {
	color: #f87171;
	background: #3a1212;
}

/* ── 12. 系统要求 ── */
.download-req-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.download-req-card {
	padding: 20px 22px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition);
}

.download-req-card:hover {
	border-color: rgba(76, 175, 125, 0.3);
}

.download-req-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.download-req-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 10px;
}

.download-req-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.download-req-list li {
	position: relative;
	padding-left: 14px;
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.55;
}

.download-req-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-primary);
}

/* ── 13. 详情页右侧粘性下载卡片 ── */
.download-detail-sidebar {
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: sticky;
	top: 100px;
}

.download-info-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 22px 24px;
	box-shadow: var(--shadow-card);
}

.download-info-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 16px;
}

.download-info-card-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-family: var(--font-mono, "SF Mono", Consolas, "Microsoft YaHei", monospace);
	font-weight: 700;
	letter-spacing: 0.5px;
	position: relative;
	overflow: hidden;
}

.download-info-card-icon::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 14px;
	height: 14px;
	background: linear-gradient(225deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 60%);
	pointer-events: none;
}

.download-info-card-icon .attachment-item-icon-text {
	font-size: 13px;
}

.download-info-card-icon-app {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: #fff;
}

.download-info-card-meta {
	flex: 1;
	min-width: 0;
}

.download-info-card-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 4px;
}

.download-info-card-ver {
	font-size: 12.5px;
	color: var(--color-text-muted);
}

.download-info-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}

.download-info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
}

.download-info-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-text-muted);
}

.download-info-label svg {
	opacity: 0.7;
}

.download-info-value {
	font-weight: 600;
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}

.download-info-tag-free {
	display: inline-block;
	padding: 1px 10px;
	font-size: 11.5px;
	font-weight: 700;
	color: #16a34a;
	background: #dcfce7;
	border-radius: var(--radius-full);
}

.download-info-safe {
	display: inline-block;
	padding: 1px 10px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--color-primary);
	background: var(--color-primary-pale);
	border-radius: var(--radius-full);
}

[data-theme="dark"] .download-info-tag-free {
	color: #4ade80;
	background: #142a1d;
}

/* 主下载按钮 */
.download-main-btn {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: var(--color-primary);
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
	margin-bottom: 10px;
}

.download-main-btn:hover {
	background: var(--color-primary-hover);
	box-shadow: 0 4px 16px rgba(76, 175, 125, 0.36);
	transform: translateY(-1px);
}

.download-main-btn svg {
	fill: none;
	stroke: currentColor;
}

/* 备用按钮组 */
.download-alt-btns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 16px;
}

.download-alt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-secondary);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--transition);
}

.download-alt-btn:hover {
	color: var(--color-primary-hover);
	border-color: var(--color-primary);
	background: var(--color-primary-pale);
}

.download-alt-btn svg {
	fill: none;
	stroke: currentColor;
}

/* 安全提示 */
.download-info-shield {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	font-size: 12px;
	color: var(--color-text-muted);
	background: var(--color-primary-pale);
	border-radius: var(--radius-sm);
	line-height: 1.5;
}

.download-info-shield svg {
	flex-shrink: 0;
	color: var(--color-primary);
}

/* 分享卡片 */
.download-share-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.download-share-label {
	font-size: 13px;
	color: var(--color-text-secondary);
}

.download-share-btns {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* ════════════════════════════════════════
   响应式适配
════════════════════════════════════════ */

@media (max-width: 1024px) {
	.download-page-grid {
		grid-template-columns: 1fr;
	}

	.download-sidebar {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.download-detail-grid {
		grid-template-columns: 1fr;
	}

	.download-detail-sidebar {
		position: static;
	}

	.download-side-notice {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	/* 下载行手机端布局统一定义在“下载中心专属样式”区块内，此处不再重复覆盖 */

	/* 手机端：筛选栏纵向堆叠，标签区与排序区各自单行横向滑动 */
	.download-filter-bar {
		flex-direction: column;
		align-items: stretch;
		min-width: 0;
		padding: 12px;
		overflow: hidden;
	}

	/* 手机端标签区与文章列表页一致：单行横向滑动，不换行、不压缩，隐藏滚动条并做两端渐隐提示 */
	.download-cat-tabs,
	.download-sort-box {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
		flex-wrap: nowrap;
		align-items: center;
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 2px;
	}

	/* 仅在标签确实溢出时（由 main.js 添加 is-overflow 类）才做两端渐隐；
	   起点只隐右侧、末端只隐左侧、中间两端渐隐（is-start / is-end 由 main.js 随滚动维护） */
	.download-cat-tabs.is-overflow {
		--download-filter-fade-left: 24px;
		--download-filter-fade-right: 24px;
		mask-image: linear-gradient(90deg, transparent 0, #000 var(--download-filter-fade-left), #000 calc(100% - var(--download-filter-fade-right)), transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--download-filter-fade-left), #000 calc(100% - var(--download-filter-fade-right)), transparent 100%);
	}

	.download-cat-tabs.is-overflow.is-start {
		--download-filter-fade-left: 0px;
	}

	.download-cat-tabs.is-overflow.is-end {
		--download-filter-fade-right: 0px;
	}

	.download-cat-tabs::-webkit-scrollbar,
	.download-sort-box::-webkit-scrollbar {
		display: none;
	}

	/* 标签保持自身内容宽度，避免被压缩换行 */
	.download-cat-tab,
	.download-sort-btn,
	.download-sort-label {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.download-sidebar {
		grid-template-columns: 1fr;
	}

	.download-stats-bar {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		padding: 22px 16px;
	}

	.download-detail-hero {
		height: 220px;
	}

	.download-detail-hero-inner svg {
		width: 72px;
		height: 72px;
	}

	.download-detail-breadcrumb {
		font-size: 12.5px;
		gap: 6px;
		flex-wrap: wrap;
	}

	.download-screenshot-grid,
	.download-req-grid,
	.download-feature-list {
		grid-template-columns: 1fr;
	}

	.download-alt-btns {
		grid-template-columns: 1fr;
	}

	/* 分享卡片：手机端保持与 PC 一致的横排（标签在左、按钮在右），不换行 */
	.download-share-card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 12px 14px;
		gap: 10px;
	}

	.download-share-label {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.download-share-btns {
		flex: 0 0 auto;
		justify-content: flex-end;
	}

	.download-screenshot-block,
	.download-intro-block,
	.download-changelog-block,
	.download-req-block,
	.download-attachments-block {
		padding: 18px 20px;
		margin-bottom: 20px;
	}

	.download-block-title {
		font-size: 16px;
		padding-bottom: 10px;
		margin-bottom: 16px;
	}
}

/* 问题按钮行 */
.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 24px;
	background: transparent;
	text-align: left;
	color: var(--color-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	transition: color var(--transition), background var(--transition);
}

.faq-question:hover {
	color: var(--color-primary);
	background: var(--color-primary-pale);
}

.faq-item.open .faq-question {
	color: var(--color-primary);
	background: var(--color-primary-pale);
}

/* 展开/收起图标 */
.faq-icon {
	flex-shrink: 0;
	color: var(--color-text-muted);
	transition: transform var(--transition), color var(--transition);
}

.faq-item.open .faq-icon,
.faq-question:hover .faq-icon {
	color: var(--color-primary);
}

.faq-item.open .faq-icon {
	transform: rotate(180deg);
}

/* 答案容器：通过 max-height 实现展开动画 */
.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.open .faq-answer {
	max-height: 360px;
}

/* 答案内容区 */
.faq-answer-inner {
	padding: 0 24px 20px;
	font-size: 14px;
	line-height: 1.75;
	color: var(--color-text-secondary);
	border-top: 1px solid var(--color-border);
	padding-top: 16px;
}

/* ---- 响应式：移动端适配 ---- */
@media (max-width: 768px) {
	.faq-list {
		gap: 10px;
	}

	.faq-question {
		padding: 16px 18px;
		font-size: 14px;
	}

	.faq-answer-inner {
		padding: 0 18px 16px;
		padding-top: 14px;
		font-size: 13.5px;
	}
}

/* ==================== 文章付费购买 & 附件购买示例样式 ==================== */

/* ── 公共：模块标题标签 ── */
/* 时间戳：2026年06月30日20时50分00秒 修复 .article-purchase-example 单条规则不生效的根因 */
/* 修复说明：原代码在 FAQ @media 块（L4741-4754）之后存在 1 个孤立的闭合花括号（原 L4755）， */
/*          该 } 不对应任何开括号 {，导致 CSS 解析器误判后续规则嵌套在不存在的块内， */
/*          CSSOM 中 .article-purchase-example 规则丢失，computed margin-top = 0px。 */
/*          删除该孤立的 }，恢复 CSS 解析正常。单条规则优先级 (0,0,1,0) 高于通配符 * 的 (0,0,0,0)，必然生效。 */
.article-purchase-example {
	margin-top: 40px;
}

.attachment-purchase-example {
	margin-top: 40px;
}

.purchase-example-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	font-size: 12.5px;
	font-weight: 600;
	background: var(--color-primary-light);
	color: var(--color-primary-hover);
	border-radius: var(--radius-full);
	margin-bottom: 18px;
}

.purchase-example-label svg {
	fill: none;
	stroke: currentColor;
}

/* ════════════════════════════════════════
模块一：文章付费购买示例
════════════════════════════════════════ */

/* ── 未购买状态：模糊预览 + 锁定遮罩 ── */
.purchase-preview-card {
	position: relative;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-bottom: 16px;
}

.purchase-preview-blur {
	padding: 24px;
	filter: blur(5px);
	-webkit-filter: blur(5px);
	user-select: none;
	pointer-events: none;
	opacity: 0.55;
}

.purchase-preview-blur p {
	font-size: 15px;
	color: var(--color-text-secondary);
	line-height: 1.85;
	margin-bottom: 14px;
}

.purchase-preview-blur code {
	background: var(--color-bg-tag);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
	color: var(--color-primary-hover);
}

.purchase-preview-lock {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-bg-card) 55%, var(--color-bg-card) 100%);
}

.purchase-lock-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-primary-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
}

.purchase-lock-icon svg {
	fill: none;
	stroke: currentColor;
}

.purchase-lock-text {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-secondary);
}

/* ── 购买操作区 ── */
.purchase-action-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 24px;
	box-shadow: var(--shadow-card);
}

/* 价格行 */
.purchase-price-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 18px;
}

.purchase-price-left {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.purchase-price-label {
	font-size: 13px;
	color: var(--color-text-muted);
	font-weight: 500;
}

.purchase-price-value {
	display: flex;
	align-items: baseline;
	gap: 1px;
}

.purchase-price-currency {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-primary);
}

.purchase-price-num {
	font-size: 36px;
	font-weight: 800;
	color: var(--color-primary);
	line-height: 1;
	letter-spacing: -0.02em;
}

.purchase-price-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.purchase-price-original {
	font-size: 14px;
	color: var(--color-text-muted);
	text-decoration: line-through;
}

.purchase-price-discount {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	background: #fff0ed;
	color: #e8533f;
	border-radius: var(--radius-full);
}

[data-theme="dark"] .purchase-price-discount {
	background: #2d1a17;
	color: #ff7a6b;
}

/* 支付方式选择 */
.purchase-pay-methods {
	margin-bottom: 18px;
}

.purchase-pay-label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-secondary);
	margin-bottom: 10px;
}

.purchase-pay-options {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.purchase-pay-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition);
	background: var(--color-bg-card);
}

.purchase-pay-option input[type="radio"] {
	display: none;
}

.purchase-pay-option:hover {
	border-color: rgba(76, 175, 125, 0.4);
}

.purchase-pay-option.active {
	border-color: var(--color-primary);
	background: var(--color-primary-pale);
}

.purchase-pay-icon {
	width: 28px;
	height: 28px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
}

.purchase-pay-icon.wechat {
	background: #07c160;
	color: #fff;
}

.purchase-pay-icon.wechat svg {
	fill: currentColor;
	stroke: none;
}

.purchase-pay-icon.alipay {
	background: #1677ff;
	color: #fff;
}

.purchase-pay-icon.balance {
	background: var(--color-primary);
	color: #fff;
}

.purchase-pay-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
}

/* 确认购买按钮 */
.purchase-confirm-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
	box-shadow: 0 4px 14px rgba(76, 175, 125, 0.28);
}

.purchase-confirm-btn svg {
	fill: none;
	stroke: currentColor;
}

.purchase-confirm-btn:hover {
	background: var(--color-primary-hover);
	box-shadow: 0 6px 22px rgba(76, 175, 125, 0.38);
	transform: translateY(-1px);
}

.purchase-confirm-btn:active {
	transform: translateY(0);
}

/* 安全保障提示 */
.purchase-secure-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
	font-size: 12.5px;
	color: var(--color-text-muted);
}

.purchase-secure-row svg {
	fill: none;
	stroke: var(--color-primary);
}

/* ── 支付确认流程示意 ── */
.purchase-flow-section {
	margin-top: 20px;
	padding: 20px 24px;
	background: var(--color-bg-section);
	border-radius: var(--radius-sm);
}

.purchase-flow-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-secondary);
	margin-bottom: 16px;
}

.purchase-flow-steps {
	display: flex;
	align-items: center;
	gap: 0;
}

.purchase-flow-step {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.purchase-flow-step-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	background: var(--color-bg-tag);
	color: var(--color-text-muted);
	flex-shrink: 0;
}

.purchase-flow-step.done .purchase-flow-step-dot {
	background: var(--color-primary);
	color: #fff;
}

.purchase-flow-step.done .purchase-flow-step-dot svg {
	fill: none;
	stroke: currentColor;
}

.purchase-flow-step-text {
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.purchase-flow-step.done .purchase-flow-step-text {
	color: var(--color-text);
}

.purchase-flow-step-line {
	flex: 1;
	height: 2px;
	background: var(--color-border);
	margin: 0 12px;
	min-width: 20px;
}

.purchase-flow-step-line.done {
	background: var(--color-primary);
}

/* ── 已购买状态示例 ── */
.purchase-done-example {
	margin-top: 16px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.purchase-done-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: var(--color-primary-pale);
	color: var(--color-primary);
	font-size: 13.5px;
	font-weight: 600;
}

.purchase-done-banner svg {
	fill: none;
	stroke: currentColor;
}

.purchase-done-content {
	padding: 20px 24px;
}

.purchase-done-content p {
	font-size: 15px;
	color: var(--color-text-secondary);
	line-height: 1.85;
}

/* ════════════════════════════════════════
模块二：付费附件购买示例
════════════════════════════════════════ */

.attachment-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}

/* 单个附件项 */
.attachment-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.attachment-item:hover {
	border-color: rgba(76, 175, 125, 0.3);
	box-shadow: var(--shadow-card);
}

.attachment-item.purchased {
	background: var(--color-primary-pale);
	border-color: rgba(76, 175, 125, 0.2);
}

/* 免费附件卡片样式（时间戳：2026年07月08日10时30分00秒新增） */
/* 设计说明：免费附件独立走"免费"分支，与"已购买"绿色视觉区分，使用蓝色调 */
.attachment-item.free {
	background: rgba(52, 152, 219, 0.06);
	border-color: rgba(52, 152, 219, 0.2);
}

/* VIP免费附件卡片样式（时间戳：2026年07月08日14时30分00秒新增） */
/* 设计说明：VIP免费附件会员等级满足时走此分支，使用金色调 (#f39c12) 彰显VIP身份 */
.attachment-item.vip-free {
	background: rgba(243, 156, 18, 0.06);
	border-color: rgba(243, 156, 18, 0.2);
}

/* 文件类型图标（方案B：文字CSS，时间戳：2026年06月29日10时30分00秒） */
.attachment-item-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-family: var(--font-mono, "SF Mono", Consolas, "Microsoft YaHei", monospace);
	font-weight: 700;
	letter-spacing: 0.5px;
	user-select: none;
	position: relative;
	overflow: hidden;
}

.attachment-item-icon::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 14px;
	height: 14px;
	background: linear-gradient(225deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%);
	pointer-events: none;
}

.attachment-item-icon-text {
	font-size: 13px;
	line-height: 1;
	text-transform: uppercase;
	position: relative;
	z-index: 1;
}

/* 压缩类后缀：zip/rar/tar/gz（注意：7z 以数字开头，CSS 类选择器非法，已删除让其走 default 兜底） */
.attachment-item-icon.zip,
.attachment-item-icon.rar,
.attachment-item-icon.gz,
.attachment-item-icon.tar {
	background: #fff4e6;
	color: #d97706;
}

/* 文档类后缀：pdf/doc/docx/txt */
.attachment-item-icon.pdf {
	background: #fee2e2;
	color: #dc2626;
}

.attachment-item-icon.doc,
.attachment-item-icon.docx {
	background: #dbeafe;
	color: #2563eb;
}

.attachment-item-icon.txt {
	background: #f3f4f6;
	color: #4b5563;
}

/* 视频类后缀：mp4/avi/mkv/mov/webm/flv */
.attachment-item-icon.mp4,
.attachment-item-icon.avi,
.attachment-item-icon.mkv,
.attachment-item-icon.mov,
.attachment-item-icon.webm,
.attachment-item-icon.flv {
	background: #e0f2fe;
	color: #0284c7;
}

/* 音频类后缀：mp3/wav/flac/aac/ogg */
.attachment-item-icon.mp3,
.attachment-item-icon.wav,
.attachment-item-icon.flac,
.attachment-item-icon.aac,
.attachment-item-icon.ogg {
	background: #ede9fe;
	color: #7c3aed;
}

/* 图片类后缀：jpg/jpeg/png/gif/webp/svg/bmp */
.attachment-item-icon.jpg,
.attachment-item-icon.jpeg,
.attachment-item-icon.png,
.attachment-item-icon.gif,
.attachment-item-icon.webp,
.attachment-item-icon.svg,
.attachment-item-icon.bmp {
	background: #dcfce7;
	color: #16a34a;
}

/* 表格类后缀：xls/xlsx/csv */
.attachment-item-icon.xls,
.attachment-item-icon.xlsx,
.attachment-item-icon.csv {
	background: #d1fae5;
	color: #059669;
}

/* 演示类后缀：ppt/pptx */
.attachment-item-icon.ppt,
.attachment-item-icon.pptx {
	background: #ffedd5;
	color: #ea580c;
}

/* 代码类后缀：go/js/ts/py/java/c/cpp/html/css/json/xml/sql */
.attachment-item-icon.go,
.attachment-item-icon.js,
.attachment-item-icon.ts,
.attachment-item-icon.py,
.attachment-item-icon.java,
.attachment-item-icon.c,
.attachment-item-icon.cpp,
.attachment-item-icon.html,
.attachment-item-icon.css,
.attachment-item-icon.json,
.attachment-item-icon.xml,
.attachment-item-icon.sql {
	background: #f5f3ff;
	color: #6d28d9;
}

/* 链接类后缀：url */
.attachment-item-icon.url {
	background: #fef3c7;
	color: #b45309;
}

/* 默认兜底样式（未匹配任何已知后缀时使用） */
.attachment-item-icon.default {
	background: #f3f4f6;
	color: #6b7280;
}

/* 暗色主题变体（时间戳：2026年06月29日10时30分00秒） */
[data-theme="dark"] .attachment-item-icon.zip,
[data-theme="dark"] .attachment-item-icon.rar,
[data-theme="dark"] .attachment-item-icon.gz,
[data-theme="dark"] .attachment-item-icon.tar {
	background: #2d2517;
	color: #fbbf24;
}

[data-theme="dark"] .attachment-item-icon.pdf {
	background: #2d1818;
	color: #f87171;
}

[data-theme="dark"] .attachment-item-icon.doc,
[data-theme="dark"] .attachment-item-icon.docx {
	background: #1e2a44;
	color: #60a5fa;
}

[data-theme="dark"] .attachment-item-icon.txt {
	background: #1f2937;
	color: #9ca3af;
}

[data-theme="dark"] .attachment-item-icon.mp4,
[data-theme="dark"] .attachment-item-icon.avi,
[data-theme="dark"] .attachment-item-icon.mkv,
[data-theme="dark"] .attachment-item-icon.mov,
[data-theme="dark"] .attachment-item-icon.webm,
[data-theme="dark"] .attachment-item-icon.flv {
	background: #152530;
	color: #38bdf8;
}

[data-theme="dark"] .attachment-item-icon.mp3,
[data-theme="dark"] .attachment-item-icon.wav,
[data-theme="dark"] .attachment-item-icon.flac,
[data-theme="dark"] .attachment-item-icon.aac,
[data-theme="dark"] .attachment-item-icon.ogg {
	background: #221c3a;
	color: #a78bfa;
}

[data-theme="dark"] .attachment-item-icon.jpg,
[data-theme="dark"] .attachment-item-icon.jpeg,
[data-theme="dark"] .attachment-item-icon.png,
[data-theme="dark"] .attachment-item-icon.gif,
[data-theme="dark"] .attachment-item-icon.webp,
[data-theme="dark"] .attachment-item-icon.svg,
[data-theme="dark"] .attachment-item-icon.bmp {
	background: #142a1d;
	color: #4ade80;
}

[data-theme="dark"] .attachment-item-icon.xls,
[data-theme="dark"] .attachment-item-icon.xlsx,
[data-theme="dark"] .attachment-item-icon.csv {
	background: #0f2a1c;
	color: #34d399;
}

[data-theme="dark"] .attachment-item-icon.ppt,
[data-theme="dark"] .attachment-item-icon.pptx {
	background: #3a2310;
	color: #fb923c;
}

[data-theme="dark"] .attachment-item-icon.go,
[data-theme="dark"] .attachment-item-icon.js,
[data-theme="dark"] .attachment-item-icon.ts,
[data-theme="dark"] .attachment-item-icon.py,
[data-theme="dark"] .attachment-item-icon.java,
[data-theme="dark"] .attachment-item-icon.c,
[data-theme="dark"] .attachment-item-icon.cpp,
[data-theme="dark"] .attachment-item-icon.html,
[data-theme="dark"] .attachment-item-icon.css,
[data-theme="dark"] .attachment-item-icon.json,
[data-theme="dark"] .attachment-item-icon.xml,
[data-theme="dark"] .attachment-item-icon.sql {
	background: #1c1633;
	color: #a78bfa;
}

[data-theme="dark"] .attachment-item-icon.url {
	background: #3a2e10;
	color: #fcd34d;
}

[data-theme="dark"] .attachment-item-icon.default {
	background: #1f2937;
	color: #9ca3af;
}

/* 附件信息 */
.attachment-item-info {
	flex: 1;
	min-width: 0;
}

.attachment-item-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.attachment-item-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.attachment-file-type {
	font-size: 11px;
	font-weight: 700;
	padding: 1px 7px;
	background: var(--color-bg-tag);
	color: var(--color-text-secondary);
	border-radius: 3px;
	letter-spacing: 0.03em;
}

.attachment-file-size {
	font-size: 12.5px;
	color: var(--color-text-muted);
}

/* 附件下载次数（多附件下载详情页展示单个附件的下载次数）
   时间戳：2026年10月11日 方案A新增 */
.attachment-file-downloads {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 12.5px;
	color: var(--color-text-muted);
}

.attachment-file-desc {
	font-size: 12.5px;
	color: var(--color-text-muted);
}

/* 附件操作区（价格 + 按钮） */
.attachment-item-action {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.attachment-item-price {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-primary);
	white-space: nowrap;
}

.attachment-purchased-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-primary);
	white-space: nowrap;
}

.attachment-purchased-tag svg {
	fill: none;
	stroke: currentColor;
}

/* 免费附件标签样式（时间戳：2026年07月08日10时30分00秒新增） */
/* 设计说明：与"已购买"绿色标签视觉区分，使用蓝色调 (#3498db) */
.attachment-free-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: #3498db;
	white-space: nowrap;
}

.attachment-free-tag svg {
	fill: none;
	stroke: currentColor;
}

/* VIP免费附件标签样式（时间戳：2026年07月08日14时30分00秒新增） */
/* 设计说明：VIP免费附件会员等级满足时显示,使用金色调 (#f39c12) 彰显VIP身份 */
.attachment-vip-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: #f39c12;
	white-space: nowrap;
}

.attachment-vip-tag svg {
	fill: none;
	stroke: currentColor;
}

/* 购买按钮 */
.attachment-buy-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--transition), box-shadow var(--transition);
	white-space: nowrap;
}

.attachment-buy-btn svg {
	fill: none;
	stroke: currentColor;
}

.attachment-buy-btn:hover {
	background: var(--color-primary-hover);
	box-shadow: 0 2px 10px rgba(76, 175, 125, 0.3);
}

/* 下载按钮（已购买） */
.attachment-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	background: var(--color-primary-pale);
	border: 1.5px solid rgba(76, 175, 125, 0.25);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition);
	white-space: nowrap;
}

.attachment-download-btn svg {
	fill: none;
	stroke: currentColor;
}

.attachment-download-btn:hover {
	background: var(--color-primary-light);
	border-color: var(--color-primary);
}

/* ── 套餐购买卡片 ── */
.attachment-bundle-card {
	background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-bg-card) 100%);
	border: 1.5px solid rgba(76, 175, 125, 0.2);
	border-radius: var(--radius-sm);
	padding: 22px 24px;
	margin-bottom: 16px;
}

.attachment-bundle-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.attachment-bundle-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
}

.attachment-bundle-tag {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius-full);
}

.attachment-bundle-save {
	font-size: 13px;
	font-weight: 600;
	color: #e8533f;
}

[data-theme="dark"] .attachment-bundle-save {
	color: #ff7a6b;
}

.attachment-bundle-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.attachment-bundle-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--color-text-secondary);
}

.attachment-bundle-item svg {
	fill: none;
	stroke: var(--color-primary);
}

.attachment-bundle-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}

.attachment-bundle-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.attachment-bundle-price-label {
	font-size: 13px;
	color: var(--color-text-muted);
	font-weight: 500;
}

.attachment-bundle-price-value {
	font-size: 28px;
	font-weight: 800;
	color: var(--color-primary);
	letter-spacing: -0.02em;
}

.attachment-bundle-price-value .cur {
	font-size: 15px;
	font-weight: 700;
}

.attachment-bundle-price-original {
	font-size: 14px;
	color: var(--color-text-muted);
	text-decoration: line-through;
}

.attachment-bundle-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
	box-shadow: 0 4px 14px rgba(76, 175, 125, 0.28);
}

.attachment-bundle-btn svg {
	fill: none;
	stroke: currentColor;
}

.attachment-bundle-btn:hover {
	background: var(--color-primary-hover);
	box-shadow: 0 6px 22px rgba(76, 175, 125, 0.38);
	transform: translateY(-1px);
}

/* ── 附件购买安全提示 ── */
.attachment-flow-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--color-text-muted);
}

.attachment-flow-hint svg {
	fill: none;
	stroke: var(--color-primary);
}

/* ── 响应式适配 ── */
@media (max-width: 640px) {
	.purchase-price-row {
		flex-direction: column;
		gap: 8px;
		align-items: flex-start;
	}

	.purchase-price-right {
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}

	.purchase-pay-options {
		gap: 8px;
	}

	.purchase-pay-option {
		padding: 8px 12px;
	}

	.purchase-pay-name {
		font-size: 13px;
	}

	.purchase-flow-steps {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}

	.purchase-flow-step-line {
		display: none;
	}

	.attachment-item {
		flex-wrap: wrap;
		gap: 12px;
	}

	.attachment-item-info {
		flex: 1 1 100%;
		order: 2;
	}

	.attachment-item-icon {
		order: 1;
	}

	.attachment-item-action {
		order: 3;
		width: 100%;
		justify-content: space-between;
	}

	.attachment-bundle-footer {
		flex-direction: column;
		gap: 16px;
		align-items: stretch;
	}

	.attachment-bundle-btn {
		width: 100%;
		justify-content: center;
	}
}
/* ════════════════════ 充值/会员 Tab 切换栏（2026年07月03日新增） ════════════════════ */
.recharge-tabs {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
	background: var(--color-bg-section);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 6px;
}

.recharge-tab {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 14px 16px;
	background: transparent;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition);
	color: var(--color-text-secondary);
	position: relative;
}

.recharge-tab:hover {
	background: var(--color-bg-card);
	color: var(--color-text);
}

.recharge-tab.active {
	background: var(--color-primary);
	color: #fff;
	box-shadow: 0 4px 12px rgba(76, 175, 125, 0.25);
}

.recharge-tab-icon {
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.recharge-tab-text {
	font-size: 15px;
	font-weight: 700;
}

.recharge-tab-sub {
	font-size: 11px;
	opacity: 0.75;
	font-weight: 500;
}

/* ── 当前会员信息卡片（会员Tab顶部） ── */
.membership-current-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: linear-gradient(135deg, rgba(76, 175, 125, 0.08), rgba(76, 175, 125, 0.02));
	border: 1.5px solid rgba(76, 175, 125, 0.25);
	border-radius: var(--radius-sm);
	margin-bottom: 20px;
}

.membership-current-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 800;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(76, 175, 125, 0.3);
}

.membership-current-body {
	flex: 1;
	min-width: 0;
}

.membership-current-label {
	font-size: 12px;
	color: var(--color-text-muted);
	margin-bottom: 4px;
}

.membership-current-info {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	flex-wrap: wrap;
}

.membership-current-level {
	color: var(--color-primary);
}

.membership-current-sep {
	color: var(--color-text-muted);
}

.membership-current-expire {
	color: var(--color-text-secondary);
	font-weight: 500;
	font-size: 13px;
}

.membership-current-balance {
	text-align: right;
	flex-shrink: 0;
}

.membership-current-balance-label {
	font-size: 11px;
	color: var(--color-text-muted);
	margin-bottom: 2px;
}

.membership-current-balance-value {
	font-size: 18px;
	font-weight: 800;
	color: var(--color-primary);
	letter-spacing: -0.02em;
}

/* ── 会员套餐卡片专属样式（主题绿色调，与 --color-primary 协调） ── */
.package-card-membership {
	border-color: rgba(76, 175, 125, 0.25);
	background: linear-gradient(180deg, var(--color-bg-card) 0%, rgba(76, 175, 125, 0.03) 100%);
}

.package-card-membership:hover {
	border-color: rgba(76, 175, 125, 0.45);
}

.package-card-membership.selected {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.15), var(--shadow-card-hover);
}

.package-card-membership.selected::after {
	background: var(--color-primary);
}

.package-card-level {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	padding: 3px 10px;
	border-radius: var(--radius-full);
	margin-bottom: 8px;
	letter-spacing: 0.02em;
}

.package-card-original {
	font-size: 13px;
	color: var(--color-text-muted);
	text-decoration: line-through;
	margin-bottom: 6px;
}

.package-card-duration {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-primary);
	background: rgba(76, 175, 125, 0.10);
	padding: 3px 10px;
	border-radius: var(--radius-full);
	margin-bottom: 8px;
}

.package-card-bonus {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-primary);
	background: rgba(76, 175, 125, 0.10);
	padding: 3px 10px;
	border-radius: var(--radius-full);
	margin-bottom: 8px;
}

.recharge-submit-summary .value-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
}

/* ── 会员Tab 移动端适配 ── */
@media (max-width: 768px) {
	.recharge-tabs {
		flex-direction: column;
		gap: 6px;
	}

	.recharge-tab {
		flex-direction: row;
		justify-content: flex-start;
		gap: 10px;
		padding: 12px 14px;
	}

	.membership-current-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.membership-current-balance {
		text-align: left;
	}
}

/* ==================== 支付宝当面付二维码弹窗样式 ====================
   时间戳：2026年07月03日20时00分00秒
   设计说明：使用主题绿色（var(--color-primary)）保持视觉一致性，
            避免使用支付宝默认蓝色（#1677ff）造成色彩突兀
            弹窗结构：遮罩层 + 居中卡片（标题/副标题/金额/二维码/提示/订单号/状态/操作按钮）
*/

.alipay-qr-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.alipay-qr-mask {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: alipay-qr-fade-in 0.2s ease;
}

@keyframes alipay-qr-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes alipay-qr-slide-up {
	from { opacity: 0; transform: translateY(16px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.alipay-qr-box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 380px;
	background: var(--color-bg-card);
	border-radius: var(--radius-sm);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	padding: 28px 24px 24px;
	animation: alipay-qr-slide-up 0.25s ease;
}

.alipay-qr-close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all var(--transition, 0.2s ease);
}

.alipay-qr-close:hover {
	background: var(--color-bg-section);
	color: var(--color-text);
}

.alipay-qr-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text);
	text-align: center;
	margin-bottom: 6px;
}

.alipay-qr-subtitle {
	font-size: 13px;
	color: var(--color-text-secondary);
	text-align: center;
	margin-bottom: 14px;
	word-break: break-all;
	padding: 0 8px;
}

.alipay-qr-amount {
	font-size: 14px;
	color: var(--color-text-secondary);
	text-align: center;
	margin-bottom: 18px;
}

.alipay-qr-amount span {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-primary);
	margin-left: 4px;
}

.alipay-qr-img-wrap {
	position: relative;
	width: 240px;
	height: 240px;
	margin: 0 auto 16px;
	background: #fff;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border, #e5e7eb);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.alipay-qr-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: var(--color-text-secondary);
	background: #fff;
}

.alipay-qr-img {
	width: 232px;
	height: 232px;
	display: block;
	/* 2026年07月03日22时00分00秒
	   二维码图片放大填满容器(原220px→232px)
	   配合后端 DisableBorder=true(去除4模块静默区)
	   容器240px - 图片232px = 4px/边 视觉缝隙，避免二维码紧贴边框影响美观
	   注：扫码器容错强，4px缝隙足够识别 */
}

.alipay-qr-tip {
	font-size: 13px;
	color: var(--color-text);
	text-align: center;
	margin-bottom: 8px;
}

.alipay-qr-tip strong {
	color: var(--color-primary);
	font-weight: 700;
}

.alipay-qr-order {
	font-size: 12px;
	color: var(--color-text-secondary);
	text-align: center;
	margin-bottom: 6px;
	word-break: break-all;
	padding: 0 8px;
}

.alipay-qr-order span {
	color: var(--color-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
}

.alipay-qr-status {
	font-size: 13px;
	color: var(--color-text-secondary);
	text-align: center;
	margin-bottom: 16px;
	min-height: 18px;
}

.alipay-qr-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
}

.alipay-qr-refresh {
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	border: none;
	border-radius: var(--radius-full, 9999px);
	cursor: pointer;
	transition: background var(--transition, 0.2s ease), transform var(--transition, 0.2s ease);
}

.alipay-qr-refresh:hover {
	background: var(--color-primary-hover);
	transform: translateY(-1px);
}

.alipay-qr-refresh:active {
	transform: translateY(0);
}

/* 暗色模式适配：二维码图片背景强制白色（保证扫码识别） */
[data-theme="dark"] .alipay-qr-img-wrap {
	background: #fff;
	border-color: #fff;
}

[data-theme="dark"] .alipay-qr-loading {
	background: #fff;
	color: #666;
}

/* 移动端响应式 */
@media (max-width: 480px) {
	.alipay-qr-box {
		max-width: 100%;
		padding: 24px 18px 20px;
	}

	.alipay-qr-title {
		font-size: 18px;
	}

	.alipay-qr-amount span {
		font-size: 20px;
	}

	.alipay-qr-img-wrap {
		width: 220px;
		height: 220px;
	}

	.alipay-qr-img {
		/* 移动端同步调整：原200px→212px，保持4px视觉缝隙
		   2026年07月03日22时00分00秒 */
		width: 212px;
		height: 212px;
	}

	.alipay-qr-refresh {
		width: 100%;
		padding: 12px 20px;
	}
}

/* ── 自定义金额充值卡片（2026年07月03日22时30分00秒） ── */
/* 功能说明：充值套餐区域末尾追加的自定义金额输入卡片
   设计要点：
     1. 复用 .package-card 基础样式（边框/圆角/padding/选中态）
     2. 用虚线边框区分自定义卡片，强调"可输入"语义
     3. 输入框与卡片风格协调，聚焦时绿色高亮
     4. 提示文字使用 muted 色保持低调
*/
.package-card-custom {
	border-style: dashed;
	border-color: var(--color-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.package-card-custom:hover {
	border-color: rgba(76, 175, 125, 0.5);
}

.package-card-custom.selected {
	border-style: solid;
}

.package-card-custom-label {
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 12px;
}

.package-card-custom-input-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	max-width: 200px;
	margin-bottom: 10px;
}

.package-card-custom-input-wrap .currency {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text-secondary);
}

.package-card-custom-input {
	flex: 1;
	width: 100%;
	min-width: 0;
	padding: 8px 10px;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text);
	background: var(--color-bg-input);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	text-align: center;
	outline: none;
	transition: border-color var(--transition), box-shadow var(--transition);
	-moz-appearance: textfield;
}

.package-card-custom-input::-webkit-outer-spin-button,
.package-card-custom-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.package-card-custom-input:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.15);
}

.package-card-custom-input::placeholder {
	color: var(--color-text-muted);
	font-weight: 500;
}

.package-card-custom-hint {
	font-size: 11px;
	color: var(--color-text-muted);
	line-height: 1.4;
}

/* ── 支付方式SVG图标样式（2026年07月03日23时00分00秒） ── */
/* 功能说明：支付方式图标从文字（支/微/余）替换为 SVG 图标引用 icons.svg
   设计要点：
     1. SVG 尺寸 22x22，居中显示在 32x32 的彩色方块中
     2. 颜色继承 currentColor（白色），保持图标在各支付方式背景色上清晰可见
     3. use 引用 icons.svg 中的 symbol（icon-alipay/icon-wechat/icon-emoji-money）
*/
.payment-method-icon-svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	color: #fff;
	display: block;
}

.payment-method-icon .payment-method-icon-svg {
	/* 确保SVG在flex容器中居中 */
	margin: auto;
}

/* =========================================
   404 错误页面 — 专用样式
   时间戳：2026年07月05日23时50分00秒
   用于 not_found.html 模板，主题色与站点一致（绿色主调）
   复用 .section / .btn-primary / .btn-secondary 等通用样式
========================================= */
.not-found-section {
	padding-top: 100px;
	padding-bottom: 80px;
	background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--color-primary-pale) 0%, var(--color-bg-body) 70%);
}

.not-found-wrap {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: 0 24px;
}

.not-found-code {
	font-size: 140px;
	font-weight: 800;
	line-height: 1;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	letter-spacing: -6px;
	margin-bottom: 20px;
	animation: notFoundFloat 3s ease-in-out infinite;
}

.not-found-icon {
	width: 96px;
	height: 96px;
	margin: 0 auto 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary-light);
	border-radius: var(--radius-full);
	color: var(--color-primary);
}

.not-found-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 14px;
	line-height: 1.4;
}

.not-found-desc {
	font-size: 15px;
	color: var(--color-text-secondary);
	line-height: 1.7;
	margin-bottom: 36px;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.not-found-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

@keyframes notFoundFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@media (max-width: 640px) {
	.not-found-code { font-size: 96px; letter-spacing: -4px; }
	.not-found-title { font-size: 22px; }
	.not-found-desc { font-size: 14px; }
	.not-found-actions { flex-direction: column; align-items: stretch; }
	.not-found-actions .btn-primary,
	.not-found-actions .btn-secondary { justify-content: center; }
}

/* =========================================
   图片大图查看器（download-detail 截图点击放大）
   时间戳：2026年07月07日20时00分00秒
   模块归属：前台通用图片查看器
   设计说明：
     1. 复用 .modal-overlay 弹窗模式，风格与项目主题一致
     2. 支持点击图片打开、左右切换、按钮缩放、拖拽平移
     3. 完全使用项目 CSS 变量，自动适配深色模式
========================================= */

/* 截图项可点击提示 */
.download-screenshot-item {
	cursor: pointer;
}

.download-screenshot-item .download-screenshot-placeholder {
	position: relative;
}

.download-screenshot-item .download-screenshot-placeholder::after {
	content: '';
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity var(--transition);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M14 10l7-7M9 21H3v-6M10 14l-7 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

.download-screenshot-item:hover .download-screenshot-placeholder::after {
	opacity: 1;
}

/* 图片查看器遮罩 */
.image-viewer-overlay {
	position: fixed;
	inset: 0;
	z-index: 3000;
	background: rgba(0, 0, 0, 0.88);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.image-viewer-overlay.open {
	opacity: 1;
	visibility: visible;
}

/* 图片展示区（可溢出，支持拖拽平移） */
.image-viewer-stage {
	position: relative;
	flex: 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 16px;
}

.image-viewer-image {
	max-width: 100%;
	max-height: 100%;
	user-select: none;
	-webkit-user-drag: none;
	transition: transform 0.15s ease-out;
	will-change: transform;
	border-radius: var(--radius-sm);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.50);
}

.image-viewer-image.dragging {
	transition: none;
	cursor: grabbing;
}

.image-viewer-image.zoomed {
	cursor: grab;
}

/* 顶部工具栏：标题 + 关闭按钮 */
.image-viewer-topbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
	color: #fff;
	z-index: 10;
}

.image-viewer-caption {
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	margin-right: 12px;
}

.image-viewer-close {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.12);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	transition: background var(--transition);
	flex-shrink: 0;
}

.image-viewer-close:hover {
	background: rgba(255, 255, 255, 0.25);
}

/* 左右切换按钮 */
.image-viewer-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.12);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	transition: background var(--transition), transform var(--transition);
	z-index: 10;
}

.image-viewer-nav:hover {
	background: rgba(255, 255, 255, 0.25);
}

.image-viewer-prev {
	left: 20px;
}

.image-viewer-next {
	right: 20px;
}

.image-viewer-prev:hover {
	transform: translateY(-50%) scale(1.08);
}

.image-viewer-next:hover {
	transform: translateY(-50%) scale(1.08);
}

/* 底部工具栏：缩放按钮 + 计数 */
.image-viewer-toolbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.image-viewer-btn {
	width: 38px;
	height: 38px;
	border-radius: var(--radius-full);
	background: transparent;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	transition: background var(--transition);
	padding: 0;
}

.image-viewer-btn:hover {
	background: rgba(255, 255, 255, 0.2);
}

.image-viewer-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.image-viewer-btn:disabled:hover {
	background: transparent;
}

.image-viewer-info {
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
	min-width: 56px;
	text-align: center;
	padding: 0 8px;
}

/* 加载状态 */
.image-viewer-loading {
	position: absolute;
	width: 32px;
	height: 32px;
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-top-color: #fff;
	border-radius: 50%;
	animation: imageViewerSpin 0.8s linear infinite;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.image-viewer-loading.show {
	opacity: 1;
}

@keyframes imageViewerSpin {
	to { transform: rotate(360deg); }
}

/* 移动端适配 */
@media (max-width: 640px) {
	.image-viewer-nav {
		width: 38px;
		height: 38px;
	}
	.image-viewer-prev { left: 8px; }
	.image-viewer-next { right: 8px; }
	.image-viewer-topbar { padding: 12px; }
	.image-viewer-caption { font-size: 13px; }
	.image-viewer-toolbar { gap: 4px; padding: 6px 10px; }
	.image-viewer-btn { width: 34px; height: 34px; }
	.image-viewer-info { min-width: 44px; font-size: 12px; padding: 0 4px; }
}

/* ════════════════════════════════════════
模块：产品详情页补全区域样式
时间戳：2026年07月12日15时00分00秒
设计说明：为 product-detail.html 补全产品信息概览、图片展示、
  使用指南、附件下载、FAQ、用户评价等缺失模块
  - 复用现有 CSS 变量（--color-primary / --color-bg-card / --radius-* / --shadow-* 等）
  - 复用现有 .reveal / .section-header / .attachment-item / .faq-item 等公共样式
  - 复用现有图标系统（icons.svg）
════════════════════════════════════════ */

/* ── 1. 产品信息概览统计栏 ── */
.prod-overview-bar {
	background: var(--color-bg-section);
	padding: 36px 0;
	border-bottom: 1px solid var(--color-border);
}

.prod-overview-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.prod-overview-item {
	text-align: center;
	padding: 20px 12px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.prod-overview-item:hover {
	border-color: rgba(76, 175, 125, 0.3);
	box-shadow: var(--shadow-card);
}

.prod-overview-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	color: var(--color-primary);
	margin: 0 auto 12px;
}

.prod-overview-value {
	font-size: 22px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 4px;
	font-variant-numeric: tabular-nums;
}

.prod-overview-label {
	font-size: 13px;
	color: var(--color-text-muted);
	font-weight: 500;
}

/* ── 2. 产品图片缩略图切换展示 ── */
.prod-gallery-section {
	padding: 60px 0;
	background: var(--color-bg-section);
}

.prod-gallery-switcher {
	max-width: 860px;
	margin: 0 auto;
}

/* 大图展示区 */
.prod-gallery-main-view {
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1.5px solid var(--color-border);
	cursor: pointer;
	transition: box-shadow var(--transition);
	display: flex;
	flex-direction: column;
	margin-bottom: 12px;
}

.prod-gallery-main-view:hover {
	box-shadow: var(--shadow-card-hover);
}

.prod-gallery-main-view > img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.prod-gallery-main-view > span {
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-muted);
	padding: 10px 16px;
	text-align: center;
	background: var(--color-bg-card);
	border-top: 1px solid var(--color-border);
}

/* 缩略图列表（横向滚动，支持动态数量） */
.prod-gallery-thumbs {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}

.prod-gallery-thumbs::-webkit-scrollbar {
	height: 4px;
}

.prod-gallery-thumbs::-webkit-scrollbar-track {
	background: transparent;
}

.prod-gallery-thumbs::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 2px;
}

/* 单个缩略图 */
.prod-gallery-thumb {
	width: 96px;
	height: 64px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	cursor: pointer;
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
	opacity: 0.6;
}

.prod-gallery-thumb:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}

.prod-gallery-thumb.active {
	border-color: var(--color-primary);
	opacity: 1;
	box-shadow: 0 0 0 2px rgba(76, 175, 125, 0.15);
}

.prod-gallery-thumb > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── 3. 使用指南/快速入门步骤 ── */
.prod-guide-section {
	padding: 60px 0;
}

.prod-guide-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	max-width: 960px;
	margin: 0 auto;
}

.prod-guide-step {
	flex: 1;
	text-align: center;
	padding: 32px 24px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.prod-guide-step:hover {
	border-color: rgba(76, 175, 125, 0.3);
	box-shadow: var(--shadow-card);
}

.prod-guide-num {
	font-size: 36px;
	font-weight: 800;
	color: var(--color-primary);
	opacity: 0.25;
	margin-bottom: 8px;
	line-height: 1;
}

.prod-guide-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.prod-guide-step h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 10px;
}

.prod-guide-step p {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.65;
}

/* 快速入门使用说明区域（步骤下方延伸说明） */
/* 时间戳:2026年07月13日20时08分00秒 新增,与 prod-guide-step 卡片风格一致 */
.prod-guide-notes {
	max-width: 960px;
	margin: 36px auto 0;
	padding: 24px 28px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius-sm);
}

.prod-guide-notes-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 16px;
}

.prod-guide-notes-title svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.prod-guide-notes-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.prod-guide-notes-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	color: var(--color-text-secondary);
	line-height: 1.7;
}

.prod-guide-notes-list li svg {
	color: var(--color-primary);
	flex-shrink: 0;
	margin-top: 3px;
}

.prod-guide-notes-list li strong {
	color: var(--color-text);
	font-weight: 600;
}

.prod-guide-notes-list li code {
	font-family: var(--font-mono, "SF Mono", Consolas, monospace);
	font-size: 12.5px;
	padding: 1px 6px;
	background: var(--color-bg-tag);
	color: var(--color-primary);
	border-radius: 3px;
}

.prod-guide-connector {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	opacity: 0.4;
	margin: 0 -6px;
	z-index: 1;
}

/* ── 4. 附件下载区域 ── */
/* 时间戳:2026年07月13日20时05分00秒 背景色调整 */
/* 时间戳:2026年07月13日20时15分00秒 改回灰色,因新增版本对比表(白)在 features(灰)和 download 之间,需保持灰白交替节奏 */
.prod-download-section {
	padding: 60px 0;
	background: var(--color-bg-section);
}

/* ── 3.5 版本对比表区域（features 和 download 之间,白底） ── */
/* 时间戳:2026年07月13日20时25分00秒 新增,与 prod-features-section(灰)/prod-download-section(灰) 形成灰白灰节奏 */
.prod-pricing-section {
	padding: 60px 0;
}

.prod-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1100px;
	margin: 0 auto;
	align-items: stretch;
}

.prod-pricing-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: box-shadow var(--transition), border-color var(--transition);
}

.prod-pricing-card:hover {
	box-shadow: var(--shadow-card-hover);
}

.prod-pricing-card.featured {
	border-color: var(--color-primary);
	box-shadow: 0 4px 24px rgba(76, 175, 125, 0.12);
}

.prod-pricing-card.featured:hover {
	box-shadow: 0 8px 32px rgba(76, 175, 125, 0.18);
}

.prod-pricing-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 20px;
	letter-spacing: 1px;
}

.prod-pricing-card-header {
	text-align: center;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 24px;
}

.prod-pricing-card-header h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 12px;
}

.prod-pricing-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	margin-bottom: 8px;
}

.prod-pricing-amount {
	font-size: 32px;
	font-weight: 800;
	color: var(--color-primary);
	font-variant-numeric: tabular-nums;
}

.prod-pricing-unit {
	font-size: 13px;
	color: var(--color-text-muted);
}

.prod-pricing-desc {
	font-size: 13px;
	color: var(--color-text-secondary);
}

.prod-pricing-features {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.prod-pricing-features li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--color-text);
}

.prod-pricing-features li svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.prod-pricing-features li.disabled {
	color: var(--color-text-muted);
}

.prod-pricing-features li.disabled svg {
	color: var(--color-text-muted);
	opacity: 0.5;
}

.prod-pricing-btn {
	width: 100%;
	padding: 12px 0 !important;
	font-size: 14px !important;
	justify-content: center;
}

/* 产品CTA按钮(立即购买/查看文档) */
/* 时间戳:2026年07月13日20时30分00秒 从模板内嵌style提取,符合项目CSS集中管理规则 */
.prod-cta-btn {
	padding: 14px 36px;
	font-size: 15px;
}

/* ── 6.5 服务保障区域（reviews 和 related 之间,白底） ── */
/* 时间戳:2026年07月13日20时25分00秒 新增,与 prod-reviews-section(灰)/prod-related-section(灰) 形成灰白灰节奏 */
.prod-guarantee-section {
	padding: 60px 0;
}

.prod-guarantee-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.prod-guarantee-card {
	text-align: center;
	padding: 32px 20px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: box-shadow var(--transition), border-color var(--transition);
}

.prod-guarantee-card:hover {
	border-color: rgba(76, 175, 125, 0.3);
	box-shadow: var(--shadow-card);
}

.prod-guarantee-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-primary-pale);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
}

.prod-guarantee-card h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 8px;
}

.prod-guarantee-card p {
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.65;
}

.prod-download-list {
	max-width: 780px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 附件下载按钮（复用 .attachment-item 结构，补充下载链接按钮样式） */
.attachment-item-info {
	flex: 1;
	min-width: 0;
}

.attachment-item-name {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.attachment-item-meta {
	font-size: 12.5px;
	color: var(--color-text-muted);
}

.attachment-item-download {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-pale);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background var(--transition), transform var(--transition);
}

.attachment-item-download:hover {
	background: var(--color-primary);
	color: #fff;
	transform: scale(1.05);
}

/* ── 5. 常见问题FAQ区域 ── */
.prod-faq-section {
	padding: 60px 0;
}

/* ── 6. 用户评价展示区域 ── */
.prod-reviews-section {
	padding: 60px 0;
	background: var(--color-bg-section);
}

.prod-reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.prod-review-card {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 28px 24px;
	transition: box-shadow var(--transition), transform var(--transition);
}

.prod-review-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.prod-review-stars {
	display: flex;
	gap: 2px;
	margin-bottom: 16px;
	color: #f59e0b;
}

.prod-review-text {
	font-size: 14.5px;
	color: var(--color-text-secondary);
	line-height: 1.7;
	font-style: italic;
	margin-bottom: 20px;
}

.prod-review-author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.prod-review-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	flex-shrink: 0;
}

.prod-review-info {
	min-width: 0;
}

.prod-review-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 2px;
}

.prod-review-role {
	font-size: 12.5px;
	color: var(--color-text-muted);
}

/* ── 7. 响应式适配 ── */
@media (max-width: 1024px) {
	.prod-overview-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.prod-overview-grid .prod-overview-item:nth-child(n+4) {
		grid-column: 1 / -1;
		display: inline-block;
		width: calc(33.333% - 14px);
	}
}

@media (max-width: 768px) {
	/* 概览统计栏 */
	.prod-overview-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.prod-overview-grid .prod-overview-item:nth-child(n+4) {
		display: block;
		width: auto;
	}

	.prod-overview-value {
		font-size: 18px;
	}

	/* 图片缩略图 */
	.prod-gallery-thumb {
		width: 72px;
		height: 48px;
	}

	.prod-gallery-main-view > img {
		aspect-ratio: 16 / 10;
	}

	/* 使用指南步骤 */
	.prod-guide-steps {
		flex-direction: column;
		gap: 0;
	}

	.prod-guide-connector {
		transform: rotate(90deg);
		margin: 0;
	}

	.prod-guide-step {
		width: 100%;
	}

	/* 使用说明区域移动端优化 */
	.prod-guide-notes {
		padding: 18px 16px;
		margin-top: 28px;
	}

	.prod-guide-notes-list li {
		font-size: 13px;
		gap: 8px;
	}

	/* 评价网格 */
	.prod-reviews-grid {
		grid-template-columns: 1fr;
	}

	/* 版本对比表移动端单列 */
	.prod-pricing-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.prod-pricing-card {
		padding: 24px 20px;
	}

	/* 服务保障区移动端两列 */
	.prod-guarantee-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.prod-guarantee-card {
		padding: 20px 12px;
	}

	/* 附件下载 */
	.attachment-item-name {
		font-size: 13px;
	}
}

/* =========================================
产品详情页 — 购买面板样式
设计时间:2026年07月13日16时30分00秒
设计说明:
  - 复用项目 CSS 变量(--color-primary/--color-text/--color-bg-card 等)
  - 与 .prod-detail-content 风格一致(同色系/同圆角/同间距)
  - 移动端响应式:768px 断点切换为单列布局
  - 地址弹窗复用 .modal-overlay/.modal-dialog 基础样式
  - 二维码弹窗复用 .alipay-qr-modal 系列样式(已在主样式表定义)
========================================= */

/* 购买面板容器(由 JS 动态填充内容,默认隐藏) */
/* 时间戳:2026年07月13日19时40分00秒 修复与下方 prod-specs-section 无间隔问题 */
.prod-purchase-panel {
	margin-top: 28px;
	margin-bottom: 32px;
	padding: 28px 32px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: 0 2px 12px rgba(26, 34, 51, 0.04);
	animation: prodPanelSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes prodPanelSlideIn {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* 已购买提示(虚拟商品) */
.prod-purchase-purchased {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	margin-bottom: 20px;
	background: rgba(76, 175, 125, 0.08);
	border: 1px solid rgba(76, 175, 125, 0.25);
	border-radius: var(--radius-sm);
	color: var(--color-primary-hover, #16a34a);
	font-size: 14px;
	font-weight: 600;
}

.prod-purchase-purchased svg {
	flex-shrink: 0;
	color: var(--color-primary);
}

/* 缺货提示 */
.prod-purchase-soldout {
	display: inline-block;
	padding: 6px 14px;
	margin-bottom: 16px;
	background: rgba(220, 38, 38, 0.08);
	border: 1px solid rgba(220, 38, 38, 0.25);
	border-radius: var(--radius-full);
	color: #dc2626;
	font-size: 13px;
	font-weight: 600;
}

/* 库存提示 */
.prod-purchase-stock {
	display: inline-block;
	padding: 4px 12px;
	margin-bottom: 16px;
	color: var(--color-text-muted, #6b7280);
	font-size: 13px;
}

/* 价格行(原价划线) */
.prod-purchase-price-row {
	margin-bottom: 6px;
}

.prod-purchase-price-old {
	color: var(--color-text-muted, #9ca3af);
	font-size: 13px;
	text-decoration: line-through;
}

/* 主价格 */
.prod-purchase-price-main {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px dashed var(--color-border);
}

.prod-purchase-price-num {
	font-size: 28px;
	font-weight: 800;
	color: var(--color-primary-hover, #dc2626);
	letter-spacing: -0.5px;
}

.prod-purchase-price-unit {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-secondary);
	margin-left: 2px;
}

/* 面板每行(规格/数量/支付方式/地址) */
.prod-purchase-row {
	margin-bottom: 20px;
}

.prod-purchase-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-muted, #6b7280);
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ===== 规格选择器 ===== */
.prod-specs-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.prod-specs-option {
	padding: 8px 18px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--transition);
}

.prod-specs-option:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.prod-specs-option.active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
	font-weight: 600;
}

/* ===== 数量选择器 ===== */
.prod-quantity-selector {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.prod-quantity-btn {
	width: 38px;
	height: 38px;
	background: var(--color-bg-card);
	border: none;
	color: var(--color-text);
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transition);
}

.prod-quantity-btn:hover {
	background: var(--color-bg-section, #f9fafb);
	color: var(--color-primary);
}

.prod-quantity-btn:active {
	background: var(--color-primary-light, #e6f4ea);
}

.prod-quantity-input {
	width: 64px;
	height: 38px;
	border: none;
	border-left: 1.5px solid var(--color-border);
	border-right: 1.5px solid var(--color-border);
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	background: var(--color-bg-card);
	-moz-appearance: textfield;
}

.prod-quantity-input::-webkit-outer-spin-button,
.prod-quantity-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.prod-quantity-input:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

/* ===== 支付方式选择器 ===== */
.prod-payment-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.prod-payment-option {
	padding: 10px 22px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--transition);
}

.prod-payment-option:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.prod-payment-option.active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
	font-weight: 600;
}

/* ===== 收货地址选择器(面板内) ===== */
.prod-address-selector {
	cursor: pointer;
	transition: border-color var(--transition);
}

.prod-address-empty {
	padding: 18px;
	border: 1.5px dashed var(--color-border);
	border-radius: var(--radius-sm);
	text-align: center;
	color: var(--color-text-muted, #9ca3af);
	font-size: 14px;
	transition: all var(--transition);
}

.prod-address-selector:hover .prod-address-empty {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.prod-address-card {
	padding: 14px 16px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg-section, #f9fafb);
	transition: all var(--transition);
}

.prod-address-selector:hover .prod-address-card {
	border-color: var(--color-primary);
	box-shadow: 0 2px 8px rgba(76, 175, 125, 0.12);
}

.prod-address-card-name {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 4px;
}

.prod-address-card-phone {
	font-weight: 500;
	color: var(--color-text-secondary);
	margin-left: 8px;
}

.prod-address-card-addr {
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.5;
	margin-bottom: 6px;
}

.prod-address-card-tip {
	font-size: 12px;
	color: var(--color-primary);
	font-weight: 500;
}

/* ===== 摘要+提交按钮 ===== */
.prod-purchase-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1.5px solid var(--color-border);
}

.prod-purchase-total {
	font-size: 15px;
	color: var(--color-text);
	font-weight: 600;
}

.prod-purchase-total span {
	font-size: 22px;
	font-weight: 800;
	color: var(--color-primary-hover, #dc2626);
	margin-left: 6px;
}

.prod-purchase-submit {
	padding: 12px 36px;
	background: var(--color-primary);
	border: none;
	border-radius: var(--radius-sm);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: all var(--transition);
}

.prod-purchase-submit:hover:not(:disabled) {
	background: var(--color-primary-dark, #3d9a68);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(76, 175, 125, 0.3);
}

.prod-purchase-submit:active:not(:disabled) {
	transform: translateY(0);
}

.prod-purchase-submit:disabled {
	background: var(--color-text-muted, #9ca3af);
	cursor: not-allowed;
	opacity: 0.6;
}

.prod-purchase-login-tip {
	width: 100%;
	margin-top: 12px;
	text-align: center;
	font-size: 13px;
	color: var(--color-text-muted, #6b7280);
}

.prod-purchase-login-tip a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
}

.prod-purchase-login-tip a:hover {
	text-decoration: underline;
}

/* ===== 地址选择弹窗(复用 .modal-overlay/.modal-dialog) ===== */
.prod-address-modal .modal-dialog {
	max-width: 560px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}

.prod-address-modal .modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 24px;
}

.prod-address-modal .modal-footer {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	border-top: 1px solid var(--color-border);
}

.prod-address-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.prod-address-loading,
.prod-address-empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--color-text-muted, #9ca3af);
	font-size: 14px;
}

/* 地址项 */
.prod-address-item {
	padding: 16px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition);
	background: var(--color-bg-card);
}

.prod-address-item:hover {
	border-color: var(--color-primary);
	box-shadow: 0 2px 8px rgba(76, 175, 125, 0.1);
}

.prod-address-item.selected {
	border-color: var(--color-primary);
	background: rgba(76, 175, 125, 0.04);
}

.prod-address-item-name {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.prod-address-item-name span {
	font-weight: 500;
	color: var(--color-text-secondary);
}

.prod-address-item-default {
	padding: 2px 8px;
	background: var(--color-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	border-radius: var(--radius-full);
}

.prod-address-item-addr {
	font-size: 13px;
	color: var(--color-text-secondary);
	line-height: 1.5;
	margin-bottom: 10px;
}

.prod-address-item-actions {
	display: flex;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px dashed var(--color-border);
}

.prod-address-item-btn {
	padding: 4px 12px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-secondary);
	font-size: 12.5px;
	cursor: pointer;
	transition: all var(--transition);
}

.prod-address-item-btn:hover:not(:disabled) {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.prod-address-item-btn.danger:hover:not(:disabled) {
	border-color: #dc2626;
	color: #dc2626;
}

.prod-address-item-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ===== 地址表单弹窗 ===== */
.prod-address-form-modal .modal-dialog {
	max-width: 480px;
}

.prod-address-form-modal .modal-body {
	padding: 20px 24px;
	max-height: 65vh;
	overflow-y: auto;
}

.prod-address-form-modal .modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	padding: 16px 24px;
	border-top: 1px solid var(--color-border);
}

.prod-address-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.prod-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.prod-form-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
}

.prod-form-required {
	color: #dc2626;
	margin-left: 2px;
}

.prod-form-input,
.prod-form-textarea {
	padding: 10px 12px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 14px;
	color: var(--color-text);
	background: var(--color-bg-card);
	transition: border-color var(--transition);
	font-family: inherit;
}

.prod-form-input:focus,
.prod-form-textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.12);
}

.prod-form-textarea {
	resize: vertical;
	min-height: 72px;
	line-height: 1.5;
}

.prod-form-checkbox-row {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.prod-form-checkbox-row label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--color-text);
	cursor: pointer;
}

.prod-form-checkbox-row input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

/* ===== 响应式:移动端优化 ===== */
@media (max-width: 768px) {
	.prod-purchase-panel {
		padding: 20px 16px;
	}

	.prod-purchase-price-main {
		margin-bottom: 16px;
		padding-bottom: 14px;
	}

	.prod-purchase-price-num {
		font-size: 24px;
	}

	.prod-purchase-row {
		margin-bottom: 16px;
	}

	.prod-specs-selector,
	.prod-payment-selector {
		gap: 6px;
	}

	.prod-specs-option,
	.prod-payment-option {
		padding: 7px 14px;
		font-size: 13px;
	}

	.prod-purchase-summary {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.prod-purchase-submit {
		width: 100%;
		padding: 14px;
	}

	.prod-purchase-total {
		text-align: center;
	}

	/* 弹窗在移动端铺满 */
	.prod-address-modal .modal-dialog,
	.prod-address-form-modal .modal-dialog {
		max-width: 100%;
		margin: 12px;
	}

	.prod-address-modal .modal-footer,
	.prod-address-form-modal .modal-footer {
		flex-direction: column-reverse;
	}

	.prod-address-modal .modal-footer button,
	.prod-address-form-modal .modal-footer button {
		width: 100%;
		padding: 12px;
	}

	.prod-address-item-actions {
		flex-wrap: wrap;
	}

	.prod-address-item-btn {
		flex: 1;
		min-width: 80px;
	}
}

/* ===== 超小屏(<480px)进一步优化 ===== */
@media (max-width: 480px) {
	.prod-purchase-panel {
		padding: 16px 12px;
	}

	.prod-purchase-price-num {
		font-size: 22px;
	}

	.prod-quantity-selector {
		width: 100%;
		justify-content: center;
	}

	.prod-quantity-btn {
		flex: 1;
	}

	.prod-quantity-input {
		flex: 0 0 80px;
	}

	.prod-payment-selector {
		flex-direction: column;
	}

	.prod-payment-option {
		width: 100%;
		text-align: center;
	}
}

/* ==================== 产品授权码弹窗样式 ====================
   新增时间：2026年07月13日21时00分00秒
   功能说明：用户中心 > 我的订单 > 虚拟商品订单 > 查看授权码弹窗
   设计要点：
     1. 弹窗最大宽度560px,适配桌面+移动端
     2. 授权码条目单行显示,等宽字体,带复制按钮
     3. 状态色：加载中(灰)、空(灰)、正常(主色边框)
     4. 复制按钮反馈：成功后短暂显示"已复制"
================================================================ */

.product-codes-modal {
	max-width: 560px;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 24px 24px 20px;
	position: relative;
}

.product-codes-modal .modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--color-text-secondary);
	padding: 4px;
	border-radius: var(--radius-xs);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.product-codes-modal .modal-close:hover {
	background: var(--color-bg-hover);
	color: var(--color-text-primary);
}

.product-codes-modal .modal-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-text-primary);
	margin: 0 0 6px;
	padding-right: 32px;
}

.product-codes-sub {
	font-size: 13px;
	color: var(--color-text-secondary);
	margin-bottom: 16px;
	word-break: break-all;
}

.product-codes-sub span {
	color: var(--color-text-primary);
	font-weight: 500;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.product-codes-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.codes-loading,
.codes-empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--color-text-secondary);
	font-size: 14px;
	background: var(--color-bg-hover);
	border-radius: var(--radius-xs);
}

.code-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.code-item:hover {
	border-color: var(--color-primary);
	background: var(--color-bg-hover);
}

.code-index {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-hover);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-secondary);
}

.code-text {
	flex: 1 1 auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 14px;
	color: var(--color-text-primary);
	letter-spacing: 0.5px;
	word-break: break-all;
	user-select: all;
}

.code-copy-btn {
	flex: 0 0 auto;
	padding: 5px 12px;
	font-size: 12px;
	color: var(--color-primary);
	background: transparent;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-xs);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.code-copy-btn:hover {
	background: var(--color-primary);
	color: #fff;
}

.codes-actions {
	display: flex;
	justify-content: center;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--color-border);
}

.codes-actions .btn-primary-sm {
	min-width: 140px;
}

/* 移动端适配 */
@media (max-width: 600px) {
	.product-codes-modal {
		max-width: 100%;
		margin: 12px;
		padding: 18px 16px 14px;
	}

	.code-item {
		flex-wrap: wrap;
		padding: 10px 12px;
	}

	.code-index {
		flex: 0 0 24px;
		width: 24px;
		height: 24px;
		font-size: 11px;
	}

	.code-text {
		flex: 1 1 calc(100% - 36px);
		font-size: 13px;
	}

	.code-copy-btn {
		flex: 0 0 auto;
		padding: 4px 10px;
		font-size: 11px;
	}
}

/* ============================================================
   我的授权码页面样式
   新增时间：2026年07月13日23时20分00秒
   功能：表格内联码、状态徽章变体、详情弹窗布局
   ============================================================ */

/* 表格内联授权码 */
.code-inline {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 13px;
	color: var(--color-text-primary);
	background: var(--color-bg-hover);
	padding: 2px 8px;
	border-radius: var(--radius-xs);
	letter-spacing: 0.3px;
	word-break: break-all;
}

/* 状态徽章变体 */
.status-badge.status-pending {
	background: rgba(245, 158, 11, 0.12);
	color: #b45309;
}

.status-badge.status-active {
	background: rgba(16, 185, 129, 0.12);
	color: #047857;
}

.status-badge.status-expired {
	background: rgba(239, 68, 68, 0.12);
	color: #b91c1c;
}

.status-badge.status-cancelled {
	background: rgba(107, 114, 128, 0.12);
	color: #4b5563;
}

/* 文本辅助色 */
.text-muted {
	color: var(--color-text-secondary);
	font-size: 13px;
}

.text-warning {
	color: #b45309;
	font-weight: 500;
}

.text-danger {
	color: #b91c1c;
	font-weight: 500;
}

/* 授权码列宽 */
.data-table .col-code {
	min-width: 200px;
	max-width: 280px;
}

/* ============================================================
   授权码详情弹窗样式
   ============================================================ */
.code-detail-modal {
	max-width: 720px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 24px 24px 20px;
	position: relative;
}

.code-detail-modal .modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--color-text-secondary);
	padding: 4px;
	border-radius: var(--radius-xs);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.code-detail-modal .modal-close:hover {
	background: var(--color-bg-hover);
	color: var(--color-text-primary);
}

.code-detail-modal .modal-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-text-primary);
	margin: 0 0 16px;
	padding-right: 32px;
}

.code-detail-body {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.detail-section {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.detail-label {
	font-size: 12px;
	color: var(--color-text-secondary);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.detail-section > div:not(.detail-label) {
	font-size: 14px;
	color: var(--color-text-primary);
}

.detail-code-value {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.detail-code-value code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 15px;
	color: var(--color-text-primary);
	background: var(--color-bg-hover);
	padding: 6px 12px;
	border-radius: var(--radius-xs);
	letter-spacing: 0.5px;
	word-break: break-all;
	flex: 1 1 auto;
}

/* 详情网格(2列布局) */
.detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
	padding: 14px 16px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
}

.detail-grid .detail-section {
	gap: 4px;
}

/* 机器码列表 */
.detail-machine-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.detail-machine-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--color-bg-hover);
	border-radius: var(--radius-xs);
}

.detail-machine-index {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-card);
	border-radius: 50%;
	font-size: 11px;
	font-weight: 600;
	color: var(--color-text-secondary);
}

.detail-machine-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 13px;
	color: var(--color-text-primary);
	word-break: break-all;
}

.detail-empty {
	font-size: 13px;
	color: var(--color-text-secondary);
	font-style: italic;
}

.detail-bindings {
	font-size: 13px;
	color: var(--color-text-primary);
	padding: 4px 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ============================================================
   卡密激活页样式
   ============================================================ */
.input-with-action {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.input-with-action input {
	flex: 1 1 auto;
}

.btn-input-action {
	flex: 0 0 auto;
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary);
	background: transparent;
	border: 1.5px solid var(--color-primary);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--transition), color var(--transition), transform var(--transition);
	white-space: nowrap;
}

.btn-input-action:hover {
	background: var(--color-primary);
	color: #fff;
	transform: translateY(-1px);
}

.btn-input-action:active {
	transform: translateY(0);
}

.form-tip {
	font-size: 12px;
	color: var(--color-text-secondary);
	margin-top: 6px;
	line-height: 1.5;
}

.auth-foot {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--color-border);
	text-align: center;
}

.auth-foot p {
	font-size: 13px;
	color: var(--color-text-secondary);
	margin: 0 0 6px;
}

.auth-foot p a {
	color: var(--color-primary);
	text-decoration: none;
}

.auth-foot p a:hover {
	text-decoration: underline;
}

.auth-foot-sub {
	font-size: 12px !important;
	opacity: 0.7;
}

/* 用户面板底部提示区域(激活页等)
 * 新增时间:2026年07月24日19时15分00秒
 * 功能:替代原内联样式,用于面板底部的辅助提示信息 */
.user-panel-foot {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
	font-size: 13px;
	color: var(--color-text-muted);
	line-height: 1.8;
}

.user-panel-foot p {
	margin: 0 0 4px;
}

.user-panel-foot p:last-child {
	margin-bottom: 0;
}

.user-panel-foot p a {
	color: var(--color-primary);
	text-decoration: none;
}

.user-panel-foot p a:hover {
	text-decoration: underline;
}

/* 表单消息(成功/错误) */
.form-message {
	padding: 10px 14px;
	border-radius: var(--radius-xs);
	font-size: 13px;
	margin-bottom: 14px;
	display: none;
}

.form-message:not(:empty) {
	display: block;
}

.form-message.error {
	background: rgba(239, 68, 68, 0.1);
	color: #b91c1c;
	border: 1px solid rgba(239, 68, 68, 0.3);
}

.form-message.success {
	background: rgba(16, 185, 129, 0.1);
	color: #047857;
	border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ============================================================
   移动端适配(我的授权码+卡密激活)
   ============================================================ */
@media (max-width: 600px) {
	.code-detail-modal {
		max-width: 100%;
		margin: 12px;
		padding: 18px 16px 14px;
	}

	.detail-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.input-with-action {
		flex-direction: column;
	}

	.btn-input-action {
		padding: 8px 16px;
	}

	.data-table .col-code {
		min-width: 140px;
	}
}

/* ============================================================
   个人资料页 - 收货地址簿（嵌入式列表 + 内联表单）
   时间戳：2026年07月22日14时30分00秒
   设计说明：复用现有 .user-panel/.form-row/.form-group/.form-input/.btn-* 等基础样式
            仅追加地址簿专属类名，遵循现有 CSS 变量与主题风格
   ============================================================ */

/* 地址列表容器 */
.addr-book-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 空状态/加载提示 */
.addr-empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--color-text-muted);
	font-size: 14px;
	background: var(--color-bg-section);
	border-radius: var(--radius-sm);
	border: 1px dashed var(--color-border);
}

/* 地址卡片 */
.addr-card {
	background: var(--color-bg-section);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 18px 20px;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.addr-card:hover {
	border-color: rgba(76, 175, 125, 0.35);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.addr-card.is-default {
	border-color: rgba(76, 175, 125, 0.5);
	background: linear-gradient(180deg, rgba(76, 175, 125, 0.04) 0%, var(--color-bg-section) 60%);
}

/* 卡片头部：姓名/电话/默认标签/操作按钮 */
.addr-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.addr-card-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
}

.addr-card-phone {
	font-size: 13px;
	color: var(--color-text-secondary);
}

.addr-card-default {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--color-primary);
	background: var(--color-primary-pale);
	border-radius: var(--radius-full);
}

.addr-card-actions {
	margin-left: auto;
	display: flex;
	gap: 8px;
}

/* 操作按钮（小型 ghost 风格） */
.addr-card-btn {
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text-secondary);
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition);
}

.addr-card-btn:hover:not(:disabled) {
	color: var(--color-primary);
	border-color: var(--color-primary);
	background: var(--color-primary-pale);
}

.addr-card-btn.danger:hover:not(:disabled) {
	color: var(--color-danger);
	border-color: var(--color-danger);
	background: rgba(231, 76, 60, 0.06);
}

.addr-card-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* 卡片地址内容 */
.addr-card-body {
	font-size: 13.5px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	word-break: break-all;
}

/* 内联表单容器（默认隐藏，hidden 属性生效） */
.addr-form {
	margin-top: 16px;
	padding: 22px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.addr-form[hidden] {
	display: none;
}

/* 必填标记 */
.addr-form .required {
	color: var(--color-danger);
	font-weight: 600;
	margin-left: 2px;
}

/* 内联表单操作按钮 */
.addr-form-actions {
	display: flex;
	gap: 12px;
	margin-top: 4px;
}

/* 响应式：移动端优化 */
@media (max-width: 768px) {
	.addr-card {
		padding: 14px 16px;
	}

	.addr-card-head {
		gap: 8px;
	}

	.addr-card-actions {
		margin-left: 0;
		width: 100%;
		justify-content: flex-end;
	}

	.addr-form {
		padding: 16px;
	}

	.addr-form-actions {
		flex-direction: column-reverse;
		gap: 8px;
	}

	.addr-form-actions .btn-primary,
	.addr-form-actions .btn-ghost {
		width: 100%;
		text-align: center;
	}
}

/* =========================================
   产品文档页（docs.html）· 时间戳：2026年09月03日16时30分00秒
   功能：左侧文档目录 + 右侧内容区双栏布局；纯静态页面，正文区复用
         article-detail-body 排版体系（标题/段落/行内代码/代码块渲染），
         仅补充目录、统计卡、步骤卡、提示框、表格、FAQ 等文档专属样式。
   设计：全部使用主题 CSS 变量，浅色/深色模式自动适配；零 JS 依赖。
========================================= */
.doc-page-section {
	padding: 36px 0 72px;
}

/* ---- 双栏布局：左目录 264px + 右内容自适应 ---- */
.doc-layout {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* ---- 左侧目录（桌面端粘性固定，仅目录区内部滚动） ---- */
.doc-toc {
	position: sticky;
	top: 92px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 18px 14px 14px;
	box-shadow: var(--shadow-card);
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}
.doc-toc-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px 12px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--color-border);
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
}
.doc-toc-title svg {
	flex-shrink: 0;
	color: var(--color-primary);
}
.doc-toc-nav {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.doc-toc-link {
	display: block;
	position: relative;
	padding: 7px 10px 7px 14px;
	border-radius: var(--radius-sm);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--color-text-secondary);
	transition: color var(--transition), background var(--transition);
}
.doc-toc-link.is-h3 {
	padding-left: 30px;
	font-size: 13px;
	color: var(--color-text-muted);
}
.doc-toc-link:hover {
	color: var(--color-primary);
	background: var(--color-primary-pale);
}
/* 当前阅读章节高亮 */
.doc-toc-link.active {
	color: var(--color-primary);
	background: var(--color-primary-pale);
	font-weight: 600;
}
/* 当前阅读章节高亮：左竖条由 ::after 绘制（2026年09月10日11时06分00秒
   ::before 已让位给章节序号，竖条样式与定位保持不变） */
.doc-toc-link.active::after {
	content: "";
	position: absolute;
	left: 0;
	top: 22%;
	bottom: 22%;
	width: 3px;
	border-radius: 2px;
	background: var(--color-primary);
}
.doc-toc-link.is-h3.active::after {
	left: 14px;
}

/* ---- 右侧文档内容卡片 ---- */
.doc-article {
	min-width: 0;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 36px 44px 28px;
	box-shadow: var(--shadow-card);
	/* 2026年09月04日12时10分04秒 文档正文排版微调：
	   继承自 .article-detail-body 的 16.5px/24px/19px 在密集表格文档中偏大，
	   此处按 docs 文档页单独收小（仅作用域内覆盖，不影响文章详情正文）；
	   表格行距同步用 1.85 保证长文可读性。 */
	font-size: 15.5px;
	line-height: 1.85;
}
.doc-article h2 {
	font-size: 22px;
	margin: 34px 0 14px;
}
.doc-article h3 {
	font-size: 18px;
	margin: 26px 0 10px;
}
/* 配置键分组四级标题（docs.html xcms_system_configs 逐键详解）· 时间戳：2026年09月04日12时33分27秒 */
.doc-article h4 {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 600;
	margin: 24px 0 10px;
	padding: 6px 12px 6px 14px;
	color: var(--color-text);
	background: var(--color-primary-pale);
	border-left: 3px solid var(--color-primary);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	scroll-margin-top: 96px;
}
.doc-article h4 .doc-group-tag {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.4px;
	padding: 1px 8px;
	border-radius: 999px;
	color: var(--color-primary);
	background: var(--color-bg-tag);
	white-space: nowrap;
}
.doc-article h4 + .doc-table-wrap {
	margin-top: 8px;
}
.doc-article p {
	margin-bottom: 15px;
}
/* 行内小星标（可站点覆盖标识）：引用 icons.svg 图标，禁止用文字/emoji 字符 */
.doc-star {
	display: inline-block;
	vertical-align: -2px;
	color: var(--color-primary);
}
.doc-article .doc-star {
	margin-left: 2px;
}
/* 锚点跳转避开固定导航（偏移与目录 top 一致） */
.doc-article h2,
.doc-article h3 {
	scroll-margin-top: 96px;
}
/* 正文列表恢复项目符号（全局 reset 去掉了 ul 圆点，正文内需还原） */
.doc-article ol:not(.doc-steps),
.doc-article ul:not(.doc-faq) {
	margin: 0 0 20px;
	padding-left: 1.5em;
}
.doc-article ul:not(.doc-faq) {
	list-style: disc;
}
.doc-article ol:not(.doc-steps) {
	list-style: decimal;
}
.doc-article li {
	margin-bottom: 8px;
}
.doc-article li:last-child {
	margin-bottom: 0;
}

/* =========================================
   文档页章节序号（时间戳：2026年09月10日11时06分00秒）
   背景：docs.html 是约 3.4 万像素高的单页文档（1440 宽下约 38 屏），
        共 7 个 h2 + 32 个 h3，左侧另有 39 条手写目录。
        补两级章节序号（h2 为「3」、h3 为「3.7」）便于定位与引用。
   方案：纯 CSS 计数器，不改动 39 个标题与 39 条目录的 HTML。
        正文用 doc-sec / doc-sub 计数，侧边目录用 toc-sec / toc-sub 计数，
        两套计数都只依赖文档顺序；已校验正文 39 个标题与目录 39 条锚点
        同序同 ID，增删章节会自动重编号，不存在手写序号错位的风险。
   范围：仅 h2 + h3。h4 处于「站点业务配置」分组内且已带 basic/seo/route
        等分组标签作为标识，不参与编号；h2 下的 h3 序号随 h2 重置。
   样式：序号不单独设定字号字重颜色，直接继承所属标题（h2 为 24px/700、
        h3 为 19px/700）与所属目录项（is-h2 13.5px/次级色、is-h3 13px/弱化色），
        因此两级序号各自跟随对应标题风格，而非上下一致的独立标记。
   坑位记录：h2/h3 是同级兄弟元素，子计数器只能由 h2 自己 counter-reset。
        若容器（.doc-article / .doc-toc-nav）也重置同一个子计数器，外层实例会
        遮蔽 h2 的重置，后续兄弟 h3 继续累加（实测会出现「2.4 / 2.5」而非
        「2.1 / 2.2」）。故容器只重置一级计数器，子计数器交由 h2 重置。
   冲突处理：目录激活态竖条原用 ::before 绘制，与序号占位冲突，
        已改为 ::after（见上方 .doc-toc-link.active::after）。
   性能说明：伪元素 + CSS 计数器，无 JS 参与，不影响滚动、锚点与 scrollspy。
   ========================================= */
.doc-article {
	counter-reset: doc-sec;
}

.doc-article h2 {
	counter-increment: doc-sec;
	counter-reset: doc-sub;
}

.doc-article h3 {
	counter-increment: doc-sub;
}

.doc-article h2::before,
.doc-article h3::before {
	/* 序号跟随所属标题的字号、字重与颜色（h2 为 24px/700，h3 为 19px/700），
	   只保留与标题文字之间的间距，视觉上等同于标题自带的编号 */
	margin-right: 0.4em;
}

.doc-article h2::before {
	content: counter(doc-sec);
}

.doc-article h3::before {
	content: counter(doc-sec) "." counter(doc-sub);
}

/* 侧边目录与正文同步编号（顺序一致，序号自然对齐；容器同样只重置一级计数器） */
.doc-toc-nav {
	counter-reset: toc-sec;
}

.doc-toc-link.is-h2 {
	counter-increment: toc-sec;
	counter-reset: toc-sub;
}

.doc-toc-link.is-h3 {
	counter-increment: toc-sub;
}

.doc-toc-link.is-h2::before,
.doc-toc-link.is-h3::before {
	/* 目录序号同样跟随对应目录项的字号与颜色（is-h2 13.5px/次级色、is-h3 13px/弱化色），
	   等宽占位只为让右侧标题文字左对齐，不改变序号本身的字重与颜色 */
	display: inline-block;
	min-width: 2.2em;
}

.doc-toc-link.is-h2::before {
	content: counter(toc-sec);
}

.doc-toc-link.is-h3::before {
	content: counter(toc-sec) "." counter(toc-sub);
}

/* ---- 标签系统数据总览统计卡 ---- */
.doc-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 26px 0 6px;
}
.doc-stat {
	padding: 18px 8px 14px;
	text-align: center;
	background: var(--color-primary-pale);
	border: 1px solid var(--color-primary-light);
	border-radius: var(--radius-sm);
}
.doc-stat .num {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-primary-dark);
}
.doc-stat .lbl {
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--color-text-secondary);
}

/* ---- 安装步骤列表（编号圆点卡片） ---- */
.doc-steps {
	counter-reset: doc-step;
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: grid;
	gap: 12px;
}
.doc-steps > li {
	position: relative;
	counter-increment: doc-step;
	padding: 14px 18px 14px 60px;
	background: var(--color-bg-section);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}
.doc-steps > li::before {
	content: counter(doc-step);
	position: absolute;
	left: 15px;
	top: 15px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 30px;
	text-align: center;
}
.doc-step-head {
	margin-bottom: 2px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--color-text);
}
.doc-steps > li p {
	margin: 0;
}

/* ---- 提示框（info / warn） ---- */
.doc-callout {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 20px 0;
	padding: 13px 16px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	line-height: 1.75;
}
.doc-callout svg {
	flex-shrink: 0;
	margin-top: 4px;
}
.doc-callout-info {
	background: var(--color-primary-pale);
	border: 1px solid var(--color-primary-light);
}
.doc-callout-info svg {
	color: var(--color-primary);
}
.doc-callout-warn {
	background: rgba(243, 156, 18, 0.09);
	border: 1px solid rgba(243, 156, 18, 0.30);
}
.doc-callout-warn svg {
	color: var(--color-warning);
}

/* ---- 文档表格：外框容器（窄屏横向滚动）+ 单元格美化 ---- */
.doc-table-wrap {
	overflow-x: auto;
	margin: 18px 0 24px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	-webkit-overflow-scrolling: touch;
}
.doc-article table {
	/* 表格最小宽度保证列可读：窄于 720px 时由外层 .doc-table-wrap 提供横向滚动，
	   避免浏览器把"说明"等长文本列压缩换行导致文字堆叠/截断（2026年09月03日） */
	min-width: 720px;
	width: 100%;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}
.doc-article th,
.doc-article td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}
.doc-article th {
	background: var(--color-bg-section);
	color: var(--color-text);
	font-weight: 600;
	white-space: nowrap;
}
.doc-article tbody tr:last-child td {
	border-bottom: none;
}
.doc-article tbody tr:hover td {
	background: var(--color-primary-pale);
}
/* 2026年09月04日15时36分10秒 修复：cell 内行内 code 允许断行。
   站点业务配置逐键详解表中多键拼接（如 email_template_register /
   email_template_reset_password / …、wechat_appid / … 长键名）此前受
   white-space:nowrap 限制无法折行，导致列被撑宽、出现横向滚动与列宽错乱。
   改为可断行后：空格/斜杠分隔处自然折行 + 超长无空格串可任意断行（anywhere），
   表格各列自动收缩对齐，布局一致且不横向滚动。 */
.doc-article th code,
.doc-article td code {
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}
/* 表格容器内的软连字符：允许 / 后断开，进一步改善长键名换行观感 */
.doc-article td code {
	line-height: 1.7;
}
/* 2026年09月04日15时36分10秒 站点业务配置逐键详解表：允许列按内容压缩。
   该类用于 config-dbconfig 区块的键值详解表——键名多为长标识符（含 / 拼接），
   配合上方 code 的 anywhere 断行后列宽可自然收缩，从而：
   1) 表格各列宽度一致（不再被单一超长键撑爆）；
   2) 窄屏不再依赖横向滚动，长键/长值自动折行；
   3) 移除此类表的 720px 最小宽度约束（全局 .doc-article table 仍保留，
      供标签速查等宽表使用）。 */
.doc-table-wrap.doc-wrap {
	overflow-x: visible;
}
.doc-table-wrap.doc-wrap table {
	min-width: 0;
}

/* ---- 常见问题手风琴（原生 details 折叠，零 JS） ---- */
.doc-faq {
	margin: 8px 0 8px;
}
.doc-faq-item {
	margin-bottom: 12px;
	background: var(--color-bg-section);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.doc-faq-item summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: color var(--transition);
}
.doc-faq-item summary::-webkit-details-marker {
	display: none;
}
.doc-faq-item summary::after {
	content: "+";
	margin-left: auto;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: var(--color-text-muted);
	transition: transform var(--transition);
}
.doc-faq-item[open] summary {
	color: var(--color-primary);
}
.doc-faq-item[open] summary::after {
	transform: rotate(45deg);
}
.doc-faq-item summary:hover {
	color: var(--color-primary);
}
.doc-faq-body {
	padding: 0 16px 14px 16px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--color-text-secondary);
}

/* ---- 文档页 API 接口参考章节专用样式 ---- */
/* 时间戳: 2026年10月13日 从 docs.html 内联 <style> 迁移至此(原行13-111),保持职责分离 */
/* 功能: HTTP 方法 badge 配色、API 表格响应式横向滚动、模块折叠面板 */
.api-method {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: #fff;
	line-height: 1.4;
	white-space: nowrap;
}
.api-method-get { background: #28a745; }
.api-method-post { background: #007bff; }
.api-method-put { background: #fd7e14; }
.api-method-delete { background: #dc3545; }

/* API 表格容器：在 doc-table-wrap 基础上追加响应式横向滚动 */
.api-table-wrap {
	margin: 1em 0 1.5em;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.api-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 600px;
}
.api-table-wrap th,
.api-table-wrap td {
	padding: 8px 12px;
	border: 1px solid var(--border-color, #e4e7ed);
	text-align: left;
	vertical-align: top;
	word-break: break-word;
}
.api-table-wrap th {
	background: var(--bg-soft, #f5f7fa);
	font-weight: 600;
	white-space: nowrap;
}
.api-table-wrap td code,
.api-table-wrap th code {
	word-break: break-all;
	font-size: 13px;
}

/* 子小节标题（合并模块下的原始小节名） */
.api-subsec {
	margin: 1.2em 0 0.5em;
	font-weight: 600;
	color: var(--text-secondary, #606266);
	font-size: 14px;
}

/* 后台管理 API 模块小标题（h4）与折叠容器 */
.api-group-title {
	margin: 1.2em 0 0;
	padding: 10px 14px;
	background: var(--bg-soft, #f5f7fa);
	border: 1px solid var(--border-color, #e4e7ed);
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
	font-size: 15px;
	user-select: none;
	position: relative;
	padding-right: 36px;
	list-style: none;
}
.api-group-title .api-group-toggle {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	font-weight: 400;
	color: var(--text-secondary, #909399);
	pointer-events: none;
}
/* 折叠状态：+ 号；展开状态：− 号（图标统一由 ::after 生成，HTML 内不再写死文本） */
.api-group-title .api-group-toggle::after { content: "+"; }
.api-group-title.is-expanded .api-group-toggle::after { content: "−"; }
.api-group-body {
	margin: 0 0 1em;
	padding: 0;
}
.api-group-body.is-hidden { display: none; }

/* 响应式：小屏下表格强制横向滚动（与上面 overflow 配合） */
@media (max-width: 768px) {
	.api-table-wrap table { min-width: 560px; }
	.api-method { font-size: 11px; padding: 1px 6px; }
}

/* ---- 移动端目录折叠按钮（≤1024px 才显示） ---- */
.doc-toc-toggle {
	display: none;
}

/* =========================================
   产品文档页响应式
========================================= */
@media (max-width: 1024px) {
	.doc-layout {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	/* 目录默认收起，点击按钮展开为普通卡片 */
	.doc-toc {
		display: none;
	}
	.doc-layout.doc-toc-open .doc-toc {
		display: block;
		position: static;
		max-height: none;
		margin-bottom: 4px;
	}
	.doc-toc-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 18px;
		padding: 9px 20px;
		font-size: 14px;
		color: var(--color-text);
		background: var(--color-bg-card);
		border: 1.5px solid var(--color-border);
		border-radius: var(--radius-full);
		box-shadow: var(--shadow-card);
		transition: color var(--transition), border-color var(--transition);
	}
	.doc-toc-toggle:hover {
		color: var(--color-primary);
		border-color: var(--color-primary);
	}
	.doc-toc-toggle svg {
		color: var(--color-primary);
	}
}

@media (max-width: 768px) {
	.doc-page-section {
		padding: 24px 0 56px;
	}
	.doc-article {
		padding: 24px 18px 20px;
	}
	.doc-stats {
		grid-template-columns: repeat(2, 1fr);
	}
	.doc-steps > li {
		padding: 12px 14px 12px 52px;
	}
	.doc-steps > li::before {
		left: 12px;
		top: 13px;
		width: 27px;
		height: 27px;
		font-size: 13px;
		line-height: 27px;
	}
	.doc-table-wrap {
		margin: 14px 0 20px;
	}
	.doc-article th,
	.doc-article td {
		padding: 8px 10px;
	}
}

/* ---- 文档工具导航卡（docs.html）· 时间戳：2026年09月04日11时53分02秒 ----
   功能：文档正文中指向标签生成器 /tag-tool 等工具页的醒目跳转卡片，
         左侧图标 + 主副标题，右侧跳转按钮；浅色/深色自适应。
   设计：仅使用主题 CSS 变量；flex 布局，窄屏自动换行纵向堆叠。 */
.doc-tool-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	margin: 20px 0 24px;
	background: var(--color-primary-pale);
	border: 1px solid var(--color-primary-light);
	border-radius: var(--radius-sm);
}
.doc-tool-card-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: #fff;
}
.doc-tool-card-body {
	flex: 1;
	min-width: 0;
}
.doc-tool-card-title {
	margin: 0 0 2px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--color-text);
}
.doc-tool-card-title a {
	color: var(--color-primary);
	text-decoration: none;
}
.doc-tool-card-title a:hover {
	text-decoration: underline;
}
.doc-tool-card-desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-text-secondary);
}
.doc-tool-card-action {
	flex-shrink: 0;
}
.doc-tool-card-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: #fff;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--transition);
}
.doc-tool-card-btn:hover {
	background: var(--color-primary-dark);
	color: #fff;
}
@media (max-width: 720px) {
	.doc-tool-card {
		flex-wrap: wrap;
		padding: 14px;
	}
	.doc-tool-card-icon {
		width: 38px;
		height: 38px;
	}
	.doc-tool-card-action {
		width: 100%;
	}
	.doc-tool-card-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---- 系统配置分段小标题（docs.html 各配置节 yaml 键名辅助说明） ---- */
.doc-config-sub {
	display: inline-block;
	margin: 6px 0 2px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--color-primary);
	text-transform: uppercase;
}
.doc-article h3 + .doc-config-sub,
.doc-article h3 + p > .doc-config-sub {
	margin-top: 0;
}


/* =========================================
   标签生成器页（tag-tool.html）· 时间戳：2026年09月03日
   功能：按页面功能分类展示 xiis 全量模板标签，点选灵活组合生成代码并一键复制。
   设计：沿用主题变量与明暗双主题；左目录（桌面粘性/移动横滑）+ 右侧分类卡片；
         已选栏与结果区吸顶/内联展示，纯前端交互零依赖。
========================================= */
.tag-tool {
	padding: 36px 0 72px;
}

/* ---- 数据总览 ---- */
.gen-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 24px;
}
.gen-stat {
	padding: 16px 8px 13px;
	text-align: center;
	background: var(--color-primary-pale);
	border: 1px solid var(--color-primary-light);
	border-radius: var(--radius-sm);
}
.gen-stat .num {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-primary-dark);
}
.gen-stat .lbl {
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--color-text-secondary);
}

/* ---- 已选生成栏 ---- */
.gen-bar {
	position: sticky;
	top: 76px;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding: 12px 18px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-primary);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card-hover);
}
.gen-bar-info {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--color-text);
}
.gen-bar-info svg {
	color: var(--color-primary);
}
.gen-bar-info strong {
	color: var(--color-primary-dark);
	font-size: 16px;
}
.gen-bar-actions {
	display: flex;
	gap: 10px;
}
.gen-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: var(--radius-full);
	font-size: 14px;
	font-weight: 500;
	transition: all var(--transition);
}
.gen-btn-primary {
	background: var(--color-primary);
	color: #fff;
}
.gen-btn-primary:hover {
	background: var(--color-primary-hover);
}
.gen-btn-ghost {
	background: var(--color-bg-card);
	color: var(--color-text-secondary);
	border: 1.5px solid var(--color-border);
}
.gen-btn-ghost:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

/* ---- 生成结果区 ---- */
.gen-result {
	margin-bottom: 24px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.gen-result-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
	border-bottom: 1px solid var(--color-border);
}
.gen-result-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
}
.gen-result-head .gen-btn {
	padding: 6px 16px;
	font-size: 13px;
}
.gen-result-pre {
	margin: 0;
	padding: 18px 20px;
	max-height: 420px;
	overflow: auto;
	background: var(--color-bg-code);
	color: var(--color-text);
	font-size: 13px;
	line-height: 1.7;
	/* 代码保真：不换行不拆词，超宽横向滚动（移动端中文参数名不被切断） */
	white-space: pre;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}

/* ---- 双栏布局 ---- */
.gen-layout {
	display: grid;
	grid-template-columns: 216px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

/* ---- 左侧分类导航 ---- */
.gen-nav {
	position: sticky;
	top: 140px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 12px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}
.gen-nav-link {
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	font-size: 13.5px;
	color: var(--color-text-secondary);
	transition: color var(--transition), background var(--transition);
}
.gen-nav-link:hover {
	color: var(--color-primary);
	background: var(--color-primary-pale);
}
.gen-nav-link.active {
	color: var(--color-primary);
	background: var(--color-primary-pale);
	font-weight: 600;
}

/* ---- 内容区 ---- */
.gen-content {
	min-width: 0;
}
.gen-section {
	scroll-margin-top: 150px;
	padding: 8px 0 8px;
}
.gen-section + .gen-section {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px dashed var(--color-border);
}
.gen-section-title {
	margin-bottom: 8px;
	font-size: 22px;
	font-weight: 700;
	color: var(--color-text);
}
.gen-section-desc {
	margin-bottom: 18px;
	font-size: 14px;
	color: var(--color-text-secondary);
}
.gen-section-desc code {
	background: var(--color-bg-tag);
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.9em;
	color: var(--color-primary-hover);
}

/* ---- 标签卡片 ---- */
.gen-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.gen-card {
	position: relative;
	padding: 14px 16px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.gen-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-card-hover);
}
.gen-card.selected {
	border-color: var(--color-primary);
	background: var(--color-primary-pale);
}
.gen-card.selected::after {
	content: "✓";
	position: absolute;
	top: 10px;
	right: 12px;
	color: var(--color-primary);
	font-weight: 700;
	font-size: 15px;
}
.gen-card-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding-right: 28px;
}
.gen-card-name {
	background: var(--color-bg-tag);
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 13px;
	color: var(--color-primary-hover);
	word-break: break-all;
}
.gen-card-alias {
	font-size: 12px;
	color: var(--color-text-muted);
	word-break: break-all;
}
.gen-card-btn {
	margin-left: auto;
	padding: 4px 12px;
	border-radius: var(--radius-full);
	font-size: 12.5px;
	background: var(--color-primary);
	color: #fff;
	transition: background var(--transition);
}
.gen-card-btn:hover {
	background: var(--color-primary-hover);
}
.gen-card.selected .gen-card-btn {
	background: var(--color-text-muted);
}
.gen-card-desc {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.65;
	color: var(--color-text-secondary);
}
.gen-card-wide {
	grid-column: 1 / -1;
}

/* ---- 卡片内字段芯片（可点击加入） ---- */
.gen-card-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.gen-chip {
	padding: 3px 10px;
	border-radius: var(--radius-full);
	font-size: 12px;
	background: var(--color-bg-section);
	border: 1px solid var(--color-border);
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all var(--transition);
	user-select: none;
}
.gen-chip:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
	background: var(--color-primary-pale);
}
.gen-chip.selected {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

/* ---- 参考表（点号标签等，行可点击加入） ---- */
.gen-ref {
	margin-top: 18px;
	margin-bottom: 18px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.gen-ref-title {
	padding: 12px 16px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg-section);
}
.gen-ref-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.gen-ref-table th,
.gen-ref-table td {
	padding: 9px 14px;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}
.gen-ref-table th {
	background: var(--color-bg-section);
	color: var(--color-text-muted);
	font-weight: 600;
	white-space: nowrap;
}
.gen-ref-table tbody tr {
	cursor: pointer;
	transition: background var(--transition);
}
.gen-ref-table tbody tr:hover {
	background: var(--color-primary-pale);
}
.gen-ref-table tbody tr.selected {
	background: var(--color-primary-pale);
}
.gen-ref-table td:first-child {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	color: var(--color-primary-hover);
	white-space: nowrap;
}
.gen-ref-table tbody tr:last-child td {
	border-bottom: none;
}


/* ---- 完整示例预设 ---- */
.gen-presets {
	display: grid;
	gap: 14px;
}
.gen-preset {
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.gen-preset-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-border);
}
.gen-preset-name {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--color-text);
}
.gen-preset-btn {
	padding: 5px 16px;
	border-radius: var(--radius-full);
	font-size: 13px;
	background: var(--color-primary);
	color: #fff;
	transition: background var(--transition);
}
.gen-preset-btn:hover {
	background: var(--color-primary-hover);
}
.gen-preset-code {
	display: none;
	margin: 0;
	padding: 16px 18px;
	max-height: 300px;
	overflow: auto;
	background: var(--color-bg-code);
	font-size: 12.5px;
	line-height: 1.7;
	/* 代码保真：不换行不拆词，超宽横向滚动 */
	white-space: pre;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}
.gen-preset.open .gen-preset-code {
	display: block;
}

/* ---- 模式切换 Tab（速查 / 构建） ---- */
.gen-tabs {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	padding: 5px;
	background: var(--color-bg-section);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
}
.gen-tab {
	flex-shrink: 0;
	padding: 8px 20px;
	border-radius: var(--radius-full);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-secondary);
	background: transparent;
	transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}
.gen-tab:hover {
	color: var(--color-primary);
}
.gen-tab.is-active {
	background: var(--color-primary);
	color: #fff;
	box-shadow: var(--shadow-card-hover);
}
.gen-tabs-hint {
	margin-left: auto;
	padding-right: 14px;
	font-size: 12.5px;
	color: var(--color-text-muted);
}

/* ---- 搜索框（速查模式） ---- */
.gen-search {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}
.gen-search-icon {
	position: absolute;
	left: 14px;
	color: var(--color-text-muted);
	pointer-events: none;
}
.gen-search-input {
	width: 100%;
	padding: 11px 78px 11px 40px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 14px;
	color: var(--color-text);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.gen-search-input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-pale);
}
.gen-search-clear {
	position: absolute;
	right: 10px;
	padding: 5px 12px;
	border-radius: var(--radius-full);
	font-size: 12.5px;
	color: var(--color-text-secondary);
	background: var(--color-bg-section);
	border: 1px solid var(--color-border);
	transition: color var(--transition), border-color var(--transition);
}
.gen-search-clear:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.gen-search-empty {
	margin: 0 0 16px;
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	font-size: 13.5px;
	color: var(--color-text-secondary);
	background: var(--color-bg-section);
	border: 1px dashed var(--color-border);
}

/* ---- 搜索过滤隐藏态（限定 tag-tool 作用域，避免影响全局） ---- */
.tag-tool .is-hidden {
	display: none !important;
}

/* ---- 构建模式面板 ---- */
.gen-builder {
	margin-bottom: 20px;
	padding: 18px 20px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
}
.gen-builder-head {
	margin-bottom: 18px;
}
.gen-builder-field {
	display: block;
}
.gen-builder-legend {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
}
.gen-builder-select {
	width: 420px;
	max-width: 100%;
	padding: 10px 14px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 14px;
	color: var(--color-text);
	transition: border-color var(--transition);
}
.gen-builder-select:focus {
	outline: none;
	border-color: var(--color-primary);
}
.gen-builder-desc {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--color-text-secondary);
}
.gen-builder-body {
	/* 上下布局（2026-09-04 调整）：参数配置区在上，生成结果区在下整行展示 */
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
.gen-builder-params,
.gen-builder-preview {
	min-width: 0;
}
/* 生成结果区与参数区用加深虚线分隔，沉底整行（颜色与边距同步加强，避免 1.5px 卡片边的同色细线被淹没） */
.gen-builder-preview {
	padding-top: 20px;
	margin-top: 4px;
	border-top: 1.5px dashed var(--color-text-muted);
}
.gen-builder-grid {
	display: grid;
	/* 上下布局后宽度充裕，参数按三列紧凑排布（12 项参数=4 行） */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.gen-builder-item {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.gen-builder-item-head {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.gen-builder-item-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
}
.gen-builder-item-en {
	font-size: 11.5px;
	color: var(--color-text-muted);
}
.gen-builder-input {
	width: 100%;
	padding: 8px 12px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: 6px;
	font-size: 13.5px;
	color: var(--color-text);
	transition: border-color var(--transition);
}
.gen-builder-input:focus {
	outline: none;
	border-color: var(--color-primary);
}

/* ---- 自定义下拉外观（select/combo 通用，2026-09-04） ----
   与 contact 页 .form-select-wrap 同款思路：隐藏浏览器原生箭头，
   右侧放 icons.svg#icon-chevron-down 装饰箭头，hover/focus 变主题色。
   双保险：选择器直接落在 select 元素上（不依赖 wrap 组合），杜绝“原生+自定义双箭头” */
select.gen-builder-input,
select.gen-builder-select,
select.gen-body-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: none;
	cursor: pointer;
}
select.gen-builder-input {
	padding-right: 34px;
}
.gen-select-wrap {
	position: relative;
	display: block;
	width: 100%;
}
.gen-select-arrow {
	position: absolute;
	right: 11px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-muted);
	pointer-events: none;
	transition: color var(--transition);
}
.gen-select-wrap:hover .gen-select-arrow,
.gen-select-wrap:focus-within .gen-select-arrow {
	color: var(--color-primary);
}

/* 顶部“标签类型”下拉：铺满 genBuilder 面板宽度（2026-09-04 调整），箭头贴右缘 */
.gen-builder-field .gen-select-wrap {
	display: block;
	width: 100%;
	max-width: none;
}
.gen-builder-field .gen-builder-select {
	width: 100%;
	max-width: none;
	padding-right: 40px;
}
.gen-builder-field .gen-select-arrow {
	right: 14px;
}

/* combo 的自定义输入行：选择「✎ 自定义…」后展开 */
.gen-combo-custom {
	margin-top: 6px;
}

/* 循环体模板选择（多套循环体：基础/嵌套等）
   [hidden] 显式补 display:none——display:flex 会覆盖 hidden 属性导致空容器可见（2026-09-04 修复） */
.gen-bodypick {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.gen-bodypick[hidden] {
	display: none;
}
.gen-bodypick-label {
	font-size: 12.5px;
	color: var(--color-text-secondary);
	white-space: nowrap;
}
/* 循环体模板下拉：容器收缩到与 select 同宽，箭头贴右缘（与参数下拉同款） */
.gen-bodypick .gen-select-wrap {
	display: inline-block;
	width: auto;
}
.gen-body-select {
	padding: 6px 32px 6px 12px;
	background: var(--color-bg-card);
	border: 1.5px solid var(--color-border);
	border-radius: 6px;
	font-size: 13px;
	color: var(--color-text);
	transition: border-color var(--transition);
}
.gen-body-select:focus {
	outline: none;
	border-color: var(--color-primary);
}
.gen-bodypick .gen-select-arrow {
	right: 10px;
}
.gen-builder-item-tip {
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--color-text-muted);
}
.gen-builder-none {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--color-text-muted);
}

/* ==================== SQL 可视化构建器（2026年10月08日 新增） ====================
   位置：标签生成器「构建模式」→ 标签类型选 sql 时显示
   功能：选表 → 勾字段 → 设条件/排序/条数，实时生成 SQL 写入下方 sql 参数框
   设计：复用 gen-* 既有视觉语言（主色/圆角/间距变量），无新增设计令牌 */
.gen-sqlbuild {
	margin-bottom: 16px;
	padding: 14px 16px;
	background: var(--color-bg-section);
	border: 1px solid var(--color-border);
	border-radius: 8px;
}
.gen-sqlbuild-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
}
.gen-sqlbuild-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text);
}
.gen-sqlbuild-hint {
	font-size: 12.5px;
	color: var(--color-text-muted);
}
/* 顶部一行：数据表 / 排序字段 / 排序方向 / 显示条数（自适应换行） */
.gen-sqlbuild-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}
.gen-sqlbuild-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.gen-sqlbuild-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-text-secondary);
}
.gen-sqlbuild-note {
	margin-left: 6px;
	font-weight: 400;
	color: var(--color-text-muted);
}
.gen-sqlbuild-block {
	margin-bottom: 14px;
}
/* 字段勾选区：自适应多列 */
.gen-sqlbuild-cols {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 8px;
	margin-top: 8px;
	max-height: 260px;
	overflow-y: auto;
	padding: 2px;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}
.gen-sqlcol {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	padding: 7px 10px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	cursor: pointer;
	transition: all var(--transition);
	min-width: 0;
}
.gen-sqlcol:hover {
	border-color: var(--color-primary);
	background: var(--color-primary-pale);
}
.gen-sqlcol.is-checked {
	border-color: var(--color-primary);
	background: var(--color-primary-light);
}
.gen-sqlcol input {
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: var(--color-primary);
	cursor: pointer;
}
.gen-sqlcol-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.gen-sqlcol-name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gen-sqlcol-meta {
	font-size: 11.5px;
	color: var(--color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gen-sqlbuild-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.gen-btn-mini {
	padding: 4px 12px;
	font-size: 12.5px;
}
/* 条件行：字段 / 运算符 / 值 / 删除 */
.gen-sqlbuild-conds {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}
.gen-sqlcond {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.2fr) auto;
	gap: 8px;
	align-items: center;
}
.gen-sqlcond-remove {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	color: var(--color-text-muted);
	cursor: pointer;
	transition: all var(--transition);
}
.gen-sqlcond-remove:hover {
	border-color: #e57373;
	color: #e57373;
	background: rgba(229, 115, 115, 0.08);
}
.gen-sqlbuild-tip {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--color-text-muted);
}
.gen-sqlbuild-tip.is-warn {
	color: #c77700;
}
/* 单列表单行（数据表等只需一列的场景，避免被 auto-fit 拉宽） */
.gen-sqlbuild-row-single {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* 标签内的复选（如 DISTINCT）：与标签文字同行，不占满整行 */
.gen-sqlbuild-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 10px;
	font-weight: 400;
	font-size: 12.5px;
	color: var(--color-text-secondary);
	cursor: pointer;
}
.gen-sqlbuild-check input {
	margin: 0;
	accent-color: var(--color-primary);
	cursor: pointer;
}
/* 关联表行（JOIN）：关联类型 / 关联表 / ON 左字段 / = / ON 右字段 / 删除 */
.gen-sqlbuild-joins,
.gen-sqlbuild-aggs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
	margin-bottom: 8px;
}
.gen-sqljoin {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 1.1fr) auto minmax(0, 1.1fr) auto;
	gap: 8px;
	align-items: center;
}
/* ON 等号：静态分隔符，不参与交互 */
.gen-sqljoin-eq {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	font-size: 13px;
	color: var(--color-text-muted);
}
/* 聚合行：函数 / 字段 / 别名 / 删除 */
.gen-sqlagg {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
}
/* 分组字段勾选区：比输出字段区更紧凑，且限高更小 */
.gen-sqlbuild-cols-compact {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	max-height: 170px;
}
/* 分组字段项：单行展示（名称 + 注释），比输出字段项更矮 */
.gen-sqlcol-compact {
	align-items: center;
	padding: 6px 10px;
}
.gen-sqlcol-compact .gen-sqlcol-body {
	flex-direction: row;
	align-items: baseline;
	gap: 6px;
}
/* 输出字段项内的「别名」输入：整行、小号 */
.gen-sqlcol-alias {
	margin-top: 6px;
	width: 100%;
	padding: 4px 8px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-size: 12px;
	color: var(--color-text);
}
.gen-sqlcol-alias:focus {
	outline: none;
	border-color: var(--color-primary);
}
/* 关联表字段项：左侧色条区分主表字段与关联表字段，便于辨识来源 */
.gen-sqlcol-joined {
	border-left: 3px solid var(--color-primary);
	background: var(--color-primary-pale);
}
.gen-sqlcol-joined .gen-sqlcol-name {
	color: var(--color-primary-dark);
}
/* 窄屏：条件行/关联行/聚合行改为单列堆叠，避免控件挤压 */
@media (max-width: 720px) {
	.gen-sqlcond {
		grid-template-columns: 1fr;
	}
	.gen-sqlcond-remove {
		justify-self: end;
	}
	.gen-sqljoin,
	.gen-sqlagg {
		grid-template-columns: 1fr;
	}
	.gen-sqljoin-eq {
		justify-content: flex-start;
	}
	.gen-sqljoin-remove,
	.gen-sqlagg-remove {
		justify-self: end;
	}
}
.gen-builder-code {
	margin: 0 0 12px;
	padding: 14px 16px;
	min-height: 96px;
	max-height: 320px;
	overflow: auto;
	background: var(--color-bg-code);
	border-radius: 6px;
	font-size: 12.5px;
	line-height: 1.75;
	/* 代码保真：保留原始换行与空格，超宽横向滚动 */
	white-space: pre;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}
/* 生成结果标题行：标题 + 包含示例循环体 + 循环体模板 同行（2026-09-04 调整） */
.gen-builder-preview-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 8px;
}
.gen-builder-preview-head .gen-builder-legend {
	margin-bottom: 0;
}
/* 生成结果区操作：复制按钮独立整行铺满居中 */
.gen-copy-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px 18px;
	font-size: 14px;
	border-radius: var(--radius-sm);
}
.gen-builder-check {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--color-text-secondary);
	cursor: pointer;
	user-select: none;
}

/* ---- 响应式 ---- */
@media (max-width: 1024px) {
	.gen-layout {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	/* 目录改为横向滚动条 */
	.gen-nav {
		position: static;
		flex-direction: row;
		overflow-x: auto;
		padding: 10px 12px;
		gap: 4px;
		white-space: nowrap;
	}
	.gen-nav-link {
		flex-shrink: 0;
	}
	.gen-bar {
		top: 60px;
	}
	/* 构建模式：中等屏宽下参数网格降为两列（主体已是上下布局） */
	.gen-builder-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.tag-tool {
		padding: 24px 0 56px;
	}
	.gen-stats {
		grid-template-columns: repeat(2, 1fr);
	}
	.gen-grid {
		grid-template-columns: 1fr;
	}
	.gen-section {
		scroll-margin-top: 130px;
	}
	.gen-bar {
		padding: 10px 14px;
	}
	.gen-ref-table th:nth-child(2),
	.gen-ref-table td:nth-child(2) {
		display: none;
	}
	/* 模式切换：隐藏提示文案，两个 Tab 等分铺满 */
	.gen-tabs {
		border-radius: var(--radius-sm);
	}
	.gen-tabs-hint {
		display: none;
	}
	.gen-tab {
		flex: 1;
		padding: 8px 12px;
		text-align: center;
	}
	.gen-search-input {
		padding: 10px 72px 10px 38px;
		font-size: 13.5px;
	}
	.gen-builder {
		padding: 14px;
	}
	.gen-builder-select {
		max-width: 100%;
	}
	.gen-builder-grid {
		grid-template-columns: 1fr;
	}
}

/* ==================== 详情页正文渲染区（产品/案例详情，2026年10月11日15时20分00秒） ====================
   功能说明：为 {xiis:内容.正文} 直接渲染的正文 HTML 提供统一排版，替代原先写死的演示内容区块；
   性能优化点：样式按类名集中定义，无行内样式（符合 CSP 与结构样式脚本分离要求） */
.section-flush-top {
	padding-top: 0;
}

.prod-detail-body,
.case-detail-page-body {
	margin-top: 22px;
	font-size: 15px;
	line-height: 1.85;
	color: var(--color-text-secondary);
}

.prod-detail-body h2,
.case-detail-page-body h2 {
	margin: 30px 0 12px;
	font-size: 19px;
	line-height: 1.45;
	color: var(--color-text-primary);
}

.prod-detail-body h3,
.case-detail-page-body h3 {
	margin: 22px 0 10px;
	font-size: 16px;
	color: var(--color-text-primary);
}

.prod-detail-body p,
.case-detail-page-body p {
	margin: 0 0 14px;
}

.prod-detail-body ul,
.prod-detail-body ol,
.case-detail-page-body ul,
.case-detail-page-body ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.prod-detail-body li,
.case-detail-page-body li {
	margin-bottom: 8px;
}

.prod-detail-body table,
.case-detail-page-body table {
	width: 100%;
	margin: 0 0 18px;
	border-collapse: collapse;
	font-size: 14px;
}

.prod-detail-body th,
.prod-detail-body td,
.case-detail-page-body th,
.case-detail-page-body td {
	padding: 10px 12px;
	border: 1px solid var(--color-border);
	text-align: left;
}

.prod-detail-body th,
.case-detail-page-body th {
	background: var(--color-bg-secondary, #f7f8fa);
	font-weight: 600;
	color: var(--color-text-primary);
}

.prod-detail-body strong,
.case-detail-page-body strong {
	color: var(--color-text-primary);
}

@media (max-width: 768px) {

	.prod-detail-body,
	.case-detail-page-body {
		font-size: 14px;
		line-height: 1.8;
	}

	.prod-detail-body h2,
	.case-detail-page-body h2 {
		font-size: 17px;
	}
}

/* ==================== 案例详情：信息条与案例化正文排版（2026年10月11日15时45分00秒） ====================
   功能说明：案例页在共享正文排版之上叠加案例化样式（编号小标题+左侧色条、卡片化列表、数据卡表格、要点高亮），
   与文章正文的纯文本流形成视觉区分；所有内容均来自内容数据，模板无写死内容；
   性能优化点：仅用类选择器 + CSS 计数器实现，无额外 DOM、无脚本，含移动端适配 */
/* 案例头部元信息条（eyebrow）：位于标题上方，展示分类/时间/行业 */
.case-detail-meta-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--color-text-secondary);
}

.case-detail-meta-bar a {
	color: inherit;
}

.case-detail-meta-bar a:hover {
	color: var(--color-primary);
}

.case-detail-meta-tags {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.case-detail-meta-tag {
	padding: 2px 10px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: 12px;
	color: var(--color-text-secondary);
}

.case-detail-meta-tag:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.case-detail-page-body {
	counter-reset: 案例分节;
}

.case-detail-page-body h2 {
	position: relative;
	padding-left: 16px;
	border-left: 4px solid var(--color-primary);
	counter-increment: 案例分节;
}

.case-detail-page-body h2::before {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	letter-spacing: 1px;
	color: var(--color-primary);
	content: counter(案例分节, decimal-leading-zero);
}

.case-detail-page-body ul,
.case-detail-page-body ol {
	padding: 16px 20px 16px 38px;
	background: var(--color-bg-secondary, #f7f8fa);
	border-radius: var(--radius-sm, 8px);
}

.case-detail-page-body li {
	margin-bottom: 6px;
}

.case-detail-page-body table {
	border: 0;
}

.case-detail-page-body th {
	border: 0;
	background: var(--color-primary-pale, #e8f5ee);
	color: var(--color-text-primary);
}

.case-detail-page-body td {
	border: 0;
	border-bottom: 1px solid var(--color-border);
}

.case-detail-page-body tr:nth-child(even) td {
	background: var(--color-bg-secondary, #f7f8fa);
}

.case-detail-page-body strong {
	padding: 0 4px;
	background: var(--color-primary-pale, #e8f5ee);
	border-radius: 3px;
	color: var(--color-text-primary);
}

@media (max-width: 768px) {

	.case-detail-page-body ul,
	.case-detail-page-body ol {
		padding: 12px 14px 12px 30px;
	}
}

/* =========================================
   国际化语言切换控件（2026年10月26日13时40分00秒 新增）
   设计说明:
     1. 桌面端在 .nav-right 内使用单按钮，与 .nav-icon-btn 同高同圆角，
        按钮文字显示「当前语言」（中文态「中」/ 英文态「EN」），点击切到另一语言；
     2. 英文态加 .is-en，用主题色浅底 + 主题色边框 + 主题色文字形成明确视觉区分，
        不使用纯透明度或仅改文字颜色，保证在浅色与深色主题下都能一眼分辨当前状态；
     3. 移动端抽屉内使用「中文 / English」双段控件，当前语言段为实底高亮，
        状态比单按钮更直观，且不占用导航右侧空间；
     4. 尺寸完全对齐 .nav-icon-btn（36px 高、--radius-sm 圆角），不改变导航栏高度。
   性能说明: 纯 CSS，无动画时序依赖，零 JS 参与布局
========================================= */
/* 时间戳: 2026年10月26日19时35分00秒 语言按钮改为纯文字方块
 * 设计变更: 去掉矢量地球图标，直接以「中」/「EN」文字自身作为按钮图形，
 *           与搜索、主题按钮保持完全一致的 36×36 方块尺寸，
 *           三个按钮视觉节奏统一，也不再因「图标 + 文字 + 内边距」占用 55px 而显得拥挤。
 * 尺寸依据: 13px/700 下「EN」实测约 17px 宽、「中」约 13px 宽，36px 方块内居中留白充足。
 * 布局收益: 按钮宽度由 55px 收窄到 36px，nav-right 少占 19px，英文态导航右侧余量相应变大。 */
.lang-toggle-btn {
	position: relative;
	width: 36px;
	min-width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid transparent;
	color: var(--color-text-secondary);
}

.lang-toggle-btn:hover {
	background: var(--color-bg-section);
	border-color: var(--color-border);
	color: var(--color-text);
}

/* 时间戳: 2026年10月26日20时05分00秒 取消英文态按钮高亮
 * 变更原因: 原设计在英文态给按钮加「主题色浅底 + 主题色边框 + 主题色文字」，
 *           实际效果是切到英文后按钮一直亮着，与搜索、主题两个图标按钮风格不一致，
 *           看起来像「高亮没还原」。
 * 变更结论: 去掉全部高亮属性（含 hover 与深色主题覆盖），
 *           当前语言完全由按钮内的图标表达（中 / EN），
 *           按钮在两种语言下都与 .nav-icon-btn 完全一致，仅保留通用 hover 反馈。
 * 保留项: .is-en 类仍然存在，但只用于切换图标（见下方 .lang-icon 规则）。
 */
.lang-toggle-btn.is-en {
	/* 无高亮：背景、边框、文字色均与普通图标按钮一致，靠图标区分语言 */
}

/* 时间戳: 2026年10月26日19时42分00秒 语言图标切换
 * 设计说明: 「中」与「EN」都是 SVG 线条绘制的图标（icons.svg 的 icon-lang-zh / icon-lang-en），
 *           不依赖系统字体，因此中文/英文环境下字形、字重完全一致。
 *           两枚图标同尺寸渲染，默认显示中文图标，按钮带 .is-en 时切换为英文图标，
 *           纯 CSS 完成，不参与 JS 更新，切换语言时零额外开销。 */
.lang-icon {
	display: block;
	width: 18px;
	height: 18px;
}

.lang-toggle-btn .lang-icon-en {
	display: none;
}

.lang-toggle-btn.is-en .lang-icon-zh {
	display: none;
}

.lang-toggle-btn.is-en .lang-icon-en {
	display: block;
}

/* 移动端抽屉内的语言切换块 */
.nav-mobile-lang {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	margin: 8px 0;
	border-radius: var(--radius-sm);
	background: var(--color-bg-section);
}

.nav-mobile-lang-label {
	font-size: 14px;
	color: var(--color-text-secondary);
	flex-shrink: 0;
}

.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border-radius: var(--radius-full);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
}

.lang-switch-btn {
	min-width: 62px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--color-text-secondary);
	transition: background var(--transition), color var(--transition);
}

.lang-switch-btn:hover {
	color: var(--color-text);
}

/* 当前语言段：实底高亮。文字色取 --color-bg-body，
   浅色主题下为白字压在主题绿上，深色主题下为深字压在亮绿上，两套主题均保持足够对比度 */
.lang-switch-btn.is-active {
	background: var(--color-primary);
	color: var(--color-bg-body);
	box-shadow: 0 1px 4px rgba(76, 175, 125, 0.35);
}

.lang-switch-btn.is-active:hover {
	color: var(--color-bg-body);
}