:root {
    --f7-theme-color: #2e8bcc;
    --f7-page-bg-color: #f3f7fb;
    --tr-primary: #2e8bcc;
    --tr-primary-light: #e8f4fc;
    --tr-accent: #f0a04b;
    --tr-gold: #c8943e;
    --tr-gold-light: #fdf6ec;
    --tr-gold-gradient: linear-gradient(135deg, #fdf6ec, #fef8f0, #fef3e0);
    --tr-success: #4caf84;
    --tr-danger: #e85555;
    --tr-text: #1a1a2e;
    --tr-text-secondary: #6b7280;
    --tr-border: #e8ecf1;
    --tr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --tr-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --tr-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
    --tr-radius: 14px;
    --tr-radius-lg: 20px;
    --tr-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
    background: #f3f7fb;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
}

.page {
    background: #f3f7fb;
}

button {
    width: auto;
}

.page-content {
    background: #f3f7fb;
    padding-bottom: 60px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top:0px;
}

#page-home, #search .page-content {
    background: #f3f7fb;
    padding-bottom: 60px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
}


.navbar {
    /*background: rgba(255, 255, 255, 0.94);*/
    /*backdrop-filter: saturate(180%) blur(20px);*/
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.05);*/
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);
}
.navbar-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: var(--f7-navbar-bg-color);
    background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
    /* background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color)); */
    transition-property: transform;
}
    .navbar-bg:before {
        content: '';
        position: absolute;
        right: 0;
        width: 100%;
        top: 100%;
        bottom: auto;
        height: 8px;
        pointer-events: none;
         background:none;
    }
    .navbar .navbar-inner {
        padding: 0 10px;
    }

    .navbar .title {
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 0.5px;
        color: #1a1a2e;
        width:100%;
        text-align:left;
    }

    .navbar .brand-logo {
        width: 75px;
        height: 32px;
        border-radius: 8px;
        /*background: linear-gradient(135deg, #4facfe, #2e8bcc);*/
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        /*box-shadow: 0 2px 8px rgba(46, 139, 204, 0.3);*/
    }
    .navbar .brand-logo img{
        width:100%;
    }

        .navbar .brand-logo i {
            color: #fff;
            font-size: 18px;
        }

    .navbar .brand-name {
        font-weight: 700;
        font-size: 17px;
        color: #1a1a2e;
        letter-spacing: 0.5px;
    }

    .navbar .brand-badge {
        font-size: 10px;
        background: linear-gradient(135deg, #f0a04b, #e0892f);
        color: #fff;
        padding: 2px 7px;
        border-radius: 10px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .navbar .nav-icon-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #f5f7fa;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all var(--tr-transition);
        position: relative;
    }

        .navbar .nav-icon-btn:active {
            background: #e8ecf1;
            transform: scale(0.93);
        }

    .navbar .badge-dot {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 9px;
        height: 9px;
        background: #e85555;
        border-radius: 50%;
        border: 2px solid #fff;
    }

    .navbar .right {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.search-wrapper {
    padding: 10px 16px 6px;
    background: #f3f7fb;
}

.search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 26px;
    padding: 11px 16px;
    box-shadow: var(--tr-shadow-sm);
    border: 1.5px solid #e8ecf1;
    cursor: pointer;
    gap: 10px;
    transition: all var(--tr-transition);
}

    .search-box:active {
        border-color: #2e8bcc;
        box-shadow: 0 0 0 3px rgba(46, 139, 204, 0.08);
        transform: scale(0.985);
    }

.search-icon {
    color: #2e8bcc;
    font-size: 18px;
    flex-shrink: 0;
}

.search-placeholder {
    color: #9ca3af;
    font-size: 14px;
    flex: 1;
}

.search-tag {
    background: #e8f4fc;
    color: #2e8bcc;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.banner-section {
    padding: 8px 16px 6px;
}

.swiper-container {
    border-radius: var(--tr-radius-lg);
    overflow: hidden;
    box-shadow: var(--tr-shadow-lg);
}

.swiper-slide {
    height: 175px;
    border-radius: var(--tr-radius-lg);
    overflow: hidden;
}

.banner-slide-1 {
    background: linear-gradient(135deg, #e8f4fc, #d0ebff, #c5e8f7);
}

.banner-slide-2 {
    background: linear-gradient(135deg, #fdf6ec, #fef3e0, #fef0db);
}

.banner-slide-3 {
    background: linear-gradient(135deg, #eaf7f0, #d4f0e2, #daf2e6);
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 20px 22px;
    position: relative;
}

.banner-text {
    flex: 1;
    z-index: 2;
}

.banner-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
    color: #2e8bcc;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.banner-title {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.25;
    margin-bottom: 4px;
}

.banner-subtitle {
    font-size: 12px;
    color: #6b7280;
}

.banner-visual {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.banner-circle {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px rgba(46, 139, 204, 0.18);
}

    .banner-circle i {
        font-size: 48px;
        color: #2e8bcc;
    }

.banner-dots-bg {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    z-index: 1;
}

.swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: rgba(0, 0, 0, 0.25);
    opacity: 1;
    transition: all 0.3s;
}

.swiper-pagination-bullet-active {
    width: 20px;
    border-radius: 4px;
    background: #2e8bcc;
}

.service-strip {
    display: flex;
    justify-content: space-around;
    padding: 10px 12px;
    margin: 6px 16px;
    background: #fff;
    border-radius: var(--tr-radius);
    box-shadow: var(--tr-shadow-sm);
    border: 1px solid #f1f5f9;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #4b5563;
    font-weight: 500;
}

    .service-item i {
        font-size: 16px;
        color: #2e8bcc;
    }

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 16px;
}

.section-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-icon-bar {
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(180deg, #4facfe, #2e8bcc);
}

    .section-icon-bar.gold {
        background: linear-gradient(180deg, #e0b860, #c8943e);
    }

.section-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
}

.section-more {
    font-size: 12px;
    color: #2e8bcc;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 14px;
    transition: all var(--tr-transition);
}

    .section-more:active {
        background: #e8f4fc;
    }

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 4px 16px 8px;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 6px;
    background: #fff;
    border-radius: var(--tr-radius);
    box-shadow: var(--tr-shadow-sm);
    cursor: pointer;
    transition: all var(--tr-transition);
    border: 1.5px solid transparent;
}

    .category-item:active {
        transform: scale(0.94);
        border-color: #dce8f5;
        box-shadow: var(--tr-shadow-md);
    }

.category-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .category-icon-wrap.cat-blue {
        background: linear-gradient(135deg, #e8f4fc, #d6edfb);
    }

    .category-icon-wrap.cat-cyan {
        background: linear-gradient(135deg, #e0f7fa, #d0f0f5);
    }

    .category-icon-wrap.cat-green {
        background: linear-gradient(135deg, #e8f5e9, #d5eed8);
    }

    .category-icon-wrap.cat-orange {
        background: linear-gradient(135deg, #fff8f0, #fef0e0);
    }

    .category-icon-wrap.cat-gold {
        background: linear-gradient(135deg, #fef9f0, #fdf0d6);
    }

    .category-icon-wrap.cat-purple {
        background: linear-gradient(135deg, #f5f0fa, #ede0f7);
    }

    .category-icon-wrap.cat-teal {
        background: linear-gradient(135deg, #e8faf8, #d0f5f2);
    }

    .category-icon-wrap.cat-rose {
        background: linear-gradient(135deg, #fef5f5, #fde8e8);
    }

    .category-icon-wrap i {
        font-size: 22px;
        color: #2e8bcc;
    }

    .category-icon-wrap.cat-cyan i {
        color: #0891b2;
    }

    .category-icon-wrap.cat-green i {
        color: #4caf84;
    }

    .category-icon-wrap.cat-orange i {
        color: #f0a04b;
    }

    .category-icon-wrap.cat-gold i {
        color: #c8943e;
    }

    .category-icon-wrap.cat-purple i {
        color: #7c3aed;
    }

    .category-icon-wrap.cat-teal i {
        color: #0d9488;
    }

    .category-icon-wrap.cat-rose i {
        color: #e85555;
    }

.category-name {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    text-align: center;
    line-height: 1.3;
}

.product-scroll {
    display: flex;
    gap: 12px;
    padding: 4px 16px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .product-scroll::-webkit-scrollbar {
        display: none;
    }

.product-card {
    flex: 0 0 210px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow-md);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--tr-transition);
    border: 1.5px solid #f1f5f9;
    position: relative;
}

    .product-card:active {
        transform: scale(0.965);
    }

.product-img-area {
    min-height: 160px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
    .product-img-area img{
        width:100%;
    }

    .product-icon-large {
        font-size: 64px;
        color: #2e8bcc;
        opacity: 0.85;
    }

    .product-icon-large.gold-icon {
        color: #c8943e;
    }

.product-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #e85555, #d43f3f);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 10px;
    z-index: 3;
}

    .product-tag.hot {
        background: linear-gradient(135deg, #f0a04b, #e0892f);
    }

    .product-tag.new {
        background: linear-gradient(135deg, #4caf84, #3a8f6a);
    }

    .product-tag.vip {
        background: linear-gradient(135deg, #c8943e, #a67c2e);
    }

.product-wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

    .product-wishlist i {
        font-size: 16px;
        color: #cbd5e1;
    }

    .product-wishlist.active i {
        color: #e85555;
    }

.product-info {
    padding: 12px 14px 14px;
}

.product-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.product-desc {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-price {
    font-size: 19px;
    font-weight: 800;
    color: #e85555;
}

    .product-price .unit {
        font-size: 12px;
        font-weight: 600;
    }

.product-price-droplet {
    font-size: 14px;
    font-weight: 700;
    color: #c8943e;
}

    .product-price-droplet .unit {
        font-size: 11px;
    }

.btn-buy {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4facfe, #2e8bcc);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--tr-transition);
    box-shadow: 0 3px 10px rgba(46, 139, 204, 0.3);
    border: none;
}

    .btn-buy:active {
        transform: scale(0.88);
    }

    .btn-buy i {
        font-size: 18px;
        color: #fff;
    }

.btn-exchange {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0b860, #c8943e);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--tr-transition);
    box-shadow: 0 3px 10px rgba(200, 148, 62, 0.3);
    border: none;
}

    .btn-exchange:active {
        transform: scale(0.88);
    }

    .btn-exchange i {
        font-size: 18px;
        color: #fff;
    }

.filter-reminder-card {
    margin: 6px 16px 12px;
    background: linear-gradient(135deg, #e8f4fc, #f0f7fd, #fdf6ec);
    border-radius: var(--tr-radius-lg);
    padding: 18px;
    box-shadow: var(--tr-shadow-md);
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    border: 1.5px solid #e8ecf1;
    position: relative;
    overflow: hidden;
}

    .filter-reminder-card:active {
        transform: scale(0.975);
    }

.reminder-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(46, 139, 204, 0.15);
}

    .reminder-icon i {
        font-size: 26px;
        color: #2e8bcc;
    }

.reminder-info {
    flex: 1;
    z-index: 2;
}

.reminder-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 3px;
}

.reminder-desc {
    font-size: 11px;
    color: #6b7280;
}

.reminder-progress {
    margin-top: 6px;
    height: 5px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    width: 80%;
}

.reminder-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf84, #f0a04b);
    border-radius: 3px;
    width: 32%;
}

.btn-reminder {
    background: #2e8bcc;
    color: #fff;
    border: none;
    padding: 9px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(46, 139, 204, 0.3);
    flex-shrink: 0;
    z-index: 2;
    width: auto;
}

.reminder-bg-dot {
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    z-index: 1;
}

.tradein-banner {
    margin: 6px 16px 12px;
    background: linear-gradient(135deg, #fdf6ec, #fef8f0, #fff5e6);
    border-radius: var(--tr-radius-lg);
    padding: 18px;
    box-shadow: var(--tr-shadow-md);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border: 1.5px solid #fef0db;
    position: relative;
    overflow: hidden;
}

    .tradein-banner:active {
        transform: scale(0.975);
    }

.tradein-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0a04b, #e0892f);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(240, 160, 75, 0.3);
}

    .tradein-icon i {
        font-size: 24px;
        color: #fff;
    }

.tradein-info {
    flex: 1;
    z-index: 2;
}

.tradein-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
}

.tradein-desc {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

.tradein-highlight {
    display: inline-block;
    background: #e85555;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 4px;
}

.btn-tradein {
    background: #f0a04b;
    color: #fff;
    border: none;
    padding: 9px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(240, 160, 75, 0.3);
    flex-shrink: 0;
    z-index: 2;
    width: auto;
}

.tradein-bg-circle {
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    z-index: 1;
}

.vip-header-card {
    margin: 16px;
    background: var(--tr-gold-gradient);
    border-radius: var(--tr-radius-lg);
    padding: 20px 18px;
    box-shadow: var(--tr-shadow-md);
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    border: 1.5px solid #fef0db;
}

.vip-crown-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0b860, #c8943e);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(200, 148, 62, 0.35);
    flex-shrink: 0;
    z-index: 2;
}

    .vip-crown-icon i {
        font-size: 30px;
        color: #fff;
    }

.vip-header-info {
    flex: 1;
    z-index: 2;
}

.vip-header-title {
    font-size: 18px;
    font-weight: 800;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vip-level-badge {
    background: linear-gradient(135deg, #c8943e, #a67c2e);
    color: #fff;
    font-size: 10px;
    padding: 3px 9px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.vip-header-desc {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    line-height: 1.4;
}

.vip-header-droplet {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 13px;
    color: #c8943e;
    font-weight: 700;
}

    .vip-header-droplet i {
        font-size: 18px;
    }

.vip-bg-orb {
    position: absolute;
    right: -35px;
    top: -35px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    z-index: 1;
}

.vip-bg-orb2 {
    position: absolute;
    right: 50px;
    bottom: -30px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(200, 148, 62, 0.1);
    z-index: 1;
}

.housekeeping-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 4px 16px 8px;
}

.bbs-post-list {
    padding: 4px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbs-post-card {
    background: #fff;
    border-radius: var(--tr-radius);
    padding: 14px 16px;
    box-shadow: var(--tr-shadow-sm);
    cursor: pointer;
    transition: all var(--tr-transition);
    border: 1.5px solid #f1f5f9;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

    .bbs-post-card:active {
        transform: scale(0.975);
        border-color: #dce8f5;
        box-shadow: var(--tr-shadow-md);
    }

.bbs-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
}

    .bbs-avatar.av-blue {
        background: linear-gradient(135deg, #4facfe, #2e8bcc);
    }

    .bbs-avatar.av-green {
        background: linear-gradient(135deg, #5cce9a, #4caf84);
    }

    .bbs-avatar.av-orange {
        background: linear-gradient(135deg, #f0a04b, #e0892f);
    }

    .bbs-avatar.av-purple {
        background: linear-gradient(135deg, #a78bfa, #7c3aed);
    }

    .bbs-avatar.av-teal {
        background: linear-gradient(135deg, #5eeadb, #0d9488);
    }

.bbs-post-body {
    flex: 1;
    min-width: 0;
}

.bbs-post-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.4;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbs-post-excerpt {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbs-post-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: #9ca3af;
    flex-wrap: wrap;
}

    .bbs-post-meta span {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .bbs-post-meta i {
        font-size: 13px;
    }

.bbs-tag {
    display: inline-block;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

    .bbs-tag.hot-tag {
        background: #fef0e0;
        color: #f0a04b;
    }

    .bbs-tag.essence {
        background: #fde8e8;
        color: #e85555;
    }

    .bbs-tag.new-post {
        background: #e8f4fc;
        color: #2e8bcc;
    }

    .bbs-tag.share {
        background: #e8f5e9;
        color: #4caf84;
    }

.bbs-post-image {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f3f7fb;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .bbs-post-image i {
        font-size: 28px;
        color: #cbd5e1;
    }

.bbs-pinned {
    border-left: 3px solid #c8943e;
    background: #fffef9;
}

.bbs-fab {
    position: fixed;
    right: 16px;
    bottom: 160px;
    z-index: 100;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0b860, #c8943e);
    box-shadow: 0 6px 22px rgba(200, 148, 62, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--tr-transition);
    border: none;
}

    .bbs-fab:active {
        transform: scale(0.88);
    }

    .bbs-fab i {
        font-size: 24px;
        color: #fff;
    }

.merchant-card {
    margin: 6px 16px 12px;
    background: #fff;
    border-radius: var(--tr-radius-lg);
    padding: 16px;
    box-shadow: var(--tr-shadow-md);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border: 1.5px solid #f1f5f9;
    transition: all var(--tr-transition);
}

    .merchant-card:active {
        transform: scale(0.975);
    }

.merchant-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e8f4fc, #d6edfb);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .merchant-logo i {
        font-size: 24px;
        color: #2e8bcc;
    }

.merchant-info {
    flex: 1;
}

.merchant-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
}

.merchant-desc {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

.merchant-badge {
    font-size: 10px;
    background: #e8f4fc;
    color: #2e8bcc;
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 600;
}

.cart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    text-align: center;
}

.cart-empty-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

    .cart-empty-icon i {
        font-size: 44px;
        color: #cbd5e1;
    }

.cart-empty-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 6px;
}

.cart-empty-desc {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 20px;
    line-height: 1.5;
}

.cart-empty-btn {
    background: linear-gradient(135deg, #4facfe, #2e8bcc);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(46, 139, 204, 0.3);
    transition: all var(--tr-transition);
}

    .cart-empty-btn:active {
        transform: scale(0.94);
        box-shadow: 0 2px 8px rgba(46, 139, 204, 0.25);
    }

.cart-list {
    padding: 4px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cart-item-card {
    background: #fff;
    border-radius: var(--tr-radius-lg);
    padding: 14px 14px 14px 10px;
    box-shadow: var(--tr-shadow-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid #f1f5f9;
    transition: all var(--tr-transition);
    position: relative;
}

    .cart-item-card.swipe-deleting {
        transform: translateX(-80px);
        opacity: 0.6;
        transition: all 0.35s ease;
    }

.cart-checkbox-wrap {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cart-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .cart-checkbox.checked {
        background: #2e8bcc;
        border-color: #2e8bcc;
    }

        .cart-checkbox.checked::after {
            content: '';
            width: 6px;
            height: 10px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg) translateY(-1px);
            margin-top: 2px;
        }

.cart-item-img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .cart-item-img img {
        width:100%;
        border-radius:10px;
    }

    .cart-item-img.gold-bg i {
        color: #c8943e;
    }

.cart-item-detail {
    flex: 1;
    min-width: 0;
}

.cart-item-name {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 2px;
}

.cart-item-spec {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-item-price {
    font-size: 17px;
    font-weight: 800;
    color: #e85555;
}
.cart-item-price .daoshou{
    display: block;
    font-size: 14px;
    color: #a66666;
}

    .cart-item-price .unit {
        font-size: 11px;
    }

.cart-qty-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1.5px solid #e8ecf1;
}

.cart-qty-btn {
    width: 30px;
    height: 28px;
    background: #f5f7fa;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: #4b5563;
    font-weight: 700;
    transition: all 0.15s;
    user-select: none;
}

    .cart-qty-btn:active {
        background: #e5e7eb;
    }

    .cart-qty-btn.disabled {
        color: #d1d5db;
        pointer-events: none;
    }

.cart-qty-num {
    width: 34px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    user-select: none;
}

.cart-delete-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fef2f2;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s;
}

    .cart-delete-btn.show {
        opacity: 1;
        pointer-events: auto;
    }

    .cart-delete-btn i {
        font-size: 14px;
        color: #e85555;
    }

    .cart-delete-btn:active {
        background: #fde8e8;
        transform: translateY(-50%) scale(0.9);
    }

.cart-promo-banner {
    margin: 6px 16px 10px;
    background: linear-gradient(135deg, #fef9f0, #fff8ec);
    border-radius: var(--tr-radius);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #c8943e;
    font-weight: 600;
    border: 1px dashed #f0d89c;
}

    .cart-promo-banner i {
        font-size: 18px;
        color: #f0a04b;
    }

    .cart-promo-banner .promo-highlight {
        color: #e85555;
        font-weight: 800;
    }

.cart-recommend-section {
    padding: 6px 16px 12px;
}

.cart-recommend-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}

    .cart-recommend-scroll::-webkit-scrollbar {
        display: none;
    }

.cart-recommend-item {
    flex: 0 0 140px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: var(--tr-radius);
    padding: 12px 10px;
    text-align: center;
    box-shadow: var(--tr-shadow-sm);
    cursor: pointer;
    transition: all var(--tr-transition);
    border: 1.5px solid #f1f5f9;
}

    .cart-recommend-item:active {
        transform: scale(0.94);
    }

.cart-recommend-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8f4fc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

    .cart-recommend-icon i {
        font-size: 22px;
        color: #2e8bcc;
    }

.cart-recommend-name {
    font-size: 11px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.cart-recommend-price {
    font-size: 14px;
    font-weight: 700;
    color: #e85555;
}

.cart-recommend-add {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2e8bcc;
    color: #fff;
    font-size: 16px;
    line-height: 26px;
    cursor: pointer;
    margin-top: 4px;
    font-weight: 700;
    transition: all 0.2s;
}

    .cart-recommend-add:active {
        transform: scale(0.85);
        background: #1a6da8;
    }

.cart-checkout-bar {
    position: fixed;
    bottom: 60px;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 400;
    box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.05);
}

.cart-checkout-select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #4b5563;
    font-weight: 600;
    flex-shrink: 0;
}

.cart-checkout-total {
    flex: 1;
    text-align: right;
}

.cart-checkout-total-label {
    font-size: 11px;
    color: #9ca3af;
    display: block;
}

.cart-checkout-total-price {
    font-size: 20px;
    font-weight: 800;
    color: #e85555;
}

    .cart-checkout-total-price .unit {
        font-size: 13px;
    }

.cart-checkout-btn {
    background: linear-gradient(135deg, #4facfe, #2e8bcc);
    color: #fff;
    border: none;
    padding: 12px 22px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(46, 139, 204, 0.35);
    transition: all var(--tr-transition);
    white-space: nowrap;
    width: auto;
}

    .cart-checkout-btn:active {
        transform: scale(0.94);
        box-shadow: 0 2px 8px rgba(46, 139, 204, 0.25);
    }

    .cart-checkout-btn.disabled {
        background: #cbd5e1;
        box-shadow: none;
        pointer-events: none;
        color: #9ca3af;
    }

.cart-checkout-count {
    font-size: 11px;
    color: #fff;
    background: #e85555;
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 2px;
    font-weight: 700;
}

.exchange-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

    .exchange-modal-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

.exchange-modal {
    background: #fff;
    border-radius: var(--tr-radius-lg);
    padding: 24px 20px;
    width: 85%;
    max-width: 340px;
    text-align: center;
    box-shadow: var(--tr-shadow-lg);
}

    .exchange-modal h4 {
        font-size: 17px;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0 0 8px;
    }

    .exchange-modal p {
        font-size: 13px;
        color: #6b7280;
        margin: 0 0 16px;
        line-height: 1.5;
    }

    .exchange-modal .modal-droplet {
        font-size: 24px;
        font-weight: 800;
        color: #c8943e;
        margin: 8px 0;
    }

    .exchange-modal .btn-row {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .exchange-modal .btn-cancel {
        background: #f3f7fb;
        color: #6b7280;
        border: 1.5px solid #e8ecf1;
        padding: 10px 24px;
        border-radius: 22px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    .exchange-modal .btn-confirm {
        background: linear-gradient(135deg, #e0b860, #c8943e);
        color: #fff;
        border: none;
        padding: 10px 24px;
        border-radius: 22px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(200, 148, 62, 0.3);
    }

.toolbar.tabbar {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
    height: 60px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

    .toolbar.tabbar .tab-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #9ca3af;
        font-size: 10px;
        font-weight: 600;
        transition: all var(--tr-transition);
        padding: 4px 0;
        position: relative;
        text-decoration: none;
    }

        .toolbar.tabbar .tab-link.active {
            color: #2e8bcc;
        }

            .toolbar.tabbar .tab-link.active.vip-tab {
                color: #c8943e;
            }

        .toolbar.tabbar .tab-link i {
            font-size: 22px;
            transition: all var(--tr-transition);
        }

        .toolbar.tabbar .tab-link.active i {
            transform: translateY(-2px);
        }

.cart-badge {
    position: absolute;
    top: -2px;
    right: 50%;
    transform: translateX(14px);
    background: #e85555;
    color: #fff;
    font-size: 10px;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    padding: 0 5px;
    border: 2px solid #fff;
    transition: all 0.25s;
}

    .cart-badge.pulse {
        animation: badgePulse 0.4s ease;
    }

@keyframes badgePulse {
    0%, 100% {
        transform: translateX(14px) scale(1);
    }

    50% {
        transform: translateX(14px) scale(1.5);
    }
}

.float-btns {
    position: fixed;
    right: 14px;
    bottom: 150px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.float-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--tr-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--tr-transition);
    border: 1.5px solid #f1f5f9;
}

    .float-btn:active {
        transform: scale(0.88);
    }

    .float-btn i {
        font-size: 20px;
        color: white;
    }

    .float-btn.kefu {
        background: linear-gradient(135deg, #4facfe, #2e8bcc);
        border: none;
        box-shadow: 0 6px 20px rgba(46, 139, 204, 0.4);
        animation: floatPulse 2.5s ease-in-out infinite;
    }

        .float-btn.kefu i {
            color: #fff;
            font-size: 22px;
        }

@keyframes floatPulse {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(46, 139, 204, 0.4);
        transform: translateY(0);
    }

    50% {
        box-shadow: 0 12px 30px rgba(46, 139, 204, 0.55);
        transform: translateY(-4px);
    }
}

.kefu-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    background: #4caf84;
    border-radius: 50%;
    border: 2px solid #fff;
    animation: dotBlink 1.8s ease-in-out infinite;
}

@keyframes dotBlink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.custom-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(26, 26, 46, 0.9);
    color: #fff;
    padding: 12px 22px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    backdrop-filter: blur(8px);
}

    .custom-toast.show {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(46, 139, 204, 0.25);
    transform: scale(0);
    animation: rippleAnim 0.7s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.profile-header-card {
    margin: 16px;
    background: linear-gradient(135deg, #e8f4fc, #d4eafa);
    border-radius: var(--tr-radius-lg);
    padding: 22px 20px;
    box-shadow: var(--tr-shadow-md);
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff, #f0f7fd);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(46, 139, 204, 0.2);
    flex-shrink: 0;
}

    .profile-avatar i {
        font-size: 34px;
        color: #2e8bcc;
    }

.profile-info {
    flex: 1;
    z-index: 1;
}

.profile-nickname {
    font-size: 19px;
    font-weight: 800;
    color: #1a1a2e;
}

.profile-level {
    display: inline-block;
    background: #f0a04b;
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 600;
}

.profile-droplet {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 14px;
    color: #2e8bcc;
    font-weight: 700;
}

    .profile-droplet i {
        font-size: 20px;
    }

.profile-balance-card {
    margin: 0 16px 12px;
    background: #fff;
    border-radius: var(--tr-radius);
    padding: 16px;
    box-shadow: var(--tr-shadow-sm);
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.balance-item .balance-num {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a2e;
}

.balance-item .balance-label {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 6px 16px 12px;
}

.module-item {
    background: #fff;
    border-radius: var(--tr-radius);
    padding: 14px 8px;
    text-align: center;
    box-shadow: var(--tr-shadow-sm);
    cursor: pointer;
    transition: all var(--tr-transition);
}

    .module-item:active {
        transform: scale(0.94);
        background: #f9fbfd;
    }

    .module-item i {
        font-size: 24px;
        color: #2e8bcc;
        margin-bottom: 6px;
        display: block;
    }

    .module-item span {
        font-size: 11px;
        font-weight: 600;
        color: #374151;
    }

.order-card,
.droplet-card,
.dist-card,
.account-card,
.recharge-card {
    margin: 10px 16px;
    background: #fff;
    border-radius: var(--tr-radius);
    padding: 16px;
    box-shadow: var(--tr-shadow-sm);
}

.card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

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

.order-info .order-no {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
}

.order-info .order-status {
    font-size: 11px;
    color: #6b7280;
}

.order-amount {
    font-weight: 700;
    color: #e85555;
}

.recharge-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.recharge-option {
    background: #f3f7fb;
    border: 1.5px solid #e8ecf1;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #2e8bcc;
    cursor: pointer;
    transition: all var(--tr-transition);
}

    .recharge-option:active {
        background: #2e8bcc;
        color: #fff;
        border-color: #2e8bcc;
    }

.dist-code {
    background: #f3f7fb;
    padding: 6px 12px;
    border-radius: 12px;
    font-family: monospace;
    letter-spacing: 1px;
    font-weight: 700;
    color: #2e8bcc;
}

.btn-sm {
    background: #2e8bcc;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .btn-sm:active {
        background: #1a6da8;
        transform: scale(0.95);
    }

.pull-hint {
    text-align: center;
    padding: 8px;
    font-size: 11px;
    color: #cbd5e1;
    user-select: none;
}

.cart-manage-delete-row {
    display: none;
    justify-content: center;
    padding: 8px 16px;
}

    .cart-manage-delete-row.show {
        display: flex;
    }

.cart-batch-delete-btn {
    background: #fff;
    color: #e85555;
    border: 1.5px solid #fecaca;
    padding: 10px 28px;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

    .cart-batch-delete-btn:active {
        background: #fef2f2;
        transform: scale(0.95);
    }

/* ==================== 分销裂变专属样式 ==================== */
.dist-hero-card {
    margin: 12px 16px;
    background: linear-gradient(145deg, #1a1a2e 0%, #1e2a3e 40%, #1a2540 100%);
    border-radius: var(--tr-radius-lg);
    padding: 0;
    box-shadow: 0 8px 32px rgba(26, 26, 46, 0.35);
    position: relative;
    overflow: hidden;
    color: #fff;
}

.dist-hero-inner {
    padding: 20px 18px 18px;
    position: relative;
    z-index: 2;
}

.dist-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.dist-hero-avatar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dist-hero-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0a04b, #e0892f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 4px 16px rgba(240, 160, 75, 0.5);
    flex-shrink: 0;
}

.dist-hero-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.dist-hero-level-badge {
    display: inline-block;
    font-size: 10px;
    padding: 3px 9px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #e0b860, #c8943e);
    color: #1a1a2e;
    margin-top: 2px;
}

    .dist-hero-level-badge.diamond {
        background: linear-gradient(135deg, #b8d4f0, #6ba3d6);
        color: #fff;
    }

    .dist-hero-level-badge.crown {
        background: linear-gradient(135deg, #f7dc6f, #f0a04b);
        color: #1a1a2e;
        animation: crownGlow 2s ease-in-out infinite;
    }

@keyframes crownGlow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(240, 160, 75, 0.5);
    }

    50% {
        box-shadow: 0 0 24px rgba(240, 160, 75, 0.9);
    }
}

.dist-hero-invite-code {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 7px 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px dashed rgba(255, 255, 255, 0.25);
}

    .dist-hero-invite-code:active {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(0.95);
    }

    .dist-hero-invite-code span {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1.5px;
        color: #f0a04b;
        font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    }

    .dist-hero-invite-code i {
        font-size: 14px;
        color: #f0a04b;
    }

.dist-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 6px;
}

.dist-hero-stat {
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px 4px;
    backdrop-filter: blur(4px);
}

    .dist-hero-stat .stat-num {
        font-size: 18px;
        font-weight: 800;
        color: #fff;
        line-height: 1;
    }

        .dist-hero-stat .stat-num.gold {
            color: #f0a04b;
        }

        .dist-hero-stat .stat-num.green {
            color: #4caf84;
        }

    .dist-hero-stat .stat-label {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 3px;
        white-space: nowrap;
    }

.dist-hero-bg-orb {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 160, 75, 0.2) 0%, transparent 70%);
    right: -60px;
    top: -60px;
    z-index: 1;
    animation: orbFloat 4s ease-in-out infinite;
}

.dist-hero-bg-orb2 {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46, 139, 204, 0.18) 0%, transparent 70%);
    left: -40px;
    bottom: -40px;
    z-index: 1;
    animation: orbFloat 5s ease-in-out infinite reverse;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(15px, -15px);
    }
}

.dist-upgrade-bar {
    margin: 0 16px 8px;
    background: #fff;
    border-radius: var(--tr-radius);
    padding: 14px 16px;
    box-shadow: var(--tr-shadow-sm);
    border: 1.5px solid #f1f5f9;
}

.dist-upgrade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.dist-upgrade-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
}

.dist-upgrade-target {
    font-size: 11px;
    color: #f0a04b;
    font-weight: 700;
}

.dist-upgrade-progress-wrap {
    height: 8px;
    background: #f0f4f8;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.dist-upgrade-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f0a04b, #e0892f, #f0a04b);
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background-size: 200% 100%;
    animation: progressShimmer 2s linear infinite;
}

@keyframes progressShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.dist-upgrade-milestones {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    color: #9ca3af;
}

    .dist-upgrade-milestones span {
        cursor: default;
    }

        .dist-upgrade-milestones span.reached {
            color: #4caf84;
            font-weight: 700;
        }

        .dist-upgrade-milestones span.current {
            color: #f0a04b;
            font-weight: 700;
        }

.dist-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 4px 16px 8px;
}

.dist-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 16px 6px;
    background: #fff;
    border-radius: var(--tr-radius);
    box-shadow: var(--tr-shadow-sm);
    cursor: pointer;
    transition: all var(--tr-transition);
    border: 1.5px solid transparent;
    text-align: center;
}

    .dist-quick-action:active {
        transform: scale(0.93);
        border-color: #dce8f5;
        box-shadow: var(--tr-shadow-md);
    }

    .dist-quick-action .action-icon-wrap {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .dist-quick-action .action-icon-wrap.orange-grad {
            background: linear-gradient(135deg, #fff0e0, #ffe4c4);
        }

        .dist-quick-action .action-icon-wrap.blue-grad {
            background: linear-gradient(135deg, #e8f4fc, #d6edfb);
        }

        .dist-quick-action .action-icon-wrap.green-grad {
            background: linear-gradient(135deg, #e8f5e9, #d5eed8);
        }

        .dist-quick-action .action-icon-wrap.purple-grad {
            background: linear-gradient(135deg, #f5f0fa, #ede0f7);
        }

        .dist-quick-action .action-icon-wrap i {
            font-size: 22px;
        }

        .dist-quick-action .action-icon-wrap.orange-grad i {
            color: #f0a04b;
        }

        .dist-quick-action .action-icon-wrap.blue-grad i {
            color: #2e8bcc;
        }

        .dist-quick-action .action-icon-wrap.green-grad i {
            color: #4caf84;
        }

        .dist-quick-action .action-icon-wrap.purple-grad i {
            color: #7c3aed;
        }

    .dist-quick-action .action-label {
        font-size: 11px;
        font-weight: 600;
        color: #374151;
        line-height: 1.3;
    }

    .dist-quick-action .action-badge {
        font-size: 9px;
        background: #e85555;
        color: #fff;
        padding: 2px 6px;
        border-radius: 8px;
        font-weight: 700;
    }

.dist-rank-card {
    margin: 6px 16px 10px;
    background: #fff;
    border-radius: var(--tr-radius-lg);
    padding: 16px;
    box-shadow: var(--tr-shadow-md);
    border: 1.5px solid #f1f5f9;
}

.dist-rank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.dist-rank-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .dist-rank-title i {
        color: #f0a04b;
        font-size: 20px;
    }

.dist-rank-badge {
    font-size: 10px;
    background: #fef0e0;
    color: #f0a04b;
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 700;
}

.dist-rank-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dist-rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    transition: all 0.2s;
    cursor: pointer;
}

    .dist-rank-item:active {
        background: #f9fbfd;
    }

    .dist-rank-item.top-1 {
        background: linear-gradient(135deg, #fffef5, #fef9e7);
    }

    .dist-rank-item.top-2 {
        background: linear-gradient(135deg, #fdfcf9, #faf7f2);
    }

    .dist-rank-item.top-3 {
        background: linear-gradient(135deg, #fdfaf7, #faf5ef);
    }

.dist-rank-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
}

    .dist-rank-num.rank-1 {
        background: linear-gradient(135deg, #f7dc6f, #f0a04b);
        color: #fff;
        font-size: 16px;
    }

    .dist-rank-num.rank-2 {
        background: linear-gradient(135deg, #d4d8dd, #b0b8c1);
        color: #fff;
        font-size: 15px;
    }

    .dist-rank-num.rank-3 {
        background: linear-gradient(135deg, #e0b860, #c8943e);
        color: #fff;
        font-size: 14px;
    }

    .dist-rank-num.rank-other {
        background: #f3f7fb;
        color: #6b7280;
    }

.dist-rank-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

.dist-rank-info {
    flex: 1;
    min-width: 0;
}

.dist-rank-name {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
}

.dist-rank-team {
    font-size: 10px;
    color: #9ca3af;
}

.dist-rank-earn {
    font-weight: 800;
    color: #e85555;
    font-size: 14px;
    flex-shrink: 0;
}

.dist-rank-me {
    border: 2px solid #f0a04b;
    background: #fffef9;
    border-radius: 12px;
}

.dist-dynamic-card {
    margin: 6px 16px 10px;
    background: #fff;
    border-radius: var(--tr-radius-lg);
    padding: 16px;
    box-shadow: var(--tr-shadow-sm);
    border: 1.5px solid #f1f5f9;
}

.dist-dynamic-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dist-dynamic-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f5f7fa;
    font-size: 12px;
    color: #4b5563;
}

    .dist-dynamic-item:last-child {
        border-bottom: none;
    }

.dist-dynamic-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .dist-dynamic-dot.green-dot {
        background: #4caf84;
        animation: dotBlink 1.5s ease-in-out infinite;
    }

    .dist-dynamic-dot.orange-dot {
        background: #f0a04b;
    }

    .dist-dynamic-dot.blue-dot {
        background: #2e8bcc;
    }

.dist-dynamic-time {
    font-size: 10px;
    color: #cbd5e1;
    flex-shrink: 0;
    margin-left: auto;
}

.dist-dynamic-amount {
    font-weight: 700;
    color: #e85555;
}

.dist-poster-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9997;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

    .dist-poster-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

.dist-poster-card {
    background: #fff;
    border-radius: var(--tr-radius-lg);
    padding: 24px;
    width: 85%;
    max-width: 320px;
    text-align: center;
    box-shadow: var(--tr-shadow-lg);
}

.dist-poster-preview {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #1a1a2e, #2e8bcc);
    border-radius: var(--tr-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: #fff;
    flex-direction: column;
    gap: 8px;
}

    .dist-poster-preview i {
        font-size: 48px;
        color: #f0a04b;
    }

    .dist-poster-preview span {
        font-size: 14px;
        font-weight: 700;
    }

.dist-poster-code {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #f0a04b;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 16px;
    border-radius: 12px;
}

.dist-poster-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.dist-poster-btn {
    padding: 10px 20px;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

    .dist-poster-btn.primary {
        background: linear-gradient(135deg, #4facfe, #2e8bcc);
        color: #fff;
        box-shadow: 0 4px 12px rgba(46, 139, 204, 0.3);
    }

    .dist-poster-btn.secondary {
        background: #f3f7fb;
        color: #6b7280;
        border: 1.5px solid #e8ecf1;
    }

    .dist-poster-btn:active {
        transform: scale(0.93);
    }


/* ==================== 商品详情页 CSS 样式 ==================== */

/* 商品详情页整体 */
.page[data-name="product-detail"] {
    background: #f5f6f8;
}

    .navbar .navbar-inner {
        padding: 0 8px;
    }

    .navbar .left .back-btn {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 15px;
        font-weight: 600;
        color: #1a1a2e;
        cursor: pointer;
        padding: 6px 10px;
        border-radius: 20px;
        transition: background 0.2s;
        background-color:white;
        opacity:0.8;
    }

        .navbar .left .back-btn:active {
            background: rgba(0, 0, 0, 0.05);
        }

        .navbar .left .back-btn i {
            font-size: 20px;
            margin-right: 1px;
        }

    .navbar .right .nav-icon-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s;
        position: relative;
    }

        .navbar .right .nav-icon-btn:active {
            background: rgba(0, 0, 0, 0.06);
        }

       .navbar .right .nav-icon-btn.wishlisted i {
            color: #ef4444 !important;
        }

/* 商品图片轮播 */
.pd-swiper-wrap {
    position: relative;
    background: #fff;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    max-height: 420px;
}
    .pd-swiper-wrap .swiper-container {
        width: 100%;
        height: 100%;
    }

    .pd-swiper-wrap .swiper-slide {
        height:100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(160deg, #f0f4ff 0%, #e8f0fe 40%, #f5f8ff 100%);
        position: relative;
    }

        .pd-swiper-wrap .swiper-slide.slide-blue {
            background: linear-gradient(160deg, #eef4ff 0%, #dce8fa 40%, #f0f5ff 100%);
        }

        .pd-swiper-wrap .swiper-slide.slide-cyan {
            background: linear-gradient(160deg, #e8faf8 0%, #d2f0ed 40%, #edf9f7 100%);
        }

        .pd-swiper-wrap .swiper-slide.slide-green {
            background: linear-gradient(160deg, #ecf9f0 0%, #d4f0dc 40%, #eefaf2 100%);
        }

    .pd-swiper-wrap .slide-icon-wrap {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    }
   .slide-icon-wrap img {
            width: 100%;
        }

        .pd-swiper-wrap .slide-icon-wrap i {
            font-size: 72px;
            color: #2e8bcc;
        }

    .pd-swiper-wrap .slide-badge {
        position: absolute;
        bottom: 16px;
        right: 16px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 11px;
        padding: 4px 10px;
        border-radius: 12px;
        z-index: 2;
        letter-spacing: 0.5px;
    }

    .pd-swiper-wrap .swiper-pagination {
        bottom: 12px;
    }

    .pd-swiper-wrap .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        background: #cbd5e1;
        opacity: 1;
        transition: all 0.3s;
    }

    .pd-swiper-wrap .swiper-pagination-bullet-active {
        width: 20px;
        border-radius: 6px;
        background: #2e8bcc;
    }

/* 商品信息区 */
.pd-info-card {
    background: #fff;
    border-radius: 16px 16px 0 0;
    /*margin-top: -12px;*/
    position: relative;
    z-index: 3;
    padding: 16px 16px 12px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}

.pd-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.pd-price-current {
    font-size: 28px;
    font-weight: 800;
    color: #e53e3e;
    letter-spacing: -0.5px;
}

    .pd-price-current .unit {
        font-size: 16px;
        font-weight: 700;
    }

.pd-price-original {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: line-through;
}

.pd-price-tag {
    font-size: 10px;
    background: #fef2f2;
    color: #e53e3e;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.pd-name {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.4;
    margin: 6px 0 4px;
}

.pd-desc {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 8px;
    line-height: 1.5;
}

.pd-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11px;
    color: #9ca3af;
    flex-wrap: wrap;
}

    .pd-meta-row span {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .pd-meta-row .meta-dot {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #d1d5db;
    }

/* 规格选择区域 */
.pd-spec-trigger {
    background: #fff;
    margin: 8px 0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

    .pd-spec-trigger:active {
        background: #f9fafb;
    }

    .pd-spec-trigger .spec-label {
        font-size: 13px;
        color: #6b7280;
        font-weight: 500;
    }

    .pd-spec-trigger .spec-value {
        font-size: 13px;
        color: #1f2937;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .pd-spec-trigger .spec-value i {
            font-size: 14px;
            color: #9ca3af;
        }

/* 服务保障条 */
.pd-service-strip {
    background: #fff;
    margin: 0 0 8px;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #6b7280;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

    .pd-service-strip .svc-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .pd-service-strip .svc-item i {
            font-size: 15px;
            color: #2e8bcc;
        }

/* 详情Tab切换 */
.pd-tabs-wrap {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.pd-tabs-nav {
    display: flex;
    border-bottom: 1px solid #f3f4f6;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

.pd-tab-btn {
    flex: 1;
    text-align: center;
    padding: 13px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    border: none;
    background: transparent;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

    .pd-tab-btn.active {
        color: #2e8bcc;
    }

        .pd-tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 28px;
            height: 3px;
            border-radius: 3px;
            background: #2e8bcc;
            transition: all 0.2s;
        }

.pd-tab-panel {
    display: none;
    padding: 16px;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
}

    .pd-tab-panel.active {
        display: block;
    }

    .pd-tab-panel img {
        width: 100%;
        /* border-radius: 8px; */
        /* margin: 8px 0; */
        padding: 0px;
        /* margin: -2px; */
        margin-bottom: -7px;
    }
/* 规格参数表 */
.pd-param-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .pd-param-table tr {
        border-bottom: 1px solid #f3f4f6;
    }

    .pd-param-table td {
        padding: 10px 6px;
        vertical-align: top;
    }

    .pd-param-table .param-label {
        color: #9ca3af;
        width: 35%;
        font-weight: 500;
    }

    .pd-param-table .param-value {
        color: #1f2937;
        font-weight: 500;
    }
/* 评价列表 */
.pd-review-item {
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
}

    .pd-review-item:last-child {
        border-bottom: none;
    }

.pd-review-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.pd-review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

    .pd-review-avatar.av-blue {
        background: #3b82f6;
    }

    .pd-review-avatar.av-green {
        background: #10b981;
    }

    .pd-review-avatar.av-orange {
        background: #f59e0b;
    }

.pd-review-stars {
    color: #f59e0b;
    font-size: 12px;
    letter-spacing: 1px;
}

.pd-review-user {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.pd-review-time {
    font-size: 11px;
    color: #cbd5e1;
    margin-left: auto;
}

.pd-review-content {
    font-size: 12px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 4px;
}

.pd-review-spec {
    font-size: 11px;
    color: #9ca3af;
    background: #f9fafb;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.pd-review-images {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.pd-review-img-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    font-size: 22px;
}

/* 底部操作栏 */
.pd-bottom-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 10px;
    border-top: 1px solid #f3f4f6;
    z-index: 10;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
    margin-top: 8px;
}

.pd-bottom-cart-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    background: #f9fafb;
    transition: background 0.2s;
}

    .pd-bottom-cart-btn:active {
        background: #f3f4f6;
    }

    .pd-bottom-cart-btn i {
        font-size: 22px;
        color: #4b5563;
    }

.pd-bottom-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #e53e3e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}

.pd-bottom-btn {
    flex: 1;
    height: 42px;
    border-radius: 21px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    white-space: nowrap;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

    .pd-bottom-btn.add-cart {
        background: #fff;
        color: #2e8bcc;
        border: 2px solid #2e8bcc;
    }

        .pd-bottom-btn.add-cart:active {
            background: #eef6ff;
            transform: scale(0.97);
        }

    .pd-bottom-btn.buy-now {
        background: linear-gradient(135deg, #2e8bcc, #2563eb);
        color: #fff;
        border: none;
        box-shadow: 0 4px 14px rgba(46, 139, 204, 0.3);
    }

        .pd-bottom-btn.buy-now:active {
            transform: scale(0.97);
            box-shadow: 0 2px 8px rgba(46, 139, 204, 0.25);
        }

/* ==================== 规格选择弹窗 (底部Sheet) ==================== */
.spec-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

    .spec-sheet-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

.spec-sheet-panel {
    background: #fff;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 70vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    padding: 0 0 env(safe-area-inset-bottom, 16px);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
}

.spec-sheet-overlay.show .spec-sheet-panel {
    transform: translateY(0);
}

.spec-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    border-radius: 20px 20px 0 0;
}

.spec-sheet-handle-bar {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
}

.spec-sheet-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 16px;
    border-bottom: 1px solid #f3f4f6;
}

.spec-sheet-thumb {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: #f0f4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .spec-sheet-thumb img {
        width:100%;
        border-radius:10px;
    }

.spec-sheet-header-info {
    flex: 1;
}

.spec-sheet-price {
    font-size: 22px;
    font-weight: 800;
    color: #e53e3e;
}
    .spec-sheet-price #specSheetDicPrice{
        font-size:14px;
        display:block;
    }

    .spec-sheet-price .unit {
        font-size: 14px;
    }

.spec-sheet-stock {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

.spec-sheet-body {
    padding: 16px 20px;
}

.spec-group-label {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
}

.spec-option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.spec-option-item {
    padding: 9px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    transition: all 0.18s;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    .spec-option-item:active {
        transform: scale(0.95);
    }

    .spec-option-item.selected {
        border-color: #2e8bcc;
        background: #eef6ff;
        color: #2e8bcc;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(46, 139, 204, 0.12);
    }

    .spec-option-item.disabled {
        border-color: #f3f4f6;
        background: #f9fafb;
        color: #d1d5db;
        cursor: not-allowed;
        pointer-events: none;
    }
/* 数量选择器 */
.spec-qty-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
}

.spec-qty-label {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
}

.spec-qty-control {
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: 22px;
    overflow: hidden;
    border: 1.5px solid #e5e7eb;
}

.spec-qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #f9fafb;
    font-size: 18px;
    cursor: pointer;
    color: #4b5563;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

    .spec-qty-btn:active {
        background: #e5e7eb;
    }

    .spec-qty-btn.minus {
        border-right: 1px solid #e5e7eb;
    }

    .spec-qty-btn.plus {
        border-left: 1px solid #e5e7eb;
    }

.spec-qty-input {
    width: 48px;
    height: 36px;
    border: none;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    background: #fff;
    outline: none;
    -moz-appearance: textfield;
}

    .spec-qty-input::-webkit-outer-spin-button,
    .spec-qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
/* 弹窗确认按钮 */
.spec-sheet-confirm {
    display: block;
    width: calc(100% - 40px);
    margin: 8px 20px 12px;
    height: 46px;
    border-radius: 23px;
    border: none;
    background: linear-gradient(135deg, #2e8bcc, #2563eb);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px rgba(46, 139, 204, 0.3);
    transition: all 0.2s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

    .spec-sheet-confirm:active {
        transform: scale(0.96);
        box-shadow: 0 2px 8px rgba(46, 139, 204, 0.2);
    }

/* 响应式微调 */
@media (min-width: 500px) {
    .pd-swiper-wrap {
        max-height: 460px;
    }

    .pd-bottom-bar {
        padding: 8px 24px;
        gap: 14px;
    }

    .spec-sheet-panel {
        border-radius: 24px 24px 0 0;
    }
}



/* ==================== 商品列表页 CSS（追加到 Home.css） ==================== */
/* 插入位置：Home.css 文件末尾 */
 
.pl-title-wrap {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 搜索折叠栏 ===== */
.pl-search-collapse {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    animation: plSlideDown 0.25s ease;
}

@keyframes plSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 60px;
    }
}

.pl-search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f5f7fa;
    border-radius: 20px;
    padding: 8px 14px;
    gap: 6px;
}

.pl-search-icon {
    font-size: 16px;
    color: #9ca3af;
    flex-shrink: 0;
}

.pl-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #1f2937;
    outline: none;
}

    .pl-search-input::placeholder {
        color: #c5c9d2;
    }

.pl-search-clear {
    font-size: 16px;
    color: #c5c9d2;
    cursor: pointer;
    flex-shrink: 0;
}

    .pl-search-clear:active {
        color: #6b7280;
    }

.pl-search-cancel-btn {
    background: none;
    border: none;
    font-size: 14px;
    color: #2e8bcc;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    padding: 6px 4px;
}

/* ===== 分类筛选标签行 ===== */
.pl-category-strip {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    border-bottom: 1px solid #f9fafb;
}

    .pl-category-strip::-webkit-scrollbar {
        display: none;
    }

.pl-cat-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    background: #f5f7fa;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    user-select: none;
}

    .pl-cat-tag.active {
        background: #2e8bcc;
        color: #fff;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(46,139,204,0.3);
    }

    .pl-cat-tag:active {
        transform: scale(0.95);
    }

/* ===== 排序 & 筛选操作行 ===== */
.pl-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    position: sticky;
    top: 0;
    z-index: 8;
}

.pl-sort-group {
    display: flex;
    gap: 2px;
}

.pl-sort-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 11px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    user-select: none;
}

    .pl-sort-item.active {
        color: #2e8bcc;
        font-weight: 700;
        background: #eef6fc;
    }

.pl-sort-arrows {
    display: inline-flex;
    flex-direction: column;
    line-height: 0.6;
    font-size: 10px;
    color: #c5c9d2;
}

.pl-sort-item.active .pl-sort-arrows {
    color: #2e8bcc;
}

.pl-sort-item.active.asc .pl-arrow-up {
    color: #2e8bcc;
    font-weight: bold;
}

.pl-sort-item.active.desc .pl-arrow-down {
    color: #2e8bcc;
    font-weight: bold;
}

.pl-arrow-up, .pl-arrow-down {
    font-size: 10px;
    display: block;
    height: 7px;
    overflow: hidden;
}

.pl-filter-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    background: #f5f7fa;
    border-radius: 18px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

    .pl-filter-btn:active {
        background: #e5e7eb;
    }

.pl-filter-dot {
    position: absolute;
    top: 2px;
    right: 6px;
    width: 7px;
    height: 7px;
    background: #ef4444;
    border-radius: 50%;
    border: 1.5px solid #fff;
}

/* ===== 页面内容 ===== */
.pl-page-content {
    background: #f8fafb;
    padding-top: 0 !important;
}

/* ===== 加载中 ===== */
.pl-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 14px;
    color: #9ca3af;
    font-size: 14px;
}

.pl-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #2e8bcc;
    border-radius: 50%;
    animation: plSpin 0.8s linear infinite;
}

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

/* ===== 商品网格 ===== */
.pl-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 10px;
}
    /* 列表模式（单列） */
    .pl-product-grid.list-mode {
        grid-template-columns: 1fr;
    }

        .pl-product-grid.list-mode .pl-card {
            display: flex;
            flex-direction: row;
            gap: 10px;
            padding: 10px;
        }

        .pl-product-grid.list-mode .pl-card-img {
            width: 110px;
            height: 110px;
            flex-shrink: 0;
            border-radius: 10px;
        }

        .pl-product-grid.list-mode .pl-card-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .pl-product-grid.list-mode .pl-card-name {
            font-size: 14px;
            -webkit-line-clamp: 2;
        }

        .pl-product-grid.list-mode .pl-card-desc {
            font-size: 11px;
        }

        .pl-product-grid.list-mode .pl-card-cart {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

/* ===== 商品卡片微调 ===== */
.pl-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

    .pl-card:active {
        transform: scale(0.98);
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }

.pl-card-img {
    position: relative;
    width: 100%;
    height: 150px;
    background: linear-gradient(135deg, #e8f4fd 0%, #dceefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .pl-card-img .product-icon-large {
        font-size: 48px;
        color: #2e8bcc;
        opacity: 0.6;
    }

    .pl-card-img .product-tag {
        position: absolute;
        top: 8px;
        left: 8px;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        color: #fff;
    }

        .pl-card-img .product-tag.hot {
            background: #ef4444;
        }

        .pl-card-img .product-tag.new {
            background: #10b981;
        }

        .pl-card-img .product-tag.vip {
            background: #c8943e;
        }

.pl-wishlist {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .pl-wishlist i {
        font-size: 14px;
        color: #9ca3af;
    }

    .pl-wishlist.liked i {
        color: #ef4444;
    }

.pl-card-info {
    padding: 8px 10px 10px;
    position: relative;
}

.pl-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.pl-card-desc {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.pl-card-tag-item {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    background: #fef3c7;
    color: #b45309;
    font-weight: 500;
}

.pl-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pl-card-price {
    font-size: 16px;
    font-weight: 700;
    color: #e74c3c;
}

    .pl-card-price .unit {
        font-size: 12px;
        font-weight: 600;
    }

.pl-card-sold {
    font-size: 10px;
    color: #b0b7c3;
}

.pl-card-cart {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2e8bcc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(46,139,204,0.35);
}

    .pl-card-cart:active {
        transform: scale(0.9);
        background: #2473a8;
    }

    .pl-card-cart i {
        font-size: 14px;
        color: #fff;
    }

/* ===== 空状态 ===== */
.pl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.pl-empty-icon {
    font-size: 56px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.pl-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
}

.pl-empty-desc {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 20px;
}

.pl-empty-btn {
    padding: 10px 24px;
    border-radius: 20px;
    border: 1px solid #2e8bcc;
    background: #fff;
    color: #2e8bcc;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .pl-empty-btn:active {
        background: #eef6fc;
    }

/* ===== 加载更多 ===== */
.pl-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #9ca3af;
    font-size: 13px;
    gap: 8px;
}

.pl-spinner-sm {
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    border-top-color: #2e8bcc;
    border-radius: 50%;
    animation: plSpin 0.8s linear infinite;
}

.pl-no-more {
    text-align: center;
    padding: 20px;
    color: #d1d5db;
    font-size: 12px;
}

/* ===== 回到顶部 ===== */
.pl-back-top {
    position: fixed;
    right: 16px;
    bottom: 100px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    transition: all 0.3s;
    animation: plFadeIn 0.3s ease;
}

@keyframes plFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pl-back-top:active {
    transform: scale(0.9);
    background: #f5f7fa;
}

.pl-back-top i {
    font-size: 20px;
    color: #4b5563;
}

/* ===== 筛选弹窗 ===== */
.filter-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
    display: none;
    animation: plFadeInBg 0.3s ease;
}

@keyframes plFadeInBg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.filter-sheet-overlay.active {
    display: flex;
    align-items: flex-end;
}

.filter-sheet-panel {
    width: 100%;
    max-height: 78vh;
    background: #fff;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: plSlideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes plSlideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.filter-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
}

.filter-sheet-handle-bar {
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
}

.filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px 12px;
    border-bottom: 1px solid #f3f4f6;
}

.filter-sheet-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}

.filter-reset-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.2s;
}

    .filter-reset-btn:active {
        background: #f3f4f6;
    }

.filter-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
    -webkit-overflow-scrolling: touch;
}

.filter-section {
    margin-bottom: 18px;
}

    .filter-section:last-child {
        margin-bottom: 0;
    }

.filter-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
}
/* 价格预设 */
.filter-price-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.filter-price-tag {
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    background: #f5f7fa;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

    .filter-price-tag.active {
        background: #2e8bcc;
        color: #fff;
        font-weight: 600;
    }

.filter-price-custom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-price-input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    background: #f9fafb;
    min-width: 0;
}

    .filter-price-input:focus {
        border-color: #2e8bcc;
        background: #fff;
    }

.filter-price-sep {
    color: #9ca3af;
    font-weight: 600;
    flex-shrink: 0;
}
/* 标签网格 */
.filter-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-tag-item {
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    background: #f5f7fa;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

    .filter-tag-item.active {
        background: #2e8bcc;
        color: #fff;
        font-weight: 600;
    }

    .filter-tag-item:active {
        transform: scale(0.95);
    }
/* 底部确认按钮 */
.filter-sheet-footer {
    padding: 12px 18px;
    border-top: 1px solid #f3f4f6;
    background: #fff;
}

.filter-confirm-btn {
    width: 100%;
    padding: 13px;
    border-radius: 25px;
    border: none;
    background: #2e8bcc;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

    .filter-confirm-btn:active {
        background: #2473a8;
        transform: scale(0.98);
    }



/* ==================== 搜索页样式 ==================== */

/* 导航栏调整 */
.search-navbar .navbar-inner {
    padding: 0 8px;
}

.search-navbar .back-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}

    .search-navbar .back-btn:active {
        background: #f3f4f6;
    }

/* 搜索输入行 */
.search-input-row {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}

.search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f3f4f6;
    border-radius: 20px;
    padding: 7px 12px;
    gap: 6px;
    transition: background 0.2s;
}

    .search-input-wrap:focus-within {
        background: #e5e7eb;
    }

.search-input-icon {
    font-size: 16px;
    color: #9ca3af;
    flex-shrink: 0;
}

.search-input-field {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #1f2937;
    outline: none;
    min-width: 0;
}

    .search-input-field::placeholder {
        color: #9ca3af;
        font-size: 14px;
    }

.search-input-clear {
    font-size: 18px;
    color: #b0b7c3;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

    .search-input-clear:active {
        color: #6b7280;
    }

.search-action-btn {
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 700;
    color: #2e8bcc;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    transition: background 0.2s;
}

    .search-action-btn:active {
        background: #eef6fc;
    }

/* 搜索页面内容 */
.search-page-content {
    background: #fff;
}

/* 搜索联想面板 */
.search-suggest-panel {
    padding: 8px 0;
}

.search-suggest-list {
    display: flex;
    flex-direction: column;
}

.search-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
    transition: background 0.15s;
}

    .search-suggest-item:active {
        background: #f9fafb;
    }

    .search-suggest-item i {
        font-size: 16px;
        color: #9ca3af;
    }

.search-suggest-highlight {
    color: #2e8bcc;
    font-weight: 600;
}

/* 默认面板区域 */
.search-default-panel {
    padding: 0 16px 20px;
    overflow-y: auto;
}

.search-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 12px;
}

.search-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
}

.search-section-action {
    font-size: 18px;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

    .search-section-action:active {
        color: #6b7280;
        background: #f3f4f6;
    }

/* 搜索标签网格 */
.search-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.search-tag-item {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    background: #f5f7fa;
    border-radius: 18px;
    font-size: 13px;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

    .search-tag-item:active {
        background: #e5e7eb;
        transform: scale(0.96);
    }

    .search-tag-item.hot-tag {
        background: #fef3c7;
        color: #b45309;
    }

    .search-tag-item.new-tag {
        background: #d1fae5;
        color: #065f46;
    }

/* 搜索发现列表 */
.search-discovery-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.search-discovery-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    padding: 5px 0;
}

    .search-discovery-item i {
        font-size: 14px;
        color: #f59e0b;
    }

    .search-discovery-item:active {
        color: #2e8bcc;
    }


/* ==================== 新用户活动弹窗样式（） ==================== */
.newuser-gift-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

    .newuser-gift-overlay.active {
        display: flex;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.newuser-gift-card {
    position: relative;
    width: 300px;
    background: linear-gradient(145deg, #ffffff 0%, #fff8f0 100%);
    border-radius: 24px;
    padding: 30px 24px 24px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    animation: giftBounceIn 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes giftBounceIn {
    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.gift-close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9ca3af;
    font-size: 16px;
    transition: all 0.2s;
}

    .gift-close-btn:active {
        background: rgba(0,0,0,0.1);
        color: #6b7280;
    }

.gift-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 50%;
    margin-bottom: 16px;
    font-size: 36px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(245,158,11,0.4);
}

.gift-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(245,158,11,0.5);
    animation: giftPulse 2s ease-out infinite;
}

@keyframes giftPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.gift-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.gift-amount {
    font-size: 52px;
    font-weight: 800;
    color: #e74c3c;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -2px;
}

.gift-unit {
    font-size: 24px;
    font-weight: 700;
    vertical-align: super;
    margin-right: 2px;
}

.gift-desc {
    font-size: 14px;
    color: #4b5563;
    font-weight: 500;
    margin-bottom: 4px;
}

.gift-sub-desc {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 24px;
}

.gift-claim-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 30px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(245,158,11,0.4);
    transition: all 0.2s;
}

    .gift-claim-btn:active {
        transform: scale(0.97);
        box-shadow: 0 4px 12px rgba(245,158,11,0.3);
    }

/* ==================== 防伪查询页面样式（追加到 Home.css 末尾） ==================== */
.anti-fake-navbar .navbar-inner {
    padding: 0 8px;
}

.anti-fake-navbar .back-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}

    .anti-fake-navbar .back-btn:active {
        background: #f3f4f6;
    }

.af-page-content {
    background: #f8fafb;
}

/* 搜索卡片 */
.af-search-card {
    background: #fff;
    margin: 12px;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.af-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.af-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f5f7fa;
    border-radius: 12px;
    padding: 10px 14px;
    gap: 8px;
    border: 1.5px solid transparent;
    transition: all 0.2s;
}

    .af-input-wrap:focus-within {
        background: #fff;
        border-color: #2e8bcc;
    }

.af-input-icon {
    font-size: 18px;
    color: #9ca3af;
    flex-shrink: 0;
}

.af-input-field {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #1f2937;
    outline: none;
    min-width: 0;
}

    .af-input-field::placeholder {
        color: #c5c9d2;
        font-size: 14px;
    }

.af-input-clear {
    font-size: 18px;
    color: #b0b7c3;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

    .af-input-clear:active {
        color: #6b7280;
    }

.af-scan-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #2e8bcc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(46,139,204,0.3);
    transition: all 0.2s;
}

    .af-scan-btn:active {
        background: #2473a8;
        transform: scale(0.94);
    }

    .af-scan-btn i {
        font-size: 20px;
        color: #fff;
    }

.af-query-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #2e8bcc, #1a6daa);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(46,139,204,0.25);
    transition: all 0.2s;
}

    .af-query-btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

.af-official-tip {
    margin-top: 10px;
    font-size: 12px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .af-official-tip i {
        color: #10b981;
        font-size: 14px;
    }

/* 结果区域 */
.af-result-area {
    margin: 0 12px 12px;
    animation: afFadeSlideIn 0.4s ease;
}

@keyframes afFadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.af-result-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.af-result-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.af-status-icon.valid {
    font-size: 28px;
    color: #10b981;
}

.af-status-icon.invalid {
    font-size: 28px;
    color: #ef4444;
}

.af-status-text.valid {
    color: #10b981;
}

.af-status-text.invalid {
    color: #ef4444;
}

.af-result-detail {
    border-top: 1px solid #f3f4f6;
    padding-top: 14px;
}

.af-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #4b5563;
}

    .af-detail-row .label {
        color: #9ca3af;
        flex-shrink: 0;
        margin-right: 12px;
    }

    .af-detail-row .value {
        text-align: right;
        font-weight: 500;
        color: #1f2937;
        word-break: break-all;
    }

.af-official-contact {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 12px;
    padding: 12px;
}

    .af-official-contact i {
        font-size: 24px;
        color: #2e8bcc;
    }

.af-contact-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.af-contact-phone {
    font-weight: 700;
    color: #1f2937;
    font-size: 15px;
}

.af-warning-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #fef2f2;
    border-radius: 10px;
    font-size: 13px;
    color: #b91c1c;
}

    .af-warning-tip i {
        font-size: 18px;
    }

/* 历史记录 */
.af-history-section {
    margin: 0 12px 12px;
}

.af-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 4px;
}

.af-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.af-section-action {
    font-size: 12px;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

    .af-section-action:active {
        background: #f3f4f6;
        color: #6b7280;
    }

.af-history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.af-history-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    background: #fff;
    border-radius: 18px;
    font-size: 13px;
    color: #4b5563;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: all 0.2s;
}

    .af-history-item:active {
        background: #f5f7fa;
        transform: scale(0.96);
    }

    .af-history-item i {
        font-size: 12px;
        color: #10b981;
    }

/* 底部官方信息 */
.af-footer {
    margin: 20px 12px;
    padding: 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    color: #4b5563;
}

.af-footer-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .af-footer-line i {
        font-size: 16px;
        color: #2e8bcc;
        width: 20px;
        text-align: center;
    }


/* ==================== 防伪引导弹窗样式（追加到 Home.css 末尾） ==================== */
.antifake-guide-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9999; /* 低于新用户弹窗的999，但如果同时出现可调整 */
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

    .antifake-guide-overlay.active {
        display: flex;
    }

.antifake-guide-card {
    position: relative;
    width: 300px;
    background: #fff;
    border-radius: 24px;
    padding: 28px 24px 24px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    animation: giftBounceIn 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.guide-close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9ca3af;
    font-size: 16px;
    transition: all 0.2s;
}

    .guide-close-btn:active {
        background: rgba(0,0,0,0.1);
        color: #6b7280;
    }

.guide-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #2e8bcc, #1a6daa);
    border-radius: 50%;
    margin-bottom: 16px;
    font-size: 36px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(46,139,204,0.35);
}

.guide-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
}

.guide-desc {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.5;
    margin-bottom: 16px;
}

.guide-features {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 22px;
    font-size: 12px;
    color: #10b981;
}

    .guide-features span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .guide-features i {
        font-size: 14px;
    }

.guide-query-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 30px;
    background: linear-gradient(135deg, #2e8bcc, #1a6daa);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(46,139,204,0.35);
    transition: all 0.2s;
}

    .guide-query-btn:active {
        transform: scale(0.97);
        box-shadow: 0 4px 12px rgba(46,139,204,0.25);
    }

/* 浏览器扫码组件 */
.af-scan-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
}

    .af-scan-overlay.active {
        display: flex;
    }

.af-scan-box {
    width: 90vw;
    max-width: 360px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
}

.af-scan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #2e8bcc;
    color: #fff;
}

.af-scan-title {
    font-size: 14px;
    font-weight: 600;
}

.af-scan-close {
    font-size: 22px;
    cursor: pointer;
}

.af-scan-viewport {
    position: relative;
    width: 100%;
    height: 260px;
    background: #000;
    overflow: hidden;
}

    .af-scan-viewport video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.af-scan-frame {
    position: absolute;
    top: 15%;
    left: 15%;
    right: 15%;
    bottom: 15%;
    border: 2px solid #2e8bcc;
    border-radius: 8px;
    box-shadow: 0 0 0 999px rgba(0,0,0,0.4);
}

.af-scan-tip {
    margin: 10px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}
/* 确保视频全屏显示并适配 */
.af-scan-viewport video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* 新增：避免 inline 间隙 */
}
    /* 修复 iOS 全屏问题 */
    .af-scan-viewport video::-webkit-media-controls {
        display: none !important;
    }
/* 扫码容器占满视口 */
#afScanVideoContainer {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
    /* 保证库生成的 video 标签自适应 */
    #afScanVideoContainer video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }

/* 扫描线动画（追加到 Home.css 末尾） */
.af-scan-line {
    position: absolute;
    top: 15%;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2e8bcc, #2e8bcc, transparent);
    box-shadow: 0 0 8px rgba(46,139,204,0.7);
    animation: scanMove 2s ease-in-out infinite;
    z-index: 5;
    pointer-events: none;
}

@keyframes scanMove {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(160px);
        opacity: 0.9;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 追加到 Home.css 末尾 */
.float-btn.antifake {
    position: relative;
    background: #2e8bcc;
    animation: antifakeGlow 1.5s ease-in-out infinite;
}

.antifake-pulse {
    position: absolute;
    top: -10px;
    right: -15px;
    bottom: -4px;
    left: 0px;
    border-radius: 50%;
    border: 2px solid rgba(46, 139, 204, 0.4);
    animation: antifakeRing 1.5s ease-out infinite;
    pointer-events: none;
    color: white;
    font-weight: bold;
}

@keyframes antifakeGlow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(46,139,204,0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 18px rgba(46,139,204,0.8);
        transform: scale(1.08);
    }
}

@keyframes antifakeRing {
    0% {
        transform: scale(0.9);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}



/* ==================== 收银台样式（追加到 Home.css 末尾） ==================== */
.checkout-page-content {
    background: #f5f7fa;
}

/* 地址卡片 */
.checkout-address-card {
    background: #fff;
    margin: 10px;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
}

.address-empty {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 15px;
}

    .address-empty i:first-child {
        font-size: 20px;
        color: #2e8bcc;
    }

.address-detail {
    width: 100%;
}

.address-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

    .address-top i:first-child {
        font-size: 20px;
        color: #2e8bcc;
    }

.address-info {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    gap: 12px;
}

.address-phone {
    color: #6b7280;
    font-weight: 400;
}

.address-full {
    font-size: 14px;
    color: #4b5563;
    margin-left: 28px;
}

/* 商品清单 */
.checkout-goods-card {
    background: #fff;
    margin: 0 10px 10px;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.checkout-section-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1f2937;
}

.checkout-goods-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}

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

.goods-thumb {
    width: 60px;
    height: 60px;
    background: #e8f4fd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #2e8bcc;
    flex-shrink: 0;
}
    .goods-thumb img{
        width:100%;
        border-radius:10px;
    }

    .goods-detail {
        flex: 1;
    }

.goods-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.goods-spec {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 6px;
}

.goods-price-qty {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.goods-price {
    font-size: 15px;
    font-weight: 700;
    color: #e74c3c;
}

.goods-qty {
    font-size: 13px;
    color: #6b7280;
}

/* 支付方式 */
.checkout-payment-card {
    background: #fff;
    margin: 0 10px 10px;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
    gap: 10px;
    font-size: 15px;
    color: #1f2937;
    font-weight: 500;
}

.payment-icon {
    font-size: 24px;
}

    .payment-icon.wechat {
        color: #07c160;
    }

    .payment-icon.alipay {
        color: #1677ff;
    }

    .payment-icon.unionpay {
        color: #e74c3c;
    }

.check-icon {
    font-size: 20px;
    color: #2e8bcc;
    margin-left: auto;
    display: none;
}

.payment-item.active .check-icon {
    display: block;
}

.payment-item.active {
    font-weight: 600;
}

/* 优惠券 */
.checkout-coupon-card {
    background: #fff;
    margin: 0 10px 10px;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}

.coupon-status {
    flex: 1;
    text-align: right;
    color: #9ca3af;
    margin-right: 4px;
    font-size: 13px;
}

/* 金额明细 */
.checkout-amount-card {
    background: #fff;
    margin: 0 10px 10px;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: #4b5563;
}

    .amount-row.total {
        border-top: 1px solid #f3f4f6;
        margin-top: 4px;
        padding-top: 12px;
        font-size: 16px;
        font-weight: 700;
        color: #1f2937;
    }

.discount-value {
    color: #e74c3c;
    font-weight: 600;
}

/* 备注 */
.checkout-remark-card {
    background: #fff;
    margin: 0 10px 10px;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.remark-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #1f2937;
    background: transparent;
}

    .remark-input::placeholder {
        color: #c5c9d2;
    }

/* 底部提交栏 */
.checkout-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    z-index: 50;
}

.checkout-total-info {
    flex: 1;
}

.total-label {
    font-size: 14px;
    color: #6b7280;
}

.total-price {
    font-size: 20px;
    font-weight: 800;
    color: #e74c3c;
}

.checkout-submit-btn {
    background: #e74c3c;
    border: none;
    color: #fff;
    padding: 12px 28px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(231,76,60,0.3);
    transition: all 0.2s;
}

    .checkout-submit-btn:active {
        background: #c0392b;
        transform: scale(0.97);
    }


/* ==================== 地址管理样式（追加到 Home.css 末尾） ==================== */
.addr-page-content {
    background: #f5f7fa;
}

.addr-list {
    padding: 10px;
    padding-top:60px;
}

.addr-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    position: relative;
    cursor: pointer;
}

    .addr-card .addr-default-tag {
        position: absolute;
        top: 10px;
        right: 12px;
        font-size: 11px;
        background: #eef6fc;
        color: #2e8bcc;
        padding: 2px 8px;
        border-radius: 10px;
        font-weight: 500;
    }

    .addr-card .addr-top {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }

    .addr-card .addr-name {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
    }

    .addr-card .addr-phone {
        font-size: 14px;
        color: #6b7280;
        margin-left: 10px;
    }

    .addr-card .addr-detail {
        font-size: 14px;
        color: #4b5563;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .addr-card .addr-actions {
        display: flex;
        justify-content: flex-end;
        gap: 16px;
        border-top: 1px solid #f3f4f6;
        padding-top: 10px;
    }

    .addr-card .addr-action-btn {
        font-size: 13px;
        color: #6b7280;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        width:auto;
    }

.addr-action-btn:active {
    color: #2e8bcc;
}

.addr-empty {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

    .addr-empty i {
        font-size: 48px;
        margin-bottom: 12px;
        display: block;
    }

    .addr-empty p {
        font-size: 14px;
    }

.addr-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    z-index: 50;
}

.addr-add-btn {
    width: 100%;
    padding: 12px;
    background: #2e8bcc;
    border: none;
    border-radius: 24px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

    .addr-add-btn:active {
        background: #2473a8;
    }

/* 地址编辑弹窗 */
.addr-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 300;
    display: none;
    align-items: flex-end;
}

    .addr-edit-overlay.active {
        display: flex;
    }

.addr-edit-panel {
    width: 100%;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 0;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.addr-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.addr-edit-title {
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
}

.addr-edit-close {
    font-size: 22px;
    color: #9ca3af;
    cursor: pointer;
}

.addr-edit-body {
    padding: 16px 20px;
}

.addr-form-item {
    margin-bottom: 14px;
}

    .addr-form-item label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #4b5563;
        margin-bottom: 6px;
    }

    .addr-form-item input,
    .addr-form-item textarea {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        color: #1f2937;
        outline: none;
        background: #f9fafb;
        box-sizing: border-box;
        resize: vertical;
    }

        .addr-form-item input:focus,
        .addr-form-item textarea:focus {
            border-color: #2e8bcc;
            background: #fff;
        }

.addr-default-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* 开关样式 */
.addr-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

    .addr-switch input {
        display: none;
    }

.addr-switch-slider {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 12px;
    transition: 0.2s;
    cursor: pointer;
}

    .addr-switch-slider::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        left: 2px;
        bottom: 2px;
        background: #fff;
        border-radius: 50%;
        transition: 0.2s;
    }

.addr-switch input:checked + .addr-switch-slider {
    background: #2e8bcc;
}

    .addr-switch input:checked + .addr-switch-slider::before {
        transform: translateX(20px);
    }

.addr-edit-footer {
    padding: 12px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.addr-save-btn {
    width: 100%;
    padding: 12px;
    background: #2e8bcc;
    border: none;
    border-radius: 24px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

    .addr-save-btn:active {
        background: #2473a8;
    }

.addr-delete-btn {
    width: 100%;
    padding: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    color: #e74c3c;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

    .addr-delete-btn:active {
        background: #fef2f2;
    }

/* ==================== 地址选择器样式（追加到 Home.css 末尾） ==================== */
.addr-region-cascade {
    display: flex;
    gap: 8px;
}

.addr-select {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    background: #f9fafb;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

    .addr-select:focus {
        border-color: #2e8bcc;
        background: #fff;
    }

/* ==================== 订单页面样式（追加到 Home.css） ==================== */
.orders-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    position: sticky;
    top: 0;
    z-index: 5;
    padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
}

.orders-tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

    .orders-tab.active {
        color: #2e8bcc;
        font-weight: 700;
    }

        .orders-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background: #2e8bcc;
            border-radius: 2px;
        }

.orders-page-content {
    background: #f5f7fa;
}
.order-card {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    color: #6b7280;
}

.order-status {
    font-weight: 600;
    color: #e74c3c;
}

    .order-status.paid {
        color: #f59e0b;
    }

    .order-status.shipped {
        color: #2e8bcc;
    }

    .order-status.completed {
        color: #10b981;
    }

.order-goods {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.order-goods-thumb {
    width: 64px;
    height: 64px;
    background: #e8f4fd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #2e8bcc;
    flex-shrink: 0;

}
.order-goods-thumb img{
    width:100%;
    height:100%;
    border-radius:8px;
}
    .order-goods-info {
    flex: 1;
}

.order-goods-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.order-goods-spec {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 6px;
}

.order-goods-price {
    font-size: 14px;
    font-weight: 700;
    color: #e74c3c;
}

.order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}

.order-total {
    font-size: 13px;
    color: #E91E63;
}

    .order-total strong {
        font-size: 16px;
        color: #E91E63;
    }

.order-actions {
    display: flex;
    gap: 8px;
}
#ordersList{
    margin-bottom:100px;
}

.order-btn {
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s;
}

    .order-btn.primary {
        background: #2e8bcc;
        border-color: #2e8bcc;
        color: #fff;
    }

    .order-btn.danger {
        color: #e74c3c;
        border-color: #e74c3c;
    }

    .order-btn:active {
        opacity: 0.8;
    }

.orders-empty {
    text-align: center;
    padding: 80px 20px;
    color: #9ca3af;
}

    .orders-empty i {
        font-size: 48px; 
        display: block;
        margin:12px auto;
    }

/* ========== 链动2+1卡片样式（追加到 Home.css） ========== */
.chain-card {
    background: #fff;
    margin: 12px 16px;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.chain-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.chain-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chain-level {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.chain-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    text-align: center;
}

.chain-stat-num {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
}

    .chain-stat-num.gold {
        color: #d97706;
    }

    .chain-stat-num.green {
        color: #10b981;
    }

.chain-stat-label {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.chain-progress {
    margin-bottom: 14px;
}

.chain-progress-text {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 6px;
}

.chain-progress-bar {
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.chain-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.chain-action {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.chain-invite-btn {
    padding: 8px 18px;
    background: #d97706;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.chain-code {
    font-size: 13px;
    color: #6b7280;
}

/* ========== 合伙人权益弹窗样式（追加到 Home.css） ========== */
.partner-desc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

    .partner-desc-overlay.active {
        display: flex;
    }

.partner-desc-card {
    /*width: 320px;*/
    background: #fff;
    border-radius: 20px;
    padding: 24px 20px 20px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    animation: giftBounceIn 0.5s ease;
}

.partner-desc-close {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 20px;
    color: #9ca3af;
    cursor: pointer;
}

.partner-desc-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

    .partner-desc-title i {
        color: #d97706;
    }

.partner-desc-body {
    margin-bottom: 18px;
}

.partner-rule {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

    .partner-rule i {
        color: #10b981;
        font-size: 16px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .partner-rule em.gold {
        color: #d97706;
        font-style: normal;
        font-weight: 700;
    }

.partner-tip {
    font-size: 13px;
    color: #6b7280;
    background: #fef3c7;
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 10px;
}

.partner-desc-btn {
    width: 100%;
    padding: 12px;
    background: #d97706;
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

    .partner-desc-btn:active {
        background: #b45309;
        transform: scale(0.97);
    }

/* 权益入口链接样式（追加到 Home.css） */
.chain-desc-link {
    font-size: 12px;
    font-weight: 500;
    color: #2e8bcc;
    margin-left: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #eef6fc;
    padding: 2px 8px;
    border-radius: 10px;
}

    .chain-desc-link i {
        font-size: 14px;
    }

/* ==================== 小超市商城样式（追加到 Home.css 末尾） ==================== */

/* 导航栏 */
.sm-navbar .navbar-inner {
    padding: 0 6px;
}

/* 页面内容 */
.sm-page-content {
    background: #f5f7fa;
    padding-top:60px;
}

/* 搜索栏 */
.sm-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    cursor: pointer;
}

.sm-search-icon {
    font-size: 16px;
    color: #9ca3af;
}

.sm-search-placeholder {
    font-size: 14px;
    color: #c5c9d2;
}

/* 分类Tab */
.sm-category-tabs {
    display: flex;
    gap: 8px;
    padding: 4px 12px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
}

    .sm-category-tabs::-webkit-scrollbar {
        display: none;
    }

.sm-cat-tab {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    user-select: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

    .sm-cat-tab.active {
        background: #2e8bcc;
        color: #fff;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(46,139,204,0.3);
    }

    .sm-cat-tab:active {
        transform: scale(0.95);
    }

/* 促销Banner */
.sm-promo-banner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 0 12px 12px;
}

.sm-promo-item {
    background: linear-gradient(135deg, #fff5e6, #ffe9cc);
    border-radius: 12px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

    .sm-promo-item i {
        font-size: 20px;
        color: #d97706;
    }

.sm-promo-title {
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
}

.sm-promo-desc {
    font-size: 10px;
    color: #b45309;
}

/* ========== 差异CSS：替换原 .sm-product-grid 及 .sm-card 相关样式 ========== */

/* 商品列表（左图右信息） */
.sm-product-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px;
}

.sm-card {
    display: flex;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

    .sm-card:active {
        transform: scale(0.99);
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }

/* 左侧图片区 */
.sm-card-img {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #e8f4fd 0%, #dceefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 44px;
    color: #2e8bcc;
}

.sm-card-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: #ef4444;
}

    .sm-card-tag.new {
        background: #10b981;
    }

/* 右侧信息区 */
.sm-card-info {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.sm-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.sm-card-spec {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 6px;
}

/* 价格 + 加购按钮 */
.sm-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.sm-card-price {
    font-size: 18px;
    font-weight: 700;
    color: #e74c3c;
    line-height: 1;
}

    .sm-card-price .unit {
        font-size: 13px;
    }

.sm-card-origin {
    font-size: 12px;
    color: #b0b7c3;
    text-decoration: line-through;
    margin-left: 6px;
}

.sm-add-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2e8bcc;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(46,139,204,0.35);
}

    .sm-add-btn:active {
        transform: scale(0.9);
        background: #2473a8;
    }

    .sm-add-btn i {
        font-size: 16px;
    }
/* 底部购物车悬浮栏 */
.sm-cart-bar {
    position: fixed;
    bottom: 60px;
    left: 12px;
    right: 12px;
    background: #fff;
    border-radius: 40px;
    padding: 8px 8px 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    z-index: 90;
    animation: smCartSlideUp 0.3s ease;
}

@keyframes smCartSlideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.sm-cart-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sm-cart-icon-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2e8bcc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

    .sm-cart-icon-wrap i {
        font-size: 20px;
    }

.sm-cart-badge-bar {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.sm-cart-total {
    display: flex;
    flex-direction: column;
}

.sm-cart-total-label {
    font-size: 11px;
    color: #9ca3af;
}

.sm-cart-total-price {
    font-size: 16px;
    font-weight: 700;
    color: #e74c3c;
}

.sm-checkout-btn {
    padding: 10px 24px;
    border-radius: 22px;
    background: #2e8bcc;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

    .sm-checkout-btn:active {
        background: #2473a8;
        transform: scale(0.97);
    }

/* 空状态 */
.sm-empty {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

    .sm-empty i {
        font-size: 48px;
        display: block;
        margin-bottom: 12px;
    }

    .sm-empty p {
        font-size: 14px;
        margin: 0;
    }

/* 首页小超市入口样式（追加到 Home.css） */
.sm-entry-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(245,158,11,0.15);
}

.sm-entry-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #d97706;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.sm-entry-info {
    flex: 1;
}

.sm-entry-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 2px;
}

.sm-entry-desc {
    font-size: 12px;
    color: #92400e;
}

.sm-entry-btn {
    font-size: 12px;
    color: #fff;
    background: #d97706;
    padding: 5px 12px;
    border-radius: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

    .sm-entry-btn i {
        font-size: 12px;
    }

    /* ==================== 打直饮水页面样式（追加到 Home.css 末尾） ==================== */

.water-page-content {
    background: #f0f7ff;
    padding-top: 60px;
}

/* 水站信息卡 */
.water-station-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 12px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(46,139,204,0.08);
}
.water-station-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2e8bcc, #1a6daa);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.water-station-info { flex: 1; min-width: 0; }
.water-station-name {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}
.water-station-addr {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.water-station-addr i { font-size: 13px; color: #9ca3af; }
.water-station-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #10b981;
    font-weight: 600;
    flex-shrink: 0;
}
.dot-online {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
    animation: dotPulse 1.5s infinite;
}
@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* 大余额卡片 */
.water-balance-card {
    margin: 0 12px 14px;
    padding: 24px 20px;
    background: linear-gradient(135deg, #2e8bcc, #1a6daa);
    border-radius: 18px;
    color: #fff;
    text-align: center;
    box-shadow: 0 6px 20px rgba(46,139,204,0.3);
    position: relative;
    overflow: hidden;
}
.water-balance-card::after {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}
.water-balance-label {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 6px;
}
.water-balance-value {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
}
.water-balance-value .unit {
    font-size: 22px;
    font-weight: 700;
    margin-right: 2px;
}
.water-balance-tips {
    font-size: 13px;
    opacity: 0.85;
    margin-top: 8px;
}
.water-balance-tips.low {
    color: #fecaca;
    font-weight: 600;
}

/* 通用区块标题 */
.water-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 12px 10px;
}

/* 打水金额选择 */
.water-amount-section {
    margin-bottom: 14px;
}
.water-amount-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 12px;
}
.water-amount-btn {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.water-amount-btn:active {
    transform: scale(0.97);
}
.water-amount-btn.active {
    border-color: #2e8bcc;
    background: #eef6fc;
    box-shadow: 0 4px 12px rgba(46,139,204,0.15);
}
.water-amount-price {
    font-size: 26px;
    font-weight: 800;
    color: #e74c3c;
    line-height: 1;
    margin-bottom: 6px;
}
.water-amount-btn.active .water-amount-price {
    color: #2e8bcc;
}
.water-amount-liter {
    font-size: 13px;
    color: #6b7280;
}

/* 支付方式 */
.water-pay-section {
    margin-bottom: 16px;
}
.water-pay-methods {
    display: flex;
    gap: 10px;
    padding: 0 12px;
}
.water-pay-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    transition: all 0.2s;
    position: relative;
}
.water-pay-item:active { transform: scale(0.98); }
.water-pay-item.active {
    border-color: #2e8bcc;
    color: #2e8bcc;
    background: #eef6fc;
}
.water-pay-item i:first-child {
    font-size: 22px;
    color: #2e8bcc;
}
.water-pay-item[data-pay="wechat"] i:first-child {
    color: #07c160;
}
.water-check {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 16px;
    color: #2e8bcc;
    display: none;
}
.water-pay-item.active .water-check {
    display: block;
}

/* 大按钮 */
.water-action-wrap {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.water-start-btn {
    width: 100%;
    padding: 20px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #2e8bcc, #1a6daa);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(46,139,204,0.35);
    transition: all 0.2s;
}
.water-start-btn:active {
    transform: scale(0.98);
    box-shadow: 0 4px 12px rgba(46,139,204,0.25);
}
.water-start-btn i { font-size: 26px; }
.water-recharge-btn {
    width: 100%;
    padding: 14px;
    border: 2px solid #2e8bcc;
    border-radius: 16px;
    background: #fff;
    color: #2e8bcc;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.water-recharge-btn:active {
    background: #eef6fc;
    transform: scale(0.98);
}

/* 使用说明 */
.water-notice {
    margin: 20px 12px;
    padding: 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.water-notice-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
}
.water-notice-item {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.8;
}

/* ========== 打水进行中弹层 ========== */
.water-progress-overlay,
.water-done-overlay,
.water-recharge-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}
.water-progress-overlay.active,
.water-done-overlay.active,
.water-recharge-overlay.active {
    display: flex;
}
.water-progress-card,
.water-done-card {
    width: 300px;
    background: #fff;
    border-radius: 24px;
    padding: 28px 24px 24px;
    text-align: center;
    animation: giftBounceIn 0.5s ease;
}
.water-progress-circle {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
}
.water-progress-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.water-progress-bg {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 8;
}
.water-progress-fill {
    fill: none;
    stroke: #2e8bcc;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 326.7;
    stroke-dashoffset: 326.7;
    transition: stroke-dashoffset 0.3s linear;
}
.water-progress-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    color: #2e8bcc;
    animation: waterWave 1.5s infinite;
}
@keyframes waterWave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.water-progress-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}
.water-progress-liter {
    font-size: 15px;
    color: #4b5563;
    margin-bottom: 6px;
}
.water-progress-liter strong {
    color: #2e8bcc;
    font-size: 20px;
}
.water-progress-amount {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}
.water-progress-amount strong {
    color: #e74c3c;
    font-size: 17px;
}
.water-stop-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 30px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.water-stop-btn:active {
    background: #e5e7eb;
}

/* ========== 打水完成弹层 ========== */
.water-done-icon {
    font-size: 60px;
    color: #10b981;
    margin-bottom: 12px;
}
.water-done-title {
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 6px;
}
.water-done-desc {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 18px;
}
.water-done-info {
    background: #f5f7fa;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.9;
    margin-bottom: 18px;
}
.water-done-info strong {
    color: #2e8bcc;
    font-size: 15px;
}
.water-done-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 30px;
    background: #2e8bcc;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 2px;
}
.water-done-btn:active {
    background: #2473a8;
}

/* ========== 充值弹窗 ========== */
.water-recharge-card {
    width: 340px;
    background: #fff;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    animation: giftBounceIn 0.5s ease;
}
.water-recharge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
}
.water-recharge-title {
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
}
.water-recharge-close {
    font-size: 22px;
    color: #9ca3af;
    cursor: pointer;
}
.water-recharge-body {
    padding: 16px 20px;
}
.water-recharge-current {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 14px;
}
.water-recharge-current strong {
    color: #2e8bcc;
    font-size: 16px;
}
.water-recharge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.water-recharge-item {
    background: #f5f7fa;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.water-recharge-item:active { transform: scale(0.96); }
.water-recharge-item.active {
    border-color: #2e8bcc;
    background: #eef6fc;
    box-shadow: 0 4px 12px rgba(46,139,204,0.15);
}
.water-recharge-price {
    font-size: 24px;
    font-weight: 800;
    color: #e74c3c;
    line-height: 1;
    margin-bottom: 4px;
}
.water-recharge-item.active .water-recharge-price {
    color: #2e8bcc;
}
.water-recharge-gift {
    font-size: 11px;
    color: #d97706;
    font-weight: 600;
    background: #fef3c7;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
}
.water-recharge-tip {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.5;
}
.water-recharge-submit {
    width: 100%;
    padding: 16px;
    border: none;
    background: #2e8bcc;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 1px;
}
.water-recharge-submit:active {
    background: #2473a8;
}