* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    font-family: -apple-system, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    background: #f2f3f5; color: #333;
}
.app { max-width: 480px; margin: 0 auto; padding-bottom: 30px; }

/* 会员卡 */
.card {
    margin: 16px; padding: 22px 20px; border-radius: 16px; color: #fff;
    background: linear-gradient(135deg, #ff8a3d 0%, #ff5e62 100%);
    box-shadow: 0 8px 20px rgba(255,94,98,.35);
    position: relative; overflow: hidden;
}
.card::after {
    content: ""; position: absolute; right: -40px; top: -40px;
    width: 140px; height: 140px; border-radius: 50%;
    background: rgba(255,255,255,.15);
}
.card-shop { font-size: 18px; font-weight: 700; }
.card-type { font-size: 12px; opacity: .85; margin-top: 2px; }
.card-no { font-size: 24px; letter-spacing: 2px; margin: 26px 0 18px; font-family: "Courier New", monospace; }
.card-foot { display: flex; justify-content: space-between; font-size: 12px; opacity: .9; }
.card { cursor: pointer; }
.card-hint { margin-top: 14px; font-size: 12px; text-align: center; color: #fff; opacity: .92; letter-spacing: 1px; }

/* 权益 */
.stats { display: flex; margin: 0 16px; background: #fff; border-radius: 14px; padding: 18px 0; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.stat { flex: 1; text-align: center; position: relative; }
.stat::after { content: ""; position: absolute; right: 0; top: 10%; height: 80%; width: 1px; background: #eee; }
.stat:last-child::after { display: none; }
.stat-num { font-size: 20px; font-weight: 700; color: #ff5e62; }
.stat-label { font-size: 12px; color: #999; margin-top: 4px; }

/* 菜单 */
.menu { margin: 16px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.menu-item { display: flex; align-items: center; padding: 16px; font-size: 15px; border-bottom: 1px solid #f5f5f5; text-decoration: none; color: #333; }
.menu-item:last-child { border-bottom: none; }
.menu-item span { margin-right: 12px; font-size: 18px; }

/* 开卡引导 */
.activate-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.activate-mask.hide { display: none; }
.activate-box { width: 78%; background: #fff; border-radius: 16px; padding: 28px 22px; text-align: center; }
.activate-title { font-size: 19px; font-weight: 700; }
.activate-desc { font-size: 13px; color: #888; margin: 10px 0 22px; }
.activate-btn { width: 100%; padding: 13px; border: none; border-radius: 24px; color: #fff; font-size: 16px; background: linear-gradient(135deg, #ff8a3d, #ff5e62); }
.activate-btn:active { opacity: .85; }
.activate-btn:disabled { opacity: .6; }

/* 注册表单 */
.reg-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.reg-input {
    width: 100%; padding: 12px 14px; border: 1px solid #eee; border-radius: 10px;
    font-size: 15px; color: #333; background: #fafafa; outline: none;
    -webkit-appearance: none; appearance: none;
}
.reg-input:focus { border-color: #ff8a3d; background: #fff; }
.reg-input::placeholder { color: #bbb; }
.reg-sex { display: flex; gap: 18px; justify-content: center; padding: 4px 0; }
.reg-sex-item { display: flex; align-items: center; gap: 6px; font-size: 15px; color: #555; }
.reg-sex-item input { accent-color: #ff5e62; width: 16px; height: 16px; }

/* toast */
.toast { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); background: rgba(0,0,0,.8); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 99; }
.toast.show { opacity: 1; }

/* 我的卡包 */
.coupon-sheet { position: fixed; inset: 0; z-index: 60; display: none; }
.coupon-sheet.show { display: block; }
.coupon-mask { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.coupon-panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; background: #f2f3f5; border-radius: 18px 18px 0 0; max-height: 82vh; display: flex; flex-direction: column; animation: sheetUp .25s ease; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.coupon-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; font-size: 16px; font-weight: 700; color: #333; }
.coupon-close { border: none; background: transparent; font-size: 18px; color: #999; padding: 0 4px; }
.coupon-tabs { display: flex; padding: 0 18px; border-bottom: 1px solid #eee; background: #fff; border-radius: 18px 18px 0 0; }
.coupon-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #888; position: relative; }
.coupon-tab.active { color: #ff5e62; font-weight: 700; }
.coupon-tab.active::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(135deg, #ff8a3d, #ff5e62); }
.coupon-count { display: inline-block; margin-left: 4px; font-size: 12px; color: #bbb; }
.coupon-tab.active .coupon-count { color: #ff8a3d; }
.coupon-list { flex: 1; overflow-y: auto; padding: 14px 16px; }
.coupon-empty { text-align: center; color: #bbb; font-size: 14px; padding: 60px 0; }

.coupon-card { display: flex; align-items: center; background: #fff; border-radius: 12px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.04); position: relative; }
.coupon-amt { width: 96px; flex-shrink: 0; text-align: center; color: #fff; font-weight: 700; padding: 22px 0; background: linear-gradient(135deg, #ff8a3d 0%, #ff5e62 100%); font-size: 16px; }
.coupon-amt span { font-size: 26px; }
.coupon-info { flex: 1; padding: 14px 12px; min-width: 0; }
.coupon-name { font-size: 15px; font-weight: 600; color: #333; }
.coupon-valid { font-size: 12px; color: #999; margin-top: 4px; }
.coupon-id { font-size: 11px; color: #bbb; margin-top: 6px; word-break: break-all; }
.coupon-state { position: absolute; right: 12px; top: 12px; font-size: 12px; color: #ff8a3d; }
.coupon-card.used, .coupon-card.expired { opacity: .6; }
.coupon-card.used .coupon-amt, .coupon-card.expired .coupon-amt { background: linear-gradient(135deg, #c9c9c9, #b0b0b0); }
.coupon-card.used .coupon-state, .coupon-card.expired .coupon-state { color: #999; }
.coupon-card.used .coupon-use-btn, .coupon-card.expired .coupon-use-btn { display: none; }

/* 券「使用」按钮：仅可用券展示 */
.coupon-use-btn { position: absolute; right: 12px; bottom: 12px; border: none; border-radius: 16px; padding: 6px 16px; font-size: 13px; color: #fff; background: linear-gradient(135deg, #ff8a3d, #ff5e62); }
.coupon-use-btn:active { opacity: .85; }

/* 券核销二维码弹层 */
.qr-sheet { position: fixed; inset: 0; z-index: 70; display: none; }
.qr-sheet.show { display: block; }
.qr-mask { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.qr-panel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 80%; max-width: 340px; height: fit-content; max-height: 82vh; background: #fff; border-radius: 16px; overflow: hidden; animation: sheetUp .25s ease; }
.qr-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-size: 16px; font-weight: 700; color: #333; border-bottom: 1px solid #f2f3f5; }
.qr-close { border: none; background: transparent; font-size: 18px; color: #999; padding: 0 4px; }
.qr-body { padding: 20px 18px 24px; text-align: center; }
.qr-card-amt { font-size: 26px; font-weight: 700; color: #ff5e62; }
.qr-card-name { font-size: 15px; color: #333; margin-top: 4px; }
.qr-img-wrap { margin: 16px auto 10px; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; background: #fafafa; border-radius: 12px; }
.qr-img { width: 200px; height: 200px; }
.qr-tip { font-size: 13px; color: #999; }
.qr-id { font-size: 11px; color: #bbb; margin-top: 12px; word-break: break-all; }

/* 消费记录弹层（复用底部抽屉样式） */
.sheet { position: fixed; inset: 0; z-index: 60; display: none; }
.sheet.show { display: block; }
.sheet-mask { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; background: #f2f3f5; border-radius: 18px 18px 0 0; max-height: 82vh; display: flex; flex-direction: column; animation: sheetUp .25s ease; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; font-size: 16px; font-weight: 700; color: #333; }
.sheet-close { border: none; background: transparent; font-size: 18px; color: #999; padding: 0 4px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 14px 16px; }

.sale-card { background: #fff; border-radius: 12px; margin-bottom: 12px; padding: 14px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.sale-card:active { background: #fafafa; }
.sale-card-top { display: flex; justify-content: space-between; align-items: center; }
.sale-time { font-size: 14px; color: #333; font-weight: 600; }
.sale-amt { font-size: 16px; font-weight: 700; color: #ff5e62; }
.sale-card-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #999; }
.sale-no { word-break: break-all; }

.ticket-summary { background: #fff; border-radius: 12px; padding: 6px 14px; margin-bottom: 14px; }
.ticket-line { display: flex; justify-content: space-between; padding: 9px 0; font-size: 14px; color: #555; border-bottom: 1px solid #f5f5f5; }
.ticket-line:last-child { border-bottom: none; }
.ticket-total { font-weight: 700; color: #ff5e62; }

.ticket-section-title { font-size: 13px; color: #999; margin: 6px 4px; }
.ticket-empty { background: #fff; border-radius: 12px; padding: 16px; text-align: center; color: #bbb; font-size: 13px; margin-bottom: 12px; }

.ticket-good { background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.ticket-good-name { font-size: 14px; color: #333; font-weight: 600; }
.ticket-good-sub { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: #999; }
.ticket-good-amt { color: #333; font-weight: 600; }

.ticket-pay { background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; display: flex; justify-content: space-between; font-size: 14px; color: #333; }
.ticket-pay-amt { font-weight: 600; color: #333; }