From e9c508a27ed05e73bcf479516408efb529410188 Mon Sep 17 00:00:00 2001
From: hfshfg <38004547@qq.com>
Date: Mon, 6 Apr 2026 16:52:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=85=85=E5=80=BC=E9=A1=B5=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E6=B5=85=E8=89=B2=E9=A3=8E=E6=A0=BC=EF=BC=8C=E4=BB=85?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98=E5=AE=9D=EF=BC=8C=E4=BD=99=E9=A2=9D401?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=96=B0=E7=94=A8=E6=88=B7=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 portable/充值.html | 748 ++++++++++++++++++++++-----------------------
 1 file changed, 363 insertions(+), 385 deletions(-)

diff --git a/portable/充值.html b/portable/充值.html
index 87c680a..b03274b 100644
--- a/portable/充值.html
+++ b/portable/充值.html
@@ -7,254 +7,273 @@
 <style>
 *{margin:0;padding:0;box-sizing:border-box}
 :root{
-  --bg:#09090b;
-  --card:#18181b;
-  --card-hover:#1c1c20;
-  --border:#27272a;
-  --border-active:#3f3f46;
-  --text:#fafafa;
-  --text-muted:#a1a1aa;
-  --text-dim:#52525b;
-  --blue:#3b82f6;
-  --blue-glow:rgba(59,130,246,0.12);
-  --green:#22c55e;
-  --green-glow:rgba(34,197,94,0.12);
-  --orange:#f97316;
-  --orange-dark:#ea580c;
-  --orange-glow:rgba(249,115,22,0.15);
-  --yellow:#eab308;
-  --red:#ef4444;
-  --radius:12px;
+  --bg:#f5f5f7;
+  --surface:#ffffff;
+  --border:#e5e5e5;
+  --border-hover:#d0d0d0;
+  --text:#1a1a1a;
+  --text-muted:#6b7280;
+  --text-dim:#9ca3af;
+  --blue:#2563eb;
+  --blue-light:#eff6ff;
+  --blue-border:#bfdbfe;
+  --green:#16a34a;
+  --green-light:#f0fdf4;
+  --green-border:#bbf7d0;
+  --orange:#ea580c;
+  --orange-light:#fff7ed;
+  --orange-border:#fed7aa;
+  --red:#dc2626;
+  --yellow:#d97706;
+  --radius:14px;
+  --shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);
+  --shadow-hover:0 4px 12px rgba(0,0,0,0.1),0 2px 4px rgba(0,0,0,0.06);
 }
 body{font-family:-apple-system,"Microsoft YaHei","PingFang SC",sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
 
-.header{padding:20px 28px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;background:var(--card)}
-.logo{width:40px;height:40px;border-radius:10px;border:1px solid var(--border)}
-.header-title{font-size:1.05em;font-weight:700;color:var(--text)}
-.header-sub{font-size:.78em;color:var(--text-muted);margin-top:2px}
+/* Header */
+.header{
+  background:var(--surface);
+  border-bottom:1px solid var(--border);
+  padding:0 28px;height:56px;
+  display:flex;align-items:center;justify-content:space-between;
+  position:sticky;top:0;z-index:10;
+}
+.header-left{display:flex;align-items:center;gap:10px}
+.logo{width:28px;height:28px;border-radius:7px;border:1px solid var(--border)}
+.header-title{font-size:.95em;font-weight:700;color:var(--text)}
+.header-badge{
+  font-size:.68em;padding:2px 8px;border-radius:20px;font-weight:600;
+  background:var(--orange-light);color:var(--orange);border:1px solid var(--orange-border);
+}
 
+/* Layout */
 .container{max-width:520px;margin:0 auto;padding:28px 20px 80px}
 
+/* Section toggle */
 .section{display:none}
 .section.active{display:block}
 
-/* 余额卡片 */
-.balance-card{
-  background:linear-gradient(135deg,rgba(249,115,22,0.08) 0%,var(--card) 100%);
-  border:1px solid rgba(249,115,22,0.3);
-  border-radius:var(--radius);
-  padding:20px;
-  margin-bottom:20px;
-  position:relative;overflow:hidden;
-}
-.balance-card::before{
-  content:'';position:absolute;inset:0;
-  background:linear-gradient(90deg,var(--orange-glow) 0%,transparent 60%);
-  pointer-events:none;
-}
-.balance-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
-.balance-title{font-size:.82em;font-weight:700;color:var(--orange);display:flex;align-items:center;gap:6px}
-.balance-refresh{
-  background:rgba(249,115,22,0.12);border:1px solid rgba(249,115,22,0.25);
-  color:var(--orange);border-radius:6px;padding:4px 10px;
-  font-size:.72em;cursor:pointer;font-family:inherit;transition:all .15s;
-}
-.balance-refresh:hover{background:rgba(249,115,22,0.22)}
-.balance-refresh:disabled{opacity:.4;cursor:default}
-
-.key-row{
-  background:rgba(0,0,0,0.3);border:1px solid var(--border);
-  border-radius:8px;padding:10px 14px;margin-bottom:12px;
-}
-.key-label{font-size:.72em;color:var(--text-dim);margin-bottom:4px}
-.key-inner{display:flex;align-items:center;gap:8px}
-.key-val{
-  flex:1;font-size:.72em;color:var(--orange);
-  font-family:"Consolas","Courier New",monospace;
-  letter-spacing:.02em;word-break:break-all;line-height:1.5;
-}
-.copy-btn{
-  background:rgba(249,115,22,0.15);border:1px solid rgba(249,115,22,0.3);
-  color:var(--orange);border-radius:6px;padding:4px 10px;
-  font-size:.72em;font-weight:600;cursor:pointer;white-space:nowrap;
-  transition:all .15s;font-family:inherit;
-}
-.copy-btn:hover{background:rgba(249,115,22,0.25)}
-
-.balance-row{
-  display:flex;align-items:center;gap:10px;
-  background:rgba(0,0,0,0.25);border:1px solid var(--border);
-  border-radius:8px;padding:10px 14px;
-}
-.balance-label{font-size:.75em;color:var(--text-dim);white-space:nowrap}
-.balance-val{
-  flex:1;font-size:1.1em;font-weight:700;
-  font-family:"Consolas","Courier New",monospace;
-}
-.balance-val.ok{color:var(--green)}
-.balance-val.warn{color:var(--yellow)}
-.balance-val.low{color:var(--red)}
-.balance-val.dim{color:var(--text-dim)}
-
-/* 充值表单区 */
-.form-card{
-  background:var(--card);border:1px solid var(--border);
+/* Key 手动输入 */
+.key-input-card{
+  background:var(--surface);border:1.5px solid var(--border);
   border-radius:var(--radius);padding:20px;margin-bottom:16px;
+  box-shadow:var(--shadow);
+}
+.key-input-title{font-size:.88em;font-weight:600;color:var(--text-muted);margin-bottom:10px}
+.key-input-wrap{display:flex;gap:8px}
+.key-input-wrap input{
+  flex:1;padding:9px 12px;
+  background:var(--bg);border:1.5px solid var(--border);
+  border-radius:9px;color:var(--text);font-size:.86em;
+  outline:none;transition:border-color .15s;font-family:inherit;
+}
+.key-input-wrap input:focus{border-color:var(--orange)}
+.key-confirm-btn{
+  padding:9px 16px;border:none;border-radius:9px;
+  background:var(--blue);color:#fff;font-size:.84em;font-weight:600;
+  cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s;
+}
+.key-confirm-btn:hover{background:#1d4ed8}
+
+/* 账户面板 */
+.xp-panel{
+  background:var(--surface);
+  border:1.5px solid var(--orange-border);
+  border-radius:var(--radius);
+  overflow:hidden;
+  box-shadow:var(--shadow);
+  margin-bottom:16px;
+}
+.xp-panel-head{
+  background:var(--orange-light);
+  padding:14px 18px;
+  border-bottom:1px solid var(--orange-border);
+  display:flex;align-items:center;justify-content:space-between;gap:8px;
+}
+.xp-panel-head-left{display:flex;align-items:center;gap:8px}
+.xp-panel-title{font-size:.9em;font-weight:700;color:var(--orange)}
+.xp-panel-body{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
+
+/* Key 行 */
+.xp-key-box{
+  background:var(--bg);border:1px solid var(--border);
+  border-radius:9px;padding:10px 12px;
+}
+.xp-key-label{font-size:.68em;color:var(--text-dim);margin-bottom:4px;font-weight:600;letter-spacing:.04em}
+.xp-key-inner{display:flex;align-items:center;gap:6px}
+.xp-key-val{
+  flex:1;font-size:.72em;color:var(--text-muted);
+  font-family:"Consolas","Courier New",monospace;
+  word-break:break-all;line-height:1.4;
+}
+.xp-copy-btn{
+  background:var(--surface);border:1px solid var(--border);
+  color:var(--text-muted);border-radius:6px;
+  padding:4px 10px;font-size:.7em;font-weight:600;
+  cursor:pointer;white-space:nowrap;font-family:inherit;
+  transition:all .15s;flex-shrink:0;
+}
+.xp-copy-btn:hover{border-color:var(--blue);color:var(--blue)}
+
+/* 余额行 */
+.xp-bal-box{
+  background:var(--bg);border:1px solid var(--border);
+  border-radius:9px;padding:10px 12px;
+  display:flex;align-items:center;gap:8px;
+}
+.xp-bal-label{font-size:.72em;color:var(--text-dim);flex-shrink:0}
+.xp-bal-val{flex:1;font-size:.95em;font-weight:700;color:var(--green)}
+.xp-bal-val.warn{color:var(--yellow)}
+.xp-bal-val.low{color:var(--red)}
+.xp-bal-val.dim{color:var(--text-dim);font-weight:400;font-size:.82em}
+.xp-refresh-btn{
+  background:none;border:1px solid var(--border);
+  color:var(--text-dim);border-radius:6px;
+  padding:3px 9px;font-size:.68em;cursor:pointer;
+  font-family:inherit;transition:all .15s;white-space:nowrap;flex-shrink:0;
+}
+.xp-refresh-btn:hover{border-color:var(--border-hover);color:var(--text)}
+.xp-refresh-btn:disabled{opacity:.45;cursor:default}
+
+/* 充值表单卡片 */
+.form-card{
+  background:var(--surface);border:1.5px solid var(--border);
+  border-radius:var(--radius);padding:20px;margin-bottom:16px;
+  box-shadow:var(--shadow);
 }
 .form-card-title{
   font-size:.9em;font-weight:700;color:var(--text);
   margin-bottom:16px;display:flex;align-items:center;gap:8px;
 }
 
-/* 金额选择 */
-.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
-.amount-btn{
-  background:rgba(255,255,255,0.03);border:1px solid var(--border);
-  border-radius:9px;padding:12px 8px;text-align:center;
+/* 金额网格 */
+.amt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
+.amt-btn{
+  background:var(--bg);border:1.5px solid var(--border);
+  border-radius:10px;padding:12px 6px;text-align:center;
   cursor:pointer;transition:all .15s;
 }
-.amount-btn:hover{border-color:var(--border-active);background:rgba(255,255,255,0.06)}
-.amount-btn.selected{
-  border-color:var(--orange);
-  background:rgba(249,115,22,0.1);
-  box-shadow:0 0 0 1px var(--orange);
-}
-.amount-cny{font-size:1.05em;font-weight:700;color:var(--text)}
-.amount-quota{font-size:.68em;color:var(--text-dim);margin-top:2px}
-.amount-btn.selected .amount-cny{color:var(--orange)}
-.amount-btn.selected .amount-quota{color:rgba(249,115,22,0.6)}
+.amt-btn:hover{border-color:var(--border-hover);box-shadow:var(--shadow-hover)}
+.amt-btn.sel{border-color:var(--orange);background:var(--orange-light);box-shadow:0 0 0 1px var(--orange)}
+.amt-cny{font-size:1em;font-weight:700;color:var(--text)}
+.amt-quota{font-size:.62em;color:var(--text-dim);margin-top:2px}
+.amt-btn.sel .amt-cny{color:var(--orange)}
+.amt-btn.sel .amt-quota{color:rgba(234,88,12,.6)}
 
-.custom-wrap{display:flex;align-items:center;gap:8px;margin-bottom:4px}
-.custom-prefix{font-size:.9em;color:var(--text-muted);white-space:nowrap}
+.custom-wrap{display:none;margin-bottom:8px}
+.custom-inner{display:flex;align-items:center;gap:6px}
+.custom-prefix{font-size:.9em;color:var(--text-muted)}
 input[type="number"],input[type="text"]{
-  flex:1;padding:10px 13px;
-  background:#0c0c0f;border:1px solid var(--border);
-  border-radius:9px;color:var(--text);font-size:.92em;
-  outline:none;transition:border-color .2s;font-family:inherit;
+  flex:1;padding:9px 12px;
+  background:var(--bg);border:1.5px solid var(--border);
+  border-radius:9px;color:var(--text);font-size:.86em;
+  outline:none;transition:border-color .15s;font-family:inherit;
   -moz-appearance:textfield;
 }
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none}
 input:focus{border-color:var(--orange)}
-.input-hint{font-size:.76em;color:var(--text-dim);margin-top:5px}
+.input-hint{font-size:.74em;color:var(--text-dim);margin-top:5px}
 
-/* 支付二维码 */
-.qr-section{margin-bottom:16px}
-.qr-tabs{display:flex;gap:6px;margin-bottom:12px}
+/* 分割线 */
+.divider{height:1px;background:var(--border);margin:16px 0}
+
+/* QR */
+.qr-tabs{display:flex;gap:5px;margin-bottom:10px}
 .qr-tab{
-  padding:6px 14px;border-radius:7px;font-size:.8em;font-weight:600;
-  cursor:pointer;border:1px solid var(--border);background:transparent;
-  color:var(--text-muted);font-family:inherit;transition:all .15s;
-}
-.qr-tab.active{
-  background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.35);
-  color:var(--green);
-}
-.qr-box{
-  background:rgba(0,0,0,0.3);border:1px solid var(--border);
-  border-radius:10px;padding:16px;text-align:center;display:none;
+  flex:1;padding:7px;border-radius:8px;
+  font-size:.78em;font-weight:600;
+  cursor:pointer;border:1.5px solid var(--border);
+  background:transparent;color:var(--text-muted);
+  font-family:inherit;transition:all .15s;text-align:center;
 }
+.qr-tab.active{background:var(--green-light);border-color:var(--green-border);color:var(--green)}
+.qr-box{display:none;text-align:center}
 .qr-box.active{display:block}
 .qr-img{
-  width:180px;height:180px;object-fit:contain;
-  border-radius:10px;border:2px solid var(--border);
-  background:#fff;margin:0 auto 10px;display:block;
+  width:168px;height:168px;object-fit:contain;
+  border-radius:10px;border:1px solid var(--border);
+  background:var(--bg);margin:0 auto 8px;display:block;
 }
 .qr-placeholder{
-  width:180px;height:180px;border-radius:10px;
-  border:2px dashed var(--border);background:rgba(0,0,0,0.3);
-  margin:0 auto 10px;display:flex;align-items:center;justify-content:center;
-  flex-direction:column;gap:8px;color:var(--text-dim);font-size:.8em;
+  width:168px;height:168px;border-radius:10px;
+  border:1.5px dashed var(--border);background:var(--bg);
+  margin:0 auto 8px;display:flex;align-items:center;justify-content:center;
+  flex-direction:column;gap:6px;color:var(--text-dim);font-size:.78em;
 }
 .qr-name{font-size:.82em;color:var(--text-muted);font-weight:600}
-.qr-sub{font-size:.72em;color:var(--text-dim);margin-top:2px}
+.qr-sub{font-size:.7em;color:var(--text-dim);margin-top:2px;line-height:1.5}
 
 /* 截图上传 */
 .upload-area{
-  border:2px dashed var(--border);border-radius:10px;
-  padding:28px 20px;text-align:center;cursor:pointer;
-  transition:all .2s;position:relative;overflow:hidden;
-  background:rgba(0,0,0,0.2);
+  border:1.5px dashed var(--border);border-radius:10px;
+  padding:22px 16px;text-align:center;cursor:pointer;
+  transition:all .15s;position:relative;overflow:hidden;
+  background:var(--bg);
 }
-.upload-area:hover{border-color:var(--border-active);background:rgba(255,255,255,0.02)}
-.upload-area.has-file{border-color:var(--green);border-style:solid;background:rgba(34,197,94,0.05)}
+.upload-area:hover{border-color:var(--border-hover);background:var(--surface)}
+.upload-area.has{border-color:var(--green);border-style:solid;background:var(--green-light)}
 .upload-area input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
-.upload-icon{font-size:2em;margin-bottom:8px;color:var(--text-dim)}
-.upload-text{font-size:.84em;color:var(--text-muted)}
-.upload-sub{font-size:.74em;color:var(--text-dim);margin-top:4px}
-.upload-preview{max-width:100%;max-height:200px;border-radius:8px;object-fit:contain;display:none;margin:0 auto}
+.upload-icon{font-size:1.8em;margin-bottom:6px;color:var(--text-dim)}
+.upload-text{font-size:.82em;color:var(--text-muted)}
+.upload-sub{font-size:.72em;color:var(--text-dim);margin-top:3px}
+.upload-preview{max-width:100%;max-height:160px;border-radius:8px;object-fit:contain;display:none;margin:0 auto}
+
+label{display:block;font-size:.8em;color:var(--text-muted);font-weight:600;margin-bottom:8px}
 
 /* 提交按钮 */
 .submit-btn{
-  width:100%;padding:14px;border:none;border-radius:10px;
-  font-size:.96em;font-weight:700;cursor:pointer;
-  font-family:inherit;transition:all .2s;
-  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
-  color:#fff;
-  box-shadow:0 4px 16px rgba(249,115,22,0.3);
-}
-.submit-btn:hover{box-shadow:0 6px 20px rgba(249,115,22,0.4);transform:translateY(-1px)}
-.submit-btn:active{transform:translateY(0)}
-.submit-btn:disabled{
-  background:var(--border);color:var(--text-dim);
-  cursor:not-allowed;box-shadow:none;transform:none;
+  width:100%;padding:13px;border:none;border-radius:10px;
+  font-size:.94em;font-weight:700;cursor:pointer;
+  font-family:inherit;transition:all .15s;
+  background:var(--orange);color:#fff;
+  box-shadow:0 2px 8px rgba(234,88,12,0.25);
 }
+.submit-btn:hover{background:#c2410c;box-shadow:0 4px 14px rgba(234,88,12,0.3);transform:translateY(-1px)}
+.submit-btn:active{transform:none}
+.submit-btn:disabled{background:var(--text-dim);cursor:not-allowed;box-shadow:none;transform:none}
 
 /* 成功页 */
-.success-view{text-align:center;padding:50px 20px}
-.success-icon{font-size:3.5em;margin-bottom:20px}
-.success-title{font-size:1.3em;font-weight:700;color:var(--green);margin-bottom:10px}
-.success-desc{color:var(--text-muted);font-size:.88em;line-height:1.8;margin-bottom:24px}
+.success-view{
+  background:var(--surface);border:1.5px solid var(--green-border);
+  border-radius:var(--radius);padding:40px 24px;
+  text-align:center;box-shadow:var(--shadow);
+}
+.success-icon{font-size:3em;margin-bottom:16px}
+.success-title{font-size:1.2em;font-weight:700;color:var(--green);margin-bottom:8px}
+.success-desc{color:var(--text-muted);font-size:.86em;line-height:1.8;margin-bottom:20px}
 .success-tip{
-  background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);
-  border-radius:10px;padding:14px 18px;
-  font-size:.82em;color:var(--text-muted);line-height:1.8;text-align:left;
+  background:var(--green-light);border:1px solid var(--green-border);
+  border-radius:10px;padding:14px 16px;
+  font-size:.8em;color:var(--text-muted);line-height:1.8;text-align:left;
 }
 .back-btn{
-  display:inline-flex;align-items:center;gap:6px;
-  margin-top:24px;padding:10px 22px;
-  background:var(--card);border:1px solid var(--border);
-  border-radius:8px;color:var(--text-muted);font-size:.88em;
+  display:inline-flex;align-items:center;gap:5px;
+  margin-top:20px;padding:9px 20px;
+  background:var(--bg);border:1.5px solid var(--border);
+  border-radius:8px;color:var(--text-muted);font-size:.84em;
   cursor:pointer;font-family:inherit;transition:all .15s;
 }
-.back-btn:hover{border-color:var(--border-active);color:var(--text)}
-
-/* Key 未找到提示 */
-.key-input-section{
-  background:var(--card);border:1px solid var(--border);
-  border-radius:var(--radius);padding:20px;margin-bottom:20px;
-}
-.key-input-title{font-size:.88em;font-weight:600;color:var(--text-muted);margin-bottom:10px}
-.key-input-wrap{display:flex;gap:8px}
-.key-input-wrap input{flex:1}
-.key-confirm-btn{
-  padding:10px 16px;border:none;border-radius:9px;
-  background:var(--blue);color:#fff;font-size:.86em;font-weight:600;
-  cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s;
-}
-.key-confirm-btn:hover{background:#2563eb}
+.back-btn:hover{border-color:var(--border-hover);color:var(--text)}
 
 /* Toast */
 .toast{
   position:fixed;top:20px;right:20px;
-  background:#22c55e;color:#fff;
-  padding:10px 20px;border-radius:8px;
-  font-size:.84em;font-weight:500;
+  background:var(--green);color:#fff;
+  padding:10px 18px;border-radius:8px;
+  font-size:.82em;font-weight:500;
   opacity:0;transform:translateY(-8px);
   transition:all .25s;z-index:999;pointer-events:none;
+  box-shadow:0 4px 12px rgba(0,0,0,0.15);
 }
 .toast.show{opacity:1;transform:translateY(0)}
 .toast.error{background:var(--red)}
 .toast.info{background:var(--blue)}
 
-/* 分割线 */
-.divider{height:1px;background:var(--border);margin:16px 0}
-
-label{display:block;font-size:.82em;color:var(--text-muted);font-weight:500;margin-bottom:8px}
-
 @media(max-width:480px){
-  .amount-grid{grid-template-columns:repeat(2,1fr)}
-  .header{padding:16px 18px}
+  .amt-grid{grid-template-columns:repeat(2,1fr)}
+  .header{padding:0 16px}
   .container{padding:20px 14px 80px}
 }
 </style>
@@ -262,20 +281,20 @@ label{display:block;font-size:.82em;color:var(--text-muted);font-weight:500;marg
 <body>
 
 <div class="header">
-  <img class="logo" src="assets/logo.png" alt="logo" onerror="this.style.display='none'">
-  <div>
-    <div class="header-title">虾盘云 — 充值</div>
-    <div class="header-sub">充值后余额实时到账，一般10分钟内审核</div>
+  <div class="header-left">
+    <img class="logo" src="assets/logo.png" alt="" onerror="this.style.display='none'">
+    <span class="header-title">虾盘云 — 充值</span>
   </div>
+  <span class="header-badge">虾盘出品</span>
 </div>
 
 <div class="container">
 
-  <!-- Key 手动输入区（自动隐藏） -->
-  <div class="key-input-section" id="keyInputSection" style="display:none">
+  <!-- Key 手动输入（未检测到时显示） -->
+  <div class="key-input-card" id="keyInputCard" style="display:none">
     <div class="key-input-title">未检测到 API Key，请手动粘贴</div>
     <div class="key-input-wrap">
-      <input type="text" id="manualKeyInput" placeholder="sk-xp-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
+      <input type="text" id="manualKeyInput" placeholder="sk-xp-... 或 sk-...">
       <button class="key-confirm-btn" onclick="confirmManualKey()">确认</button>
     </div>
   </div>
@@ -283,94 +302,97 @@ label{display:block;font-size:.82em;color:var(--text-muted);font-weight:500;marg
   <!-- 主表单 -->
   <div class="section active" id="mainSection">
 
-    <!-- 余额卡片 -->
-    <div class="balance-card">
-      <div class="balance-header">
-        <div class="balance-title">🦐 虾盘云 · 我的账户</div>
-        <button class="balance-refresh" id="refreshBtn" onclick="loadBalance()">刷新余额</button>
-      </div>
-      <div class="key-row">
-        <div class="key-label">我的专属 Key</div>
-        <div class="key-inner">
-          <div class="key-val" id="keyDisplay">检测中...</div>
-          <button class="copy-btn" onclick="copyKey()">复制</button>
+    <!-- 账户面板 -->
+    <div class="xp-panel">
+      <div class="xp-panel-head">
+        <div class="xp-panel-head-left">
+          <span style="font-size:1.1em">🦐</span>
+          <span class="xp-panel-title">虾盘云 · 账户</span>
         </div>
+        <button class="xp-refresh-btn" id="refreshBtn" onclick="loadBalance()">刷新</button>
       </div>
-      <div class="balance-row">
-        <div class="balance-label">当前余额</div>
-        <div class="balance-val dim" id="balanceVal">加载中...</div>
+      <div class="xp-panel-body">
+        <div class="xp-key-box">
+          <div class="xp-key-label">我的专属 KEY</div>
+          <div class="xp-key-inner">
+            <div class="xp-key-val" id="keyDisplay">检测中...</div>
+            <button class="xp-copy-btn" onclick="copyKey()">复制</button>
+          </div>
+        </div>
+        <div class="xp-bal-box">
+          <span class="xp-bal-label">当前余额</span>
+          <span class="xp-bal-val dim" id="balanceVal">查询中...</span>
+        </div>
       </div>
     </div>
 
-    <!-- 充值金额 -->
+    <!-- 充值表单 -->
     <div class="form-card">
-      <div class="form-card-title">💰 选择充值金额</div>
+      <div class="form-card-title">选择充值金额</div>
 
-      <div class="amount-grid">
-        <div class="amount-btn" onclick="selectAmount(20)" data-amt="20">
-          <div class="amount-cny">¥20</div>
-          <div class="amount-quota">+1000万</div>
+      <div class="amt-grid">
+        <div class="amt-btn" onclick="selectAmt(20)" data-amt="20">
+          <div class="amt-cny">¥20</div>
+          <div class="amt-quota">+1000万</div>
         </div>
-        <div class="amount-btn" onclick="selectAmount(50)" data-amt="50">
-          <div class="amount-cny">¥50</div>
-          <div class="amount-quota">+2500万</div>
+        <div class="amt-btn" onclick="selectAmt(50)" data-amt="50">
+          <div class="amt-cny">¥50</div>
+          <div class="amt-quota">+2500万</div>
         </div>
-        <div class="amount-btn" onclick="selectAmount(100)" data-amt="100">
-          <div class="amount-cny">¥100</div>
-          <div class="amount-quota">+5000万</div>
+        <div class="amt-btn" onclick="selectAmt(100)" data-amt="100">
+          <div class="amt-cny">¥100</div>
+          <div class="amt-quota">+5000万</div>
         </div>
-        <div class="amount-btn" onclick="selectAmount(0)" data-amt="0">
-          <div class="amount-cny">自定</div>
-          <div class="amount-quota">输入金额</div>
+        <div class="amt-btn" onclick="selectAmt(0)" data-amt="0">
+          <div class="amt-cny">自定</div>
+          <div class="amt-quota">输入金额</div>
         </div>
       </div>
 
-      <div id="customWrap" style="display:none;margin-bottom:8px">
-        <div class="custom-wrap">
+      <div class="custom-wrap" id="customWrap">
+        <div class="custom-inner">
           <span class="custom-prefix">¥</span>
-          <input type="number" id="customAmt" placeholder="请输入金额（最低¥10）" min="10" max="9999" oninput="onCustomInput()">
+          <input type="number" id="customAmt" placeholder="最低 ¥10" min="10" max="9999" oninput="onCustomInput()">
         </div>
         <div class="input-hint">¥1 = 50万 quota，¥10 起充</div>
       </div>
 
       <div class="divider"></div>
 
-      <!-- 支付二维码 -->
-      <div class="qr-section">
-        <label>扫码付款</label>
-        <div class="qr-tabs">
-          <button class="qr-tab active" onclick="switchQr('alipay',this)">支付宝</button>
-          <button class="qr-tab" onclick="switchQr('wechat',this)">微信</button>
+      <label>扫码付款</label>
+      <div class="qr-tabs">
+        <button class="qr-tab active" onclick="switchQr('alipay',this)">支付宝</button>
+        <button class="qr-tab" onclick="switchQr('wechat',this)">微信支付</button>
+      </div>
+      <div class="qr-box active" id="qr-alipay">
+        <div class="qr-placeholder" id="qr-alipay-ph">
+          <div style="font-size:1.8em">📱</div>
+          <div>支付宝收款码</div>
+          <div style="font-size:.68em;margin-top:2px;opacity:.6">（管理员配置后显示）</div>
         </div>
-        <div class="qr-box active" id="qr-alipay">
-          <div class="qr-placeholder" id="qr-alipay-placeholder">
-            <div style="font-size:2em">📱</div>
-            <div>支付宝收款码</div>
-            <div style="font-size:.68em;margin-top:4px;opacity:.6">（管理员配置后显示）</div>
-          </div>
-          <img class="qr-img" id="qr-alipay-img" src="" alt="支付宝收款码" style="display:none" onerror="this.style.display='none';document.getElementById('qr-alipay-placeholder').style.display='flex'">
-          <div class="qr-name">支付宝</div>
-          <div class="qr-sub">扫码付款，备注填写您的 apikey</div>
-        </div>
-        <div class="qr-box" id="qr-wechat">
-          <div class="qr-placeholder" id="qr-wechat-placeholder">
-            <div style="font-size:2em">💚</div>
-            <div>微信收款码</div>
-            <div style="font-size:.68em;margin-top:4px;opacity:.6">（管理员配置后显示）</div>
-          </div>
-          <img class="qr-img" id="qr-wechat-img" src="" alt="微信收款码" style="display:none" onerror="this.style.display='none';document.getElementById('qr-wechat-placeholder').style.display='flex'">
-          <div class="qr-name">微信支付</div>
-          <div class="qr-sub">扫码付款，备注填写您的 apikey</div>
+        <img class="qr-img" id="qr-alipay-img" src="" alt="支付宝" style="display:none"
+          onerror="this.style.display='none';document.getElementById('qr-alipay-ph').style.display='flex'">
+        <div class="qr-name">支付宝</div>
+        <div class="qr-sub">扫码付款 · 备注填写您的 Key 后8位</div>
+      </div>
+      <div class="qr-box" id="qr-wechat">
+        <div class="qr-placeholder" id="qr-wechat-ph">
+          <div style="font-size:1.8em">💚</div>
+          <div>微信收款码</div>
+          <div style="font-size:.68em;margin-top:2px;opacity:.6">（管理员配置后显示）</div>
         </div>
+        <img class="qr-img" id="qr-wechat-img" src="" alt="微信" style="display:none"
+          onerror="this.style.display='none';document.getElementById('qr-wechat-ph').style.display='flex'">
+        <div class="qr-name">微信支付</div>
+        <div class="qr-sub">扫码付款 · 备注填写您的 Key 后8位</div>
       </div>
 
       <div class="divider"></div>
 
-      <!-- 上传截图 -->
       <label>上传付款截图 <span style="color:var(--text-dim);font-weight:400">（可选，有图更快审核）</span></label>
       <div class="upload-area" id="uploadArea" onclick="document.getElementById('screenshotInput').click()">
         <input type="file" id="screenshotInput" accept="image/*" style="display:none" onchange="onFileSelect(event)">
-        <div id="uploadPlaceholder">
+        <div id="uploadPh">
           <div class="upload-icon">📸</div>
           <div class="upload-text">点击上传付款截图</div>
           <div class="upload-sub">支持 JPG / PNG，不超过 5MB</div>
@@ -380,13 +402,11 @@ label{display:block;font-size:.82em;color:var(--text-muted);font-weight:500;marg
 
       <div class="divider"></div>
 
-      <!-- 备注 -->
       <label style="margin-top:4px">备注 <span style="color:var(--text-dim);font-weight:400">（可选）</span></label>
-      <input type="text" id="noteInput" placeholder="如有疑问可在此备注，管理员会看到">
-
+      <input type="text" id="noteInput" placeholder="如有问题可备注，管理员会看到">
     </div>
 
-    <button class="submit-btn" id="submitBtn" onclick="submitRecharge()">提交充值申请</button>
+    <button class="submit-btn" id="submitBtn" onclick="submitRecharge()">提交充值申请 →</button>
 
   </div><!-- /mainSection -->
 
@@ -397,15 +417,15 @@ label{display:block;font-size:.82em;color:var(--text-muted);font-weight:500;marg
       <div class="success-title">申请已提交！</div>
       <div class="success-desc">
         您的充值申请已成功提交。<br>
-        管理员会在微信上收到通知，一般 <strong style="color:var(--orange)">10分钟内</strong> 完成审核充值。
+        管理员会在微信收到通知，一般 <strong style="color:var(--orange)">10分钟内</strong> 完成审核。
       </div>
       <div class="success-tip">
         <strong style="color:var(--text)">审核完成后：</strong><br>
         · 余额自动到账，无需任何操作<br>
-        · 刷新余额即可看到最新数字<br>
-        · 如超过1小时未到账，微信联系管理员
+        · 点"刷新"即可看到最新余额<br>
+        · 如超过1小时未到账，请联系管理员
       </div>
-      <button class="back-btn" onclick="goBack()">← 返回查看余额</button>
+      <button class="back-btn" onclick="goBack()">← 返回</button>
     </div>
   </div>
 
@@ -414,65 +434,43 @@ label{display:block;font-size:.82em;color:var(--text-muted);font-weight:500;marg
 <div class="toast" id="toast"></div>
 
 <script>
-// ── 配置 ──────────────────────────────────────────────
 const API_BASE = 'https://api.u-claw.org';
 const RECHARGE_API = API_BASE + '/recharge';
 
-// 管理员在服务器配置好后，把二维码图片路径填在这里
-// 也可以通过 /recharge/config 接口动态获取
-const QR_ALIPAY = '';   // 如 'https://api.u-claw.org/recharge/qr/alipay.jpg'
-const QR_WECHAT = '';   // 如 'https://api.u-claw.org/recharge/qr/wechat.jpg'
-
-// ── 状态 ──────────────────────────────────────────────
 let currentKey = '';
-let selectedAmount = 0;   // 0 = 自定义
+let selectedAmt = -1;
 let screenshotB64 = '';
 let screenshotMime = 'image/jpeg';
 
-// ── 初始化 ──────────────────────────────────────────────
 window.addEventListener('DOMContentLoaded', () => {
   initKey();
   loadQrCodes();
 });
 
+// ── Key 检测 ─────────────────────────────────────────────
 function initKey() {
-  // 优先从 URL 参数获取 key
   const params = new URLSearchParams(window.location.search);
   let key = params.get('key') || params.get('api_key') || '';
-
-  // 其次尝试从 localStorage 读取
   if (!key) key = localStorage.getItem('xiapan_key') || '';
-
-  // 尝试从 providers.json 读取（通过 config-server 本地服务）
-  if (!key) {
-    fetchKeyFromConfigServer().then(k => {
-      if (k) {
-        setKey(k);
-      } else {
-        showKeyInput();
-      }
-    });
-    return;
-  }
-
-  setKey(key);
+  if (key) { setKey(key); return; }
+  fetchKeyFromConfigServer().then(k => {
+    if (k) setKey(k);
+    else showKeyInput();
+  });
 }
 
 async function fetchKeyFromConfigServer() {
-  try {
-    // launcher 会启动本地 config-server（通常在 localhost:18799）
-    const ports = [18799, 18798, 18797, 18796, 18789];
-    for (const port of ports) {
-      try {
-        const r = await fetch(`http://localhost:${port}/config`, {signal: AbortSignal.timeout(800)});
-        if (r.ok) {
-          const cfg = await r.json();
-          const key = cfg?.providers?.xiapanyun?.api_key || '';
-          if (key) return key;
-        }
-      } catch(e) { /* 端口未开放，继续 */ }
-    }
-  } catch(e) {}
+  const ports = [18799, 18798, 18797, 18796, 18789];
+  for (const port of ports) {
+    try {
+      const r = await fetch(`http://localhost:${port}/config`, {signal: AbortSignal.timeout(800)});
+      if (r.ok) {
+        const cfg = await r.json();
+        const k = cfg?.providers?.xiapanyun?.api_key || '';
+        if (k) return k;
+      }
+    } catch(e) {}
+  }
   return '';
 }
 
@@ -481,69 +479,64 @@ function setKey(key) {
   localStorage.setItem('xiapan_key', key);
   const masked = key.length > 14 ? key.slice(0, 10) + '...' + key.slice(-6) : key;
   document.getElementById('keyDisplay').textContent = masked;
-  document.getElementById('keyInputSection').style.display = 'none';
+  document.getElementById('keyInputCard').style.display = 'none';
   loadBalance();
 }
 
 function showKeyInput() {
-  document.getElementById('keyInputSection').style.display = 'block';
+  document.getElementById('keyInputCard').style.display = 'block';
   document.getElementById('keyDisplay').textContent = '未检测到';
   document.getElementById('balanceVal').textContent = '—';
-  document.getElementById('balanceVal').className = 'balance-val dim';
+  document.getElementById('balanceVal').className = 'xp-bal-val dim';
 }
 
 function confirmManualKey() {
   const val = document.getElementById('manualKeyInput').value.trim();
-  if (val.length < 8) {
-    showToast('Key 格式不对，请重新确认', 'error'); return;
-  }
+  if (val.length < 8) { showToast('Key 格式不对，请重新确认', 'error'); return; }
   setKey(val);
 }
 
+// ── 余额查询 ─────────────────────────────────────────────
 async function loadBalance() {
   if (!currentKey) return;
   const btn = document.getElementById('refreshBtn');
   const valEl = document.getElementById('balanceVal');
   btn.disabled = true;
-  btn.textContent = '加载中...';
-  valEl.textContent = '加载中...';
-  valEl.className = 'balance-val dim';
+  valEl.textContent = '查询中...';
+  valEl.className = 'xp-bal-val dim';
 
   try {
+    const d = new Date();
+    const monthStart = d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-01';
+    const hdrs = {'Authorization': 'Bearer ' + currentKey};
     const [subRes, usageRes] = await Promise.all([
-      fetch(API_BASE + '/v1/dashboard/billing/subscription', {headers: {'Authorization': 'Bearer ' + currentKey}}),
-      fetch(API_BASE + '/v1/dashboard/billing/usage?start_date=' + getMonthStart(), {headers: {'Authorization': 'Bearer ' + currentKey}})
+      fetch(API_BASE + '/v1/dashboard/billing/subscription', {headers: hdrs}),
+      fetch(API_BASE + '/v1/dashboard/billing/usage?start_date=' + monthStart, {headers: hdrs})
     ]);
-
-    if (!subRes.ok) throw new Error('key无效或网络错误');
+    if (!subRes.ok) throw new Error('Key 无效');
     const sub = await subRes.json();
     const usage = usageRes.ok ? await usageRes.json() : {total_usage: 0};
 
     const total = sub.hard_limit_usd || 0;
     const used = (usage.total_usage || 0) / 100;
     const remaining = Math.max(0, total - used);
+    const remCny = remaining * 7.2;
 
-    let cls = 'ok';
-    if (remaining < 1) cls = 'low';
-    else if (remaining < 5) cls = 'warn';
+    let cls = '';
+    if (remCny < 5) cls = 'low';
+    else if (remCny < 20) cls = 'warn';
 
-    valEl.textContent = '¥' + (remaining * 7.2).toFixed(2) + ' 剩余（共充值 ¥' + (total * 7.2).toFixed(2) + '）';
-    valEl.className = 'balance-val ' + cls;
+    valEl.textContent = '¥' + remCny.toFixed(2);
+    valEl.className = 'xp-bal-val' + (cls ? ' ' + cls : '');
   } catch(e) {
-    valEl.textContent = '查询失败（' + e.message + '）';
-    valEl.className = 'balance-val low';
+    valEl.textContent = '查询失败';
+    valEl.className = 'xp-bal-val dim';
   } finally {
     btn.disabled = false;
-    btn.textContent = '刷新余额';
   }
 }
 
-function getMonthStart() {
-  const d = new Date();
-  return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-01';
-}
-
-// ── 二维码 ──────────────────────────────────────────────
+// ── 二维码 ─────────────────────────────────────────────
 async function loadQrCodes() {
   try {
     const r = await fetch(RECHARGE_API + '/config', {signal: AbortSignal.timeout(3000)});
@@ -552,19 +545,15 @@ async function loadQrCodes() {
       if (cfg.qr_alipay) showQrImg('alipay', cfg.qr_alipay);
       if (cfg.qr_wechat) showQrImg('wechat', cfg.qr_wechat);
     }
-  } catch(e) {
-    // 服务器未部署时静默失败，用静态配置兜底
-    if (QR_ALIPAY) showQrImg('alipay', QR_ALIPAY);
-    if (QR_WECHAT) showQrImg('wechat', QR_WECHAT);
-  }
+  } catch(e) {}
 }
 
 function showQrImg(type, src) {
   const img = document.getElementById('qr-' + type + '-img');
-  const placeholder = document.getElementById('qr-' + type + '-placeholder');
+  const ph  = document.getElementById('qr-' + type + '-ph');
   img.src = src;
   img.style.display = 'block';
-  placeholder.style.display = 'none';
+  ph.style.display = 'none';
 }
 
 function switchQr(type, btn) {
@@ -574,119 +563,108 @@ function switchQr(type, btn) {
   document.getElementById('qr-' + type).classList.add('active');
 }
 
-// ── 金额选择 ──────────────────────────────────────────────
-function selectAmount(amt) {
-  document.querySelectorAll('.amount-btn').forEach(b => b.classList.remove('selected'));
-  document.querySelector(`.amount-btn[data-amt="${amt}"]`).classList.add('selected');
-  selectedAmount = amt;
+// ── 金额选择 ─────────────────────────────────────────────
+function selectAmt(amt) {
+  document.querySelectorAll('.amt-btn').forEach(b => b.classList.remove('sel'));
+  document.querySelector(`.amt-btn[data-amt="${amt}"]`).classList.add('sel');
+  selectedAmt = amt;
   document.getElementById('customWrap').style.display = amt === 0 ? 'block' : 'none';
   if (amt !== 0) document.getElementById('customAmt').value = '';
 }
 
 function onCustomInput() {
-  const v = parseFloat(document.getElementById('customAmt').value) || 0;
-  selectedAmount = v;
+  selectedAmt = parseFloat(document.getElementById('customAmt').value) || 0;
 }
 
-function getEffectiveAmount() {
-  if (selectedAmount === 0) {
-    return parseFloat(document.getElementById('customAmt').value) || 0;
-  }
-  return selectedAmount;
+function getEffectiveAmt() {
+  if (selectedAmt === 0) return parseFloat(document.getElementById('customAmt').value) || 0;
+  return selectedAmt;
 }
 
-// ── 截图上传 ──────────────────────────────────────────────
+// ── 截图上传 ─────────────────────────────────────────────
 function onFileSelect(e) {
   const file = e.target.files[0];
   if (!file) return;
-  if (file.size > 5 * 1024 * 1024) {
-    showToast('图片不超过5MB', 'error'); return;
-  }
+  if (file.size > 5 * 1024 * 1024) { showToast('图片不超过5MB', 'error'); return; }
   screenshotMime = file.type || 'image/jpeg';
   const reader = new FileReader();
   reader.onload = ev => {
     const dataUrl = ev.target.result;
     screenshotB64 = dataUrl.split(',')[1];
-    // 预览
     const preview = document.getElementById('uploadPreview');
     preview.src = dataUrl;
     preview.style.display = 'block';
-    document.getElementById('uploadPlaceholder').style.display = 'none';
-    document.getElementById('uploadArea').classList.add('has-file');
+    document.getElementById('uploadPh').style.display = 'none';
+    document.getElementById('uploadArea').classList.add('has');
   };
   reader.readAsDataURL(file);
 }
 
-// ── 提交 ──────────────────────────────────────────────
+// ── 提交 ─────────────────────────────────────────────
 async function submitRecharge() {
   if (!currentKey) { showToast('请先输入您的 API Key', 'error'); return; }
-
-  const amount = getEffectiveAmount();
+  const amount = getEffectiveAmt();
   if (amount < 10) { showToast('充值金额最低 ¥10', 'error'); return; }
-  // 截图可选，不强制
 
   const btn = document.getElementById('submitBtn');
   btn.disabled = true;
   btn.textContent = '提交中...';
 
   try {
-    const payload = {
-      api_key: currentKey,
-      amount_cny: amount,
-      screenshot_b64: screenshotB64,
-      screenshot_mime: screenshotMime,
-      note: document.getElementById('noteInput').value.trim()
-    };
-
     const res = await fetch(RECHARGE_API + '/submit', {
       method: 'POST',
       headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify(payload)
+      body: JSON.stringify({
+        api_key: currentKey,
+        amount_cny: amount,
+        screenshot_b64: screenshotB64,
+        screenshot_mime: screenshotMime,
+        note: document.getElementById('noteInput').value.trim()
+      })
     });
-
     const data = await res.json();
     if (!res.ok) throw new Error(data.error || '服务器错误');
 
-    // 成功
     document.getElementById('mainSection').classList.remove('active');
     document.getElementById('successSection').classList.add('active');
-
   } catch(e) {
     showToast('提交失败：' + e.message, 'error');
     btn.disabled = false;
-    btn.textContent = '提交充值申请';
+    btn.textContent = '提交充值申请 →';
   }
 }
 
 function goBack() {
   document.getElementById('successSection').classList.remove('active');
   document.getElementById('mainSection').classList.add('active');
-  // 重置表单
   screenshotB64 = '';
   document.getElementById('uploadPreview').style.display = 'none';
-  document.getElementById('uploadPlaceholder').style.display = 'block';
-  document.getElementById('uploadArea').classList.remove('has-file');
+  document.getElementById('uploadPh').style.display = 'block';
+  document.getElementById('uploadArea').classList.remove('has');
   document.getElementById('screenshotInput').value = '';
   document.getElementById('noteInput').value = '';
-  document.querySelectorAll('.amount-btn').forEach(b => b.classList.remove('selected'));
+  document.querySelectorAll('.amt-btn').forEach(b => b.classList.remove('sel'));
   document.getElementById('customWrap').style.display = 'none';
   document.getElementById('submitBtn').disabled = false;
-  document.getElementById('submitBtn').textContent = '提交充值申请';
+  document.getElementById('submitBtn').textContent = '提交充值申请 →';
+  selectedAmt = -1;
   loadBalance();
 }
 
-// ── 工具 ──────────────────────────────────────────────
+// ── 工具 ─────────────────────────────────────────────
 function copyKey() {
   if (!currentKey) return;
-  navigator.clipboard.writeText(currentKey).then(() => showToast('Key 已复制')).catch(() => {
-    const el = document.createElement('textarea');
-    el.value = currentKey;
-    document.body.appendChild(el);
-    el.select();
-    document.execCommand('copy');
-    document.body.removeChild(el);
-    showToast('Key 已复制');
-  });
+  navigator.clipboard.writeText(currentKey)
+    .then(() => showToast('Key 已复制'))
+    .catch(() => {
+      const el = document.createElement('textarea');
+      el.value = currentKey;
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand('copy');
+      document.body.removeChild(el);
+      showToast('Key 已复制');
+    });
 }
 
 let toastTimer;