* { box-sizing: border-box; margin: 0; padding: 0; }
    body {
        font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
        background: linear-gradient(135deg, #1a1f3a 0%, #2d1b4e 100%);
        min-height: 100vh;
        /* display: flex; */
        align-items: center;
        justify-content: center;
        /* padding: 10px; */
        color: #333;
        /* overflow: hidden; */
    }
    .card {
        max-width: 520px;
        /* max-width: 100%; */
        background: #dd4738;
        /* border-radius: 16px; */
        box-shadow: 0 20px 60px rgba(0,0,0,.4);
        overflow: hidden;
        margin: 0 auto;
        min-height: 100vh;
        padding-bottom: 20px;
    }
    .card-head {
        background: #dd4738;
        color: #fff;
        padding: 20px 20px;
        position: relative;
    }
    .field select {-webkit-appearance: none; /* 原生箭头会一起消失，需要自己画一个 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;  background-color: #fff;
  background-position: right 12px center;}
    .card-head h1 {font-size: 20px;font-weight: 700;/* padding-left: 80px; */}
    .card-head p {font-size: 12px;opacity: .85;margin-top: 6px;/* padding-left: 80px; */}
    .card-body {padding: 24px 20px 20px;background: #ffffff;border-radius: 15px;/* box-shadow: 5px 0px 5px #000000; */margin: 0px 10px;}
    .step-title {font-size: 14px;font-weight: 700;color: #c0392b;margin: 18px 0 12px;background: #009f412b;padding: 10px 0px;text-align: center;margin-bottom: 10px;}
    .step-title:first-child { margin-top: 0; }
    .field { margin-bottom: 12px; }
    .field label { display: block; font-size: 12px; color: #888; margin-bottom: 4px; }
    .field select, .field input {
        width: 100%;
        height: 38px;
        border: 1px solid #ddd;
        /* border-radius: 8px; */
        padding: 0 12px;
        font-size: 14px;
        outline: none;
        color: #000000;
    }
    .field select:focus, .field input:focus { border-color: #e74c3c; }
    .captcha-row { display: flex; gap: 8px; align-items: center; }
    .captcha-row input { flex: 1; }
    .captcha-row img {
        height: 38px;
        /* border-radius: 8px; */
        border: 1px solid #ddd;
        cursor: pointer;
        min-width: 96px;
        object-fit: cover;
        background: #f5f5f5;
    }
    .captcha-row a { font-size: 12px; color: #2980b9; text-decoration: none; white-space: nowrap; }
    .btn {
        width: 100%;
        height: 42px;
        border: none;
        /* border-radius: 8px; */
        font-size: 15px;
        cursor: pointer;
        margin-top: 10px;
        transition: opacity .2s;
    }
    .btn:hover { opacity: .88; }
    .btn:disabled { opacity: .5; cursor: not-allowed; }
    .btn-red { background: linear-gradient(135deg, #c0392b, #e74c3c); color: #fff; }
    .btn-gray { background: #f0f0f0; color: #555; }
    .bound-info {
        display: none;
        background: #fff6f0;
        border: 1px solid #f3c8a8;
        /* border-radius: 8px; */
        padding: 10px 14px;
        font-size: 13px;
        color: #a04000;
        margin-bottom: 12px;
        word-break: break-all;
    }
    .msg {/* border-radius: 8px; */padding: 10px 14px;font-size: 13px;margin-top: 10px;line-height: 1.6;text-align:center;}
    .msg.ok {display: block;background: #eafaf1;border: 1px solid rgb(0 159 65);color: #1e8449;}
    .msg.err { display: block; background: #fdedec; border: 1px solid #f5b7b1; color: #c0392b; }
    .tips {
        /* margin-top: 18px; */
        padding-top: 14px;
        /* border-top: 1px dashed #e5e5e5; */
        font-size: 12px;
        color: #999;
        line-height: 1.8;
    }
 .milingliebiao{
    float: left;
    width: 100%;
    /* margin-left: 5px; */
    height: auto;
    /* margin-right: 5px; */
    margin-bottom: 0px;
    margin-top: 0px;
    /* border-left: 1px solid #dedede; */
    /* border-top: 1px solid #dedede; */
    /* border-radius: 5px; */
    /* margin-top: 5px; */
    height: calc(100%);
    position: relative;
    overflow: auto;
    /* margin-top: 5px; */
    /* padding: 10px; */
    scroll-behavior: smooth; /* 加上这一行即可 */
    /* border: 1px solid#b4d2d7; */
    /* background: linear-gradient(to top, rgb(185 185 185/ 60%), transparent); */
    /* padding: 5px; */
}
.milingliebiao li{
    float: left;
    /* margin: 5px; */
    /* border: 1px solid #dedede; */
    padding: 0px 7px;
    width: 100%;
    margin-top: 5px;
    text-align: center;
    list-style: none;
    cursor: default;
    /* border-radius: 5px; */
    transition: background-color 0.3s ease; /* 平滑过渡的关键 */
    font-size: 14px;
    height: 60px;
    /* border-bottom: 1px solid #dedede; */
    position: relative;
    /* border-bottom: 0px; */
    /* line-height: 44px; */
    background: #e8e8e870;
}
.milingliebiao li.noling{
    background: #fff6f0;
    border: 1px solid #f3c8a8;
}
.milingliebiao li.isling{
    background: #eafaf1;
    border: 1px solid #009f41;
    cursor:no-drop;
    /* border-bottom: 0px; */
}
.milingliebiao li.bencilingquguo{
       background: #f1f1f1;
       border: 1px solid #e1e1e1;
       cursor:no-drop
}
.milingliebiao li.bencilingquguo span.weiling_tishi{
    color: #a37272 !important;
}
.step-title-do{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    margin-top: 30px;
    /* border-left: 1px solid #dedede; */
    /* border-top: 1px solid #dedede; */
    /* border-radius: 5px; */
    background: #000000;
    text-align: center;
    line-height: 46px;
    color: #ffffff;
}
.milingliebiao li:nth-child(odd) {
    /* background-color: #f1f1f1; */
}
.milingliebiao li.noling:hover{ background-color: #e1493921; /* hover 时的颜色 */}

/* "已领取"标记：默认隐藏 */
/* "已领取"标记：默认隐藏 */
.milingliebiao li .badge {
        color: #dd4838;
        font-size: 14px;
        opacity: 0;
        transform: translateX(8px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        float: left;
        position: absolute;
        left: 1px;
        top: 1px;
        background: #00000038;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
    }
    /* 领取状态下显示标记并置灰 */
.milingliebiao li.claimed {
        background-color: #00000003;
        color: #ffffff;
    }
.milingliebiao li.claimed .badge {
        opacity: 1;
        transform: translateX(0);
    }
    
    .line{width:100%;height:1px;clear:both;display: inline-block;border-top: 1px dashed #e5e5e5;}
.milingliebiao li span.add_time{
    float: right;
    font-size: 12px;
    color: #a7a2a2;
}
.milingliebiao li span{
    display: block;
    height: 30px;
    line-height: 30px;
    float: left;
    /* width: 100%; */
}
.milingliebiao li span.add_code{
    float: left;
}
.milingliebiao li span.add_code span{
    display: block;
    background: #e5e5e5;
    float: left;
    height: 20px;
    line-height: 18px;
    margin-top: 4px;
    margin-right: 5px;
    text-align: center;
    font-size: 12px;
    padding: 1px 7px;
    color: #6b6161;
    border-radius: 3px;
}
.dnone{ display:none;}

  .demo {text-align: center;float: right;position: absolute;top: 12px;right: 10px;}
  .demo p { color: #666; font-size: 14px; margin-top: 14px; }

  /* ===== 核心：圆形头像框 ===== */
  .avatar-frame {
    width: 60px;
    height: 60px;
    border-radius: 50%;          /* 圆形关键 */
    overflow: hidden;            /* 裁掉图片直角 */
    border: 3px solid #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    background: #eee;            /* 图片加载失败时的底色 */
  }

  .avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* 图片铺满不变形 */
    display: block;
  }

  /* ===== 变体 1：渐变描边圆框 ===== */
  .avatar-frame--ring {
    padding: 4px;                /* 描边粗细 */
    border: none;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4, #a18cd1);
    box-shadow: none;
  }
  .avatar-frame--ring img {
    border-radius: 50%;
  }

  /* ===== 变体 2：悬停发光效果 ===== */
  .avatar-frame--glow {
    transition: box-shadow .3s, transform .3s;
    cursor: pointer;
  }
  .avatar-frame--glow:hover {
    box-shadow: 0 0 0 4px rgba(64, 158, 255, .25),
                0 6px 20px rgba(64, 158, 255, .4);
    transform: scale(1.05);
  }
.milingliebiao li.yitianjia {
    background: #dddddd;
    color: #adadad;
    border: 1px solid #bdbdbd;
}

.step-title span.auto {
    float: right;
    background: #c93e2f;
    color: #fff;
    padding: 3px 5px;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* 平滑过渡的关键 */
    cursor: pointer;
}
.step-title span.auto:hover{background-color: #000000; /* hover 时的颜色 */}

.miling_lbox{
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: #ffffff;
    padding: 5px;
    /* border: 1px solid #f3c8a8; */
    margin-top: 0px;
    /* overflow-y: hidden; */
    /* margin-bottom: 3px; */
    position: relative;
    /* border-radius: 1px; */
    border: 1px dashed #fdcba5;
    /* box-shadow: 0 0 14px rgba(0, 0, 0, 0.15); */
    border-image: linear-gradient(to top, #ff9d9391, #f3c8a8) 1; /* 1 表示不裁剪渐变图 */
    border-image-repeat: stretch; /* 推荐拉伸填满边框 */
    /* border-radius: 15px; */
    margin-top: -12px;
    border-top: none;
}.li_line{
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #dedede;
    float: left;
}
.milingliebiao li span.ling_tishi{
    float: left;
    width: 100%;
    height: 24px;
    line-height: 24px;
    text-align: left;
    color: #ab4900;
    font-size: 12px;
    }
.milingliebiao li span.ling_tishi img{
    width: 15px;
    height: 15px;
    margin-right: 5px;margin-top:4px;float:left;
}
    
    
/* 选中时的持续扫光 */
.milingliebiao li.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgb(0 255 45 / 31%), transparent);
  transform: skewX(-25deg);
  /* 使用 animation 代替 transition 实现持续循环 */
  animation: sweepLight 2s ease-in-out infinite;
}

/* 扫光动画 */
@keyframes sweepLight {
  0% { left: -100%; }
  100% { left: 150%; }
}

.index_list{
    margin-top: 10px;
    float: left;
    width: 100%;
}
.index_list ul{
    display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.index_list ul li{
    width: calc(33% - 3.6px);
    float: left;
    background: #ffffff;
    border: 1px solid #dedede;
    text-align: center;
    line-height: 34px;
    flex: 0 0 calc((100% - 10px) / 3);  /* 减去2个5px间隔，再除以3 */
    box-sizing: border-box;
    color: #838282;
    font-size: 14px;
}

.scroll-wrap {
  height: 40px;
  overflow: hidden;
  /* border: 1px solid #ccc; */
  width: 100%;
  background: #fac85b38;
}

.scroll-wrap ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.scroll-wrap li {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;font-size: 14px;
  box-sizing: border-box;
  /* border-bottom: 1px solid #eee; */
  text-indent:10px;
  color: #8d7474; overflow:hidden;
}

#changeBtn{ float:right}

.step-box{
    width: 100%;
    /* height: 485px; */
    overflow: hidden;
}

.milingliebiao {
  /* IE & Edge */
  -ms-overflow-style: none;  
  /* Firefox */
  scrollbar-width: none;     
}

/* Chrome, Safari & Opera */
.milingliebiao::-webkit-scrollbar {
  display: none;
}

/* 顶部遮罩 */
.miling_lbox::before {
  /* content: ''; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, rgb(185 185 185 / 60%), transparent);
  z-index: 10;
  pointer-events: none;
}

/* 底部遮罩 */
.miling_lbox::after {
  /* content: ''; */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to top, rgb(185 185 185/ 60%), transparent);
  z-index: 10;
  pointer-events: none;
}

.disabled{
    background: linear-gradient(135deg, #979797, #c3c3c3);
    cursor: no-drop;
}
.gonggao{
    float: left;
    width: 100%;
    height: 100px;
    font-size: 14px;
    color: #9f7b7b;
    border: 1px solid #ffe6af;
    padding: 10px;
    background: #fef3db;
}
.gonggao p{
    display: -webkit-box;          /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical;  /* 设置或检索伸缩盒对象的子元素的排列方式为垂直 */
    -webkit-line-clamp: 4;         /* 核心属性：限制文本最多显示 4 行 */
    overflow: hidden;              /* 隐藏超出容器的内容 */
    text-overflow: ellipsis;       /* 使用省略号表示被截断的文本 */
}
.bsid{
    border: 1px solid #d7d1cd;
    float: left;
    padding: 5px;
    height: calc(100% - 0px);
}
.zhe1{
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, rgb(255 255 255), #250b0b00);
    z-index: 10;
    pointer-events: none;
    /* display: none; */
    width: calc(100% - 10px);
}
.zhe2{
    content: '';
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 0;
    height: 20px;
    background: linear-gradient(to top, rgb(255 255 255), transparent);
    z-index: 10;
    pointer-events: none;
    width: calc(100% - 10px);
    }
.zhe3{
    content: '';
    position: absolute;
    top: 0;
    /* left: 0; */
    right: 0;
    height: 326px;
    background: linear-gradient(to left, rgb(221 221 221/ 60%), transparent);
    z-index: 10;
    pointer-events: none;
    width: 20px;
    }
.zhe4{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to top, rgb(221 221 221 / 60%), transparent);
    z-index: 10;
    pointer-events: none;
    }
    .activez{
          -webkit-animation: greenPulse 2s infinite;
  animation: greenPulse 2s infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  
    -webkit-transition: all linear .218s;
    -moz-transition: all linear .218s;
    transition: all linear .218s;
    }
    @-webkit-keyframes greenPulse {
  0% {  -webkit-box-shadow: 0 0 3px #009f41;box-shadow: 0 0 3px #009f41;}
  10% { -webkit-box-shadow: 0 0 6px #009f41;box-shadow: 0 0 6px #009f41; }
  20% { -webkit-box-shadow: 0 0 9px #009f41;box-shadow: 0 0 9px #009f41; }
  30% { -webkit-box-shadow: 0 0 12px #009f41;box-shadow: 0 0 12px #009f41; }
  40% { -webkit-box-shadow: 0 0 15px #009f41;box-shadow: 0 0 15px #009f41; }
  50% { -webkit-box-shadow: 0 0 18px #009f41;box-shadow: 0 0 18px #009f41; }
  60% { -webkit-box-shadow: 0 0 15px #009f41;box-shadow: 0 0 15px #009f41; }
  70% { -webkit-box-shadow: 0 0 12px #009f41;box-shadow: 0 0 12px #009f41; }
  80% { -webkit-box-shadow: 0 0 9px #009f41;box-shadow: 0 0 9px #009f41; }
  90% { -webkit-box-shadow: 0 0 6px #009f41;box-shadow: 0 0 6px #009f41; }
  100% {-webkit-box-shadow: 0 0 3px #009f41;box-shadow: 0 0 3px #009f41;  }
}