body.home-page {
    background: #f7f7f7;
}

.home-shell {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(1.35rem + env(safe-area-inset-bottom));
}

.brand-area {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #f3540a 0%, #ed4503 100%);
    color: #fff;
}

.brand-area::after {
    content: '';
    position: absolute;
    width: 2.8rem;
    height: 2.8rem;
    right: -1.2rem;
    top: -1.4rem;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.app-topbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.86rem;
    padding: max(0.16rem, env(safe-area-inset-top)) 0.28rem 0;
    font-size: 0.22rem;
}

.app-topbar .brand-name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.28rem;
    font-weight: 700;
}

.switch-merchant {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 0.2rem;
    cursor: pointer;
}

.merchant-card {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.18rem;
    margin: 0.18rem 0.14rem 0;
    padding: 0.18rem 0.2rem;
    background: #fff;
    color: #222;
    border-radius: 0.12rem;
    box-shadow: 0 0.06rem 0.2rem rgba(126, 45, 6, .16);
}

.merchant-logo {
    position: relative;
    display: grid;
    place-items: center;
    width: 0.66rem;
    height: 0.66rem;
    flex: 0 0 auto;
    border: 0.05rem double #c6c6c6;
    border-radius: 50%;
    background: radial-gradient(circle, #ef3434 0 38%, #b71212 39% 51%, #e5e5e5 52% 64%, #8c8c8c 65% 70%, #f5f5f5 71%);
    color: #fff;
    font-size: 0.22rem;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.merchant-info {
    min-width: 0;
}

.merchant-info .name {
    font-size: 0.24rem;
    font-weight: 600;
}

.merchant-info .desc {
    margin-top: 0.02rem;
    color: #555;
    font-size: 0.17rem;
    line-height: 1.45;
}

.contact-strip {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0.14rem;
    padding: 0.12rem 0.1rem 0.16rem;
    border-top: 1px solid rgba(255,255,255,.2);
}

.contact-action {
    position: relative;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 0.17rem;
    cursor: pointer;
    white-space: nowrap;
}

.contact-action:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 0;
    width: 1px;
    height: 60%;
    background: rgba(255,255,255,.58);
}

.category-bar {
    display: flex;
    align-items: flex-end;
    height: 0.78rem;
    padding: 0 0.2rem;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.category-item {
    height: 100%;
    padding: 0.27rem 0.16rem 0.16rem;
    border: 0;
    border-bottom: 0.03rem solid transparent;
    background: transparent;
    color: #666;
    font-size: 0.24rem;
    font-weight: 600;
}

.category-item.active {
    color: var(--brand-orange);
    border-bottom-color: var(--brand-orange);
}

.home-content {
    padding: 0.14rem 0.18rem 0.3rem;
}

.home-search {
    position: relative;
    display: flex;
    align-items: center;
    height: 0.48rem;
    margin-bottom: 0.16rem;
    padding: 0 0.14rem;
    border-radius: 0.12rem;
    background: #fff;
    border: 1px solid #eee;
}

.home-search .search-icon {
    margin-right: 0.08rem;
    color: #aaa;
    font-size: 0.2rem;
}

.home-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #333;
    font-size: 0.19rem;
    background: transparent;
}

.course-list {
    display: grid;
    gap: 0.14rem;
}

.course-card {
    margin: 0;
    padding: 0.17rem 0.18rem;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 0.09rem;
    box-shadow: 0 0.03rem 0.09rem rgba(0,0,0,.08);
    cursor: pointer;
}

.course-mainline {
    display: flex;
    align-items: flex-start;
    gap: 0.1rem;
}

.course-title {
    display: -webkit-box;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: #111;
    font-family: Georgia, 'Songti SC', SimSun, serif;
    font-size: 0.22rem;
    font-weight: 700;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.course-price {
    flex: 0 0 auto;
    color: var(--brand-orange);
    font-size: 0.22rem;
    font-weight: 700;
    white-space: nowrap;
}

.number-chip {
    display: inline-grid;
    place-items: center;
    min-width: 0.2rem;
    height: 0.2rem;
    padding: 0 0.03rem;
    background: #0078c8;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 0.14rem;
    vertical-align: 0.02rem;
}

.course-meta-row,
.course-community {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.12rem;
    margin-top: 0.12rem;
}

.course-time,
.course-views,
.purchase-mask {
    color: #999;
    font-size: 0.15rem;
}

.course-badges {
    display: flex;
    gap: 0.07rem;
}

.course-badge {
    padding: 0.03rem 0.07rem;
    color: var(--brand-orange);
    border: 1px solid var(--brand-orange);
    border-radius: 0.05rem;
    font-size: 0.14rem;
}

.course-badge.solid {
    background: var(--brand-orange);
    color: #fff;
}

.avatar-stack {
    display: flex;
    align-items: center;
    min-width: 1.35rem;
}

.mini-avatar {
    display: grid;
    place-items: center;
    width: 0.24rem;
    height: 0.24rem;
    margin-right: -0.05rem;
    border: 1px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 0.11rem;
    background: linear-gradient(135deg, #607d8b, #263238);
}

.mini-avatar:nth-child(2) { background: linear-gradient(135deg, #ef9a9a, #8e244d); }
.mini-avatar:nth-child(3) { background: linear-gradient(135deg, #80cbc4, #00695c); }
.mini-avatar:nth-child(4) { background: linear-gradient(135deg, #ffcc80, #e65100); }
.mini-avatar.more { margin-left: 0.04rem; margin-right: 0; background: #eee; color: #777; }

.home-empty {
    padding: 0.8rem 0;
    text-align: center;
    color: #aaa;
    font-size: 0.2rem;
}

@media (min-width: 768px) {
    .home-page {
        padding-top: 18px;
    }

    .home-shell {
        width: min(1180px, calc(100vw - 48px));
        margin: 0 auto;
    }

    .brand-area {
        border-radius: 22px 22px 0 0;
        box-shadow: 0 12px 34px rgba(173, 53, 5, .16);
    }

    .app-topbar {
        height: 66px;
        padding: 0 30px;
    }

    .app-topbar .brand-name { font-size: 20px; }
    .switch-merchant { font-size: 15px; }

    .merchant-card {
        width: calc(100% - 60px);
        margin: 0 auto;
        padding: 20px 24px;
        border-radius: 16px;
    }

    .merchant-logo { width: 72px; height: 72px; font-size: 23px; border-width: 5px; }
    .merchant-info .name { font-size: 21px; }
    .merchant-info .desc { font-size: 14px; }
    .contact-strip { margin-top: 18px; padding: 14px 80px 18px; }
    .contact-action { font-size: 15px; }

    .category-bar {
        height: 66px;
        padding: 0 30px;
        border-radius: 0 0 18px 18px;
    }

    .category-item { padding: 22px 18px 16px; font-size: 18px; border-bottom-width: 3px; }
    .home-content { padding: 24px 0 28px; }
    .home-search { width: min(520px, 100%); height: 48px; margin-bottom: 20px; border-radius: 12px; }
    .home-search input { font-size: 15px; }
    .course-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
    .course-card { padding: 20px; border-radius: 14px; }
    .course-title, .course-price { font-size: 19px; }
    .course-time, .course-views, .purchase-mask { font-size: 13px; }
    .course-badge { font-size: 12px; padding: 3px 7px; }
    .mini-avatar { width: 26px; height: 26px; font-size: 11px; margin-right: -5px; }
}

@media (min-width: 1180px) {
    .course-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 767px) {
    .app-topbar .brand-name { font-size: 0.23rem; }
    .switch-merchant { font-size: 0.16rem; }
}

.purchase-notice {
    position: fixed;
    z-index: 500;
    top: max(0.54rem, calc(env(safe-area-inset-top) + 0.12rem));
    right: 0.12rem;
    display: flex;
    align-items: center;
    gap: 0.09rem;
    width: 2.12rem;
    min-height: 0.54rem;
    padding: 0.08rem 0.1rem;
    border: 0;
    border-radius: 0.1rem;
    background: rgba(38, 25, 21, 0.94);
    color: #fff;
    box-shadow: 0 0.08rem 0.22rem rgba(0,0,0,.22);
    opacity: 0;
    transform: translateY(-0.18rem) translateX(0.2rem);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
    text-align: left;
}

.purchase-notice.show {
    opacity: 1;
    transform: translateY(0) translateX(0);
    pointer-events: auto;
}

.purchase-avatar {
    display: grid;
    place-items: center;
    width: 0.36rem;
    height: 0.36rem;
    flex: 0 0 auto;
    border: 2px solid rgba(255,255,255,.65);
    border-radius: 50%;
    background: linear-gradient(135deg,#ff9a8b,#d83367);
    font-size: 0.15rem;
}

.purchase-copy {
    min-width: 0;
    flex: 1;
}

.purchase-name {
    overflow: hidden;
    font-size: 0.15rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purchase-product {
    overflow: hidden;
    margin-top: 0.02rem;
    color: #ffd56b;
    font-size: 0.12rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .purchase-notice {
        top: 32px;
        right: max(32px, calc((100vw - 1180px) / 2 + 28px));
        width: 280px;
        min-height: 64px;
        padding: 10px 12px;
        border-radius: 12px;
        transform: translateY(-18px) translateX(20px);
    }
    .purchase-avatar { width: 42px; height: 42px; font-size: 15px; }
    .purchase-name { font-size: 14px; }
    .purchase-product { font-size: 12px; }
}

/* 购买动态使用独立排版，避免继承页面根字号撑高 */
.purchase-notice { font-size: 0; line-height: 1; }
.purchase-copy { display: block; font-size: 0; line-height: 1.35; }
.purchase-name, .purchase-product { display: block; line-height: 1.35; }

/* 购买动态仅展示，不响应点击 */
.purchase-notice,
.purchase-notice.show {
    pointer-events: none;
    cursor: default;
}

/* ===== 2026-07 微信H5首页自适应重排 ===== */
body.home-page{margin:0;min-width:320px;background:#f5f5f5;color:#171717;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:14px}
body.home-page button,body.home-page input{font:inherit}
body.home-page .home-shell{width:100%;min-height:100vh;padding-bottom:calc(76px + env(safe-area-inset-bottom));background:#f7f7f7}
body.home-page .brand-area{position:relative;overflow:hidden;background:linear-gradient(145deg,#f65b0d 0%,#ed4605 100%);color:#fff}
body.home-page .brand-area::after{top:-110px;right:-80px;width:240px;height:240px;background:rgba(255,255,255,.055)}
body.home-page .app-topbar{height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 18px 0;font-size:14px}
body.home-page .app-topbar .brand-name{font-size:17px;font-weight:700;white-space:nowrap}
body.home-page .switch-merchant{padding:8px 0 8px 12px;font-size:14px;white-space:nowrap}
body.home-page .merchant-card{gap:15px;min-height:98px;margin:10px 14px 0;padding:14px 20px;border-radius:11px;box-shadow:0 5px 16px rgba(126,45,6,.14)}
body.home-page .merchant-logo{width:58px;height:58px;flex:0 0 58px;border-width:4px;font-size:20px}
body.home-page .merchant-info .name{margin-bottom:3px;font-size:17px}
body.home-page .merchant-info .desc{margin-top:0;font-size:13px;line-height:1.55}
body.home-page .contact-strip{min-height:52px;margin-top:10px;padding:9px 12px 11px}
body.home-page .contact-action{min-width:0;padding:7px 2px;overflow:hidden;font-size:14px;line-height:1;text-align:center;text-overflow:ellipsis;white-space:nowrap}
body.home-page .category-bar{height:73px;padding:0 20px}
body.home-page .category-item{height:100%;padding:25px 16px 13px;border-bottom-width:2px;font-size:18px}
body.home-page .home-content{padding:14px 19px 24px}
body.home-page .home-search{height:43px;margin-bottom:14px;padding:0 13px;border-radius:13px}
body.home-page .home-search .search-icon{margin-right:8px;font-size:16px}
body.home-page .home-search input{font-size:15px}
body.home-page .course-list{grid-template-columns:minmax(0,1fr);gap:14px}
body.home-page .course-card{min-width:0;padding:15px 18px 14px;border-radius:9px;box-shadow:0 2px 7px rgba(0,0,0,.075);transition:transform .18s ease,box-shadow .18s ease}
body.home-page .course-card:active{transform:scale(.992)}
body.home-page .course-mainline{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px}
body.home-page .course-title{font-family:"Songti SC",SimSun,"Times New Roman",serif;font-size:18px;line-height:1.42;overflow-wrap:anywhere}
body.home-page .course-price{padding-top:1px;font-family:Georgia,"Songti SC",serif;font-size:18px;line-height:1.4}
body.home-page .country-flag{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:2px;border:1px solid #b60016;background:#ef082d;color:#ffd400;font-family:Arial,sans-serif;font-size:8px;line-height:1;vertical-align:1px}
body.home-page .number-chip{min-width:18px;height:18px;padding:0 3px;font-size:12px;line-height:1;vertical-align:1px}
body.home-page .course-meta-row,body.home-page .course-community{gap:10px;margin-top:11px}
body.home-page .course-time,body.home-page .course-views,body.home-page .purchase-mask{font-size:12px;line-height:1.3;white-space:nowrap}
body.home-page .course-time{min-width:0;overflow:hidden;text-overflow:ellipsis}
body.home-page .course-badges{flex:0 0 auto;gap:6px}
body.home-page .course-badge{padding:3px 7px;border-radius:5px;font-size:12px;line-height:1.2;white-space:nowrap}
body.home-page .avatar-stack{min-width:112px}
body.home-page .mini-avatar{width:22px;height:22px;margin-right:-5px;font-size:9px}
body.home-page .mini-avatar.more{margin-left:4px}
body.home-page .bottom-tab{left:0;right:0;width:100%;height:calc(67px + env(safe-area-inset-bottom));padding:0 6px env(safe-area-inset-bottom)}
body.home-page .tab-nav-item{flex:1 1 25%;justify-content:center;gap:3px;height:100%;padding:3px 0 2px}
body.home-page .tab-nav-item .icon{color:#8e8e8e;font-size:24px;font-weight:400;line-height:1}
body.home-page .tab-nav-item .label{color:#999;font-size:12px;font-weight:400;line-height:1.2}
body.home-page .tab-nav-item.active .icon,body.home-page .tab-nav-item.active .label{color:#f04b2f}
body.home-page .tab-nav-item .badge-dot{top:7px;right:calc(50% - 18px);width:8px;height:8px;border-width:1px}
body.home-page .purchase-notice{top:calc(56px + env(safe-area-inset-top));right:12px;width:min(225px,calc(100vw - 28px));min-height:54px;padding:7px 10px;gap:8px;border-radius:10px;transform:translate(12px,-12px)}
body.home-page .purchase-notice.show{transform:translate(0,0)}
body.home-page .purchase-avatar{width:36px;height:36px;flex-basis:36px;font-size:14px}
body.home-page .purchase-name{font-size:13px}
body.home-page .purchase-product{font-size:11px}
@media(max-width:370px){body.home-page .merchant-card{margin-right:10px;margin-left:10px;padding-right:14px;padding-left:14px}body.home-page .contact-strip{padding-right:5px;padding-left:5px}body.home-page .contact-action{font-size:12px}body.home-page .home-content{padding-right:12px;padding-left:12px}body.home-page .course-card{padding-right:13px;padding-left:13px}body.home-page .course-title,body.home-page .course-price{font-size:16px}body.home-page .course-time,body.home-page .course-views,body.home-page .purchase-mask,body.home-page .course-badge{font-size:11px}body.home-page .avatar-stack{min-width:94px}body.home-page .mini-avatar{width:20px;height:20px}}
@media(min-width:768px){body.home-page{padding:22px 24px 90px;background:#eceff3}body.home-page .home-shell{width:min(1040px,100%);min-height:calc(100vh - 44px);margin:0 auto;padding-bottom:30px;border-radius:20px;overflow:hidden;box-shadow:0 14px 42px rgba(36,46,66,.12)}body.home-page .brand-area{border-radius:20px 20px 0 0}body.home-page .app-topbar{height:62px;padding:0 30px}body.home-page .app-topbar .brand-name{font-size:20px}body.home-page .switch-merchant{font-size:15px}body.home-page .merchant-card{width:auto;min-height:112px;margin:12px 30px 0;padding:18px 24px;border-radius:15px}body.home-page .merchant-logo{width:70px;height:70px;flex-basis:70px;font-size:23px}body.home-page .merchant-info .name{font-size:20px}body.home-page .merchant-info .desc{font-size:14px}body.home-page .contact-strip{min-height:56px;padding-right:80px;padding-left:80px}body.home-page .contact-action{font-size:15px}body.home-page .category-bar{height:68px;padding:0 30px;border-radius:0}body.home-page .category-item{padding-top:23px;font-size:18px}body.home-page .home-content{padding:22px 30px 30px}body.home-page .home-search{width:min(560px,100%);height:46px;margin-bottom:20px}body.home-page .course-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}body.home-page .course-card{padding:18px 20px;border-radius:12px}body.home-page .course-title,body.home-page .course-price{font-size:18px}body.home-page .bottom-tab{left:50%;right:auto;width:min(720px,calc(100vw - 48px));height:64px;bottom:14px;transform:translateX(-50%);border:1px solid #e8e8e8;border-radius:18px;box-shadow:0 8px 30px rgba(35,43,60,.16)}body.home-page .purchase-notice{top:38px;right:max(36px,calc((100vw - 1040px)/2 + 30px));width:260px}}
@media(min-width:1180px){body.home-page .home-shell{width:min(1180px,100%)}body.home-page .course-list{grid-template-columns:repeat(3,minmax(0,1fr))}body.home-page .purchase-notice{right:max(40px,calc((100vw - 1180px)/2 + 34px))}}
@media(prefers-reduced-motion:reduce){body.home-page .course-card,body.home-page .purchase-notice{transition:none}}

/* 修正旧版窄屏导航的居中位移，手机端必须铺满底部 */
@media (max-width: 767px) {
    body.home-page .bottom-tab {
        right: 0;
        left: 0;
        width: 100vw;
        max-width: none;
        transform: none;
    }
}

/* 手机和平板窄屏统一限制为微信H5内容宽度 */
@media (max-width: 767px) {
    body.home-page .bottom-tab {
        right: auto;
        left: 50%;
        width: min(100vw, 500px);
        transform: translateX(-50%);
    }
}