/* 对于小屏幕设备，如手机 */
@media (max-width: 1024px) {
    html{
        margin:0;
        padding:0;
        width:100%;
        height:100%;
        overflow-x:hidden;
        max-width:467px;
        margin:0 auto;
    }
    div{
        box-sizing:border-box;
    }
    body{
        margin:0;
        padding:0;
        position:relative;
        width:100%;
        height:100%;
        font-family:Archivo,Arial, sans-serif;
    }
    .logo{
        width:30px;
        height:30px;
        margin-right:15px;
        display:inline-block;
    }
    .logo img{
        width:100%;
        height:100%;
    }
    .search_input{
        display:inline-block;
        width:250px;
        margin-right:20px;
    }
    input[type="text"]{
        outline:none;
    }
    .footer{
        background-color:#2E2E45;
        padding:16px;
        margin-top:40px;
        font-weight:bold;
    }
    
    .footer_content{
        display:flex;
        justify-content:space-between;
        align-items:center;
        color:rgb(159,159,160);
    }
    .first_col{
        width:40%;
        font-size:.8em;
    }
    .second_col{
        width:60%;
        font-size:.8em;
    }
    .footer_content a{
        color:rgb(159,159,160);
        text-decoration:1px solid rgb(159,159,160);
    }
    .logo_footer{
        width:40%;
        margin:15px auto;
        margin-bottom:0;
        color:#fff;
        font-size:18px;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .logo_footer img{
        width:30px;
        height:30px;
        margin-right:10px;
    }
    .copyRight{
        margin-bottom: 20px;
        margin-top:30px;
        font-size:.9em;
        color:rgb(159,159,160);
    }
    .footer_col p{
        font-size:.6em;
    }
    .tab-bar {
        position: fixed;
        bottom: 0;
        width: 100%;
        max-width: 480px;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        padding-bottom: env(safe-area-inset-bottom); /* 在底部添加安全区插入 */
        z-index: 999;
        height:60px;
        display: flex;
        align-items: center;
    }
    
    .tab-bar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #8e8e93;
        text-decoration: none;
        font-size: 12px;
        flex: 1;
        z-index:999;
    }
    
    .tab-bar a.active {
        color: #3C66F5;
    }
    
    .tab-bar svg {
        fill: currentColor;
        width: 24px;
        height: 24px;
    }
    .toast {  
        visibility: hidden; /* 默认隐藏 */  
        min-width: 250px; /* 最小宽度 */  
        max-width: 500px; /* 最大宽度 */  
        margin: auto; /* 居中 */  
        background-color: #333; /* 背景颜色 */  
        color: #fff; /* 字体颜色 */  
        text-align: center; /* 文本居中 */  
        border-radius: 2px; /* 边框圆角 */  
        padding:8px 16px; /* 内边距 */  
        position: fixed; /* 固定位置 */  
        z-index: 10001; /* 在最上面 */  
        bottom: 30px; /* 向下偏移 30px */  
        font-size: 17px; /* 字体大小 */  
        transition: visibility 0s, opacity 0.5s linear; /* 过渡效果 */  
        opacity: 0; /* 初始透明度 */  
        left: 50%; /* 从左侧开始偏移50% */
        transform: translate(-50%, -50%); 
        border-radius: 30px; /* 边框圆角 */  
    }  
    
    .toast.show {  
        visibility: visible; /* 显示 */  
        opacity: 1; /* 不透明 */  
    }     
}

/* 对于大屏幕设备，如桌面显示器 */
@media (min-width: 1025px) {
    .tab-bar{
        display:none;
    }
    html{
        width:100%;
        /* height:100%; */
        background-color:#1B1B1B;
    }
    body{
        padding:0;
        margin:0;
        position:relative;
        height:100%;
    }

    .footer{
        padding: 16px 0;
        margin-top:48px;
    }
    .footer a,.contact_us p,.abouts_us p{
        color: inherit;
        text-decoration: none;
        color: #fff;
        font-weight:500;
        font-size: 12px;
        line-height: 14px;
        cursor: pointer;
    }
    .footer a:hover{
        color: #6b4cff;
        text-decoration: underline;
    }
    .footer_top{
        display: flex;
        justify-content: center;
    }
    .abouts_us{
        margin-right:100px;
    }
    .footer h3{
        color: rgba(255, 255, 255, .4);
        font-weight: 600;
        font-size: 14px;
        line-height: 22px;
        text-align: left;
    }
    .footer_middle {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
        font-size:28px;
    }
    .footer_middle img{
        width:30px;
        heigight:30px;
        margin-right:10px;
    }
}

  /* 倒计时悬浮层 */
    #countdown-layer {
      position: fixed;
      top: 16px;
      left: 50%;
      z-index: 999999; /* 极高层级 */
      background: rgba(0, 0, 0, 0.75);
      color: #fff;
      width:50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 100%;
      font-size: 14px;
      font-weight: bold;
      user-select: none;
      pointer-events: none;
    }

    /* Toast */
    #toast {
      position: fixed;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      padding: 12px 20px;
      border-radius: 6px;
      font-size: 14px;
      opacity: 0;
      z-index: 999999;
      transition: opacity 0.3s ease;
    }

    #toast.show {
      opacity: 1;
    }