/**
 * 数学图片验证码 —— 插件样式
 *
 * 前台区块用核心主题变量（--mn-*），后台区块用 admin 主题变量（--c-*）：
 * 后台页面没有 --mn-* 定义，混用会掉进硬编码色。禁止内联 style。
 */

/* ---------- 前台：登录 / 注册页的验证区块 ---------- */
.mc-captcha {
    margin-bottom: 14px;
}

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

.mc-captcha-img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--mn-border, #d9dce1);
    border-radius: 6px;
}

.mc-captcha-input {
    flex: 1 1 120px;
    min-width: 120px;
    max-width: 160px;
}

.mc-captcha-tip {
    margin-top: 4px;
    font-size: 12px;
    color: var(--mn-text-muted, #999999);
}

/* 答错回跳后的提示（找回密码/发帖/回帖走 302，核心错误位不在这些页上，由区块自己显示）
   取核心 .mn-alert-error 同一组主题变量，暗色主题才不会花脸 */
.mc-captcha-error {
    margin-bottom: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--mn-alert-error-text, #dc2626);
    background: var(--mn-alert-error-bg, #fef2f2);
    border: 1px solid var(--mn-alert-error-border, #fecaca);
    border-radius: 6px;
}

/* ---------- 后台：示例图与说明 ---------- */
.mc-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.mc-preview-img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--c-border, #d9dce1);
    border-radius: 6px;
}

.mc-preview-expr {
    font-size: 13px;
    color: var(--c-text-muted, #999999);
}

.mc-rules {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--c-text-secondary, #555555);
}