/* ==========================================================================
   1. 设计令牌
   ========================================================================== */

:root {
	/* 品牌色 */
	--qiyu-color-primary: #c8102e;
	--qiyu-color-primary-dark: #a00c24;
	--qiyu-color-primary-soft: rgba(200, 16, 46, 0.08);
	--qiyu-color-accent: #e8720c;
	--qiyu-color-accent-soft: rgba(232, 114, 12, 0.1);

	/* 中性色 */
	--qiyu-color-ink: #1a1e24;
	--qiyu-color-ink-soft: #2b3138;
	--qiyu-color-text: #4a4f57;
	--qiyu-color-muted: #7b828c;
	--qiyu-color-surface: #f5f6f8;
	--qiyu-color-surface-2: #eceef2;
	--qiyu-color-border: #e3e5e9;
	--qiyu-color-white: #ffffff;

	/* 字体 */
	--qiyu-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
		"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Source Han Sans SC",
		"Noto Sans CJK SC", Roboto, Helvetica, Arial, sans-serif;
	--qiyu-font-heading: var(--qiyu-font-body);
	--qiyu-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--qiyu-font-size-base: 16px;
	--qiyu-line-height: 1.75;

	/* 布局 */
	--qiyu-container: 1240px;
	--qiyu-gutter: 24px;
	--qiyu-radius: 10px;
	--qiyu-radius-sm: 6px;
	--qiyu-radius-lg: 16px;
	--qiyu-radius-pill: 999px;

	/* 间距节奏 */
	--qiyu-space-xs: 8px;
	--qiyu-space-sm: 16px;
	--qiyu-space-md: 24px;
	--qiyu-space-lg: 40px;
	--qiyu-space-xl: 64px;
	--qiyu-section-y: 64px;

	/* 阴影 */
	--qiyu-shadow-xs: 0 1px 2px rgba(16, 20, 28, 0.05);
	--qiyu-shadow-sm: 0 2px 8px rgba(16, 20, 28, 0.06);
	--qiyu-shadow-md: 0 10px 28px -10px rgba(16, 20, 28, 0.16);
	--qiyu-shadow-lg: 0 24px 56px -20px rgba(16, 20, 28, 0.24);

	/* 动效 */
	--qiyu-duration: 0.4s;
	--qiyu-duration-fast: 0.2s;
	--qiyu-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* 尺寸 */
	--qiyu-header-h: 84px;
	--qiyu-topbar-h: 40px;
	--qiyu-z-header: 90;
	--qiyu-z-nav: 100;
	--qiyu-z-overlay: 95;
	--qiyu-z-totop: 80;
	/* 底栏要压过返回顶部，又得让抽屉遮罩盖住它，所以卡在两者之间 */
	--qiyu-z-bar: 86;
}

/* 字号档位：由 body 类名控制，后台可切 */
.font-size-15 { --qiyu-font-size-base: 15px; }
.font-size-16 { --qiyu-font-size-base: 16px; }
.font-size-17 { --qiyu-font-size-base: 17px; }
.font-size-18 { --qiyu-font-size-base: 18px; }

/* 动画时长：由 body 类名控制，后台可切 */
.anim-fast { --qiyu-duration: 0.2s; }
.anim-normal { --qiyu-duration: 0.4s; }
.anim-slow { --qiyu-duration: 0.7s; }

/* ==========================================================================
   2. 基础重置与排版
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* 锚点跳转时给吸顶页头留出空间，避免标题被遮住 */
	scroll-padding-top: calc(var(--qiyu-header-h) + 16px);
	/* 用 clip 而不是 hidden：hidden 会让 html 变成滚动容器，
	   从而破坏子元素的 position: sticky（粘性页头就会失效）。 */
	overflow-x: clip;
}

body {
	margin: 0;
	background-color: var(--qiyu-color-white);
	color: var(--qiyu-color-text);
	font-family: var(--qiyu-font-body);
	font-size: var(--qiyu-font-size-base);
	line-height: var(--qiyu-line-height);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	color: var(--qiyu-color-ink);
	font-family: var(--qiyu-font-heading);
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9375rem; }

p {
	margin: 0 0 1.1em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--qiyu-color-primary);
	text-decoration: none;
	transition: color var(--qiyu-duration-fast) var(--qiyu-ease),
		background-color var(--qiyu-duration-fast) var(--qiyu-ease),
		border-color var(--qiyu-duration-fast) var(--qiyu-ease),
		opacity var(--qiyu-duration-fast) var(--qiyu-ease);
}

a:hover {
	color: var(--qiyu-color-primary-dark);
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

figure {
	margin: 0;
}

hr {
	height: 1px;
	margin: 2.4em 0;
	border: 0;
	background-color: var(--qiyu-color-border);
}

code,
kbd,
pre,
samp {
	font-family: var(--qiyu-font-mono);
	font-size: 0.9em;
}

code {
	padding: 0.15em 0.4em;
	background-color: var(--qiyu-color-surface-2);
	border-radius: 4px;
	color: var(--qiyu-color-ink);
}

pre {
	padding: 18px 20px;
	overflow: auto;
	background-color: var(--qiyu-color-ink);
	border-radius: var(--qiyu-radius-sm);
	color: #e6e9ef;
}

pre code {
	padding: 0;
	background: none;
	color: inherit;
}

blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--qiyu-color-primary);
	color: var(--qiyu-color-ink-soft);
	font-size: 1.0625em;
}

blockquote cite {
	display: block;
	margin-top: 8px;
	color: var(--qiyu-color-muted);
	font-size: 0.875em;
	font-style: normal;
}

table {
	width: 100%;
	margin: 1.6em 0;
	border-collapse: collapse;
	font-size: 0.9375em;
}

th,
td {
	padding: 12px 14px;
	border: 1px solid var(--qiyu-color-border);
	text-align: left;
	vertical-align: top;
}

th {
	background-color: var(--qiyu-color-surface);
	color: var(--qiyu-color-ink);
	font-weight: 600;
}

ul,
ol {
	margin: 0 0 1.1em;
	padding-left: 1.35em;
}

li {
	margin-bottom: 0.35em;
}

/* ==========================================================================
   3. 无障碍与工具类
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 999;
	padding: 12px 20px;
	background-color: var(--qiyu-color-primary);
	border-radius: 0 0 var(--qiyu-radius-sm) var(--qiyu-radius-sm);
	color: #fff;
	font-weight: 600;
	transition: top var(--qiyu-duration-fast) var(--qiyu-ease);
}

.skip-link:focus {
	top: 0;
	color: #fff;
	outline: 0;
}

/* 统一的键盘焦点样式。鼠标点击不触发，只有键盘导航才显示。 */
:focus-visible {
	outline: 2px solid var(--qiyu-color-primary);
	outline-offset: 2px;
	border-radius: 3px;
}

.qiyu-flip-x {
	display: inline-flex;
	transform: scaleX(-1);
}

.qiyu-icon {
	flex: 0 0 auto;
	vertical-align: middle;
}

.qiyu-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--qiyu-z-overlay);
	background-color: rgba(16, 20, 28, 0.55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	animation: qiyu-fade-in var(--qiyu-duration-fast) var(--qiyu-ease) forwards;
}

@keyframes qiyu-fade-in {
	to { opacity: 1; }
}

/* ==========================================================================
   4. 布局骨架
   ========================================================================== */

.qiyu-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.qiyu-main {
	flex: 1 0 auto;
}

.qiyu-container {
	width: 100%;
	max-width: var(--qiyu-container);
	margin-inline: auto;
	padding-inline: var(--qiyu-gutter);
}

.qiyu-section {
	padding-block: var(--qiyu-section-y);
}

.qiyu-section--surface {
	background-color: var(--qiyu-color-surface);
}

.qiyu-section--ink {
	background-color: var(--qiyu-color-ink);
	color: rgba(255, 255, 255, 0.82);
}

.qiyu-section--ink h2,
.qiyu-section--ink h3 {
	color: #fff;
}

.qiyu-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	padding-block: 56px 88px;
}

.qiyu-layout--with-sidebar {
	grid-template-columns: minmax(0, 1fr) 320px;
	align-items: start;
}

/* —— 内页横幅（关于我们 / 联系我们 / 各栏目页 / 文章页共用一张） —— */
.qiyu-banner {
	height: var(--qiyu-banner-h, 320px);
	background-color: var(--qiyu-color-surface-2);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*
 * 有横幅时，紧随其后的标题区收一收：
 * 去掉底色与分隔线、把上内边距压小，让「图 + 标题」读成一个整体，
 * 而不是一张大图下面再压一个灰底大块。
 */
.has-inner-banner .qiyu-page__head,
.has-inner-banner .qiyu-single__head {
	padding-block: 26px 10px;
	background-color: transparent;
	border-bottom: 0;
}

@media (max-width: 767px) {
	/* 手机上按比例收窄，避免第一屏全被横幅吃掉 */
	.qiyu-banner {
		height: calc(var(--qiyu-banner-h, 320px) * 0.42);
		min-height: 108px;
	}

	/* 后台勾了「手机端隐藏横幅」：横幅不占位，标题区恢复成页首第一块的样子。 */
	.qiyu-banner--hide-mobile {
		display: none;
	}

	.has-inner-banner.banner-hide-mobile .qiyu-page__head,
	.has-inner-banner.banner-hide-mobile .qiyu-single__head {
		padding-block: 44px 32px;
		background-color: var(--qiyu-color-surface);
		border-bottom: 1px solid var(--qiyu-color-border);
	}
}

/* 栅格：列数由类名决定，窄屏自动降级 */
.qiyu-grid {
	display: grid;
	gap: 24px;
}

.qiyu-grid--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.qiyu-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qiyu-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qiyu-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.qiyu-loop {
	display: grid;
	gap: 24px;
}

.qiyu-loop--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qiyu-loop--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qiyu-loop--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 区块标题组 */
.qiyu-section__head {
	max-width: 720px;
	margin: 0 auto 34px;
}

.qiyu-section__head--center {
	text-align: center;
}

.qiyu-section__head--left {
	margin-inline: 0;
	text-align: left;
}

.qiyu-section__eyebrow {
	margin: 0 0 10px;
	color: var(--qiyu-color-primary);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.qiyu-section__eyebrow--left {
	text-align: left;
}

/*
 * 区块标题比正文里的 h2 小一档。
 * 首页上五六个区块连着排，标题太大会把视线全吸走，
 * 也把区块之间的留白挤得更明显。
 */
.qiyu-section__title {
	margin: 0 0 12px;
	font-size: clamp(1.3rem, 1.8vw, 1.6rem);
}

.qiyu-section__title--minor {
	margin-bottom: 28px;
	color: var(--qiyu-color-muted);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
}

.qiyu-section__subtitle {
	margin: 0;
	color: var(--qiyu-color-muted);
	font-size: 1rem;
}

.qiyu-section__foot {
	margin-top: 30px;
	text-align: center;
}

/* ==========================================================================
   5. 组件
   ========================================================================== */

/* —— 按钮 —— */
.qiyu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: var(--qiyu-radius-sm);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--qiyu-duration-fast) var(--qiyu-ease),
		background-color var(--qiyu-duration-fast) var(--qiyu-ease),
		border-color var(--qiyu-duration-fast) var(--qiyu-ease),
		color var(--qiyu-duration-fast) var(--qiyu-ease),
		box-shadow var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-btn .qiyu-icon {
	transition: transform var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-btn--sm {
	padding: 9px 16px;
	font-size: 0.875rem;
}

.qiyu-btn--lg {
	padding: 16px 34px;
	font-size: 1rem;
}

.qiyu-btn--primary {
	background-color: var(--qiyu-color-primary);
	border-color: var(--qiyu-color-primary);
	color: #fff;
	box-shadow: 0 6px 18px -8px rgba(200, 16, 46, 0.55);
}

.qiyu-btn--primary:hover {
	background-color: var(--qiyu-color-primary-dark);
	border-color: var(--qiyu-color-primary-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -10px rgba(200, 16, 46, 0.6);
}

.qiyu-btn--primary:hover .qiyu-icon {
	transform: translateX(3px);
}

.qiyu-btn--ghost {
	background-color: transparent;
	border-color: var(--qiyu-color-border);
	color: var(--qiyu-color-ink);
}

.qiyu-btn--ghost:hover {
	background-color: var(--qiyu-color-primary);
	border-color: var(--qiyu-color-primary);
	color: #fff;
	transform: translateY(-2px);
}

.qiyu-btn--ghost:hover .qiyu-icon {
	transform: translateX(3px);
}

/* 深色背景上的幽灵按钮 */
.qiyu-cta .qiyu-btn--ghost,
.qiyu-hero .qiyu-btn--ghost {
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.qiyu-cta .qiyu-btn--ghost:hover,
.qiyu-hero .qiyu-btn--ghost:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--qiyu-color-ink);
}

.qiyu-btn:active {
	transform: translateY(0);
}

/* 图标按钮 */
.qiyu-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: none;
	border: 1px solid var(--qiyu-color-border);
	border-radius: var(--qiyu-radius-sm);
	color: var(--qiyu-color-ink);
	cursor: pointer;
	transition: background-color var(--qiyu-duration-fast) var(--qiyu-ease),
		border-color var(--qiyu-duration-fast) var(--qiyu-ease),
		color var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-iconbtn:hover {
	background-color: var(--qiyu-color-primary);
	border-color: var(--qiyu-color-primary);
	color: #fff;
}

/* —— 文章卡片 —— */
.qiyu-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--qiyu-color-white);
	border: 1px solid var(--qiyu-color-border);
	border-radius: var(--qiyu-radius);
	transition: transform var(--qiyu-duration) var(--qiyu-ease),
		box-shadow var(--qiyu-duration) var(--qiyu-ease),
		border-color var(--qiyu-duration) var(--qiyu-ease);
}

.qiyu-card:hover {
	border-color: rgba(200, 16, 46, 0.35);
	transform: translateY(-4px);
	box-shadow: var(--qiyu-shadow-md);
}

/* 整卡可点：铺一层透明链接盖住卡片，内部标题链接保留以便读屏识别 */
.qiyu-card__permalink {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.qiyu-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--qiyu-color-surface);
	color: var(--qiyu-color-ink);
}

.qiyu-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--qiyu-duration) var(--qiyu-ease);
}

.qiyu-card:hover .qiyu-card__media img {
	transform: scale(1.05);
}

.qiyu-card__media--empty svg {
	width: 100%;
	height: 100%;
}

.qiyu-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 22px;
}

.qiyu-card__title {
	margin: 0 0 10px;
	font-size: 1.0625rem;
	line-height: 1.45;
}

.qiyu-card__title a {
	color: inherit;
	position: relative;
	z-index: 3;
}

.qiyu-card__title a:hover {
	color: var(--qiyu-color-primary);
}

.qiyu-card__excerpt {
	margin: 0 0 16px;
	color: var(--qiyu-color-muted);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.qiyu-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	color: var(--qiyu-color-primary);
	font-size: 0.875rem;
	font-weight: 600;
}

.qiyu-card__more .qiyu-icon {
	transition: transform var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-card:hover .qiyu-card__more .qiyu-icon {
	transform: translateX(3px);
}

/* 日期徽标：左边大号日，右边年月 */
.qiyu-datebadge {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 12px;
	color: var(--qiyu-color-muted);
}

.qiyu-datebadge__day {
	color: var(--qiyu-color-primary);
	font-family: var(--qiyu-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

.qiyu-datebadge__ym {
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

/* —— 表单 —— */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 12px 14px;
	background-color: var(--qiyu-color-white);
	border: 1px solid var(--qiyu-color-border);
	border-radius: var(--qiyu-radius-sm);
	color: var(--qiyu-color-text);
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.5;
	transition: border-color var(--qiyu-duration-fast) var(--qiyu-ease),
		box-shadow var(--qiyu-duration-fast) var(--qiyu-ease);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--qiyu-color-primary);
	box-shadow: 0 0 0 3px var(--qiyu-color-primary-soft);
	outline: 0;
}

input::placeholder,
textarea::placeholder {
	color: #a4aab3;
}

button,
input[type="submit"],
input[type="button"] {
	font-family: inherit;
}

.qiyu-searchform {
	position: relative;
	display: flex;
	gap: 10px;
	align-items: center;
}

.qiyu-searchform__icon {
	position: absolute;
	left: 16px;
	display: flex;
	color: var(--qiyu-color-muted);
	pointer-events: none;
}

.qiyu-searchform__input {
	padding-left: 44px;
}

.qiyu-searchform__submit {
	flex: 0 0 auto;
}

/* —— 分页 —— */
/* 容器本身不画任何框：页码各自是独立小方块，连成一格一框反而像表格。 */
.qiyu-pagination {
	margin-top: 48px;
	border: 0;
	outline: 0;
	background: none;
	box-shadow: none;
}

.qiyu-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * paginate_links( type=list ) 输出的就是 <ul class="page-numbers">，
 * 它会连带命中下面的 .page-numbers 格子样式 —— ul 自己变成一个有底、有边框、
 * 有圆角的 42px 方框，整个分页外面多出一圈框（配色里边框偏红时非常刺眼）。
 * 这里把 ul 还原成纯容器，格子样式只留给 li 里的 a / span。
 */
.qiyu-pagination ul.page-numbers {
	display: flex;
	min-width: 0;
	height: auto;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.qiyu-pagination li {
	margin: 0;
}

.qiyu-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	background-color: var(--qiyu-color-white);
	border: 1px solid var(--qiyu-color-border);
	border-radius: var(--qiyu-radius-sm);
	color: var(--qiyu-color-text);
	font-size: 0.9375rem;
	font-weight: 600;
}

.qiyu-pagination .page-numbers:hover {
	border-color: var(--qiyu-color-primary);
	color: var(--qiyu-color-primary);
}

.qiyu-pagination .page-numbers.current {
	background-color: var(--qiyu-color-primary);
	border-color: var(--qiyu-color-primary);
	color: #fff;
}

.qiyu-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* —— 面包屑 —— */
.qiyu-breadcrumb {
	margin-bottom: 14px;
	font-size: 0.875rem;
}

.qiyu-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qiyu-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--qiyu-color-muted);
}

.qiyu-breadcrumb__item:not(:last-child)::after {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.55;
}

.qiyu-breadcrumb__link {
	color: var(--qiyu-color-muted);
}

.qiyu-breadcrumb__link:hover {
	color: var(--qiyu-color-primary);
}

.qiyu-breadcrumb__text {
	color: var(--qiyu-color-ink);
	font-weight: 500;
}

/* —— 元信息 —— */
.qiyu-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	color: var(--qiyu-color-muted);
	font-size: 0.875rem;
}

.qiyu-meta a {
	color: var(--qiyu-color-muted);
}

.qiyu-meta a:hover {
	color: var(--qiyu-color-primary);
}

.qiyu-meta__sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: currentColor;
	opacity: 0.5;
}

/* —— 空状态 —— */
.qiyu-empty {
	max-width: 620px;
	padding: 48px 32px;
	background-color: var(--qiyu-color-surface);
	border: 1px dashed var(--qiyu-color-border);
	border-radius: var(--qiyu-radius);
	text-align: center;
}

.qiyu-empty--center {
	margin-inline: auto;
}

.qiyu-empty__icon {
	display: inline-flex;
	margin-bottom: 14px;
	color: var(--qiyu-color-muted);
}

.qiyu-empty__title {
	margin: 0 0 8px;
	color: var(--qiyu-color-ink);
	font-size: 1.125rem;
	font-weight: 700;
}

.qiyu-empty .qiyu-searchform {
	max-width: 420px;
	margin: 20px auto 0;
}

.qiyu-empty__hint {
	margin-top: 16px;
	color: var(--qiyu-color-muted);
	font-size: 0.875rem;
}

/*
 * 站长提示：开关打开了但内容还没填，整块不会输出。
 * 只有登录的管理员能看到，用来解释「为什么勾了没反应」。
 */
.qiyu-setup-hint {
	max-width: 720px;
	margin: 0 auto;
	padding: 14px 18px;
	border: 1px dashed var(--qiyu-color-border);
	border-radius: var(--qiyu-radius-sm);
	background-color: var(--qiyu-color-primary-soft);
	color: var(--qiyu-color-text);
	font-size: 0.9375rem;
	line-height: 1.75;
}

.qiyu-setup-hint strong {
	color: var(--qiyu-color-primary);
}

/* —— 要点列表（打勾） —— */
.qiyu-checkist {
	display: grid;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.qiyu-checkist__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--qiyu-color-ink-soft);
}

.qiyu-checkist__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	background-color: var(--qiyu-color-primary-soft);
	border-radius: 50%;
	color: var(--qiyu-color-primary);
}

/* —— 返回顶部 —— */
.qiyu-totop {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: var(--qiyu-z-totop);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background-color: var(--qiyu-color-ink);
	border: 0;
	border-radius: var(--qiyu-radius-sm);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	box-shadow: var(--qiyu-shadow-md);
	transition: opacity var(--qiyu-duration) var(--qiyu-ease),
		visibility var(--qiyu-duration) var(--qiyu-ease),
		transform var(--qiyu-duration) var(--qiyu-ease),
		background-color var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.qiyu-totop:hover {
	background-color: var(--qiyu-color-primary);
}

/* —— 滚动进入动画 ——
 * 只有 html 带 .js 类时才隐藏元素（该类由页头的一小段内联脚本加上）。
 * 这样即使脚本被拦截或加载失败，内容依然是可见的，不会出现白屏。
 */
.js .has-reveal [data-qiyu-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--qiyu-duration) var(--qiyu-ease),
		transform var(--qiyu-duration) var(--qiyu-ease);
}

.has-reveal [data-qiyu-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/*
 * 兜底：主脚本没跑起来（被拦截 / 被缓存插件延迟 / 中途报错）时，
 * 内容不能一直停在 opacity:0。页头那段内联脚本会在 3 秒后加上这个类，
 * main.js 正常启动时会清掉那个定时器，所以只有出问题时才会生效。
 */
.js.qiyu-reveal-fallback .has-reveal [data-qiyu-reveal] {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   6. 页头与导航
   ========================================================================== */

.qiyu-topbar {
	background-color: var(--qiyu-color-ink);
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.8125rem;
}

.qiyu-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--qiyu-topbar-h);
}

.qiyu-topbar__notice {
	margin: 0;
	letter-spacing: 0.03em;
}

.qiyu-topbar__meta {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
}

.qiyu-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, 0.72);
	white-space: nowrap;
}

.qiyu-topbar__link:hover {
	color: #fff;
}

.qiyu-topbar .qiyu-icon {
	opacity: 0.75;
}

/* —— 主栏 —— */
.qiyu-header {
	position: relative;
	z-index: var(--qiyu-z-header);
	background-color: var(--qiyu-color-white);
	border-bottom: 1px solid var(--qiyu-color-border);
	transition: box-shadow var(--qiyu-duration) var(--qiyu-ease),
		border-color var(--qiyu-duration) var(--qiyu-ease),
		transform var(--qiyu-duration) var(--qiyu-ease);
}

.qiyu-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--qiyu-header-h);
}

/* 吸顶态：用 sticky 而不是 fixed，避免页头脱离文档流导致内容跳动 */
.header-is-sticky .qiyu-header {
	position: sticky;
	top: 0;
}

/*
 * 判断页头是否已吸附用的哨兵元素（由 main.js 插入）。
 * 1px 高 + 负下边距，占位为 0，不影响任何布局。
 */
.qiyu-header-sentinel {
	display: block;
	height: 1px;
	margin-bottom: -1px;
	pointer-events: none;
}

/*
 * 吸附态只许改「不影响布局」的属性。
 *
 * 这里原本还有 `min-height: 70px` 与 logo `max-height: 48px`，把页头从 84px 压到 70px。
 * 页头一矮，整页文档高度就少 14px：在「联系我们」这种刚好多出半屏的短页上，
 * 滚到接近底部时浏览器会把滚动位置夹回去，滚动位置一变哨兵又回到视口内，
 * 于是 on → off → on 来回切换（实测 34ms 内切了 3 次），看起来就是页头抖一下。
 * 所以尺寸、内外边距、行高这类会改变文档高度的属性，一律不要放进吸附态。
 */
.header-is-sticky .qiyu-header.is-stuck {
	box-shadow: var(--qiyu-shadow-sm);
	border-bottom-color: transparent;
}

/* —— 品牌 —— */
.qiyu-brand {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	max-width: 380px;
}

.qiyu-brand .custom-logo-link {
	display: block;
	line-height: 0;
}

/*
 * 页头内高 84px，logo 定高 68px，上下各留 8px。
 * 这里用 height 而不是 max-height：一般企业 logo 的原图不高（我们演示站是
 * 225×60），只给上限的话它在页头里永远停在 60px 高、看着偏小；定高后按比例
 * 撑到 255×68（约 +20%），1.1 倍的放大幅度肉眼基本看不出模糊。
 * 宽 logo 交给 max-width 兜住，超宽的图会等比缩回品牌区宽度。
 */
.qiyu-brand .custom-logo {
	width: auto;
	height: 68px;
	max-width: 100%;
	object-fit: contain;
}

.qiyu-brand__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--qiyu-color-ink);
}

.qiyu-brand__name {
	font-family: var(--qiyu-font-heading);
	font-size: 1.3125rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.qiyu-brand__text:hover .qiyu-brand__name {
	color: var(--qiyu-color-primary);
}

.qiyu-brand__tagline {
	color: var(--qiyu-color-muted);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.qiyu-footer__logo .custom-logo {
	max-height: 48px;
}

/* —— 主导航 —— */
.qiyu-nav {
	margin-left: auto;
}

.qiyu-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qiyu-menu__item {
	position: relative;
	margin: 0;
}

.qiyu-menu__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 14px;
	border-radius: var(--qiyu-radius-sm);
	color: var(--qiyu-color-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
}

.qiyu-menu__link:hover,
.qiyu-menu__item.is-current > .qiyu-menu__link {
	background-color: var(--qiyu-color-primary-soft);
	color: var(--qiyu-color-primary);
}

/* 当前项底部指示条 */
.qiyu-menu__item.is-current > .qiyu-menu__link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 2px;
	height: 2px;
	background-color: var(--qiyu-color-primary);
	border-radius: 2px;
}

/* 展开按钮：桌面端用于键盘与触屏，鼠标悬停时也可用 */
.qiyu-menu__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--qiyu-color-muted);
	cursor: pointer;
}

/* 子菜单：桌面向下弹出 */
.qiyu-submenu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: var(--qiyu-z-nav);
	min-width: 210px;
	margin: 0;
	padding: 8px;
	background-color: var(--qiyu-color-white);
	border: 1px solid var(--qiyu-color-border);
	border-radius: var(--qiyu-radius-sm);
	list-style: none;
	box-shadow: var(--qiyu-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--qiyu-duration-fast) var(--qiyu-ease),
		visibility var(--qiyu-duration-fast) var(--qiyu-ease),
		transform var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-menu__item--has-children:hover > .qiyu-submenu,
.qiyu-menu__item--has-children:focus-within > .qiyu-submenu,
.qiyu-submenu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.qiyu-submenu .qiyu-menu__item {
	width: 100%;
}

.qiyu-submenu .qiyu-menu__link {
	display: flex;
	width: 100%;
	padding: 9px 12px;
	font-size: 0.9rem;
	font-weight: 500;
}

.qiyu-submenu .qiyu-menu__link:hover {
	background-color: var(--qiyu-color-surface);
	color: var(--qiyu-color-primary);
}

.qiyu-submenu .qiyu-menu__item.is-current > .qiyu-menu__link::after {
	display: none;
}

/* 三级及更深：向右展开 */
.qiyu-submenu .qiyu-submenu {
	top: -8px;
	left: 100%;
}

.qiyu-nav__hint {
	margin: 0;
	padding: 10px 14px;
	background-color: var(--qiyu-color-surface);
	border-radius: var(--qiyu-radius-sm);
	color: var(--qiyu-color-muted);
	font-size: 0.875rem;
}

/* —— 页头操作区 —— */
.qiyu-header__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
}

.qiyu-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--qiyu-color-border);
	border-radius: var(--qiyu-radius-sm);
	color: var(--qiyu-color-ink);
	cursor: pointer;
}

.qiyu-nav-toggle__bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 20px;
	height: 16px;
}

.qiyu-nav-toggle__bars span {
	display: block;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform var(--qiyu-duration-fast) var(--qiyu-ease),
		opacity var(--qiyu-duration-fast) var(--qiyu-ease);
}

/* 打开态：三条线变叉 */
.nav-open .qiyu-nav-toggle__bars span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-open .qiyu-nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.nav-open .qiyu-nav-toggle__bars span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* —— 搜索面板 —— */
.qiyu-search-panel {
	padding: 18px 0;
	background-color: var(--qiyu-color-surface);
	border-top: 1px solid var(--qiyu-color-border);
}

/* ==========================================================================
   7. 首页区块
   ========================================================================== */

/* —— 轮播头图 —— */
.qiyu-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--qiyu-color-ink);
}

.qiyu-hero--compact { min-height: 420px; }
.qiyu-hero--medium { min-height: 560px; }
.qiyu-hero--tall { min-height: 720px; }

.qiyu-hero--auto {
	aspect-ratio: 1920 / 800;
	min-height: 320px;
}

.qiyu-hero__track {
	position: absolute;
	inset: 0;
}

.qiyu-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background-color: var(--qiyu-color-ink);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s var(--qiyu-ease),
		visibility 0.7s var(--qiyu-ease);
}

/* 没有图片时用深色渐变兜底，仍然有质感 */
.qiyu-hero__slide:not([style*="background-image"]) {
	background-image: linear-gradient(135deg, #1a1e24 0%, #2b3138 45%, #3a2029 100%);
}

.qiyu-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.qiyu-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.qiyu-hero--overlay-none .qiyu-hero__scrim { background: none; }
.qiyu-hero--overlay-light .qiyu-hero__scrim {
	background: linear-gradient(90deg, rgba(12, 14, 18, 0.5) 0%, rgba(12, 14, 18, 0.18) 60%, transparent 100%);
}
.qiyu-hero--overlay-medium .qiyu-hero__scrim {
	background: linear-gradient(90deg, rgba(12, 14, 18, 0.72) 0%, rgba(12, 14, 18, 0.4) 55%, rgba(12, 14, 18, 0.12) 100%);
}
.qiyu-hero--overlay-heavy .qiyu-hero__scrim {
	background: linear-gradient(90deg, rgba(12, 14, 18, 0.88) 0%, rgba(12, 14, 18, 0.68) 55%, rgba(12, 14, 18, 0.42) 100%);
}

.qiyu-hero__content {
	position: relative;
	z-index: 3;
	max-width: 660px;
	margin-right: auto;
	padding-block: 72px;
	color: rgba(255, 255, 255, 0.86);
}

/*
 * 整块可点：铺满幻灯片的一层透明链接。
 * 层级要高于内容（3），否则文字区域点不到；它只在 slide 内部参与层叠，
 * 指示点与左右箭头（z-index 4，位于 slide 之外）仍然可以正常点击。
 */
.qiyu-hero__link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
}

.qiyu-hero__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

.qiyu-hero__title {
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(1.85rem, 4.2vw, 3.15rem);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.02em;
}

.qiyu-hero__text {
	max-width: 540px;
	margin: 0 0 30px;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.82);
}

.qiyu-hero__actions {
	position: relative;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.qiyu-hero__hint {
	margin: 26px 0 0;
	padding: 12px 16px;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px dashed rgba(255, 255, 255, 0.28);
	border-radius: var(--qiyu-radius-sm);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.875rem;
	line-height: 1.6;
}

.qiyu-hero__hint strong {
	color: #fff;
}

/* 指示点 */
.qiyu-hero__dots {
	position: absolute;
	bottom: 26px;
	left: 50%;
	z-index: 4;
	display: flex;
	gap: 10px;
	transform: translateX(-50%);
}

.qiyu-hero__dot {
	width: 30px;
	height: 4px;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.4);
	border: 0;
	border-radius: var(--qiyu-radius-pill);
	cursor: pointer;
	transition: width var(--qiyu-duration-fast) var(--qiyu-ease),
		background-color var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-hero__dot:hover {
	background-color: rgba(255, 255, 255, 0.7);
}

.qiyu-hero__dot.is-active {
	width: 46px;
	background-color: #fff;
}

/* 左右箭头 */
.qiyu-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity var(--qiyu-duration) var(--qiyu-ease),
		background-color var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-hero:hover .qiyu-hero__arrow,
.qiyu-hero:focus-within .qiyu-hero__arrow {
	opacity: 1;
}

.qiyu-hero__arrow:hover {
	background-color: var(--qiyu-color-primary);
	border-color: var(--qiyu-color-primary);
}

.qiyu-hero__arrow--prev { left: 24px; }
.qiyu-hero__arrow--next { right: 24px; }

/* —— 产品选型：正方形缩略图 + 标题，不放摘要与日期 —— */
.qiyu-grid--products {
	gap: 28px 24px;
}

.qiyu-grid--products .qiyu-card__body {
	padding: 16px 18px 20px;
}

.qiyu-grid--products .qiyu-card__title {
	margin-bottom: 0;
	font-size: 1rem;
	line-height: 1.5;
}

.qiyu-grid--products .qiyu-card__media {
	aspect-ratio: 4 / 3;
}

/* 产品卡：图片用 1:1 正方形，上下左右留白一致，一排看过去才整齐 */
.qiyu-card--product .qiyu-card__media,
.qiyu-grid--products .qiyu-card--product .qiyu-card__media {
	aspect-ratio: 1 / 1;
	background-color: var(--qiyu-color-surface);
}

/*
 * 产品图多为白底实拍，用 contain 完整显示而不是裁切，
 * 选型时能看清整个元件的轮廓。
 */
.qiyu-card--product .qiyu-card__media img {
	object-fit: contain;
	padding: 10px;
}

.qiyu-card--product .qiyu-card__media--empty svg {
	opacity: 0.75;
}

/* 产品卡不做整卡位移，鼠标扫过一排时不会晃眼 */
.qiyu-card--product:hover {
	transform: none;
	border-color: rgba(200, 16, 46, 0.35);
	box-shadow: var(--qiyu-shadow-sm);
}

/*
 * 产品标题只留一行。
 *
 * 产品名长短差很多（「CDQ0S 双电源」vs「小型漏电断路器型号系列汇总」），
 * 允许换行会让同一排卡片高低不齐，一排图看过去节奏就散了。
 * 这里用 nowrap + 省略号，超出部分直接截掉。
 */
.qiyu-card--product .qiyu-card__title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.qiyu-card--product:hover .qiyu-card__media img {
	transform: none;
}

/* —— 公司简介 —— */
.qiyu-about {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.qiyu-about--has-media {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* 图片在右时，把图片列推到第二列 */
.qiyu-about--media-right .qiyu-about__media {
	order: 2;
}

.qiyu-about__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--qiyu-radius-lg);
	box-shadow: var(--qiyu-shadow-md);
}

/*
 * 配图按原比例显示，不强行套固定比例。
 *
 * 套 9:7 再用 object-fit:cover 的话，一张 1920×358 的横幅会被放大 2 倍以上再裁掉大半，
 * 既糊又丢内容。这里只兜一个最小高度和一个最大高度：
 * - min-height 320px：1920×358 这类超扁横幅如果只写 height:auto，在 572px 宽的栏里
 *   只有 107px 高，看着像一条色带；配合 object-fit:cover 裁一刀反而更像个配图。
 * - max-height 620px：竖版长图不至于把整个区块撑开。
 */
.qiyu-about__media img {
	width: 100%;
	height: auto;
	min-height: 320px;
	max-height: 620px;
	object-fit: cover;
}

/* 图片左下角一小块品牌色装饰，让画面不呆板 */
.qiyu-about__media::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 96px;
	height: 6px;
	background-color: var(--qiyu-color-primary);
}

.qiyu-about__title {
	margin: 0 0 18px;
	font-size: clamp(1.3rem, 2vw, 1.7rem);
}

.qiyu-about__content {
	margin-bottom: 26px;
	color: var(--qiyu-color-text);
}

.qiyu-about__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* —— 数据展示 —— */
.qiyu-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.qiyu-stats__item {
	margin: 0;
	padding: 8px 16px;
}

.qiyu-stats__number {
	margin: 0 0 8px;
	color: #fff;
	font-family: var(--qiyu-font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.qiyu-stats__label {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9375rem;
}

/* —— 合作客户 —— */
.qiyu-partners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center;
}

.qiyu-partners__item {
	margin: 0;
}

.qiyu-partners__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 92px;
	padding: 16px;
	background-color: var(--qiyu-color-white);
	border: 1px solid var(--qiyu-color-border);
	border-radius: var(--qiyu-radius);
	transition: border-color var(--qiyu-duration-fast) var(--qiyu-ease),
		box-shadow var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-partners__link:hover {
	border-color: rgba(200, 16, 46, 0.35);
	box-shadow: var(--qiyu-shadow-sm);
}

.qiyu-partners__link img {
	max-height: 48px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter var(--qiyu-duration-fast) var(--qiyu-ease),
		opacity var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-partners__link:hover img {
	filter: none;
	opacity: 1;
}

/* —— 行动号召 —— */
.qiyu-cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 52px 56px;
	background-color: var(--qiyu-color-ink);
	border-radius: var(--qiyu-radius-lg);
	overflow: hidden;
}

/* 右侧一块品牌色光晕，避免整块死黑 */
.qiyu-cta::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -8%;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(200, 16, 46, 0.5) 0%, transparent 68%);
	pointer-events: none;
}

.qiyu-cta__body {
	position: relative;
	flex: 1 1 380px;
}

.qiyu-cta__title {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
}

.qiyu-cta__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.74);
}

.qiyu-cta__actions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.qiyu-cta__phone {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 20px 0 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9375rem;
}

.qiyu-cta__phone a {
	color: #fff;
	font-weight: 700;
	font-size: 1.125rem;
}

.qiyu-cta__phone a:hover {
	color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   8. 内容排版
   ========================================================================== */

.qiyu-entry {
	font-size: 1.0625rem;
	line-height: 1.85;
}

.qiyu-entry > * + * {
	margin-top: 1.2em;
}

.qiyu-entry h2,
.qiyu-entry h3,
.qiyu-entry h4 {
	margin-top: 1.8em;
	margin-bottom: 0.6em;
}

.qiyu-entry h2 {
	padding-left: 14px;
	border-left: 4px solid var(--qiyu-color-primary);
}

.qiyu-entry a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.qiyu-entry img {
	border-radius: var(--qiyu-radius-sm);
}

/*
 * 正文里的图片默认最多铺满栏宽（全局 img 的 max-width 保证不放大）。
 * 手动左/右浮动的图另给一个宽度上限，否则一张大图浮起来会把整段文字挤成窄条。
 */
.qiyu-entry img.alignleft,
.qiyu-entry img.alignright {
	max-width: 46%;
}

.qiyu-entry img.aligncenter {
	margin-inline: auto;
}

.qiyu-entry ul,
.qiyu-entry ol {
	padding-left: 1.5em;
}

.qiyu-entry li + li {
	margin-top: 0.4em;
}

.qiyu-entry blockquote {
	padding: 20px 24px;
	background-color: var(--qiyu-color-surface);
	border-left: 4px solid var(--qiyu-color-primary);
	border-radius: 0 var(--qiyu-radius-sm) var(--qiyu-radius-sm) 0;
}

/* 图片说明 */
.wp-caption,
.wp-block-image figcaption {
	max-width: 100%;
	margin-top: 8px;
	color: var(--qiyu-color-muted);
	font-size: 0.875rem;
	text-align: center;
}

/* 相册 */
.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 1.6em;
}

.gallery-item {
	margin: 0;
}

.gallery-icon img {
	width: 100%;
}

.gallery-caption {
	margin-top: 6px;
	color: var(--qiyu-color-muted);
	font-size: 0.8125rem;
	text-align: center;
}

/* WordPress 默认对齐类 */
.alignleft {
	float: left;
	margin: 0 24px 16px 0;
}

.alignright {
	float: right;
	margin: 0 0 16px 24px;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	margin-inline: calc((var(--qiyu-container) - 100vw) / 2);
	max-width: none;
}

/* 满宽区块：突破容器限制 */
.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* 让满宽区块内部依然有左右留白 */
.alignfull > * {
	max-width: var(--qiyu-container);
	margin-inline: auto;
	padding-inline: var(--qiyu-gutter);
}

.wp-block-button__link {
	border-radius: var(--qiyu-radius-sm);
}

/*
 * 刻意不给置顶文章加角标。
 * 首页的产品/资讯区块讲的是「展示」，一个红色「置顶」角标会把标题挤短，
 * 也让同一排卡片的标题起点不一致。排序交给后台的置顶设置即可。
 */

/* —— 文章详情 —— */
.qiyu-single__head {
	padding-block: 44px 32px;
	background-color: var(--qiyu-color-surface);
	border-bottom: 1px solid var(--qiyu-color-border);
}

.qiyu-single__title {
	max-width: 900px;
	margin: 0 0 18px;
	font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.qiyu-single__hero {
	max-width: var(--qiyu-container);
	margin: 0 auto;
	padding-inline: var(--qiyu-gutter);
}

/*
 * 主图按原图尺寸显示，不做放大。
 *
 * 这里原来是 width:100%：一张 352px 的产品图会被硬拉到 1200px 满栏，
 * 既糊又占满首屏。改成 width:auto 后小图保持原尺寸居中，
 * 大图仍自适应栏宽，再加 max-height 兜住竖图与超宽图。
 */
.qiyu-single__hero img {
	width: auto;
	max-width: 100%;
	max-height: 460px;
	margin: 32px auto 0;
	border-radius: var(--qiyu-radius-lg);
}

.qiyu-single__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 36px;
	font-size: 0.875rem;
}

.qiyu-single__tags-label {
	color: var(--qiyu-color-muted);
}

.qiyu-single__tags a {
	padding: 4px 12px;
	background-color: var(--qiyu-color-surface);
	border-radius: var(--qiyu-radius-pill);
	color: var(--qiyu-color-text);
	font-size: 0.8125rem;
}

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

/* 上一篇 / 下一篇：两个纯链接，不带标题，省掉一整行高度 */
.qiyu-postnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid var(--qiyu-color-border);
}

.qiyu-postnav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--qiyu-color-ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

.qiyu-postnav__link:hover {
	color: var(--qiyu-color-primary);
}

.qiyu-postnav__link--next {
	margin-left: auto;
}

/* 复用的右箭头，上一篇翻转成左箭头 */
.qiyu-postnav__link--prev .qiyu-icon {
	transform: rotate(180deg);
}

/* 相关阅读 */
.qiyu-related {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--qiyu-color-border);
}

.qiyu-related__title {
	margin-bottom: 26px;
	font-size: 1.25rem;
}

/* 纯标题式相关阅读：一行一条，方便快速扫读 */
.qiyu-related__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qiyu-related__item {
	position: relative;
	margin: 0;
	padding: 9px 0 9px 22px;
	border-bottom: 1px dashed var(--qiyu-color-border);
	list-style: none;
}

.qiyu-related__item:last-child {
	border-bottom: 0;
}

/* 自绘小三角代替默认圆点，颜色跟着品牌色走 */
.qiyu-related__item::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	margin-top: -4px;
	border: 4px solid transparent;
	border-left-color: var(--qiyu-color-primary);
	opacity: 0.45;
	transition: opacity var(--qiyu-duration-fast) var(--qiyu-ease),
		transform var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-related__item:hover::before {
	opacity: 1;
	transform: translateX(2px);
}

.qiyu-related__link {
	color: var(--qiyu-color-ink-soft);
	font-size: 0.9375rem;
	transition: color var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-related__link:hover {
	color: var(--qiyu-color-primary);
}

/* —— 单页 —— */
.qiyu-page__head {
	padding-block: 44px 32px;
	background-color: var(--qiyu-color-surface);
	border-bottom: 1px solid var(--qiyu-color-border);
}

.qiyu-page__head--inline {
	margin-bottom: 32px;
}

.qiyu-page__title {
	margin: 0;
	font-size: clamp(1.6rem, 3vw, 2.3rem);
}

/* 固定页主图与文章主图同规格：留白放在容器上，图片本身不放大、居中、限高。 */
.qiyu-page__hero {
	max-width: var(--qiyu-container);
	margin: 0 auto;
	padding-inline: var(--qiyu-gutter);
}

.qiyu-page__hero img {
	width: auto;
	max-width: 100%;
	max-height: 460px;
	margin: 32px auto 0;
	border-radius: var(--qiyu-radius-lg);
}

.qiyu-page--full .qiyu-entry {
	padding-block: 48px 0;
}

/* —— 分类筛选条 —— */
.qiyu-filter {
	margin-bottom: 36px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--qiyu-color-border);
}

.qiyu-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qiyu-filter__item {
	margin: 0;
}

.qiyu-filter__link {
	display: inline-block;
	padding: 10px 18px;
	border-bottom: 2px solid transparent;
	color: var(--qiyu-color-text);
	font-size: 0.9375rem;
	font-weight: 500;
}

.qiyu-filter__link:hover {
	color: var(--qiyu-color-primary);
}

.qiyu-filter__link.is-active {
	border-bottom-color: var(--qiyu-color-primary);
	color: var(--qiyu-color-primary);
	font-weight: 600;
}

/* —— 归档头部 —— */
/* 栏目页只有面包屑（大标题对屏幕阅读器可见），所以不留分隔线和大段留白。 */
.qiyu-archive__head {
	margin-bottom: 26px;
}

.qiyu-archive__title {
	margin: 0 0 10px;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.qiyu-archive__desc {
	max-width: 760px;
	color: var(--qiyu-color-muted);
}

/* —— 列表样式（单列图文） —— */
.blog-layout-list .qiyu-loop {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.blog-layout-list .qiyu-card {
	flex-direction: row;
}

.blog-layout-list .qiyu-card__media {
	flex: 0 0 300px;
	aspect-ratio: auto;
	min-height: 180px;
}

.blog-layout-list .qiyu-card__body {
	padding: 24px 28px;
}

.blog-layout-list .qiyu-card__title {
	font-size: 1.1875rem;
}

/* —— 404 —— */
.qiyu-404 {
	max-width: 820px;
	margin: 0 auto;
	padding-block: 72px 88px;
	text-align: center;
}

.qiyu-404__code {
	margin: 0;
	color: var(--qiyu-color-surface-2);
	font-family: var(--qiyu-font-heading);
	font-size: clamp(5rem, 16vw, 10rem);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.04em;
}

.qiyu-404__title {
	margin: -12px 0 14px;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.qiyu-404__text {
	max-width: 560px;
	margin: 0 auto 28px;
	color: var(--qiyu-color-muted);
}

.qiyu-404__search {
	max-width: 520px;
	margin: 0 auto 28px;
}

.qiyu-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.qiyu-404__recent {
	margin-top: 72px;
	padding-top: 40px;
	border-top: 1px solid var(--qiyu-color-border);
	text-align: left;
}

.qiyu-404__recent-title {
	margin-bottom: 26px;
	font-size: 1.25rem;
}

/* ==========================================================================
   9. 侧边栏与小工具
   ========================================================================== */

.qiyu-sidebar {
	position: sticky;
	top: calc(var(--qiyu-header-h) + 24px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.qiyu-widget {
	padding: 24px;
	background-color: var(--qiyu-color-white);
	border: 1px solid var(--qiyu-color-border);
	border-radius: var(--qiyu-radius);
}

.qiyu-widget__title {
	position: relative;
	margin: 0 0 18px;
	padding-bottom: 12px;
	font-size: 1.0625rem;
}

.qiyu-widget__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 3px;
	background-color: var(--qiyu-color-primary);
	border-radius: 2px;
}

.qiyu-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qiyu-widget li {
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px dashed var(--qiyu-color-border);
	font-size: 0.9375rem;
}

.qiyu-widget li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.qiyu-widget a {
	color: var(--qiyu-color-text);
}

.qiyu-widget a:hover {
	color: var(--qiyu-color-primary);
}

.qiyu-widget select {
	margin-top: 6px;
}

.qiyu-widget .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.qiyu-widget .tagcloud a {
	padding: 5px 12px;
	background-color: var(--qiyu-color-surface);
	border-radius: var(--qiyu-radius-pill);
	font-size: 0.8125rem !important;
}

.qiyu-widget .tagcloud a:hover {
	background-color: var(--qiyu-color-primary);
	color: #fff;
}

/* ==========================================================================
   9b. 栏目页、产品页与悬浮联系方式
   ========================================================================== */

/* —— 产品页顶部的横向分类链接 —— */
.qiyu-catlinks {
	margin-bottom: 28px;
	border-bottom: 1px solid var(--qiyu-color-border);
}

.qiyu-catlinks__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0 0 14px;
	list-style: none;
}

.qiyu-catlinks__item {
	flex: 0 0 auto;
	margin: 0;
	list-style: none;
}

.qiyu-catlinks__link {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	background-color: var(--qiyu-color-surface);
	border-radius: var(--qiyu-radius-pill);
	color: var(--qiyu-color-ink-soft);
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color var(--qiyu-duration-fast) var(--qiyu-ease),
		color var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-catlinks__link:hover {
	background-color: var(--qiyu-color-surface-2);
	color: var(--qiyu-color-primary);
}

.qiyu-catlinks__link.is-current {
	background-color: var(--qiyu-color-primary);
	color: #fff;
}

/* —— 产品卡片：缩略图 + 标题，图片完整显示不裁剪 —— */
.qiyu-grid--product {
	gap: 22px;
}

.qiyu-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--qiyu-color-white);
	border: 1px solid var(--qiyu-color-border);
	border-radius: var(--qiyu-radius);
	transition: transform var(--qiyu-duration) var(--qiyu-ease),
		box-shadow var(--qiyu-duration) var(--qiyu-ease),
		border-color var(--qiyu-duration) var(--qiyu-ease);
}

.qiyu-pcard:hover {
	border-color: rgba(200, 16, 46, 0.35);
	transform: translateY(-4px);
	box-shadow: var(--qiyu-shadow-md);
}

.qiyu-pcard__permalink {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.qiyu-pcard__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 16px;
	background-color: var(--qiyu-color-surface);
	color: var(--qiyu-color-ink);
	overflow: hidden;
}

/*
 * 产品图不裁剪：用 contain 完整显示，四周留白居中。
 * 高度必须显式给到 100%，否则 max-height 在 flex 容器里算不出参照高度。
 */
.qiyu-pcard__media img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform var(--qiyu-duration) var(--qiyu-ease);
}

.qiyu-pcard:hover .qiyu-pcard__media img {
	transform: scale(1.06);
}

.qiyu-pcard__empty {
	display: block;
	width: 100%;
	height: 100%;
}

.qiyu-pcard__empty svg {
	width: 100%;
	height: 100%;
}

.qiyu-pcard__title {
	margin: 0;
	padding: 16px 18px;
	border-top: 1px solid var(--qiyu-color-border);
	font-size: 1rem;
	line-height: 1.45;
	text-align: center;
}

.qiyu-pcard__title a {
	position: relative;
	z-index: 3;
	display: block;
	color: inherit;
}

.qiyu-pcard__title a:hover {
	color: var(--qiyu-color-primary);
}

/* —— 栏目页列表行：左侧日期徽标 + 右侧标题摘要 —— */
.qiyu-rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.qiyu-rowpost {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	padding: 22px 24px;
	background-color: var(--qiyu-color-white);
	border: 1px solid var(--qiyu-color-border);
	border-radius: var(--qiyu-radius);
	transition: border-color var(--qiyu-duration) var(--qiyu-ease),
		box-shadow var(--qiyu-duration) var(--qiyu-ease);
}

.qiyu-rowpost:hover {
	border-color: rgba(200, 16, 46, 0.3);
	box-shadow: var(--qiyu-shadow-sm);
}

.qiyu-rowpost__side {
	flex: 0 0 auto;
}

/*
 * 列表行里的日期徽标竖排并装进一个浅色方块，扫读时一眼定位。
 *
 * 底色用品牌色淡调，不用 --qiyu-color-surface：首页「技术分享」区块本身
 * 就铺着 surface 底色，方块会跟背景融成一片，两条资讯的日期一条看得见、
 * 一条看不见。淡红在白色和浅灰底上都立得起来，也和红色的日号同源。
 */
.qiyu-rowpost__side .qiyu-datebadge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 74px;
	margin: 0;
	padding: 12px 0;
	background-color: var(--qiyu-color-primary-soft);
	border-radius: var(--qiyu-radius-sm);
}

.qiyu-rowpost__side .qiyu-datebadge__day {
	font-size: 1.75rem;
}

.qiyu-rowpost__side .qiyu-datebadge__ym {
	font-size: 0.75rem;
}

.qiyu-rowpost__body {
	flex: 1 1 auto;
	min-width: 0;
}

.qiyu-rowpost__title {
	margin: 0 0 8px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.qiyu-rowpost__title a {
	color: inherit;
}

.qiyu-rowpost__title a:hover {
	color: var(--qiyu-color-primary);
}

/*
 * 摘要固定两行。
 *
 * 摘要按字数截断，汉字与英文混排时行数会在 2～3 行之间跳，
 * 同一排的两条资讯标题、日期块就对不齐。这里按行截断兜底，
 * 多出来的部分用省略号收掉，版面整齐。
 */
.qiyu-rowpost__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	color: var(--qiyu-color-muted);
	font-size: 0.9375rem;
	line-height: 1.7;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/*
 * 首页资讯区块（技术分享 / 最近动态）关掉缩略图时的样子：
 * 网格里放「日期块 + 标题 + 摘要」，去掉卡片的边框与底色，
 * 让标题成为唯一的重心，一排能扫过好几条。
 */
.qiyu-grid--rowcards {
	gap: 6px 52px;
	align-items: start;
}

.qiyu-grid--rowcards .qiyu-rowpost {
	padding: 20px 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
}

.qiyu-grid--rowcards .qiyu-rowpost:hover {
	box-shadow: none;
}

.qiyu-grid--rowcards .qiyu-rowpost__title {
	font-size: 1.0625rem;
}

/* —— 列表页左侧「推荐」栏 —— */
.qiyu-rail {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.qiyu-panel {
	padding: 22px;
	background-color: var(--qiyu-color-white);
	border: 1px solid var(--qiyu-color-border);
	border-radius: var(--qiyu-radius);
}

.qiyu-panel__title {
	position: relative;
	margin: 0 0 18px;
	padding-bottom: 12px;
	font-size: 1.0625rem;
}

.qiyu-panel__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 3px;
	background-color: var(--qiyu-color-primary);
	border-radius: 2px;
}

.qiyu-reco {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qiyu-reco__item {
	margin: 0 0 14px;
	list-style: none;
}

.qiyu-reco__item:last-child {
	margin-bottom: 0;
}

.qiyu-reco__link {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--qiyu-color-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.qiyu-reco__thumb {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	background-color: var(--qiyu-color-surface);
	border-radius: var(--qiyu-radius-sm);
	color: var(--qiyu-color-muted);
	overflow: hidden;
}

.qiyu-reco__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 标题最多两行，超出的省略，保证每项高度一致 */
.qiyu-reco__name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: color var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-reco__link:hover .qiyu-reco__name {
	color: var(--qiyu-color-primary);
}

.qiyu-panel__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 18px;
	color: var(--qiyu-color-primary);
	font-size: 0.875rem;
	font-weight: 600;
}

.qiyu-panel__more .qiyu-icon {
	transition: transform var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-panel__more:hover .qiyu-icon {
	transform: translateX(3px);
}

/*
 * 列表页把「推荐」栏放到左侧。
 * 结构上主体仍在前面（对读屏与 SEO 更自然），这里用显式网格位置把它换到右边，
 * 不去改 DOM 顺序。
 */
.qiyu-layout--rail-left {
	grid-template-columns: 300px minmax(0, 1fr);
}

.qiyu-layout--rail-left .qiyu-rail {
	grid-column: 1;
	grid-row: 1;
}

.qiyu-layout--rail-left .qiyu-layout__main {
	grid-column: 2;
	grid-row: 1;
}

/* —— 全站悬浮联系方式 —— */
.qiyu-float {
	position: fixed;
	/*
	 * 视口够宽时把悬浮栏推进内容区外侧的留白里，不去压正文；
	 * 视口不够宽（算出来是负数）时退回贴右边固定。
	 * 1240 内容宽 + 两侧 24 间距 + 46 按钮宽 + 18 边距 ≈ 1400px 是临界点。
	 */
	right: max(18px, calc((100vw - var(--qiyu-container)) / 2 - 64px));
	top: 50%;
	z-index: var(--qiyu-z-totop);
	display: flex;
	flex-direction: column;
	gap: 8px;
	transform: translateY(-50%);
}

.qiyu-float__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qiyu-float__cell {
	margin: 0;
	list-style: none;
}

.qiyu-float__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	/*
	 * 用 surface-2 而不是纯白：白底 + 极浅边框压在白色正文上几乎看不见，
	 * 访客得凑近才认得出这是按钮。这一档浅灰是整份样式里最淡的有色底，
	 * 既不抢正文，又能和页面留白分出层次。
	 */
	background-color: var(--qiyu-color-surface-2);
	border: 1px solid var(--qiyu-color-border);
	border-radius: var(--qiyu-radius-sm);
	color: var(--qiyu-color-ink-soft);
	font: inherit;
	cursor: pointer;
	box-shadow: var(--qiyu-shadow-sm);
	transition: background-color var(--qiyu-duration-fast) var(--qiyu-ease),
		border-color var(--qiyu-duration-fast) var(--qiyu-ease),
		color var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-float__item:hover,
.qiyu-float__item:focus-visible {
	background-color: var(--qiyu-color-primary);
	border-color: var(--qiyu-color-primary);
	color: #fff;
}

.qiyu-float__icon {
	display: inline-flex;
}

/* 号码气泡：挂在按钮左侧，悬停或聚焦时滑出 */
.qiyu-float__text {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	z-index: 1;
	padding: 6px 12px;
	background-color: var(--qiyu-color-ink);
	border-radius: var(--qiyu-radius-sm);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%) translateX(6px);
	pointer-events: none;
	box-shadow: var(--qiyu-shadow-md);
	transition: opacity var(--qiyu-duration-fast) var(--qiyu-ease),
		visibility var(--qiyu-duration-fast) var(--qiyu-ease),
		transform var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-float__text::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -5px;
	border: 5px solid transparent;
	border-left-color: var(--qiyu-color-ink);
}

.qiyu-float__item:hover .qiyu-float__text,
.qiyu-float__item:focus-visible .qiyu-float__text {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

/*
 * 「返回顶部」默认收起，滚动一段距离后由 main.js 加上 .is-visible。
 * 三条过渡属性写全，避免被上面 .qiyu-float__item 的过渡覆盖掉。
 */
.qiyu-float__item--top {
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--qiyu-duration) var(--qiyu-ease),
		visibility var(--qiyu-duration) var(--qiyu-ease),
		transform var(--qiyu-duration) var(--qiyu-ease),
		background-color var(--qiyu-duration-fast) var(--qiyu-ease),
		border-color var(--qiyu-duration-fast) var(--qiyu-ease),
		color var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-float__item--top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* ==========================================================================
   9.5 手机底部快捷栏
   --------------------------------------------------------------------------
   宽屏不显示，窄屏由下面的媒体查询打开。它替代右侧悬浮联系方式：
   手机屏幅窄，悬浮栏会一直压住正文，而拇指天然在屏幕底部。
   ========================================================================== */

.qiyu-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--qiyu-z-bar);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background-color: rgba(255, 255, 255, 0.97);
	border-top: 1px solid var(--qiyu-color-border);
	box-shadow: 0 -4px 18px rgba(16, 20, 28, 0.07);
}

/* 支持的设备上做成毛玻璃，滚动到图片上时不至于切出一条生硬的白带 */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
	.qiyu-bar {
		/*
		 * 透明度别压太低：底栏正下方常常是产品白底图与黑色标题，
		 * 太透会让「首页」「电话」这些字和下面的内容糊在一起。
		 */
		background-color: rgba(255, 255, 255, 0.95);
		-webkit-backdrop-filter: blur(10px) saturate(1.4);
		backdrop-filter: blur(10px) saturate(1.4);
	}
}

.qiyu-bar__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qiyu-bar__cell {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	list-style: none;
}

.qiyu-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 100%;
	height: 54px;
	padding: 0 4px;
	background: none;
	border: 0;
	color: var(--qiyu-color-text);
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-bar__item:active,
.qiyu-bar__item.is-current {
	color: var(--qiyu-color-primary);
}

.qiyu-bar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.qiyu-bar__label {
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ==========================================================================
   10. 页脚
   ========================================================================== */

.qiyu-footer {
	margin-top: auto;
	background-color: var(--qiyu-color-ink);
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.9375rem;
}

.qiyu-footer__widgets {
	padding-block: 56px 0;
}

.qiyu-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 36px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.qiyu-footer .qiyu-widget {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.qiyu-footer .qiyu-widget__title {
	color: #fff;
}

.qiyu-footer .qiyu-widget li {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

.qiyu-footer .qiyu-widget a {
	color: rgba(255, 255, 255, 0.68);
}

.qiyu-footer .qiyu-widget a:hover {
	color: #fff;
}

.qiyu-footer__main {
	padding-block: 56px;
}

.qiyu-footer__main-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 48px;
}

.qiyu-footer__logo .qiyu-brand__name {
	color: #fff;
}

.qiyu-footer__logo .custom-logo-link {
	display: block;
	line-height: 0;
}

.qiyu-footer__about {
	max-width: 520px;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.75;
}

.qiyu-footer__heading {
	margin: 0 0 20px;
	color: #fff;
	font-size: 1.0625rem;
}

.qiyu-footer__hint {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.875rem;
}

.qiyu-footer__hint strong {
	color: rgba(255, 255, 255, 0.85);
}

.qiyu-contactlist {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qiyu-contactlist__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.qiyu-contactlist__icon {
	display: flex;
	flex: 0 0 auto;
	color: var(--qiyu-color-primary);
}

.qiyu-contactlist__body a {
	color: rgba(255, 255, 255, 0.82);
}

.qiyu-contactlist__body a:hover {
	color: #fff;
}

.qiyu-footer__qr {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
}

.qiyu-footer__qr img {
	width: 120px;
	height: 120px;
	padding: 6px;
	background-color: #fff;
	border-radius: var(--qiyu-radius-sm);
}

.qiyu-footer__qr span {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.8125rem;
}

.qiyu-footer__map {
	margin-bottom: 0;
	line-height: 0;
	filter: grayscale(0.3);
}

.qiyu-footer__map iframe {
	width: 100%;
	min-height: 280px;
	border: 0;
}

.qiyu-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/*
 * 关掉「品牌与联系方式」那一栏后，页脚只剩底栏。
 * 这时底栏要自己撑起整块页脚，去掉那条分隔线、加大上下留白，
 * 否则看起来像上半部分被裁掉了。
 */
.qiyu-footer--slim .qiyu-footer__bar {
	border-top: 0;
}

.qiyu-footer--slim .qiyu-footer__bar-inner {
	padding-block: 30px;
}

.qiyu-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 22px;
}

.qiyu-footer__copyright,
.qiyu-footer__legal {
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.8125rem;
}

.qiyu-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.qiyu-footer__legal a {
	color: rgba(255, 255, 255, 0.55);
}

.qiyu-footer__legal a:hover {
	color: #fff;
}

/* —— 社交图标 —— */
.qiyu-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.qiyu-social__item {
	margin: 0;
}

.qiyu-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.08);
	border-radius: var(--qiyu-radius-sm);
	color: rgba(255, 255, 255, 0.8);
	transition: background-color var(--qiyu-duration-fast) var(--qiyu-ease),
		color var(--qiyu-duration-fast) var(--qiyu-ease),
		transform var(--qiyu-duration-fast) var(--qiyu-ease);
}

.qiyu-social__link:hover {
	background-color: var(--qiyu-color-primary);
	color: #fff;
	transform: translateY(-2px);
}

.qiyu-social--sm {
	gap: 6px;
	margin: 0;
}

.qiyu-social--sm .qiyu-social__link {
	width: 30px;
	height: 30px;
	background-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   11. 响应式
   ========================================================================== */

/* —— 大平板：侧边栏落到下方 —— */
@media (max-width: 1100px) {
	.qiyu-layout--with-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	.qiyu-sidebar {
		position: static;
	}

	/*
	 * 左侧「推荐」栏塌到单列时必须把显式网格位置清掉，
	 * 否则它仍被钉在第 1 行、压在主内容上面。
	 */
	.qiyu-layout--rail-left .qiyu-rail,
	.qiyu-layout--rail-left .qiyu-layout__main {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

/* —— 平板：导航折叠为抽屉 —— */
@media (max-width: 1024px) {
	:root {
		--qiyu-section-y: 52px;
	}

	.qiyu-nav-toggle {
		display: flex;
	}

	.qiyu-header__cta span {
		display: none;
	}

	.qiyu-header__cta {
		padding: 11px 12px;
	}

	/* 抽屉式导航 */
	.qiyu-nav {
		position: fixed;
		top: 0;
		right: 0;
		z-index: var(--qiyu-z-nav);
		display: flex;
		flex-direction: column;
		width: min(340px, 86vw);
		height: 100%;
		margin: 0;
		padding: 88px 20px 40px;
		background-color: var(--qiyu-color-white);
		overflow-y: auto;
		transform: translateX(102%);
		box-shadow: var(--qiyu-shadow-lg);
		transition: transform var(--qiyu-duration) var(--qiyu-ease);
	}

	.nav-open .qiyu-nav {
		transform: translateX(0);
	}

	/*
	 * 抽屉打开时把页头整体抬到遮罩之上。
	 * 必须抬页头而不是只抬 .qiyu-nav —— 页头自身带 z-index 会形成层叠上下文，
	 * 抽屉作为它的后代，层级再高也超不过兄弟节点上的遮罩。
	 * 同时页头保持可见，关闭按钮才一直点得到。
	 */
	.nav-open .qiyu-header {
		z-index: 110;
	}

	/*
	 * 但只抬页头还不够：抽屉是页头里的后代（页头 > 容器 > 导航），
	 * 祖先的 z-index 管不到后代之间的先后，所以抽屉那一层仍然压着汉堡按钮。
	 * 抽屉打开时汉堡的三条线会变成叉，它就是唯一的关闭控件，
	 * 必须单独提到抽屉之上；否则手机上（没有 Esc 键）只能去点左边那条
	 * 55px 宽的窄遮罩，等于关不掉。
	 */
	.nav-open .qiyu-nav-toggle {
		position: relative;
		z-index: calc(var(--qiyu-z-nav) + 1);
	}

	/*
	 * 抽屉铺满整个页头高度时，露在遮罩里的那半截 Logo 看着像污渍，
	 * 打开状态下干脆藏掉，只留右上角的关闭按钮。
	 */
	.nav-open .qiyu-brand {
		visibility: hidden;
	}

	.qiyu-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.qiyu-menu__item {
		border-bottom: 1px solid var(--qiyu-color-border);
	}

	.qiyu-menu__item--depth-0 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.qiyu-menu__item--depth-0 > .qiyu-menu__link {
		flex: 1 1 auto;
		padding: 15px 4px;
		border-radius: 0;
		font-size: 1rem;
	}

	.qiyu-menu__item.is-current > .qiyu-menu__link::after {
		display: none;
	}

	/* 移动端把展开按钮显示出来 */
	.qiyu-menu__item--has-children > .qiyu-menu__toggle {
		display: flex;
		flex: 0 0 auto;
		margin-left: auto;
	}

	.qiyu-submenu {
		position: static;
		width: 100%;
		min-width: 0;
		max-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		overflow: hidden;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: max-height var(--qiyu-duration) var(--qiyu-ease);
	}

	.qiyu-submenu.is-open {
		max-height: 1200px;
		padding-bottom: 10px;
	}

	/* 移动端不再依赖 hover */
	.qiyu-menu__item--has-children:hover > .qiyu-submenu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.qiyu-menu__item--has-children:not(.is-open):hover > .qiyu-submenu {
		max-height: 0;
	}

	.qiyu-submenu .qiyu-menu__item {
		border-bottom: 0;
	}

	.qiyu-submenu .qiyu-menu__link {
		padding: 11px 4px 11px 18px;
		font-size: 0.9375rem;
		color: var(--qiyu-color-text);
	}

	.qiyu-submenu .qiyu-submenu .qiyu-menu__link {
		padding-left: 34px;
	}

	/* 抽屉里补上联系方式，方便访客直接联系 */
	.qiyu-nav__hint {
		margin-top: 20px;
	}

	/* 桌面端悬浮箭头在触屏上没意义 */
	.qiyu-hero__arrow {
		display: none;
	}

	/* 两栏区块落为单栏 */
	.qiyu-about--has-media {
		grid-template-columns: minmax(0, 1fr);
	}

	.qiyu-about--media-right .qiyu-about__media {
		order: 0;
	}

	.qiyu-about__media img {
		min-height: 220px;
	}

	.qiyu-cta {
		padding: 40px 32px;
	}

	.qiyu-footer__main-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.qiyu-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.qiyu-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.qiyu-loop--3,
	.qiyu-loop--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* —— 手机 —— */
@media (max-width: 767px) {
	:root {
		/*
		 * 手机上一屏能放的内容少，区块之间的留白从 40px 收到 24px。
		 * 好处是「产品选型」这类区块能连着出现，滚动节奏更紧凑；
		 * 代价是可读性略降，所以标题组与卡片间距保持独立，不跟着一起压。
		 */
		--qiyu-section-y: 24px;
		--qiyu-gutter: 18px;
		--qiyu-header-h: 66px;
	}

	/* 手机上页头只有 66px 高，logo 跟着收到 52px，别把汉堡按钮挤出去 */
	.qiyu-brand {
		max-width: 62vw;
	}

	.qiyu-brand .custom-logo {
		height: 52px;
	}

	/*
	 * 手机上把首屏头图压成一条窄横幅。
	 * 原尺寸（340 / 440 / 520）在 390pt 宽的屏幕里会吃掉半屏以上，
	 * 访客要滑一下才看得到「产品选型」，等于白占了一整屏。
	 * 这里只兜下限，标题过长时仍由内容把高度撑开，不会被裁掉。
	 */
	.qiyu-hero--compact { min-height: 170px; }
	.qiyu-hero--medium { min-height: 200px; }
	.qiyu-hero--tall { min-height: 240px; }
	.qiyu-hero--auto { aspect-ratio: 2 / 1; min-height: 0; }

	/* 手机上再压一档主图高度，别把标题和正文顶到屏幕外面去。 */
	.qiyu-single__hero img,
	.qiyu-page__hero img {
		max-height: 320px;
		margin-top: 22px;
	}

	/* 窄屏没有并排空间，浮动图直接铺满栏宽。 */
	.qiyu-entry img.alignleft,
	.qiyu-entry img.alignright {
		float: none;
		max-width: 100%;
		margin: 0 0 16px;
	}

	/* 头图压窄后，文字也得同步收一档，否则会顶出画面 */
	.qiyu-hero__content {
		max-width: 100%;
		padding-block: 22px;
	}

	.qiyu-hero__title {
		margin-bottom: 8px;
		font-size: 1.25rem;
		line-height: 1.28;
		letter-spacing: -0.01em;
	}

	.qiyu-hero__text {
		display: -webkit-box;
		margin-bottom: 14px;
		font-size: 0.8125rem;
		line-height: 1.55;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.qiyu-hero__actions {
		gap: 10px;
	}

	.qiyu-hero__actions .qiyu-btn {
		flex: 1 1 auto;
		padding: 9px 16px;
		font-size: 0.8125rem;
	}

	.qiyu-hero__hint {
		margin-top: 14px;
		padding: 8px 12px;
		font-size: 0.75rem;
	}

	.qiyu-hero__dots {
		bottom: 10px;
		gap: 7px;
	}

	/* 窄屏下叠成单列 */
	.qiyu-grid--2,
	.qiyu-grid--3,
	.qiyu-grid--4,
	.qiyu-loop--2,
	.qiyu-loop--3,
	.qiyu-loop--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 产品网格例外：单列时一张图占满整屏，双列更好逛 */
	.qiyu-grid--product,
	.qiyu-grid--products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 10px;
	}

	.qiyu-grid--products {
		gap: 14px 10px;
	}

	/*
	 * 手机上只显示前 N 张卡片，数量在「⑳ 手机端」里设。
	 * 用 nth-child 从第 N+1 个开始收起，桌面端不受影响；
	 * 隐藏的卡片图片是懒加载的，不滚到位置就不会下载。
	 */
	.qiyu-mlimit-2 > *:nth-child(n + 3),
	.qiyu-mlimit-3 > *:nth-child(n + 4),
	.qiyu-mlimit-4 > *:nth-child(n + 5),
	.qiyu-mlimit-6 > *:nth-child(n + 7) {
		display: none;
	}

	/* 其余网格（图文卡片、动态）也跟着收，一排两列时更连贯 */
	.qiyu-grid,
	.qiyu-loop,
	.qiyu-grid--rowcards {
		gap: 14px;
	}

	.qiyu-section__head {
		margin-bottom: 16px;
	}

	/* 内页正文区同样收紧上下留白，手机上一屏的利用率更高 */
	.qiyu-layout {
		gap: 24px;
		padding-block: 24px 44px;
	}

	/* 段间距统一收紧后，标题与副标题之间也别再撑着 */
	.qiyu-section__eyebrow {
		margin-bottom: 6px;
	}

	.qiyu-section__subtitle {
		margin-top: 8px;
	}

	/* 公司简介：图与文字在手机上是上下结构，间距按段落处理 */
	.qiyu-about {
		gap: 18px;
	}

	.qiyu-about__title {
		margin-bottom: 12px;
	}

	.qiyu-about__content {
		margin-bottom: 18px;
	}

	/* 数据区块：四格叠两行时不要留出半个屏 */
	.qiyu-stats {
		gap: 16px;
	}

	.qiyu-stats__item {
		padding: 4px 8px;
	}

	/* 合作客户：一屏两列，比单列一串卡片省版面 */
	.qiyu-partners {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.qiyu-partners__link {
		height: 74px;
		padding: 10px;
	}

	/* 单列图文在手机上恢复为上下结构 */
	.blog-layout-list .qiyu-card {
		flex-direction: column;
	}

	.blog-layout-list .qiyu-card__media {
		flex: 0 0 auto;
		aspect-ratio: 16 / 10;
		min-height: 0;
	}

	.blog-layout-list .qiyu-card__body {
		padding: 20px 22px;
	}

	.qiyu-cta {
		padding: 26px 20px;
		gap: 20px;
	}

	.qiyu-cta__actions {
		width: 100%;
	}

	.qiyu-cta__actions .qiyu-btn {
		flex: 1 1 auto;
	}

	/*
	 * 底栏在自己的基础上左右再留出一段。
	 *
	 * 「返回顶部」按钮是 fixed 定位（right 14 / bottom 66），页面滚到底时正好
	 * 落在页脚底栏这一行上：版权行显示成「……版权所」，就是最后一个字被按钮
	 * 盖住了（按钮底色与页脚同为深色，看起来像被截断）。
	 * 底栏左右各留出按钮宽度，文字就进不到那一块 —— 只留右侧会让居中失效，
	 * 所以左右一起给。
	 */
	.qiyu-footer__bar-inner {
		flex-direction: column;
		text-align: center;
		/*
		 * 这个元素同时挂着 .qiyu-container，写死 52px 会把容器的 18px 边距
		 * 一起替掉，实际只留 52px、文字右边仍然压到按钮底下。所以要在
		 * gutter 之上再叠 52px。
		 */
		padding-inline: calc(var(--qiyu-gutter) + 52px);
	}

	/* 备案号、地址这类长串没有空格，允许在任意位置折行，别撑出容器 */
	.qiyu-footer__copyright,
	.qiyu-footer__legal {
		overflow-wrap: anywhere;

		/*
		 * 留给按钮的空白把可用宽度压窄了，版权行会折成两行。
		 * 用 balance 让两行长度接近，避免出现末行只剩一个「有」字。
		 * 不支持的浏览器忽略这一行，仍然正常折行。
		 */
		text-wrap: pretty;
	}

	.qiyu-footer__legal {
		justify-content: center;
	}

	/*
	 * 手机上关掉右侧悬浮联系方式。
	 * 屏幕只有三百多点宽，46px 的悬浮条正好压住正文右侧；
	 * 联系方式改由底部快捷栏承担，触达位置还更顺手。
	 */
	.qiyu-float {
		display: none;
	}

	/* 悬浮栏退场后，快捷栏补位 */
	.qiyu-bar {
		display: block;
	}

	/* 给固定底栏让出高度，否则页脚最后一行会被盖住（54px 内容 + 1px 上边框） */
	body.has-mobile-bar {
		/*
		 * 底栏本体 55px（54 内容 + 1 上边框），这里多留 5px 余量。
		 * 手机浏览器的地址栏伸缩会让 visual viewport 比 layout viewport 矮几个像素，
		 * 留 55 时页脚最后一行的底边会正好贴着底栏上沿，实拍会压掉 4px。
		 */
		padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
	}

	.qiyu-rowpost {
		gap: 16px;
		padding: 18px;
	}

	.qiyu-rowpost__side .qiyu-datebadge {
		width: 60px;
		padding: 10px 0;
	}

	.qiyu-rowpost__side .qiyu-datebadge__day {
		font-size: 1.375rem;
	}

	.qiyu-pcard__media {
		padding: 10px;
	}

	.qiyu-pcard__title {
		padding: 12px;
		font-size: 0.9375rem;
	}

	.qiyu-catlinks {
		margin-bottom: 20px;
	}

	.qiyu-catlinks__link {
		padding: 7px 13px;
		font-size: 0.875rem;
	}

	.qiyu-searchform {
		flex-wrap: wrap;
	}

	.qiyu-searchform__submit {
		width: 100%;
	}

	/* 有底栏时返回顶部抬到底栏上方，别和快捷入口叠在一起 */
	.qiyu-totop {
		right: 14px;
		bottom: calc(66px + env(safe-area-inset-bottom, 0px));
	}

	body:not(.has-mobile-bar) .qiyu-totop {
		bottom: 16px;
	}

	/* 手机上的顶栏只留联系方式，宣传语收起 */
	.qiyu-topbar__notice {
		display: none;
	}

	.qiyu-topbar__inner {
		justify-content: center;
	}

	.qiyu-topbar__meta {
		margin-left: 0;
		gap: 14px;
	}

	.qiyu-topbar__link span {
		font-size: 0.75rem;
	}

	.qiyu-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.qiyu-404 {
		padding-block: 48px 64px;
	}

	.alignleft,
	.alignright {
		float: none;
		margin: 0 auto 16px;
	}
}

@media (max-width: 420px) {
	.qiyu-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.qiyu-brand__tagline {
		display: none;
	}
}

/* —— 打印 —— */
@media print {
	.qiyu-topbar,
	.qiyu-header,
	.qiyu-footer,
	.qiyu-totop,
	.qiyu-hero__dots,
	.qiyu-hero__arrow,
	.qiyu-sidebar,
	.qiyu-float,
	.qiyu-bar,
	.qiyu-postnav,
	.qiyu-related {
		display: none !important;
	}

	body {
		color: #000;
		font-size: 12pt;
	}

	a {
		color: #000;
	}
}

/* —— 尊重系统的「减弱动态效果」设置 —— */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.has-reveal [data-qiyu-reveal] {
		opacity: 1;
		transform: none;
	}

	.qiyu-card:hover,
	.qiyu-btn:hover {
		transform: none;
	}
}