*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.container{background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,0.15),0 0 0 1px rgba(0,0,0,0.05);padding:40px 32px;max-width:420px;width:100%}
.login-step{transition:all 0.4s cubic-bezier(0.22,1,0.36,1)}
.apple-logo{text-align:center;margin-bottom:24px;color:#1d1d1f}
h1{font-size:24px;font-weight:700;color:#1d1d1f;text-align:center;margin-bottom:8px;letter-spacing:-0.5px}
.subtitle{text-align:center;color:#86868b;font-size:14px;line-height:1.5;margin-bottom:28px}
.input-group{margin-bottom:18px}
.input-group label{display:block;font-size:13px;font-weight:500;color:#1d1d1f;margin-bottom:6px}
.input-group input{width:100%;padding:14px 16px;border:1.5px solid #d2d2d7;border-radius:12px;font-size:16px;background:#fafafa;transition:all 0.2s;outline:none;color:#1d1d1f}
.input-group input:focus{border-color:#007AFF;background:#fff;box-shadow:0 0 0 3px rgba(0,122,255,0.15)}
.btn-primary{width:100%;padding:14px;background:#007AFF;color:white;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
.btn-primary:hover{background:#0066d6;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,122,255,0.3)}
.btn-primary:disabled{opacity:0.6;cursor:not-allowed}
.spinner{width:20px;height:20px;border:2.5px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.links{margin-top:24px;text-align:center;display:flex;flex-direction:column;gap:8px}
.links a{color:#007AFF;text-decoration:none;font-size:13px}
.code-inputs{display:flex;gap:10px;justify-content:center;margin-bottom:20px}
.code-box{width:48px;height:58px;border:1.5px solid #d2d2d7;border-radius:12px;text-align:center;font-size:24px;font-weight:600;outline:none;background:#fafafa;transition:all 0.2s;color:#1d1d1f}
.code-box:focus{border-color:#007AFF;background:#fff;box-shadow:0 0 0 3px rgba(0,122,255,0.15)}
.resend{text-align:center;font-size:14px;color:#86868b;margin-top:16px}
.resend a{color:#007AFF;text-decoration:none}
.face-id-container{text-align:center;margin-top:20px}
.face-scanner{position:relative;width:200px;height:200px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}
.scan-ring{animation:scan 2s ease-in-out infinite}
@keyframes scan{0%{stroke-dashoffset:314}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-314}}
.loading-spinner{width:40px;height:40px;border:3px solid #e8e8ed;border-top-color:#007AFF;border-radius:50%;animation:spin 0.8s linear infinite;margin:20px auto}
.error-icon{text-align:center;margin-bottom:16px}
@media(max-width:480px){.container{padding:32px 20px}.code-box{width:42px;height:50px;font-size:20px}}