From 7ab9924fa7643b5264bc9421fc1b8cf4428b39e9 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Fri, 14 Aug 2026 17:27:35 +0200
Subject: [PATCH] ENH - refine setup and reset transitions

---
 .../src/components/PhoneSetupAssistant.vue    | 245 +++++++++-----
 frontend/src/views/apps/SettingsApp.vue       | 313 ++++++------------
 2 files changed, 268 insertions(+), 290 deletions(-)

diff --git a/frontend/src/components/PhoneSetupAssistant.vue b/frontend/src/components/PhoneSetupAssistant.vue
index 26d22b8..3a7bed3 100644
--- a/frontend/src/components/PhoneSetupAssistant.vue
+++ b/frontend/src/components/PhoneSetupAssistant.vue
@@ -156,6 +156,7 @@ async function submitAccount(): Promise<void> {
 }
 
 function selectAccountMode(mode: 'login' | 'register'): void {
+  if (accountMode.value === mode) return
   accountMode.value = mode
   password.value = ''
   passwordConfirm.value = ''
@@ -241,16 +242,16 @@ function finish(): void {
       <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 class="setup-welcome__signature">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
           </div>
           <div class="setup-welcome__copy">
             <p class="setup-welcome__eyebrow">
@@ -320,20 +321,31 @@ function finish(): void {
           <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>
+          <Transition name="setup-account-copy" mode="out-in">
+            <div :key="accountMode" class="setup-cloud-heading">
+              <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>
+          </Transition>
           <div v-if="!account.email" class="setup-cloud-form">
-            <div class="setup-assistant__selector">
+            <div class="setup-assistant__selector" role="group">
+              <span
+                class="setup-assistant__selector-indicator"
+                :class="{ 'setup-assistant__selector-indicator--register': accountMode === 'register' }"
+                aria-hidden="true"
+              ></span>
               <button
                 :class="{ active: accountMode === 'login' }"
+                :aria-pressed="accountMode === 'login'"
                 @click="selectAccountMode('login')"
               >
                 {{ phone.t('Setup.cloud.signIn') }}
               </button>
               <button
                 :class="{ active: accountMode === 'register' }"
+                :aria-pressed="accountMode === 'register'"
                 @click="selectAccountMode('register')"
               >
                 {{ phone.t('Setup.cloud.create') }}
@@ -372,26 +384,30 @@ function finish(): void {
                 :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"
-              />
+              <Transition name="setup-account-field">
+                <SkyField
+                  v-if="accountMode === 'register'"
+                  id="setup-cloud-password-confirm"
+                  v-model="passwordConfirm"
+                  type="password"
+                  :label="phone.t('Setup.cloud.confirmPassword')"
+                  autocomplete="new-password"
+                />
+              </Transition>
             </div>
 
-            <div v-if="accountMode === 'register'" class="setup-cloud-strength">
-              <div>
-                <span
-                  v-for="level in 4"
-                  :key="level"
-                  :class="{ active: level <= passwordStrength }"
-                ></span>
+            <Transition name="setup-account-strength">
+              <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>
-              <small>{{ phone.t(`Setup.cloud.strength${passwordStrength}`) }}</small>
-            </div>
+            </Transition>
             <p v-if="accountError" class="setup-assistant__error" role="alert">
               {{ accountError }}
             </p>
@@ -401,7 +417,9 @@ function finish(): void {
               @click="submitAccount"
             >
               <SkySpinner v-if="accountBusy" />
-              <span v-else>{{ phone.t(accountMode === 'login' ? 'Setup.cloud.signInAction' : 'Setup.cloud.createAction') }}</span>
+              <Transition v-else name="setup-account-action" mode="out-in">
+                <span :key="accountMode">{{ phone.t(accountMode === 'login' ? 'Setup.cloud.signInAction' : 'Setup.cloud.createAction') }}</span>
+              </Transition>
             </SkyButton>
             <div class="setup-cloud-security-note">
               <LockKeyhole :size="13" />
@@ -956,44 +974,40 @@ function finish(): void {
   position: relative;
   display: grid;
   width: 286px;
-  height: 292px;
+  height: 274px;
   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);
+  z-index: -1;
+  top: 48px;
+  right: 12px;
+  bottom: 44px;
+  left: 12px;
+  background:
+    linear-gradient(90deg, transparent, rgb(55 122 255 / 13%) 28%, rgb(121 91 255 / 11%) 72%, transparent),
+    linear-gradient(180deg, transparent, rgb(39 126 255 / 9%) 48%, transparent);
+  filter: blur(22px);
   content: '';
   animation: setup-welcome-breathe 5s ease-in-out infinite;
 }
-.setup-welcome__halo {
+.setup-welcome__hero::after {
   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;
+  top: 51px;
+  right: 28px;
+  bottom: 47px;
+  left: 28px;
+  border-top: 1px solid rgb(142 184 255 / 9%);
+  border-bottom: 1px solid rgb(142 184 255 / 9%);
+  content: '';
 }
 .setup-welcome__greetings {
   position: relative;
   width: 100%;
-  height: 96px;
-  filter: drop-shadow(0 14px 28px rgb(15 89 255 / 26%));
+  height: 104px;
+  filter: drop-shadow(0 16px 30px rgb(15 89 255 / 20%));
 }
 .setup-welcome__greetings span {
   position: absolute;
@@ -1001,7 +1015,7 @@ function finish(): void {
   display: grid;
   color: #ffffff;
   font-family: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive;
-  font-size: 64px;
+  font-size: 68px;
   font-weight: 500;
   letter-spacing: -0.06em;
   opacity: 0;
@@ -1011,18 +1025,23 @@ function finish(): void {
 }
 .setup-welcome__greetings span:nth-child(2) { animation-delay: 3s; }
 .setup-welcome__greetings span:nth-child(3) { animation-delay: 6s; }
-.setup-welcome__spark {
+.setup-welcome__signature {
   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;
+  bottom: 66px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.setup-welcome__signature span {
+  width: 22px;
+  height: 2px;
+  background: rgb(109 170 255 / 20%);
+}
+.setup-welcome__signature span:nth-child(2) {
+  width: 42px;
+  background: linear-gradient(90deg, #4b9fff, #9677ff);
+  box-shadow: 0 0 12px rgb(73 148 255 / 34%);
 }
-.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;
@@ -1094,16 +1113,9 @@ function finish(): void {
   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; }
+  0%, 100% { transform: scaleX(0.92); opacity: 0.58; }
+  50% { transform: scaleX(1.04); opacity: 1; }
 }
 .setup-connectivity-card {
   position: relative;
@@ -1172,6 +1184,12 @@ function finish(): void {
   margin: 7px 0 6px;
   font-size: 29px;
 }
+.setup-cloud-heading {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+}
 .setup-assistant--step-2 .setup-assistant__lead {
   max-width: 310px;
   font-size: 12px;
@@ -1266,6 +1284,26 @@ function finish(): void {
   border-radius: 17px;
   background: rgb(255 255 255 / 5%);
 }
+.setup-account-field-enter-active,
+.setup-account-field-leave-active {
+  overflow: hidden;
+  transition:
+    max-height 280ms cubic-bezier(0.32, 0.72, 0, 1),
+    opacity 180ms ease,
+    transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+.setup-account-field-enter-from,
+.setup-account-field-leave-to {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-8px);
+}
+.setup-account-field-enter-to,
+.setup-account-field-leave-from {
+  max-height: 58px;
+  opacity: 1;
+  transform: translateY(0);
+}
 .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; }
@@ -1287,6 +1325,17 @@ function finish(): void {
 .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-account-strength-enter-active,
+.setup-account-strength-leave-active {
+  transition:
+    opacity 180ms ease,
+    transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+.setup-account-strength-enter-from,
+.setup-account-strength-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
+}
 .setup-cloud-security-note {
   display: flex;
   align-items: center;
@@ -1299,24 +1348,72 @@ function finish(): void {
 .setup-assistant--step-2 .setup-assistant__later { padding: 7px; }
 @keyframes setup-cloud-orbit { to { transform: rotate(360deg); } }
 .setup-assistant__selector {
+  position: relative;
   display: grid;
   padding: 3px;
   grid-template-columns: 1fr 1fr;
   border-radius: 13px;
   background: rgb(255 255 255/8%);
 }
+.setup-assistant__selector-indicator {
+  position: absolute;
+  z-index: 0;
+  top: 3px;
+  bottom: 3px;
+  left: 3px;
+  width: calc(50% - 3px);
+  border: 1px solid rgb(255 255 255 / 7%);
+  border-radius: 10px;
+  background: rgb(255 255 255 / 13%);
+  box-shadow:
+    0 3px 12px rgb(0 0 0 / 20%),
+    inset 0 1px rgb(255 255 255 / 7%);
+  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+.setup-assistant__selector-indicator--register {
+  transform: translateX(100%);
+}
 .setup-assistant__selector button {
+  position: relative;
+  z-index: 1;
   height: 34px;
   border: 0;
   border-radius: 10px;
   color: rgb(255 255 255/55%);
   background: transparent;
   font-weight: 650;
+  transition: color 220ms ease;
 }
 .setup-assistant__selector button.active {
   color: white;
-  background: rgb(255 255 255/13%);
-  box-shadow: 0 3px 12px rgb(0 0 0/20%);
+}
+.setup-account-copy-enter-active,
+.setup-account-copy-leave-active {
+  transition:
+    opacity 170ms ease,
+    transform 230ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+.setup-account-copy-enter-from {
+  opacity: 0;
+  transform: translateY(7px);
+}
+.setup-account-copy-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+.setup-account-action-enter-active,
+.setup-account-action-leave-active {
+  transition:
+    opacity 140ms ease,
+    transform 180ms ease;
+}
+.setup-account-action-enter-from {
+  opacity: 0;
+  transform: translateY(5px);
+}
+.setup-account-action-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
 }
 .setup-cloud-connected {
   align-items: center;
diff --git a/frontend/src/views/apps/SettingsApp.vue b/frontend/src/views/apps/SettingsApp.vue
index 5a0ac3a..001dfed 100644
--- a/frontend/src/views/apps/SettingsApp.vue
+++ b/frontend/src/views/apps/SettingsApp.vue
@@ -4,7 +4,6 @@ import {
   Bluetooth,
   Camera,
   Check,
-  Cloud,
   EyeOff,
   KeyRound,
   Images,
@@ -1577,17 +1576,8 @@ onBeforeUnmount(() => {
       class="settings-reset-overlay"
       aria-live="polite"
     >
-      <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">
+        <div class="settings-reset-symbol" aria-hidden="true">
           <svg viewBox="0 0 104 104">
             <circle class="settings-reset-ring-track" cx="52" cy="52" r="46" />
             <circle
@@ -1602,45 +1592,33 @@ onBeforeUnmount(() => {
               "
             />
           </svg>
-          <div class="settings-reset-device">
-            <Smartphone :size="37" :stroke-width="1.45" />
-            <span class="settings-reset-device__scan" />
+          <div class="settings-reset-symbol__icon">
+            <Smartphone :size="34" :stroke-width="1.55" />
           </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-copy">
+          <strong>{{ Math.floor(factoryResetProgress) }}%</strong>
+          <span>{{ factoryResetSecondsRemaining }}s</span>
+        </div>
         <div class="settings-reset-progress" role="progressbar" :aria-valuenow="Math.floor(factoryResetProgress)" aria-valuemin="0" aria-valuemax="100">
           <span :style="{ width: `${factoryResetProgress}%` }" />
         </div>
+        <p class="settings-reset-detail">{{ factoryResetPhase.detail }}</p>
 
-        <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 class="settings-reset-assurance">
+          <span class="settings-reset-assurance__icon">
+            <ShieldCheck :size="18" :stroke-width="1.8" />
+          </span>
+          <span>
+            <strong>{{ phone.t('Apps.settings.factoryResetSimSafe') }}</strong>
+            <small>{{ phone.t('Apps.settings.factoryResetCloudSafe') }}</small>
+          </span>
         </div>
         <p class="settings-reset-warning">{{ phone.t('Apps.settings.factoryResetWarning') }}</p>
       </div>
@@ -2139,79 +2117,31 @@ onBeforeUnmount(() => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  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;
+  padding: 52px 28px 28px;
+  background: #000000;
   color: #ffffff;
   text-align: center;
 }
 
 .settings-reset-content {
-  position: relative;
-  z-index: 1;
   display: flex;
   width: 100%;
-  max-width: 310px;
+  max-width: 294px;
   flex-direction: column;
   align-items: center;
 }
 
-.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 {
+.settings-reset-symbol {
   position: relative;
   display: grid;
-  width: 112px;
-  height: 112px;
-  margin-top: 26px;
+  width: 116px;
+  height: 116px;
   place-items: center;
 }
 
-.settings-reset-orbit svg {
+.settings-reset-symbol svg {
   position: absolute;
-  inset: 4px;
+  inset: 6px;
   width: 104px;
   height: 104px;
   overflow: visible;
@@ -2224,73 +2154,62 @@ onBeforeUnmount(() => {
   stroke-width: 2.6;
 }
 
-.settings-reset-ring-track { stroke: rgb(255 255 255 / 10%); }
+.settings-reset-ring-track { stroke: rgb(255 255 255 / 12%); }
 .settings-reset-ring-value {
-  stroke: #2997ff;
+  stroke: #0a84ff;
   stroke-linecap: round;
-  filter: drop-shadow(0 0 6px rgb(41 151 255 / 75%));
   transition: stroke-dashoffset 120ms linear;
 }
 
-.settings-reset-device {
-  position: relative;
+.settings-reset-symbol__icon {
   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%);
+  width: 76px;
+  height: 76px;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 24px;
+  background: rgb(255 255 255 / 7%);
+  color: rgb(255 255 255 / 92%);
   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;
-  font-size: 34px;
-  font-variant-numeric: tabular-nums;
-  letter-spacing: -0.04em;
-  line-height: 1;
-}
+.settings-reset-heading { margin-top: 28px; }
 
 .settings-reset-heading h2 {
-  margin: 10px 0 0;
-  font-size: 19px;
-  letter-spacing: -0.02em;
+  margin: 0;
+  font-size: 22px;
+  letter-spacing: -0.035em;
 }
 
 .settings-reset-heading p {
-  margin: 5px 0 0;
-  color: #66b5ff;
+  margin: 7px 0 0;
+  color: rgb(255 255 255 / 54%);
+  font-size: 13px;
+}
+
+.settings-reset-progress-copy {
+  display: flex;
+  width: 100%;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-top: 34px;
+}
+
+.settings-reset-progress-copy strong {
+  font-size: 15px;
+  font-variant-numeric: tabular-nums;
+}
+
+.settings-reset-progress-copy span {
+  color: rgb(255 255 255 / 44%);
   font-size: 12px;
-  font-weight: 600;
+  font-variant-numeric: tabular-nums;
 }
 
 .settings-reset-progress {
   width: 100%;
-  height: 5px;
+  height: 4px;
   overflow: hidden;
-  margin-top: 22px;
+  margin-top: 9px;
   border-radius: 999px;
   background: rgb(255 255 255 / 10%);
 }
@@ -2299,103 +2218,65 @@ onBeforeUnmount(() => {
   display: block;
   height: 100%;
   border-radius: inherit;
-  background: linear-gradient(90deg, #087cff, #55b8ff);
-  box-shadow: 0 0 10px rgb(41 151 255 / 60%);
+  background: #0a84ff;
   transition: width 120ms linear;
 }
 
-.settings-reset-phase-card {
+.settings-reset-detail {
   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%);
+  margin: 9px 0 0;
+  color: rgb(255 255 255 / 48%);
+  font-size: 11px;
+  text-align: left;
 }
 
-.settings-reset-phase-card__topline {
+.settings-reset-assurance {
   display: flex;
+  width: 100%;
   align-items: center;
-  justify-content: space-between;
-  color: rgb(255 255 255 / 68%);
-  font-size: 10px;
+  gap: 12px;
+  margin-top: 30px;
+  padding: 13px 14px;
+  border: 1px solid rgb(255 255 255 / 9%);
+  border-radius: 16px;
+  background: rgb(255 255 255 / 5%);
+  text-align: left;
 }
 
-.settings-reset-phase-card__topline strong {
-  color: rgb(255 255 255 / 88%);
-  font-variant-numeric: tabular-nums;
-}
-
-.settings-reset-steps {
-  display: flex;
-  gap: 6px;
-  margin-top: 10px;
-}
-
-.settings-reset-steps > span {
+.settings-reset-assurance__icon {
   display: grid;
-  height: 4px;
-  flex: 1;
-  border-radius: 99px;
-  background: rgb(255 255 255 / 10%);
-  color: #ffffff;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
+  border-radius: 50%;
+  background: rgb(10 132 255 / 14%);
+  color: #5eb0ff;
   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 {
+.settings-reset-assurance > span:last-child {
   display: flex;
-  gap: 8px;
-  margin-top: 15px;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
 }
 
-.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;
+.settings-reset-assurance strong {
+  font-size: 11px;
   font-weight: 600;
 }
 
+.settings-reset-assurance small {
+  color: rgb(255 255 255 / 45%);
+  font-size: 10px;
+}
+
 .settings-reset-warning {
-  max-width: 270px;
-  margin: 11px 0 0;
-  color: rgb(255 255 255 / 42%);
+  max-width: 258px;
+  margin: 14px 0 0;
+  color: rgb(255 255 255 / 34%);
   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; }
+  line-height: 14px;
 }
 
 .settings-dialog-button--danger {