@charset "UTF-8";
/**
 * 「验证码查看」区块 —— 前台样式。
 *
 * ══════════════════════════════════════════════════════════════════════
 *  本文件只保留三类东西
 * ══════════════════════════════════════════════════════════════════════
 *
 *  ① **外边距**与已解锁态（三个区块统一的收尾）；
 *  ② **JS 动态创建的元素**的样式 —— 二维码图片、骨架，以及状态行上的
 *     `is-*` 修饰类。这些类名写死在 content.js / pay.js 里，
 *     样式必须跟着那份契约走；
 *  ③ 六格输入框的少量收尾。
 *
 *  卡片骨架（头部、图标、标题、步骤、按钮、页脚、响应式、深色模式）
 *  全部在 `plugin/assets/blocks.css` 的 `.wxas-lock` 组件里，
 *  主题色由 `.wxas-lock--verify` 修饰类给出（蓝）。
 *
 *  ⚠️ **不要再往这里加布局规则。** 三个区块同页出现是常态
 *     （先扫码、再付积分、再付款），布局写三处必然出现「同一种卡片三个间距」。
 *
 *  ⚠️ 覆写主题色：`.wxas-lock--verify { --wxas-lock-accent: #…; }`。
 */

/* ==========================================================================
 *  1. 外边距
 * ========================================================================== */

.wxas-content-lock {
	margin: var(--wxas-lock-outer, 1.5em) 0;
}

/* ==========================================================================
 *  2. 二维码
 * ========================================================================== */

/*
 * 二维码盒、骨架、注入图、刷新按钮的样式**全部**在
 * `plugin/assets/blocks.css` 的 `.wxas-lock__qr*` 一节里 —— 三个带码的
 * 界面（验证码查看 / 支付查看 / 授权卡）共用同一份定义。
 *
 * ⚠️ 这里曾经单独写过一份 `.wxas-content-lock__qr-img` /
 *    `__qr-real` / `__qr-skeleton`，与付费墙那份是**同构的复制品** ——
 *    两处尺寸靠人工同步，「两个区块的二维码不一样」就是这么来的。
 *    已全部收进共享层，**不要在这里加回来**。
 *    要改二维码外观，改 `assets/blocks.css`。
 */

/* ==========================================================================
 *  3. 六格验证码输入
 * ========================================================================== */

/*
 * 版式（六列网格、正方形格子、等宽字、聚焦态）全部来自
 * `blocks.css` 的 `.wxas-lock__code`；这里只补 content 特有的两点。
 */
.wxas-content-lock__cell {
	appearance: none;
}

/* content.js 判定输入不合法时会加这个类。 */
.wxas-content-lock__cell.is-invalid {
	border-color: var(--wxas-lock-danger-fg);
	box-shadow: 0 0 0 2px var(--wxas-lock-danger-border);
}

/* ==========================================================================
 *  4. 状态行修饰
 * ========================================================================== */

/*
 * 状态语义色（is-ok / is-err，含失败提示的感叹号图标）**已全部移到
 * `plugin/assets/blocks.css`** —— 三个区块共用一套，不再各写一份。
 *
 * ⚠️ 不要在扩展里再加 `.is-*` 规则：共享层用的是
 *    `.wxas-lock .wxas-lock__status.is-err`（特异性更高），
 *    写在这里也不会生效，只会让人误以为改了有用。
 */

/* ==========================================================================
 *  5. 已解锁态
 * ========================================================================== */

.wxas-content-wrap {
	margin: var(--wxas-lock-outer, 1.5em) 0;
}

/* 已解锁后不再需要卡片的壳 —— 读者已经验证过了。 */
.wxas-content-unlocked {
	padding: 0;
	border: 0;
	background: none;
}

.wxas-content-body {
	color: inherit;
}