refactor(frontend): extract migration component styles + migration.css #65

-31

frontend/src/components/migration/AppPasswordStep.svelte

··· 53 53 </button> 54 54 </div> 55 55 </div> 56 56 - 57 57 - <style> 58 58 - .app-password-display { 59 59 - background: var(--bg-card); 60 60 - border: 2px solid var(--accent); 61 61 - border-radius: var(--radius-xl); 62 62 - padding: var(--space-6); 63 63 - text-align: center; 64 64 - margin: var(--space-4) 0; 65 65 - } 66 66 - .app-password-label { 67 67 - font-size: var(--text-sm); 68 68 - color: var(--text-secondary); 69 69 - margin-bottom: var(--space-4); 70 70 - } 71 71 - .app-password-code { 72 72 - display: block; 73 73 - font-size: var(--text-xl); 74 74 - font-family: ui-monospace, monospace; 75 75 - letter-spacing: 0.1em; 76 76 - padding: var(--space-5); 77 77 - background: var(--bg-input); 78 78 - border-radius: var(--radius-md); 79 79 - margin-bottom: var(--space-4); 80 80 - user-select: all; 81 81 - } 82 82 - .copy-btn { 83 83 - padding: var(--space-3) var(--space-5); 84 84 - font-size: var(--text-sm); 85 85 - } 86 86 - </style>

-120

frontend/src/components/migration/ChooseHandleStep.svelte

··· 281 281 </button> 282 282 </div> 283 283 </div> 284 284 - 285 285 - <style> 286 286 - .handle-choice-options { 287 287 - display: flex; 288 288 - flex-direction: column; 289 289 - gap: var(--space-3); 290 290 - } 291 291 - 292 292 - .handle-choice-option { 293 293 - display: flex; 294 294 - align-items: center; 295 295 - gap: var(--space-3); 296 296 - padding: var(--space-4); 297 297 - border: 1px solid var(--border-color); 298 298 - border-radius: var(--radius-lg); 299 299 - cursor: pointer; 300 300 - transition: border-color var(--transition-normal), background var(--transition-normal); 301 301 - } 302 302 - 303 303 - .handle-choice-option:hover { 304 304 - border-color: var(--accent); 305 305 - } 306 306 - 307 307 - .handle-choice-option.selected { 308 308 - border-color: var(--accent); 309 309 - background: var(--accent-muted); 310 310 - } 311 311 - 312 312 - .handle-choice-option input[type="radio"] { 313 313 - flex-shrink: 0; 314 314 - width: 18px; 315 315 - height: 18px; 316 316 - margin: 0; 317 317 - } 318 318 - 319 319 - .handle-choice-content { 320 320 - display: flex; 321 321 - flex-direction: column; 322 322 - gap: var(--space-1); 323 323 - } 324 324 - 325 325 - .handle-preview { 326 326 - font-family: var(--font-mono); 327 327 - font-size: var(--text-sm); 328 328 - color: var(--text-secondary); 329 329 - } 330 330 - 331 331 - .existing-handle-display { 332 332 - display: flex; 333 333 - align-items: center; 334 334 - gap: var(--space-4); 335 335 - padding: var(--space-4); 336 336 - background: var(--bg-secondary); 337 337 - border-radius: var(--radius-lg); 338 338 - margin-bottom: var(--space-4); 339 339 - } 340 340 - 341 341 - .handle-value { 342 342 - font-family: var(--font-mono); 343 343 - font-size: var(--text-base); 344 344 - } 345 345 - 346 346 - .verified-badge { 347 347 - font-size: var(--text-xs); 348 348 - padding: var(--space-1) var(--space-3); 349 349 - background: var(--success-bg); 350 350 - color: var(--success-text); 351 351 - border-radius: var(--radius-md); 352 352 - } 353 353 - 354 354 - .verification-instructions { 355 355 - background: var(--bg-secondary); 356 356 - padding: var(--space-5); 357 357 - border-radius: var(--radius-lg); 358 358 - margin-bottom: var(--space-4); 359 359 - } 360 360 - 361 361 - .instruction-header { 362 362 - margin: 0 0 var(--space-4) 0; 363 363 - font-size: var(--text-sm); 364 364 - color: var(--text-secondary); 365 365 - } 366 366 - 367 367 - .instruction-or { 368 368 - margin: var(--space-3) 0; 369 369 - font-size: var(--text-xs); 370 370 - color: var(--text-muted); 371 371 - text-align: center; 372 372 - } 373 373 - 374 374 - .verification-record { 375 375 - display: flex; 376 376 - flex-direction: column; 377 377 - gap: var(--space-2); 378 378 - } 379 379 - 380 380 - .verification-record code { 381 381 - font-size: var(--text-sm); 382 382 - padding: var(--space-3); 383 383 - background: var(--bg-tertiary); 384 384 - border-radius: var(--radius-md); 385 385 - overflow-x: auto; 386 386 - word-break: break-all; 387 387 - } 388 388 - 389 389 - .record-content { 390 390 - font-size: var(--text-xs); 391 391 - color: var(--text-secondary); 392 392 - padding-left: var(--space-3); 393 393 - } 394 394 - 395 395 - .record-content code { 396 396 - padding: var(--space-1) var(--space-2); 397 397 - font-size: var(--text-xs); 398 398 - } 399 399 - 400 400 - .verify-btn { 401 401 - width: 100%; 402 402 - } 403 403 - </style>

+1 -1

frontend/src/components/migration/EmailVerifyStep.svelte

··· 39 39 {/if} 40 40 41 41 <form onsubmit={onSubmit}> 42 42 - <div class="field"> 42 42 + <div> 43 43 <label for="email-verify-token">{$_('migration.inbound.emailVerify.tokenLabel')}</label> 44 44 <input 45 45 id="email-verify-token"

+2 -34

frontend/src/components/migration/InboundWizard.svelte

··· 4 4 import { getErrorMessage } from '../../lib/migration/types' 5 5 import { base64UrlEncode, prepareWebAuthnCreationOptions } from '../../lib/migration/atproto-client' 6 6 import { _ } from '../../lib/i18n' 7 7 - import '../../styles/migration.css' 8 7 import ErrorStep from './ErrorStep.svelte' 9 8 import SuccessStep from './SuccessStep.svelte' 10 9 import ChooseHandleStep from './ChooseHandleStep.svelte' ··· 418 417 {/if} 419 418 420 419 <form onsubmit={handleSourceHandleSubmit}> 421 421 - <div class="field"> 420 420 + <div> 422 421 <label for="source-handle">{$_('migration.inbound.sourceAuth.handle')}</label> 423 422 <input 424 423 id="source-handle" ··· 595 594 </div> 596 595 597 596 <form onsubmit={submitPlcToken}> 598 598 - <div class="field"> 597 597 + <div> 599 598 <label for="plc-token">{$_('migration.inbound.plcToken.tokenLabel')}</label> 600 599 <input 601 600 id="plc-token" ··· 713 712 <ErrorStep error={flow.state.error} onStartOver={onBack} /> 714 713 {/if} 715 714 </div> 716 716 - 717 717 - <style> 718 718 - .resume-info { 719 719 - margin-bottom: var(--space-5); 720 720 - } 721 721 - .resume-info h3 { 722 722 - margin: 0 0 var(--space-3) 0; 723 723 - font-size: var(--text-base); 724 724 - } 725 725 - .resume-details { 726 726 - display: flex; 727 727 - flex-direction: column; 728 728 - gap: var(--space-2); 729 729 - } 730 730 - .resume-row { 731 731 - display: flex; 732 732 - justify-content: space-between; 733 733 - font-size: var(--text-sm); 734 734 - } 735 735 - .resume-row .label { 736 736 - color: var(--text-secondary); 737 737 - } 738 738 - .resume-row .value { 739 739 - font-weight: var(--font-medium); 740 740 - } 741 741 - .resume-note { 742 742 - margin-top: var(--space-3); 743 743 - font-size: var(--text-sm); 744 744 - font-style: italic; 745 745 - } 746 746 - </style>

-1

frontend/src/components/migration/OfflineInboundWizard.svelte

··· 4 4 import { getErrorMessage } from '../../lib/migration/types' 5 5 import { base64UrlEncode, prepareWebAuthnCreationOptions } from '../../lib/migration/atproto-client' 6 6 import { _ } from '../../lib/i18n' 7 7 - import '../../styles/migration.css' 8 7 import ErrorStep from './ErrorStep.svelte' 9 8 import SuccessStep from './SuccessStep.svelte' 10 9 import ChooseHandleStep from './ChooseHandleStep.svelte'

-10

frontend/src/components/migration/PasskeySetupStep.svelte

··· 48 48 </button> 49 49 </div> 50 50 </div> 51 51 - 52 52 - <style> 53 53 - .passkey-section { 54 54 - margin-top: 16px; 55 55 - } 56 56 - .passkey-section button { 57 57 - width: 100%; 58 58 - margin-top: 12px; 59 59 - } 60 60 - </style>

-76

frontend/src/lib/registration/DidDocStep.svelte

··· 88 88 </button> 89 89 {/if} 90 90 </div> 91 91 - 92 92 - <style> 93 93 - .did-doc-step { 94 94 - display: flex; 95 95 - flex-direction: column; 96 96 - gap: var(--space-4); 97 97 - } 98 98 - 99 99 - .warning-box { 100 100 - padding: var(--space-5); 101 101 - background: var(--warning-bg); 102 102 - border: 1px solid var(--warning-border); 103 103 - border-radius: var(--radius-lg); 104 104 - font-size: var(--text-sm); 105 105 - } 106 106 - 107 107 - .warning-box strong { 108 108 - display: block; 109 109 - margin-bottom: var(--space-3); 110 110 - color: var(--warning-text); 111 111 - } 112 112 - 113 113 - .warning-box p { 114 114 - margin: 0; 115 115 - color: var(--warning-text); 116 116 - } 117 117 - 118 118 - .did-url { 119 119 - display: block; 120 120 - margin-top: var(--space-3); 121 121 - padding: var(--space-3); 122 122 - background: var(--bg-input); 123 123 - border-radius: var(--radius-md); 124 124 - font-size: var(--text-sm); 125 125 - word-break: break-all; 126 126 - } 127 127 - 128 128 - .did-doc-display { 129 129 - background: var(--bg-card); 130 130 - border: 1px solid var(--border-color); 131 131 - border-radius: var(--radius-lg); 132 132 - overflow: hidden; 133 133 - } 134 134 - 135 135 - .did-doc-code { 136 136 - margin: 0; 137 137 - padding: var(--space-4); 138 138 - background: var(--bg-input); 139 139 - font-size: var(--text-xs); 140 140 - overflow-x: auto; 141 141 - white-space: pre; 142 142 - max-height: 300px; 143 143 - overflow-y: auto; 144 144 - } 145 145 - 146 146 - .copy-btn { 147 147 - width: 100%; 148 148 - border-radius: 0; 149 149 - margin: 0; 150 150 - padding: var(--space-3) var(--space-5); 151 151 - font-size: var(--text-sm); 152 152 - } 153 153 - 154 154 - .checkbox-label { 155 155 - display: flex; 156 156 - align-items: center; 157 157 - gap: var(--space-3); 158 158 - cursor: pointer; 159 159 - font-weight: var(--font-normal); 160 160 - } 161 161 - 162 162 - .checkbox-label input[type="checkbox"] { 163 163 - width: auto; 164 164 - padding: 0; 165 165 - } 166 166 - </style>

-70

frontend/src/lib/registration/KeyChoiceStep.svelte

··· 45 45 Back 46 46 </button> 47 47 </div> 48 48 - 49 49 - <style> 50 50 - .key-choice-step { 51 51 - display: flex; 52 52 - flex-direction: column; 53 53 - gap: var(--space-4); 54 54 - } 55 55 - 56 56 - .info-box { 57 57 - background: var(--bg-secondary); 58 58 - border: 1px solid var(--border-color); 59 59 - border-radius: var(--radius-lg); 60 60 - padding: var(--space-5); 61 61 - font-size: var(--text-sm); 62 62 - } 63 63 - 64 64 - .info-box strong { 65 65 - display: block; 66 66 - margin-bottom: var(--space-3); 67 67 - } 68 68 - 69 69 - .info-box p { 70 70 - margin: 0; 71 71 - color: var(--text-secondary); 72 72 - } 73 73 - 74 74 - .key-choice-options { 75 75 - display: flex; 76 76 - flex-direction: column; 77 77 - gap: var(--space-3); 78 78 - } 79 79 - 80 80 - .key-choice-btn { 81 81 - display: flex; 82 82 - flex-direction: column; 83 83 - align-items: flex-start; 84 84 - gap: var(--space-2); 85 85 - padding: var(--space-5); 86 86 - background: var(--bg-card); 87 87 - border: 2px solid var(--border-color); 88 88 - border-radius: var(--radius-lg); 89 89 - text-align: left; 90 90 - cursor: pointer; 91 91 - transition: border-color 0.2s; 92 92 - } 93 93 - 94 94 - .key-choice-btn:hover:not(:disabled) { 95 95 - border-color: var(--accent); 96 96 - } 97 97 - 98 98 - .key-choice-btn:disabled { 99 99 - opacity: 0.6; 100 100 - cursor: not-allowed; 101 101 - } 102 102 - 103 103 - .key-choice-title { 104 104 - font-weight: var(--font-semibold); 105 105 - color: var(--text-primary); 106 106 - } 107 107 - 108 108 - .key-choice-desc { 109 109 - font-size: var(--text-sm); 110 110 - color: var(--text-secondary); 111 111 - } 112 112 - 113 113 - .loading { 114 114 - text-align: center; 115 115 - color: var(--text-secondary); 116 116 - } 117 117 - </style>

+1 -38

frontend/src/lib/registration/VerificationStep.svelte

··· 129 129 {/if} 130 130 131 131 <form onsubmit={handleSubmit}> 132 132 - <div class="field"> 132 132 + <div> 133 133 <label for="verification-code">Verification Code</label> 134 134 <input 135 135 id="verification-code" ··· 154 154 </form> 155 155 {/if} 156 156 </div> 157 157 - 158 158 - <style> 159 159 - .verification-step { 160 160 - display: flex; 161 161 - flex-direction: column; 162 162 - gap: var(--space-4); 163 163 - } 164 164 - 165 165 - .info-text { 166 166 - color: var(--text-secondary); 167 167 - margin: 0; 168 168 - } 169 169 - 170 170 - .info-text.waiting { 171 171 - font-size: var(--text-sm); 172 172 - } 173 173 - 174 174 - .info-text code { 175 175 - font-family: var(--font-mono, monospace); 176 176 - background: var(--bg-secondary); 177 177 - padding: 0.1em 0.3em; 178 178 - border-radius: var(--radius-sm); 179 179 - } 180 180 - 181 181 - .code-input { 182 182 - font-family: var(--font-mono, monospace); 183 183 - font-size: var(--text-base); 184 184 - letter-spacing: 0.05em; 185 185 - } 186 186 - 187 187 - .hint { 188 188 - display: block; 189 189 - color: var(--text-secondary); 190 190 - font-size: var(--text-sm); 191 191 - margin-top: var(--space-1); 192 192 - } 193 193 - </style>

-210

frontend/src/routes/Migration.svelte

··· 230 230 231 231 {#if oauthLoading} 232 232 <div class="loading"> 233 233 - <div class="spinner md"></div> 234 233 <p>{$_('migration.oauthCompleting')}</p> 235 234 </div> 236 235 {:else if oauthError} ··· 304 303 {/if} 305 304 </div> 306 305 307 307 - <style> 308 308 - .migration-page { 309 309 - max-width: var(--width-lg); 310 310 - margin: var(--space-9) auto; 311 311 - padding: var(--space-7); 312 312 - } 313 313 - 314 314 - .page-header { 315 315 - text-align: center; 316 316 - margin-bottom: var(--space-8); 317 317 - } 318 318 - 319 319 - .page-header h1 { 320 320 - margin: 0 0 var(--space-3) 0; 321 321 - } 322 322 - 323 323 - .subtitle { 324 324 - color: var(--text-secondary); 325 325 - margin: 0; 326 326 - font-size: var(--text-lg); 327 327 - } 328 328 - 329 329 - .direction-cards { 330 330 - display: grid; 331 331 - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 332 332 - gap: var(--space-6); 333 333 - margin-bottom: var(--space-8); 334 334 - } 335 335 - 336 336 - .direction-card { 337 337 - display: flex; 338 338 - flex-direction: column; 339 339 - align-items: stretch; 340 340 - background: var(--bg-secondary); 341 341 - border: 1px solid var(--border-color); 342 342 - border-radius: var(--radius-xl); 343 343 - padding: var(--space-6); 344 344 - text-align: left; 345 345 - cursor: pointer; 346 346 - transition: all 0.2s ease; 347 347 - } 348 348 - 349 349 - .direction-card:hover:not(:disabled) { 350 350 - border-color: var(--accent); 351 351 - transform: translateY(-2px); 352 352 - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 353 353 - } 354 354 - 355 355 - .direction-card:disabled { 356 356 - opacity: 0.6; 357 357 - cursor: not-allowed; 358 358 - } 359 359 - 360 360 - .direction-card h2 { 361 361 - margin: 0 0 var(--space-3) 0; 362 362 - font-size: var(--text-xl); 363 363 - color: var(--text-primary); 364 364 - } 365 365 - 366 366 - .direction-card p { 367 367 - color: var(--text-secondary); 368 368 - margin: 0 0 var(--space-4) 0; 369 369 - font-size: var(--text-sm); 370 370 - } 371 371 - 372 372 - .features { 373 373 - margin: 0; 374 374 - padding-left: var(--space-5); 375 375 - color: var(--text-secondary); 376 376 - font-size: var(--text-sm); 377 377 - } 378 378 - 379 379 - .features li { 380 380 - margin-bottom: var(--space-2); 381 381 - } 382 382 - 383 383 - .info-section { 384 384 - background: var(--bg-secondary); 385 385 - border-radius: var(--radius-xl); 386 386 - padding: var(--space-6); 387 387 - } 388 388 - 389 389 - .info-section h3 { 390 390 - margin: 0 0 var(--space-3) 0; 391 391 - font-size: var(--text-lg); 392 392 - } 393 393 - 394 394 - .info-section h3:not(:first-child) { 395 395 - margin-top: var(--space-6); 396 396 - } 397 397 - 398 398 - .info-section p { 399 399 - color: var(--text-secondary); 400 400 - line-height: var(--leading-relaxed); 401 401 - margin: 0; 402 402 - } 403 403 - 404 404 - .info-section ul { 405 405 - color: var(--text-secondary); 406 406 - padding-left: var(--space-5); 407 407 - margin: var(--space-3) 0 0 0; 408 408 - } 409 409 - 410 410 - .info-section li { 411 411 - margin-bottom: var(--space-2); 412 412 - } 413 413 - 414 414 - .warning-box { 415 415 - margin-top: var(--space-6); 416 416 - padding: var(--space-5); 417 417 - background: var(--warning-bg); 418 418 - border: 1px solid var(--warning-border); 419 419 - border-radius: var(--radius-lg); 420 420 - font-size: var(--text-sm); 421 421 - } 422 422 - 423 423 - .warning-box strong { 424 424 - color: var(--warning-text); 425 425 - } 426 426 - 427 427 - .warning-box a { 428 428 - display: inline; 429 429 - margin-top: var(--space-2); 430 430 - } 431 431 - 432 432 - .modal-overlay { 433 433 - position: fixed; 434 434 - inset: 0; 435 435 - background: var(--overlay-bg); 436 436 - display: flex; 437 437 - align-items: center; 438 438 - justify-content: center; 439 439 - z-index: var(--z-modal); 440 440 - } 441 441 - 442 442 - .modal { 443 443 - background: var(--bg-primary); 444 444 - border-radius: var(--radius-xl); 445 445 - padding: var(--space-6); 446 446 - max-width: var(--width-sm); 447 447 - width: 90%; 448 448 - } 449 449 - 450 450 - .modal h2 { 451 451 - margin: 0 0 var(--space-4) 0; 452 452 - } 453 453 - 454 454 - .modal p { 455 455 - color: var(--text-secondary); 456 456 - margin: 0 0 var(--space-4) 0; 457 457 - } 458 458 - 459 459 - .resume-details { 460 460 - background: var(--bg-secondary); 461 461 - border-radius: var(--radius-lg); 462 462 - padding: var(--space-4); 463 463 - margin-bottom: var(--space-4); 464 464 - } 465 465 - 466 466 - .detail-row { 467 467 - display: flex; 468 468 - justify-content: space-between; 469 469 - padding: var(--space-2) 0; 470 470 - font-size: var(--text-sm); 471 471 - } 472 472 - 473 473 - .detail-row:not(:last-child) { 474 474 - border-bottom: 1px solid var(--border-color); 475 475 - } 476 476 - 477 477 - .detail-row .label { 478 478 - color: var(--text-secondary); 479 479 - } 480 480 - 481 481 - .detail-row .value { 482 482 - font-weight: var(--font-medium); 483 483 - } 484 484 - 485 485 - .note { 486 486 - font-size: var(--text-sm); 487 487 - font-style: italic; 488 488 - } 489 489 - 490 490 - .modal-actions { 491 491 - display: flex; 492 492 - gap: var(--space-3); 493 493 - justify-content: flex-end; 494 494 - } 495 495 - 496 496 - .oauth-error { 497 497 - max-width: 500px; 498 498 - margin: 0 auto; 499 499 - text-align: center; 500 500 - padding: var(--space-8); 501 501 - background: var(--error-bg); 502 502 - border: 1px solid var(--error-border); 503 503 - border-radius: var(--radius-xl); 504 504 - } 505 505 - 506 506 - .oauth-error h2 { 507 507 - margin: 0 0 var(--space-4) 0; 508 508 - color: var(--error-text); 509 509 - } 510 510 - 511 511 - .oauth-error p { 512 512 - color: var(--text-secondary); 513 513 - margin: 0 0 var(--space-5) 0; 514 514 - } 515 515 - </style>

+122 -47

frontend/src/styles/migration.css

··· 28 28 .step-dot { 29 29 width: 24px; 30 30 height: 24px; 31 31 - border-radius: 50%; 32 31 background: var(--bg-secondary); 33 33 - border: 2px solid var(--border-color); 34 32 display: flex; 35 33 align-items: center; 36 34 justify-content: center; ··· 82 80 83 81 .step-content { 84 82 background: var(--bg-secondary); 85 85 - border-radius: var(--radius-xl); 86 83 padding: var(--space-6); 87 84 } 88 85 ··· 97 94 98 95 .info-box { 99 96 background: var(--accent-muted); 100 100 - border: 1px solid var(--border-color); 101 101 - border-radius: var(--radius-lg); 102 97 padding: var(--space-5); 103 98 margin-bottom: var(--space-5); 104 99 } ··· 126 121 127 122 .warning-box { 128 123 background: var(--warning-bg); 129 129 - border: 1px solid var(--warning-border); 130 130 - border-radius: var(--radius-lg); 131 124 padding: var(--space-5); 132 125 margin-bottom: var(--space-5); 133 126 font-size: var(--text-sm); ··· 172 165 173 166 .current-info { 174 167 background: var(--bg-primary); 175 175 - border-radius: var(--radius-lg); 176 168 padding: var(--space-4); 177 169 margin-bottom: var(--space-5); 178 170 display: flex; ··· 195 187 196 188 .review-card { 197 189 background: var(--bg-primary); 198 198 - border-radius: var(--radius-lg); 199 190 padding: var(--space-4); 200 191 margin-bottom: var(--space-5); 201 192 } ··· 243 234 } 244 235 245 236 .progress-item.active { 246 246 - color: var(--accent); 237 237 + color: var(--secondary); 247 238 } 248 239 249 240 .progress-item .icon { ··· 254 245 .progress-bar { 255 246 height: 8px; 256 247 background: var(--bg-primary); 257 257 - border-radius: var(--radius-md); 258 248 overflow: hidden; 259 249 margin-bottom: var(--space-4); 260 250 } ··· 262 252 .progress-fill { 263 253 height: 100%; 264 254 background: var(--accent); 265 265 - transition: width var(--transition-slow); 266 255 } 267 256 268 257 .status-text { ··· 278 267 .blob-progress-bar { 279 268 height: 8px; 280 269 background: var(--bg-primary); 281 281 - border-radius: var(--radius-md); 282 270 overflow: hidden; 283 271 margin-bottom: var(--space-2); 284 272 } ··· 286 274 .blob-progress-fill { 287 275 height: 100%; 288 276 background: var(--accent); 289 289 - transition: width var(--transition-slow); 290 277 } 291 278 292 279 .blob-progress-text { ··· 305 292 height: 64px; 306 293 background: var(--success-bg); 307 294 color: var(--success-text); 308 308 - border-radius: 50%; 309 295 display: flex; 310 296 align-items: center; 311 297 justify-content: center; ··· 315 301 316 302 .success-details { 317 303 background: var(--bg-primary); 318 318 - border-radius: var(--radius-lg); 319 304 padding: var(--space-4); 320 305 margin: var(--space-5) 0; 321 306 text-align: left; ··· 347 332 348 333 .code-block { 349 334 background: var(--bg-primary); 350 350 - border: 1px solid var(--border-color); 351 351 - border-radius: var(--radius-lg); 352 335 padding: var(--space-4); 353 336 margin-bottom: var(--space-5); 354 337 overflow-x: auto; ··· 374 357 align-items: center; 375 358 gap: var(--space-3); 376 359 padding: var(--space-4); 377 377 - border: 2px solid var(--border-color); 378 378 - border-radius: var(--radius-lg); 379 360 cursor: pointer; 380 361 margin-bottom: 0; 381 381 - transition: 382 382 - border-color var(--transition-normal), 383 383 - background-color var(--transition-normal); 384 362 } 385 363 386 364 .auth-option:hover { 387 387 - border-color: var(--accent); 365 365 + border-color: var(--secondary); 388 366 background: var(--bg-hover); 389 367 } 390 368 391 369 .auth-option.selected { 392 392 - border-color: var(--accent); 370 370 + border-color: var(--secondary); 393 371 background: var(--accent-muted); 394 372 } 395 373 ··· 423 401 padding: var(--space-8); 424 402 } 425 403 426 426 - .spinner { 427 427 - width: 40px; 428 428 - height: 40px; 429 429 - border: 3px solid var(--border-color); 430 430 - border-top-color: var(--accent); 431 431 - border-radius: 50%; 432 432 - animation: spin 1s linear infinite; 433 433 - } 434 434 - 435 404 .passkey-section { 436 405 margin-top: var(--space-5); 437 406 text-align: center; ··· 444 413 445 414 .app-password-display { 446 415 background: var(--bg-primary); 447 447 - border-radius: var(--radius-lg); 448 416 padding: var(--space-5); 449 417 margin-bottom: var(--space-5); 450 418 text-align: center; ··· 463 431 letter-spacing: 0.1em; 464 432 padding: var(--space-4); 465 433 background: var(--bg-tertiary); 466 466 - border-radius: var(--radius-md); 467 434 margin-bottom: var(--space-4); 468 435 user-select: all; 469 436 } ··· 474 441 475 442 .current-account { 476 443 background: var(--bg-primary); 477 477 - border-radius: var(--radius-lg); 478 444 padding: var(--space-4); 479 445 margin-bottom: var(--space-5); 480 446 display: flex; ··· 493 459 494 460 .server-info { 495 461 background: var(--bg-primary); 496 496 - border-radius: var(--radius-lg); 497 462 padding: var(--space-4); 498 463 margin-top: var(--space-5); 499 464 } ··· 519 484 display: inline-block; 520 485 margin-top: var(--space-2); 521 486 margin-right: var(--space-3); 522 522 - color: var(--accent); 487 487 + color: var(--secondary); 523 488 font-size: var(--text-sm); 524 489 } 525 490 ··· 534 499 535 500 .next-steps { 536 501 background: var(--accent-muted); 537 537 - border-radius: var(--radius-lg); 538 502 padding: var(--space-5); 539 503 margin: var(--space-5) 0; 540 504 text-align: left; ··· 554 518 } 555 519 556 520 .next-steps a { 557 557 - color: var(--accent); 521 521 + color: var(--secondary); 558 522 } 559 523 560 524 .resume-info { ··· 600 564 align-items: center; 601 565 padding: var(--space-3); 602 566 background: var(--bg-primary); 603 603 - border-radius: var(--radius-md); 604 567 } 605 568 606 569 .file-name { ··· 618 581 font-size: var(--text-sm); 619 582 padding: var(--space-3); 620 583 border: 1px solid var(--border-color); 621 621 - border-radius: var(--radius-md); 622 584 background: var(--bg-input); 623 585 color: var(--text-primary); 624 586 resize: vertical; ··· 626 588 627 589 .step-content textarea:focus { 628 590 outline: none; 629 629 - border-color: var(--accent); 591 591 + border-color: var(--secondary); 630 592 } 631 593 632 594 .message { 633 595 padding: var(--space-4); 634 634 - border-radius: var(--radius-lg); 635 596 margin-bottom: var(--space-4); 636 597 } 637 598 638 599 .message.success { 639 600 background: var(--success-bg); 640 601 color: var(--success-text); 641 641 - border: 1px solid var(--success-border); 642 602 } 643 603 644 604 .message.error { 645 605 background: var(--error-bg); 646 606 color: var(--error-text); 647 647 - border: 1px solid var(--error-border); 607 607 + } 608 608 + 609 609 + .handle-choice-options { 610 610 + display: flex; 611 611 + flex-direction: column; 612 612 + gap: var(--space-3); 613 613 + } 614 614 + 615 615 + .handle-choice-option { 616 616 + display: flex; 617 617 + align-items: center; 618 618 + gap: var(--space-3); 619 619 + padding: var(--space-4); 620 620 + cursor: pointer; 621 621 + } 622 622 + 623 623 + .handle-choice-option:hover { 624 624 + border-color: var(--secondary); 625 625 + } 626 626 + 627 627 + .handle-choice-option.selected { 628 628 + border-color: var(--secondary); 629 629 + background: var(--accent-muted); 630 630 + } 631 631 + 632 632 + .handle-choice-option input[type="radio"] { 633 633 + flex-shrink: 0; 634 634 + width: 18px; 635 635 + height: 18px; 636 636 + margin: 0; 637 637 + } 638 638 + 639 639 + .handle-choice-content { 640 640 + display: flex; 641 641 + flex-direction: column; 642 642 + gap: var(--space-1); 643 643 + } 644 644 + 645 645 + .handle-preview { 646 646 + font-family: var(--font-mono); 647 647 + font-size: var(--text-sm); 648 648 + color: var(--text-secondary); 649 649 + } 650 650 + 651 651 + .existing-handle-display { 652 652 + display: flex; 653 653 + align-items: center; 654 654 + gap: var(--space-4); 655 655 + padding: var(--space-4); 656 656 + background: var(--bg-secondary); 657 657 + margin-bottom: var(--space-4); 658 658 + } 659 659 + 660 660 + .handle-value { 661 661 + font-family: var(--font-mono); 662 662 + font-size: var(--text-base); 663 663 + } 664 664 + 665 665 + .verified-badge { 666 666 + font-size: var(--text-xs); 667 667 + padding: var(--space-1) var(--space-3); 668 668 + background: var(--success-bg); 669 669 + color: var(--success-text); 670 670 + } 671 671 + 672 672 + .verification-instructions { 673 673 + background: var(--bg-secondary); 674 674 + padding: var(--space-5); 675 675 + margin-bottom: var(--space-4); 676 676 + } 677 677 + 678 678 + .instruction-header { 679 679 + margin: 0 0 var(--space-4) 0; 680 680 + font-size: var(--text-sm); 681 681 + color: var(--text-secondary); 682 682 + } 683 683 + 684 684 + .instruction-or { 685 685 + margin: var(--space-3) 0; 686 686 + font-size: var(--text-xs); 687 687 + color: var(--text-muted); 688 688 + text-align: center; 689 689 + } 690 690 + 691 691 + .verification-record { 692 692 + display: flex; 693 693 + flex-direction: column; 694 694 + gap: var(--space-2); 695 695 + } 696 696 + 697 697 + .verification-record code { 698 698 + font-size: var(--text-sm); 699 699 + padding: var(--space-3); 700 700 + background: var(--bg-tertiary); 701 701 + overflow-x: auto; 702 702 + word-break: break-all; 703 703 + } 704 704 + 705 705 + .record-content { 706 706 + font-size: var(--text-xs); 707 707 + color: var(--text-secondary); 708 708 + padding-left: var(--space-3); 709 709 + } 710 710 + 711 711 + .record-content code { 712 712 + padding: var(--space-1) var(--space-2); 713 713 + font-size: var(--text-xs); 714 714 + } 715 715 + 716 716 + .verify-btn { 717 717 + width: 100%; 718 718 + } 719 719 + 720 720 + .passkey-section button { 721 721 + width: 100%; 722 722 + margin-top: 12px; 648 723 }