* {
            margin: 0;
            padding: 0;
/* // 设置盒模型为 border-box，让元素的内边距和边框包含在宽度和高度内 */
            box-sizing: border-box;
        }

        html {
              height: 100%;
              margin: 0;
              padding: 0;
              background: #71b7e6; /* 纯色回退 */
          }
          html::before {
              content: '';
/* // 设置元素为固定定位，使其相对于浏览器视口进行定位，不随页面滚动而移动 */
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
/* // 设置135度角的线性渐变背景，从浅蓝色(#71b7e6)过渡到浅紫色(#9b59b6) */
              background: linear-gradient(135deg, #71b7e6, #9b59b6);
/* // 设置背景图像覆盖整个元素区域，确保背景完整显示 */
              background-size: cover;
/* // 设置元素的堆叠顺序为 -1，使该渐变背景位于其他元素下方 */
              z-index: -1;
          }
          body {
                font-family: Arial, sans-serif;
                background: transparent;
                display: flex;
                justify-content: center;
                align-items: center;
                /* 设置body元素的最小高度为视口高度的95%，确保内容区域有足够的显示空间 */
                min-height: 80vh;
                margin: 0;
                overflow: hidden;
                transform: translateZ(0);
                position: relative; /* 为流星特效定位做准备 */
            }
            /* 流星特效样式 */
            .meteor {
                position: absolute;
                width: 2px;
                height: 2px;
                background: #fff;
                border-radius: 50%;
                box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.5);
                animation: meteor-fall linear infinite;
            }

            @keyframes meteor-fall {
                0% {
                    opacity: 1;
                }
                100% {
                    transform: translate(var(--end-x), var(--end-y));
                    opacity: 0;
                }
            }
        .auth-container {
            max-width: 300px;
            max-height: 300px;
            margin: 0 auto;
            padding: 20px 20px 20px 20px;
            background-color: #f5f5f5;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .auth-title {
            text-align: center;
            margin: 0px 0px 10px 0px;
            color: #333;
            /* 新添加的文字效果 */
            font-size: 30px;
            background: linear-gradient(45deg, #007BFF, #9b59b6);
            -webkit-background-clip: text; /* 为 WebKit 浏览器设置背景裁剪为文字 */
            background-clip: text; /* 标准属性，保证兼容性 */
            -webkit-text-fill-color: transparent;
            animation: textGlow 2s ease-in-out infinite alternate;
            transform: translateZ(0);
        }
        .auth-form .form-group {
            margin-bottom: 15px;
        }
        .auth-form label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }
        .auth-form input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .auth-form .error {
            color: #dc3545;
            text-align: center;
            margin-bottom: 15px;
            padding: 10px;
            background-color: #f8d7da;
            border-radius: 4px;
        }
        .auth-btn {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .auth-btn:hover {
            background-color: #0056b3;
        }
        .icp-mm {
          background:rgba(235, 141, 188, 0.89); 
/* // 设置元素内边距，上下为 2px，左右为 5px */
          padding: 2px 5px;
/* // 设置元素的圆角半径为 4px，使元素的边角更加圆润 */
          border-radius: 4px;
/* // 移除链接的下划线文本装饰 */
          text-decoration: none;
          color: #fff;
          font-size: 14px;
        }
        .icp-mm:hover {
          background: rgb(132, 22, 196);
        }
        .ztxs-aa{
            font-size: 100px;
            font-weight: bold;
            background: linear-gradient(45deg, #007BFF, #9b59b6, #ff00cc, #00ff99, #ff7f00, #ffff00, #00ff00, #0000ff);
            background-size: 800% 800%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradientChange 5s ease infinite;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 
                        0 0 20px rgba(255, 255, 255, 0.2), 
                        0 0 30px rgba(255, 255, 255, 0.1);
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
        }
        @keyframes gradientChange {
            /* // 动画开始时（0%进度），背景的水平位置在最左侧（0%），垂直位置在中间（50%） */
            0% {
                background-position: 0% 50%;
            }
            /* // 动画进行到一半时（50%进度），背景的水平位置移动到最右侧（100%），垂直位置保持在中间（50%） */
            50% {
                background-position: 100% 50%;
            }
            /* // 动画结束时（100%进度），背景的水平位置回到最左侧（0%），垂直位置依旧在中间（50%） */
            100% {
                background-position: 0% 50%;
            }
        }
        /* // 当屏幕宽度小于等于 800px 时，应用以下样式 */
        @media screen and (min-width: 700px) {
        .wenzi-kkk{
            text-align: center; 
            color: #fff; 
            position: fixed; 
        /* // 设置元素底部与视口底部的距离为 20px */
            bottom: 20px;
            /* // 设置元素左边界与视口左边缘对齐 */
            left: 0; 
            /* // 设置元素右边界与视口右边缘对齐 */
            right: 0;
        }
        .ziti{
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            }
            .ziti:hover{
                /* // 将元素在水平和垂直方向上都向左和向上移动自身宽度和高度的 50%，实现水平和垂直居中， */
                /* // 同时将元素放大为原来的 1.1 倍 */
                transform: translate(-50%, -50%) scale(1.5);
                /* // 设置所有 CSS 属性变化的过渡效果，持续时间为 0.3 秒，采用先慢后快再慢的缓动函数 */
                transition: all 0.3s ease-in-out;
            }
            /* // 定义一个名为 gradientChange 的动画，用于实现背景渐变的动画效果
            // 此动画会改变背景的位置，从而产生渐变颜色移动的视觉效果 */
}
        /* // 当屏幕宽度小于等于 600px 时，应用以下样式 */
        @media screen and (max-width: 600px) {
        .wenzi-kkk{
            text-align: center; 
            color: #fff; 
            position: fixed; 
            bottom: 1vh; 
            left: 0; 
            right: 0;
        }
        .ziti{
            position: fixed;
            top: 20%;
            left: 50%;
            /* // 将元素在水平和垂直方向上都向左和向上移动自身宽度和高度的 50%， */
            /* // 结合之前设置的 left: 50%; top: 20%; 实现元素在指定位置的水平居中 */
            /* // 同时在垂直方向上相对于自身高度向上偏移 50% */
            transform: translate(-50%, -50%);
            z-index: 9999;
            }
        .ziti:hover{
            /* // 将元素在水平和垂直方向上都向左和向上移动自身宽度和高度的 50%，实现水平和垂直居中， */
            /* // 同时将元素放大为原来的 1.1 倍 */
            transform: translate(-50%, -50%) scale(1.5);
            /* // 设置所有 CSS 属性变化的过渡效果，持续时间为 0.3 秒，采用先慢后快再慢的缓动函数 */
            transition: all 0.3s ease-in-out;
        }
}