/* ===========================================================
   微信公众号验证码展示界面 — 前端样式
   支持：浅色 / 深色 / 跟随系统；容器宽度自适应堆叠（手机端）
   =========================================================== */

.wcr-display-wrap {
	container-type: inline-size;
	--c-bg: #ffffff;
	--c-border: #eceef1;
	--c-text: #1f2329;
	--c-muted: #7a818b;
	--c-accent: #eb5055;
	--c-accent-soft: #fdecec;
	--c-qr-bg: #ffffff;
	--c-shadow: 0 4px 20px rgba(20, 20, 40, .06);
}

/* 跟随系统：系统为深色时（data-theme=system 或未显式指定）使用深色变量 */
@media (prefers-color-scheme: dark) {
	.wcr-display-wrap[data-theme="system"] .wcr-display {
		--c-bg: #1e2126;
		--c-border: #2c3138;
		--c-text: #e8eaed;
		--c-muted: #9aa0a6;
		--c-accent: #ff6b70;
		--c-accent-soft: #3a2326;
		--c-shadow: 0 4px 24px rgba(0, 0, 0, .4);
	}
}

/* 强制深色 */
.wcr-display-wrap[data-theme="dark"] .wcr-display {
	--c-bg: #1e2126;
	--c-border: #2c3138;
	--c-text: #e8eaed;
	--c-muted: #9aa0a6;
	--c-accent: #ff6b70;
	--c-accent-soft: #3a2326;
	--c-shadow: 0 4px 24px rgba(0, 0, 0, .4);
}

.wcr-display {
	display: flex;
	gap: 22px;
	align-items: center;
	background: var(--c-bg);
	border: 2px dashed var(--c-border);
	border-radius: 16px;
	padding: 22px;
	box-shadow: var(--c-shadow);
	transition: border-color .25s ease, background .25s ease;
}

.wcr-display .qr-box {
	flex: 0 0 auto;
	width: 132px;
	height: 132px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--c-qr-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--c-border);
}

.wcr-display .qr-box img,
.wcr-display .qr-box svg {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.wcr-display .info {
	flex: 1 1 auto;
	min-width: 0;
}

.wcr-display .info .title {
	font-size: 16px;
	font-weight: 700;
	color: var(--c-text);
	margin-bottom: 8px;
}

.wcr-display .info .desc {
	font-size: 13.5px;
	color: var(--c-muted);
	margin-bottom: 14px;
}

.wcr-display .info .desc > div {
	line-height: 1.7;
}

.wcr-display .info .desc > div + div {
	margin-top: 3px;
}

.wcr-display .code-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.wcr-display .code-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--c-accent-soft);
	color: var(--c-accent);
	border-radius: 10px;
	padding: 9px 14px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 1px;
	border: 1px dashed var(--c-accent);
}

.wcr-display .code-pill .lbl {
	font-size: 11px;
	font-weight: 600;
	opacity: .8;
	letter-spacing: 0;
}

.wcr-display .copy-btn {
	border: 1px solid var(--c-border);
	background: var(--c-bg);
	color: var(--c-text);
	font-size: 12.5px;
	padding: 8px 12px;
	border-radius: 9px;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.wcr-display .copy-btn:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

.wcr-display .copy-btn.copied {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

/* 窄容器（手机 / 侧边栏）自动堆叠 */
@container (max-width: 460px) {
	.wcr-display {
		flex-direction: column;
		text-align: center;
		gap: 16px;
		padding: 20px 16px;
	}
	.wcr-display .qr-box {
		width: 150px;
		height: 150px;
	}
	.wcr-display .info {
		width: 100%;
	}
	.wcr-display .code-row {
		justify-content: center;
	}
}

/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
	.wcr-display,
	.wcr-display .copy-btn {
		transition: none;
	}
}