.email-container{background:linear-gradient(135deg,#f5f7fa 0%,#e4e8f0 100%);justify-content:center;align-items:center;width:100%;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;display:flex;position:relative;overflow:hidden}.email-card{z-index:10;background:#fff;border-radius:16px;width:100%;max-width:420px;padding:40px 30px;animation:.6s ease-out cardAppear;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000014}@keyframes cardAppear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card-header{text-align:center;margin-bottom:30px}.logo-container{justify-content:center;margin-bottom:20px;display:flex}.logo-circle{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;animation:2s infinite pulse;display:flex;box-shadow:0 10px 20px #6366f14d}@keyframes pulse{0%{box-shadow:0 0 #6366f166}70%{box-shadow:0 0 0 15px #6366f100}to{box-shadow:0 0 #6366f100}}.logo-icon{fill:#fff;width:36px;height:36px}.card-header h2{color:#1f2937;margin:0 0 8px;font-size:24px;font-weight:700}.card-header p{color:#6b7280;margin:0;font-size:16px}.input-group{margin-bottom:30px}.custom-input{margin-bottom:20px;position:relative}.custom-input input{color:#1f2937;z-index:1;background-color:#f3f4f6;border:none;border-radius:8px;outline:none;width:100%;height:56px;padding:20px 16px 8px;font-size:16px;transition:all .3s;position:relative}.floating-label{color:#6b7280;pointer-events:none;z-index:2;font-size:16px;transition:all .3s;position:absolute;top:18px;left:16px}.floating-label.active{color:#6366f1;font-size:12px;top:8px}.custom-input.invalid input{background-color:#fee2e2}.validation-icon{z-index:2;width:20px;height:20px;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.validation-icon svg{width:100%;height:100%}.validation-icon.valid svg{fill:#10b981}.validation-icon.invalid svg{fill:#ef4444}.error-message,.validation-message{color:#ef4444;margin:5px 0 0;font-size:14px;animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.sign-in-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);border:none;border-radius:8px;justify-content:center;align-items:center;width:100%;height:56px;font-size:16px;font-weight:600;transition:all .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 12px #6366f14d}.sign-in-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #6366f166}.sign-in-button:active{transform:translateY(0);box-shadow:0 2px 8px #6366f14d}.sign-in-button.disabled{cursor:not-allowed;box-shadow:none;background:linear-gradient(135deg,#a5a6f6 0%,#c4b5f8 100%);transform:none}.button-text{align-items:center;transition:all .3s;display:flex}.button-icon{opacity:0;width:20px;height:20px;margin-left:8px;transition:all .3s;transform:translate(-10px)}.button-icon svg{fill:#fff;width:100%;height:100%}.sign-in-button:hover .button-icon{opacity:1;transform:translate(0)}.sign-in-button.animating .button-text,.sign-in-button.animating .button-icon{opacity:0}.loading-spinner{opacity:0;border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:24px;height:24px;transition:opacity .3s;animation:1s linear infinite spin;position:absolute}.sign-in-button.animating .loading-spinner{opacity:1}@keyframes spin{to{transform:rotate(360deg)}}.alternative-options{margin-top:30px}.divider{align-items:center;margin:20px 0;display:flex}.divider-line{background-color:#e5e7eb;flex-grow:1;height:1px}.divider-text{color:#9ca3af;padding:0 15px;font-size:14px}.social-buttons{flex-direction:column;gap:12px;display:flex}.social-button{color:#4b5563;cursor:pointer;background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;justify-content:center;align-items:center;height:48px;font-size:15px;font-weight:500;transition:all .2s;display:flex}.social-button:hover{background-color:#f9fafb;border-color:#d1d5db}.social-button svg{width:20px;height:20px;margin-right:10px}.social-button.google svg{fill:#ea4335}.background-shapes{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.shape{opacity:.4;border-radius:50%;position:absolute}.shape-1{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);width:300px;height:300px;animation:15s infinite alternate float;top:-150px;left:-150px}.shape-2{background:linear-gradient(135deg,#8b5cf6 0%,#ec4899 100%);width:200px;height:200px;animation:20s infinite alternate-reverse float;bottom:-100px;right:-100px}.shape-3{background:linear-gradient(135deg,#ec4899 0%,#f43f5e 100%);width:150px;height:150px;animation:18s infinite alternate float;top:60%;left:-75px}.shape-4{background:linear-gradient(135deg,#f43f5e 0%,#6366f1 100%);width:100px;height:100px;animation:12s infinite alternate-reverse float;top:10%;right:-50px}@keyframes float{0%{transform:translate(0)rotate(0)}to{transform:translate(30px,30px)rotate(15deg)}}@media (max-width:480px){.email-card{border-radius:12px;padding:30px 20px}.logo-circle{width:60px;height:60px}.logo-icon{width:30px;height:30px}.card-header h2{font-size:22px}.card-header p{font-size:14px}}
.otp-container{background:linear-gradient(135deg,#f5f7fa 0%,#e4e8f0 100%);justify-content:center;align-items:center;width:100%;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;display:flex;position:relative;overflow:hidden}.otp-card{z-index:10;background:#fff;border-radius:16px;width:100%;max-width:420px;padding:40px 30px;animation:.6s ease-out cardAppear;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000014}@keyframes cardAppear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card-header{text-align:center;margin-bottom:30px}.logo-container{justify-content:center;margin-bottom:20px;display:flex}.logo-circle{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;animation:2s infinite pulse;display:flex;box-shadow:0 10px 20px #6366f14d}@keyframes pulse{0%{box-shadow:0 0 #6366f166}70%{box-shadow:0 0 0 15px #6366f100}to{box-shadow:0 0 #6366f100}}.logo-icon{fill:#fff;width:36px;height:36px}.card-header h2{color:#1f2937;margin:0 0 8px;font-size:24px;font-weight:700}.card-header p{color:#6b7280;margin:0 0 8px;font-size:16px}.email-display{color:#4b5563;word-break:break-all;background-color:#f3f4f6;border-radius:8px;max-width:90%;margin:8px auto;padding:8px 16px;font-size:16px;font-weight:600}.otp-input-group{justify-content:space-between;gap:10px;margin:30px 0;display:flex}.otp-input{text-align:center;color:#1f2937;background-color:#f9fafb;border:2px solid #e5e7eb;border-radius:8px;outline:none;width:50px;height:60px;font-size:24px;font-weight:600;transition:all .3s}.otp-input:focus{background-color:#fff;border-color:#6366f1;box-shadow:0 0 0 3px #6366f133}.otp-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.otp-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.error-message{color:#ef4444;text-align:center;margin:0 0 20px;font-size:14px;animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.submit-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);border:none;border-radius:8px;justify-content:center;align-items:center;width:100%;height:56px;margin-bottom:20px;font-size:16px;font-weight:600;transition:all .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 12px #6366f14d}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #6366f166}.submit-button:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #6366f14d}.submit-button.disabled{cursor:not-allowed;box-shadow:none;background:linear-gradient(135deg,#a5a6f6 0%,#c4b5f8 100%);transform:none}.button-text{align-items:center;transition:all .3s;display:flex}.submit-button.submitting .button-text{opacity:0}.loading-spinner{opacity:0;border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:24px;height:24px;transition:opacity .3s;animation:1s linear infinite spin;position:absolute}.submit-button.submitting .loading-spinner{opacity:1}@keyframes spin{to{transform:rotate(360deg)}}.action-links{flex-direction:column;align-items:center;gap:15px;display:flex}.resend-link,.back-link{cursor:pointer;background:0 0;border:none;padding:0;font-size:14px;transition:color .2s}.resend-link.active{color:#6366f1;font-weight:500}.resend-link.active:hover{text-decoration:underline}.resend-link.disabled{color:#9ca3af;cursor:default}.resend-link.resending{color:#9ca3af;cursor:wait}.back-link{color:#6b7280}.back-link:hover{color:#4b5563;text-decoration:underline}.background-shapes{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.shape{opacity:.4;border-radius:50%;position:absolute}.shape-1{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);width:300px;height:300px;animation:15s infinite alternate float-bg;top:-150px;left:-150px}.shape-2{background:linear-gradient(135deg,#8b5cf6 0%,#ec4899 100%);width:200px;height:200px;animation:20s infinite alternate-reverse float-bg;bottom:-100px;right:-100px}.shape-3{background:linear-gradient(135deg,#ec4899 0%,#f43f5e 100%);width:150px;height:150px;animation:18s infinite alternate float-bg;top:60%;left:-75px}.shape-4{background:linear-gradient(135deg,#f43f5e 0%,#6366f1 100%);width:100px;height:100px;animation:12s infinite alternate-reverse float-bg;top:10%;right:-50px}@keyframes float-bg{0%{transform:translate(0)rotate(0)}to{transform:translate(30px,30px)rotate(15deg)}}@media (max-width:480px){.otp-card{border-radius:12px;padding:30px 20px}.logo-circle{width:60px;height:60px}.logo-icon{width:30px;height:30px}.card-header h2{font-size:22px}.card-header p{font-size:14px}.otp-input{width:40px;height:50px;font-size:20px}}
.name-prompt-container{background:linear-gradient(135deg,#f5f7fa 0%,#e4e8f0 100%);justify-content:center;align-items:center;width:100%;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;display:flex;position:relative;overflow:hidden}.name-prompt-card{z-index:10;background:#fff;border-radius:16px;width:100%;max-width:420px;padding:40px 30px;animation:.6s ease-out cardAppear;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000014}@keyframes cardAppear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card-header{text-align:center;margin-bottom:30px}.logo-container{justify-content:center;margin-bottom:20px;display:flex}.logo-circle{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;animation:2s infinite pulse;display:flex;box-shadow:0 10px 20px #6366f14d}@keyframes pulse{0%{box-shadow:0 0 #6366f166}70%{box-shadow:0 0 0 15px #6366f100}to{box-shadow:0 0 #6366f100}}.logo-icon{fill:#fff;width:36px;height:36px}.card-header h2{color:#1f2937;margin:0 0 8px;font-size:24px;font-weight:700}.card-header p{color:#6b7280;margin:0 0 8px;font-size:16px}.email-display{color:#4b5563;word-break:break-all;background-color:#f3f4f6;border-radius:8px;max-width:90%;margin:12px auto 0;padding:8px 16px;font-size:16px;font-weight:600}.input-group{margin-bottom:30px}.custom-input{margin-bottom:20px;position:relative}.custom-input input{color:#1f2937;z-index:1;background-color:#f3f4f6;border:none;border-radius:8px;outline:none;width:100%;height:56px;padding:20px 16px 8px;font-size:16px;transition:all .3s;position:relative}.floating-label{color:#6b7280;pointer-events:none;z-index:2;font-size:16px;transition:all .3s;position:absolute;top:18px;left:16px}.floating-label.active{color:#6366f1;font-size:12px;top:8px}.custom-input.invalid input{background-color:#fee2e2}.validation-icon{z-index:2;width:20px;height:20px;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.validation-icon svg{width:100%;height:100%}.validation-icon.valid svg{fill:#10b981}.validation-icon.invalid svg{fill:#ef4444}.error-message,.validation-message{color:#ef4444;margin:5px 0 0;font-size:14px;animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.submit-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);border:none;border-radius:8px;justify-content:center;align-items:center;width:100%;height:56px;font-size:16px;font-weight:600;transition:all .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 12px #6366f14d}.submit-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #6366f166}.submit-button:active{transform:translateY(0);box-shadow:0 2px 8px #6366f14d}.submit-button.disabled{cursor:not-allowed;box-shadow:none;background:linear-gradient(135deg,#a5a6f6 0%,#c4b5f8 100%);transform:none}.button-text{align-items:center;transition:all .3s;display:flex}.button-icon{opacity:0;width:20px;height:20px;margin-left:8px;transition:all .3s;transform:translate(-10px)}.button-icon svg{fill:#fff;width:100%;height:100%}.submit-button:hover .button-icon{opacity:1;transform:translate(0)}.submit-button.submitting .button-text,.submit-button.submitting .button-icon{opacity:0}.loading-spinner{opacity:0;border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:24px;height:24px;transition:opacity .3s;animation:1s linear infinite spin;position:absolute}.submit-button.submitting .loading-spinner{opacity:1}@keyframes spin{to{transform:rotate(360deg)}}.background-shapes{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.shape{opacity:.4;border-radius:50%;position:absolute}.shape-1{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);width:300px;height:300px;animation:15s infinite alternate float;top:-150px;left:-150px}.shape-2{background:linear-gradient(135deg,#8b5cf6 0%,#ec4899 100%);width:200px;height:200px;animation:20s infinite alternate-reverse float;bottom:-100px;right:-100px}.shape-3{background:linear-gradient(135deg,#ec4899 0%,#f43f5e 100%);width:150px;height:150px;animation:18s infinite alternate float;top:60%;left:-75px}.shape-4{background:linear-gradient(135deg,#f43f5e 0%,#6366f1 100%);width:100px;height:100px;animation:12s infinite alternate-reverse float;top:10%;right:-50px}@keyframes float{0%{transform:translate(0)rotate(0)}to{transform:translate(30px,30px)rotate(15deg)}}@media (max-width:480px){.name-prompt-card{border-radius:12px;padding:30px 20px}.logo-circle{width:60px;height:60px}.logo-icon{width:30px;height:30px}.card-header h2{font-size:22px}.card-header p{font-size:14px}}