/* 程序员注册挑战：前端样式（沿用登录弹窗观感） */
.dev-h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.dev-note { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0 0 14px; }
.dev-choices { display: flex; gap: 10px; margin: 0 0 14px; }
.dev-choice { flex: 1 1 0; position: relative; display: flex; flex-direction: column; gap: 3px;
	padding: 13px 14px 11px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--pill);
	cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.dev-choice:hover { border-color: var(--brand); }
.dev-choice input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.dev-choice__t { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.4; }
.dev-choice__d { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.dev-choice.on, .dev-choice:has(input:checked) { border-color: var(--brand); background: #eef4ff;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.dev-choice.on .dev-choice__t::after { content: '¹3'; float: right; color: var(--brand); font-size: 13px; }
@media (max-width: 420px) { .dev-choices { flex-direction: column; } }
/* 题面：长挑战 ID 是连续十六进制串，必须允许在任意处断行，否则会把面板撑出横向滚动条 */
.dev-question { background: var(--pill); border: 1px solid var(--line); border-radius: 12px;
	padding: 14px 16px; font-size: 13.5px; line-height: 1.7; color: var(--ink); white-space: pre-wrap;
	word-break: break-word; overflow-wrap: anywhere;
	/* 长题目内部滚动，避免整弹窗被撑出粗大滚动条；矮屏时自动压缩高度，尽量让弹窗整体不需要滚动 */
	max-height: min(240px, 28vh);
	overflow-y: auto;
	scroll-behavior: smooth;
}
.dev-question br { line-height: 1.7; }
.dev-answer { width: 100%; box-sizing: border-box; margin: 12px 0 10px; padding: 10px 12px; border-radius: 12px;
	border: 1px solid var(--line); background: var(--pill); font-size: 14px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.dev-answer:focus { background: var(--card); border-color: var(--brand); outline: none; }
.dev-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.dev-copy, .dev-export { border: 1px solid var(--line); background: var(--card); color: var(--brand); border-radius: 8px;
	padding: 6px 12px; font-size: 12.5px; line-height: 1.5; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
/* 「复制题目」与「导出题目」是同级的两个工具操作，视觉上必须完全一致：
   之前给导出按钮单独用了 --ink-2 灰字 + --pill 底色，并排时一个字蓝一个字灰，
   看起来像一个是可点的、一个是被禁用的。现在两者共用同一套描边胶囊。 */
.dev-copy:hover, .dev-export:hover { border-color: var(--brand); color: var(--brand); }
/* 次级操作统一成「描边胶囊」：与主题 .auth-back / .auth-link-r 同一套视觉语言。
   原来是下划线小字，实测在开发者通道里同样「用户看不到」。 */
.dev-link {
	display: inline-flex; align-items: center; justify-content: center; gap: 5px;
	background: color-mix(in srgb, var(--brand) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--brand) 34%, #fff);
	color: var(--brand); cursor: pointer;
	font-size: 12.5px; font-weight: 700; line-height: 1;
	padding: 7px 12px; border-radius: 999px; margin-left: 10px;
	text-decoration: none;
	transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.dev-link:hover {
	background: var(--brand); color: #fff; border-color: var(--brand);
	box-shadow: 0 5px 14px rgba(63, 106, 224, .30); transform: translateY(-1px);
}
.dev-back { margin-left: 14px; }
/* 「提交答案校验」是主操作，下面两颗胶囊是次级操作。
   原来它们直接跟在主按钮后面，垂直间距只有 inline 行盒那几像素，看着像挤在一起。
   现在用一层 flex 容器统一给出 16px 上间距 + 10px 水平间距，
   容器内也取消 .dev-link / .dev-back 各自的 margin-left，避免叠加成一大段空白。 */
.dev-subactions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.dev-subactions .dev-link { margin-left: 0; }
/* 提示行只在有内容（剩余次数等）时占位；空着时会白撑 24px，弹窗底部看着像多了一块留白 */
.dev-attempt { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; min-height: 16px; }
.dev-attempt:empty { display: none; }

/* 保存提示 */
.dev-save-hint {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ink-2);
	background: var(--pill);
	border: 1px dashed var(--line);
	border-radius: 10px;
	padding: 10px 12px;
	margin: 8px 0 10px;
}

/* 已有挑战 ID 提交入口（断点续答） */
.dev-resume-box {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}
.dev-resume-box .dev-resume-toggle {
	margin-left: 0;
	font-size: 12.5px;
	margin-top: 4px;
}
.dev-resume-form {
	margin-top: 12px;
	padding: 12px;
	background: var(--pill);
	border: 1px solid var(--line);
	border-radius: 12px;
}
.dev-resume-form input {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 10px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: var(--card);
	font-size: 14px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
}
.dev-resume-form input:focus {
	border-color: var(--brand);
	outline: none;
}
.dev-resume-form .dev-resume-submit {
	width: 100%;
	padding: 10px 14px;
	font-size: 14px;
}
.dev-resume-hint {
	font-size: 12px;
	line-height: 1.5;
	color: var(--ink-2);
	margin: 10px 0 0;
}

/* ===== 滚动条美化：去掉默认粗大“木棍”样式 ===== */
/* 弹窗本体、弹窗面板、页面卡片、题目区、步骤区统一使用细滚动条。
   注意：真正带 overflow:auto 的是 .bl-authmodal 本身，之前漏了它，
   所以弹窗上一直是系统原生粗滚动条。 */
.bl-authmodal,
.bl-authmodal__panel,
.auth-card,
.dev-question,
.dev-step {
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}

.bl-authmodal::-webkit-scrollbar,
.bl-authmodal__panel::-webkit-scrollbar,
.auth-card::-webkit-scrollbar,
.dev-question::-webkit-scrollbar,
.dev-step::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.bl-authmodal::-webkit-scrollbar-track,
.bl-authmodal__panel::-webkit-scrollbar-track,
.auth-card::-webkit-scrollbar-track,
.dev-question::-webkit-scrollbar-track,
.dev-step::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 3px;
}

.bl-authmodal::-webkit-scrollbar-thumb,
.bl-authmodal__panel::-webkit-scrollbar-thumb,
.auth-card::-webkit-scrollbar-thumb,
.dev-question::-webkit-scrollbar-thumb,
.dev-step::-webkit-scrollbar-thumb {
	background: var(--line);
	border-radius: 3px;
}

.bl-authmodal::-webkit-scrollbar-thumb:hover,
.bl-authmodal__panel::-webkit-scrollbar-thumb:hover,
.auth-card::-webkit-scrollbar-thumb:hover,
.dev-question::-webkit-scrollbar-thumb:hover,
.dev-step::-webkit-scrollbar-thumb:hover {
	background: var(--brand);
}

/* 题面区是「内容还有下文」的载体，滚动条要看得见才不会被误认为被截断；
   弹窗本体只在极矮屏才滚，保持低调即可。 */
.dev-question::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--ink-2) 34%, transparent);
}
.dev-question {
	scrollbar-color: color-mix(in srgb, var(--ink-2) 34%, transparent) transparent;
}

/* 若弹窗面板本身出现滚动，也给它一点内边距，避免滚动条贴边 */
.bl-authmodal__panel,
.auth-card {
	scroll-behavior: smooth;
}

/* 账号/昵称在线占用检测提示行 */
/* 账号/昵称在线占用检测 + 密码强度提示行。
   几何修复：原规则 margin-top:-6px 会把提示上提 6px，直接骑在自己输入框的底边框上，
   视觉上像是压住了相邻字段的边框。改为正上外边距 6px、正常文档流、块级独占一行，
   由父级 <p> 自动增高承载，保证「紧贴自己输入框下方、绝不与前后字段重叠」。 */
.dev-avail, .dev-avail.field-tip {
	display: block;
	position: static;
	float: none;
	margin: 6px 0 0 2px;
	padding: 0;
	width: auto;
	max-width: 100%;
	font-size: 12px;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
	background: none;
	border: 0;
	box-shadow: none;
}
.dev-avail.ok { color: #16a34a; }
.dev-avail.mid { color: #d97706; }
.dev-avail.bad { color: #dc2626; }
/* hidden 属性必须真正生效（否则 .dev-avail{display:block} 会击穿 UA 的 [hidden]{display:none}，
   在字段内留下看不见但占位的幽灵提示块） */
.dev-avail[hidden] { display: none !important; }

/* 程序员注册 Tab 激活时隐藏「需管理员审核」通用提示（JS 置 hidden 属性） */
.auth-note[hidden] { display: none !important; }