From e033271cb22bec40839008127642058e8730d88b Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Fri, 14 Aug 2026 14:35:27 +0200
Subject: [PATCH] ADD - introduce advanced phone setup and reset flow

---
 frontend/package.json                         |    1 +
 frontend/src/App.vue                          |   43 +-
 .../AppDevelopmentPreview.contract.test.ts    |    7 +-
 .../PhoneSetupAssistant.contract.test.ts      |   28 +
 .../src/components/PhoneSetupAssistant.vue    | 1763 +++++++++++++++++
 frontend/src/components/PhoneStatusBar.vue    |    6 +-
 frontend/src/stores/phone.ts                  |  192 +-
 frontend/src/utils/preferences.test.ts        |   29 +
 frontend/src/utils/preferences.ts             |   19 +
 .../views/apps/SettingsApp.contract.test.ts   |    8 +
 frontend/src/views/apps/SettingsApp.vue       |  480 ++++-
 frontend/testserver/index.cjs                 |   14 +-
 sky_phone/config/locales/en.lua               |   70 +-
 13 files changed, 2606 insertions(+), 54 deletions(-)
 create mode 100644 frontend/src/components/PhoneSetupAssistant.contract.test.ts
 create mode 100644 frontend/src/components/PhoneSetupAssistant.vue

diff --git a/frontend/package.json b/frontend/package.json
index 566a5a6..e97147b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "concurrently -k -n FRONTEND,BACKEND -c cyan,green \"vite --port 5174 --strictPort\" \"node testserver/index.cjs 3002\"",
+    "dev:dev-branch": "concurrently -k -n DEV-UI,DEV-DATA -c blue,magenta \"vite --port 5175 --strictPort\" \"node testserver/index.cjs 3003\"",
     "build": "pnpm typecheck && pnpm build-only",
     "build-only": "vite build && node build.cjs",
     "preview": "vite preview",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 348d9f1..830a8ff 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -16,6 +16,7 @@ import PhoneMediaCapture from '@/components/PhoneMediaCapture.vue'
 import PhoneMemoRecorder from '@/components/PhoneMemoRecorder.vue'
 import PhoneLockScreen from '@/components/PhoneLockScreen.vue'
 import PhonePasscode from '@/components/PhonePasscode.vue'
+import PhoneSetupAssistant from '@/components/PhoneSetupAssistant.vue'
 import PhoneNotifications from '@/components/PhoneNotifications.vue'
 import NotificationPhonePreview from '@/components/NotificationPhonePreview.vue'
 import PhoneStatusBar from '@/components/PhoneStatusBar.vue'
@@ -293,11 +294,19 @@ const passcodeError = ref('')
 const passcodeResetKey = ref(0)
 const passcodeRetrySeconds = ref(0)
 const passcodeVisible = ref(false)
+const setupPreviewDismissed = ref(false)
 const pendingUnlockRoute = ref<string | null>(null)
 const unlockedServicesLoaded = ref(false)
 const controlCenterOpened = ref(false)
 const activitySuspended = ref(false)
 const simPicker = ref<SimPickerPayload | null>(null)
+const setupRequired = computed(
+  () =>
+    !phone.preferences.settings.setupCompleted ||
+    (isDevelopment &&
+      developmentParameters.has('setupPreview') &&
+      !setupPreviewDismissed.value),
+)
 const systemColorScheme = window.matchMedia('(prefers-color-scheme: dark)')
 const viewportScale = ref(getViewportScale())
 const phoneBaseZoom = computed(
@@ -443,6 +452,16 @@ function loadUnlockedPhoneData(): void {
   })
 }
 
+function completePhoneSetup(): void {
+  setupPreviewDismissed.value = true
+  isLocked.value = false
+  isUnlocking.value = false
+  passcodeVisible.value = false
+  controlCenterOpened.value = false
+  void router.replace('/')
+  loadUnlockedPhoneData()
+}
+
 async function hydrateDevelopmentPhone(): Promise<void> {
   const response = await nuiCall<PhoneOpenPayload>('development:bootstrap')
   if (response.success && response.data) {
@@ -1253,7 +1272,9 @@ watch(
       }
       return
     }
-    isLocked.value = !isDevelopment || developmentLockScreenPreview
+    isLocked.value = setupRequired.value
+      ? false
+      : !isDevelopment || developmentLockScreenPreview
     unlockedServicesLoaded.value = false
     controlCenterOpened.value = false
     weather.start()
@@ -1270,7 +1291,7 @@ watch(
       startPasscodeLock(passcodeRetrySeconds.value)
     }
     phone.setLaunchOrigin(null)
-    if (isLocked.value) void router.replace('/')
+    if (isLocked.value || setupRequired.value) void router.replace('/')
     else loadUnlockedPhoneData()
   },
 )
@@ -1379,31 +1400,33 @@ onBeforeUnmount(() => {
                   v-if="!isLocked"
                   :active-call-return="showActiveCallReturn"
                   :control-center-opened="controlCenterOpened"
-                  lockable
+                  :interactive="!setupRequired"
+                  :lockable="!setupRequired"
                   @active-call="returnToActiveCall"
                   @control-center="toggleControlCenter"
                   @lock="lockPhone"
                 />
-                <SpringboardView v-if="!isDevelopmentRoute" />
+                <SpringboardView v-if="!isDevelopmentRoute && !setupRequired" />
                 <RouterView v-slot="{ Component }">
                   <Transition :name="appTransitionName">
                     <component
                       :is="Component"
-                      v-if="isAppRoute || isDevelopmentRoute"
+                      v-if="!setupRequired && (isAppRoute || isDevelopmentRoute)"
                       :key="
                         isDevelopmentRoute ? String(route.name) : route.path
                       "
                     />
                   </Transition>
                 </RouterView>
-                <PhoneHomeIndicator v-if="!isLocked" />
+                <PhoneHomeIndicator v-if="!isLocked && !setupRequired" />
                 <PhoneControlCenter
+                  v-if="!setupRequired"
                   :opened="controlCenterOpened"
                   @close="controlCenterOpened = false"
                 />
                 <Transition name="lock-screen">
                   <PhoneLockScreen
-                    v-if="isLocked"
+                    v-if="isLocked && !setupRequired"
                     :notifications="notifications.lockScreenNotifications"
                     @camera="unlockCamera"
                     @clear-notifications="notifications.clearLockScreen"
@@ -1414,7 +1437,7 @@ onBeforeUnmount(() => {
                 </Transition>
                 <Transition name="lock-screen">
                   <PhonePasscode
-                    v-if="isLocked && passcodeVisible"
+                    v-if="isLocked && passcodeVisible && !setupRequired"
                     :busy="passcodeBusy"
                     :disabled="passcodeRetrySeconds > 0"
                     :error="passcodeError"
@@ -1432,6 +1455,10 @@ onBeforeUnmount(() => {
                     @complete="submitUnlockPasscode"
                   />
                 </Transition>
+                <PhoneSetupAssistant
+                  v-if="setupRequired"
+                  @complete="completePhoneSetup"
+                />
                 <PhoneNotifications
                   :notification="notifications.current"
                   @close="notifications.dismissCurrent()"
diff --git a/frontend/src/AppDevelopmentPreview.contract.test.ts b/frontend/src/AppDevelopmentPreview.contract.test.ts
index c37a00b..408c3f7 100644
--- a/frontend/src/AppDevelopmentPreview.contract.test.ts
+++ b/frontend/src/AppDevelopmentPreview.contract.test.ts
@@ -10,12 +10,15 @@ describe('browser development preview contract', () => {
       "developmentParameters.has('lockScreenPreview')",
     )
     expect(source).toContain(
-      'isLocked.value = !isDevelopment || developmentLockScreenPreview',
+      ': !isDevelopment || developmentLockScreenPreview',
     )
+    expect(source).toContain("developmentParameters.has('setupPreview')")
   })
 
   it('loads authenticated app data without replacing direct app routes', () => {
-    expect(source).toContain("if (isLocked.value) void router.replace('/')")
+    expect(source).toContain(
+      "if (isLocked.value || setupRequired.value) void router.replace('/')",
+    )
     expect(source).toContain('else loadUnlockedPhoneData()')
   })
 })
diff --git a/frontend/src/components/PhoneSetupAssistant.contract.test.ts b/frontend/src/components/PhoneSetupAssistant.contract.test.ts
new file mode 100644
index 0000000..98054a9
--- /dev/null
+++ b/frontend/src/components/PhoneSetupAssistant.contract.test.ts
@@ -0,0 +1,28 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const source = readFileSync(
+  new URL('./PhoneSetupAssistant.vue', import.meta.url),
+  'utf8',
+)
+
+describe('PhoneSetupAssistant contract', () => {
+  it('uses first-party controls and exposes the complete setup journey', () => {
+    expect(source).not.toContain("from 'konsta/vue'")
+    expect(source).toContain('PhonePasscode')
+    expect(source).toContain("step === 1")
+    expect(source).toContain("step === 8")
+    expect(source).toContain("['performance', 'ultimate']")
+    expect(source).toContain('WALLPAPER_IDS')
+    expect(source).toContain('setAllAppNotifications')
+    expect(source).toContain('appStore.claimApp')
+    expect(source).toContain('phone.completeSetup()')
+  })
+
+  it('persists progress and supports resuming or moving backward', () => {
+    expect(source).toContain('phone.preferences.settings.setupStep')
+    expect(source).toContain('phone.setSetupStep(step.value)')
+    expect(source).toContain('@click="moveTo(step - 1)"')
+  })
+})
diff --git a/frontend/src/components/PhoneSetupAssistant.vue b/frontend/src/components/PhoneSetupAssistant.vue
new file mode 100644
index 0000000..26d22b8
--- /dev/null
+++ b/frontend/src/components/PhoneSetupAssistant.vue
@@ -0,0 +1,1763 @@
+<script setup lang="ts">
+import {
+  BellRing,
+  Check,
+  ChevronLeft,
+  Cloud,
+  Gauge,
+  LockKeyhole,
+  Palette,
+  ShieldCheck,
+  Signal,
+  Sparkles,
+  Wifi,
+} from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+
+import PhonePasscode from '@/components/PhonePasscode.vue'
+import { getPhoneApp, getPhoneAppLabel } from '@/config/apps'
+import { useAccountStore } from '@/stores/account'
+import { useAppStoreStore } from '@/stores/app-store'
+import { usePhoneStore } from '@/stores/phone'
+import type { BuiltinPhoneAppId } from '@/types/apps'
+import { SkyButton, SkyField, SkySpinner } from '@/ui'
+import {
+  filterMailAddressInput,
+  normalizeMailAddress,
+} from '@/utils/mail'
+import {
+  PHONE_SETUP_LAST_STEP,
+  WALLPAPER_IDS,
+  type AppearanceMode,
+  type GraphicsMode,
+  type WallpaperId,
+} from '@/utils/preferences'
+
+const emit = defineEmits<{ complete: [] }>()
+
+const phone = usePhoneStore()
+const account = useAccountStore()
+const appStore = useAppStoreStore()
+const step = ref(
+  Math.min(PHONE_SETUP_LAST_STEP, phone.preferences.settings.setupStep),
+)
+const direction = ref<'back' | 'forward'>('forward')
+const accountMode = ref<'login' | 'register'>('login')
+const email = ref('')
+const password = ref('')
+const passwordConfirm = ref('')
+const accountBusy = ref(false)
+const accountError = ref('')
+const passcodeStage = ref<'create' | 'confirm' | null>(null)
+const passcodeFirst = ref('')
+const passcodeResetKey = ref(0)
+const passcodeError = ref('')
+const passcodeLength = ref<4 | 6>(phone.security.length === 4 ? 4 : 6)
+const notificationsEnabled = ref(true)
+const notificationSounds = ref(true)
+const selectedApps = ref<BuiltinPhoneAppId[]>(['banking', 'garage', 'skyride'])
+
+const setupApps = (
+  ['banking', 'garage', 'skyride', 'citymarkt', 'picstagram', 'snake'] as const
+).flatMap((id) => {
+  const app = getPhoneApp(id)
+  return app ? [app] : []
+})
+const wallpaperChoices = WALLPAPER_IDS
+const progress = computed(() => `${((step.value + 1) / 10) * 100}%`)
+const displayName = computed(() => {
+  const name = [phone.player.firstName, phone.player.lastName]
+    .map((part) => part.trim())
+    .filter(Boolean)
+    .join(' ')
+  return name || phone.t('Setup.ownerFallback')
+})
+const normalizedAccountEmail = computed(() => normalizeMailAddress(email.value))
+const accountInitial = computed(() =>
+  (email.value.trim()[0] ?? displayName.value[0] ?? 'S').toUpperCase(),
+)
+const passwordStrength = computed(() => {
+  const value = password.value
+  if (!value) return 0
+  return [
+    value.length >= 6,
+    value.length >= 10,
+    /[a-z]/i.test(value) && /\d/.test(value),
+    /[^a-z0-9]/i.test(value),
+  ].filter(Boolean).length
+})
+const currentWallpaperStyle = computed(() => ({
+  '--setup-wallpaper': `var(--phone-wallpaper-${phone.preferences.settings.wallpaper})`,
+}))
+
+function moveTo(nextStep: number): void {
+  direction.value = nextStep < step.value ? 'back' : 'forward'
+  step.value = Math.min(PHONE_SETUP_LAST_STEP, Math.max(0, nextStep))
+  phone.setSetupStep(step.value)
+}
+
+function continueSetup(): void {
+  if (step.value === 7) {
+    phone.setAllAppNotifications(
+      notificationsEnabled.value,
+      notificationSounds.value,
+    )
+  }
+  if (step.value === 8) {
+    for (const appId of selectedApps.value) appStore.claimApp(appId)
+  }
+  moveTo(step.value + 1)
+}
+
+function chooseAppearance(mode: AppearanceMode): void {
+  phone.setPreference('appearanceMode', mode)
+}
+
+function choosePerformance(mode: GraphicsMode): void {
+  phone.setPreference('graphicsMode', mode)
+}
+
+function chooseWallpaper(wallpaper: Exclude<WallpaperId, 'custom'>): void {
+  phone.setWallpaper(wallpaper)
+}
+
+function toggleApp(appId: BuiltinPhoneAppId): void {
+  selectedApps.value = selectedApps.value.includes(appId)
+    ? selectedApps.value.filter((id) => id !== appId)
+    : [...selectedApps.value, appId]
+}
+
+async function submitAccount(): Promise<void> {
+  if (!normalizedAccountEmail.value || password.value.length < 6) {
+    accountError.value = phone.t('Setup.cloud.invalid')
+    return
+  }
+  if (
+    accountMode.value === 'register' &&
+    password.value !== passwordConfirm.value
+  ) {
+    accountError.value = phone.t('Setup.cloud.passwordMismatch')
+    return
+  }
+  accountBusy.value = true
+  accountError.value = ''
+  const response =
+    accountMode.value === 'login'
+      ? await account.login(normalizedAccountEmail.value, password.value)
+      : await account.register(normalizedAccountEmail.value, password.value)
+  accountBusy.value = false
+  if (!response.success) {
+    accountError.value = phone.t(
+      `Setup.cloud.errors.${response.error ?? 'request_failed'}`,
+    )
+    return
+  }
+  continueSetup()
+}
+
+function selectAccountMode(mode: 'login' | 'register'): void {
+  accountMode.value = mode
+  password.value = ''
+  passwordConfirm.value = ''
+  accountError.value = ''
+}
+
+function updateAccountName(event: Event): void {
+  const input = event.target as HTMLInputElement
+  const localPart = filterMailAddressInput(input.value)
+    .split('@')[0]
+    .slice(0, 32)
+    .toLocaleLowerCase('en-US')
+  input.value = localPart
+  email.value = localPart
+}
+
+function submitPasscode(passcode: string): void {
+  if (passcodeStage.value === 'create') {
+    passcodeFirst.value = passcode
+    passcodeStage.value = 'confirm'
+    passcodeResetKey.value += 1
+    return
+  }
+  if (passcode !== passcodeFirst.value) {
+    passcodeError.value = phone.t('Setup.security.mismatch')
+    passcodeStage.value = 'create'
+    passcodeFirst.value = ''
+    passcodeResetKey.value += 1
+    return
+  }
+  void phone.setPasscode(passcode).then((response) => {
+    if (!response.success) {
+      passcodeError.value = phone.t('Setup.security.failed')
+      passcodeStage.value = 'create'
+      passcodeResetKey.value += 1
+      return
+    }
+    passcodeStage.value = null
+    continueSetup()
+  })
+}
+
+function choosePasscodeLength(length: 4 | 6): void {
+  passcodeLength.value = length
+  passcodeFirst.value = ''
+  passcodeError.value = ''
+  passcodeResetKey.value += 1
+}
+
+function finish(): void {
+  phone.completeSetup()
+  emit('complete')
+}
+</script>
+
+<template>
+  <section
+    class="setup-assistant"
+    :class="`setup-assistant--step-${step}`"
+    :style="currentWallpaperStyle"
+    :aria-label="phone.t('Setup.title')"
+  >
+    <div class="setup-assistant__aurora" aria-hidden="true"></div>
+    <header v-if="step > 0 && step < 9" class="setup-assistant__chrome">
+      <button
+        type="button"
+        class="setup-assistant__back"
+        :aria-label="phone.t('Common.back')"
+        @click="moveTo(step - 1)"
+      >
+        <ChevronLeft :size="23" :stroke-width="2.2" />
+      </button>
+      <div class="setup-assistant__progress" aria-hidden="true">
+        <span :style="{ width: progress }"></span>
+      </div>
+      <span class="setup-assistant__counter">{{ step + 1 }}/10</span>
+    </header>
+
+    <Transition
+      :name="direction === 'forward' ? 'setup-forward' : 'setup-back'"
+      mode="out-in"
+    >
+      <main :key="step" class="setup-assistant__page">
+        <template v-if="step === 0">
+          <div class="setup-welcome__hero" aria-hidden="true">
+            <div class="setup-welcome__halo setup-welcome__halo--outer"></div>
+            <div class="setup-welcome__halo setup-welcome__halo--inner"></div>
+            <div class="setup-welcome__greetings">
+              <span>{{ phone.t('Setup.welcome.hello') }}</span>
+              <span>{{ phone.t('Setup.welcome.hallo') }}</span>
+              <span>{{ phone.t('Setup.welcome.bonjour') }}</span>
+            </div>
+            <div class="setup-welcome__spark setup-welcome__spark--one"></div>
+            <div class="setup-welcome__spark setup-welcome__spark--two"></div>
+            <div class="setup-welcome__spark setup-welcome__spark--three"></div>
+          </div>
+          <div class="setup-welcome__copy">
+            <p class="setup-welcome__eyebrow">
+              {{ phone.t('Setup.welcome.eyebrow') }}
+            </p>
+            <h1>{{ phone.t('Setup.welcome.title') }}</h1>
+            <p class="setup-assistant__lead">
+              {{ phone.t('Setup.welcome.body', { name: displayName }) }}
+            </p>
+          </div>
+          <footer class="setup-welcome__footer">
+            <div class="setup-welcome__privacy">
+              <span><ShieldCheck :size="14" />{{ phone.t('Setup.welcome.private') }}</span>
+              <i aria-hidden="true"></i>
+              <span><Sparkles :size="14" />{{ phone.t('Setup.welcome.personal') }}</span>
+            </div>
+            <SkyButton class="setup-assistant__primary" @click="continueSetup">
+              {{ phone.t('Setup.getStarted') }}
+            </SkyButton>
+            <div class="setup-welcome__home-indicator" aria-hidden="true"></div>
+          </footer>
+        </template>
+
+        <template v-else-if="step === 1">
+          <div class="setup-assistant__icon setup-assistant__icon--signal">
+            <Signal :size="44" />
+          </div>
+          <p class="setup-assistant__eyebrow">
+            {{ phone.t('Setup.connection.eyebrow') }}
+          </p>
+          <h1>{{ phone.t('Setup.connection.title') }}</h1>
+          <p class="setup-assistant__lead">
+            {{ phone.t('Setup.connection.body') }}
+          </p>
+          <div class="setup-connectivity-card">
+            <div
+              class="setup-connectivity-card__waves"
+              aria-hidden="true"
+            ></div>
+            <span class="setup-connectivity-card__label">Sky SIM</span>
+            <strong>{{
+              phone.device?.sim?.number ?? phone.t('Setup.connection.noSim')
+            }}</strong>
+            <span>{{
+              phone.device?.sim
+                ? phone.t('Setup.connection.ready')
+                : phone.t('Setup.connection.offline')
+            }}</span>
+            <Wifi :size="25" />
+          </div>
+          <div class="setup-assistant__notice">
+            <ShieldCheck :size="19" />
+            <p>{{ phone.t('Setup.connection.preserved') }}</p>
+          </div>
+          <SkyButton class="setup-assistant__primary" @click="continueSetup">
+            {{ phone.t('Common.continue') }}
+          </SkyButton>
+        </template>
+
+        <template v-else-if="step === 2">
+          <div class="setup-cloud-hero" aria-hidden="true">
+            <span class="setup-cloud-hero__orbit"></span>
+            <span class="setup-cloud-hero__glow"></span>
+            <Cloud :size="45" :stroke-width="1.45" />
+            <i></i><i></i><i></i>
+          </div>
+          <p class="setup-assistant__eyebrow">
+            {{ phone.t('Setup.cloud.eyebrow') }}
+          </p>
+          <h1>{{ phone.t(accountMode === 'login' ? 'Setup.cloud.signInTitle' : 'Setup.cloud.createTitle') }}</h1>
+          <p class="setup-assistant__lead">
+            {{ phone.t(accountMode === 'login' ? 'Setup.cloud.signInBody' : 'Setup.cloud.createBody') }}
+          </p>
+          <div v-if="!account.email" class="setup-cloud-form">
+            <div class="setup-assistant__selector">
+              <button
+                :class="{ active: accountMode === 'login' }"
+                @click="selectAccountMode('login')"
+              >
+                {{ phone.t('Setup.cloud.signIn') }}
+              </button>
+              <button
+                :class="{ active: accountMode === 'register' }"
+                @click="selectAccountMode('register')"
+              >
+                {{ phone.t('Setup.cloud.create') }}
+              </button>
+            </div>
+
+            <div class="setup-cloud-identity">
+              <span>{{ accountInitial }}</span>
+              <div>
+                <small>{{ phone.t('Setup.cloud.accountPreview') }}</small>
+                <strong>{{ email || phone.t('Setup.cloud.addressPlaceholder') }}<em>@ifruit.com</em></strong>
+              </div>
+              <Check v-if="normalizedAccountEmail" :size="17" />
+            </div>
+
+            <div class="setup-cloud-fields">
+              <SkyField
+                id="setup-cloud-name"
+                :model-value="email"
+                :label="phone.t('Setup.cloud.accountName')"
+                :placeholder="phone.t('Setup.cloud.addressPlaceholder')"
+                autocomplete="username"
+                autocapitalize="none"
+                autocorrect="off"
+                :spellcheck="false"
+                @input="updateAccountName"
+              >
+                <template #trailing>
+                  <span class="setup-cloud-suffix">@ifruit.com</span>
+                </template>
+              </SkyField>
+              <SkyField
+                id="setup-cloud-password"
+                v-model="password"
+                type="password"
+                :label="phone.t('Setup.cloud.password')"
+                :autocomplete="accountMode === 'login' ? 'current-password' : 'new-password'"
+              />
+              <SkyField
+                v-if="accountMode === 'register'"
+                id="setup-cloud-password-confirm"
+                v-model="passwordConfirm"
+                type="password"
+                :label="phone.t('Setup.cloud.confirmPassword')"
+                autocomplete="new-password"
+              />
+            </div>
+
+            <div v-if="accountMode === 'register'" class="setup-cloud-strength">
+              <div>
+                <span
+                  v-for="level in 4"
+                  :key="level"
+                  :class="{ active: level <= passwordStrength }"
+                ></span>
+              </div>
+              <small>{{ phone.t(`Setup.cloud.strength${passwordStrength}`) }}</small>
+            </div>
+            <p v-if="accountError" class="setup-assistant__error" role="alert">
+              {{ accountError }}
+            </p>
+            <SkyButton
+              class="setup-assistant__primary"
+              :disabled="accountBusy"
+              @click="submitAccount"
+            >
+              <SkySpinner v-if="accountBusy" />
+              <span v-else>{{ phone.t(accountMode === 'login' ? 'Setup.cloud.signInAction' : 'Setup.cloud.createAction') }}</span>
+            </SkyButton>
+            <div class="setup-cloud-security-note">
+              <LockKeyhole :size="13" />
+              <span>{{ phone.t('Setup.cloud.securityNote') }}</span>
+            </div>
+            <button
+              type="button"
+              class="setup-assistant__later"
+              @click="continueSetup"
+            >
+              {{ phone.t('Setup.setUpLater') }}
+            </button>
+          </div>
+          <div v-else class="setup-cloud-connected">
+            <Check :size="31" />
+            <strong>{{ phone.t('Setup.cloud.connected') }}</strong>
+            <span>{{ account.email }}</span>
+            <SkyButton
+              class="setup-assistant__primary"
+              @click="continueSetup"
+              >{{ phone.t('Common.continue') }}</SkyButton
+            >
+          </div>
+        </template>
+
+        <template v-else-if="step === 3">
+          <div class="setup-assistant__icon setup-assistant__icon--security">
+            <LockKeyhole :size="43" />
+          </div>
+          <p class="setup-assistant__eyebrow">
+            {{ phone.t('Setup.security.eyebrow') }}
+          </p>
+          <h1>{{ phone.t('Setup.security.title') }}</h1>
+          <p class="setup-assistant__lead">
+            {{ phone.t('Setup.security.body') }}
+          </p>
+          <div class="setup-security-visual" aria-hidden="true">
+            <div>
+              <span v-for="dot in passcodeLength" :key="dot"></span>
+            </div>
+            <ShieldCheck :size="40" />
+          </div>
+          <div
+            class="setup-passcode-length"
+            role="group"
+            :aria-label="phone.t('Setup.security.lengthTitle')"
+          >
+            <button
+              v-for="length in [4, 6] as const"
+              :key="length"
+              type="button"
+              :class="{ selected: passcodeLength === length }"
+              @click="choosePasscodeLength(length)"
+            >
+              <span>
+                <b>{{ length }}</b>
+                <small>{{ phone.t(`Setup.security.${length === 4 ? 'fourDigit' : 'sixDigit'}`) }}</small>
+              </span>
+              <Check v-if="passcodeLength === length" :size="16" :stroke-width="3" />
+            </button>
+          </div>
+          <div class="setup-assistant__notice">
+            <ShieldCheck :size="19" />
+            <p>{{ phone.t('Setup.security.local') }}</p>
+          </div>
+          <SkyButton
+            class="setup-assistant__primary"
+            @click="passcodeStage = 'create'"
+            >{{ phone.t('Setup.security.createSelected', { count: String(passcodeLength) }) }}</SkyButton
+          >
+          <button
+            type="button"
+            class="setup-assistant__later"
+            @click="continueSetup"
+          >
+            {{ phone.t('Setup.setUpLater') }}
+          </button>
+        </template>
+
+        <template v-else-if="step === 4">
+          <div class="setup-assistant__icon setup-assistant__icon--appearance">
+            <Palette :size="43" />
+          </div>
+          <p class="setup-assistant__eyebrow">
+            {{ phone.t('Setup.appearance.eyebrow') }}
+          </p>
+          <h1>{{ phone.t('Setup.appearance.title') }}</h1>
+          <p class="setup-assistant__lead">
+            {{ phone.t('Setup.appearance.body') }}
+          </p>
+          <div class="setup-choice-grid setup-choice-grid--appearance">
+            <button
+              v-for="mode in ['automatic', 'light', 'dark'] as AppearanceMode[]"
+              :key="mode"
+              :class="{
+                selected: phone.preferences.settings.appearanceMode === mode,
+              }"
+              @click="chooseAppearance(mode)"
+            >
+              <span
+                class="setup-appearance-preview"
+                :class="`setup-appearance-preview--${mode}`"
+                ><i></i><i></i><i></i
+              ></span>
+              <strong>{{ phone.t(`Apps.settings.${mode}`) }}</strong>
+              <Check
+                v-if="phone.preferences.settings.appearanceMode === mode"
+                :size="18"
+              />
+            </button>
+          </div>
+          <SkyButton class="setup-assistant__primary" @click="continueSetup">{{
+            phone.t('Common.continue')
+          }}</SkyButton>
+        </template>
+
+        <template v-else-if="step === 5">
+          <div class="setup-assistant__icon setup-assistant__icon--performance">
+            <Gauge :size="44" />
+          </div>
+          <p class="setup-assistant__eyebrow">
+            {{ phone.t('Setup.performance.eyebrow') }}
+          </p>
+          <h1>{{ phone.t('Setup.performance.title') }}</h1>
+          <p class="setup-assistant__lead">
+            {{ phone.t('Setup.performance.body') }}
+          </p>
+          <div class="setup-mode-stack">
+            <button
+              v-for="mode in ['performance', 'ultimate'] as GraphicsMode[]"
+              :key="mode"
+              :class="{
+                selected: phone.preferences.settings.graphicsMode === mode,
+              }"
+              @click="choosePerformance(mode)"
+            >
+              <span
+                class="setup-mode-stack__orb"
+                :class="`setup-mode-stack__orb--${mode}`"
+              ></span>
+              <span
+                ><strong>{{ phone.t(`Apps.settings.${mode}Mode`) }}</strong
+                ><small>{{ phone.t(`Setup.performance.${mode}`) }}</small></span
+              >
+              <span class="setup-mode-stack__check"
+                ><Check
+                  v-if="phone.preferences.settings.graphicsMode === mode"
+                  :size="17"
+              /></span>
+            </button>
+          </div>
+          <div class="setup-assistant__notice">
+            <Gauge :size="19" />
+            <p>{{ phone.t('Setup.performance.changeLater') }}</p>
+          </div>
+          <SkyButton class="setup-assistant__primary" @click="continueSetup">{{
+            phone.t('Common.continue')
+          }}</SkyButton>
+        </template>
+
+        <template v-else-if="step === 6">
+          <div class="setup-assistant__icon setup-assistant__icon--wallpaper">
+            <Sparkles :size="43" />
+          </div>
+          <p class="setup-assistant__eyebrow">
+            {{ phone.t('Setup.wallpaper.eyebrow') }}
+          </p>
+          <h1>{{ phone.t('Setup.wallpaper.title') }}</h1>
+          <p class="setup-assistant__lead">
+            {{ phone.t('Setup.wallpaper.body') }}
+          </p>
+          <div class="setup-wallpapers">
+            <button
+              v-for="wallpaper in wallpaperChoices"
+              :key="wallpaper"
+              :class="[
+                `wallpaper--${wallpaper}`,
+                {
+                  selected: phone.preferences.settings.wallpaper === wallpaper,
+                },
+              ]"
+              :aria-label="wallpaper"
+              @click="chooseWallpaper(wallpaper)"
+            >
+              <Check
+                v-if="phone.preferences.settings.wallpaper === wallpaper"
+                :size="17"
+              />
+            </button>
+          </div>
+          <SkyButton class="setup-assistant__primary" @click="continueSetup">{{
+            phone.t('Common.continue')
+          }}</SkyButton>
+        </template>
+
+        <template v-else-if="step === 7">
+          <div
+            class="setup-assistant__icon setup-assistant__icon--notifications"
+          >
+            <BellRing :size="43" />
+          </div>
+          <p class="setup-assistant__eyebrow">
+            {{ phone.t('Setup.notifications.eyebrow') }}
+          </p>
+          <h1>{{ phone.t('Setup.notifications.title') }}</h1>
+          <p class="setup-assistant__lead">
+            {{ phone.t('Setup.notifications.body') }}
+          </p>
+          <div class="setup-toggle-card">
+            <button @click="notificationsEnabled = !notificationsEnabled">
+              <span
+                ><strong>{{ phone.t('Setup.notifications.allow') }}</strong
+                ><small>{{
+                  phone.t('Setup.notifications.allowBody')
+                }}</small></span
+              ><i :class="{ on: notificationsEnabled }"><b></b></i>
+            </button>
+            <button
+              :disabled="!notificationsEnabled"
+              @click="notificationSounds = !notificationSounds"
+            >
+              <span
+                ><strong>{{ phone.t('Setup.notifications.sounds') }}</strong
+                ><small>{{
+                  phone.t('Setup.notifications.soundsBody')
+                }}</small></span
+              ><i :class="{ on: notificationsEnabled && notificationSounds }"
+                ><b></b
+              ></i>
+            </button>
+          </div>
+          <SkyButton class="setup-assistant__primary" @click="continueSetup">{{
+            phone.t('Common.continue')
+          }}</SkyButton>
+        </template>
+
+        <template v-else-if="step === 8">
+          <div class="setup-assistant__icon setup-assistant__icon--apps">
+            <Sparkles :size="43" />
+          </div>
+          <p class="setup-assistant__eyebrow">
+            {{ phone.t('Setup.apps.eyebrow') }}
+          </p>
+          <h1>{{ phone.t('Setup.apps.title') }}</h1>
+          <p class="setup-assistant__lead">{{ phone.t('Setup.apps.body') }}</p>
+          <div class="setup-app-list">
+            <button
+              v-for="app in setupApps"
+              :key="app.id"
+              :class="{
+                selected: selectedApps.includes(app.id as BuiltinPhoneAppId),
+              }"
+              @click="toggleApp(app.id as BuiltinPhoneAppId)"
+            >
+              <img :src="app.iconImage" alt="" />
+              <span
+                ><strong>{{ getPhoneAppLabel(app, phone.t) }}</strong
+                ><small>{{
+                  phone.t(`Setup.apps.descriptions.${app.id}`)
+                }}</small></span
+              >
+              <i
+                ><Check
+                  v-if="selectedApps.includes(app.id as BuiltinPhoneAppId)"
+                  :size="16"
+              /></i>
+            </button>
+          </div>
+          <SkyButton class="setup-assistant__primary" @click="continueSetup">{{
+            phone.t('Setup.apps.install', {
+              count: String(selectedApps.length),
+            })
+          }}</SkyButton>
+        </template>
+
+        <template v-else>
+          <div class="setup-ready__halo" aria-hidden="true">
+            <Check :size="66" />
+          </div>
+          <p class="setup-assistant__eyebrow">
+            {{ phone.t('Setup.ready.eyebrow') }}
+          </p>
+          <h1>
+            {{
+              phone.t('Setup.ready.title', {
+                name: phone.player.firstName || displayName,
+              })
+            }}
+          </h1>
+          <p class="setup-assistant__lead">{{ phone.t('Setup.ready.body') }}</p>
+          <div class="setup-ready__summary">
+            <span
+              ><Cloud :size="18" /><b>{{
+                account.email || phone.t('Setup.ready.localOnly')
+              }}</b></span
+            >
+            <span
+              ><Gauge :size="18" /><b>{{
+                phone.t(
+                  `Apps.settings.${phone.preferences.settings.graphicsMode}Mode`,
+                )
+              }}</b></span
+            >
+            <span
+              ><Palette :size="18" /><b>{{
+                phone.t(
+                  `Apps.settings.${phone.preferences.settings.appearanceMode}`,
+                )
+              }}</b></span
+            >
+          </div>
+          <SkyButton class="setup-assistant__primary" @click="finish">{{
+            phone.t('Setup.ready.enter')
+          }}</SkyButton>
+          <button
+            type="button"
+            class="setup-assistant__later"
+            @click="moveTo(0)"
+          >
+            {{ phone.t('Setup.ready.review') }}
+          </button>
+        </template>
+      </main>
+    </Transition>
+
+    <PhonePasscode
+      v-if="passcodeStage"
+      :length="passcodeLength"
+      :reset-key="passcodeResetKey"
+      :error="passcodeError"
+      :title="
+        phone.t(
+          passcodeStage === 'create'
+            ? 'Setup.security.enter'
+            : 'Setup.security.confirm',
+        )
+      "
+      :subtitle="phone.t(passcodeLength === 4 ? 'Setup.security.fourDigitHint' : 'Setup.security.sixDigitHint')"
+      @cancel="passcodeStage = null"
+      @complete="submitPasscode"
+    />
+  </section>
+</template>
+
+<style scoped>
+.setup-assistant {
+  position: absolute;
+  inset: 0;
+  z-index: 90;
+  overflow: clip;
+  color: #f8fbff;
+  background: #05070d;
+  font-family: var(--sky-font-family);
+  user-select: none;
+}
+.setup-assistant__aurora {
+  position: absolute;
+  inset: -28%;
+  background:
+    radial-gradient(circle at 30% 20%, rgb(40 116 255/32%), transparent 28%),
+    radial-gradient(circle at 75% 65%, rgb(161 67 255/20%), transparent 27%),
+    radial-gradient(circle at 40% 92%, rgb(0 214 184/13%), transparent 25%);
+  filter: blur(28px);
+  animation: setup-aurora 12s ease-in-out infinite alternate;
+}
+.setup-assistant__chrome {
+  position: absolute;
+  z-index: 2;
+  top: 54px;
+  left: 18px;
+  right: 18px;
+  display: grid;
+  grid-template-columns: 34px 1fr 34px;
+  align-items: center;
+  gap: 12px;
+}
+.setup-assistant__back {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  place-items: center;
+  border: 1px solid rgb(255 255 255/10%);
+  border-radius: 50%;
+  color: white;
+  background: rgb(255 255 255/8%);
+  backdrop-filter: blur(18px);
+}
+.setup-assistant__progress {
+  height: 4px;
+  overflow: hidden;
+  border-radius: 99px;
+  background: rgb(255 255 255/12%);
+}
+.setup-assistant__progress span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #58aaff, #7b76ff);
+  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.setup-assistant__counter {
+  color: rgb(255 255 255/48%);
+  font-size: 11px;
+  font-weight: 650;
+  text-align: right;
+}
+.setup-assistant__page {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 70px 27px 25px;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: auto;
+  scrollbar-width: none;
+  text-align: center;
+}
+.setup-assistant:not(.setup-assistant--step-0):not(.setup-assistant--step-9)
+  .setup-assistant__page {
+  padding-top: 103px;
+}
+.setup-assistant__page::-webkit-scrollbar {
+  display: none;
+}
+.setup-assistant__page h1 {
+  max-width: 340px;
+  margin: 10px 0 9px;
+  font-size: 34px;
+  font-weight: 730;
+  line-height: 1.02;
+  letter-spacing: -0.045em;
+}
+.setup-assistant__lead {
+  max-width: 325px;
+  margin: 0;
+  color: rgb(230 237 250/66%);
+  font-size: 14px;
+  line-height: 1.45;
+}
+.setup-assistant__eyebrow {
+  margin: 13px 0 0;
+  color: #65aaff;
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+.setup-assistant__icon {
+  display: grid;
+  width: 80px;
+  height: 80px;
+  flex: none;
+  place-items: center;
+  border: 1px solid rgb(255 255 255/18%);
+  border-radius: 25px;
+  box-shadow:
+    inset 0 1px rgb(255 255 255/22%),
+    0 22px 50px rgb(0 0 0/28%);
+  background: linear-gradient(
+    145deg,
+    rgb(255 255 255/18%),
+    rgb(255 255 255/5%)
+  );
+  backdrop-filter: blur(18px);
+}
+.setup-assistant__icon--signal {
+  color: #6fafff;
+}
+.setup-assistant__icon--cloud {
+  color: #87bfff;
+}
+.setup-assistant__icon--security {
+  color: #76e3aa;
+}
+.setup-assistant__icon--appearance {
+  color: #c396ff;
+}
+.setup-assistant__icon--performance {
+  color: #ffba61;
+}
+.setup-assistant__icon--wallpaper {
+  color: #ef8cff;
+}
+.setup-assistant__icon--notifications {
+  color: #ff7b72;
+}
+.setup-assistant__icon--apps {
+  color: #79baff;
+}
+.setup-assistant__primary {
+  width: 100%;
+  min-height: 48px;
+  margin-top: auto;
+  border-radius: 16px !important;
+  font-weight: 700;
+}
+.setup-assistant__later {
+  padding: 12px;
+  border: 0;
+  color: #6eb0ff;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 650;
+}
+.setup-assistant__notice {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 15px 0;
+  padding: 13px;
+  gap: 10px;
+  align-items: flex-start;
+  border: 1px solid rgb(255 255 255/8%);
+  border-radius: 16px;
+  color: #87b8ff;
+  background: rgb(255 255 255/5%);
+  text-align: left;
+}
+.setup-assistant__notice p {
+  margin: 0;
+  color: rgb(240 245 255/62%);
+  font-size: 12px;
+  line-height: 1.38;
+}
+.setup-assistant__error {
+  margin: 4px 0;
+  color: #ff8f88;
+  font-size: 12px;
+}
+.setup-assistant--step-0 {
+  background:
+    radial-gradient(circle at 50% 24%, rgb(29 91 188 / 26%), transparent 31%),
+    linear-gradient(180deg, #02050b 0%, #050712 58%, #02060c 100%);
+}
+.setup-assistant--step-0 .setup-assistant__aurora {
+  inset: -20%;
+  background:
+    radial-gradient(circle at 21% 42%, rgb(24 106 255 / 22%), transparent 23%),
+    radial-gradient(circle at 83% 36%, rgb(154 70 255 / 16%), transparent 24%),
+    radial-gradient(circle at 50% 80%, rgb(0 211 177 / 10%), transparent 25%);
+  filter: blur(40px);
+}
+.setup-assistant--step-0 .setup-assistant__page {
+  padding: 64px 24px 0;
+  overflow: hidden;
+}
+.setup-welcome__hero {
+  position: relative;
+  display: grid;
+  width: 286px;
+  height: 292px;
+  flex: none;
+  place-items: center;
+  isolation: isolate;
+}
+.setup-welcome__hero::before {
+  position: absolute;
+  z-index: -3;
+  width: 224px;
+  height: 224px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgb(32 111 255 / 24%), rgb(53 49 190 / 8%) 52%, transparent 72%);
+  filter: blur(5px);
+  content: '';
+  animation: setup-welcome-breathe 5s ease-in-out infinite;
+}
+.setup-welcome__halo {
+  position: absolute;
+  border: 1px solid rgb(111 167 255 / 16%);
+  border-radius: 50%;
+  transform: rotateX(66deg) rotateZ(-10deg);
+}
+.setup-welcome__halo--outer {
+  width: 270px;
+  height: 270px;
+  animation: setup-welcome-orbit 13s linear infinite;
+}
+.setup-welcome__halo--inner {
+  width: 210px;
+  height: 210px;
+  border-color: rgb(184 119 255 / 16%);
+  animation: setup-welcome-orbit 9s linear infinite reverse;
+}
+.setup-welcome__greetings {
+  position: relative;
+  width: 100%;
+  height: 96px;
+  filter: drop-shadow(0 14px 28px rgb(15 89 255 / 26%));
+}
+.setup-welcome__greetings span {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  color: #ffffff;
+  font-family: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive;
+  font-size: 64px;
+  font-weight: 500;
+  letter-spacing: -0.06em;
+  opacity: 0;
+  place-items: center;
+  transform: translateY(12px) scale(0.94);
+  animation: setup-welcome-language 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
+}
+.setup-welcome__greetings span:nth-child(2) { animation-delay: 3s; }
+.setup-welcome__greetings span:nth-child(3) { animation-delay: 6s; }
+.setup-welcome__spark {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #b9d8ff;
+  box-shadow: 0 0 14px 4px rgb(78 154 255 / 65%);
+  animation: setup-welcome-spark 3.6s ease-in-out infinite;
+}
+.setup-welcome__spark--one { top: 65px; left: 47px; }
+.setup-welcome__spark--two { right: 48px; bottom: 67px; animation-delay: -1.2s; }
+.setup-welcome__spark--three { top: 91px; right: 71px; animation-delay: -2.4s; }
+.setup-welcome__copy {
+  position: relative;
+  z-index: 1;
+  margin-top: -13px;
+}
+.setup-welcome__copy h1 {
+  margin-top: 8px;
+  font-size: 31px;
+}
+.setup-welcome__eyebrow {
+  margin: 0;
+  color: #67aaff;
+  font-size: 10px;
+  font-weight: 760;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+.setup-welcome__copy .setup-assistant__lead {
+  max-width: 300px;
+  margin-inline: auto;
+}
+.setup-welcome__footer {
+  display: flex;
+  width: calc(100% + 48px);
+  box-sizing: border-box;
+  margin: auto -24px 0;
+  padding: 17px 24px 13px;
+  flex-direction: column;
+  align-items: center;
+  border-top: 1px solid rgb(255 255 255 / 7%);
+  background: linear-gradient(180deg, rgb(7 10 20 / 30%), rgb(4 7 13 / 94%) 28%);
+  backdrop-filter: blur(24px);
+}
+.setup-welcome__privacy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  color: rgb(226 235 250 / 56%);
+  font-size: 9px;
+  font-weight: 600;
+}
+.setup-welcome__privacy span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.setup-welcome__privacy i {
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 28%);
+}
+.setup-welcome__footer .setup-assistant__primary {
+  min-height: 51px;
+  margin-top: 14px;
+  border-radius: 15px !important;
+  box-shadow: 0 12px 30px rgb(0 105 255 / 24%);
+}
+.setup-welcome__home-indicator {
+  width: 112px;
+  height: 4px;
+  margin-top: 12px;
+  border-radius: 99px;
+  background: rgb(255 255 255 / 92%);
+}
+@keyframes setup-welcome-language {
+  0% { opacity: 0; transform: translateY(12px) scale(0.94); filter: blur(5px); }
+  8%, 27% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
+  34%, 100% { opacity: 0; transform: translateY(-10px) scale(1.03); filter: blur(4px); }
+}
+@keyframes setup-welcome-orbit {
+  to { transform: rotateX(66deg) rotateZ(350deg); }
+}
+@keyframes setup-welcome-breathe {
+  0%, 100% { transform: scale(0.92); opacity: 0.65; }
+  50% { transform: scale(1.08); opacity: 1; }
+}
+@keyframes setup-welcome-spark {
+  0%, 100% { transform: scale(0.55); opacity: 0.25; }
+  50% { transform: scale(1); opacity: 0.9; }
+}
+.setup-connectivity-card {
+  position: relative;
+  width: 100%;
+  min-height: 150px;
+  box-sizing: border-box;
+  margin-top: 22px;
+  padding: 20px;
+  overflow: hidden;
+  border: 1px solid rgb(255 255 255/14%);
+  border-radius: 25px;
+  background: linear-gradient(135deg, #18345f, #0a1730 68%);
+  box-shadow: 0 25px 55px rgb(0 0 0/25%);
+  text-align: left;
+}
+.setup-connectivity-card__waves {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  right: -90px;
+  top: -90px;
+  border: 32px solid rgb(104 171 255/8%);
+  border-radius: 50%;
+  box-shadow:
+    0 0 0 28px rgb(104 171 255/6%),
+    0 0 0 58px rgb(104 171 255/4%);
+}
+.setup-connectivity-card__label {
+  display: block;
+  color: #8dc0ff;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+}
+.setup-connectivity-card strong {
+  display: block;
+  margin-top: 28px;
+  font-size: 22px;
+  letter-spacing: -0.03em;
+}
+.setup-connectivity-card > span:last-of-type {
+  color: rgb(255 255 255/55%);
+  font-size: 12px;
+}
+.setup-connectivity-card svg {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+  color: #7fb7ff;
+}
+.setup-cloud-form,
+.setup-cloud-connected {
+  display: flex;
+  width: 100%;
+  margin-top: 19px;
+  gap: 10px;
+  flex-direction: column;
+}
+.setup-assistant--step-2 .setup-assistant__page {
+  padding-right: 24px;
+  padding-bottom: 16px;
+  padding-left: 24px;
+}
+.setup-assistant--step-2 .setup-assistant__page h1 {
+  max-width: 315px;
+  margin: 7px 0 6px;
+  font-size: 29px;
+}
+.setup-assistant--step-2 .setup-assistant__lead {
+  max-width: 310px;
+  font-size: 12px;
+  line-height: 1.35;
+}
+.setup-assistant--step-2 .setup-assistant__eyebrow { margin-top: 8px; }
+.setup-cloud-hero {
+  position: relative;
+  display: grid;
+  width: 70px;
+  height: 70px;
+  flex: none;
+  margin-top: -2px;
+  place-items: center;
+  color: #b8d7ff;
+}
+.setup-cloud-hero__orbit {
+  position: absolute;
+  inset: 0;
+  border: 1px solid rgb(112 174 255 / 26%);
+  border-radius: 50%;
+  box-shadow: inset 0 0 22px rgb(50 131 255 / 12%);
+  animation: setup-cloud-orbit 9s linear infinite;
+}
+.setup-cloud-hero__orbit::before,
+.setup-cloud-hero__orbit::after {
+  position: absolute;
+  inset: 7px -7px;
+  border: 1px solid rgb(130 104 255 / 16%);
+  border-radius: 50%;
+  content: '';
+  transform: rotate(58deg);
+}
+.setup-cloud-hero__orbit::after { transform: rotate(-58deg); }
+.setup-cloud-hero__glow {
+  position: absolute;
+  inset: 13px;
+  border-radius: 50%;
+  background: rgb(38 125 255 / 22%);
+  box-shadow: 0 0 35px 10px rgb(39 115 255 / 22%);
+}
+.setup-cloud-hero svg { position: relative; filter: drop-shadow(0 6px 12px rgb(25 102 255 / 42%)); }
+.setup-cloud-hero i {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: #8ac1ff;
+  box-shadow: 0 0 8px #479eff;
+}
+.setup-cloud-hero i:nth-of-type(1) { top: 2px; left: 23px; }
+.setup-cloud-hero i:nth-of-type(2) { right: -1px; bottom: 25px; }
+.setup-cloud-hero i:nth-of-type(3) { bottom: 3px; left: 11px; }
+.setup-cloud-form { margin-top: 11px; gap: 7px; }
+.setup-cloud-identity {
+  display: flex;
+  min-height: 47px;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid rgb(113 170 255 / 12%);
+  border-radius: 16px;
+  background: linear-gradient(135deg, rgb(49 115 213 / 14%), rgb(255 255 255 / 4%));
+  text-align: left;
+}
+.setup-cloud-identity > span {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  flex: none;
+  border: 1px solid rgb(255 255 255 / 16%);
+  border-radius: 50%;
+  background: linear-gradient(145deg, #398ff6, #6d5bea);
+  box-shadow: inset 0 1px rgb(255 255 255 / 28%), 0 8px 18px rgb(27 91 208 / 20%);
+  color: white;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 750;
+  place-items: center;
+}
+.setup-cloud-identity div { min-width: 0; flex: 1; }
+.setup-cloud-identity small,
+.setup-cloud-identity strong { display: block; }
+.setup-cloud-identity small { color: rgb(255 255 255 / 43%); font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
+.setup-cloud-identity strong { margin-top: 2px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+.setup-cloud-identity em { color: #8dbdff; font-style: normal; font-weight: 600; }
+.setup-cloud-identity > svg { color: #67d99d; }
+.setup-cloud-fields {
+  overflow: hidden;
+  border: 1px solid rgb(255 255 255 / 9%);
+  border-radius: 17px;
+  background: rgb(255 255 255 / 5%);
+}
+.setup-cloud-fields :deep(.sky-field) { border: 0; border-radius: 0; background: transparent; }
+.setup-cloud-fields :deep(.sky-field + .sky-field) { border-top: 1px solid rgb(255 255 255 / 8%); }
+.setup-cloud-fields :deep(.sky-field) { padding: 3px 12px; }
+.setup-cloud-fields :deep(.sky-field__control),
+.setup-cloud-fields :deep(.sky-field__input) { min-height: 43px; }
+.setup-cloud-fields :deep(.sky-field--floating-label .sky-field__control) { min-height: 52px; }
+.setup-cloud-fields :deep(.sky-field--floating-label .sky-field__label) { top: 6px; left: 12px; }
+.setup-cloud-fields :deep(.sky-field__label) { color: rgb(255 255 255 / 52%); }
+.setup-cloud-fields :deep(.sky-field__input) { color: #ffffff; caret-color: #5ba9ff; }
+.setup-cloud-fields :deep(.sky-field__input::placeholder) { color: rgb(255 255 255 / 24%); }
+.setup-cloud-suffix { color: #82b8ff; font-size: 11px; font-weight: 650; white-space: nowrap; }
+.setup-cloud-strength {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  color: rgb(255 255 255 / 42%);
+  font-size: 9px;
+}
+.setup-cloud-strength > div { display: flex; flex: 1; gap: 4px; }
+.setup-cloud-strength span { height: 3px; flex: 1; border-radius: 99px; background: rgb(255 255 255 / 10%); }
+.setup-cloud-strength span.active { background: linear-gradient(90deg, #318bff, #66c0ff); box-shadow: 0 0 7px rgb(49 139 255 / 34%); }
+.setup-cloud-security-note {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  color: rgb(199 215 238 / 46%);
+  font-size: 9px;
+}
+.setup-assistant--step-2 .setup-assistant__primary { min-height: 46px; }
+.setup-assistant--step-2 .setup-assistant__later { padding: 7px; }
+@keyframes setup-cloud-orbit { to { transform: rotate(360deg); } }
+.setup-assistant__selector {
+  display: grid;
+  padding: 3px;
+  grid-template-columns: 1fr 1fr;
+  border-radius: 13px;
+  background: rgb(255 255 255/8%);
+}
+.setup-assistant__selector button {
+  height: 34px;
+  border: 0;
+  border-radius: 10px;
+  color: rgb(255 255 255/55%);
+  background: transparent;
+  font-weight: 650;
+}
+.setup-assistant__selector button.active {
+  color: white;
+  background: rgb(255 255 255/13%);
+  box-shadow: 0 3px 12px rgb(0 0 0/20%);
+}
+.setup-cloud-connected {
+  align-items: center;
+  padding-top: 35px;
+  color: #7ee2ad;
+}
+.setup-cloud-connected strong {
+  color: white;
+  font-size: 18px;
+}
+.setup-cloud-connected span {
+  color: rgb(255 255 255/55%);
+  font-size: 13px;
+}
+.setup-security-visual {
+  position: relative;
+  display: grid;
+  width: 100%;
+  height: 108px;
+  margin-top: 17px;
+  place-items: center;
+  border: 1px solid rgb(255 255 255/9%);
+  border-radius: 24px;
+  background: linear-gradient(145deg, rgb(46 187 120/15%), rgb(255 255 255/4%));
+}
+.setup-security-visual > div {
+  display: flex;
+  gap: 9px;
+}
+.setup-security-visual span {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #8fe4b6;
+  box-shadow: 0 0 15px rgb(88 222 149/38%);
+}
+.setup-security-visual svg {
+  position: absolute;
+  right: 18px;
+  bottom: 15px;
+  color: rgb(126 226 173/32%);
+}
+.setup-passcode-length {
+  display: grid;
+  width: 100%;
+  margin-top: 12px;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.setup-passcode-length button {
+  display: flex;
+  min-height: 57px;
+  padding: 9px 11px;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid rgb(255 255 255 / 9%);
+  border-radius: 16px;
+  color: #ffffff;
+  background: rgb(255 255 255 / 5%);
+  text-align: left;
+  transition: border-color 160ms ease, background 160ms ease, transform 120ms ease;
+}
+.setup-passcode-length button:active { transform: scale(0.975); }
+.setup-passcode-length button.selected {
+  border-color: rgb(94 172 255 / 72%);
+  background: linear-gradient(145deg, rgb(42 132 245 / 23%), rgb(64 96 210 / 10%));
+  box-shadow: inset 0 1px rgb(255 255 255 / 9%), 0 9px 22px rgb(23 91 193 / 12%);
+}
+.setup-passcode-length button > span,
+.setup-passcode-length b,
+.setup-passcode-length small { display: block; }
+.setup-passcode-length b { font-size: 18px; line-height: 1; }
+.setup-passcode-length small { margin-top: 4px; color: rgb(255 255 255 / 48%); font-size: 9px; }
+.setup-passcode-length svg {
+  padding: 3px;
+  border-radius: 50%;
+  background: #318cf5;
+}
+.setup-assistant--step-3 .setup-assistant__notice { margin: 12px 0; }
+.setup-choice-grid {
+  display: grid;
+  width: 100%;
+  margin-top: 22px;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.setup-choice-grid button {
+  position: relative;
+  padding: 9px 7px 12px;
+  border: 1px solid rgb(255 255 255/9%);
+  border-radius: 19px;
+  color: white;
+  background: rgb(255 255 255/5%);
+}
+.setup-choice-grid button.selected {
+  border-color: #559eff;
+  background: rgb(57 125 235/15%);
+}
+.setup-choice-grid button > svg {
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  padding: 2px;
+  border-radius: 50%;
+  background: #398cf5;
+}
+.setup-choice-grid strong {
+  display: block;
+  margin-top: 9px;
+  font-size: 11px;
+}
+.setup-appearance-preview {
+  display: flex;
+  height: 92px;
+  padding: 8px;
+  gap: 5px;
+  flex-direction: column;
+  border-radius: 12px;
+  background: #f5f6f8;
+}
+.setup-appearance-preview i {
+  display: block;
+  height: 14px;
+  border-radius: 4px;
+  background: #d8dbe0;
+}
+.setup-appearance-preview i:first-child {
+  width: 58%;
+  height: 25px;
+  background: #18191d;
+}
+.setup-appearance-preview--dark {
+  background: #17181c;
+}
+.setup-appearance-preview--dark i {
+  background: #31333a;
+}
+.setup-appearance-preview--dark i:first-child {
+  background: #f6f7fa;
+}
+.setup-appearance-preview--automatic {
+  background: linear-gradient(135deg, #f5f6f8 50%, #17181c 50%);
+}
+.setup-appearance-preview--automatic i {
+  background: rgb(120 122 130/40%);
+}
+.setup-mode-stack {
+  display: flex;
+  width: 100%;
+  margin-top: 22px;
+  gap: 10px;
+  flex-direction: column;
+}
+.setup-mode-stack button {
+  display: grid;
+  min-height: 95px;
+  padding: 13px;
+  grid-template-columns: 65px 1fr 25px;
+  gap: 13px;
+  align-items: center;
+  border: 1px solid rgb(255 255 255/9%);
+  border-radius: 21px;
+  color: white;
+  background: rgb(255 255 255/5%);
+  text-align: left;
+}
+.setup-mode-stack button.selected {
+  border-color: rgb(96 166 255/75%);
+  background: linear-gradient(100deg, rgb(41 110 204/22%), rgb(255 255 255/5%));
+}
+.setup-mode-stack__orb {
+  width: 62px;
+  height: 62px;
+  border-radius: 20px;
+  background: linear-gradient(145deg, #3e82e8, #172a4c);
+  box-shadow: inset 0 1px rgb(255 255 255/25%);
+}
+.setup-mode-stack__orb--ultimate {
+  background: radial-gradient(
+    circle at 28% 25%,
+    #f2a7ff,
+    #6755d5 40%,
+    #142544 80%
+  );
+  box-shadow:
+    0 8px 25px rgb(139 82 238/25%),
+    inset 0 1px rgb(255 255 255/45%);
+}
+.setup-mode-stack strong,
+.setup-mode-stack small {
+  display: block;
+}
+.setup-mode-stack strong {
+  font-size: 15px;
+}
+.setup-mode-stack small {
+  margin-top: 4px;
+  color: rgb(255 255 255/48%);
+  font-size: 11px;
+  line-height: 1.3;
+}
+.setup-mode-stack__check {
+  display: grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  border: 1px solid rgb(255 255 255/20%);
+  border-radius: 50%;
+}
+.selected .setup-mode-stack__check {
+  border-color: #4b9aff;
+  background: #398cf5;
+}
+.setup-wallpapers {
+  display: grid;
+  width: 100%;
+  margin: 19px 0 15px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 9px;
+}
+.setup-wallpapers button {
+  position: relative;
+  height: 82px;
+  overflow: hidden;
+  border: 2px solid transparent;
+  border-radius: 17px;
+  box-shadow: inset 0 0 0 1px rgb(255 255 255/12%);
+}
+.setup-wallpapers button.selected {
+  border-color: white;
+  box-shadow: 0 0 0 2px #328aff;
+}
+.setup-wallpapers svg {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  padding: 3px;
+  border-radius: 50%;
+  background: #2585f5;
+}
+.setup-toggle-card {
+  width: 100%;
+  margin-top: 25px;
+  overflow: hidden;
+  border: 1px solid rgb(255 255 255/9%);
+  border-radius: 22px;
+  background: rgb(255 255 255/5%);
+}
+.setup-toggle-card button {
+  display: flex;
+  width: 100%;
+  min-height: 82px;
+  padding: 14px;
+  align-items: center;
+  justify-content: space-between;
+  border: 0;
+  color: white;
+  background: transparent;
+  text-align: left;
+}
+.setup-toggle-card button + button {
+  border-top: 1px solid rgb(255 255 255/8%);
+}
+.setup-toggle-card button:disabled {
+  opacity: 0.4;
+}
+.setup-toggle-card strong,
+.setup-toggle-card small {
+  display: block;
+}
+.setup-toggle-card strong {
+  font-size: 14px;
+}
+.setup-toggle-card small {
+  max-width: 245px;
+  margin-top: 3px;
+  color: rgb(255 255 255/48%);
+  font-size: 11px;
+}
+.setup-toggle-card i {
+  position: relative;
+  width: 45px;
+  height: 27px;
+  flex: none;
+  border-radius: 99px;
+  background: #3b3d43;
+  transition: 0.2s;
+}
+.setup-toggle-card i b {
+  position: absolute;
+  width: 23px;
+  height: 23px;
+  left: 2px;
+  top: 2px;
+  border-radius: 50%;
+  background: white;
+  box-shadow: 0 2px 6px rgb(0 0 0/30%);
+  transition: 0.2s;
+}
+.setup-toggle-card i.on {
+  background: #34c759;
+}
+.setup-toggle-card i.on b {
+  transform: translateX(18px);
+}
+.setup-app-list {
+  display: grid;
+  width: 100%;
+  margin: 16px 0 14px;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.setup-app-list button {
+  display: grid;
+  min-height: 79px;
+  padding: 10px;
+  grid-template-columns: 42px 1fr;
+  gap: 9px;
+  align-items: center;
+  border: 1px solid rgb(255 255 255/8%);
+  border-radius: 17px;
+  color: white;
+  background: rgb(255 255 255/5%);
+  text-align: left;
+}
+.setup-app-list button.selected {
+  border-color: rgb(75 149 249/65%);
+  background: rgb(52 123 222/13%);
+}
+.setup-app-list img {
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+}
+.setup-app-list strong,
+.setup-app-list small {
+  display: block;
+}
+.setup-app-list strong {
+  overflow: hidden;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.setup-app-list small {
+  margin-top: 2px;
+  color: rgb(255 255 255/45%);
+  font-size: 9px;
+  line-height: 1.2;
+}
+.setup-app-list i {
+  position: absolute;
+}
+.setup-app-list button {
+  position: relative;
+}
+.setup-app-list button > i {
+  display: grid;
+  width: 18px;
+  height: 18px;
+  right: 6px;
+  top: 6px;
+  place-items: center;
+  border: 1px solid rgb(255 255 255/23%);
+  border-radius: 50%;
+}
+.setup-app-list button.selected > i {
+  border-color: #3d95ff;
+  background: #3388ee;
+}
+.setup-ready__halo {
+  display: grid;
+  width: 144px;
+  height: 144px;
+  margin-top: 70px;
+  place-items: center;
+  border: 1px solid rgb(255 255 255/20%);
+  border-radius: 50%;
+  color: white;
+  background: radial-gradient(
+    circle,
+    #418df0,
+    #2852b2 48%,
+    rgb(61 85 192/12%) 70%
+  );
+  box-shadow:
+    0 0 90px rgb(45 111 255/45%),
+    inset 0 1px rgb(255 255 255/45%);
+}
+.setup-ready__summary {
+  display: flex;
+  width: 100%;
+  margin: 28px 0 20px;
+  gap: 8px;
+  flex-direction: column;
+}
+.setup-ready__summary span {
+  display: flex;
+  padding: 12px 14px;
+  gap: 10px;
+  align-items: center;
+  border: 1px solid rgb(255 255 255/8%);
+  border-radius: 14px;
+  color: #7db7ff;
+  background: rgb(255 255 255/5%);
+  text-align: left;
+}
+.setup-ready__summary b {
+  overflow: hidden;
+  color: rgb(255 255 255/74%);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@keyframes setup-aurora {
+  to {
+    transform: translate3d(8%, -5%, 0) rotate(8deg);
+  }
+}
+.setup-forward-enter-active,
+.setup-forward-leave-active,
+.setup-back-enter-active,
+.setup-back-leave-active {
+  transition:
+    opacity 0.22s ease,
+    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.setup-forward-enter-from {
+  opacity: 0;
+  transform: translateX(24px);
+}
+.setup-forward-leave-to {
+  opacity: 0;
+  transform: translateX(-16px);
+}
+.setup-back-enter-from {
+  opacity: 0;
+  transform: translateX(-24px);
+}
+.setup-back-leave-to {
+  opacity: 0;
+  transform: translateX(16px);
+}
+</style>
diff --git a/frontend/src/components/PhoneStatusBar.vue b/frontend/src/components/PhoneStatusBar.vue
index 99c7902..97afb97 100644
--- a/frontend/src/components/PhoneStatusBar.vue
+++ b/frontend/src/components/PhoneStatusBar.vue
@@ -9,11 +9,13 @@ const props = withDefaults(
   defineProps<{
     activeCallReturn?: boolean
     controlCenterOpened?: boolean
+    interactive?: boolean
     lockable?: boolean
   }>(),
   {
     activeCallReturn: false,
     controlCenterOpened: false,
+    interactive: true,
     lockable: false,
   },
 )
@@ -30,6 +32,7 @@ function updateTime(): void {
 }
 
 function handleTimeClick(): void {
+  if (!props.interactive) return
   if (props.activeCallReturn) {
     emit('activeCall')
     return
@@ -76,7 +79,8 @@ onBeforeUnmount(() => {
       type="button"
       :aria-label="phone.t('ControlCenter.open')"
       :aria-expanded="controlCenterOpened"
-      @click.stop="emit('controlCenter')"
+      :disabled="!interactive"
+      @click.stop="interactive && emit('controlCenter')"
     >
       <PhoneStatusIndicators
         :airplane-mode="phone.preferences.settings.airplaneMode"
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 91000e7..1dd752a 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -12,6 +12,7 @@ import { nuiCall } from '@/utils/nui'
 import type { NuiResponse } from '@/utils/nui'
 import {
   DEFAULT_PHONE_PREFERENCES,
+  PHONE_SETUP_LAST_STEP,
   clampPhoneScale,
   ensureAppNotificationPreferences,
   parsePhonePreferences,
@@ -3900,11 +3901,38 @@ const defaultLocales: LocaleTree = {
       removeDeviceBody:
         'Enter your Sky Cloud password to remove this device from the account.',
       signOut: 'Sign Out',
+      reset: 'Transfer or Reset Phone',
+      transferOrReset: 'Transfer or Reset Phone',
+      transferOrResetDescription: 'Prepare this phone for a fresh setup',
+      resetHeroTitle: 'A clean start, without losing what follows you',
+      resetHeroBody:
+        'Erase local content and settings from this phone. Information attached to your SIM or stored in supported accounts remains available.',
+      erasedFromPhone: 'Erased From This Phone',
+      eraseDeviceSettings: 'Passcode, preferences and Home Screen layout',
+      eraseLocalContent: 'Photos, notes and content stored only locally',
+      eraseLocalApps: 'Downloaded apps and local app sessions',
+      keptSafe: 'Kept Safe',
+      keepSimData: 'SIM Card & Phone Number',
+      keepSimDataBody: 'Your number and SIM-backed communication remain on the SIM.',
+      keepCloudData: 'Account & Cloud Data',
+      keepCloudDataBody: 'Supported information remains in its app or Sky Cloud account.',
+      resetSetupAssistant: 'When erasing is complete, Setup Assistant starts automatically.',
       factoryReset: 'Erase All Content and Settings',
       factoryResetBody:
-        'This removes the account and all local data from this phone. Cloud data and the IMEI remain.',
-      factoryResetProgress: 'Erasing iFruit Phone',
-      factoryResetWarning: 'Do not turn off this phone. This takes 60 seconds.',
+        'This cannot be undone. Local settings, apps and unsynced content are erased. Your SIM number and account-backed data remain available.',
+      factoryResetProgress: 'Erasing Sky Phone',
+      factoryResetWarning: 'Keep this phone open. Your SIM and cloud data are safe.',
+      factoryResetSystemProcess: 'Secure system process',
+      factoryResetPreparing: 'Preparing secure reset',
+      factoryResetPreparingDetail: 'Checking device data',
+      factoryResetRemoving: 'Removing personal data',
+      factoryResetRemovingDetail: 'Clearing apps and local content',
+      factoryResetSecuring: 'Protecting linked services',
+      factoryResetSecuringDetail: 'Preserving SIM and cloud data',
+      factoryResetFinishing: 'Finishing setup',
+      factoryResetFinishingDetail: 'Preparing the welcome screen',
+      factoryResetSimSafe: 'SIM protected',
+      factoryResetCloudSafe: 'Cloud protected',
       passcode: {
         description:
           'A passcode protects the contents of this phone. It stays with the device when the SIM or Sky Cloud account changes.',
@@ -4023,11 +4051,141 @@ const defaultLocales: LocaleTree = {
     volume: 'Volume',
     wifi: 'Wi-Fi',
   },
+  Setup: {
+    title: 'Sky Phone Setup Assistant',
+    ownerFallback: 'Sky Phone Owner',
+    getStarted: 'Get Started',
+    setUpLater: 'Set Up Later',
+    welcome: {
+      title: 'Welcome to Sky Phone',
+      eyebrow: 'Designed around you',
+      hello: 'hello',
+      hallo: 'hallo',
+      bonjour: 'bonjour',
+      body: 'Hello, {name}. Let’s make this phone unmistakably yours.',
+      private: 'Private by design',
+      personal: 'Made for you',
+    },
+    connection: {
+      eyebrow: 'Mobile Connection',
+      title: 'Your connection is ready',
+      body: 'Sky Phone automatically detects the SIM installed in this device.',
+      noSim: 'No SIM installed',
+      ready: 'Connected to the Sky network',
+      offline: 'Phone works offline; calls and messages require a SIM',
+      preserved:
+        'Your SIM number and SIM-backed conversations remain with the SIM, even if this phone is erased.',
+    },
+    cloud: {
+      eyebrow: 'Sky Cloud',
+      title: 'Keep important data with you',
+      body: 'Sign in to sync supported app data and recover it on another Sky Phone.',
+      signIn: 'Sign In',
+      create: 'Create Account',
+      signInTitle: 'Sign in to Sky Cloud',
+      createTitle: 'Create your Sky Cloud account',
+      signInBody: 'Access your protected data, purchases and settings on this phone.',
+      createBody: 'Choose your personal iFruit address and keep important data available across devices.',
+      accountPreview: 'Your Sky Cloud ID',
+      accountName: 'Account name',
+      addressPlaceholder: 'alex.morgan',
+      email: 'Sky Cloud Email',
+      password: 'Password',
+      confirmPassword: 'Confirm Password',
+      passwordMismatch: 'The passwords do not match.',
+      strength0: 'At least 6 characters',
+      strength1: 'Basic password',
+      strength2: 'Good password',
+      strength3: 'Strong password',
+      strength4: 'Excellent password',
+      signInAction: 'Sign In Securely',
+      createAction: 'Create Sky Cloud Account',
+      securityNote: 'Encrypted connection · Your password stays private',
+      connected: 'Sky Cloud connected',
+      invalid: 'Enter a valid email and a password with at least 6 characters.',
+      errors: {
+        invalid_email: 'Enter a valid Sky Cloud email.',
+        invalid_password: 'Your password must contain at least 6 characters.',
+        invalid_credentials: 'Email or password is incorrect.',
+        email_taken: 'This Sky Cloud email is already registered.',
+        rate_limited: 'Too many attempts. Try again shortly.',
+        request_failed: 'Sky Cloud is temporarily unavailable.',
+      },
+    },
+    security: {
+      eyebrow: 'Privacy & Security',
+      title: 'Protect this phone',
+      body: 'Choose a four- or six-digit passcode to keep your apps and local information private.',
+      local: 'The passcode belongs to this physical phone and is never transferred with the SIM.',
+      create: 'Create Passcode',
+      createSelected: 'Create {count}-Digit Passcode',
+      lengthTitle: 'Choose passcode length',
+      fourDigit: '4-Digit Code',
+      sixDigit: '6-Digit Code',
+      enter: 'Create a Passcode',
+      confirm: 'Verify Your Passcode',
+      codeHint: 'Enter a memorable six-digit code.',
+      fourDigitHint: 'Enter a memorable four-digit code.',
+      sixDigitHint: 'Enter a memorable six-digit code.',
+      mismatch: 'The passcodes did not match. Try again.',
+      failed: 'The passcode could not be saved.',
+    },
+    appearance: {
+      eyebrow: 'Display',
+      title: 'Choose your appearance',
+      body: 'Automatic follows your system. You can change this at any time in Settings.',
+    },
+    performance: {
+      eyebrow: 'Performance',
+      title: 'Choose how your phone feels',
+      body: 'Balance responsiveness and visual effects for your FiveM setup.',
+      performance: 'Fastest response with optimized, blur-free glass.',
+      ultimate: 'Rich depth, live blur and the complete glass experience.',
+      changeLater: 'You can switch modes later under Settings › Appearance.',
+    },
+    wallpaper: {
+      eyebrow: 'Personalize',
+      title: 'Make it yours',
+      body: 'Choose one of twelve crafted Sky Phone backgrounds.',
+    },
+    notifications: {
+      eyebrow: 'Stay Informed',
+      title: 'Notifications your way',
+      body: 'Choose how apps may reach you. Critical alarms and calls stay available.',
+      allow: 'Allow App Notifications',
+      allowBody: 'Show banners, lock-screen updates and badges.',
+      sounds: 'Notification Sounds',
+      soundsBody: 'Play a subtle sound for incoming updates.',
+    },
+    apps: {
+      eyebrow: 'Suggested for You',
+      title: 'Start with your favorites',
+      body: 'Choose optional apps. Every essential phone app is already included.',
+      install: 'Add {count} Apps',
+      descriptions: {
+        banking: 'Secure city banking',
+        garage: 'Your vehicles at a glance',
+        skyride: 'Request a ride',
+        citymarkt: 'Shop local listings',
+        picstagram: 'Share photos',
+        snake: 'A timeless game',
+      },
+    },
+    ready: {
+      eyebrow: 'Setup Complete',
+      title: 'Welcome, {name}',
+      body: 'Your Sky Phone is configured and ready. Your choices can always be refined in Settings.',
+      localOnly: 'Stored on this phone',
+      enter: 'Enter Sky Phone',
+      review: 'Review Setup',
+    },
+  },
   Common: {
     add: 'Add',
     cancel: 'Cancel',
     clear: 'Clear',
     close: 'Close',
+    continue: 'Continue',
     back: 'Back',
     delete: 'Delete',
     done: 'Done',
@@ -4373,6 +4531,34 @@ export const usePhoneStore = defineStore('phone', {
       this.preferences.settings.ringtoneVolume = volume
       this.saveDeviceNamespace('settings', this.preferences)
     },
+    setAllAppNotifications(enabled: boolean, sounds: boolean): void {
+      for (const preferences of Object.values(
+        this.preferences.settings.notifications,
+      )) {
+        preferences.enabled = enabled
+        preferences.sounds = enabled && sounds
+      }
+      this.saveDeviceNamespace('settings', this.preferences)
+    },
+    setSetupStep(step: number): void {
+      this.preferences.settings.setupStep = Math.min(
+        PHONE_SETUP_LAST_STEP,
+        Math.max(0, Math.floor(step)),
+      )
+      this.saveDeviceNamespace('settings', this.preferences)
+    },
+    completeSetup(): void {
+      this.preferences.settings.setupCompleted = true
+      this.preferences.settings.setupStep = PHONE_SETUP_LAST_STEP
+      this.saveDeviceNamespace('settings', this.preferences)
+    },
+    resetAfterFactoryReset(): void {
+      this.persistenceGeneration += 1
+      this.preferences = cloneJsonData(DEFAULT_PHONE_PREFERENCES)
+      this.deviceRevisions = {}
+      if (this.device) this.device.data = {}
+      this.security = { enabled: false, length: null, lockedUntil: 0 }
+    },
     setSystemDarkMode(value: boolean): void {
       this.systemDarkMode = value
     },
diff --git a/frontend/src/utils/preferences.test.ts b/frontend/src/utils/preferences.test.ts
index 6c80d0f..8c78b5a 100644
--- a/frontend/src/utils/preferences.test.ts
+++ b/frontend/src/utils/preferences.test.ts
@@ -2,10 +2,39 @@ import { describe, expect, it } from 'vitest'
 import type { LaunchablePhoneAppId } from '@/types/apps'
 import {
   DEFAULT_PHONE_PREFERENCES,
+  PHONE_SETUP_LAST_STEP,
   parsePhonePreferences,
   WALLPAPER_IDS,
 } from './preferences'
 describe('preferences', () => {
+  it('starts Setup Assistant for a phone without saved settings', () => {
+    const value = parsePhonePreferences(null)
+
+    expect(value.settings.setupCompleted).toBe(false)
+    expect(value.settings.setupStep).toBe(0)
+  })
+
+  it('migrates existing phones past Setup Assistant', () => {
+    const value = parsePhonePreferences(
+      JSON.stringify({ version: 1, settings: { wallpaper: 'aurora' } }),
+    )
+
+    expect(value.settings.setupCompleted).toBe(true)
+    expect(value.settings.setupStep).toBe(PHONE_SETUP_LAST_STEP)
+  })
+
+  it('restores an interrupted Setup Assistant step', () => {
+    const value = parsePhonePreferences(
+      JSON.stringify({
+        version: 1,
+        settings: { setupCompleted: false, setupStep: 5 },
+      }),
+    )
+
+    expect(value.settings.setupCompleted).toBe(false)
+    expect(value.settings.setupStep).toBe(5)
+  })
+
   it('falls back for malformed and obsolete records', () => {
     expect(parsePhonePreferences('{')).toEqual(DEFAULT_PHONE_PREFERENCES)
     expect(parsePhonePreferences('{"version":2}')).toEqual(
diff --git a/frontend/src/utils/preferences.ts b/frontend/src/utils/preferences.ts
index 4df8df1..7b00633 100644
--- a/frontend/src/utils/preferences.ts
+++ b/frontend/src/utils/preferences.ts
@@ -39,6 +39,7 @@ export const WALLPAPER_IDS = [
 export const PHONE_SCALE_MIN = 75
 export const PHONE_SCALE_MAX = 150
 export const PHONE_SCALE_STEP = 5
+export const PHONE_SETUP_LAST_STEP = 9
 
 export type AppearanceMode = (typeof APPEARANCE_MODE_IDS)[number]
 export type GraphicsMode = (typeof GRAPHICS_MODE_IDS)[number]
@@ -79,6 +80,8 @@ export type PhonePreferencesV1 = {
     ringtone: RingtoneId
     ringtoneVolume: number
     screenBrightness: number
+    setupCompleted: boolean
+    setupStep: number
     streamerMode: boolean
     wallpaper: WallpaperId
     wallpaperHistory: WallpaperHistoryEntry[]
@@ -149,6 +152,8 @@ export const DEFAULT_PHONE_PREFERENCES: PhonePreferencesV1 = {
     ringtone: 'skyline',
     ringtoneVolume: 80,
     screenBrightness: 100,
+    setupCompleted: false,
+    setupStep: 0,
     streamerMode: false,
     wallpaper: 'midnight',
     wallpaperHistory: [{ imageUrl: null, wallpaper: 'midnight' }],
@@ -342,6 +347,20 @@ export function parsePhonePreferences(raw: string | null): PhonePreferencesV1 {
           10,
           100,
         ),
+        setupCompleted:
+          typeof settings.setupCompleted === 'boolean'
+            ? settings.setupCompleted
+            : true,
+        setupStep: Math.floor(
+          readNumber(
+            settings.setupStep,
+            typeof settings.setupCompleted === 'boolean'
+              ? defaults.setupStep
+              : PHONE_SETUP_LAST_STEP,
+            0,
+            PHONE_SETUP_LAST_STEP,
+          ),
+        ),
         streamerMode: readBoolean(settings.streamerMode, defaults.streamerMode),
         wallpaper,
         wallpaperHistory:
diff --git a/frontend/src/views/apps/SettingsApp.contract.test.ts b/frontend/src/views/apps/SettingsApp.contract.test.ts
index 0049e8f..5075880 100644
--- a/frontend/src/views/apps/SettingsApp.contract.test.ts
+++ b/frontend/src/views/apps/SettingsApp.contract.test.ts
@@ -46,4 +46,12 @@ describe('SettingsApp Sky UI contract', () => {
       /\.settings-wallpaper-grid\s*\{[^}]*grid-template-columns:\s*repeat\(2,/,
     )
   })
+
+  it('places destructive erasure behind a dedicated reset explanation', () => {
+    expect(source).toContain("openView('reset')")
+    expect(source).toContain("activeView === 'reset'")
+    expect(source).toContain("phone.t('Apps.settings.keepSimData')")
+    expect(source).toContain("phone.t('Apps.settings.keepCloudData')")
+    expect(source).toContain('phone.resetAfterFactoryReset()')
+  })
 })
diff --git a/frontend/src/views/apps/SettingsApp.vue b/frontend/src/views/apps/SettingsApp.vue
index 4f31e69..5a0ac3a 100644
--- a/frontend/src/views/apps/SettingsApp.vue
+++ b/frontend/src/views/apps/SettingsApp.vue
@@ -4,6 +4,7 @@ import {
   Bluetooth,
   Camera,
   Check,
+  Cloud,
   EyeOff,
   KeyRound,
   Images,
@@ -13,6 +14,7 @@ import {
   Plane,
   RotateCcw,
   Settings,
+  ShieldCheck,
   Signal,
   Smartphone,
   Sun,
@@ -41,6 +43,7 @@ import { useMessageMediaStore } from '@/stores/messageMedia'
 import PhonePasscode from '@/components/PhonePasscode.vue'
 import { useAccountStore } from '@/stores/account'
 import { useAppAuthStore } from '@/stores/app-auth'
+import { useAppStoreStore } from '@/stores/app-store'
 import type {
   LaunchablePhoneAppDefinition,
   LaunchablePhoneAppId,
@@ -60,7 +63,6 @@ import {
   SkyField,
   SkyLink,
   SkyNavbar,
-  SkyProgress,
   SkyScrollArea,
   SkySearchbar,
   SkySegmented,
@@ -102,6 +104,7 @@ type SettingsView =
   | 'general'
   | 'appearance'
   | 'wallpaper'
+  | 'reset'
 type RootToggleKey =
   | 'airplaneMode'
   | 'streamerMode'
@@ -119,7 +122,8 @@ type PasscodeFlow =
   | 'disable'
   | null
 
-const FACTORY_RESET_DURATION_MS = 60_000
+const FACTORY_RESET_DURATION_MS = 8_000
+const FACTORY_RESET_RING_CIRCUMFERENCE = 289.03
 
 const phone = usePhoneStore()
 const mediaPicker = useMessageMediaStore()
@@ -128,6 +132,7 @@ const router = useRouter()
 const isDevelopment = import.meta.env.DEV
 const account = useAccountStore()
 const appAuth = useAppAuthStore()
+const appStore = useAppStoreStore()
 const query = ref('')
 const activeView = ref<SettingsView>('root')
 const selectedNotificationAppId = ref<LaunchablePhoneAppId>('calculator')
@@ -156,6 +161,43 @@ const factoryResetProgress = ref(0)
 const selectedFrameColor = computed(
   () => PHONE_FRAME_COLORS[phone.preferences.settings.frame],
 )
+const factoryResetPhase = computed(() => {
+  if (factoryResetProgress.value < 18) {
+    return {
+      detail: phone.t('Apps.settings.factoryResetPreparingDetail'),
+      index: 0,
+      label: phone.t('Apps.settings.factoryResetPreparing'),
+    }
+  }
+  if (factoryResetProgress.value < 72) {
+    return {
+      detail: phone.t('Apps.settings.factoryResetRemovingDetail'),
+      index: 1,
+      label: phone.t('Apps.settings.factoryResetRemoving'),
+    }
+  }
+  if (factoryResetProgress.value < 94) {
+    return {
+      detail: phone.t('Apps.settings.factoryResetSecuringDetail'),
+      index: 2,
+      label: phone.t('Apps.settings.factoryResetSecuring'),
+    }
+  }
+  return {
+    detail: phone.t('Apps.settings.factoryResetFinishingDetail'),
+    index: 3,
+    label: phone.t('Apps.settings.factoryResetFinishing'),
+  }
+})
+const factoryResetSecondsRemaining = computed(() =>
+  Math.max(
+    0,
+    Math.ceil(
+      (FACTORY_RESET_DURATION_MS * (1 - factoryResetProgress.value / 100)) /
+        1000,
+    ),
+  ),
+)
 let factoryResetAnimationFrame: number | undefined
 
 const wallpaperHistory = computed(
@@ -613,7 +655,11 @@ async function confirmFactoryReset(): Promise<void> {
   factoryResetProgress.value = 100
   factoryResetting.value = false
   if (!success) accountToast.value = accountError()
-  else appAuth.hydrate(undefined, '')
+  else {
+    appAuth.hydrate(undefined, '')
+    appStore.hydrate(undefined)
+    phone.resetAfterFactoryReset()
+  }
 }
 
 async function confirmSimEject(): Promise<void> {
@@ -1284,17 +1330,61 @@ onBeforeUnmount(() => {
             :title="phone.t('Apps.settings.ejectSim')"
             @activate="simEjectOpened = true"
           />
+        </SkySettingsGroup>
+
+        <SkySettingsGroup>
+          <SkySettingsRow
+            kind="navigation"
+            :title="phone.t('Apps.settings.transferOrReset')"
+            :description="phone.t('Apps.settings.transferOrResetDescription')"
+            @activate="openView('reset')"
+          >
+            <template #leading>
+              <SkySettingsIcon color="#8e8e93">
+                <RotateCcw :size="18" aria-hidden="true" />
+              </SkySettingsIcon>
+            </template>
+          </SkySettingsRow>
+        </SkySettingsGroup>
+      </template>
+
+      <template v-else-if="activeView === 'reset'">
+        <section class="settings-reset-hero">
+          <div class="settings-reset-hero__icon">
+            <RotateCcw :size="35" :stroke-width="1.65" />
+          </div>
+          <h2>{{ phone.t('Apps.settings.resetHeroTitle') }}</h2>
+          <p>{{ phone.t('Apps.settings.resetHeroBody') }}</p>
+        </section>
+
+        <SkySettingsGroup :title="phone.t('Apps.settings.erasedFromPhone')">
+          <SkySettingsRow :title="phone.t('Apps.settings.eraseDeviceSettings')" />
+          <SkySettingsRow :title="phone.t('Apps.settings.eraseLocalContent')" />
+          <SkySettingsRow :title="phone.t('Apps.settings.eraseLocalApps')" />
+        </SkySettingsGroup>
+
+        <SkySettingsGroup :title="phone.t('Apps.settings.keptSafe')">
+          <SkySettingsRow
+            :title="phone.t('Apps.settings.keepSimData')"
+            :description="phone.t('Apps.settings.keepSimDataBody')"
+          />
+          <SkySettingsRow
+            :title="phone.t('Apps.settings.keepCloudData')"
+            :description="phone.t('Apps.settings.keepCloudDataBody')"
+          />
+        </SkySettingsGroup>
+
+        <SkySettingsGroup>
           <SkySettingsRow
             kind="action"
             tone="danger"
             :title="phone.t('Apps.settings.factoryReset')"
             @activate="resetOpened = true"
-          >
-            <template #leading>
-              <RotateCcw :size="18" aria-hidden="true" />
-            </template>
-          </SkySettingsRow>
+          />
         </SkySettingsGroup>
+        <p class="settings-reset-footnote">
+          {{ phone.t('Apps.settings.resetSetupAssistant') }}
+        </p>
       </template>
 
       <template v-else-if="activeView === 'appearance'">
@@ -1487,15 +1577,73 @@ onBeforeUnmount(() => {
       class="settings-reset-overlay"
       aria-live="polite"
     >
-      <div class="settings-reset-progress">
-        <strong>{{ Math.floor(factoryResetProgress) }}%</strong>
-        <SkyProgress
-          :label="phone.t('Apps.settings.factoryResetProgress')"
-          :progress="factoryResetProgress / 100"
-        />
+      <div class="settings-reset-ambient" aria-hidden="true">
+        <span v-for="particle in 8" :key="particle" />
+      </div>
+
+      <div class="settings-reset-content">
+        <div class="settings-reset-eyebrow">
+          <ShieldCheck :size="13" :stroke-width="2.2" />
+          {{ phone.t('Apps.settings.factoryResetSystemProcess') }}
+        </div>
+
+        <div class="settings-reset-orbit" aria-hidden="true">
+          <svg viewBox="0 0 104 104">
+            <circle class="settings-reset-ring-track" cx="52" cy="52" r="46" />
+            <circle
+              class="settings-reset-ring-value"
+              cx="52"
+              cy="52"
+              r="46"
+              :stroke-dasharray="FACTORY_RESET_RING_CIRCUMFERENCE"
+              :stroke-dashoffset="
+                FACTORY_RESET_RING_CIRCUMFERENCE *
+                (1 - factoryResetProgress / 100)
+              "
+            />
+          </svg>
+          <div class="settings-reset-device">
+            <Smartphone :size="37" :stroke-width="1.45" />
+            <span class="settings-reset-device__scan" />
+          </div>
+          <span class="settings-reset-orbit__pulse" />
+        </div>
+
+        <div class="settings-reset-heading">
+          <strong>{{ Math.floor(factoryResetProgress) }}%</strong>
+          <h2>{{ phone.t('Apps.settings.factoryResetProgress') }}</h2>
+          <p>{{ factoryResetPhase.label }}</p>
+        </div>
+
+        <div class="settings-reset-progress" role="progressbar" :aria-valuenow="Math.floor(factoryResetProgress)" aria-valuemin="0" aria-valuemax="100">
+          <span :style="{ width: `${factoryResetProgress}%` }" />
+        </div>
+
+        <div class="settings-reset-phase-card">
+          <div class="settings-reset-phase-card__topline">
+            <span>{{ factoryResetPhase.detail }}</span>
+            <strong>{{ factoryResetSecondsRemaining }}s</strong>
+          </div>
+          <div class="settings-reset-steps" aria-hidden="true">
+            <span
+              v-for="step in 4"
+              :key="step"
+              :class="{
+                'settings-reset-step--active': step - 1 === factoryResetPhase.index,
+                'settings-reset-step--complete': step - 1 < factoryResetPhase.index,
+              }"
+            >
+              <Check v-if="step - 1 < factoryResetPhase.index" :size="9" :stroke-width="3" />
+            </span>
+          </div>
+        </div>
+
+        <div class="settings-reset-protected">
+          <span><Signal :size="14" /> {{ phone.t('Apps.settings.factoryResetSimSafe') }}</span>
+          <span><Cloud :size="14" /> {{ phone.t('Apps.settings.factoryResetCloudSafe') }}</span>
+        </div>
+        <p class="settings-reset-warning">{{ phone.t('Apps.settings.factoryResetWarning') }}</p>
       </div>
-      <h2>{{ phone.t('Apps.settings.factoryResetProgress') }}</h2>
-      <p>{{ phone.t('Apps.settings.factoryResetWarning') }}</p>
     </div>
 
     <SkyDialog
@@ -1637,6 +1785,47 @@ onBeforeUnmount(() => {
   padding-top: 0;
 }
 
+.settings-reset-hero {
+  padding: 18px 24px 22px;
+  text-align: center;
+}
+
+.settings-reset-hero__icon {
+  display: grid;
+  width: 78px;
+  height: 78px;
+  margin: 0 auto 16px;
+  place-items: center;
+  border: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 24px;
+  color: #ff665f;
+  background: linear-gradient(145deg, rgb(255 74 66 / 18%), rgb(255 255 255 / 5%));
+  box-shadow: inset 0 1px rgb(255 255 255 / 12%), 0 18px 35px rgb(0 0 0 / 14%);
+}
+
+.settings-reset-hero h2 {
+  margin: 0;
+  font-size: 22px;
+  line-height: 1.08;
+  letter-spacing: -0.035em;
+}
+
+.settings-reset-hero p,
+.settings-reset-footnote {
+  color: var(--sky-color-text-secondary);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.settings-reset-hero p {
+  margin: 10px 0 0;
+}
+
+.settings-reset-footnote {
+  margin: -3px 20px 24px;
+  text-align: center;
+}
+
 .settings-copy {
   margin: 0 var(--sky-space-1) var(--sky-space-4);
   color: var(--sky-muted);
@@ -1950,34 +2139,263 @@ onBeforeUnmount(() => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--sky-space-6);
-  background: #000000;
+  overflow: hidden;
+  padding: 34px 26px 24px;
+  background:
+    radial-gradient(circle at 50% 42%, rgb(19 92 164 / 22%), transparent 34%),
+    radial-gradient(circle at 50% 100%, rgb(8 57 107 / 18%), transparent 40%),
+    #000000;
   color: #ffffff;
   text-align: center;
 }
 
-.settings-reset-progress {
-  width: min(240px, 80%);
+.settings-reset-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  max-width: 310px;
+  flex-direction: column;
+  align-items: center;
 }
 
-.settings-reset-progress strong {
+.settings-reset-ambient {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.settings-reset-ambient span {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: #66b9ff;
+  box-shadow: 0 0 8px 2px rgb(43 153 255 / 45%);
+  opacity: 0.5;
+  animation: settings-reset-particle 3.8s ease-in-out infinite;
+}
+
+.settings-reset-ambient span:nth-child(1) { top: 23%; left: 17%; }
+.settings-reset-ambient span:nth-child(2) { top: 31%; right: 13%; animation-delay: -1.2s; }
+.settings-reset-ambient span:nth-child(3) { top: 48%; left: 9%; animation-delay: -2.4s; }
+.settings-reset-ambient span:nth-child(4) { top: 56%; right: 8%; animation-delay: -0.6s; }
+.settings-reset-ambient span:nth-child(5) { bottom: 24%; left: 21%; animation-delay: -3s; }
+.settings-reset-ambient span:nth-child(6) { bottom: 19%; right: 18%; animation-delay: -1.7s; }
+.settings-reset-ambient span:nth-child(7) { top: 16%; right: 30%; animation-delay: -2.1s; }
+.settings-reset-ambient span:nth-child(8) { bottom: 34%; left: 33%; animation-delay: -0.9s; }
+
+.settings-reset-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 999px;
+  background: rgb(255 255 255 / 6%);
+  color: rgb(255 255 255 / 70%);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.settings-reset-orbit {
+  position: relative;
+  display: grid;
+  width: 112px;
+  height: 112px;
+  margin-top: 26px;
+  place-items: center;
+}
+
+.settings-reset-orbit svg {
+  position: absolute;
+  inset: 4px;
+  width: 104px;
+  height: 104px;
+  overflow: visible;
+  transform: rotate(-90deg);
+}
+
+.settings-reset-ring-track,
+.settings-reset-ring-value {
+  fill: none;
+  stroke-width: 2.6;
+}
+
+.settings-reset-ring-track { stroke: rgb(255 255 255 / 10%); }
+.settings-reset-ring-value {
+  stroke: #2997ff;
+  stroke-linecap: round;
+  filter: drop-shadow(0 0 6px rgb(41 151 255 / 75%));
+  transition: stroke-dashoffset 120ms linear;
+}
+
+.settings-reset-device {
+  position: relative;
+  display: grid;
+  width: 72px;
+  height: 72px;
+  overflow: hidden;
+  border: 1px solid rgb(255 255 255 / 13%);
+  border-radius: 23px;
+  background: linear-gradient(145deg, rgb(255 255 255 / 11%), rgb(255 255 255 / 3%));
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 18px 36px rgb(0 0 0 / 38%);
+  color: rgb(255 255 255 / 88%);
+  place-items: center;
+}
+
+.settings-reset-device__scan {
+  position: absolute;
+  right: 13px;
+  left: 13px;
+  height: 1px;
+  background: #42a5ff;
+  box-shadow: 0 0 9px 2px rgb(41 151 255 / 65%);
+  animation: settings-reset-scan 2s ease-in-out infinite;
+}
+
+.settings-reset-orbit__pulse {
+  position: absolute;
+  inset: 0;
+  border: 1px solid rgb(41 151 255 / 20%);
+  border-radius: 50%;
+  animation: settings-reset-pulse 2.4s ease-out infinite;
+}
+
+.settings-reset-heading { margin-top: 19px; }
+.settings-reset-heading > strong {
   display: block;
-  margin-bottom: var(--sky-space-3);
-  font-size: 28px;
+  font-size: 34px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.04em;
+  line-height: 1;
+}
+
+.settings-reset-heading h2 {
+  margin: 10px 0 0;
+  font-size: 19px;
+  letter-spacing: -0.02em;
+}
+
+.settings-reset-heading p {
+  margin: 5px 0 0;
+  color: #66b5ff;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.settings-reset-progress {
+  width: 100%;
+  height: 5px;
+  overflow: hidden;
+  margin-top: 22px;
+  border-radius: 999px;
+  background: rgb(255 255 255 / 10%);
+}
+
+.settings-reset-progress > span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #087cff, #55b8ff);
+  box-shadow: 0 0 10px rgb(41 151 255 / 60%);
+  transition: width 120ms linear;
+}
+
+.settings-reset-phase-card {
+  width: 100%;
+  margin-top: 13px;
+  padding: 12px 13px;
+  border: 1px solid rgb(255 255 255 / 9%);
+  border-radius: 15px;
+  background: rgb(255 255 255 / 5%);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
+}
+
+.settings-reset-phase-card__topline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: rgb(255 255 255 / 68%);
+  font-size: 10px;
+}
+
+.settings-reset-phase-card__topline strong {
+  color: rgb(255 255 255 / 88%);
   font-variant-numeric: tabular-nums;
 }
 
-.settings-reset-overlay h2 {
-  margin: var(--sky-space-5) 0 0;
-  font-size: 20px;
+.settings-reset-steps {
+  display: flex;
+  gap: 6px;
+  margin-top: 10px;
 }
 
-.settings-reset-overlay p {
+.settings-reset-steps > span {
+  display: grid;
+  height: 4px;
+  flex: 1;
+  border-radius: 99px;
+  background: rgb(255 255 255 / 10%);
+  color: #ffffff;
+  place-items: center;
+}
+
+.settings-reset-steps > .settings-reset-step--active {
+  background: #2997ff;
+  box-shadow: 0 0 7px rgb(41 151 255 / 55%);
+}
+
+.settings-reset-steps > .settings-reset-step--complete {
+  height: 12px;
+  margin-top: -4px;
+  border-radius: 50%;
+  background: #2997ff;
+}
+
+.settings-reset-protected {
+  display: flex;
+  gap: 8px;
+  margin-top: 15px;
+}
+
+.settings-reset-protected span {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 7px 9px;
+  border: 1px solid rgb(85 190 129 / 15%);
+  border-radius: 999px;
+  background: rgb(51 199 89 / 8%);
+  color: rgb(120 226 160 / 88%);
+  font-size: 9px;
+  font-weight: 600;
+}
+
+.settings-reset-warning {
   max-width: 270px;
-  margin: var(--sky-space-2) 0 0;
-  color: rgb(255 255 255 / 62%);
-  font-size: 13px;
-  line-height: 18px;
+  margin: 11px 0 0;
+  color: rgb(255 255 255 / 42%);
+  font-size: 9px;
+  line-height: 13px;
+}
+
+@keyframes settings-reset-scan {
+  0%, 100% { transform: translateY(-18px); opacity: 0.25; }
+  50% { transform: translateY(18px); opacity: 1; }
+}
+
+@keyframes settings-reset-pulse {
+  0% { transform: scale(0.82); opacity: 0; }
+  28% { opacity: 0.7; }
+  100% { transform: scale(1.18); opacity: 0; }
+}
+
+@keyframes settings-reset-particle {
+  0%, 100% { transform: translateY(0) scale(0.75); opacity: 0.2; }
+  50% { transform: translateY(-12px) scale(1); opacity: 0.7; }
 }
 
 .settings-dialog-button--danger {
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index 5e9f04c..f53a1b3 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -7969,12 +7969,14 @@ app.post('/api/:endpoint', (request, response) => {
     return
   }
   if (endpoint === 'development:bootstrap') {
-    authenticated = true
-    linkedAccount = {
-      devices: accountDevices,
-      email: 'demo@ifruit.com',
-      id: 1,
-    }
+    authenticated = testScenario !== 'setup-account-unlinked'
+    linkedAccount = authenticated
+      ? {
+          devices: accountDevices,
+          email: 'demo@ifruit.com',
+          id: 1,
+        }
+      : null
     if (
       testScenario === 'feather-onboarding' ||
       testScenario === 'feather-register'
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 15ddbec..fb3fd73 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -70,8 +70,59 @@ Locales["en"] = {
             elapsed = "TIME",
             cost = "COST",
         },
+        Setup = {
+            title = "Sky Phone Setup Assistant", ownerFallback = "Sky Phone Owner", getStarted = "Get Started", setUpLater = "Set Up Later",
+            welcome = { title = "Welcome to Sky Phone", eyebrow = "Designed around you", hello = "hello", hallo = "hallo", bonjour = "bonjour", body = "Hello, {name}. Let's make this phone unmistakably yours.", private = "Private by design", personal = "Made for you" },
+            connection = {
+                eyebrow = "Mobile Connection", title = "Your connection is ready", body = "Sky Phone automatically detects the SIM installed in this device.",
+                noSim = "No SIM installed", ready = "Connected to the Sky network", offline = "Phone works offline; calls and messages require a SIM",
+                preserved = "Your SIM number and SIM-backed conversations remain with the SIM, even if this phone is erased.",
+            },
+            cloud = {
+                eyebrow = "Sky Cloud", title = "Keep important data with you", body = "Sign in to sync supported app data and recover it on another Sky Phone.",
+                signIn = "Sign In", create = "Create Account", email = "Sky Cloud Email", password = "Password", connected = "Sky Cloud connected",
+                signInTitle = "Sign in to Sky Cloud", createTitle = "Create your Sky Cloud account",
+                signInBody = "Access your protected data, purchases and settings on this phone.", createBody = "Choose your personal iFruit address and keep important data available across devices.",
+                accountPreview = "Your Sky Cloud ID", accountName = "Account name", addressPlaceholder = "alex.morgan", confirmPassword = "Confirm Password",
+                passwordMismatch = "The passwords do not match.", strength0 = "At least 6 characters", strength1 = "Basic password", strength2 = "Good password", strength3 = "Strong password", strength4 = "Excellent password",
+                signInAction = "Sign In Securely", createAction = "Create Sky Cloud Account", securityNote = "Encrypted connection · Your password stays private",
+                invalid = "Enter a valid email and a password with at least 6 characters.",
+                errors = {
+                    invalid_email = "Enter a valid Sky Cloud email.", invalid_password = "Your password must contain at least 6 characters.",
+                    invalid_credentials = "Email or password is incorrect.", email_taken = "This Sky Cloud email is already registered.",
+                    rate_limited = "Too many attempts. Try again shortly.", request_failed = "Sky Cloud is temporarily unavailable.",
+                },
+            },
+            security = {
+                eyebrow = "Privacy & Security", title = "Protect this phone", body = "Choose a four- or six-digit passcode to keep your apps and local information private.",
+                local = "The passcode belongs to this physical phone and is never transferred with the SIM.", create = "Create Passcode", createSelected = "Create {count}-Digit Passcode",
+                lengthTitle = "Choose passcode length", fourDigit = "4-Digit Code", sixDigit = "6-Digit Code",
+                enter = "Create a Passcode", confirm = "Verify Your Passcode", codeHint = "Enter a memorable six-digit code.", fourDigitHint = "Enter a memorable four-digit code.", sixDigitHint = "Enter a memorable six-digit code.",
+                mismatch = "The passcodes did not match. Try again.", failed = "The passcode could not be saved.",
+            },
+            appearance = { eyebrow = "Display", title = "Choose your appearance", body = "Automatic follows your system. You can change this at any time in Settings." },
+            performance = {
+                eyebrow = "Performance", title = "Choose how your phone feels", body = "Balance responsiveness and visual effects for your FiveM setup.",
+                performance = "Fastest response with optimized, blur-free glass.", ultimate = "Rich depth, live blur and the complete glass experience.",
+                changeLater = "You can switch modes later under Settings › Appearance.",
+            },
+            wallpaper = { eyebrow = "Personalize", title = "Make it yours", body = "Choose one of twelve crafted Sky Phone backgrounds." },
+            notifications = {
+                eyebrow = "Stay Informed", title = "Notifications your way", body = "Choose how apps may reach you. Critical alarms and calls stay available.",
+                allow = "Allow App Notifications", allowBody = "Show banners, lock-screen updates and badges.",
+                sounds = "Notification Sounds", soundsBody = "Play a subtle sound for incoming updates.",
+            },
+            apps = {
+                eyebrow = "Suggested for You", title = "Start with your favorites", body = "Choose optional apps. Every essential phone app is already included.", install = "Add {count} Apps",
+                descriptions = { banking = "Secure city banking", garage = "Your vehicles at a glance", skyride = "Request a ride", citymarkt = "Shop local listings", picstagram = "Share photos", snake = "A timeless game" },
+            },
+            ready = {
+                eyebrow = "Setup Complete", title = "Welcome, {name}", body = "Your Sky Phone is configured and ready. Your choices can always be refined in Settings.",
+                localOnly = "Stored on this phone", enter = "Enter Sky Phone", review = "Review Setup",
+            },
+        },
         Common = {
-            add = "Add", back = "Back", cancel = "Cancel", clear = "Clear", close = "Close", delete = "Delete", done = "Done", edit = "Edit", home = "Home", loading = "Loading", pause = "Pause", use = "Use",
+            add = "Add", back = "Back", cancel = "Cancel", clear = "Clear", close = "Close", continue = "Continue", delete = "Delete", done = "Done", edit = "Edit", home = "Home", loading = "Loading", pause = "Pause", use = "Use",
             phone = "Phone", phoneStatus = "Phone status", reset = "Reset",
             save = "Save", search = "Search", send = "Send", start = "Start", stop = "Stop",
             signOut = "Sign Out", signingOut = "Signing Out...", signOutTitle = "Sign out of {app}?",
@@ -1763,8 +1814,21 @@ Locales["en"] = {
                 simCard = "SIM Card", simNumber = "Phone Number", simType = "SIM Type", registeredSim = "Registered",
                 anonymousSim = "Anonymous", noSim = "No SIM", ejectSim = "Eject SIM", ejectSimBody = "Return this SIM card to your inventory?",
                 removeDeviceBody = "Enter your Sky Cloud password to remove this device from the account.", signOut = "Sign Out",
-                factoryReset = "Erase All Content and Settings", factoryResetBody = "This removes the account and all local data from this phone. Cloud data and the IMEI remain.",
-                factoryResetProgress = "Erasing iFruit Phone", factoryResetWarning = "Do not turn off this phone. This takes 60 seconds.",
+                reset = "Transfer or Reset Phone", transferOrReset = "Transfer or Reset Phone", transferOrResetDescription = "Prepare this phone for a fresh setup",
+                resetHeroTitle = "A clean start, without losing what follows you",
+                resetHeroBody = "Erase local content and settings from this phone. Information attached to your SIM or stored in supported accounts remains available.",
+                erasedFromPhone = "Erased From This Phone", eraseDeviceSettings = "Passcode, preferences and Home Screen layout",
+                eraseLocalContent = "Photos, notes and content stored only locally", eraseLocalApps = "Downloaded apps and local app sessions",
+                keptSafe = "Kept Safe", keepSimData = "SIM Card & Phone Number", keepSimDataBody = "Your number and SIM-backed communication remain on the SIM.",
+                keepCloudData = "Account & Cloud Data", keepCloudDataBody = "Supported information remains in its app or Sky Cloud account.",
+                resetSetupAssistant = "When erasing is complete, Setup Assistant starts automatically.",
+                factoryReset = "Erase All Content and Settings", factoryResetBody = "This cannot be undone. Local settings, apps and unsynced content are erased. Your SIM number and account-backed data remain available.",
+                factoryResetProgress = "Erasing Sky Phone", factoryResetWarning = "Keep this phone open. Your SIM and cloud data are safe.",
+                factoryResetSystemProcess = "Secure system process", factoryResetPreparing = "Preparing secure reset", factoryResetPreparingDetail = "Checking device data",
+                factoryResetRemoving = "Removing personal data", factoryResetRemovingDetail = "Clearing apps and local content",
+                factoryResetSecuring = "Protecting linked services", factoryResetSecuringDetail = "Preserving SIM and cloud data",
+                factoryResetFinishing = "Finishing setup", factoryResetFinishingDetail = "Preparing the welcome screen",
+                factoryResetSimSafe = "SIM protected", factoryResetCloudSafe = "Cloud protected",
                 passcode = {
                     description = "A passcode protects the contents of this phone. It stays with the device when the SIM or Sky Cloud account changes.",
                     status = "Passcode", codeLength = "Code Length", sixDigit = "6-Digit Code", fourDigit = "4-Digit Code",