function showCustomMessageBox() {
  const box = document.createElement("div");
  box.innerHTML = `
    <div style="
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: linear-gradient(145deg, #ffffff, #f8f9fa);
      border: 1px solid #e0e0e0;
      padding: 25px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
      z-index: 99999;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      width: 380px;
      border-radius: 12px;
      animation: popup 0.3s ease-out;
    ">
      <!-- 品牌区域 -->
      <div style="text-align: center; margin-bottom: 15px;">
        <div style="
          font-size: 22px;
          font-weight: 600;
          background: linear-gradient(135deg, #667eea, #764ba2);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          margin-bottom: 5px;
        ">
          小杭网络工作室
        </div>
        <div style="
          font-size: 12px;
          color: #95a5a6;
          letter-spacing: 1px;
          margin-bottom: 20px;
        ">
          XiaoHang Network Studio
        </div>
      </div>
      
      <!-- 分隔线 -->
      <div style="
        height: 1px;
        background: linear-gradient(to right, transparent, #e0e0e0, transparent);
        margin: 15px 0;
      "></div>
      
      <!-- 内容区域 -->
      <div style="font-size: 16px; margin-bottom: 20px; color: #2c3e50; line-height: 1.6; text-align: center;">
        考试环境已就绪<br>
        <span style="font-size: 14px; color: #7f8c8d; margin-top: 5px; display: block;">
          祝您考试顺利 🍀
        </span>
      </div>
      
      <!-- 按钮 -->
      <div style="text-align: center;">
        <button id="msgbox-ok" style="
          background: linear-gradient(135deg, #667eea, #764ba2);
          color: white;
          border: none;
          padding: 10px 30px;
          border-radius: 6px;
          cursor: pointer;
          font-size: 14px;
          font-weight: 500;
          transition: all 0.2s;
          box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
        ">开始考试</button>
      </div>
    </div>
    
    <!-- 背景遮罩 -->
    <div style="
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 99998;
      animation: fadeIn 0.3s ease-out;
    "></div>
  `;
  
  // 添加动画样式
  const style = document.createElement('style');
  style.textContent = `
    @keyframes popup {
      from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
      }
      to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    #msgbox-ok:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
    
    #msgbox-ok:active {
      transform: translateY(0);
    }
  `;
  
  document.head.appendChild(style);
  document.body.appendChild(box);
  
  document.getElementById("msgbox-ok").onclick = () => {
    box.style.opacity = '0';
    box.style.transform = 'translate(-50%, -50%) scale(0.9)';
    box.style.transition = 'all 0.2s ease-out';
    setTimeout(() => box.remove(), 200);
  };
  
  // 点击背景关闭
  box.querySelector('div:last-child').onclick = () => {
    document.getElementById("msgbox-ok").click();
  };
}

showCustomMessageBox();