/* 2026-09-01：品牌主色 橙(#e96b5a) → 微信生态绿(#07C160)，与商户端统一。
   语义分层：--primary=品牌骨架 / --price=价格 / --coupon=券与福利 / --point=积分。
   价格与券保留橙：那是「钱与福利」的转化语义，不是品牌色，混在一起两边都失效。 */
:root{--primary:#07C160;--primary-dark:#06A452;--bg:#f5f5f5;--card:#fff;--text:#333;--text2:#999;--border:#eee;--success:#52c41a;--warning:#faad14;--price:#ff6b35;--coupon:#ff6b35;--point:#06A452;--teal:#1d9e75;--radius:12px;--shadow:0 2px 12px rgba(0,0,0,.06);--appw:450px}
*{margin:0;padding:0;box-sizing:border-box}
/* --appw：应用有效宽度，手机 450 / 平板 720 / 桌面 1080（见底部媒体查询），居中呈现 */
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--text);max-width:var(--appw);margin:0 auto;min-height:100vh;position:relative;padding-bottom:70px;-webkit-font-smoothing:antialiased}
.header{position:sticky;top:0;z-index:100;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.header h1{font-size:17px;font-weight:600}
.header .user-bar{display:flex;align-items:center;gap:8px;font-size:13px}
.top-nav{display:flex;gap:0;background:var(--card);overflow-x:auto;white-space:nowrap;padding:0 8px;border-bottom:1px solid var(--border)}
.top-nav span{display:inline-block;padding:10px 14px;font-size:13px;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;flex-shrink:0}
.top-nav span.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500}
.section{padding:12px 16px}
.section-title{font-size:15px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.section-title .icon{width:20px;height:20px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.store-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.store-card{background:var(--card);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
.store-card .store-name{font-size:14px;font-weight:600;margin-bottom:4px;display:flex;flex-wrap:wrap;align-items:center;column-gap:4px;row-gap:2px}
.store-card .store-cat{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-card .store-addr{font-size:11px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-list{display:flex;flex-direction:column;gap:10px}
.product-item{background:var(--card);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);display:flex;gap:12px}
.product-img{width:80px;height:80px;border-radius:8px;background:linear-gradient(135deg,#fce4ec,#f3e5f5);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.product-info{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.product-info .name{font-size:14px;font-weight:500}
.product-info .desc{font-size:12px;color:var(--text2);margin:2px 0}
.product-info .bottom{display:flex;align-items:center;justify-content:space-between}
.product-info .price{font-size:16px;font-weight:600;color:var(--price)}
.product-info .price .orig{font-size:11px;color:var(--text2);text-decoration:line-through;margin-left:4px}
.btn-sm{padding:6px 14px;border-radius:16px;border:none;font-size:12px;cursor:pointer;font-weight:500}
.btn-primary{background:var(--primary);color:#fff}
.btn-outline{border:1px solid var(--primary);color:var(--primary);background:transparent}
.order-item{background:var(--card);border-radius:var(--radius);padding:12px;margin-bottom:10px;box-shadow:var(--shadow)}
.order-item .order-header{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin-bottom:8px}
.order-item .order-body{display:flex;justify-content:space-between;align-items:center}
.order-item .order-amount{font-size:16px;font-weight:600}
.status-badge{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:500}
.status-paid{background:#e6f7ff;color:#1890ff}
.status-completed{background:#f6ffed;color:var(--success)}
.coupon-card{background:linear-gradient(135deg,#fff5f5,#fff0f0);border:1px dashed var(--coupon);border-radius:var(--radius);padding:14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.coupon-card .coupon-left{}
.coupon-card .coupon-title{font-size:14px;font-weight:600}
.coupon-card .coupon-desc{font-size:11px;color:var(--text2);margin-top:4px}
.coupon-card .coupon-value{font-size:22px;font-weight:700;color:var(--coupon)}
.coupon-card .coupon-value small{font-size:13px;font-weight:400}
.cross-item{background:var(--card);border-radius:var(--radius);padding:12px;margin-bottom:8px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px}
.cross-item .arrow{font-size:18px;color:var(--text2)}
.cross-item .cross-info{flex:1}
.cross-item .cross-store{font-size:13px;font-weight:500}
.cross-item .cross-meta{font-size:11px;color:var(--text2)}
.cross-item .cross-amount{font-size:16px;font-weight:600;color:var(--teal)}
.tab-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--appw);background:var(--card);border-top:1px solid var(--border);display:flex;padding:6px 0 env(safe-area-inset-bottom,6px)}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--text2);cursor:pointer;padding:4px 0;position:relative}
.tab-item.active{color:var(--primary)}
.tab-item .tab-icon{font-size:20px}
/* 优惠券tab角标 */
.tab-badge{position:absolute;top:-1px;left:calc(50% + 8px);background:#ef4444;color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:9px;text-align:center;line-height:15px;padding:0 4px;font-weight:600;display:none;border:1.5px solid var(--card);box-sizing:content-box}
/* 首页送券横幅（头部+横滑券列表） */
.coupon-banner{background:linear-gradient(135deg,#ff6b35,#ff9c6e);border-radius:14px;padding:14px 16px 12px;color:#fff;margin-bottom:12px;cursor:pointer;box-shadow:0 4px 14px rgba(255,107,53,.35);animation:cbPulse 2.4s ease-in-out infinite}
@keyframes cbPulse{0%,100%{box-shadow:0 4px 14px rgba(255,107,53,.35)}50%{box-shadow:0 4px 20px rgba(255,107,53,.6)}}
.cb-head{display:flex;align-items:center;justify-content:space-between}
.cb-scroll{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:2px;scrollbar-width:none}
.cb-scroll::-webkit-scrollbar{display:none}
.cb-card{flex-shrink:0;width:132px;background:rgba(255,255,255,.95);border-radius:10px;padding:10px 12px;color:var(--text)}
.cb-card .cb-val{font-size:19px;font-weight:800;color:#ff6b35;line-height:1.1}
.cb-card .cb-val small{font-size:11px;font-weight:600}
.cb-card .cb-name{font-size:12px;font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-card .cb-store{font-size:11px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-card .cb-dist{display:inline-block;font-size:10px;color:#ff6b35;background:#fff1ea;border-radius:8px;padding:1px 7px;margin-top:5px}
.page{display:none}
.page.active{display:block}
.empty{text-align:center;padding:40px 16px;color:var(--text2);font-size:14px}
/* 签到条 */
.checkin-bar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#fff7e6,#fff3d6);border:1px solid #ffd666;border-radius:var(--radius);padding:10px 14px;margin-bottom:12px}
.checkin-bar.checked-in{background:linear-gradient(135deg,#f6ffed,#e6ffe6);border-color:#b7eb8f}
.checkin-left{display:flex;align-items:center;gap:8px}
.checkin-icon{font-size:20px}
.checkin-text{font-size:13px;color:var(--text)}
.checkin-text b{color:var(--primary)}
.checkin-points{font-size:12px;color:var(--teal);cursor:pointer;font-weight:500}
.checkin-btn{padding:6px 16px;background:linear-gradient(135deg,#ff9c6e,#ff7a45);color:#fff;border:none;border-radius:16px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(255,122,69,.3)}
/* 积分兑换 */
.points-exchange-bar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#f0f0ff,#e6e6ff);border:1px solid #d3adf7;border-radius:var(--radius);padding:10px 14px;margin-bottom:12px}
.pe-left{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.pe-left b{color:var(--point);font-size:18px}
.pe-icon{font-size:20px}
.reward-item{background:var(--card);border-radius:var(--radius);padding:12px 14px;margin-bottom:8px;box-shadow:var(--shadow)}
.reward-icon{font-size:28px;width:40px;text-align:center}
.reward-name{font-size:14px;font-weight:500}
.reward-desc{font-size:11px;color:var(--text2);margin-top:2px}
.reward-cost{font-size:18px;font-weight:700;color:var(--point);margin-bottom:4px}
.reward-cost small{font-size:12px;font-weight:400;color:var(--text2)}
/* 优惠券网格（小方框 4列） */
.coupon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.coupon-box{background:var(--card);border-radius:10px;padding:10px 6px 8px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}
.coupon-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--coupon)}
.coupon-box.cb-orange::before{background:#ff6b35}
.coupon-box.cb-purple::before{background:#6366f1}
.coupon-box.cb-green::before{background:var(--success)}
.coupon-box.cb-gray::before{background:var(--text2)}
.coupon-box .cb-val{font-size:20px;font-weight:800;color:var(--coupon);line-height:1.1}
.coupon-box .cb-val small{font-size:10px;font-weight:600}
.coupon-box.cb-orange .cb-val{color:#ff6b35}
.coupon-box.cb-purple .cb-val{color:#6366f1}
.coupon-box.cb-gray .cb-val{color:var(--text2)}
.coupon-box .cb-name{font-size:11px;font-weight:600;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.coupon-box .cb-store{font-size:9px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.coupon-box .cb-btn{margin-top:6px;padding:3px 10px;border-radius:10px;border:none;font-size:11px;cursor:pointer;font-weight:500}
.coupon-box .cb-btn.cb-claim{background:#6366f1;color:#fff}
.coupon-box .cb-btn.cb-use{background:var(--coupon);color:#fff}
.coupon-box .cb-btn.cb-done{background:#eee;color:#999;cursor:default}
.coupon-box .cb-tag{position:absolute;top:3px;right:3px;font-size:8px;padding:1px 4px;border-radius:4px;font-weight:600}
.coupon-more-bar{grid-column:1/-1;text-align:center;padding:8px;font-size:13px;color:var(--coupon);cursor:pointer;font-weight:500;background:var(--card);border-radius:10px;box-shadow:var(--shadow)}
/* 福利概览卡 */
.welfare-card{display:flex;border-radius:14px;overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow);cursor:pointer}
.welfare-card .wc-section{flex:1;padding:14px 8px;text-align:center;color:#fff;position:relative}
.welfare-card .wc-section+.wc-section::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:1px;background:rgba(255,255,255,.3)}
.welfare-card .wc-num{font-size:22px;font-weight:800;line-height:1.2}
.welfare-card .wc-num small{font-size:12px;font-weight:600}
.welfare-card .wc-label{font-size:11px;opacity:.9;margin-top:2px}
.welfare-card .wc-arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.8}
/* 福利页顶部大卡 */
.welfare-hero{border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow);color:#fff}
.welfare-hero .wh-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.welfare-hero .wh-points{font-size:28px;font-weight:800}
.welfare-hero .wh-points small{font-size:13px;font-weight:600}
.welfare-hero .wh-stats{display:flex;gap:0;margin-top:4px}
.welfare-hero .wh-stat{flex:1;text-align:center}
.welfare-hero .wh-stat+.wh-stat{border-left:1px solid rgba(255,255,255,.25)}
.welfare-hero .wh-stat-num{font-size:18px;font-weight:700}
.welfare-hero .wh-stat-label{font-size:11px;opacity:.85;margin-top:2px}
/* 全屏优惠券浏览弹层 */
.coupon-modal{position:fixed;inset:0;z-index:999;background:var(--bg);display:none;flex-direction:column}
.coupon-modal.active{display:flex}
.coupon-modal .cm-header{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.coupon-modal .cm-title{font-size:16px;font-weight:700}
.coupon-modal .cm-close{font-size:22px;cursor:pointer;color:var(--text2);line-height:1}
.coupon-modal .cm-body{flex:1;overflow-y:auto;padding:12px 16px 80px}
.coupon-modal .cm-filter{display:flex;gap:8px;padding:0 0 12px;overflow-x:auto;scrollbar-width:none}
.coupon-modal .cm-filter::-webkit-scrollbar{display:none}
.coupon-modal .cm-chip{flex-shrink:0;padding:6px 14px;border-radius:16px;font-size:12px;border:1px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer}
.coupon-modal .cm-chip.active{background:var(--coupon);color:#fff;border-color:var(--coupon)}
/* 表单 */
/* 会员卡片（内联渐变失效时的兜底底色，避免白底白字） */
.member-card{border-radius:var(--radius);padding:16px;margin-bottom:12px;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.12);background:linear-gradient(135deg,#07C160,#06A452)}
/* 数据统计三卡 */
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.stats-grid .stat-card{background:var(--card);border-radius:var(--radius);padding:14px 10px;text-align:center;box-shadow:var(--shadow);min-width:0}
.stats-grid .stat-label{font-size:12px;color:var(--text2);margin-bottom:4px}
.stats-grid .stat-value{font-weight:700}
.mc-top{display:flex;align-items:center;gap:12px}
.mc-icon{font-size:36px}
.mc-info{flex:1}
.mc-level{font-size:16px;font-weight:700}
.mc-name{font-size:13px;opacity:.85;margin-top:2px}
.mc-mult{background:rgba(255,255,255,.25);padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600}
.mc-progress-wrap{margin-top:14px}
.mc-progress-label{display:flex;justify-content:space-between;font-size:11px;opacity:.9;margin-bottom:4px}
.mc-progress-label b{font-weight:700}
.mc-progress-bar{height:6px;background:rgba(255,255,255,.25);border-radius:3px;overflow:hidden}
.mc-progress-fill{height:100%;background:#fff;border-radius:3px;transition:width .5s ease}
.mc-max-level{text-align:center;font-size:13px;margin-top:12px;opacity:.9}
.mc-benefits{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mc-benefit-tag{background:rgba(255,255,255,.2);padding:3px 10px;border-radius:10px;font-size:11px}
/* 等级路线图 */
.level-roadmap{display:flex;justify-content:space-between;gap:4px}
.level-node{flex:1;text-align:center;padding:10px 4px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);opacity:.5}
.level-node.current{opacity:1;border:2px solid var(--primary)}
.level-node.passed{opacity:.7}
.level-icon{font-size:24px}
.level-name{font-size:11px;font-weight:600;margin-top:4px;color:var(--text)}
.level-spent{font-size:10px;color:var(--text2);margin-top:2px}
.level-node.current .level-name{color:var(--primary)}
.cart-bar{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);width:100%;max-width:var(--appw);background:var(--card);border-top:1px solid var(--border);padding:10px 16px;display:none;justify-content:space-between;align-items:center;z-index:50}
.cart-bar.show{display:flex}
.cart-bar .cart-total{font-size:15px;font-weight:600}
.cart-bar .cart-total span{color:var(--price)}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:200;display:none;align-items:flex-end;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:var(--card);border-radius:16px 16px 0 0;width:100%;max-width:var(--appw);padding:20px 16px 30px;max-height:70vh;overflow-y:auto}
.modal h3{font-size:16px;margin-bottom:12px}
.modal .close{position:absolute;right:16px;top:16px;font-size:20px;cursor:pointer;color:var(--text2)}
.modal .coupon-select{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.modal .coupon-tag{padding:6px 12px;border:1px solid var(--border);border-radius:16px;font-size:12px;cursor:pointer}
.modal .coupon-tag.selected{border-color:var(--coupon);color:var(--coupon);background:#fff5f5}
.btn-block{display:block;width:100%;padding:12px;border:none;border-radius:var(--radius);font-size:15px;font-weight:600;cursor:pointer;margin-top:12px;background:var(--primary);color:#fff}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:300;background:rgba(0,0,0,.8);color:#fff;padding:10px 20px;border-radius:20px;font-size:14px;display:none}
.toast.show{display:block;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* 返利卡片 */
.rewards-card{background:linear-gradient(135deg,#e8f5e9,#f1f8e9);border-radius:12px;padding:16px;margin-top:12px;border:1px solid #a5d6a7}
.rc-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rc-icon{font-size:20px}
.rc-title{font-size:14px;font-weight:600;color:#2e7d32;flex:1}
.rc-badge{background:#c8e6c9;color:#2e7d32;font-size:11px;padding:2px 8px;border-radius:10px}
.rc-amount{font-size:24px;font-weight:700;color:#2e7d32;margin-bottom:6px}
.rc-desc{font-size:12px;color:#555;line-height:1.5}

/* ===== 响应式加宽（对齐官网首页抖音式版式的三档宽度） =====
   手机 <720px：450px 竖版（默认 --appw）
   平板 ≥720px：720px，店卡 3 列 / 券格 6 列
   桌面 ≥1100px：1080px，店卡 4 列 / 券格 8 列 */
@media(min-width:720px){
  :root{--appw:720px}
  .section{padding:16px 20px}
  .store-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .coupon-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .header{padding:14px 20px}
}
@media(min-width:1100px){
  :root{--appw:1080px}
  .store-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .coupon-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .product-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .section-title{font-size:16px}
}