.layui-upload-file {
    display: none !important;
    opacity: .01;
    filter: Alpha(opacity=1);
}

.list-page > header,
.form-page > header {
    position: fixed;
    top: -0.1rem;
    background-color: white;
    display: flex;
    flex-direction: column;
    line-height: 1.8;
    padding: 0rem 0.6rem 0rem 0.6rem;
    box-shadow: 0px 2px 5px rgb(0 0 0 / 20%);
    width: 100%;
    z-index: 98;
}

    .list-page > header > div,
    .form-page > header > div {
        display: flex;
        align-items: flex-start;
        padding: 0rem 0 0.65rem 0;
    }

        .list-page > header > div label,
        .form-page > header > div label {
            color: gray;
            margin: 0;
            padding: 0rem 0.6rem;
            font-size: 1rem;
            line-height: 1.4rem;
            height: 1.3rem;
            word-break: keep-all;
        }

        .list-page > header > div ul, 
        .list-page > header > div ul li,
        .form-page > header > div ul, 
        .form-page > header > div ul li {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

            .list-page > header > div ul li,
            .form-page > header > div ul li {
                border-radius: 0.6rem;
                letter-spacing: 0.06rem;
                border: 1px solid #fff;
                margin: 0;
                padding: 0rem 0.6rem;
                font-size: 0.9rem;
                line-height: 1.32rem;
                height: 1.35rem;
                word-break: keep-all;
            }

                .list-page > header > div ul li.active,
                .form-page > header > div ul li.active {
                    border: 1px solid #007aff;
                    background-color: #007aff;
                    color: white;
                }

    .list-page > header .key,
    .form-page > header .key {
        display: flex;
        padding: 0.5rem 0 0.5rem 0 !important;
    }

        .list-page > header .key input,
        .form-page > header .key input {
            margin: 0;
            margin-right: 0.5rem;
            line-height: 2.1rem;
            font-size: 1rem;
            height: 2.1rem;
        }

        .list-page > header .key button,
        .form-page > header .key button {
            margin: 0;
            line-height: 2.0rem;
            height: 2.1rem;
            font-size: 1rem;
            padding: 0 1rem;
            color: #fff;
            border: 1px solid #007aff;
            background-color: #007aff;
        }
.list-page .search {
    margin: 0.8rem 0.5rem 0 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}

    .list-page .search i {
        background: #f0f0f0;
        height: 2.6rem;
        width: 2.6rem;
        line-height: 2.6rem;
        border-radius: 50% 0 0 50%;
        text-align: center;
    }

    .list-page .search input {
        background: #f0f0f0;
        height: 2.6rem;
        line-height: 2.6rem;
        border-radius: 0 1.3rem 1.3rem 0;
        width: 100%;
        margin: 0;
        border: 0;
    }

    .list-page .search a {
        width: 4rem;
        height: 2.6rem;
        line-height: 2.6rem;
        color: black;
        text-align: center;
    }

.list-page > header > .stat {
    font-size: 1rem;
    color: black;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background: white;
    height: 2.4rem;
    line-height: 2rem;
    padding: 0.3rem 0 0.2rem 0;
    justify-content: space-between;
    position: relative;
}

    .list-page > header > .stat a {
        margin-right: 0.5rem;
        color: gray;
        padding: 0.3rem 0rem;
        line-height: 0.8rem;
        font-size: 0.8rem;
        text-align: left;
    }

        .list-page > header > .stat a.active {
            color: black;
        }

    .list-page > header > .stat .right {
        width: 2rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

        .list-page > header > .stat .right i {
            margin-right: 0.5rem;
            display: none;
        }

            .list-page > header > .stat .right i.active {
                display: inherit;
            }

            .list-page > header > .stat .right i:after {
                font-family: "iconfont" !important;
                -webkit-font-smoothing: antialiased;
                content: "\e64c";
                font-size: 1rem;
            }

.list-page > header > .right i.list:after {
    content: "\e602";
}

.list-page > header > .stat .right i.grid:after {
    content: "\e653";
}

.list-page > header > .stat.date {
    margin-top: 0.3rem;
    margin-bottom: 0.2rem;
}

    .list-page > header > .stat.date .left {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
    }

    .list-page > header > .stat.date a {
        background-color: white;
        color: black;
        border-color: rgb(219 219 219);
        border-width: 1px;
        border-style: solid;
        border-radius: 6px;
        padding: 0.4rem 0.8rem;
        line-height: 0.8rem;
        font-size: 0.8rem;
    }

        .list-page > header > .stat.date a.active {
            background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
            color: white;
            border-color: #ff6b35;
        }

.list-page > header > .stat.status a.active {
    border-bottom: 3px solid #ff6b35;
    color: #ff6b35;
}

.list-page > .boxs, .list-page > .nodata {
    margin-bottom: 8rem;
    margin-top: 6.6rem;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.list-page > .nodata,
.form-page > .nodata {
    margin: 6rem 0 0 0;
    background: transparent;
    padding: 3rem 0;
    text-align: center;
    color: #bbb;
    font-size: 0.92rem;
    box-shadow: none;
    align-items: center;
    justify-content: center;
}

    .list-page > .nodata i,
    .form-page > .nodata i {
        display: block;
        font-size: 3.5rem;
        color: #e0e0e0;
        margin-bottom: 1.5rem;
    }

    .list-page > .boxs .box {
        min-height: 6rem;
        background: white;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        margin: 0 0.8rem;
        margin-top: 0.8rem;
        border-radius: 0.6rem;
        position: relative;
        padding: 0.6rem 0;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    }

        .list-page > .boxs .box .bottom {
            font-size: 1rem;
            line-height: 1.8rem;
            display: flex;
            flex-direction: row;
            align-content: center;
            justify-content: flex-end;
            align-items: center;
            padding: 0.5rem 1rem 0rem 0;
            width: 100%;
        }

            .list-page > .boxs .box .bottom a {
                background-color: white;
                color: black;
                border-color: rgb(219 219 219);
                border-width: 1px;
                border-style: solid;
                border-radius: 6px;
                padding: 0.4rem 1.2rem;
                line-height: 0.8rem;
                font-size: 0.8rem;
                margin-left: 0.8rem;
            }
.border_bottom::before {
    content: ' ';
    display: block;
    height: 1px;
    position: absolute;
    bottom: 0px;
    left: 1rem;
    right: 1rem;
    background: rgba(219, 219, 219, 0.60);
}

.form-page .page-title {
    font-size: 1.45rem;
    color: black;
    font-weight: normal;
    padding: 1rem;
}

.form-page .form-items {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: flex-start;
    margin: 1rem;
}

    .form-page .form-items .form-item {
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        margin-bottom: 0.6rem;
    }

    .form-page .form-items .form-group-items {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        align-content: center;
    }

        .form-page .form-items .form-group-items > .form-item {
            width: 48%;
        }

    .form-page .form-items .form-item label {
        margin: 0.6rem 0 !important;
        font-size: 0.9rem;
        line-height: 1.0rem;
        color: black;
    }

    .form-page .form-items .form-item input {
        height: 2.5rem;
        padding-left: 1rem;
        border-radius: 0.4rem;
        width: 100%;
    }

    .form-page .form-items .form-item .img {
        margin: 0.4rem auto;
        width: 7rem;
        height: 7rem;
    }

        .form-page .form-items .form-item .img.header {
            margin: 0.4rem auto;
            position: relative;
        }

        .form-page .form-items .form-item .img img {
            width: 100%;
            height: 100%;
            border: 1px solid #dbdbdb;
            border-radius: 50%;
        }

        .form-page .form-items .form-item .img.header:before {
            content: '\e8bc';
            display: block;
            background-color: #2666de;
            height: 1.6rem;
            width: 1.6rem;
            line-height: 1.6rem;
            text-align: center;
            font-family: "iconfont" !important;
            color: white;
            position: absolute;
            bottom: 0.6rem;
            right: 0.1rem;
            border-radius: 50%;
            font-size: 1rem;
        }

    .form-page .form-items .form-item .radio {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }

        .form-page .form-items .form-item .radio span {
            background-color: white;
            color: black;
            border-color: rgb(219 219 219);
            border-width: 1px;
            border-style: solid;
            border-radius: 6px;
            padding: 0.4rem 0.8rem;
            line-height: 0.8rem;
            font-size: 0.8rem;
            margin-right: 0.5rem;
        }

            .form-page .form-items .form-item .radio span.active {
                background-color: #2666de;
                color: white;
            }

    .form-page .form-items .form-item .upload-img-box {
        display: flex;
        flex-direction: row;
        align-content: flex-start;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
    }

        .form-page .form-items .form-item .upload-img-box > div {
            width: 30%;
            margin-bottom: 0.8rem;
        }

            .form-page .form-items .form-item .upload-img-box > div .title {
                font-size: 0.9rem;
                line-height: 1;
                text-align: center;
            }

            .form-page .form-items .form-item .upload-img-box > div img {
                width: 100%;
            }

.form-page .submit {
}

    .form-page .submit button {
        display: block;
        width: 100%;
        color: #fff;
        border: 1px solid #2666de;
        background-color: #2666de;
        font-size: 1rem;
        padding: 0.7rem 0;
        line-height: 1;
        border-radius: 2rem;
        letter-spacing: 0.05rem;
    }

        .form-page .submit button:active {
            background-color: rgba(38,102,222,0.8);
        }
.copyright {
    text-align: center;
    padding: 1.5rem 0;
    color: #999;
    font-size: 0.75rem;
    line-height: 1.4;
}

    .copyright .title {
        font-size: 0.9rem;
    }

    .copyright .icp {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    .copyright .tel, .copyright .tel a {
        font-size: 0.9rem;
        color: #666;
        text-decoration: none;
    } 
 

.device_home > .device {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    color: white;
    font-size: 0.8rem;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 0.4rem 0.60rem 0.2rem 0.40rem;
    position: relative;
    background: white;
    color: black;
    box-shadow: 2px 2px 4px #cfcfcf;
}

    .device_home > .device .left {
    }

        .device_home > .device .left i {
            font-size: 2rem;
            line-height: 1;
        }

    .device_home > .device .right {
        margin-left: 0.4rem;
    }

        .device_home > .device .right .title {
            font-size: 1rem;
            line-height: 1.0;
        }

        .device_home > .device .right .address {
            font-size: 0.9rem;
            line-height: 1.4;
            color: gray;
        }

.device_home > .user {
    width: 5rem;
    margin:3rem auto;
}

    .device_home > .user .avatar {
        background-image: url(/content/images/logo.png);
        width: 5rem;
        height: 5rem;
        background-attachment: revert;
        background-size: cover;
        background-position: center;
        border: 1px solid white;
        box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
        border-radius: 50%;
       
    }
    .device_home > .user .name {
        color: black;
        font-size: 1rem;
        text-align: center;
        line-height: 2.4;
    }
.device_home > .open_door, .device_home > .order {
    background-color: white;
    border-radius: 0.8rem;
    margin: 0rem 2rem 1.6rem 2rem;
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    height: 6.0rem;
    box-shadow: 2px 2px 4px #cfcfcf;
}
    .device_home > .open_door .left, .device_home > .order .left {
        width: 5rem;
        height: 5rem;
        text-align: center;
        line-height: 5rem;
    }
        .device_home > .open_door .left i, .device_home > .order .left i {
            font-size: 3.0rem;
            color: rgb(38 102 222);
        }
        .device_home > .order .left i {
            font-size: 3.0rem;
            color: #ffcda1;
        }
    .device_home > .open_door .right  , .device_home > .order .right  {
       margin-left:0.8rem;
    }
        .device_home > .open_door .right .name, .device_home > .order .right .name {
            font-size: 1.2rem;
            color: rgb(104 104 104);
            line-height: 1;
            padding: 0.2rem 0 0.5rem 0;
        }
        .device_home > .open_door .right .tips, .device_home > .order .right .tips {
            color: gray;
            line-height: 1;
            font-size: 0.8rem;
        }
.device_home > .order {
}


.list-page.order .boxs {
    margin-top: 8.6rem;
}

.list-page.order .nodata {
    text-align: center;
    color: #bbb;
    font-size: 0.85rem;
    padding: 3rem 0;
    margin-top: 1rem;
}

        .list-page.order .nodata i {
            display: none;
        }

    .list-page.order .boxs .box {
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        align-items: flex-start;
        justify-content: center;
    }

        .list-page.order .boxs .box .title {
            font-size: 0.85rem;
            line-height: 1.4rem;
            padding: 0.5rem 1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            position: relative;
        }

            .list-page.order .boxs .box .title::before, .list-page.order .boxs .box .body::before, .list-page.order .boxs .box .items::before {
                content: '  ';
                display: block;
                height: 1px;
                position: absolute;
                bottom: 0px;
                left: 1rem;
                right: 1rem;
                background: rgba(219,219,219,0.60);
            }

            .list-page.order .boxs .box .title .right {
                color: #ff6b35;
                font-size: 0.85rem;
                font-weight: 500;
            }

        .list-page.order .boxs .box .body {
            font-size: 0.9rem;
            line-height: 1.4rem;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-content: flex-start;
            justify-content: center;
            align-items: flex-start;
            padding: 0.5rem 1rem;
            width: 100%;
            position: relative;
        }

            .list-page.order .boxs .box .body > div.pay_no {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

                .list-page.order .boxs .box .body > div.pay_no text {
                    font-size: 0.8rem;
                }

            .list-page.order .boxs .box .body > div label {
                margin-right: 0.5rem;
                color: #666;
                font-size: 0.85rem;
            }

            .list-page.order .boxs .box .body > div text.money {
                color: #ff6b35;
                font-size: 1.0rem;
                font-weight: 500;
            }

            .list-page.order .boxs .box .body > div .money-icon {
                color: #ff6b35;
                font-size: 0.85rem;
                margin-right: 0.2rem;
            }

        .list-page.order .boxs .box .items {
            font-size: 0.8rem;
            line-height: 1.2rem;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-content: flex-start;
            justify-content: center;
            align-items: flex-start;
            padding: 0.4rem 1rem;
            width: 100%;
            position: relative;
            background: #f9f9f9;
        }

            .list-page.order .boxs .box .items > div {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                padding: 0.3rem 0;
            }

                .list-page.order .boxs .box .items > div .goods_title {
                    flex: 1;
                    color: #333;
                    font-size: 0.8rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-right: 0.5rem;
                }

                .list-page.order .boxs .box .items > div .count-wrap {
                    display: flex;
                    align-items: center;
                    margin-right: 0.8rem;
                }

                .list-page.order .boxs .box .items > div .count-wrap text:first-child {
                    color: #666;
                    font-size: 0.8rem;
                    margin-right: 0.2rem;
                }

                .list-page.order .boxs .box .items > div .count-wrap text:last-child {
                    color: #666;
                    font-size: 0.8rem;
                }

                .list-page.order .boxs .box .items > div .money {
                    color: #ff6b35;
                    font-size: 0.85rem;
                    font-weight: 500;
                }

                .list-page.order .boxs .box .items > div .money-wrap {
                    display: flex;
                    align-items: center;
                }

                .list-page.order .boxs .box .items > div .money-wrap .money-icon {
                    color: #ff6b35;
                    font-size: 0.7rem;
                    margin-right: 0.15rem;
                }


        .list-page.order .boxs .box .bottom a.refund {
            background-color: #b81b1b;
            border: 1px solid #b81b1b;
            color: white;
        }

        .list-page.order .boxs .box .reason {
            margin: 0.6rem 0.8rem 0.2rem 0.8rem;
            border-radius: 0.6rem;
            background: #f0f0f0;
            font-size: 0.8rem;
            padding: 0.6rem 0.6rem 0.6rem 0.6rem;
        }

            .list-page.order .boxs .box .reason .imgs {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-content: flex-start;
                justify-content: flex-start;
                align-items: center;
                margin-top: 0.6rem;
                margin-left: -0.4rem;
                margin-bottom: 0.2rem;
            }

                .list-page.order .boxs .box .reason .imgs > div {
                    width: 25%;
                    overflow: hidden;
                    aspect-ratio: 1;
                }

                    .list-page.order .boxs .box .reason .imgs > div .container {
                        margin-left: 0.4rem;
                        margin-bottom: 0.4rem;
                    }

                    .list-page.order .boxs .box .reason .imgs > div img {
                        width: 100%;
                        aspect-ratio: 1;
                        border: 1px solid rgb(219 219 219);
                        border-radius: 0.6rem;
                    }
.order_detail {
}

    .order_detail > .top {
        background-color: #0527af;
        height: 10.6rem;
    }

        .order_detail > .top .status {
            color: white;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: flex-start;
            align-items: center;
            padding-top: 0.8rem;
            margin-left: 0.8rem;
        }

            .order_detail > .top .status .left {
                width: 3.2rem;
                height: 3rem;
                line-height: 2.8rem;
            }

                .order_detail > .top .status .left i {
                    font-size: 3rem;
                }

            .order_detail > .top .status .right .title {
                font-size: 1.2rem;
            }

            .order_detail > .top .status .right .date {
                font-size: 0.9rem;
                color: rgba(255,255,255,0.6);
                line-height: 1.5;
            }

        .order_detail > .top > .device {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: flex-start;
            align-items: center;
            color: white;
            margin: 0.4rem 1rem;
            font-size: 1rem;
            background-color: rgba(255, 255, 255, 0.15);
            border-radius: 0.8rem;
            padding: 0.5rem 0.60rem 0.4rem 0.60rem;
            position: relative;
        }

            .order_detail > .top > .device .left {
            }

                .order_detail > .top > .device .left i {
                    font-size: 2rem;
                }

            .order_detail > .top > .device .right {
                margin-left: 0.4rem;
            }

                .order_detail > .top > .device .right .title {
                    font-size: 0.9rem;
                    line-height: 1.1;
                }

                .order_detail > .top > .device .right .address {
                    font-size: 0.8rem;
                    color: rgba(255,255,255,0.60);
                    line-height: 1.7;
                }

    .order_detail > .goods_list {
        background-color: white;
        overflow: hidden;
        margin: -2.6rem 0.8rem 0.8rem 0.8rem;
        border-radius: 0.6rem;
        padding: 0.6rem 0.6rem 0.1rem 0.6rem;
    }

        .order_detail > .goods_list > .title {
            font-size: 1rem;
            font-weight: bold;
            padding: 0.1rem 1rem 0.2rem 0.4rem;
        }

        .order_detail > .goods_list .items {
            font-size: 1rem;
            line-height: 1.6rem;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-content: flex-start;
            justify-content: center;
            align-items: flex-start;
            padding: 0.4rem 1rem;
            width: 100%;
            position: relative;
        }

            .order_detail > .goods_list .items > div {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: space-between;
                align-items: center;
                width: 100%;
            }

                .order_detail > .goods_list .items > div text {
                    color: red;
                    font-size: 1.3rem;
                }

                    .order_detail > .goods_list .items > div text:before {
                        content: "\e76f";
                        color: red;
                        font-size: 0.8rem;
                        font-family: "iconfont" !important;
                    }

        .order_detail > .goods_list .summary {
            text-align: right;
            line-height: 1;
            padding: 0.6rem 0;
        }

    .order_detail .order_info {
        font-size: 1rem;
        line-height: 1.8rem;
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        justify-content: center;
        align-items: flex-start;
        padding: 0.6rem 1rem;
        position: relative;
        background: white;
        margin: 0.8rem;
        border-radius: 0.6rem;
    }



        .order_detail .order_info > div label {
            margin-right: 0.6rem;
            color: #5f5f5f;
        }

        .order_detail .order_info > div text.money {
            color: red;
            font-size: 1.3rem;
        }

            .order_detail .order_info > div text.money:before {
                content: "\e76f";
                color: red;
                font-size: 0.8rem;
                font-family: "iconfont" !important;
            }
        .order_detail .order_info > div.pay_no {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    

    .order_detail > .bottom {
        padding: 1rem 0rem 2rem 0rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        margin: 0.8rem;
    }

        .order_detail > .bottom a {
            display: block;
            width: 48%;
            color: #fff;
            border: 1px solid rgb(219 219 219);
            background-color: white;
            color: black;
            font-size: 0.8rem;
            padding: 0.7rem 0;
            line-height: 1;
            border-radius: 1rem;
            letter-spacing: 0.05rem;
            text-align: center;
        }

            .order_detail > .bottom a.refund {
                background-color: #b81b1b;
                border: 1px solid #b81b1b;
                color: white;
            }

.refund .device {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin: 0.8rem 1rem;
    font-size: 1rem;
    background-color: #f8f8f8;
    border-radius: 0.8rem;
    padding: 0.5rem 0.60rem 0.4rem 0.60rem;
    position: relative;
}

    .refund .device .left {
    }

        .refund .device .left i {
            font-size: 2rem;
        }

    .refund .device .right {
        margin-left: 0.4rem;
    }

        .refund .device .right .title {
            font-size: 0.9rem;
            line-height: 1;
        }

        .refund .device .right .address {
            font-size: 0.8rem;
            line-height: 1.8;
        }

.refund > .goods_list {
    background-color: white;
    overflow: hidden;
    margin: 0.8rem 0.8rem 0.8rem 0.8rem;
    border-radius: 0.6rem;
    padding: 0.6rem 0.6rem 0.1rem 0.6rem;
}

    .refund > .goods_list > .title {
        font-size: 1rem;
        font-weight: bold;
        padding: 0.1rem 1rem 0.2rem 0.4rem;
    }

    .refund > .goods_list .items {
        font-size: 1rem;
        line-height: 1.6rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        justify-content: center;
        align-items: flex-start;
        padding: 0.4rem 1rem;
        width: 100%;
        position: relative;
    }

        .refund > .goods_list .items > div {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

            .refund > .goods_list .items > div text {
                color: red;
                font-size: 1.3rem;
            }

                .refund > .goods_list .items > div text:before {
                    content: "\e76f";
                    color: red;
                    font-size: 0.8rem;
                    font-family: "iconfont" !important;
                }

    .refund > .goods_list .summary {
        text-align: right;
        line-height: 1;
        padding: 0.6rem 0;
    }

.refund .account {
    background-color: white;
    padding: 1.5rem 2rem 0.2rem 2rem;
}



    .refund .account .title {
        font-size: 0.9rem;
    }

    .refund .account .money {
        padding: 0.5rem 0 0 0;
        position: relative;
        border-bottom: 0.05rem solid #9e9e9e;
    }

        .refund .account .money:before {
            position: absolute;
            font-size: 2rem;
            line-height: 3rem;
            left: -1rem;
            bottom: 0.2rem;
            font-weight: normal;
        }

        .refund .account .money input {
            line-height: 3rem;
            height: 3rem;
            width: 100%;
            font-size: 2.0rem;
            margin: 0;
            padding-left: 1.6rem;
            border: none;
        }

            .refund .account .money input[placeholder] {
                font-size: 1.4rem;
            }

    .refund .account .tip {
        line-height: 1.4rem;
        padding: 0.5rem 0;
    }

        .refund .account .tip i {
            color: red;
        }
    .refund .account .content {
        margin-top: 0.4rem;
    }
        .refund .account .content textarea {
            background-color: #fffff1;
        }

/* 视频页面样式 */
.video-page {
    min-height: 100vh;
    background-color: #f5f5f5;
}

.video-page .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4rem;
    background-color: #ff6b35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 99;
}

.video-page .header .left,
.video-page .header .right {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-page .header .left i {
    font-size: 1.5rem;
    color: white;
}

.video-page .header .title {
    font-size: 1.2rem;
    color: white;
    font-weight: bold;
}

.video-page .content {
    padding-top: 5rem;
    padding-bottom: 2rem;
}

.video-page .device-info {
    margin: 0.8rem;
    background-color: white;
    border-radius: 0.8rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-page .device-info .icon {
    width: 4rem;
    height: 4rem;
    background-color: #ff6b35;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-page .device-info .icon i {
    font-size: 1.8rem;
    color: white;
}

.video-page .device-info .info {
    flex: 1;
    margin-left: 1rem;
}

.video-page .device-info .info .title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

.video-page .device-info .info .address {
    font-size: 0.9rem;
    color: #999;
    line-height: 1.4;
}

.video-page .video-list {
    margin: 0.8rem;
}

.video-page .video-item {
    background-color: white;
    border-radius: 0.8rem;
    padding: 1rem;
    margin-bottom: 0.8rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-page .video-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.video-page .camera-title {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}

.video-page .video-time {
    font-size: 0.9rem;
    color: #999;
}

.video-page .video-item video {
    width: 100%;
    height: auto;
    max-height: 20rem;
    border-radius: 0.4rem;
    background-color: #000;
}

.video-page .no-video {
    text-align: center;
    padding: 4rem 2rem;
}

.video-page .no-video i {
    font-size: 4rem;
    color: #ccc;
    margin-bottom: 1rem;
}

.video-page .no-video p {
    font-size: 1rem;
    color: #999;
}

.video-page .order-info {
    margin: 0.8rem;
    background-color: white;
    border-radius: 0.8rem;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-page .order-info h3 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #eee;
}

.video-page .order-info .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f5f5f5;
}

.video-page .order-info .info-item:last-child {
    border-bottom: none;
}

.video-page .order-info .info-item label {
    font-size: 0.95rem;
    color: #999;
}

.video-page .order-info .info-item span {
    font-size: 0.95rem;
    color: #333;
    text-align: right;
    flex: 1;
    margin-left: 1rem;
}

.video-page .order-info .info-item .money {
    color: #ff6b35;
    font-weight: bold;
}

.video-page .order-info .info-item .money i {
    font-size: 0.9rem;
    margin-right: 0.2rem;
}

.device-index .top-bg {
    background: #ffffff;
    padding-top: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.device-index .device-card {
    margin: 0 0.6rem;
    background: #f8f9fa;
    border-radius: 0.7rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: none;
}

    .device-index .device-card .icon {
        width: 2.6rem;
        height: 2.6rem;
        background: #e6f0ff;
        border-radius: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.6rem;
    }

        .device-index .device-card .icon i {
            font-size: 1.3rem;
            color: #2666de;
        }

    .device-index .device-card .info {
        flex: 1;
    }

        .device-index .device-card .info .sn {
            font-size: 0.95rem;
            color: #333;
            font-weight: 500;
            line-height: 1.3;
        }

        .device-index .device-card .info .address {
            font-size: 0.75rem;
            color: #999;
            line-height: 1.3;
        }

    .device-index .device-card .status {
        padding: 0.2rem 0.5rem;
        border-radius: 0.8rem;
        font-size: 0.65rem;
        color: white;
    }

        .device-index .device-card .status.online {
            background: #4caf50;
        }

        .device-index .device-card .status.offline {
            background: #f44336;
        }

        .device-index .device-card .status.maintenance {
            background: #ff9800;
        }

.device-index .user-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3.0rem;
    position: relative;
    z-index: 10;
    padding-bottom: 0.5rem;
}

    .device-index .user-section .avatar {
        width: 5rem;
        height: 5rem;
        background: white;
        border-radius: 50%;
        border: 3px solid white;
        box-shadow: 0 3px 10px rgba(0,0,0,0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url(/content/images/logo.png);
        background-size: cover;
        background-position: center;
    }

        .device-index .user-section .avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

    .device-index .user-section .name {
        font-size: 0.95rem;
        color: #333;
        margin-top: 0.5rem;
        font-weight: 500;
    }

.device-index .open-door-btn {
    margin: 1.8rem 1rem 1.2rem 1rem;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.35);
    transition: transform 0.2s;
}

    .device-index .open-door-btn:active {
        transform: scale(0.98);
    }

    .device-index .open-door-btn.disabled {
        background: #d9d9d9;
        box-shadow: none;
        pointer-events: none;
    }

    .device-index .open-door-btn.pending {
        background: linear-gradient(135deg, #e55a2b 0%, #e0851a 100%);
        box-shadow: 0 4px 15px rgba(255, 107, 53, 0.35);
        animation: pulse-pending 1.5s infinite;
        cursor: default;
        pointer-events: none;
    }

    @keyframes pulse-pending {
        0%, 100% {
            box-shadow: 0 4px 15px rgba(255, 107, 53, 0.35);
        }
        50% {
            box-shadow: 0 4px 25px rgba(255, 107, 53, 0.6);
        }
    }

    .device-index .open-door-btn.pending .icon-wrap {
        background: rgba(255, 255, 255, 0.2);
    }

    .device-index .open-door-btn.pending .icon-wrap i {
        color: #fff;
        animation: rotate-icon 1.5s linear infinite;
    }

    @keyframes rotate-icon {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .device-index .open-door-btn.pending .text-wrap .title,
    .device-index .open-door-btn.pending .text-wrap .tips {
        color: #fff;
    }

    .device-index .open-door-btn .icon-wrap {
        width: 4.2rem;
        height: 4.2rem;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.8rem;
    }

    .device-index .open-door-btn.disabled .icon-wrap {
        background: rgba(0, 0, 0, 0.1);
    }

    .device-index .open-door-btn .icon-wrap i {
        font-size: 2.2rem;
        color: white;
    }

    .device-index .open-door-btn.disabled .icon-wrap i {
        color: #999;
    }

    .device-index .open-door-btn .text-wrap {
        flex: 1;
    }

        .device-index .open-door-btn .text-wrap .title {
            font-size: 1.2rem;
            color: white;
            font-weight: 600;
            line-height: 1.3;
        }

        .device-index .open-door-btn .text-wrap .tips {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.8);
            margin-top: 0.25rem;
        }

    .device-index .open-door-btn.disabled .text-wrap .title,
    .device-index .open-door-btn.disabled .text-wrap .tips {
        color: #666;
    }

.device-index .features {
    margin: 0 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .device-index .features .item {
        width: 48%;
        background: white;
        border-radius: 0.7rem;
        padding: 0.8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        margin-bottom: 0.5rem;
    }

        .device-index .features .item .icon {
            width: 2.6rem;
            height: 2.6rem;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.4rem;
        }

        .device-index .features .item:first-child .icon {
            background: #fff3e6;
        }

        .device-index .features .item:last-child .icon {
            background: #e3f2fd;
        }

        .device-index .features .item:nth-child(3) .icon {
            background: #f3e5f5;
        }

        .device-index .features .item:nth-child(4) .icon {
            background: #e0f7fa;
        }

        .device-index .features .item .icon i {
            font-size: 1.4rem;
        }

        .device-index .features .item:first-child .icon i {
            color: #ff9800;
        }

        .device-index .features .item:nth-child(2) .icon i {
            color: #2196f3;
        }

        .device-index .features .item:nth-child(3) .icon i {
            color: #9c27b0;
        }

        .device-index .features .item:nth-child(4) .icon i {
            color: #00bcd4;
        }

        .device-index .features .item .name {
            font-size: 0.9rem;
            color: #333;
            font-weight: 500;
        }

        .device-index .features .item .desc {
            font-size: 0.7rem;
            color: #999;
            margin-top: 0.15rem;
        }

.device-index .business-info {
    margin: 0.8rem 1rem;
    background: white;
    border-radius: 0.7rem;
    padding: 0.7rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .device-index .business-info .title {
        font-size: 0.9rem;
        color: #333;
        font-weight: 500;
        margin-bottom: 0.4rem;
    }

    .device-index .business-info .status {
        font-size: 0.8rem;
        color: #666;
        margin-bottom: 0.25rem;
    }

        .device-index .business-info .status .tag {
            display: inline-block;
            padding: 0.15rem 0.4rem;
            border-radius: 0.35rem;
            font-size: 0.65rem;
            margin-left: 0.25rem;
        }

            .device-index .business-info .status .tag.open {
                background: #e8f5e9;
                color: #4caf50;
            }

            .device-index .business-info .status .tag.closed {
                background: #ffebee;
                color: #f44336;
            }

    .device-index .business-info .time {
        font-size: 0.75rem;
        color: #999;
    }

    .device-index .refresh-btn {
        position: fixed;
        right: 0.8rem;
        bottom: 3rem;
        width: 3.2rem;
        height: 3.2rem;
        background-color: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        z-index: 99;
        cursor: pointer;
    }

        .device-index .refresh-btn i {
            font-size: 1.2rem;
            color: #666;
        }

        .device-index .refresh-btn:active {
            background-color: #f0f0f0;
            transform: scale(0.95);
        }

.home-index {
    min-height: 100vh;
    background: linear-gradient(180deg, #f5f7fa 0%, #e4e8ec 100%);
    position: relative;
    overflow: hidden;
}

.home-index::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 180%;
    height: 100%;
    background: radial-gradient(ellipse at 80% 20%, rgba(91,141,239,0.08) 0%, transparent 50%);
    pointer-events: none;
}

.home-index::after {
    content: '';
    position: absolute;
    top: -15%;
    left: -10%;
    width: 140%;
    height: 60%;
    background: radial-gradient(ellipse at 30% 30%, rgba(124,92,191,0.06) 0%, transparent 60%);
    pointer-events: none;
}

.home-index .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.6rem 0.5rem 0.6rem;
    background: white;
    position: relative;
    z-index: 1;
}

    .home-index .header .logo {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(91,141,239,0.1) 0%, rgba(124,92,191,0.1) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
    }

        .home-index .header .logo img {
            width: 80%;
            height: 80%;
            object-fit: contain;
        }

    .home-index .header .info {
        flex: 1;
        margin-left: 0.8rem;
    }

        .home-index .header .info .title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
        }

    .home-index .header .login-btn {
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        color: white;
        padding: 0.4rem 1rem;
        border-radius: 1.5rem;
        font-size: 0.8rem;
        font-weight: 500;
        flex-shrink: 0;
    }

    .home-index .header .user-info {
        display: flex;
        align-items: center;
    }

        .home-index .header .user-info .avatar {
            width: 2.2rem;
            height: 2.2rem;
            border-radius: 50%;
            background: #f0f0f0;
            border: 2px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.4rem;
        }

            .home-index .header .user-info .avatar i {
                font-size: 1rem;
                color: #666;
            }

        .home-index .header .user-info .name {
            font-size: 0.8rem;
            color: #333;
            font-weight: 500;
        }

.home-index .banner {
    margin: 1rem 0.6rem;
    background: #f8f9fa;
    border-radius: 0.7rem;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .home-index .banner .title {
        font-size: 1rem;
        color: #333;
        font-weight: 600;
        margin-bottom: 0.2rem;
    }

    .home-index .banner .desc {
        font-size: 0.75rem;
        color: #999;
        margin-bottom: 0.6rem;
    }

    .home-index .banner .scan-btn {
        width: 100%;
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        border-radius: 0.7rem;
        padding: 0.7rem;
        text-align: center;
        color: white;
        font-size: 0.9rem;
        font-weight: 500;
        box-shadow: 0 3px 10px rgba(255, 107, 53, 0.3);
    }

        .home-index .banner .scan-btn:active {
            transform: scale(0.98);
        }

.home-index .features {
    padding: 0 0.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .home-index .features .item {
        width: 48%;
        background: white;
        border-radius: 0.8rem;
        padding: 1rem;
        margin-bottom: 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

        .home-index .features .item .icon {
            width: 3rem;
            height: 3rem;
            border-radius: 0.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.5rem;
        }

        .home-index .features .item:nth-child(1) .icon {
            background: #e3f2fd;
        }

        .home-index .features .item:nth-child(2) .icon {
            background: #fff3e6;
        }

        .home-index .features .item:nth-child(3) .icon {
            background: #e8f5e9;
        }

        .home-index .features .item:nth-child(4) .icon {
            background: #fce4ec;
        }

        .home-index .features .item:nth-child(5) .icon {
            background: #e3f2fd;
        }

        .home-index .features .item:nth-child(6) .icon {
            background: #e8f5e9;
        }

        .home-index .features .item .icon i {
            font-size: 1.5rem;
        }

        .home-index .features .item:nth-child(1) .icon i {
            color: #2196f3;
        }

        .home-index .features .item:nth-child(2) .icon i {
            color: #ff9800;
        }

        .home-index .features .item:nth-child(3) .icon i {
            color: #4caf50;
        }

        .home-index .features .item:nth-child(4) .icon i {
            color: #e91e63;
        }

        .home-index .features .item:nth-child(5) .icon i {
            color: #9c27b0;
        }

        .home-index .features .item:nth-child(6) .icon i {
            color: #00bcd4;
        }

        .home-index .features .item .name {
            font-size: 0.9rem;
            color: #333;
            font-weight: 500;
        }

        .home-index .features .item .desc {
            font-size: 0.7rem;
            color: #999;
            margin-top: 0.2rem;
        }

    .home-index .tips {
        margin: 1rem 0.6rem;
        background: #fff3e6;
        border-radius: 0.6rem;
        padding: 0.8rem;
        display: flex;
        align-items: center;
    }

    .home-index .tips .icon {
        width: 1.8rem;
        height: 1.8rem;
        background: #ff9800;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.6rem;
        flex-shrink: 0;
    }

        .home-index .tips .icon i {
            font-size: 0.9rem;
            color: white;
        }

    .home-index .tips .content {
        font-size: 0.75rem;
        color: #666;
        line-height: 1.4;
    }

.list-page.order.service .boxs .box .title .right span {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
}

.list-page.order.service .boxs .box .title .right .status-pending {
    background: #fff3e0;
    color: #ff9800;
}

.list-page.order.service .boxs .box .title .right .status-processing {
    background: #e3f2fd;
    color: #2196f3;
}

.list-page.order.service .boxs .box .title .right .status-completed {
    background: #e8f5e9;
    color: #4caf50;
}

.list-page.order.service .boxs .box .title .right .status-canceled {
    background: #f5f5f5;
    color: #999;
}

.list-page.order.service .boxs .box .items {
    padding: 0.4rem 1rem;
    background: #f9f9f9;
}

.list-page.order.service .boxs .box .items > div {
    font-size: 0.8rem;
    color: #333;
    line-height: 1.4;
}

.article-detail {
    min-height: 100vh;
    background: #f5f5f5;
}

    .article-detail .header {
        background: white;
        padding: 0.8rem 0.6rem;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        position: sticky;
        top: 0;
        z-index: 100;
    }

        .article-detail .header .back-btn {
            width: 2.2rem;
            height: 2.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f5f5;
            border-radius: 50%;
            margin-right: 0.6rem;
        }

            .article-detail .header .back-btn i {
                font-size: 1rem;
                color: #333;
            }

        .article-detail .header .title {
            flex: 1;
            font-size: 0.95rem;
            font-weight: 600;
            color: #333;
            text-align: center;
            margin-right: 2.8rem;
        }

    .article-detail .content {
        padding: 1rem 0.6rem;
    }

    .article-detail .article-card {
        background: white;
        border-radius: 0.8rem;
        padding: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

        .article-detail .article-card .article-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            line-height: 1.4;
            margin-bottom: 0.8rem;
        }

        .article-detail .article-card .article-meta {
            display: flex;
            align-items: center;
            font-size: 0.7rem;
            color: #999;
            margin-bottom: 1rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px solid #f5f5f5;
        }

            .article-detail .article-card .article-meta .author {
                margin-right: 1rem;
            }

            .article-detail .article-card .article-meta .time {
                margin-right: 1rem;
            }

            .article-detail .article-card .article-meta .source {
                color: #ff6b35;
            }

        .article-detail .article-card .article-body {
            font-size: 0.85rem;
            color: #333;
            line-height: 1.8;
        }

            .article-detail .article-card .article-body img {
                max-width: 100%;
                height: auto;
                margin: 0.5rem 0;
                border-radius: 0.4rem;
            }

            .article-detail .article-card .article-body p {
                margin-bottom: 0.8rem;
            }

.device-list .header {
    background: #ffffff;
    padding: 0.8rem 0.6rem 0.5rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
}

    .device-list .header .back {
        width: 2.2rem;
        height: 2.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.5rem;
    }

        .device-list .header .back i {
            font-size: 1.3rem;
            color: #333;
        }

    .device-list .header .title {
        flex: 1;
        font-size: 0.95rem;
        color: #333;
        font-weight: 600;
    }

    .device-list .header .login-btn {
        background: #e6f0ff;
        border-radius: 1.2rem;
        padding: 0.3rem 0.8rem;
        font-size: 0.8rem;
        color: #2666de;
    }

    .device-list .header .user-info {
        display: flex;
        align-items: center;
    }

        .device-list .header .user-info .avatar {
            width: 2.2rem;
            height: 2.2rem;
            border-radius: 50%;
            background: #f0f0f0;
            border: 2px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.4rem;
        }

            .device-list .header .user-info .avatar i {
                font-size: 1rem;
                color: #666;
            }

        .device-list .header .user-info .name {
            font-size: 0.8rem;
            color: #333;
            font-weight: 500;
        }

.device-list .search-bar {
    padding: 0.3rem 0.6rem;
    background: #f8f9fa;
}

    .device-list .search-bar .input-wrap {
        display: flex;
        align-items: center;
        background: white;
        border-radius: 0.5rem;
        padding: 0.35rem 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

        .device-list .search-bar .input-wrap i {
            font-size: 0.9rem;
            color: #999;
            margin-right: 0.4rem;
        }

        .device-list .search-bar .input-wrap input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 0.85rem;
            color: #333;
            background: transparent;
            padding: 0 15px;
            margin-bottom: 0;
        }

            .device-list .search-bar .input-wrap input::placeholder {
                color: #999;
            }

.device-list .location-info {
    padding: 0.5rem 0.6rem;
    background: white;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: #666;
}

    .device-list .location-info i {
        font-size: 0.9rem;
        color: #ff6b35;
        margin-right: 0.3rem;
    }

    .device-list .location-info .text {
        flex: 1;
    }

    .device-list .location-info .refresh {
        color: #2666de;
        font-size: 0.75rem;
    }

.device-list .device-items {
    padding: 0 0.6rem;
}

    .device-list .device-items .item {
        background: white;
        border-radius: 0.7rem;
        padding: 0.7rem;
        margin-bottom: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
    }

        .device-list .device-items .item .top {
            display: flex;
            align-items: center;
            margin-bottom: 0.4rem;
        }

        .device-list .device-items .item .icon {
            width: 2.6rem;
            height: 2.6rem;
            background: #e6f0ff;
            border-radius: 0.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.6rem;
        }

            .device-list .device-items .item .icon i {
                font-size: 1.3rem;
                color: #2666de;
            }

        .device-list .device-items .item .info {
            flex: 1;
        }

            .device-list .device-items .item .info .sn {
                font-size: 0.9rem;
                color: #333;
                font-weight: 500;
                line-height: 1.3;
            }

            .device-list .device-items .item .info .address {
                font-size: 0.75rem;
                color: #999;
                line-height: 1.3;
            }

        .device-list .device-items .item .status {
            padding: 0.2rem 0.5rem;
            border-radius: 0.8rem;
            font-size: 0.65rem;
            color: white;
        }

            .device-list .device-items .item .status.online {
                background: #4caf50;
            }

            .device-list .device-items .item .status.offline {
                background: #f44336;
            }

            .device-list .device-items .item .status.maintenance {
                background: #ff9800;
            }

        .device-list .device-items .item .bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 0.4rem;
            border-top: 1px solid #f5f5f5;
        }

            .device-list .device-items .item .bottom .business {
                font-size: 0.7rem;
                color: #999;
            }

                .device-list .device-items .item .bottom .business .tag {
                    display: inline-block;
                    padding: 0.1rem 0.3rem;
                    border-radius: 0.3rem;
                    font-size: 0.6rem;
                    margin-left: 0.3rem;
                }

                    .device-list .device-items .item .bottom .business .tag.open {
                        background: #e8f5e9;
                        color: #4caf50;
                    }

                    .device-list .device-items .item .bottom .business .tag.closed {
                        background: #ffebee;
                        color: #f44336;
                    }

            .device-list .device-items .item .bottom .distance {
                font-size: 0.7rem;
                color: #666;
            }

.device-list .loading {
    text-align: center;
    padding: 1rem;
    color: #999;
    font-size: 0.8rem;
}

    .device-list .loading i {
        margin-right: 0.3rem;
    }

.device-list .empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #999;
}

.user-center {
    background: linear-gradient(180deg, #f5f7fa 0%, #e4e8ec 100%);
}

    .user-center .header {
        background: linear-gradient(135deg, #5b8def 0%, #7c5cbf 50%, #c061c6 100%);
        padding: 3rem 1rem 4rem;
        color: #ffffff;
        position: relative;
        overflow: hidden;
    }

        .user-center .header::before {
            content: '';
            position: absolute;
            top: -40%;
            right: -15%;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, rgba(255,255,255,0.22) 0%, transparent 70%);
            border-radius: 50%;
        }

        .user-center .header::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 80%;
            height: 80%;
            background: radial-gradient(ellipse at center, rgba(255,255,255,0.12) 0%, transparent 60%);
            border-radius: 50%;
        }

        .user-center .header .user-info {
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .user-center .header .avatar-wrapper {
            position: relative;
            margin-right: 1.3rem;
        }

        .user-center .header .avatar {
            width: 5.5rem;
            height: 5.5rem;
            border-radius: 50%;
            background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
            border: 4px solid rgba(255,255,255,0.6);
            box-shadow: 0 8px 30px rgba(0,0,0,0.2), inset 0 2px 4px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
        }

            .user-center .header .avatar::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%);
                pointer-events: none;
            }

            .user-center .header .avatar:hover {
                transform: scale(1.03);
                box-shadow: 0 10px 35px rgba(0,0,0,0.25);
            }

            .user-center .header .avatar img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .user-center .header .avatar-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #e8e8e8 0%, #d5d5d5 100%);
        }

            .user-center .header .avatar-placeholder i {
                font-size: 2.5rem;
                color: #999;
                opacity: 0.7;
            }

        .user-center .header .vip-badge {
            position: absolute;
            bottom: -3px;
            right: -3px;
            background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
            color: #8b4513;
            font-size: 0.55rem;
            padding: 0.2rem 0.5rem;
            border-radius: 1.5rem;
            font-weight: 600;
            box-shadow: 0 3px 12px rgba(255,215,0,0.5);
            border: 2px solid rgba(255,255,255,0.8);
        }

        .user-center .header .user-detail {
            flex: 1;
            min-width: 0;
        }

        .user-center .header .user-name {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 0.4rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

            .user-center .header .user-name .gender-icon {
                font-size: 0.9rem;
                opacity: 0.9;
            }

        .user-center .header .user-mobile {
            font-size: 0.8rem;
            opacity: 0.9;
            letter-spacing: 1px;
            margin-bottom: 0.3rem;
        }

        .user-center .header .user-level {
            display: inline-block;
            padding: 0.2rem 0.6rem;
            background: rgba(255,255,255,0.22);
            border-radius: 1.5rem;
            font-size: 0.65rem;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.3);
        }

    .user-center .order-section {
        background: #ffffff;
        margin: -2.5rem 0.6rem 0.8rem;
        border-radius: 1rem;
        padding: 1.2rem 1rem;
        box-shadow: 0 6px 30px rgba(0,0,0,0.08);
        position: relative;
        overflow: hidden;
    }

        .user-center .order-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #5b8def 0%, #7c5cbf 50%, #c061c6 100%);
            border-radius: 1rem 1rem 0 0;
        }

    .user-center .order-title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.2rem;
    }

    .user-center .order-title {
        font-size: 0.95rem;
        color: #2c3e50;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .user-center .order-title::before {
            content: '';
            width: 4px;
            height: 0.9rem;
            background: linear-gradient(180deg, #5b8def 0%, #7c5cbf 100%);
            border-radius: 2px;
        }

    .user-center .order-more {
        font-size: 0.72rem;
        color: #888;
        transition: color 0.2s ease;
        padding: 0.3rem 0.6rem;
        border-radius: 1rem;
    }

        .user-center .order-more:active {
            color: #5b8def;
            background: #f0f4f8;
        }

    .user-center .order-list {
        display: flex;
        justify-content: space-around;
    }

    .user-center .order-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        padding: 0.6rem 0.4rem;
        border-radius: 0.8rem;
        transition: all 0.25s ease;
        cursor: pointer;
        position: relative;
    }

        .user-center .order-item:active {
            transform: scale(0.94);
            background: #f8fafc;
        }

        .user-center .order-item .order-icon-wrapper {
            position: relative;
            margin-bottom: 0.55rem;
        }

        .user-center .order-item .order-icon {
            width: 3.1rem;
            height: 3.1rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            box-shadow: 0 3px 12px rgba(0,0,0,0.06);
        }

        .user-center .order-item:active .order-icon {
            transform: scale(0.88);
            box-shadow: 0 1px 6px rgba(0,0,0,0.08);
        }

            .user-center .order-item .order-icon i {
                font-size: 1.45rem;
            }

        .user-center .order-item .badge {
            position: absolute;
            top: -5px;
            right: -5px;
            min-width: 1.4rem;
            height: 1.4rem;
            background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
            color: #fff;
            font-size: 0.55rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 0.4rem;
            box-shadow: 0 3px 12px rgba(255,71,87,0.5);
            font-weight: 600;
            border: 2px solid #ffffff;
        }

        .user-center .order-item .order-count {
            font-size: 1.05rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 0.15rem;
        }

        .user-center .order-item .order-name {
            font-size: 0.7rem;
            color: #8898aa;
        }

    .user-center .menu-section {
        background: #ffffff;
        margin: 0 0.6rem 0.8rem;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 3px 20px rgba(0,0,0,0.05);
    }

    .user-center .menu-item {
        display: flex;
        align-items: center;
        padding: 1.1rem 1rem;
        border-bottom: 1px solid #f0f4f8;
        transition: all 0.2s ease;
        position: relative;
    }

        .user-center .menu-item:last-child {
            border-bottom: none;
        }

        .user-center .menu-item:active {
            background: #fafbfc;
        }

        .user-center .menu-item::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, #5b8def 0%, #7c5cbf 100%);
            opacity: 0;
            transition: opacity 0.2s ease;
            border-radius: 0 2px 2px 0;
        }

        .user-center .menu-item:active::after {
            opacity: 1;
        }

        .user-center .menu-item .menu-icon {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.9rem;
            flex-shrink: 0;
            transition: transform 0.2s ease;
            box-shadow: 0 3px 10px rgba(0,0,0,0.06);
        }

        .user-center .menu-item:active .menu-icon {
            transform: scale(0.94);
        }

            .user-center .menu-item .menu-icon i {
                font-size: 1.25rem;
            }

        .user-center .menu-item .menu-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .user-center .menu-item .menu-text {
            font-size: 0.92rem;
            color: #2c3e50;
            font-weight: 500;
        }

        .user-center .menu-item .menu-desc {
            font-size: 0.68rem;
            color: #a0aec0;
            margin-top: 0.18rem;
        }

        .user-center .menu-item .menu-arrow {
            width: 1rem;
            height: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease;
        }

        .user-center .menu-item:active .menu-arrow {
            transform: translateX(4px);
        }

            .user-center .menu-item .menu-arrow i {
                font-size: 1.9rem;
                color: #cbd5e0;
            }

    .user-center .logout-btn {
        margin: 0.6rem;
        margin-bottom: 2rem;
        padding: 0.95rem;
        background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
        border: none;
        border-radius: 0.8rem;
        text-align: center;
        font-size: 0.92rem;
        color: #ffffff;
        font-weight: 500;
        box-shadow: 0 4px 15px rgba(255,71,87,0.4);
        transition: all 0.25s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

        .user-center .logout-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
        }

        .user-center .logout-btn:active {
            transform: scale(0.98);
            background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
            box-shadow: 0 2px 8px rgba(255,71,87,0.3);
        }

        .user-center .logout-btn i {
            font-size: 1.6rem;
            margin-top: -0.15rem;
        }

    .user-center .order-item:nth-child(1) .order-icon { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); }
    .user-center .order-item:nth-child(1) .order-icon i { color: #fb923c; }
    .user-center .order-item:nth-child(2) .order-icon { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }
    .user-center .order-item:nth-child(2) .order-icon i { color: #3b82f6; }
    .user-center .order-item:nth-child(3) .order-icon { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
    .user-center .order-item:nth-child(3) .order-icon i { color: #22c55e; }
    .user-center .order-item:nth-child(4) .order-icon { background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%); }
    .user-center .order-item:nth-child(4) .order-icon i { color: #ec4899; }
    .user-center .menu-item:nth-child(1) .menu-icon { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }
    .user-center .menu-item:nth-child(1) .menu-icon i { color: #3b82f6; }
    .user-center .menu-item:nth-child(2) .menu-icon { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); }
    .user-center .menu-item:nth-child(2) .menu-icon i { color: #fb923c; }
    .user-center .menu-item:nth-child(3) .menu-icon { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
    .user-center .menu-item:nth-child(3) .menu-icon i { color: #22c55e; }
    .user-center .menu-item:nth-child(4) .menu-icon { background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%); }
    .user-center .menu-item:nth-child(4) .menu-icon i { color: #ec4899; }

.person-password {
    min-height: 100vh;
    background: #f5f5f5;
}

    .person-password .header {
        background: #ffffff;
        padding: 0.8rem 0.6rem 0.5rem;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
    }

        .person-password .header .back {
            width: 2.2rem;
            height: 2.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.5rem;
        }

            .person-password .header .back i {
                font-size: 1.3rem;
                color: #333;
            }

        .person-password .header .title {
            flex: 1;
            font-size: 0.95rem;
            color: #333;
            font-weight: 600;
            text-align: center;
        }

        .person-password .header .placeholder {
            width: 2.2rem;
        }

    .person-password .form-wrapper {
        padding: 0.6rem;
    }

    .person-password .form-card {
        background: #ffffff;
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .person-password .form-item {
        display: flex;
        align-items: center;
        padding: 0.75rem 0.6rem;
        border-bottom: 1px solid #f5f5f5;
    }

        .person-password .form-item:last-child {
            border-bottom: none;
        }

        .person-password .form-item .label {
            width: 3.5rem;
            font-size: 0.8rem;
            color: #666;
            flex-shrink: 0;
        }

        .person-password .form-item input {
            flex: 1;
            font-size: 0.85rem;
            color: #333;
            border: none;
            outline: none;
            background: transparent;
        }

            .person-password .form-item input::placeholder {
                color: #ccc;
            }

    .person-password .submit-area {
        padding: 0.6rem;
        padding-bottom: 3rem;
    }

    .person-password .submit-btn {
        width: 100%;
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        color: #ffffff;
        border: none;
        border-radius: 0.5rem;
        padding: 0.8rem;
        font-size: 0.9rem;
        font-weight: 500;
        box-shadow: 0 3px 10px rgba(255, 107, 53, 0.3);
        transition: transform 0.2s;
    }

        .person-password .submit-btn:active {
            transform: scale(0.98);
        }

.order-refund {
    min-height: 100vh;
    background: #f5f5f5;
}

    .order-refund .header {
        background: #ffffff;
        padding: 0.8rem 0.6rem 0.5rem;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
    }

        .order-refund .header .back {
            width: 2.2rem;
            height: 2.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.5rem;
        }

            .order-refund .header .back i {
                font-size: 1.3rem;
                color: #333;
            }

        .order-refund .header .title {
            flex: 1;
            font-size: 0.95rem;
            color: #333;
            font-weight: 600;
            text-align: center;
        }

        .order-refund .header .placeholder {
            width: 2.2rem;
        }

    .order-refund .section {
        background: #ffffff;
        margin: 0.6rem;
        border-radius: 0.5rem;
        overflow: hidden;
    }

        .order-refund .section .section-title {
            padding: 0.7rem;
            font-size: 0.85rem;
            color: #333;
            font-weight: 600;
            border-bottom: 1px solid #f5f5f5;
        }

    .order-refund .device-card {
        display: flex;
        align-items: center;
        padding: 0.7rem;
    }

        .order-refund .device-card .icon {
            width: 3rem;
            height: 3rem;
            background: #f0f0f0;
            border-radius: 0.4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.7rem;
        }

            .order-refund .device-card .icon i {
                font-size: 1.3rem;
                color: #666;
            }

        .order-refund .device-card .info {
            flex: 1;
        }

        .order-refund .device-card .device-name {
            font-size: 0.85rem;
            color: #333;
            font-weight: 500;
            margin-bottom: 0.2rem;
        }

        .order-refund .device-card .device-address {
            font-size: 0.7rem;
            color: #999;
        }

    .order-refund .goods-list {
        padding: 0.7rem;
    }

    .order-refund .goods-item {
        display: flex;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f5f5f5;
    }

        .order-refund .goods-item:last-child {
            border-bottom: none;
        }

        .order-refund .goods-item .goods-info {
            flex: 1;
        }

        .order-refund .goods-item .goods-name {
            font-size: 0.85rem;
            color: #333;
            margin-bottom: 0.3rem;
        }

        .order-refund .goods-item .goods-spec {
            font-size: 0.7rem;
            color: #999;
        }

        .order-refund .goods-item .goods-price {
            font-size: 0.85rem;
            color: #ff6b35;
            font-weight: 500;
        }

    .order-refund .amount-section {
        padding: 0.7rem;
        background: #f9f9f9;
    }

    .order-refund .amount-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.3rem;
    }

        .order-refund .amount-row:last-child {
            margin-bottom: 0;
        }

        .order-refund .amount-row label {
            font-size: 0.8rem;
            color: #666;
        }

        .order-refund .amount-row span {
            font-size: 0.8rem;
            color: #333;
        }

        .order-refund .amount-row .total {
            font-size: 0.95rem;
            color: #ff6b35;
            font-weight: 600;
        }

    .order-refund .reason-section {
        padding: 0.7rem;
    }

    .order-refund .reason-label {
        font-size: 0.8rem;
        color: #666;
        margin-bottom: 0.4rem;
        display: block;
    }

    .order-refund .reason-textarea {
        width: 100%;
        height: 5rem;
        border: 1px solid #e0e0e0;
        border-radius: 0.4rem;
        padding: 0.5rem;
        font-size: 0.85rem;
        color: #333;
        resize: none;
        outline: none;
        box-sizing: border-box;
    }

        .order-refund .reason-textarea::placeholder {
            color: #ccc;
        }

    .order-refund .submit-area {
        padding: 0.6rem;
        padding-bottom: 3rem;
    }

    .order-refund .submit-btn {
        width: 100%;
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        color: #ffffff;
        border: none;
        border-radius: 0.5rem;
        padding: 0.8rem;
        font-size: 0.9rem;
        font-weight: 500;
        box-shadow: 0 3px 10px rgba(255, 107, 53, 0.3);
        transition: transform 0.2s;
    }

        .order-refund .submit-btn:active {
            transform: scale(0.98);
        }

        .order-refund .submit-btn.disabled {
            background: #d9d9d9;
            box-shadow: none;
        }

.order-detail {
    min-height: 100vh;
    background: #f5f5f5;
}

    .order-detail .header {
        background: #ffffff;
        padding: 0.8rem 0.6rem 0.5rem;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
    }

        .order-detail .header .back {
            width: 2.2rem;
            height: 2.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.5rem;
        }

            .order-detail .header .back i {
                font-size: 1.3rem;
                color: #333;
            }

        .order-detail .header .title {
            flex: 1;
            font-size: 0.95rem;
            color: #333;
            font-weight: 600;
            text-align: center;
        }

        .order-detail .header .placeholder {
            width: 2.2rem;
        }

    .order-detail .status-section {
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        padding: 1rem 0.8rem;
        display: flex;
        align-items: center;
        color: #ffffff;
    }

        .order-detail .status-section .icon {
            width: 3rem;
            height: 3rem;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.8rem;
        }

            .order-detail .status-section .icon i {
                font-size: 1.5rem;
            }

        .order-detail .status-section .text {
            flex: 1;
        }

        .order-detail .status-section .status-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.2rem;
        }

        .order-detail .status-section .status-time {
            font-size: 0.7rem;
            opacity: 0.9;
        }

    .order-detail .device-section {
        background: #ffffff;
        margin: 0.6rem;
        padding: 0.7rem;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
    }

        .order-detail .device-section .icon {
            width: 3rem;
            height: 3rem;
            background: #f0f0f0;
            border-radius: 0.4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.7rem;
        }

            .order-detail .device-section .icon i {
                font-size: 1.3rem;
                color: #666;
            }

        .order-detail .device-section .info {
            flex: 1;
        }

        .order-detail .device-section .device-name {
            font-size: 0.85rem;
            color: #333;
            font-weight: 500;
            margin-bottom: 0.2rem;
        }

        .order-detail .device-section .device-address {
            font-size: 0.7rem;
            color: #999;
        }

    .order-detail .goods-section {
        background: #ffffff;
        margin: 0.6rem;
        border-radius: 0.5rem;
        overflow: hidden;
    }

        .order-detail .goods-section .section-title {
            padding: 0.7rem;
            font-size: 0.85rem;
            color: #333;
            font-weight: 600;
            border-bottom: 1px solid #f5f5f5;
        }

    .order-detail .goods-list {
        padding: 0.7rem;
    }

    .order-detail .goods-item {
        display: flex;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f5f5f5;
    }

        .order-detail .goods-item:last-child {
            border-bottom: none;
        }

        .order-detail .goods-item .goods-info {
            flex: 1;
        }

        .order-detail .goods-item .goods-name {
            font-size: 0.85rem;
            color: #333;
            margin-bottom: 0.3rem;
        }

        .order-detail .goods-item .goods-spec {
            font-size: 0.7rem;
            color: #999;
        }

        .order-detail .goods-item .goods-price {
            font-size: 0.85rem;
            color: #ff6b35;
            font-weight: 500;
        }

        .order-detail .goods-item .goods-count {
            font-size: 0.8rem;
            color: #999;
            margin-left: auto;
            margin-right: 0.5rem;
        }

    .order-detail .goods-empty {
        text-align: center;
        color: #bbb;
        font-size: 0.85rem;
        padding: 2rem 0;
    }

    .order-detail .goods-total {
        padding: 0.7rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-top: 1px solid #f5f5f5;
        background: #fafafa;
    }

        .order-detail .goods-total label {
            font-size: 0.8rem;
            color: #666;
        }

        .order-detail .goods-total .total-money {
            font-size: 0.95rem;
            color: #ff6b35;
            font-weight: 600;
            margin-left: 0.3rem;
        }

    .order-detail .amount-section {
        background: #ffffff;
        margin: 0.6rem;
        border-radius: 0.5rem;
        padding: 0.7rem;
    }

    .order-detail .amount-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.3rem;
    }

        .order-detail .amount-row:last-child {
            margin-bottom: 0;
        }

        .order-detail .amount-row label {
            font-size: 0.8rem;
            color: #666;
        }

        .order-detail .amount-row span {
            font-size: 0.8rem;
            color: #333;
        }

        .order-detail .amount-row .total {
            font-size: 0.95rem;
            color: #ff6b35;
            font-weight: 600;
        }

    .order-detail .action-section {
        padding: 0.6rem;
        padding-bottom: 3rem;
    }

    .order-detail .action-btn {
        width: 100%;
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        color: #ffffff;
        border: none;
        border-radius: 0.5rem;
        padding: 0.8rem;
        font-size: 0.9rem;
        font-weight: 500;
        box-shadow: 0 3px 10px rgba(255, 107, 53, 0.3);
        transition: transform 0.2s;
    }

        .order-detail .action-btn:active {
            transform: scale(0.98);
        }

        .order-detail .action-btn.disabled {
            background: #d9d9d9;
            box-shadow: none;
        }

    .order-detail .info-section {
        background: #ffffff;
        margin: 0.6rem;
        border-radius: 0.5rem;
        overflow: hidden;
    }

        .order-detail .info-section .info-item {
            display: flex;
            padding: 0.65rem 0.7rem;
            border-bottom: 1px solid #f5f5f5;
        }

            .order-detail .info-section .info-item:last-child {
                border-bottom: none;
            }

            .order-detail .info-section .info-item label {
                font-size: 0.8rem;
                color: #666;
                width: 5rem;
                flex-shrink: 0;
            }

            .order-detail .info-section .info-item .value {
                font-size: 0.8rem;
                color: #333;
                flex: 1;
                word-break: break-all;
            }

                .order-detail .info-section .info-item .value.money {
                    color: #ff6b35;
                    font-weight: 500;
                }

    .order-detail .bottom-section {
        padding: 0.6rem;
        padding-bottom: 2rem;
        display: flex;
        gap: 0.6rem;
    }

        .order-detail .bottom-section .btn {
            flex: 1;
            padding: 0.8rem;
            border-radius: 0.5rem;
            font-size: 0.85rem;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: transform 0.2s;
        }

            .order-detail .bottom-section .btn:active {
                transform: scale(0.98);
            }

            .order-detail .bottom-section .btn.primary {
                background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
                color: #ffffff;
                box-shadow: 0 3px 10px rgba(255, 107, 53, 0.3);
            }

            .order-detail .bottom-section .btn.btn-outline {
                background: #ffffff;
                color: #666;
                border: 1px solid #e0e0e0;
            }

.service-detail {
    min-height: 100vh;
    background: #f5f5f5;
}

    .service-detail .header {
        background: #ffffff;
        padding: 0.8rem 0.6rem 0.5rem;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
    }

        .service-detail .header .back {
            width: 2.2rem;
            height: 2.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.5rem;
        }

            .service-detail .header .back i {
                font-size: 1.3rem;
                color: #333;
            }

        .service-detail .header .title {
            flex: 1;
            font-size: 0.95rem;
            color: #333;
            font-weight: 600;
            text-align: center;
        }

        .service-detail .header .placeholder {
            width: 2.2rem;
        }

    .service-detail .section {
        background: #ffffff;
        margin: 0.6rem;
        border-radius: 0.5rem;
        overflow: hidden;
    }

        .service-detail .section .section-title {
            padding: 0.7rem;
            font-size: 0.85rem;
            color: #333;
            font-weight: 600;
            border-bottom: 1px solid #f5f5f5;
        }

    .service-detail .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.6rem 0.7rem;
        border-bottom: 1px solid #f5f5f5;
    }

        .service-detail .info-item:last-child {
            border-bottom: none;
        }

        .service-detail .info-item label {
            font-size: 0.8rem;
            color: #666;
        }

        .service-detail .info-item span {
            font-size: 0.8rem;
            color: #333;
        }

        .service-detail .info-item .money {
            color: #ff6b35;
            font-weight: 500;
        }

    .service-detail .content-section {
        padding: 0.7rem;
    }

        .service-detail .content-section label {
            font-size: 0.8rem;
            color: #666;
            margin-bottom: 0.4rem;
            display: block;
        }

        .service-detail .content-section .content {
            font-size: 0.85rem;
            color: #333;
            line-height: 1.6;
        }

.order-video {
    min-height: 100vh;
    background: #f5f5f5;
}

    .order-video .header {
        background: #ffffff;
        padding: 0.8rem 0.6rem 0.5rem;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
    }

        .order-video .header .back {
            width: 2.2rem;
            height: 2.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.5rem;
        }

            .order-video .header .back i {
                font-size: 1.3rem;
                color: #333;
            }

        .order-video .header .title {
            flex: 1;
            font-size: 0.95rem;
            color: #333;
            font-weight: 600;
            text-align: center;
        }

        .order-video .header .placeholder {
            width: 2.2rem;
        }

    .order-video .section {
        background: #ffffff;
        margin: 0.6rem;
        border-radius: 0.5rem;
        overflow: hidden;
    }

        .order-video .section .section-title {
            padding: 0.7rem;
            font-size: 0.85rem;
            color: #333;
            font-weight: 600;
            border-bottom: 1px solid #f5f5f5;
        }

    .order-video .device-card {
        display: flex;
        align-items: center;
        padding: 0.7rem;
    }

        .order-video .device-card .icon {
            width: 3rem;
            height: 3rem;
            background: #f0f0f0;
            border-radius: 0.4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.7rem;
        }

            .order-video .device-card .icon i {
                font-size: 1.3rem;
                color: #666;
            }

        .order-video .device-card .info {
            flex: 1;
        }

        .order-video .device-card .device-name {
            font-size: 0.85rem;
            color: #333;
            font-weight: 500;
            margin-bottom: 0.2rem;
        }

        .order-video .device-card .device-address {
            font-size: 0.7rem;
            color: #999;
        }

    .order-video .video-list {
        padding: 0.7rem;
    }

    .order-video .video-item {
        padding: 0.5rem 0;
        border-bottom: 1px solid #f5f5f5;
    }

        .order-video .video-item:last-child {
            border-bottom: none;
        }

        .order-video .video-item .video-info {
            display: flex;
            align-items: center;
            margin-bottom: 0.3rem;
        }

        .order-video .video-item .video-name {
            font-size: 0.85rem;
            color: #333;
            flex: 1;
        }

        .order-video .video-item .video-time {
            font-size: 0.7rem;
            color: #999;
        }

        .order-video .video-item .video-url {
            font-size: 0.75rem;
            color: #2666de;
            word-break: break-all;
        }

    .order-video .bottom-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.6rem;
        padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
        background: linear-gradient(to top, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0,0,0,0.05);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.03);
        z-index: 100;
    }

    .order-video .bottom-actions .upload-btn {
        width: 100%;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #2666de 0%, #1a56c4 100%);
        border: none;
        border-radius: 1.25rem;
        color: #fff;
        font-size: 0.96rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(38, 102, 222, 0.35);
        overflow: hidden;
        position: relative;
    }

    .order-video .bottom-actions .upload-btn:before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
        transition: left 0.5s ease;
    }

    .order-video .bottom-actions .upload-btn:hover:before {
        left: 100%;
    }

    .order-video .bottom-actions .upload-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(38, 102, 222, 0.45);
    }

    .order-video .bottom-actions .upload-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(38, 102, 222, 0.3);
    }

    .order-video .bottom-actions .upload-btn:disabled {
        background: #ccc;
        box-shadow: none;
        cursor: not-allowed;
        opacity: 0.7;
        transform: none;
    }

    .order-video .bottom-actions .upload-btn:disabled:before {
        display: none;
    }

    .order-video .bottom-actions .upload-btn i {
            font-size: 0.9rem;
            margin-right: 0.4rem;
        }

    .order-video .refresh-btn {
        position: fixed;
        right: 0.6rem;
        bottom: 4.5rem;
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 50%;
        background: #2666de;
        color: #fff;
        border: none;
        box-shadow: 0 4px 12px rgba(38, 102, 222, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 90;
        transition: all 0.3s ease;
    }

    .order-video .refresh-btn:hover {
        background: #1a56c4;
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(38, 102, 222, 0.5);
    }

    .order-video .refresh-btn:active {
        transform: scale(0.95);
    }

    .order-video .refresh-btn:disabled {
        background: #ccc;
        box-shadow: none;
        cursor: not-allowed;
        opacity: 0.7;
    }

    .order-video .refresh-btn i {
        font-size: 1.1rem;
    }

    .order-video .refresh-btn i.rotating {
        animation: rotate 1s linear infinite;
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

.person-info {
    min-height: 100vh;
    background: #f5f5f5;
}

    .person-info .header {
        background: #ffffff;
        padding: 0.8rem 0.6rem 0.5rem;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
    }

        .person-info .header .back {
            width: 2.2rem;
            height: 2.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.5rem;
        }

            .person-info .header .back i {
                font-size: 1.3rem;
                color: #333;
            }

        .person-info .header .title {
            flex: 1;
            font-size: 0.95rem;
            color: #333;
            font-weight: 600;
            text-align: center;
        }

        .person-info .header .placeholder {
            width: 2.2rem;
        }

    .person-info .avatar-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1.5rem 0;
        background: #f5f5f5;
    }

    .person-info .avatar-wrapper {
        position: relative;
        width: 8rem;
        height: 8rem;
        border-radius: 50%;
        background: #ffffff;
        border: 2px solid #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .person-info .avatar-wrapper .avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius:50%;
        }

        .person-info .avatar-wrapper .upload-btn {
            position: absolute;
            bottom: 0.7rem;
            right: 0.0rem;
            width: 1.5rem;
            height: 1.5rem;
            background: #ff6b35;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #ffffff;
            box-shadow: 0 2px 6px rgba(255, 107, 53, 0.4);
        }

            .person-info .avatar-wrapper .upload-btn i {
                color: #ffffff;
                font-size: 0.9rem;
            }

    .person-info .form-wrapper {
        padding: 0.6rem;
        margin-top: 0.6rem;
    }

    .person-info .form-card {
        background: #ffffff;
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .person-info .form-item {
        display: flex;
        align-items: center;
        padding: 0.75rem 0.6rem;
        border-bottom: 1px solid #f5f5f5;
    }

        .person-info .form-item:last-child {
            border-bottom: none;
        }

        .person-info .form-item .label {
            width: 4rem;
            font-size: 0.85rem;
            color: #666;
            flex-shrink: 0;
            text-align: right;
            padding-right: 0.5rem;
        }

        .person-info .form-item input {
            flex: 1;
            font-size: 0.85rem;
            color: #333;
            border: none;
            outline: none;
            background: transparent;
            margin-bottom:0;
        }

            .person-info .form-item input::placeholder {
                color: #ccc;
            }

        .person-info .form-item .value {
            flex: 1;
            font-size: 0.85rem;
            color: #333;
        }

        .person-info .form-item .radio-group {
            display: flex;
            align-items: center;
        }

            .person-info .form-item .radio-group .radio-btn {
                padding: 0.35rem 1rem;
                font-size: 0.8rem;
                color: #666;
                background: #f5f5f5;
                border-radius: 1rem;
                transition: all 0.2s;
            }

                .person-info .form-item .radio-group .radio-btn:not(:first-child) {
                    margin-left: 1rem;
                }

                .person-info .form-item .radio-group .radio-btn.active {
                    background: #ff6b35;
                    color: #ffffff;
                }

    .person-info .submit-area {
        padding: 0.6rem;
        padding-bottom: 3rem;
    }

    .person-info .submit-btn {
        width: 100%;
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        color: #ffffff;
        border: none;
        border-radius: 0.5rem;
        padding: 0.8rem;
        font-size: 0.9rem;
        font-weight: 500;
        box-shadow: 0 3px 10px rgba(255, 107, 53, 0.3);
        transition: transform 0.2s;
    }

        .person-info .submit-btn:active {
            transform: scale(0.98);
        }

.home-help {
    min-height: 100vh;
    background: #f5f5f5;
}

    .home-help .header {
        background: #ffffff;
        padding: 0.8rem 0.6rem 0.5rem;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
    }

        .home-help .header .back {
            width: 2.2rem;
            height: 2.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.5rem;
        }

            .home-help .header .back i {
                font-size: 1.3rem;
                color: #333;
            }

        .home-help .header .title {
            flex: 1;
            font-size: 0.95rem;
            color: #333;
            font-weight: 600;
            text-align: center;
        }

        .home-help .header .placeholder {
            width: 2.2rem;
        }

    .home-help .catalog-wrapper {
        padding: 10px;
    }

    .home-help .catalog-card {
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
    }

        .home-help .catalog-card .catalog-item {
            padding: 14px 12px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f5f5f5;
        }

            .home-help .catalog-card .catalog-item:last-child {
                border-bottom: none;
            }

            .home-help .catalog-card .catalog-item .icon-box {
                width: 48px;
                height: 48px;
                background: #e6f0ff;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 10px;
                flex-shrink: 0;
            }

                .home-help .catalog-card .catalog-item .icon-box i {
                    font-size: 20px;
                    color: #2666de;
                }

            .home-help .catalog-card .catalog-item .text-area {
                flex: 1;
            }

            .home-help .catalog-card .catalog-item .text-area .title,
            .home-help .catalog-card .catalog-item .text-area .cat-title {
                font-size: 15px;
                color: #333;
                font-weight: 500;
            }

            .home-help .catalog-card .catalog-item .text-area .desc,
            .home-help .catalog-card .catalog-item .text-area .cat-count {
                font-size: 12px;
                color: #999;
                margin-top: 4px;
            }

            .home-help .catalog-card .catalog-item .arrow-box {
                font-size: 1.2rem;
                color: #ccc;
                flex-shrink: 0;
            }

        .home-help .catalog-card .empty-state {
            padding: 3rem 1rem;
            text-align: center;
        }

            .home-help .catalog-card .empty-state .empty-icon {
                font-size: 2.5rem;
                color: #ccc;
                margin-bottom: 0.8rem;
            }

            .home-help .catalog-card .empty-state .empty-text {
                font-size: 0.85rem;
                color: #999;
            }

    .home-help .article-wrapper {
        padding: 0.6rem;
    }

        .home-help .article-wrapper .article-card {
            background: #fff;
            border-radius: 0.6rem;
            overflow: hidden;
        }

            .home-help .article-wrapper .article-card .article-item {
                padding: 0.8rem;
                border-bottom: 1px solid #f5f5f5;
            }

                .home-help .article-wrapper .article-card .article-item:last-child {
                    border-bottom: none;
                }

                .home-help .article-wrapper .article-card .article-item .art-title {
                    font-size: 0.9rem;
                    color: #333;
                    font-weight: 500;
                    margin-bottom: 0.35rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .home-help .article-wrapper .article-card .article-item .art-desc {
                    font-size: 0.78rem;
                    color: #999;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-bottom: 0.3rem;
                }

                .home-help .article-wrapper .article-card .article-item .art-time {
                    font-size: 0.72rem;
                    color: #ccc;
                }

            .home-help .article-wrapper .article-card .empty-state {
                padding: 3rem 1rem;
                text-align: center;
            }

                .home-help .article-wrapper .article-card .empty-state .empty-icon {
                    font-size: 2.5rem;
                    color: #ccc;
                    margin-bottom: 0.8rem;
                }

                .home-help .article-wrapper .article-card .empty-state .empty-text {
                    font-size: 0.85rem;
                    color: #999;
                }

    .home-help .detail-card {
        background: #fff;
        margin: 0.6rem;
        border-radius: 0.6rem;
        padding: 0.8rem;
    }

        .home-help .detail-card .detail-title {
            font-size: 1.05rem;
            font-weight: 600;
            color: #333;
            line-height: 1.4;
            margin-bottom: 0.6rem;
        }

        .home-help .detail-card .detail-meta {
            display: flex;
            align-items: center;
            font-size: 0.72rem;
            color: #999;
            margin-bottom: 0.8rem;
            padding-bottom: 0.6rem;
            border-bottom: 1px solid #f5f5f5;
        }

            .home-help .detail-card .detail-meta .meta-author {
                margin-right: 0.8rem;
            }

            .home-help .detail-card .detail-meta .meta-time {
                flex: 1;
            }

        .home-help .detail-card .detail-content {
            font-size: 0.85rem;
            color: #333;
            line-height: 1.8;
        }

            .home-help .detail-card .detail-content img {
                max-width: 100%;
                height: auto;
                margin: 0.5rem 0;
                border-radius: 0.4rem;
            }

            .home-help .detail-card .detail-content p {
                margin-bottom: 0.6rem;
            }

    .home-help .copyright-info {
        text-align: center;
        padding: 1.5rem 0;
        color: #ccc;
        font-size: 0.65rem;
    }

        .home-help .copyright-info .copy-company {
            margin-bottom: 0.2rem;
            color: #999;
        }

        .home-help .copyright-info .copy-icp {
            color: #ccc;
        }

.order-progress {
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 3rem;
}

    .order-progress .top {
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        padding: 1.2rem 0.8rem;
        color: #ffffff;
    }

        .order-progress .top .status {
            display: flex;
            align-items: center;
            margin-bottom: 0.8rem;
        }

            .order-progress .top .status .left {
                width: 3.5rem;
                height: 3.5rem;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 0.8rem;
            }

                .order-progress .top .status .left i {
                    font-size: 1.6rem;
                }

            .order-progress .top .status .right {
                flex: 1;
            }

                .order-progress .top .status .right .title {
                    font-size: 1.1rem;
                    font-weight: 600;
                    margin-bottom: 0.25rem;
                }

                .order-progress .top .status .right .date {
                    font-size: 0.75rem;
                    opacity: 0.9;
                }

        .order-progress .top .progress-bar {
            margin-top: 0.5rem;
        }

            .order-progress .top .progress-bar .progress-track {
                height: 0.35rem;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 0.2rem;
                overflow: hidden;
            }

            .order-progress .top .progress-bar .progress-fill {
                height: 100%;
                background: #ffffff;
                border-radius: 0.2rem;
                transition: width 0.3s ease;
            }

            .order-progress .top .progress-bar .progress-text {
                font-size: 0.75rem;
                margin-top: 0.4rem;
                opacity: 0.95;
            }

    .order-progress .goods_list {
        background: #ffffff;
        margin: 0.6rem;
        border-radius: 0.5rem;
        overflow: hidden;
    }

        .order-progress .goods_list .title {
            padding: 0.7rem;
            font-size: 0.85rem;
            color: #333;
            font-weight: 600;
            border-bottom: 1px solid #f5f5f5;
        }

        .order-progress .goods_list .items {
            padding: 0.4rem 0.7rem;
        }

            .order-progress .goods_list .items .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.4rem 0;
            }

                .order-progress .goods_list .items .item .left label {
                    font-size: 0.8rem;
                    color: #333;
                }

                .order-progress .goods_list .items .item .right text {
                    font-size: 0.8rem;
                    color: #ff6b35;
                    font-weight: 500;
                }

        .order-progress .goods_list .summary {
            padding: 0.7rem;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            border-top: 1px solid #f5f5f5;
            background: #fafafa;
        }

            .order-progress .goods_list .summary label {
                font-size: 0.8rem;
                color: #666;
            }

            .order-progress .goods_list .summary text {
                font-size: 0.95rem;
                color: #ff6b35;
                font-weight: 600;
                margin-left: 0.3rem;
            }

    .order-progress .order_info {
        background: #ffffff;
        margin: 0.6rem;
        border-radius: 0.5rem;
        padding: 0.7rem;
    }

        .order-progress .order_info > div {
            display: flex;
            padding: 0.35rem 0;
            font-size: 0.8rem;
        }

            .order-progress .order_info > div label {
                color: #666;
                width: 5rem;
                flex-shrink: 0;
            }

            .order-progress .order_info > div text {
                color: #333;
                flex: 1;
                word-break: break-all;
            }

                .order-progress .order_info > div text.money {
                    color: #ff6b35;
                    font-weight: 500;
                }

            .order-progress .order_info > div .pay_no {
                word-break: break-all;
                color: #333;
            }

    .order-progress .empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4rem 2rem;
    }

        .order-progress .empty i {
            font-size: 3rem;
            color: #ccc;
            margin-bottom: 0.8rem;
        }

        .order-progress .empty .text {
            font-size: 0.9rem;
            color: #999;
        }

.order-progress .refresh-btn {
    position: fixed;
    right: 1rem;
    bottom: 2rem;
    width: 3.2rem;
    height: 3.2rem;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    transition: transform 0.2s;
}

    .order-progress .refresh-btn:active {
        transform: scale(0.92);
    }

    .order-progress .refresh-btn i {
        font-size: 1.3rem;
        color: #666;
    }

.order-progress-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 5rem;
}

    .order-progress-page .header {
        background: #ffffff;
        padding: 2.5rem 1rem 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0.6rem;
        border-bottom: 1px solid #f0f0f0;
    }

        .order-progress-page .header .status-icon {
            margin-bottom: 0.8rem;
        }

            .order-progress-page .header .status-icon .circle {
                width: 5rem;
                height: 5rem;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
                background: rgba(255, 255, 255, 0.95);
            }

                .order-progress-page .header .status-icon .circle.success i {
                    font-size: 2rem;
                    color: #67c23a;
                }

                .order-progress-page .header .status-icon .circle.processing i {
                    font-size: 2rem;
                    color: #409eff;
                }

                .order-progress-page .header .status-icon .circle.warning i {
                    font-size: 2rem;
                    color: #e6a23c;
                }

                .order-progress-page .header .status-icon .circle.fail i {
                    font-size: 2rem;
                    color: #f56c6c;
                }

        .order-progress-page .header .status-text {
            font-size: 1.2rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 0.3rem;
        }

        .order-progress-page .header .sub-text {
            font-size: 0.85rem;
            color: #999;
        }

    .order-progress-page .progress-timeline {
        background: #ffffff;
        margin: 0 0.6rem 0.6rem;
        padding: 1rem;
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

        .order-progress-page .progress-timeline .timeline-item {
            display: flex;
            position: relative;
            padding-bottom: 1.2rem;
        }

            .order-progress-page .progress-timeline .timeline-item:last-child {
                padding-bottom: 0;
            }

            .order-progress-page .progress-timeline .timeline-item .dot-wrap {
                width: 1.2rem;
                height: 1.2rem;
                flex-shrink: 0;
                margin-right: 0.8rem;
                margin-top: 0.1rem;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1;
            }

            .order-progress-page .progress-timeline .timeline-item .dot {
                width: 0.85rem;
                height: 0.85rem;
                border-radius: 50%;
                background: #d9d9d9;
                transition: all 0.3s ease;
            }

            .order-progress-page .progress-timeline .timeline-item.active .dot {
                background: #409eff;
                box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
            }

            .order-progress-page .progress-timeline .timeline-item.done .dot {
                background: #67c23a;
                box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.2);
            }

            .order-progress-page .progress-timeline .timeline-item .line {
                position: absolute;
                left: 0.58rem;
                top: 1.3rem;
                width: 0.2rem;
                bottom: 0;
                background: #d9d9d9;
                border-radius: 0.1rem;
            }

            .order-progress-page .progress-timeline .timeline-item.active .line {
                background: #409eff;
            }

            .order-progress-page .progress-timeline .timeline-item.done .line {
                background: #67c23a;
            }

            .order-progress-page .progress-timeline .timeline-item.cancelled .dot {
                background: #f56c6c;
                box-shadow: 0 0 0 3px rgba(245, 108, 108, 0.2);
            }

            .order-progress-page .progress-timeline .timeline-item.cancelled .line {
                background: #f56c6c;
            }

            .order-progress-page .progress-timeline .timeline-item.cancelled .content .title {
                color: #f56c6c;
            }

            .order-progress-page .progress-timeline .timeline-item.cancelled .content .desc {
                color: #f56c6c;
            }

            .order-progress-page .progress-timeline .timeline-item:last-child .line {
                display: none;
            }

            .order-progress-page .progress-timeline .timeline-item .content {
                flex: 1;
                padding-top: 0.1rem;
            }

                .order-progress-page .progress-timeline .timeline-item .content .title {
                    font-size: 0.88rem;
                    color: #333;
                    font-weight: 500;
                    margin-bottom: 0.15rem;
                }

                .order-progress-page .progress-timeline .timeline-item .content .desc {
                    font-size: 0.75rem;
                    color: #999;
                    line-height: 1.4;
                }

            .order-progress-page .progress-timeline .timeline-item:not(.active) .content .title {
                color: #999;
            }

            .order-progress-page .progress-timeline .timeline-item:not(.active) .content .desc {
                color: #ccc;
            }

    .order-progress-page .section-header {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.6rem;
        font-size: 0.88rem;
        color: #333;
        font-weight: 600;
    }

        .order-progress-page .section-header i {
            font-size: 0.9rem;
            color: #409eff;
            margin-right: 0.3rem;
        }

        .order-progress-page .section-header .count {
            margin-left: auto;
            font-size: 0.75rem;
            color: #999;
            font-weight: normal;
            background: #f5f5f5;
            padding: 0.15rem 0.4rem;
            border-radius: 0.3rem;
        }

    .order-progress-page .goods-card {
        background: #ffffff;
        margin: 0 0.6rem 0.6rem;
        border-radius: 0.75rem;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

        .order-progress-page .goods-card .goods-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.7rem;
            border-bottom: 1px solid #f5f5f5;
        }

            .order-progress-page .goods-card .goods-item:last-child {
                border-bottom: none;
            }

            .order-progress-page .goods-card .goods-item .item-info {
                display: flex;
                align-items: center;
                flex: 1;
                min-width: 0;
            }

            .order-progress-page .goods-card .goods-item .item-icon {
                width: 3rem;
                height: 3rem;
                background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
                border-radius: 0.6rem;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 0.5rem;
                flex-shrink: 0;
                border: 1px solid #e9ecef;
            }

                .order-progress-page .goods-card .goods-item .item-icon i {
                    font-size: 1.4rem;
                    color: #409eff;
                }

            .order-progress-page .goods-card .goods-item .item-detail {
                flex: 1;
                min-width: 0;
            }

            .order-progress-page .goods-card .goods-item .item-name {
                font-size: 0.85rem;
                color: #333;
                font-weight: 500;
                margin-bottom: 0.15rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .order-progress-page .goods-card .goods-item .item-count {
                font-size: 0.75rem;
                color: #999;
            }

            .order-progress-page .goods-card .goods-item .item-price {
                font-size: 0.95rem;
                color: #ff6b35;
                font-weight: 700;
                flex-shrink: 0;
                margin-left: 0.5rem;
            }

        .order-progress-page .goods-card .goods-summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.8rem 0.7rem;
            background: linear-gradient(135deg, #fff7f5 0%, #fff0eb 100%);
            border-top: 1px solid #ffe4db;
        }

            .order-progress-page .goods-card .goods-summary span {
                font-size: 0.88rem;
                color: #666;
                font-weight: 500;
            }

            .order-progress-page .goods-card .goods-summary .total-price {
                font-size: 1.2rem;
                color: #ff6b35;
                font-weight: 700;
            }

    .order-progress-page .order-card {
        background: #ffffff;
        margin: 0 0.6rem 0.6rem;
        border-radius: 0.75rem;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

        .order-progress-page .order-card .order-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.65rem 0.7rem;
            border-bottom: 1px solid #f5f5f5;
        }

            .order-progress-page .order-card .order-row:last-child {
                border-bottom: none;
            }

            .order-progress-page .order-card .order-row label {
                font-size: 0.82rem;
                color: #999;
                display: flex;
                align-items: center;
            }

                .order-progress-page .order-card .order-row label i {
                    font-size: 0.7rem;
                    margin-right: 0.25rem;
                }

            .order-progress-page .order-card .order-row span {
                font-size: 0.82rem;
                color: #333;
                font-weight: 400;
            }

            .order-progress-page .order-card .order-row span.amount {
                font-size: 1rem;
                color: #ff6b35;
                font-weight: 700;
            }

            .order-progress-page .order-card .order-row span.pay-no {
                font-size: 0.7rem;
                color: #999;
                font-family: monospace;
            }

    .order-progress-page .tips-section {
        margin: 0 0.6rem 0.6rem;
    }

        .order-progress-page .tips-section .tips-card {
            background: linear-gradient(135deg, #fff7e6 0%, #ffe5b4 100%);
            border-radius: 0.75rem;
            padding: 0.8rem;
            display: flex;
            align-items: flex-start;
            border: 1px solid #ffe082;
        }

            .order-progress-page .tips-section .tips-card i {
                font-size: 1rem;
                color: #e6a23c;
                margin-right: 0.5rem;
                margin-top: 0.1rem;
            }

            .order-progress-page .tips-section .tips-card .tips-content {
                flex: 1;
            }

            .order-progress-page .tips-section .tips-card .tips-title {
                font-size: 0.85rem;
                color: #d48806;
                font-weight: 600;
                margin-bottom: 0.2rem;
            }

            .order-progress-page .tips-section .tips-card .tips-desc {
                font-size: 0.78rem;
                color: #e6a23c;
                line-height: 1.5;
            }

    .order-progress-page .empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 4rem 1rem;
    }

        .order-progress-page .empty .empty-icon {
            width: 6rem;
            height: 6rem;
            background: #f5f5f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.8rem;
        }

            .order-progress-page .empty .empty-icon i {
                font-size: 2rem;
                color: #ccc;
            }

        .order-progress-page .empty .empty-text {
            font-size: 0.9rem;
            color: #999;
            margin-bottom: 1rem;
        }

        .order-progress-page .empty .empty-btn {
            padding: 0.55rem 1.8rem;
            background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
            color: #ffffff;
            border: none;
            border-radius: 1rem;
            font-size: 0.85rem;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
        }

    .order-progress-page .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        padding: 0.6rem;
        display: flex;
        gap: 0.6rem;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.05);
        z-index: 100;
    }

        .order-progress-page .footer .footer-btn {
            flex: 1;
            padding: 0.65rem;
            border: none;
            border-radius: 0.5rem;
            font-size: 0.88rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

            .order-progress-page .footer .footer-btn.refresh {
                background: #f5f5f5;
                color: #666;
            }

            .order-progress-page .footer .footer-btn:not(.refresh) {
                background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
                color: #ffffff;
                box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
            }

            .order-progress-page .footer .footer-btn:active {
                transform: scale(0.98);
                opacity: 0.9;
            }

            .order-progress-page .footer .footer-btn i {
                margin-right: 0.3rem;
            }

            .order-progress-page .footer .footer-btn.disabled,
            .order-progress-page .footer .footer-btn[disabled] {
                opacity: 0.5;
            }

    .order-progress-page .spinning {
        animation: spin-order-progress 1s linear infinite;
    }

@keyframes spin-order-progress {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}