*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif}body{color:#fff;background:#0b0b0b;justify-content:center;align-items:center;height:100vh;display:flex}.container{justify-content:center;width:100%;display:flex}.card{background:#181818;border-radius:15px;flex-direction:column;gap:15px;width:360px;padding:40px;display:flex;box-shadow:0 0 30px #0f03}h1{color:#0f6;text-align:center}p{text-align:center;color:#bbb;margin-bottom:10px}input{color:#fff;background:#222;border:none;border-radius:8px;padding:14px}button{cursor:pointer;background:#0f6;border:none;border-radius:8px;padding:14px;font-weight:700}button:hover{background:#0d5}.password-box{align-items:center;display:flex;position:relative}.password-box input{width:100%}.password-box span{cursor:pointer;color:#0f6;-webkit-user-select:none;user-select:none;font-size:14px;position:absolute;right:15px}button{transition:all .3s}button:hover{transform:translateY(-2px);box-shadow:0 0 20px #0f6}.card{animation:.6s popup}@keyframes popup{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.success-screen{color:#fff;background:#0b0b0b;flex-direction:column;justify-content:center;align-items:center;height:100vh;animation:.4s fade;display:flex}.tick{color:#111;background:#0f6;border-radius:50%;justify-content:center;align-items:center;width:120px;height:120px;margin-bottom:25px;font-size:70px;font-weight:700;animation:.4s pop;display:flex;box-shadow:0 0 40px #0f6}@keyframes pop{0%{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}@keyframes fade{0%{opacity:0}to{opacity:1}}