diff --git a/README.md b/README.md
index 21aa4e7..ff5f847 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,7 @@ reset-local-data.bat
 - 证书手动新增、后台预览、后台下载、作废、重置链接。
 - Excel 模板下载、导入、确认导入、导出证书。
 - 操作日志中文显示。
-- 公开查询、证书直达页、PDF 下载。
+- 公开查询（支持证书编号+姓名+图形验证码、手机号+短信验证码两种方式）、证书直达页、PDF 下载。
 
 ## 正式工程
 
diff --git a/backend/app/api/routes/public.py b/backend/app/api/routes/public.py
index f772e61..be2115e 100644
--- a/backend/app/api/routes/public.py
+++ b/backend/app/api/routes/public.py
@@ -10,12 +10,19 @@ from app.services.captcha import make_captcha, verify_captcha
 from app.services.logs import log_action, mask_phone
 from app.services.pdf import render_certificate_pdf
 from app.services.rate_limit import hit_too_often
+from app.services.sms import generate_sms_code, verify_sms_code
 
 router = APIRouter()
 
 DISCLAIMER = "本证书仅用于证明学员完成相关培训课程/阶段学习，不代表国家学历、学位、职业资格或职业技能等级认证。"
 
 
+class SendSmsRequest(BaseModel):
+    phone: str = Field(min_length=1, max_length=32)
+    captcha_id: str = Field(min_length=1, max_length=128)
+    captcha_code: str = Field(min_length=1, max_length=16)
+
+
 class CertificateSearchRequest(BaseModel):
     certificate_no: str | None = Field(default=None, max_length=64)
     phone: str | None = Field(default=None, max_length=32)
@@ -30,11 +37,35 @@ class CertificateSearchRequest(BaseModel):
         return self
 
 
+class SmsSearchRequest(BaseModel):
+    phone: str = Field(min_length=1, max_length=32)
+    sms_id: str = Field(min_length=1, max_length=128)
+    sms_code: str = Field(min_length=1, max_length=16)
+
+
 @router.get("/captcha")
 def get_captcha() -> dict[str, str]:
     return make_captcha()
 
 
+@router.post("/sms/send")
+def send_sms_code(
+    payload: SendSmsRequest,
+    request: Request,
+) -> dict[str, str]:
+    """发送短信验证码"""
+    client_ip = request.client.host if request.client else "unknown"
+    if hit_too_often(f"sms:{client_ip}", limit=5, window_seconds=60):
+        raise HTTPException(status_code=status.HTTP_429_TOO_MANY_REQUESTS, detail="发送过于频繁，请稍后再试")
+    if hit_too_often(f"sms:{payload.phone}", limit=3, window_seconds=300):
+        raise HTTPException(status_code=status.HTTP_429_TOO_MANY_REQUESTS, detail="该手机号发送过于频繁，请稍后再试")
+    if not verify_captcha(payload.captcha_id, payload.captcha_code):
+        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail="图形验证码错误或已过期，请重新输入")
+    
+    sms_id = generate_sms_code(payload.phone)
+    return {"sms_id": sms_id, "message": "验证码已发送"}
+
+
 @router.post("/certificates/search")
 def search_certificate(
     payload: CertificateSearchRequest,
@@ -71,6 +102,39 @@ def search_certificate(
     return {"items": [public_certificate_payload(db, certificate, learner) for certificate, learner in result]}
 
 
+@router.post("/certificates/search-by-sms")
+def search_certificate_by_sms(
+    payload: SmsSearchRequest,
+    request: Request,
+    db: Session = Depends(get_db),
+) -> dict[str, object]:
+    """通过手机号和短信验证码查询证书"""
+    client_ip = request.client.host if request.client else "unknown"
+    if hit_too_often(f"search_sms:{client_ip}", limit=30, window_seconds=60):
+        raise HTTPException(status_code=status.HTTP_429_TOO_MANY_REQUESTS, detail="访问过于频繁，请稍后再试")
+    
+    if not verify_sms_code(payload.sms_id, payload.sms_code):
+        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail="验证码错误或已过期，请重新获取")
+
+    phone = payload.phone.strip()
+
+    query = db.query(Certificate, Learner).join(Learner, Learner.id == Certificate.learner_id)
+    result = (
+        query.filter(Learner.phone == phone)
+        .order_by(Certificate.issue_date.desc(), Certificate.id.desc())
+        .all()
+    )
+
+    if not result:
+        log_action(db, None, "public_search_certificate_sms", "public_access", detail={"mode": "phone_sms", "phone": mask_phone(phone), "matched_count": 0, "result": "not_found"})
+        db.commit()
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="未查询到匹配的证书信息，请核对手机号后重试")
+    
+    log_action(db, None, "public_search_certificate_sms", "public_access", result[0][0].certificate_no, {"mode": "phone_sms", "phone": mask_phone(phone), "matched_count": len(result), "result": "matched"})
+    db.commit()
+    return {"items": [public_certificate_payload(db, certificate, learner) for certificate, learner in result]}
+
+
 @router.get("/certificates/token/{token}")
 def get_certificate_by_token(token: str, db: Session = Depends(get_db)) -> dict[str, object]:
     access_token = get_active_token(db, token)
diff --git a/backend/app/core/config.py b/backend/app/core/config.py
index add4553..adc81d2 100644
--- a/backend/app/core/config.py
+++ b/backend/app/core/config.py
@@ -23,6 +23,14 @@ class Settings:
     cors_origins: list[str] = field(
         default_factory=lambda: _csv_env("CORS_ORIGINS", ["http://localhost:5173", "http://localhost:8080"])
     )
+    
+    # 短信服务配置
+    # local=本地测试（验证码打印到终端），aliyun=阿里云短信
+    sms_mode: str = os.getenv("SMS_MODE", "local")
+    aliyun_access_key_id: str = os.getenv("ALIYUN_ACCESS_KEY_ID", "")
+    aliyun_access_key_secret: str = os.getenv("ALIYUN_ACCESS_KEY_SECRET", "")
+    aliyun_sms_sign_name: str = os.getenv("ALIYUN_SMS_SIGN_NAME", "")
+    aliyun_sms_template_code: str = os.getenv("ALIYUN_SMS_TEMPLATE_CODE", "")
 
 
 @lru_cache
diff --git a/backend/app/services/pdf.py b/backend/app/services/pdf.py
index a544a29..b49f464 100644
--- a/backend/app/services/pdf.py
+++ b/backend/app/services/pdf.py
@@ -51,7 +51,8 @@ def render_certificate_image(certificate: Certificate, learner: Learner, project
 
     issue_year, issue_month, issue_day = date_parts(certificate.issue_date)
     course_name = certificate.course_name or certificate.certificate_name or (project.name if project else certificate.project_code)
-    stage_name = certificate.stage_name or "\u521d\u7ea7\u8bfe\u7a0b\u7684\u4e13\u4e1a\u5b66\u4e60\u3002"
+    stage_input = (certificate.stage_name or "").strip()
+    stage_name = f"{stage_input}\u8bfe\u7a0b\u7684\u4e13\u4e1a\u5b66\u4e60\u3002" if stage_input else "\u521d\u7ea7\u8bfe\u7a0b\u7684\u4e13\u4e1a\u5b66\u4e60\u3002"
 
     for box in [(150, 442, 760, 132), (404, 675, 220, 38)]:
         paper_patch(image, box)
diff --git a/backend/app/services/sms.py b/backend/app/services/sms.py
new file mode 100644
index 0000000..5f5deff
--- /dev/null
+++ b/backend/app/services/sms.py
@@ -0,0 +1,100 @@
+import logging
+import random
+import secrets
+import string
+import time
+
+from app.core.config import settings
+
+logger = logging.getLogger(__name__)
+
+SMS_CODE_TTL_SECONDS = 300  # 5分钟有效期
+_sms_codes: dict[str, tuple[str, float]] = {}
+
+
+def _send_sms_aliyun(phone: str, code: str) -> bool:
+    """通过阿里云发送短信"""
+    try:
+        from alibabacloud_dysmsapi20170525.client import Client
+        from alibabacloud_dysmsapi20170525 import models as dysmsapi_models
+        from alibabacloud_tea_openapi import models as open_api_models
+        
+        config = open_api_models.Config(
+            access_key_id=settings.aliyun_access_key_id,
+            access_key_secret=settings.aliyun_access_key_secret,
+        )
+        config.endpoint = "dysmsapi.aliyuncs.com"
+        client = Client(config)
+        
+        request = dysmsapi_models.SendSmsRequest(
+            phone_numbers=phone,
+            sign_name=settings.aliyun_sms_sign_name,
+            template_code=settings.aliyun_sms_template_code,
+            template_param=f'{{"code":"{code}"}}',
+        )
+        response = client.send_sms(request)
+        
+        if response.body.code == "OK":
+            logger.info(f"[阿里云短信] 发送成功: {phone}")
+            return True
+        else:
+            logger.error(f"[阿里云短信] 发送失败: {phone}, 错误: {response.body.message}")
+            return False
+    except ImportError:
+        logger.error("[阿里云短信] 未安装依赖，请执行: pip install alibabacloud-dysmsapi20170525")
+        return False
+    except Exception as e:
+        logger.error(f"[阿里云短信] 发送异常: {phone}, 异常: {str(e)}")
+        return False
+
+
+def _send_sms_local(phone: str, code: str) -> bool:
+    """本地测试模式：将验证码打印到终端"""
+    print(f"\n{'='*50}")
+    print(f"[短信验证码] 手机号: {phone}")
+    print(f"[短信验证码] 验证码: {code}")
+    print(f"[短信验证码] 有效期: {SMS_CODE_TTL_SECONDS}秒")
+    print(f"{'='*50}\n")
+    logger.info(f"[本地短信] 验证码已生成: {phone} -> {code}")
+    return True
+
+
+def send_sms(phone: str, code: str) -> bool:
+    """发送短信验证码（根据配置选择发送方式）"""
+    if settings.sms_mode == "aliyun":
+        return _send_sms_aliyun(phone, code)
+    else:
+        return _send_sms_local(phone, code)
+
+
+def generate_sms_code(phone: str) -> str:
+    """生成短信验证码"""
+    clean_expired_codes()
+    code = "".join(random.choices(string.digits, k=6))
+    sms_id = secrets.token_urlsafe(16)
+    _sms_codes[sms_id] = (code, time.time() + SMS_CODE_TTL_SECONDS)
+    
+    # 发送短信
+    send_sms(phone, code)
+    
+    return sms_id
+
+
+def verify_sms_code(sms_id: str, code: str) -> bool:
+    """验证短信验证码"""
+    clean_expired_codes()
+    record = _sms_codes.pop(sms_id, None)
+    if not record:
+        return False
+    expected, expires_at = record
+    if expires_at < time.time():
+        return False
+    return expected == code.strip()
+
+
+def clean_expired_codes() -> None:
+    """清理过期的验证码"""
+    now = time.time()
+    expired = [sms_id for sms_id, (_, expires_at) in _sms_codes.items() if expires_at < now]
+    for sms_id in expired:
+        _sms_codes.pop(sms_id, None)
diff --git a/backend/docs/aliyun-sms-deployment.md b/backend/docs/aliyun-sms-deployment.md
new file mode 100644
index 0000000..4573926
--- /dev/null
+++ b/backend/docs/aliyun-sms-deployment.md
@@ -0,0 +1,329 @@
+# 阿里云短信服务部署指南
+
+## 前置条件
+
+- 阿里云账号（已实名认证）
+- 已备案的域名（短信签名需要）
+- 服务器（已部署后端服务）
+
+## 第一步：开通短信服务
+
+1. 登录阿里云控制台：https://console.aliyun.com
+2. 搜索「短信服务」或访问：https://dysms.console.aliyun.com
+3. 点击「免费开通」
+4. 阅读并同意服务协议
+5. 点击「立即开通」
+
+## 第二步：申请短信签名
+
+短信签名是短信开头的标识，如【培训结业系统】。
+
+1. 进入短信服务控制台
+2. 左侧菜单选择「国内消息」→「签名管理」
+3. 点击「添加签名」
+4. 填写信息：
+   - **签名名称**：培训结业证书系统（或其他名称，2-12个字符）
+   - **适用场景**：选择「自用-验证码」
+   - **签名来源**：选择「企事业单位的全称或简称」
+   - **上传证明**：营业执照照片
+   - **申请说明**：用于学员查询培训结业证书时的短信验证码
+5. 点击「提交」
+6. 等待审核（通常1-2小时）
+
+## 第三步：申请短信模板
+
+短信模板是短信内容的格式。
+
+1. 左侧菜单选择「国内消息」→「模板管理」
+2. 点击「添加模板」
+3. 填写信息：
+   - **模板名称**：验证码模板
+   - **模板类型**：选择「验证码」
+   - **模板内容**：`您的验证码是${code}，5分钟内有效，请勿泄露给他人。`
+   - **申请说明**：用于学员查询培训结业证书时的身份验证
+4. 点击「提交」
+5. 等待审核（通常1-2小时）
+
+**注意**：模板变量格式必须是 `${变量名}`，不能是其他格式。
+
+## 第四步：获取 AccessKey
+
+AccessKey 用于后端调用阿里云 API。
+
+1. 点击右上角头像 →「AccessKey管理」
+2. 或直接访问：https://ram.console.aliyun.com/manage/ak
+3. 点击「创建AccessKey」
+4. 进行身份验证（短信验证码或邮箱验证）
+5. 创建成功后，保存：
+   - **AccessKey ID**
+   - **AccessKey Secret**
+
+**重要**：AccessKey Secret 只显示一次，请立即保存到安全的地方。
+
+**安全建议**：
+- 不要将 AccessKey 写在代码里
+- 使用 RAM 子账号的 AccessKey，并只授予短信服务权限
+- 定期轮换 AccessKey
+
+## 第五步：配置环境变量
+
+在服务器上配置环境变量，编辑 `.env` 文件或系统环境变量：
+
+```bash
+# 阿里云短信服务配置
+ALIYUN_ACCESS_KEY_ID=你的AccessKeyID
+ALIYUN_ACCESS_KEY_SECRET=你的AccessKeySecret
+ALIYUN_SMS_SIGN_NAME=你的短信签名
+ALIYUN_SMS_TEMPLATE_CODE=你的模板CODE
+```
+
+**示例**：
+```bash
+ALIYUN_ACCESS_KEY_ID=LTAI5tQkB3VRg8xR
+ALIYUN_ACCESS_KEY_SECRET=your_secret_key_here
+ALIYUN_SMS_SIGN_NAME=培训结业系统
+ALIYUN_SMS_TEMPLATE_CODE=SMS_123456789
+```
+
+## 第六步：安装依赖
+
+```bash
+cd backend
+pip install alibabacloud-dysmsapi20170525==3.0.0
+```
+
+或在 `requirements.txt` 中添加：
+```
+alibabacloud-dysmsapi20170525==3.0.0
+```
+
+然后执行：
+```bash
+pip install -r requirements.txt
+```
+
+## 第七步：配置后端代码
+
+编辑 `backend/app/core/config.py`，添加短信配置：
+
+```python
+import os
+
+class Settings:
+    # ... 其他配置 ...
+    
+    # 阿里云短信配置
+    ALIYUN_ACCESS_KEY_ID: str = os.getenv("ALIYUN_ACCESS_KEY_ID", "")
+    ALIYUN_ACCESS_KEY_SECRET: str = os.getenv("ALIYUN_ACCESS_KEY_SECRET", "")
+    ALIYUN_SMS_SIGN_NAME: str = os.getenv("ALIYUN_SMS_SIGN_NAME", "")
+    ALIYUN_SMS_TEMPLATE_CODE: str = os.getenv("ALIYUN_SMS_TEMPLATE_CODE", "")
+
+settings = Settings()
+```
+
+## 第八步：修改短信发送服务
+
+编辑 `backend/app/services/sms.py`，替换为真实的短信发送逻辑：
+
+```python
+import logging
+import random
+import secrets
+import string
+import time
+
+from alibabacloud_dysmsapi20170525.client import Client
+from alibabacloud_dysmsapi20170525 import models as dysmsapi_models
+from alibabacloud_tea_openapi import models as open_api_models
+
+from app.core.config import settings
+
+logger = logging.getLogger(__name__)
+
+SMS_CODE_TTL_SECONDS = 300  # 5分钟有效期
+_sms_codes: dict[str, tuple[str, float]] = {}
+
+
+def _get_sms_client() -> Client:
+    """获取阿里云短信客户端"""
+    config = open_api_models.Config(
+        access_key_id=settings.ALIYUN_ACCESS_KEY_ID,
+        access_key_secret=settings.ALIYUN_ACCESS_KEY_SECRET,
+    )
+    config.endpoint = "dysmsapi.aliyuncs.com"
+    return Client(config)
+
+
+def send_sms(phone: str, code: str) -> bool:
+    """发送短信验证码"""
+    try:
+        client = _get_sms_client()
+        request = dysmsapi_models.SendSmsRequest(
+            phone_numbers=phone,
+            sign_name=settings.ALIYUN_SMS_SIGN_NAME,
+            template_code=settings.ALIYUN_SMS_TEMPLATE_CODE,
+            template_param=f'{{"code":"{code}"}}',
+        )
+        response = client.send_sms(request)
+        
+        if response.body.code == "OK":
+            logger.info(f"[短信发送成功] 手机号: {phone}")
+            return True
+        else:
+            logger.error(f"[短信发送失败] 手机号: {phone}, 错误: {response.body.message}")
+            return False
+    except Exception as e:
+        logger.error(f"[短信发送异常] 手机号: {phone}, 异常: {str(e)}")
+        return False
+
+
+def generate_sms_code(phone: str) -> str:
+    """生成短信验证码"""
+    clean_expired_codes()
+    code = "".join(random.choices(string.digits, k=6))
+    sms_id = secrets.token_urlsafe(16)
+    _sms_codes[sms_id] = (code, time.time() + SMS_CODE_TTL_SECONDS)
+    
+    # 发送短信
+    send_sms(phone, code)
+    
+    # 开发环境下记录日志
+    logger.info(f"[短信验证码] 手机号: {phone}, 验证码: {code}, 有效期: {SMS_CODE_TTL_SECONDS}秒")
+    
+    return sms_id
+
+
+def verify_sms_code(sms_id: str, code: str) -> bool:
+    """验证短信验证码"""
+    clean_expired_codes()
+    record = _sms_codes.pop(sms_id, None)
+    if not record:
+        return False
+    expected, expires_at = record
+    if expires_at < time.time():
+        return False
+    return expected == code.strip()
+
+
+def clean_expired_codes() -> None:
+    """清理过期的验证码"""
+    now = time.time()
+    expired = [sms_id for sms_id, (_, expires_at) in _sms_codes.items() if expires_at < now]
+    for sms_id in expired:
+        _sms_codes.pop(sms_id, None)
+```
+
+## 第九步：测试验证
+
+### 1. 检查配置
+
+```bash
+# 查看环境变量
+echo $ALIYUN_ACCESS_KEY_ID
+echo $ALIYUN_SMS_SIGN_NAME
+echo $ALIYUN_SMS_TEMPLATE_CODE
+```
+
+### 2. 重启服务
+
+```bash
+# 重启后端服务
+systemctl restart backend
+# 或
+pm2 restart backend
+```
+
+### 3. 查看日志
+
+```bash
+# 查看日志
+tail -f /var/log/backend/app.log
+```
+
+### 4. 测试发送
+
+访问公开查询页面，输入手机号，点击「获取验证码」，查看：
+- 是否收到短信
+- 日志是否有发送记录
+
+## 常见问题排查
+
+### 1. 签名或模板审核不通过
+
+**原因**：
+- 签名与备案域名不一致
+- 模板内容不符合规范
+- 证明材料不清晰
+
+**解决**：
+- 确保签名与备案域名一致
+- 模板变量格式使用 `${变量名}`
+- 上传清晰的营业执照照片
+
+### 2. 发送失败，返回错误码
+
+**常见错误码**：
+- `isv.BUSINESS_LIMIT_CONTROL`：发送频率超限
+- `isv.INVALID_PARAMETERS`：参数错误
+- `isv.SMS_SIGNATURE_ILLEGAL`：签名不合法
+- `isv.SMS_TEMPLATE_ILLEGAL`：模板不合法
+
+**解决**：
+- 检查签名和模板是否审核通过
+- 检查手机号格式是否正确
+- 检查模板变量格式是否正确
+
+### 3. 发送成功但收不到短信
+
+**可能原因**：
+- 手机号被运营商拦截
+- 短信内容触发风控
+- 手机号在黑名单中
+
+**解决**：
+- 换个手机号测试
+- 检查短信内容是否合规
+- 联系阿里云客服
+
+### 4. AccessKey 权限不足
+
+**错误信息**：
+```
+Code: InvalidAccessKeyId.NotFound
+```
+
+**解决**：
+- 检查 AccessKey ID 是否正确
+- 检查 AccessKey 是否已启用
+- 检查 RAM 子账号权限
+
+## 费用说明
+
+- **短信费用**：0.045元/条（国内）
+- **免费额度**：新用户有100条免费额度
+- **计费方式**：按条计费，发送成功才计费
+
+## 安全建议
+
+1. **使用 RAM 子账号**：
+   - 创建专门的 RAM 子账号
+   - 只授予「短信服务」权限
+   - 不使用主账号的 AccessKey
+
+2. **限制发送频率**：
+   - 同一手机号：1条/分钟，5条/小时
+   - 同一IP：5条/分钟
+
+3. **监控告警**：
+   - 设置短信发送量告警
+   - 监控异常发送行为
+
+4. **定期轮换 AccessKey**：
+   - 建议每3个月轮换一次
+   - 轮换时先创建新 Key，再删除旧 Key
+
+## 相关文档
+
+- [阿里云短信服务官方文档](https://help.aliyun.com/product/44286.html)
+- [短信服务API参考](https://help.aliyun.com/document_detail/101414.html)
+- [短信服务错误码](https://help.aliyun.com/document_detail/101345.html)
diff --git a/docs/decision-log.md b/docs/decision-log.md
index 1ef8097..98d4f30 100644
--- a/docs/decision-log.md
+++ b/docs/decision-log.md
@@ -18,9 +18,9 @@
 
 ### D003 公开查询方式
 
-- 决定：一期公开查询支持两种方式：证书编号 + 姓名 + 图形验证码，或手机号 + 姓名 + 图形验证码。
-- 说明：手机号 + 姓名可能匹配多张证书，查询结果按列表展示。
-- 风控：继续保留图形验证码和基础频率限制，降低批量撞库风险。
+- 决定：一期公开查询支持两种方式：证书编号 + 姓名 + 图形验证码，或手机号 + 短信验证码。
+- 说明：短信验证码查询无需姓名验证，通过手机号匹配可能返回多张证书，查询结果按列表展示。
+- 风控：短信验证码有效期5分钟，同一手机号5分钟内最多发送3次，同一IP每分钟最多发送5次，查询接口保留基础频率限制。
 
 ### D004 作废证书 PDF
 
diff --git a/docs/deployment-checklist.md b/docs/deployment-checklist.md
index 850c19d..3c4eb6a 100644
--- a/docs/deployment-checklist.md
+++ b/docs/deployment-checklist.md
@@ -44,7 +44,9 @@ docker compose exec backend python -m app.cli init-db --admin-username admin --a
 - 可新增证书并生成编号。
 - 可上传 Excel 并确认导入。
 - 可导出证书和直达链接。
-- 公开查询必须输入验证码。
+- 公开查询支持两种方式：
+  - 证书编号查询：必须输入姓名和图形验证码。
+  - 短信验证码查询：必须输入手机号和短信验证码。
 - 作废证书不能下载正常 PDF。
 - 直达链接重置后旧链接失效。
 - PDF 可生成，二维码可打开核验页。
diff --git a/docs/mvp-scope.md b/docs/mvp-scope.md
index 9907014..76be57c 100644
--- a/docs/mvp-scope.md
+++ b/docs/mvp-scope.md
@@ -9,7 +9,7 @@
 5. Excel 批量导入，导入前校验，导入后生成证书编号和公开访问 token。
 6. 证书编号系统自动生成，格式为 `PX{YYYY}-{项目代码}-{7位短码}-{2位校验码}`。
 7. 批量导出证书数据，包含证书编号和对外直达链接。
-8. 公开查询：证书编号 + 姓名 + 图形验证码。
+8. 公开查询：证书编号 + 姓名 + 图形验证码，或手机号 + 短信验证码。
 9. 证书直达页：通过不可枚举 token 查看单张证书。
 10. 二维码核验页：展示真实性、状态和必要证书信息。
 11. PDF 下载：服务端按需生成，占位模板，缓存 30 天。
diff --git a/docs/usage-deployment-manual.md b/docs/usage-deployment-manual.md
index 288fefa..e5af314 100644
--- a/docs/usage-deployment-manual.md
+++ b/docs/usage-deployment-manual.md
@@ -49,8 +49,10 @@ reset-local-data.bat
 ## 公开查询流程
 
 1. 用户进入 `/query`。
-2. 输入证书编号 + 姓名 + 图形验证码，或手机号 + 姓名 + 图形验证码。
-3. 查询成功后展示证书状态和证书信息；手机号查询可能返回多张证书。
+2. 选择查询方式：
+   - 证书编号查询：输入证书编号 + 姓名 + 图形验证码。
+   - 短信验证码查询：输入手机号 + 获取并输入短信验证码。
+3. 查询成功后展示证书状态和证书信息；短信验证码查询可能返回多张证书。
 4. 有效证书可下载 PDF。
 5. 作废证书只展示作废状态，不提供正常 PDF 下载。
 
diff --git a/frontend/src/views/AdminCertificates.vue b/frontend/src/views/AdminCertificates.vue
index 20b7938..0775472 100644
--- a/frontend/src/views/AdminCertificates.vue
+++ b/frontend/src/views/AdminCertificates.vue
@@ -25,7 +25,8 @@
           <el-input v-model.trim="form.course_name" />
         </el-form-item>
         <el-form-item label="阶段名称">
-          <el-input v-model.trim="form.stage_name" />
+          <el-input v-model.trim="form.stage_name" placeholder="如：全部、初级、中级" />
+          <div class="form-tip">证书上将显示为「{输入内容}课程的专业学习」，留空则默认显示「初级课程的专业学习」</div>
         </el-form-item>
         <el-form-item label="发证单位">
           <el-input v-model.trim="form.issuer_name" />
@@ -213,4 +214,11 @@ onMounted(async () => {
 .toolbar .el-input {
   max-width: 340px;
 }
+
+.form-tip {
+  font-size: 12px;
+  color: #94a3b8;
+  line-height: 1.6;
+  margin-top: 4px;
+}
 </style>
diff --git a/frontend/src/views/CertificateQuery.vue b/frontend/src/views/CertificateQuery.vue
index 2f193d0..789036f 100644
--- a/frontend/src/views/CertificateQuery.vue
+++ b/frontend/src/views/CertificateQuery.vue
@@ -13,13 +13,10 @@
         <el-form-item v-if="queryMode === 'certificate'" label="证书编号">
           <el-input v-model.trim="form.certificateNo" placeholder="例如 PX2026-DBY-K7M9Q2R-83" />
         </el-form-item>
-        <el-form-item v-else label="手机号">
-          <el-input v-model.trim="form.phone" placeholder="请输入证书对应手机号" />
-        </el-form-item>
-        <el-form-item label="姓名">
+        <el-form-item v-if="queryMode === 'certificate'" label="姓名">
           <el-input v-model.trim="form.name" placeholder="请输入证书对应姓名" />
         </el-form-item>
-        <el-form-item label="图形验证码">
+        <el-form-item v-if="queryMode === 'certificate'" label="图形验证码">
           <div class="captcha-row">
             <el-input v-model.trim="form.captcha" placeholder="请输入验证码" />
             <button class="captcha-button" type="button" @click="loadCaptcha">
@@ -28,6 +25,31 @@
             </button>
           </div>
         </el-form-item>
+        <el-form-item v-if="queryMode === 'sms'" label="手机号">
+          <el-input v-model.trim="form.phone" placeholder="请输入证书对应手机号" />
+        </el-form-item>
+        <el-form-item v-if="queryMode === 'sms'" label="图形验证码">
+          <div class="captcha-row">
+            <el-input v-model.trim="form.smsCaptcha" placeholder="请输入验证码" />
+            <button class="captcha-button" type="button" @click="loadSmsCaptcha">
+              <img v-if="smsCaptchaImage" :src="smsCaptchaImage" alt="验证码" />
+              <span v-else>刷新</span>
+            </button>
+          </div>
+        </el-form-item>
+        <el-form-item v-if="queryMode === 'sms'" label="短信验证码">
+          <div class="sms-row">
+            <el-input v-model.trim="form.smsCode" placeholder="请输入短信验证码" />
+            <el-button 
+              type="primary" 
+              :disabled="smsCooldown > 0 || !form.phone" 
+              @click="sendSmsCode"
+              :loading="sendingSms"
+            >
+              {{ smsCooldown > 0 ? `${smsCooldown}秒后重试` : '获取验证码' }}
+            </el-button>
+          </div>
+        </el-form-item>
         <el-button type="primary" class="submit" :loading="loading" @click="submitQuery">查询</el-button>
       </el-form>
 
@@ -111,7 +133,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from "vue";
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
 
 import { http, type Captcha, type PublicCertificate } from "../api";
 
@@ -121,13 +143,15 @@ interface SearchResponse {
 
 const queryOptions = [
   { label: "证书编号查询", value: "certificate" },
-  { label: "手机号查询", value: "phone" },
+  { label: "短信验证码查询", value: "sms" },
 ];
 
-const queryMode = ref<"certificate" | "phone">("certificate");
-const form = reactive({ certificateNo: "", phone: "", name: "", captcha: "" });
+const queryMode = ref<"certificate" | "sms">("certificate");
+const form = reactive({ certificateNo: "", phone: "", name: "", captcha: "", smsCaptcha: "", smsCode: "" });
 const captchaId = ref("");
 const captchaImage = ref("");
+const smsCaptchaId = ref("");
+const smsCaptchaImage = ref("");
 const loading = ref(false);
 const message = ref("");
 const messageType = ref<"success" | "warning" | "error">("warning");
@@ -135,6 +159,10 @@ const results = ref<PublicCertificate[]>([]);
 const previewVisible = ref(false);
 const current = ref<PublicCertificate | null>(null);
 const previewPdfUrl = ref("");
+const smsId = ref("");
+const sendingSms = ref(false);
+const smsCooldown = ref(0);
+let smsTimer: number | null = null;
 
 function statusText(status: string) {
   return status === "valid" ? "有效" : "已作废";
@@ -147,6 +175,9 @@ function courseText(item: PublicCertificate) {
 watch(queryMode, () => {
   message.value = "";
   results.value = [];
+  if (queryMode.value === "sms") {
+    loadSmsCaptcha();
+  }
 });
 
 async function loadCaptcha() {
@@ -156,18 +187,86 @@ async function loadCaptcha() {
   form.captcha = "";
 }
 
+async function loadSmsCaptcha() {
+  const { data } = await http.get<Captcha>("/public/captcha");
+  smsCaptchaId.value = data.captcha_id;
+  smsCaptchaImage.value = data.image;
+  form.smsCaptcha = "";
+}
+
+async function sendSmsCode() {
+  if (!form.phone) {
+    message.value = "请先输入手机号";
+    messageType.value = "warning";
+    return;
+  }
+  
+  sendingSms.value = true;
+  message.value = "";
+  
+  try {
+    const { data } = await http.post<{ sms_id: string; message: string }>("/public/sms/send", {
+      phone: form.phone,
+      captcha_id: smsCaptchaId.value,
+      captcha_code: form.smsCaptcha,
+    });
+    smsId.value = data.sms_id;
+    message.value = data.message;
+    messageType.value = "success";
+    
+    // 开始倒计时
+    smsCooldown.value = 60;
+    if (smsTimer) clearInterval(smsTimer);
+    smsTimer = window.setInterval(() => {
+      smsCooldown.value--;
+      if (smsCooldown.value <= 0) {
+        if (smsTimer) clearInterval(smsTimer);
+        smsTimer = null;
+      }
+    }, 1000);
+  } catch (error: any) {
+    message.value = error?.response?.data?.detail || "发送失败，请稍后再试";
+    messageType.value = "error";
+    await loadSmsCaptcha();
+  } finally {
+    sendingSms.value = false;
+  }
+}
+
 async function submitQuery() {
   loading.value = true;
   message.value = "";
   results.value = [];
+  
   try {
-    const { data } = await http.post<SearchResponse>("/public/certificates/search", {
-      certificate_no: queryMode.value === "certificate" ? form.certificateNo : null,
-      phone: queryMode.value === "phone" ? form.phone : null,
-      name: form.name,
-      captcha_id: captchaId.value,
-      captcha_code: form.captcha,
-    });
+    let data: SearchResponse;
+    
+    if (queryMode.value === "certificate") {
+      // 证书编号查询
+      const response = await http.post<SearchResponse>("/public/certificates/search", {
+        certificate_no: form.certificateNo,
+        phone: null,
+        name: form.name,
+        captcha_id: captchaId.value,
+        captcha_code: form.captcha,
+      });
+      data = response.data;
+    } else {
+      // 短信验证码查询
+      if (!smsId.value) {
+        message.value = "请先获取短信验证码";
+        messageType.value = "warning";
+        return;
+      }
+      
+      const response = await http.post<SearchResponse>("/public/certificates/search-by-sms", {
+        phone: form.phone,
+        sms_id: smsId.value,
+        sms_code: form.smsCode,
+      });
+      data = response.data;
+    }
+    
     results.value = data.items;
     const hasVoided = data.items.some((item) => item.status !== "valid");
     message.value = hasVoided ? "已查询到证书，其中包含作废证书，请核对状态。" : "已查询到匹配证书。";
@@ -175,7 +274,9 @@ async function submitQuery() {
   } catch (error: any) {
     message.value = error?.response?.data?.detail || "查询失败，请稍后再试";
     messageType.value = "error";
-    await loadCaptcha();
+    if (queryMode.value === "certificate") {
+      await loadCaptcha();
+    }
   } finally {
     loading.value = false;
   }
@@ -208,6 +309,14 @@ function downloadPdf(item: PublicCertificate) {
 }
 
 onMounted(loadCaptcha);
+
+// 清理定时器
+onUnmounted(() => {
+  if (smsTimer) {
+    clearInterval(smsTimer);
+    smsTimer = null;
+  }
+});
 </script>
 
 <style scoped>
@@ -258,6 +367,13 @@ h1 {
   width: 100%;
 }
 
+.sms-row {
+  display: grid;
+  grid-template-columns: 1fr 120px;
+  gap: 10px;
+  width: 100%;
+}
+
 .captcha-button {
   height: 34px;
   padding: 0;
diff --git a/local_app/server.py b/local_app/server.py
index f4bbabc..c070a63 100644
--- a/local_app/server.py
+++ b/local_app/server.py
@@ -3,6 +3,7 @@ import hashlib
 import hmac
 import io
 import json
+import random
 import secrets
 import sqlite3
 import time
@@ -27,6 +28,7 @@ DB_PATH = DATA / "local.db"
 SECRET = "local-dev-secret"
 ALPHABET = "23456789ABCDEFGHJKLMNPQRSTUVWXYZ"
 CAPTCHAS: dict[str, tuple[str, float]] = {}
+SMS_CODES: dict[str, tuple[str, float]] = {}
 LOG_RETENTION_DAYS = 180
 HIGH_RISK_LOG_RETENTION_DAYS = 365
 
@@ -312,11 +314,37 @@ def make_captcha() -> dict:
     code = "".join(secrets.choice("ABCDEFGHJKLMNPQRSTUVWXYZ23456789") for _ in range(4))
     captcha_id = secrets.token_urlsafe(12)
     CAPTCHAS[captcha_id] = (code, time.time() + 300)
-    image = Image.new("RGB", (132, 44), "#f8fafc")
+    
+    # 增大图片尺寸，提高可读性
+    width, height = 180, 56
+    image = Image.new("RGB", (width, height), "#f0f7f7")
     draw = ImageDraw.Draw(image)
-    font = ImageFont.load_default()
+    
+    # 使用更大的字体
+    font = pil_font(28, "hei", True)
+    
+    # 绘制背景干扰线
+    for _ in range(6):
+        x1, y1 = random.randint(0, width), random.randint(0, height)
+        x2, y2 = random.randint(0, width), random.randint(0, height)
+        draw.line((x1, y1, x2, y2), fill="#b8d4d4", width=1)
+    
+    # 绘制干扰点
+    for _ in range(30):
+        x, y = random.randint(0, width), random.randint(0, height)
+        draw.point((x, y), fill="#a0c8c8")
+    
+    # 绘制验证码字符，带随机偏移
+    colors = ["#1a5c5c", "#2d7a7a", "#1f6b6b", "#3a8a8a", "#0e4a4a"]
     for i, ch in enumerate(code):
-        draw.text((18 + i * 26, 14), ch, fill="#111827", font=font)
+        x = 22 + i * 38 + random.randint(-3, 3)
+        y = 10 + random.randint(-5, 5)
+        color = secrets.choice(colors)
+        draw.text((x, y), ch, fill=color, font=font)
+    
+    # 添加边框
+    draw.rectangle((0, 0, width - 1, height - 1), outline="#c8dede", width=1)
+    
     buf = io.BytesIO()
     image.save(buf, "PNG")
     return {"captcha_id": captcha_id, "image": "data:image/png;base64," + base64.b64encode(buf.getvalue()).decode()}
@@ -327,6 +355,41 @@ def verify_captcha(captcha_id: str, code: str) -> bool:
     return bool(record and record[1] > time.time() and record[0].upper() == code.strip().upper())
 
 
+def generate_sms_code(phone: str) -> str:
+    """生成短信验证码"""
+    # 清理过期的验证码
+    now = time.time()
+    expired = [sms_id for sms_id, (_, expires_at) in SMS_CODES.items() if expires_at < now]
+    for sms_id in expired:
+        SMS_CODES.pop(sms_id, None)
+    
+    code = "".join(secrets.choice("0123456789") for _ in range(6))
+    sms_id = secrets.token_urlsafe(16)
+    SMS_CODES[sms_id] = (code, now + 300)  # 5分钟有效期
+    
+    # 在本地测试环境下，将验证码记录到日志
+    print(f"[短信验证码] 手机号: {phone}, 验证码: {code}, 有效期: 300秒")
+    
+    return sms_id
+
+
+def verify_sms_code(sms_id: str, code: str) -> bool:
+    """验证短信验证码"""
+    # 清理过期的验证码
+    now = time.time()
+    expired = [sid for sid, (_, expires_at) in SMS_CODES.items() if expires_at < now]
+    for sid in expired:
+        SMS_CODES.pop(sid, None)
+    
+    record = SMS_CODES.pop(sms_id, None)
+    if not record:
+        return False
+    expected, expires_at = record
+    if expires_at < now:
+        return False
+    return expected == code.strip()
+
+
 def parse_multipart(body: bytes, content_type: str) -> tuple[str, bytes]:
     boundary = content_type.split("boundary=", 1)[1].encode()
     parts = body.split(b"--" + boundary)
@@ -361,7 +424,13 @@ def public_payload(conn: sqlite3.Connection, cert: sqlite3.Row) -> dict:
 
 
 def font_name() -> str:
-    for path in [r"C:\Windows\Fonts\msyh.ttc", r"C:\Windows\Fonts\simsun.ttc"]:
+    for path in [
+        r"C:\Windows\Fonts\msyh.ttc", r"C:\Windows\Fonts\simsun.ttc",
+        "/System/Library/Fonts/PingFang.ttc",
+        "/System/Library/Fonts/Supplemental/Songti.ttc",
+        "/System/Library/Fonts/STHeiti Light.ttc",
+        "/System/Library/Fonts/Supplemental/Heiti.ttc",
+    ]:
         if Path(path).exists():
             try:
                 pdfmetrics.registerFont(TTFont("LocalCJK", path))
@@ -373,13 +442,32 @@ def font_name() -> str:
 
 def pil_font(size: int, kind: str = "song", bold: bool = False) -> ImageFont.FreeTypeFont | ImageFont.ImageFont:
     choices = {
-        "kai": [r"C:\Windows\Fonts\simkai.ttf", r"C:\Windows\Fonts\msyh.ttc", r"C:\Windows\Fonts\simsun.ttc"],
-        "hei": [r"C:\Windows\Fonts\simhei.ttf", r"C:\Windows\Fonts\msyhbd.ttc", r"C:\Windows\Fonts\msyh.ttc"],
-        "song": [r"C:\Windows\Fonts\msyh.ttc", r"C:\Windows\Fonts\simsun.ttc"],
+        "kai": [
+            r"C:\Windows\Fonts\simkai.ttf", r"C:\Windows\Fonts\msyh.ttc", r"C:\Windows\Fonts\simsun.ttc",
+            "/System/Library/Fonts/Supplemental/Kaiti.ttc",
+            "/System/Library/Fonts/PingFang.ttc",
+            "/System/Library/Fonts/Supplemental/Songti.ttc",
+        ],
+        "hei": [
+            r"C:\Windows\Fonts\simhei.ttf", r"C:\Windows\Fonts\msyhbd.ttc", r"C:\Windows\Fonts\msyh.ttc",
+            "/System/Library/Fonts/STHeiti Medium.ttc",
+            "/System/Library/Fonts/Supplemental/Heiti.ttc",
+            "/System/Library/Fonts/PingFang.ttc",
+        ],
+        "song": [
+            r"C:\Windows\Fonts\msyh.ttc", r"C:\Windows\Fonts\simsun.ttc",
+            "/System/Library/Fonts/Supplemental/Songti.ttc",
+            "/System/Library/Fonts/PingFang.ttc",
+            "/System/Library/Fonts/STHeiti Light.ttc",
+        ],
     }
     paths = choices.get(kind, choices["song"])
     if bold and kind == "song":
-        paths = [r"C:\Windows\Fonts\msyhbd.ttc", r"C:\Windows\Fonts\simhei.ttf"] + paths
+        paths = [
+            r"C:\Windows\Fonts\msyhbd.ttc", r"C:\Windows\Fonts\simhei.ttf",
+            "/System/Library/Fonts/STHeiti Medium.ttc",
+            "/System/Library/Fonts/Supplemental/Heiti.ttc",
+        ] + paths
     for item in paths:
         if Path(item).exists():
             try:
@@ -513,7 +601,8 @@ def render_certificate_image(conn: sqlite3.Connection, cert: sqlite3.Row) -> Ima
     x = draw_inline(draw, x, y, issue_day, 24, 4, "kai", True)
     x = draw_inline(draw, x, y, "\u65e5\u5b8c\u6210\u4e86", 24, 8)
     course_text = f"\u201c{cert['course_name'] or cert['certificate_name'] or cert['project_code']}\u201d"
-    stage = cert["stage_name"] or "\u521d\u7ea7\u8bfe\u7a0b\u7684\u4e13\u4e1a\u5b66\u4e60\u3002"
+    stage_input = (cert["stage_name"] or "").strip()
+    stage = f"{stage_input}\u8bfe\u7a0b\u7684\u4e13\u4e1a\u5b66\u4e60\u3002" if stage_input else "\u521d\u7ea7\u8bfe\u7a0b\u7684\u4e13\u4e1a\u5b66\u4e60\u3002"
     draw_inline_flow(draw, [(course_text, "course", 0), (stage, "normal", 14)], x, y)
 
     issue_label = f"\u53d1\u8bc1\u65e5\u671f\uff1a{issue_year} \u5e74 {issue_month} \u6708 {issue_day} \u65e5"
@@ -705,6 +794,15 @@ class Handler(BaseHTTPRequestHandler):
                 return self.json({"access_token": make_token(admin["id"]), "token_type": "bearer", "username": admin["username"], "role_code": "system_admin"})
             if path == "/api/public/captcha":
                 return self.json(make_captcha())
+            if path == "/api/public/sms/send":
+                data = json.loads(body or b"{}")
+                phone = data.get("phone", "").strip()
+                if not phone:
+                    return self.error(400, "\u8bf7\u8f93\u5165\u624b\u673a\u53f7")
+                if not verify_captcha(data.get("captcha_id", ""), data.get("captcha_code", "")):
+                    return self.error(400, "\u56fe\u5f62\u9a8c\u8bc1\u7801\u9519\u8bef\u6216\u5df2\u8fc7\u671f\uff0c\u8bf7\u91cd\u65b0\u8f93\u5165")
+                sms_id = generate_sms_code(phone)
+                return self.json({"sms_id": sms_id, "message": "\u9a8c\u8bc1\u7801\u5df2\u53d1\u9001"})
             if path == "/api/public/certificates/search":
                 data = json.loads(body or b"{}")
                 if not verify_captcha(data.get("captcha_id", ""), data.get("captcha_code", "")):
@@ -729,6 +827,24 @@ class Handler(BaseHTTPRequestHandler):
                     return self.error(404, "\u672a\u67e5\u8be2\u5230\u5339\u914d\u7684\u6709\u6548\u8bc1\u4e66\u4fe1\u606f\uff0c\u8bf7\u6838\u5bf9\u540e\u91cd\u8bd5")
                 log(conn, None, "public_search_certificate", "public_access", result[0]["certificate_no"], {"mode": "certificate_no" if query_certificate_no else "phone", "name": name, "certificate_no": query_certificate_no or None, "phone": mask_phone(phone), "matched_count": len(result), "result": "matched"})
                 return self.json({"items": [public_payload(conn, item) for item in result]})
+            if path == "/api/public/certificates/search-by-sms":
+                data = json.loads(body or b"{}")
+                phone = data.get("phone", "").strip()
+                sms_id = data.get("sms_id", "").strip()
+                sms_code = data.get("sms_code", "").strip()
+                if not phone or not sms_id or not sms_code:
+                    return self.error(400, "\u8bf7\u8f93\u5165\u624b\u673a\u53f7\u548c\u77ed\u4fe1\u9a8c\u8bc1\u7801")
+                if not verify_sms_code(sms_id, sms_code):
+                    return self.error(400, "\u9a8c\u8bc1\u7801\u9519\u8bef\u6216\u5df2\u8fc7\u671f\uff0c\u8bf7\u91cd\u65b0\u83b7\u53d6")
+                result = rows(conn,
+                    "select c.* from certificates c join learners l on l.id=c.learner_id where l.phone=? order by c.issue_date desc,c.id desc",
+                    (phone,),
+                )
+                if not result:
+                    log(conn, None, "public_search_certificate_sms", "public_access", None, {"mode": "phone_sms", "phone": mask_phone(phone), "matched_count": 0, "result": "not_found"})
+                    return self.error(404, "\u672a\u67e5\u8be2\u5230\u5339\u914d\u7684\u8bc1\u4e66\u4fe1\u606f\uff0c\u8bf7\u6838\u5bf9\u624b\u673a\u53f7\u540e\u91cd\u8bd5")
+                log(conn, None, "public_search_certificate_sms", "public_access", result[0]["certificate_no"], {"mode": "phone_sms", "phone": mask_phone(phone), "matched_count": len(result), "result": "matched"})
+                return self.json({"items": [public_payload(conn, item) for item in result]})
             if path.startswith("/api/public/certificates/token/"):
                 token = unquote(path.split("/")[5])
                 cert = conn.execute("select * from certificates where public_token=? or qr_token=?", (token, token)).fetchone()
diff --git a/local_app/static/index.html b/local_app/static/index.html
index 7cca5a6..6d2cfe1 100644
--- a/local_app/static/index.html
+++ b/local_app/static/index.html
@@ -4,123 +4,1055 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>&#22521;&#35757;&#32467;&#19994;&#35777;&#20070;&#31649;&#29702;&#19982;&#26597;&#35810;&#31995;&#32479;</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
-      * { box-sizing: border-box; }
+      * { box-sizing: border-box; margin: 0; padding: 0; }
       :root {
-        --bg: #f5f8fa;
+        --bg: #f0f7f7;
         --surface: #ffffff;
-        --surface-soft: #f9fbfc;
-        --border: #dbe6ea;
-        --border-strong: #c8d7dd;
-        --text: #172033;
-        --muted: #64748b;
+        --surface-soft: #f7fbfb;
+        --border: #d4e4e4;
+        --border-strong: #b8d0d0;
+        --text: #1a2e2e;
+        --muted: #5a7a7a;
         --primary: #16817e;
         --primary-strong: #0f6f6b;
         --primary-soft: #e6f5f3;
+        --primary-light: #f0faf9;
         --danger: #c9413a;
         --warning: #b7791f;
-        --shadow: 0 14px 36px rgba(42, 64, 78, .08);
-        --shadow-soft: 0 8px 22px rgba(42, 64, 78, .055);
+        --shadow: 0 20px 60px rgba(22, 129, 126, .1);
+        --shadow-soft: 0 8px 30px rgba(22, 129, 126, .06);
+        --radius: 12px;
+        --radius-lg: 20px;
+      }
+      body { 
+        font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; 
+        color: var(--text); 
+        background: var(--bg);
+        min-height: 100vh;
+        line-height: 1.6;
       }
-      body { margin: 0; font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif; color: var(--text); background: linear-gradient(180deg, #f7fafb 0%, #eef4f6 100%); }
       button, input, select { font: inherit; }
-      button { height: 36px; border: 0; border-radius: 7px; padding: 0 14px; background: var(--primary); color: #fff; cursor: pointer; font-weight: 650; }
-      button:hover { filter: brightness(.96); }
-      button.secondary { color: #33515f; background: #fff; border: 1px solid var(--border-strong); }
-      button.danger { background: var(--danger); }
-      button.ghost { background: transparent; color: #475569; }
-      input, select { height: 36px; min-width: 150px; border: 1px solid var(--border); border-radius: 8px; padding: 0 11px; background: #fff; outline: none; }
-      input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,129,126,.12); }
-      select {
-        appearance: none;
-        padding-right: 38px;
-        background-image: linear-gradient(45deg, transparent 50%, #334155 50%), linear-gradient(135deg, #334155 50%, transparent 50%);
-        background-position: calc(100% - 19px) 14px, calc(100% - 13px) 14px;
-        background-size: 6px 6px, 6px 6px;
-        background-repeat: no-repeat;
+      button { 
+        height: 44px; 
+        border: 0; 
+        border-radius: var(--radius); 
+        padding: 0 24px; 
+        background: var(--primary); 
+        color: #fff; 
+        cursor: pointer; 
+        font-weight: 600; 
+        font-size: 15px;
+        transition: all 0.2s ease;
       }
+      button:hover { 
+        background: var(--primary-strong); 
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(22, 129, 126, .3);
+      }
+      button:active { transform: translateY(0); }
+      button.secondary { 
+        color: var(--primary); 
+        background: var(--primary-soft); 
+        border: 1px solid transparent;
+      }
+      button.secondary:hover { 
+        background: #d5eeeb; 
+        box-shadow: none;
+      }
+      button.danger { background: var(--danger); }
+      button.ghost { background: transparent; color: var(--muted); }
+      input, select { 
+        height: 48px; 
+        min-width: 150px; 
+        border: 2px solid var(--border); 
+        border-radius: 14px; 
+        padding: 0 18px; 
+        background: #fff; 
+        outline: none; 
+        font-size: 15px;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 4px rgba(0,0,0,.02);
+      }
+      input:focus, select:focus { 
+        border-color: var(--primary); 
+        box-shadow: 
+          0 0 0 4px rgba(22,129,126,.12),
+          0 2px 8px rgba(22,129,126,.1); 
+        transform: translateY(-1px);
+      }
+      input::placeholder { color: #9cb8b8; font-weight: 400; }
       h1, h2, h3 { margin: 0; }
-      table { width: 100%; border-collapse: collapse; background: #fff; }
-      th, td { padding: 11px 12px; border-bottom: 1px solid #e5edf0; text-align: left; font-size: 14px; vertical-align: middle; }
-      th { background: #f6fafb; color: #52677a; font-weight: 700; }
-      tr:hover td { background: #f8fcfc; }
       .hidden { display: none !important; }
-      .login-page, .query-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
-      .login-card, .query-card { width: min(540px, 100%); background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 30px; box-shadow: var(--shadow); }
-      .login-card h1, .query-card h1 { font-size: 26px; margin-bottom: 18px; }
-      .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
-      .stack { display: grid; gap: 12px; }
-      .choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; border: 1px solid var(--border); border-radius: 9px; background: #f4f8fa; }
-      .choice button { background: transparent; color: #42576a; }
-      .choice button.active { background: var(--primary); color: #fff; }
-      .muted { color: #64748b; font-size: 13px; line-height: 1.6; }
-      .app { min-height: 100vh; display: grid; grid-template-columns: 236px 1fr; }
-      .side { background: rgba(255,255,255,.94); color: #314355; padding: 24px 14px; border-right: 1px solid #e1ebef; box-shadow: 8px 0 26px rgba(42,64,78,.045); }
-      .brand { padding: 0 12px 20px; border-bottom: 1px solid #e1ebef; margin-bottom: 18px; }
-      .brand h1 { font-size: 21px; color: #172033; font-weight: 800; }
-      .brand p { margin: 6px 0 0; color: #6b8795; font-size: 12px; }
-      .nav { display: grid; gap: 6px; }
-      .nav button { width: 100%; justify-content: flex-start; text-align: left; background: transparent; color: #42576a; border-radius: 8px; }
-      .nav button.active, .nav button:hover { background: var(--primary-soft); color: var(--primary-strong); }
-      .main { padding: 28px; overflow: auto; }
-      .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
-      .topbar h2 { font-size: 24px; }
-      .panel { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-soft); }
-      .panel-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
-      .form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
-      .form-grid label { display: grid; gap: 6px; color: #475569; font-size: 13px; }
-      .form-grid input, .form-grid select { width: 100%; min-width: 0; }
-      .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
-      .pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
-      .pager button { min-width: 34px; padding: 0 10px; background: #fff; color: #33515f; border: 1px solid #cbd5e1; }
-      .pager button.active { background: #208a87; color: #fff; border-color: #208a87; }
-      .pager button:disabled { opacity: .45; cursor: not-allowed; }
-      .pager span { color: #64748b; padding: 0 4px; }
-      .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
-      .stat { padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(180deg, #fff, #f8fbfc); box-shadow: var(--shadow-soft); }
-      .stat span { color: #64748b; font-size: 13px; }
-      .stat strong { display: block; margin-top: 8px; font-size: 30px; }
-      .pill { display: inline-flex; align-items: center; height: 24px; border-radius: 999px; padding: 0 9px; font-size: 12px; background: var(--primary-soft); color: var(--primary-strong); font-weight: 650; }
-      .pill.bad { background: #fee2e2; color: #991b1b; }
-      .pill.warn { background: #fef3c7; color: #92400e; }
-      .actions { display: flex; gap: 8px; flex-wrap: wrap; }
-      .dialog { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(15,23,42,.45); padding: 24px; z-index: 20; }
-      .dialog-card { width: min(720px, 100%); background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 24px 80px rgba(42,64,78,.22); }
-      .dialog-card pre { white-space: pre-wrap; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; }
-      .result-grid { display: grid; gap: 14px; }
-      .cert-card { border: 1px solid var(--border); border-radius: 10px; padding: 20px; background: linear-gradient(180deg,#fff,#f8fbfc); box-shadow: var(--shadow-soft); }
-      .cert-card h3 { margin-bottom: 10px; }
-      .cert-card .meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 18px; margin: 14px 0; }
-      .cert-card .meta span { display: block; color: #64748b; font-size: 12px; margin-bottom: 3px; }
+      
+      /* 查询页面 */
+      .query-page { 
+        min-height: 100vh; 
+        display: flex; 
+        flex-direction: column;
+        align-items: center; 
+        justify-content: center;
+        padding: 40px 24px; 
+        background: linear-gradient(160deg, #e8f4f4 0%, #f0f8f8 30%, #f8fcfc 60%, #e8f2f2 100%);
+        position: relative;
+        overflow: hidden;
+      }
+      .query-page::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        background: 
+          radial-gradient(circle at 20% 30%, rgba(22, 129, 126, .06) 0%, transparent 40%),
+          radial-gradient(circle at 80% 70%, rgba(22, 129, 126, .04) 0%, transparent 35%),
+          radial-gradient(circle at 50% 50%, rgba(22, 129, 126, .02) 0%, transparent 50%);
+        animation: float 25s ease-in-out infinite;
+      }
+      .query-page::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: 
+          linear-gradient(90deg, transparent 49.5%, rgba(22, 129, 126, .03) 49.5%, rgba(22, 129, 126, .03) 50.5%, transparent 50.5%),
+          linear-gradient(0deg, transparent 49.5%, rgba(22, 129, 126, .03) 49.5%, rgba(22, 129, 126, .03) 50.5%, transparent 50.5%);
+        background-size: 60px 60px;
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      @keyframes float {
+        0%, 100% { transform: translate(0, 0) rotate(0deg); }
+        33% { transform: translate(-1%, 1%) rotate(0.5deg); }
+        66% { transform: translate(1%, -1%) rotate(-0.5deg); }
+      }
+      
+      .query-header {
+        text-align: center;
+        margin-bottom: 36px;
+        position: relative;
+        z-index: 1;
+      }
+      .query-header .icon {
+        width: 72px;
+        height: 72px;
+        background: linear-gradient(135deg, var(--primary) 0%, #0d5f5c 100%);
+        border-radius: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto 24px;
+        box-shadow: 
+          0 12px 32px rgba(22, 129, 126, .35),
+          0 4px 12px rgba(22, 129, 126, .2),
+          inset 0 1px 0 rgba(255,255,255,.2);
+        position: relative;
+      }
+      .query-header .icon::before {
+        content: '';
+        position: absolute;
+        inset: -3px;
+        border-radius: 23px;
+        background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,0));
+        z-index: -1;
+      }
+      .query-header .icon svg {
+        width: 36px;
+        height: 36px;
+        fill: white;
+        filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
+      }
+      .query-header h1 {
+        font-size: 32px;
+        font-weight: 800;
+        color: var(--text);
+        margin-bottom: 10px;
+        letter-spacing: -0.5px;
+        text-shadow: 0 1px 2px rgba(0,0,0,.05);
+      }
+      .query-header p {
+        color: var(--muted);
+        font-size: 16px;
+        font-weight: 400;
+      }
+      
+      .query-card { 
+        width: min(520px, 100%); 
+        background: rgba(255,255,255,.95); 
+        border: 2px solid var(--border); 
+        border-top: 4px solid var(--primary);
+        border-radius: 16px; 
+        padding: 32px 36px; 
+        box-shadow: 
+          0 24px 64px rgba(22, 129, 126, .12),
+          0 8px 24px rgba(22, 129, 126, .08),
+          0 2px 8px rgba(22, 129, 126, .04);
+        position: relative;
+        z-index: 1;
+        backdrop-filter: blur(10px);
+      }
+      
+      .form-section {
+        margin-bottom: 28px;
+      }
+      .form-section-title {
+        font-size: 12px;
+        font-weight: 700;
+        color: var(--primary);
+        text-transform: uppercase;
+        letter-spacing: 1.5px;
+        margin-bottom: 14px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .form-section-title::before {
+        content: '';
+        width: 4px;
+        height: 16px;
+        background: var(--primary);
+        border-radius: 2px;
+      }
+      
+      .choice { 
+        display: grid; 
+        grid-template-columns: 1fr 1fr; 
+        gap: 6px; 
+        padding: 6px; 
+        border: 2px solid var(--border); 
+        border-radius: 16px; 
+        background: var(--surface-soft); 
+      }
+      .choice button { 
+        background: transparent; 
+        color: var(--muted); 
+        height: 44px;
+        font-size: 14px;
+        font-weight: 600;
+        border-radius: 12px;
+        transition: all 0.3s ease;
+      }
+      .choice button.active { 
+        background: var(--primary); 
+        color: #fff; 
+        box-shadow: 
+          0 4px 16px rgba(22, 129, 126, .35),
+          0 2px 4px rgba(22, 129, 126, .2);
+        transform: translateY(-1px);
+      }
+      .choice button:not(.active):hover {
+        background: rgba(22, 129, 126, .08);
+        color: var(--primary);
+      }
+      
+      .field-group {
+        display: grid;
+        gap: 20px;
+        animation: fadeIn .4s ease;
+      }
+      @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(12px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+      
+      .captcha-row { 
+        display: flex; 
+        gap: 12px; 
+        align-items: center;
+      }
+      .captcha-row input {
+        flex: 1;
+        height: 48px;
+        border-radius: 14px;
+        font-size: 16px;
+        letter-spacing: 2px;
+      }
+      .captcha-row img {
+        height: 48px;
+        border: 2px solid var(--border);
+        border-radius: 14px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 8px rgba(0,0,0,.05);
+      }
+      .captcha-row img:hover {
+        border-color: var(--primary);
+        box-shadow: 0 4px 12px rgba(22, 129, 126, .2);
+        transform: scale(1.02);
+      }
+      
+      .sms-row {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+      }
+      .sms-row input {
+        flex: 1;
+        min-width: 0;
+        height: 48px;
+        border-radius: 14px;
+        font-size: 16px;
+        letter-spacing: 4px;
+        text-align: center;
+      }
+      .sms-row button {
+        flex-shrink: 0;
+        white-space: nowrap;
+        padding: 0 20px;
+        height: 48px;
+        border-radius: 14px;
+        font-weight: 600;
+      }
+      
+      #smsFields .form-section {
+        margin-bottom: 0;
+      }
+      #smsFields .form-section > input {
+        width: 100%;
+        display: block;
+      }
+      
+      .submit-btn {
+        width: 100%;
+        height: 52px;
+        font-size: 17px;
+        font-weight: 700;
+        background: linear-gradient(135deg, var(--primary) 0%, #0d5f5c 100%);
+        border: none;
+        border-radius: 16px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        position: relative;
+        overflow: hidden;
+        letter-spacing: 1px;
+        box-shadow: 
+          0 8px 24px rgba(22, 129, 126, .3),
+          0 4px 8px rgba(22, 129, 126, .2);
+      }
+      .submit-btn::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
+        transition: left 0.6s ease;
+      }
+      .submit-btn:hover::before {
+        left: 100%;
+      }
+      .submit-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 
+          0 12px 32px rgba(22, 129, 126, .4),
+          0 6px 12px rgba(22, 129, 126, .25);
+      }
+      .submit-btn:active {
+        transform: translateY(0);
+      }
+      
+      .disclaimer {
+        margin-top: 24px;
+        padding-top: 20px;
+        border-top: 1px solid var(--border);
+        font-size: 12px;
+        color: var(--muted);
+        line-height: 1.8;
+        text-align: center;
+        opacity: 0.8;
+      }
+      
+      /* 结果区域 */
+      .result-card {
+        margin-top: 28px;
+        width: min(520px, 100%);
+        background: rgba(255,255,255,.95);
+        border: 2px solid var(--border);
+        border-top: 4px solid var(--primary);
+        border-radius: 16px;
+        padding: 32px 36px;
+        box-shadow: 
+          0 24px 64px rgba(22, 129, 126, .12),
+          0 8px 24px rgba(22, 129, 126, .08);
+        position: relative;
+        z-index: 1;
+        animation: slideUp .5s ease;
+        backdrop-filter: blur(10px);
+      }
+      @keyframes slideUp {
+        from { opacity: 0; transform: translateY(24px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+      
+      .result-header {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        margin-bottom: 24px;
+        padding-bottom: 18px;
+        border-bottom: 2px solid var(--border);
+      }
+      .result-icon {
+        width: 44px;
+        height: 44px;
+        border-radius: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4px 12px rgba(0,0,0,.1);
+      }
+      .result-icon.success {
+        background: linear-gradient(135deg, #ecfdf5, #d1fae5);
+        color: #059669;
+      }
+      .result-icon.warning {
+        background: linear-gradient(135deg, #fef3c7, #fde68a);
+        color: #d97706;
+      }
+      .result-header h3 {
+        font-size: 20px;
+        font-weight: 700;
+        color: var(--text);
+      }
+      
+      .cert-item {
+        padding: 20px;
+        border: 2px solid var(--border);
+        border-radius: 16px;
+        margin-bottom: 16px;
+        background: linear-gradient(135deg, var(--surface-soft), #fff);
+        transition: all 0.3s ease;
+        position: relative;
+        overflow: hidden;
+      }
+      .cert-item::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 4px;
+        height: 100%;
+        background: var(--primary);
+        border-radius: 2px 0 0 2px;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      }
+      .cert-item:hover {
+        border-color: var(--primary);
+        box-shadow: 
+          0 8px 24px rgba(22, 129, 126, .15),
+          0 4px 8px rgba(22, 129, 126, .1);
+        transform: translateY(-2px);
+      }
+      .cert-item:hover::before {
+        opacity: 1;
+      }
+      .cert-item:last-child {
+        margin-bottom: 0;
+      }
+      .cert-name {
+        font-weight: 700;
+        font-size: 18px;
+        color: var(--text);
+        margin-bottom: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .cert-meta {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 12px;
+        font-size: 14px;
+      }
+      .cert-meta span {
+        color: var(--muted);
+        font-size: 12px;
+        font-weight: 500;
+      }
+      .cert-meta strong {
+        color: var(--text);
+        font-weight: 600;
+        display: block;
+        margin-top: 2px;
+      }
+      
+      .status-badge {
+        display: inline-flex;
+        align-items: center;
+        height: 28px;
+        padding: 0 12px;
+        border-radius: 999px;
+        font-size: 13px;
+        font-weight: 700;
+        box-shadow: 0 2px 4px rgba(0,0,0,.1);
+      }
+      .status-badge.valid {
+        background: linear-gradient(135deg, #ecfdf5, #d1fae5);
+        color: #059669;
+      }
+      .status-badge.void {
+        background: linear-gradient(135deg, #fef2f2, #fecaca);
+        color: #dc2626;
+      }
+      
+      .cert-actions {
+        display: flex;
+        gap: 10px;
+        margin-top: 16px;
+        padding-top: 16px;
+        border-top: 1px solid var(--border);
+      }
+      .cert-actions button {
+        height: 40px;
+        padding: 0 20px;
+        font-size: 14px;
+        font-weight: 600;
+        border-radius: 12px;
+        transition: all 0.3s ease;
+      }
+      .cert-actions button:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(22, 129, 126, .25);
+      }
+      
+      .empty-state {
+        text-align: center;
+        padding: 40px 20px;
+        color: var(--muted);
+      }
+      .empty-state svg {
+        width: 48px;
+        height: 48px;
+        margin-bottom: 16px;
+        opacity: .5;
+      }
+      
+      /* 消息提示 */
+      .message {
+        padding: 12px 16px;
+        border-radius: var(--radius);
+        font-size: 14px;
+        margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .message.success {
+        background: #ecfdf5;
+        color: #059669;
+        border: 1px solid #a7f3d0;
+      }
+      .message.warning {
+        background: #fef3c7;
+        color: #92400e;
+        border: 1px solid #fde68a;
+      }
+      .message.error {
+        background: #fef2f2;
+        color: #dc2626;
+        border: 1px solid #fecaca;
+      }
+      
+      /* 加载状态 */
+      .loading {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .loading::after {
+        content: '';
+        width: 16px;
+        height: 16px;
+        border: 2px solid transparent;
+        border-top-color: currentColor;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+      
+      /* 后台页面 */
+      .login-page { 
+        min-height: 100vh; 
+        display: grid; 
+        place-items: center; 
+        padding: 24px;
+        background: var(--bg);
+      }
+      .login-card { 
+        width: min(400px, 100%); 
+        background: #fff; 
+        border: 1px solid var(--border); 
+        border-radius: var(--radius-lg); 
+        padding: 40px; 
+        box-shadow: var(--shadow); 
+      }
+      .login-card h1 { 
+        font-size: 24px; 
+        margin-bottom: 24px; 
+        text-align: center;
+      }
+      .login-card .stack { display: grid; gap: 16px; }
+      .login-card .hint {
+        text-align: center;
+        font-size: 13px;
+        color: var(--muted);
+        margin-top: 8px;
+      }
+      
+      .app { 
+        min-height: 100vh; 
+        display: grid; 
+        grid-template-columns: 240px 1fr;
+        background: var(--bg);
+      }
+      .side { 
+        background: var(--surface); 
+        color: var(--text); 
+        padding: 24px 16px; 
+        border-right: 1px solid var(--border); 
+        box-shadow: 4px 0 20px rgba(22,129,126,.03);
+      }
+      .brand { 
+        padding: 0 12px 24px; 
+        border-bottom: 1px solid var(--border); 
+        margin-bottom: 20px; 
+      }
+      .brand h1 { 
+        font-size: 18px; 
+        font-weight: 700;
+        color: var(--primary);
+      }
+      .brand p { 
+        margin: 6px 0 0; 
+        color: var(--muted); 
+        font-size: 12px; 
+      }
+      .nav { display: grid; gap: 4px; }
+      .nav button { 
+        width: 100%; 
+        justify-content: flex-start; 
+        text-align: left; 
+        background: transparent; 
+        color: var(--muted); 
+        border-radius: 8px;
+        height: 40px;
+        font-weight: 500;
+      }
+      .nav button.active, .nav button:hover { 
+        background: var(--primary-soft); 
+        color: var(--primary-strong); 
+      }
+      .main { 
+        padding: 32px; 
+        overflow: auto; 
+      }
+      .topbar { 
+        display: flex; 
+        justify-content: space-between; 
+        align-items: center; 
+        margin-bottom: 24px; 
+      }
+      .topbar h2 { 
+        font-size: 22px; 
+        font-weight: 700;
+      }
+      .panel { 
+        background: var(--surface); 
+        border: 1px solid var(--border); 
+        border-radius: var(--radius-lg); 
+        padding: 24px; 
+        margin-bottom: 20px; 
+        box-shadow: var(--shadow-soft); 
+      }
+      .panel-title { 
+        display: flex; 
+        justify-content: space-between; 
+        align-items: center; 
+        margin-bottom: 16px; 
+      }
+      .form-grid { 
+        display: grid; 
+        grid-template-columns: repeat(4, minmax(0, 1fr)); 
+        gap: 16px; 
+      }
+      .form-grid label { 
+        display: grid; 
+        gap: 6px; 
+        color: var(--muted); 
+        font-size: 13px; 
+        font-weight: 500;
+      }
+      .form-grid input, .form-grid select { 
+        width: 100%; 
+        min-width: 0; 
+      }
+      .toolbar { 
+        display: flex; 
+        justify-content: space-between; 
+        align-items: center; 
+        gap: 12px; 
+        margin-bottom: 16px; 
+      }
+      .pager { 
+        display: flex; 
+        align-items: center; 
+        justify-content: flex-end; 
+        gap: 6px; 
+        margin: 16px 0; 
+        flex-wrap: wrap; 
+      }
+      .pager button { 
+        min-width: 36px; 
+        padding: 0 12px; 
+        background: var(--surface); 
+        color: var(--text); 
+        border: 1px solid var(--border); 
+        height: 36px;
+      }
+      .pager button.active { 
+        background: var(--primary); 
+        color: #fff; 
+        border-color: var(--primary); 
+      }
+      .pager button:disabled { 
+        opacity: .45; 
+        cursor: not-allowed; 
+      }
+      .pager span { 
+        color: var(--muted); 
+        padding: 0 4px; 
+      }
+      .stats { 
+        display: grid; 
+        grid-template-columns: repeat(4, 1fr); 
+        gap: 16px; 
+      }
+      .stat { 
+        padding: 20px; 
+        border: 1px solid var(--border); 
+        border-radius: var(--radius-lg); 
+        background: linear-gradient(180deg, var(--surface), var(--surface-soft)); 
+        box-shadow: var(--shadow-soft); 
+      }
+      .stat span { 
+        color: var(--muted); 
+        font-size: 13px; 
+      }
+      .stat strong { 
+        display: block; 
+        margin-top: 8px; 
+        font-size: 28px; 
+        color: var(--primary);
+      }
+      .pill { 
+        display: inline-flex; 
+        align-items: center; 
+        height: 24px; 
+        border-radius: 999px; 
+        padding: 0 10px; 
+        font-size: 12px; 
+        background: var(--primary-soft); 
+        color: var(--primary-strong); 
+        font-weight: 600; 
+      }
+      .pill.bad { 
+        background: #fef2f2; 
+        color: #dc2626; 
+      }
+      .pill.warn { 
+        background: #fef3c7; 
+        color: #d97706; 
+      }
+      .actions { 
+        display: flex; 
+        gap: 8px; 
+        flex-wrap: wrap; 
+      }
+      .dialog { 
+        position: fixed; 
+        inset: 0; 
+        display: grid; 
+        place-items: center; 
+        background: rgba(15,23,42,.5); 
+        padding: 24px; 
+        z-index: 20;
+        backdrop-filter: blur(4px);
+      }
+      .dialog-card { 
+        width: min(720px, 100%); 
+        background: var(--surface); 
+        border-radius: var(--radius-lg); 
+        padding: 28px; 
+        box-shadow: 0 25px 80px rgba(22,129,126,.25); 
+        animation: dialogIn .3s ease;
+      }
+      @keyframes dialogIn {
+        from { opacity: 0; transform: scale(.95) translateY(10px); }
+        to { opacity: 1; transform: scale(1) translateY(0); }
+      }
+      .dialog-card pre { 
+        white-space: pre-wrap; 
+        background: var(--surface-soft); 
+        border: 1px solid var(--border); 
+        border-radius: var(--radius); 
+        padding: 16px; 
+        font-size: 13px;
+      }
+      .result-grid { display: grid; gap: 16px; }
+      .cert-card { 
+        border: 1px solid var(--border); 
+        border-radius: var(--radius-lg); 
+        padding: 24px; 
+        background: linear-gradient(180deg,var(--surface),var(--surface-soft)); 
+        box-shadow: var(--shadow-soft); 
+      }
+      .cert-card h3 { 
+        margin-bottom: 12px; 
+        font-size: 16px;
+      }
+      .cert-card .meta { 
+        display: grid; 
+        grid-template-columns: repeat(2,minmax(0,1fr)); 
+        gap: 12px 20px; 
+        margin: 16px 0; 
+      }
+      .cert-card .meta span { 
+        display: block; 
+        color: var(--muted); 
+        font-size: 12px; 
+        margin-bottom: 4px; 
+      }
       @media (max-width: 900px) {
         .app { grid-template-columns: 1fr; }
         .side { position: static; }
         .form-grid, .stats { grid-template-columns: 1fr; }
+        .cert-meta { grid-template-columns: 1fr; }
+      }
+      
+      /* 图形验证码弹窗 */
+      .captcha-dialog {
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+        padding: 20px;
+        backdrop-filter: blur(4px);
+        animation: fadeIn .2s ease;
+      }
+      .captcha-dialog-content {
+        background: var(--surface);
+        border-radius: var(--radius-lg);
+        width: min(380px, 100%);
+        box-shadow: 0 25px 80px rgba(0,0,0,.3);
+        animation: slideUp .3s ease;
+      }
+      .captcha-dialog-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px 24px;
+        border-bottom: 1px solid var(--border);
+      }
+      .captcha-dialog-header h3 {
+        font-size: 18px;
+        font-weight: 600;
+      }
+      .close-btn {
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: transparent;
+        font-size: 24px;
+        color: var(--muted);
+        cursor: pointer;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .close-btn:hover {
+        background: var(--primary-soft);
+        color: var(--primary);
+      }
+      .captcha-dialog-desc {
+        padding: 16px 24px 0;
+        color: var(--muted);
+        font-size: 14px;
+      }
+      .captcha-dialog-body {
+        padding: 20px 24px;
+      }
+      .captcha-display {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        margin-bottom: 16px;
+      }
+      .captcha-display img {
+        height: 48px;
+        border: 1.5px solid var(--border);
+        border-radius: var(--radius);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        flex: 1;
+      }
+      .captcha-display img:hover {
+        border-color: var(--primary);
+      }
+      .refresh-btn {
+        height: 48px;
+        padding: 0 16px;
+        background: var(--primary-soft);
+        color: var(--primary);
+        border: none;
+        border-radius: var(--radius);
+        cursor: pointer;
+        font-weight: 500;
+        white-space: nowrap;
+      }
+      .refresh-btn:hover {
+        background: #d5eeeb;
+      }
+      .captcha-dialog-body input {
+        width: 100%;
+        height: 48px;
+        border: 1.5px solid var(--border);
+        border-radius: var(--radius);
+        padding: 0 16px;
+        font-size: 16px;
+        text-align: center;
+        letter-spacing: 8px;
+      }
+      .captcha-dialog-body input:focus {
+        border-color: var(--primary);
+        box-shadow: 0 0 0 4px rgba(22,129,126,.1);
+        outline: none;
+      }
+      .captcha-dialog-footer {
+        display: flex;
+        gap: 12px;
+        padding: 0 24px 24px;
+      }
+      .cancel-btn {
+        flex: 1;
+        height: 44px;
+        background: var(--surface-soft);
+        color: var(--text);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        cursor: pointer;
+        font-weight: 500;
+      }
+      .cancel-btn:hover {
+        background: #e8f2f2;
+      }
+      .confirm-btn {
+        flex: 1;
+        height: 44px;
+        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
+        color: white;
+        border: none;
+        border-radius: var(--radius);
+        cursor: pointer;
+        font-weight: 600;
+      }
+      .confirm-btn:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(22,129,126,.3);
       }
     </style>
   </head>
   <body>
     <div id="public" class="query-page hidden">
-      <section class="query-card">
+      <div class="query-header">
+        <div class="icon">
+          <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+        </div>
         <h1>&#22521;&#35757;&#32467;&#19994;&#35777;&#20070;&#26597;&#35810;</h1>
-        <div class="stack">
+        <p>&#36755;&#20837;&#20449;&#24687;&#26597;&#35810;&#24744;&#30340;&#22521;&#35757;&#35777;&#20070;</p>
+      </div>
+      
+      <section class="query-card">
+        <div class="form-section">
+          <div class="form-section-title">&#36873;&#25321;&#26597;&#35810;&#26041;&#24335;</div>
           <div class="choice">
             <button id="modeCert" class="active" onclick="setQueryMode('certificate')">&#35777;&#20070;&#32534;&#21495;&#26597;&#35810;</button>
-            <button id="modePhone" onclick="setQueryMode('phone')">&#25163;&#26426;&#21495;&#26597;&#35810;</button>
+            <button id="modeSms" onclick="setQueryMode('sms')">&#30701;&#20449;&#39564;&#35777;&#30721;&#26597;&#35810;</button>
           </div>
-          <input id="qNo" placeholder="&#35777;&#20070;&#32534;&#21495;" />
-          <input id="qPhone" class="hidden" placeholder="&#25163;&#26426;&#21495;" />
-          <input id="qName" placeholder="&#22995;&#21517;" />
-          <div class="row">
-            <input id="qCode" placeholder="&#39564;&#35777;&#30721;" />
-            <img id="captchaImg" style="height:34px;border:1px solid #cbd5e1;border-radius:6px" />
-            <button class="secondary" onclick="loadCaptcha()">&#21047;&#26032;</button>
-            <button onclick="searchCert()">&#26597;&#35810;</button>
+        </div>
+        
+        <div id="certFields" class="field-group">
+          <div class="form-section">
+            <div class="form-section-title">&#35777;&#20070;&#20449;&#24687;</div>
+            <div style="display:grid;gap:12px">
+              <input id="qNo" placeholder="&#35831;&#36755;&#20837;&#35777;&#20070;&#32534;&#21495;&#65292;&#22914;&#65306;PX2026-DBY-K7M9Q2R-83" maxlength="64" />
+              <input id="qName" placeholder="&#35831;&#36755;&#20837;&#35777;&#20070;&#23545;&#24212;&#30340;&#22995;&#21517;" maxlength="64" />
+            </div>
           </div>
-          <p class="muted">&#26412;&#35777;&#20070;&#20165;&#29992;&#20110;&#35777;&#26126;&#23398;&#21592;&#23436;&#25104;&#30456;&#20851;&#22521;&#35757;&#35838;&#31243;/&#38454;&#27573;&#23398;&#20064;&#65292;&#19981;&#20195;&#34920;&#22269;&#23478;&#23398;&#21382;&#12289;&#23398;&#20301;&#12289;&#32844;&#19994;&#36164;&#26684;&#25110;&#32844;&#19994;&#25216;&#33021;&#31561;&#32423;&#35748;&#35777;&#12290;</p>
+          <div class="form-section">
+            <div class="form-section-title">&#23457;&#26680;&#39564;&#35777;</div>
+            <div class="captcha-row">
+              <input id="qCode" placeholder="&#35831;&#36755;&#20837;4&#20301;&#22270;&#24418;&#39564;&#35777;&#30721;" maxlength="4" pattern="[A-Za-z0-9]{4}" />
+              <img id="captchaImg" onclick="loadCaptcha()" title="&#28857;&#20987;&#21047;&#26032;&#39564;&#35777;&#30721;" />
+              <button class="secondary" onclick="loadCaptcha()">&#21047;&#26032;</button>
+            </div>
+          </div>
+        </div>
+        
+        <div id="smsFields" class="field-group hidden">
+          <div class="form-section">
+            <div class="form-section-title">&#25163;&#26426;&#21495;</div>
+            <input id="qPhone" placeholder="&#35831;&#36755;&#20837;11&#20301;&#25163;&#26426;&#21495;" maxlength="11" pattern="[0-9]{11}" inputmode="numeric" />
+            <div class="form-section-title" style="margin-top:14px">&#30701;&#20449;&#39564;&#35777;&#30721;</div>
+            <div class="sms-row">
+              <input id="qSmsCode" placeholder="&#35831;&#36755;&#20837;6&#20301;&#30701;&#20449;&#39564;&#35777;&#30721;" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" />
+              <button id="btnSendSms" class="secondary" onclick="handleShowCaptchaDialog()">&#33719;&#21462;&#39564;&#35777;&#30721;</button>
+            </div>
+          </div>
+          <div style="margin-top:8px">
+            <button class="submit-btn" onclick="searchCert()">&#26597;&#35810;&#35777;&#20070;</button>
+          </div>
+        </div>
+        
+        <div class="disclaimer">
+          &#26412;&#35777;&#20070;&#20165;&#29992;&#20110;&#35777;&#26126;&#23398;&#21592;&#23436;&#25104;&#30456;&#20851;&#22521;&#35757;&#35838;&#31243;/&#38454;&#27573;&#23398;&#20064;&#65292;&#19981;&#20195;&#34920;&#22269;&#23478;&#23398;&#21382;&#12289;&#23398;&#20301;&#12289;&#32844;&#19994;&#36164;&#26684;&#25110;&#32844;&#19994;&#25216;&#33021;&#31561;&#32423;&#35748;&#35777;&#12290;
         </div>
       </section>
-      <section id="publicResult" class="query-card hidden"></section>
+      
+      <section id="publicResult" class="result-card hidden"></section>
+    </div>
+
+    <div id="captchaDialog" class="captcha-dialog hidden">
+      <div class="captcha-dialog-content">
+        <div class="captcha-dialog-header">
+          <h3>&#39564;&#35777;&#36523;&#20221;</h3>
+          <button class="close-btn" onclick="closeCaptchaDialog()">&times;</button>
+        </div>
+        <p class="captcha-dialog-desc">&#35831;&#36755;&#20837;&#22270;&#24418;&#39564;&#35777;&#30721;&#20197;&#33719;&#21462;&#30701;&#20449;&#39564;&#35777;&#30721;</p>
+        <div class="captcha-dialog-body">
+          <div class="captcha-display">
+            <img id="dialogCaptchaImg" onclick="loadDialogCaptcha()" title="&#28857;&#20987;&#21047;&#26032;&#39564;&#35777;&#30721;" />
+            <button class="refresh-btn" onclick="loadDialogCaptcha()">&#21047;&#26032;</button>
+          </div>
+          <input id="dialogCaptchaInput" placeholder="&#35831;&#36755;&#20837;4&#20301;&#39564;&#35777;&#30721;" maxlength="4" pattern="[A-Za-z0-9]{4}" />
+        </div>
+        <div class="captcha-dialog-footer">
+          <button class="cancel-btn" onclick="closeCaptchaDialog()">&#21462;&#28040;</button>
+          <button class="confirm-btn" onclick="confirmCaptcha()">&#30830;&#35748;</button>
+        </div>
+      </div>
     </div>
 
     <div id="adminLogin" class="login-page hidden">
@@ -130,7 +1062,7 @@
           <input id="loginUser" value="admin" placeholder="&#36134;&#21495;" />
           <input id="loginPass" value="Admin123!" type="password" placeholder="&#23494;&#30721;" />
           <button onclick="login()">&#30331;&#24405;</button>
-          <p class="muted">&#26412;&#22320;&#39564;&#25910;&#40664;&#35748;&#36134;&#21495;&#65306;admin / Admin123!</p>
+          <p class="hint">&#26412;&#22320;&#39564;&#25910;&#40664;&#35748;&#36134;&#21495;&#65306;admin / Admin123!</p>
         </div>
       </section>
     </div>
@@ -174,6 +1106,10 @@
 
     <script>
       let captchaId = "";
+      let smsCaptchaId = "";
+      let smsId = "";
+      let smsCooldown = 0;
+      let smsTimer = null;
       let editingLearnerId = null;
       let editingProjectId = null;
       let projectKeyword = "";
@@ -253,28 +1189,139 @@
       function logout() { localStorage.removeItem("token"); location.href = "/admin/login"; }
       function setQueryMode(mode) {
         queryMode = mode;
-        qNo.classList.toggle("hidden", mode !== "certificate");
-        qPhone.classList.toggle("hidden", mode !== "phone");
+        certFields.classList.toggle("hidden", mode !== "certificate");
+        smsFields.classList.toggle("hidden", mode !== "sms");
         modeCert.classList.toggle("active", mode === "certificate");
-        modePhone.classList.toggle("active", mode === "phone");
+        modeSms.classList.toggle("active", mode === "sms");
         publicResult.classList.add("hidden");
+        if (mode === "certificate") loadCaptcha();
       }
       async function loadCaptcha() { const c = await api("/public/captcha"); captchaId = c.captcha_id; captchaImg.src = c.image; }
+      async function loadDialogCaptcha() { const c = await api("/public/captcha"); smsCaptchaId = c.captcha_id; dialogCaptchaImg.src = c.image; }
+      
+      function handleShowCaptchaDialog() {
+        showCaptchaDialog().catch(err => alert(err.message));
+      }
+      
+      function isValidPhone(phone) {
+        return /^1[3-9]\d{9}$/.test(phone);
+      }
+      
+      async function showCaptchaDialog() {
+        const phone = qPhone.value.trim();
+        if (!phone) { alert("请先输入手机号"); qPhone.focus(); return; }
+        if (!isValidPhone(phone)) { alert("请输入有效的11位手机号"); qPhone.focus(); return; }
+        if (smsCooldown > 0) return;
+        captchaDialog.classList.remove("hidden");
+        dialogCaptchaInput.value = "";
+        await loadDialogCaptcha();
+        setTimeout(() => dialogCaptchaInput.focus(), 100);
+      }
+      
+      function closeCaptchaDialog() {
+        captchaDialog.classList.add("hidden");
+        dialogCaptchaInput.value = "";
+      }
+      
+      async function confirmCaptcha() {
+        const phone = qPhone.value.trim();
+        const captchaCode = dialogCaptchaInput.value.trim();
+        if (!captchaCode) { alert("请输入图形验证码"); dialogCaptchaInput.focus(); return; }
+        if (!/^[A-Za-z0-9]{4}$/.test(captchaCode)) { alert("请输入4位图形验证码"); dialogCaptchaInput.focus(); return; }
+        
+        try {
+          const data = await api("/public/sms/send", { method: "POST", body: JSON.stringify({ phone, captcha_id: smsCaptchaId, captcha_code: captchaCode }) });
+          smsId = data.sms_id;
+          closeCaptchaDialog();
+          alert("验证码已发送，请查看服务器终端获取验证码");
+          smsCooldown = 60;
+          btnSendSms.disabled = true;
+          smsTimer = setInterval(() => {
+            smsCooldown--;
+            btnSendSms.textContent = smsCooldown + "秒后重试";
+            if (smsCooldown <= 0) {
+              clearInterval(smsTimer);
+              smsTimer = null;
+              btnSendSms.disabled = false;
+              btnSendSms.textContent = "获取验证码";
+            }
+          }, 1000);
+        } catch (e) { 
+          alert(e.message); 
+          loadDialogCaptcha();
+          dialogCaptchaInput.value = "";
+          dialogCaptchaInput.focus();
+        }
+      }
       async function searchCert() {
         try {
-          renderPublic(await api("/public/certificates/search", { method: "POST", body: JSON.stringify({ certificate_no: queryMode === "certificate" ? qNo.value : "", phone: queryMode === "phone" ? qPhone.value : "", name: qName.value, captcha_id: captchaId, captcha_code: qCode.value }) }));
-        } catch (e) { alert(e.message); await loadCaptcha(); }
+          if (queryMode === "certificate") {
+            const certNo = qNo.value.trim();
+            const name = qName.value.trim();
+            const captchaCode = qCode.value.trim();
+            if (!certNo && !name) { alert("请输入证书编号或姓名"); return; }
+            if (!captchaCode) { alert("请输入图形验证码"); qCode.focus(); return; }
+            if (!/^[A-Za-z0-9]{4}$/.test(captchaCode)) { alert("请输入4位图形验证码"); qCode.focus(); return; }
+            renderPublic(await api("/public/certificates/search", { method: "POST", body: JSON.stringify({ certificate_no: certNo, name: name, captcha_id: captchaId, captcha_code: captchaCode }) }));
+          } else {
+            const phone = qPhone.value.trim();
+            const smsCode = qSmsCode.value.trim();
+            if (!phone) { alert("请输入手机号"); qPhone.focus(); return; }
+            if (!isValidPhone(phone)) { alert("请输入有效的11位手机号"); qPhone.focus(); return; }
+            if (!smsCode) { alert("请输入短信验证码"); qSmsCode.focus(); return; }
+            if (!/^\d{6}$/.test(smsCode)) { alert("请输入6位短信验证码"); qSmsCode.focus(); return; }
+            if (!smsId) { alert("请先获取短信验证码"); return; }
+            renderPublic(await api("/public/certificates/search-by-sms", { method: "POST", body: JSON.stringify({ phone: phone, sms_id: smsId, sms_code: smsCode }) }));
+          }
+        } catch (e) { alert(e.message); if (queryMode === "certificate") await loadCaptcha(); }
       }
       async function loadPublicToken(t) { renderPublic(await api("/public/certificates/token/" + t)); }
       function renderPublic(data) {
         const list = data.items || [data];
         publicResult.classList.remove("hidden");
-        publicResult.innerHTML = `<div class="panel-title"><div><h2>查询结果</h2><p class="muted">共找到 ${list.length} 张证书</p></div></div><div class="result-grid">${list.map((c,i) => `<div class="cert-card">
-          <span class="pill ${c.status==="valid"?"":"bad"}">${c.status === "valid" ? "有效" : "已作废"}</span>
-          <h3>${esc(c.certificate_name)}</h3>
-          <div class="meta"><p><span>证书编号</span>${esc(c.certificate_no)}</p><p><span>姓名</span>${esc(c.learner_name)}</p><p><span>项目/课程/阶段</span>${esc(c.project_code)} ${esc(c.course_name)} ${esc(c.stage_name)}</p><p><span>发证日期</span>${esc(c.issue_date)}</p><p><span>发证单位</span>${esc(c.issuer_name)}</p></div>
-          <div class="actions"><button class="secondary" onclick="previewPublicCert(${i})">预览</button>${c.can_download_pdf ? `<button onclick="location.href='${esc(c.download_url)}'">下载 PDF</button>` : ""}</div>
-          </div>`).join("")}</div>`;
+        const hasVoided = list.some(c => c.status !== "valid");
+        const statusClass = hasVoided ? "warning" : "success";
+        const statusIcon = hasVoided 
+          ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>'
+          : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>';
+        
+        publicResult.innerHTML = `
+          <div class="result-header">
+            <div class="result-icon ${statusClass}">${statusIcon}</div>
+            <div>
+              <h3>查询结果</h3>
+              <p style="font-size:13px;color:var(--muted)">共找到 ${list.length} 张证书${hasVoided ? '，其中包含作废证书' : ''}</p>
+            </div>
+          </div>
+          <div class="result-list">
+            ${list.map((c, i) => `
+              <div class="cert-item">
+                <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px">
+                  <div class="cert-name">${esc(c.certificate_name)}</div>
+                  <span class="status-badge ${c.status === 'valid' ? 'valid' : 'void'}">${c.status === 'valid' ? '有效' : '已作废'}</span>
+                </div>
+                <div class="cert-meta">
+                  <div><span>证书编号</span><strong>${esc(c.certificate_no)}</strong></div>
+                  <div><span>姓名</span><strong>${esc(c.learner_name)}</strong></div>
+                  <div><span>项目/课程</span><strong>${esc(c.project_code)} ${esc(c.course_name)}</strong></div>
+                  <div><span>阶段</span><strong>${esc(c.stage_name)}</strong></div>
+                  <div><span>发证日期</span><strong>${esc(c.issue_date)}</strong></div>
+                  <div><span>发证单位</span><strong>${esc(c.issuer_name)}</strong></div>
+                </div>
+                <div class="cert-actions">
+                  <button class="secondary" onclick="previewPublicCert(${i})">
+                    <svg style="width:14px;height:14px;margin-right:4px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
+                    预览
+                  </button>
+                  ${c.can_download_pdf ? `<button onclick="location.href='${esc(c.download_url)}'">
+                    <svg style="width:14px;height:14px;margin-right:4px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
+                    下载 PDF
+                  </button>` : ''}
+                </div>
+              </div>
+            `).join('')}
+          </div>
+        `;
         window.publicResultItems = list;
       }
       async function previewPublicCert(index) {
@@ -428,6 +1475,19 @@
         alert(`导入完成，当前状态：${importStatusText(row.status)}`);
         await loadImports();
       }
+      
+      // 键盘事件处理
+      document.addEventListener('keydown', function(e) {
+        // 弹窗中按回车键确认
+        if (e.key === 'Enter' && !captchaDialog.classList.contains('hidden')) {
+          confirmCaptcha();
+        }
+        // 弹窗中按ESC键关闭
+        if (e.key === 'Escape' && !captchaDialog.classList.contains('hidden')) {
+          closeCaptchaDialog();
+        }
+      });
+      
       showPage();
     </script>
   </body>