/* MatrixFlow 注册邮箱验证（2026-09-15 v8）浅色/深色双主题 */
.mf-auth-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--shell-fg, #cbd5e1);
}
.mf-register-verify-row {
  padding: 2px 0;
}
.mf-register-verify-line {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mf-register-verify-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--shell-border, rgba(255, 255, 255, 0.14));
  background: var(--shell-input, rgba(255, 255, 255, 0.06));
  color: var(--shell-fg, inherit);
  font-size: 14px;
  outline: none;
}
.mf-register-verify-input::placeholder {
  color: var(--shell-muted-fg, #64748b);
}
.mf-register-verify-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.mf-register-verify-btn {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--shell-border, rgba(255, 255, 255, 0.14));
  background: var(--shell-secondary, rgba(255, 255, 255, 0.06));
  color: var(--shell-secondary-fg, #cbd5e1);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.mf-register-verify-btn:hover {
  border-color: #2563eb;
  color: #1d4ed8;
}
.dark .mf-register-verify-btn:hover {
  border-color: #38bdf8;
  color: #ffffff;
}
.mf-register-verify-btn:disabled {
  opacity: 0.65;
  cursor: default;
}
.mf-register-verify-hint {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--shell-muted-fg, #64748b);
}
.mf-register-verify-msg {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
}
.mf-register-verify-msg.is-ok {
  color: #047857;
}
.dark .mf-register-verify-msg.is-ok {
  color: #34d399;
}
.mf-register-verify-msg.is-err {
  color: #b91c1c;
}
.dark .mf-register-verify-msg.is-err {
  color: #fb7185;
}
.mf-captcha-inline-status {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: #b91c1c;
}
.dark .mf-captcha-inline-status {
  color: #fb7185;
}
/**
 * 2026-09-15：顺序改用 CSS 直接排（flex order），不再等 JS 移动 DOM。
 * 以前登录/注册页会先按老顺序渲染、约 1 秒后才被 JS 挪成新顺序（客户看到的就是"闪一下变了"）。
 * 这里让注册表单在**样式生效的第一帧**就是：邮箱 → 人机验证 → 邮箱验证码 → 昵称 → 密码 → 注册。
 * 只对含 #mf-register-code 的注册表单生效，登录表单不受影响。
 */
form:has(input[id="nickname"]) {
  display: flex;
  flex-direction: column;
}
/*
 * 顺序规则（2026-09-15 v9）：
 *  标题/说明 → 邮箱 → 人机验证 → 邮箱验证码 → 昵称 → 密码 → 注册按钮 → 页脚链接
 * 用负数 order 把字段提到前面，标题单独提到最前、页脚留在最后；
 * 之前给所有子元素 order:70，连标题一起推到末尾（客户看到"创建账号"跑到注册按钮下面）。
 */
/* 非字段内容（标题/说明，可能是 h2 也可能是 div）统一提到最前；
   页脚「已有账号？登录」在后面单独排到最后。 */
form:has(input[id="nickname"]) > * { order: -200; }
form:has(input[id="nickname"]) > *:has(input[id="email"]) { order: -60; }
form:has(input[id="nickname"]) > *:has(input[id="captcha"]) { order: -50; }
form:has(input[id="nickname"]) > *:has(#mf-register-code) { order: -40; }
form:has(input[id="nickname"]) > *:has(input[id="nickname"]) { order: -30; }
form:has(input[id="nickname"]) > *:has(input[id="password"]) { order: -20; }
form:has(input[id="nickname"]) > button[type="submit"] { order: -10; }
form:has(input[id="nickname"]) > *:has(> button[type="submit"]) { order: -10; }
form:has(input[id="nickname"]) > p { order: 100; }

/*
 * 登录页的人机验证已经在服务端取消（login-captcha.js 只是把值填成 1 再隐藏它），
 * 但"先渲染出来、再被 JS 隐藏"会闪一下。这里直接用 CSS 从第一帧就隐藏，
 * 只作用于登录表单（有密码、没有昵称），注册表单不受影响。
 */
form:has(input[id="password"]):not(:has(input[id="nickname"])) > *:has(input[id="captcha"]) {
  display: none !important;
}