/* ==========================================================================
   design-system.css · 视觉设计框架落地层（1.9.18）
   --------------------------------------------------------------------------
   依据：_build/design/视觉设计框架.md
   加载顺序：style.css(10) → home-refinement.css(10) → v2-polish.css(30) → 本文件(40)

   设计原则（三条铁律）：
     1. 一屏一主角：主色与强调色不在同一区块大面积同时出现
     2. 金色配额：整页金色面积 ≤ 5%，只给名次/奖牌/达成
     3. 红只在"变化"上：退步、未达成、必填、错误；静态装饰禁用红

   重要：本层只「加令牌 + 加工具类 + 补可访问性」，不改写既有组件尺寸，
   避免推翻已完成的移动端降密工作。
   ========================================================================== */

/* ==========================================================================
   1) 令牌统一
   --------------------------------------------------------------------------
   与 v2-polish.css 现值保持一致（不制造视觉突变），
   额外补齐：荣誉金、阴影、动效、焦点环、字号阶梯。

   注意 --qca-orange：全站 79 处引用（style.css 68 + v2-polish 11），
   当前渲染为青绿。这里显式锁定为 accent，语义债用注释标注，不做大迁移。
   ========================================================================== */
:root {
	/* 中性：纸 · 墨 · 线 */
	--qca-bg: #F6F9FB;
	--qca-paper: #FFFFFF;
	--qca-panel-2: #EDF3F5;
	--qca-ink: #14374E;
	--qca-muted: #4F6B7D;
	--qca-faint: #8FA6B2;
	--qca-line: #D3E1E5;
	--qca-line-strong: #B7CBD2;

	/* 主色：靛青（精准、冷静） */
	--qca-accent: #1F7A8C;
	--qca-accent-deep: #155C6B;
	--qca-accent-soft: #E7F1F3;
	--qca-on-accent: #FFFFFF;

	/* 强调：靶红（只用于"变化"） */
	--qca-alert: #C8412B;
	--qca-alert-deep: #A5331F;
	--qca-alert-soft: #FBEDEA;

	/* 荣誉金：只给名次/奖牌/达成（正文禁用 --qca-gold，对比度不足） */
	--qca-gold: #D6A84F;
	--qca-gold-deep: #8A6424;
	--qca-gold-soft: #FBF3DF;

	/* 形状 */
	--qca-radius-sm: 4px;
	--qca-radius: 8px;
	--qca-radius-lg: 12px;
	--qca-radius-pill: 999px;
	--qca-shadow-soft: 0 2px 8px rgba(20, 55, 78, .06);
	--qca-shadow-card: 0 10px 30px rgba(20, 55, 78, .10);

	/* 动效 */
	--qca-ease: cubic-bezier(.2, .6, .2, 1);
	--qca-dur-fast: 140ms;
	--qca-dur: 200ms;
	--qca-dur-slow: 320ms;

	/* 字号阶梯（手机档；桌面档见 5.1） */
	--fs-xs: 11px;
	--fs-sm: 12px;
	--fs-base: 14px;
	--fs-md: 15.5px;
	--fs-lg: 18px;
	--fs-xl: 22px;
	--fs-2xl: 28px;
	--fs-3xl: 34px;

	/* 历史遗留名：语义=主色，勿改成暖橙（会一次性改掉全站 68 处观感） */
	--qca-teal: var(--qca-accent);
	--qca-blue: var(--qca-accent-deep);
	--qca-cream: var(--qca-ink);
	--qca-red: var(--qca-alert);
	--qca-red-dark: var(--qca-alert-deep);
	--qca-orange: var(--qca-accent);
}

/* ==========================================================================
   2) 可访问性底线
   --------------------------------------------------------------------------
   焦点可见、触控 ≥44px、尊重减少动效。
   触控尺寸只加在"小控件"上，不给榜单行/卡片加高度 ——
   移动端降密是已验证的成果，不能被这一层推翻。
   ========================================================================== */

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--qca-accent);
	outline-offset: 2px;
	border-radius: var(--qca-radius-sm);
}

/* 小控件触控下限（不含列表行、不含卡片） */
:where(.qca-history-pagination a,
	.qca-training-pagination a,
	.qca-tag,
	.site-footer a) {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* 跳过动画的用户：全站关闭位移与过渡 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	*:hover,
	*:focus-visible {
		transform: none !important;
	}
}

/* ==========================================================================
   3) 装饰语言（4 个工具类）
   --------------------------------------------------------------------------
   纯附加类：不写进任何现有模板就零影响；需要时手动加。
   铁律：每屏最多 1 种；数据区（表格/图表/榜单行）禁用；均 pointer-events:none。
   ========================================================================== */

/* 3.1 靶心环：大区块右上角，暗示"靶"而不喧哗 */
.qca-deco-rings {
	position: absolute;
	top: -70px;
	right: -70px;
	width: 320px;
	height: 320px;
	pointer-events: none;
	opacity: .6;
}

.qca-deco-rings::before,
.qca-deco-rings::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid rgba(31, 122, 140, .16);
	border-radius: 50%;
}

.qca-deco-rings::after {
	inset: 32%;
	border-color: rgba(31, 122, 140, .22);
}

/* 3.2 弹着点阵：仅深色/强调区块背景 */
.qca-deco-grid {
	background-image: radial-gradient(rgba(31, 122, 140, .18) 1px, transparent 1px);
	background-size: 14px 14px;
}

/* 3.3 淬火高光线：替代实线分隔，让长页面透气 */
.qca-deco-line {
	height: 1px;
	margin: 0;
	border: 0;
	background: linear-gradient(90deg, transparent, rgba(31, 122, 140, .38), transparent);
}

/* 3.4 刻度轨：区块标题左侧的量尺 */
.qca-deco-rail {
	display: inline-block;
	width: 3px;
	height: 14px;
	margin-right: 10px;
	vertical-align: -1px;
	background: repeating-linear-gradient(
		to bottom,
		var(--qca-accent) 0 2px,
		transparent 2px 4px
	);
}

/* 手机不叠加任何装饰（屏幕太小，装饰只会变噪音） */
@media (max-width: 767px) {
	.qca-deco-rings {
		display: none;
	}
}

/* ==========================================================================
   4) 组件微调（保守：只补缺口，不改尺寸）
   ========================================================================== */

/* 4.1 卡片阴影统一：只给"面上"的容器 */
:where(.qca-compare,
	.qca-board-rules-wrap,
	.qca-champion,
	.qca-goal,
	.qca-verdict) {
	box-shadow: var(--qca-shadow-soft);
}

/* 4.2 折叠指示器：统一过渡，避免各页面节奏不一 */
:where(summary) {
	cursor: pointer;
	transition: color var(--qca-dur-fast) var(--qca-ease);
}

:where(summary:hover) {
	color: var(--qca-accent-deep);
}

/* 4.3 数字一律等宽：成绩、名次、比例、日期 */
:where(.qca-training-row__score,
	.qca-champion__score,
	.qca-compare__gap,
	.qca-metrics strong,
	.qca-verdict__delta,
	.qca-history-stats dd,
	.qca-history-table td) {
	font-variant-numeric: tabular-nums;
}

/* 4.4 荣誉金新令牌的就位示例（不影响现有样式，供后续页面调用） */
.qca-honor-mark {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border: 1px solid rgba(214, 168, 79, .5);
	border-radius: var(--qca-radius-sm);
	background: var(--qca-gold-soft);
	color: var(--qca-gold-deep);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: .01em;
}

/* ==========================================================================
   5) 断点与字号档
   ========================================================================== */

/* 5.1 桌面字号档 */
@media (min-width: 768px) {
	:root {
		--fs-xs: 11.5px;
		--fs-sm: 13px;
		--fs-base: 15px;
		--fs-md: 17px;
		--fs-lg: 20px;
		--fs-xl: 26px;
		--fs-2xl: 34px;
		--fs-3xl: 44px;
	}
}

/* 5.2 小屏兜底（≤360px）：再降一档，避免挤压 */
@media (max-width: 360px) {
	:root {
		--fs-base: 13px;
		--fs-md: 14.5px;
	}

	.qca-champion {
		padding: 12px 13px;
	}

	.qca-champion__id strong {
		font-size: 20px;
	}

	.qca-training-row__name {
		font-size: 14.5px;
	}
}

/* ==========================================================================
   6) 页面级微投入（保守版）
   --------------------------------------------------------------------------
   框架文档里 P4「逐页加装饰」需要你点头再动，这里只做两处零风险的：
   给数据区的区块标题加一道刻度轨，强化"量出来的成绩"这个意象。
   ========================================================================== */
.qca-compare__head h3::before,
.qca-history-table-heading h3::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: .8em;
	margin-right: 10px;
	vertical-align: -1px;
	background: repeating-linear-gradient(
		to bottom,
		var(--qca-accent) 0 2px,
		transparent 2px 4px
	);
}
/* ==========================================================================
   7) 触控尺寸补足（1.9.19）
   --------------------------------------------------------------------------
   依据 Codex 审计报告表 3：以下控件实测低于 44×44px 下限。
   只提高度，不改宽度/字号/颜色，避免影响既有排版节奏。
   ========================================================================== */

/* 7.1 页头 CTA：42 → 44 */
.site-header__cta {
	min-height: 44px;
}

/* 7.2 首页/内页「查看更多」类文字链：36 → 44 */
.site-main--home .editorial-row__action a,
.site-main .section-heading__link {
	min-height: 44px;
}

/* 7.3 灯箱关闭键：手机 40 → 44（桌面本来就是 44） */
@media (max-width: 767px) {
	.qca-lb__close {
		width: 44px;
		height: 44px;
	}
}

/* 7.4 折叠头：原先只靠 padding，高度不保证 */
details > summary.qca-fold__summary {
	min-height: 44px;
}

/* 7.5 图表模式切换（看整体趋势 / 看每次成绩） */
.qca-progress-modes label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* 7.6 训练成绩筛选下拉：规范要求 44px */
.qca-history-filter > div select {
	min-height: 44px;
}

/* ==========================================================================
   8) 全站视觉升级（1.9.20）
   --------------------------------------------------------------------------
   基于线上真实页面渲染（Playwright + Edge，390/1280 精确视口）后的问题清单：
     · 三张入口卡是青 / 红 / 蓝三个色相 —— 没有体系，读起来是"糖果色"
     · 眉标英文红 + 中文青混排，同一行两种强调色
     · Hero 的竖向强调条是静态红 —— 红色只该用于"变化/风险"
     · 区块之间只有留白，没有分隔节奏；标题没有视觉锚点
     · 页脚一条白带，收尾无力
   做法：单色三阶 → 统一眉标 → 红换主色 → 加刻度轨与分隔线 → 页脚点阵。
   ========================================================================== */

/* 8.1 入口卡：三色相收敛为「同一主色的三个深度」 */
.site-main--home .qca-parent-start__steps a {
	border: 1px solid rgba(31, 122, 140, .12);
	border-top: 3px solid var(--qca-accent);
	border-left-color: var(--qca-accent);
	border-radius: 0 0 var(--qca-radius-lg) var(--qca-radius-lg);
	background: #F3F9FA;
	transition:
		transform var(--qca-dur) var(--qca-ease),
		box-shadow var(--qca-dur) var(--qca-ease),
		background-color var(--qca-dur) var(--qca-ease);
}

.site-main--home .qca-parent-start__steps a:nth-child(2) {
	border-top-color: #2C8798;
	border-left-color: #2C8798;
	background: #EFF6F8;
}

.site-main--home .qca-parent-start__steps a:nth-child(3) {
	border-top-color: #4E9AA8;
	border-left-color: #4E9AA8;
	background: #F6FAFB;
}

.site-main--home .qca-parent-start__steps a:hover {
	transform: translateY(-3px);
	background: #FFFFFF;
	box-shadow: 0 10px 24px rgba(20, 55, 78, .10);
}

/* 序号徽记跟随主色，而不是各自的中性灰 */
.site-main--home .qca-parent-start__steps span {
	color: var(--qca-accent);
	border-color: rgba(31, 122, 140, .45);
}

/* 8.2 眉标统一为主色（原先英文红、中文青混排） */
.eyebrow,
.eyebrow span,
.site-main--home .eyebrow,
.site-main--home .eyebrow span,
.section-heading--chapter .eyebrow span,
.page-header--archive .eyebrow span,
.profile-hero .eyebrow span,
.contact-page__header .eyebrow span {
	color: var(--qca-accent);
}

/* 8.3 Hero：竖向强调条由静态红改为主色；顶部加一层极淡渐变，让首屏有光 */
.hero__statement,
.hero--archive .hero__statement {
	border-left-color: var(--qca-accent);
}

.hero.hero--archive {
	background-image: linear-gradient(158deg, rgba(31, 122, 140, .07), rgba(31, 122, 140, 0) 46%);
}

/* 8.4 区块节奏：分隔线 + 标题刻度轨 */
.section + .section,
.qca-parent-start + .section {
	border-top: 1px solid rgba(31, 122, 140, .10);
}

/* 标题不用竖刻度（小字号下读起来是脏点），改用"眉标前的一道短横"：
   编辑体例里最稳的段落引导符，任何字号都干净。 */
.qca-parent-start__intro .eyebrow::before,
.section-heading .eyebrow::before,
.qca-shooting-guide__header .eyebrow::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 2px;
	margin-right: 9px;
	vertical-align: .28em;
	background: var(--qca-accent);
}

/* 8.4b 四宫格标签：红 → 主色（红只用于变化与风险） */
.site-main--home .qca-parent-start__facts span {
	color: var(--qca-accent);
	font-weight: 800;
	letter-spacing: .02em;
}

/* 8.5 页脚：弹着点阵收尾，不再是空白带 */
.site-footer {
	background-image: radial-gradient(rgba(31, 122, 140, .10) 1px, transparent 1px);
	background-size: 14px 14px;
}

/* 8.6 按钮：hover 上浮 1px + 箭头轻微位移（位移上限 2px，符合动效规范） */
.button {
	transition:
		transform var(--qca-dur-fast) var(--qca-ease),
		background-color var(--qca-dur) var(--qca-ease),
		border-color var(--qca-dur) var(--qca-ease),
		box-shadow var(--qca-dur) var(--qca-ease),
		color var(--qca-dur) var(--qca-ease);
}

.button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(20, 55, 78, .12);
}

.button--arrow span[aria-hidden="true"] {
	display: inline-block;
	transition: transform var(--qca-dur-fast) var(--qca-ease);
}

.button--arrow:hover span[aria-hidden="true"] {
	transform: translate(2px, -2px);
}

/* 8.7 训练成绩页 Hero：给一个克制的青灰渐变，和首页呼应 */
.qca-training-hero {
	background-image: linear-gradient(135deg, #F8FCFC 0%, #EDF5F7 62%, #E7F1F3 100%);
}

/* 8.8 手机：装饰全部降级（小屏上纹理只会变噪音） */
@media (max-width: 767px) {
	/* 手机保留极淡 wash：不是纹理，不会变噪音，但首屏不再是纯色块 */
	.hero.hero--archive {
		background-image: linear-gradient(172deg, rgba(31, 122, 140, .06), rgba(31, 122, 140, 0) 42%);
	}

	.site-footer {
		background-image: none;
	}


}

/* 8.9 尊重减少动效 */
@media (prefers-reduced-motion: reduce) {
	.button:hover,
	.site-main--home .qca-parent-start__steps a:hover {
		transform: none;
	}
}

/* ==========================================================================
   9) 内页视觉升级（1.9.20）
   --------------------------------------------------------------------------
   依据线上真实渲染：内页普遍是"白底 + 细分隔"的结构，缺色彩锚点与材质。
   这里只做三类改动，均已用真实 class 验证存在：
     · 荣誉数字 → 荣誉金（金只给荣誉，符合用色配额）
     · 联系页信息 → 卡片化（左主色条 + 圆角 + 软阴影）
     · 作品集 → 悬停上浮 + 圆角统一
   ========================================================================== */

/* 9.1 执教战绩：数字转荣誉金，单位「次」略浅 */
.profile-honors__item {
	font-variant-numeric: tabular-nums;
}

.profile-honors__item strong {
	color: var(--qca-gold-deep);
}

.profile-honors__item strong em {
	color: #A5863E;
	font-style: normal;
	font-weight: 700;
}

/* 战绩区加一条极淡的金色顶线，和"荣誉"语义呼应 */
.profile-honors {
	border-top: 1px solid rgba(214, 168, 79, .45);
}

/* 9.2 联系页训练信息：从裸文本变卡片 */
.contact-facts > div {
	padding: 14px 16px;
	background: var(--qca-paper);
	border: 1px solid var(--qca-line);
	border-left: 3px solid var(--qca-accent);
	border-radius: var(--qca-radius-lg);
	box-shadow: var(--qca-shadow-soft);
}

.contact-facts > div > span {
	color: var(--qca-accent);
	font-weight: 800;
	letter-spacing: .02em;
}

/* 9.3 作品集：圆角统一 + 悬停上浮（位移 2px，符合动效规范） */
.qca-gallery-item {
	transition:
		transform var(--qca-dur) var(--qca-ease),
		box-shadow var(--qca-dur) var(--qca-ease);
}

.qca-gallery-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--qca-shadow-card);
}

.qca-gallery-item img,
.qca-gallery-item__link img {
	border-radius: var(--qca-radius-lg);
}

/* 9.4 安全页：规则列表前的主色刻度，读到"条款编号"的感觉 */
.safety-page__rules li::marker {
	color: var(--qca-accent);
	font-weight: 800;
}

.safety-page__rail span:first-child {
	color: var(--qca-accent);
}

/* 9.5 减少动效时取消上浮 */
@media (prefers-reduced-motion: reduce) {
	.qca-gallery-item:hover {
		transform: none;
	}
}

/* 9.6 首屏"从这里了解训练"的箭头：静态提示用主色，红色只留给品牌与主按钮 */
.qca-home-start-link span {
	color: var(--qca-accent);
	transition: transform var(--qca-dur-fast) var(--qca-ease);
}

.qca-home-start-link:hover span {
	transform: translateY(2px);
}
/* ==========================================================================
   10) 按页面逐个过：作品集 / 教学思考 / 视频记录 / 训练成绩 Hero
   --------------------------------------------------------------------------
   依据线上真实渲染（390 + 1280）逐块拍摄后发现：
     · 三个区块的「查看全部 / 阅读全文 / 观看视频 / 编号 01 02 03」全是红色
       —— 红色是警示色，静态导航链接用它，全站就失去"主次"
     · 作品卡：图片圆角、卡片直角，材质不统一
     · 视频卡：直角 + 灰色播放键，像个占位框
     · 训练成绩 Hero：装饰是一个大圆 + QCA 01，缺一条收边的工艺线
   ========================================================================== */

/* 10.1 静态链接与编号：红 → 主色（红只留主 CTA 与品牌名） */
.section-heading__link,
.editorial-row__action a,
.editorial-row__label a,
.qca-gallery-item__link,
.video-tile__index {
	color: var(--qca-accent);
}

.section-heading__link:hover,
.editorial-row__action a:hover,
.qca-gallery-item__link:hover {
	color: var(--qca-accent-deep);
}

/* 编号做等宽，读起来像"条目号"而不是装饰 */
.editorial-row__date,
.video-tile__index {
	font-variant-numeric: tabular-nums;
}

/* 10.2 作品集：卡片材质统一（圆角 + 细边 + 软阴影），图由卡片裁切 */
.qca-gallery-item {
	overflow: hidden;
	background: var(--qca-paper);
	border: 1px solid var(--qca-line);
	border-radius: var(--qca-radius-lg);
}

.qca-gallery-item img,
.qca-gallery-item__link img {
	border-radius: 0;
}

.qca-gallery-item__caption {
	padding: 14px 16px 18px;
}

/* 分类前加一个主色小点，替掉纯大写标签的单调 */
.qca-gallery-item__category::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	vertical-align: 2px;
	border-radius: 50%;
	background: var(--qca-accent);
}

/* 10.3 教学思考：悬停时左侧浮出主色条（不占位，不影响排版） */
.editorial-row {
	position: relative;
	transition: background-color var(--qca-dur) var(--qca-ease);
}

.editorial-row::before {
	content: '';
	position: absolute;
	left: -14px;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 2px;
	background: var(--qca-accent);
	opacity: 0;
	transition: opacity var(--qca-dur) var(--qca-ease);
	pointer-events: none;
}

.editorial-row:hover::before {
	opacity: .85;
}

/* 10.4 视频记录：卡片圆角 + 播放键转主色 */
.video-tile {
	overflow: hidden;
	background: var(--qca-paper);
	border: 1px solid var(--qca-line);
	border-radius: var(--qca-radius-lg);
}

.video-tile__media {
	border-radius: 0;
}

.video-tile__play {
	display: grid;
	place-items: center;
	color: var(--qca-accent);
	background: rgba(255, 255, 255, .92);
	border: 1px solid rgba(31, 122, 140, .45);
	transition:
		background-color var(--qca-dur) var(--qca-ease),
		color var(--qca-dur) var(--qca-ease),
		transform var(--qca-dur) var(--qca-ease);
}

.video-tile:hover .video-tile__play,
.video-tile__play:hover {
	color: #FFFFFF;
	background: var(--qca-accent);
	border-color: var(--qca-accent);
	transform: scale(1.06);
}

/* 10.5 训练成绩 Hero：加一条金色收边线 + 强化右上角的靶环标记 */
.qca-training-hero {
	position: relative;
	overflow: hidden;
}

.qca-training-hero::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(214, 168, 79, .55), transparent);
	pointer-events: none;
}

/* 已有的 QCA 圆形标记：加一圈金色细环，和"荣誉"呼应 */
.qca-training-hero__mark {
	border-color: rgba(214, 168, 79, .55);
	box-shadow: 0 0 0 1px rgba(214, 168, 79, .18);
}

/* 10.6 手机端：悬停装饰不适用，关掉 */
@media (max-width: 767px) {
	.editorial-row::before {
		display: none;
	}
}

/* 10.7 减少动效 */
@media (prefers-reduced-motion: reduce) {
	.video-tile__play,
	.video-tile:hover .video-tile__play {
		transform: none;
	}
}

/* 10.1b 静态链接与条目编号：统一覆盖旧规则
   --------------------------------------------------------------------------
   旧样式把「查看全部 / 阅读全文 / 编号 01 02 03」都染成红色，且带区块前缀
   （.section--exhibition .section-heading__link 等，特异性 0,2,0~0,3,1），
   普通类选择器压不住，这里显式列全并加 !important。
   规则：红 = 警示与主行动；静态导航用主色。 */
.section-heading__link,
.section--exhibition .section-heading__link,
.section--text-archive .section-heading__link,
.section--editorial-light .section-heading__link,
.site-main--home .section-heading__link,
.editorial-row__action a,
.section--text-archive .editorial-row__action a,
.editorial-row__date span,
.qca-video-wall__link,
.video-tile__index {
	color: var(--qca-accent) !important;
}

.section-heading__link:hover,
.section--exhibition .section-heading__link:hover,
.section--text-archive .section-heading__link:hover,
.section--editorial-light .section-heading__link:hover,
.site-main--home .section-heading__link:hover,
.editorial-row__action a:hover,
.qca-video-wall__link:hover {
	color: var(--qca-accent-deep) !important;
}
/* 10.8 区块标题右上角的双色短条：红+青 → 单色双段（同族深浅，不再是两个色相）
   原规则：background: #1f7a8c; box-shadow: -40px 0 0 #e14b35; */
.site-main--home .section-heading--chapter::after {
	background: var(--qca-accent) !important;
	box-shadow: -40px 0 0 rgba(31, 122, 140, .35) !important;
}
/* 10.9 视频区收尾：链接用主色；feature 卡的红色硬阴影换软阴影，
       首图仍然是"深墨渐变"，但改成墨青色系，和白卡是一家人而不是两块材质 */
.work-wall__link {
	color: var(--qca-accent);
}

.work-wall__link:hover {
	color: var(--qca-accent-deep);
}

.section--motion-archive .video-tile--1 {
	box-shadow: var(--qca-shadow-card);
}

@media (max-width: 767px) {
	.video-grid--feature .video-tile--1 .video-tile__body {
		background: linear-gradient(transparent, rgba(20, 55, 78, .94));
	}
}
/* ==========================================================================
   11) 安全页 + 桌面版作品/教学思考 + 首屏靶心环（1.9.22）
   --------------------------------------------------------------------------
   逐屏看过之后的问题：
     · 安全页：说明块顶部 3px 红边、页面底部 3px 红边 —— 结构性红线，
       不是"警示"，纯装饰用红违反了用色规则
     · 安全页数字 01 是红（--qca-red），与全站主色不一致
     · 教学思考桌面版：封面直角无圆角，行悬停无反馈
     · 首页 Hero：左侧文案区是纯色块，缺一个"靶心"母题
   ========================================================================== */

/* 11.1 安全页：红线 → 主色；说明块升级为浅青提示卡 */
.safety-page__rail span:first-child {
	color: var(--qca-accent);
}

.safety-page__note {
	padding: 20px 22px;
	border-top: 3px solid var(--qca-accent);
	border-radius: 0 0 var(--qca-radius-lg) var(--qca-radius-lg);
	background: var(--qca-accent-soft);
}

.safety-page__note strong {
	color: var(--qca-accent-deep);
}

/* 规则条：左边框已经是主色，补圆角与轻微阴影，读起来像"条款卡" */
.safety-page__rules li {
	border-radius: 0 var(--qca-radius) var(--qca-radius) 0;
	box-shadow: var(--qca-shadow-soft);
}

/* 11.2 教学思考桌面版：封面圆角 + 行悬停底色 */
.editorial-row__cover {
	border-radius: var(--qca-radius-lg);
}

.editorial-row:hover {
	background: rgba(31, 122, 140, .025);
}

/* 11.3 首屏靶心环：直接画进 background-image
   --------------------------------------------------------------------------
   不用伪元素、不碰 z-index、不改任何元素的 position ——
   之前用 ::before 加层级时，把右侧图片容器的 position 覆盖掉，图直接塌成 0×0。
   背景图方案零布局影响：两圈极淡同心环 + 原有渐变 wash。 */
/* 环必须画在「文案面板」上：hero 自身的背景会被这块半透明白面板盖住，
   挂在 .hero 上等于白画。 */
.hero--archive .hero__copy {
	background-image:
		radial-gradient(circle at 92% 86%,
			transparent 0 96px,
			rgba(31, 122, 140, .22) 96px 96.8px,
			transparent 97px 146px,
			rgba(31, 122, 140, .16) 146px 146.8px,
			transparent 147px);
	background-repeat: no-repeat;
}

.hero.hero--archive {
	background-image: linear-gradient(158deg, rgba(31, 122, 140, .07), rgba(31, 122, 140, 0) 46%);
	background-repeat: no-repeat;
}

@media (max-width: 767px) {
	.hero--archive .hero__copy {
		background-image:
			radial-gradient(circle at 88% 92%,
				transparent 0 74px,
				rgba(31, 122, 140, .20) 74px 74.8px,
				transparent 75px 112px,
				rgba(31, 122, 140, .14) 112px 112.8px,
				transparent 113px);
	}

	.hero.hero--archive {
		background-image: linear-gradient(172deg, rgba(31, 122, 140, .06), rgba(31, 122, 140, 0) 42%);
	}
}
/* 11.5 静态装饰，无动效 */

/* ==========================================================================
   12) 作品集页 / 关于页 / 视频首图（1.9.23）
   --------------------------------------------------------------------------
   逐屏看过后的结论：
     · 作品集页页头右侧是大片空白 —— 正好挂"靶心环"，与首屏同一母题
     · 关于页：rail 编号 02 是红色（.profile-story__rail span:first-child）
       —— 这是全站最后一批"编号用红"的地方，和 safety 页同样处理
     · 资质 chip 是灰描边，和主色体系脱节
     · 视频首图（feature 卡）：深色渐变 + 红色硬投影，已改色系，需确认
   ========================================================================== */

/* 12.1 内页页头：右侧靶心环 + 眉标短横
   --------------------------------------------------------------------------
   页头右侧本来就是空白，环放这里不压任何文字；移动端不出环（屏太窄）。 */
.page-header--archive,
.profile-hero,
.contact-page__header {
	background-image:
		radial-gradient(circle at 88% 46%,
			transparent 0 96px,
			rgba(31, 122, 140, .16) 96px 96.8px,
			transparent 97px 146px,
			rgba(31, 122, 140, .12) 146px 146.8px,
			transparent 147px);
	background-repeat: no-repeat;
}

.page-header--archive .eyebrow::before,
.profile-hero .eyebrow::before,
.contact-page__header .eyebrow::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 2px;
	margin-right: 9px;
	vertical-align: .28em;
	background: var(--qca-accent);
}

@media (max-width: 767px) {
	.page-header--archive,
	.profile-hero,
	.contact-page__header {
		background-image: none;
	}
}

/* 12.2 关于页：rail 编号红 → 主色（与安全页、教学思考编号统一） */
.profile-story__rail span:first-child,
.profile-alt__rail span:first-child,
.contact-page__rail span:first-child,
.about-summary__rail span:first-child {
	color: var(--qca-accent);
}

/* 12.3 专业资质 chip：灰描边 → 主色描边 + 浅青底 */
.profile-credential-chips span,
.profile-credential-chips li,
.profile-credential-chips a {
	border-color: rgba(31, 122, 140, .38);
	background: var(--qca-accent-soft);
	color: var(--qca-accent-deep);
}

/* 12.4 视频首图的深色正文：只在桌面生效
   --------------------------------------------------------------------------
   桌面是「正文绝对定位叠在封面上」，需要深色渐变保证白字可读；
   手机是「正文排在图片下方」的白卡，渐变会让标题区发灰、链接看不清。 */
@media (min-width: 768px) {
	/* 渐变必须更早变深：视频自带白色大字会和正文打架，
	   只有底部 40% 接近纯色，白字才读得清。 */
	.section--motion-archive .video-tile--1 .video-tile__body {
		background-image: linear-gradient(
			transparent 0%,
			rgba(20, 55, 78, .55) 32%,
			rgba(20, 55, 78, .93) 62%,
			rgba(20, 55, 78, .97) 100%
		);
	}

	.section--motion-archive .video-tile--1 .video-tile__body h3,
	.section--motion-archive .video-tile--1 .video-tile__body p,
	.section--motion-archive .video-tile--1 .video-tile__body .work-wall__link {
		color: #FFFFFF;
	}

	.section--motion-archive .video-tile--1 .video-tile__body .video-tile__index {
		color: rgba(255, 255, 255, .75);
	}

	.section--motion-archive .video-tile--1 .work-wall__link:hover {
		color: var(--qca-accent-soft);
	}
}

@media (max-width: 767px) {
	.section--motion-archive .video-tile--1 .video-tile__body {
		background-image: none;
		background-color: var(--qca-paper);
	}
}

/* ==========================================================================
   13) 文章详情 / 灯箱 / 训练详情桌面（1.9.24）
   --------------------------------------------------------------------------
   本轮基于线上真实渲染（article.html / detail.html / 灯箱结构）：
     · 文章页 H1 实测 76px —— 标题折成三行，读起来像海报不像文章
     · 文章元信息是一行裸文本，没有分隔与节奏
     · 灯箱：图片圆角 6px、关闭键 hover 只是变亮，和主色体系无关
     · 训练详情桌面：两个面板是直角白块，与全站卡片体系不一致；
       比分 270 环 没有数字强调
   ========================================================================== */

/* 13.1 文章页标题：76px → 响应式 30~46px */
.article-header h1 {
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	line-height: 1.22;
	letter-spacing: -.01em;
}

/* 13.2 文章元信息：一行裸文本 → 带分隔与下边界的元信息条 */
.entry-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	color: var(--qca-muted);
	font-size: .78rem;
	letter-spacing: .05em;
	border-bottom: 1px solid var(--qca-line);
}

.entry-card__meta > * {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.entry-card__meta > * + *::before {
	content: '';
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--qca-faint);
}

/* 13.3 文章容器与正文：圆角/阴影对齐卡片体系；小标题加主色刻度 */
.article-shell {
	border-radius: var(--qca-radius-lg);
	box-shadow: var(--qca-shadow-soft);
}

.entry-content h2 {
	padding-left: 14px;
	border-left: 3px solid var(--qca-accent);
}

.entry-content h3 {
	padding-left: 12px;
	border-left: 2px solid rgba(31, 122, 140, .45);
}

.entry-content img {
	border-radius: var(--qca-radius-lg);
}

.entry-content blockquote {
	margin: 26px 0;
	padding: 16px 20px;
	border-left: 3px solid var(--qca-accent);
	border-radius: 0 var(--qca-radius) var(--qca-radius) 0;
	background: var(--qca-accent-soft);
	color: var(--qca-ink);
}

/* 13.4 灯箱：图片圆角与描边、关闭键主色态 */
.qca-lb {
	background: rgba(12, 30, 41, .94);
}

.qca-lb__img {
	border-radius: var(--qca-radius-lg);
	box-shadow:
		0 30px 70px rgba(0, 0, 0, .55),
		0 0 0 1px rgba(255, 255, 255, .08);
}

.qca-lb__caption {
	font-size: 13.5px;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .9);
}

.qca-lb__close {
	border-color: rgba(255, 255, 255, .42);
	transition:
		background-color var(--qca-dur) var(--qca-ease),
		border-color var(--qca-dur) var(--qca-ease),
		transform var(--qca-dur-fast) var(--qca-ease);
}

.qca-lb__close:hover,
.qca-lb__close:focus-visible {
	color: #FFFFFF;
	background: var(--qca-accent);
	border-color: var(--qca-accent);
	transform: scale(1.04);
}

/* 13.5 训练详情：面板圆角/阴影，比分数字强调 */
.qca-training-detail__panel {
	border-radius: var(--qca-radius-lg);
	box-shadow: var(--qca-shadow-soft);
}

.qca-training-detail__score {
	border-radius: 0 var(--qca-radius-lg) var(--qca-radius-lg) 0;
	box-shadow: var(--qca-shadow-soft);
}

.qca-training-detail__score strong {
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

.qca-training-detail__topline a {
	color: var(--qca-accent);
}

@media (min-width: 1024px) {
	.qca-training-detail__score strong {
		font-size: 3.2rem;
		line-height: 1.05;
	}
}

@media (max-width: 767px) {
	.article-header h1 {
		font-size: clamp(1.6rem, 7vw, 2.1rem);
	}

	.entry-content h2,
	.entry-content h3 {
		padding-left: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qca-lb__close:hover,
	.qca-lb__close:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
   14) Hero 重做 + 章节节奏 + 图块悬停（1.9.25）
   --------------------------------------------------------------------------
   本轮要解决的是"看不出变化"，所以动作都放在视觉重量大的地方：
     1. Hero：标题 56px → 最大 97px；文案面板变成真正的白卡浮在照片上（虚实）；
        靶心环加粗（原来 alpha .22，几乎看不见）
     2. 章节：原有底色每块色相都不同（#F0F7F5/#EAF5F4/#F5F8FA/#EEF4F8/#E8F3EF），
        全在近白区。统一为「纯白 ↔ #EAF2F5」严格交替，滚动时才有章节感
     3. 图块：hover 上浮 4px + 主色描边 + 图片 1.045 缩放（仅在精确指针设备启用）
   ========================================================================== */

/* 14.1 Hero 标题：更大、更紧 */
.site-main--home .hero--archive .hero__copy h1 {
	font-size: clamp(2.2rem, 7.4vw, 6.1rem);
	line-height: .98;
	letter-spacing: -.02em;
}

@media (max-width: 767px) {
	.site-main--home .hero--archive .hero__copy h1 {
		font-size: clamp(2rem, 8.6vw, 3.1rem);
		line-height: 1.06;
		letter-spacing: -.01em;
	}
}

/* 14.2 虚实：文案区变成浮在照片上的白色卡片 */
.hero--archive .hero__copy {
	isolation: isolate;
}

/* 靶心环必须画在「白卡」上：白卡是 ::before（负 z-index），
   会盖住元素自身的背景图 —— 画在 .hero__copy 上等于白画。 */
.hero--archive .hero__copy::before {
	content: '';
	position: absolute;
	inset: -12px -30px -24px -28px;
	z-index: -1;
	border-radius: 18px;
	background-color: #FFFFFF;
	background-image: radial-gradient(
		circle at 92% 84%,
		transparent 0 104px,
		rgba(31, 122, 140, .40) 104px 105px,
		transparent 105px 168px,
		rgba(31, 122, 140, .30) 168px 169px,
		transparent 169px
	);
	background-repeat: no-repeat;
	box-shadow: 0 26px 64px rgba(20, 55, 78, .14);
	pointer-events: none;
}

@media (max-width: 767px) {
	.hero--archive .hero__copy::before {
		inset: -10px -14px -18px -14px;
		border-radius: 14px;
		background-image: radial-gradient(
			circle at 90% 88%,
			transparent 0 74px,
			rgba(31, 122, 140, .30) 74px 75px,
			transparent 75px 118px,
			rgba(31, 122, 140, .20) 118px 119px,
			transparent 119px
		);
		box-shadow: 0 16px 40px rgba(20, 55, 78, .12);
	}
}

/* 14.3 章节节奏：纯白 ↔ 极浅青交替
   --------------------------------------------------------------------------
   原有底色由 .site-main--home .xxx（0,2,0）设置，这里必须同级才能覆盖。 */
.site-main--home .qca-parent-start,
.site-main--home .qca-scroll-studio,
.site-main--home .section--manifesto-light,
.site-main--home .section--editorial-light,
.site-main--home .qca-training-home,
.site-main--home .section--contact-archive {
	background-color: #FFFFFF;
	background-image: none;
}

.site-main--home .qca-shooting-guide,
.site-main--home .section--exhibition,
.site-main--home .section--motion-archive,
.site-main--home .section--profile-archive {
	background-color: #EAF2F5;
	background-image: none;
}

/* 章节之间给一道更清晰的分隔线 */
.section + .section,
.qca-parent-start + .section,
.qca-shooting-guide + .section {
	border-top: 1px solid rgba(31, 122, 140, .16);
}

/* 14.4 图块：悬停上浮 + 主色描边 + 图片轻微放大
   --------------------------------------------------------------------------
   只在精确指针设备启用：手机没有 hover，不该有位移残留。 */
.qca-gallery-item,
.video-tile {
	transition:
		transform 240ms var(--qca-ease),
		box-shadow 240ms var(--qca-ease),
		border-color 240ms var(--qca-ease);
}

.qca-gallery-item img,
.video-tile__media img {
	transition: transform 420ms var(--qca-ease);
}

@media (hover: hover) and (pointer: fine) {
	.qca-gallery-item:hover,
	.video-tile:hover {
		transform: translateY(-4px);
		border-color: rgba(31, 122, 140, .45);
		box-shadow: 0 20px 44px rgba(20, 55, 78, .16);
	}

	.qca-gallery-item:hover img,
	.video-tile:hover .video-tile__media img {
		transform: scale(1.045);
	}

	.qca-gallery-item:hover .qca-gallery-item__title,
	.video-tile:hover .video-tile__body h3 {
		color: var(--qca-accent-deep);
	}
}

/* 14.5 减少动效：关闭缩放与位移 */
@media (prefers-reduced-motion: reduce) {
	.qca-gallery-item:hover,
	.video-tile:hover,
	.qca-gallery-item:hover img,
	.video-tile:hover .video-tile__media img {
		transform: none;
	}
}

/* ==========================================================================
   15) Hero 收敛 + 龙虎榜荣誉感（1.9.26）
   --------------------------------------------------------------------------
   实测数据（320/360/390/430）：
     · 手机端无横向溢出，但白卡 inset 上边距 -10px（卡片 y=100）盖住了
       顶部元信息（topline y=93~110）—— 这就是"被挡住"的真因
     · 标题：桌面 94.7px、手机 32~37px —— 用户反馈"过度显眼、碍眼"
   处理：卡片上边改为与文案盒对齐（不再侵入 topline），标题降到
     桌面 ~59px / 手机 ~26~28px；标题禁止在词中断行，只在标点处折。
   ========================================================================== */

/* 15.1 Hero 标题收敛 */
.site-main--home .hero--archive .hero__copy h1 {
	font-size: clamp(2rem, 4.8vw, 4.2rem);
	line-height: 1.06;
	letter-spacing: -.015em;
	/* 中文标题不允许在词中间断行：只在「，」这类标点处折 */
	word-break: keep-all;
	overflow-wrap: normal;
	text-wrap: balance;
}

@media (max-width: 767px) {
	.site-main--home .hero--archive .hero__copy h1 {
		font-size: clamp(1.65rem, 6.6vw, 2.3rem);
		line-height: 1.18;
		letter-spacing: -.005em;
	}
}

/* 15.2 手机端：白卡不再侵入顶部元信息 */
@media (max-width: 767px) {
	.hero--archive .hero__copy {
		padding-top: 18px;
	}

	.hero--archive .hero__copy::before {
		inset: 0 -14px -18px -14px;
	}
}

/* 15.3 龙虎榜：克制的荣誉感
   --------------------------------------------------------------------------
   不加花哨元素，只在标题下压一道金色渐隐短线、眉标前加一段金色短横。
   金 = 荣誉（与全站用色规则一致），不改变字体与版式。 */
.qca-training-hero__copy {
	position: relative;
}

.qca-training-hero__copy h1 {
	position: relative;
	padding-bottom: 16px;
}

.qca-training-hero__copy h1::after {
	content: '';
	position: absolute;
	left: 2px;
	bottom: 0;
	width: 104px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--qca-gold), rgba(214, 168, 79, 0));
}

.qca-training-hero__eyebrow::before {
	content: '';
	display: inline-block;
	width: 22px;
	height: 2px;
	margin-right: 10px;
	vertical-align: .25em;
	background: var(--qca-gold);
}

@media (max-width: 767px) {
	.qca-training-hero__copy h1 {
		padding-bottom: 12px;
	}

	.qca-training-hero__copy h1::after {
		width: 72px;
		height: 2px;
	}
}