:root{--primary: #6c5ce7;--primary-light: #a29bfe;--primary-dark: #5649c0;--secondary: #00cec9;--background: #f8f9fa;--surface: #ffffff;--surface-hover: #f0f0f0;--border: #e9ecef;--text-primary: #2d3436;--text-secondary: #636e72;--text-light: #b2bec3;--success: #00b894;--warning: #fdcb6e;--danger: #e17055;--shadow: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--radius: 12px;--radius-lg: 16px}[data-theme=fresh]{--primary: #6c5ce7;--primary-light: #a29bfe;--primary-dark: #5649c0;--secondary: #00cec9;--background: #f8f9fa;--surface: #ffffff;--surface-hover: #f0f0f0;--border: #e9ecef;--text-primary: #2d3436;--text-secondary: #636e72;--text-light: #b2bec3;--gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-light: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)}[data-theme=business]{--primary: #1e3a8a;--primary-light: #3b82f6;--primary-dark: #1e40af;--secondary: #0ea5e9;--background: #f1f5f9;--surface: #ffffff;--surface-hover: #e2e8f0;--border: #cbd5e1;--text-primary: #0f172a;--text-secondary: #475569;--text-light: #94a3b8;--gradient: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);--gradient-light: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%)}[data-theme=vibrant]{--primary: #f97316;--primary-light: #fb923c;--primary-dark: #ea580c;--secondary: #fbbf24;--background: #fffbeb;--surface: #ffffff;--surface-hover: #fef3c7;--border: #fde68a;--text-primary: #78350f;--text-secondary: #92400e;--text-light: #d97706;--gradient: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);--gradient-light: linear-gradient(135deg, #ffedd5 0%, #fef3c7 100%)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--background);color:var(--text-primary);font-size:14px;-webkit-font-smoothing:antialiased}#app{min-height:100%;max-width:480px;margin:0 auto;background:var(--background);position:relative;padding-bottom:20px}.theme-switcher{padding:12px 16px;display:flex;align-items:center;gap:8px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.theme-label{font-size:12px;color:var(--text-secondary)}.theme-btn{padding:4px 10px;border:1px solid var(--border);border-radius:16px;background:transparent;font-size:12px;color:var(--text-secondary);cursor:pointer;transition:all .2s}.theme-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.page{padding:16px}.page-header{display:flex;align-items:center;padding:16px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:45px;z-index:50}.back-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;font-size:20px;color:var(--text-primary);cursor:pointer;margin-right:12px}.page-title{font-size:18px;font-weight:600;color:var(--text-primary)}.card{background:var(--surface);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow);margin-bottom:16px}.section-title{font-size:16px;font-weight:600;margin-bottom:16px;color:var(--text-primary)}.form-group{margin-bottom:20px}.form-label{display:block;font-size:14px;color:var(--text-secondary);margin-bottom:8px}.form-input{width:100%;height:48px;padding:0 16px;border:1px solid var(--border);border-radius:var(--radius);font-size:16px;color:var(--text-primary);background:var(--surface);transition:border-color .2s;outline:none}.form-input:focus{border-color:var(--primary)}.form-input.error{border-color:var(--danger)}.error-tip{font-size:12px;color:var(--danger);margin-top:6px}.btn{width:100%;height:48px;border:none;border-radius:var(--radius);font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.btn-primary{background:var(--gradient);color:#fff}.btn-primary:active{opacity:.85}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-loading{display:inline-flex;align-items:center;gap:6px}.btn-loading:before{content:"";width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.home-banner{background:var(--gradient);border-radius:var(--radius-lg);padding:24px;color:#fff;margin-bottom:20px}.home-banner h2{font-size:20px;margin-bottom:6px}.home-banner p{font-size:13px;opacity:.9}.recharge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.recharge-card{background:var(--surface);border-radius:var(--radius-lg);padding:20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;box-shadow:var(--shadow);text-decoration:none}.recharge-card:active{transform:scale(.96)}.recharge-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:12px;background:var(--gradient-light)}.recharge-name{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.recharge-desc{font-size:12px;color:var(--text-secondary)}.other-recharge{margin-top:20px}.other-recharge-title{font-size:14px;color:var(--text-secondary);margin-bottom:12px}.other-recharge-list{display:flex;gap:10px;flex-wrap:wrap}.other-recharge-item{flex:1;min-width:70px;background:var(--surface);border-radius:var(--radius);padding:12px 8px;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:all .2s;border:1px solid var(--border);text-decoration:none}.other-recharge-item:active{background:var(--surface-hover)}.other-recharge-icon{font-size:20px;margin-bottom:4px}.other-recharge-text{font-size:12px;color:var(--text-secondary)}.amount-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}.amount-item{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:20px 16px;text-align:center;cursor:pointer;transition:all .2s}.amount-item.selected{border-color:var(--primary);background:var(--gradient-light)}.amount-item:active{transform:scale(.98)}.amount-value{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:4px}.amount-item.selected .amount-value{color:var(--primary)}.amount-label{font-size:12px;color:var(--text-secondary)}.amount-summary{background:var(--surface);border-radius:var(--radius);padding:16px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}.amount-summary-label{font-size:14px;color:var(--text-secondary)}.amount-summary-value{font-size:20px;font-weight:700;color:var(--primary)}.pay-info{background:var(--surface);border-radius:var(--radius-lg);padding:20px;text-align:center;margin-bottom:16px;box-shadow:var(--shadow)}.pay-amount{font-size:32px;font-weight:700;color:var(--primary);margin-bottom:8px}.pay-amount:before{content:"¥";font-size:20px;margin-right:2px}.pay-desc{font-size:13px;color:var(--text-secondary)}.pay-methods{display:flex;gap:12px;margin-bottom:20px}.pay-method{flex:1;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .2s}.pay-method.selected{border-color:var(--primary);background:var(--gradient-light)}.pay-method-icon{font-size:24px}.pay-method-text{font-size:14px;font-weight:600;color:var(--text-primary)}.qr-section{background:var(--surface);border-radius:var(--radius-lg);padding:24px;text-align:center;box-shadow:var(--shadow)}.qr-title{font-size:16px;font-weight:600;margin-bottom:16px;color:var(--text-primary)}.qr-code{width:200px;height:200px;margin:0 auto 16px;background:#fff;border:1px solid var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}.qr-code img{width:100%;height:100%;object-fit:contain}.qr-tip{font-size:13px;color:var(--text-secondary)}.order-info{background:var(--surface);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:16px;box-shadow:var(--shadow)}.order-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px}.order-row-label{color:var(--text-secondary)}.order-row-value{color:var(--text-primary);font-weight:500}.icon-phone{background:linear-gradient(135deg,#667eea,#764ba2)}.icon-oil{background:linear-gradient(135deg,#f093fb,#f5576c)}.icon-electric{background:linear-gradient(135deg,#4facfe,#00f2fe)}.icon-gas{background:linear-gradient(135deg,#43e97b,#38f9d7)}.qr-loading{font-size:13px;color:var(--text-secondary)}.btn-loading{opacity:.7}.merchant-banner{background:var(--gradient);border-radius:var(--radius-lg);padding:20px;color:#fff;display:flex;align-items:center;gap:16px;margin-bottom:16px}.merchant-banner-icon{width:56px;height:56px;background:#fff3;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}.merchant-banner-content{flex:1;min-width:0}.merchant-banner-title{font-size:18px;font-weight:600;margin-bottom:4px}.merchant-banner-desc{font-size:12px;opacity:.9;line-height:1.5}.merchant-list{display:flex;justify-content:space-around;align-items:center}.merchant-item{display:flex;flex-direction:column;align-items:center;gap:8px}.merchant-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px}.merchant-name{font-size:12px;color:var(--text-secondary);white-space:nowrap}.tips-card{background:var(--surface);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:16px;box-shadow:var(--shadow)}.tips-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:12px}.tips-list{list-style:none;padding:0;margin:0}.tips-list li{font-size:12px;color:var(--text-secondary);line-height:1.8;padding-left:16px;position:relative}.tips-list li:before{content:"•";position:absolute;left:0;color:var(--primary);font-weight:700}.channel-section{background:var(--surface);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:16px;box-shadow:var(--shadow)}.channel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.channel-label{font-size:14px;font-weight:600;color:var(--text-primary)}.channel-hint{font-size:12px;color:var(--text-light)}.channel-list{display:flex;flex-direction:column;gap:4px}.channel-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius);cursor:pointer;transition:all .2s}.channel-item:active{background:var(--surface-hover)}.channel-item.selected{background:var(--gradient-light)}.channel-radio{width:18px;height:18px;border:2px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.channel-item.selected .channel-radio{border-color:var(--primary)}.channel-radio-inner{width:10px;height:10px;background:var(--primary);border-radius:50%}.channel-info{flex:1;min-width:0}.channel-name{font-size:14px;color:var(--text-primary);font-weight:500;margin-bottom:2px}.channel-desc{font-size:12px;color:var(--text-secondary)}.channel-arrow{font-size:18px;color:var(--text-light);flex-shrink:0}