Make mfa lockout risk clear in dashboard (#47344)

## Problem

#47330 is not enough. We want the alert to really catch users attention

## Solution

<img width="1670" height="1138" alt="image"
src="https://github.com/user-attachments/assets/3dab5145-2abf-4213-a591-45116eeacb6a"
/>
<img width="1634" height="1048" alt="image"
src="https://github.com/user-attachments/assets/c70ac8cc-2af0-4778-a68b-3ea9ea8f8166"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Moved the “permanently locked out” MFA warning to the account security
page when only one authenticator app is configured.
* Removed the duplicate warning from the authenticator factor list so
the message is shown in a single, consistent location.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: mo khan <mo@mokhan.ca>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>

apps/studio/components/interfaces/Account/TOTPFactors/index.tsx

@@ -1,7 +1,6 @@
 import dayjs from 'dayjs'
 import { useState } from 'react'
 import { Button } from 'ui'
-import { Admonition } from 'ui-patterns/admonition'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { AddNewFactorModal } from './AddNewFactorModal'
@@ -28,14 +27,6 @@ export const TOTPFactors = () => {
           )}
           {isSuccess && (
             <>
-              {data.totp.length === 1 && (
-                <Admonition
-                  type="warning"
-                  layout="horizontal"
-                  title="We recommend configuring two authenticator apps across different devices"
-                  description="The two authenticator apps will serve as a backup for each other."
-                />
-              )}
               <div>
                 {data.totp.map((factor) => {
                   return (

apps/studio/pages/account/security.tsx

@@ -1,5 +1,6 @@
 import { Lock } from 'lucide-react'
 import { Badge, Card, CardContent, CardHeader } from 'ui'
+import { Admonition } from 'ui-patterns'
 import { PageContainer } from 'ui-patterns/PageContainer'
 import {
   PageHeader,
@@ -40,6 +41,15 @@ const Security: NextPageWithLayout = () => {
         </PageHeaderMeta>
       </PageHeader>
       <PageContainer size="small">
+        {data?.totp.length === 1 && (
+          <Admonition
+            className="mt-8"
+            type="danger"
+            layout="horizontal"
+            title="Avoid being locked out"
+            description="Add a backup sign-in method now. Otherwise, losing access to your authenticator app will permanently lock you out of your account."
+          />
+        )}
         <Card className="mt-8">
           <CardHeader className="py-3 flex flex-row items-center justify-between">
             <div className="flex flex-row gap-4 items-center py-1 mb-0">