*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:root{--accent:#5b5ef4;--accent-hover:#4a4de0;--accent-light:rgba(91,94,244,0.12);--accent-border:rgba(91,94,244,0.25);--accent-glow:rgba(91,94,244,0.15);--accent-muted:#8b8ff8;--bg-page:#0f1117;--bg-card:#181c2a;--bg-input:#0f1117;--border:#2a2f45;--text-primary:#e8e8f0;--text-secondary:#6b7090;--text-label:#8a8fa8;--text-dim:#3a3f55;--error-bg:rgba(220,60,60,0.1);--error-border:rgba(220,60,60,0.35);--error-text:#e07070;--success-bg:rgba(30,180,100,0.1);--success-border:rgba(30,180,100,0.3);--success-text:#5ecb8a;--success-strong:#7de8a8;--font:-apple-system,'Segoe UI',sans-serif;--mono:'Courier New',monospace;--radius:8px;--radius-card:14px}body{font-family:var(--font);background:var(--bg-page);min-height:100dvh;display:flex;align-items:center;justify-content:center}#auth-root{width:100%}.page{display:flex;flex-direction:column;align-items:center;padding:2rem;width:100%}.logo-wrap{display:flex;align-items:center;gap:10px;margin-bottom:2rem}.logo-icon{width:38px;height:38px;background:var(--accent);border-radius:9px;display:flex;align-items:center;justify-content:center;transition:transform 0.3s ease}.logo-icon:hover{transform:scale(1.08)}.logo-icon svg{width:22px;height:22px}.logo-text{font-size:20px;font-weight:500;color:var(--text-primary);letter-spacing:-0.3px}.logo-text span{color:var(--accent-muted)}.card-outer{width:100%;max-width:400px}.card{position:relative;background:var(--bg-card);border:0.5px solid var(--border);border-radius:var(--radius-card);width:100%;overflow:hidden;transform-origin:center top;will-change:transform,opacity}.step{display:none;width:100%;padding:2rem 2.25rem}.step.active{display:block}.card.page-out-left{animation:cardPageOutLeft 0.28s cubic-bezier(0.4,0,0.2,1) forwards}.card.page-out-right{animation:cardPageOutRight 0.28s cubic-bezier(0.4,0,0.2,1) forwards}.card.page-in-right{animation:cardPageInRight 0.32s cubic-bezier(0.22,1,0.36,1) forwards}.card.page-in-left{animation:cardPageInLeft 0.32s cubic-bezier(0.22,1,0.36,1) forwards}@keyframes cardPageOutLeft{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(-28px) scale(0.985)}}@keyframes cardPageOutRight{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(28px) scale(0.985)}}@keyframes cardPageInRight{from{opacity:0;transform:translateX(28px) scale(0.985)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes cardPageInLeft{from{opacity:0;transform:translateX(-28px) scale(0.985)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.badge{display:inline-flex;align-items:center;gap:5px;background:var(--accent-light);border:0.5px solid var(--accent-border);border-radius:20px;padding:3px 10px;font-size:11px;color:var(--accent-muted);margin-bottom:1.5rem}.badge-dot{width:5px;height:5px;background:var(--accent);border-radius:50%;animation:pulse 2s ease infinite}.card-title{font-size:17px;font-weight:500;color:var(--text-primary);margin-bottom:0.25rem}.card-sub{font-size:13px;color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.5}.card-sub b{color:var(--accent-muted);font-weight:500}.breadcrumb{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim);margin-bottom:1.25rem}.bc-link{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;transition:color 0.15s}.bc-link:hover{color:var(--accent-muted)}.breadcrumb-sep{color:var(--text-dim)}.divider{border:none;border-top:0.5px solid var(--border);margin:1.25rem 0}.field{margin-bottom:1rem}.field label{display:block;font-size:12px;color:var(--text-label);margin-bottom:6px;letter-spacing:0.3px}.field input,.recovery-input{width:100%;background:var(--bg-input);border:0.5px solid var(--border);border-radius:var(--radius);padding:10px 12px;font-size:14px;color:var(--text-primary);outline:none;transition:border-color 0.2s,box-shadow 0.2s;font-family:var(--font)}.field input:focus,.recovery-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.field input.err-input{border-color:rgba(220,60,60,0.6)}.field input::placeholder{color:#40455c}.field-hint{font-size:11px;color:var(--error-text);margin-top:5px;display:none}.field-hint.show{display:block}.recovery-input{font-family:var(--mono);letter-spacing:2px;text-align:center}.recovery-input::placeholder{color:#40455c;letter-spacing:0;font-family:var(--font);font-size:13px}.hint{font-size:12px;color:var(--text-secondary);margin-top:1rem}.forgot-link{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--accent);cursor:pointer;transition:color 0.15s}.forgot-link:hover{color:var(--accent-muted)}.btn{width:100%;background:var(--accent);border:none;border-radius:var(--radius);padding:11px;font-size:14px;font-weight:500;color:#fff;cursor:pointer;transition:background 0.15s,transform 0.1s,opacity 0.15s;font-family:var(--font)}.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn:active{transform:translateY(0) scale(0.98)}.btn:disabled{opacity:0.5;cursor:default;transform:none}.error-box{background:var(--error-bg);border:0.5px solid var(--error-border);border-radius:var(--radius);padding:10px 14px;font-size:13px;color:var(--error-text);margin-bottom:1.25rem;display:none;align-items:center;gap:8px}.error-box.show{display:flex;animation:shake 0.4s ease}.error-dot{width:6px;height:6px;background:var(--error-text);border-radius:50%;flex-shrink:0}.success-box{background:var(--success-bg);border:0.5px solid var(--success-border);border-radius:var(--radius);padding:14px 16px;font-size:13px;color:var(--success-text);display:none;line-height:1.6;margin-bottom:1rem}.success-box.show{display:block;animation:fadeUp 0.4s ease}.success-box strong{font-weight:500;color:var(--success-strong)}.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;margin-right:6px}.back-link{background:none;border:0;padding:0;font:inherit;text-align:center;margin-top:1rem;font-size:12px;color:var(--accent);cursor:pointer;transition:color 0.15s}.back-link:hover{color:var(--accent-muted)}.otp-wrap{display:flex;gap:10px;justify-content:center;margin-bottom:1.5rem}.otp-wrap input{width:46px;height:52px;text-align:center;font-size:20px;font-weight:500;background:var(--bg-input);border:0.5px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-family:var(--mono);caret-color:var(--accent);outline:none;padding:0;transition:border-color 0.15s,transform 0.15s,box-shadow 0.15s}.otp-wrap input:focus{border-color:var(--accent);transform:scale(1.06);box-shadow:0 0 0 3px var(--accent-glow)}.otp-wrap input.filled{border-color:var(--accent);background:rgba(91,94,244,0.06)}.otp-hint{font-size:12px;color:var(--text-secondary);text-align:center;margin-bottom:1.5rem;line-height:1.5}.otp-hint b{color:var(--accent-muted);font-weight:500}.tab-row{display:flex;border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1.5rem}.tab-btn{flex:1;background:transparent;border:none;padding:9px 8px;font-size:12px;color:var(--text-secondary);cursor:pointer;font-family:var(--font);transition:background 0.2s,color 0.2s}.tab-btn.active{background:var(--accent);color:#fff;font-weight:500}.tab-content.tab-fade-out{animation:tabFadeOut 0.12s ease-in forwards}.tab-content.tab-fade-in{animation:tabFadeIn 0.16s ease-out}@keyframes tabFadeOut{from{opacity:1}to{opacity:0}}@keyframes tabFadeIn{from{opacity:0}to{opacity:1}}.footer{margin-top:1.5rem;font-size:11px;color:var(--text-dim);text-align:center}@media (max-width:480px){.page{padding:1.25rem}.step{padding:1.5rem}.otp-wrap input{width:40px;height:46px;font-size:18px}.otp-wrap{gap:7px}}