/* ============================================================
   浩宇商城 · 移动端 H5 样式（红金电商风 v9 · 1:1 复刻 zhenxuan.tzey.cn 布局）
   主色：淘宝橙 #ff5000 + 金 #ffb400
   ============================================================ */
:root {
    --primary: #ff5000;
    --primary-2: #ff7d1a;
    --primary-dark: #e84a00;
    --primary-bg: #fff4ee;
    --price: #ff4400;
    --price-bg: #fff2ec;
    --gift: #ff6a00;            /* 赠贡献值文字色 */
    --gold: #ffb400;
    --gold-deep: #f59a00;
    --gold-bg: #fff8e8;
    --cyan: #3ba9ff;
    --text-1: rgba(0, 0, 0, .9);
    --text-2: #666;
    --text-3: #9a9a9a;
    --line: #f0f0f0;
    --line-2: #f6f6f7;
    --bg: #f5f5f5;
    --card: #ffffff;
    --green: #00b578;
    --orange: #ff8f1f;
    --radius: 12px;
    --radius-sm: 10px;
    --shadow: 0 1px 6px rgba(0, 0, 0, .05);
    --shadow-lg: 0 6px 22px rgba(0, 0, 0, .10);
    /* 淘宝橙渐变（头部 / 主按钮 / 强调块） */
    --grad-red: linear-gradient(135deg, #ff5000, #ff7d1a);
    --grad-red-deep: linear-gradient(135deg, #ff3d00, #ff6a00 55%, #ff9a3d);
    --grad-gold: linear-gradient(135deg, #ffd766, #ffb400 45%, #f59a00);
    /* 商品占位图：淡彩底 + 同色深字（v18 淘宝化） */
    --thumb-ink: hsl(20, 68%, 42%);
}

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

html, body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: #ededf0;
    color: var(--text-1);
    font-size: 14px;
    line-height: 1.5;
}

#app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--bg);
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 24px rgba(0, 0, 0, .06);
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

button, input {
    font-family: inherit;
    font-size: inherit;
    outline: none;
    border: none;
    background: none;
}

button {
    cursor: pointer;
}

a {
    text-decoration: none;
    color: inherit;
}

.hide {
    display: none !important;
}

/* ---------------- 页面容器 ---------------- */
.page {
    display: none;
    flex: 1;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

.page.active,
.page.on {
    display: block;
    animation: pageIn .22s ease-out;
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.page-body {
    padding: 12px;
}

.bottom-gap {
    height: 74px;
}

.empty {
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
    padding: 40px 20px;
}

.empty .icon {
    font-size: 44px;
    display: block;
    margin-bottom: 10px;
    opacity: .5;
}

/* ---------------- 按钮 ---------------- */
.btn {
    display: block;
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: 0 4px 14px rgba(255, 80, 0, .26);
    transition: transform .15s, box-shadow .15s;
}

.btn:active {
    transform: scale(.975);
    box-shadow: 0 2px 8px rgba(255, 80, 0, .22);
}

.btn.plain {
    background: #fff;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    box-shadow: none;
}

.btn.gray {
    background: #f2f2f5;
    color: var(--text-3);
    box-shadow: none;
}

.btn.gray:active {
    transform: none;
}

.btn.small {
    height: 36px;
    line-height: 36px;
    font-size: 13px;
    border-radius: 18px;
    padding: 0 18px;
    width: auto;
    display: inline-block;
}

.btn[disabled] {
    opacity: .6;
}

/* ---------------- 登录 ---------------- */
.login-wrap {
    padding: 60px 26px 30px;
}

.login-logo {
    text-align: center;
    margin-bottom: 34px;
}

/* 浩宇标准 logo（完整带「浩宇 HAOYU」文字，母版 D:\WorkBuddy\_brand\logo\浩宇标准logo-完整-360.png）
   铁律：禁止抠图去掉「浩宇」二字，禁止只留 C 形圆标 */
.logo-circle {
    width: 76px;
    height: 76px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(230, 67, 64, .3);
}

.logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-logo h1 {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.5px;
}

.login-logo p {
    color: var(--text-3);
    font-size: 13px;
    margin-top: 6px;
}

.field {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}

.field label {
    display: block;
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 5px;
}

.field input {
    width: 100%;
    font-size: 15px;
    color: var(--text-1);
}

.field input::placeholder {
    color: #c8c8d0;
}

.login-switch {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-2);
}

.login-switch a {
    color: var(--primary);
    font-weight: 600;
}

/* ---------------- 首页（1:1 参考站 · 红金） ---------------- */
.home-top {
    /* v18 淘宝化：橙红只覆盖搜索区，快速过渡到浅色，让 hero 深色块跳出来 */
    background: linear-gradient(180deg, #ff4d00 0%, #ff7a1a 32%, #fff1e8 64%, #f5f5f5 100%);
    padding: 12px 12px 0;
}

.srow {
    position: relative;
    z-index: 2;
}

.sbox {
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 18px;
    height: 36px;
    padding: 0 5px 0 12px;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(200, 60, 0, .18);
}

.sbox .s-ic {
    font-size: 13px;
}

.sbox .search-input {
    flex: 1;
    background: none;
    border: 0;
    outline: 0;
    font-size: 13px;
    color: var(--text-1);
    min-width: 0;
}

.sbox .search-btn {
    flex: none;
    background: var(--grad-red);
    color: #fff;
    font-size: 12.5px;
    padding: 6px 15px;
    border-radius: 16px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(255, 80, 0, .28);
}

/* 活动横幅 */
/* v20.1：首页金刚区与「消费有惊喜」促销条之间收紧（仅首页，不影响其它页面 .page-body） */
#home-body { padding-top: 4px; }

.promo-bar {
    /* v20.1：原 10px —— 金刚区到促销条间距过大，改由外层统一控制 */
    margin-top: 0;
    border-radius: 14px;
    padding: 12px 14px;
    background: var(--grad-red);
    color: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0 6px 16px rgba(255, 80, 0, .26);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.promo-bar::after {
    content: "🎁";
    position: absolute;
    right: 66px;
    top: 7px;
    font-size: 30px;
    opacity: .45;
    transform: rotate(12deg);
}

.pb-main { flex: 1; }

.pb-t {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
}

.pb-s {
    font-size: 10.5px;
    opacity: .9;
    margin-top: 2px;
}

.pb-go {
    flex: none;
    background: #fff;
    color: var(--primary);
    font-size: 13px;
    font-weight: 900;
    padding: 6px 12px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

/* 双分区卡（臻品区 / 臻选区） */
.zone-pair {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.zp {
    flex: 1;
    border-radius: 12px;
    padding: 11px 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 86px;
}

.zp.z1 { background: linear-gradient(135deg, #fff1e6, #ffe3d0); }
.zp.z2 { background: linear-gradient(135deg, #fffbe6, #ffefc2); }

.zp-t {
    font-size: 14.5px;
    font-weight: 900;
    color: var(--text-1);
}

.zp-tag {
    display: inline-block;
    margin-top: 3px;
    font-size: 9px;
    padding: 1.5px 7px;
    border-radius: 8px;
    color: #fff;
    background: var(--grad-red);
}

.zp.z2 .zp-tag {
    background: linear-gradient(135deg, #f0a800, #ffbe00);
}

.zp-pics {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    gap: 5px;
}

.zp-pic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--thumb-ink);
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

/* 限时秒杀（横滚） */
.seckill {
    margin-top: 10px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 0 10px;
    box-shadow: var(--shadow);
}

.sk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 9px;
}

.sk-head b {
    font-size: 15.5px;
    font-weight: 900;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 5px;
}

.sk-head b::before {
    content: "⚡";
    font-size: 14px;
}

.sk-head span {
    font-size: 11px;
    color: var(--text-3);
}

.sk-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 12px;
    -webkit-overflow-scrolling: touch;
}

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

.sk-card {
    flex: 0 0 96px;
}

.sk-pic {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    color: var(--thumb-ink);
    font-size: 30px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sk-price {
    margin-top: -9px;
    position: relative;
    background: var(--grad-red);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    text-align: center;
    border-radius: 9px;
    margin-left: 8px;
    margin-right: 8px;
    padding: 3px 0;
    box-shadow: 0 3px 8px rgba(230, 67, 64, .3);
}

/* 今日上新（列表行） */
/* ============ v41b：客服留言（标题副文案沿用 .card-title .sub 通用样式） ============ */
/* v41c：订单卡片里的「联系客服」按钮，与相邻操作按钮拉开一点距离 */
.oc-actions .cs-btn {
    margin-right: 6px;
}

.detail-acts .cs-btn {
    flex: 0 0 auto;
    padding: 0 14px;
}
.cs-loading,
.cs-offline {
    padding: 14px 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-3);
    background: var(--bg-2, #fafafa);
    border-radius: 10px;
    line-height: 1.7;
}

.cs-offline span {
    display: block;
    font-size: 11px;
    color: var(--text-3);
    opacity: .85;
}

/* ============ v41：我的荣誉 ============ */
.honor-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff3d6, #ffdfa1);
    box-shadow: var(--shadow);
}

.hc-badge {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffd76e, #f0a500);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(240, 165, 0, .35);
}

.hc-main { min-width: 0; }

.hc-role {
    font-size: 17px;
    font-weight: 800;
    color: #7a4b00;
}

.hc-sub {
    margin-top: 3px;
    font-size: 12px;
    color: #a06a12;
    word-break: break-all;
}

/* ============ v41：拼团区（横滚，与限时秒杀同款） ============ */
.group-sec {
    margin-top: 10px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 0 12px;
    box-shadow: var(--shadow);
}

.gs-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    margin-bottom: 10px;
}

.gs-head b {
    font-size: 16px;
    font-weight: 900;
    color: var(--text-1);
}

.gs-tag {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ff8a3d, #ff5000);
    border-radius: 4px;
    padding: 2px 6px;
    line-height: 1.4;
}

.gs-more {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-3);
    cursor: pointer;
}

.gs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 12px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

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

/* ============ v41：臻选区（两列） ============ */
.np-sec {
    margin-top: 10px;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow);
}

.np-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 900;
    color: var(--text-1);
    margin-bottom: 10px;
}

.np-tag {
    font-size: 11px;
    font-weight: 700;
    color: #b06a00;
    background: linear-gradient(135deg, #fff0d6, #ffe0b2);
    border-radius: 4px;
    padding: 2px 6px;
    line-height: 1.4;
}

.np-more {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-3);
    cursor: pointer;
}

/* 两列网格：原单列列表行改为两列卡片 */
.np-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.np-grid .np-card {
    display: block;
    padding: 0;
    border-bottom: 0;
}

/* 正方形图：用 padding 撑高，兼容不支持 aspect-ratio 的老安卓 WebView */
.np-grid .np-pic {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 10px;
    font-size: 26px;
}

.np-grid .np-info {
    padding-top: 6px;
}

.np-grid .np-title {
    font-size: 13px;
    line-height: 1.35;
    height: 2.7em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.np-grid .np-gift {
    font-size: 10px;
    gap: 4px;
    flex-wrap: wrap;
}

.np-grid .np-price {
    font-size: 15px;
}

.np-card {
    display: flex;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-2);
    cursor: pointer;
}

.np-card:last-of-type {
    border-bottom: 0;
}

.np-pic {
    width: 86px;
    height: 86px;
    border-radius: 12px;
    flex: none;
    color: var(--thumb-ink);
    font-size: 30px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.np-title {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--text-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.np-gift {
    margin-top: 4px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.np-gift span {
    font-size: 10.5px;
    color: var(--gift);
    background: #fff7ef;
    border-radius: 4px;
    padding: 1.5px 6px;
}

.np-row {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.np-price {
    color: var(--price);
    font-size: 17px;
    font-weight: 900;
}

.np-price i {
    font-style: normal;
    font-size: 11px;
    margin-right: 1px;
}

.np-buy {
    background: var(--grad-red);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 13px;
    border-radius: 14px;
}

.np-more {
    text-align: center;
    font-size: 12px;
    color: var(--text-3);
    padding: 10px 0 2px;
    cursor: pointer;
}

/* 赠贡献值 / 赠红包额 行（商品卡通用） */
.gift-line {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 3px;
}

.gift-line span {
    font-size: 9.5px;
    color: var(--gift);
    background: #fff7ef;
    border-radius: 4px;
    padding: 1px 5px;
}

/* 生态页头部 */
.eco-hero {
    background: var(--grad-red-deep);
    border-radius: 12px;
    padding: 18px 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(230, 67, 64, .28);
}

.eco-hero::after {
    content: "";
    position: absolute;
    right: -24px;
    top: -34px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 190, 0, .22);
}

.eco-hero .eh-t {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 1px;
}

.eco-hero .eh-s {
    font-size: 11.5px;
    opacity: .9;
    margin-top: 3px;
}

/* 分区横滑 Tab */
.zone-tabs {
    display: flex;
    gap: 22px;
    margin-top: 12px;
    overflow-x: auto;
    position: relative;
    z-index: 2;
    -webkit-overflow-scrolling: touch;
}

.zone-tabs::-webkit-scrollbar,
.segscroll::-webkit-scrollbar,
.segment::-webkit-scrollbar {
    display: none;
}

.zone-tab {
    flex: none;
    font-size: 16px;
    color: var(--text-3);
    padding-bottom: 9px;
    position: relative;
    white-space: nowrap;
    transition: font-size .18s;
}

.zone-tab.on {
    color: var(--primary);
    font-size: 18px;
    font-weight: 800;
}

.zone-tab.on::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: var(--primary);
}

/* ---------------- 首页 Banner（红包池） ---------------- */
.banner {
    margin: 8px 12px;
    border-radius: var(--radius);
    padding: 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
    background: var(--grad-red);
    box-shadow: 0 6px 18px rgba(230, 67, 64, .22);
}

.banner::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}

.banner-t {
    font-size: 18px;
    font-weight: 900;
    position: relative;
    z-index: 2;
}

.banner-n {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -.5px;
    margin: 2px 0 4px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    position: relative;
    z-index: 2;
}

.banner-s {
    font-size: 12px;
    opacity: .92;
    margin-top: 6px;
    position: relative;
    z-index: 2;
}

.banner-go {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .5);
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

/* ---------------- 金刚区 ---------------- */
.kingkong {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px 0;
    padding: 16px 6px 14px;
    background: #fff;
    /* v20.1：底部间距收紧 —— 原 12px，与 .page-body(padding-top) + .promo-bar(margin-top) 叠加后到促销条过空 */
    margin: 0 12px 6px;
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.kk-item {
    text-align: center;
}

.kk-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 7px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 3px 10px rgba(255, 120, 0, .20);
}

.kk-item span {
    font-size: 11px;
    color: #4a4a4a;
}

/* 双列网格（分区好物） */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 今日上新双列商品卡（F 风格） */
.gc { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.gc .ph { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 800; color: var(--thumb-ink); position: relative; }
.gc .badge { position: absolute; left: 0; top: 0; background: var(--primary); color: #fff; font-size: 9.5px; padding: 2px 6px; border-radius: 0 0 6px 0; font-weight: 700; }
.gc .badge.g { background: var(--green); }
.gc .badge.r { background: var(--price); }
.gc .badge.gd { background: var(--gold); }
.gc .ct { padding: 7px 8px 9px; flex: 1; display: flex; flex-direction: column; }
.gc .ti { font-size: 12px; line-height: 1.35; height: 32px; overflow: hidden; color: var(--text-1); }
.gc .pr { display: flex; align-items: baseline; gap: 5px; margin-top: auto; padding-top: 5px; }
.gc .pr b { color: var(--price); font-size: 17px; font-weight: 800; }
.gc .pr b i { font-style: normal; font-size: 11px; }
.gc .row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.gc .tag { font-size: 9.5px; color: var(--primary); border: 1px solid #f5c2c0; background: var(--primary-bg); padding: 1px 4px; border-radius: 2px; }
.gc .buy { background: var(--primary); color: #fff; font-size: 11px; padding: 4px 12px; border-radius: 12px; font-weight: 700; }

/* ---------------- 分区板块 ---------------- */
.zone-sec {
    padding: 0 0 8px;
}

.zone-block {
    margin: 0 12px 14px;
}

.zone-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}

.zh-name {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.zh-name em {
    font-style: normal;
    font-size: 15px;
}

.zh-more {
    font-size: 12px;
    color: var(--text-3);
}

.zone-rate {
    font-size: 11px;
    color: #b26a00;
    background: var(--gold-bg);
    border: 1px solid #ffe4ab;
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 9px;
}

/* ---------------- 商品卡（大图双列） ---------------- */
.goods-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.goods-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
    transition: transform .18s;
}

.goods-card:active {
    transform: scale(.975);
}

.goods-card .thumb {
    height: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    color: var(--thumb-ink);
    text-shadow: none;
    position: relative;
    overflow: hidden;
}

/* v35：商品真实首图铺满缩略图区（图片应为正方形 600×600，居中裁，不会变形） */
.goods-card .thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #fff;
}

/* 加购按钮 */
.gc-add {
    position: absolute;
    right: 8px;
    top: 130px;
    z-index: 4;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.gc-add:active {
    transform: scale(.9);
}

.goods-card .info {
    padding: 9px 10px 12px;
}

.goods-card .title {
    font-size: 13px;
    line-height: 1.4;
    height: 36px;
    overflow: hidden;
    font-weight: 500;
}

/* 分区角标浮到图上 */
.goods-card .zone-badge {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 3;
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 700;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(4px);
}

.goods-card .zone-badge.seckill {
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
}

.goods-card .zone-badge.free {
    background: linear-gradient(90deg, #07c160, #3ddc84);
}

.goods-card .tag-row {
    margin-top: 6px;
}

.goods-card .tag {
    display: inline-block;
    font-size: 10px;
    color: #b26a00;
    background: var(--gold-bg);
    border: 1px solid #ffe4ab;
    border-radius: 4px;
    padding: 1px 6px;
    margin-right: 4px;
}

.goods-card .tag.blue {
    color: var(--gold-deep);
    background: var(--gold-bg);
    border-color: #ffe9a8;
}

.goods-card .price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 7px;
}

.goods-card .price {
    color: var(--price);
    font-size: 18px;
    font-weight: 900;
}

.goods-card .sales {
    font-size: 11px;
    color: var(--text-3);
}

.price .unit {
    font-size: 12px;
    font-weight: 700;
    margin-right: 1px;
}

/* ---------------- 分类页 ---------------- */
.segscroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 12px 10px;
    -webkit-overflow-scrolling: touch;
}

.segment {
    display: flex;
    gap: 8px;
    padding: 0 12px 10px;
    overflow-x: auto;
}

.seg {
    flex: none;
    padding: 7px 15px;
    background: #fff;
    border-radius: 19px;
    font-size: 13px;
    color: var(--text-2);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .05);
    white-space: nowrap;
}

.seg.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(230, 67, 64, .28);
}

.zone-tip {
    margin: 0 12px 10px;
    background: var(--gold-bg);
    border: 1px solid #ffe4ab;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 11.5px;
    color: #8a5a12;
}

/* ---------------- 卡片 / 通用行 ---------------- */
.card {
    background: #fff;
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}

.card-title {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-title::before {
    content: "";
    width: 4px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary), var(--gold));
}

.card-title .sub {
    font-size: 12px;
    color: var(--text-3);
    font-weight: 400;
}

.list-row {
    display: flex;
    align-items: center;
    padding: 13px 14px;
    border-bottom: 1px solid var(--line-2);
    font-size: 13.5px;
}

.list-row:last-child {
    border-bottom: 0;
}

.list-row:active {
    background: #fafafa;
}

.lr-label {
    flex: 1;
    font-weight: 500;
}

.lr-value {
    color: var(--text-3);
    font-size: 12px;
}

.kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--line-2);
}

.kv-row:last-child {
    border-bottom: 0;
}

.kv-row .k {
    color: var(--text-2);
}

.kv-row .v {
    font-weight: 600;
}

.v.red, .red {
    color: var(--price);
}

.v.green, .green {
    color: var(--green);
}

.small {
    font-size: 12px;
}

.meta {
    font-size: 11px;
    color: var(--text-3);
}

.status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--line-2);
    color: var(--text-2);
}

/* ---------------- 导航栏 ---------------- */
.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    background: #fff;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 800;
    position: relative;
    border-bottom: 1px solid var(--line);
}

.nav-back {
    position: absolute;
    left: 12px;
    /* v41：原 24px 整块放大与页面字号严重不搭，现拆分为「箭头 20px + 文字 15px」 */
    font-size: 15px;
    color: var(--text-1);
    line-height: 1;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 1px;
    cursor: pointer;
}

.nav-back .nb-arrow {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    margin-top: -1px;
}

.nav-back .nb-txt {
    font-size: 15px;
}

.nav-right {
    position: absolute;
    right: 12px;
    font-size: 12.5px;
    color: var(--text-2);
    font-weight: 400;
}

/* ---------------- 购物车 ---------------- */
.cart-group {
    background: #fff;
    border-radius: var(--radius);
    margin: 0 12px 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.cg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-2);
    font-size: 12px;
}

.cg-rate {
    color: #b26a00;
}

.cart-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line-2);
}

.cart-row:last-child {
    border-bottom: 0;
}

.cart-check {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    flex: none;
    margin-top: 26px;
}

.cr-thumb {
    width: 78px;
    height: 78px;
    border-radius: 11px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 33px;
    color: var(--thumb-ink);
    text-shadow: none;
}

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

.cr-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    height: 36px;
    overflow: hidden;
}

.cr-meta {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 3px;
}

.cr-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
}

.cr-price {
    color: var(--price);
    font-size: 17px;
    font-weight: 900;
}

.numbox {
    display: flex;
    align-items: center;
    gap: 2px;
}

.numbox span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f4f4f7;
    color: var(--text-2);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.numbox span:last-child {
    background: transparent;
    color: var(--text-3);
    font-size: 14px;
}

.numbox b {
    min-width: 26px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

/* 底部栏（购物车 / 商品详情 / 结算 / 种树）
 * v41：原来是 position:absolute —— 它的定位祖先 #app 高度随内容撑高，
 * 于是底导被顶到「文档底部」而不是「屏幕底部」，商品详情页要一直划拉到最底才看得见。
 * 改为 fixed 并悬浮在 tabbar（60px）之上，配合 max-width 与 #app 一致限宽居中。 */
.footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    max-width: 480px;
    margin: 0 auto;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    height: 60px;
    background: #fff;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .05);
    z-index: 45;
    box-sizing: border-box;
}

/* 内页里当成普通块级按钮条用的场景（编辑地址等表单页），保持文档流 */
.footer-bar.is-static {
    position: static;
    max-width: none;
    margin: 0 0 14px;
    padding: 0;
    border-top: 0;
    box-shadow: none;
}

.cart-bar {
    left: 10px;
    right: 10px;
    max-width: 460px;
    /* 淘宝式悬浮胶囊：比 tabbar 再高一点，避免被盖住点不到 */
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    height: 56px;
    border-radius: 28px;
    border-top: 0;
    box-shadow: var(--shadow-lg);
    padding: 0 8px 0 14px;
    z-index: 45;
}

/* 底导 60px + tabbar 60px，内容要留足空间才不被压住 */
#page-goods,
#page-checkout,
#page-address,
#page-address-edit,
#page-pay,
#page-pay-result,
#page-review {
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
}

/* 购物车页给结算条 + 底部导航留出空间 */
#page-cart {
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
}

.check-all {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-2);
    flex: none;
}

.check-all input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.cart-bar .btn {
    width: auto;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    border-radius: 20px;
}

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

.cs-line {
    font-size: 12px;
    color: var(--text-2);
}

.cs-line b {
    color: var(--price);
}

.cs-line .price {
    color: var(--price);
    font-size: 17px;
    font-weight: 900;
}

.cs-sub {
    font-size: 11px;
    color: #b26a00;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------- 我的 ---------------- */
.mine-head {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 60%, #ff9a5f 100%);
    padding: 18px 14px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.mine-head::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -40px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}

.mine-user {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

/* 默认头像 = 浩宇标准 logo（完整带字），白色圆底已在图内，无需外层半透底 */
.mine-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    flex: none;
    overflow: hidden;
}

.mine-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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

.mine-nick {
    font-size: 19px;
    font-weight: 900;
}

.mine-sub {
    font-size: 11px;
    opacity: .88;
    margin-top: 3px;
}

.mine-role {
    flex: none;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .45);
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 700;
}

.mine-role.op {
    background: linear-gradient(135deg, #ffd166, var(--gold));
    color: #6b3f00;
    border-color: transparent;
}

.mine-role.sv {
    background: rgba(255, 255, 255, .34);
}

/* 资产条（白色卡片压在红底上） */
.mine-asset {
    display: flex;
    margin: 15px 0 0;
    background: #fff;
    border-radius: var(--radius);
    padding: 13px 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    color: var(--text-1);
}

.ma-item {
    flex: 1;
    text-align: center;
    position: relative;
}

.ma-item .n {
    font-size: 16px;
    font-weight: 900;
    color: var(--text-1);
}

.ma-item .t {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}

.ma-more {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--primary);
    font-weight: 700;
    white-space: nowrap;
}

.stat-grid {
    display: flex;
    padding: 4px 0;
}

.sg-item {
    flex: 1;
    text-align: center;
}

.sg-item .n {
    font-size: 18px;
    font-weight: 900;
    color: var(--primary);
}

.sg-item .t {
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 3px;
}

.promoter-bar {
    margin-top: 12px;
}

.pb-text {
    font-size: 11.5px;
    color: var(--text-2);
    margin-bottom: 6px;
}

.pb-text b {
    color: var(--primary);
}

.progress {
    height: 7px;
    background: var(--line-2);
    border-radius: 4px;
    overflow: hidden;
}

.progress i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), var(--gold));
    transition: width .4s ease;
}

/* ---------------- 我的资产 ---------------- */
.asset-hero {
    margin: 12px;
    border-radius: var(--radius);
    padding: 16px;
    color: #fff;
    background: var(--grad-red);
    box-shadow: 0 6px 18px rgba(230, 67, 64, .22);
    position: relative;
    overflow: hidden;
}

.asset-hero::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}

.ah-label {
    font-size: 12px;
    opacity: .9;
    position: relative;
    z-index: 2;
}

.ah-amount {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -.6px;
    margin: 2px 0 4px;
    position: relative;
    z-index: 2;
}

.ah-sub {
    font-size: 11.5px;
    opacity: .88;
    position: relative;
    z-index: 2;
}

.asset-grid {
    display: flex;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .25);
    position: relative;
    z-index: 2;
}

.ag-item {
    flex: 1;
    text-align: center;
}

.ag-item .n {
    font-size: 17px;
    font-weight: 900;
}

.ag-item .t {
    font-size: 11px;
    opacity: .88;
    margin-top: 2px;
}

/* ---------------- 红包池 ---------------- */
.pool-hero {
    background: linear-gradient(135deg, #ff6a5e, #ff3b4e);
    border-radius: 14px;
    padding: 16px 18px;
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 59, 78, .25);
    position: relative;
    overflow: hidden;
}

.pool-hero::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -34px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
}

.pool-hero .ph-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pool-hero .ph-label {
    font-size: 13px;
    opacity: .92;
}

.pool-hero .ph-chip {
    font-size: 11px;
    background: rgba(255, 255, 255, .22);
    padding: 2px 9px;
    border-radius: 10px;
}

.pool-hero .ph-num {
    font-size: 30px;
    font-weight: 800;
    margin: 6px 0 4px;
    letter-spacing: .5px;
}

.pool-hero .ph-sub {
    font-size: 12px;
    opacity: .95;
}

.pool-hero .ph-sub b {
    font-size: 14px;
}

.pool-tabs {
    margin: 12px 0 10px;
}

.pool-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pool-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: var(--shadow);
    border: 1.5px solid transparent;
}

.pool-cell.cur {
    border-color: var(--primary);
    background: linear-gradient(180deg, #f4f9ff, #fff);
}

.pool-cell.past {
    opacity: .62;
}

.pool-cell .pc-no {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex: 0 0 40px;
    background: var(--line-2);
    color: var(--text-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.pool-cell .pc-no b {
    font-size: 17px;
    font-weight: 800;
}

.pool-cell .pc-no span {
    font-size: 9px;
    margin-top: 1px;
}

.pool-cell.cur .pc-no {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
}

.pool-cell .pc-info {
    flex: 1;
    min-width: 0;
}

.pool-cell .pc-name {
    font-size: 13.5px;
    font-weight: 700;
}

.pool-cell .pc-meta {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}

.pool-cell .pc-meta2 {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 1px;
}

.pool-cell .pc-tag {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    padding: 2px 8px;
    border-radius: 9px;
    flex: 0 0 auto;
}

.pool-cell .pc-tag.done {
    background: var(--line);
    color: var(--text-3);
}

/* v21：每池当日释放额度行 */
.pool-cell .pc-meta3 {
    font-size: 11px;
    color: var(--primary);
    margin-top: 2px;
    font-weight: 600;
}

/* v21：每池独立领取按钮（达到 N 级 → 1..N 号池逐个可领） */
.pool-cell .pc-act {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ff6a5e, #ff3b4e);
    padding: 5px 10px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(255, 59, 78, .25);
}

.pool-cell .pc-act.done {
    background: var(--line);
    color: var(--text-3);
    box-shadow: none;
    cursor: default;
}

.pool-cell .pc-act.off {
    background: var(--line);
    color: var(--text-4, #bbb);
    box-shadow: none;
    cursor: default;
}

/* ============================================================
   v22：会员中心「浩宇生态」精致宫格
   原生态页全部功能去重后统一收口，图标走品牌色渐变 + 圆角方块
   ============================================================ */
/* v41b：峰宇反馈会员中心按钮拥挤，容器留白整体放宽 */
.eco-card {
    padding: 16px 14px 14px;
}

.ec-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 16px;
}

.ec-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: .3px;
}

.ec-sub {
    font-size: 11px;
    color: var(--text-3);
}

/* v41：峰宇要求会员中心每排 5 个图标（原 4 个），图标与字号相应收一档
 * v41b：5 列后左右贴太紧、上下也挤，行距 14→20、列距 0→8，并给每格左右各留 4px 呼吸位 */
.eco-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px 8px;
}

.eco-item {
    text-align: center;
    transition: transform .16s;
    padding: 0 4px;
}

/* 相邻两排之间再加一点分隔，视觉上成组更清晰 */
.eco-grid + .eco-grid {
    margin-top: 6px;
}

.eco-item:active { transform: scale(.93); }

.eco-item .ei-ic {
    width: 40px;
    height: 40px;
    margin: 0 auto 7px;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--c1, #ff8a5c), var(--c2, #ff5000));
    box-shadow: 0 4px 12px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    /* 图标外层加一圈淡色光晕底，视觉更精致 */
    position: relative;
}

.eco-item .ei-ic::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .45), transparent 62%);
    pointer-events: none;
}

.eco-item .ei-ic i {
    font-size: 20px;
    font-style: normal;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
    position: relative;
    z-index: 1;
}

.eco-item .ei-t {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.2;
    /* 5 列一格更窄，标题一律单行不换行，避免两行把行高顶乱 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* v41：5 列排布下副标题已无空间，隐藏以免挤成一团 */
.eco-item .ei-s {
    display: none;
}

/* 两组之间的细分割线 */
.eco-split {
    height: 1px;
    background: var(--line-2);
    margin: 12px 4px 12px;
}

.pool-cta {
    margin-top: 12px;
    text-align: center;
}

.pool-checkin {
    width: 100%;
    height: 46px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff6a5e, #ff3b4e);
    box-shadow: 0 6px 16px rgba(255, 59, 78, .3);
}

.pool-checkin.gray {
    background: var(--line);
    box-shadow: none;
}

.pool-cta-tip {
    font-size: 11.5px;
    color: var(--orange);
    margin-top: 7px;
}

/* ---------------- 收银台 · 支付方式 ---------------- */
.pay-ch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--line-2);
    cursor: pointer;
}

.pay-ch:last-child {
    border-bottom: 0;
}

.pay-ch .pc-ic {
    font-size: 20px;
    flex: none;
}

.pay-ch .pc-main {
    flex: 1;
    min-width: 0;
}

.pay-ch .pc-name {
    font-size: 13.5px;
    font-weight: 700;
}

.pay-ch .pc-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 1px;
}

.pay-ch .pc-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    flex: none;
    position: relative;
}

.pay-ch.on .pc-radio {
    border-color: var(--primary);
    background: var(--primary);
}

.pay-ch.on .pc-radio::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
}

.lock-tip {
    background: var(--line-2);
    border: 1px dashed #ddd;
    color: var(--text-3);
    font-size: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    text-align: center;
    margin: 12px;
}

.ladder {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.ladder th {
    color: var(--text-3);
    font-weight: 500;
    text-align: left;
    padding: 7px 4px;
    border-bottom: 1px solid var(--line);
}

.ladder td {
    padding: 8px 4px;
    border-bottom: 1px solid var(--line-2);
}

.ladder tr.on td {
    color: var(--primary);
    font-weight: 700;
}

/* ---------------- 种树（单屏游戏场景） ---------------- */
#page-tree {
    padding-bottom: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

#page-tree.active {
    display: flex;
    flex-direction: column;
}

#page-tree .navbar {
    flex: 0 0 auto;
}

.tree-scene {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.nav-hap {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
}

.gscene {
    position: relative;
    flex: 1;
    min-height: 200px;
    overflow: hidden;
    background: linear-gradient(180deg, #7ec8f5 0%, #b9e3fb 44%, #dff2e6 56%, #a9e08a 100%);
}

.gs-sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
    pointer-events: none;
}

.gs-sun {
    position: absolute;
    right: 22px;
    top: 34px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6c9 0%, #ffd86b 46%, #ffc93c 68%, rgba(255, 201, 60, 0) 70%);
    box-shadow: 0 0 26px rgba(255, 214, 102, .85);
    animation: sunPulse 4s ease-in-out infinite;
}

@keyframes sunPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.gs-cloud {
    position: absolute;
    height: 15px;
    background: rgba(255, 255, 255, .92);
    border-radius: 20px;
}

.gs-cloud::before,
.gs-cloud::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 50%;
}

.gs-cloud::before {
    width: 22px;
    height: 22px;
    left: 8px;
    top: -11px;
}

.gs-cloud::after {
    width: 15px;
    height: 15px;
    left: 26px;
    top: -6px;
}

.gs-cloud.c1 {
    width: 54px;
    left: 16px;
    top: 32px;
    animation: cloudDrift 26s linear infinite;
}

.gs-cloud.c2 {
    width: 42px;
    left: 46%;
    top: 16px;
    opacity: .8;
    animation: cloudDrift 34s linear infinite reverse;
}

.gs-cloud.c3 {
    width: 34px;
    left: 72%;
    top: 50px;
    opacity: .7;
    animation: cloudDrift 30s linear infinite;
}

@keyframes cloudDrift {
    from { transform: translateX(-16px); }
    to { transform: translateX(22px); }
}

.gs-hill {
    position: absolute;
    border-radius: 50% 50% 0 0;
    bottom: 30%;
}

.gs-hill.h1 {
    width: 62%;
    height: 15%;
    left: -12%;
    background: #8fce7d;
    opacity: .72;
}

.gs-hill.h2 {
    width: 54%;
    height: 12%;
    right: -10%;
    background: #7cc46a;
    opacity: .78;
}

.gs-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32%;
    background: linear-gradient(180deg, #b7e795 0%, #96d976 42%, #7ecb5c 100%);
    border-radius: 48% 48% 0 0 / 14% 14% 0 0;
}

.gs-tree {
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 70%;
    max-width: 320px;
    transform: translateX(-50%);
    transform-origin: bottom center;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    filter: drop-shadow(0 12px 12px rgba(40, 90, 30, .2));
    z-index: 2;
}

.gs-deco {
    position: absolute;
    font-size: 15px;
    z-index: 1;
    opacity: .9;
    pointer-events: none;
}

.gs-deco.d1 { left: 8%; bottom: 16%; }
.gs-deco.d2 { right: 12%; bottom: 20%; font-size: 13px; }
.gs-deco.d3 { left: 20%; bottom: 7%; font-size: 12px; }
.gs-deco.d4 { right: 22%; bottom: 6%; font-size: 12px; }
.gs-deco.d5 { right: 40%; bottom: 12%; font-size: 11px; opacity: .7; }

.gs-tree.bump {
    transform: translateX(-50%) scale(1.1);
}

.tree-svg {
    width: 100%;
    height: auto;
    display: block;
}

.gs-fly {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
}

.gs-fly .fly {
    position: absolute;
    bottom: 40%;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    white-space: nowrap;
    animation: flyUp 1.3s ease-out forwards;
}

.gs-fly .fly.hap {
    color: #fff3b0;
}

.gs-fly .fly.reward {
    color: #ffe08a;
}

@keyframes flyUp {
    0% { opacity: 0; transform: translateY(12px) scale(.8); }
    22% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-66px) scale(1.05); }
}

.gs-hud {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 4;
}

.ghud-lv {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .92);
    border-radius: 20px;
    padding: 4px 10px 4px 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.ghud-lv b {
    font-size: 12px;
    color: #fff;
    background: linear-gradient(135deg, #ffb43c, #ff9500);
    border-radius: 10px;
    padding: 2px 7px;
}

.ghud-lv span {
    font-size: 12px;
    font-weight: 700;
}

.ghud-max {
    font-size: 10px;
    font-style: normal;
    color: #fff;
    background: #ff6a5e;
    border-radius: 8px;
    padding: 1px 6px;
}

.ghud-prog {
    flex: 1;
}

.ghud-txt {
    font-size: 10px;
    color: var(--text-2);
    margin-top: 2px;
    text-align: right;
}

.gprog {
    height: 8px;
    background: rgba(255, 255, 255, .68);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}

.gprog i {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #ffd24d, #ff9500);
    transition: width .4s ease;
}

.gprog.sm {
    height: 6px;
    margin-top: 4px;
    background: var(--line-2);
    box-shadow: none;
}

.gs-bag {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    display: flex;
    gap: 8px;
    z-index: 4;
}

.bag-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, .93);
    border-radius: 12px;
    padding: 6px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.bag-item b {
    color: var(--primary);
    font-size: 14px;
}

.gtasks {
    flex: 0 0 auto;
    background: #fff;
    border-radius: 16px 16px 0 0;
    margin-top: -16px;
    padding: 12px 14px 4px;
    position: relative;
    z-index: 5;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}

.gt-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 6px;
}

.gt-head i {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-3);
    font-style: normal;
}

.gt-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line-2);
}

.gt-item:last-child {
    border-bottom: 0;
}

.gti-ic {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 10px;
    background: var(--primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.gt-item.goto .gti-ic {
    background: #ffeceb;
}

.gti-main {
    flex: 1;
    min-width: 0;
}

.gti-name {
    font-size: 12.5px;
    font-weight: 600;
}

.gti-tip {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 1px;
}

.gti-reward {
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
}

.gt-item.done .gti-reward {
    color: var(--green);
}

.gti-go {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}

/* v21：打卡补给按钮（水滴 1h / 肥料 2h，冷却中变灰并显示倒计时） */
.gti-btn {
    flex: 0 0 auto;
    min-width: 62px;
    height: 30px;
    padding: 0 12px;
    border: none;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.gti-btn.off {
    background: var(--line);
    color: var(--text-3);
    cursor: default;
}

.gti-btn[disabled] {
    opacity: .6;
}

.gtools {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
}

.gtool {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: var(--line-2);
    border-radius: 14px;
    padding: 8px 2px;
    color: var(--text-1);
    transition: transform .15s;
}

.gtool:active {
    transform: scale(.95);
}

.gtool-ic {
    font-size: 18px;
    line-height: 1;
}

.gtool-t {
    font-size: 12.5px;
    font-weight: 700;
}

.gtool small {
    font-size: 10px;
    color: var(--text-3);
}

.gtool.main {
    flex: 1.4;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    box-shadow: 0 6px 16px rgba(230, 67, 64, .3);
}

.gtool.main small {
    color: rgba(255, 255, 255, .85);
}

.gtool.fert {
    background: var(--gold-bg);
}

.gtool.fert .gtool-t {
    color: #d98a10;
}

.gtool.collect {
    background: #e9f9ef;
}

.gtool.collect .gtool-t {
    color: #0aa04f;
}

.gtool.off {
    opacity: .45;
}

.tl-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-2);
    font-size: 12.5px;
}

.tl-item:last-child {
    border-bottom: 0;
}

.tl-name {
    color: var(--text-2);
}

.tl-sub {
    color: var(--text-3);
    font-size: 11px;
}

/* ---------------- 浩宇云互通 ---------------- */
.hy-switch {
    display: flex;
    background: var(--line-2);
    border-radius: 20px;
    padding: 4px;
    margin: 0 12px 12px;
}

.hy-switch .seg {
    flex: 1;
    text-align: center;
    box-shadow: none;
    background: transparent;
}

.hy-switch .seg.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.hy-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 12px;
    padding: 14px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hf-box {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

.hf-arrow {
    color: var(--primary);
    font-size: 18px;
    font-weight: 800;
}

.hy-rate {
    font-size: 11.5px;
    color: #8a5a12;
    background: var(--gold-bg);
    border: 1px solid #ffe4ab;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 0 12px 12px;
}

/* ---------------- 合伙人 ---------------- */
.pl-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}

.pl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.pl-name {
    font-size: 15px;
    font-weight: 800;
}

.pl-quota {
    font-size: 11px;
    color: var(--text-3);
}

.pl-body {
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.7;
}

/* ---------------- 订单 / 结算 ---------------- */
.order-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}

.oc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-3);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-2);
}

.oc-goods {
    padding: 10px 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.oc-total {
    text-align: right;
    font-size: 13px;
    padding-top: 8px;
    border-top: 1px solid var(--line-2);
}

.oc-total .price {
    color: var(--price);
    font-size: 17px;
    font-weight: 900;
}

.oc-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
}

.oc-actions .btn {
    width: auto;
    padding: 0 16px;
    height: 34px;
    line-height: 34px;
    font-size: 12.5px;
    border-radius: 17px;
}

.pay-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    background: #fff;
    border-radius: var(--radius);
    margin-bottom: 10px;
    box-shadow: var(--shadow);
}

.pay-option.on {
    border: 1.5px solid var(--primary);
    background: var(--primary-bg);
}

.po-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #d5d5dd;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
}

.pay-option.on .po-check {
    background: var(--primary);
    border-color: var(--primary);
}

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

.po-name {
    font-size: 13.5px;
    font-weight: 700;
}

.po-pay {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 3px;
}

/* ---------------- 团队 ---------------- */
.team-line {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-2);
}

.team-line:last-child {
    border-bottom: 0;
}

.tl-name {
    font-size: 13.5px;
    font-weight: 600;
    flex: 1;
}

.area-badge {
    font-size: 10.5px;
    padding: 2px 9px;
    border-radius: 10px;
    font-weight: 700;
}

.area-badge.big {
    color: var(--primary);
    background: var(--primary-bg);
}

.area-badge.small {
    color: #b26a00;
    background: var(--gold-bg);
}

/* ---------------- 底部导航（固定，滚动不消失） ---------------- */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* v32c：电脑宽屏下与 #app 一致限宽 480px 居中，不再铺满整屏 */
    max-width: 480px;
    margin: 0 auto;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    background: #fff;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--line);
    z-index: 40;
}

.tab {
    flex: 1;
    text-align: center;
    color: var(--text-3);
    font-size: 10px;
    position: relative;
    padding-top: 7px;
}

.tab svg {
    width: 23px;
    height: 23px;
    display: block;
    margin: 0 auto 2px;
    opacity: .6;
}

.tab.active,
.tab.on {
    color: var(--primary);
    font-weight: 800;
}

.tab.active svg,
.tab.on svg {
    opacity: 1;
    stroke-width: 2.2;
}

.tab .badge {
    position: absolute;
    top: 3px;
    left: 50%;
    margin-left: 4px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    border-radius: 8px;
    padding: 0 4px;
    font-weight: 700;
}

/* ---------------- 更多页（特色玩法收纳） ---------------- */
.more-sec {
    font-size: 13px;
    color: var(--text-3);
    padding: 16px 4px 8px;
}
.more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 8px;
    background: #fff;
    border-radius: 12px;
    padding: 16px 8px;
}
.more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-2);
}
.mi-ic {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* ---------------- 收货地址 / 表单 ---------------- */
.addr-card { display: flex; align-items: center; gap: 10px; }
.addr-mark { font-size: 20px; }
.addr-main { flex: 1; min-width: 0; }
.addr-l1 { font-size: 14px; }
.addr-l2 { font-size: 12px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }
.addr-arrow { color: var(--text-3); font-size: 18px; }
.addr-item.sel { border: 1.5px solid var(--primary); }
.addr-tag { display: inline-block; margin-left: 6px; font-size: 10px; color: var(--primary); border: 1px solid var(--primary); border-radius: 4px; padding: 0 4px; vertical-align: 1px; }
.addr-ops { display: flex; gap: 16px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.addr-edit { color: var(--text-2); }
.addr-del { color: #ff3b30; }
.form-row { display: flex; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.form-row:last-child { border-bottom: none; }
.form-row > label { width: 86px; font-size: 13px; color: var(--text-2); flex: none; }
.form-row input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; color: inherit; font-family: inherit; min-width: 0; }
.form-row.form-3 { align-items: flex-start; }
.form-row .f3 { flex: 1; display: flex; gap: 8px; }
.form-row .f3 input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; font-size: 13px; }
.switch-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; }

/* ---------------- 支付结果 ---------------- */
.pay-result { text-align: center; padding: 64px 20px 20px; }
.pr-icon { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff; background: #07c160; }
.pr-icon.bad { background: #ff3b30; }
.pr-title { font-size: 19px; font-weight: 600; }
.pr-sub { font-size: 13px; color: var(--text-3); margin-top: 10px; line-height: 1.8; }

/* ---------------- 评价 ---------------- */
.review-card { margin-bottom: 12px; }
.rv-goods { display: flex; align-items: center; gap: 10px; }
.rv-title { font-size: 13px; flex: 1; }
.star-row { margin: 12px 0 8px; }
.star-row .star, .ri-star .star { cursor: pointer; }
.star { font-size: 24px; color: #ddd; margin-right: 4px; }
.star.on { color: #ff9500; }
.rv-text { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-size: 13px; resize: none; height: 62px; outline: none; font-family: inherit; }
.review-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.review-item:last-child { border-bottom: none; }
.ri-head { display: flex; justify-content: space-between; align-items: center; }
.ri-nick { font-size: 12px; color: var(--text-2); }
.ri-star .star { font-size: 13px; margin-right: 1px; }
.ri-content { font-size: 13px; margin-top: 6px; line-height: 1.6; }
.ri-date { font-size: 11px; color: var(--text-3); margin-top: 6px; }
.detail-acts { display: flex; gap: 10px; padding: 12px 0; }
.detail-acts .btn { flex: 1; }
.oc-tip { font-size: 12px; color: var(--text-3); }

/* ---------------- Toast ---------------- */
#toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%) translateY(14px);
    background: rgba(22, 24, 35, .9);
    color: #fff;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 999;
    max-width: 300px;
    text-align: center;
}

#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------------- 其它 ---------------- */
.goods-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.price {
    color: var(--price);
}

/* ============================================================
   补充组件（底部弹层 / 钱包 / 浩宇云 / 支付方式）
   ============================================================ */
.navbar .nav-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
}

.navbar.dark {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    border-bottom: none;
    color: #fff;
}

.navbar.dark .nav-back,
.navbar.dark .nav-right {
    color: #fff;
}

/* 底部弹层 */
.mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mask .sheet {
    background: #fff;
    width: 100%;
    max-width: 480px;
    border-radius: 18px 18px 0 0;
    padding: 18px 16px 24px;
    max-height: 82vh;
    overflow-y: auto;
}

.sheet-title {
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 14px;
}

.loading {
    text-align: center;
    padding: 20px;
    color: var(--text-3);
    font-size: 12px;
}

/* 钱包头部 */
.wallet-head {
    background: var(--grad-red);
    border-radius: var(--radius);
    padding: 18px 16px;
    color: #fff;
    margin-bottom: 12px;
    box-shadow: 0 6px 18px rgba(230, 67, 64, .22);
}

.wallet-head .label {
    font-size: 12px;
    opacity: .9;
}

.wallet-head .amount {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -.5px;
    margin: 2px 0 12px;
}

.wallet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.wallet-grid .wg-item {
    background: rgba(255, 255, 255, .18);
    border-radius: 10px;
    padding: 9px 6px;
    text-align: center;
}

.wallet-grid .wg-item .n {
    font-size: 15px;
    font-weight: 800;
}

.wallet-grid .wg-item .t {
    font-size: 11px;
    opacity: .9;
    margin-top: 2px;
}

/* 浩宇云绑定行 */
.hy-bind {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hy-bind .hb-nick {
    font-size: 13px;
    font-weight: 700;
}

.hy-bind .hb-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}

.hy-switch .hs-item {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
    border-radius: 16px;
    color: var(--text-2);
    box-shadow: none;
    background: transparent;
}

.hy-switch .hs-item.on {
    background: #fff;
    color: var(--primary);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.hy-flow .hf-box .l {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 400;
}

.hy-flow .hf-box .v {
    font-size: 15px;
    color: var(--primary);
    font-weight: 800;
    margin-top: 2px;
}

.pl-card.reached {
    border-left: 3px solid var(--green);
}

.card-title .more {
    font-size: 12px;
    color: var(--text-3);
    font-weight: 400;
}

.tag.gold {
    background: #fff7e6;
    color: #b07c00;
}

.btn.disabled {
    background: #d5d5d5;
    color: #fff;
    pointer-events: none;
    box-shadow: none;
}

/* 支付方式（选中态为 .active） */
.pay-option {
    display: block;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 13px 14px;
    margin-bottom: 10px;
    background: #fff;
    position: relative;
    box-shadow: none;
}

.pay-option.active {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.pay-option.disabled {
    opacity: .55;
}

.pay-option .po-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 26px;
}

.pay-option .po-name {
    font-weight: 800;
    font-size: 14px;
}

.pay-option .po-pay {
    color: var(--primary);
    font-weight: 900;
    font-size: 15px;
    margin-top: 0;
}

.pay-option .po-detail {
    margin-top: 7px;
    font-size: 12px;
    color: var(--text-2);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    line-height: 1.6;
}

.pay-option .po-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #d5d5dd;
    background: #fff;
}

.pay-option.active .po-check {
    border-color: var(--primary);
    background: var(--primary);
}

.pay-option.active .po-check::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 分类页搜索条 */
.search-bar {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 18px;
    height: 34px;
    padding: 0 5px 0 12px;
    box-shadow: var(--shadow);
}

.search-bar .search-input {
    flex: 1;
    font-size: 13px;
    color: var(--text-1);
    min-width: 0;
    background: none;
    border: 0;
    outline: 0;
}

.search-bar .search-btn {
    flex: none;
    background: var(--grad-red);
    color: #fff;
    font-size: 12.5px;
    padding: 5px 14px;
    border-radius: 14px;
    font-weight: 700;
}

/* ============================================================
   v12 精细化 UI + 移动端适配加固（2026-10-02）
   追加式覆盖，集中管理，便于回滚
   ============================================================ */

/* 1) 视口高度：动态高度，避免手机地址栏遮挡底部内容 */
#app {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;          /* 只裁横向溢出，纵向随内容自适应 */
}

/* 2) 底部留白：给固定 tabbar + 安全区留足空间，内容不再被压住 */
.page {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* 3) 横滚容器：滑动限制在本容器内，不带动整页左右晃 */
.sk-scroll,
.segscroll,
.segment {
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

/* 4) 触摸目标加大（≥50px），更好点按 */
.list-row {
    min-height: 50px;
}

.list-row:active {
    background: #fafafa;
}

/* 5) 数字等宽：价格 / 资产 / 金额对齐更精致 */
.price,
.np-price,
.ma-item .n,
.sg-item .n,
.sk-price,
.kv-row .v,
.cart-sum .price {
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}

/* 6) 按钮触摸反馈 + 过渡 */
.btn,
.np-buy,
.gc .buy,
.pay-ch {
    transition: transform .12s ease, filter .12s ease, box-shadow .2s ease;
}

.btn:active,
.np-buy:active,
.gc .buy:active {
    transform: scale(.985);
    filter: brightness(.96);
}

/* 7) 卡片阴影更柔和统一 */
.card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .045);
}

/* 8) 文本防溢出：长标题/长文案不撑破卡片 */
.lr-label,
.np-title,
.gc .ti,
.kv-row .k,
.kv-row .v {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lr-label {
    white-space: nowrap;
}

/* 9) 滚动惯性 */
.page-body,
.sk-scroll,
.segscroll,
.segment {
    -webkit-overflow-scrolling: touch;
}

/* 10) 页面切换动效更细腻 */
@keyframes pageIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.page.active {
    animation: pageIn .2s cubic-bezier(.22, .61, .36, 1);
}

/* 11) 精细视觉：品牌栏阴影 + 金刚区圆形图标质感 */
.home-top {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
}

.kk-icon {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .13), inset 0 -2px 6px rgba(0, 0, 0, .08);
}

/* 12) 商品卡触摸反馈 */
.gc,
.np-card,
.sk-card,
.goods-card {
    transition: transform .14s ease, box-shadow .2s ease;
}

.gc:active,
.np-card:active,
.sk-card:active,
.goods-card:active {
    transform: scale(.985);
}

/* 13) 价格货币符号更小，层次更清晰 */
.np-price i,
.price .unit,
.gc .pr b i {
    font-size: .68em;
    font-weight: 700;
}

/* ---------- v12 刷吧聚合收款码弹层 ---------- */
.qr-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.qr-card {
    position: relative;
    width: 300px;
    background: #fff;
    border-radius: 16px;
    padding: 20px 18px 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    animation: qrIn .22s ease-out;
    text-align: center;
}

@keyframes qrIn {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: none; }
}

.qr-head .qr-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-1);
}

.qr-head .qr-sub {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 3px;
}

.qr-box {
    margin: 14px auto 10px;
    width: 208px;
    height: 208px;
    border-radius: 12px;
    background: #fafafa;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.qr-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qr-amount {
    font-size: 13px;
    color: var(--text-2);
}

.qr-amount b {
    color: var(--price);
    font-size: 22px;
    font-weight: 800;
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

.qr-tip {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 6px;
}

.qr-acts {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qr-acts .btn {
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    margin: 0;
}

.qr-acts .btn.ghost {
    background: #f5f5f7;
    color: var(--text-1);
}

.qr-cancel {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--text-3);
}

/* ============================================================
   v20 · 商品购买页（商品详情）深度优化
   参考：主流电商详情页 —— 价格行置顶、服务保障行、富文本详情
   ============================================================ */
.gd-hero {
    height: 264px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gd-hero-char {
    font-size: 78px;
    font-weight: 800;
    color: var(--thumb-ink);
    line-height: 1;
}

.gd-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55));
    pointer-events: none;
}

.gd-price-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 14px 15px 13px;
    box-shadow: var(--shadow);
}

.gd-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.gd-price {
    color: var(--price);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -.5px;
    line-height: 1;
}

.gd-price i {
    font-style: normal;
    font-size: 16px;
    font-weight: 800;
    margin-right: 1px;
}

.gd-sales {
    font-size: 11.5px;
    color: var(--text-3);
}

.gd-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    margin-top: 9px;
    color: var(--text-1);
}

.gd-sub {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 4px;
}

.gd-tags {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.gd-services {
    display: flex;
    gap: 16px;
    padding: 12px 15px;
    margin-top: 10px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: 11.5px;
    color: var(--text-2);
}

.gd-services span::before {
    content: "✓";
    color: var(--primary);
    font-weight: 900;
    margin-right: 3px;
}

.gd-tip {
    margin: 10px 0 0;
    background: #fff6ef;
    border: 1px dashed #ffd0ab;
    color: #a34700;
}

.gd-detail {
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.85;
    word-break: break-word;
}

.gd-detail p { margin: 0 0 9px; }
.gd-detail p:last-child { margin-bottom: 0; }
.gd-detail img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; display: block; }
.gd-detail ul, .gd-detail ol { padding-left: 18px; margin: 0 0 9px; }
.gd-detail h1, .gd-detail h2, .gd-detail h3 { font-size: 15px; margin: 10px 0 6px; color: var(--text-1); }
.gd-detail strong { color: var(--text-1); }
.gd-detail br { line-height: 2; }

/* ============================================================
   v20 · 会员中心深度优化
   ============================================================ */

/* 功能行：图标 + 文案 + 右侧箭头 */
.lr-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-right: 10px;
    flex: none;
}

.list-row { padding: 12px 14px; }
.lr-label { font-size: 13.5px; }

/* 会员头部 */
.mine-head { padding: 20px 14px 0; }
.mine-avatar {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .45), 0 4px 14px rgba(0, 0, 0, .16);
}
.mine-nick { font-size: 19.5px; letter-spacing: .3px; }

/* 资产条 */
.mine-asset { border-radius: 14px; padding: 14px 0; margin-top: 16px; }
.ma-item .n { font-size: 16.5px; }
.ma-item .t { font-size: 10.5px; margin-top: 3px; }

/* 订单快捷入口 */
.mo-card { padding: 13px 0 15px; }

.mo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 13px;
}

.mo-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text-1);
}

.mo-more {
    font-size: 11.5px;
    color: var(--text-3);
}

.mo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.mo-item {
    text-align: center;
    font-size: 11.5px;
    color: var(--text-2);
    transition: transform .15s;
}

.mo-item:active { transform: scale(.94); }

.mo-ic {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 6px;
}

/* 统计卡 */
.stat-grid { padding: 12px 0 10px; }

/* ============================================================
   v20 · 生态页深度优化
   ============================================================ */
.eco-hero {
    border-radius: 16px;
    padding: 20px 16px;
    box-shadow: 0 8px 22px rgba(230, 80, 0, .26);
}

.eco-hero::after {
    right: -20px;
    top: -40px;
    width: 132px;
    height: 132px;
    background: rgba(255, 215, 102, .28);
}

.eco-hero .eh-t { font-size: 20px; }

.more-sec {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    padding: 18px 4px 9px;
}

.more-sec::before {
    content: "";
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ff8a1a, #ff5000);
    margin-right: 7px;
    flex: none;
}

.more-grid {
    border-radius: 16px;
    padding: 18px 8px;
    gap: 16px 8px;
    box-shadow: var(--shadow);
}

.mi-ic {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 23px;
    transition: transform .15s;
}

.more-item:active .mi-ic { transform: scale(.92); }
.more-item span { font-size: 11.5px; }

/* ============================================================
   v20 · 首页深度优化（参考 mall.tzey.cn/wap）
   ============================================================ */

/* 金刚区：圆形 + 极淡彩底 + 彩色图标 */
.kk-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    box-shadow: none;
    transition: transform .15s;
}

.kk-item:active .kk-icon { transform: scale(.92); }
.kk-item span { font-size: 11px; color: #333; margin-top: 1px; display: block; }
.kingkong { border-radius: 16px; padding: 17px 4px 15px; gap: 16px 0; }

/* 促销条 / hero / 双分区 / 秒杀 */
.promo-bar { border-radius: 16px; padding: 13px 15px; }
.zone-pair { gap: 10px; margin-top: 12px; }
.zp { border-radius: 16px; }
.zp.z1 { background: linear-gradient(135deg, #fff0e6, #ffdcc2 92%); }
.zp.z2 { background: linear-gradient(135deg, #fffbeb, #ffe9ad 92%); }
.zp.z1 .zp-tag { background: linear-gradient(135deg, #ff6a3d, #ff3d00); }
.zp.z2 .zp-tag { background: linear-gradient(135deg, #ffb400, #f59a00); }
.seckill { border-radius: 16px; margin-top: 12px; padding: 13px 0 12px; }
.np-sec { border-radius: 16px; margin-top: 12px; }
.sk-card { flex: 0 0 102px; }
.sk-pic { width: 102px; height: 102px; border-radius: 14px; }

/* 板块标题统一加左侧装饰条 */
.np-head {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 6px;
}

.np-head::before {
    content: "";
    width: 4px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ff8a1a, #ff5000);
    margin-right: 7px;
    flex: none;
}

.sk-head b { font-size: 16px; }

/* 分区板块标题 */
.zh-name em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(135deg, #ff8a1a, #ff5000);
}

.zone-head { margin-bottom: 10px; }
.zone-rate { border-radius: 10px; padding: 7px 11px; font-size: 11.5px; }

/* 会员中心：资产条上方「我的钱包」标题行（原 .ma-more 绝对定位会压住第 4 个资产） */
.mine-wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 0;
    position: relative;
    z-index: 2;
}

.mw-t {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .3px;
}

.mw-more {
    font-size: 11px;
    color: rgba(255, 255, 255, .9);
}

.mine-asset { margin-top: 8px; }

/* ==================== v25 编辑资料 ==================== */
.pf-av-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0 12px; }
.pf-av-row .pf-av {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff; cursor: pointer;
    border: 2.5px solid transparent; box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
    transition: .15s;
}
.pf-av-row .pf-av.sel { border-color: var(--pri, #3a93ff); transform: scale(1.08); }
.pf-av-row .pf-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.invite-row .pf-invite { flex: 1; display: flex; align-items: center; justify-content: space-between; }
.invite-row .pf-invite b { font-size: 17px; letter-spacing: 2px; color: var(--text-1, #1a1a1f); }
.invite-row .pf-invite-btn { font-size: 12px; color: var(--pri, #3a93ff); padding: 4px 12px;
    border: 1px solid var(--pri, #3a93ff); border-radius: 14px; }

.pf-bind { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pf-bind:last-child { border-bottom: none; }
.pf-bind .pb-l { flex: 1; min-width: 0; }
.pf-bind .pb-k { font-size: 12px; color: var(--text-3); }
.pf-bind .pb-v { font-size: 14px; font-weight: 600; margin-top: 2px; }
.pf-bind .pb-tag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 400;
    padding: 1px 7px; border-radius: 9px; background: #f2f2f5; color: #9a9aa5; vertical-align: 1px; }
.pf-bind .pb-tag.ok { background: #eafaf0; color: #07c160; }
.pf-bind .pb-tag.lock { background: #fff2f0; color: #f0567a; }
.pf-bind .pb-edit { font-size: 12px; color: var(--pri, #3a93ff); padding: 5px 13px;
    border: 1px solid var(--pri, #3a93ff); border-radius: 15px; flex: none; margin-left: 10px; }
.pf-bind .pb-edit.off { color: #b8b8c0; border-color: #d9d9e0; }

.pf-bind-form { background: #f8f9fb; border-radius: 10px; padding: 10px 12px; margin: 10px 0 4px; }
.pf-bind-form .pf-bf-tip { font-size: 11px; color: #b45309; margin-bottom: 8px; line-height: 1.6; }
.pf-bind-form .pf-bf-row { display: flex; gap: 8px; align-items: center; }
.pf-bind-form input { flex: 1; height: 36px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 10px;
    font-size: 13px; background: #fff; }
.pf-bind-form .btn { height: 36px; padding: 0 15px; font-size: 12px; flex: none; }

/* ===== v32：首页顶部轮播图（Swiper） ===== */
.home-banner { position: relative; margin: 10px 12px 10px; border-radius: 14px; overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,.06); background: #f2f3f5; }
.home-banner .swiper-slide { position: relative; }
.home-banner .hb-img { display: block; width: 100%; height: 150px; object-fit: cover; background: #e9eaee; }
.home-banner .swiper-pagination { bottom: 6px !important; }
.home-banner .swiper-pagination-bullet { background: #fff; opacity: .55; }
.home-banner .swiper-pagination-bullet-active { opacity: 1; background: var(--pri, #3a93ff); }
.home-banner a { display: block; }

/* ===== v32：我的邀请（二维码卡） ===== */
.invite-card { padding: 14px; }
.invite-card .ic-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.invite-card .ic-title { font-size: 15px; font-weight: 700; color: var(--text-1, #1a1a1f); }
.invite-card .ic-sub { font-size: 11px; color: var(--text-3, #9a9aa5); }
.invite-card .ic-body { display: flex; gap: 14px; align-items: center; }
.invite-card .ic-qr { flex: none; width: 110px; height: 110px; padding: 6px; background: #fff;
    border: 1px solid var(--line, #ececef); border-radius: 10px; }
.invite-card .ic-qr img, .invite-card .ic-qr canvas { width: 98px !important; height: 98px !important; display: block; }
.invite-card .ic-info { flex: 1; min-width: 0; }
.invite-card .ic-code { font-size: 13px; color: var(--text-2, #555); margin-bottom: 4px; }
.invite-card .ic-code b { font-size: 16px; letter-spacing: 2px; color: var(--text-1, #1a1a1f); }
.invite-card .ic-link { font-size: 11px; color: var(--text-3, #9a9aa5); word-break: break-all;
    line-height: 1.5; margin-bottom: 10px; }
.invite-card .ic-link:empty { display: none; }

/* 小号幽灵按钮（复制邀请链接） */
.btn.sm.ghost { height: 32px; padding: 0 14px; font-size: 12px; line-height: 30px;
    background: #fff; color: var(--pri, #3a93ff); border: 1px solid var(--pri, #3a93ff);
    border-radius: 16px; box-shadow: none; }

/* ===== v32b：邀请海报页 ===== */
.invite-poster { margin: 14px 12px; background: linear-gradient(160deg,#fff6f0,#fff);
    border: 1px solid #ffe2d4; border-radius: 18px; padding: 22px 18px 18px; text-align: center;
    box-shadow: 0 6px 20px rgba(255,106,61,.10); }
.invite-poster .ip-top { margin-bottom: 16px; }
.invite-poster .ip-logo img { width: 54px; height: 54px; border-radius: 14px; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.invite-poster .ip-brand { font-size: 19px; font-weight: 800; margin-top: 8px; color: #222; letter-spacing: 1px; }
.invite-poster .ip-slogan { font-size: 12px; color: #ff7a45; margin-top: 3px; }
.invite-poster .ip-qr { display: inline-block; padding: 12px; background: #fff; border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,.06); margin: 6px 0 14px; }
.invite-poster .ip-qr #poster-qr img, .invite-poster .ip-qr #poster-qr canvas {
    width: 180px !important; height: 180px !important; display: block; }
.invite-poster .ip-qr-tip { font-size: 11px; color: #9a9aa5; margin-top: 10px; }
.invite-poster .ip-code { font-size: 14px; color: #555; margin-bottom: 6px; }
.invite-poster .ip-code b { font-size: 18px; letter-spacing: 3px; color: #222; }
.invite-poster .ip-link { font-size: 11px; color: #9a9aa5; word-break: break-all; line-height: 1.5;
    margin-bottom: 14px; padding: 0 6px; }
.invite-poster .ip-link:empty { display: none; }
.invite-poster #btn-poster-copy { width: 100%; height: 44px; font-size: 15px; margin-bottom: 12px; }
.invite-poster .ip-rule { font-size: 11px; color: #b8b8c0; line-height: 1.6; }

/* ===== v33：拼团免单 ===== */
.gb-tip { background: #fff7ec; border: 1px solid #ffe0b8; color: #b45309; border-radius: 10px;
    padding: 10px 12px; font-size: 12px; line-height: 1.7; margin-bottom: 10px; }
.gb-tip b { color: #f0567a; }
.gb-leader { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2, #555); font-weight: 400; }
.gb-leader input { width: 16px; height: 16px; accent-color: #f0567a; }

/* 我的拼团列表 */
.gr-card { padding: 12px; margin-bottom: 10px; }
.gr-card .gr-head { display: flex; align-items: center; gap: 10px; }
.gr-card .gr-head .thumb { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center;
    justify-content: center; color: #fff; font-weight: 800; font-size: 18px; flex: none; }
.gr-card .gr-info { flex: 1; min-width: 0; }
.gr-card .gr-t { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-card .gr-s { font-size: 11px; color: var(--text-3, #9a9aa5); margin-top: 2px; }
.gb-pill { flex: none; font-size: 10px; padding: 3px 8px; border-radius: 10px; font-weight: 700; }
.gb-pill.p1 { background: #fff4e0; color: #d48806; }
.gb-pill.p2 { background: #eafaf0; color: #07c160; }
.gb-pill.p3 { background: #f2f2f5; color: #9a9aa5; }
.gr-reward { font-size: 11px; line-height: 1.6; background: #f8f9fb; border-radius: 8px;
    padding: 7px 10px; margin-top: 8px; color: var(--text-3, #9a9aa5); }
.gr-reward.win { background: #eafaf0; color: #079354; font-weight: 600; }
.gr-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px;
    color: var(--text-2, #555); margin-top: 8px; }
.gr-foot .gr-go { color: var(--pri, #3a93ff); }

/* ===== v34：商品收藏 / 足迹 ===== */
.fav-bar { display: flex; align-items: center; justify-content: space-between;
    padding: 4px 2px 10px; font-size: 12px; color: var(--text-3, #9a9aa5); }
.fav-bar b { color: var(--price, #ff4400); font-size: 14px; }
.fp-clear { color: var(--pri, #3a93ff); font-size: 12px; }
.fav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gc-mine { box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.gc-mine .row { margin-top: 6px; align-items: center; }
.gm-time { font-size: 10px; color: #b6b6c0; }
.gm-del { font-size: 10px; color: #9a9aa5; border: 1px solid #e6e6ec;
    border-radius: 10px; padding: 2px 8px; background: #fff; }
.gm-del:active { background: #f4f4f7; }
/* 商品详情页底部：收藏按钮 */
.fav-btn { width: 46px; height: 46px; border: none; background: #fff; flex: none;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.06); border-radius: 50%; margin-left: 2px; }
.fav-btn .fb-ic { font-size: 24px; line-height: 1; color: #cfcfd8; }
.fav-btn .fb-ic.on { color: #ff4d6d; }
.fav-btn:active .fb-ic { transform: scale(1.15); }
/* 商品详情页：详情图（5~10 张） */
.gd-imgs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.gd-imgs img { width: 100%; border-radius: 8px; display: block; background: #f5f5f7; }

/* ===== v34b：商品详情轮播图（后台上传 3~4 张正方形） ===== */
.gd-swiper { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; background: #f5f5f7; }
.gd-swiper::-webkit-scrollbar { display: none; }
.gd-swiper img { width: 100%; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1;
    object-fit: cover; display: block; }
.gd-swiper .gd-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex;
    justify-content: center; align-items: center; gap: 5px; }
.gd-swiper .gd-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
.gd-swiper .gd-dots i.on { width: 14px; border-radius: 3px; background: #fff; }

/* v35b：首页各卡（分区卡 / 秒杀 / 今日上新 / 分区小图）的商品首图，铺满不变形 */
.gc .ph,
.sk-pic,
.np-pic,
.zp-pic {
    position: relative;
    overflow: hidden;
}

.gc .ph img,
.sk-pic img,
.np-pic img,
.zp-pic img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #fff;
}

/* ============ v38：购物车 / 结算 / 收银台 / 订单 / 评价 / 收藏 / 足迹 / 拼团 / 详情头图 的商品首图 ============ */
.cr-thumb,
.goods-row .thumb,
.rv-goods .thumb,
.oc-goods .thumb,
.gr-head .thumb,
.gc-mine .ph,
.gd-hero {
    position: relative;
    overflow: hidden;
}

.cr-thumb img,
.goods-row .thumb img,
.rv-goods .thumb img,
.oc-goods .thumb img,
.gr-head .thumb img,
.gc-mine .ph img,
.gd-hero img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #fff;
}

/* 订单列表 48×48 缩略图里的兜底首字（图挂了/无图时露出） */
.oc-goods .thumb .oc-thumb-char {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--thumb-ink, #8a5a2b);
}

/* ============ v37 幸运大转盘 ============ */
.lt-wrap { padding: 14px 12px 4px; text-align: center; }
.lt-tip { font-size: 12px; color: #6b7280; margin-bottom: 10px; }
.lt-disc { position: relative; width: 260px; height: 260px; margin: 0 auto; }
.lt-sectors {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%; overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    border: 6px solid #fff;
    box-sizing: border-box;
}
.lt-sectors .lt-label {
    position: absolute; transform: translate(-50%, -50%);
    font-size: 11px; color: #fff; font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    max-width: 70px; line-height: 1.2;
}
.lt-pointer {
    position: absolute; top: -6px; left: 50%; margin-left: -11px;
    width: 0; height: 0; z-index: 3;
    border-left: 11px solid transparent; border-right: 11px solid transparent;
    border-top: 20px solid #ff3b30;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
}
.lt-go {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 82px; height: 82px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, #ff8a3d, #ff5000); color: #fff;
    font-size: 15px; font-weight: 700; z-index: 4;
    box-shadow: 0 4px 14px rgba(255, 80, 0, .45);
}
.lt-go:disabled { background: #d1d5db; box-shadow: none; color: #fff; }
.lt-msg { margin-top: 14px; font-size: 14px; color: #ff5000; font-weight: 600; min-height: 20px; }
.lt-rec { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.lt-rec-n { color: #111827; font-weight: 600; }
.lt-rec-t { color: #9ca3af; font-size: 12px; }

/* ============================================================
 * v42：在线客服聊天窗（商城自建，替代浩宇云 iframe 方案）
 * 为什么不再用 iframe：浩宇云每次 open 都会轮换会话 key，而 key 存在 games 域的
 * localStorage，跨域够不着 ⇒ 「传订单要 open」与「open 会把 iframe 旧 key 作废」互斥，
 * 导致第二次之后永远卡在"连接中…"。商城自持 key 并直接渲染气泡，链路才自洽。
 * ============================================================ */
.cs-mask {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0, 0, 0, .45);
    display: flex; align-items: flex-end; justify-content: center;
}
.cs-win {
    width: min(96vw, 420px); height: min(74vh, 620px);
    background: #f2f3f5; border-radius: 14px 14px 0 0;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, .22);
}
.cs-hd {
    flex: none; display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(90deg, #6a8bff, #3b6fd4); color: #fff;
    font-size: 14px; font-weight: 600;
}
.cs-hd .cs-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #52e0a0; box-shadow: 0 0 0 3px rgba(82, 224, 160, .28);
}
.cs-hd .cs-state { font-size: 12px; opacity: .86; margin-left: auto; }
.cs-hd .cs-x { cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; }
.cs-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 12px 12px 6px;
}
.cs-empty { text-align: center; color: #9aa0aa; font-size: 13px; padding: 26px 10px; }
.cs-row { display: flex; flex-direction: column; margin-bottom: 10px; }
.cs-row.me { align-items: flex-end; }
.cs-row.sys { align-items: center; }
.cs-bub {
    max-width: 78%; padding: 9px 12px; border-radius: 12px;
    font-size: 14px; line-height: 1.5; word-break: break-word;
    background: #fff; border-top-left-radius: 4px;
}
.cs-row.me .cs-bub {
    background: linear-gradient(135deg, #6a8bff, #3b6fd4);
    color: #fff; border-top-left-radius: 12px; border-top-right-radius: 4px;
}
/* 订单上下文：居中系统卡，避免被当成访客自己说的话 */
.cs-row.sys .cs-bub {
    max-width: 86%; background: #fff6e6; color: #96680f;
    font-size: 13px; border-radius: 10px; border-top-left-radius: 10px;
}
.cs-meta { font-size: 11px; color: #a8adb6; margin-top: 3px; }
.cs-row.me .cs-meta { text-align: right; }
.cs-ft {
    flex: none; display: flex; gap: 8px; padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: #f7f8fa; border-top: 1px solid #eaecef;
}
.cs-ft input {
    flex: 1; min-width: 0; height: 38px; padding: 0 12px;
    border: 0; border-radius: 19px; background: #fff; font-size: 14px; outline: none;
}
.cs-ft button {
    flex: none; height: 38px; padding: 0 18px; border: 0; border-radius: 19px;
    background: linear-gradient(135deg, #6a8bff, #3b6fd4);
    color: #fff; font-size: 14px; font-weight: 600;
}
.cs-ft button:active { opacity: .85; }
.cs-ft input:disabled { background: #eef0f3; }

/* ---------------- 支付跳转遮罩（按环境分流：微信/支付宝/小程序/APP 直接进收银台） ---------------- */
.pg-mask {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-mask.hide { display: none; }

.pg-card {
    width: 280px;
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px 18px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}

.pg-spin {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 3px solid #ffd9c2;
    border-top-color: #ff5000;
    border-radius: 50%;
    animation: pgSpin .8s linear infinite;
}

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

.pg-txt { font-size: 15px; color: #222; font-weight: 600; }
.pg-sub { font-size: 12px; color: #999; margin-top: 6px; }
.pg-acts { margin-top: 16px; display: flex; gap: 10px; justify-content: center; }