diff --git a/dance.css b/dance.css
index b46b870..d96a548 100644
--- a/dance.css
+++ b/dance.css
@@ -52,4 +52,43 @@
 
 .coming-soon { color: var(--muted); text-align: center; margin-top: 40px; font-size: 13px; font-weight: bold; padding: 0 12px; }
 
+/* T28: 传衣服 (mode 2) upload panel — same comic-panel language as
+   .wardrobe-card, laid out as a simple vertical form instead of a grid. */
+.upload-panel { padding: 8px 4px; }
+.upload-panel .hint { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
+.upload-panel input[type="file"] { width: 100%; font-size: 12px; margin-bottom: 10px; }
+.upload-panel .price-line { font: bold 13px Tahoma, sans-serif; margin-bottom: 10px; }
+.upload-panel button {
+  width: 100%;
+  font: bold 13px Tahoma, sans-serif;
+  background: var(--accent);
+  border: 3px solid #000;
+  color: var(--ink);
+  border-radius: 12px;
+  padding: 8px 4px;
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+}
+.upload-panel button:disabled { opacity: .5; cursor: default; }
+.upload-panel .upload-error { color: #c0392b; font: bold 12px Tahoma, sans-serif; margin-top: 8px; }
+.upload-panel .upload-status { font: bold 12px Tahoma, sans-serif; margin-top: 8px; }
+
+/* T29: balance pill + topup tier picker (reuses .nickname-modal/.nickname-box) */
+.credit-pill { font: bold 12px Tahoma, sans-serif; }
+.topup-tier {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 3px solid #000;
+  border-radius: 12px;
+  padding: 8px 10px;
+  margin-bottom: 8px;
+  box-shadow: var(--shadow-sm);
+}
+.topup-tier .credits { font: bold 14px Tahoma, sans-serif; }
+.topup-tier button { font: bold 12px Tahoma, sans-serif; background: var(--accent); border: 3px solid #000; border-radius: 10px; padding: 5px 10px; cursor: pointer; }
+.topup-banner { text-align: center; font: bold 13px Tahoma, sans-serif; padding: 8px; margin: 0 0 10px; border-radius: 10px; }
+.topup-banner.success { background: #d4f7d4; }
+.topup-banner.cancelled { background: #f7e4d4; }
+
 .age-box .age-disclaimer { font-size: 12px; line-height: 1.6; color: #444; font-weight: normal; }
diff --git a/dance.html b/dance.html
index 34e982e..b8bbd03 100644
--- a/dance.html
+++ b/dance.html
@@ -20,10 +20,13 @@
     <div class="spacer"></div>
     <div class="watching" id="watchingCount" hidden></div>
     <button class="topbar-pill" id="muteBtn">🔇 静音</button>
+    <button class="topbar-pill" id="topupBtn" hidden>💰 充值</button>
     <button class="topbar-pill" id="authBtn">登录</button>
     <a class="topbar-pill" href="live.html">AI 短剧频道 →</a>
   </header>
 
+  <div id="topupBanner" hidden></div>
+
   <div class="body" id="body">
     <aside class="left-col" id="leftCol">
       <div class="wardrobe-tabs" id="wardrobeTabs">
@@ -93,6 +96,15 @@
   </div>
 </div>
 
+<!-- T29: topup tier picker — reuses .nickname-modal/.nickname-box's shell -->
+<div class="nickname-modal" id="topupModal" hidden>
+  <div class="nickname-box">
+    <div class="nickname-title">充值</div>
+    <div id="topupTierList"></div>
+    <button class="auth-link-btn" id="topupCloseBtn">取消</button>
+  </div>
+</div>
+
 <script>
 let wardrobe = [];
 let leftTab = "wardrobe";
@@ -190,6 +202,8 @@ function ensureIdentity() {
 // viewer_nickname onto this browser so switching devices or clearing
 // cookies doesn't silently start a fresh anonymous identity.
 const authBtn = document.getElementById("authBtn");
+const topupBtn = document.getElementById("topupBtn");
+const topupBanner = document.getElementById("topupBanner");
 const authModal = document.getElementById("authModal");
 const authTitle = document.getElementById("authTitle");
 const authEmail = document.getElementById("authEmail");
@@ -199,10 +213,14 @@ const authSubmitBtn = document.getElementById("authSubmitBtn");
 const authToggleBtn = document.getElementById("authToggleBtn");
 const authCloseBtn = document.getElementById("authCloseBtn");
 let authMode = "login";
+let currentUser = null; // T28/T29 need to know login/emailVerified/creditBalance beyond just "is authBtn's dot lit"
 
 function renderAuthButton(user) {
-  authBtn.textContent = user ? `${user.nickname || user.email.split("@")[0]} · 退出` : "登录";
+  currentUser = user;
+  authBtn.textContent = user ? `${user.nickname || user.email.split("@")[0]} · 💰${user.creditBalance} · 退出` : "登录";
   authBtn.dataset.loggedIn = user ? "1" : "";
+  topupBtn.hidden = !user;
+  if (leftTab === "garment") renderWardrobe(); // price/balance-gated panel depends on login state
 }
 
 async function refreshAuthState() {
@@ -265,6 +283,82 @@ authPassword.addEventListener("keydown", (e) => {
 
 refreshAuthState();
 
+// ---- T29: 积分余额 + 充值 (dev-plan-4.md) ----
+let pricing = [];
+async function loadPricing() {
+  try {
+    pricing = await fetch("/api/pricing").then((r) => r.json());
+  } catch {
+    pricing = [];
+  }
+}
+
+const topupModal = document.getElementById("topupModal");
+const topupTierList = document.getElementById("topupTierList");
+const topupCloseBtn = document.getElementById("topupCloseBtn");
+
+function renderTopupTiers() {
+  const tiers = pricing.filter((p) => p.kind === "topup_tier");
+  topupTierList.innerHTML = tiers.length
+    ? tiers
+        .map(
+          (t) => `
+      <div class="topup-tier">
+        <div><div class="credits">${t.credits} 积分</div>${t.priceCents != null ? `<div class="hint">$${(t.priceCents / 100).toFixed(2)}</div>` : ""}</div>
+        <button data-tier="${t.key}">购买</button>
+      </div>`
+        )
+        .join("")
+    : `<div class="empty-hint">暂无可购买档位</div>`;
+  topupTierList.querySelectorAll("[data-tier]").forEach((btn) =>
+    btn.addEventListener("click", async () => {
+      btn.disabled = true;
+      try {
+        const res = await fetch("/api/credits/checkout", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ tierKey: btn.dataset.tier }),
+        });
+        const data = await res.json();
+        if (!res.ok) {
+          alert(data.error || "创建支付会话失败");
+          return;
+        }
+        location.href = data.url; // Stripe's hosted page (real) or the mock completion URL — both redirect back here
+      } finally {
+        btn.disabled = false;
+      }
+    })
+  );
+}
+
+topupBtn.addEventListener("click", async () => {
+  if (!currentUser) {
+    openAuthModal("login");
+    return;
+  }
+  if (!pricing.length) await loadPricing();
+  renderTopupTiers();
+  topupModal.hidden = false;
+});
+topupCloseBtn.addEventListener("click", () => {
+  topupModal.hidden = true;
+});
+
+// A redirect back from Stripe (or the mock checkout) lands here with
+// ?topup=success/cancelled — show a one-off banner, then scrub the query
+// string so a page refresh doesn't keep re-showing it.
+(function showTopupBanner() {
+  const topup = new URLSearchParams(location.search).get("topup");
+  if (!topup) return;
+  topupBanner.hidden = false;
+  topupBanner.className = topup === "success" ? "topup-banner success" : "topup-banner cancelled";
+  topupBanner.textContent = topup === "success" ? "充值成功！" : "已取消充值";
+  history.replaceState(null, "", location.pathname);
+})();
+
+loadPricing();
+
 muteBtn.addEventListener("click", () => {
   player.muted = !player.muted;
   muteBtn.textContent = player.muted ? "🔇 静音" : "🔈 有声";
@@ -279,8 +373,12 @@ function garmentName(id) {
 
 function renderWardrobe() {
   document.querySelectorAll("#wardrobeTabs button").forEach((b) => b.classList.toggle("active", b.dataset.tab === leftTab));
+  if (leftTab === "garment") {
+    renderGarmentUploadPanel();
+    return;
+  }
   if (leftTab !== "wardrobe") {
-    wardrobePanel.innerHTML = `<div class="coming-soon">${leftTab === "garment" ? "传衣服" : "传人"}功能开发中，敬请期待</div>`;
+    wardrobePanel.innerHTML = `<div class="coming-soon">传人功能开发中，敬请期待</div>`;
     return;
   }
   if (wardrobe.length === 0) {
@@ -301,6 +399,77 @@ function renderWardrobe() {
   );
 }
 
+// ---- T28: 模式二"传衣服"（付费，需登录+邮箱验证） ----
+function renderGarmentUploadPanel() {
+  const spendGarment = pricing.find((p) => p.key === "spend_garment");
+  const priceLine = spendGarment ? `上传一张衣服照片，AI 换装生成跳舞视频，扣 ${spendGarment.credits} 积分` : "加载价格中…";
+  wardrobePanel.innerHTML = `
+    <div class="upload-panel">
+      <div class="hint">${priceLine}</div>
+      <input type="file" id="garmentFileInput" accept="image/jpeg,image/png,image/webp" />
+      <button id="garmentUploadBtn">上传并生成</button>
+      <div class="upload-error" id="garmentUploadError" hidden></div>
+      <div class="upload-status" id="garmentUploadStatus" hidden></div>
+    </div>`;
+  document.getElementById("garmentUploadBtn").addEventListener("click", submitGarmentUpload);
+}
+
+async function submitGarmentUpload() {
+  const fileInput = document.getElementById("garmentFileInput");
+  const errorBox = document.getElementById("garmentUploadError");
+  const statusBox = document.getElementById("garmentUploadStatus");
+  const btn = document.getElementById("garmentUploadBtn");
+  errorBox.hidden = true;
+  statusBox.hidden = true;
+
+  // 未登录/未验证先引导，而不是提交后静默失败（T28 验收标准）
+  if (!currentUser) {
+    openAuthModal("login");
+    return;
+  }
+  if (!currentUser.emailVerified) {
+    errorBox.hidden = false;
+    errorBox.textContent = "请先完成邮箱验证后再上传（查看邮箱中的验证链接）";
+    return;
+  }
+  const file = fileInput.files[0];
+  if (!file) {
+    errorBox.hidden = false;
+    errorBox.textContent = "请先选择一张图片";
+    return;
+  }
+
+  btn.disabled = true;
+  statusBox.hidden = false;
+  statusBox.textContent = "上传中…";
+  try {
+    const fd = new FormData();
+    fd.append("file", file);
+    const res = await fetch("/api/dance/upload-garment", { method: "POST", body: fd });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      statusBox.hidden = true;
+      errorBox.hidden = false;
+      if (res.status === 402) {
+        errorBox.textContent = "积分不足，请先充值";
+      } else {
+        errorBox.textContent = data.error || "上传失败";
+      }
+      return;
+    }
+    statusBox.textContent = data.status === "ready" ? "生成完成，已加入播放队列！" : "生成中，完成后会自动加入播放队列";
+    fileInput.value = "";
+    await refreshAuthState(); // balance just changed
+    pollState(); // surface the new queue entry immediately, same as pickGarment
+  } catch {
+    statusBox.hidden = true;
+    errorBox.hidden = false;
+    errorBox.textContent = "网络错误，请重试";
+  } finally {
+    btn.disabled = false;
+  }
+}
+
 document.querySelectorAll("#wardrobeTabs button").forEach((b) =>
   b.addEventListener("click", () => {
     leftTab = b.dataset.tab;
diff --git a/pricing.json b/pricing.json
new file mode 100644
index 0000000..66e4bc7
--- /dev/null
+++ b/pricing.json
@@ -0,0 +1,29 @@
+[
+  {
+    "key": "spend_garment",
+    "kind": "spend",
+    "credits": 10,
+    "priceCents": null,
+    "segmentsPerUnit": null,
+    "isActive": true,
+    "updatedAt": 1788356862386
+  },
+  {
+    "key": "topup_tier_1",
+    "kind": "topup_tier",
+    "credits": 100,
+    "priceCents": 999,
+    "segmentsPerUnit": null,
+    "isActive": true,
+    "updatedAt": 1788356862386
+  },
+  {
+    "key": "topup_tier_2",
+    "kind": "topup_tier",
+    "credits": 550,
+    "priceCents": 4999,
+    "segmentsPerUnit": null,
+    "isActive": true,
+    "updatedAt": 1788356862386
+  }
+]
\ No newline at end of file
diff --git a/server.js b/server.js
index 1382252..f56fb5f 100644
--- a/server.js
+++ b/server.js
@@ -1586,8 +1586,9 @@ http
 
     // ---- dance.html: public viewer-facing endpoints (T11/T12/T15/T17) ----
     // No admin auth (T6 only gates /api/admin/*) — these are the free,
-    // anonymous, 模式一 (衣柜选衣服) path. Modes 二/三 (paid upload) aren't
-    // built yet (require accounts/credits, dev-plan-2.md 第三/四期).
+    // anonymous, 模式一 (衣柜选衣服) path. 模式二 (付费传衣服) is T27,
+    // below, and does require login+emailVerified on its own. 模式三 isn't
+    // built yet (第五期).
 
     if (pathname === "/api/dance/wardrobe" && req.method === "GET") {
       res.writeHead(200, { "Content-Type": "application/json" });
@@ -1595,6 +1596,15 @@ http
       return;
     }
 
+    // T28/T29 need pricing (spend_garment's cost, topup_tier options) on
+    // the client before any purchase decision — public/unauthenticated on
+    // purpose, same reasoning as GET /api/dance/wardrobe above.
+    if (pathname === "/api/pricing" && req.method === "GET") {
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify(pricing.list().filter((p) => p.isActive)));
+      return;
+    }
+
     if (pathname === "/api/dance/live/state" && req.method === "GET") {
       ensureDanceSchedule();
       const now = Date.now();