/* ===== PC 端回收页（复刻云上收 recycling.html，主色天蓝） ===== */
.recovery-body{background:#f5f6f8;padding:20px 0 40px;}
.recovery-body .w1440{width:1440px;margin:0 auto;}

.recovery-body .round-corner{
    width:100%;
    background:#fff;
    border-radius:12px;
    margin-bottom:20px;
    padding:24px 30px;
    box-sizing:border-box;
}

/* 标题：16px/600 + 左侧竖线 */
.recovery-body .part-title{
    font-size:16px;
    font-weight:600;
    color:#333;
    line-height:16px;
}
.recovery-body .part-title:before{
    content:"";
    display:inline-block;
    width:4px;
    height:18px;
    margin-right:5px;
    background-color:#3EB6FF;
    border-radius:2px;
    vertical-align:text-bottom;
}

/* ===== 搜索区 ===== */
.recovery-body .search-area{padding:8px 0;text-align:center;}
.recovery-body .search-bg{
    display:flex;
    align-items:center;
    width:896px;
    max-width:100%;
    margin:0 auto;
    height:42px;
    border:2px solid #5491FF;
    border-radius:8px;
    position:relative;
    box-sizing:border-box;
    overflow:hidden;
}
.recovery-body .search-bg .sinput{
    height:42px;
    width:88%;
    background:#fff;
    padding:0 15px;
    box-sizing:border-box;
    border:none;
    outline:none;
    font-size:14px;
    color:#333;
}
.recovery-body .search-bg .sbtn{
    height:42px;
    width:12.1%;
    background:#5491FF;
    color:#fff;
    border:none;
    border-radius:0 6px 6px 0;
    font-size:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}
.recovery-body .search-bg .sbtn i{
    display:inline-block;
    width:20px;
    height:20px;
    background:url(/static/home/images/clone/svg/search.svg) no-repeat center/contain;
    filter:brightness(0) invert(1);
}
.recovery-body .search-hot{
    margin-top:14px;
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    align-items:center;
    justify-content:center;
}
.recovery-body .search-hot span{
    font-size:13px;
    color:#1890ff;
    cursor:pointer;
}
.recovery-body .search-hot span:hover{text-decoration:underline;}

/* ===== 卡类标签（复刻云上收彩色渐变 + SVG图标） ===== */
.recovery-body .catelist ul{
    display:flex;
    flex-wrap:wrap;
    margin-top:16px;
}
.recovery-body .catelist ul li{
    width:159px;
    height:60px;
    margin-right:15px;
    font-size:18px;
    font-weight:bold;
    display:flex;
    align-items:center;
    text-indent:30px;
    border-radius:12px;
    position:relative;
    overflow:hidden;
    transition:transform .3s;
    cursor:pointer;
    color:#fff;
}
.recovery-body .catelist ul li:last-child{margin-right:0;}
.recovery-body .catelist ul li:hover{transform:translateY(-5px);}
.recovery-body .catelist ul li i{
    display:inline-block;
    margin-left:12px;
    transform:scale(0.75);
    transition:.3s;
    background-size:cover;
    background-repeat:no-repeat;
}
.recovery-body .catelist ul li:hover i{transform:scale(1);}
.recovery-body .catelist ul li.cur i{transform:scale(1);}

/* 选中态对勾角标（纯CSS，复刻云上收） */
.recovery-body .catelist ul li.cur:before{
    position:absolute;
    right:5px;
    bottom:5px;
    transform:rotate(42deg);
    content:"";
    display:block;
    width:4px;
    height:10px;
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    z-index:1;
}
.recovery-body .catelist ul li.cur:after{
    position:absolute;
    right:0;
    bottom:0;
    content:"";
    display:block;
    width:20px;
    height:20px;
    background:rgba(125,154,178,0.8);
    border-radius:8px 0 12px 0;
}

/* 8个分类配色 + 渐变 + 图标 */
.recovery-body .catelist .cate1{background:linear-gradient(87deg,rgb(103,175,255) 0%,rgb(42,142,254) 100%);}
.recovery-body .catelist .cate1 i{width:55px;height:60px;background-image:url(/static/home/images/clone/svg/cate-hf.svg);}
.recovery-body .catelist .cate2{background:linear-gradient(87deg,rgb(255,165,93) 0%,rgb(249,20,20) 100%);}
.recovery-body .catelist .cate2 i{width:60px;height:58px;background-image:url(/static/home/images/clone/svg/cate-yx.svg);}
.recovery-body .catelist .cate3{background:linear-gradient(87deg,rgb(39,214,124) 0%,rgb(7,174,98) 100%);}
.recovery-body .catelist .cate3 i{width:55px;height:63px;background-image:url(/static/home/images/clone/svg/cate-jy.svg);}
.recovery-body .catelist .cate4{background:linear-gradient(87deg,rgb(138,167,253) 0%,rgb(89,87,253) 100%);}
.recovery-body .catelist .cate4 i{width:55px;height:62px;background-image:url(/static/home/images/clone/svg/cate-ds.svg);}
.recovery-body .catelist .cate5{background:linear-gradient(87deg,rgb(255,187,0) 0%,rgb(255,119,0) 100%);}
.recovery-body .catelist .cate5 i{width:55px;height:56px;margin-top:-5px;background-image:url(/static/home/images/clone/svg/cate-ms.svg);}
.recovery-body .catelist .cate6{background:linear-gradient(87deg,rgb(253,138,100) 0%,rgb(254,85,88) 100%);}
.recovery-body .catelist .cate6 i{width:55px;height:58px;margin-top:-5px;background-image:url(/static/home/images/clone/svg/cate-yy.svg);}
.recovery-body .catelist .cate7{background:linear-gradient(87deg,rgb(87,227,119) 0%,rgb(5,220,154) 100%);}
.recovery-body .catelist .cate7 i{width:60px;height:60px;margin-top:-5px;background-image:url(/static/home/images/clone/svg/cate-cx.svg);}
.recovery-body .catelist .cate8{background:linear-gradient(87deg,rgb(254,137,242) 0%,rgb(230,50,216) 100%);}
.recovery-body .catelist .cate8 i{width:57px;height:63px;margin-top:-5px;background-image:url(/static/home/images/clone/svg/cate-sc.svg);}

/* ===== 拼音索引 ===== */
.recovery-body .py-select{
    display:flex;
    align-items:center;
    margin-top:20px;
    font-size:14px;
}
.recovery-body .py-select .label{color:#666;}
.recovery-body .py-select .list{color:#000;}
.recovery-body .py-select .list span{
    display:inline-block;
    width:20px;
    height:20px;
    line-height:20px;
    text-align:center;
    cursor:pointer;
    margin-right:8px;
    user-select:none;
    font-size:14px;
}
.recovery-body .py-select .list span:hover{color:#5491FF;}
.recovery-body .py-select .list span.cur{
    background-color:#5491FF;
    color:#fff;
    border-radius:50%;
}

/* ===== 卡种网格 ===== */
.recovery-body .cardlist ul{
    display:flex;
    flex-wrap:wrap;
}
.recovery-body .cardlist ul li{
    width:135px;
    padding:20px 10px;
    margin:20px 15px 0 0;
    text-align:center;
    border:2px solid transparent;
    border-radius:12px;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    box-sizing:border-box;
}
.recovery-body .cardlist ul li:nth-child(8n){margin-right:0;}
.recovery-body .cardlist ul li .cardimg{
    width:88px;
    height:88px;
    object-fit:contain;
}
.recovery-body .cardlist ul li .cardname{
    max-height:36px;
    margin-top:10px;
    font-size:14px;
    color:#333;
    line-height:14px;
}
.recovery-body .cardlist ul li .cardname span{
    line-height:1.3;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}
.recovery-body .cardlist ul li:hover,
.recovery-body .cardlist ul li.cur{
    border-color:#5491FF;
    background-color:#f0f7ff;
    cursor:pointer;
}
.recovery-body .cardlist ul li.cur:after{
    position:absolute;
    right:-25px;
    bottom:-25px;
    transform:rotate(45deg);
    content:"";
    display:block;
    width:50px;
    height:50px;
    background-color:#5491FF;
}
.recovery-body .cardlist ul li.cur .cardname{color:#5491FF;}
.recovery-body .cardlist ul li.cur .cardname:after{
    position:absolute;
    right:5px;
    bottom:5px;
    transform:rotate(42deg);
    content:"";
    display:block;
    width:6px;
    height:13px;
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    z-index:1;
}

/* ===== 面值列表 ===== */
.recovery-body .facelist ul{
    display:flex;
    flex-wrap:wrap;
}
.recovery-body .facelist ul li{
    width:240px;
    padding:14px 10px;
    margin:20px 15px 0 0;
    text-align:center;
    border:2px solid #DFE5F0;
    border-radius:12px;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    box-sizing:border-box;
}
.recovery-body .facelist ul li:nth-child(5n){margin-right:0;}
.recovery-body .facelist ul li .face{
    font-size:20px;
    color:#5491FF;
    margin-bottom:10px;
}
.recovery-body .facelist ul li .detail{
    color:#999;
    font-size:14px;
}
.recovery-body .facelist ul li .detail .value{
    margin-right:6px;
    color:#666;
}
.recovery-body .facelist ul li .detail .rate{
    margin-left:6px;
    color:#FA7375;
}
.recovery-body .facelist ul li:hover,
.recovery-body .facelist ul li.cur{
    border-color:#5491FF;
    cursor:pointer;
}
.recovery-body .facelist ul li.cur:before{
    position:absolute;
    right:5px;
    bottom:5px;
    transform:rotate(42deg);
    content:"";
    display:block;
    width:6px;
    height:13px;
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    z-index:1;
}
.recovery-body .facelist ul li.cur:after{
    position:absolute;
    right:-25px;
    bottom:-25px;
    transform:rotate(45deg);
    content:"";
    display:block;
    width:50px;
    height:50px;
    background-color:#5491FF;
}

/* ===== 提交方式 ===== */
.recovery-body .mgt20{margin-top:20px;}
.recovery-body .colorf97373{color:#f97373;}
.recovery-body .colorff7100{color:#5491FF;}

.recovery-body .subway{
    display:flex;
    margin-top:20px;
}
.recovery-body .subway .group,
.recovery-body .subway .single{
    width:280px;
    padding:12px 0;
    border-radius:12px;
    border:2px solid #DFE5F0;
    margin-right:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    color:#333;
}
.recovery-body .subway .group i,
.recovery-body .subway .single i{
    width:28px;
    height:28px;
    margin-right:10px;
    background-size:cover;
    background-repeat:no-repeat;
    filter:grayscale(100%);
}
.recovery-body .subway .group i{background-image:url(/static/home/images/clone/svg/sub-group.svg);}
.recovery-body .subway .single i{background-image:url(/static/home/images/clone/svg/sub-single.svg);}
.recovery-body .subway .group:hover,
.recovery-body .subway .group.cur,
.recovery-body .subway .single:hover,
.recovery-body .subway .single.cur{
    border-color:#5491FF;
    cursor:pointer;
}
.recovery-body .subway .group:hover i,
.recovery-body .subway .group.cur i,
.recovery-body .subway .single:hover i,
.recovery-body .subway .single.cur i{
    filter:grayscale(0);
}
.recovery-body .subway .group.cur:before,
.recovery-body .subway .single.cur:before{
    position:absolute;
    right:5px;
    bottom:5px;
    transform:rotate(42deg);
    content:"";
    display:block;
    width:6px;
    height:13px;
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    z-index:1;
}
.recovery-body .subway .group.cur:after,
.recovery-body .subway .single.cur:after{
    position:absolute;
    right:-25px;
    bottom:-25px;
    transform:rotate(45deg);
    content:"";
    display:block;
    width:50px;
    height:50px;
    background-color:#5491FF;
}

.recovery-body .textarea-area{position:relative;}
.recovery-body .textarea-area .textarea{
    width:100%;
    min-height:180px;
    border:1px solid #e0e0e0;
    border-radius:8px;
    padding:14px;
    font-size:14px;
    line-height:1.6;
    box-sizing:border-box;
    resize:vertical;
    outline:none;
}
.recovery-body .textarea-area .textarea:focus{border-color:#5491FF;}
.recovery-body .textarea-area .tip{
    margin-top:12px;
    display:flex;
    gap:16px;
    align-items:flex-start;
}
.recovery-body .textarea-area .tip .light-box{
    width:6px;
    height:40px;
    background:#3EB6FF;
    border-radius:3px;
}
.recovery-body .textarea-area .tip .rules{
    font-size:13px;
    color:#666;
    line-height:1.8;
}
.recovery-body .textarea-area .tip .rules .mgb10{margin-bottom:10px;}

.recovery-body .zlbtn{
    margin-top:12px;
    font-size:13px;
    color:#666;
}
.recovery-body .zlbtn button{
    padding:6px 16px;
    margin-right:12px;
    border:1px solid #5491FF;
    color:#5491FF;
    background:#fff;
    border-radius:16px;
    cursor:pointer;
    font-size:13px;
}

.recovery-body .single-content .item{
    font-size:14px;
    color:#333;
    display:flex;
    align-items:center;
    gap:10px;
}
.recovery-body .single-content .input{
    flex:1;
    max-width:400px;
    height:40px;
    border:1px solid #e0e0e0;
    border-radius:6px;
    padding:0 12px;
    font-size:14px;
    outline:none;
}
.recovery-body .single-content .input:focus{border-color:#5491FF;}

.recovery-body .agreement-area{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid #f0f0f0;
}
.recovery-body .agreement-area .mgt10{
    margin-top:10px;
    font-size:13px;
    color:#666;
}
.recovery-body .agreement-area .mgt30{margin-top:30px;}
.recovery-body .agreement-area input[type=checkbox]{
    margin-right:6px;
    vertical-align:middle;
}
.recovery-body .agreement-area .cursor{cursor:pointer;}

.recovery-body .confirm-btn{
    width:220px;
    height:48px;
    background:linear-gradient(90deg,#3EB6FF,#5491FF);
    color:#fff;
    font-size:16px;
    font-weight:600;
    border:none;
    border-radius:24px;
    cursor:pointer;
}
.recovery-body .confirm-btn:hover{opacity:.9;}

/* ===== 兑换说明 ===== */
.recovery-body .exchange-intro p{
    font-size:14px;
    color:#666;
    line-height:2;
}
.recovery-body .exchange-intro i{
    color:#3EB6FF;
    font-style:normal;
}