/* 设置页面整体样式 */
body {
    /* 使用 Arial 字体，若没有则使用 sans-serif 通用字体 */
    font-family: Arial, sans-serif;
    /* 去除默认的外边距和内边距 */
    margin: 0;
    padding: 0;
    /* 使用 Flexbox 布局，垂直排列子元素 */
    display: flex;
    flex-direction: column;
    /* 水平居中对齐子元素 */
    align-items: center;
    /* 垂直居中对齐子元素 */
    justify-content: center;
    /* 设置最小高度为视口高度 */
    min-height: 100vh;
    /* 设置背景为线性渐变，从 #e94b7c 到 #ff6b6b */
    background: linear-gradient(135deg, #DE5B63,  #23ADCF);
    /* 设置背景大小为 200% 200%，用于渐变动画 */
    background-size: 400% 400%;
    /* 应用名为 gradient 的动画，时长 10 秒，缓动效果为 ease，无限循环 */
    animation: gradient 5s ease infinite;
}

/* 定义背景渐变动画 */
@keyframes gradient {
    /* 动画开始时，背景位置在 0% 50% */
    0% {
        background-position: 0% 50%;
    }
    /* 动画进行到 50% 时，背景位置在 100% 50% */
    50% {
        background-position: 100% 50%;
    }
    /* 动画结束时，背景位置回到 0% 50% */
    100% {
        background-position: 0% 50%;
    }
}

/* 页面容器样式 */
.container {
    /* 文本居中对齐 */
    text-align: center;
    /* 上下内边距 50px，左右内边距 20px */
    padding: 50px 20px;
    /* 宽度为 100% */
    width: 100%;
    /* 最大宽度为 400px */
    max-width: 400px;
}

/* 头像样式 */
.avatar {
    /* 宽度为 150px */
    width: 150px;
    /* 高度为 150px */
    height: 150px;
    /* 边框圆角为 50%，使头像呈圆形 */
    border-radius: 50%;
    /* 底部外边距为 20px */
    margin-bottom: 20px;
    /* 应用名为 breathing 的动画，时长 3 秒，缓动效果为 ease-in-out，无限循环 */
    /* animation: breathing 4s ease-in-out infinite; */
    /* 应用名为 transition 的旋转动画 */
    transition: 0.5s; 
}
/* 定义头像放大动画 */
.avatar:hover {        transform: scale(1.15) rotate(720deg);    } 
/* 定义头像呼吸灯动画 */
@keyframes breathing {
    /* 动画开始时，阴影效果较弱 */
    0% {
        box-shadow: 0 0 10px #f00;
    }
    25%{box-shadow: 0 0 16px #0f0;} 
    /* 动画进行到 50% 时，阴影效果最强 */
    50% {
        box-shadow: 0 0 25px #00f;
    }
    75%{box-shadow: 0 0 16px #0f0;} 
    /* 动画结束时，阴影效果回到初始状态 */
    100% {
        box-shadow: 0 0 10px #f00;
    }
}

/* 用户名称样式 */
.username {
    /* 字体大小为 28px */
    font-size: 28px;
    /* 字体颜色为白色 */
    color: white;
    /* 底部外边距为 15px */
    margin-bottom: 15px;
}

/* 提示文本样式 */
.tip-text {
    /* 字体颜色为白色 */
    color: white;
    /* 底部外边距为 30px */
    margin-bottom: 30px;
}

/* 打赏按钮组样式 */
.button-group {
    /* 底部外边距为 20px */
    margin-bottom: 20px;
    /* 使用 Flexbox 布局 */
    display: flex;
    /* 水平居中对齐子元素 */
    justify-content: center;
    /* 允许子元素换行 */
    flex-wrap: wrap;
    /* 子元素之间的间距 */
    gap: 10px;
}

/* 按钮通用样式 */
.btn {
    /* 上下内边距为 8px，左右内边距为 20px */
    padding: 8px 20px;
    /* 去除边框 */
    border: none;
    /* 边框圆角为 4px */
    border-radius: 4px;
    /* 字体颜色为白色 */
    color: white;
    /* 字体大小为 16px */
    font-size: 16px;
    /* 鼠标指针变为手型 */
    cursor: pointer;
    /* 防止按钮内部文本换行 */
    white-space: nowrap;
}



/* 支付宝按钮样式 */
.alipay-btn {
    /* 背景颜色为支付宝蓝 */
    background: #1493ff;
}

/* 微信按钮样式 */
.wechat-btn {
    /* 背景颜色为微信绿 */
    background: #32cd32;
}

/* QQ 按钮样式 */
.qq-btn {
    /* 背景颜色为 QQ 蓝 */
    background: #7ac5cd;
}

/* 打赏情况链接样式 */
.reward-status {
    /* 字体颜色为白色 */
    color: white;
    /* 去除下划线 */
    text-decoration: none;
    /* 鼠标指针变为手型 */
    cursor: pointer;
    /* 作为块级元素显示 */
    display: block;
    /* 底部外边距为 30px */
    margin-bottom: 30px;
}

/* 二维码模态框样式 */
.qr-modal {
    /* 默认隐藏 */
    display: none;
    /* 固定定位 */
    position: fixed;
    /* 层级为 1 */
    z-index: 1;
    /* 左偏移为 0 */
    left: 0;
    /* 上偏移为 0 */
    top: 0;
    /* 宽度为 100% */
    width: 100%;
    /* 高度为 100% */
    height: 100%;
    /* 允许滚动 */
    overflow: auto;
    /* 背景为半透明黑色 */
    background-color: rgba(0, 0, 0, 0.4);
}

/* 二维码内容样式 */
.qr-content {
    /* 背景颜色为白色 */
    background-color: #fefefe;
    /* 上下外边距为 15%，左右居中 */
    margin: 15% auto;
    /* 内边距为 20px */
    padding: 20px;
    /* 边框为 1px 灰色 */
    border: 1px solid #888;
    /* 宽度为 300px */
    width: 300px;
    /* 高度为 300px */
    height: 300px;
    /* 文本居中对齐 */
    text-align: center;
    /* 相对定位 */
    position: relative;
    /* 使用 Flexbox 布局，垂直排列子元素 */
    display: flex;
    flex-direction: column;
    /* 垂直居中对齐子元素 */
    justify-content: center;
    /* 水平居中对齐子元素 */
    align-items: center;
}

/* 二维码图片样式 */
.qr-content img {
    /* 宽度为 250px */
    width: 250px;
    /* 高度自适应 */
    height: auto;
}

/* 二维码模态框关闭按钮样式 */
.qr-content .close {
    /* 绝对定位 */
    position: absolute;
    /* 上偏移为 10px */
    top: 10px;
    /* 右偏移为 20px */
    right: 20px;
    /* 字体颜色为灰色 */
    color: #aaa;
    /* 字体大小为 28px */
    font-size: 28px;
    /* 字体加粗 */
    font-weight: bold;
}

/* 二维码模态框关闭按钮悬停和聚焦样式 */
.qr-content .close:hover,
.qr-content .close:focus {
    /* 字体颜色为黑色 */
    color: black;
    /* 去除下划线 */
    text-decoration: none;
    /* 鼠标指针变为手型 */
    cursor: pointer;
}

/* 打赏情况模态框样式 */
.status-modal {
    /* 默认隐藏 */
    display: none;
    /* 固定定位 */
    position: fixed;
    /* 层级为 1 */
    z-index: 1;
    /* 左偏移为 0 */
    left: 0;
    /* 上偏移为 0 */
    top: 0;
    /* 宽度为 100% */
    width: 100%;
    /* 高度为 100% */
    height: 100%;
    /* 允许滚动 */
    overflow: auto;
    /* 背景为半透明黑色 */
    background-color: rgba(0, 0, 0, 0.4);
}

/* 打赏情况内容样式 */
.status-content {
    /* 背景颜色为白色 */
    background-color: #fefefe;
    /* 上下外边距为 15%，左右居中 */
    margin: 15% auto;
    /* 内边距为 20px */
    padding: 20px;
    /* 边框为 1px 灰色 */
    border: 1px solid #888;
    /* 宽度为 80% */
    width: 80%;
    /* 最大宽度为 600px */
    max-width: 600px;
    /* 相对定位 */
    position: relative;
}

/* 打赏情况模态框关闭按钮样式 */
.status-content .close {
    /* 绝对定位 */
    position: absolute;
    /* 上偏移为 10px */
    top: 10px;
    /* 右偏移为 20px */
    right: 20px;
    /* 字体颜色为灰色 */
    color: #aaa;
    /* 字体大小为 28px */
    font-size: 28px;
    /* 字体加粗 */
    font-weight: bold;
}

/* 打赏情况模态框关闭按钮悬停和聚焦样式 */
.status-content .close:hover,
.status-content .close:focus {
    /* 字体颜色为黑色 */
    color: black;
    /* 添加下划线 */
    text-decoration: underline;
    /* 鼠标指针变为手型 */
    cursor: pointer;
}

/* 表格样式 */
table {
    /* 宽度为 100% */
    width: 100%;
    /* 边框合并 */
    border-collapse: collapse;
}

/* 表格表头和单元格样式 */
th,
td {
    /* 边框为 1px 灰色 */
    border: 1px solid #ddd;
    /* 内边距为 8px */
    padding: 8px;
    /* 文本左对齐 */
    text-align: left;
}

/* 版权信息样式 */
.copyright {
    /* 绝对定位 */
    position: absolute;
    /* 下偏移为 10px */
    bottom: 10px;
    /* 字体颜色为白色 */
    color: white;
    /* 字体大小为 16px */
    font-size: 16px;
}