From 113bea7da3b2630b7142eb4cbc200e6dd121c26f Mon Sep 17 00:00:00 2001
From: Lewis <lu5a@proton.me>
Date: Wed, 18 Mar 2026 07:18:08 +0200
Subject: [PATCH] refactor(frontend): extract migration component styles +
 migration.css

---
 .../migration/AppPasswordStep.svelte          |  31 ---
 .../migration/ChooseHandleStep.svelte         | 120 ----------
 .../migration/EmailVerifyStep.svelte          |   2 +-
 .../components/migration/InboundWizard.svelte |  36 +--
 .../migration/OfflineInboundWizard.svelte     |   1 -
 .../migration/PasskeySetupStep.svelte         |  10 -
 .../src/lib/registration/DidDocStep.svelte    |  76 -------
 .../src/lib/registration/KeyChoiceStep.svelte |  70 ------
 .../lib/registration/VerificationStep.svelte  |  39 +---
 frontend/src/routes/Migration.svelte          | 210 ------------------
 frontend/src/styles/migration.css             | 169 ++++++++++----
 11 files changed, 126 insertions(+), 638 deletions(-)

diff --git a/frontend/src/components/migration/AppPasswordStep.svelte b/frontend/src/components/migration/AppPasswordStep.svelte
index 50d4111..972a824 100644
--- a/frontend/src/components/migration/AppPasswordStep.svelte
+++ b/frontend/src/components/migration/AppPasswordStep.svelte
@@ -53,34 +53,3 @@
     </button>
   </div>
 </div>
-
-<style>
-  .app-password-display {
-    background: var(--bg-card);
-    border: 2px solid var(--accent);
-    border-radius: var(--radius-xl);
-    padding: var(--space-6);
-    text-align: center;
-    margin: var(--space-4) 0;
-  }
-  .app-password-label {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    margin-bottom: var(--space-4);
-  }
-  .app-password-code {
-    display: block;
-    font-size: var(--text-xl);
-    font-family: ui-monospace, monospace;
-    letter-spacing: 0.1em;
-    padding: var(--space-5);
-    background: var(--bg-input);
-    border-radius: var(--radius-md);
-    margin-bottom: var(--space-4);
-    user-select: all;
-  }
-  .copy-btn {
-    padding: var(--space-3) var(--space-5);
-    font-size: var(--text-sm);
-  }
-</style>
diff --git a/frontend/src/components/migration/ChooseHandleStep.svelte b/frontend/src/components/migration/ChooseHandleStep.svelte
index 2a081eb..71f19f2 100644
--- a/frontend/src/components/migration/ChooseHandleStep.svelte
+++ b/frontend/src/components/migration/ChooseHandleStep.svelte
@@ -281,123 +281,3 @@
     </button>
   </div>
 </div>
-
-<style>
-  .handle-choice-options {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
-  .handle-choice-option {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    padding: var(--space-4);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    transition: border-color var(--transition-normal), background var(--transition-normal);
-  }
-
-  .handle-choice-option:hover {
-    border-color: var(--accent);
-  }
-
-  .handle-choice-option.selected {
-    border-color: var(--accent);
-    background: var(--accent-muted);
-  }
-
-  .handle-choice-option input[type="radio"] {
-    flex-shrink: 0;
-    width: 18px;
-    height: 18px;
-    margin: 0;
-  }
-
-  .handle-choice-content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-  }
-
-  .handle-preview {
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-
-  .existing-handle-display {
-    display: flex;
-    align-items: center;
-    gap: var(--space-4);
-    padding: var(--space-4);
-    background: var(--bg-secondary);
-    border-radius: var(--radius-lg);
-    margin-bottom: var(--space-4);
-  }
-
-  .handle-value {
-    font-family: var(--font-mono);
-    font-size: var(--text-base);
-  }
-
-  .verified-badge {
-    font-size: var(--text-xs);
-    padding: var(--space-1) var(--space-3);
-    background: var(--success-bg);
-    color: var(--success-text);
-    border-radius: var(--radius-md);
-  }
-
-  .verification-instructions {
-    background: var(--bg-secondary);
-    padding: var(--space-5);
-    border-radius: var(--radius-lg);
-    margin-bottom: var(--space-4);
-  }
-
-  .instruction-header {
-    margin: 0 0 var(--space-4) 0;
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-
-  .instruction-or {
-    margin: var(--space-3) 0;
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-    text-align: center;
-  }
-
-  .verification-record {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-  }
-
-  .verification-record code {
-    font-size: var(--text-sm);
-    padding: var(--space-3);
-    background: var(--bg-tertiary);
-    border-radius: var(--radius-md);
-    overflow-x: auto;
-    word-break: break-all;
-  }
-
-  .record-content {
-    font-size: var(--text-xs);
-    color: var(--text-secondary);
-    padding-left: var(--space-3);
-  }
-
-  .record-content code {
-    padding: var(--space-1) var(--space-2);
-    font-size: var(--text-xs);
-  }
-
-  .verify-btn {
-    width: 100%;
-  }
-</style>
diff --git a/frontend/src/components/migration/EmailVerifyStep.svelte b/frontend/src/components/migration/EmailVerifyStep.svelte
index 1def323..6a654ad 100644
--- a/frontend/src/components/migration/EmailVerifyStep.svelte
+++ b/frontend/src/components/migration/EmailVerifyStep.svelte
@@ -39,7 +39,7 @@
   {/if}
 
   <form onsubmit={onSubmit}>
-    <div class="field">
+    <div>
       <label for="email-verify-token">{$_('migration.inbound.emailVerify.tokenLabel')}</label>
       <input
         id="email-verify-token"
diff --git a/frontend/src/components/migration/InboundWizard.svelte b/frontend/src/components/migration/InboundWizard.svelte
index 80ddc59..3e363f9 100644
--- a/frontend/src/components/migration/InboundWizard.svelte
+++ b/frontend/src/components/migration/InboundWizard.svelte
@@ -4,7 +4,6 @@
   import { getErrorMessage } from '../../lib/migration/types'
   import { base64UrlEncode, prepareWebAuthnCreationOptions } from '../../lib/migration/atproto-client'
   import { _ } from '../../lib/i18n'
-  import '../../styles/migration.css'
   import ErrorStep from './ErrorStep.svelte'
   import SuccessStep from './SuccessStep.svelte'
   import ChooseHandleStep from './ChooseHandleStep.svelte'
@@ -418,7 +417,7 @@
       {/if}
 
       <form onsubmit={handleSourceHandleSubmit}>
-        <div class="field">
+        <div>
           <label for="source-handle">{$_('migration.inbound.sourceAuth.handle')}</label>
           <input
             id="source-handle"
@@ -595,7 +594,7 @@
       </div>
 
       <form onsubmit={submitPlcToken}>
-        <div class="field">
+        <div>
           <label for="plc-token">{$_('migration.inbound.plcToken.tokenLabel')}</label>
           <input
             id="plc-token"
@@ -713,34 +712,3 @@
     <ErrorStep error={flow.state.error} onStartOver={onBack} />
   {/if}
 </div>
-
-<style>
-  .resume-info {
-    margin-bottom: var(--space-5);
-  }
-  .resume-info h3 {
-    margin: 0 0 var(--space-3) 0;
-    font-size: var(--text-base);
-  }
-  .resume-details {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-  }
-  .resume-row {
-    display: flex;
-    justify-content: space-between;
-    font-size: var(--text-sm);
-  }
-  .resume-row .label {
-    color: var(--text-secondary);
-  }
-  .resume-row .value {
-    font-weight: var(--font-medium);
-  }
-  .resume-note {
-    margin-top: var(--space-3);
-    font-size: var(--text-sm);
-    font-style: italic;
-  }
-</style>
diff --git a/frontend/src/components/migration/OfflineInboundWizard.svelte b/frontend/src/components/migration/OfflineInboundWizard.svelte
index 256b8c1..6df2922 100644
--- a/frontend/src/components/migration/OfflineInboundWizard.svelte
+++ b/frontend/src/components/migration/OfflineInboundWizard.svelte
@@ -4,7 +4,6 @@
   import { getErrorMessage } from '../../lib/migration/types'
   import { base64UrlEncode, prepareWebAuthnCreationOptions } from '../../lib/migration/atproto-client'
   import { _ } from '../../lib/i18n'
-  import '../../styles/migration.css'
   import ErrorStep from './ErrorStep.svelte'
   import SuccessStep from './SuccessStep.svelte'
   import ChooseHandleStep from './ChooseHandleStep.svelte'
diff --git a/frontend/src/components/migration/PasskeySetupStep.svelte b/frontend/src/components/migration/PasskeySetupStep.svelte
index e40330a..df8a835 100644
--- a/frontend/src/components/migration/PasskeySetupStep.svelte
+++ b/frontend/src/components/migration/PasskeySetupStep.svelte
@@ -48,13 +48,3 @@
     </button>
   </div>
 </div>
-
-<style>
-  .passkey-section {
-    margin-top: 16px;
-  }
-  .passkey-section button {
-    width: 100%;
-    margin-top: 12px;
-  }
-</style>
diff --git a/frontend/src/lib/registration/DidDocStep.svelte b/frontend/src/lib/registration/DidDocStep.svelte
index 7741ea5..a8f0c98 100644
--- a/frontend/src/lib/registration/DidDocStep.svelte
+++ b/frontend/src/lib/registration/DidDocStep.svelte
@@ -88,79 +88,3 @@
     </button>
   {/if}
 </div>
-
-<style>
-  .did-doc-step {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-  }
-
-  .warning-box {
-    padding: var(--space-5);
-    background: var(--warning-bg);
-    border: 1px solid var(--warning-border);
-    border-radius: var(--radius-lg);
-    font-size: var(--text-sm);
-  }
-
-  .warning-box strong {
-    display: block;
-    margin-bottom: var(--space-3);
-    color: var(--warning-text);
-  }
-
-  .warning-box p {
-    margin: 0;
-    color: var(--warning-text);
-  }
-
-  .did-url {
-    display: block;
-    margin-top: var(--space-3);
-    padding: var(--space-3);
-    background: var(--bg-input);
-    border-radius: var(--radius-md);
-    font-size: var(--text-sm);
-    word-break: break-all;
-  }
-
-  .did-doc-display {
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-  }
-
-  .did-doc-code {
-    margin: 0;
-    padding: var(--space-4);
-    background: var(--bg-input);
-    font-size: var(--text-xs);
-    overflow-x: auto;
-    white-space: pre;
-    max-height: 300px;
-    overflow-y: auto;
-  }
-
-  .copy-btn {
-    width: 100%;
-    border-radius: 0;
-    margin: 0;
-    padding: var(--space-3) var(--space-5);
-    font-size: var(--text-sm);
-  }
-
-  .checkbox-label {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    cursor: pointer;
-    font-weight: var(--font-normal);
-  }
-
-  .checkbox-label input[type="checkbox"] {
-    width: auto;
-    padding: 0;
-  }
-</style>
diff --git a/frontend/src/lib/registration/KeyChoiceStep.svelte b/frontend/src/lib/registration/KeyChoiceStep.svelte
index 5499b56..153aaf6 100644
--- a/frontend/src/lib/registration/KeyChoiceStep.svelte
+++ b/frontend/src/lib/registration/KeyChoiceStep.svelte
@@ -45,73 +45,3 @@
     Back
   </button>
 </div>
-
-<style>
-  .key-choice-step {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-  }
-
-  .info-box {
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-lg);
-    padding: var(--space-5);
-    font-size: var(--text-sm);
-  }
-
-  .info-box strong {
-    display: block;
-    margin-bottom: var(--space-3);
-  }
-
-  .info-box p {
-    margin: 0;
-    color: var(--text-secondary);
-  }
-
-  .key-choice-options {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
-  .key-choice-btn {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--space-2);
-    padding: var(--space-5);
-    background: var(--bg-card);
-    border: 2px solid var(--border-color);
-    border-radius: var(--radius-lg);
-    text-align: left;
-    cursor: pointer;
-    transition: border-color 0.2s;
-  }
-
-  .key-choice-btn:hover:not(:disabled) {
-    border-color: var(--accent);
-  }
-
-  .key-choice-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .key-choice-title {
-    font-weight: var(--font-semibold);
-    color: var(--text-primary);
-  }
-
-  .key-choice-desc {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-
-  .loading {
-    text-align: center;
-    color: var(--text-secondary);
-  }
-</style>
diff --git a/frontend/src/lib/registration/VerificationStep.svelte b/frontend/src/lib/registration/VerificationStep.svelte
index 9270d23..d97182c 100644
--- a/frontend/src/lib/registration/VerificationStep.svelte
+++ b/frontend/src/lib/registration/VerificationStep.svelte
@@ -129,7 +129,7 @@
     {/if}
 
     <form onsubmit={handleSubmit}>
-      <div class="field">
+      <div>
         <label for="verification-code">Verification Code</label>
         <input
           id="verification-code"
@@ -154,40 +154,3 @@
     </form>
   {/if}
 </div>
-
-<style>
-  .verification-step {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-  }
-
-  .info-text {
-    color: var(--text-secondary);
-    margin: 0;
-  }
-
-  .info-text.waiting {
-    font-size: var(--text-sm);
-  }
-
-  .info-text code {
-    font-family: var(--font-mono, monospace);
-    background: var(--bg-secondary);
-    padding: 0.1em 0.3em;
-    border-radius: var(--radius-sm);
-  }
-
-  .code-input {
-    font-family: var(--font-mono, monospace);
-    font-size: var(--text-base);
-    letter-spacing: 0.05em;
-  }
-
-  .hint {
-    display: block;
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-    margin-top: var(--space-1);
-  }
-</style>
diff --git a/frontend/src/routes/Migration.svelte b/frontend/src/routes/Migration.svelte
index d3f4abd..8e428d2 100644
--- a/frontend/src/routes/Migration.svelte
+++ b/frontend/src/routes/Migration.svelte
@@ -230,7 +230,6 @@
 
   {#if oauthLoading}
     <div class="loading">
-      <div class="spinner md"></div>
       <p>{$_('migration.oauthCompleting')}</p>
     </div>
   {:else if oauthError}
@@ -304,212 +303,3 @@
   {/if}
 </div>
 
-<style>
-  .migration-page {
-    max-width: var(--width-lg);
-    margin: var(--space-9) auto;
-    padding: var(--space-7);
-  }
-
-  .page-header {
-    text-align: center;
-    margin-bottom: var(--space-8);
-  }
-
-  .page-header h1 {
-    margin: 0 0 var(--space-3) 0;
-  }
-
-  .subtitle {
-    color: var(--text-secondary);
-    margin: 0;
-    font-size: var(--text-lg);
-  }
-
-  .direction-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: var(--space-6);
-    margin-bottom: var(--space-8);
-  }
-
-  .direction-card {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-xl);
-    padding: var(--space-6);
-    text-align: left;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .direction-card:hover:not(:disabled) {
-    border-color: var(--accent);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  }
-
-  .direction-card:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .direction-card h2 {
-    margin: 0 0 var(--space-3) 0;
-    font-size: var(--text-xl);
-    color: var(--text-primary);
-  }
-
-  .direction-card p {
-    color: var(--text-secondary);
-    margin: 0 0 var(--space-4) 0;
-    font-size: var(--text-sm);
-  }
-
-  .features {
-    margin: 0;
-    padding-left: var(--space-5);
-    color: var(--text-secondary);
-    font-size: var(--text-sm);
-  }
-
-  .features li {
-    margin-bottom: var(--space-2);
-  }
-
-  .info-section {
-    background: var(--bg-secondary);
-    border-radius: var(--radius-xl);
-    padding: var(--space-6);
-  }
-
-  .info-section h3 {
-    margin: 0 0 var(--space-3) 0;
-    font-size: var(--text-lg);
-  }
-
-  .info-section h3:not(:first-child) {
-    margin-top: var(--space-6);
-  }
-
-  .info-section p {
-    color: var(--text-secondary);
-    line-height: var(--leading-relaxed);
-    margin: 0;
-  }
-
-  .info-section ul {
-    color: var(--text-secondary);
-    padding-left: var(--space-5);
-    margin: var(--space-3) 0 0 0;
-  }
-
-  .info-section li {
-    margin-bottom: var(--space-2);
-  }
-
-  .warning-box {
-    margin-top: var(--space-6);
-    padding: var(--space-5);
-    background: var(--warning-bg);
-    border: 1px solid var(--warning-border);
-    border-radius: var(--radius-lg);
-    font-size: var(--text-sm);
-  }
-
-  .warning-box strong {
-    color: var(--warning-text);
-  }
-
-  .warning-box a {
-    display: inline;
-    margin-top: var(--space-2);
-  }
-
-  .modal-overlay {
-    position: fixed;
-    inset: 0;
-    background: var(--overlay-bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: var(--z-modal);
-  }
-
-  .modal {
-    background: var(--bg-primary);
-    border-radius: var(--radius-xl);
-    padding: var(--space-6);
-    max-width: var(--width-sm);
-    width: 90%;
-  }
-
-  .modal h2 {
-    margin: 0 0 var(--space-4) 0;
-  }
-
-  .modal p {
-    color: var(--text-secondary);
-    margin: 0 0 var(--space-4) 0;
-  }
-
-  .resume-details {
-    background: var(--bg-secondary);
-    border-radius: var(--radius-lg);
-    padding: var(--space-4);
-    margin-bottom: var(--space-4);
-  }
-
-  .detail-row {
-    display: flex;
-    justify-content: space-between;
-    padding: var(--space-2) 0;
-    font-size: var(--text-sm);
-  }
-
-  .detail-row:not(:last-child) {
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .detail-row .label {
-    color: var(--text-secondary);
-  }
-
-  .detail-row .value {
-    font-weight: var(--font-medium);
-  }
-
-  .note {
-    font-size: var(--text-sm);
-    font-style: italic;
-  }
-
-  .modal-actions {
-    display: flex;
-    gap: var(--space-3);
-    justify-content: flex-end;
-  }
-
-  .oauth-error {
-    max-width: 500px;
-    margin: 0 auto;
-    text-align: center;
-    padding: var(--space-8);
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    border-radius: var(--radius-xl);
-  }
-
-  .oauth-error h2 {
-    margin: 0 0 var(--space-4) 0;
-    color: var(--error-text);
-  }
-
-  .oauth-error p {
-    color: var(--text-secondary);
-    margin: 0 0 var(--space-5) 0;
-  }
-</style>
diff --git a/frontend/src/styles/migration.css b/frontend/src/styles/migration.css
index 85e1a9d..12a0b92 100644
--- a/frontend/src/styles/migration.css
+++ b/frontend/src/styles/migration.css
@@ -28,9 +28,7 @@
 .step-dot {
   width: 24px;
   height: 24px;
-  border-radius: 50%;
   background: var(--bg-secondary);
-  border: 2px solid var(--border-color);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -82,7 +80,6 @@
 
 .step-content {
   background: var(--bg-secondary);
-  border-radius: var(--radius-xl);
   padding: var(--space-6);
 }
 
@@ -97,8 +94,6 @@
 
 .info-box {
   background: var(--accent-muted);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-lg);
   padding: var(--space-5);
   margin-bottom: var(--space-5);
 }
@@ -126,8 +121,6 @@
 
 .warning-box {
   background: var(--warning-bg);
-  border: 1px solid var(--warning-border);
-  border-radius: var(--radius-lg);
   padding: var(--space-5);
   margin-bottom: var(--space-5);
   font-size: var(--text-sm);
@@ -172,7 +165,6 @@
 
 .current-info {
   background: var(--bg-primary);
-  border-radius: var(--radius-lg);
   padding: var(--space-4);
   margin-bottom: var(--space-5);
   display: flex;
@@ -195,7 +187,6 @@
 
 .review-card {
   background: var(--bg-primary);
-  border-radius: var(--radius-lg);
   padding: var(--space-4);
   margin-bottom: var(--space-5);
 }
@@ -243,7 +234,7 @@
 }
 
 .progress-item.active {
-  color: var(--accent);
+  color: var(--secondary);
 }
 
 .progress-item .icon {
@@ -254,7 +245,6 @@
 .progress-bar {
   height: 8px;
   background: var(--bg-primary);
-  border-radius: var(--radius-md);
   overflow: hidden;
   margin-bottom: var(--space-4);
 }
@@ -262,7 +252,6 @@
 .progress-fill {
   height: 100%;
   background: var(--accent);
-  transition: width var(--transition-slow);
 }
 
 .status-text {
@@ -278,7 +267,6 @@
 .blob-progress-bar {
   height: 8px;
   background: var(--bg-primary);
-  border-radius: var(--radius-md);
   overflow: hidden;
   margin-bottom: var(--space-2);
 }
@@ -286,7 +274,6 @@
 .blob-progress-fill {
   height: 100%;
   background: var(--accent);
-  transition: width var(--transition-slow);
 }
 
 .blob-progress-text {
@@ -305,7 +292,6 @@
   height: 64px;
   background: var(--success-bg);
   color: var(--success-text);
-  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -315,7 +301,6 @@
 
 .success-details {
   background: var(--bg-primary);
-  border-radius: var(--radius-lg);
   padding: var(--space-4);
   margin: var(--space-5) 0;
   text-align: left;
@@ -347,8 +332,6 @@
 
 .code-block {
   background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-lg);
   padding: var(--space-4);
   margin-bottom: var(--space-5);
   overflow-x: auto;
@@ -374,22 +357,17 @@ label.auth-option {
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-4);
-  border: 2px solid var(--border-color);
-  border-radius: var(--radius-lg);
   cursor: pointer;
   margin-bottom: 0;
-  transition:
-    border-color var(--transition-normal),
-    background-color var(--transition-normal);
 }
 
 .auth-option:hover {
-  border-color: var(--accent);
+  border-color: var(--secondary);
   background: var(--bg-hover);
 }
 
 .auth-option.selected {
-  border-color: var(--accent);
+  border-color: var(--secondary);
   background: var(--accent-muted);
 }
 
@@ -423,15 +401,6 @@ label.auth-option {
   padding: var(--space-8);
 }
 
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid var(--border-color);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
 .passkey-section {
   margin-top: var(--space-5);
   text-align: center;
@@ -444,7 +413,6 @@ label.auth-option {
 
 .app-password-display {
   background: var(--bg-primary);
-  border-radius: var(--radius-lg);
   padding: var(--space-5);
   margin-bottom: var(--space-5);
   text-align: center;
@@ -463,7 +431,6 @@ label.auth-option {
   letter-spacing: 0.1em;
   padding: var(--space-4);
   background: var(--bg-tertiary);
-  border-radius: var(--radius-md);
   margin-bottom: var(--space-4);
   user-select: all;
 }
@@ -474,7 +441,6 @@ label.auth-option {
 
 .current-account {
   background: var(--bg-primary);
-  border-radius: var(--radius-lg);
   padding: var(--space-4);
   margin-bottom: var(--space-5);
   display: flex;
@@ -493,7 +459,6 @@ label.auth-option {
 
 .server-info {
   background: var(--bg-primary);
-  border-radius: var(--radius-lg);
   padding: var(--space-4);
   margin-top: var(--space-5);
 }
@@ -519,7 +484,7 @@ label.auth-option {
   display: inline-block;
   margin-top: var(--space-2);
   margin-right: var(--space-3);
-  color: var(--accent);
+  color: var(--secondary);
   font-size: var(--text-sm);
 }
 
@@ -534,7 +499,6 @@ label.auth-option {
 
 .next-steps {
   background: var(--accent-muted);
-  border-radius: var(--radius-lg);
   padding: var(--space-5);
   margin: var(--space-5) 0;
   text-align: left;
@@ -554,7 +518,7 @@ label.auth-option {
 }
 
 .next-steps a {
-  color: var(--accent);
+  color: var(--secondary);
 }
 
 .resume-info {
@@ -600,7 +564,6 @@ label.auth-option {
   align-items: center;
   padding: var(--space-3);
   background: var(--bg-primary);
-  border-radius: var(--radius-md);
 }
 
 .file-name {
@@ -618,7 +581,6 @@ label.auth-option {
   font-size: var(--text-sm);
   padding: var(--space-3);
   border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
   background: var(--bg-input);
   color: var(--text-primary);
   resize: vertical;
@@ -626,23 +588,136 @@ label.auth-option {
 
 .step-content textarea:focus {
   outline: none;
-  border-color: var(--accent);
+  border-color: var(--secondary);
 }
 
 .message {
   padding: var(--space-4);
-  border-radius: var(--radius-lg);
   margin-bottom: var(--space-4);
 }
 
 .message.success {
   background: var(--success-bg);
   color: var(--success-text);
-  border: 1px solid var(--success-border);
 }
 
 .message.error {
   background: var(--error-bg);
   color: var(--error-text);
-  border: 1px solid var(--error-border);
+}
+
+.handle-choice-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.handle-choice-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  cursor: pointer;
+}
+
+.handle-choice-option:hover {
+  border-color: var(--secondary);
+}
+
+.handle-choice-option.selected {
+  border-color: var(--secondary);
+  background: var(--accent-muted);
+}
+
+.handle-choice-option input[type="radio"] {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+}
+
+.handle-choice-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.handle-preview {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.existing-handle-display {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  background: var(--bg-secondary);
+  margin-bottom: var(--space-4);
+}
+
+.handle-value {
+  font-family: var(--font-mono);
+  font-size: var(--text-base);
+}
+
+.verified-badge {
+  font-size: var(--text-xs);
+  padding: var(--space-1) var(--space-3);
+  background: var(--success-bg);
+  color: var(--success-text);
+}
+
+.verification-instructions {
+  background: var(--bg-secondary);
+  padding: var(--space-5);
+  margin-bottom: var(--space-4);
+}
+
+.instruction-header {
+  margin: 0 0 var(--space-4) 0;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.instruction-or {
+  margin: var(--space-3) 0;
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.verification-record {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.verification-record code {
+  font-size: var(--text-sm);
+  padding: var(--space-3);
+  background: var(--bg-tertiary);
+  overflow-x: auto;
+  word-break: break-all;
+}
+
+.record-content {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  padding-left: var(--space-3);
+}
+
+.record-content code {
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-xs);
+}
+
+.verify-btn {
+  width: 100%;
+}
+
+.passkey-section button {
+  width: 100%;
+  margin-top: 12px;
 }