*{box-sizing:border-box}body{margin:0;font-family:Arial,Microsoft YaHei,sans-serif;background:radial-gradient(circle at 12% 10%,rgba(45,212,191,.24),transparent 32%),linear-gradient(135deg,#f4fbf9,#f7f8fc 54%,#fff7ed);color:#102033}button{font:inherit}.shell{min-height:100vh;display:grid;place-items:center;padding:24px}.phonePanel{width:min(390px,100%);background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:24px;overflow:hidden;box-shadow:0 28px 80px #0f172a24}.header{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;padding:24px;color:#fff;background:linear-gradient(135deg,#069b8f,#1d4ed8)}.brandMark,.iconButton{width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;background:#ffffff2e;font-size:22px;font-weight:900}.iconButton{cursor:pointer}.header h1{margin:0;font-size:25px;line-height:1.1}.header p{margin:6px 0 0;font-size:14px;line-height:1.25;opacity:.92}.rechargeBody{padding:22px}.amountHero{min-height:120px;padding:22px;display:grid;align-content:center;gap:8px;border:1px solid #d6f2ec;border-radius:18px;background:linear-gradient(135deg,#eefdf8,#f8fbff)}.amountHero span,.amountHero small,.sectionTitle span{color:#64748b;font-size:13px;line-height:1.35}.amountHero strong{font-size:38px;line-height:1;letter-spacing:0}.fieldGroup{margin-top:22px}.sectionTitle{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:12px}.sectionTitle h2{margin:0;font-size:16px}.amountGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.amountGrid button{min-height:78px;padding:12px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;color:#132238;cursor:pointer;text-align:left}.amountGrid button span{display:block;font-size:25px;font-weight:900;line-height:1}.amountGrid button small{display:block;margin-top:8px;color:#64748b;font-size:12px}.amountGrid button.active{border-color:#0f766e;color:#fff;background:linear-gradient(135deg,#0f766e,#2563eb);box-shadow:0 12px 26px #0f766e3d}.amountGrid button.active small{color:#ffffffd1}.paymentMethod{width:100%;min-height:96px;padding:18px;display:grid;grid-template-columns:48px 1fr 28px;gap:14px;align-items:center;border:2px solid #0f766e;border-radius:16px;background:#fff;text-align:left;cursor:pointer}.payIcon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#fff3bf;color:#7a4f00;font-size:22px;font-weight:900}.paymentMethod strong{display:block;font-size:21px}.paymentMethod small,.payTimer small{display:block;color:#64748b;font-size:13px;line-height:1.4}.check{color:#0f766e;font-size:24px;font-weight:900}.status{min-height:356px;padding:40px 28px;display:grid;place-items:center;align-content:center;gap:12px;text-align:center}.statusIcon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#eefdf8;color:#0f766e;font-size:24px}.status h2{margin:0;color:#102033;font-size:23px}.status strong{font-size:22px}.status p{margin:0;color:#64748b;line-height:1.45}.payPage{min-height:100vh;background:radial-gradient(circle at 50% 0%,rgba(45,212,191,.2),transparent 34%),#f7fafc;display:grid;align-content:start;color:#1f2937}.payPanel{min-height:548px;padding:42px 20px 30px;display:grid;justify-items:center;gap:16px;text-align:center;background:#fff;border-bottom:1px solid #e5e7eb}.payBadge{min-height:30px;display:inline-grid;place-items:center;padding:0 12px;border-radius:999px;background:#eefdf8;color:#0f766e;font-size:13px;font-weight:800}.payPanel h1{margin:0;font-size:25px}.payPanel p{max-width:300px;margin:0;color:#64748b;line-height:1.45}.qrFrame{width:292px;height:292px;padding:18px;display:grid;place-items:center;border:2px solid #14b8a6;border-radius:14px;background:#fff;box-shadow:0 12px 32px #14b8a629}.qrFrame img,.qrPlaceholder{width:248px;height:248px}.qrFrame img{object-fit:contain}.qrPlaceholder{background:#f3f4f6;border-radius:8px}.payAmount{font-size:26px}.payTimer{min-height:132px;padding:28px 20px;display:grid;justify-items:center;gap:6px;text-align:center;background:#fff;border-top:12px solid #f1f5f9}.payTimer span{color:#8a94a6}.payTimer strong{font-size:28px}@media(max-width:420px){.shell{padding:8px}.phonePanel{width:100%;border-radius:20px}.amountHero strong{font-size:34px}.amountGrid button span{font-size:22px}}