/* warn 容器样式 */
.warn-container {
  position: fixed;
  top: 40%;           /* 垂直居中 */
  left: 50%;          /* 水平居中 */
  transform: translate(-50%, -50%); /* 修正自身宽高的一半 */
  z-index: 9999;
  pointer-events: none; /* 不拦截点击事件 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
/*   width: 100%;        确保容器宽度足够 */
  width: 900px;   /* 限制最大宽度 */
  height: 300px;   /* 限制最大宽度 */
  padding: 0 20px;    /* 两侧留白 */
}

    .warn {
      background: rgba(0, 0, 0, 0.85);
      color: white;
      padding: 12px 24px;
      border-radius: 8px;
      margin-bottom: 10px;
      font-size: 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform: translateY(-10px);
    }

    .warn.show {
      opacity: 1;
      transform: translateY(0);
    }