:root {
  --primary: #07c160;
  --primary-hover: #06ad56;
  --alipay: #1677ff;
  --alipay-hover: #0958d9;
  --bg: #f5f7fa;
  --card-bg: #fff;
  --text: #333;
  --text-secondary: #888;
  --border: #e8e8e8;
  --radius: 12px;
  --shadow: 0 2px 12px rgba(0,0,0,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5}
.container{max-width:480px;margin:0 auto;padding:16px 16px 40px}

/* Header */
.header{text-align:center;padding:24px 0 16px}
.header .logo{font-size:40px;margin-bottom:6px}
.header h1{font-size:20px;font-weight:700;color:var(--text)}
.header p{font-size:13px;color:var(--text-secondary);margin-top:4px}

/* UID Input */
.uid-box{background:var(--card-bg);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.uid-box label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:var(--text)}
.uid-row{display:flex;gap:8px}
.uid-row input{flex:1;padding:12px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:16px;outline:none;transition:border-color .2s}
.uid-row input:focus{border-color:var(--primary)}
.uid-row button{padding:12px 20px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s}
.uid-row button:hover{background:var(--primary-hover)}
.uid-row button.loading{background:#999;pointer-events:none}
.player-info{display:none;margin-top:10px;padding:8px 12px;background:#f6fff8;border:1px solid #b7eb8f;border-radius:8px;font-size:14px;align-items:center;gap:8px}
.player-info.show{display:flex}
.player-info .avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;text-align:center;line-height:32px;font-size:16px;font-weight:700;flex-shrink:0}
.player-info .text{color:#333;font-weight:500}

/* Platform Tabs */
.tab-bar{display:flex;gap:0;margin-bottom:14px;background:var(--card-bg);border-radius:var(--radius);padding:4px;box-shadow:var(--shadow)}
.tab-btn{flex:1;padding:12px;text-align:center;border:none;background:transparent;font-size:15px;font-weight:600;color:var(--text-secondary);cursor:pointer;border-radius:10px;transition:all .2s;position:relative}
.tab-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(7,193,96,.3)}
.tab-btn[data-platform="alipay"].active{background:var(--alipay);box-shadow:0 2px 8px rgba(22,119,255,.3)}

/* Goods Grid */
.goods-section{margin-bottom:14px}
.goods-section h3{font-size:15px;font-weight:600;margin-bottom:10px;padding-left:4px}
.goods-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.goods-card{background:var(--card-bg);border:2px solid var(--border);border-radius:var(--radius);padding:16px 12px;text-align:center;cursor:pointer;transition:all .2s;box-shadow:var(--shadow);position:relative;overflow:hidden}
.goods-card:hover{border-color:#ccc;transform:translateY(-1px)}
.goods-card.selected{border-color:var(--primary);background:#f6fff8}
.goods-card.selected[data-platform="alipay"]{border-color:var(--alipay);background:#f5f9ff}
.goods-card .name{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px}
.goods-card .price{font-size:24px;font-weight:800;color:#e94f4f}
.goods-card .price small{font-size:13px;font-weight:500}
.goods-card .reward{font-size:12px;color:var(--text-secondary);margin-top:4px;line-height:1.6}
.goods-card .tag{position:absolute;top:8px;right:8px;background:#ff6b35;color:#fff;font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600}
.goods-card .check{display:none;position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;line-height:20px;text-align:center}
.goods-card.selected .check{display:block}

/* Pay Button */
.pay-box{background:var(--card-bg);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);text-align:center}
.pay-summary{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.pay-summary .label{font-size:14px;color:var(--text-secondary)}
.pay-summary .total{font-size:22px;font-weight:700;color:#e94f4f}
.pay-btn{display:block;width:100%;padding:16px;border:none;border-radius:10px;font-size:18px;font-weight:700;color:#fff;cursor:pointer;transition:all .2s}
.pay-btn.wechat{background:var(--primary)}
.pay-btn.wechat:hover:not(:disabled){background:var(--primary-hover)}
.pay-btn.alipay{background:var(--alipay)}
.pay-btn.alipay:hover:not(:disabled){background:var(--alipay-hover)}
.pay-btn:disabled{background:#ccc;cursor:not-allowed}

/* QR Modal */
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:100;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal-box{background:#fff;border-radius:16px;padding:32px 24px 24px;width:92%;max-width:380px;text-align:center;position:relative;animation:slideUp .3s ease}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:24px;color:#999;cursor:pointer;width:32px;height:32px;line-height:32px;border-radius:50%}
.modal-close:hover{background:#f5f5f5}
.modal-icon{font-size:48px;margin-bottom:8px}
.modal-title{font-size:18px;font-weight:700;margin-bottom:6px}
.modal-amount{font-size:15px;color:var(--text-secondary);margin-bottom:20px}
#qrCodeWrap{display:inline-block;padding:12px;background:#fff;border:2px solid var(--border);border-radius:8px;margin-bottom:16px}
#qrCodeWrap canvas,#qrCodeWrap img{display:block}
.modal-hint{font-size:13px;color:var(--text-secondary);margin-bottom:8px;line-height:1.6}
.modal-hint .device{font-weight:600;color:#333}
.modal-hint .icon-text{display:inline-flex;align-items:center;gap:4px}
.countdown{font-size:28px;font-weight:700;color:#e94f4f;margin:8px 0}
.countdown.expired{color:#999}
.pay-cancel-btn{margin-top:12px;padding:10px 28px;background:#f5f5f5;border:none;border-radius:8px;font-size:14px;color:#666;cursor:pointer}
.pay-cancel-btn:hover{background:#e8e8e8}

/* Toast */
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;z-index:200;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}
.toast.success{background:var(--primary)}
.toast.error{background:#e94f4f}

/* Responsive */
@media(max-width:360px){
  .goods-grid{grid-template-columns:1fr 1fr;gap:8px}
  .goods-card{padding:12px 8px}
  .goods-card .price{font-size:20px}
}