*{
        border: 0;
        color:#666666;
    }
    body{
        margin: 0;
    }
    ul {
        padding: 0;       /* 移除浏览器默认的 padding-inline-start (40px) */
        margin: 0;        /* 移除浏览器默认的 margin */
    }
    ul li{
        list-style:none;   
    }
    a{
        text-decoration:none;
    }
    a:link, 
    a:visited, 
    a:hover, 
    a:active {
    color: #666666;
    }
    p{
        text-indent:2rem;
    }
    header{
        display: flex;
    /* 🌟 关键：让子元素（Logo和注册/登录）之间保持最大间距 🌟 */
        justify-content: space-between; 
        /* 关键：让所有子元素（图片和文本）在垂直方向上居中对齐 */
        align-items: center;
        font-size: 1.2rem;
        margin-bottom: 1.2rem;

    }
    header a:link, 
    header a:visited, 
    header a:hover, 
    header a:active {
        color: #006699;
    }
    footer{
        width: 100%;
        border-top: 0.1px solid #f3f3f3;
        text-align: right;
        padding-top: 1rem;
        padding-right: 0%;
        margin: 0 auto;
    }
    #beian-pubSecurity,#beian-num{
        margin-right: 2%;
    }

/* 针对所有尺寸（或全局）的 #follow-button 基础样式 */
    #follow-button {
        /* 🌟 目标 1 & 3: 按钮变大和圆角 🌟 */
        width: 80%;
        height: 3.5rem; /* 增加高度 */
        border-radius: 5px; /* 5px 圆角 */
        margin-top: 1.5rem;
        
        /* 🌟 目标 2: 文字不换行 🌟 */
        white-space: nowrap; 
        
        /* 🌟 目标 4: 居中和 Flexbox 🌟 */
        display: flex; 
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        
        /* 保持颜色和字体 */
        background-color: green; 
        color: white; 
        border: none;
        padding: 0 1rem;
        cursor: pointer;
    }

    /* 修正按钮内部图片的对齐（解决居中问题） */
    #follow-button img {
        width: 1.3rem;
        margin-right: 0.5rem;
        vertical-align: middle; /* 🌟 关键：确保图标和文字垂直对齐 🌟 */
    }
    #qrcode-model{
        display: none;
        flex-direction: column;
        align-items:center;
        margin: 0 auto;
    }
    #close-qrcode{
        cursor: pointer;
    }


@media (min-width: 768px){ 
    html {
        font-size: 16px; /* 默认情况下，1rem = 16px */
    }
    header{
        width: 80%;
        margin: 0 auto;
    }
    header img{
        width: 22%;
        height: auto;
        margin: 40px auto 1px 0;
    }
    header span{
        display: block;
        white-space: nowrap;
        margin: 40px 1rem 1px auto;
    }
    #reg-or-load{
        width: 60%; 
        height: 3.5rem; 
        font-weight: bolder;
        margin: 0 auto;    
    }
    footer{
        display: flex;
        flex-direction: row;       /* 保持水平排列 */
        justify-content: flex-end; /* 🌟 关键：将所有子元素推向右侧 */
    }
    #copyright{
        margin-right: 10%;
    }
    #qrcode-model img{
        width: 60%;
    }
    #follow-button{
        font-size: 1.3rem;
        margin: 1.5rem auto 0.5rem auto;
    }
    #qrcode-model img,#qrcode-model span,#qrcode-model button {
        width:40%;
        margin: 0.3rem auto;
    }
    #qrcode-model span{
        text-align: center;
        margin-bottom: 1rem;
    }
    #qrcode-model button{
        height: 2rem;
        margin-bottom: 1rem;
    }

}

@media (max-width: 767px) {
    /* 1. 调整整体布局 */
    html {
        font-size: 12px; /* 在小屏幕上 1rem = 14px，所有元素都会按比例变小 */
    }
    header{
        width: 90%;
        margin: 0 5%;
    }
    header img{
        width: clamp(180px, 50%, 250px);
        height: auto;
        margin: 40px auto 25px 2%;
    }
    header span{
        white-space: nowrap;
        margin: 40px 1rem 5px 1rem;
    }
    footer{
        display: flex;
        flex-direction:column;
    }
    small{
        display: inline;
        text-align: right;
        margin-top: 0.5rem;
    }
    #beian-pubSecurity,#beian-num,#copyright{
        margin-right: 5%;
    }
    #reg-or-load{
        width: 90%;
        height: 3.5rem; 
        font-weight: bolder;
        margin: 0 5%;    
    }
    #follow-button{
        width: 100%;
        margin: 1rem auto;
        font-size: 1rem;
        font-weight: bolder;
    }
    #qrcode-model img,#qrcode-model span,#qrcode-model button {
        width:80%;
        display: block;
        margin-bottom: 0.3rem;
    }
    #qrcode-model span{
        text-align: center;
        margin-bottom: 1rem;
    }
    #qrcode-model button{
        height: 2rem;
        margin-bottom: 1rem;
    }
}