login issue fixed

backend/app/routers/auth.py

@@ -36,6 +36,15 @@ def _err(exc: ident.IdentityError | ev.VerificationError, status: int = 400) ->
     return HTTPException(getattr(exc, "status", status), {"code": exc.code, "message": exc.message})
 
 
+def _sent_or_fail(db: Session, sent: bool, email: str, purpose: VerificationPurpose) -> None:
+    """A code the user never receives is useless: drop it and say so instead of reporting success."""
+    if sent:
+        return
+    ev.clear_codes(db, email, purpose)
+    db.commit()
+    raise HTTPException(502, {"code": "email_failed", "message": "We couldn't send the code. Try again in a moment."})
+
+
 def _serialize_user(user: User) -> dict:
     return {
         "id": str(user.id),
@@ -279,7 +288,7 @@ def register_start(body: RegisterStartIn, db: Session = Depends(get_db)):
     except (ident.IdentityError, ev.VerificationError) as exc:
         raise _err(exc, 429 if getattr(exc, "code", "") == "cooldown" else 400) from exc
     db.commit()
-    email_service.send_verification_code(email, issued.code)
+    _sent_or_fail(db, email_service.send_verification_code(email, issued.code), email, VerificationPurpose.SIGNUP)
     return {"ok": True}
 
 
@@ -314,7 +323,7 @@ def register_resend(body: EmailIn, db: Session = Depends(get_db)):
     except ev.VerificationError as exc:
         raise _err(exc, 429) from exc
     db.commit()
-    email_service.send_verification_code(email, issued.code)
+    _sent_or_fail(db, email_service.send_verification_code(email, issued.code), email, VerificationPurpose.SIGNUP)
     return {"ok": True}
 
 
@@ -338,14 +347,19 @@ def email_login(body: LoginIn, db: Session = Depends(get_db)):
 @router.post("/password/forgot/start")
 def forgot_start(body: EmailIn, db: Session = Depends(get_db)):
     user = ident.find_user(db, body.email)
-    # Always 200 so the endpoint does not reveal which emails exist.
-    if user and user.auth_provider == AuthProvider.EMAIL and user.is_active:
-        try:
-            issued = ev.issue_code(db, user.email, VerificationPurpose.PASSWORD_RESET)
-            db.commit()
-            email_service.send_password_reset_code(user.email, issued.code)
-        except ev.VerificationError:
-            pass
+    # Sign up already tells whether an email is taken, so naming the problem here leaks nothing new.
+    if not user or user.deleted_at or not user.is_active:
+        raise HTTPException(404, {"code": "not_found", "message": "No account found with this email. Create one instead."})
+    if user.auth_provider != AuthProvider.EMAIL:
+        raise _err(ident.wrong_provider_error(user))
+    try:
+        issued = ev.issue_code(db, user.email, VerificationPurpose.PASSWORD_RESET)
+    except ev.VerificationError as exc:
+        raise _err(exc, 429) from exc
+    db.commit()
+    _sent_or_fail(
+        db, email_service.send_password_reset_code(user.email, issued.code), user.email, VerificationPurpose.PASSWORD_RESET
+    )
     return {"ok": True}
 
 

backend/app/services/email.py

@@ -55,7 +55,8 @@ class ConsoleEmailProvider(BaseEmailProvider):
 
     def send(self, email: OutgoingEmail) -> str | None:
         ConsoleEmailProvider.sent.append(email)
-        log.info("[email] to=%s subject=%s\n%s", email.to, email.subject, email.text)
+        # Warning, not info: locally this is the only place a sign up or reset code shows up.
+        log.warning("[email] to=%s subject=%s\n%s", email.to, email.subject, email.text)
         return None
 
 
@@ -264,6 +265,13 @@ class EmailService:
 def _build() -> EmailService:
     if settings.email_provider == "resend" and settings.resend_api_key:
         return EmailService(ResendEmailProvider(settings.resend_api_key))
+    if settings.email_provider == "resend":
+        log.warning("EMAIL_PROVIDER=resend but RESEND_API_KEY is empty: emails are only logged, not sent")
+    elif settings.email_provider != "console":
+        log.warning("Unknown EMAIL_PROVIDER=%r (use resend or console): emails are only logged, not sent",
+                    settings.email_provider)
+    else:
+        log.warning("EMAIL_PROVIDER=console: emails are only logged, not sent")
     return EmailService(ConsoleEmailProvider())
 
 

backend/app/services/email_verification.py

@@ -52,6 +52,11 @@ def _latest(db: Session, email: str, purpose: VerificationPurpose) -> EmailVerif
     )
 
 
+def _alive(record: EmailVerificationCode, now: datetime) -> bool:
+    """A code that can still be entered. Dead codes (expired, out of tries) never hold up a resend."""
+    return now <= _aware(record.expires_at) and record.attempts < MAX_ATTEMPTS
+
+
 def issue_code(
     db: Session,
     email: str,
@@ -61,7 +66,7 @@ def issue_code(
 ) -> IssuedCode:
     now = datetime.now(UTC)
     latest = _latest(db, email, purpose)
-    if latest and now - _aware(latest.created_at) < RESEND_COOLDOWN:
+    if latest and _alive(latest, now) and now - _aware(latest.created_at) < RESEND_COOLDOWN:
         raise VerificationError("cooldown", "Please wait a minute before requesting another code.")
     clear_codes(db, email, purpose)
     code = f"{secrets.randbelow(1_000_000):06d}"
@@ -83,14 +88,20 @@ def check_code(db: Session, email: str, purpose: VerificationPurpose, code: str)
     record = _latest(db, email, purpose)
     if not record:
         raise VerificationError("not_found", "No active code. Request a new one.")
+    if record.attempts >= MAX_ATTEMPTS:
+        raise VerificationError("too_many_attempts", "Too many wrong tries. This code has expired. Request a new one.")
     if datetime.now(UTC) > _aware(record.expires_at):
         raise VerificationError("expired", "That code expired. Request a new one.")
-    if record.attempts >= MAX_ATTEMPTS:
-        raise VerificationError("too_many_attempts", "Too many attempts. Request a new code.")
     if not hmac.compare_digest(record.code_hash, _hash(email, code.strip())):
         record.attempts += 1
+        left = MAX_ATTEMPTS - record.attempts
+        if left <= 0:
+            # Expire rather than consume: sign up resend still needs the pending name and password.
+            record.expires_at = datetime.now(UTC)
+            db.commit()
+            raise VerificationError("too_many_attempts", "Too many wrong tries. This code has expired. Request a new one.")
         db.commit()
-        raise VerificationError("invalid", "That code is not right.")
+        raise VerificationError("invalid", f"That code is not right. {left} {'try' if left == 1 else 'tries'} left.")
     return record
 
 

backend/tests/test_auth.py

@@ -35,6 +35,42 @@ def test_wrong_code_and_attempt_limit(client):
     assert r.json()["detail"]["code"] == "too_many_attempts"
 
 
+def test_wrong_code_counts_down_and_lockout_allows_resend(client):
+    client.post("/api/auth/email/register/start", json={"email": "e@f.co", "password": "longenough"})
+    if last_code() == "000000":
+        return
+    r = client.post("/api/auth/email/register/verify", json={"email": "e@f.co", "code": "000000"})
+    assert r.json()["detail"]["message"].endswith("4 tries left.")
+    for _ in range(4):
+        r = client.post("/api/auth/email/register/verify", json={"email": "e@f.co", "code": "000000"})
+    assert r.json()["detail"]["code"] == "too_many_attempts"
+    # A dead code does not hold up a new one, and the pending sign up survives the lockout.
+    assert client.post("/api/auth/email/register/resend", json={"email": "e@f.co"}).status_code == 200
+    r = client.post("/api/auth/email/register/verify", json={"email": "e@f.co", "code": last_code()})
+    assert r.status_code == 200
+
+
+def test_email_send_failure_is_reported(client, monkeypatch):
+    from app.services.email import email_service
+
+    monkeypatch.setattr(email_service, "send_verification_code", lambda to, code: False)
+    r = client.post("/api/auth/email/register/start", json={"email": "f@g.co", "password": "longenough"})
+    assert r.status_code == 502
+    assert r.json()["detail"]["code"] == "email_failed"
+
+
+def test_forgot_password_unknown_and_google(client, db_session):
+    from app.services.auth_identity import resolve_or_create_google_user
+
+    r = client.post("/api/auth/password/forgot/start", json={"email": "nobody@example.com"})
+    assert r.status_code == 404
+    resolve_or_create_google_user(db_session, email="g2@example.com", google_id="456", name="G", avatar_url=None)
+    db_session.commit()
+    r = client.post("/api/auth/password/forgot/start", json={"email": "g2@example.com"})
+    assert r.status_code == 409
+    assert r.json()["detail"]["code"] == "wrong_provider"
+
+
 def test_resend_cooldown(client):
     client.post("/api/auth/email/register/start", json={"email": "c@d.co", "password": "longenough"})
     r = client.post("/api/auth/email/register/resend", json={"email": "c@d.co"})

frontend/src/api/auth.ts

@@ -34,6 +34,8 @@ export const authApi = {
   forgotStart: (email: string) => post<{ ok: true }>("/api/auth/password/forgot/start", { email }),
   forgotComplete: (email: string, code: string, password: string) =>
     post<LoginResult>("/api/auth/password/forgot/complete", { email, code, password }),
-  logout: () => post<{ ok: true }>("/api/auth/logout"),
+  /** Takes the token explicitly: sign out clears local tokens before revoking on the server. */
+  logout: (access: string) =>
+    api<{ ok: true }>("/api/auth/logout", { method: "POST", headers: { Authorization: `Bearer ${access}` } }, false),
   deleteAccount: () => post<{ ok: true }>("/api/auth/delete-account"),
 };

frontend/src/api/client.ts

@@ -17,6 +17,9 @@ export class ApiError extends Error {
 /** Fired on every 402 plan_limit so the upgrade popup opens wherever the request came from. */
 export const PLAN_LIMIT_EVENT = "ns:plan-limit";
 
+/** Fired when a signed in request gets a 401 that a refresh cannot fix, so the app signs the user out. */
+export const SESSION_EXPIRED_EVENT = "ns:session-expired";
+
 export type PlanLimitDetail = { message: string; kind?: string; plan?: string; upgrade_to?: string | null };
 
 function read(key: string): string | null {
@@ -93,9 +96,14 @@ async function request(path: string, init: RequestInit, retry: boolean): Promise
   if (init.body && !(init.body instanceof FormData) && !headers.has("Content-Type")) {
     headers.set("Content-Type", "application/json");
   }
-  if (tokens.access) headers.set("Authorization", `Bearer ${tokens.access}`);
+  const signedIn = Boolean(tokens.access);
+  if (signedIn) headers.set("Authorization", `Bearer ${tokens.access}`);
   const res = await fetch(`${BASE}${path}`, { ...init, headers });
   if (res.status === 401 && retry && (await tryRefresh())) return request(path, init, false);
+  // Auth endpoints answer 401 for a wrong password and similar; only a dead session elsewhere signs out.
+  if (res.status === 401 && signedIn && retry && !path.startsWith("/api/auth/")) {
+    window.dispatchEvent(new Event(SESSION_EXPIRED_EVENT));
+  }
   if (!res.ok) throw await parseError(res);
   return res;
 }

frontend/src/components/AppShell.tsx

@@ -33,7 +33,7 @@ function readCollapsed(): boolean {
 }
 
 export default function AppShell() {
-  const { user, loading, logout } = useAuth();
+  const { user, loading, signingOut, logout } = useAuth();
   const location = useLocation();
   const notebookFocus = /^\/app\/notebooks\/[^/]+$/.test(location.pathname);
   const [collapsed, setCollapsed] = useState(readCollapsed);
@@ -47,10 +47,7 @@ export default function AppShell() {
       return !c;
     });
   if (loading) return <div className="boot"><div className="orbit-loader"><span /></div></div>;
-  if (!user) {
-    const next = new URLSearchParams({ next: location.pathname + location.search });
-    return <Navigate to={`/auth?${next}`} replace />;
-  }
+  if (!user) return <Navigate to="/" replace />;
 
   return (
     <UpgradeProvider>
@@ -103,7 +100,7 @@ export default function AppShell() {
           </NavLink>
           <div className="sidebar-user">
             <span className="mono muted side-label">{user.email}</span>
-            <button className="link-btn" onClick={logout} title="Sign out">
+            <button className="link-btn" onClick={logout} disabled={signingOut} title="Sign out">
               Sign out
             </button>
           </div>

frontend/src/hooks/useAuth.tsx

@@ -1,20 +1,27 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
 import { authApi, type LoginResult, type User } from "../api/auth";
-import { tokens } from "../api/client";
+import { SESSION_EXPIRED_EVENT, tokens } from "../api/client";
 import { clearSourceCache } from "../components/video/sourceCache";
 
 type AuthState = {
   user: User | null;
   loading: boolean;
+  signingOut: boolean;
   complete: (result: LoginResult) => void;
   logout: () => Promise<void>;
 };
 
 const AuthContext = createContext<AuthState | null>(null);
 
+/** How long sign out waits for the server to revoke the session before moving on. */
+const REVOKE_TIMEOUT_MS = 5000;
+
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(Boolean(tokens.access));
+  const [signingOut, setSigningOut] = useState(false);
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (!tokens.access) return;
@@ -25,6 +32,17 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       .finally(() => setLoading(false));
   }, []);
 
+  useEffect(() => {
+    const expire = () => {
+      tokens.clear();
+      clearSourceCache();
+      setUser(null);
+      navigate("/", { replace: true });
+    };
+    window.addEventListener(SESSION_EXPIRED_EVENT, expire);
+    return () => window.removeEventListener(SESSION_EXPIRED_EVENT, expire);
+  }, [navigate]);
+
   const complete = useCallback((result: LoginResult) => {
     tokens.set(result.access_token, result.refresh_token);
     clearSourceCache();
@@ -32,17 +50,40 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   }, []);
 
   const logout = useCallback(async () => {
+    setSigningOut(true);
+    // Drop the session locally first so nothing (in this tab or another) can use it again.
+    const access = tokens.access;
+    tokens.clear();
+    clearSourceCache();
     try {
-      await authApi.logout();
+      if (access) {
+        const timeout = new Promise<void>((resolve) => setTimeout(resolve, REVOKE_TIMEOUT_MS));
+        await Promise.race([authApi.logout(access).catch(() => undefined), timeout]);
+      }
     } finally {
-      tokens.clear();
-      clearSourceCache();
+      // Navigate in the same batch as clearing the user so AppShell never sees a signed out render.
+      navigate("/", { replace: true });
       setUser(null);
+      setSigningOut(false);
     }
-  }, []);
+  }, [navigate]);
 
-  const value = useMemo(() => ({ user, loading, complete, logout }), [user, loading, complete, logout]);
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+  const value = useMemo(
+    () => ({ user, loading, signingOut, complete, logout }),
+    [user, loading, signingOut, complete, logout],
+  );
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+      {signingOut && (
+        <div className="boot signout-overlay" role="status" aria-label="Signing out">
+          <div className="orbit-loader">
+            <span />
+          </div>
+        </div>
+      )}
+    </AuthContext.Provider>
+  );
 }
 
 export function useAuth(): AuthState {

frontend/src/pages/AuthPage.tsx

@@ -6,6 +6,9 @@ import Logo from "../components/Logo";
 import SkyCanvas from "../components/SkyCanvas";
 import { useAuth } from "../hooks/useAuth";
 
+/** Mirrors validate_password on the backend. */
+const MIN_PASSWORD = 8;
+
 type Mode = "signin" | "signup" | "verify" | "forgot" | "reset";
 
 declare global {
@@ -75,6 +78,9 @@ export default function AuthPage() {
   const [password, setPassword] = useState("");
   const [name, setName] = useState("");
   const [code, setCode] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  // The current code is out of tries or expired: the only ways forward are a new code or a new email.
+  const [codeDead, setCodeDead] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
@@ -115,11 +121,36 @@ export default function AuthPage() {
       }
     } catch (e) {
       setError(e instanceof ApiError ? e.message : "Something went wrong. Try again.");
+      if (!(e instanceof ApiError)) return;
+      // A dead code cannot be retried; clear it so the next step is clearly "Resend code".
+      if (e.code === "too_many_attempts" || e.code === "expired") {
+        setCode("");
+        setCodeDead(true);
+      }
+      // Registered with the other method: back to sign in, where the Google button sits.
+      if (e.code === "wrong_provider") setMode("signin");
     } finally {
       setBusy(false);
     }
   };
 
+  useEffect(() => setCodeDead(false), [mode]);
+
+  const resend = () =>
+    run(async () => {
+      if (mode === "verify") await authApi.registerResend(email);
+      else await authApi.forgotStart(email);
+      setCodeDead(false);
+      setNotice("New code sent.");
+    });
+
+  const tryAnotherEmail = () => {
+    setCode("");
+    setError(null);
+    setNotice(null);
+    setMode(mode === "verify" ? "signup" : "forgot");
+  };
+
   const onGoogle = (credential: string) => run(() => authApi.google(credential));
 
   const submit = (e: FormEvent) => {
@@ -136,11 +167,14 @@ export default function AuthPage() {
       return run(async () => {
         await authApi.forgotStart(email);
         setMode("reset");
-        setNotice(`If ${email} has an account, a reset code is on its way.`);
+        setNotice(`We sent a reset code to ${email}.`);
       });
     return run(() => authApi.forgotComplete(email, code, password));
   };
 
+  // New passwords (sign up, reset) must meet the length rule before the form can be sent.
+  const passwordTooShort = (mode === "signup" || mode === "reset") && password.length < MIN_PASSWORD;
+
   const titles: Record<Mode, string> = {
     signin: "Welcome back",
     signup: "Create your account",
@@ -216,15 +250,32 @@ export default function AuthPage() {
             {(mode === "signin" || mode === "signup" || mode === "reset") && (
               <label>
                 <span>{mode === "reset" ? "New password" : "Password"}</span>
-                <input
-                  className="input"
-                  type="password"
-                  required
-                  minLength={8}
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  autoComplete={mode === "signin" ? "current-password" : "new-password"}
-                />
+                <div className="password-field">
+                  <input
+                    className="input"
+                    type={showPassword ? "text" : "password"}
+                    required
+                    minLength={MIN_PASSWORD}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    autoComplete={mode === "signin" ? "current-password" : "new-password"}
+                  />
+                  <button
+                    type="button"
+                    className="icon-btn password-toggle"
+                    onClick={() => setShowPassword((v) => !v)}
+                    aria-label={showPassword ? "Hide password" : "Show password"}
+                    aria-pressed={showPassword}
+                    title={showPassword ? "Hide password" : "Show password"}
+                  >
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                      <path d="M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12z" />
+                      <circle cx="12" cy="12" r="3" />
+                      {showPassword && <path d="M4 20L20 4" />}
+                    </svg>
+                  </button>
+                </div>
+                {mode !== "signin" && <span className="muted small">At least {MIN_PASSWORD} characters.</span>}
               </label>
             )}
             {error && (
@@ -232,9 +283,15 @@ export default function AuthPage() {
                 {error}
               </p>
             )}
-            <button type="submit" className="btn btn-primary" disabled={busy}>
-              {busy ? "Working..." : cta[mode]}
-            </button>
+            {codeDead ? (
+              <button type="button" className="btn btn-primary" disabled={busy} onClick={resend}>
+                {busy ? "Working..." : "Resend code"}
+              </button>
+            ) : (
+              <button type="submit" className="btn btn-primary" disabled={busy || passwordTooShort}>
+                {busy ? "Working..." : cta[mode]}
+              </button>
+            )}
           </form>
 
           <div className="auth-switch muted">
@@ -259,20 +316,16 @@ export default function AuthPage() {
                 </button>
               </span>
             )}
-            {mode === "verify" && (
-              <button
-                type="button"
-                className="link-btn"
-                onClick={() =>
-                  run(async () => {
-                    await authApi.registerResend(email);
-                    setNotice("New code sent.");
-                  })
-                }
-              >
-                Resend code
-              </button>
-            )}
+            {(mode === "verify" || mode === "reset") &&
+              (codeDead ? (
+                <button type="button" className="link-btn" onClick={tryAnotherEmail}>
+                  Try with another email
+                </button>
+              ) : (
+                <button type="button" className="link-btn" onClick={resend}>
+                  Resend code
+                </button>
+              ))}
             {(mode === "forgot" || mode === "reset") && (
               <button type="button" className="link-btn" onClick={() => setMode("signin")}>
                 Back to sign in

frontend/src/pages/Settings.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState, type ReactNode } from "react";
-import { useNavigate } from "react-router-dom";
 import { authApi } from "../api/auth";
 import { tokens, uploadFile } from "../api/client";
 import { settingsApi, type SettingsPatch } from "../api/endpoints";
@@ -49,9 +48,8 @@ export default function Settings() {
   const [saved, setSaved] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [sounds, setSounds] = useState(soundsEnabled);
-  const { logout } = useAuth();
+  const { logout, signingOut } = useAuth();
   const upgrade = useUpgrade();
-  const navigate = useNavigate();
 
   const hydrate = (d: SettingsData) => {
     setS(d);
@@ -210,13 +208,7 @@ export default function Settings() {
 
           <Section title="Account">
             <div className="row">
-              <button
-                className="btn"
-                onClick={async () => {
-                  await logout();
-                  navigate("/auth");
-                }}
-              >
+              <button className="btn" onClick={logout} disabled={signingOut}>
                 Sign out everywhere
               </button>
               <ConfirmButton

frontend/src/pages/Welcome.tsx

@@ -14,7 +14,7 @@ type Goal = "ask" | "audio" | "launch";
 type Mode = "feed" | "url" | "file";
 
 const MODES: { id: Mode; label: string }[] = [
-  { id: "feed", label: "Blog or newsletter" },
+  { id: "feed", label: "Blog or website" },
   { id: "url", label: "One article" },
   { id: "file", label: "Upload files" },
 ];
@@ -210,7 +210,10 @@ export default function Welcome() {
           {["Connect", "Index", "Choose", "Launch"].map((label, i) => (
             <li key={label} className={i < stepIndex ? "done" : i === stepIndex ? "current" : ""}>
               <span className="welcome-dot" />
-              {label}
+              <span>
+                <span className="welcome-step-num">{i + 1}</span>
+                {label}
+              </span>
             </li>
           ))}
         </ol>

frontend/src/styles/app.css

@@ -382,6 +382,14 @@
   place-items: center;
 }
 
+/* Covers the app while sign out revokes the session. */
+.signout-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  background: var(--black);
+}
+
 /* ---------- Pricing ---------- */
 .pricing-note {
   display: flex;
@@ -696,6 +704,22 @@
   border-radius: var(--radius-sm);
 }
 
+.password-field {
+  position: relative;
+}
+
+.password-field .input {
+  width: 100%;
+  padding-right: 48px;
+}
+
+.password-toggle {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+}
+
 .code-input {
   font-family: var(--font-mono);
   letter-spacing: 0.4em;

frontend/src/styles/pages.css

@@ -1684,6 +1684,9 @@ select.input option {
   padding: 32px var(--gutter) 64px;
   display: grid;
   gap: 24px;
+  /* Sit the onboarding block in the vertical middle of the screen rather than pinned to the top. */
+  min-height: 100vh;
+  align-content: center;
 }
 
 .welcome-top {
@@ -1708,6 +1711,11 @@ select.input option {
   gap: 8px;
 }
 
+.welcome-step-num {
+  margin-right: 8px;
+  color: var(--blue);
+}
+
 .welcome-dot {
   height: 3px;
   border-radius: 999px;