/* ===================
       页面基础设置
    =================== */
    html, body {
      margin: 0;               /* 去掉默认外边距 */
      padding: 0;              /* 去掉默认内边距 */
      height: 100%;            /* 高度占满整个窗口 */
      width: 100%;             /* 宽度占满整个窗口 */
      overflow: hidden;        /* 禁止滚动条出现 */
      font-family: "Segoe UI", "PingFang SC", "Helvetica Neue", sans-serif; /* 设置全局字体 */
    }

    /* ===================
       动态渐变背景
    =================== */
    body {
      display: flex;                           /* 使用flex布局 */
      justify-content: center;                 /* 水平居中内容 */
      align-items: center;                     /* 垂直居中内容 */
      flex-direction: column;                  /* 内容上下排列 */
      height: 100vh;                           /* 高度固定为1屏 */
      width: 100vw;                            /* 宽度固定为1屏 */
      background: linear-gradient(-45deg, #dfe9f3, #f8f9fb, #e3f2fd, #f1f3f6); /* 渐变背景色 */
      background-size: 400% 400%;              /* 扩大背景尺寸，用来做动画 */
      animation: gradientShift 12s ease infinite; /* 启用背景渐变平移动画 */
      position: relative;                      /* 为后续粒子和卡片定位做准备 */
    }

    /* 背景渐变动画：左右缓慢移动 */
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }   /* 初始位置 */
      50% { background-position: 100% 50%; }/* 渐变滑到另一侧 */
      100% { background-position: 0% 50%; } /* 回到起点，循环 */
    }

    /* ===================
       粒子效果
    =================== */
    .particle {
      position: absolute;                      /* 粒子绝对定位 */
      border-radius: 50%;                      /* 圆形粒子 */
      background: rgba(255, 255, 255, 0.4);    /* 半透明白色 */
      animation: floatParticle linear infinite;/* 粒子漂浮动画 */
      filter: blur(2px);                       /* 轻微模糊，柔和效果 */
    }

    /* 定义不同粒子的位置、大小和动画时长 */
    .particle:nth-child(1) {
      width: 8px; height: 8px;                 /* 粒子大小 */
      left: 20%; top: 80%;                     /* 初始位置 */
      animation-duration: 18s;                 /* 漂浮时间，越大越慢 */
    }
    .particle:nth-child(2) {
      width: 6px; height: 6px;
      left: 60%; top: 90%;
      animation-duration: 22s;
    }
    .particle:nth-child(3) {
      width: 10px; height: 10px;
      left: 80%; top: 75%;
      animation-duration: 25s;
    }
    .particle:nth-child(4) {
      width: 7px; height: 7px;
      left: 40%; top: 85%;
      animation-duration: 20s;
    }

    /* 粒子向上飘动动画 */
    @keyframes floatParticle {
      from { transform: translateY(0) translateX(0); opacity: 1; }   /* 起点：原位，完全可见 */
      to { transform: translateY(-120vh) translateX(30px); opacity: 0; } /* 终点：向上飘出屏幕并消失 */
    }

    /* ===================
       卡片样式
    =================== */
    .card {
      position: relative;                      /* 相对定位，保证在粒子上方 */
      z-index: 2;                              /* 确保层级比背景和粒子高 */
      background: rgba(255, 255, 255, 0.65);   /* 半透明白色，带玻璃感 */
      backdrop-filter: blur(10px);             /* 背景毛玻璃模糊效果 */
      border-radius: 20px;                     /* 圆角 */
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12); /* 投影，增加层次感 */
      padding: 32px;                           /* 内边距 */
      text-align: center;                      /* 内容居中 */
      max-width: 240px;                        /* 最大宽度 */
      width: 90%;                              /* 响应式宽度 */
      animation: cardFadeIn 1.2s ease;         /* 卡片渐入动画 */
    }

    /* 卡片渐入动画 */
    @keyframes cardFadeIn {
      0% { transform: scale(0.9); opacity: 0; } /* 初始：缩小 + 透明 */
      100% { transform: scale(1); opacity: 1; } /* 结束：正常大小 + 完全显示 */
    }

    /* ===================
       卡片内容样式
    =================== */
    .qr-img {
      width: 200px;                            /* 二维码宽度 */
      height: 200px;                           /* 二维码高度 */
      margin-bottom: 20px;                     /* 下方留空 */
      border-radius: 16px;                     /* 二维码圆角 */
      border: 4px solid #f3f4f6;               /* 边框 */
    }

    .logo {
      width: 40px;                             /* logo宽度 */
      vertical-align: middle;                  /* 垂直居中 */
      margin-right: 8px;                       /* 和文字间隔 */
    }

    .title {
      font-size: 22px;                         /* 标题字号 */
      font-weight: 700;                        /* 加粗 */
      margin-bottom: 8px;                      /* 下方间距 */
      color: #333;                             /* 深灰色文字 */
    }

    .desc {
      font-size: 15px;                         /* 描述文字大小 */
      color: #555;                             /* 浅灰色文字 */
    }

    /* 页脚版权 */
    .copyright {
      font-size: 12px;
      color: rgba(0,0,0,0.6);
      text-align: center;
      position: fixed;
      bottom: 10px;
      width: 100%;
      z-index: 99;
      background: transparent;
    }

    .copyright a {
      text-decoration: none;
      color: inherit;
    }