flowlink-auth 2.7.9 → 2.8.1

package/src/SignUp.jsx

@@ -258,11 +258,12 @@
 // const errorBox = { marginTop: 10, color: '#ffb4b4', fontSize: 13 }
 // const successBox = { marginTop: 10, color: '#bef264', fontSize: 13 }
 
+// src/signup.jsx
 // src/signup.jsx
 'use client'
 import React, { useState, useRef, useEffect } from 'react'
 import Link from 'next/link'
-import { useAuth } from './provider.js' // keep if your app provides it; safe to remove if not used
+import { useAuth } from './provider.js' // keep if your SDK provides this; safe to remove if not used
 
 export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
   const {
@@ -282,41 +283,49 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
   const [loading, setLoading] = useState(false)
   const [loadingOauth, setLoadingOauth] = useState({ google: false, github: false })
   const redirectTimer = useRef(null)
+
+  // Local toast system (black background)
   const toastId = useRef(0)
-  const [toasts, setToasts] = useState([]) // local toast system to avoid external libs (black background)
+  const [toasts, setToasts] = useState([])
 
   useEffect(() => {
+    // Soft-disable pinch-zoom on mobile while this component is mounted.
+    // This inserts a viewport meta tag and removes it on unmount.
+    const meta = document.createElement('meta')
+    meta.name = 'viewport'
+    meta.content = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
+    document.head.appendChild(meta)
+
     return () => {
+      // cleanup timer & meta tag
       if (redirectTimer.current) clearTimeout(redirectTimer.current)
-      // clear pending toast timers
-      toasts.forEach(t => clearTimeout(t._timer))
+      const existing = document.querySelector('meta[name="viewport"]')
+      if (existing && existing.content === meta.content) {
+        document.head.removeChild(existing)
+      }
+      // clear any toast timers if present (we store timers on the toast objects)
+      toasts.forEach(t => {
+        if (t._timer) clearTimeout(t._timer)
+      })
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // simple toast helper (auto-dismiss). type: 'success' | 'error' | 'info'
+  // Toast helpers
   function showToast(type, message, ms = 5000) {
     const id = ++toastId.current
-    const created = Date.now()
-    const t = { id, type, message, created, _timer: null }
-    // add toast
-    setToasts(prev => {
-      const next = [t, ...prev].slice(0, 6)
-      return next
-    })
-    // schedule removal
+    const t = { id, type, message, _timer: null }
+    setToasts(prev => [t, ...prev].slice(0, 6))
     const timer = setTimeout(() => {
       setToasts(prev => prev.filter(x => x.id !== id))
     }, ms)
-    // store timer so cleanup can clear it
     t._timer = timer
   }
 
-  // remove toast immediately
   function removeToast(id) {
     setToasts(prev => {
       prev.forEach(t => {
-        if (t.id === id) clearTimeout(t._timer)
+        if (t.id === id && t._timer) clearTimeout(t._timer)
       })
       return prev.filter(x => x.id !== id)
     })
@@ -330,6 +339,7 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
     return null
   }
 
+  // Prevent double submit
   async function submit(e) {
     e.preventDefault()
     if (loading) return
@@ -366,8 +376,8 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
       })
 
       const data = await res.json().catch(async () => {
-        const text = await res.text().catch(() => '')
-        return { _raw: text }
+        const txt = await res.text().catch(() => '')
+        return { _raw: txt }
       })
 
       if (!res.ok) {
@@ -379,7 +389,7 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
       if (typeof fetchMe === 'function') await fetchMe()
 
       showToast('success', 'Account created. Redirecting…')
-      // redirect after tiny delay so user sees toast
+
       if (redirect) {
         redirectTimer.current = setTimeout(() => {
           if (typeof redirectTo === 'function') redirectTo(redirect)
@@ -387,9 +397,9 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
         }, 450)
       }
     } catch (err) {
-      // present server errors as toast (black background)
       const text = err?.message ?? 'Network error'
       showToast('error', text)
+      // keep console error for integrators
       console.error('Signup error:', err)
     } finally {
       setLoading(false)
@@ -410,9 +420,7 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
       const sdkBase = baseUrl || (typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '')
       const startUrl = `${sdkBase}/sdk/auth/start?rid=${rid}&source=${encodeURIComponent(provider)}&callbackUrl=${callbackUrl}`
 
-      if (!publishableKey) {
-        throw new Error('Missing publishable key (client side).')
-      }
+      if (!publishableKey) throw new Error('Missing publishable key (client side).')
 
       const res = await fetch(startUrl, {
         method: 'GET',
@@ -423,7 +431,7 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
       if (!res.ok) throw new Error(data?.error || `OAuth start failed (${res.status})`)
       if (!data?.oauthUrl) throw new Error('SDK start did not return oauthUrl')
 
-      // navigate away to provider
+      // Navigate to provider (this will unload the page)
       if (typeof window !== 'undefined') window.location.href = data.oauthUrl
     } catch (err) {
       showToast('error', err?.message || 'OAuth start failed')
@@ -443,54 +451,51 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
   }
 
   return (
-    <div style={overlay}>
-      {/* toast container (custom) */}
-      <div style={toastContainer}>
+    <div style={styles.overlay}>
+      {/* custom toast container (black background) */}
+      <div style={styles.toastContainer} aria-live="polite" aria-atomic="true">
         {toasts.map(t => (
           <div
             key={t.id}
             role="status"
-            aria-live="polite"
             style={{
-              ...toastBase,
-              ...(t.type === 'error' ? toastError : t.type === 'success' ? toastSuccess : toastInfo)
+              ...styles.toastBase,
+              ...(t.type === 'error' ? styles.toastError : t.type === 'success' ? styles.toastSuccess : styles.toastInfo)
             }}
             onMouseEnter={() => {
-              // pause dismiss
-              clearTimeout(t._timer)
+              if (t._timer) clearTimeout(t._timer)
             }}
             onMouseLeave={() => {
-              // restart dismiss for this toast
+              // restart auto-dismiss shorter when mouse leaves
               const timer = setTimeout(() => removeToast(t.id), 3000)
-              // patch timer into state (imperative but fine for local toast)
               setToasts(prev => prev.map(x => x.id === t.id ? { ...x, _timer: timer } : x))
             }}
           >
             <div style={{ flex: 1 }}>{t.message}</div>
-            <button aria-label="Dismiss" onClick={() => removeToast(t.id)} style={toastCloseBtn}>✕</button>
+            <button aria-label="Dismiss" onClick={() => removeToast(t.id)} style={styles.toastCloseBtn}>✕</button>
           </div>
         ))}
       </div>
 
-      <div style={modal}>
-        <div style={modalInner}>
-          <header style={header}>
-            <div style={brandRow}>
-              <div style={logo}>
-                <div style={logoCircle} aria-hidden />
+      <div style={styles.modal} role="dialog" aria-modal="true" aria-labelledby="signup-title">
+        <div style={styles.modalInner}>
+          <header style={styles.header}>
+            <div style={styles.brandRow}>
+              <div style={styles.logo} aria-hidden>
+                <div style={styles.logoCircle} />
               </div>
               <div>
-                <h1 style={title}>Sign up to {agency?.name || 'App'}</h1>
-                <div style={subtitle}>Welcome! Create your account.</div>
+                <h1 id="signup-title" style={styles.title}>Sign up to {agency?.name || 'App'}</h1>
+                <div style={styles.subtitle}>Welcome — create your account.</div>
               </div>
             </div>
           </header>
 
-          <section style={oauthSection}>
+          <section style={styles.oauthSection}>
             <button
               onClick={handleGoogle}
               type="button"
-              style={{ ...oauthButton, ...oauthGoogle }}
+              style={{ ...styles.oauthButton, ...styles.oauthGoogle }}
               disabled={loading || loadingOauth.google}
               aria-disabled={loading || loadingOauth.google}
             >
@@ -506,7 +511,7 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
             <button
               onClick={handleGithub}
               type="button"
-              style={{ ...oauthButton, ...oauthGithub }}
+              style={{ ...styles.oauthButton, ...styles.oauthGithub }}
               disabled={loading || loadingOauth.github}
               aria-disabled={loading || loadingOauth.github}
             >
@@ -517,28 +522,28 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
             </button>
           </section>
 
-          <div style={dividerRow}>
-            <div style={line} />
-            <div style={orText}>or</div>
-            <div style={line} />
+          <div style={styles.dividerRow}>
+            <div style={styles.line} />
+            <div style={styles.orText}>or</div>
+            <div style={styles.line} />
           </div>
 
-          <form onSubmit={submit} style={form}>
-            <label style={label} htmlFor="name">
-              <span style={labelText}>Name</span>
+          <form onSubmit={submit} style={styles.form}>
+            <label style={styles.label} htmlFor="name">
+              <span style={styles.labelText}>Name</span>
               <input
                 id="name"
                 type="text"
                 value={name}
                 onChange={e => setName(e.target.value)}
                 placeholder="Your name"
-                style={input}
+                style={styles.input}
                 autoComplete="name"
               />
             </label>
 
-            <label style={label} htmlFor="email">
-              <span style={labelText}>Email address</span>
+            <label style={styles.label} htmlFor="email">
+              <span style={styles.labelText}>Email address</span>
               <input
                 id="email"
                 type="email"
@@ -546,13 +551,13 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
                 onChange={e => setEmail(e.target.value)}
                 required
                 placeholder="you@example.com"
-                style={input}
+                style={styles.input}
                 autoComplete="email"
               />
             </label>
 
-            <label style={label} htmlFor="password">
-              <span style={labelText}>Password</span>
+            <label style={styles.label} htmlFor="password">
+              <span style={styles.labelText}>Password</span>
               <input
                 id="password"
                 type="password"
@@ -560,14 +565,14 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
                 onChange={e => setPassword(e.target.value)}
                 required
                 placeholder="••••••••"
-                style={input}
+                style={styles.input}
                 autoComplete="new-password"
               />
             </label>
 
             <button
               type="submit"
-              style={submitButton}
+              style={styles.submitButton}
               disabled={loading}
               aria-disabled={loading}
             >
@@ -576,14 +581,14 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
           </form>
         </div>
 
-        <div style={modalFooter}>
-          <div style={belowRow}>
-            <span style={muted}>Already have an account? </span>
-            <Link href="/sign-in" style={link}>Sign in</Link>
+        <div style={styles.modalFooter}>
+          <div style={styles.belowRow}>
+            <span style={styles.muted}>Already have an account? </span>
+            <Link href="/sign-in" style={styles.link}>Sign in</Link>
           </div>
-          <div style={dividerThin} />
-          <div style={secured}>
-            <div style={securedText}>Secured by auth</div>
+          <div style={styles.dividerThin} />
+          <div style={styles.secured}>
+            <div style={styles.securedText}>Secured by auth</div>
           </div>
         </div>
       </div>
@@ -591,271 +596,273 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
   )
 }
 
-/* styles (JS objects) - neutral palette, translucent overlay so underlying content shows */
-const overlay = {
-  position: 'fixed',
-  inset: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: 20,
-  background: 'linear-gradient(180deg, rgba(2,6,23,0.22), rgba(2,6,23,0.32))',
-  backdropFilter: 'blur(6px)',
-  minHeight: '100vh',
-  zIndex: 9999
-}
-
-const modal = {
-  width: '100%',
-  maxWidth: 560,
-  borderRadius: 14,
-  background: 'linear-gradient(180deg, rgba(15,19,24,0.6), rgba(10,12,16,0.6))', // translucent neutral so background peeks through
-  border: '1px solid rgba(99,102,106,0.12)', // slightly stronger neutral border
-  boxShadow: '0 20px 50px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02)',
-  overflow: 'hidden',
-  display: 'flex',
-  flexDirection: 'column',
-  transform: 'translateY(-6px)'
-}
-
-const modalInner = {
-  padding: 18,
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 12
-}
-
-/* header / brand */
-const header = {
-  paddingBottom: 6,
-  borderBottom: '1px solid rgba(148,163,184,0.04)'
-}
-
-const brandRow = {
-  display: 'flex',
-  alignItems: 'center',
-  gap: 12
-}
-
-const logo = {
-  width: 44,
-  height: 44,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}
-
-const logoCircle = {
-  width: 36,
-  height: 36,
-  borderRadius: 999,
-  background: 'linear-gradient(135deg,#2f3438,#11151a)',
-  boxShadow: '0 4px 12px rgba(2,6,23,0.6)'
-}
-
-const title = {
-  margin: 0,
-  fontSize: 18,
-  fontWeight: 600,
-  color: '#e6e6e6'
-}
-
-const subtitle = {
-  fontSize: 13,
-  color: 'rgba(230,230,230,0.72)',
-  marginTop: 4
-}
-
-/* oauth row */
-const oauthSection = {
-  marginTop: 8,
-  display: 'flex',
-  gap: 8
-}
-
-const oauthButton = {
-  flex: 1,
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: '10px 12px',
-  borderRadius: 10,
-  border: '1px solid rgba(148,163,184,0.08)',
-  fontSize: 14,
-  cursor: 'pointer',
-  userSelect: 'none',
-  gap: 8,
-  minHeight: 40
-}
-
-const oauthGoogle = {
-  background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))',
-  color: '#fff'
-}
-
-const oauthGithub = {
-  background: 'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))',
-  color: '#fff'
-}
-
-/* divider row */
-const dividerRow = {
-  display: 'flex',
-  alignItems: 'center',
-  gap: 10,
-  marginTop: 12
-}
-
-const line = {
-  flex: 1,
-  height: 1,
-  background: 'rgba(148,163,184,0.06)'
-}
-
-const orText = {
-  fontSize: 13,
-  color: 'rgba(230,230,230,0.65)',
-  padding: '0 8px'
-}
-
-/* form */
-const form = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 10,
-  marginTop: 6
-}
-
-const label = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 6
-}
-
-const labelText = {
-  fontSize: 13,
-  color: 'rgba(230,230,230,0.68)'
-}
-
-const input = {
-  width: '100%',
-  padding: '10px 12px',
-  borderRadius: 10,
-  background: 'rgba(255,255,255,0.02)',
-  color: '#e6e6e6',
-  border: '1px solid rgba(148,163,184,0.10)',
-  fontSize: 14,
-  outline: 'none',
-  boxSizing: 'border-box',
-  transition: 'box-shadow 120ms, border-color 120ms'
-}
-
-const submitButton = {
-  marginTop: 6,
-  width: '100%',
-  padding: '10px 12px',
-  borderRadius: 10,
-  background: 'linear-gradient(180deg,#475569,#94a3b8)',
-  border: 'none',
-  color: '#fff',
-  fontWeight: 600,
-  cursor: 'pointer',
-  fontSize: 15,
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  minHeight: 44
-}
-
-/* modal footer */
-const modalFooter = {
-  padding: '12px 18px 18px 18px',
-  borderTop: '1px solid rgba(148,163,184,0.03)',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 8
-}
-
-const belowRow = {
-  textAlign: 'center',
-  display: 'flex',
-  justifyContent: 'center',
-  gap: 8,
-  alignItems: 'center'
-}
-
-const muted = {
-  color: 'rgba(230,230,230,0.66)',
-  fontSize: 13
-}
-
-const link = {
-  color: '#9fb0d9',
-  textDecoration: 'none',
-  fontWeight: 600
-}
-
-const dividerThin = {
-  height: 1,
-  background: 'rgba(148,163,184,0.04)',
-  marginTop: 6,
-  marginBottom: 6
-}
-
-const secured = {
-  textAlign: 'center'
-}
-
-const securedText = {
-  color: 'rgba(230,230,230,0.9)',
-  fontSize: 13,
-  fontWeight: 600
-}
-
-/* toasts - black background as requested */
-const toastContainer = {
-  position: 'fixed',
-  top: 18,
-  right: 18,
-  width: 360,
-  maxWidth: 'calc(100% - 36px)',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 10,
-  zIndex: 60000
-}
-
-const toastBase = {
-  display: 'flex',
-  gap: 10,
-  alignItems: 'center',
-  padding: '10px 12px',
-  borderRadius: 10,
-  boxShadow: '0 8px 20px rgba(2,6,23,0.6)',
-  color: '#fff',
-  fontSize: 13,
-  minWidth: 120
-}
-
-const toastError = {
-  background: '#000000',
-  border: '1px solid rgba(255,255,255,0.06)'
-}
-const toastSuccess = {
-  background: '#000000',
-  border: '1px solid rgba(255,255,255,0.06)'
-}
-const toastInfo = {
-  background: '#000000',
-  border: '1px solid rgba(255,255,255,0.06)'
-}
-
-const toastCloseBtn = {
-  marginLeft: 8,
-  background: 'transparent',
-  border: 'none',
-  color: 'rgba(255,255,255,0.7)',
-  cursor: 'pointer',
-  fontSize: 14,
-  lineHeight: 1
+/* Styles (JS objects) - reduced width and zoom-resilient layout; neutral palette */
+const styles = {
+  overlay: {
+    position: 'fixed',
+    inset: 0,
+    display: 'block', // use block + scrolling container for zoom resilience
+    padding: 20,
+    background: 'linear-gradient(180deg, rgba(2,6,23,0.22), rgba(2,6,23,0.32))',
+    backdropFilter: 'blur(6px)',
+    overflowY: 'auto', // allow page scroll when zoomed
+    WebkitOverflowScrolling: 'touch',
+    minHeight: '100vh',
+    zIndex: 9999
+  },
+
+  // modal: reduced width (not too wide), centered with margin auto, allows internal scroll
+  modal: {
+    width: '100%',
+    maxWidth: 460, // reduced width per request
+    margin: '40px auto', // vertical margin so modal isn't glued to top when zoomed
+    borderRadius: 14,
+    background: 'linear-gradient(180deg, rgba(15,19,24,0.85), rgba(10,12,16,0.85))', // translucent neutral
+    border: '1px solid rgba(99,102,106,0.12)', // visible neutral border
+    boxShadow: '0 18px 48px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02)',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: 'calc(100vh - 80px)', // keep inside viewport
+  },
+
+  modalInner: {
+    padding: 18,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+    overflowY: 'auto'
+  },
+
+  header: {
+    paddingBottom: 6,
+    borderBottom: '1px solid rgba(148,163,184,0.04)'
+  },
+
+  brandRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12
+  },
+
+  logo: {
+    width: 44,
+    height: 44,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+
+  logoCircle: {
+    width: 36,
+    height: 36,
+    borderRadius: 999,
+    background: 'linear-gradient(135deg,#2f3438,#11151a)',
+    boxShadow: '0 4px 12px rgba(2,6,23,0.6)'
+  },
+
+  title: {
+    margin: 0,
+    fontSize: 18,
+    fontWeight: 600,
+    color: '#e6e6e6'
+  },
+
+  subtitle: {
+    fontSize: 13,
+    color: 'rgba(230,230,230,0.72)',
+    marginTop: 4
+  },
+
+  oauthSection: {
+    marginTop: 8,
+    display: 'flex',
+    gap: 8
+  },
+
+  oauthButton: {
+    flex: 1,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '10px 12px',
+    borderRadius: 10,
+    border: '1px solid rgba(148,163,184,0.08)',
+    fontSize: 14,
+    cursor: 'pointer',
+    userSelect: 'none',
+    gap: 8,
+    minHeight: 40,
+    background: 'transparent',
+    color: '#fff'
+  },
+
+  oauthGoogle: {
+    background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))'
+  },
+
+  oauthGithub: {
+    background: 'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))'
+  },
+
+  dividerRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 10,
+    marginTop: 12
+  },
+
+  line: {
+    flex: 1,
+    height: 1,
+    background: 'rgba(148,163,184,0.06)'
+  },
+
+  orText: {
+    fontSize: 13,
+    color: 'rgba(230,230,230,0.65)',
+    padding: '0 8px'
+  },
+
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    marginTop: 6
+  },
+
+  label: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6
+  },
+
+  labelText: {
+    fontSize: 13,
+    color: 'rgba(230,230,230,0.68)'
+  },
+
+  input: {
+    width: '100%',
+    padding: '10px 12px',
+    borderRadius: 10,
+    background: 'rgba(255,255,255,0.02)',
+    color: '#e6e6e6',
+    border: '1px solid rgba(148,163,184,0.10)',
+    fontSize: 14,
+    outline: 'none',
+    boxSizing: 'border-box',
+    transition: 'box-shadow 120ms, border-color 120ms'
+  },
+
+  submitButton: {
+    marginTop: 6,
+    width: '100%',
+    padding: '10px 12px',
+    borderRadius: 10,
+    background: 'linear-gradient(180deg,#475569,#94a3b8)',
+    border: 'none',
+    color: '#fff',
+    fontWeight: 600,
+    cursor: 'pointer',
+    fontSize: 15,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44
+  },
+
+  modalFooter: {
+    padding: '12px 18px 18px 18px',
+    borderTop: '1px solid rgba(148,163,184,0.03)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8
+  },
+
+  belowRow: {
+    textAlign: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    gap: 8,
+    alignItems: 'center'
+  },
+
+  muted: {
+    color: 'rgba(230,230,230,0.66)',
+    fontSize: 13
+  },
+
+  link: {
+    color: '#9fb0d9',
+    textDecoration: 'none',
+    fontWeight: 600
+  },
+
+  dividerThin: {
+    height: 1,
+    background: 'rgba(148,163,184,0.04)',
+    marginTop: 6,
+    marginBottom: 6
+  },
+
+  secured: {
+    textAlign: 'center'
+  },
+
+  securedText: {
+    color: 'rgba(230,230,230,0.9)',
+    fontSize: 13,
+    fontWeight: 600
+  },
+
+  /* Toasts: black background */
+  toastContainer: {
+    position: 'fixed',
+    top: 18,
+    right: 18,
+    width: 360,
+    maxWidth: 'calc(100% - 36px)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    zIndex: 60000
+  },
+
+  toastBase: {
+    display: 'flex',
+    gap: 10,
+    alignItems: 'center',
+    padding: '10px 12px',
+    borderRadius: 10,
+    boxShadow: '0 8px 20px rgba(2,6,23,0.6)',
+    color: '#fff',
+    fontSize: 13,
+    minWidth: 120
+  },
+
+  toastError: {
+    background: '#000000',
+    border: '1px solid rgba(255,255,255,0.06)'
+  },
+
+  toastSuccess: {
+    background: '#000000',
+    border: '1px solid rgba(255,255,255,0.06)'
+  },
+
+  toastInfo: {
+    background: '#000000',
+    border: '1px solid rgba(255,255,255,0.06)'
+  },
+
+  toastCloseBtn: {
+    marginLeft: 8,
+    background: 'transparent',
+    border: 'none',
+    color: 'rgba(255,255,255,0.7)',
+    cursor: 'pointer',
+    fontSize: 14,
+    lineHeight: 1
+  }
 }