/**
 * B2 职业认证 · 前台样式
 *
 * 仿 B2 PRO 主题认证页设计语言：宽留白、柔阴影、圆角卡片、
 * 主题色变量驱动。暗色交给主题的反色处理。
 *
 * @package b2zy
 */

/* ==========================================================================
   外壳 & 容器
   ========================================================================== */

/*
 * 独立固定链接模式才有 .b2zy-page-wrap（短代码模式没有）。
 * 这里只做一层兜底，**真正的「居中 + 页边距」统一放在 .b2zy-wrap 上** ——
 * 因为 .b2zy-wrap 在两种模式下都存在。
 *
 * ★ 踩过的坑：把留白只写在 .b2zy-page-wrap 上时，短代码模式没有这一层，
 *   内容会直接贴到容器左边缘（用户反馈的「左边紧贴边框」）。
 */
.b2zy-page-wrap {
	max-width: 100%;
}

.b2zy-wrap {
	--b2zy-color: var(--b2color, #ff5c5c);
	--b2zy-radius: var(--b2radius, 12px);
	--b2zy-shadow: 0 2px 12px rgba(0, 0, 0, .06);
	--b2zy-shadow-hover: 0 6px 24px rgba(0, 0, 0, .1);
	--b2zy-border: #eceef1;
	--b2zy-border-light: #f5f6f8;
	--b2zy-text: #1a1d24;
	--b2zy-text-2: #555b66;
	--b2zy-text-3: #8a8f99;
	--b2zy-bg: #f7f8fa;
	max-width: 1140px;
	margin: 0 auto;
	/* ★ 页边距：桌面 32px（手机上逐级收紧，见下方媒体查询） */
	padding: 28px 32px 56px;
	box-sizing: border-box;
}

.b2zy-wrap * {
	box-sizing: border-box;
}

/* 卡片 / 面板基础 */
.b2zy-wrap .box,
.b2zy-box {
	background: #fff;
	padding: 28px;
	border-radius: var(--b2zy-radius, 12px);
	box-shadow: var(--b2zy-shadow, 0 2px 12px rgba(0, 0, 0, .06));
	border: 1px solid var(--b2zy-border, #eceef1);
}

.b2zy-dim {
	color: var(--b2zy-text-3, #8a8f99);
	font-size: 13px;
	line-height: 1.6;
}

/* ==========================================================================
   头部 Hero
   ========================================================================== */

.b2zy-hero {
	margin-bottom: 24px;
}

.b2zy-hero-title {
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 12px;
	line-height: 1.35;
	color: var(--b2zy-text, #1a1d24);
}

.b2zy-hero-intro {
	color: var(--b2zy-text-2, #555b66);
	font-size: 15px;
	line-height: 1.9;
}

.b2zy-hero-intro p {
	margin: 0 0 10px;
}

.b2zy-hero-intro p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   职业卡片网格
   ========================================================================== */

/*
 * 桌面 320px 起，1200px 宽时自然排成 3 列。
 * 卡片用 flex 竖排 + 底栏 margin-top:auto，让同一行的高度对齐。
 */
.b2zy-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
	margin-bottom: 28px;
}

.b2zy-card {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	position: relative;
}

.b2zy-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--b2zy-shadow-hover, 0 6px 24px rgba(0, 0, 0, .1));
	border-color: rgba(255, 92, 92, .35);
}

/* 一人只能认证一个职业：已有认证时，其它职业的卡片降调（仍可点进去看说明）。 */
.b2zy-card.is-blocked {
	opacity: .7;
}

.b2zy-card.is-blocked:hover {
	opacity: 1;
}

.b2zy-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.b2zy-card-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 52px;
}

.b2zy-card-icon-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--b2zy-color, #ff5c5c);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}

.b2zy-card-title {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}

.b2zy-card-title h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
	color: var(--b2zy-text, #1a1d24);
}

.b2zy-card-desc {
	color: var(--b2zy-text-2, #555b66);
	font-size: 14px;
	margin: 14px 0 0;
	line-height: 1.75;
	min-height: 48px;
}

.b2zy-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px dashed var(--b2zy-border-light, #f5f6f8);
	font-size: 13px;
}

.b2zy-count {
	color: var(--b2zy-text-3, #8a8f99);
}

.b2zy-count b {
	color: var(--b2zy-color, #ff5c5c);
	font-size: 15px;
}

.b2zy-go {
	color: var(--b2zy-color, #ff5c5c);
	font-weight: 600;
	white-space: nowrap;
	transition: gap .2s ease;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.b2zy-card:hover .b2zy-go {
	gap: 8px;
}

/* 标签 */
.b2zy-tag {
	font-style: normal;
	font-size: 12px;
	padding: 2px 10px;
	border-radius: 12px;
	line-height: 20px;
	font-weight: 500;
}

.b2zy-tag-ok {
	background: rgba(46, 160, 67, .1);
	color: #2ea043;
}

.b2zy-tag-wait {
	background: rgba(255, 165, 0, .12);
	color: #d98200;
}

.b2zy-tag-no {
	background: rgba(220, 53, 69, .1);
	color: #dc3545;
}

/* 「已有其它认证」：中性灰，表示当前不可申请 */
.b2zy-tag-lock {
	background: rgba(138, 143, 153, .14);
	color: #6b7280;
}

/* ==========================================================================
   面包屑 / 职业头
   ========================================================================== */

.b2zy-crumb {
	font-size: 13px;
	color: var(--b2zy-text-3, #8a8f99);
	margin-bottom: 16px;
	padding: 0 2px;
}

.b2zy-crumb a {
	color: var(--b2zy-text-3, #8a8f99);
	text-decoration: none;
	transition: color .15s ease;
}

.b2zy-crumb a:hover {
	color: var(--b2zy-color, #ff5c5c);
}

.b2zy-sep {
	margin: 0 8px;
}

.b2zy-wrap .b2zy-prof-head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 24px;
	padding: 24px 28px;
}

.b2zy-prof-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 64px;
	font-size: 26px;
}

.b2zy-prof-meta h1 {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--b2zy-text, #1a1d24);
}

.b2zy-prof-meta p {
	color: var(--b2zy-text-2, #555b66);
	font-size: 14px;
	margin: 0 0 8px;
	line-height: 1.7;
}

.b2zy-prof-meta .b2zy-count {
	font-size: 14px;
}

/* ==========================================================================
   双栏布局
   ========================================================================== */

.b2zy-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.b2zy-col-main {
	flex: 1 1 auto;
	min-width: 0;
}

.b2zy-col-side {
	flex: 0 0 320px;
	width: 320px;
}

.b2zy-panel {
	margin-bottom: 24px;
}

.b2zy-panel:last-child {
	margin-bottom: 0;
}

/* 区块标题 */
.b2zy-section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 18px;
	padding-left: 12px;
	border-left: 3px solid var(--b2zy-color, #ff5c5c);
	line-height: 1.3;
	color: var(--b2zy-text, #1a1d24);
}

.b2zy-section-title em {
	font-style: normal;
	font-size: 14px;
	color: var(--b2zy-text-3, #8a8f99);
	font-weight: 400;
}

/* 材料要求说明 */
.b2zy-notice {
	color: var(--b2zy-text-2, #555b66);
	font-size: 14px;
	line-height: 1.9;
	margin-bottom: 16px;
}

.b2zy-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}

.b2zy-checklist li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #3f4652;
	background: var(--b2zy-bg, #f7f8fa);
	border-radius: 8px;
	padding: 10px 14px;
}

.b2zy-checklist svg {
	color: #2ea043;
	flex: 0 0 14px;
}

/* ==========================================================================
   表单
   ========================================================================== */

.b2zy-form .b2zy-field {
	margin-bottom: 22px;
}

.b2zy-form .b2zy-field:last-of-type {
	margin-bottom: 18px;
}

/* 只读字段：称号已统一由后台设定，前台只展示不可改 */
.b2zy-field-readonly .b2zy-readonly-value {
	display: inline-block;
	margin: 0;
	padding: 9px 16px;
	border-radius: 8px;
	background: rgba(255, 92, 92, .08);
	color: var(--b2zy-color, #ff5c5c);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.b2zy-form label,
.b2zy-field > label {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--b2zy-text, #1a1d24);
	margin-bottom: 8px;
}

.b2zy-req {
	color: #dc3545;
	font-style: normal;
	margin-left: 2px;
}

.b2zy-form input[type="text"],
.b2zy-form input[type="number"],
.b2zy-form input[type="date"],
.b2zy-form input[type="url"],
.b2zy-form select,
.b2zy-form textarea {
	width: 100%;
	max-width: 100%;
	border: 1px solid #e3e5e9;
	background: #fbfbfc;
	border-radius: 8px;
	padding: 11px 14px;
	font-size: 15px;
	color: var(--b2zy-text, #1a1d24);
	line-height: 1.6;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.b2zy-form input:focus,
.b2zy-form select:focus,
.b2zy-form textarea:focus {
	outline: none;
	border-color: var(--b2zy-color, #ff5c5c);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 92, 92, .08);
}

.b2zy-form textarea {
	resize: vertical;
	min-height: 96px;
}

.b2zy-tip {
	font-size: 13px;
	color: var(--b2zy-text-3, #8a8f99);
	margin: 8px 0 0;
	line-height: 1.6;
}

/* ==========================================================================
   上传框
   ========================================================================== */

.b2zy-up-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.b2zy-up-box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 136px;
	height: 136px;
	border: 2px dashed #d6dae0;
	border-radius: 10px;
	background: #fafbfc;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
	flex: 0 0 136px;
}

.b2zy-up-box:hover {
	border-color: var(--b2zy-color, #ff5c5c);
	background: #fff;
}

.b2zy-up-box .b2zy-file {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 3;
}

.b2zy-up-hint {
	font-size: 13px;
	color: var(--b2zy-text-3, #8a8f99);
	text-align: center;
	padding: 0 8px;
	z-index: 1;
}

.b2zy-up-box.has-file .b2zy-up-hint {
	display: none;
}

.b2zy-up-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 2;
}

.b2zy-up-pdf {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	color: #dc3545;
	background: #fff5f5;
	z-index: 2;
}

.b2zy-up-del {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 14px;
	z-index: 5;
	cursor: pointer;
	display: none;
}

.b2zy-up-box.has-file:hover .b2zy-up-del {
	display: block;
}

/*
 * ★ 让 [hidden] 真正生效 —— 这一条是必须的，不是可选优化。
 *
 * `hidden` 属性靠的是浏览器默认样式表里的 `[hidden] { display: none }`，
 * 而**作者样式永远压过 UA 样式**。组件里只要有
 * `.b2zy-up-loading { display: flex }` 这类规则，hidden 就直接失效。
 *
 * 线上真实事故：上传进度遮罩（.b2zy-up-loading）本该隐藏，却一直显示着，
 * 而且它的 z-index(4) 比文件选择框(3) 还高 —— 把整个上传框盖住，
 * 点击全被遮罩吃掉。用户看到的就是「图片上传点了没反应」。
 */
.b2zy-wrap [hidden],
.b2zy-form [hidden],
.b2zy-uploader [hidden],
.b2zy-icon-field [hidden],
.b2zy-media [hidden],
.b2zy-admin [hidden] {
	display: none !important;
}

.b2zy-up-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .85);
	font-size: 13px;
	color: var(--b2zy-color, #ff5c5c);
	z-index: 4;
	/* 纯展示层，绝不能吃掉点击 —— 万一哪天 hidden 又被顶掉，
	   也不至于把上传框整个堵死。 */
	pointer-events: none;
}

.b2zy-up-add {
	border-style: dashed;
	font-size: 24px;
	color: #c3c8d0;
}

.b2zy-up-add .b2zy-up-hint {
	font-size: 24px;
}

/* ==========================================================================
   状态块
   ========================================================================== */

.b2zy-state {
	font-size: 15px;
	line-height: 1.9;
	color: #3f4652;
}

.b2zy-state p {
	margin: 0 0 10px;
}

.b2zy-ok-line {
	margin-bottom: 14px;
}

/* 「认证已通过」：整块居中成就卡（嵌在 .b2zy-box 内，自身留白适度） */
.b2zy-state-ok {
	text-align: center;
	padding: 26px 14px 20px;
}

.b2zy-ok-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	/* inline-flex + 父级 text-align:center 即居中；margin:auto 对 inline 元素无效，
	   留着只是给「万一被改成 display:flex」时兜底。 */
	margin: 0 auto 18px;
	border-radius: 50%;
	background: rgba(255, 92, 92, .1);
	color: var(--b2zy-color, #ff5c5c);
}

/*
 * ★ 关键：.b2zy-section-title 默认是 display:flex + justify-content:space-between
 *   （左对齐设计，左侧带色条）。在居中场景里，flex 的 space-between 会把标题
 *   顶到左边，看起来就是「没居中 / 错位」。
 *   这里直接改成 block + text-align:center —— 完全不经过 flex，最稳。
 */
.b2zy-state-ok .b2zy-section-title {
	display: block;
	text-align: center;
	padding-left: 0;
	border-left: 0;
	font-size: 18px;
	margin-bottom: 14px;
}

.b2zy-state-ok .b2zy-section-title span {
	display: inline;
}

/* 「请先完成账号实名认证」「已认证其它职业」引导块：
   与「已通过」同样居中，视觉上是一块提示卡 */
.b2zy-state-verify,
.b2zy-state-held {
	text-align: center;
	padding: 26px 14px 20px;
}

.b2zy-state-verify .b2zy-section-title,
.b2zy-state-held .b2zy-section-title {
	display: block;
	text-align: center;
	padding-left: 0;
	border-left: 0;
	font-size: 18px;
	margin-bottom: 14px;
}

.b2zy-state-verify .b2zy-section-title span,
.b2zy-state-held .b2zy-section-title span {
	display: inline;
}

.b2zy-state-verify .b2zy-login-btn,
.b2zy-state-verify .b2zy-btn-link,
.b2zy-state-held .b2zy-login-btn,
.b2zy-state-held .b2zy-btn-link {
	margin-top: 8px;
}

.b2zy-state-ok .b2zy-ok-line {
	margin: 0 0 14px;
	line-height: 1;
}

.b2zy-state-ok .b2zy-ok-line .b2zy-badge {
	margin-left: 0;
	font-size: 14px;
	padding: 2px 14px;
	line-height: 26px;
	border-radius: 13px;
}

.b2zy-state-ok p {
	margin: 0 0 8px;
}

.b2zy-state-ok .b2zy-dim {
	font-size: 13px;
	color: var(--b2zy-text-3, #8a8f99);
}

/* ==========================================================================
   按钮 & 操作行
   ========================================================================== */

.b2zy-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
	flex-wrap: wrap;
}

.b2zy-form .b2zy-submit,
.b2zy-login-btn,
.b2zy-btn-link,
.b2zy-cancel {
	display: inline-block;
	border: 0;
	background: var(--b2zy-color, #ff5c5c);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 32px;
	border-radius: 8px;
	cursor: pointer;
	line-height: 1.4;
	text-decoration: none;
	transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 2px 8px rgba(255, 92, 92, .2);
}

/*
 * ★ .b2zy-btn-link 与 .b2zy-login-btn 长得一样，但**行为完全不同**：
 *   .b2zy-login-btn 会被 JS 绑成「弹登录框」，
 *   .b2zy-btn-link 只是普通跳转链接（去实名认证 / 查看我的认证）。
 *   之前图省事复用了 login 那个类，结果点「查看我的认证」会弹登录框 ——
 *   用户明明已经登录了，看着像坏了。
 */

.b2zy-form .b2zy-submit:hover,
.b2zy-login-btn:hover,
.b2zy-btn-link:hover {
	opacity: .92;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(255, 92, 92, .25);
}

.b2zy-form .b2zy-submit:active,
.b2zy-login-btn:active,
.b2zy-btn-link:active {
	transform: translateY(0);
}

.b2zy-form .b2zy-submit:disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.b2zy-cancel {
	background: #fff;
	color: var(--b2zy-text-2, #555b66);
	border: 1px solid #e3e5e9;
	box-shadow: none;
}

.b2zy-cancel:hover {
	background: var(--b2zy-bg, #f7f8fa);
	box-shadow: none;
	transform: none;
}

.b2zy-form-msg {
	font-size: 14px;
}

.b2zy-form-msg-error {
	color: #dc3545;
}

.b2zy-form-msg-ok {
	color: #2ea043;
}

.b2zy-privacy {
	font-size: 13px;
	color: var(--b2zy-text-3, #8a8f99);
	margin-top: 16px;
	line-height: 1.7;
	padding: 12px 16px;
	background: var(--b2zy-bg, #f7f8fa);
	border-radius: 8px;
}

/* ==========================================================================
   用户列表
   ========================================================================== */

.b2zy-userlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.b2zy-col-side .b2zy-userlist {
	grid-template-columns: 1fr;
}

.b2zy-userlist li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	transition: background .15s ease;
}

.b2zy-userlist li a:hover {
	background: var(--b2zy-bg, #f7f8fa);
}

.b2zy-avatar {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	object-fit: cover;
}

.b2zy-userinfo {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.b2zy-userinfo b {
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--b2zy-text, #1a1d24);
}

.b2zy-user-title {
	font-size: 12px;
	color: var(--b2zy-text-3, #8a8f99);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.b2zy-recent {
	margin-top: 8px;
}

.b2zy-empty-side {
	text-align: center;
	padding: 28px 0;
}

.b2zy-empty {
	text-align: center;
	padding: 48px 24px;
	color: var(--b2zy-text-3, #8a8f99);
	font-size: 15px;
}

/* ==========================================================================
   分页
   ========================================================================== */

.b2zy-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.b2zy-pager a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	background: var(--b2zy-bg, #f7f8fa);
	color: var(--b2zy-text-2, #555b66);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background .15s ease, color .15s ease;
}

.b2zy-pager a:hover {
	background: #eceef1;
}

.b2zy-pager a.is-current {
	background: var(--b2zy-color, #ff5c5c);
	color: #fff;
}

/* ==========================================================================
   徽章
   ========================================================================== */

.b2zy-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(255, 92, 92, .08);
	color: var(--b2zy-color, #ff5c5c);
	border: 1px solid rgba(255, 92, 92, .2);
	border-radius: 12px;
	padding: 1px 10px;
	font-size: 12px;
	line-height: 20px;
	margin-left: 8px;
	vertical-align: middle;
	white-space: nowrap;
}

.b2zy-badge b {
	font-weight: 600;
}

.b2zy-author-badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 5px;
	vertical-align: middle;
	margin-left: 8px;
}

.b2zy-author-badges .b2zy-badge {
	margin-left: 0;
}

/* ==========================================================================
   轻提示
   ========================================================================== */

.b2zy-toast {
	position: fixed;
	left: 50%;
	top: 18%;
	transform: translateX(-50%);
	z-index: 99999;
	background: rgba(28, 32, 38, .92);
	color: #fff;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: 10px;
	max-width: 80vw;
	line-height: 1.6;
	opacity: 1;
	transition: opacity .3s ease;
	pointer-events: none;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
}

.b2zy-toast-ok {
	background: rgba(46, 160, 67, .94);
}

.b2zy-toast-error {
	background: rgba(200, 40, 55, .94);
}

.b2zy-toast.is-out {
	opacity: 0;
}

/* ==========================================================================
   平板 (≤900px)
   ========================================================================== */

@media screen and (max-width: 900px) {
	.b2zy-layout {
		flex-direction: column;
		gap: 20px;
	}

	.b2zy-col-side {
		flex: 1 1 auto;
		width: 100%;
	}

	.b2zy-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 16px;
	}

	.b2zy-wrap {
		padding: 22px 24px 44px;
	}

	.b2zy-wrap .box,
	.b2zy-box {
		padding: 22px;
	}

	.b2zy-userlist {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}

	.b2zy-prof-head {
		align-items: flex-start;
		padding: 20px 22px;
	}

	.b2zy-hero-title {
		font-size: 24px;
	}

	.b2zy-hero-intro {
		font-size: 14px;
	}
}

/* ==========================================================================
   手机 (≤640px)
   ========================================================================== */

@media screen and (max-width: 640px) {
	.b2zy-wrap {
		padding: 16px 18px 34px;
	}

	.b2zy-wrap .box,
	.b2zy-box {
		padding: 18px;
		border-radius: var(--b2zy-radius, 12px);
	}

	/* 手机单列最舒服 */
	.b2zy-grid {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-bottom: 20px;
	}

	.b2zy-card {
		padding: 18px;
	}

	.b2zy-card-icon {
		width: 46px;
		height: 46px;
		flex: 0 0 46px;
	}

	.b2zy-card-icon-text {
		font-size: 18px;
	}

	.b2zy-card-title h3 {
		font-size: 17px;
	}

	.b2zy-card-desc {
		min-height: 0;
		margin-top: 12px;
		line-height: 1.7;
		font-size: 13px;
	}

	.b2zy-card-foot {
		padding-top: 14px;
	}

	/* 头部 */
	.b2zy-hero {
		margin-bottom: 16px;
	}

	.b2zy-hero-title {
		font-size: 21px;
		margin-bottom: 10px;
	}

	.b2zy-hero-intro {
		font-size: 14px;
		line-height: 1.85;
	}

	/* 职业详情头：窄屏竖排 */
	.b2zy-prof-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 18px;
	}

	.b2zy-prof-icon {
		width: 52px;
		height: 52px;
		flex: 0 0 52px;
		font-size: 22px;
	}

	.b2zy-prof-meta h1 {
		font-size: 20px;
	}

	.b2zy-prof-meta p {
		font-size: 13px;
	}

	/* 表单 */
	.b2zy-form .b2zy-field {
		margin-bottom: 18px;
	}

	.b2zy-form label,
	.b2zy-field > label {
		font-size: 14px;
		margin-bottom: 7px;
	}

	/*
	 * iOS Safari 会对 font-size < 16px 的输入框自动放大整页。
	 * 手机上必须 >=16px。
	 */
	.b2zy-form input[type="text"],
	.b2zy-form input[type="number"],
	.b2zy-form input[type="date"],
	.b2zy-form input[type="url"],
	.b2zy-form select,
	.b2zy-form textarea {
		font-size: 16px;
		padding: 11px 13px;
	}

	/* 上传框：一行放两个 */
	.b2zy-up-box {
		width: calc(50% - 6px);
		height: 120px;
		flex: 0 0 calc(50% - 6px);
	}

	.b2zy-up-list {
		gap: 12px;
	}

	/* 按钮铺满，方便拇指点 */
	.b2zy-form .b2zy-submit,
	.b2zy-login-btn,
	.b2zy-cancel {
		display: block;
		width: 100%;
		text-align: center;
		padding: 13px 20px;
		font-size: 16px;
	}

	.b2zy-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.b2zy-actions .b2zy-cancel {
		order: 2;
	}

	/* 列表 */
	.b2zy-userlist {
		grid-template-columns: 1fr;
	}

	.b2zy-checklist {
		grid-template-columns: 1fr;
	}

	.b2zy-section-title {
		font-size: 15px;
	}

	/* 「认证已通过」手机收紧 */
	.b2zy-state-ok {
		padding: 18px 8px 14px;
	}

	.b2zy-ok-mark {
		width: 50px;
		height: 50px;
		margin-bottom: 14px;
	}

	.b2zy-state-ok .b2zy-section-title {
		font-size: 16px;
	}

	.b2zy-empty {
		padding: 36px 18px;
	}

	/* 轻提示别贴边 */
	.b2zy-toast {
		max-width: calc(100vw - 32px);
		top: 12%;
	}

	/* 隐私提示 */
	.b2zy-privacy {
		padding: 10px 14px;
		font-size: 12px;
	}
}

/* ==========================================================================
   小屏手机 (≤400px)
   ========================================================================== */

@media screen and (max-width: 400px) {
	.b2zy-wrap {
		padding: 14px 14px 28px;
	}

	.b2zy-wrap .box,
	.b2zy-box {
		padding: 16px;
	}

	.b2zy-card {
		padding: 16px;
	}

	.b2zy-hero-title {
		font-size: 19px;
	}

	.b2zy-card-title h3 {
		font-size: 16px;
	}

	/* 极窄屏上传框回到单列 */
	.b2zy-up-box {
		width: 100%;
		height: 140px;
		flex: 0 0 100%;
	}

	.b2zy-prof-head {
		padding: 14px;
	}
}