/* ========================================
   万家掌柜 - H5用户端样式
   ======================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    /* 主色调：浅棕色（1:1 对齐小程序 #8B5E3C 体系） */
    --primary: #8B5E3C; --primary-dark: #6F4E37;
    --primary-soft: #C9A57A; --primary-bg: #FAF5EE;
    --primary-glow: rgba(139,94,60,0.35);
    /* 科技感主按钮渐变（全站按钮统一使用） */
    --grad-tech: linear-gradient(135deg, #B47B52 0%, #8B5E3C 55%, #6F4E37 100%);
    --bg: #FAF5EE; --white: #FFF; --text: #2E1F12;
    --text-light: #6B5641; --text-muted: #A38A75;
    --border: #EFE4D6; --success: #52C41A; --danger: #FF4D4F;
    --radius: 12px; --shadow: 0 2px 12px rgba(139,94,60,0.08);
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; padding-bottom: 72px; }

/* ========================================
   图标（内联 SVG 通用样式）
   ======================================== */
.ico { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.ico-wrap { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ico-lg { width: 32px; height: 32px; }
.ico-sm { width: 16px; height: 16px; }

/* 店铺服务入口、tab、点数条等容器的图标色调（统一主棕色 currentColor） */
.shop-action-icon,
.tab-icon,
.points-label .ico,
.pay-confirmed-icon,
.fab-cart-icon {
    color: var(--primary);
}
.tab-item.active .ico { color: var(--primary); }

/* 关闭按钮（弹层用） */
.cart-close .ico, .pay-close .ico, .rule-close .ico, .login-close .ico, .scanner-close .ico, .ath-popup-close .ico {
    color: var(--text-muted);
}
.cart-close .ico:active, .pay-close .ico:active, .rule-close .ico:active, .login-close .ico:active { color: var(--primary-dark); }

/* 店铺头部 */
.shop-header { background: linear-gradient(135deg, #8B5E3C 0%, #C9A57A 100%); color: #fff; padding: 20px; margin: 12px 12px 0; border-radius: var(--radius); position: relative; overflow: hidden; }
.shop-header .shop-share-pill {
    position: absolute; right: 14px; bottom: 12px;
    background: rgba(255,255,255,0.25); color: #fff;
    padding: 4px 14px; border-radius: 14px;
    font-size: 12px; border: none; cursor: pointer; line-height: 1.5;
}
.shop-header .back-home {
    position: absolute; left: 10px; top: 8px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,0.2); color: #fff;
    font-size: 18px; line-height: 24px; text-align: center;
    text-decoration: none; padding-bottom: 2px;
}
.shop-header-content { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.shop-logo { width: 60px; height: 60px; border-radius: 14px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; overflow: hidden; }
.shop-logo img { width: 100%; height: 100%; object-fit: cover; }
.shop-info h1 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.shop-info p { font-size: 12px; opacity: 0.85; }

/* 成长值概览 */
.points-bar { display: flex; background: var(--white); margin: 12px 12px 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 0; position: relative; z-index: 2; }
.points-item { flex: 1; text-align: center; }
.points-value { font-size: 22px; font-weight: 700; color: var(--primary); }
.points-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.points-divider { width: 1px; background: var(--border); }

/* 店铺服务入口（1:1 小程序 shop-actions） */
.shop-actions {
    display: flex; background: var(--white);
    border-radius: var(--radius); padding: 14px 0;
    margin: 12px 12px 0; box-shadow: var(--shadow);
}
.shop-action { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.shop-action-icon { font-size: 20px; }
.shop-action-text { font-size: 12px; color: #555; }

/* Tab（1:1 小程序底部 tabBar：白底固定） */
.tab-bar {
    display: flex; background: var(--white);
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; z-index: 900;
    border-top: 1px solid #E8E8E8;
    padding: 4px 0 env(safe-area-inset-bottom);
}
.tab-item { flex: 1; padding: 5px 0 4px; text-align: center; border: none; background: none; color: #999; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.tab-icon { font-size: 18px; line-height: 1.2; }
.tab-text { font-size: 11px; }
.tab-item.active { color: var(--primary); font-weight: 600; }

.tab-content { display: none; padding: 0 12px; }
.tab-content.active { display: block; }

/* 分类 */
.category-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.cat-item { padding: 6px 14px; border-radius: 20px; font-size: 13px; white-space: nowrap; border: 1px solid var(--border); background: #fff; color: var(--text-light); cursor: pointer; flex-shrink: 0; transition: all 0.2s ease; }
.cat-item:active { transform: scale(0.94); }
.cat-item.active { background: var(--grad-tech); color: #fff; border-color: transparent; box-shadow: 0 3px 10px var(--primary-glow); }

/* 商品列表 */
.product-list { display: flex; flex-direction: column; gap: 10px; }
.product-item { display: flex; background: #fff; border-radius: var(--radius); padding: 12px; gap: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); cursor: pointer; }
.product-item:active { background: #FAFAFA; }
.product-img { width: 80px; height: 80px; border-radius: 8px; background: #F5F5F5; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #ccc; flex-shrink: 0; overflow: hidden; }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-detail { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.product-name { font-size: 14px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.product-price { font-size: 16px; font-weight: 700; color: var(--primary); }
.product-price .unit { font-size: 12px; font-weight: 400; color: var(--text-muted); }
/* 商品操作区：+ 快速加购 与 查看 按钮（科技感） */
.product-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.product-add { width: 30px; height: 30px; border-radius: 50%; background: var(--grad-tech); color: #fff; border: none; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.product-add:active { transform: scale(0.86); box-shadow: 0 1px 4px var(--primary-glow); }
.product-view-btn { padding: 6px 14px; border-radius: 16px; border: 1px solid var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 600; background: #fff; cursor: pointer; line-height: 1.2; transition: all 0.2s ease; }
.product-view-btn:active { background: var(--primary-bg); transform: scale(0.94); border-color: var(--primary); color: var(--primary-dark); box-shadow: 0 2px 8px var(--primary-glow); }
.product-soldout { color: var(--text-muted); font-size: 13px; }

/* 储值商品标签 */
.product-img { position: relative; }
.recharge-badge { position: absolute; top: 2px; left: 2px; background: linear-gradient(135deg, #C9A57A, #8B5E3C); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 4px; line-height: 1.4; }
.product-recharge { border: 1px dashed #C9A57A; background: #FAF5EE; }
.recharge-tag { display: inline-block; background: #F3E7D8; color: #8B5E3C; font-size: 11px; padding: 1px 6px; border-radius: 4px; font-weight: 500; vertical-align: middle; }

/* 订单列表 */
.order-list { display: flex; flex-direction: column; gap: 10px; }
.order-item { background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.order-shop { font-size: 14px; font-weight: 600; }
.order-status { font-size: 12px; padding: 2px 8px; border-radius: 10px; }
.status-pending { background: #FFF7E6; color: #D48806; }
.status-completed { background: #F6FFED; color: #389E0D; }
.status-cancelled { background: #F0F0F0; color: #666; }
.order-products { font-size: 13px; color: var(--text-light); margin-bottom: 6px; }
.order-bottom { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.order-amount { font-size: 14px; font-weight: 700; color: var(--primary); }
.order-time { font-size: 11px; color: var(--text-muted); }
.status-paid { background: #E6F4FF; color: #0958D9; }
.order-header { cursor: pointer; }
.order-delivery-brief { font-size: 12px; color: #666; margin-top: 6px; line-height: 1.6; cursor: pointer; }
/* 查看详细记录 */
.order-detail-toggle {
    display: flex; justify-content: center; align-items: center; gap: 4px;
    font-size: 12px; color: var(--primary); margin-top: 8px;
    padding-top: 8px; border-top: 1px dashed var(--border); cursor: pointer;
}
.od-arrow { font-size: 11px; color: #9CA3AF; }
.order-detail { margin-top: 8px; padding: 10px 12px; background: #F8FAFC; border-radius: 10px; }
.order-detail.collapsed { display: none; }
.od-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #666; line-height: 2; }
.od-row .od-val { color: #333; text-align: right; word-break: break-all; }
.od-row-total { font-size: 13px; font-weight: 700; }
.od-row-total .od-val { color: var(--primary); }
.od-sub-title { font-size: 12px; font-weight: 600; color: #8B5E3C; margin: 8px 0 2px; }
.od-item { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #555; line-height: 1.9; }
.od-item-sub { color: #999; }
.od-screenshot { width: 110px; max-height: 160px; object-fit: contain; border-radius: 8px; border: 1px solid #eee; margin-top: 6px; background: #fff; }
.od-noshot { font-size: 12px; color: #bbb; padding: 6px 0; }
.order-actions { display: flex; gap: 8px; margin-top: 10px; }
.od-btn {
    flex: 1; padding: 7px 10px; border-radius: 8px; font-size: 12px;
    background: #fff; border: 1px solid var(--primary); color: var(--primary); cursor: pointer;
}
.od-btn-review { border-color: #F59E0B; color: #F59E0B; }
.order-item.order-highlight { box-shadow: 0 0 0 2px var(--primary), 0 2px 10px rgba(139,94,60,.25); transition: box-shadow .25s; }

/* 会员中心 */
.member-card { background: #fff; border-radius: var(--radius); padding: 24px; text-align: center; box-shadow: var(--shadow); margin-top: 8px; }
.member-avatar { font-size: 40px; margin-bottom: 8px; }
.member-avatar img { width: 64px; height: 64px; border-radius: 50%; }
.member-name { font-size: 16px; font-weight: 600; }
.member-phone { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.member-points-detail { background: #fff; border-radius: var(--radius); padding: 16px; margin-top: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.member-points-detail h4 { font-size: 14px; margin-bottom: 10px; }
.points-shop-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.points-shop-item:last-child { border-bottom: none; }

/* 下单弹窗 */
.cart-popup, .pay-popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: none; }
.cart-popup.show, .pay-popup.show { display: block; }
.cart-overlay, .pay-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); }
.cart-content, .pay-content { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding: 20px; max-height: 80vh; overflow-y: auto; animation: slideUp 0.3s ease; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cart-header, .pay-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cart-header h3, .pay-header h3 { font-size: 16px; }
.cart-close, .pay-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-muted); }
.cart-items { margin-bottom: 16px; }
.cart-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cart-item-name { font-size: 14px; flex: 1; }
.cart-item-price { font-size: 14px; color: var(--primary); font-weight: 600; margin: 0 10px; }
.cart-item-qty { display: flex; align-items: center; gap: 8px; }
.qty-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qty-num { font-size: 14px; min-width: 20px; text-align: center; }
.cart-summary { background: #F9FAFB; border-radius: 8px; padding: 12px; margin-bottom: 16px; }
.cart-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; }
.cart-row.cart-total { font-size: 15px; font-weight: 700; color: var(--primary); padding-top: 8px; border-top: 1px dashed var(--border); margin-top: 4px; }
.points-input { width: 50px; padding: 2px 4px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; text-align: center; }

/* 配送方式与收货信息 */
.cart-delivery { padding: 8px 0; border-top: 1px dashed var(--border); margin-top: 6px; }
.delivery-type-row { display: flex; align-items: center; gap: 14px; font-size: 13px; padding: 4px 0; }
.delivery-type-label { color: #666; }
.delivery-option { display: flex; align-items: center; gap: 4px; cursor: pointer; color: #333; }
.delivery-option input { accent-color: var(--primary); }
.delivery-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px; background: #F8FAFC; border-radius: 8px; }
.delivery-fields input, .delivery-fields textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; box-sizing: border-box; resize: none; }
.delivery-fields input:focus, .delivery-fields textarea:focus { outline: none; border-color: var(--primary); }
.cart-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.btn-danger-text { background: none; border: none; color: #EF4444; font-size: 13px; cursor: pointer; padding: 8px; }

/* 支付 */
.pay-qrcode { text-align: center; padding: 20px; }
.pay-qrcode img { max-width: 200px; border-radius: 8px; }
.pay-amount-label { text-align: center; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.pay-amount { text-align: center; font-size: 26px; font-weight: 800; color: #FF6B35; margin-bottom: 16px; }
.pay-qrcode-wrapper { margin-bottom: 16px; }
.pay-qrcode-hint { text-align: center; font-size: 13px; color: #FF6B35; font-weight: 600; margin-top: 8px; padding: 6px 12px; background: #FFF7E6; border-radius: 20px; display: inline-block; width: 100%; box-sizing: border-box; }
.pay-qr-btns { display: flex; gap: 8px; margin-top: 10px; }
.btn-copy-amount { flex: 1; padding: 10px 0; background: #F7F0E8; color: var(--primary); border: 1px solid var(--primary); border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform 0.15s ease; }
.btn-copy-amount:active { background: #EFE0CC; transform: scale(0.96); }
.pay-qr-help { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; color: var(--primary); cursor: pointer; }
.pay-qr-help-arrow { font-size: 10px; }
.pay-qr-help-body { margin-top: 8px; text-align: left; background: #F8FAFC; border-radius: 8px; padding: 10px 12px; }
.pay-qr-help-body p { margin: 0 0 6px; font-size: 12px; color: var(--text-muted); line-height: 1.7; }
.pay-qr-help-body p:last-child { margin-bottom: 0; }
.pay-disclaimer { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; }

/* 支付截图上传 */
.pay-screenshot-section { margin: 12px 0; }
.pay-screenshot-upload { text-align: center; padding: 16px; border: 2px dashed #D1D5DB; border-radius: 12px; background: #F9FAFB; }
.btn-screenshot { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: #fff; border: 1px solid var(--primary); border-radius: 20px; color: var(--primary); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
.btn-screenshot:active { background: #F7F0E8; transform: scale(0.96); }
.screenshot-icon { font-size: 18px; }
.screenshot-tip { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.pay-screenshot-preview { text-align: center; }
.pay-screenshot-preview img { max-width: 200px; max-height: 200px; border-radius: 8px; border: 2px solid var(--success); }
.btn-screenshot-retry { margin-top: 8px; padding: 6px 16px; background: none; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text-light); cursor: pointer; }

/* 支付已确认状态 */
.pay-confirmed { text-align: center; padding: 20px; }
.pay-confirmed-icon { font-size: 40px; margin-bottom: 12px; }
.pay-confirmed-text { font-size: 16px; font-weight: 700; color: var(--success); margin-bottom: 6px; }
.pay-confirmed-sub { font-size: 13px; color: var(--text-muted); }

/* 支付操作区 */
.pay-actions { padding: 0 0 8px; }
#btnConfirmPaid:disabled { background: #ccc; color: #999; cursor: not-allowed; }

/* 已付款状态标签 */
.status-paid { background: #F3E7D8; color: #8B5E3C; font-size: 12px; padding: 2px 8px; border-radius: 10px; }

/* 浮动购物车按钮（科技感悬浮球） */
.float-cart { position: fixed; bottom: 80px; right: 16px; width: 54px; height: 54px; background: var(--grad-tech); border-radius: 50%; box-shadow: 0 6px 18px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 900; transition: transform 0.2s; border: 2px solid rgba(255,255,255,0.6); }
.float-cart:active { transform: scale(0.88); }
.float-cart-icon { font-size: 20px; }
.float-cart-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; background: #EF4444; color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid #fff; }
.hidden { display: none !important; }

/* 规则弹窗 */
.rule-popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: none; }
.rule-popup.show { display: block; }
.rule-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); }
.rule-content { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding: 24px; max-height: 75vh; overflow-y: auto; animation: slideUp 0.3s ease; }
.rule-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.rule-header h3 { font-size: 16px; }
.rule-close { background: none; border: none; font-size: 18px; cursor: pointer; }
.rule-body p { font-size: 13px; color: var(--text-light); line-height: 1.8; }
.rule-body { margin-bottom: 20px; }

/* 通用按钮（科技感：棕色渐变 + 高光 + 光晕 + 按压缩放） */
.btn-primary { display: block; width: 100%; padding: 14px; background: var(--grad-tech); color: #fff; border: none; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; letter-spacing: 1px; }
.btn-primary:active { transform: translateY(1px) scale(0.97); box-shadow: 0 2px 6px var(--primary-glow); }
.btn-primary:disabled { background: linear-gradient(135deg, #C9BBAB, #A89880); box-shadow: none; cursor: not-allowed; }
.btn-outline { display: block; width: 100%; padding: 12px; background: #fff; color: var(--primary-dark); border: 1px solid var(--primary-soft); border-radius: 24px; font-size: 14px; cursor: pointer; transition: all 0.2s ease; }
.btn-outline:active { background: var(--primary-bg); transform: scale(0.97); }
.btn-block { display: block; width: 100%; }

/* 空状态 */
.empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 14px; }

/* 会员中心 - 客服联系 */
.member-service-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.member-service-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}
.member-service-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
    line-height: 1.6;
}
.member-service-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.member-service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #F8FAFC;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
}
.member-service-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.member-service-info {
    flex: 1;
    min-width: 0;
}
.member-service-label {
    font-size: 11px;
    color: var(--text-muted);
}
.member-service-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    word-break: break-all;
}
.member-service-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}
.member-service-btn.call {
    background: var(--primary);
    color: #fff;
}
.member-service-btn.copy {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.member-service-btn.email {
    background: var(--success);
    color: #fff;
}
.member-service-worktime {
    margin-top: 10px;
    padding: 10px 12px;
    background: #FFF7E6;
    border-radius: 8px;
    font-size: 12px;
    color: #B45309;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 会员中心 - 店铺二维码 */
.member-qrcode-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    text-align: center;
}
.member-qrcode-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}
.member-qrcode-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.member-qrcode-img {
    width: 180px;
    height: 180px;
    border: 3px dashed var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAFAFA;
    overflow: hidden;
}
.member-qrcode-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.member-qrcode-tip {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ========================================
   联盟商家首页（1:1 复刻小程序首页）
   ======================================== */
.home-view { padding: 4px 16px 16px; }

/* 搜索 */
.search-bar { display: flex; gap: 8px; padding: 10px 0; }
.search-input {
    flex: 1; background: #fff; border-radius: 20px;
    padding: 9px 14px; font-size: 14px;
    border: 1px solid var(--border); outline: none;
}
.search-btn {
    background: var(--grad-tech); color: #fff; border: none;
    border-radius: 20px; padding: 9px 16px; font-size: 14px;
    cursor: pointer; box-shadow: 0 3px 10px var(--primary-glow);
    transition: transform 0.15s ease;
}
.search-btn:active { transform: scale(0.94); }

/* 区块 */
.section { margin-top: 14px; }
.section-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }

/* 行业分类 */
.industry-wrap { display: flex; flex-direction: column; gap: 8px; }
/* 行业大类可收放折叠：标题行 = 展开/收起触发器 */
.industry-group { border: 1px solid var(--border); border-radius: 10px; background: #fff; overflow: hidden; }
.industry-parent {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 600; color: var(--primary);
    padding: 11px 12px; cursor: pointer; user-select: none;
}
.industry-parent:active { background: #F7F9FC; }
.industry-parent-name { flex: 1; }
.industry-parent-count {
    font-size: 11px; font-weight: 500; color: #9CA3AF;
    background: #F3F4F6; border-radius: 8px; padding: 1px 6px; min-width: 14px; text-align: center;
}
.industry-arrow { font-size: 12px; color: #9CA3AF; width: 14px; text-align: center; transition: transform .15s; }
.industry-children { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
.industry-children.collapsed { display: none; }
.industry-child {
    background: #fff; border-radius: 10px; padding: 5px 10px;
    font-size: 12px; color: var(--text-light);
    border: 1px solid var(--border); cursor: pointer;
}
.industry-child-all { color: var(--primary); border-color: var(--primary); font-weight: 600; }
.industry-child:active { background: var(--primary); color: #fff; }
.industry-more { display: flex; flex-direction: column; gap: 8px; }
.industry-more.collapsed { display: none; }
.industry-more-btn {
    width: 100%; padding: 9px 0; background: #fff;
    border: 1px solid var(--border); border-radius: 10px;
    font-size: 12px; color: var(--primary); cursor: pointer;
}

/* 推荐商家列表 */
.shop-list-home { display: flex; flex-direction: column; gap: 10px; }
.shop-list-home .empty { text-align: center; padding: 40px 0; color: var(--text-muted); font-size: 14px; }
.shop-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
}
.shop-card:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(139,94,60,0.25);
}
.shop-card-logo {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #F5EBDF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    overflow: hidden;
}
.shop-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-card-info {
    flex: 1;
    min-width: 0;
}
.shop-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop-card-addr,
.shop-card-rating {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop-card-rating { font-size: 12px; }
.shop-card-tag {
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* 平台公告（1:1 小程序） */
.announce-item {
    background: #fff;
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 10px;
    border-left: 3px solid var(--primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.announce-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.announce-content { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* ========================================
   v3.0 新功能样式
   ======================================== */

/* 签到卡片 */
.checkin-card {
    margin: 12px 16px;
    padding: 16px;
    background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
    border-radius: 12px;
    border: 2px solid #F59E0B;
}
.checkin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #92400E;
}

/* 成长值日志 */
.point-log-item {
    transition: background 0.2s;
}
.point-log-item:hover {
    background: #F8FAFC;
}

/* 已签到按钮 */
#btnCheckIn.disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* 营业状态徽章 */
#shopStatusBadge {
    vertical-align: middle;
}

/* ========================================
   通用弹窗（商品详情 / 储值抵扣 / 邀请 / 分享）
   修复：.modal-overlay 缺失定位，导致弹窗滞留在文档流底部，需下拉才能看到
   ======================================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1200;
    background: rgba(38, 27, 18, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    animation: modalFadeIn 0.2s ease;
}
.modal {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    margin: auto;
    border: 1px solid rgba(201, 165, 122, 0.35);
    box-shadow: 0 18px 50px rgba(63, 44, 26, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    animation: modalPopIn 0.26s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-dark, #6F4E37);
    text-align: center;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}
.modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalPopIn {
    from { transform: translateY(18px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ========================================
   添加到桌面引导
   ======================================== */
.add-to-home-guide {
    margin: 8px 16px;
    animation: slideUp 0.3s ease;
}
.ath-guide-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #8B5E3C 0%, #6F4E37 100%);
    color: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 12px rgba(139,94,60,0.35);
}
.ath-guide-icon {
    font-size: 26px;
    flex-shrink: 0;
}
.ath-guide-text {
    flex: 1;
    min-width: 0;
}
.ath-guide-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}
.ath-guide-desc {
    display: block;
    font-size: 11px;
    opacity: 0.8;
    margin-top: 2px;
}
.ath-guide-btn {
    flex-shrink: 0;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.ath-guide-btn:active {
    background: rgba(255,255,255,0.35);
}
.ath-guide-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

/* 教程弹窗 */
.ath-popup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ath-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
}
.ath-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px 20px;
    width: 100%;
    max-width: 400px;
    animation: slideUp 0.3s ease;
}
.ath-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.ath-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}
.ath-popup-close {
    background: #f0f0f0;
    border: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}
.ath-body {
    margin-bottom: 16px;
}
.ath-platform {
    margin-bottom: 14px;
}
.ath-platform h4 {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}
.ath-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ath-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}
.ath-step-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #F5EBDF;
    color: #8B5E3C;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ath-tip {
    margin-top: 12px;
    padding: 10px 12px;
    background: #F0FDF4;
    border-radius: 8px;
    font-size: 12px;
    color: #166534;
    text-align: center;
}

/* ==============================
   v5.0 储值码专用扫码工具
   ============================== */



/* v5.0 储值码扫码入口（大图） */
.scan-entry-banner {
    margin: 12px 12px;
    background: linear-gradient(135deg, #8B5E3C 0%, #B47B52 100%);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(139,94,60,0.25);
    cursor: pointer;
    transition: transform 0.15s;
}
.scan-entry-banner:active {
    transform: scale(0.98);
}
.scan-entry-inner {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
}
.scan-entry-text {
    flex: 1;
    color: #fff;
}
.scan-entry-title {
    font-size: 13px;
    font-weight: 600;
}
.scan-entry-sub {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 2px;
}
.scan-entry-arrow {
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    line-height: 1;
}

/* 扫码入口图标 */
.scan-entry-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.scan-entry-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 扫码弹窗全屏遮罩 */
.scanner-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.scanner-container {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}
.scanner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}
.scanner-close {
    background: #f0f0f0;
    border: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}
.scanner-hint {
    text-align: center;
    font-size: 13px;
    color: #6F4E37;
    padding: 0 20px 10px;
    font-weight: 500;
}
.scanner-viewport {
    margin: 0 20px 12px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    min-height: 280px;
    position: relative;
}
/* html5-qrcode 内部元素样式覆盖 */
.scanner-viewport video {
    display: block;
    width: 100%;
    object-fit: cover;
}
.scanner-viewport canvas {
    display: none;
}
.scanner-viewport #qr-shaded-region {
    border-width: 3px !important;
    border-color: #8B5E3C !important;
    border-radius: 8px !important;
}
.scanner-status {
    text-align: center;
    font-size: 12px;
    color: #999;
    padding: 0 20px 6px;
    min-height: 20px;
}
.scanner-cancel-btn {
    margin: 8px 20px 16px;
    width: calc(100% - 40px);
}

/* ==============================
   登录弹窗
   ============================== */
.login-popup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.login-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
}
.login-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px 20px;
    width: 100%;
    max-width: 380px;
    animation: slideUp 0.3s ease;
}
.login-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.login-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}
.login-header h3 .login-brand-logo {
    height: 30px;
    width: auto;
    display: block;
}
.login-close {
    background: #f0f0f0;
    border: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}
.login-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.login-tab {
    flex: 1;
    padding: 10px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8f8f8;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}
.login-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    font-weight: 600;
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.login-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border 0.2s;
}
.login-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139,94,60,0.12);
}
.sms-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.btn-sms {
    padding: 10px 14px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background: #fff;
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.btn-sms:disabled {
    color: #999;
    border-color: #ddd;
    background: #f5f5f5;
    cursor: not-allowed;
}
.login-tip {
    font-size: 11px;
    color: #999;
    text-align: center;
    margin-top: 4px;
}
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-bottom: 4px;
}

/* ==============================
   联盟商家列表页 - 主推产品
   ============================== */
.shop-card-main-product {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFF1F2 100%);
    border: 1px solid #FED7AA;
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.shop-card-main-product .mp-badge {
    background: linear-gradient(135deg, #F97316, #EF4444);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.shop-card-main-product .mp-info {
    flex: 1;
    min-width: 0;
}
.shop-card-main-product .mp-name {
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop-card-main-product .mp-price {
    color: #EF4444;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ==============================
   产品列表中主推标记
   ============================== */
.product-item .recommend-tag {
    position: absolute;
    top: 4px;
    right: 4px;
    background: linear-gradient(135deg, #F97316, #EF4444);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.product-item {
    position: relative;
}

/* 品牌栏（1:1 小程序首页品牌横幅，仅首页显示） */
.home-brand-bar {
    padding: 8px 16px 0;
    background: #fff;
}
.home-brand-banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 首页行业分类：默认整块折叠，点标题展开 */
.home-industry-collapsed { display: none; }
.section-title-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.section-title-toggle:active { opacity: 0.7; }

/* 用户评价（1:1 小程序店铺页） */
.review-section {
    background: #fff;
    border-radius: var(--radius);
    padding: 14px;
    margin-top: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.review-section-title { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 10px; }
.review-item { padding: 10px 0; border-bottom: 1px solid #F5F5F5; }
.review-item:last-child { border-bottom: none; }
.review-item-head { display: flex; align-items: center; }
.review-item-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: #FAF5EE; display: flex; align-items: center;
    justify-content: center; font-size: 14px; flex-shrink: 0;
}
.review-item-user { flex: 1; margin-left: 8px; }
.review-item-nick { font-size: 13px; color: #333; font-weight: 500; }
.review-item-stars { font-size: 11px; color: #F59E0B; margin-top: 2px; }
.review-item-time { font-size: 10px; color: #bbb; }
.review-item-content { font-size: 13px; color: #555; line-height: 1.6; margin-top: 7px; }
.review-section .empty { text-align: center; padding: 24px 0; color: var(--text-muted); font-size: 13px; }