:root{color:#111827;--bg:#f7f8fa;--panel:#fff;--line:#0f172a14;--line-strong:#2563eb7a;--text:#111827;--muted:#6b7280;--brand:#1f78ff;--brand-strong:#145fd1;--green:#22c55e;--red:#ef4444;--shadow:0 16px 32px #0f172a14;background:#f7f8fa;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html,body,#app{min-height:100%}body{background:var(--bg);color:var(--text);margin:0}button,input{font:inherit}button{border:1px solid var(--line);min-height:40px;color:var(--text);cursor:pointer;background:#fff;border-radius:10px;padding:0 16px;font-size:14px;font-weight:700}button.primary{color:#fff;background:linear-gradient(#2387ff 0%,#1668eb 100%);border-color:#4b8affe6}button:disabled{opacity:.6;cursor:wait}input{width:100%;height:42px;color:var(--text);background:#fff;border:1px solid #0f172a1f;border-radius:10px;outline:none;padding:0 14px}input::placeholder{color:#9ca3af}.recharge-shell{width:min(1200px,100vw - 32px);margin:0 auto;padding:28px 0 42px}.hero{gap:18px;margin-bottom:18px;display:grid}.hero-card,.panel{background:var(--panel);box-shadow:var(--shadow);border:1px solid #0f172a0f;border-radius:16px}.hero-card{justify-content:space-between;align-items:flex-end;gap:20px;padding:22px 24px;display:flex}.hero-copy h1{margin:0 0 8px;font-size:34px}.hero-copy p,.hero-meta span,.panel-head p,.hint,.method-note,.empty{color:var(--muted)}.hero-copy p,.panel-head p{margin:0;line-height:1.6}.hero-meta{gap:10px;min-width:240px;display:grid}.hero-meta strong{margin-top:4px;font-size:16px;display:block}.grid{grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:18px;display:grid}.panel{padding:18px}.panel-head{margin-bottom:14px}.panel-head h2{margin:0 0 6px;font-size:20px}.field{gap:8px;margin-bottom:16px;display:grid}.field label{color:var(--muted);font-size:13px;font-weight:700}.package-grid,.method-grid{gap:12px;display:grid}.package-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.choice-card{text-align:left;background:#fff;border:1px solid #0f172a14;border-radius:14px;gap:10px;padding:14px;display:grid}.choice-card.active{border-color:var(--line-strong);background:linear-gradient(#eff6ff 0%,#fff 100%);box-shadow:0 12px 24px #2563eb14}.choice-card strong{font-size:16px}.choice-card em{color:#4b5563;font-size:13px;font-style:normal}.summary{border-top:1px solid #0f172a14;gap:12px;margin-top:18px;padding-top:18px;display:grid}.summary-box{background:#f9fafb;border:1px solid #0f172a0f;border-radius:12px;padding:14px}.summary-box strong{margin-top:4px;font-size:16px;display:block}.pay-actions{align-items:center;gap:12px;margin-top:14px;display:flex}.pay-card,.stat-grid{gap:12px;display:grid}.stat{background:#f9fafb;border:1px solid #0f172a0f;border-radius:12px;padding:14px}.stat span{color:var(--muted);margin-bottom:6px;font-size:12px;display:block}.stat strong{word-break:break-all;font-size:15px;line-height:1.45;display:block}.status-paid{color:var(--green)}.status-pending{color:#f7c948}.order-list{margin-top:18px}.order-table{gap:8px;display:grid}.order-row{background:#fff;border:1px solid #0f172a0f;border-radius:12px;grid-template-columns:minmax(140px,1.3fr) 90px 100px 80px 90px 140px;align-items:center;gap:10px;min-height:44px;padding:10px 12px;font-size:13px;display:grid}.order-row.head{color:var(--muted);font-weight:700}.message{border-radius:12px;margin-top:12px;padding:12px 14px;font-size:13px}.message.error{color:#b91c1c;background:#fef2f2;border:1px solid #ef44442e}.message.success{color:#15803d;background:#f0fdf4;border:1px solid #22c55e2e}@media (width<=1080px){.grid,.package-grid{grid-template-columns:1fr}}