Sponsor shown on sign-in + new-member onboarding (username, optional profile)

- Sign-in page shows "You're joining the line of @X" when arriving via a sponsor
  link (/api/sponsor now returns the sponsor name + avatar).
- After a new account verifies (or signs up) with no username yet, an onboarding
  modal prompts for a username and an optional bio (both skippable), before the
  welcome tour.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

public/my.html

@@ -17,6 +17,10 @@
       <p class="lead" id="introLead" style="font-size:16px">Join free with your email. Your wallet only
         comes out when you buy a package or switch on payouts, and it stays yours the whole time.</p>
     </section>
+    <div class="card" id="sponsorNote" style="border-color:var(--mint);text-align:center" hidden>
+      <p style="margin:0"><span class="muted small">You're joining the line of</span><br>
+        <b id="sponsorNoteName" style="font-size:19px;color:var(--mint)"></b></p>
+    </div>
     <div class="card" id="magicCard" hidden>
       <h3>Sign in or join free</h3>
       <p class="muted small">Type your email and we send a 6-digit code. No password to invent,
@@ -82,6 +86,24 @@
   </div>
 </div>
 
+<!-- ── onboarding: new members pick a username (profile optional) ── -->
+<div id="onboardModal" class="modal-back" hidden>
+  <div class="modal-card">
+    <p class="eyebrow">Welcome to InstantAdPay</p>
+    <h3 style="margin:.2em 0 .5em">Pick your username</h3>
+    <p class="muted small">This is how your team sees you, and it turns your invite link into a clean vanity link.
+      You can change it later in Profile.</p>
+    <p><input id="obUsername" placeholder="Username (3-20 letters, numbers, _)" autocomplete="off" style="width:100%"></p>
+    <p class="muted small" style="margin:12px 0 4px">Optional — a short bio for your public page (you can skip this).</p>
+    <p><textarea id="obBio" rows="2" maxlength="600" placeholder="A short bio (optional)" style="width:100%"></textarea></p>
+    <p id="obErr" class="small" style="color:var(--bad)" hidden></p>
+    <p style="margin-top:14px;display:flex;gap:10px;justify-content:flex-end">
+      <button class="btn sec small" id="obSkip" type="button">Skip for now</button>
+      <button class="btn" id="obSave" type="button">Save &amp; continue</button>
+    </p>
+  </div>
+</div>
+
 <!-- ── sponsor message modal: unmissable on sign-in ── -->
 <div id="msgModal" class="modal-back" hidden>
   <div class="modal-card">
@@ -644,7 +666,7 @@
 </div>
 <script src="/assets/common.js?v=20260907n"></script>
 <script src="/assets/wallet.js?v=20260907q"></script>
-<script src="/assets/my.js?v=20260907p"></script>
+<script src="/assets/my.js?v=20260907r"></script>
 <script src="/assets/chat.js?v=20260907l"></script>
 </body>
 </html>